mono-jsx 0.9.3 → 0.9.5

package/dom/jsx-runtime.mjs

@@ -55,12 +55,17 @@ var Reactive = class {
 var Signal = class extends Reactive {
   #scope;
   #key;
-  constructor(scope, key) {
+  #isAtom;
+  constructor(scope, key, isAtom = false) {
     super();
     this.#scope = scope;
     this.#key = key;
+    this.#isAtom = isAtom;
   }
   get() {
+    if (this.#isAtom) {
+      $depsMark?.add(this);
+    }
     return this.#scope[$get](this.#key);
   }
   set(value) {
@@ -112,18 +117,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());
     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) {
@@ -237,19 +242,29 @@ var createScope = (slots, abortSignal) => {
           return refs;
         default: {
           const value = Reflect.get(target, key, receiver);
-          if (value instanceof Reactive) {
-            return !exprMode || $depsMark ? value.get() : value;
+          if (typeof key === "symbol" || isFunction(value)) {
+            return value;
           }
-          if (!exprMode || $depsMark) {
-            if ($depsMark && isString(key) && !isFunction(value)) {
-              $depsMark.add(getSignal(key));
+          const getRawValue = !exprMode || $depsMark !== void 0;
+          if (value instanceof Reactive) {
+            if (getRawValue) {
+              if (value instanceof Signal) {
+                $depsMark?.add(value);
+              }
+              return value.get();
             }
             return value;
           }
-          if (isString(key)) {
-            return getSignal(key);
+          let signal = signals.get(key);
+          if (!signal) {
+            signal = new Signal(receiver, key);
+            signals.set(key, signal);
+          }
+          if (getRawValue) {
+            $depsMark?.add(signal);
+            return value;
           }
-          return value;
+          return signal;
         }
       }
     },
@@ -264,7 +279,6 @@ var createScope = (slots, abortSignal) => {
       return true;
     }
   });
-  let getSignal = (key) => signals.get(key) ?? signals.set(key, new Signal(scope, key)).get(key);
   onAbort(abortSignal, () => {
     watchHandlers.clear();
     refElements.clear();
@@ -278,9 +292,9 @@ var atom = (value) => {
   if (!atomScope) {
     atomScope = createScope();
   }
-  const atomKey = "atom_" + atomIndex++;
-  atomScope.init({ [atomKey]: value });
-  return new Signal(atomScope, atomKey);
+  const atomKey = "$" + atomIndex++;
+  atomScope[atomKey] = value;
+  return new Signal(atomScope, atomKey, true);
 };
 var store = (props) => {
   const scope = createScope().extend(props);
@@ -296,7 +310,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()));
@@ -346,17 +360,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) => {
@@ -383,13 +396,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());
@@ -407,14 +420,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());

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.5";
 
 // render.ts
 var FunctionIdGenerator = class extends Map {

package/package.json

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

package/types/dom/index.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="../jsx.d.ts" />
 
 export interface IAtom<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[];
+  get(): T;
+  set(value: T | ((prev: T) => T)): void;
+  map(callback: (value: T extends (infer V)[] ? V : T, index: number) => JSX.Element): JSX.Element[];
 }
 
 export const atom: <T>(initValue: T) => IAtom<T>;