Js-lingui: Extract messages from TypeScript files

[johansigfrids]

It would be really nice if the cli could extract messages from .tsx? files as well.

[tricoder42]

Sounds good.

What babel plugins are required to parse typescript files?

[johansigfrids]

Hmm... A little bit of googling seems to indicate the PR for typescript plugins for babel hasn't landed yet. https://github.com/babel/babel/pull/5899

[tricoder42]

Messages from jsx? files are extracted by traversing AST tree from babel. If TypeScript uses different AST (https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API), then this would require writing another extraction tool, which would generate intermediate _build/<filepath> dictionaries (eg. _build/components/App.json contains messages from src/components/App.ts).

The intermediate dictionaries have a this format:

{
  "message id": {
    "defaults": "",
    "origin": [
      [
        "fileName",
        62 # line number
      ]
    ]
  }, 
  "another message": {

  }
}

Where defaults is optional.

Once we have these build files, we can merge then using API from lingui extract.

Are you willing to write the typescript part? I would update lingui-extract.js to extract messages based on filetype.

[johansigfrids]

I took a quick stab at it. What I have is here, with both ts and js versions. All the fancy file handling is missing. Currently the extract function just expects a file name and returns a map of messages. This is all I have time for now. I might have some more time to look at it next week.

[tricoder42]

Awesome, thank you! I'll integrate it most probably tomorrow.

[tricoder42]

Sorry, I was busy with my job and didn't get any chance to work on this issue. I'll continue after 13th August as I'm going on a vacation now.

[tricoder42]

Hi! I finally refactored cli to support other preprocessors than babel. I created package typescript-lingui-extract-messages where I placed your script: https://github.com/lingui/js-lingui/blob/master/packages/typescript-lingui-extract-messages/src/index.ts

However, I'm not able to compile it. Could you please send me configuration which you used to compile this file?

[johansigfrids]

You need to add @types/node as a dependency to get the typings for node.

Then you also need to set the target to es6 to get Map and module resolution to node in the tsc command:

tsc --module system --outFile dist/index.js src/index.ts --target es6 --moduleResolution node

[papoola]

@tricoder42 looks like /api/extractors/typescript.js doesn't do anything yet. It shouldn't be difficult to link it to typescript-lingui-extract-messages by @johansigfrids I guess?

[tricoder42]

You're right, /api/extractors/typescript.js is just a placeholder, waiting to be linked to external package like typescript-lingui-extract-messages. Unfortunately I don't have any experience with Typescript so it has very low priority.

Are you willing to help me with this? If you don't have time for full PR I would appreciate at least an example typescript files which I can use for testing.

[papoola]

I might be able to help. But I am wondering why it is necessary to have plugin also as a TS file?

[tricoder42]

It's not necessary, but @johansigfrids wrote it in Typescript and I don't mind. It's not a problem at all either way.

[papoola]

@tricoder42 I will try to compile it and do a PR. I might have some questions here and there. If there any better ways to reach you other than here, let me know.

[papoola]

We were able to compile TS file as https://gist.github.com/papoola/fc0e73c732f7541b2f5891a141b7798f but apparently this is wrong file format and cannot be imported by require System is not defined. Maybe we can manually change this file and use JS file instead so no transpile is needed any more. @johansigfrids @tricoder42 any ideas?

@tricoder42 I have used this for extractor https://gist.github.com/papoola/f9ccc6b9f431b0dd81510b9defcc412a not sure I have got the syntax right? We need this for Typescript in React.

[tricoder42]

Have you used the command provided by @johansigfrids?

tsc --module system --outFile dist/index.js src/index.ts --target es6 --moduleResolution node

I'll take a look this weekend, I promise! I'm just finishing one project and I'm already few days behind...

I'll ping you once I have it running and ready for tests. Meanwhile, could you please copy-paste a snippet of a component written in TS which uses jsLingui? I'll use it for initial testing.

Thanks a lot!

[papoola]

@tricoder42 yes, I used same line

I just created above PR with my code + a test react project with jsLingui so you can test it.

Hope you can get typescript extraction working :-) Let me know if you need anything else.

[tricoder42]

Unfortunately, this is more complex than I expected. I'm closing this in favor of #151. It needs somebody with typescript experience to get the full test suit going.