creo 0.0.3-dev → 0.1.0

package/dist/index.js

@@ -0,0 +1,1373 @@
+// src/structures/list.ts
+var $next = Symbol("next");
+var $prev = Symbol("prev");
+var $owner = Symbol("owner");
+
+class ListNode {
+  [$owner];
+  [$next];
+  [$prev];
+  v;
+  constructor(node, prev = null, next = null, list) {
+    this[$prev] = prev;
+    this[$next] = next;
+    this[$owner] = list;
+    this.v = node;
+  }
+  isFirst() {
+    return this[$prev] == null;
+  }
+  isLast() {
+    return this[$next] == null;
+  }
+  delete() {
+    this[$owner]?.delete(this);
+  }
+  clearFields() {
+    this[$next] = null;
+    this[$prev] = null;
+    this[$owner] = null;
+  }
+  insertNext(value) {
+    const owner = this[$owner];
+    if (!owner) {
+      throw new Error("The item is detached from DataContainer");
+    }
+    return owner.insertNext(this, value);
+  }
+  insertPrev(value) {
+    const owner = this[$owner];
+    if (!owner) {
+      throw new Error("The item is detached from DataContainer");
+    }
+    return owner.insertPrev(this, value);
+  }
+  getNext() {
+    return this[$next];
+  }
+  getPrev() {
+    return this[$prev];
+  }
+  getList() {
+    return this[$owner];
+  }
+}
+
+class InternalList {
+  #head;
+  #tail;
+  #size = 0;
+  #cursorNode;
+  #cursorIndex = -1;
+  #invalidateCursor() {
+    this.#cursorNode = null;
+    this.#cursorIndex = -1;
+  }
+  insertStart(value) {
+    const node = new ListNode(value, null, this.#head, this);
+    if (this.#head != null) {
+      this.#head[$prev] = node;
+    } else {
+      this.#tail = node;
+    }
+    this.#head = node;
+    this.#size++;
+    this.#invalidateCursor();
+    return this.#head;
+  }
+  delete(node) {
+    const n = node;
+    const prev = n[$prev];
+    const next = n[$next];
+    if (next) {
+      next[$prev] = prev;
+    }
+    if (prev) {
+      prev[$next] = next;
+    }
+    if (node === this.#head) {
+      this.#head = next;
+    }
+    if (node === this.#tail) {
+      this.#tail = prev;
+    }
+    n.clearFields();
+    this.#size--;
+    this.#invalidateCursor();
+  }
+  at(n) {
+    if (n < 0)
+      n = this.#size + n;
+    if (n < 0 || n >= this.#size)
+      return;
+    let current;
+    let pos;
+    const distFromHead = n;
+    const distFromTail = this.#size - 1 - n;
+    const distFromCursor = this.#cursorNode != null ? Math.abs(n - this.#cursorIndex) : Infinity;
+    if (distFromCursor <= distFromHead && distFromCursor <= distFromTail) {
+      current = this.#cursorNode;
+      pos = this.#cursorIndex;
+    } else if (distFromHead <= distFromTail) {
+      current = this.#head;
+      pos = 0;
+    } else {
+      current = this.#tail;
+      pos = this.#size - 1;
+    }
+    while (pos < n && current != null) {
+      current = current[$next];
+      pos++;
+    }
+    while (pos > n && current != null) {
+      current = current[$prev];
+      pos--;
+    }
+    if (current != null) {
+      this.#cursorNode = current;
+      this.#cursorIndex = pos;
+    }
+    return current;
+  }
+  get size() {
+    return this.#size;
+  }
+  clear() {
+    this.#head = null;
+    this.#tail = null;
+    this.#size = 0;
+    this.#invalidateCursor();
+  }
+  first() {
+    return this.#head;
+  }
+  last() {
+    return this.#tail;
+  }
+  insertEnd(value) {
+    const node = new ListNode(value, this.#tail, null, this);
+    if (this.#tail != null) {
+      this.#tail[$next] = node;
+    } else {
+      this.#head = node;
+    }
+    this.#tail = node;
+    this.#size++;
+    return this.#tail;
+  }
+  insertNext(ref, value) {
+    const r = ref;
+    if (r[$owner] != this) {
+      throw new TypeError("The reference node does not belong to the current list");
+    }
+    const node = new ListNode(value, r, r[$next], this);
+    if (r[$next]) {
+      r[$next][$prev] = node;
+    } else {
+      this.#tail = node;
+    }
+    r[$next] = node;
+    this.#size++;
+    this.#invalidateCursor();
+    return node;
+  }
+  insertPrev(ref, value) {
+    const r = ref;
+    if (r[$owner] != this) {
+      throw new TypeError("The reference node does not belong to the current list");
+    }
+    const node = new ListNode(value, r[$prev], r, this);
+    if (r[$prev]) {
+      r[$prev][$next] = node;
+    } else {
+      this.#head = node;
+    }
+    r[$prev] = node;
+    this.#size++;
+    this.#invalidateCursor();
+    return node;
+  }
+  *[Symbol.iterator]() {
+    let current = this.#head;
+    while (current) {
+      const next = current[$next];
+      yield current;
+      current = next;
+    }
+  }
+}
+
+// src/structures/indexed_list.ts
+class IndexedList {
+  #list = new InternalList;
+  #map = new Map;
+  push(item) {
+    const existing = this.#map.get(item);
+    if (existing)
+      return existing;
+    const node = this.#list.insertEnd(item);
+    this.#map.set(item, node);
+    return node;
+  }
+  unshift(item) {
+    if (this.#map.has(item))
+      return;
+    const node = this.#list.insertStart(item);
+    this.#map.set(item, node);
+  }
+  insertAfter(ref, item) {
+    if (this.#map.has(item))
+      return;
+    const refNode = this.#map.get(ref);
+    if (!refNode) {
+      this.push(item);
+      return;
+    }
+    const node = refNode.insertNext(item);
+    this.#map.set(item, node);
+  }
+  delete(item) {
+    const node = this.#map.get(item);
+    if (!node)
+      return;
+    this.#map.delete(item);
+    node.delete();
+  }
+  has(item) {
+    return this.#map.has(item);
+  }
+  get length() {
+    return this.#map.size;
+  }
+  first() {
+    return this.#list.first()?.v;
+  }
+  last() {
+    return this.#list.last()?.v;
+  }
+  getNode(item) {
+    return this.#map.get(item);
+  }
+  at(index) {
+    return this.#list.at(index)?.v;
+  }
+  upsert(pos, item) {
+    const existing = this.#list.at(pos);
+    if (!existing) {
+      return this.push(item);
+    }
+    this.#map.delete(existing.v);
+    existing.v = item;
+    this.#map.set(item, existing);
+    return existing;
+  }
+  swap(a, b) {
+    const nodeA = this.#map.get(a);
+    const nodeB = this.#map.get(b);
+    if (!nodeA || !nodeB)
+      return;
+    nodeA.v = b;
+    nodeB.v = a;
+    this.#map.set(a, nodeB);
+    this.#map.set(b, nodeA);
+  }
+  clear() {
+    this.#list.clear();
+    this.#map.clear();
+  }
+  *[Symbol.iterator]() {
+    for (const node of this.#list) {
+      yield node.v;
+    }
+  }
+}
+
+// src/internal/engine.ts
+class Engine {
+  renderer;
+  dirty = new IndexedList;
+  #scheduler;
+  #renderScheduled = false;
+  #collector;
+  constructor(renderer, scheduler) {
+    this.renderer = renderer;
+    this.#scheduler = scheduler ?? "scheduler" in globalThis ? (cb) => window.scheduler.postTask(cb) : (cb) => queueMicrotask(cb);
+  }
+  disposeView(view) {
+    this.dirty.delete(view);
+  }
+  schedule() {
+    if (this.#renderScheduled) {
+      return;
+    }
+    this.#renderScheduled = true;
+    this.#scheduler(() => {
+      this.#renderScheduled = false;
+      this.render();
+    });
+  }
+  markDirty(view) {
+    this.dirty.push(view);
+    this.schedule();
+  }
+  pendingView(view) {
+    this.#collector?.(view);
+  }
+  collect(slot) {
+    const list = [];
+    const prev = this.#collector;
+    this.#collector = list.push.bind(list);
+    slot();
+    this.#collector = prev;
+    return list;
+  }
+  #rendering = false;
+  render() {
+    if (this.#rendering)
+      return;
+    this.#rendering = true;
+    try {
+      const cbs = [];
+      while (this.dirty.length > 0) {
+        const view = this.dirty.first();
+        const isNew = view.renderRef == null;
+        if (!isNew)
+          view.onUpdateBefore();
+        this.renderer.render(view);
+        if (view.dirty) {
+          view.reconsile();
+          cbs.push(isNew ? view.onMount : view.onUpdateAfter);
+          view.dirty = false;
+        }
+        this.dirty.delete(view);
+      }
+      for (const cb of cbs) {
+        cb();
+      }
+    } finally {
+      this.#rendering = false;
+    }
+  }
+}
+
+// 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;
+  }
+  const keysA = Object.keys(a);
+  if (keysA.length !== Object.keys(b).length)
+    return false;
+  for (let i = 0;i < keysA.length; i++) {
+    const key = keysA[i];
+    if (!Object.is(a[key], b[key])) {
+      return false;
+    }
+  }
+  return true;
+}
+
+// src/internal/internal_view.ts
+class View {
+  viewFn;
+  engine;
+  parent;
+  userKey;
+  renderRef;
+  props;
+  slotChildren;
+  body;
+  virtualDom;
+  keyToIndex;
+  dirty = true;
+  moved = false;
+  quickRerender = true;
+  #unsubscribe = [];
+  constructor(viewFn, initialProps, slot, engine, parent, userKey) {
+    this.viewFn = viewFn;
+    this.engine = engine;
+    this.parent = parent;
+    this.userKey = userKey;
+    this.props = initialProps;
+    this.body = viewFn({
+      props: () => this.props,
+      use: (storeOrInitial) => {
+        if (!isStore(storeOrInitial)) {
+          return new State(storeOrInitial, this.markDirty);
+        }
+        const s = storeOrInitial;
+        this.#unsubscribe.push(this.markDirty);
+        return s;
+      },
+      slot: () => {
+        if (!this.slotChildren) {
+          return;
+        }
+        for (const child of this.slotChildren) {
+          this.engine.pendingView(child);
+        }
+      }
+    });
+    this.slotChildren = slot && this.engine.collect(slot);
+    this.markDirty();
+  }
+  markDirty = () => {
+    this.dirty = true;
+    this.engine.markDirty(this);
+  };
+  markMove() {
+    this.moved = true;
+    this.engine.markDirty(this);
+  }
+  shouldUpdate(nextProps) {
+    if (this.body.shouldUpdate) {
+      return this.body.shouldUpdate(nextProps);
+    }
+    return !shallowEqual(this.props, nextProps);
+  }
+  onMount = () => {
+    this.quickRerender = false;
+    this.body.onMount?.();
+  };
+  onUpdateBefore() {
+    this.body.onUpdateBefore?.();
+  }
+  onUpdateAfter = () => {
+    this.quickRerender = false;
+    this.body.onUpdateBefore?.();
+  };
+  nextProps(nextProps, nextSlot) {
+    const prevChildren = this.slotChildren;
+    this.slotChildren = nextSlot && this.engine.collect(nextSlot);
+    if (this.shouldUpdate(nextProps) || hasNewChildren(prevChildren, this.slotChildren)) {
+      this.markDirty();
+      this.props = nextProps;
+    }
+  }
+  reconsile() {
+    const children = this.engine.collect(this.body.render);
+    if (!this.virtualDom && children.length === 0)
+      return;
+    if (!this.virtualDom)
+      this.virtualDom = new IndexedList;
+    this.quickRerender = true;
+    const vdom = this.virtualDom;
+    for (let i = 0;i < children.length; i++) {
+      const pending = children[i];
+      const expectedNext = vdom.at(i);
+      if (pending.userKey == null) {
+        if (expectedNext?.viewFn === pending.viewFn) {
+          this.quickRerender = false;
+          expectedNext.nextProps(pending.props, pending.slot);
+        } else {
+          if (expectedNext) {
+            if (expectedNext.userKey)
+              this.keyToIndex?.delete(expectedNext.userKey);
+            expectedNext[Symbol.dispose]();
+          }
+          vdom.upsert(i, new View(pending.viewFn, pending.props, pending.slot, this.engine, this, null));
+        }
+      } else {
+        const matchedIndex = this.keyToIndex?.get(pending.userKey);
+        const matched = matchedIndex != null ? vdom.at(matchedIndex) : null;
+        if (matched && matched.viewFn === pending.viewFn) {
+          this.quickRerender = false;
+          matched.nextProps(pending.props, pending.slot);
+          if (expectedNext != null) {
+            if (matched !== expectedNext) {
+              matched.markMove();
+              expectedNext.markMove();
+              vdom.swap(matched, expectedNext);
+              if (this.keyToIndex) {
+                if (matched.userKey != null)
+                  this.keyToIndex.set(matched.userKey, i);
+                if (expectedNext.userKey != null)
+                  this.keyToIndex.set(expectedNext.userKey, matchedIndex);
+              }
+            }
+          } else {
+            matched.markMove();
+            vdom.upsert(i, matched);
+            if (this.keyToIndex && matched.userKey != null) {
+              this.keyToIndex.set(matched.userKey, i);
+            }
+          }
+        } else {
+          if (expectedNext) {
+            if (expectedNext.userKey)
+              this.keyToIndex?.delete(expectedNext.userKey);
+            expectedNext[Symbol.dispose]();
+          }
+          vdom.upsert(i, new View(pending.viewFn, pending.props, pending.slot, this.engine, this, pending.userKey));
+          if (!this.keyToIndex)
+            this.keyToIndex = new Map;
+          this.keyToIndex.set(pending.userKey, i);
+        }
+      }
+    }
+    if (children.length < vdom.length) {
+      for (let i = vdom.length;i >= children.length; i--) {
+        const removed = vdom.at(i);
+        if (removed) {
+          if (removed.userKey)
+            this.keyToIndex?.delete(removed.userKey);
+          removed[Symbol.dispose]();
+          vdom.delete(removed);
+        }
+      }
+    }
+  }
+  [Symbol.dispose]() {
+    if (this.virtualDom) {
+      for (const child of this.virtualDom) {
+        child[Symbol.dispose]();
+      }
+    }
+    this.engine.renderer.unmount(this);
+    this.engine.disposeView(this);
+  }
+}
+function hasNewChildren(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;
+    if (next[i].props !== prev[i].props)
+      return true;
+  }
+  return false;
+}
+
+// src/internal/orchestrator.ts
+class Orchestrator {
+  #currentEngine;
+  setCurrentEngine(engine) {
+    this.#currentEngine = engine;
+  }
+  currentEngine() {
+    return this.#currentEngine;
+  }
+}
+var orchestrator = new Orchestrator;
+
+// src/public/app.ts
+function createApp(slot, renderer, options) {
+  return {
+    mount(props) {
+      const engine = new Engine(renderer, options?.scheduler);
+      orchestrator.setCurrentEngine(engine);
+      new View(() => ({ render() {
+        slot();
+      } }), props ?? {}, null, engine, null, null);
+      engine.render();
+      return { engine };
+    }
+  };
+}
+// src/public/view.ts
+function view(body) {
+  return (props, slot) => {
+    orchestrator.currentEngine().pendingView({
+      viewFn: body,
+      props,
+      slot,
+      userKey: 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/primitive.ts
+var $primitive = Symbol("primitive");
+// src/public/primitives/primitives.ts
+function html(tag) {
+  const fn = ({
+    slot
+  }) => ({
+    render() {
+      slot();
+    }
+  });
+  fn[$primitive] = tag;
+  return view(fn);
+}
+var text = html("text");
+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
+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 SKIP_PROPS = new Set(["key"]);
+var DOM_PROPERTIES = new Set([
+  "value",
+  "checked",
+  "selected",
+  "indeterminate"
+]);
+
+class HtmlRender {
+  container;
+  constructor(container) {
+    this.container = container;
+  }
+  render(view2) {
+    const ref = view2.renderRef;
+    if (!ref) {
+      const node = this.buildDom(view2);
+      const parent = view2.parent;
+      if (!parent) {
+        this.container.appendChild(node);
+      } else {
+        const parentNode = this.getParentDomNode(parent);
+        if (parentNode) {
+          parentNode.insertBefore(node, this.fastInsertionPoint(parent, view2));
+        }
+      }
+      const newRef = view2.renderRef;
+      if (newRef?.kind === "primitive" && newRef.element instanceof HTMLElement && view2.props?.autofocus) {
+        newRef.element.focus();
+      }
+      return;
+    }
+    if (view2.moved) {
+      view2.moved = false;
+      if (view2.parent) {
+        const expectedStart = this.fastInsertionPoint(view2.parent, view2);
+        const firstDom = this.getFirstDomNode(view2);
+        if (firstDom && firstDom !== expectedStart) {
+          const parentNode = this.getParentDomNode(view2.parent);
+          if (parentNode) {
+            if (ref.kind === "primitive") {
+              parentNode.insertBefore(ref.element, expectedStart);
+            } else {
+              if (view2.virtualDom) {
+                for (const child of view2.virtualDom) {
+                  this.moveDomNodes(child, parentNode, expectedStart);
+                }
+              }
+              parentNode.insertBefore(ref.endComment, expectedStart);
+            }
+          }
+        }
+      }
+    }
+    if (ref.kind !== "primitive")
+      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, ref.element, nextProps);
+    } else {
+      this.diffAttributes(ref, ref.element, ref.prevProps, nextProps);
+    }
+    ref.prevProps = { ...nextProps };
+  }
+  unmount(view2) {
+    this.removeDomNodes(view2);
+    view2.renderRef = undefined;
+  }
+  buildDom(view2) {
+    const tag = view2.viewFn[$primitive];
+    if (tag != null) {
+      if (tag === "text") {
+        const textNode = document.createTextNode(String(view2.props));
+        const ref2 = {
+          kind: "primitive",
+          element: textNode,
+          prevProps: null,
+          listeners: null
+        };
+        view2.renderRef = ref2;
+        return textNode;
+      }
+      const element = document.createElement(tag);
+      const props = view2.props;
+      const ref = {
+        kind: "primitive",
+        element,
+        prevProps: null,
+        listeners: null
+      };
+      view2.renderRef = ref;
+      this.setAttributes(ref, element, props);
+      return element;
+    }
+    const endComment = document.createComment("");
+    view2.renderRef = {
+      kind: "composite",
+      endComment
+    };
+    return endComment;
+  }
+  isEventProp(key, value) {
+    return key.length > 2 && key[0] === "o" && key[1] === "n" && key[2] >= "A" && key[2] <= "Z" && typeof value === "function";
+  }
+  eventPropToCreoName(prop) {
+    return prop[2].toLowerCase() + prop.slice(3);
+  }
+  setAttributes(ref, element, props) {
+    for (const key in props) {
+      const value = props[key];
+      if (SKIP_PROPS.has(key) || value == null)
+        continue;
+      if (this.isEventProp(key, value)) {
+        this.bindEvent(ref, element, key, value);
+        continue;
+      }
+      this.setAttribute(element, key, value);
+    }
+  }
+  diffAttributes(ref, element, prev, next) {
+    for (const key of Object.keys(prev)) {
+      if (SKIP_PROPS.has(key))
+        continue;
+      if (!(key in next) || next[key] == null) {
+        if (this.isEventProp(key, prev[key])) {
+          this.unbindEvent(ref, element, key);
+        } else {
+          this.removeAttribute(element, key);
+        }
+      }
+    }
+    for (const key in next) {
+      const value = next[key];
+      if (SKIP_PROPS.has(key) || value == null)
+        continue;
+      if (prev[key] === value)
+        continue;
+      if (this.isEventProp(key, value)) {
+        this.unbindEvent(ref, element, key);
+        this.bindEvent(ref, element, key, value);
+      } else {
+        this.setAttribute(element, key, value);
+      }
+    }
+  }
+  bindEvent(ref, element, prop, handler) {
+    const creoEvent = this.eventPropToCreoName(prop);
+    const domEvent = DOM_EVENT[creoEvent] ?? creoEvent.toLowerCase();
+    const wrapped = (e) => {
+      const data2 = this.mapEventData(creoEvent, e);
+      data2.stopPropagation = () => e.stopPropagation();
+      data2.preventDefault = () => e.preventDefault();
+      handler(data2);
+    };
+    if (!ref.listeners)
+      ref.listeners = new Map;
+    ref.listeners.set(prop, wrapped);
+    element.addEventListener(domEvent, wrapped);
+  }
+  unbindEvent(ref, element, prop) {
+    const wrapped = ref.listeners?.get(prop);
+    if (!wrapped)
+      return;
+    const creoEvent = this.eventPropToCreoName(prop);
+    const domEvent = DOM_EVENT[creoEvent] ?? creoEvent.toLowerCase();
+    element.removeEventListener(domEvent, wrapped);
+    ref.listeners.delete(prop);
+  }
+  mapEventData(creoEvent, e) {
+    if (creoEvent === "click" || creoEvent === "dblclick" || creoEvent.startsWith("pointer")) {
+      const pe = e;
+      return { x: pe.clientX, y: pe.clientY };
+    }
+    if (creoEvent === "input" || creoEvent === "change") {
+      return { value: e.target.value };
+    }
+    if (creoEvent.startsWith("key")) {
+      const ke = e;
+      return { key: ke.key, code: ke.code };
+    }
+    return {};
+  }
+  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);
+    }
+  }
+  fastInsertionPoint(parent, view2) {
+    const vdom = parent.virtualDom;
+    if (vdom && vdom.length > 0) {
+      const node = vdom.getNode(view2);
+      if (node) {
+        if (node.isLast() || parent.quickRerender) {
+          const ref2 = parent.renderRef;
+          if (ref2?.kind === "composite") {
+            return ref2.endComment;
+          } else {
+            return null;
+          }
+        }
+        const prev = node.getPrev();
+        if (prev) {
+          const prevRef = prev.v.renderRef;
+          if (prevRef) {
+            return (prevRef.kind === "composite" ? prevRef.endComment : prevRef.element).nextSibling;
+          }
+          let cur = prev.getPrev();
+          while (cur) {
+            const curRef = cur.v.renderRef;
+            if (curRef) {
+              return (curRef.kind === "composite" ? curRef.endComment : curRef.element).nextSibling;
+            }
+            cur = cur.getPrev();
+          }
+        }
+      }
+    }
+    const ref = parent.renderRef;
+    if (!ref)
+      return null;
+    return ref.kind === "composite" ? ref.endComment : ref.element.firstChild;
+  }
+  getParentDomNode(parent) {
+    const ref = parent.renderRef;
+    if (!ref)
+      return null;
+    if (ref.kind === "primitive") {
+      return ref.element;
+    }
+    return ref.endComment.parentNode;
+  }
+  moveDomNodes(view2, parentNode, insertBefore) {
+    const ref = view2.renderRef;
+    if (!ref)
+      return;
+    if (ref.kind === "primitive") {
+      parentNode.insertBefore(ref.element, insertBefore);
+    } else {
+      if (view2.virtualDom) {
+        for (const child of view2.virtualDom) {
+          this.moveDomNodes(child, parentNode, insertBefore);
+        }
+      }
+      parentNode.insertBefore(ref.endComment, insertBefore);
+    }
+  }
+  getFirstDomNode(view2) {
+    const ref = view2.renderRef;
+    if (!ref)
+      return null;
+    if (ref.kind === "primitive")
+      return ref.element;
+    if (view2.virtualDom) {
+      for (const child of view2.virtualDom) {
+        const node = this.getFirstDomNode(child);
+        if (node)
+          return node;
+      }
+    }
+    return ref.endComment;
+  }
+  removeDomNodes(view2) {
+    const ref = view2.renderRef;
+    if (!ref)
+      return;
+    if (ref.kind === "primitive") {
+      ref.element.parentNode?.removeChild(ref.element);
+      return;
+    }
+    ref.endComment.parentNode?.removeChild(ref.endComment);
+  }
+}
+// src/render/json_render.ts
+class JsonRender {
+  root;
+  render(view2) {
+    const existing = view2.renderRef;
+    if (!existing) {
+      const node = this.buildNode(view2);
+      if (!view2.parent) {
+        this.root = node;
+        return;
+      }
+      const parentNode2 = view2.parent.renderRef;
+      if (parentNode2) {
+        parentNode2.children.push(node);
+      }
+      return;
+    }
+    const parentNode = view2.parent?.renderRef;
+    if (parentNode) {
+      const oldIdx = parentNode.children.indexOf(existing);
+      if (oldIdx !== -1) {
+        const nextSibling = this.getNextSibling(view2);
+        const nextNode = nextSibling?.renderRef;
+        const expectedIdx = nextNode ? parentNode.children.indexOf(nextNode) : parentNode.children.length;
+        if (oldIdx !== expectedIdx && oldIdx !== expectedIdx - 1) {
+          parentNode.children.splice(oldIdx, 1);
+          const insertIdx = nextNode ? parentNode.children.indexOf(nextNode) : parentNode.children.length;
+          parentNode.children.splice(insertIdx, 0, existing);
+        }
+      }
+    }
+    const tag = view2.viewFn[$primitive];
+    existing.props = tag === "text" ? { content: view2.props } : { ...view2.props };
+  }
+  unmount(view2) {
+    const childNode = view2.renderRef;
+    const parentNode = view2.parent?.renderRef;
+    if (parentNode && childNode) {
+      const idx = parentNode.children.indexOf(childNode);
+      if (idx !== -1)
+        parentNode.children.splice(idx, 1);
+    }
+  }
+  getNextSibling(view2) {
+    return view2.parent?.virtualDom?.getNode(view2)?.getNext()?.v;
+  }
+  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"
+]);
+
+class StringRender {
+  rootView;
+  render(view2) {
+    if (!view2.parent) {
+      this.rootView = view2;
+    }
+  }
+  unmount(_view) {}
+  renderToString() {
+    if (!this.rootView)
+      return "";
+    return this.buildString(this.rootView);
+  }
+  buildString(view2) {
+    const tag = view2.viewFn[$primitive];
+    if (tag != null) {
+      if (tag === "text") {
+        return `${view2.props}`;
+      }
+      if (VOID_TAGS.has(tag)) {
+        return this.buildVoidTag(tag, view2);
+      }
+      return `<${tag}>${this.buildChildren(view2)}</${tag}>`;
+    }
+    return this.buildChildren(view2);
+  }
+  buildVoidTag(tag, view2) {
+    const props = view2.props;
+    let attrs = "";
+    if (props.src)
+      attrs += ` src="${props.src}"`;
+    if (props.alt)
+      attrs += ` alt="${props.alt}"`;
+    return `<${tag}${attrs} />`;
+  }
+  buildChildren(view2) {
+    let result = "";
+    if (view2.virtualDom) {
+      for (const child of view2.virtualDom) {
+        result += this.buildString(child);
+      }
+    }
+    return result;
+  }
+}
+// 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,
+  HtmlRender,
+  Engine,
+  $primitive
+};
+
+//# debugId=3A0F56854FC011F464756E2164756E21