Fixes Lit support in the static build (#2370)

* [ci] collect stats

* [ci] update lockfile (#2388)

Co-authored-by: FredKSchott <[email protected]>

* Fixes for blog and docs examples (#2373)

* Fixes for blog and docs examples

* Adds a changeset

* Upgrade the compiler version

* Use a global style tag

* Skip on windows temporarily

* [ci] yarn format

* Fixes Lit support in the static build

* Adds a changeset

* test

* Upgrade lit-labs/ssr

* Conditional

* Testing again

* remove debugging code

* changeset

Co-authored-by: FredKSchott <[email protected]>
Co-authored-by: Fred K. Schott <[email protected]>

.changeset/odd-flowers-pay.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/renderer-lit': patch
+---
+
+Makes the renderer compatible with the static build

.changeset/spotty-flies-share.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes support for Lit within the static build

packages/astro/src/core/build/static-build.ts

@@ -58,6 +58,14 @@ export async function staticBuild(opts: StaticBuildOptions) {
 	// about that page, such as its paths.
 	const facadeIdToPageDataMap = new Map<string, PageBuildData>();
 
+	// Collects polyfills and passes them as top-level inputs
+	const polyfills = getRenderers(opts).flatMap(renderer => {
+		return (renderer.polyfills || []).concat(renderer.hydrationPolyfills || []);
+	});
+	for(const polyfill of polyfills) {
+		jsInput.add(polyfill);
+	}
+
 	for (const [component, pageData] of Object.entries(allPages)) {
 		const [renderers, mod] = pageData.preload;
 		const metadata = mod.$$metadata;
@@ -169,13 +177,19 @@ async function clientBuild(opts: StaticBuildOptions, internals: BuildInternals,
 	});
 }
 
-async function collectRenderers(opts: StaticBuildOptions): Promise<Renderer[]> {
+function getRenderers(opts: StaticBuildOptions) {
 	// All of the PageDatas have the same renderers, so just grab one.
 	const pageData = Object.values(opts.allPages)[0];
 	// These renderers have been loaded through Vite. To generate pages
 	// we need the ESM loaded version. This creates that.
 	const viteLoadedRenderers = pageData.preload[0];
 
+	return viteLoadedRenderers;
+}
+
+async function collectRenderers(opts: StaticBuildOptions): Promise<Renderer[]> {
+	const viteLoadedRenderers = getRenderers(opts);
+
 	const renderers = await Promise.all(
 		viteLoadedRenderers.map(async (r) => {
 			const mod = await import(r.serverEntry);

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

@@ -120,7 +120,7 @@ export async function generateHydrateScript(scriptOptions: HydrateScriptOptions,
 
 	let hydrationSource = '';
 	if (renderer.hydrationPolyfills) {
-		hydrationSource += `await Promise.all([${renderer.hydrationPolyfills.map((src: string) => `\n  import("${src}")`).join(', ')}]);\n`;
+		hydrationSource += `await Promise.all([${(await Promise.all(renderer.hydrationPolyfills.map(async (src: string) => `\n  import("${await result.resolve(src)}")`))).join(', ')}]);\n`;
 	}
 
 	hydrationSource += renderer.source
@@ -129,7 +129,7 @@ export async function generateHydrateScript(scriptOptions: HydrateScriptOptions,
 		  )}")]);
   return (el, children) => hydrate(el)(Component, ${serializeProps(props)}, children);
 `
-		: `await import("${componentUrl}");
+		: `await import("${await result.resolve(componentUrl)}");
   return () => {};
 `;
 

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

@@ -235,7 +235,7 @@ If you're still stuck, please open an issue on GitHub or join us at https://astr
 		for (const src of renderer.polyfills) {
 			result.scripts.add({
 				props: { type: 'module' },
-				children: `import "${src}";`,
+				children: `import "${await result.resolve(src)}";`,
 			});
 		}
 	}

packages/astro/test/fixtures/static-build-frameworks/src/components/LCounter.js

@@ -0,0 +1,34 @@
+import { LitElement, html } from 'lit';
+
+export const tagName = 'my-counter';
+
+class Counter extends LitElement {
+	static get properties() {
+		return {
+			count: {
+				type: Number,
+			},
+		};
+	}
+
+	constructor() {
+		super();
+		this.count = 0;
+	}
+
+	increment() {
+		this.count++;
+	}
+
+	render() {
+		return html`
+			<div>
+				<p>Count: ${this.count}</p>
+
+				<button type="button" @click=${this.increment}>Increment</button>
+			</div>
+		`;
+	}
+}
+
+customElements.define(tagName, Counter);

packages/astro/test/fixtures/static-build-frameworks/src/pages/lit.astro

@@ -0,0 +1,12 @@
+---
+import '../components/LCounter.js';
+---
+<html>
+<head>
+<title>Testing</title>
+</head>
+<body>
+<h1>Testing</h1>
+<my-counter client:load></my-counter>
+</body>
+</html>

packages/astro/test/static-build-frameworks.test.js

@@ -12,7 +12,11 @@ describe('Static build - frameworks', () => {
 	before(async () => {
 		fixture = await loadFixture({
 			projectRoot: './fixtures/static-build-frameworks/',
-			renderers: ['@astrojs/renderer-preact', '@astrojs/renderer-react'],
+			renderers: [
+				'@astrojs/renderer-preact',
+				'@astrojs/renderer-react',
+				'@astrojs/renderer-lit'
+			],
 			buildOptions: {
 				experimentalStaticBuild: true,
 			},
@@ -30,6 +34,11 @@ describe('Static build - frameworks', () => {
 		expect(html).to.be.a('string');
 	});
 
+	it('can build lit', async () => {
+		const html = await fixture.readFile('/lit/index.html');
+		expect(html).to.be.a('string');
+	});
+
 	it('can build nested framework usage', async () => {
 		const html = await fixture.readFile('/nested/index.html');
 		const $ = cheerio.load(html);

packages/renderers/renderer-lit/package.json

@@ -20,7 +20,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@lit-labs/ssr": "^1.0.0",
+    "@lit-labs/ssr": "^2.0.1",
     "@webcomponents/template-shadowroot": "^0.1.0",
     "lit": "^2.0.2"
   }

packages/renderers/renderer-lit/server-shim.js

@@ -1,3 +1,5 @@
-import '@lit-labs/ssr/lib/install-global-dom-shim.js';
+import { installWindowOnGlobal } from "@lit-labs/ssr/lib/dom-shim.js";
+installWindowOnGlobal();
+
 window.global = window;
 document.getElementsByTagName = () => [];