[v6] Inconsistent behaviour of dynamic IDs in JS/JSX macros
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 5.9k
- Forks
- 457
- Avg merge
- 1d 23h
- Merged PRs (30d)
- 16
Description
### Description
While working on #2514 I became aware of a potential bug/discrepancy in how Lingui processes dynamic IDs between JS Macros and JSX Macros:
1. **JS Macros (`t({ id: dynId, message: "Welcome" })`)**:
Preserves the dynamic AST node `dynId` in the output because Babel processes object properties directly. The output retains `"id": dynId`.
2. **JSX Macros (`Hello`)**:
The dynamic attribute is lost. `maybeNodeValue()` inside `macroJsx.ts` evaluates non-static JSX attributes to `null`. It strips the attribute, completely drops `dynId`, and instead relies on the hash fallback identifier from the text.
I'm not sure what the expected behaviour is but figured I'd surface this in case it's a bug.
### Example test snapshot
```tsx
import { Trans } from "@lingui/react/macro";
const dynId = "dynamic";
Hello;
↓ ↓ ↓ ↓ ↓ ↓
import { Trans as _Trans } from "@lingui/react";
const dynId = "dynamic";
<_Trans
{
/*i18n*/
...{
id: "uzTaYi",
message: "Hello",
}
}
/>;
```
### Verifications
- [x] I've checked [the docs](https://lingui.dev) and this isn't covered there.
- [x] I've searched existing issues on [GitHub](https://github.com/lingui/js-lingui/issues).
### Macro Support
Babel with babel-macro-plugin
### Lingui Version
6.0.0-next.3
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Read macroJsx.ts, starting with maybeNodeValue(), and compare the JSX macro behavior with the JS macro behavior described in the issue. Use the supplied JSX snapshot as the regression case; done means the expected handling of dynamic IDs is decided and both macro paths behave consistently.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react, typescript
- Domain
- frontend, localization, tooling
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100