mono-jsx 0.8.0-beta.1 → 0.8.0-beta.2

package/dom/jsx-runtime.mjs

@@ -0,0 +1,619 @@
+// jsx.ts
+var customElements = /* @__PURE__ */ new Map();
+var JSX = {
+  customElements: {
+    define(tagName, fc) {
+      customElements.set(tagName, fc);
+    }
+  }
+};
+
+// runtime/utils.ts
+var regexpCssBareUnitProps = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;
+var cssIds = /* @__PURE__ */ new Set();
+var isString = (v) => typeof v === "string";
+var isObject = (v) => typeof v === "object" && v !== null;
+var isFunction = (v) => typeof v === "function";
+var toHyphenCase = (k) => k.replace(/[a-z][A-Z]/g, (m) => m.charAt(0) + "-" + m.charAt(1).toLowerCase());
+var hashCode = (s) => [...s].reduce((hash, c) => Math.imul(31, hash) + c.charCodeAt(0) | 0, 0);
+var cx = (className) => {
+  if (typeof className === "string") {
+    return className;
+  }
+  if (typeof className === "object" && className !== null) {
+    if (Array.isArray(className)) {
+      return className.map(cx).filter(Boolean).join(" ");
+    }
+    return Object.entries(className).filter(([, v]) => !!v).map(([k]) => k).join(" ");
+  }
+  return "";
+};
+var styleToCSS = (style) => {
+  const inline = [];
+  const css = [];
+  const ret = new NullProtoObject();
+  for (const [k, v] of Object.entries(style)) {
+    switch (k.charCodeAt(0)) {
+      case /* ':' */
+      58:
+        css.push(k.startsWith("::view-") ? "" : null, k + "{" + renderStyle(v) + "}");
+        break;
+      case /* '@' */
+      64:
+        if (k.startsWith("@keyframes ") || k.startsWith("@view-")) {
+          if (isObject(v)) {
+            css.push(k + "{" + Object.entries(v).map(([k2, v2]) => k2 + "{" + renderStyle(v2) + "}").join("") + "}");
+          }
+        } else {
+          css.push(k + "{", null, "{" + renderStyle(v) + "}}");
+        }
+        break;
+      case /* '&' */
+      38:
+        css.push(null, k.slice(1) + "{" + renderStyle(v) + "}");
+        break;
+      default:
+        inline.push([k, v]);
+    }
+  }
+  if (inline.length > 0) {
+    ret.inline = renderStyle(inline);
+  }
+  if (css.length > 0) {
+    ret.css = css;
+  }
+  return ret;
+};
+var applyStyle = (el, style) => {
+  const { inline, css } = styleToCSS(style);
+  if (css) {
+    const prefix = "data-css-";
+    const id = hashCode((inline ?? "") + css.join(""));
+    const attrName = prefix + id.toString(36);
+    const selector = "[" + attrName + "]";
+    if (!cssIds.has(id)) {
+      cssIds.add(id);
+      document.head.appendChild(document.createElement("style")).textContent = (inline ? selector + "{" + inline + "}" : "") + css.map((v) => v === null ? selector : v).join("");
+    }
+    el.getAttributeNames().forEach((name) => name.startsWith(prefix) && el.removeAttribute(name));
+    el.setAttribute(attrName, "");
+  } else if (inline) {
+    el.setAttribute("style", inline);
+  }
+};
+var renderStyle = (style) => {
+  if (typeof style === "object" && style !== null) {
+    let css = "";
+    for (const [k, v] of Array.isArray(style) ? style : Object.entries(style)) {
+      if (isString(v) || typeof v === "number") {
+        const cssKey = toHyphenCase(k);
+        const cssValue = typeof v === "number" ? regexpCssBareUnitProps.test(k) ? "" + v : v + "px" : "" + v;
+        css += (css ? ";" : "") + cssKey + ":" + (cssKey === "content" ? JSON.stringify(cssValue) : cssValue);
+      }
+    }
+    return css;
+  }
+  return "";
+};
+var NullProtoObject = /* @__PURE__ */ (() => {
+  function NPO() {
+  }
+  NPO.prototype = Object.freeze(/* @__PURE__ */ Object.create(null));
+  return NPO;
+})();
+var domEscapeHTML = (text) => {
+  const div = document.createElement("div");
+  div.textContent = text;
+  return div.innerHTML;
+};
+
+// symbols.ts
+var $fragment = Symbol.for("jsx.fragment");
+var $html = Symbol.for("jsx.html");
+var $vnode = Symbol.for("jsx.vnode");
+var $setup = Symbol.for("mono.setup");
+
+// dom/render.ts
+var Signal = class {
+  constructor(scope, key) {
+    this.scope = scope;
+    this.key = key;
+  }
+  set(value) {
+    this.scope[this.key] = value;
+  }
+  watch(callback) {
+    this.scope[$watch](this.key, callback);
+  }
+  reactive(effect) {
+    const update = () => effect(this.scope[this.key]);
+    update();
+    this.watch(update);
+  }
+  map(callback) {
+    return new ReactiveList(this, callback);
+  }
+};
+var Compute = class {
+  constructor(scope, compute) {
+    this.scope = scope;
+    this.compute = compute;
+  }
+  reactive(effect) {
+    const update = () => effect(this.compute.call(this.scope));
+    $depsMark = /* @__PURE__ */ new Set();
+    update();
+    $depsMark.forEach((dep) => dep.watch(update));
+    $depsMark = void 0;
+  }
+  map(callback) {
+    return new ReactiveList(this, callback);
+  }
+};
+var ReactiveList = class {
+  constructor(reactive, callback) {
+    this.reactive = reactive;
+    this.callback = callback;
+  }
+};
+var Ref = class {
+  constructor(refs, name) {
+    this.refs = refs;
+    this.name = name;
+  }
+};
+var InsertMark = class {
+  #root;
+  #index;
+  constructor(root) {
+    this.#root = root;
+    this.#index = root.childNodes.length;
+  }
+  insert(...nodes) {
+    if (nodes.length === 1) {
+      this.#root.insertBefore(nodes[0], this.#root.childNodes[this.#index]);
+    } else {
+      const tmp = createTextNode();
+      this.#root.insertBefore(tmp, this.#root.childNodes[this.#index]);
+      tmp.replaceWith(...nodes);
+    }
+  }
+};
+var $slots = Symbol();
+var $watch = Symbol();
+var $postbind = Symbol();
+var isVNode = (v) => Array.isArray(v) && v.length === 3 && v[2] === $vnode;
+var isReactive = (v) => v instanceof Signal || v instanceof Compute;
+var createTextNode = (text = "") => document.createTextNode(text);
+var onAbort = (signal, callback) => signal?.addEventListener("abort", callback);
+var render = (scope, child, root, abortSignal) => {
+  switch (typeof child) {
+    case "boolean":
+    case "undefined":
+      return;
+    case "object":
+      if (child !== null) {
+        if (child instanceof ReactiveList) {
+          let { reactive, callback } = child;
+          let insertMark = new InsertMark(root);
+          let list = /* @__PURE__ */ new Map();
+          let cleanup = () => {
+            list.forEach((items) => items.forEach(([ac]) => ac.abort()));
+            list.clear();
+          };
+          reactive.reactive((arr) => {
+            if (!Array.isArray(arr)) {
+              throw new TypeError("map is not a function");
+            }
+            let nodes = [];
+            let newList = /* @__PURE__ */ new Map();
+            arr.forEach((item, index) => {
+              let render2 = list.get(item)?.shift();
+              if (callback.length >= 2 && render2 && render2[2] !== index) {
+                render2[0].abort();
+                render2 = void 0;
+              }
+              if (!render2) {
+                const ac = new AbortController();
+                render2 = [ac, [...renderToFragment(scope, callback(item, index), ac.signal).childNodes], index];
+              }
+              nodes.push(...render2[1]);
+              if (newList.has(item)) {
+                newList.get(item).push(render2);
+              } else {
+                newList.set(item, [render2]);
+              }
+            });
+            cleanup();
+            insertMark.insert(...nodes);
+            list = newList;
+          });
+          onAbort(abortSignal, cleanup);
+          return;
+        }
+        if (isReactive(child)) {
+          const textNode2 = createTextNode();
+          child.reactive((value) => {
+            textNode2.textContent = String(value);
+          });
+          root.appendChild(textNode2);
+          onAbort(abortSignal, () => textNode2.remove());
+          return;
+        }
+        if (isVNode(child)) {
+          const [tag, props] = child;
+          switch (tag) {
+            // fragment element
+            case "mount":
+            case $fragment: {
+              const { children, root: rootProp } = props;
+              const rootEl = rootProp instanceof HTMLElement ? rootProp : root;
+              if (children !== void 0) {
+                renderChildren(scope, children, rootEl, abortSignal);
+              }
+              break;
+            }
+            // XSS!
+            case $html: {
+              const { innerHTML } = props;
+              if (isReactive(innerHTML)) {
+              } else if (isString(innerHTML)) {
+              }
+              break;
+            }
+            // `<slot>` element
+            case "slot": {
+              const slots = scope[$slots];
+              if (slots) {
+                renderChildren(scope, slots, root, abortSignal);
+              }
+              break;
+            }
+            // `<if>` element
+            case "if": {
+              let { value: valueProp, children } = props;
+              if (children !== void 0) {
+                if (isReactive(valueProp)) {
+                  let mark = new InsertMark(root);
+                  let ac;
+                  valueProp.reactive((value) => {
+                    ac?.abort();
+                    if (value) {
+                      ac = new AbortController();
+                      mark.insert(renderToFragment(scope, children, ac.signal));
+                    }
+                  });
+                  onAbort(abortSignal, () => ac?.abort());
+                } else if (valueProp) {
+                  renderChildren(scope, children, root, abortSignal);
+                }
+              }
+              break;
+            }
+            // `<switch>` element
+            case "switch": {
+              const { value: valueProp, children } = props;
+              if (children !== void 0) {
+                if (isReactive(valueProp)) {
+                  let mark = new InsertMark(root);
+                  let ac;
+                  valueProp.reactive((value) => {
+                    const slots = children.filter((v) => isVNode(v) && v[1].slot === String(value));
+                    ac?.abort();
+                    if (slots.length > 0) {
+                      ac = new AbortController();
+                      mark.insert(renderToFragment(scope, slots, ac.signal));
+                    }
+                  });
+                  onAbort(abortSignal, () => ac?.abort());
+                } else {
+                  renderChildren(
+                    scope,
+                    children.filter((v) => isVNode(v) && v[1].slot === String(valueProp)),
+                    root,
+                    abortSignal
+                  );
+                }
+              }
+              break;
+            }
+            default: {
+              if (typeof tag === "function") {
+                renderFC(tag, props, root, abortSignal);
+                break;
+              }
+              if (isString(tag)) {
+                if (customElements.has(tag)) {
+                  renderFC(customElements.get(tag), props, root, abortSignal);
+                  break;
+                }
+                const { root: rootProp, children, ...attrs } = props;
+                const el = document.createElement(tag);
+                for (const [attrName, attrValue] of Object.entries(attrs)) {
+                  switch (attrName) {
+                    case "class": {
+                      const updateClassName = (value) => {
+                        el.className = cx(value);
+                      };
+                      if (isReactive(attrValue)) {
+                        attrValue.reactive(updateClassName);
+                      } else {
+                        updateClassName(attrValue);
+                      }
+                      break;
+                    }
+                    case "style": {
+                      const updateStyle = (value) => {
+                        if (isObject(value)) {
+                          applyStyle(el, value);
+                        } else if (isString(value)) {
+                          el.style.cssText = value;
+                        }
+                      };
+                      if (isReactive(attrValue)) {
+                        attrValue.reactive(updateStyle);
+                      } else {
+                        updateStyle(attrValue);
+                      }
+                      break;
+                    }
+                    case "ref":
+                      if (isFunction(attrValue)) {
+                        const ret = attrValue(el);
+                        if (isFunction(ret)) {
+                          onAbort(abortSignal, ret);
+                        }
+                      } else if (attrValue instanceof Ref) {
+                        attrValue.refs[attrValue.name] = el;
+                      }
+                      break;
+                    case "slot":
+                      break;
+                    case "$checked":
+                    case "$value":
+                      if (attrValue instanceof Signal) {
+                        const name = attrName.slice(1);
+                        const isValue = name.charAt(0) === "v";
+                        attrValue.reactive((value) => {
+                          el[name] = isValue ? String(value) : !!value;
+                        });
+                        el.addEventListener("input", () => attrValue.set(el[name]));
+                      } else {
+                        throw new TypeError("not a signal");
+                      }
+                      break;
+                    case "viewTransition": {
+                      break;
+                    }
+                    case "action":
+                      if (isFunction(attrValue) && tag === "form") {
+                        el.addEventListener("submit", (evt) => {
+                          evt.preventDefault();
+                          attrValue(new FormData(evt.target), evt);
+                        });
+                      } else if (isString(attrValue)) {
+                        el.setAttribute(attrName, attrValue);
+                      }
+                      break;
+                    default:
+                      if (attrName.startsWith("on") && isFunction(attrValue)) {
+                        el.addEventListener(attrName.slice(2).toLowerCase(), attrValue);
+                      } else if (isReactive(attrValue)) {
+                        attrValue.reactive((value) => el.setAttribute(attrName, String(value)));
+                      } else {
+                        el.setAttribute(attrName, String(attrValue));
+                      }
+                      break;
+                  }
+                }
+                (rootProp instanceof HTMLElement ? rootProp : root).appendChild(el);
+                onAbort(abortSignal, () => el.remove());
+                if (children !== void 0) {
+                  renderChildren(scope, children, el, abortSignal);
+                }
+              }
+            }
+          }
+          return;
+        }
+      }
+  }
+  const textNode = createTextNode(String(child));
+  root.appendChild(textNode);
+  onAbort(abortSignal, () => textNode.remove());
+};
+var renderChildren = (scope, children, root, aboutSignal) => {
+  if (Array.isArray(children) && !isVNode(children)) {
+    for (const child of children) {
+      render(scope, child, root, aboutSignal);
+    }
+  } else {
+    render(scope, children, root, aboutSignal);
+  }
+};
+var renderFC = (fc, props, root, abortSignal) => {
+  const scope = createScope(props.children, abortSignal);
+  const v = fc.call(scope, props);
+  if (v instanceof Promise) {
+    let placeholder;
+    if (isVNode(props.placeholder)) {
+      placeholder = [...renderToFragment(scope, props.placeholder, abortSignal).childNodes];
+    }
+    if (!placeholder?.length) {
+      placeholder = [createTextNode()];
+    }
+    root.append(...placeholder);
+    v.then((nodes) => {
+      scope[$postbind]();
+      placeholder[0].replaceWith(...renderToFragment(scope, nodes, abortSignal).childNodes);
+    }).catch((err) => {
+      if (isFunction(props.catch)) {
+        const v2 = props.catch(err);
+        if (isVNode(v2)) {
+          placeholder[0].replaceWith(...renderToFragment(scope, v2, abortSignal).childNodes);
+        }
+      } else {
+        console.error(err);
+      }
+    }).finally(() => {
+      placeholder.forEach((node) => node.remove());
+    });
+  } else {
+    scope[$postbind]();
+    if (isObject(v) && !isVNode(v) && Symbol.iterator in v) {
+      for (const node of v) {
+        render(scope, node, root, abortSignal);
+      }
+    } else {
+      render(scope, v, root, abortSignal);
+    }
+  }
+};
+var renderToFragment = (scope, node, aboutSignal) => {
+  const fragment = document.createDocumentFragment();
+  renderChildren(scope, node, fragment, aboutSignal);
+  return fragment;
+};
+var $depsMark;
+var createScope = (slots, abortSignal) => {
+  let isBound = false;
+  let watchHandlers = /* @__PURE__ */ new Map();
+  let signals = /* @__PURE__ */ new Map();
+  let getSignal = (key) => {
+    let signal = signals.get(key);
+    if (!signal) {
+      signal = new Signal(scope, key);
+      signals.set(key, signal);
+    }
+    return signal;
+  };
+  let refs = new Proxy(new NullProtoObject(), {
+    get(target, key) {
+      if (isBound || $depsMark) {
+        return target[key];
+      }
+      return new Ref(target, key);
+    }
+  });
+  let scope = new Proxy(new NullProtoObject(), {
+    get(target, key, receiver) {
+      switch (key) {
+        case $slots:
+          return slots;
+        case $watch:
+          return (key2, effect) => {
+            let handlers = watchHandlers.get(key2);
+            if (!handlers) {
+              handlers = /* @__PURE__ */ new Set();
+              watchHandlers.set(key2, handlers);
+            }
+            handlers.add(effect);
+          };
+        case $postbind:
+          return () => {
+            isBound = true;
+          };
+        case "init":
+          return ((args) => Object.assign(target, args));
+        case "$":
+        case "compute":
+          return (fn) => new Compute(receiver, fn);
+        case "effect":
+          return (callback) => {
+            queueMicrotask(() => {
+              $depsMark = /* @__PURE__ */ new Set();
+              let cleanup = callback.call(receiver);
+              $depsMark.forEach(
+                (dep) => dep.watch(() => {
+                  cleanup?.();
+                  cleanup = callback.call(receiver);
+                })
+              );
+              onAbort(abortSignal, () => cleanup?.());
+              $depsMark = void 0;
+            });
+          };
+        case "refs":
+          return refs;
+        default:
+          if (isBound || $depsMark) {
+            if ($depsMark && isString(key)) {
+              $depsMark.add(getSignal(key));
+            }
+            return target[key];
+          }
+          if (isString(key)) {
+            return getSignal(key);
+          }
+      }
+    },
+    set(target, key, value) {
+      if (isString(key)) {
+        const prev = target[key];
+        if (prev !== value) {
+          target[key] = value;
+          watchHandlers.get(key)?.forEach((effect) => effect());
+        }
+      }
+      return true;
+    }
+  });
+  onAbort(abortSignal, () => {
+    watchHandlers.clear();
+    signals.clear();
+  });
+  return scope;
+};
+
+// dom/jsx-runtime.ts
+var Fragment = $fragment;
+var jsx = (tag, props = new NullProtoObject(), key) => {
+  const vnode = [tag, props, $vnode];
+  const { root, abortSignal } = props;
+  if (key !== void 0) {
+    props.key = key;
+  }
+  if (tag === "mount" && root instanceof HTMLElement) {
+    render(
+      new NullProtoObject(),
+      vnode,
+      root,
+      abortSignal instanceof AbortSignal ? abortSignal : void 0
+    );
+  }
+  return vnode;
+};
+var jsxEscape = (value) => {
+  switch (typeof value) {
+    case "bigint":
+    case "number":
+      return String(value);
+    case "string":
+      return domEscapeHTML(value);
+    default:
+      return "";
+  }
+};
+var html = (template, ...values) => [
+  $html,
+  {
+    innerHTML: isString(template) || isReactive(template) ? template : String.raw(template, ...values.map(jsxEscape))
+  },
+  $vnode
+];
+Object.assign(globalThis, {
+  JSX,
+  html,
+  css: html,
+  js: html
+});
+export {
+  Fragment,
+  JSX,
+  html as css,
+  html,
+  html as js,
+  jsx,
+  jsx as jsxDEV,
+  jsx as jsxs
+};

package/jsx-runtime.mjs

@@ -166,7 +166,7 @@ var $vnode = Symbol.for("jsx.vnode");
 var $setup = Symbol.for("mono.setup");
 
 // version.ts
-var VERSION = "0.7.5";
+var VERSION = "0.8.0-beta.1";
 
 // render.ts
 var cdn = "https://raw.esm.sh";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mono-jsx",
-  "version": "0.8.0-beta.1",
+  "version": "0.8.0-beta.2",
   "description": "`<html>` as a `Response`.",
   "type": "module",
   "module": "./index.mjs",
@@ -39,8 +39,10 @@
     "prepublishOnly": "deno task build"
   },
   "files": [
-    "*.mjs",
-    "./types/"
+    "./*.mjs",
+    "./dom/*.mjs",
+    "./types/*.d.ts",
+    "./types/dom/*.d.ts"
   ],
   "license": "MIT",
   "repository": {