lingui / lingui/eslint-plugin

new rule: Validate macro usage correctness

Open
#65 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
TypeScript
Stars
33
Forks
25
Avg merge
1d 16h
Merged PRs (30d)
9

Description

The macro itself is something that not exists in runtime. It's precompiled during build step. There some limitations what could be done with the macro and how it can be used. Some valid ecmascript constructions might not work with a macro.

I'm thinking of creating a rule which will check for unsupported syntax and give faster feedback to developer.

### Namespace import from macro
```js
// disallow
export * as macro from '@lingui/react/macro';
```

Calls on a member expression (`` macro.t`Ola!` `` vs `` t`Ola` ``) has a completely different AST representation and each case should be handled by the code manually. It's easier to just disallow this usage at all.

### Renaming macro symbols
```js
// disallow
export {plural as PluralRenamed} from '@lingui/core/macro';
```

All eslint rules in this plugin match lingui symbol just by name. Despite the fact macro itself is able to handle renamed imports, this will literally turn off all eslint checks for lingui. So it's better to disallow this.

### Passing macro as value

The example is using a new `useLingui` hook from lingui v5 for demonstration purpose, but this issue could be reproduced with a plain `t` macro as well.

```js
export {useLingui} from '@lingui/react/macro';

function buildFormValidation(t) {
const myErroMsg = t`Field is Required`
}

function MyComponent(props) {
const { t } = useLingui();

// disallow
buildFormValidation(t);
}
```

The developer may want to pass `t` macro as a value to the other functions, but because `t` doesn't exists in the runtime that will lead to error. These usages should be disallowed.

Note: there is only one valid case for such usage, `t` from `useLingui` could be used in a deps array of react hooks.

### `useLingui` macro usage correctness

```js
export {useLingui} from '@lingui/react/macro';

function MyComponent(props) {
const lingui = useLingui();

// disallow
lingui.t`Ola!`
}
```

For the same reason as for with imports, macro exported from `useLingui` should be used only with object destructuring.
Renaming should also be blocked because it will disable eslint checks on these calls.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No files, tests, or entry points are named; start by locating the existing ESLint rules that match Lingui symbols. Define coverage for namespace imports, renamed symbols, macro values, and invalid useLingui access, while allowing hook dependency arrays. Done means each listed unsupported form is rejected with faster feedback without blocking the stated valid case.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
tooling
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.