-
Notifications
You must be signed in to change notification settings - Fork 13
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
feat: add no-t-call-in-react-component #82
base: main
Are you sure you want to change the base?
Conversation
Hi, thanks for the contribution! In Lingui v5, this may be less relevant due to the new |
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #82 +/- ##
==========================================
- Coverage 96.49% 93.64% -2.86%
==========================================
Files 10 11 +1
Lines 371 535 +164
Branches 101 184 +83
==========================================
+ Hits 358 501 +143
- Misses 13 31 +18
- Partials 0 3 +3 ☔ View full report in Codecov by Sentry. |
Hi! Happy to know that. When will v5 come out? |
Thanks for contribution, this is a valuable addition. Especially autofixes, which is bringing DX on the next level. As Andrii mentioned there is upcoming v5 release which is on finalizing step right now. So it would be released soon (we don'y have an exact date) The v5 release make autofixes in this rule outdated, as well as detection logic become more complex. Basically
Should be import { useLingui } from '@lingui/react/macro'
function Component() {
const { t } = useLingui();
const x = useY();
return <p>
{t`Hello`)}
</p>;
} Because with v5 Another notice, in v5, macro imports would be changed to:
Here is a full migration guide https://js-lingui-git-next-crowdin.vercel.app/releases/migration-5 I actually also thought about this issue with You could not use it in the React components because they will not react to the language changes, you could not use it on the module level for the same reason. If you create a function on the module level with So I came to conclusion that there should be a rule which is blocking |
I checked the code:
it looks very complicated, have you considered to use only Nodes information for that? That probably would be less powerful, but still will cover 85% of cases i could imagine and will not require type information. For example, we can check if the incorrect node is a direct child of <div>{t`Ola!`}</div> |
fix1: 'Replace with _(msg`...`)', | ||
fix2: 'Replace with <Trans>...</Trans>', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fix1 -> fixAsHook
fix2 -> fixAsJsx
export function getNearestAncestor<Type extends TSESTree.AST_NODE_TYPES>( | ||
node: TSESTree.Node, | ||
type: Type, | ||
): (TSESTree.Node & { type: Type }) | null { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is cool, it irritated me but i didn't find a way to infer a type automatically
|
||
create: (context) => { | ||
return { | ||
'TaggedTemplateExpression[tag.name=t]'(node: TSESTree.TaggedTemplateExpression) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This query is not complete. There are different signatures of t
macro which should be also covered by this rule. Check LinguiTaggedTemplateExpressionMessageQuery
versus LinguiCallExpressionMessageQuery
in the helpers.ts
const template = node.quasi | ||
if ( | ||
template.type !== AST_NODE_TYPES.TemplateLiteral && | ||
template.type !== AST_NODE_TYPES.Literal |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There are a little type guard helpers in the helpers.ts
, they make code a little bit cleaner.
template.type !== AST_NODE_TYPES.Literal
!isLiteral(template)
You can use it and extend with your own, because there is not a full set.
There are many uncovered lines, could you please write tests that will cover all of them. |
Hi! Thanks for the review, before resolving any issue, I wonder if we still need this lint in v5? If not, I prefer to close this PR (or we can hold it until v5 is finally out). |
The type-aware fix is optional, I also tested for cases that do not have type-aware lint. The code was from our migration code from another i18n framework to lingui (https://github.com/DimensionDev/Maskbook/blob/732f352d09eddf8df791c6cc1f8e91178b1b75cd/packages/scripts/src/locale-kit-next/migrate.ts) it works well and can detect most of our cases like |
Yes, why not? v5 just adds a new syntax sugar, the all old ones are there, so problems related to them as well. Regarding type-aware checking, there is a recommendation from the typescript-eslint team
https://typescript-eslint.io/developers/custom-rules#conditional-type-information |
The lint itself does not base on type information, it only provides one more suggestion (
How do you think we should support v5? By auto-detecting the dependency version, or providing a configuration? |
I added a new rule: No t call in a React Component.
Background
There are two macros for this:
t
and<Trans>
. The prior one is used outside of a React Component. Developers should not uset
because it will not reflect React Provider changes (e.g. when the locale changes).Wrong code:
Autofix (1):
Autofix (2):
This fix requires type-aware lint and only applies when the context accepts a React.ReactNode.