New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FormattedMessage in ArrowFunction is not captured #125

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

Comments

Projects
None yet
1 participant
@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

This comment has been minimized.

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 join this conversation on GitHub. Already have an account? Sign in to comment