@fluixi/core 1.0.0-alpha.92 → 1.0.0-alpha.93

package/dist/src/lib/theme/index.js

@@ -4,11 +4,15 @@
  * without rewriting it. Generic over an arbitrary theme list (not just light/dark),
  * with optional async theme loading and lifecycle hooks.
  *
- * Built on the universal `storage` + `env` utilities, so reading the stored theme at
- * module-eval and touching `document`/`matchMedia` are safe on the server.
+ * The choice lives in a cookie by default, so the server render reads it and sends
+ * `<html data-theme>` already set: no flash and no mismatch for a returning visitor.
  */
+import { getActiveHead, useHead } from '@fluixi/head';
 import { createSignal } from '@fluixi/reactive/signal';
-import { storage, env } from '../env/index.js';
+import { StorageUnavailableError } from '@fluixi/storage';
+import { env } from '../env/index.js';
+import { persisted } from '../storage/persisted.js';
+import { useStorage } from '../storage/index.js';
 function systemMap(system) {
     if (!system)
         return null;
@@ -16,6 +20,31 @@ function systemMap(system) {
         return { dark: 'dark', light: 'light' };
     return system;
 }
+const YEAR = 60 * 60 * 24 * 365;
+/** @internal: a cookie for a year, or memory outside a request on the server. */
+export function defaultStorage() {
+    try {
+        return useStorage({ scope: 'cookie', cookie: { maxAge: YEAR, sameSite: 'lax' } });
+    }
+    catch (error) {
+        if (error instanceof StorageUnavailableError)
+            return null;
+        throw error;
+    }
+}
+/** How the head script finds the stored choice before any module has loaded. */
+/** @internal */
+export function storedLookup(storage, key) {
+    if (!storage)
+        return null;
+    const full = storage.keyPrefix + key;
+    if (storage.scope === 'cookie') {
+        return { from: 'cookie', name: encodeURIComponent(full).replace(/[()]/g, (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`) };
+    }
+    if (storage.scope === 'local')
+        return { from: 'local', name: full };
+    return null;
+}
 /**
  * A theme controller: a reactive current theme, written to an attribute on the document.
  *
@@ -28,39 +57,42 @@ function systemMap(system) {
  * ```ts
  * const theme = createTheme({ themes: ['light', 'dark'], system: { dark: 'dark' } });
  * theme.set('dark');
- * theme.current();   // 'dark', and the document now carries data-theme="dark"
+ * theme.value();     // 'dark', and the document now carries data-theme="dark"
  * ```
  */
 export function createTheme(options) {
     const storageKey = options.storageKey ?? 'theme';
     const attribute = options.attribute ?? 'data-theme';
     const sys = systemMap(options.system);
-    const detectInitial = () => {
-        const stored = storage.getItem(storageKey);
-        if (stored && options.themes.includes(stored))
-            return stored;
-        if (sys && env.window?.matchMedia?.('(prefers-color-scheme: dark)')?.matches)
-            return sys.dark;
-        if (sys)
-            return sys.light;
-        return options.default;
+    const storage = options.storage === undefined ? defaultStorage() : options.storage;
+    const valid = (t) => typeof t === 'string' && options.themes.includes(t);
+    // Without a stored choice: the system preference where there is one to ask, else the default.
+    const fallback = sys && env.window?.matchMedia?.('(prefers-color-scheme: dark)')?.matches ? sys.dark : sys ? sys.light : options.default;
+    const stored = storage ? persisted(storage, storageKey) : null;
+    // Holds a choice the storage refused (a cookie after the response went out), so the page still switches.
+    const [unsaved, setUnsaved] = createSignal(null);
+    const value = () => {
+        const local = unsaved();
+        if (local !== null)
+            return local;
+        const saved = stored?.();
+        return valid(saved) ? saved : fallback;
     };
-    const [value, setValue] = createSignal(detectInitial());
     const [isLoading, setLoading] = createSignal(false);
     const apply = (t) => {
         env.document?.documentElement.setAttribute(attribute, t);
-        try {
-            storage.setItem(storageKey, t);
-        }
-        catch {
-            /* best-effort persistence */
-        }
     };
     const set = (t) => {
         if (!options.themes.includes(t))
             return;
         const prev = value();
-        setValue(() => t);
+        try {
+            stored?.set(t);
+            setUnsaved(stored ? null : t);
+        }
+        catch {
+            setUnsaved(() => t);
+        }
         apply(t);
         options.onChange?.(t, prev);
         if (options.load) {
@@ -77,18 +109,27 @@ export function createTheme(options) {
         set(options.themes[(i + 1) % options.themes.length]);
     };
     const init = () => apply(value());
-    const headScript = () => {
-        const cfg = JSON.stringify({
-            k: storageKey,
-            a: attribute,
-            d: options.default,
-            sys,
-        });
-        // Runs before paint: read stored choice (or system pref), set the attribute, so the
-        // server-rendered HTML never flashes the default theme before hydration.
-        return (`<script>(function(){try{var c=${cfg},t=localStorage.getItem(c.k);` +
+    const scriptBody = () => {
+        const cfg = JSON.stringify({ s: storedLookup(storage, storageKey), a: attribute, d: options.default, sys, ts: options.themes }).replace(/</g, '\\u003c');
+        // Runs before paint: read the stored choice (or the system preference) and set the
+        // attribute, for pages the server did not render with it. Stored values are envelopes.
+        return (`(function(){try{var c=${cfg},t=null,s=c.s,r=null;` +
+            `if(s&&s.from==='local')r=localStorage.getItem(s.name);` +
+            `if(s&&s.from==='cookie')document.cookie.split('; ').forEach(function(p){var i=p.indexOf('=');if(p.slice(0,i)===s.name)r=decodeURIComponent(p.slice(i+1));});` +
+            `if(r){var e=JSON.parse(r);t=e&&e.v===1?e.value:e;}` +
+            `if(c.ts.indexOf(t)<0)t=null;` +
             `if(!t&&c.sys)t=matchMedia('(prefers-color-scheme: dark)').matches?c.sys.dark:c.sys.light;` +
-            `if(!t)t=c.d;document.documentElement.setAttribute(c.a,t);}catch(e){}})();</script>`);
+            `if(!t)t=c.d;document.documentElement.setAttribute(c.a,t);}catch(e){}})();`);
     };
+    const headScript = () => `<script>${scriptBody()}</script>`;
+    // During a render the attribute goes out with the page; on the client the head keeps it current.
+    // A prerendered page, or a first visit before any choice, has nothing the server could know;
+    // the script settles it before paint, from the same configuration.
+    if (getActiveHead()) {
+        useHead({
+            htmlAttrs: { [attribute]: () => value() },
+            ...(options.script === false ? {} : { script: [{ children: scriptBody() }] }),
+        });
+    }
     return { value, isLoading, set, toggle, init, headScript };
 }

package/dist/src/lib/theme/index.mjs

@@ -1,23 +1,11 @@
 // src/lib/theme/index.ts
+import { getActiveHead, useHead } from "@fluixi/head";
 import { createSignal } from "@fluixi/reactive/signal";
+import { StorageUnavailableError as StorageUnavailableError2 } from "@fluixi/storage";
 
 // src/lib/env/index.ts
 import { isServer } from "@fluixi/dom";
 import { isServer as onServer } from "@fluixi/dom";
-function createMemoryStorage() {
-  const mem = /* @__PURE__ */ new Map();
-  return {
-    getItem: (k) => mem.has(k) ? mem.get(k) : null,
-    setItem: (k, v) => void mem.set(k, String(v)),
-    removeItem: (k) => void mem.delete(k),
-    clear: () => mem.clear(),
-    key: (i) => Array.from(mem.keys())[i] ?? null,
-    get length() {
-      return mem.size;
-    }
-  };
-}
-var storage = typeof localStorage !== "undefined" ? localStorage : createMemoryStorage();
 var env = {
   get window() {
     return typeof window !== "undefined" ? window : void 0;
@@ -27,36 +15,206 @@ var env = {
   }
 };
 
+// src/lib/storage/persisted.ts
+import { getOwner, onCleanup, signal, untrack } from "@fluixi/reactive/signal";
+var isAsync = (storage) => "encryption" in storage;
+function persisted(storage, key, options = {}) {
+  const fallback = options.fallback ?? null;
+  const name = options.name ?? `storage:${storage.keyPrefix}${key}`;
+  const state = signal(isAsync(storage) ? fallback : storage.get(key) ?? fallback, { name });
+  const put = (value) => state.set(() => value);
+  const resolve = (next) => typeof next === "function" ? next(untrack(state)) : next;
+  const writeOptions = (extra) => ({
+    ...options.ttl !== void 0 ? { ttl: options.ttl } : {},
+    ...options.encrypt ? { encrypt: true } : {},
+    ...extra
+  });
+  if (!isAsync(storage)) {
+    const off2 = storage.subscribe(key, (event) => {
+      if (event.type !== "set") return put(fallback);
+      if (event.value !== void 0) put(event.value);
+    });
+    if (getOwner()) onCleanup(off2);
+    return Object.assign(() => state(), {
+      set(next, extra) {
+        const value = resolve(next);
+        storage.set(key, value, writeOptions(extra));
+        put(value);
+      },
+      remove() {
+        storage.remove(key);
+        put(fallback);
+      }
+    });
+  }
+  let written = false;
+  const reread = () => storage.get(key).then(
+    (value) => put(value ?? fallback),
+    () => void 0
+  );
+  const off = storage.subscribe(key, (event) => {
+    if (event.type !== "set") return put(fallback);
+    if (event.value !== void 0) put(event.value);
+    else void reread();
+  });
+  if (getOwner()) onCleanup(off);
+  const ready = storage.get(key).then((value) => {
+    if (!written) put(value ?? fallback);
+  });
+  return Object.assign(() => state(), {
+    ready,
+    async set(next, extra) {
+      const previous = untrack(state);
+      const value = resolve(next);
+      written = true;
+      put(value);
+      try {
+        await storage.set(key, value, writeOptions(extra));
+      } catch (error) {
+        put(previous);
+        throw error;
+      }
+    },
+    async remove() {
+      written = true;
+      await storage.remove(key);
+      put(fallback);
+    }
+  });
+}
+
+// src/lib/storage/index.ts
+import { appendResponseHeader, getRequestContext, getServerData } from "@fluixi/dom";
+import { createContext, useContext } from "@fluixi/reactive/signal";
+import {
+  createAsyncStorage,
+  createSyncStorage,
+  memoryStorage,
+  StorageUnavailableError
+} from "@fluixi/storage";
+import { documentCookieAdapter, localStorageAdapter, sessionStorageAdapter } from "@fluixi/storage/browser";
+import { cookieStorage, requestStorage, toStorageRequest } from "@fluixi/storage/server";
+var StorageContext = createContext(void 0, "storage");
+var AsyncStorageContext = createContext(void 0, "asyncStorage");
+var isBrowser = () => typeof window !== "undefined" && typeof document !== "undefined";
+var perRequest = /* @__PURE__ */ new WeakMap();
+var perPage = /* @__PURE__ */ new Map();
+function cached(scope, id, make) {
+  let adapter = scope.get(id);
+  if (!adapter) scope.set(id, adapter = make());
+  return adapter;
+}
+function requestRequired(scope) {
+  throw new StorageUnavailableError(
+    `useStorage({ scope: '${scope}' }) on the server needs a request: call it during a render, a loader or a server function, or provide a storage with <StorageProvider>.`
+  );
+}
+function adapterFor(scope, cookie = {}) {
+  const ctx = getRequestContext();
+  const options = { httpOnly: false, ...cookie };
+  switch (scope) {
+    case "local":
+      return localStorageAdapter();
+    case "session":
+      return sessionStorageAdapter();
+    case "request":
+      if (isBrowser()) return cached(perPage, "request", memoryStorage);
+      if (!ctx) requestRequired(scope);
+      return cached(perRequest.get(ctx) ?? perRequest.set(ctx, /* @__PURE__ */ new Map()).get(ctx), "request", requestStorage);
+    case "cookie": {
+      const id = `cookie:${JSON.stringify(options)}`;
+      if (isBrowser()) {
+        const { httpOnly: _ignored, ...browser } = options;
+        return cached(perPage, id, () => documentCookieAdapter(browser));
+      }
+      if (!ctx) requestRequired(scope);
+      const raw = ctx.event.request;
+      const target = raw && typeof raw === "object" ? raw : void 0;
+      return cached(
+        perRequest.get(ctx) ?? perRequest.set(ctx, /* @__PURE__ */ new Map()).get(ctx),
+        id,
+        () => cookieStorage({
+          ...options,
+          request: raw && typeof raw === "object" && ("headers" in raw || "getHeader" in raw) ? toStorageRequest(raw) : void 0,
+          response: {
+            appendHeader(name, value) {
+              if (!appendResponseHeader(name, value, target)) {
+                throw new StorageUnavailableError("The response headers were already sent, so this cookie cannot reach the browser. Write it before the page head goes out: in middleware, a loader, a server function or the render before its first chunk.");
+              }
+            }
+          }
+        })
+      );
+    }
+  }
+}
+function useStorage(options = {}) {
+  const { scope = "auto", cookie, ...storageOptions } = options;
+  if (scope === "auto") {
+    const provided = useContext(StorageContext);
+    if (provided) return options.namespace ? provided.namespace(options.namespace) : provided;
+  }
+  return createSyncStorage({ ...storageOptions, adapter: resolveAdapter(scope, cookie) });
+}
+function resolveAdapter(scope, cookie) {
+  if (scope !== "auto") return adapterFor(scope, cookie);
+  if (isBrowser()) return adapterFor("local");
+  if (!getRequestContext()) requestRequired(scope);
+  return adapterFor("request");
+}
+
 // src/lib/theme/index.ts
 function systemMap(system) {
   if (!system) return null;
   if (system === true) return { dark: "dark", light: "light" };
   return system;
 }
+var YEAR = 60 * 60 * 24 * 365;
+function defaultStorage() {
+  try {
+    return useStorage({ scope: "cookie", cookie: { maxAge: YEAR, sameSite: "lax" } });
+  } catch (error) {
+    if (error instanceof StorageUnavailableError2) return null;
+    throw error;
+  }
+}
+function storedLookup(storage, key) {
+  if (!storage) return null;
+  const full = storage.keyPrefix + key;
+  if (storage.scope === "cookie") {
+    return { from: "cookie", name: encodeURIComponent(full).replace(/[()]/g, (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`) };
+  }
+  if (storage.scope === "local") return { from: "local", name: full };
+  return null;
+}
 function createTheme(options) {
   const storageKey = options.storageKey ?? "theme";
   const attribute = options.attribute ?? "data-theme";
   const sys = systemMap(options.system);
-  const detectInitial = () => {
-    const stored = storage.getItem(storageKey);
-    if (stored && options.themes.includes(stored)) return stored;
-    if (sys && env.window?.matchMedia?.("(prefers-color-scheme: dark)")?.matches) return sys.dark;
-    if (sys) return sys.light;
-    return options.default;
+  const storage = options.storage === void 0 ? defaultStorage() : options.storage;
+  const valid = (t) => typeof t === "string" && options.themes.includes(t);
+  const fallback = sys && env.window?.matchMedia?.("(prefers-color-scheme: dark)")?.matches ? sys.dark : sys ? sys.light : options.default;
+  const stored = storage ? persisted(storage, storageKey) : null;
+  const [unsaved, setUnsaved] = createSignal(null);
+  const value = () => {
+    const local = unsaved();
+    if (local !== null) return local;
+    const saved = stored?.();
+    return valid(saved) ? saved : fallback;
   };
-  const [value, setValue] = createSignal(detectInitial());
   const [isLoading, setLoading] = createSignal(false);
   const apply = (t) => {
     env.document?.documentElement.setAttribute(attribute, t);
-    try {
-      storage.setItem(storageKey, t);
-    } catch {
-    }
   };
   const set = (t) => {
     if (!options.themes.includes(t)) return;
     const prev = value();
-    setValue(() => t);
+    try {
+      stored?.set(t);
+      setUnsaved(stored ? null : t);
+    } catch {
+      setUnsaved(() => t);
+    }
     apply(t);
     options.onChange?.(t, prev);
     if (options.load) {
@@ -73,17 +231,21 @@ function createTheme(options) {
     set(options.themes[(i + 1) % options.themes.length]);
   };
   const init = () => apply(value());
-  const headScript = () => {
-    const cfg = JSON.stringify({
-      k: storageKey,
-      a: attribute,
-      d: options.default,
-      sys
-    });
-    return `<script>(function(){try{var c=${cfg},t=localStorage.getItem(c.k);if(!t&&c.sys)t=matchMedia('(prefers-color-scheme: dark)').matches?c.sys.dark:c.sys.light;if(!t)t=c.d;document.documentElement.setAttribute(c.a,t);}catch(e){}})();<\/script>`;
+  const scriptBody = () => {
+    const cfg = JSON.stringify({ s: storedLookup(storage, storageKey), a: attribute, d: options.default, sys, ts: options.themes }).replace(/</g, "\\u003c");
+    return `(function(){try{var c=${cfg},t=null,s=c.s,r=null;if(s&&s.from==='local')r=localStorage.getItem(s.name);if(s&&s.from==='cookie')document.cookie.split('; ').forEach(function(p){var i=p.indexOf('=');if(p.slice(0,i)===s.name)r=decodeURIComponent(p.slice(i+1));});if(r){var e=JSON.parse(r);t=e&&e.v===1?e.value:e;}if(c.ts.indexOf(t)<0)t=null;if(!t&&c.sys)t=matchMedia('(prefers-color-scheme: dark)').matches?c.sys.dark:c.sys.light;if(!t)t=c.d;document.documentElement.setAttribute(c.a,t);}catch(e){}})();`;
   };
+  const headScript = () => `<script>${scriptBody()}<\/script>`;
+  if (getActiveHead()) {
+    useHead({
+      htmlAttrs: { [attribute]: () => value() },
+      ...options.script === false ? {} : { script: [{ children: scriptBody() }] }
+    });
+  }
   return { value, isLoading, set, toggle, init, headScript };
 }
 export {
-  createTheme
+  createTheme,
+  defaultStorage,
+  storedLookup
 };