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.

Sign up for GitHub

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

refactor: improve on enforce-ref-last-prop ESLint rule docs #8129

Merged
merged 3 commits into from
Nov 8, 2023
Merged

refactor: improve on enforce-ref-last-prop ESLint rule docs #8129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
55a43c5
refactor: improve on enforce-ref-last-prop ESLint rule docs
Elijbet Nov 5, 2023
b6878dd
cleanup
Elijbet Nov 5, 2023
7bad088
update messaging
jcfranco Nov 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/eslint-plugin-calcite-components/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ This rule catches props/attributes that should be in the encapsulated HTML struc

- [`@esri/calcite-components/enforce-ref-last-prop`](./docs/enforce-ref-last-prop.md)

This rule ensures this is a workaround for a [Stencil bug](https://github.com/ionic-team/stencil/issues/4074) where ref is called in the specified order and not after initializing element with all its attributes/properties. This can cause attributes/properties to be outdated by the time the callback is invoked. This rule ensures the `ref` attribute is ordered last in a JSXElement to keep it up-to-date.
This ensures the node passed into the `ref` callback is in sync with its JSX attributes/properties when invoked.

- [`@esri/calcite-components/require-event-emitter-type`](./docs/require-event-emitter-type.md)

Expand Down
4 changes: 2 additions & 2 deletions packages/eslint-plugin-calcite-components/docs/enforce-ref-last-prop.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# enforce-ref-last-prop

This updates `ref` usage to work around a Stencil bug where ref is called in the specified order and not after initializing element with all its attributes/properties. This can cause attributes/properties to be outdated by the time the callback is invoked.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A couple nitpicks (applies to the other file as well):

This rule ensures this is a workaround for ...

... where [the] ref is called ...

... after initializing [the] element ...

... make sure [the] ref attribute ...

This ensures the node passed into the `ref` callback is in sync with its JSX attributes/properties when invoked.

This rule ensures the `ref` attribute is ordered last in a JSXElement to keep it up-to-date.
Placing `ref` last helps work around a [Stencil bug](https://github.com/ionic-team/stencil/issues/4074) where the `ref` callback is invoked in the specified order and not after initializing the element with all its attributes/properties. This can cause attributes/properties to be outdated by the time the callback is invoked.

## Config

Expand Down
4 changes: 2 additions & 2 deletions packages/eslint-plugin-calcite-components/src/rules/enforce-ref-last-prop.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { JSXAttribute, JSXSpreadAttribute, JSXOpeningElement } from "@babel
const rule: Rule.RuleModule = {
meta: {
docs: {
description: `This updates ref usage to work around a Stencil bug where ref is called in the specified order and not after initializing element with all its attributes/properties. This can cause attributes/properties to be outdated by the time the callback is invoked. This rule ensures the ref attribute is ordered last in a JSXElement to keep it up-to-date.`,
description: `This ensures the node passed into the ref callback is in sync with its JSX attributes/properties when invoked.`,
recommended: true,
},
fixable: "code",
Expand All @@ -30,7 +30,7 @@ const rule: Rule.RuleModule = {
if (refAttribute && attributes.indexOf(refAttribute) !== attributes.length - 1) {
context.report({
node,
message: `Attribute "ref" should be placed last in a JSXElement so node attrs/props are in sync. If it's called in the specified order, attributes/properties can be outdated by the time the callback is invoked.`,
message: `"ref" prop should be placed last in JSX to ensure the node attrs/props are in sync.`,
});
}
}
Expand Down