creo 0.2.4 → 0.2.6

package/README.md

@@ -336,8 +336,10 @@ bun test packages/creo/src/    # Run tests
 bun run build                  # Build all packages
 bun run typecheck              # Type-check
 
-# Run examples:
-cd examples/todo && bun install && bun run dev
+# Run the docs site (with the live recipe playground — simple-todo, advanced-todo, table, chess, etc.):
+cd docs && bun install && bun run dev
+
+# Run a standalone example:
 cd examples/router && bun install && bun run dev
 
 # Version management:

package/dist/functional/key.d.ts

@@ -1,2 +1 @@
 export type Key = number | string;
-export declare function generateNextKey(): string;

package/dist/index.d.ts

@@ -7,12 +7,12 @@ export { Store, store, isStore } from "./public/store";
 export { $primitive } from "./public/primitive";
 export type { PrimitiveProps, EventHandlerProps } from "./public/primitive";
 export { html, text, div, span, section, article, aside, nav, header, footer, main, address, hgroup, search, p, h1, h2, h3, h4, h5, h6, pre, code, em, strong, small, br, hr, a, blockquote, label, abbr, b, bdi, bdo, cite, data, dfn, i, kbd, mark, q, rp, rt, ruby, s, samp, sub, sup, time, u, varEl, wbr, del, ins, ul, ol, li, dl, dt, dd, table, thead, tbody, tfoot, tr, th, td, caption, colgroup, col, form, button, input, textarea, select, option, fieldset, legend, datalist, optgroup, output, progress, meter, img, video, audio, canvas, source, track, map, area, picture, iframe, embed, object, portal, svg, details, summary, dialog, menu, figure, figcaption, script, noscript, template, slot, } from "./public/primitives/primitives";
-export type { BaseEventData, PointerEventData, KeyEventData, InputEventData, FocusEventData, ContainerEvents, FormEvents, HtmlAttrs, } from "./public/primitives/primitives";
+export type { BaseEventData, PointerEventData, KeyEventData, InputEventData, FocusEventData, MediaEventData, ScrollEventData, LoadEventData, ErrorEventData, ToggleEventData, ContainerEvents, FormEvents, MediaEvents, DisclosureEvents, HtmlAttrs, } from "./public/primitives/primitives";
 export type { IRender } from "./render/render_interface";
 export { HtmlRender } from "./render/html_render";
 export { JsonRender } from "./render/json_render";
 export type { JsonNode } from "./render/json_render";
-export { HtmlStringRender, StringRender } from "./render/string_render";
+export { HtmlStringRender } from "./render/string_render";
 export { Engine, type Scheduler } from "./internal/engine";
 export { type Maybe, type None, type Just, just, withDefault, _ } from "./functional/maybe";
 export type { Key } from "./functional/key";

package/dist/index.js

