You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Because I'm using ESBuild for my project and I couldn't afford to use any of the transformation tooling provided as they are all based on AST which ESBuild don't support, I developed a solution using template string which are easier to parse.
So my solution was to create a package called @formatjs/i18n-tag.
functioni18n(id: string): MessageDescriptorfunctioni18n(template: {raw: readonlystring[]|ArrayLike<string>}, ...substitutions: any[]): MessageDescriptorfunctioni18n(...args: any[]): MessageDescriptor{if(typeofargs[0]==='string'){return{id: args[0]}}thrownewTypeError(`i18n must not execute with template string at runtime`);}
When developing we define the i18n tag in the code
So basically I was able to use simple RegExp like this
/(.{0,3})(i18n\s*)\`(?:[^`\\]|\\.)*\`/m
to find the template tag in the code and be able to replace with the id using interpolateName from ts-transformer. After I find the i18n tag statement I try to find the closest comment code to catch an optional description using a RegExp like
/^\s*\/\*[\s\S]*?\*\//m
Another aspect of this solution is that it also works well with the imperative API. Because we use this approach at the code formatting level and Prettier runs right after this formatting, code is always formatted accordingly.
constintl=useIntl();intl.formatMessage(i18n`{total, plural, =0 {no user online} =1 {one user online} other {# users online}}`/* Users online message */,{total: 10})
transforms to
constintl=useIntl();intl.formatMessage(i18n('wL7VAE')/* `{total, plural, =0 {no user online} =1 {one user online} other {# users online}}` Users online message */,{total: 10})
That being said, I'm opening a discussion on this to validate template tag + code formatter as an alternative for AST transformation during bundling time. Another advantage for this solution is that we don't need to worry about sourcemap conflicts and because defaultMessage and description are declared as comments for maintaining the self-management aspect, in production ESBuild conveniently is able to remove these comments from compiled files.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Because I'm using ESBuild for my project and I couldn't afford to use any of the transformation tooling provided as they are all based on AST which ESBuild don't support, I developed a solution using template string which are easier to parse.
So my solution was to create a package called
@formatjs/i18n-tag
.When developing we define the i18n tag in the code
Then I've added a script to my code formatter that runs along with Prettier that transform the code above to:
and catch
defaultMessage
anddescription
that then are stored in the locale file for default languageSo basically I was able to use simple RegExp like this
to find the template tag in the code and be able to replace with the id using
interpolateName
fromts-transformer
. After I find the i18n tag statement I try to find the closest comment code to catch an optional description using a RegExp likeAnother aspect of this solution is that it also works well with the imperative API. Because we use this approach at the code formatting level and Prettier runs right after this formatting, code is always formatted accordingly.
transforms to
That being said, I'm opening a discussion on this to validate template tag + code formatter as an alternative for AST transformation during bundling time. Another advantage for this solution is that we don't need to worry about sourcemap conflicts and because
defaultMessage
anddescription
are declared as comments for maintaining the self-management aspect, in production ESBuild conveniently is able to remove these comments from compiled files.Beta Was this translation helpful? Give feedback.
All reactions