mono-jsx 0.9.2 → 0.9.4

package/dom/index.mjs

@@ -1,7 +1,5 @@
 // dom/index.ts
-import { createStore } from "./jsx-runtime.mjs";
-var atom = (initValue) => createStore({ value: initValue });
-var store = createStore;
+import { atom, store } from "./jsx-runtime.mjs";
 export {
   atom,
   store

package/dom/jsx-runtime.mjs

@@ -12,7 +12,6 @@ var JSX = {
 var regexpIsNonDimensional = /^(-|f[lo].*[^se]$|g.{5,}[^ps]$|z|o[pr]|(W.{5})?[lL]i.*(t|mp)$|an|(bo|s).{4}Im|sca|m.{6}[ds]|ta|c.*[st]$|wido|ini)/;
 var isString = (v) => typeof v === "string";
 var isFunction = (v) => typeof v === "function";
-var isObject = (v) => typeof v === "object" && v !== null;
 var isPlainObject = (v) => !!v && (v.constructor === Object || v.constructor === void 0);
 var toHyphenCase = (k) => k.replace(/[a-z][A-Z]/g, (m) => m.charAt(0) + "-" + m.charAt(1).toLowerCase());
 var hashCode = (str) => {
@@ -56,15 +55,23 @@ 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) {
+    if (isFunction(value)) {
+      value = value(this.get());
+    }
     this.#scope[this.#key] = value;
   }
   watch(callback, abortSignal) {
@@ -140,7 +147,6 @@ var $expr = /* @__PURE__ */ Symbol();
 var $slots = /* @__PURE__ */ Symbol();
 var globalScopes = /* @__PURE__ */ new Set();
 var isVNode = (v) => Array.isArray(v) && v.length === 3 && v[2] === $vnode;
-var isGetter = (v) => isObject(v) && "value" in v;
 var createTextNode = (text = "") => document2.createTextNode(text);
 var createElement = (tag) => document2.createElement(tag);
 var onAbort = (signal, callback) => signal?.addEventListener("abort", callback);
@@ -236,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);
           }
-          return value;
+          if (getRawValue) {
+            $depsMark?.add(signal);
+            return value;
+          }
+          return signal;
         }
       }
     },
@@ -263,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();
@@ -271,18 +286,22 @@ var createScope = (slots, abortSignal) => {
   });
   return scope;
 };
-var createStore = (props) => {
+var atomIndex = 0;
+var atomScope;
+var atom = (value) => {
+  if (!atomScope) {
+    atomScope = createScope();
+  }
+  const atomKey = "$" + atomIndex++;
+  atomScope[atomKey] = value;
+  return new Signal(atomScope, atomKey, true);
+};
+var store = (props) => {
   const scope = createScope().extend(props);
   globalScopes.add(scope);
   return scope;
 };
 var render = (scope, child, root, abortSignal) => {
-  if (isGetter(child)) {
-    const expr = child[$expr];
-    expr?.(true);
-    child = child.value;
-    expr?.(false);
-  }
   switch (typeof child) {
     case "boolean":
     case "undefined":
@@ -297,13 +316,13 @@ var render = (scope, child, root, abortSignal) => {
             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");
+          reactive.reactive((v) => {
+            if (!Array.isArray(v)) {
+              v = [v];
             }
             let nodes = [];
             let newList = /* @__PURE__ */ new Map();
-            arr.forEach((item, index) => {
+            v.forEach((item, index) => {
               let render2 = list.get(item)?.shift();
               if (callback.length >= 2 && render2 && render2[2] !== index) {
                 render2[0].abort();
@@ -722,11 +741,12 @@ Object.assign(globalThis, {
 export {
   Fragment,
   JSX,
-  createStore,
+  atom,
   html as css,
   html,
   html as js,
   jsx,
   jsx as jsxDEV,
-  jsx as jsxs
+  jsx as jsxs,
+  store
 };

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.1";
+var VERSION = "0.9.3";
 
 // render.ts
 var FunctionIdGenerator = class extends Map {
@@ -897,8 +897,6 @@ async function renderNode(rc, node, stripSlotProp) {
         for (const child of node) {
           await renderNode(rc, child);
         }
-      } else if ("value" in node) {
-        await renderNode(rc, node.value);
       }
       break;
   }

package/package.json

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

package/setup.mjs

@@ -2,20 +2,14 @@
 import { lstat, readFile, writeFile } from "node:fs/promises";
 import { argv } from "node:process";
 var serverTSX = `// mono-jsx SSR example
-// Documentation: https://ije.github.io/mono-jsx/docs/ssr
+// Docs: https://github.com/ije/mono-jsx
 
 function App(this: FC<{ a: number; b: number }>) {
-  this.init({
-    a: 1,
-    b: 2,
-  })
+  this.init({ a: 1,  b: 2 })
 
   this.effect(() => {
     // effect is called when the component is mounted or when the dependencies(calc.a & calc.b) change
     console.log("sum", this.a * this.b);
-    return () => {
-      console.log("cleanup");
-    };
   });
 
   return (
@@ -52,8 +46,6 @@ export default {
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <meta name="description" content="Building user interfaces." />
-        <meta name="keywords" content="ssr,jsx" />
         <title>Welcome to mono-jsx!</title>
       </head>
       <body>

package/types/dom/index.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="../jsx.d.ts" />
 
 export interface IAtom<T> {
-  value: 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[];
 }
 
 export const atom: <T>(initValue: T) => IAtom<T>;

package/types/jsx.d.ts

@@ -3,7 +3,7 @@ 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 MaybeArray<T> = T | T[];
-export type MaybeGetter<T> = { value: T };
+export type MaybeGetter<T> = { get: () => T };
 export type MaybePromiseOrGenerator<T> = T | Promise<T> | Generator<T> | AsyncGenerator<T>;
 
 export interface BaseAttributes {