GithubHelp home page GithubHelp logo

cibernox / babel-plugin-precompile-intl Goto Github PK

View Code? Open in Web Editor NEW
8.0 8.0 4.0 811 KB

Compile translations in ICU message format to invocable functions at build time

JavaScript 24.85% TypeScript 75.15%

babel-plugin-precompile-intl's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

babel-plugin-precompile-intl's Issues

Could not load locales file when default export is not an ObjectExpression

Hi, just running into a small issue when using svelte-intl-precompile, when you have a locale file that declares a default export, it throws an error when the default export is a node of type "Identifier" (e.g. const locale = {}; export default locale; but works as expected when the node is the type "ObjectExpression" (e.g. export default {}).

Here's a minimal reproduction: https://stackblitz.com/edit/sveltejs-kit-template-default-jm1kse?file=locales/en.js

Here's the error

[svelte-intl-precompile] Could not load $locales/en (imported by $locales): /packages/app/src/locales/en.js: Cannot read propert
ies of undefined (reading 'forEach')                                                                                                                    
> Could not load $locales/en (imported by $locales): /packages/app/src/locales/en.js: Cannot read properties of undefined (readi
ng 'forEach')                                                                                                                                           
    at flattenObjectProperties (/node_modules/.pnpm/[email protected]/node_modules/babel-plugin-precompile-intl
/src/index.js:169:32)                                                                                                                                   
    at PluginPass.ExportDefaultDeclaration (/Users/connor/wk/ui/main/node_modules/.pnpm/[email protected]/node_modules/babel-plugin-pre
compile-intl/src/index.js:216:11)                                                                                                                       
    at newFn (/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/visitors.js:177:21)                   
    at NodePath._call (/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/path/context.js:53:20)       
    at NodePath.call (/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/path/context.js:40:17)        
    at NodePath.visit (/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/path/context.js:100:31)      
    at TraversalContext.visitQueue (/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/context.js:103:1
6)                                                                                                                                                      
    at TraversalContext.visitMultiple (/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/context.js:72
:17)                                                                                                                                                    
    at TraversalContext.visit (/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/context.js:129:19)   
    at traverseNode (/node_modules/.pnpm/@[email protected]/node_modules/@babel/traverse/lib/traverse-node.js:24:17)  

This is the babel node that throws the error, notice declaration: Node { type: 'Identifier' , ... } is missing the "properties" property?

transforming (170) $locales{                                                                                                                            
  node: Node {                                                                                                                                          
    type: 'ExportDefaultDeclaration',                                                                                                                   
    start: 71,                                                                                                                                          
    end: 89,                                                                                                                                            
    loc: SourceLocation {                                                                                                                               
      start: [Position],                                                                                                                                
      end: [Position],                                                                                                                                  
      filename: undefined,                                                                                                                              
      identifierName: undefined                                                                                                                         
    },                                                                                                                                                  
    declaration: Node {                                                                                                                                 
      type: 'Identifier',                                                                                                                               
      start: 86,                                                                                                                                        
      end: 88,                                                                                                                                          
      loc: [SourceLocation],                                                                                                                            
      name: 'en',                                                                                                                                       
      leadingComments: undefined,                                                                                                                       
      innerComments: undefined,                                                                                                                         
      trailingComments: undefined                                                                                                                       
    },                                                                                                                                                  
    leadingComments: undefined,                                                                                                                         
    innerComments: undefined,                                                                                                                           
    trailingComments: undefined                                                                                                                         
  }                                                                                                                                                     
}                                                                                                                                                       

Works when node type is "ObjectExpression", because it has the "properties" property is an array.

transforming (95) $locales{                                                                                                                             
  node: Node {                                                                                                                                          
    type: 'ExportDefaultDeclaration',                                                                                                                   
    start: 124,                                                                                                                                         
    end: 197,                                                                                                                                           
    loc: SourceLocation {                                                                                                                               
      start: [Position],                                                                                                                                
      end: [Position],                                                                                                                                  
      filename: undefined,                                                                                                                              
      identifierName: undefined                                                                                                                         
    },                                                                                                                                                  
    declaration: Node {                                                                                                                                 
      type: 'ObjectExpression',                                                                                                                         
      start: 139,                                                                                                                                       
      end: 196,                                                                                                                                         
      loc: [SourceLocation],                                                                                                                            
      properties: [Array],                                                                                                                              
      extra: [Object],                                                                                                                                  
      leadingComments: undefined,                                                                                                                       
      innerComments: undefined,                                                                                                                         
      trailingComments: undefined                                                                                                                       
    },                                                                                                                                                  
    leadingComments: [ [Object], [Object], [Object], [Object], [Object], [Object] ],                                                                    
    innerComments: undefined,                                                                                                                           
    trailingComments: undefined                                                                                                                         
  }                                                                                                                                                     
} 

Would be best to handle both types, but just noting it in documentation someplace (website or readme) would be good too.

Thank you :)

Possible room for improvement

Saw some warnings that might be of interest.

warning svelte-intl-precompile > babel-plugin-precompile-intl > [email protected]: We've written a new parser that's 6x faster and is backwards compatible. Please use @formatjs/icu-messageformat-parser

warning svelte-intl-precompile > babel-plugin-precompile-intl > intl-messageformat-parser > @formatjs/[email protected]: We have renamed the package to @formatjs/intl-numberformat

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.