Add lit integration to render Lit web component markup included in render() functions during build

Author: webstackdev

@types/semantic-ui__astro-lit/index.d.ts

@@ -0,0 +1,6 @@
+import type { AstroIntegration, AstroRenderer } from 'astro'
+
+declare module '@semantic-ui/astro-lit' {
+  export function getContainerRenderer(): AstroRenderer
+  export default function litIntegration(): AstroIntegration
+}

astro.config.ts

@@ -1,11 +1,12 @@
+import AstroPWA from '@vite-pwa/astro'
+import icon from 'astro-icon'
+import lit from '@semantic-ui/astro-lit'
 import mdx from '@astrojs/mdx'
-import sitemap from '@astrojs/sitemap'
-import vercelStatic from '@astrojs/vercel'
 import sentry from '@sentry/astro'
+import sitemap from '@astrojs/sitemap'
 import tailwindcss from '@tailwindcss/vite'
-import AstroPWA from '@vite-pwa/astro'
+import vercelStatic from '@astrojs/vercel'
 import vtbot from 'astro-vtbot'
-import icon from 'astro-icon'
 import { defineConfig } from 'astro/config'
 import { fileURLToPath } from 'node:url'
 import type { PluginOption } from 'vite'
@@ -49,6 +50,8 @@ const standardIntegrations = [
     /** Enable debug logging to see validation details */
     debug: true,
   }),
+  /** Integration to render Lit templates during build */
+  lit(),
   /** Inject package release (name@version) for tracking regressions between releases */
   packageRelease(),
   /** Inject privacy policy version from git commit date for GDPR record keeping */

package-lock.json

@@ -59,6 +59,7 @@
     "@glidejs/glide": "^3.7.1",
     "@nanostores/lit": "^0.2.3",
     "@nanostores/persistent": "^1.2.0",
+    "@semantic-ui/astro-lit": "^5.1.1",
     "@sentry/astro": "^10.27.0",
     "@sentry/browser": "^10.27.0",
     "@shikijs/transformers": "^3.17.0",

package.json

@@ -92,6 +92,7 @@
       "@styles/*": ["src/styles/*"],
       "@test/*": ["test/*"],
       "astro-vtbot": ["@types/astro-vtbot"],
+      "@semantic-ui/astro-lit": ["@types/semantic-ui__astro-lit/index.d.ts"],
       "unstorage": ["@types/unstorage/index.d.ts"],
       "unstorage/*": ["@types/unstorage/index.d.ts"],
       "unstorage/drivers/*": ["@types/unstorage/index.d.ts"]