tutuca 0.9.111 → 0.9.113

package/dist/tutuca-storybook.js

@@ -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/dist/tutuca.ext.js

@@ -540,7 +540,6 @@ var PREDICATES = {
 
 class ValParser {
   constructor() {
-    this.bindValIt = new BindVal("it");
     this.nullConstVal = new ConstVal(null);
   }
   const(v) {
@@ -2086,7 +2085,7 @@ function parseXOp(attrs, childs, opIdx, px) {
       node = px.addNodeIf(RenderNode, parseXOpVal(name, value, px, vp.parseComponent), as);
       break;
     case "render-it":
-      node = px.addNodeIf(RenderItNode, vp.bindValIt, as);
+      node = px.addNode(RenderItNode, as);
       break;
     case "render-each":
       node = parseRenderEach(px, value, as, attrs);
@@ -2269,7 +2268,7 @@ function parseRenderEach(px, value, as, attrs) {
   const seqVal = parseXOpVal("render-each", value, px, vp.parseSequence);
   if (seqVal === null)
     return null;
-  const renderIt = px.addNodeIf(RenderItNode, vp.bindValIt, as);
+  const renderIt = px.addNode(RenderItNode, as);
   const attrParser = getAttrParser(px);
   const eachAttr = attrParser.eachAttr = attrParser.pushWrapper("each", value, seqVal);
   const when = attrs.getNamedItem("@when") ?? attrs.getNamedItem("when");
@@ -2469,6 +2468,12 @@ class ParseContext {
     }
     return null;
   }
+  addNode(Class, extra) {
+    const nodeId = this.nodes.length;
+    const node = new Class(nodeId, null, extra);
+    this.nodes.push(node);
+    return node;
+  }
   registerEvents() {
     const id = this.events.length;
     const events = new NodeEvents(id);
@@ -2900,7 +2905,7 @@ class Stack {
     return new Stack(comps, it, binds, newDynBinds, views, viewsId, ctx);
   }
   static root(comps, it, ctx) {
-    const binds = [new BindFrame(it, { it }, true), null];
+    const binds = [new BindFrame(it, {}, true), null];
     const dynBinds = [new ObjectFrame({}), null];
     const views = ["main", null];
     return new Stack(comps, it, binds, dynBinds, views, "", ctx)._pushProvides();

package/dist/tutuca.js

@@ -4911,7 +4911,6 @@ var PREDICATES = {
 
 class ValParser {
   constructor() {
-    this.bindValIt = new BindVal("it");
     this.nullConstVal = new ConstVal(null);
   }
   const(v) {
@@ -6454,7 +6453,7 @@ function parseXOp(attrs, childs, opIdx, px) {
       node = px.addNodeIf(RenderNode, parseXOpVal(name, value, px, vp.parseComponent), as);
       break;
     case "render-it":
-      node = px.addNodeIf(RenderItNode, vp.bindValIt, as);
+      node = px.addNode(RenderItNode, as);
       break;
     case "render-each":
       node = parseRenderEach(px, value, as, attrs);
@@ -6637,7 +6636,7 @@ function parseRenderEach(px, value, as, attrs) {
   const seqVal = parseXOpVal("render-each", value, px, vp.parseSequence);
   if (seqVal === null)
     return null;
-  const renderIt = px.addNodeIf(RenderItNode, vp.bindValIt, as);
+  const renderIt = px.addNode(RenderItNode, as);
   const attrParser = getAttrParser(px);
   const eachAttr = attrParser.eachAttr = attrParser.pushWrapper("each", value, seqVal);
   const when = attrs.getNamedItem("@when") ?? attrs.getNamedItem("when");
@@ -6837,6 +6836,12 @@ class ParseContext {
     }
     return null;
   }
+  addNode(Class, extra) {
+    const nodeId = this.nodes.length;
+    const node = new Class(nodeId, null, extra);
+    this.nodes.push(node);
+    return node;
+  }
   registerEvents() {
     const id = this.events.length;
     const events = new NodeEvents(id);
@@ -7268,7 +7273,7 @@ class Stack2 {
     return new Stack2(comps, it, binds, newDynBinds, views, viewsId, ctx);
   }
   static root(comps, it, ctx) {
-    const binds = [new BindFrame(it, { it }, true), null];
+    const binds = [new BindFrame(it, {}, true), null];
     const dynBinds = [new ObjectFrame({}), null];
     const views = ["main", null];
     return new Stack2(comps, it, binds, dynBinds, views, "", ctx)._pushProvides();