tutuca 0.9.97 → 0.9.99

package/dist/tutuca-storybook.js

@@ -1,5 +1,48 @@
-// src/storybook.js
-import { component, dispatchPhase, html, injectCss, tutuca } from "tutuca";
+// src/storybook/index.js
+import { component, dispatchPhase, html, injectCss, phaseHasBubble, tutuca } from "tutuca";
+import { getComponents as getInspectorComponents } from "tutuca/components";
+
+// src/storybook/inspect.js
+import { buildInspectorViews, isComponentInstance } from "tutuca/components";
+function buildTestIndex(modules) {
+  const index = new Map;
+  for (const m of modules) {
+    if (typeof m.getTests !== "function")
+      continue;
+    const components = m.getComponents?.() ?? [];
+    for (const c of components) {
+      if (!index.has(c.name))
+        index.set(c.name, { getTests: m.getTests, components });
+    }
+  }
+  return index;
+}
+async function buildExampleInspectors(example, scope, testIndex, dev) {
+  const value = example.value;
+  const comp = isComponentInstance(value) ? scope.getCompFor(value) : null;
+  const entry = comp ? testIndex.get(comp.name) : null;
+  const views = await buildInspectorViews(value, scope, {
+    getTests: entry?.getTests ?? null,
+    components: entry?.components ?? [],
+    dev
+  });
+  return example.setInstanceView(views.instanceView).setComponentView(views.componentView).setLintView(views.lintView).setTestView(views.testView).setHasInspect(views.hasInspect).setHasComponent(views.hasComponent).setHasLint(views.hasLint).setHasTest(views.hasTest);
+}
+async function attachInspectorViews(root, scope, modules, dev = null) {
+  const testIndex = buildTestIndex(modules);
+  let sections = root.sections;
+  for (let si = 0;si < sections.size; si++) {
+    const section = sections.get(si);
+    let items = section.items;
+    for (let ii = 0;ii < items.size; ii++) {
+      items = items.set(ii, await buildExampleInspectors(items.get(ii), scope, testIndex, dev));
+    }
+    sections = sections.set(si, section.setItems(items));
+  }
+  return root.setSections(sections);
+}
+
+// src/storybook/index.js
 var Storybook = component({
   name: "Storybook",
   fields: {
@@ -247,7 +290,16 @@ var Example = component({
     value: null,
     view: "main",
     requestHandlers: null,
-    on: null
+    on: null,
+    activeTab: "preview",
+    hasInspect: false,
+    hasComponent: false,
+    hasLint: false,
+    hasTest: false,
+    componentView: null,
+    instanceView: null,
+    lintView: null,
+    testView: null
   },
   requestOverridesField: "requestHandlers",
   statics: {
@@ -274,18 +326,25 @@ var Example = component({
   },
   receive: {
     init(ctx) {
-      dispatchPhase(ctx, ctx.at.field("value").buildPath(), this.on?.init, this.value);
+      this.runPhase(ctx, "init", this.on?.init);
       return this;
     },
     resume(ctx) {
-      dispatchPhase(ctx, ctx.at.field("value").buildPath(), this.on?.resume, this.value);
+      this.runPhase(ctx, "resume", this.on?.resume);
       return this;
     },
     suspend(ctx) {
-      dispatchPhase(ctx, ctx.at.field("value").buildPath(), this.on?.suspend, this.value);
+      this.runPhase(ctx, "suspend", this.on?.suspend);
       return this;
     }
   },
+  methods: {
+    runPhase(ctx, name, phase) {
+      if (phaseHasBubble(phase))
+        console.warn(`storybook on.${name}: a \`bubble\` action leaves this example and is received by the storybook engine, so your component's bubble handler won't run. Use send/request/input to drive a preset state.`);
+      dispatchPhase(ctx, ctx.at.field("value").buildPath(), phase, this.value);
+    }
+  },
   input: {
     onLogSelected() {
       console.log(this.value);
@@ -310,8 +369,72 @@ var Example = component({
         </div>
       </h2>
       <p class="text-md italic opacity-60" @text=".description"></p>
-      <div class="bg-base-100 p-3" @push-view=".view">
-        <x render=".value"></x>
+      <div role="tablist" class="tabs tabs-border" @show=".hasInspect">
+        <a
+          role="tab"
+          @if.class="equals? .activeTab 'preview'"
+          @then="'tab tab-active'"
+          @else="'tab'"
+          @on.click="$setActiveTab 'preview'"
+        >
+          Preview
+        </a>
+        <a
+          role="tab"
+          @show=".hasComponent"
+          @if.class="equals? .activeTab 'component'"
+          @then="'tab tab-active'"
+          @else="'tab'"
+          @on.click="$setActiveTab 'component'"
+        >
+          Component
+        </a>
+        <a
+          role="tab"
+          @if.class="equals? .activeTab 'instance'"
+          @then="'tab tab-active'"
+          @else="'tab'"
+          @on.click="$setActiveTab 'instance'"
+        >
+          Instance
+        </a>
+        <a
+          role="tab"
+          @show=".hasLint"
+          @if.class="equals? .activeTab 'lint'"
+          @then="'tab tab-active'"
+          @else="'tab'"
+          @on.click="$setActiveTab 'lint'"
+        >
+          Lint
+        </a>
+        <a
+          role="tab"
+          @show=".hasTest"
+          @if.class="equals? .activeTab 'test'"
+          @then="'tab tab-active'"
+          @else="'tab'"
+          @on.click="$setActiveTab 'test'"
+        >
+          Test
+        </a>
+      </div>
+      <div @show="equals? .activeTab 'preview'">
+        <div class="bg-base-100 p-3" @push-view=".view">
+          <x render=".value"></x>
+        </div>
+      </div>
+      <div class="p-3" @show="equals? .activeTab 'component'">
+        <x render=".componentView"></x>
+      </div>
+      <div class="p-3" @show="equals? .activeTab 'instance'">
+        <x render=".instanceView"></x>
+      </div>
+      <div class="p-3" @show="equals? .activeTab 'lint'">
+        <x render=".lintView"></x>
+      </div>
+      <div class="p-3" @show="equals? .activeTab 'test'">
+        <x render=".testView"></x>
       </div>
     </div>
   </div>`
@@ -353,7 +476,7 @@ function buildStorybook(modules) {
     return Array.isArray(raw) ? raw : [raw];
   });
   const sections = rawSections.map((s) => Section.Class.fromData(s)).sort((a, b) => a.title.localeCompare(b.title));
-  const components = new Set([Storybook, Section, Example]);
+  const components = new Set([Storybook, Section, Example, ...getInspectorComponents()]);
   const macros = {};
   const requestHandlers = {};
   const overrideNames = new Set;
@@ -406,7 +529,7 @@ function buildExampleRequestHandlers({ requestHandlers: reals, overrideNames })
     handlers[name] = makeMeta(name);
   return handlers;
 }
-async function mountStorybook(selector, modules, { compileCss, root, persistUrl = true } = {}) {
+async function mountStorybook(selector, modules, { compileCss, root, persistUrl = true, dev = null } = {}) {
   const app = tutuca(selector);
   const built = buildStorybook(modules);
   app.state.set(root ?? built.root);
@@ -417,6 +540,9 @@ async function mountStorybook(selector, modules, { compileCss, root, persistUrl
   if (persistUrl) {
     scope.registerRequestHandlers({ persistState });
   }
+  if (dev && app.state.val?.sections) {
+    app.state.set(await attachInspectorViews(app.state.val, scope, modules, dev));
+  }
   if (compileCss) {
     injectCss("tutuca-storybook", await compileCss(app));
   }

package/dist/tutuca.ext.js

@@ -1744,37 +1744,47 @@ class Renderer {
   renderEach(stack, iterInfo, node, viewName) {
     const { seq, filter, loopWith } = iterInfo.eval(stack);
     const r = [];
-    const { iterData, start, end } = unpackLoopResult(loopWith.call(stack.it, seq), seq);
-    getSeqInfo(seq)(seq, (key, value, attrName) => {
-      if (filter.call(stack.it, key, value, iterData)) {
-        const dom = this.renderIt(stack.enter(value, { key }, true), node, key, viewName);
-        this.pushEachEntry(r, node.nodeId, attrName, key, dom);
-      }
-    }, start, end);
+    const { iterData, start, end, keys } = unpackLoopResult(loopWith.call(stack.it, seq, makeLoopCtx(stack, filter)), seq);
+    const renderOne = (key, value, attrName) => {
+      const dom = this.renderIt(stack.enter(value, { key }, true), node, key, viewName);
+      this.pushEachEntry(r, node.nodeId, attrName, key, dom);
+    };
+    if (keys)
+      imKeysIter(seq, renderOne, keys);
+    else
+      getSeqInfo(seq)(seq, (key, value, attrName) => {
+        if (filter.call(stack.it, key, value, iterData))
+          renderOne(key, value, attrName);
+      }, start, end);
     return r;
   }
   renderEachWhen(stack, iterInfo, view, nid) {
     const { seq, filter, loopWith, enricher } = iterInfo.eval(stack);
     const r = [];
     const it = stack.it;
-    const { iterData, start, end } = unpackLoopResult(loopWith.call(it, seq), seq);
-    getSeqInfo(seq)(seq, (key, value, attrName) => {
-      if (filter.call(it, key, value, iterData)) {
-        const cachePath = enricher ? [view, it, value] : [view, value];
-        const binds = { key, value };
-        const cacheKey = `${nid}-${key}`;
-        if (enricher)
-          enricher.call(it, binds, key, value, iterData);
-        const cachedNode = this.cache.get(cachePath, cacheKey);
-        if (cachedNode)
-          this.pushEachEntry(r, nid, attrName, key, cachedNode);
-        else {
-          const dom = this.renderView(view, stack.enter(value, binds, false));
-          this.pushEachEntry(r, nid, attrName, key, dom);
-          this.cache.set(cachePath, cacheKey, dom);
-        }
+    const { iterData, start, end, keys } = unpackLoopResult(loopWith.call(it, seq, makeLoopCtx(stack, filter)), seq);
+    const renderOne = (key, value, attrName) => {
+      const cachePath = enricher ? [view, it, value] : [view, value];
+      const binds = { key, value };
+      const cacheKey = `${nid}-${key}`;
+      if (enricher)
+        enricher.call(it, binds, key, value, iterData);
+      const cachedNode = this.cache.get(cachePath, cacheKey);
+      if (cachedNode)
+        this.pushEachEntry(r, nid, attrName, key, cachedNode);
+      else {
+        const dom = this.renderView(view, stack.enter(value, binds, false));
+        this.pushEachEntry(r, nid, attrName, key, dom);
+        this.cache.set(cachePath, cacheKey, dom);
       }
-    }, start, end);
+    };
+    if (keys)
+      imKeysIter(seq, renderOne, keys);
+    else
+      getSeqInfo(seq)(seq, (key, value, attrName) => {
+        if (filter.call(it, key, value, iterData))
+          renderOne(key, value, attrName);
+      }, start, end);
     return r;
   }
   renderView(view, stack) {
@@ -1810,8 +1820,17 @@ var filterAlwaysTrue = (_v, _k, _seq) => true;
 var nullLoopWith = (seq) => ({ iterData: { seq } });
 var unpackLoopResult = (result, seq) => {
   const r = result ?? {};
-  return { iterData: r.iterData ?? { seq }, start: r.start, end: r.end };
+  return { iterData: r.iterData ?? { seq }, start: r.start, end: r.end, keys: r.keys };
+};
+var imKeysIter = (seq, visit, keys) => {
+  const attrName = isIndexed(seq) ? "si" : "sk";
+  for (const key of keys)
+    visit(key, seq.get(key), attrName);
 };
+var makeLoopCtx = (stack, filter) => ({
+  lookup: (name) => stack.lookupBind(name),
+  filter: (key, value, iterData) => filter.call(stack.it, key, value, iterData)
+});
 var imIndexedIter = (seq, visit, start, end) => {
   const [s, e] = normalizeRange(start, end, seq.size);
   for (let i = s;i < e; i++)
@@ -2359,11 +2378,11 @@ class IterInfo {
     return { seq, filter, loopWith, enricher };
   }
   enrichBinds(stack, key) {
-    const { seq, loopWith, enricher } = this.eval(stack);
+    const { seq, filter, loopWith, enricher } = this.eval(stack);
     const value = seq?.get ? seq.get(key, null) : null;
     const binds = { key, value };
     if (enricher) {
-      const { iterData } = unpackLoopResult(loopWith.call(stack.it, seq), seq);
+      const { iterData } = unpackLoopResult(loopWith.call(stack.it, seq, makeLoopCtx(stack, filter)), seq);
       enricher.call(stack.it, binds, key, value, iterData);
     }
     return binds;
@@ -3714,6 +3733,13 @@ function phaseOps(phase) {
 function resolveArgs(args, self) {
   return typeof args === "function" ? args(self) ?? [] : args ?? [];
 }
+function phaseHasBubble(phase) {
+  if (!phase)
+    return false;
+  if (phase.bubble?.length)
+    return true;
+  return (phase.do ?? []).some((op) => op.type === "bubble");
+}
 function dispatchPhase(dispatcher, targetPath, phase, self) {
   if (!phase)
     return;
@@ -4007,7 +4033,8 @@ class FieldSet extends Field {
 }
 function mkCompField(field, scope, args) {
   const Comp = scope?.lookupComponent(field.type) ?? null;
-  console.assert(!scope || Comp !== null, "component not found", { field });
+  if (Comp === null)
+    console.warn(scope ? `component field "${field.name}": component "${field.type}" not found in scope` : `component field "${field.name}": cannot resolve component "${field.type}" — built without a registered scope (use ${field.type}.make({}) as the default, or build via a registered component)`);
   return Comp?.make({ ...field.args, ...args }, { scope }) ?? null;
 }
 
@@ -4156,6 +4183,7 @@ export {
   removeIn,
   remove,
   phaseOps,
+  phaseHasBubble,
   mergeWith,
   mergeDeepWith,
   mergeDeep,

package/dist/tutuca.js

@@ -6114,37 +6114,47 @@ class Renderer {
   renderEach(stack, iterInfo, node, viewName) {
     const { seq, filter, loopWith } = iterInfo.eval(stack);
     const r = [];
-    const { iterData, start, end } = unpackLoopResult(loopWith.call(stack.it, seq), seq);
-    getSeqInfo(seq)(seq, (key, value, attrName) => {
-      if (filter.call(stack.it, key, value, iterData)) {
-        const dom = this.renderIt(stack.enter(value, { key }, true), node, key, viewName);
-        this.pushEachEntry(r, node.nodeId, attrName, key, dom);
-      }
-    }, start, end);
+    const { iterData, start, end, keys } = unpackLoopResult(loopWith.call(stack.it, seq, makeLoopCtx(stack, filter)), seq);
+    const renderOne = (key, value, attrName) => {
+      const dom = this.renderIt(stack.enter(value, { key }, true), node, key, viewName);
+      this.pushEachEntry(r, node.nodeId, attrName, key, dom);
+    };
+    if (keys)
+      imKeysIter(seq, renderOne, keys);
+    else
+      getSeqInfo(seq)(seq, (key, value, attrName) => {
+        if (filter.call(stack.it, key, value, iterData))
+          renderOne(key, value, attrName);
+      }, start, end);
     return r;
   }
   renderEachWhen(stack, iterInfo, view, nid) {
     const { seq, filter, loopWith, enricher } = iterInfo.eval(stack);
     const r = [];
     const it = stack.it;
-    const { iterData, start, end } = unpackLoopResult(loopWith.call(it, seq), seq);
-    getSeqInfo(seq)(seq, (key, value, attrName) => {
-      if (filter.call(it, key, value, iterData)) {
-        const cachePath = enricher ? [view, it, value] : [view, value];
-        const binds = { key, value };
-        const cacheKey = `${nid}-${key}`;
-        if (enricher)
-          enricher.call(it, binds, key, value, iterData);
-        const cachedNode = this.cache.get(cachePath, cacheKey);
-        if (cachedNode)
-          this.pushEachEntry(r, nid, attrName, key, cachedNode);
-        else {
-          const dom = this.renderView(view, stack.enter(value, binds, false));
-          this.pushEachEntry(r, nid, attrName, key, dom);
-          this.cache.set(cachePath, cacheKey, dom);
-        }
+    const { iterData, start, end, keys } = unpackLoopResult(loopWith.call(it, seq, makeLoopCtx(stack, filter)), seq);
+    const renderOne = (key, value, attrName) => {
+      const cachePath = enricher ? [view, it, value] : [view, value];
+      const binds = { key, value };
+      const cacheKey = `${nid}-${key}`;
+      if (enricher)
+        enricher.call(it, binds, key, value, iterData);
+      const cachedNode = this.cache.get(cachePath, cacheKey);
+      if (cachedNode)
+        this.pushEachEntry(r, nid, attrName, key, cachedNode);
+      else {
+        const dom = this.renderView(view, stack.enter(value, binds, false));
+        this.pushEachEntry(r, nid, attrName, key, dom);
+        this.cache.set(cachePath, cacheKey, dom);
       }
-    }, start, end);
+    };
+    if (keys)
+      imKeysIter(seq, renderOne, keys);
+    else
+      getSeqInfo(seq)(seq, (key, value, attrName) => {
+        if (filter.call(it, key, value, iterData))
+          renderOne(key, value, attrName);
+      }, start, end);
     return r;
   }
   renderView(view, stack) {
@@ -6180,8 +6190,17 @@ var filterAlwaysTrue = (_v, _k, _seq) => true;
 var nullLoopWith = (seq) => ({ iterData: { seq } });
 var unpackLoopResult = (result, seq) => {
   const r = result ?? {};
-  return { iterData: r.iterData ?? { seq }, start: r.start, end: r.end };
+  return { iterData: r.iterData ?? { seq }, start: r.start, end: r.end, keys: r.keys };
 };
+var imKeysIter = (seq, visit, keys) => {
+  const attrName = isIndexed(seq) ? "si" : "sk";
+  for (const key of keys)
+    visit(key, seq.get(key), attrName);
+};
+var makeLoopCtx = (stack, filter) => ({
+  lookup: (name) => stack.lookupBind(name),
+  filter: (key, value, iterData) => filter.call(stack.it, key, value, iterData)
+});
 var imIndexedIter = (seq, visit, start, end) => {
   const [s, e] = normalizeRange(start, end, seq.size);
   for (let i = s;i < e; i++)
@@ -6729,11 +6748,11 @@ class IterInfo {
     return { seq, filter, loopWith, enricher };
   }
   enrichBinds(stack, key) {
-    const { seq, loopWith, enricher } = this.eval(stack);
+    const { seq, filter, loopWith, enricher } = this.eval(stack);
     const value = seq?.get ? seq.get(key, null) : null;
     const binds = { key, value };
     if (enricher) {
-      const { iterData } = unpackLoopResult(loopWith.call(stack.it, seq), seq);
+      const { iterData } = unpackLoopResult(loopWith.call(stack.it, seq, makeLoopCtx(stack, filter)), seq);
       enricher.call(stack.it, binds, key, value, iterData);
     }
     return binds;
@@ -8028,6 +8047,13 @@ function phaseOps(phase) {
 function resolveArgs(args, self) {
   return typeof args === "function" ? args(self) ?? [] : args ?? [];
 }
+function phaseHasBubble(phase) {
+  if (!phase)
+    return false;
+  if (phase.bubble?.length)
+    return true;
+  return (phase.do ?? []).some((op) => op.type === "bubble");
+}
 function dispatchPhase(dispatcher, targetPath, phase, self) {
   if (!phase)
     return;
@@ -8320,7 +8346,8 @@ class FieldSet extends Field {
 }
 function mkCompField(field, scope, args) {
   const Comp = scope?.lookupComponent(field.type) ?? null;
-  console.assert(!scope || Comp !== null, "component not found", { field });
+  if (Comp === null)
+    console.warn(scope ? `component field "${field.name}": component "${field.type}" not found in scope` : `component field "${field.name}": cannot resolve component "${field.type}" — built without a registered scope (use ${field.type}.make({}) as the default, or build via a registered component)`);
   return Comp?.make({ ...field.args, ...args }, { scope }) ?? null;
 }
 
@@ -8469,6 +8496,7 @@ export {
   removeIn,
   remove,
   phaseOps,
+  phaseHasBubble,
   mergeWith$1 as mergeWith,
   mergeDeepWith$1 as mergeDeepWith,
   mergeDeep$1 as mergeDeep,