@stacksjs/stx 0.2.121 → 0.2.123

package/dist/appearance-bootstrap.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Transform every `@appearanceBootstrap({...})` directive in a template.
+ */
+export declare function processAppearanceBootstrapDirective(template: string, context: Record<string, unknown>): string;
+export declare interface AppearanceBootstrapValue {
+  key: string
+  attribute: string
+  allowed: string[]
+  default: string
+}
+export declare interface ColorModeBootstrapValue {
+  key: string
+  attribute: string
+  default: 'light' | 'dark' | 'system'
+}
+export declare interface AppearanceBootstrapOptions {
+  storageKey: string
+  appearance: AppearanceBootstrapValue
+  colorMode: ColorModeBootstrapValue
+}

package/dist/appearance-bootstrap.js

@@ -0,0 +1,92 @@
+import { safeEvaluate } from "./safe-evaluator.js";
+const DATA_ATTRIBUTE_PATTERN = /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/, PROPERTY_PATTERN = /^[A-Za-z_$][\w$]*$/, COLOR_MODES = new Set(["light", "dark", "system"]);
+function assertString(value, label) {
+  if (typeof value !== "string" || value.length === 0)
+    throw Error(`@appearanceBootstrap ${label} must be a non-empty string`);
+}
+function normalizeOptions(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value))
+    throw Error("@appearanceBootstrap expects an options object");
+  const input = value, appearance = input.appearance, colorMode = input.colorMode;
+  assertString(input.storageKey, "storageKey");
+  if (!appearance || typeof appearance !== "object" || Array.isArray(appearance))
+    throw Error("@appearanceBootstrap appearance must be an object");
+  if (!colorMode || typeof colorMode !== "object" || Array.isArray(colorMode))
+    throw Error("@appearanceBootstrap colorMode must be an object");
+  assertString(appearance.key, "appearance.key");
+  assertString(appearance.attribute, "appearance.attribute");
+  assertString(appearance.default, "appearance.default");
+  assertString(colorMode.key, "colorMode.key");
+  assertString(colorMode.attribute, "colorMode.attribute");
+  assertString(colorMode.default, "colorMode.default");
+  if (!PROPERTY_PATTERN.test(appearance.key) || !PROPERTY_PATTERN.test(colorMode.key))
+    throw Error("@appearanceBootstrap preference keys must be JavaScript property names");
+  if (!DATA_ATTRIBUTE_PATTERN.test(appearance.attribute) || !DATA_ATTRIBUTE_PATTERN.test(colorMode.attribute))
+    throw Error("@appearanceBootstrap attributes must be lowercase data attribute names");
+  if (!Array.isArray(appearance.allowed) || appearance.allowed.length === 0 || appearance.allowed.some((item) => typeof item !== "string" || item.length === 0))
+    throw Error("@appearanceBootstrap appearance.allowed must contain one or more strings");
+  if (!appearance.allowed.includes(appearance.default))
+    throw Error("@appearanceBootstrap appearance.default must be in appearance.allowed");
+  if (!COLOR_MODES.has(colorMode.default))
+    throw Error("@appearanceBootstrap colorMode.default must be light, dark, or system");
+  return {
+    storageKey: input.storageKey,
+    appearance: {
+      key: appearance.key,
+      attribute: appearance.attribute,
+      allowed: [...new Set(appearance.allowed)],
+      default: appearance.default
+    },
+    colorMode: {
+      key: colorMode.key,
+      attribute: colorMode.attribute,
+      default: colorMode.default
+    }
+  };
+}
+function serializeForScript(value) {
+  return JSON.stringify(value).replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/&/g, "\\u0026").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
+}
+function generateBootstrap(options) {
+  return `<script data-stx-scoped data-stx-appearance-bootstrap>(function(){"use strict";const config=${serializeForScript(options)};const root=document.documentElement;let stored={};try{const raw=localStorage.getItem(config.storageKey);const parsed=raw?JSON.parse(raw):{};if(parsed&&typeof parsed==="object"&&!Array.isArray(parsed))stored=parsed}catch{}const selectedAppearance=config.appearance.allowed.includes(stored[config.appearance.key])?stored[config.appearance.key]:config.appearance.default;const selectedMode=["light","dark","system"].includes(stored[config.colorMode.key])?stored[config.colorMode.key]:config.colorMode.default;root.setAttribute("data-"+config.appearance.attribute,selectedAppearance);root.setAttribute("data-"+config.colorMode.attribute,selectedMode);let dark=selectedMode==="dark";if(selectedMode==="system"){try{dark=matchMedia("(prefers-color-scheme: dark)").matches}catch{dark=false}}root.classList.toggle("dark",dark);root.dataset.theme=dark?"dark":"light"}());</script>`;
+}
+function findClosingParenthesis(source, openIndex) {
+  let depth = 1, quote = null, escaped = !1;
+  for (let index = openIndex + 1;index < source.length; index++) {
+    const character = source[index];
+    if (escaped) {
+      escaped = !1;
+      continue;
+    }
+    if (quote) {
+      if (character === "\\")
+        escaped = !0;
+      else if (character === quote)
+        quote = null;
+      continue;
+    }
+    if (character === '"' || character === "'" || character === "`") {
+      quote = character;
+      continue;
+    }
+    if (character === "(")
+      depth++;
+    else if (character === ")" && --depth === 0)
+      return index;
+  }
+  return -1;
+}
+export function processAppearanceBootstrapDirective(template, context) {
+  let output = template;
+  const pattern = /@appearanceBootstrap\s*\(/g;
+  let match;
+  while ((match = pattern.exec(output)) !== null) {
+    const openIndex = match.index + match[0].length - 1, closeIndex = findClosingParenthesis(output, openIndex);
+    if (closeIndex === -1)
+      throw Error("@appearanceBootstrap has an unclosed options object");
+    const expression = output.slice(openIndex + 1, closeIndex).trim(), evaluated = safeEvaluate(`(${expression})`, context), replacement = generateBootstrap(normalizeOptions(evaluated));
+    output = output.slice(0, match.index) + replacement + output.slice(closeIndex + 1);
+    pattern.lastIndex = match.index + replacement.length;
+  }
+  return output;
+}