add resolveComponents options

[bluewings]

For some components, you do not have to pass a reference to the template from component js.

//- pug file
p
  FormattedMessage#welcome

The above pug file is converted as below and you have to pass the FormattedMessage reference value to use template function.

import React from 'react';

export default function (params = {}) {
  const { FormattedMessage } = params;
  return (
    <p>
      <FormattedMessage id="welcome" />
    </p>
  );
}

Setting resolveComponents mappings in webpack.config, you do not have to pass a reference to the component separately.

// webpack.config.js
module.exports = {
  entry: ...
  output: ...
  module: {
    rules: [
      ...
      {
        test: /\.pug$/,
        use: [
          require.resolve('babel-loader'),
          {
            loader: require.resolve('pug-as-jsx-loader'),
            options: {
              resolveComponents: {
                FormattedMessage: 'i18n/FormattedMessage',
              },
            },
          },
        ],
      },
      ...
    ],
  },
};

The import statement for the component has been added automatically.

import React from 'react';
import FormattedMessage from 'i18n/FormattedMessage';

export default function () {
  return (
    <p>
      <FormattedMessage id="welcome" />
    </p>
  );
}