fix(dynamic-script): Use addVirtualImports to hande dynamic values …

…for `localStorageKey` in script Also adds `virtual.d.ts` for types in dev
AVGVSTVS96 · Jul 20, 2024 · 18177a6 · 18177a6
1 parent 6927885
commit 18177a6
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 25 deletions.
diff --git a/package/src/integration.ts b/package/src/integration.ts
@@ -1,36 +1,46 @@
-import { defineIntegration } from "astro-integration-kit";
+import { defineIntegration, addVirtualImports } from "astro-integration-kit";
 import { z } from "astro/zod";
 
 export const astroFoucKiller = defineIntegration({
   name: "astro-fouc-killer",
-  optionsSchema: z
-    .object({
-      localStorageKey: z.string(),
-    })
-    .optional(),
-  setup({ options }) {
-    const localStorageKey = options?.localStorageKey ?? "themeToggle";
-
+  optionsSchema: z.object({
+    localStorageKey: z.string().default("themeToggle"),
+  }),
+  setup({ name, options }) {
     return {
       hooks: {
-        "astro:config:setup": ({ injectScript }) => {
+        "astro:config:setup": (params) => {
+          const { injectScript } = params;
+
+          addVirtualImports(params, {
+            name,
+            imports: {
+              "virtual:astro-fouc-killer/config": `
+                export const localStorageKey = '${options.localStorageKey}';
+              `,
+              "virtual:astro-fouc-killer/script": `
+                import { localStorageKey } from 'virtual:astro-fouc-killer/config';
+
+                const preferredTheme =
+                  localStorage.getItem(localStorageKey) ||
+                  (window.matchMedia('(prefers-color-scheme: dark)').matches
+                    ? 'dark'
+                    : 'light');
+                document.documentElement.classList.toggle(
+                  'dark',
+                  preferredTheme === 'dark'
+                );
+                window.addEventListener('storage', () => {
+                  const isDark = localStorage.getItem(localStorageKey) === 'dark';
+                  document.documentElement.classList.toggle('dark', isDark);
+                });
+              `,
+            },
+          });
+
           injectScript(
             "head-inline",
-            `
-            const preferredTheme =
-              localStorage.getItem('${localStorageKey}') ||
-              (window.matchMedia('(prefers-color-scheme: dark)').matches
-                ? 'dark'
-                : 'light');
-            document.documentElement.classList.toggle(
-              'dark',
-              preferredTheme === 'dark'
-            );
-            window.addEventListener('storage', () => {
-              const isDark = localStorage.getItem('${localStorageKey}') === 'dark';
-              document.documentElement.classList.toggle('dark', isDark);
-            });
-          `
+            `import 'virtual:astro-fouc-killer/script'`
           );
         },
       },

diff --git a/package/virtual.d.ts b/package/virtual.d.ts
@@ -0,0 +1,8 @@
+declare module "virtual:astro-fouc-killer/config" {
+  export const localStorageKey: string;
+}
+
+declare module "virtual:astro-fouc-killer/script" {
+  const script: void;
+  export default script;
+}