npm - tutuca - Versions diffs - 0.9.112 → 0.9.113 - Mend

tutuca 0.9.112 → 0.9.113

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/tutuca-cli.js +43 -5
package/dist/tutuca-storybook.js +106 -7
package/package.json +1 -1
package/skill/tutuca/margaui.md +39 -0
package/skill/tutuca/storybook.md +26 -0

package/dist/tutuca-cli.js CHANGED Viewed

@@ -17368,9 +17368,33 @@ function buildImports(base, { margauiEnabled, margauiJsUrl }) {
     imports.margaui = margauiJsUrl;
   return imports;
 }
+function themesBaseUrl(themeUrl) {
+  return themeUrl.slice(0, themeUrl.lastIndexOf("/") + 1);
+}
+function renderNoFlashScript(themesUrl) {
+  return `
+    <script>
+      (() => {
+        const want = new URLSearchParams(location.search).get("theme");
+        const name = /^[a-z]+$/.test(want ?? "")
+          ? want
+          : matchMedia("(prefers-color-scheme: dark)").matches
+            ? "dark"
+            : "light";
+        document.documentElement.dataset.theme = name;
+        if (name !== "light" && name !== "dark") {
+          const link = document.createElement("link");
+          link.rel = "stylesheet";
+          link.id = "tutuca-theme-" + name;
+          link.href = ${JSON.stringify(themesUrl)} + name + ".css";
+          document.head.append(link);
+        }
+      })();
+    </script>`;
+}
 function renderIndexHtml(imports, { margauiEnabled, margauiThemeUrl, bootstrapUrl }) {
   const theme = margauiEnabled ? `
-    <link rel="stylesheet" href="${margauiThemeUrl}" />` : "";
+    <link rel="stylesheet" href="${margauiThemeUrl}" />${renderNoFlashScript(themesBaseUrl(margauiThemeUrl))}` : "";
   return `<!doctype html>
 <html lang="en">
   <head>
@@ -17388,7 +17412,7 @@ ${JSON.stringify({ imports }, null, 6)}
 </html>
 `;
 }
-function renderBootstrap(devModuleUrls, { margauiEnabled, check, inspect: inspect3, noCache }) {
+function renderBootstrap(devModuleUrls, { margauiEnabled, margauiThemeUrl, check, inspect: inspect3, noCache }) {
   const lines = ['import { mountStorybook } from "tutuca/storybook";'];
   if (margauiEnabled) {
     lines.push('import { compileClassesToStyleText } from "tutuca/extra";');
@@ -17404,8 +17428,10 @@ function renderBootstrap(devModuleUrls, { margauiEnabled, check, inspect: inspec
   });
   const modules = devModuleUrls.map((_, i) => `m${i}`).join(", ");
   const optParts = [];
-  if (margauiEnabled)
+  if (margauiEnabled) {
     optParts.push("compileCss: (app) => compileClassesToStyleText(app, compile)");
+    optParts.push(`themes: { baseUrl: ${JSON.stringify(themesBaseUrl(margauiThemeUrl))} }`);
+  }
   if (inspect3)
     optParts.push("dev: { shadowCheckComponent, runTests, expect }");
   if (noCache)
@@ -17617,7 +17643,13 @@ async function run5(argv, opts = {}) {
       margauiThemeUrl: mg2.themeUrl,
       bootstrapUrl: `./${bootstrapName}`
     }));
-    writeFileSync(resolve5(outDir, bootstrapName), renderBootstrap(devModuleUrls, { margauiEnabled, check, inspect: inspect3, noCache }));
+    writeFileSync(resolve5(outDir, bootstrapName), renderBootstrap(devModuleUrls, {
+      margauiEnabled,
+      margauiThemeUrl: mg2.themeUrl,
+      check,
+      inspect: inspect3,
+      noCache
+    }));
     process.stdout.write(`wrote static storybook → ${relative2(process.cwd(), outDir) || "."}/
   index.html + ${bootstrapName} (${devModuleUrls.length} dev modules, CDN import map)
   Host it from the project root so /*.dev.js paths resolve.
@@ -17717,7 +17749,13 @@ async function run5(argv, opts = {}) {
     margauiThemeUrl: mg.themeUrl,
     bootstrapUrl: BOOTSTRAP_URL
   });
-  const bootstrapJs = renderBootstrap(devModuleUrls, { margauiEnabled, check, inspect: inspect3, noCache });
+  const bootstrapJs = renderBootstrap(devModuleUrls, {
+    margauiEnabled,
+    margauiThemeUrl: mg.themeUrl,
+    check,
+    inspect: inspect3,
+    noCache
+  });
   const server = createServer((req, res) => {
     const path = req.url.split("?")[0];
     if (path === "/" || path === "/index.html") {

package/dist/tutuca-storybook.js CHANGED Viewed

@@ -10,7 +10,9 @@ var Storybook = component({
     sectionId: null,
     exampleId: null,
     focusExample: null,
-    sidebarCollapsed: false
+    sidebarCollapsed: false,
+    theme: "",
+    themes: []
   },
   statics: {
     withSections(sections) {
@@ -106,6 +108,11 @@ var Storybook = component({
     onFocusClose(ctx) {
       ctx.request("persistState", [this.toUrlState({ example: "" }), this, true]);
       return this.setSectionId(null).setExampleId(null).setFocusExample(null);
+    },
+    onSelectTheme(value, ctx) {
+      ctx.request("applyTheme", [value, this]);
+      ctx.request("persistState", [this.toUrlState({ theme: value }), this, false]);
+      return this.setTheme(value);
     }
   },
   bubble: {
@@ -149,7 +156,7 @@ var Storybook = component({
     loadState(state, err, ctx) {
       if (err || !state)
         return this;
-      const selected = this.selectSectionWithId(state.section).setFilter(state.sectionFilter ?? "").applyFilterToSidebar(state.sectionFilter ?? "").setSelectedSectionFilter(state.exampleFilter ?? "");
+      const selected = this.selectSectionWithId(state.section).setTheme(state.theme ?? "").setFilter(state.sectionFilter ?? "").applyFilterToSidebar(state.sectionFilter ?? "").setSelectedSectionFilter(state.exampleFilter ?? "");
       const next = state.example ? selected.focusExampleByIds(state.section, state.example) : selected.setSectionId(null).setExampleId(null).setFocusExample(null);
       transitionSections(ctx, next, this.selectedSectionIndex, next.selectedSectionIndex);
       return next;
@@ -195,6 +202,15 @@ var Storybook = component({
             @on.input="onApplyFilter value"
             @on.keydown.cancel="onClearFilter"
           />
+          <select
+            class="select w-auto"
+            title="Theme"
+            @hide="empty? .themes"
+            :value=".theme"
+            @on.input="onSelectTheme value"
+          >
+            <option @each=".themes" :value="@value" @text="@value"></option>
+          </select>
         </div>
         <div class="list h-full flex-1 overflow-y-auto">
           <x render-each=".sidebar" @when="groupVisible"></x>
@@ -729,11 +745,53 @@ async function attachInspectorViews(root, scope, modules, dev = null) {
   return root.setSections(sections);
 }
+// src/storybook/themes.js
+var MARGAUI_THEMES = [
+  "light",
+  "dark",
+  "abyss",
+  "acid",
+  "aqua",
+  "autumn",
+  "black",
+  "bumblebee",
+  "business",
+  "caramellatte",
+  "cmyk",
+  "coffee",
+  "corporate",
+  "cupcake",
+  "cyberpunk",
+  "dim",
+  "dracula",
+  "emerald",
+  "fantasy",
+  "forest",
+  "garden",
+  "halloween",
+  "lemonade",
+  "lofi",
+  "luxury",
+  "night",
+  "nord",
+  "pastel",
+  "retro",
+  "silk",
+  "sunset",
+  "synthwave",
+  "valentine",
+  "winter",
+  "wireframe"
+];
+var BUNDLED_THEMES = new Set(["light", "dark"]);
 // src/storybook/mount.js
-async function mountStorybook(selector, modules, { compileCss, root, persistUrl = true, dev = null, noCache = false } = {}) {
+async function mountStorybook(selector, modules, { compileCss, root, persistUrl = true, dev = null, noCache = false, themes = null } = {}) {
   const app = tutuca(selector);
   const built = buildStorybook(modules);
-  app.state.set(root ?? built.root);
+  const themeBaseUrl = themes?.baseUrl ?? null;
+  const base = root ?? built.root;
+  app.state.set(themeBaseUrl && base.setThemes ? base.setThemes(MARGAUI_THEMES) : base);
   const rootScope = app.registerComponents(built.engineComponents);
   rootScope.registerMacros(built.macros);
   rootScope.registerRequestHandlers(buildExampleRequestHandlers(built));
@@ -741,6 +799,9 @@ async function mountStorybook(selector, modules, { compileCss, root, persistUrl
   if (persistUrl) {
     rootScope.registerRequestHandlers({ persistState });
   }
+  if (themeBaseUrl) {
+    rootScope.registerRequestHandlers({ applyTheme });
+  }
   const moduleScopes = built.moduleComponents.map((comps) => {
     const scope = rootScope.enter();
     scope.registerComponents(comps);
@@ -773,17 +834,53 @@ async function mountStorybook(selector, modules, { compileCss, root, persistUrl
     }
     window.history[push ? "pushState" : "replaceState"](null, "", url);
   }
+  function applyTheme(name, instance) {
+    if (instance !== app.state.val)
+      return;
+    ensureThemeLink(name);
+    document.documentElement.dataset.theme = name;
+  }
   function loadState() {
     const p = new URLSearchParams(window.location.search);
     return {
       section: p.get("section"),
       example: p.get("example"),
       sectionFilter: p.get("sectionFilter") ?? "",
-      exampleFilter: p.get("exampleFilter") ?? ""
+      exampleFilter: p.get("exampleFilter") ?? "",
+      theme: resolveTheme(p.get("theme"))
     };
   }
   function loadStateBlank() {
-    return { section: null, example: null, sectionFilter: "", exampleFilter: "" };
+    return {
+      section: null,
+      example: null,
+      sectionFilter: "",
+      exampleFilter: "",
+      theme: resolveTheme(null)
+    };
+  }
+  function resolveTheme(fromUrl) {
+    if (!themeBaseUrl)
+      return "";
+    const name = MARGAUI_THEMES.includes(fromUrl) ? fromUrl : osTheme();
+    ensureThemeLink(name);
+    document.documentElement.dataset.theme = name;
+    return name;
+  }
+  function osTheme() {
+    return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+  function ensureThemeLink(name) {
+    if (BUNDLED_THEMES.has(name) || document.getElementById(themeLinkId(name)))
+      return;
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.id = themeLinkId(name);
+    link.href = `${themeBaseUrl}${name}.css`;
+    document.head.append(link);
+  }
+  function themeLinkId(name) {
+    return `tutuca-theme-${name}`;
   }
 }
@@ -800,5 +897,7 @@ export {
   buildExampleRequestHandlers,
   Storybook,
   Section,
-  Example
+  MARGAUI_THEMES,
+  Example,
+  BUNDLED_THEMES
 };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "tutuca",
-  "version": "0.9.112",
+  "version": "0.9.113",
   "type": "module",
   "description": "SPA framework with immutable state and virtual DOM; dependency-free browser bundle",
   "main": "./dist/tutuca.js",

package/skill/tutuca/margaui.md CHANGED Viewed

@@ -68,6 +68,45 @@ that reason):
 Trade-off: no runtime network dependency and a frozen version, at the
 cost of updating the vendored files by hand.
+## Dark mode and the other palettes
+A margaui theme is a block of CSS custom properties (`--color-*`, `--radius-*`,
+…) under a `[data-theme="<name>"]` selector, and every class it compiles reads
+those through `var(--color-*)`. So switching theme is **one attribute flip on
+`<html>`** — the compiled stylesheet never changes:
+```js
+document.documentElement.dataset.theme = "dark";
+```
+Two things to know, both of which bite if you assume otherwise:
+- **Dark mode never turns itself on.** `dark.css` is keyed on
+  `[data-theme="dark"]` alone — there is no `prefers-color-scheme` fallback and
+  no `.dark` class. Link `theme.css` and do nothing else and the page is light
+  forever, on every machine. Following the OS is your job:
+  ```js
+  const dark = matchMedia("(prefers-color-scheme: dark)");
+  document.documentElement.dataset.theme = dark.matches ? "dark" : "light";
+  ```
+- **`theme.css` is only light + dark.** It is literally
+  `@import"./light.css";@import"./dark.css";`. margaui ships ~33 more palettes
+  (dracula, nord, cyberpunk, …) as sibling files, each linked separately and
+  each cheap:
+  ```html
+  <link rel="stylesheet" href="https://marianoguerra.github.io/margaui/themes/dracula.css" />
+  ```
+  Link it **after** `theme.css`: `light.css` claims plain `:root` as well as
+  `[data-theme=light]`, which ties on specificity with `[data-theme=dracula]`,
+  so a palette only wins by coming later in the cascade.
+`tutuca storybook` does all of this for you — see the Themes section of
+[storybook.md](./storybook.md).
 ## Wire it into tutuca
 However you obtained `compile`, the integration is the same: register

package/skill/tutuca/storybook.md CHANGED Viewed

@@ -215,6 +215,32 @@ version-pinned CDN. `--out` always pins the CDN so the artifact is portable —
 host it from the project root so `/*.dev.js` paths resolve. See [cli.md](./cli.md)
 for the exhaustive flag list and exit codes.
+## Themes
+The page starts in the theme the URL asks for (`?theme=dracula`), else the one
+the OS prefers, and the sidebar has a switcher for margaui's palettes. Picking
+one sets `?theme=`, so a themed storybook is shareable and survives a reload.
+That OS step is on us, not margaui: its `dark.css` is keyed on
+`[data-theme="dark"]` alone, with **no** `prefers-color-scheme` fallback, so a
+page that only links `theme.css` renders light forever. See
+[margaui.md](./margaui.md).
+Embedding the storybook yourself? The switcher is opt-in through the `themes`
+option, which — like `compileCss` — is injected, so the library still never
+imports margaui:
+```js
+mountStorybook("#app", modules, {
+  compileCss: (app) => compileClassesToStyleText(app, compile),
+  // The directory your theme.css lives in. Every other palette is a sibling
+  // file there; only the one selected is fetched, and only the first time.
+  themes: { baseUrl: "https://marianoguerra.github.io/margaui/themes/" },
+});
+```
+Omit `themes` (what `--no-margaui` does) and no switcher renders — there would
+be no theme CSS to switch to.
 ## Footguns
 - ⚠️ `value` must be a real instance (`Comp.make(...)`), not a plain object or