Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

new rule: Validate macro usage correctness #65

Open
timofei-iatsenko opened this issue Oct 15, 2024 · 0 comments
Open

new rule: Validate macro usage correctness #65

timofei-iatsenko opened this issue Oct 15, 2024 · 0 comments
Labels
enhancement New feature or request

Comments

@timofei-iatsenko
Copy link
Collaborator

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

// 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

// 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.

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

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.

@andrii-bodnar andrii-bodnar added the enhancement New feature or request label Oct 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants