withastro · lilnasy · Feb 21, 2024 · Feb 16, 2024 · Feb 16, 2024 · Feb 16, 2024
diff --git a/.changeset/cuddly-pumas-call.md b/.changeset/cuddly-pumas-call.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/compiler': patch
+---
+
+Adds a lint rules when attributes are added to a script tag, causing the script to be treated as `is:inline`.
diff --git a/internal/handler/handler.go b/internal/handler/handler.go
@@ -45,6 +45,7 @@ func (h *Handler) AppendWarning(err error) {
 func (h *Handler) AppendInfo(err error) {
 	h.infos = append(h.infos, err)
 }
+
 func (h *Handler) AppendHint(err error) {
 	h.hints = append(h.hints, err)
 }

diff --git a/internal/transform/transform.go b/internal/transform/transform.go
@@ -40,6 +40,7 @@ func Transform(doc *astro.Node, opts TransformOptions, h *handler.Handler) *astr
 	i := 0
 	walk(doc, func(n *astro.Node) {
 		i++
+		HintAboutImplicitInlineDirective(n, h)
 		ExtractScript(doc, n, &opts, h)
 		AddComponentProps(doc, n, &opts)
 		if shouldScope {
@@ -404,6 +405,17 @@ 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) {
+		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.",
+			Range: loc.Range{Loc: n.Attr[0].KeyLoc, Len: len(n.Attr[0].Key)},
+		})
+
+	}
+}
+
 func AddComponentProps(doc *astro.Node, n *astro.Node, opts *TransformOptions) {
 	if n.Type == astro.ElementNode && (n.Component || n.CustomElement) {
 		for _, attr := range n.Attr {

diff --git a/packages/compiler/test/client-directive/warn.ts b/packages/compiler/test/client-directive/warn.ts
@@ -11,9 +11,9 @@ test.before(async () => {
   result = await transform(FIXTURE);
 });
 
-test('logs a warning for using a client directive', () => {
+test('reports a warning for using a client directive', () => {
   assert.ok(Array.isArray(result.diagnostics));
-  assert.is(result.diagnostics.length, 1);
+  assert.is(result.diagnostics.length, 2);
   assert.equal(result.diagnostics[0].severity, 2);
   assert.match(result.diagnostics[0].text, 'does not need the client:load directive');
 });

diff --git a/packages/compiler/test/scripts/isinline-hint.ts b/packages/compiler/test/scripts/isinline-hint.ts
@@ -0,0 +1,19 @@
+import { test } from 'uvu';
+import * as assert from 'uvu/assert';
+import { transform } from '@astrojs/compiler';
+
+const FIXTURE = `
+<script type="module"></script>
+`;
+
+let result;
+test.before(async () => {
+  result = await transform(FIXTURE);
+});
+
+test('reports a hint for adding attributes to a script tag without is:inline', () => {
+  assert.equal(result.diagnostics[0].severity, 4);
+  assert.match(result.diagnostics[0].text, /Astro processes your script tags to allow using TypeScript and NPM packages/);
+});
+
+test.run();