tutuca 0.9.93 → 0.9.95

package/dist/tutuca-storybook.js

@@ -1,5 +1,5 @@
 // src/storybook.js
-import { component, html, injectCss, tutuca } from "tutuca";
+import { component, dispatchPhase, html, injectCss, tutuca } from "tutuca";
 var Storybook = component({
   name: "Storybook",
   fields: {
@@ -80,7 +80,10 @@ var Storybook = component({
         this,
         true
       ]);
-      return this.selectSectionAtIndex(this.sections.indexOf(section));
+      const oldIndex = this.selectedSectionIndex;
+      const next = this.selectSectionAtIndex(this.sections.indexOf(section));
+      transitionSections(ctx, next, oldIndex, next.selectedSectionIndex);
+      return next;
     },
     exampleFocusRequested(example, ctx) {
       ctx.stopPropagation();
@@ -102,11 +105,13 @@ var Storybook = component({
     }
   },
   response: {
-    loadState(state, err) {
+    loadState(state, err, ctx) {
       if (err || !state)
         return this;
-      const next = this.selectSectionWithId(state.section).setFilter(state.sectionFilter ?? "").setSelectedSectionFilter(state.exampleFilter ?? "");
-      return state.example ? next.focusExampleByIds(state.section, state.example) : next.setSectionId(null).setExampleId(null).setFocusExample(null);
+      const selected = this.selectSectionWithId(state.section).setFilter(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;
     }
   },
   view: html`<div>
@@ -150,7 +155,8 @@ var Section = component({
     description: "",
     items: [],
     filter: "",
-    selected: false
+    selected: false,
+    initialized: false
   },
   statics: {
     fromData(raw) {
@@ -185,6 +191,20 @@ var Section = component({
       return this;
     }
   },
+  receive: {
+    init(ctx) {
+      fanoutLifecycle(ctx, this.items, "init");
+      return this.setInitialized(true);
+    },
+    resume(ctx) {
+      fanoutLifecycle(ctx, this.items, "resume");
+      return this;
+    },
+    suspend(ctx) {
+      fanoutLifecycle(ctx, this.items, "suspend");
+      return this;
+    }
+  },
   view: html`<section class="flex flex-col gap-3">
     <div class="sticky top-0 z-10 bg-base-100 pt-1 pb-2 shadow-sm">
       <h2 class="text-lg font-bold" @text=".title"></h2>
@@ -226,7 +246,8 @@ var Example = component({
     description: "",
     value: null,
     view: "main",
-    requestHandlers: null
+    requestHandlers: null,
+    on: null
   },
   requestOverridesField: "requestHandlers",
   statics: {
@@ -236,7 +257,8 @@ var Example = component({
       description = "",
       value = null,
       view = "main",
-      requestHandlers = null
+      requestHandlers = null,
+      on = null
     }) {
       id ??= slugify(title);
       return this.make({
@@ -245,10 +267,25 @@ var Example = component({
         description,
         value,
         view,
-        requestHandlers
+        requestHandlers,
+        on
       });
     }
   },
+  receive: {
+    init(ctx) {
+      dispatchPhase(ctx, ctx.at.field("value").buildPath(), this.on?.init, this.value);
+      return this;
+    },
+    resume(ctx) {
+      dispatchPhase(ctx, ctx.at.field("value").buildPath(), this.on?.resume, this.value);
+      return this;
+    },
+    suspend(ctx) {
+      dispatchPhase(ctx, ctx.at.field("value").buildPath(), this.on?.suspend, this.value);
+      return this;
+    }
+  },
   input: {
     onLogSelected() {
       console.log(this.value);
@@ -279,6 +316,23 @@ var Example = component({
     </div>
   </div>`
 });
+function transitionSections(ctx, sb, oldIndex, newIndex) {
+  const changed = oldIndex !== newIndex;
+  if (changed && sb.sections.get(oldIndex)?.initialized)
+    ctx.at.index("sections", oldIndex).send("suspend", []);
+  const target = sb.sections.get(newIndex);
+  if (!target)
+    return;
+  if (!target.initialized)
+    ctx.at.index("sections", newIndex).send("init", []);
+  else if (changed)
+    ctx.at.index("sections", newIndex).send("resume", []);
+}
+function fanoutLifecycle(ctx, items, name) {
+  items.forEach((_item, j) => {
+    ctx.at.index("items", j).send(name, []);
+  });
+}
 function fuzzyMatch(query, target) {
   const q = query.toLowerCase(), t = target.toLowerCase();
   let qi = 0;
@@ -359,15 +413,16 @@ async function mountStorybook(selector, modules, { compileCss, root, persistUrl
   const scope = app.registerComponents(built.components);
   scope.registerMacros(built.macros);
   scope.registerRequestHandlers(buildExampleRequestHandlers(built));
+  scope.registerRequestHandlers({ loadState: persistUrl ? loadState : loadStateBlank });
   if (persistUrl) {
-    scope.registerRequestHandlers({ persistState, loadState });
+    scope.registerRequestHandlers({ persistState });
   }
   if (compileCss) {
     injectCss("tutuca-storybook", await compileCss(app));
   }
   app.start();
+  app.sendAtRoot("init", []);
   if (persistUrl) {
-    app.sendAtRoot("init", []);
     window.addEventListener("popstate", () => app.sendAtRoot("init", []));
   }
   return app;
@@ -392,6 +447,9 @@ async function mountStorybook(selector, modules, { compileCss, root, persistUrl
       exampleFilter: p.get("exampleFilter") ?? ""
     };
   }
+  function loadStateBlank() {
+    return { section: null, example: null, sectionFilter: "", exampleFilter: "" };
+  }
 }
 function getComponents() {
   return [Storybook, Section, Example];

package/dist/tutuca.ext.js

@@ -2920,36 +2920,81 @@ class Transactor {
     this.transactions = [];
     this.state = new State(rootValue);
     this.onTransactionPushed = () => {};
+    this._inflight = new Set;
   }
   pushTransaction(t) {
     this.transactions.push(t);
     this.onTransactionPushed(t);
   }
+  _link(child, parent) {
+    if (parent) {
+      const release = parent.completion.track();
+      child.completion.whenSubtreeSettled().then(release);
+    }
+    return child;
+  }
   pushSend(path, name, args = [], opts = {}, parent = null) {
-    this.pushTransaction(new SendEvent(path, this, name, args, parent, opts));
+    const t = new SendEvent(path, this, name, args, parent, opts);
+    this.pushTransaction(t);
+    return this._link(t, parent);
+  }
+  pushInput(path, name, args = [], opts = {}, parent = null) {
+    const t = new InputDispatchEvent(path, this, name, args, parent, opts);
+    this.pushTransaction(t);
+    return this._link(t, parent);
   }
   pushBubble(path, name, args = [], opts = {}, parent = null, targetPath = null) {
     const newOpts = opts.skipSelf ? { ...opts, skipSelf: false } : opts;
-    this.pushTransaction(new BubbleEvent(path, this, name, args, parent, newOpts, targetPath));
+    const t = new BubbleEvent(path, this, name, args, parent, newOpts, targetPath);
+    this.pushTransaction(t);
+    return this._link(t, parent);
+  }
+  pushRequest(path, name, args = [], opts = {}, parent = null) {
+    const release = parent ? parent.completion.track() : null;
+    const p = this._runRequest(path, name, args, opts, parent, release);
+    this._inflight.add(p);
+    p.finally(() => this._inflight.delete(p));
+    return p;
+  }
+  async settle(maxTurns = 1e4) {
+    while ((this.hasPendingTransactions || this._inflight.size) && maxTurns-- > 0) {
+      while (this.hasPendingTransactions)
+        this.transactNext();
+      if (this._inflight.size)
+        await Promise.allSettled([...this._inflight]);
+    }
   }
-  async pushRequest(path, name, args = [], opts = {}, parent = null) {
-    const curRoot = this.state.val;
-    const txnPath = path.toTransactionPath();
-    const curLeaf = txnPath.lookup(curRoot);
-    const handler = this.comps.getRequestFor(curLeaf, name) ?? mkReq404(name);
-    const reqCtx = new RequestContext(path, this, parent, curRoot);
-    const resHandlerName = opts?.onResName ?? name;
-    const resPath = opts?.livePath ? null : txnPath.pinKeys(curRoot);
-    const push = (specificName, baseName, singleArg, result, error) => {
-      const resArgs = specificName ? [singleArg] : [result, error];
-      const t = new ResponseEvent(path, this, specificName ?? baseName, resArgs, parent, resPath);
-      this.pushTransaction(t);
+  async _runRequest(path, name, args = [], opts = {}, parent = null, release = null) {
+    let released = false;
+    const transfer = (t) => {
+      if (release) {
+        released = true;
+        t.completion.whenSubtreeSettled().then(release);
+      }
     };
     try {
-      const result = await handler.fn.apply(null, [...args, reqCtx]);
-      push(opts?.onOkName, resHandlerName, result, result, null);
-    } catch (error) {
-      push(opts?.onErrorName, resHandlerName, error, null, error);
+      const curRoot = this.state.val;
+      const txnPath = path.toTransactionPath();
+      const curLeaf = txnPath.lookup(curRoot);
+      const handler = this.comps.getRequestFor(curLeaf, name) ?? mkReq404(name);
+      const reqCtx = new RequestContext(path, this, parent, curRoot);
+      const resHandlerName = opts?.onResName ?? name;
+      const resPath = opts?.livePath ? null : txnPath.pinKeys(curRoot);
+      const push = (specificName, baseName, singleArg, result, error) => {
+        const resArgs = specificName ? [singleArg] : [result, error];
+        const t = new ResponseEvent(path, this, specificName ?? baseName, resArgs, parent, resPath);
+        transfer(t);
+        this.pushTransaction(t);
+      };
+      try {
+        const result = await handler.fn.apply(null, [...args, reqCtx]);
+        push(opts?.onOkName, resHandlerName, result, result, null);
+      } catch (error) {
+        push(opts?.onErrorName, resHandlerName, error, null, error);
+      }
+    } finally {
+      if (release && !released)
+        release();
     }
   }
   get hasPendingTransactions() {
@@ -2960,13 +3005,18 @@ class Transactor {
       this.transact(this.transactions.shift());
   }
   transact(transaction) {
-    const curState = this.state.val;
-    const newState = transaction.run(curState, this.comps);
-    if (newState !== undefined) {
-      this.state.set(newState, { transaction });
-      transaction.afterTransaction();
-    } else
-      console.warn("undefined new state", { curState, transaction });
+    try {
+      const curState = this.state.val;
+      const newState = transaction.run(curState, this.comps);
+      if (newState !== undefined) {
+        this.state.set(newState, { transaction });
+        transaction.afterTransaction();
+      } else
+        console.warn("undefined new state", { curState, transaction });
+    } finally {
+      transaction._completion?.ensureSelfSettled();
+      transaction._completion?.releaseSelf();
+    }
   }
   transactInputNow(path, event, eventHandler, dragInfo) {
     this.transact(new InputEvent(path, event, eventHandler, this, dragInfo));
@@ -2987,18 +3037,17 @@ class Transaction {
     this.path = path;
     this.transactor = transactor;
     this.parentTransaction = parentTransaction;
-    this._task = null;
+    this._completion = null;
   }
-  get task() {
-    this._task ??= new Task;
-    return this._task;
+  get completion() {
+    this._completion ??= new Completion;
+    return this._completion;
   }
-  getCompletionPromise() {
-    return this.task.promise;
+  whenSettled() {
+    return this.completion.whenSettled();
   }
-  setParent(parentTransaction) {
-    this.parentTransaction = parentTransaction;
-    parentTransaction.task.addDep(this.task);
+  whenSubtreeSettled() {
+    return this.completion.whenSubtreeSettled();
   }
   run(rootValue, comps) {
     return this.updateRootValue(rootValue, comps);
@@ -3024,7 +3073,7 @@ class Transaction {
     const txnPath = this.getTransactionPath();
     const curLeaf = txnPath.lookup(curRoot);
     const newLeaf = this.callHandler(curRoot, curLeaf, comps);
-    this._task?.complete?.({ value: newLeaf, old: curLeaf });
+    this._completion?.markSelfSettled({ value: newLeaf, old: curLeaf });
     return curLeaf !== newLeaf ? txnPath.setValue(curRoot, newLeaf) : curRoot;
   }
   lookupName(_name) {
@@ -3161,29 +3210,69 @@ class BubbleEvent extends SendEvent {
   }
 }
 
-class Task {
+class InputDispatchEvent extends NameArgsTransaction {
+  handlerProp = "input";
+}
+
+class Completion {
   constructor() {
-    this.deps = [];
-    this.val = this.resolve = this.reject = null;
-    this.promise = new Promise((res, rej) => {
-      this.resolve = res;
-      this.reject = rej;
+    this.val = undefined;
+    this.selfSettled = false;
+    this.subtreeSettled = false;
+    this.pending = 1;
+    this._selfResolve = null;
+    this._selfPromise = null;
+    this._subtreeResolve = null;
+    this._subtreePromise = null;
+    this._selfReleased = false;
+  }
+  whenSettled() {
+    if (this.selfSettled)
+      return Promise.resolve(this.val);
+    this._selfPromise ??= new Promise((res) => {
+      this._selfResolve = res;
     });
-    this.isCompleted = false;
+    return this._selfPromise;
   }
-  addDep(task) {
-    console.assert(!this.isCompleted, "addDep for completed task", this, task);
-    this.deps.push(task);
-    task.promise.then((_) => this._check());
+  whenSubtreeSettled() {
+    if (this.subtreeSettled)
+      return Promise.resolve(this.val);
+    this._subtreePromise ??= new Promise((res) => {
+      this._subtreeResolve = res;
+    });
+    return this._subtreePromise;
   }
-  complete(val) {
+  markSelfSettled(val) {
+    if (this.selfSettled)
+      return;
+    this.selfSettled = true;
     this.val = val;
-    this._check();
+    this._selfResolve?.(val);
+  }
+  ensureSelfSettled() {
+    if (!this.selfSettled)
+      this.markSelfSettled(this.val);
   }
-  _check() {
-    if (this.deps.every((task) => task.isCompleted)) {
-      this.isCompleted = true;
-      this.resolve(this);
+  track() {
+    this.pending++;
+    let done = false;
+    return () => {
+      if (done)
+        return;
+      done = true;
+      this._release();
+    };
+  }
+  releaseSelf() {
+    if (this._selfReleased)
+      return;
+    this._selfReleased = true;
+    this._release();
+  }
+  _release() {
+    if (--this.pending === 0) {
+      this.subtreeSettled = true;
+      this._subtreeResolve?.(this.val);
     }
   }
 }
@@ -3222,6 +3311,9 @@ class Dispatcher {
   requestAtPath(path, name, args, opts) {
     return this.transactor.pushRequest(path, name, args, opts, this.parent);
   }
+  inputAtPath(path, name, args, opts) {
+    return this.transactor.pushInput(path, name, args, opts, this.parent);
+  }
   lookupTypeFor(name, inst) {
     return this.transactor.comps.getCompFor(inst).scope.lookupComponent(name);
   }
@@ -3576,6 +3668,45 @@ import {
   version
 } from "immutable";
 
+// src/on.js
+var OP_KINDS = ["send", "bubble", "request", "input"];
+function phaseOps(phase) {
+  const ops = [];
+  for (const type of OP_KINDS)
+    for (const a of phase[type] ?? [])
+      ops.push({ type, ...a });
+  for (const a of phase.do ?? [])
+    ops.push(a);
+  return ops;
+}
+function resolveArgs(args, self) {
+  return typeof args === "function" ? args(self) ?? [] : args ?? [];
+}
+function dispatchPhase(dispatcher, targetPath, phase, self) {
+  if (!phase)
+    return;
+  for (const op of phaseOps(phase)) {
+    const args = resolveArgs(op.args, self);
+    switch (op.type) {
+      case "send":
+        dispatcher.sendAtPath(targetPath, op.name, args, op.opts);
+        break;
+      case "bubble":
+        dispatcher.sendAtPath(targetPath, op.name, args, {
+          skipSelf: true,
+          bubbles: true,
+          ...op.opts
+        });
+        break;
+      case "request":
+        dispatcher.requestAtPath(targetPath, op.name, args, op.opts);
+        break;
+      case "input":
+        dispatcher.inputAtPath(targetPath, op.name, args, op.opts);
+        break;
+    }
+  }
+}
 // src/oo.js
 import { Map as IMap, Set as ISet, List, OrderedMap, Record } from "immutable";
 var BAD_VALUE = Symbol("BadValue");
@@ -3989,8 +4120,10 @@ export {
   test,
   setIn,
   set,
+  resolveArgs,
   removeIn,
   remove,
+  phaseOps,
   mergeWith,
   mergeDeepWith,
   mergeDeep,
@@ -4023,6 +4156,7 @@ export {
   getIn,
   get,
   fromJS,
+  dispatchPhase,
   css,
   component,
   collectIterBindings,