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

* add lint for implicit is:inline on script tags

* add changeset

* adjust exisitng test

* add test

* remove unused args

* Apply suggestions from code review

Co-authored-by: Emanuele Stoppa <my.burning@gmail.com>

* Apply suggestions from code review

Co-authored-by: Happydev <81974850+MoustaphaDev@users.noreply.github.com>

* Apply suggestions from code review

Co-authored-by: Happydev <81974850+MoustaphaDev@users.noreply.github.com>

* update test: `NPM` -> `npm`

* exclude external scripts from the diagnsotic

* Apply suggestions from code review

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* Apply suggestions from code review

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* shorten the lint message

* comma

* Apply suggestions from code review

* Apply suggestions from code review

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

---------

Co-authored-by: Emanuele Stoppa <my.burning@gmail.com>
Co-authored-by: Happydev <81974850+MoustaphaDev@users.noreply.github.com>
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

.changeset/cuddly-pumas-call.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/compiler': patch
+---
+
+Adds a lint rule to display a message when attributes are added to a script tag, explaining that the script will be treated as `is:inline`.

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)
 }

internal/transform/transform.go

@@ -41,6 +41,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 {
@@ -408,6 +409,19 @@ 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 len(n.Attr) == 1 && n.Attr[0].Key == "src" {
+			return
+		}
+		h.AppendHint(&loc.ErrorWithRange{
+			Code:  loc.HINT,
+			Text:  "This script will be treated as if it has the `is:inline` directive because it contains an attribute. 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.\n\nAdd the `is:inline` directive explicitly to silence this hint.",
+			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 {

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');
 });

packages/compiler/test/scripts/isinline-hint.ts

@@ -0,0 +1,17 @@
+import { test } from 'uvu';
+import * as assert from 'uvu/assert';
+import { transform } from '@astrojs/compiler';
+
+test('reports a hint for adding attributes to a script tag without is:inline', async () => {
+  const result = await transform(`<script type="module"></script>`);
+  assert.equal(result.diagnostics[0].severity, 4);
+  assert.match(result.diagnostics[0].text, /\#script-processing/);
+});
+
+test('does not report a diagnostic for the src attribute', async () => {
+  const result = await transform(`<script src="/external.js"></script>`);
+  console.log(result.diagnostics)
+  assert.equal(result.diagnostics.length, 0);
+});
+
+test.run();