Js-lingui: Typescript support

[tricoder42]

Finalize plugin for extracting messages from typescript files. This need somebody with Typescript experience.

Status

Base of plugin is created in typescript-extract-messages package (original version created by @johansigfrids). It uses the same test suite as babel-plugin-extract-messages. Extracting of messages works, but there're few problems:

• babel plugin also transforms file and removes i18nMark functions, because they are used only to mark strings for extraction. Typescript plugin so far doesn't modify original file and I don't know if Typescript works in the same way as Babel.
• babel transform plugins take <Trans> tags and i18n.t calls and transform them into low-level API calls. Since there're no transform plugins for typescript which would do the same, typescript users have to use low-level API directly.
• plugin doesn't check imports - Trans component and i18n object might be aliased

Once the plugin is finish, it can be easily hooked to CLI:

import extract from "@lingui/typescript-extract-messages"

const extractor: ExtractorType = {
    ...

    extract(filename, targetDir) {
        extract(filename, { localeDir: targetDir })
    }
}

Goals

1. All tests must pass (should be the same test suit as for babel-extract-messages plugin or at least very similar). Remove typescript plugin from ignored modules in scripts/jest/config.unit.js to run the test suit.
2. Check that plugin works on Test project (provided by @papoola)

[levito]

Is this still being worked on? jsLingui looks really nice, I'd love to use it for TypeScript projects!

[tricoder42]

@levito I'm still waiting for fellow contributor with knowledge of Typescript. Unfortunately don't have required knowledge to work on this and at the moment I don't have even time to learn and understand Typescript ecosystem.

Interested in contributing?

[quentez]

@tricoder42 Babel has beta support for TypeScript in version 7.
Would it be easier to write the extractor by relying on that instead?

UPDATE: I was able to get something working. I'll publish an update.

[geebee-lumity]

@quentez Currently struggling to make lingui work with Typescript. Would love to see your update.

[rssfrncs]

FYI - I'm using Typescript as a Babel (v7) preset and extraction is working fine with .tsx files.

[huan086]

@rssfrncs @quentez can you explain how you set it up?

Do you mean to install the beta @babel/preset-typescript and modify the .babelrc, and babel-plugin-extract-messages will magically work?

[rssfrncs]

@huan086 hi yes exactly!
babelrc

"presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@lingui/babel-preset-react",
    "@babel/preset-typescript"
],

package.json

    "@babel/core": "^7.0.0-beta.41",
    "@babel/preset-env": "^7.0.0-beta.40",
    "@babel/preset-react": "^7.0.0-beta.40",
    "@babel/preset-typescript": "^7.0.0-beta.46",
    "@lingui/babel-preset-react": "^2.0.5",

[rssfrncs]

Interestingly i've just enhanced my first TypeScript React component using withI18n and in production I'm getting i18n.t is not a function so it doesn't seem to be working 100%.

Same babel config as i posted above.

I think it's undeniable that TypeScript is getting a lot of traction in the React community and for JS Lingui to succeed it will have to start offering seamless support, thoughts @tricoder42 ?

[tricoder42]

i18n.t is not a function usually means the code isn't transformed correctly. In production there's no i18n.t, because all calls are transformed to i18n._.

Yes, I believe Typescript should be supported seamlessly. Unfortunately, I don't know this language, tooling around and at the moment I barely manage to keep up with issues. Do you know any very good tutorial or crash course where I could get the basics?

If you're interested, feel free to create example in Typescript, which we could include in integration tests.

[rssfrncs]

Wish i could help myself but i've only started to use it at work.

Yeah i've come across this issue before in just .js files and the issue was to do with the ordering of my presets. However now it seems to be any files that are either .tsx or .js files imported by a .tsx file are not being transformed. Weird!

[huan086]

Sadly Babel 7 preset-typescript is still far from ready. Hitting several issues, like https://github.com/babel/babel/issues/7640, https://github.com/babel/babel/issues/7118

Btw, had a hard time figuring out how to build, since package.json doesn't have build. If anyone wants to give it a try at building

• make sure to have yarn installed globally
• go to the project root
• yarn
• node ./scripts/build

The output is in the folder build

[tricoder42]

@huan086 Nice! Going to update contributors docs.