Performance

[gusdaud-zz]

Hey, is there a more performatic method of doing translations other than intl.formatMessage ?

I've being using Chrome console and react developer tools ($r is the reference for my component that includes react-intl by using injectIntl injector) to test its performance. If I run:

console.time('intl');
$r.props.intl.formatMessage({ id: 'Devices.AddModal.Items.Identity.SelectRoleDropdownValue' });
console.timeEnd('intl');

Chrome tells me that it took 0.02001953125ms to execute.

But by accessing its internal messages variable directly:

console.time('direct');
$r.props.intl.messages['Devices.AddModal.Items.Identity.SelectRoleDropdownValue'];
console.timeEnd('direct');

It only takes 0.0048828125ms.

Couldn't the formatMessage method be more optimized, for instance if there isn't a second parameter for formatMessage it only returns what is inside the messages variable like I did above.
Or am I doing something wrong ?

[gusdaud-zz]

Here's a plugin that do the transformation (intl.formatMessage to intl.messages).

There is a lot of room to improve it, like I shouldn't be assuming that every formatMessage with one object parameter having id is from react-intl, not checking if react-intl is in the import file and not handling FormattedMessage. But it may help others like it did for me.

Credits goes to Michael Jungo in his response to my stack overflow question:
https://stackoverflow.com/questions/46733914/babel-plugin-development-for-react-intl

module.exports = function plugin(babel) {
  const t = babel.types;

  return {
    visitor: {
      CallExpression(path) {
        if (t.isMemberExpression(path.node.callee) &&
           t.isIdentifier(path.node.callee.property, { name: 'formatMessage' }) &&
           path.node.arguments.length === 1 &&
           t.isObjectExpression(path.node.arguments[0])) {
          const idProp = path.node.arguments[0].properties.find(prop => t.isIdentifier(prop.key, { name: 'id' }));
          if (idProp) {
            const memberExp = t.memberExpression(t.memberExpression(path.node.callee.object, t.identifier('messages')), idProp.value, true);
            path.replaceWith(memberExp);
          }
        }
      },
    },
  };
};

To implement it, save in a file (like transform.js) and add this to babel.rc:

{
  "presets": [
    ...
  ],
  "env": {
    "production": { "plugins": ["./transform"] },
  }
}

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

Issue was closed because of inactivity. If you think this is still a valid issue, please file a new issue with additional information.