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

Add lint rule for implicit is:inline on script tags. #970

Merged
merged 16 commits into from
Feb 21, 2024
Merged

Add lint rule for implicit is:inline on script tags. #970

Changes from 1 commit
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
253bf6d
add lint for implicit is:inline on script tags
lilnasy Feb 16, 2024
b5a39b7
add changeset
lilnasy Feb 16, 2024
f808af7
adjust exisitng test
lilnasy Feb 16, 2024
4dd0e4f
add test
lilnasy Feb 16, 2024
b11c470
remove unused args
lilnasy Feb 16, 2024
7d9e7d4
Apply suggestions from code review
lilnasy Feb 16, 2024
2ccaaef
Apply suggestions from code review
lilnasy Feb 16, 2024
9c70360
Apply suggestions from code review
lilnasy Feb 16, 2024
1adf668
update test: `NPM` -> `npm`
lilnasy Feb 16, 2024
27c9d8a
exclude external scripts from the diagnsotic
lilnasy Feb 16, 2024
a2aef39
Apply suggestions from code review
lilnasy Feb 18, 2024
9b54fb7
Apply suggestions from code review
lilnasy Feb 20, 2024
b3d4018
shorten the lint message
lilnasy Feb 20, 2024
cc19544
comma
lilnasy Feb 20, 2024
7eeed88
Apply suggestions from code review
lilnasy Feb 21, 2024
b458421
Apply suggestions from code review
lilnasy Feb 21, 2024
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
Prev Previous commit
Next Next commit
Apply suggestions from code review 
Co-authored-by: Happydev <81974850+MoustaphaDev@users.noreply.github.com>
  • Loading branch information
@lilnasy @MoustaphaDev
lilnasy and MoustaphaDev authored Feb 16, 2024
commit 2ccaaefb4e0fc2b1f6d8f0fbafb31619e58a92d9
2 changes: 1 addition & 1 deletion internal/transform/transform.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -406,7 +406,7 @@ func ExtractScript(doc *astro.Node, n *astro.Node, opts *TransformOptions, h *ha
}

func HintAboutImplicitInlineDirective(n *astro.Node, h *handler.Handler) {
if n.Type == astro.ElementNode && n.DataAtom == a.Script && len(n.Attr) > 0 && !HasInlineDirective(n) {
if n.Type == astro.ElementNode && n.DataAtom == a.Script && len(n.Attr) > 0 && len(n.Attr) == 1 && n.Attr[0].Key != "src" && !HasInlineDirective(n) {
lilnasy marked this conversation as resolved.
Show resolved Hide resolved
h.AppendHint(&loc.ErrorWithRange{
Code: loc.HINT,
Text: "Astro processes your script tags to allow using TypeScript and npm packages, and to optimize browser performance.\n\nAttributes cannot be used on Astro-processed script tags. Therefore, this script tag will be treated as if it has the `is:inline` directive, opting it out of the processing steps and its features.\n\nFor clarity, you might want to add the `is:inline` directive explicitly.\n\nSee docs for more details: https://docs.astro.build/en/guides/client-side-scripts/#script-processing.",
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
Text: "Astro processes your script tags to allow using TypeScript and npm packages, and to optimize browser performance.\n\nAttributes cannot be used on Astro-processed script tags. Therefore, this script tag will be treated as if it has the `is:inline` directive, opting it out of the processing steps and its features.\n\nFor clarity, you might want to add the `is:inline` directive explicitly.\n\nSee docs for more details: https://docs.astro.build/en/guides/client-side-scripts/#script-processing.",
Text: "This script contains an attribute (ex: `type="module"`, `type="text/partytown"`, `async`) or a directive (`define:vars`) and will not be processed and bundled for optimized browser performance.\n\nThis script will be treated as if it has the `is:inline` directive and therefore features that require processing (e.g. using TypeScript or npm packages in the script) are unavailable.\n\nSee docs for more details: https://docs.astro.build/en/guides/client-side-scripts/#script-processing.",

This felt maybe a little "life story" for a helpful hint message? If this is a warning message shown when an attribute exists (because people might not realize it's gonna be inline), then I'd frame the ideas in something like the order above:

  • why this message is being shown (we found an attribute/directive!)
  • what that means (no processing/optimizing for you!)
  • why it means that/how they can understand why this is happening (it's treated like inline!)
  • any other important information to know (no other features, too. See the docs)

I'm also not sure why the recommendation to add the is:inline directive explicitly. What's the benefit? What kind of clarity are you going for? Just to remind yourself that this one will be treated as inline? Unless there's a strong reason to suggest that I'm not seeing, I'd recommend removing.

Copy link
Member

@martrapp martrapp Feb 17, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

From Sarah's suggestion:

This script contains an attribute (ex: type="module", type="text/partytown", async) or a directive (define:vars) and ...

Instead of giving examples from the original RFC that might confuse users, we could make this hint dynamic and include current attributes.

Copy link
Member

Choose a reason for hiding this comment

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

you might want to add the is:inline directive explicitly

I think this information is valuable as it shows you how to disable the hint (and remove the three dots in the editor view)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

shows you how to disable the hint

That's exactly right. It was also part of the RFC that introduced is:inline.

I'm also not sure why the recommendation to add the is:inline directive explicitly.

I guess we wouldn't want to encourage is:inline, because it is almost always an accident. Is that what you're getting at?

Copy link
Member

@sarah11918 sarah11918 Feb 21, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

I was getting at, I have no idea why this is a recommendation for this case, if it's already treated as inline. Why would you bother adding it?

Martin's response that adding it will silence the hint/message is a valid reason, so if it's helpful then something like:

Adding the is:inline explicitly will silence this hint.

BUT, that seems like maybe kind of terrible DX -- you have to go back and add this everywhere or you're going to get editor notation yelling at you for things that are just "how things work"?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I should clarify, the motivation behind this PR is to add friction to the cases where is:inline is added implicitly.

It is usually accidental, it makes the scripts behave drastically differently, and is only required in very specific use-cases.

Moreover, this "discouragement" was part of the original RFC from years ago.

Expand Down
Loading