@heliosgraphics/ui 2.0.1-alpha.10 → 2.0.1-alpha.11

package/components/Setup/Setup.spec.tsx

@@ -0,0 +1,53 @@
+import { describe, expect, it } from "bun:test"
+import type { HeliosFixedThemeType } from "../../types/themes"
+import { code } from "./Setup.utils"
+
+describe("Setup", () => {
+	it("should execute when serialized into an inline script", () => {
+		const rootDataset: Record<string, string> = {}
+		const localStorageValues = new Map<string, string>()
+		const listeners: Record<string, (event: { matches: boolean }) => void> = {}
+
+		globalThis.__theme = "light" as HeliosFixedThemeType
+		globalThis.__onThemeChange = undefined
+		globalThis.__setPreferredTheme = (): void => {}
+		globalThis.document = {
+			documentElement: {
+				dataset: rootDataset,
+			},
+		} as Document
+		globalThis.localStorage = {
+			getItem: (key: string): string | null => localStorageValues.get(key) ?? null,
+			setItem: (key: string, value: string): void => {
+				localStorageValues.set(key, value)
+			},
+		} as Storage
+		globalThis.matchMedia = ((query: string): MediaQueryList => {
+			expect(query).toBe("(prefers-color-scheme: dark)")
+			return {
+				matches: true,
+				addEventListener: (type: string, listener: (event: { matches: boolean }) => void): void => {
+					listeners[type] = listener
+				},
+			} as MediaQueryList
+		}) as typeof globalThis.matchMedia
+
+		new Function(`return (${code.toString()})("system", undefined)`)()
+
+		expect(globalThis.__theme).toBe("dark")
+		expect(rootDataset["theme"]).toBe("dark")
+		expect(typeof listeners["change"]).toBe("function")
+
+		const changeListener = listeners["change"]
+		expect(changeListener).toBeDefined()
+		if (!changeListener) {
+			throw new Error("expected change listener to be registered")
+		}
+
+		changeListener({ matches: false })
+
+		expect(globalThis.__theme).toBe("light")
+		expect(rootDataset["theme"]).toBe("light")
+		expect(localStorageValues.get("theme")).toBe("light")
+	})
+})

package/components/Setup/Setup.utils.ts

@@ -1,18 +1,20 @@
 import type { HeliosFixedThemeType, HeliosThemeType } from "../../types/themes"
 
-const setTheme = (newTheme: HeliosFixedThemeType): void => {
-	globalThis.__theme = newTheme
-	document.documentElement.dataset["theme"] = newTheme
-	globalThis.__onThemeChange?.(newTheme)
-}
-
-const handleDarkModeChange = (event: MediaQueryListEvent): void => {
-	globalThis.__setPreferredTheme(event.matches ? "dark" : "light")
-}
-
 export const code = (theme: HeliosThemeType = "system", fixedTheme?: HeliosFixedThemeType): void => {
 	globalThis.__onThemeChange = function (_theme: HeliosFixedThemeType): void {}
 
+	/* eslint-disable-next-line unicorn/consistent-function-scoping */
+	const setTheme = (newTheme: HeliosFixedThemeType): void => {
+		globalThis.__theme = newTheme
+		document.documentElement.dataset["theme"] = newTheme
+		globalThis.__onThemeChange?.(newTheme)
+	}
+
+	/* eslint-disable-next-line unicorn/consistent-function-scoping */
+	const handleDarkModeChange = (event: MediaQueryListEvent): void => {
+		globalThis.__setPreferredTheme(event.matches ? "dark" : "light")
+	}
+
 	const isLocked: boolean = fixedTheme !== undefined || theme !== "system"
 
 	if (fixedTheme !== undefined && theme !== "system") {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@heliosgraphics/ui",
-	"version": "2.0.1-alpha.10",
+	"version": "2.0.1-alpha.11",
 	"type": "module",
 	"sideEffects": [
 		"*.css",