Skip to content
This repository has been archived by the owner. It is now read-only.

FormattedMessage in ArrowFunction is not captured #125

Closed
lzhuor opened this issue Sep 13, 2017 · 1 comment
Closed

FormattedMessage in ArrowFunction is not captured #125

lzhuor opened this issue Sep 13, 2017 · 1 comment

Comments

@lzhuor
Copy link

@lzhuor lzhuor commented Sep 13, 2017

Hi folks, we have been trying to fix this issue for a day but couldn't so we're looking for your help here:

Basically, the visitor doesn't parseArrowFunction when declaring a stateless React Component

Snippet

// @flow
import * as React from 'react';
import { FormattedMessage } from 'react-intl';
import styled from 'styled-components';
import * as colors from '../../../../../../utils/styled/colors';

const Activity = styled.div`
  h1.title,
  p.message {
    color: ${colors.white};
  }
  button.link {
    color: ${colors.white};
    text-decoration: none;
  }
`;

const OnBoardingCompleted = () => (
  <Activity>
    <div className="row">
      <div className="columns small-12 medium-8 medium-offset-2 end">
        <FormattedMessage
          id="headers.notifications.on_boarding_completed.account_verified"
          defaultMessage="Your account has been verified."
        >
          {(...msg) => <h1 className="title">{msg}</h1>}
        </FormattedMessage>
      </div>

      <div className="columns small-12">
        <FormattedMessage id="labels.close" defaultMessage="Close">
          {(...msg) => (
            <button type="button" name="dismiss" className="button link wide">
              {msg}
            </button>
          )}
        </FormattedMessage>
      </div>
    </div>
  </Activity>
);

export default OnBoardingCompleted;

Our .babelrc:

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "browsers": [
            "last 2 versions"
          ]
        },
        "modules": false
      }
    ],
    "react",
    "stage-1",
    "airbnb"
  ],
  "plugins": [
    "transform-decorators-legacy",
    "transform-async-to-bluebird",
    "transform-promise-to-bluebird",
    "transform-runtime",
    "lodash",
    [
      "react-intl",
      {
        "messagesDir": "./src/messages",
        "enforceDescriptions": false
      }
    ]
  ],
  "env": {
    "development": {
      "plugins": [
        "flow-react-proptypes",
        "react-hot-loader/babel"
      ]
    },
    "staging": {
      "plugins": [
        "transform-flow-strip-types",
        "transform-react-inline-elements"
      ]
    },
    "production": {
      "plugins": [
        "transform-flow-strip-types",
        "transform-react-inline-elements"
      ]
    }
  }
}

I have checked out babel-plugin-react-intl locally and modified the test case to process a stateless component, it works fine and the test passed. I am not sure if it's caused by my flow, babel configurations OR there is something weird happening in visitor function. Of course, I can see it parses CallExpression and JSXOpeningElement.

@lzhuor
Copy link
Author

@lzhuor lzhuor commented Sep 20, 2017

Above problem has been resolved by:

  1. Translating files using babel-runtime therefore we can control presets and plugins better. Prior that, we were applying babel-plugin-react-intl plugin during the build time (with WebPack). Build time has lots more babel-plugins applied which may have side effects on the syntax trees.

  2. Sharing the chunk of code we made:

console.log('🥁 Starting Babel');

globSync('./src/**/!(*.stories|*.test|actions|selectors|reducers|validate).js').forEach(filePath => {
  try {
    console.log(`🏥 Babel is transforming ${filePath}`);
    babel.transformFileSync(path.normalize(filePath), {
      presets: ['flow'],
      plugins: [
        ['transform-es2015-arrow-functions', { spec: true }],
        'transform-class-properties',
        'transform-object-rest-spread',
        'transform-runtime',
        'flow-react-proptypes',
        [
          'react-intl',
          {
            messagesDir: './src/messages',
            enforceDescriptions: false,
          },
        ],
      ],
    });
  } catch (err) {
    console.error(err.message);
  }
});
  1. You need set bindings to true to get class properties being parsed. Just FYI - How referencesImport() is implemented - https://npmdoc.github.io/node-npmdoc-babel-core/build/apidoc.html#apidoc.element.babel-core.traverse.NodePath.prototype.referencesImport
['transform-es2015-arrow-functions', { spec: true }],
// examples: https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-es2015-arrow-functions
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
1 participant