lunet 0.0.8 → 0.0.10

package/build.ts

@@ -0,0 +1,82 @@
+import { build, file, write } from "bun";
+import { parse } from "@babel/parser";
+import { generate } from "@babel/generator";
+import { generateDts } from "typeroll";
+
+const render1_res = await build({
+    entrypoints: [`${import.meta.dir}/src/render/index.ts`],
+    throw: true,
+});
+
+const render1_code = await render1_res.outputs[0]!.text();
+
+const ast = parse(render1_code, {
+    sourceType: "module",
+});
+
+const export_statement = ast.program.body.at(-1);
+if (!export_statement || export_statement.type !== "ExportNamedDeclaration") {
+    throw new Error("Not found export statement on last");
+}
+
+const nameset = new Set<string>();
+
+for (const spec of export_statement.specifiers) {
+    if (
+        spec.type !== "ExportSpecifier" ||
+        spec.exported.type !== "Identifier" ||
+        spec.exported.name !== spec.local.name
+    ) {
+        throw new Error("AST assertion failed");
+    }
+    nameset.add(spec.local.name);
+}
+
+if (
+    !nameset.has("createFragment") ||
+    !nameset.has("updateFragment") ||
+    !nameset.has("revokeFragment")
+) {
+    throw new Error("AST assertion failed");
+}
+
+ast.program.body.pop();
+
+const render2_code = generate(ast).code;
+
+const entrypoint = `${import.meta.dir}/src/index.ts`;
+const entry_src = await file(entrypoint).text();
+
+const cfg = {
+    entrypoints: [entrypoint],
+    //@ts-ignore
+    files: {
+        [entrypoint]: entry_src.replace("//@INJECT", render2_code),
+    },
+    outdir: `${import.meta.dir}/dist/`
+} as {
+    entrypoints: [string],
+    outdir: string,
+};
+
+await build({
+    ...cfg,
+    format: "esm",
+    naming: "index.js",
+});
+
+await build({
+    ...cfg,
+    format: "cjs",
+    naming: "index.cjs",
+});
+
+const dts_result = await generateDts([
+    entrypoint,
+]);
+
+if (dts_result.errors.length) {
+    throw dts_result.errors;
+}
+
+await write(`${import.meta.dir}/dist/index.d.ts`, dts_result.files[0]!.dts);

package/dist/index.cjs

