Implement new default script behavior, style is:global (#2961)

* feat: implement RFC0016

* chore: update to latest compiler

* chore: update compiler

* test: fix script tests

* test: update public tests

* feat: throw a warning when referencing scripts in `public/` without `is:inline`

.changeset/happy-carrots-carry.md

@@ -0,0 +1,5 @@
+---
+'astro': minor
+---
+
+Implement [RFC0016](https://github.com/withastro/rfcs/blob/main/proposals/0016-style-script-defaults.md) which changes the default behavior of `script`, introduces `is:inline`, and changes `<style global>` to `<style is:global>`

examples/component/demo/src/pages/index.astro

@@ -7,7 +7,7 @@ import * as Component from '@example/my-component';
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width" />
 		<title>Welcome to Astro</title>
-		<style global>
+		<style is:global>
 			h {
 				display: block;
 				font-size: 2em;

examples/with-tailwindcss/src/components/Button.astro

@@ -5,7 +5,8 @@
 <button class="py-2 px-4 bg-purple-500 text-white font-semibold rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75">
 	<slot />
 </button>
-<script hoist>
+
+<script>
 	import confetti from 'canvas-confetti'; 
 	document.body.querySelector('button').addEventListener("click", () => confetti());
-</script>
+</script>

packages/astro/package.json

@@ -73,7 +73,7 @@
     "test:match": "mocha --timeout 20000 -g"
   },
   "dependencies": {
-    "@astrojs/compiler": "^0.13.2",
+    "@astrojs/compiler": "^0.14.1",
     "@astrojs/language-server": "^0.13.2",
     "@astrojs/markdown-remark": "^0.7.0",
     "@astrojs/prism": "0.4.1",

packages/astro/src/core/render/result.ts

@@ -122,10 +122,9 @@ export function createResult(args: CreateResultArgs): SSRResult {
 						let extra = `This can be replaced with a dynamic import like so: await import("${path}")`;
 						if (isCSSRequest(path)) {
 							extra = `It looks like you are resolving styles. If you are adding a link tag, replace with this:
-
-<style global>
-@import "${path}";
-</style>
+---
+import "${path}";
+---
 `;
 						} else if (isScriptRequest(path)) {
 							extra = `It looks like you are resolving scripts. If you are adding a script tag, replace with this:
@@ -134,7 +133,7 @@ export function createResult(args: CreateResultArgs): SSRResult {
 
 or consider make it a module like so:
 
-<script type="module" hoist>
+<script>
 	import MyModule from "${path}";
 </script>
 `;

packages/astro/src/runtime/server/index.ts

@@ -535,16 +535,17 @@ function getHTMLElementName(constructor: typeof HTMLElement) {
 }
 
 function renderElement(name: string, { props: _props, children = '' }: SSRElement, shouldEscape = true) {
-	// Do not print `hoist`, `lang`, `global`
+	// Do not print `hoist`, `lang`, `is:global`
 	const { lang: _, 'data-astro-id': astroId, 'define:vars': defineVars, ...props } = _props;
 	if (defineVars) {
 		if (name === 'style') {
-			if (props.global) {
+			if (props['is:global']) {
 				children = defineStyleVars(`:root`, defineVars) + '\n' + children;
 			} else {
 				children = defineStyleVars(`.astro-${astroId}`, defineVars) + '\n' + children;
 			}
-			delete props.global;
+			delete props['is:global'];
+			delete props['is:scoped'];
 		}
 		if (name === 'script') {
 			delete props.hoist;

packages/astro/src/vite-plugin-astro/index.ts

@@ -63,7 +63,7 @@ export default function astro({ config, logging }: AstroPluginOptions): vite.Plu
 				const { query: fromQuery, filename } = parseAstroRequest(from);
 				if (fromQuery.astro && isRelativePath(id) && fromQuery.type === 'script') {
 					const resolvedURL = new URL(id, `file://${filename}`);
-					const resolved = resolvedURL.pathname;
+					const resolved = resolvedURL.pathname
 					if (isBrowserPath(resolved)) {
 						return relativeToRoot(resolved + resolvedURL.search);
 					}
@@ -96,7 +96,7 @@ export default function astro({ config, logging }: AstroPluginOptions): vite.Plu
 			let source = await fs.promises.readFile(fileUrl, 'utf-8');
 			const isPage = fileUrl.pathname.startsWith(config.pages.pathname);
 			if (isPage && config._ctx.scripts.some((s) => s.stage === 'page')) {
-				source += `\n<script hoist src="${PAGE_SCRIPT_ID}" />`;
+				source += `\n<script src="${PAGE_SCRIPT_ID}" />`;
 			}
 			if (query.astro) {
 				if (query.type === 'style') {
@@ -127,6 +127,14 @@ export default function astro({ config, logging }: AstroPluginOptions): vite.Plu
 						throw new Error(`No hoisted script at index ${query.index}`);
 					}
 
+					if (hoistedScript.type === 'external') {
+						const src = hoistedScript.src!;
+						if (src.startsWith('/') && !isBrowserPath(src)) {
+							const publicDir = config.public.pathname.replace(/\/$/, '').split('/').pop() + '/';
+							throw new Error(`\n\n<script src="${src}"> references an asset in the "${publicDir}" directory. Please add the "is:inline" directive to keep this asset from being bundled.\n\nFile: ${filename}`)
+						}
+					}
+
 					return {
 						code: hoistedScript.type === 'inline' ? hoistedScript.code! : `import "${hoistedScript.src!}";`,
 					};

packages/astro/test/astro-public.test.js

@@ -12,7 +12,7 @@ describe('Public', () => {
 	it('css and js files do not get bundled', async () => {
 		let indexHtml = await fixture.readFile('/index.html');
 		expect(indexHtml).to.include('<script src="/example.js"></script>');
-		expect(indexHtml).to.include('<link href="/example.css" ref="stylesheet">');
+		expect(indexHtml).to.include('<link href="/example.css" rel="stylesheet">');
 		expect(indexHtml).to.include('<img src="/images/twitter.png">');
 	});
 });

packages/astro/test/fixtures/astro-css-bundling/src/components/Nav.astro

@@ -19,7 +19,7 @@
 }
 </style>
 
-<style global>
+<style is:global>
 html {
   --primary: aquamarine;
 }

packages/astro/test/fixtures/astro-public/src/pages/index.astro

@@ -1,10 +1,10 @@
 <html lang="en">
 <head>
   <title>This Site</title>
-  <link href="/example.css" ref="stylesheet"/>
-  <script src="/example.js"></script>
+  <link href="/example.css" rel="stylesheet"/>
+  <script is:inline src="/example.js"></script>
 </head>
 <body>
   <img src="/images/twitter.png"  />
 </body>
-</html>
+</html>

packages/astro/test/fixtures/astro-scripts/src/components/Inline.astro

@@ -1,3 +1,3 @@
-<script hoist type="module">
+<script>
   console.log('some content here.');
-</script>
+</script>

packages/astro/test/fixtures/astro-scripts/src/components/NoHoistClassic.astro

@@ -1,4 +1,4 @@
 ---
 import url from "../scripts/no_hoist_nonmodule.js?url"
 ---
-<script src={url}></script>
+<script is:inline src={url}></script>

packages/astro/test/fixtures/astro-scripts/src/components/NoHoistModule.astro

@@ -1,4 +1,4 @@
 ---
 import url from '../scripts/no_hoist_module.js?url';
 ---
-<script type="module" src={url}></script>
+<script is:inline type="module" src={url}></script>

packages/astro/test/fixtures/astro-scripts/src/components/Widget.astro

@@ -1 +1 @@
-<script hoist type="module" src="../scripts/something.js"></script>
+<script src="../scripts/something.js"></script>

packages/astro/test/fixtures/astro-scripts/src/components/Widget2.astro

@@ -1 +1 @@
-<script hoist type="module" src="../scripts/another_external.js"></script>
+<script src="../scripts/another_external.js"></script>

packages/astro/test/fixtures/astro-scripts/src/pages/external.astro

@@ -16,4 +16,4 @@ import Widget2 from '../components/Widget2.astro';
   <Widget />
   <Widget2 />
 </body>
-</html>
+</html>

packages/astro/test/fixtures/remote-css/src/components/CommonHead.astro

@@ -1,5 +1,5 @@
-  <style global>
+  <style is:global>
     /* Testing remote imports */
     @import "https://unpkg.com/open-props";
     @import "https://unpkg.com/open-props/normalize.min.css";
-  </style>
+  </style>