diff --git a/package/src/integration.ts b/package/src/integration.ts index f90e991..20bbc60 100644 --- 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 new file mode 100644 index 0000000..4ae9bfd --- /dev/null +++ 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; +}