@@ -29,293 +29,310 @@ var __export = (target, all) => {
 // src/index.ts
 var exports_src = {};
 __export(exports_src, {
-  setBatch: () => setBatch,
-  render: () => render,
   h: () => h,
   fragment: () => fragment,
+  createRoot: () => createRoot,
   createComponent: () => createComponent
 });
 module.exports = __toCommonJS(exports_src);
 
 // src/jsx/component.ts
-var createComponent = (component) => (props) => [component, props];
+var createComponent = (component) => (props) => [component, props, []];
 // src/jsx/fragment.ts
-var fragment = (...children) => [null, {}, ...children];
+var fragment = (...children) => [null, {}, children];
 // src/jsx/likereact.ts
-var h = (type, props, ...children) => typeof type === "string" ? [type, props ?? {}, ...children] : type === fragment ? [null, props ?? {}, ...children] : type(props);
-// src/mount/dom/text.ts
-var createText = (jsx) => {
-  const node = new Text(jsx);
-  return [[0, jsx, node], node];
-};
-var updateText = (dom, jsx) => {
-  if (dom[1] !== jsx)
-    dom[2].textContent = dom[1] = jsx;
-};
-var revokeText = (dom) => dom[2].remove();
-var afterText = (dom, node) => {
-  dom[2].parentNode?.insertBefore(node, dom[2].nextSibling);
-};
-
-// src/mount/diff.ts
-var isCompatibleNode = (before, after) => typeof before === "string" || typeof after === "string" ? typeof before === typeof after : before[0] === after[0] && before[1].key === after[1].key;
-var diff = (before_nodes, after_nodes) => {
-  const patches = [];
-  const max = Math.max(before_nodes.length, after_nodes.length);
-  let index = 0;
-  for (let i = 0;i < max; i++) {
-    const before = before_nodes[i];
-    const after = after_nodes[i];
-    if (!before && after)
-      patches.push([1, index++, after]);
-    else if (before && !after)
-      patches.push([2, index, before]);
-    else if (before && after)
-      if (isCompatibleNode(before, after))
-        patches.push([0, index++, after]);
-      else {
-        patches.push([2, index, before]);
+var h = (type, props, ...children) => typeof type === "string" ? [type, props ?? {}, children] : type === fragment ? [null, props ?? {}, children] : type(props);
+// src/index.ts
+var createRoot = (el, options) => {
+  var createText = (jsx2) => {
+    const node2 = new Text(jsx2);
+    return [[0, jsx2, node2], node2];
+  };
+  var updateText = (dom2, jsx2) => {
+    if (dom2[1] !== jsx2)
+      dom2[2].textContent = dom2[1] = jsx2;
+  };
+  var revokeText = (dom2) => dom2[2].remove();
+  var afterText = (dom2, node2) => {
+    dom2[2].parentNode?.insertBefore(node2, dom2[2].nextSibling);
+  };
+  var isCompatibleNode = (before, after) => typeof before === "string" || typeof after === "string" ? typeof before === typeof after : before[0] === after[0] && before[1].key === after[1].key;
+  var diff = (before_nodes, after_nodes) => {
+    const patches = [];
+    const max = Math.max(before_nodes.length, after_nodes.length);
+    let index = 0;
+    for (let i = 0;i < max; i++) {
+      const before = before_nodes[i];
+      const after = after_nodes[i];
+      if (!before && after)
         patches.push([1, index++, after]);
-      }
+      else if (before && !after)
+        patches.push([2, index, before]);
+      else if (before && after)
+        if (isCompatibleNode(before, after))
+          patches.push([0, index++, after]);
+        else {
+          patches.push([2, index, before]);
+          patches.push([1, index++, after]);
+        }
+    }
+    return patches;
+  };
+  var lifecycle_events = new Set(["beforeMount", "mount", "beforeUpdate", "update", "beforeUnmount", "unmount"]);
+  var elementEvents = new WeakMap;
+  function handleEvent(ev) {
+    return elementEvents.get(this)?.[ev.type]?.call(this, ev);
   }
-  return patches;
-};
-
-// src/mount/dom/element.ts
-var lifecycle_events = new Set([
-  "beforeMount",
-  "mount",
-  "beforeUpdate",
-  "update",
-  "beforeUnmount",
-  "unmount"
-]);
-var elementEvents = new WeakMap;
-function handleEvent(ev) {
-  return elementEvents.get(this)?.[ev.type]?.call(this, ev);
-}
-var setAttribute = (el, name, value) => {
-  if (name.startsWith("$")) {
-    const ev_name = name.substring(1);
-    if (!lifecycle_events.has(ev_name)) {
-      const events = elementEvents.get(el);
-      if (!(ev_name in events))
-        el.addEventListener(ev_name, handleEvent);
-      if (typeof value === "function" || value == null)
-        events[ev_name] = value;
-      else {
-        console.error("Invalid event handler: ", value);
-        events[ev_name] = undefined;
+  var setAttribute = (el2, name, value) => {
+    if (name.startsWith("$")) {
+      const ev_name = name.substring(1);
+      if (!lifecycle_events.has(ev_name)) {
+        const events = elementEvents.get(el2);
+        if (!(ev_name in events))
+          el2.addEventListener(ev_name, handleEvent);
+        if (typeof value === "function" || value == null)
+          events[ev_name] = value;
+        else {
+          console.error("Invalid event handler: ", value);
+          events[ev_name] = undefined;
+        }
       }
+    } else
+      switch (typeof value) {
+        case "string":
+          el2.setAttribute(name, value);
+          break;
+        case "function":
+        case "object":
+          if (value === null)
+            el2.removeAttribute(name);
+          else
+            console.error(`${typeof value} values cannot mount on attributes.`);
+          break;
+        default:
+          if (value === undefined)
+            el2.removeAttribute(name);
+          else
+            el2.setAttribute(name, String(value));
+          break;
+      }
+  };
+  var createElement = (jsx2) => {
+    const [tag, props, children] = jsx2;
+    props.$beforeMount?.();
+    const element = document.createElement(tag);
+    elementEvents.set(element, {});
+    props.$mount?.call(element, new CustomEvent("mount", {
+      detail: element
+    }));
+    for (const [name, value] of Object.entries(props))
+      setAttribute(element, name, value);
+    const rendered_children = children.map(createNode);
+    element.append(...rendered_children.map((e) => e[1]));
+    return [[1, jsx2, element, rendered_children.map((e) => e[0])], element];
+  };
+  var updateElement = (dom2, jsx2) => {
+    const [, [, old_props, old_children], element, rendered_children] = dom2;
+    const [, new_props, new_children] = jsx2;
+    old_props.$beforeUpdate?.call(element, new CustomEvent("beforeupdate", {
+      detail: element
+    }));
+    const removed_prop_keys = Object.keys(old_props).filter((key) => !(key in new_props));
+    for (const [name, value] of Object.entries({
+      ...new_props,
+      ...Object.fromEntries(removed_prop_keys.map((key) => [key, undefined]))
+    }))
+      if (old_props[name] !== value)
+        setAttribute(element, name, value);
+    for (const [type, idx, jsx22] of diff(old_children, new_children)) {
+      switch (type) {
+        case 0:
+          updateNode(rendered_children[idx], jsx22);
+          break;
+        case 1:
+          const [rendered, node2] = createNode(jsx22);
+          rendered_children.splice(idx, 0, rendered);
+          if (idx === 0) {
+            if (element.firstChild) {
+              element.firstChild.before(node2);
+            } else {
+              element.append(node2);
+            }
+          } else {
+            afterNode(rendered_children[idx - 1], node2);
+          }
+          break;
+        case 2:
+          revokeNode(rendered_children.splice(idx, 1)[0]);
+          break;
+      }
+    }
+    dom2[1] = jsx2;
+    new_props.$update?.call(element, new CustomEvent("update", {
+      detail: element
+    }));
+  };
+  var revokeElement = (dom2) => {
+    const [, [, props], element, rendered_children] = dom2;
+    props.$beforeUnmount?.call(element, new CustomEvent("beforeunmount", {
+      detail: element
+    }));
+    for (const child of rendered_children)
+      revokeNode(child);
+    elementEvents.delete(element);
+    element.remove();
+    props.$unmount?.();
+  };
+  var afterElement = (dom2, node2) => {
+    dom2[2].after(node2);
+  };
+  var batch = options?.batch ?? ((cb) => cb());
+  var createComponent2 = (jsx2) => {
+    const [component, init_props, children] = jsx2;
+    let rendered_dom;
+    let doc_frag;
+    const props = component((jsx22) => {
+      if (rendered_dom)
+        updateFragment(rendered_dom, [null, {}, [jsx22]]);
+      else
+        [rendered_dom, doc_frag] = createFragment([null, {}, [jsx22]]);
+    }, {
+      ...init_props
+    });
+    if (!doc_frag) {
+      console.error("never rendered Initial render.");
+      [rendered_dom, doc_frag] = createFragment([null, {}, []]);
+    }
+    return [[3, [component, props, children], rendered_dom], doc_frag];
+  };
+  var updateComponent = (dom2, jsx2) => {
+    const old_props = dom2[1][1];
+    const new_props = jsx2[1];
+    batch(() => {
+      for (const [key, value] of Object.entries(new_props))
+        if (old_props[key] !== value)
+          old_props[key] = value;
+    });
+  };
+  var revokeComponent = (dom2) => revokeFragment(dom2[2]);
+  var afterComponent = (dom2, node2) => afterFragment(dom2[2], node2);
+  var createNode = (jsx2) => {
+    if (typeof jsx2 === "string")
+      return createText(jsx2);
+    if (Array.isArray(jsx2)) {
+      const [tag] = jsx2;
+      if (typeof tag === "string")
+        return createElement(jsx2);
+      if (typeof tag === "function")
+        return createComponent2(jsx2);
+      if (tag === null)
+        return createFragment(jsx2);
     }
-  } else
-    switch (typeof value) {
-      case "string":
-        el.setAttribute(name, value);
+    throw new Error(`Unrecognized JSX node`, {
+      cause: jsx2
+    });
+  };
+  var updateNode = (dom2, jsx2) => {
+    switch (dom2[0]) {
+      case 0:
+        updateText(dom2, jsx2);
+        break;
+      case 1:
+        updateElement(dom2, jsx2);
         break;
-      case "function":
-      case "object":
-        if (value === null)
-          el.removeAttribute(name);
-        else
-          console.error(`${typeof value} values cannot mount on attributes.`);
+      case 2:
+        updateFragment(dom2, jsx2);
         break;
-      default:
-        if (value === undefined)
-          el.removeAttribute(name);
-        else
-          el.setAttribute(name, String(value));
+      case 3:
+        updateComponent(dom2, jsx2);
         break;
     }
-};
-var createElement = (jsx) => {
-  const [tag, props, ...children] = jsx;
-  props.$beforeMount?.();
-  const element = document.createElement(tag);
-  elementEvents.set(element, {});
-  props.$mount?.call(element, new CustomEvent("mount", { detail: element }));
-  for (const [name, value] of Object.entries(props))
-    setAttribute(element, name, value);
-  const rendered_children = children.map(createNode);
-  element.append(...rendered_children.map((e) => e[1]));
-  return [[1, jsx, element, rendered_children.map((e) => e[0])], element];
-};
-var updateElement = (dom, jsx) => {
-  const [, [, old_props, ...old_children], element, rendered_children] = dom;
-  const [, new_props, ...new_children] = jsx;
-  old_props.$beforeUpdate?.call(element, new CustomEvent("beforeupdate", { detail: element }));
-  const removed_prop_keys = Object.keys(old_props).filter((key) => !(key in new_props));
-  for (const [name, value] of Object.entries({
-    ...new_props,
-    ...Object.fromEntries(removed_prop_keys.map((key) => [key, undefined]))
-  }))
-    if (old_props[name] !== value)
-      setAttribute(element, name, value);
-  for (const [type, idx, jsx2] of diff(old_children, new_children)) {
-    switch (type) {
+  };
+  var revokeNode = (dom2) => {
+    switch (dom2[0]) {
       case 0:
-        updateNode(rendered_children[idx], jsx2);
+        revokeText(dom2);
         break;
       case 1:
-        const [rendered, node] = createNode(jsx2);
-        rendered_children.splice(idx, 0, rendered);
-        if (idx === 0) {
-          if (element.firstChild) {
-            element.firstChild.before(node);
-          } else {
-            element.append(node);
-          }
-        } else {
-          afterNode(rendered_children[idx - 1], node);
-        }
+        revokeElement(dom2);
         break;
       case 2:
-        revokeNode(rendered_children.splice(idx, 1)[0]);
+        revokeFragment(dom2);
+        break;
+      case 3:
+        revokeComponent(dom2);
         break;
     }
-  }
-  dom[1] = jsx;
-  new_props.$update?.call(element, new CustomEvent("update", { detail: element }));
-};
-var revokeElement = (dom) => {
-  const [, [, props], element, rendered_children] = dom;
-  props.$beforeUnmount?.call(element, new CustomEvent("beforeunmount", { detail: element }));
-  for (const child of rendered_children)
-    revokeNode(child);
-  elementEvents.delete(element);
-  element.remove();
-  props.$unmount?.();
-};
-var afterElement = (dom, node) => {
-  dom[2].after(node);
-};
-
-// src/mount/dom/fragment.ts
-var createFragment = (jsx) => {
-  const [, , ...children] = jsx;
-  const mark = new Comment;
-  const el = new DocumentFragment;
-  const rendered_children = children.map(createNode);
-  el.append(mark, ...rendered_children.map((e) => e[1]));
-  return [[2, jsx, mark, rendered_children.map((e) => e[0])], el];
-};
-var updateFragment = (dom, jsx) => {
-  const [, [, , ...old_children], mark, rendered_children] = dom;
-  const [, , ...new_children] = jsx;
-  for (const [type, idx, jsx2] of diff(old_children, new_children)) {
-    switch (type) {
+  };
+  var afterNode = (dom2, node2) => {
+    switch (dom2[0]) {
       case 0:
-        updateNode(rendered_children[idx], jsx2);
+        afterText(dom2, node2);
         break;
       case 1:
-        const [rendered, el] = createNode(jsx2);
-        rendered_children.splice(idx, 0, rendered);
-        if (idx === 0) {
-          mark.after(el);
-        } else {
-          afterNode(rendered_children[idx - 1], el);
-        }
+        afterElement(dom2, node2);
         break;
       case 2:
-        const [removed] = rendered_children.splice(idx, 1);
-        revokeNode(removed);
+        afterFragment(dom2, node2);
+        break;
+      case 3:
+        afterComponent(dom2, node2);
         break;
     }
-  }
-  dom[1] = jsx;
-};
-var revokeFragment = (dom) => {
-  for (const child of dom[3])
-    revokeNode(child);
-  dom[2].remove();
-};
-var afterFragment = (dom, node) => {
-  const last_rendered_dom = dom[3].at(-1);
-  if (last_rendered_dom)
-    afterNode(last_rendered_dom, node);
-  else
-    dom[2].after(node);
-};
-
-// src/batch.ts
-var batch = (cb) => cb();
-var setBatch = (fn) => {
-  batch = fn;
-};
-
-// src/mount/dom/component.ts
-var createComponent2 = (jsx) => {
-  const [component, init_props] = jsx;
-  let rendered_dom;
-  let doc_frag;
-  const props = component((jsx2) => {
-    if (rendered_dom)
-      updateFragment(rendered_dom, [null, {}, jsx2]);
+  };
+  var createFragment = (jsx2) => {
+    const [, , children] = jsx2;
+    const mark = new Comment;
+    const el2 = new DocumentFragment;
+    const rendered_children = children.map(createNode);
+    el2.append(mark, ...rendered_children.map((e) => e[1]));
+    return [[2, jsx2, mark, rendered_children.map((e) => e[0])], el2];
+  };
+  var updateFragment = (dom2, jsx2) => {
+    const [, [, , old_children], mark, rendered_children] = dom2;
+    const [, , new_children] = jsx2;
+    for (const [type, idx, jsx22] of diff(old_children, new_children)) {
+      switch (type) {
+        case 0:
+          updateNode(rendered_children[idx], jsx22);
+          break;
+        case 1:
+          const [rendered, el2] = createNode(jsx22);
+          rendered_children.splice(idx, 0, rendered);
+          if (idx === 0) {
+            mark.after(el2);
+          } else {
+            afterNode(rendered_children[idx - 1], el2);
+          }
+          break;
+        case 2:
+          const [removed] = rendered_children.splice(idx, 1);
+          revokeNode(removed);
+          break;
+      }
+    }
+    dom2[1] = jsx2;
+  };
+  var revokeFragment = (dom2) => {
+    for (const child of dom2[3])
+      revokeNode(child);
+    dom2[2].remove();
+  };
+  var afterFragment = (dom2, node2) => {
+    const last_rendered_dom = dom2[3].at(-1);
+    if (last_rendered_dom)
+      afterNode(last_rendered_dom, node2);
     else
-      [rendered_dom, doc_frag] = createFragment([null, {}, jsx2]);
-  }, { ...init_props });
-  if (!doc_frag) {
-    console.error("never rendered Initial render.");
-    [rendered_dom, doc_frag] = createFragment([null, {}]);
-  }
-  return [
-    [
-      3,
-      [
-        component,
-        props
-      ],
-      rendered_dom
-    ],
-    doc_frag
-  ];
-};
-var updateComponent = (dom, jsx) => {
-  const old_props = dom[1][1];
-  const new_props = jsx[1];
-  batch(() => {
-    for (const [key, value] of Object.entries(new_props))
-      if (old_props[key] !== value)
-        old_props[key] = value;
-  });
-};
-var revokeComponent = (dom) => revokeFragment(dom[2]);
-var afterComponent = (dom, node) => afterFragment(dom[2], node);
-
-// src/mount/dom/index.ts
-var funcMap = [
-  [updateText, revokeText, afterText],
-  [updateElement, revokeElement, afterElement],
-  [updateFragment, revokeFragment, afterFragment],
-  [updateComponent, revokeComponent, afterComponent]
-];
-var createNode = (jsx) => {
-  if (typeof jsx === "string")
-    return createText(jsx);
-  if (Array.isArray(jsx)) {
-    const [tag] = jsx;
-    if (typeof tag === "string")
-      return createElement(jsx);
-    if (typeof tag === "function")
-      return createComponent2(jsx);
-    if (tag === null)
-      return createFragment(jsx);
-  }
-  throw new Error(`Unrecognized JSX node`, { cause: jsx });
-};
-var updateNode = (dom, jsx) => funcMap[dom[0]][0](dom, jsx);
-var revokeNode = (dom) => funcMap[dom[0]][1](dom);
-var afterNode = (dom, node) => funcMap[dom[0]][2](dom, node);
-
-// src/mount/index.ts
-var rootMap = new WeakMap;
-var render = (el, jsx) => {
-  if (rootMap.has(el))
-    revokeNode(rootMap.get(el));
-  const [root, node] = createNode(jsx);
-  rootMap.set(el, root);
-  el.append(node);
+      dom2[2].after(node2);
+  };
+  const [node, dom] = createFragment([null, {}]);
+  el.append(dom);
+  return {
+    render(jsx2) {
+      updateFragment(node, [null, {}, jsx2]);
+    },
+    unmount() {
+      revokeFragment(node);
+    }
+  };
 };
-
-//# debugId=A5D082D64B18D38664756E2164756E21
-//# sourceMappingURL=index.cjs.map