Is there any simple steps that I can follow in order to use this?

[ensecoz]

Hi,

I am new to typescript world and couldn't find the document how to use this ts-transform-react-intl. Do you have any simple steps? It would be really helpful.

I couldn't find the way to add plugin to typescript like babel. I guess I need to implement my own version of compiler to complete the generate translation. Please help.

Thanks,

[longlho]

I'll update the README.md today w/ more instructions. But in short if you use webpack & ts-loader you can specify it as part of the config (https://github.com/TypeStrong/ts-loader#getcustomtransformers-----before-transformerfactory-after-transformerfactory---).

If you use tsc you'd have to write a simple compiler like the one I included in the repo (https://github.com/longlho/ts-transform-react-intl/blob/master/compile.ts)

[fengshenhai-0727]

I am new to typescript world and couldn't find the document how to use this ts-transform-react-intl.
It's difficult to use.

[longlho]

unfortunately you'd need to a custom compiler wrapper like the one linked above and some knowledge of TypeScript to use this. TS doesn't support custom transformers officially

[Kronuz]

Apparently, ts-loader supports custom transformes using getCustomTransformers (https://github.com/TypeStrong/ts-loader/blob/master/README.md#getcustomtransformers-----before-transformerfactory-after-transformerfactory--) and there is also https://github.com/cevek/ttypescript, which allows transformers in tsconfig.json.

Can someone with more experience add examples for those please?

[Kronuz]

Could it be as simple as this (with ts-loader)?:

const intl = require('ts-transform-react-intl');

module.exports = {
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: {
          getCustomTransformers: () => ({
            before: [
              intl.transform({
                idPrefix: "prefix",
                onMsgExtracted: intl.aggregate(msgs),
              }),
            ]
          })
        }
      }
    ],
  }
}

[longlho]

@Kronuz PR's welcome :)

[Kronuz]

@longlho, what is the idPrefix for?

[longlho]

it's the prefix for all message ids. This is basically namespacing. By default it uses the package name from package.json.

e.g: If you run this on a project called foo, the result json of all your messages will be like foo_message1, foo_message2

[martinmckenna]

@Kronuz Where is the msgs argument coming from in the example you posted?

[Kronuz]

That’s simply an empty object of type Messages where the final messages will be aggregated to, after parsing (it could have default messages, if needed)

[martinmckenna]

@Kronuz ah okay. Have you been successful in writing that object to a JSON file? Looking for examples, if you have any. I’m using webpack and ts-loader as well

[Kronuz]

I haven’t tried... you just need to make a small webpack plugin which writes the object after everything has been processed.