@@ -177,6 +177,7 @@ var area = html("area");
 class State {
   #current;
   #schedule;
+  #pending;
   constructor(initial, schedule) {
     this.#current = initial;
     this.#schedule = schedule;
@@ -185,30 +186,49 @@ class State {
     return this.#current;
   }
   set(value) {
+    this.#pending = null;
     this.#current = value;
     this.#schedule();
   }
   update(fn) {
-    const result = fn(this.#current);
-    if (result instanceof Promise) {
-      result.then((value) => {
+    if (this.#pending) {
+      const next = this.#pending.then((v) => fn(v));
+      this.#pending = next;
+      next.then((value) => {
+        if (this.#pending !== next)
+          return;
+        this.#pending = null;
         this.#current = value;
         this.#schedule();
       });
-    } else {
+      return;
+    }
+    const result = fn(this.#current);
+    if (!(result instanceof Promise)) {
       this.#current = result;
       this.#schedule();
+      return;
     }
+    const captured = result;
+    this.#pending = captured;
+    captured.then((value) => {
+      if (this.#pending !== captured)
+        return;
+      this.#pending = null;
+      this.#current = value;
+      this.#schedule();
+    });
   }
 }
 
 // src/public/store.ts
-var $store = Symbol("store");
+var $store = Symbol.for("creo.store");
 
 class Store {
   [$store] = true;
   #current;
   #subscribers = new Set;
+  #pending;
   constructor(initial) {
     this.#current = initial;
   }
@@ -216,20 +236,38 @@ class Store {
     return this.#current;
   }
   set(value) {
+    this.#pending = null;
     this.#current = value;
     this.#notify();
   }
   update(fn) {
-    const result = fn(this.#current);
-    if (result instanceof Promise) {
-      result.then((value) => {
+    if (this.#pending) {
+      const next = this.#pending.then((v) => fn(v));
+      this.#pending = next;
+      next.then((value) => {
+        if (this.#pending !== next)
+          return;
+        this.#pending = null;
         this.#current = value;
         this.#notify();
       });
-    } else {
+      return;
+    }
+    const result = fn(this.#current);
+    if (!(result instanceof Promise)) {
       this.#current = result;
       this.#notify();
+      return;
     }
+    const captured = result;
+    this.#pending = captured;
+    captured.then((value) => {
+      if (this.#pending !== captured)
+        return;
+      this.#pending = null;
+      this.#current = value;
+      this.#notify();
+    });
   }
   subscribe(cb) {
     this.#subscribers.add(cb);
@@ -262,12 +300,15 @@ function shallowEqual(a2, b2) {
   let countA = 0;
   for (const key in a2) {
     countA++;
-    if (!Object.is(a2[key], b2[key]))
+    if (a2[key] !== b2[key])
       return false;
   }
   let countB = 0;
-  for (const _ in b2)
+  for (const _ in b2) {
     countB++;
+    if (countB > countA)
+      return false;
+  }
   return countA === countB;
 }
 
@@ -307,17 +348,6 @@ function lis(arr) {
 }
 
 // src/internal/engine.ts
-var STATEFUL_DOM_KEYS = ["value", "checked", "selected", "indeterminate", "muted"];
-function hasStatefulDomKey(props) {
-  if (props == null || typeof props !== "object")
-    return false;
-  for (const k of STATEFUL_DOM_KEYS) {
-    if (k in props)
-      return true;
-  }
-  return false;
-}
-
 class Engine {
   renderer;
   #dirtyQueue = new Set;
@@ -345,11 +375,17 @@ class Engine {
       keyToView: null,
       unsubscribe: null,
       parent,
-      scHost: null
+      scHost: null,
+      pos: -1
     };
     if (slot2) {
-      const slotFn = typeof slot2 === "string" ? this.#stringSlot(slot2) : slot2;
-      res.sc = this.#collect(slotFn, [], res);
+      if (typeof slot2 === "string") {
+        res.sc = [
+          this.newView(textViewFn, res, slot2, null, null)
+        ];
+      } else {
+        res.sc = this.#collect(slot2, [], res);
+      }
     }
     return res;
   }
@@ -448,11 +484,6 @@ class Engine {
     this.#collectFor = beforeParent;
     return collector;
   }
-  #stringSlot(content) {
-    return () => {
-      this.view(textViewFn, content, null, null);
-    };
-  }
   nextProps(view2, nextProps, nextSlot, preCollectedSc) {
     const prevSc = view2.sc;
     view2.slot = nextSlot;
@@ -460,16 +491,19 @@ class Engine {
       for (const child of preCollectedSc)
         child.parent = view2;
       view2.sc = preCollectedSc;
-    } else {
-      if (nextSlot) {
-        const slotFn = typeof nextSlot === "string" ? this.#stringSlot(nextSlot) : nextSlot;
-        view2.sc = this.#collect(slotFn, [], view2);
+    } else if (nextSlot) {
+      if (typeof nextSlot === "string") {
+        view2.sc = [
+          this.newView(textViewFn, view2, nextSlot, null, null)
+        ];
       } else {
-        view2.sc = null;
+        view2.sc = this.#collect(nextSlot, [], view2);
       }
+    } else {
+      view2.sc = null;
     }
     const structChanged = hasScStructuralChange(prevSc, view2.sc);
-    const shouldUpdate = view2.body?.shouldUpdate ? view2.body.shouldUpdate(nextProps) : !shallowEqual(view2.props, nextProps) || (view2.flags & F_PRIMITIVE) !== 0 && hasStatefulDomKey(nextProps);
+    const shouldUpdate = view2.body?.shouldUpdate ? view2.body.shouldUpdate(nextProps) : !shallowEqual(view2.props, nextProps) || (view2.flags & F_PRIMITIVE) !== 0 && this.renderer.shouldReassert?.(view2, nextProps) === true;
     if (shouldUpdate || structChanged) {
       view2.props = nextProps;
       this.markDirty(view2);
@@ -521,7 +555,9 @@ class Engine {
     }
     if (view2.children == null) {
       view2.children = pendingChildren;
-      for (const child of pendingChildren) {
+      for (let i2 = 0;i2 < pendingChildren.length; i2++) {
+        const child = pendingChildren[i2];
+        child.pos = i2;
         this.initViewBody(child);
         this.markDirty(child);
         if (child.userKey != null) {
@@ -547,9 +583,11 @@ class Engine {
       const old = oldChildren[i2];
       const pend = pending[i2];
       this.#patchOrReplace(view2, oldChildren, i2, old, pend);
+      oldChildren[i2].pos = i2;
     }
     for (let i2 = oldLen;i2 < newLen; i2++) {
       oldChildren[i2] = pending[i2];
+      pending[i2].pos = i2;
       this.initViewBody(pending[i2]);
       this.markDirty(pending[i2]);
     }
@@ -589,21 +627,46 @@ class Engine {
           view2.keyToView.set(pending[j].userKey, pending[j]);
         }
       }
-      view2.children = [
-        ...oldChildren.slice(0, i2),
-        ...pending.slice(i2, newEnd + 1),
-        ...oldChildren.slice(i2, oldEnd + 1)
-      ];
+      const tailStart2 = oldEnd + 1;
+      const tailLen2 = oldChildren.length - tailStart2;
+      const insertCount = newEnd - i2 + 1;
+      const out2 = new Array(i2 + insertCount + tailLen2);
+      for (let j = 0;j < i2; j++) {
+        const c = oldChildren[j];
+        c.pos = j;
+        out2[j] = c;
+      }
+      for (let j = 0;j < insertCount; j++) {
+        const c = pending[i2 + j];
+        c.pos = i2 + j;
+        out2[i2 + j] = c;
+      }
+      for (let j = 0;j < tailLen2; j++) {
+        const c = oldChildren[tailStart2 + j];
+        c.pos = i2 + insertCount + j;
+        out2[i2 + insertCount + j] = c;
+      }
+      view2.children = out2;
       return;
     }
     if (i2 > newEnd) {
       for (let j = i2;j <= oldEnd; j++) {
         this.dispose(oldChildren[j]);
       }
-      view2.children = [
-        ...oldChildren.slice(0, i2),
-        ...oldChildren.slice(oldEnd + 1)
-      ];
+      const tailStart2 = oldEnd + 1;
+      const tailLen2 = oldChildren.length - tailStart2;
+      const out2 = new Array(i2 + tailLen2);
+      for (let j = 0;j < i2; j++) {
+        const c = oldChildren[j];
+        c.pos = j;
+        out2[j] = c;
+      }
+      for (let j = 0;j < tailLen2; j++) {
+        const c = oldChildren[tailStart2 + j];
+        c.pos = i2 + j;
+        out2[i2 + j] = c;
+      }
+      view2.children = out2;
       return;
     }
     const newKeyToIndex = new Map;
@@ -630,7 +693,14 @@ class Engine {
       }
     }
     const stable = lis(newIdxToOldIdx);
-    const newChildren = new Array(middleLen);
+    const tailStart = oldEnd + 1;
+    const tailLen = oldChildren.length - tailStart;
+    const out = new Array(i2 + middleLen + tailLen);
+    for (let j = 0;j < i2; j++) {
+      const c = oldChildren[j];
+      c.pos = j;
+      out[j] = c;
+    }
     for (let j = middleLen - 1;j >= 0; j--) {
       const newIdx = i2 + j;
       const pendView = pending[newIdx];
@@ -642,19 +712,25 @@ class Engine {
             view2.keyToView = new Map;
           view2.keyToView.set(pendView.userKey, pendView);
         }
-        newChildren[j] = pendView;
+        pendView.pos = i2 + j;
+        out[i2 + j] = pendView;
       } else {
         const oldView = oldChildren[newIdxToOldIdx[j]];
         this.#patchOrReplace(view2, oldChildren, newIdxToOldIdx[j], oldView, pendView);
         if (!stable.has(j)) {
           this.markMoved(oldView);
         }
-        newChildren[j] = oldView;
+        const placed = oldChildren[newIdxToOldIdx[j]];
+        placed.pos = i2 + j;
+        out[i2 + j] = placed;
       }
     }
-    const head = oldChildren.slice(0, i2);
-    const tail = oldChildren.slice(oldEnd + 1);
-    view2.children = [...head, ...newChildren, ...tail];
+    for (let j = 0;j < tailLen; j++) {
+      const c = oldChildren[tailStart + j];
+      c.pos = i2 + middleLen + j;
+      out[i2 + middleLen + j] = c;
+    }
+    view2.children = out;
   }
   #patchOrReplace(parent, oldChildren, idx, oldView, pendView) {
     if (oldView.viewFn === pendView.viewFn) {
@@ -777,7 +853,30 @@ var DOM_EVENT = {
   KeyDown: "keydown",
   KeyUp: "keyup",
   Focus: "focus",
-  Blur: "blur"
+  Blur: "blur",
+  MouseEnter: "mouseenter",
+  MouseLeave: "mouseleave",
+  PointerEnter: "pointerenter",
+  PointerLeave: "pointerleave",
+  Scroll: "scroll",
+  Load: "load",
+  Error: "error",
+  Toggle: "toggle",
+  VolumeChange: "volumechange",
+  Play: "play",
+  Pause: "pause",
+  Ended: "ended",
+  TimeUpdate: "timeupdate",
+  LoadedMetadata: "loadedmetadata",
+  LoadedData: "loadeddata",
+  CanPlay: "canplay",
+  CanPlayThrough: "canplaythrough",
+  DurationChange: "durationchange",
+  RateChange: "ratechange",
+  Seeking: "seeking",
+  Seeked: "seeked",
+  Stalled: "stalled",
+  Waiting: "waiting"
 };
 var $EV = Symbol.for("creo.ev");
 var containerState = new WeakMap;
@@ -788,6 +887,7 @@ function getState(container) {
       counts: new Map,
       handler(e) {
         const domEvent = e.type;
+        const noWalk = NO_WALK_EVENTS.has(domEvent);
         let dom = e.target;
         while (dom && dom !== container) {
           const evObj = dom[$EV];
@@ -799,6 +899,8 @@ function getState(container) {
                 return;
             }
           }
+          if (noWalk)
+            return;
           dom = dom.parentElement;
         }
       }
@@ -807,12 +909,52 @@ function getState(container) {
   }
   return state;
 }
-var CAPTURE_EVENTS = new Set(["focus", "blur"]);
+var CAPTURE_EVENTS = new Set([
+  "focus",
+  "blur",
+  "mouseenter",
+  "mouseleave",
+  "pointerenter",
+  "pointerleave",
+  "scroll",
+  "load",
+  "error",
+  "toggle",
+  "volumechange",
+  "play",
+  "pause",
+  "ended",
+  "timeupdate",
+  "loadedmetadata",
+  "loadeddata",
+  "canplay",
+  "canplaythrough",
+  "durationchange",
+  "ratechange",
+  "seeking",
+  "seeked",
+  "stalled",
+  "waiting"
+]);
+var NO_WALK_EVENTS = new Set([
+  "mouseenter",
+  "mouseleave",
+  "pointerenter",
+  "pointerleave"
+]);
+var PASSIVE_EVENTS = new Set(["scroll"]);
+function listenerOptions(domEvent) {
+  const capture = CAPTURE_EVENTS.has(domEvent);
+  if (PASSIVE_EVENTS.has(domEvent)) {
+    return { capture, passive: true };
+  }
+  return capture;
+}
 function ensureDelegated(container, domEvent) {
   const state = getState(container);
   const count = state.counts.get(domEvent) ?? 0;
   if (count === 0) {
-    container.addEventListener(domEvent, state.handler, CAPTURE_EVENTS.has(domEvent));
+    container.addEventListener(domEvent, state.handler, listenerOptions(domEvent));
   }
   state.counts.set(domEvent, count + 1);
 }
@@ -821,19 +963,68 @@ function removeDelegated(container, domEvent) {
   const count = state.counts.get(domEvent) ?? 0;
   if (count <= 1) {
     state.counts.delete(domEvent);
-    container.removeEventListener(domEvent, state.handler, CAPTURE_EVENTS.has(domEvent));
+    container.removeEventListener(domEvent, state.handler, listenerOptions(domEvent));
   } else {
     state.counts.set(domEvent, count - 1);
   }
 }
+var POINTER_EVENTS = new Set([
+  "click",
+  "dblclick",
+  "pointerdown",
+  "pointerup",
+  "pointermove",
+  "mouseenter",
+  "mouseleave",
+  "pointerenter",
+  "pointerleave"
+]);
+var MEDIA_EVENTS = new Set([
+  "volumechange",
+  "play",
+  "pause",
+  "ended",
+  "timeupdate",
+  "loadedmetadata",
+  "loadeddata",
+  "canplay",
+  "canplaythrough",
+  "durationchange",
+  "ratechange",
+  "seeking",
+  "seeked",
+  "stalled",
+  "waiting"
+]);
 function mapEventData(domEvent, e) {
   let data2;
-  if (domEvent === "click" || domEvent === "dblclick" || domEvent === "pointerdown" || domEvent === "pointerup" || domEvent === "pointermove") {
+  if (POINTER_EVENTS.has(domEvent)) {
     const pe = e;
     data2 = { x: pe.clientX, y: pe.clientY };
   } else if (domEvent === "input" || domEvent === "change") {
     const target = e.target;
     data2 = { value: target.value, checked: !!target.checked };
+  } else if (MEDIA_EVENTS.has(domEvent)) {
+    const target = e.target;
+    data2 = {
+      muted: !!target.muted,
+      paused: !!target.paused,
+      volume: target.volume,
+      currentTime: target.currentTime,
+      duration: Number.isFinite(target.duration) ? target.duration : 0
+    };
+  } else if (domEvent === "scroll") {
+    const target = e.target;
+    data2 = {
+      scrollTop: target.scrollTop ?? 0,
+      scrollLeft: target.scrollLeft ?? 0
+    };
+  } else if (domEvent === "error") {
+    const ev = e;
+    data2 = { message: ev.message ?? "" };
+  } else if (domEvent === "toggle") {
+    const target = e.target;
+    data2 = { open: !!target.open };
   } else if (domEvent === "keydown" || domEvent === "keyup") {
     const ke = e;
     data2 = { key: ke.key, code: ke.code };
@@ -877,6 +1068,7 @@ class HtmlRender {
           const domRef = { element, prevProps: null };
           view2.renderRef = domRef;
           this.setAttributes(element, props);
+          domRef.prevProps = props;
           if (view2.children?.length === 1) {
             const child = view2.children[0];
             if (child.flags & F_PRIMITIVE && child.viewFn[$primitive] === "text") {
@@ -886,6 +1078,9 @@ class HtmlRender {
             }
           }
           parentNode.insertBefore(element, refNode);
+          if (props != null && props.autofocus === true && typeof element.focus === "function") {
+            element.focus();
+          }
         }
       } else {
         view2.renderRef = true;
@@ -935,6 +1130,28 @@ class HtmlRender {
     }
     view2.renderRef = undefined;
   }
+  shouldReassert(view2, nextProps) {
+    if (nextProps == null || typeof nextProps !== "object")
+      return false;
+    const ref = view2.renderRef;
+    if (!ref || ref.element instanceof Text)
+      return false;
+    const el = ref.element;
+    const props = nextProps;
+    for (const key of DOM_PROPERTIES) {
+      if (!(key in props))
+        continue;
+      const live = el[key];
+      const next = props[key];
+      if (typeof next === "boolean" || typeof live === "boolean") {
+        if (Boolean(live) !== Boolean(next))
+          return true;
+      } else if (String(live) !== String(next)) {
+        return true;
+      }
+    }
+    return false;
+  }
   findParentDom(view2) {
     let parent = view2.parent;
     while (parent) {
@@ -955,7 +1172,9 @@ class HtmlRender {
     if (children[children.length - 1] === view2) {
       return this.#parentEndAnchor(parent);
     }
-    const idx = children.indexOf(view2);
+    let idx = view2.pos;
+    if (idx < 0 || children[idx] !== view2)
+      idx = children.indexOf(view2);
     for (let i2 = idx + 1;i2 < children.length; i2++) {
       const dom = this.getFirstDomNode(children[i2]);
       if (dom)
@@ -1002,7 +1221,7 @@ class HtmlRender {
         const creoName = key.slice(2);
         const domEvent = DOM_EVENT[creoName] ?? creoName.toLowerCase();
         const evObj = element[$EV];
-        if (evObj) {
+        if (evObj && domEvent in evObj) {
           evObj[domEvent] = value;
         } else {
           this.bindEvent(element, key, value);
@@ -1115,7 +1334,7 @@ class JsonRender {
       }
       const parentNode = view2.parent.renderRef;
       if (parentNode) {
-        const idx = view2.parent.children ? view2.parent.children.indexOf(view2) : -1;
+        const idx = view2.pos;
         if (idx >= 0 && idx < parentNode.children.length) {
           parentNode.children.splice(idx, 0, node);
         } else {
@@ -1127,11 +1346,13 @@ class JsonRender {
     if (view2.parent) {
       const parentNode = view2.parent.renderRef;
       if (parentNode) {
-        const oldIdx = parentNode.children.indexOf(existing);
-        const targetIdx = view2.parent.children ? view2.parent.children.indexOf(view2) : -1;
-        if (oldIdx !== -1 && targetIdx !== -1 && oldIdx !== targetIdx) {
-          parentNode.children.splice(oldIdx, 1);
-          parentNode.children.splice(Math.min(targetIdx, parentNode.children.length), 0, existing);
+        const targetIdx = view2.pos;
+        if (targetIdx >= 0 && parentNode.children[targetIdx] !== existing) {
+          const oldIdx = parentNode.children.indexOf(existing);
+          if (oldIdx !== -1) {
+            parentNode.children.splice(oldIdx, 1);
+            parentNode.children.splice(Math.min(targetIdx, parentNode.children.length), 0, existing);
+          }
         }
       }
     }
@@ -1253,7 +1474,6 @@ class HtmlStringRender {
     return result;
   }
 }
-var StringRender = HtmlStringRender;
 // src/functional/maybe.ts
 function just(maybe, errorMessage) {
   if (maybe == null) {
@@ -1389,7 +1609,6 @@ export {
   abbr,
   a,
   _,
-  StringRender,
   Store,
   State,
   JsonRender,
@@ -1399,4 +1618,4 @@ export {
   $primitive
 };
 
-//# debugId=E2DD104085BAD69A64756E2164756E21
+//# debugId=403015234A66157064756E2164756E21