thekip
commented
8 months ago Well, i've found a problem why some files not get processed by extractor. Unfirtunately it's not easy to fix, because it's need to change literally everthying in how this is processed now.
The simple explanation of the process now:
- Files bundled together with esbuild, JSX is preserved
- Regular JS extractor is applied to the bundles
- Macro applied to whole bundle
- Extractor extract from all usages as it was written without macro
The problem here is that esbuild while bundling doing a lot of work related to module imports. It renames, deduplicate and etc. Macro is able to understand renamed imports, but macro is also responsible of turning macro input into runtime import. And here where problems appears. Macro is not smart enough to analyze what import already inserted in the file and in what order (the esbuild could generate very complicated setups, because what actually bundlers do)
So after macro expannding some imports got deleted and extractor did not recognize these nodes as belonging to the Lingui Here is the output result after intermediate steps:
Esbuild bundle
```js // src/pages/index.page.tsx import { Plural as Plural2, t as t2, Trans as Trans3 } from "@lingui/macro"; import path from "path"; import Head from "next/head"; // src/components/AboutText.tsx import { Trans } from "@lingui/macro"; function AboutText() { return
{
/*
The Next Head component is not being rendered in the React
component tree and React Context is not being passed down to the components placed in the .
That means we cannot use the component here and instead have to use `t` macro.
*/
}
{t2`Translation Demo`}
;
};
var index_page_default = Index;
export {
index_page_default as default,
getStaticProps
};
```
Bundle after Macro
```js import path from "path"; import Head from "next/head"; // src/components/Developers.tsx import { useState } from "react"; function Developers() { const [selected, setSelected] = useState("1"); return
{/*
The Next Head component is not being rendered in the React
component tree and React Context is not being passed down to the components placed in the .
That means we cannot use the component here and instead have to use `t` macro.
*/}
{i18n._(
/*i18n*/
{
id: "HjmF2U",
message: "Translation Demo"
})}
;
};
var index_page_default = Index;
export { index_page_default as default, getStaticProps };
```
Next.js!"} components={{
0:
}} />
{i18n._( /*i18n*/ { id: "pOo4Aa", message: "Plain text" })}
Next.jssay hi."} components={{
0:
}} />
Next.jssay hi."} components={{
0:
}} />
Next.jssay hi. And <1>Next.jssay hi."} components={{
0: ,
1:
}} />
Note how code of src/components/Developers.tsx appears without actual runtime imports. The imports somehwere below in the listing, but not in that scope of visibility. That the reason why extractor didn't pick up them.
Solution which i'm actually thinking of is to change order of processing in the following way:
- Write a plugin for esbuild which would invoke SWC + Rust version of Macro for each file before they get processed by esbuild.
- get the bundles
- feed them to js extractor (no macro processing happend on the final bundles)
That makes process more safe, because macro would process untouched files and would be more future-safe. From other side this defenetely will increase time needed for processing.
Other option could be to implement a separate AST transformation which would hoist all lingui imports to the very top of the file.
yunsii
semoal
chrischen
AndrewIngram
Describe the bug
Transchildren has plain text follow JSX element, space is lostedTo Reproduce
https://github.com/yunsii/lingui-examples-nextjs-swc-1797
Expected behavior
v4.5.0@lingui/swc-pluginbabel-macro-plugin