Really want to use this but can't figure out how

[martinmckenna]

I'm using webpack with ts-loader and I'd like to extract my react-intl strings to JSON files.

But I can't figure out how to get this plugin working correctly. I've tried looking at other issues and still can't find any help.

For starters, how do I tell this plugin where to create the JSON file? Also, how am I supposed to be using the onMsgExtracted property

This is what I've tried so far:

webpack.config

          {
            test: /\.(ts|tsx)$/,
            include: paths.appSrc,
            use: [
              {
                loader: require.resolve('ts-loader'),
                options: {
                  // disable type checker - we will use it in fork plugin
                  transpileOnly: true,
                  getCustomTransformers: () => ({
                    before: [
                      intl.transform({
                        idPrefix: "prefix",
                        onMsgExtracted: intl.aggregate({}),
                      }),
                    ]
                  })
                },
              },
            ],
          },

MyComponent.tsx

import { FormattedMessage } from 'react-intl';

export class SummaryPanel extends React.Component<Props, {}> {
  render() {
    return (
      <React.Fragment>
        <FormattedMessage
          defaultMessage="Contact Information"
          id="ContactInfo.heading"
        />
      </React.Fragment>
    );
  }
}

[longlho]

I'll try to whip up an example tonight or tomorrow. To unblock you right now, for intl.aggregrate(msgs), msgs is just a result object you declare and everytime it sees an translation it'll modify the object inline.

The tricky part is to write out that result object to a file once webpack's done.

[martinmckenna]

@longlho ah okay. So aggregate() works similiarly to array.reduce in that you pass it a accumulator? Or do you mean something different by “result object?”

Also thank you for working on an example. I’m very much looking to accomplish the functionality of babel-plugin-react-intl, and am hoping this lib will make things easier

[longlho]

Yes it works like an accumulator

…

On Wed, Oct 3, 2018 at 11:42 PM Martin ***@***.***> wrote: @longlho <https://github.com/longlho> ah okay. So aggregate() works similiarly to array.reduce in that you pass it a accumulator? Or do you mean something different by “result object?” Also thank you for working on an example. I’m very much looking to accomplish the functionality of babel-plugin-react-intl, and am hoping this lib will make things easier — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#29 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAMGbwDara3Ujzld_Qc_fwCsCX8Ndhwhks5uhYORgaJpZM4XHBI0> .

[martinmckenna]

Been trying some other attempts. Most recent failed attempt was to abstract the transformer into my own file:

webpack.config.js

              {
                loader: require.resolve('ts-loader'),
                options: {
                  // disable type checker - we will use it in fork plugin
                  transpileOnly: true,
                  getCustomTransformers: () => ({
                    before: [mergeMessages]
                  })
                },
              },

merge_messages.js

var fs = require("fs");
var ts = require('typescript');
var mkdirpSync = require("mkdirp").sync;
var intl = require('ts-transform-react-intl');

const outputDir = './build/';

var transformer = function (context) {
  console.log('running script');

  // aggregate all messages into one big object
  var messages = {};

  var intlTransformer = intl.transform({
    idPrefix: "prefix",
    onMsgExtracted: intl.aggregate(messages),
  });

  intlTransformer();

  console.log(messages);

  // Create a new directory that we want to write the aggregate messages to
  mkdirpSync(outputDir);
  // Write the messages to this directory
  fs.writeFileSync('data.json', `{ "en": ${JSON.stringify(messages, null, 2)} }`);
}

exports["default"] = transformer;

But the build errors out with Module build failed: TypeError: f is not a function

[longlho]

yeah that's not gonna work. onMsgExtracted gets called on every file. What you need is at the end of the whole webpack flow, write the accumulated map out.

I initially did this w/ typescript compiler wrapper because it's synchronous & just run through the whole project. webpack is not synchronous so you'd almost need a hook into its lifecycle to know when it's done to write the file out. This is not an easy task (similar to https://github.com/webpack-contrib/extract-text-webpack-plugin where all CSS gets extracted to a file).

Some pointer would be https://webpack.js.org/api/compilation-hooks/ or https://webpack.js.org/api/plugins/#custom-hooks

The flow for webpack would be something like:

// Declare this out of scope
const msgs = {}

webpack({
...
{
                loader: require.resolve('ts-loader'),
                options: {
                  // disable type checker - we will use it in fork plugin
                  transpileOnly: true,
                  getCustomTransformers: () => ({
                    before: [mergeMessages]
                  })
                },
              },
plugins: {
...<something that hooks on done & output msgs to a JSON file>
}
})

[longlho]

Oh looks like webpack takes in a callback webpack(config, doneCb) so u can output in doneCb maybe?

[martinmckenna]

those are some good thoughts. I'll try creating a plugin that can hook into after compile tonight

[martinmckenna]

Looks like hooking into the callbacks didn't work either.

The messages object is always empty

GenerateMessagesFile.js

'use strict';
var fs = require('fs');
var mkdirp = require('mkdirp');

const outputPath = '../build/messages/';

class GenerateMessageFile {
  constructor(messageObj) {
    this.messageObj = messageObj;
  };

  apply(compiler) {
    compiler.plugin('done', (compilation) => {
      console.log(this.messageObj);

      // Create a new directory that we want to write the aggregate messages to
      mkdirp.sync(outputPath);

      // Write the messages to this directory
      fs.writeFileSync(outputPath + 'messages.json', `{ "en": ${JSON.stringify(this.messageObj, null, 2)} }`);

    })
  }
}

module.exports = GenerateMessageFile;

webpack.config.js

          {
            test: /\.(ts|tsx)$/,
            include: paths.appSrc,
            use: [
              {
                loader: require.resolve('ts-loader'),
                options: {
                  // disable type checker - we will use it in fork plugin
                  transpileOnly: true,
                  getCustomTransformers: () => ({
                    before: [
                      intl.transform({
                        idPrefix: "prefix",
                        onMsgExtracted: intl.aggregate(messages),
                      }),
                    ]
                  })
                },
              },
            ],
          },

  plugins: [
    new GenerateMessageFile(messages),
 ]

[martinmckenna]

Ah okay so it seems like this plugin will not pick up the text if you’re solely using the react-intl React Component FormattedMessage and that you need to use the API function.

The issue i’m running into now is that the out-of-scope messages var is undefined by the time my webpack hook runs

Would you mind if i just made a PR to allow for passing in a file path to write to? I think that functionality would be widely useful

[longlho]

Yeah PR’s welcome :)

…

On Fri, Oct 5, 2018 at 4:24 AM Martin ***@***.***> wrote: Ah okay so it seems like this plugin will not pick up the text if you’re solely using the React Component and that you need to use the API function. Would you mind if i just made a PR to allow for passing in a file path to write to? I think that functionality would be widely useful — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#29 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAMGb211OIkjENcWgjS8OANWlxZcUwSrks5uhxc2gaJpZM4XHBI0> .