mono-jsx 0.9.4 → 0.9.6

package/dom/jsx-runtime.mjs

@@ -77,6 +77,12 @@ var Signal = class extends Reactive {
   watch(callback, abortSignal) {
     onAbort(abortSignal, this.#scope[$watch](this.#key, callback));
   }
+  ref(callback) {
+    if (callback) {
+      return new Computed(this.#scope, () => callback(this.get()));
+    }
+    return this;
+  }
 };
 var Computed = class extends Reactive {
   #scope;
@@ -117,18 +123,18 @@ var Ref = class {
 };
 var InsertMark = class {
   #root;
-  #index;
-  constructor(root) {
+  #anchor;
+  constructor(root, signal) {
+    const anchor = createTextNode();
+    root.appendChild(anchor);
+    onAbort(signal, anchor.remove.bind(anchor));
     this.#root = root;
-    this.#index = root.childNodes.length;
+    this.#anchor = anchor;
   }
   insert(...nodes) {
-    let argsN = nodes.length;
-    let tmp;
-    if (argsN) {
-      if (argsN > 1) tmp = createTextNode();
-      this.#root.insertBefore(tmp ?? nodes[0], this.#root.childNodes[this.#index]);
-      tmp?.replaceWith(...nodes);
+    const parent = this.#anchor.parentElement ?? this.#root;
+    for (const node of nodes) {
+      parent.insertBefore(node, this.#anchor);
     }
   }
   insertHTML(html2) {
@@ -234,7 +240,9 @@ var createScope = (slots, abortSignal) => {
                   cleanup = callback.call(receiver);
                 }, abortSignal)
               );
-              onAbort(abortSignal, () => cleanup?.());
+              if (cleanup) {
+                onAbort(abortSignal, cleanup);
+              }
               $depsMark = void 0;
             });
           };
@@ -310,7 +318,7 @@ var render = (scope, child, root, abortSignal) => {
       if (child !== null) {
         if (child instanceof ReactiveList) {
           let { reactive, callback } = child;
-          let insertMark = new InsertMark(root);
+          let insertMark = new InsertMark(root, abortSignal);
           let list = /* @__PURE__ */ new Map();
           let cleanup = () => {
             list.forEach((items) => items.forEach(([ac]) => ac.abort()));
@@ -352,7 +360,7 @@ var render = (scope, child, root, abortSignal) => {
             textNode2.textContent = String(value);
           }, abortSignal);
           root.appendChild(textNode2);
-          onAbort(abortSignal, () => textNode2.remove());
+          onAbort(abortSignal, textNode2.remove.bind(textNode2));
           return;
         }
         if (isVNode(child)) {
@@ -360,17 +368,16 @@ var render = (scope, child, root, abortSignal) => {
           switch (tag) {
             // fragment element
             case $fragment: {
-              const { children, root: rootProp } = props;
-              const rootEl = rootProp instanceof HTMLElement ? rootProp : root;
+              const { children } = props;
               if (children !== void 0) {
-                renderChildren(scope, children, rootEl, abortSignal);
+                renderChildren(scope, children, root, abortSignal);
               }
               break;
             }
             // XSS!
             case $html: {
               const { innerHTML } = props;
-              const mark = new InsertMark(root);
+              const mark = new InsertMark(root, abortSignal);
               if (innerHTML instanceof Reactive) {
                 let cleanup;
                 innerHTML.reactive((html2) => {
@@ -397,13 +404,13 @@ var render = (scope, child, root, abortSignal) => {
               let { when = true, children } = props;
               if (children !== void 0) {
                 if (when instanceof Reactive) {
-                  let mark = new InsertMark(root);
+                  let mark = new InsertMark(root, abortSignal);
                   let ac;
                   when.reactive((value) => {
                     ac?.abort();
                     if (tag === "show" ? value : !value) {
                       ac = new AbortController();
-                      mark.insert(renderToFragment(scope, children, ac.signal));
+                      mark.insert(...renderToFragment(scope, children, ac.signal).childNodes);
                     }
                   }, abortSignal);
                   onAbort(abortSignal, () => ac?.abort());
@@ -421,14 +428,14 @@ var render = (scope, child, root, abortSignal) => {
               const { value: valueProp, children } = props;
               if (children !== void 0) {
                 if (valueProp instanceof Reactive) {
-                  let mark = new InsertMark(root);
+                  let mark = new InsertMark(root, abortSignal);
                   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));
+                      mark.insert(...renderToFragment(scope, slots, ac.signal).childNodes);
                     }
                   }, abortSignal);
                   onAbort(abortSignal, () => ac?.abort());
@@ -536,7 +543,7 @@ var render = (scope, child, root, abortSignal) => {
                       break;
                   }
                 }
-                onAbort(abortSignal, () => el.remove());
+                onAbort(abortSignal, el.remove.bind(el));
                 (portal instanceof HTMLElement ? portal : root).appendChild(el);
                 if (children !== void 0) {
                   renderChildren(scope, children, el, abortSignal);
@@ -550,7 +557,7 @@ var render = (scope, child, root, abortSignal) => {
   }
   const textNode = createTextNode(String(child));
   root.appendChild(textNode);
-  onAbort(abortSignal, () => textNode.remove());
+  onAbort(abortSignal, textNode.remove.bind(textNode));
 };
 var renderChildren = (scope, children, root, aboutSignal) => {
   if (Array.isArray(children) && !isVNode(children)) {

package/jsx-runtime.mjs

@@ -176,7 +176,7 @@ var $vnode = /* @__PURE__ */ Symbol.for("jsx.vnode");
 var $setup = /* @__PURE__ */ Symbol.for("mono.setup");
 
 // version.ts
-var VERSION = "0.9.3";
+var VERSION = "0.9.6";
 
 // render.ts
 var FunctionIdGenerator = class extends Map {

package/package.json

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

package/types/dom/index.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="../jsx.d.ts" />
 
-export interface IAtom<T> {
+export interface Atom<T> {
   get(): T;
   set(value: T | ((prev: T) => T)): void;
   map(callback: (value: T extends (infer V)[] ? V : T, index: number) => JSX.Element): JSX.Element[];
+  ref(): T;
+  ref<V>(callback: (value: T) => V): V;
 }
 
-export const atom: <T>(initValue: T) => IAtom<T>;
+export const atom: <T>(initValue: T) => Atom<T>;
 export const store: <T extends Record<string, unknown>>(initValue: T) => T;

package/types/html.d.ts

@@ -2,14 +2,14 @@
 
 import type * as Aria from "./aria.d.ts";
 import type * as CSS from "./css.d.ts";
-import type * as Mono from "./jsx.d.ts";
+import type * as Mono from "./mono.d.ts";
 
 export interface BaseCSSProperties extends CSS.Properties<string | number> {
   /**
    * The field-sizing CSS property enables you to control the sizing behavior of elements that are given a default preferred size, such as form control elements. This property enables you to override the default sizing behavior, allowing form controls to adjust in size to fit their contents.
    * @see https://developer.mozilla.org/docs/Web/CSS/field-sizing
    */
-  fieldSizing?: "fixed" | "content";
+  fieldSizing?: "fixed" | "content" | (string & {});
   /**
    * The view-transition-class CSS property provides the selected elements with an identifying class (a <custom-ident>), providing an additional method of styling the view transitions for those elements.
    * @see https://developer.mozilla.org/docs/Web/CSS/view-transition-class
@@ -33,7 +33,7 @@ export interface AtRuleCSSProperties {
     /**
      * Specifies the effect this at-rule will have on the document's view transition behavior.
      */
-    navigation?: "auto" | "none";
+    navigation?: "auto" | "none" | (string & {});
   };
 }
 
@@ -303,12 +303,12 @@ export namespace HTML {
      * Two-way binding prop that automatically creates checked and oninput attributes for signal binding
      * @mono-jsx
      */
-    $checked?: boolean;
+    $checked?: Mono.MaybeGetter<boolean>;
     /**
      * Two-way binding prop that automatically creates value and oninput attributes for signal binding
      * @mono-jsx
      */
-    $value?: string | number;
+    $value?: Mono.MaybeGetter<string | number>;
   }
 
   interface OptionAttributes<T extends EventTarget> extends GlobalAttributes<T> {
@@ -331,7 +331,7 @@ export namespace HTML {
      * Two-way binding prop that automatically creates value and oninput attributes for signal binding
      * @mono-jsx
      */
-    $value?: string | number;
+    $value?: Mono.MaybeGetter<string | number>;
   }
 
   interface TextareaAttributes<T extends EventTarget> extends GlobalAttributes<T> {
@@ -354,7 +354,7 @@ export namespace HTML {
      * Two-way binding prop that automatically creates value and oninput attributes for signal binding
      * @mono-jsx
      */
-    $value?: string;
+    $value?: Mono.MaybeGetter<string>;
   }
 
   interface ButtonAttributes<T extends EventTarget> extends GlobalAttributes<T> {

package/types/jsx.d.ts

@@ -1,9 +1,9 @@
 import type { HTML } from "./html.d.ts";
 
 export type ChildPrimitiveType = JSX.Element | string | number | bigint | boolean | null | undefined;
-export type ChildType = MaybeArray<ChildPrimitiveType | MaybeGetter<ChildPrimitiveType>>;
+export type ChildType = MaybeArray<MaybeGetter<ChildPrimitiveType>>;
 export type MaybeArray<T> = T | T[];
-export type MaybeGetter<T> = { get: () => T };
+export type MaybeGetter<T> = T | { get: () => T };
 export type MaybePromiseOrGenerator<T> = T | Promise<T> | Generator<T> | AsyncGenerator<T>;
 
 export interface BaseAttributes {

package/types/mono.d.ts

@@ -1,4 +1,4 @@
-import type { AsyncComponentAttributes, BaseAttributes, ComponentType } from "./jsx.d.ts";
+import type { AsyncComponentAttributes, BaseAttributes, ComponentType, MaybeGetter } from "./jsx.d.ts";
 
 export type WithParams<T> = T & { params?: Record<string, string> };
 
@@ -263,3 +263,5 @@ declare global {
     }
     : never;
 }
+
+export type { AsyncComponentAttributes, BaseAttributes, MaybeGetter };