RFC: Split macro to vanilla js + react

[thekip]

Current macro assuming usage only with React. But there are cases where people want to use it with vanilla js or even different framework.

Current macro depending on @types/react and @lingui/react which brings react to the host project which might be unwanted behavior.

There was an attempt to fix this here #936
But the solution is far from perfect.

I propose to split macro into two different packages:

@lingui/js-macro (or just macro)
@lingui/react-macro

This in future would allow us to adopt other jsx based-frameworks.

An automatic codemod could be written to help people migrate to the new version.

Related to:

• Plan to make the core library-agnostic #708

[andrii-bodnar]

This is a good idea, I already thought exactly about a Vue package and other frameworks.

I think we can follow the existing naming:

• @lingui/macro
• @lingui/react
• @lingui/vue
• what about React Native?
• etc.

Found one old issue related to this topic - #708 (Added to the issue description)

[thekip]

For macro to work, it should end on macro
https://github.com/kentcdodds/babel-plugin-macros/blob/main/other/docs/author.md#filename

So @lingui/react/macro or @lingui/react-macro but not @lingui/macro/react

[tricoder42]

I definitely like this idea. I always wanted to make this library framework-agnostic. Using single macro package for only for simplicity, but I understand it can be annoying.

[JSteunou]

I currently need this feature. I'm in a Vue project and I do not want to install the all React ecosystem. How can I help? Is there some plan I can follow?

[thekip]

I think we can plan that for lingui v5. I see this in the following manner:

The actual transform of code would be kept as-is, e.q. one transform process both js and jsx (react) nodes. The only changes would be in typescript typings.

Lingui would have packages called:

• @lingui/macro - binding for babel-macro-plugin + typings for t plural select and selectOrdinal macros.
• @lingui/react-macro - everything from @lingui/macro + typings for Trans Plural Select useLingui, etc. So react users does not need to import from 2 packages, everything from @lingui/macro is re-exported from react package.
• @lingui/babel-macro-plugin - the actual babel plugin which do transformations, used under the hood in two above packages. Could be even marked as optional peer dependency, but need to test it.

[JSteunou]

Ok so if I add the vuejs support in I could already do it with a @lingui/vue-macro package which would re-export everything from actual macro (later on the new version, which would remove the dependency with react) + the Trans useLingui vt etc