npm - mono-jsx - Versions diffs - 0.8.0-beta.2 → 0.8.0-beta.4 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dom/jsx-runtime.mjs +17 -15
package/jsx-runtime.mjs +1 -1
package/package.json +1 -1
package/setup.mjs +2 -2
package/types/dom/jsx-runtime.d.ts +3 -0
package/types/dom/mono.d.ts +0 -11
package/types/jsx.d.ts +3 -2

package/dom/jsx-runtime.mjs CHANGED Viewed

@@ -186,6 +186,14 @@ 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 setAttribute = (el, name, value) => {
+  const type = typeof value;
+  if (type === "boolean") {
+    el.toggleAttribute(name, value);
+  } else if (type === "number" || type === "string") {
+    el.setAttribute(name, String(value));
+  }
+};
 var render = (scope, child, root, abortSignal) => {
   switch (typeof child) {
     case "boolean":
@@ -327,7 +335,7 @@ var render = (scope, child, root, abortSignal) => {
                   renderFC(customElements.get(tag), props, root, abortSignal);
                   break;
                 }
-                const { root: rootProp, children, ...attrs } = props;
+                const { portal, children, ...attrs } = props;
                 const el = document.createElement(tag);
                 for (const [attrName, attrValue] of Object.entries(attrs)) {
                   switch (attrName) {
@@ -391,22 +399,22 @@ var render = (scope, child, root, abortSignal) => {
                           evt.preventDefault();
                           attrValue(new FormData(evt.target), evt);
                         });
-                      } else if (isString(attrValue)) {
-                        el.setAttribute(attrName, attrValue);
+                      } else {
+                        setAttribute(el, 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)));
+                        attrValue.reactive((value) => setAttribute(el, attrName, value));
                       } else {
-                        el.setAttribute(attrName, String(attrValue));
+                        setAttribute(el, attrName, attrValue);
                       }
                       break;
                   }
                 }
-                (rootProp instanceof HTMLElement ? rootProp : root).appendChild(el);
+                (portal instanceof HTMLElement ? portal : root).appendChild(el);
                 onAbort(abortSignal, () => el.remove());
                 if (children !== void 0) {
                   renderChildren(scope, children, el, abortSignal);
@@ -569,18 +577,9 @@ var createScope = (slots, abortSignal) => {
 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) => {
@@ -601,6 +600,9 @@ var html = (template, ...values) => [
   },
   $vnode
 ];
+HTMLElement.prototype.mount = function(node, aboutSignal) {
+  render(new NullProtoObject(), node, this, aboutSignal);
+};
 Object.assign(globalThis, {
   JSX,
   html,

package/jsx-runtime.mjs CHANGED Viewed

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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "mono-jsx",
-  "version": "0.8.0-beta.2",
+  "version": "0.8.0-beta.4",
   "description": "`<html>` as a `Response`.",
   "type": "module",
   "module": "./index.mjs",

package/setup.mjs CHANGED Viewed

@@ -31,8 +31,8 @@ async function setup() {
     return;
   }
   if (!globalThis.Deno) {
-    compilerOptions.lib ??= ["dom", "es2022"];
-    compilerOptions.module ??= "es2022";
+    compilerOptions.lib ??= ["dom", "esnext"];
+    compilerOptions.module ??= "esnext";
     compilerOptions.moduleResolution ??= "bundler";
     compilerOptions.allowImportingTsExtensions ??= true;
     compilerOptions.noEmit ??= true;

package/types/dom/jsx-runtime.d.ts CHANGED Viewed

@@ -14,4 +14,7 @@ declare global {
     // extends built-in JSX elements
     interface BuiltinElements extends Mono.Elements {}
   }
+  interface HTMLElement {
+    mount(node: VNode, aboutSignal?: AbortSignal): void;
+  }
 }

package/types/dom/mono.d.ts CHANGED Viewed

@@ -1,17 +1,6 @@
 import type { BaseAttributes } from "../jsx.d.ts";
 export interface Elements {
-  /**
-   * A built-in element of mono-jsx that mounts the children to the DOM.
-   * @mono-jsx
-   */
-  mount: BaseAttributes & {
-    /**
-     * The root element to mount the children to.
-     */
-    root: HTMLElement;
-  };
   /**
    * A built-in element of mono-jsx that toggles the visibility of its children.
    * @mono-jsx

package/types/jsx.d.ts CHANGED Viewed

@@ -19,9 +19,10 @@ export interface BaseAttributes {
    */
   slot?: string;
   /**
-   * The `root` attribute is used to mount the component to the DOM.
+   * The `portal` attribute is used to mount the component to a specified DOM element.
+   * @mono-jsx
    */
-  root?: HTMLElement;
+  portal?: HTMLElement;
 }
 export interface AsyncComponentAttributes {