creo 0.0.4-dev → 0.2.0

package/dist/index.js

@@ -0,0 +1,1357 @@
+// src/internal/internal_view.ts
+var F_PENDING = 1;
+var F_DIRTY = 1 << 1;
+var F_MOVED = 1 << 2;
+var F_QUICK_RERENDER = 1 << 3;
+var F_PRIMITIVE = 1 << 4;
+var F_TEXT_CONTENT = 1 << 5;
+function hasScStructuralChange(prev, next) {
+  const prevLen = prev?.length ?? 0;
+  const nextLen = next?.length ?? 0;
+  if (prevLen === 0 && nextLen === 0)
+    return false;
+  if (!prev || !next)
+    return true;
+  if (prev.length !== next.length)
+    return true;
+  for (let i = 0;i < next.length; i++) {
+    if (next[i].viewFn !== prev[i].viewFn)
+      return true;
+    if (next[i].userKey !== prev[i].userKey)
+      return true;
+  }
+  return false;
+}
+
+// src/public/primitive.ts
+var $primitive = Symbol("primitive");
+
+// src/public/state.ts
+class State {
+  #current;
+  #schedule;
+  constructor(initial, schedule) {
+    this.#current = initial;
+    this.#schedule = schedule;
+  }
+  get() {
+    return this.#current;
+  }
+  set(value) {
+    this.#current = value;
+    this.#schedule();
+  }
+  update(fn) {
+    const result = fn(this.#current);
+    if (result instanceof Promise) {
+      result.then((value) => {
+        this.#current = value;
+        this.#schedule();
+      });
+    } else {
+      this.#current = result;
+      this.#schedule();
+    }
+  }
+}
+
+// src/public/store.ts
+var $store = Symbol("store");
+
+class Store {
+  [$store] = true;
+  #current;
+  #subscribers = new Set;
+  constructor(initial) {
+    this.#current = initial;
+  }
+  get() {
+    return this.#current;
+  }
+  set(value) {
+    this.#current = value;
+    this.#notify();
+  }
+  update(fn) {
+    const result = fn(this.#current);
+    if (result instanceof Promise) {
+      result.then((value) => {
+        this.#current = value;
+        this.#notify();
+      });
+    } else {
+      this.#current = result;
+      this.#notify();
+    }
+  }
+  subscribe(cb) {
+    this.#subscribers.add(cb);
+    return () => {
+      this.#subscribers.delete(cb);
+    };
+  }
+  #notify() {
+    for (const sub of this.#subscribers) {
+      sub();
+    }
+  }
+}
+function isStore(value) {
+  return value != null && typeof value === "object" && $store in value;
+}
+var store = {
+  new(initial) {
+    return new Store(initial);
+  }
+};
+
+// src/functional/shallow_equal.ts
+function shallowEqual(a, b) {
+  if (a === b)
+    return true;
+  if (typeof a !== "object" || a === null || typeof b !== "object" || b === null) {
+    return false;
+  }
+  let countA = 0;
+  for (const key in a) {
+    countA++;
+    if (!Object.is(a[key], b[key]))
+      return false;
+  }
+  let countB = 0;
+  for (const _ in b)
+    countB++;
+  return countA === countB;
+}
+
+// src/functional/lis.ts
+function lis(arr) {
+  const len = arr.length;
+  if (len === 0)
+    return new Set;
+  const tails = [];
+  const prev = new Array(len).fill(-1);
+  for (let i = 0;i < len; i++) {
+    if (arr[i] < 0)
+      continue;
+    const val = arr[i];
+    let lo = 0;
+    let hi = tails.length;
+    while (lo < hi) {
+      const mid = lo + hi >> 1;
+      if (arr[tails[mid]] < val)
+        lo = mid + 1;
+      else
+        hi = mid;
+    }
+    if (lo > 0)
+      prev[i] = tails[lo - 1];
+    tails[lo] = i;
+  }
+  const result = new Set;
+  if (tails.length === 0)
+    return result;
+  let idx = tails[tails.length - 1];
+  for (let k = tails.length - 1;k >= 0; k--) {
+    result.add(idx);
+    idx = prev[idx];
+  }
+  return result;
+}
+
+// src/internal/orchestrator.ts
+class Orchestrator {
+  #currentEngine;
+  setCurrentEngine(engine) {
+    this.#currentEngine = engine;
+  }
+  currentEngine() {
+    return this.#currentEngine;
+  }
+}
+var orchestrator = new Orchestrator;
+
+// src/internal/engine.ts
+class Engine {
+  renderer;
+  #dirtyQueue = new Set;
+  #collector;
+  #collectFor;
+  #scheduler;
+  #renderScheduled = false;
+  #rendering = false;
+  constructor(renderer, scheduler) {
+    this.renderer = renderer;
+    this.#scheduler = scheduler ?? ((cb) => queueMicrotask(cb));
+    renderer.engine = this;
+  }
+  newView(viewFn, parent, props, slot, userKey) {
+    const res = {
+      viewFn,
+      userKey,
+      props,
+      slot,
+      body: null,
+      sc: null,
+      renderRef: null,
+      flags: F_PENDING | (viewFn[$primitive] != null ? F_PRIMITIVE : 0),
+      children: null,
+      keyToView: null,
+      unsubscribe: null,
+      parent,
+      scHost: null
+    };
+    if (slot) {
+      res.sc = this.#collect(slot, [], res);
+    }
+    return res;
+  }
+  view(viewFn, props, slot, userKey) {
+    const view = this.newView(viewFn, this.#collectFor, props, slot, userKey);
+    this.#collector?.push(view);
+    return view;
+  }
+  views(views) {
+    if (views)
+      this.#collector?.push(...views);
+  }
+  initViewBody(view) {
+    if (!(view.flags & F_PENDING))
+      return;
+    view.flags &= ~F_PENDING;
+    if (view.flags & F_PRIMITIVE) {
+      const engine = this;
+      view.body = {
+        render() {
+          engine.views(view.sc);
+        }
+      };
+      return;
+    }
+    view.body = view.viewFn({
+      props: () => view.props,
+      use: (storeOrState) => {
+        if (!isStore(storeOrState)) {
+          return new State(storeOrState, () => this.markDirty(view));
+        }
+        const s = storeOrState;
+        const unsub = s.subscribe(() => this.markDirty(view));
+        if (!view.unsubscribe)
+          view.unsubscribe = [];
+        view.unsubscribe.push(unsub);
+        return s;
+      },
+      slot: () => {
+        if (!view.sc)
+          return;
+        view.scHost = this.#collectFor ?? view;
+        for (const child of view.sc) {
+          child.parent = this.#collectFor ?? view;
+          this.#collector?.push(child);
+        }
+      }
+    });
+  }
+  createRoot(children, props) {
+    orchestrator.setCurrentEngine(this);
+    const view = this.newView(({ slot }) => ({
+      render() {
+        slot();
+      }
+    }), null, props, children, null);
+    this.markDirty(view);
+    return view;
+  }
+  markDirty(view) {
+    if (view.flags & F_DIRTY) {
+      return;
+    }
+    view.flags |= F_DIRTY;
+    this.#dirtyQueue.add(view);
+    this.schedule();
+  }
+  markMoved(view) {
+    if (view.flags & F_MOVED) {
+      return;
+    }
+    view.flags |= F_MOVED;
+    this.#dirtyQueue.add(view);
+    this.schedule();
+  }
+  schedule() {
+    if (this.#renderScheduled)
+      return;
+    this.#renderScheduled = true;
+    this.#scheduler(() => {
+      this.#renderScheduled = false;
+      this.render();
+    });
+  }
+  #collect(render, collector, parent) {
+    const before = this.#collector;
+    const beforeParent = this.#collectFor;
+    this.#collector = collector;
+    this.#collectFor = parent;
+    render();
+    this.#collector = before;
+    this.#collectFor = beforeParent;
+    return collector;
+  }
+  nextProps(view, nextProps, nextSlot, preCollectedSc) {
+    const prevSc = view.sc;
+    view.slot = nextSlot;
+    if (preCollectedSc) {
+      for (const child of preCollectedSc)
+        child.parent = view;
+      view.sc = preCollectedSc;
+    } else {
+      view.sc = nextSlot ? this.#collect(nextSlot, [], view) : null;
+    }
+    const structChanged = hasScStructuralChange(prevSc, view.sc);
+    const shouldUpdate = view.body?.shouldUpdate ? view.body.shouldUpdate(nextProps) : !shallowEqual(view.props, nextProps);
+    if (shouldUpdate || structChanged) {
+      view.props = nextProps;
+      this.markDirty(view);
+    } else if (view.sc && view.scHost?.children) {
+      this.#propagateScProps(view);
+    } else if (view.sc && prevSc) {
+      for (let i = 0;i < view.sc.length; i++) {
+        if (view.sc[i].props !== prevSc[i].props) {
+          this.markDirty(view);
+          break;
+        }
+      }
+    }
+  }
+  #propagateScProps(owner) {
+    const host = owner.scHost;
+    const sc = owner.sc;
+    if (!host?.children || !sc)
+      return;
+    if (host.keyToView) {
+      for (const item of sc) {
+        if (item.userKey != null) {
+          const live = host.keyToView.get(item.userKey);
+          if (live && live.viewFn === item.viewFn) {
+            this.nextProps(live, item.props, item.slot);
+          }
+        }
+      }
+    } else {
+      const len = Math.min(sc.length, host.children.length);
+      for (let i = 0;i < len; i++) {
+        const live = host.children[i];
+        if (live.viewFn === sc[i].viewFn) {
+          this.nextProps(live, sc[i].props, sc[i].slot);
+        }
+      }
+    }
+  }
+  reconcile(view) {
+    let pendingChildren = null;
+    if (view.body?.render) {
+      pendingChildren = this.#collect(view.body.render, [], view);
+    }
+    if (pendingChildren == null || pendingChildren.length === 0) {
+      if (view.children)
+        for (const child of view.children)
+          this.dispose(child);
+      return;
+    }
+    if (view.children == null) {
+      view.children = pendingChildren;
+      for (const child of pendingChildren) {
+        this.initViewBody(child);
+        this.markDirty(child);
+        if (child.userKey != null) {
+          if (!view.keyToView)
+            view.keyToView = new Map;
+          view.keyToView.set(child.userKey, child);
+        }
+      }
+      return;
+    }
+    const hasKeys = pendingChildren.some((c) => c.userKey != null);
+    if (hasKeys) {
+      this.#reconcileKeyed(view, view.children, pendingChildren);
+    } else {
+      this.#reconcileNonKeyed(view, view.children, pendingChildren);
+    }
+  }
+  #reconcileNonKeyed(view, oldChildren, pending) {
+    const oldLen = oldChildren.length;
+    const newLen = pending.length;
+    const minLen = Math.min(oldLen, newLen);
+    for (let i = 0;i < minLen; i++) {
+      const old = oldChildren[i];
+      const pend = pending[i];
+      this.#patchOrReplace(view, oldChildren, i, old, pend);
+    }
+    for (let i = oldLen;i < newLen; i++) {
+      oldChildren[i] = pending[i];
+      this.initViewBody(pending[i]);
+      this.markDirty(pending[i]);
+    }
+    for (let i = newLen;i < oldLen; i++) {
+      this.dispose(oldChildren[i]);
+    }
+    oldChildren.length = newLen;
+  }
+  #reconcileKeyed(view, oldChildren, pending) {
+    let i = 0;
+    let oldEnd = oldChildren.length - 1;
+    let newEnd = pending.length - 1;
+    while (i <= oldEnd && i <= newEnd) {
+      const oldView = oldChildren[i];
+      const pendView = pending[i];
+      if (oldView.userKey !== pendView.userKey)
+        break;
+      this.#patchOrReplace(view, oldChildren, i, oldView, pendView);
+      i++;
+    }
+    while (oldEnd >= i && newEnd >= i) {
+      const oldView = oldChildren[oldEnd];
+      const pendView = pending[newEnd];
+      if (oldView.userKey !== pendView.userKey)
+        break;
+      this.#patchOrReplace(view, oldChildren, oldEnd, oldView, pendView);
+      oldEnd--;
+      newEnd--;
+    }
+    if (i > oldEnd) {
+      for (let j = i;j <= newEnd; j++) {
+        this.initViewBody(pending[j]);
+        this.markDirty(pending[j]);
+        if (pending[j].userKey != null) {
+          if (!view.keyToView)
+            view.keyToView = new Map;
+          view.keyToView.set(pending[j].userKey, pending[j]);
+        }
+      }
+      view.children = [
+        ...oldChildren.slice(0, i),
+        ...pending.slice(i, newEnd + 1),
+        ...oldChildren.slice(i, oldEnd + 1)
+      ];
+      return;
+    }
+    if (i > newEnd) {
+      for (let j = i;j <= oldEnd; j++) {
+        this.dispose(oldChildren[j]);
+      }
+      view.children = [
+        ...oldChildren.slice(0, i),
+        ...oldChildren.slice(oldEnd + 1)
+      ];
+      return;
+    }
+    const newKeyToIndex = new Map;
+    for (let j = i;j <= newEnd; j++) {
+      const key = pending[j].userKey;
+      if (key != null)
+        newKeyToIndex.set(key, j);
+    }
+    const middleLen = newEnd - i + 1;
+    const newIdxToOldIdx = new Array(middleLen).fill(-1);
+    const matched = new Set;
+    for (let j = i;j <= oldEnd; j++) {
+      const oldView = oldChildren[j];
+      const key = oldView.userKey;
+      if (key != null && newKeyToIndex.has(key)) {
+        const newIdx = newKeyToIndex.get(key);
+        newIdxToOldIdx[newIdx - i] = j;
+        matched.add(j);
+      }
+    }
+    for (let j = i;j <= oldEnd; j++) {
+      if (!matched.has(j)) {
+        this.dispose(oldChildren[j]);
+      }
+    }
+    const stable = lis(newIdxToOldIdx);
+    const newChildren = new Array(middleLen);
+    for (let j = middleLen - 1;j >= 0; j--) {
+      const newIdx = i + j;
+      const pendView = pending[newIdx];
+      if (newIdxToOldIdx[j] === -1) {
+        this.initViewBody(pendView);
+        this.markDirty(pendView);
+        if (pendView.userKey != null) {
+          if (!view.keyToView)
+            view.keyToView = new Map;
+          view.keyToView.set(pendView.userKey, pendView);
+        }
+        newChildren[j] = pendView;
+      } else {
+        const oldView = oldChildren[newIdxToOldIdx[j]];
+        this.#patchOrReplace(view, oldChildren, newIdxToOldIdx[j], oldView, pendView);
+        if (!stable.has(j)) {
+          this.markMoved(oldView);
+        }
+        newChildren[j] = oldView;
+      }
+    }
+    const head = oldChildren.slice(0, i);
+    const tail = oldChildren.slice(oldEnd + 1);
+    view.children = [...head, ...newChildren, ...tail];
+  }
+  #patchOrReplace(parent, oldChildren, idx, oldView, pendView) {
+    if (oldView.viewFn === pendView.viewFn) {
+      this.nextProps(oldView, pendView.props, pendView.slot, pendView.sc);
+    } else {
+      this.dispose(oldView);
+      oldChildren[idx] = pendView;
+      this.initViewBody(pendView);
+      this.markDirty(pendView);
+      if (pendView.userKey != null) {
+        if (!parent.keyToView)
+          parent.keyToView = new Map;
+        parent.keyToView.set(pendView.userKey, pendView);
+      }
+    }
+  }
+  dispose(view) {
+    const isPrimitiveWithDom = view.flags & F_PRIMITIVE && view.renderRef;
+    if (view.children) {
+      for (const child of view.children) {
+        if (isPrimitiveWithDom) {
+          this.#disposeVirtual(child);
+        } else {
+          this.dispose(child);
+        }
+      }
+    }
+    if (view.unsubscribe)
+      for (const unsub of view.unsubscribe)
+        unsub();
+    if (view.userKey != null)
+      view.parent?.keyToView?.delete(view.userKey);
+    this.renderer.unmount(view);
+    this.#dirtyQueue.delete(view);
+  }
+  #disposeVirtual(view) {
+    if (view.children) {
+      for (const child of view.children)
+        this.#disposeVirtual(child);
+    }
+    if (view.unsubscribe)
+      for (const unsub of view.unsubscribe)
+        unsub();
+    if (view.userKey != null)
+      view.parent?.keyToView?.delete(view.userKey);
+    view.renderRef = undefined;
+    this.#dirtyQueue.delete(view);
+  }
+  render() {
+    if (this.#rendering)
+      return;
+    orchestrator.setCurrentEngine(this);
+    this.#rendering = true;
+    try {
+      const cbs = [];
+      for (const view of this.#dirtyQueue) {
+        this.initViewBody(view);
+        const isNew = !view.renderRef;
+        if (!isNew)
+          view.body?.onUpdateBefore?.();
+        if (view.flags & F_DIRTY) {
+          this.reconcile(view);
+          this.renderer.render(view);
+          view.flags &= ~F_DIRTY;
+          view.flags &= ~F_MOVED;
+          if (isNew && view.body?.onMount) {
+            const b = view.body;
+            cbs.push(() => b.onMount());
+          } else if (!isNew && view.body?.onUpdateAfter) {
+            const b = view.body;
+            cbs.push(() => b.onUpdateAfter());
+          }
+        } else {
+          this.renderer.render(view);
+          view.flags &= ~F_MOVED;
+        }
+      }
+      this.#dirtyQueue.clear();
+      orchestrator.setCurrentEngine(null);
+      this.#rendering = false;
+      for (const cb of cbs)
+        cb();
+    } catch (e) {
+      orchestrator.setCurrentEngine(null);
+      this.#rendering = false;
+      throw e;
+    }
+  }
+}
+
+// src/public/app.ts
+function createApp(slot, renderer, options) {
+  return {
+    mount(props) {
+      const engine = new Engine(renderer, options?.scheduler);
+      engine.createRoot(slot, props ?? {});
+      engine.render();
+      return { engine };
+    }
+  };
+}
+// src/public/view.ts
+function view(body) {
+  return (props, slot) => {
+    orchestrator.currentEngine().view(body, props, slot, maybeGetUserKey(props));
+  };
+}
+function maybeGetUserKey(params) {
+  if (params != null && typeof params === "object" && "key" in params && params.key != null && (typeof params.key === "string" || typeof params.key === "number")) {
+    return params.key;
+  }
+}
+// src/public/primitives/primitives.ts
+function html(tag) {
+  const fn = ({
+    slot
+  }) => ({
+    render() {
+      slot();
+    }
+  });
+  fn[$primitive] = tag;
+  return view(fn);
+}
+var textViewFn = Object.assign(() => ({ render() {} }), { [$primitive]: "text" });
+function text(content) {
+  orchestrator.currentEngine().view(textViewFn, content, null, null);
+}
+var div = html("div");
+var span = html("span");
+var section = html("section");
+var article = html("article");
+var aside = html("aside");
+var nav = html("nav");
+var header = html("header");
+var footer = html("footer");
+var main = html("main");
+var p = html("p");
+var h1 = html("h1");
+var h2 = html("h2");
+var h3 = html("h3");
+var h4 = html("h4");
+var h5 = html("h5");
+var h6 = html("h6");
+var pre = html("pre");
+var code = html("code");
+var em = html("em");
+var strong = html("strong");
+var small = html("small");
+var br = html("br");
+var hr = html("hr");
+var a = html("a");
+var blockquote = html("blockquote");
+var label = html("label");
+var ul = html("ul");
+var ol = html("ol");
+var li = html("li");
+var table = html("table");
+var thead = html("thead");
+var tbody = html("tbody");
+var tfoot = html("tfoot");
+var tr = html("tr");
+var th = html("th");
+var td = html("td");
+var form = html("form");
+var button = html("button");
+var input = html("input");
+var textarea = html("textarea");
+var select = html("select");
+var option = html("option");
+var fieldset = html("fieldset");
+var legend = html("legend");
+var img = html("img");
+var video = html("video");
+var audio = html("audio");
+var canvas = html("canvas");
+var source = html("source");
+var details = html("details");
+var summary = html("summary");
+var dialog = html("dialog");
+var menu = html("menu");
+var iframe = html("iframe");
+var embed = html("embed");
+var object = html("object");
+var picture = html("picture");
+var portal = html("portal");
+var svg = html("svg");
+var script = html("script");
+var noscript = html("noscript");
+var template = html("template");
+var slot = html("slot");
+var address = html("address");
+var hgroup = html("hgroup");
+var search = html("search");
+var abbr = html("abbr");
+var b = html("b");
+var bdi = html("bdi");
+var bdo = html("bdo");
+var cite = html("cite");
+var data = html("data");
+var dfn = html("dfn");
+var i = html("i");
+var kbd = html("kbd");
+var mark = html("mark");
+var q = html("q");
+var rp = html("rp");
+var rt = html("rt");
+var ruby = html("ruby");
+var s = html("s");
+var samp = html("samp");
+var sub = html("sub");
+var sup = html("sup");
+var time = html("time");
+var u = html("u");
+var varEl = html("var");
+var wbr = html("wbr");
+var del = html("del");
+var ins = html("ins");
+var caption = html("caption");
+var colgroup = html("colgroup");
+var col = html("col");
+var datalist = html("datalist");
+var optgroup = html("optgroup");
+var output = html("output");
+var progress = html("progress");
+var meter = html("meter");
+var figure = html("figure");
+var figcaption = html("figcaption");
+var dd = html("dd");
+var dl = html("dl");
+var dt = html("dt");
+var track = html("track");
+var map = html("map");
+var area = html("area");
+// src/render/html_render.ts
+function isEventProp(key) {
+  return key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && key.charCodeAt(2) >= 65 && key.charCodeAt(2) <= 90;
+}
+var DOM_EVENT = {
+  Click: "click",
+  Dblclick: "dblclick",
+  PointerDown: "pointerdown",
+  PointerUp: "pointerup",
+  PointerMove: "pointermove",
+  Input: "input",
+  Change: "change",
+  KeyDown: "keydown",
+  KeyUp: "keyup",
+  Focus: "focus",
+  Blur: "blur"
+};
+var $EV = Symbol.for("creo.ev");
+var containerState = new WeakMap;
+function getState(container) {
+  let state = containerState.get(container);
+  if (!state) {
+    state = {
+      counts: new Map,
+      handler(e) {
+        const domEvent = e.type;
+        let dom = e.target;
+        while (dom && dom !== container) {
+          const evObj = dom[$EV];
+          if (evObj) {
+            const handler = evObj[domEvent];
+            if (handler) {
+              handler(mapEventData(domEvent, e));
+              if (e.cancelBubble)
+                return;
+            }
+          }
+          dom = dom.parentElement;
+        }
+      }
+    };
+    containerState.set(container, state);
+  }
+  return state;
+}
+function ensureDelegated(container, domEvent) {
+  const state = getState(container);
+  const count = state.counts.get(domEvent) ?? 0;
+  if (count === 0) {
+    container.addEventListener(domEvent, state.handler);
+  }
+  state.counts.set(domEvent, count + 1);
+}
+function removeDelegated(container, domEvent) {
+  const state = getState(container);
+  const count = state.counts.get(domEvent) ?? 0;
+  if (count <= 1) {
+    state.counts.delete(domEvent);
+    container.removeEventListener(domEvent, state.handler);
+  } else {
+    state.counts.set(domEvent, count - 1);
+  }
+}
+function mapEventData(domEvent, e) {
+  let data2;
+  if (domEvent === "click" || domEvent === "dblclick" || domEvent === "pointerdown" || domEvent === "pointerup" || domEvent === "pointermove") {
+    const pe = e;
+    data2 = { x: pe.clientX, y: pe.clientY };
+  } else if (domEvent === "input" || domEvent === "change") {
+    data2 = { value: e.target.value };
+  } else if (domEvent === "keydown" || domEvent === "keyup") {
+    const ke = e;
+    data2 = { key: ke.key, code: ke.code };
+  } else {
+    data2 = {};
+  }
+  data2.stopPropagation = () => e.stopPropagation();
+  data2.preventDefault = () => e.preventDefault();
+  return data2;
+}
+var DOM_PROPERTIES = new Set([
+  "value",
+  "checked",
+  "selected",
+  "indeterminate"
+]);
+
+class HtmlRender {
+  container;
+  engine;
+  constructor(container) {
+    this.container = container;
+  }
+  render(view2) {
+    if (!view2.renderRef) {
+      if (view2.flags & F_PRIMITIVE) {
+        const parentNode = this.findParentDom(view2);
+        const refNode = this.findInsertionPoint(view2);
+        const tag = view2.viewFn[$primitive];
+        if (tag === "text") {
+          const textNode = document.createTextNode(String(view2.props));
+          view2.renderRef = { element: textNode, prevProps: null };
+          parentNode.insertBefore(textNode, refNode);
+        } else {
+          const element = document.createElement(tag);
+          const props = view2.props;
+          const domRef = { element, prevProps: null };
+          view2.renderRef = domRef;
+          this.setAttributes(element, props);
+          if (view2.children?.length === 1) {
+            const child = view2.children[0];
+            if (child.flags & F_PRIMITIVE && child.viewFn[$primitive] === "text") {
+              element.textContent = String(child.props);
+              child.renderRef = { element, prevProps: null };
+              child.flags |= F_TEXT_CONTENT;
+            }
+          }
+          parentNode.insertBefore(element, refNode);
+        }
+      } else {
+        view2.renderRef = true;
+      }
+      return;
+    }
+    if (view2.flags & F_MOVED) {
+      const parentNode = this.findParentDom(view2);
+      const refNode = this.findInsertionPoint(view2);
+      if (view2.flags & F_PRIMITIVE) {
+        const ref2 = view2.renderRef;
+        parentNode.insertBefore(ref2.element, refNode);
+      } else {
+        this.moveDomNodes(view2, parentNode, refNode);
+      }
+    }
+    if (!(view2.flags & F_PRIMITIVE))
+      return;
+    const ref = view2.renderRef;
+    if (view2.flags & F_TEXT_CONTENT) {
+      const parentEl = ref.element;
+      const nextText = String(view2.props);
+      if (parentEl.textContent !== nextText) {
+        parentEl.textContent = nextText;
+      }
+      return;
+    }
+    if (ref.element instanceof Text) {
+      const nextText = String(view2.props);
+      if (ref.element.textContent !== nextText) {
+        ref.element.textContent = nextText;
+      }
+      return;
+    }
+    const nextProps = view2.props;
+    if (!ref.prevProps) {
+      this.setAttributes(ref.element, nextProps);
+    } else if (ref.prevProps !== nextProps) {
+      this.diffAttributes(ref.element, ref.prevProps, nextProps);
+    }
+    ref.prevProps = nextProps;
+  }
+  unmount(view2) {
+    if (view2.flags & F_PRIMITIVE) {
+      this.removeDomNodes(view2);
+    }
+    view2.renderRef = undefined;
+  }
+  findParentDom(view2) {
+    let parent = view2.parent;
+    while (parent) {
+      if (parent.flags & F_PRIMITIVE) {
+        const ref = parent.renderRef;
+        if (ref && ref.element instanceof HTMLElement)
+          return ref.element;
+      }
+      parent = parent.parent;
+    }
+    return this.container;
+  }
+  findInsertionPoint(view2) {
+    const parent = view2.parent;
+    if (!parent?.children)
+      return null;
+    const children = parent.children;
+    if (children[children.length - 1] === view2) {
+      return this.#parentEndAnchor(parent);
+    }
+    const idx = children.indexOf(view2);
+    for (let i2 = idx + 1;i2 < children.length; i2++) {
+      const dom = this.getFirstDomNode(children[i2]);
+      if (dom)
+        return dom;
+    }
+    return this.#parentEndAnchor(parent);
+  }
+  #parentEndAnchor(parent) {
+    if (parent.flags & F_PRIMITIVE)
+      return null;
+    return this.findInsertionPoint(parent);
+  }
+  setAttributes(element, props) {
+    for (const key in props) {
+      const value = props[key];
+      if (key === "key" || value == null)
+        continue;
+      if (isEventProp(key)) {
+        this.bindEvent(element, key, value);
+        continue;
+      }
+      this.setAttribute(element, key, value);
+    }
+  }
+  diffAttributes(element, prev, next) {
+    for (const key in prev) {
+      if (key === "key")
+        continue;
+      if (!(key in next) || next[key] == null) {
+        if (isEventProp(key)) {
+          this.unbindEvent(element, key);
+        } else {
+          this.removeAttribute(element, key);
+        }
+      }
+    }
+    for (const key in next) {
+      const value = next[key];
+      if (key === "key" || value == null)
+        continue;
+      if (prev[key] === value)
+        continue;
+      if (isEventProp(key)) {
+        const creoName = key.slice(2);
+        const domEvent = DOM_EVENT[creoName] ?? creoName.toLowerCase();
+        const evObj = element[$EV];
+        if (evObj) {
+          evObj[domEvent] = value;
+        } else {
+          this.bindEvent(element, key, value);
+        }
+      } else {
+        this.setAttribute(element, key, value);
+      }
+    }
+  }
+  bindEvent(element, prop, handler) {
+    const creoName = prop.slice(2);
+    const domEvent = DOM_EVENT[creoName] ?? creoName.toLowerCase();
+    const evObj = element[$EV] ?? (element[$EV] = {});
+    evObj[domEvent] = handler;
+    ensureDelegated(this.container, domEvent);
+  }
+  unbindEvent(element, prop) {
+    const creoName = prop.slice(2);
+    const domEvent = DOM_EVENT[creoName] ?? creoName.toLowerCase();
+    const evObj = element[$EV];
+    if (evObj) {
+      delete evObj[domEvent];
+    }
+    removeDelegated(this.container, domEvent);
+  }
+  setAttribute(element, key, value) {
+    if (key === "class") {
+      element.className = String(value);
+    } else if (key === "style") {
+      element.style.cssText = String(value);
+    } else if (DOM_PROPERTIES.has(key)) {
+      element[key] = value;
+    } else if (typeof value === "boolean") {
+      if (value)
+        element.setAttribute(key, "");
+      else
+        element.removeAttribute(key);
+    } else {
+      element.setAttribute(key, String(value));
+    }
+  }
+  removeAttribute(element, key) {
+    if (key === "class") {
+      element.className = "";
+    } else if (key === "style") {
+      element.style.cssText = "";
+    } else if (DOM_PROPERTIES.has(key)) {
+      element[key] = key === "value" ? "" : false;
+    } else {
+      element.removeAttribute(key);
+    }
+  }
+  getFirstDomNode(view2) {
+    if (!view2.renderRef)
+      return null;
+    if (view2.flags & F_PRIMITIVE)
+      return view2.renderRef.element;
+    if (view2.children) {
+      for (const child of view2.children) {
+        const dom = this.getFirstDomNode(child);
+        if (dom)
+          return dom;
+      }
+    }
+    return null;
+  }
+  moveDomNodes(view2, parentNode, insertBefore) {
+    if (!view2.renderRef)
+      return;
+    if (view2.flags & F_PRIMITIVE) {
+      parentNode.insertBefore(view2.renderRef.element, insertBefore);
+    } else if (view2.children) {
+      for (const child of view2.children) {
+        this.moveDomNodes(child, parentNode, insertBefore);
+      }
+    }
+  }
+  removeDomNodes(view2) {
+    const ref = view2.renderRef;
+    if (!ref || !(view2.flags & F_PRIMITIVE))
+      return;
+    const evObj = ref.element[$EV];
+    if (evObj) {
+      for (const domEvent in evObj) {
+        removeDelegated(this.container, domEvent);
+      }
+      delete ref.element[$EV];
+    }
+    ref.element.parentNode?.removeChild(ref.element);
+  }
+}
+// src/render/json_render.ts
+class JsonRender {
+  root;
+  engine;
+  constructor() {
+    this.root = null;
+  }
+  render(view2) {
+    const existing = view2.renderRef;
+    if (!existing) {
+      const node = this.buildNode(view2);
+      if (!view2.parent) {
+        this.root = node;
+        return;
+      }
+      const parentNode = view2.parent.renderRef;
+      if (parentNode) {
+        const idx = view2.parent.children ? view2.parent.children.indexOf(view2) : -1;
+        if (idx >= 0 && idx < parentNode.children.length) {
+          parentNode.children.splice(idx, 0, node);
+        } else {
+          parentNode.children.push(node);
+        }
+      }
+      return;
+    }
+    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 tag = view2.viewFn[$primitive];
+    existing.props = tag === "text" ? { content: view2.props } : { ...view2.props };
+  }
+  unmount(view2) {
+    const childNode = view2.renderRef;
+    if (!childNode || !view2.parent)
+      return;
+    const parentNode = view2.parent.renderRef;
+    if (parentNode) {
+      const idx = parentNode.children.indexOf(childNode);
+      if (idx !== -1)
+        parentNode.children.splice(idx, 1);
+    }
+  }
+  buildNode(view2) {
+    const tag = view2.viewFn[$primitive];
+    const props = tag === "text" ? { content: view2.props } : { ...view2.props };
+    const node = {
+      type: tag ?? "composite",
+      props,
+      children: []
+    };
+    if (view2.userKey != null)
+      node.key = view2.userKey;
+    view2.renderRef = node;
+    return node;
+  }
+}
+// src/render/string_render.ts
+var VOID_TAGS = new Set([
+  "br",
+  "hr",
+  "img",
+  "input",
+  "source",
+  "track",
+  "embed",
+  "area",
+  "col",
+  "wbr"
+]);
+var DOM_PROPERTIES2 = new Set(["value", "checked", "selected", "indeterminate"]);
+function isEventProp2(key) {
+  return key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && key.charCodeAt(2) >= 65 && key.charCodeAt(2) <= 90;
+}
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeAttr(str) {
+  return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+class HtmlStringRender {
+  root = null;
+  engine;
+  render(view2) {
+    if (!view2.parent) {
+      this.root = view2;
+    }
+  }
+  unmount(_view) {}
+  renderToString() {
+    if (!this.root)
+      return "";
+    return this.buildString(this.root);
+  }
+  buildString(rec) {
+    const tag = rec.viewFn[$primitive];
+    if (tag != null) {
+      if (tag === "text") {
+        return escapeHtml(String(rec.props));
+      }
+      const attrs = this.buildAttrs(rec.props);
+      if (VOID_TAGS.has(tag)) {
+        return `<${tag}${attrs}>`;
+      }
+      return `<${tag}${attrs}>${this.buildChildren(rec)}</${tag}>`;
+    }
+    return this.buildChildren(rec);
+  }
+  buildAttrs(props) {
+    let result = "";
+    for (const key in props) {
+      const value = props[key];
+      if (key === "key" || value == null)
+        continue;
+      if (isEventProp2(key))
+        continue;
+      if (DOM_PROPERTIES2.has(key))
+        continue;
+      if (key === "style") {
+        let css = String(value);
+        css = css.trim();
+        if (css && !css.endsWith(";"))
+          css += ";";
+        result += ` style="${escapeAttr(css)}"`;
+        continue;
+      }
+      if (typeof value === "boolean") {
+        if (value)
+          result += ` ${key}=""`;
+      } else {
+        const attrName = key === "class" ? "class" : key;
+        result += ` ${attrName}="${escapeAttr(String(value))}"`;
+      }
+    }
+    return result;
+  }
+  buildChildren(rec) {
+    if (!rec.children)
+      return "";
+    let result = "";
+    for (const child of rec.children) {
+      result += this.buildString(child);
+    }
+    return result;
+  }
+}
+var StringRender = HtmlStringRender;
+// src/functional/maybe.ts
+function just(maybe, errorMessage) {
+  if (maybe == null) {
+    throw new TypeError(errorMessage ?? "Expected Just, received None as Maybe");
+  }
+}
+function withDefault(v, alternative) {
+  if (v != null) {
+    return v;
+  }
+  return alternative;
+}
+var _ = undefined;
+// src/functional/assert.ts
+function assertNever(x) {
+  throw new Error(`Unhandled case: ${x}`);
+}
+export {
+  withDefault,
+  wbr,
+  view,
+  video,
+  varEl,
+  ul,
+  u,
+  track,
+  tr,
+  time,
+  thead,
+  th,
+  tfoot,
+  textarea,
+  text,
+  template,
+  td,
+  tbody,
+  table,
+  svg,
+  sup,
+  summary,
+  sub,
+  strong,
+  store,
+  span,
+  source,
+  small,
+  slot,
+  shallowEqual,
+  select,
+  section,
+  search,
+  script,
+  samp,
+  s,
+  ruby,
+  rt,
+  rp,
+  q,
+  progress,
+  pre,
+  portal,
+  picture,
+  p,
+  output,
+  option,
+  optgroup,
+  ol,
+  object,
+  noscript,
+  nav,
+  meter,
+  menu,
+  mark,
+  map,
+  main,
+  li,
+  legend,
+  label,
+  kbd,
+  just,
+  isStore,
+  ins,
+  input,
+  img,
+  iframe,
+  i,
+  html,
+  hr,
+  hgroup,
+  header,
+  h6,
+  h5,
+  h4,
+  h3,
+  h2,
+  h1,
+  form,
+  footer,
+  figure,
+  figcaption,
+  fieldset,
+  embed,
+  em,
+  dt,
+  dl,
+  div,
+  dialog,
+  dfn,
+  details,
+  del,
+  dd,
+  datalist,
+  data,
+  createApp,
+  colgroup,
+  col,
+  code,
+  cite,
+  caption,
+  canvas,
+  button,
+  br,
+  blockquote,
+  bdo,
+  bdi,
+  b,
+  audio,
+  assertNever,
+  aside,
+  article,
+  area,
+  address,
+  abbr,
+  a,
+  _,
+  StringRender,
+  Store,
+  State,
+  JsonRender,
+  HtmlStringRender,
+  HtmlRender,
+  Engine,
+  $primitive
+};
+
+//# debugId=3138F663141CF77564756E2164756E21