Astro Integration System (#2820)

* update examples

* add initial integrations

* update tests

* update astro

* update ci

* get final tests working

* update injectelement todo

* update ben code review

* respond to final code review feedback

1 files changed, 42 insertions, 0 deletions

diff --git a/packages/integrations/lit/src/index.ts b/packages/integrations/lit/src/index.ts
new file mode 100644
index 000000000..bf256eb84
--- /dev/null
+++ b/packages/integrations/lit/src/index.ts
@@ -0,0 +1,42 @@
+import { readFileSync } from 'node:fs';
+import type { AstroIntegration } from 'astro';
+
+function getViteConfiguration() {
+	return {
+		optimizeDeps: {
+			include: [
+				'@astrojs/lit/client-shim.js',
+				'@astrojs/lit/hydration-support.js',
+				'@webcomponents/template-shadowroot/template-shadowroot.js',
+				'lit/experimental-hydrate-support.js',
+			],
+			exclude: ['@astrojs/lit/server.js'],
+		},
+		ssr: {
+			external: ['lit-element/lit-element.js', '@lit-labs/ssr/lib/install-global-dom-shim.js', '@lit-labs/ssr/lib/render-lit-html.js', '@lit-labs/ssr/lib/lit-element-renderer.js'],
+		},
+	};
+}
+
+export default function (): AstroIntegration {
+	return {
+		name: '@astrojs/lit',
+		hooks: {
+			'astro:config:setup': ({ updateConfig, addRenderer, injectScript }) => {
+				// Inject the necessary polyfills on every page (inlined for speed).
+				injectScript('head-inline', readFileSync(new URL('../client-shim.min.js', import.meta.url), { encoding: 'utf-8' }));
+				// Inject the hydration code, before a component is hydrated.
+				injectScript('before-hydration', `import '@astrojs/lit/hydration-support.js';`);
+				// Add the lit renderer so that Astro can understand lit components.
+				addRenderer({
+					name: '@astrojs/lit',
+					serverEntrypoint: '@astrojs/lit/server.js',
+				});
+				// Update the vite configuration.
+				updateConfig({
+					vite: getViteConfiguration(),
+				});
+			},
+		},
+	};
+}