npm - mono-jsx - Versions diffs - 0.9.1 → 0.9.3 - Mend

mono-jsx 0.9.1 → 0.9.3

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 (12) hide show

package/README.md +3 -19
package/dom/index.mjs +3 -2
package/dom/jsx-runtime.mjs +33 -23
package/index.mjs +1 -1
package/jsx-runtime.mjs +9 -9
package/package.json +1 -1
package/setup.mjs +2 -10
package/types/dom/index.d.ts +8 -1
package/types/dom/jsx-runtime.d.ts +7 -3
package/types/jsx.d.ts +55 -2
package/types/mono.d.ts +1 -50
package/types/dom/mono.d.ts +0 -65

package/README.md CHANGED Viewed

@@ -538,6 +538,9 @@ function Counter(this: FC<{ count: number }>, props: { initialCount?: number })
   // Initialize a signal
   this.count = props.initialCount ?? 0;
+  // or you can use `this.init` to initialize the signals
+  this.init({ count: props.initialCount ?? 0 });
   return (
     <div>
       {/* render signal */}
@@ -551,25 +554,6 @@ function Counter(this: FC<{ count: number }>, props: { initialCount?: number })
 }
 ```
-You can also use `this.extend` method to extend the signals:
-```tsx
-function Counter(this: FC, props: { initialCount?: number }) {
-  const counter = this.extend({ count: props.initialCount ?? 0})
-  return (
-    <div>
-      {/* render signal */}
-      <span>{counter.count}</span>
-      {/* Update signal to trigger re-render */}
-      <button onClick={() => counter.count--}>-</button>
-      <button onClick={() => counter.count++}>+</button>
-    </div>
-  )
-}
-```
 ### Using App Signals
 You can define app signals by adding the `app` prop to the root `<html>` element. The app signals are available in all components via `this.app.<SignalName>`. Changes to the app signals will trigger re-renders in all components that use them:

package/dom/index.mjs CHANGED Viewed

@@ -1,5 +1,6 @@
 // dom/index.ts
-import { Store } from "./jsx-runtime.mjs";
+import { atom, store } from "./jsx-runtime.mjs";
 export {
-  Store
+  atom,
+  store
 };

package/dom/jsx-runtime.mjs CHANGED Viewed

@@ -34,10 +34,9 @@ var domEscapeHTML = (text) => {
 };
 // 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");
+var $fragment = /* @__PURE__ */ Symbol.for("jsx.fragment");
+var $html = /* @__PURE__ */ Symbol.for("jsx.html");
+var $vnode = /* @__PURE__ */ Symbol.for("jsx.vnode");
 // dom/render.ts
 var Reactive = class {
@@ -65,6 +64,9 @@ var Signal = class extends Reactive {
     return this.#scope[$get](this.#key);
   }
   set(value) {
+    if (isFunction(value)) {
+      value = value(this.get());
+    }
     this.#scope[this.#key] = value;
   }
   watch(callback, abortSignal) {
@@ -134,11 +136,11 @@ var InsertMark = class {
   }
 };
 var document2 = globalThis.document;
-var $get = Symbol();
-var $watch = Symbol();
-var $expr = Symbol();
-var $slots = Symbol();
-var stores = /* @__PURE__ */ new Set();
+var $get = /* @__PURE__ */ Symbol();
+var $watch = /* @__PURE__ */ Symbol();
+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 createTextNode = (text = "") => document2.createTextNode(text);
 var createElement = (tag) => document2.createElement(tag);
@@ -156,7 +158,7 @@ var setAttribute = (el, name, value) => {
 };
 var call$expr = (scope, ok) => {
   scope[$expr](ok);
-  stores.forEach((s) => s[$expr](ok));
+  globalScopes.forEach((s) => s[$expr](ok));
 };
 var $depsMark;
 var createScope = (slots, abortSignal) => {
@@ -204,10 +206,8 @@ var createScope = (slots, abortSignal) => {
               if (get) {
                 target[key2] = new Computed(receiver, get);
               } else {
-                if (key2 === "effect") {
-                  if (isFunction(value)) {
-                    receiver.effect(value);
-                  }
+                if (key2 === "effect" && isFunction(value)) {
+                  receiver.effect(value);
                 } else {
                   target[key2] = value;
                 }
@@ -272,9 +272,19 @@ var createScope = (slots, abortSignal) => {
   });
   return scope;
 };
-var createStore = (props) => {
+var atomIndex = 0;
+var atomScope;
+var atom = (value) => {
+  if (!atomScope) {
+    atomScope = createScope();
+  }
+  const atomKey = "atom_" + atomIndex++;
+  atomScope.init({ [atomKey]: value });
+  return new Signal(atomScope, atomKey);
+};
+var store = (props) => {
   const scope = createScope().extend(props);
-  stores.add(scope);
+  globalScopes.add(scope);
   return scope;
 };
 var render = (scope, child, root, abortSignal) => {
@@ -292,13 +302,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();
@@ -709,7 +719,6 @@ HTMLElement.prototype.mount = function(node, aboutSignal) {
   render(null, node, this, aboutSignal);
 };
 Object.assign(globalThis, {
-  Store: createStore,
   JSX,
   html,
   css: html,
@@ -718,11 +727,12 @@ Object.assign(globalThis, {
 export {
   Fragment,
   JSX,
-  createStore as Store,
+  atom,
   html as css,
   html,
   html as js,
   jsx,
   jsx as jsxDEV,
-  jsx as jsxs
+  jsx as jsxs,
+  store
 };

package/index.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
 // index.ts
 function buildRoutes(handler) {
-  const { routes = {} } = handler(Symbol.for("mono.setup"));
+  const { routes = {} } = handler(/* @__PURE__ */ Symbol.for("mono.setup"));
   return monoRoutes(routes, handler);
 }
 function monoRoutes(routes, handler) {

package/jsx-runtime.mjs CHANGED Viewed

@@ -170,13 +170,13 @@ var escapeHTML = (str) => {
 };
 // 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");
+var $fragment = /* @__PURE__ */ Symbol.for("jsx.fragment");
+var $html = /* @__PURE__ */ Symbol.for("jsx.html");
+var $vnode = /* @__PURE__ */ Symbol.for("jsx.vnode");
+var $setup = /* @__PURE__ */ Symbol.for("mono.setup");
 // version.ts
-var VERSION = "0.9.0";
+var VERSION = "0.9.3";
 // render.ts
 var FunctionIdGenerator = class extends Map {
@@ -1073,7 +1073,7 @@ function renderAttr(rc, attrName, attrValue, stripSlotProp) {
           console.error("[mono-jsx] Use `ref` outside of a component function");
         } else {
           const refId = rc.fc.refs++;
-          const effects = signals[Symbol.for("effects")];
+          const effects = signals[/* @__PURE__ */ Symbol.for("effects")];
           effects.push("()=>(" + String(attrValue) + ')(this.refs["' + refId + '"])');
           attr = " data-ref=" + toAttrStringLit(rc.fc.id + ":" + refId);
         }
@@ -1244,9 +1244,9 @@ function createThisProxy(rc, scopeId) {
           return (effect) => {
             effects.push(String(effect));
           };
-        case Symbol.for("effects"):
+        case /* @__PURE__ */ Symbol.for("effects"):
           return effects;
-        case Symbol.for("mark"):
+        case /* @__PURE__ */ Symbol.for("mark"):
           return mark;
         case "url":
           if (scopeId === 0) {
@@ -1345,7 +1345,7 @@ async function createSession(request, options) {
   return session;
 }
 function markSignals(rc, signals) {
-  signals[Symbol.for("mark")](rc);
+  signals[/* @__PURE__ */ Symbol.for("mark")](rc);
 }
 function traverseProps(obj, callback, path = []) {
   const isArray = Array.isArray(obj);

package/package.json CHANGED Viewed

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

package/setup.mjs CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,3 +1,10 @@
 /// <reference types="../jsx.d.ts" />
-export const Store: <T extends Record<string, unknown>>(initValue: T) => FC & T;
+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[];
+}
+export const atom: <T>(initValue: T) => IAtom<T>;
+export const store: <T extends Record<string, unknown>>(initValue: T) => T;

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

@@ -1,5 +1,4 @@
 import type { ComponentType, VNode } from "../jsx.d.ts";
-import type * as Mono from "./mono.d.ts";
 export const html: JSX.Raw;
 export const JSX: typeof globalThis.JSX;
@@ -10,8 +9,13 @@ export const jsx: (tag: string | ComponentType, props: Record<string, unknown>,
 export { html as css, html as js, jsx as jsxDEV, jsx as jsxs };
 declare global {
-  namespace JSX {
-    interface BuiltinElements extends Mono.Elements {}
+  interface FCExtension<FC> {
+    /**
+     * Creates a new signals object.
+     *
+     * **⚠ This is a client-side only API.**
+     */
+    extend<T extends Record<string, unknown>>(initValue: T): FC & T;
   }
   interface HTMLElement {

package/types/jsx.d.ts CHANGED Viewed

@@ -1,7 +1,9 @@
 import type { HTML } from "./html.d.ts";
-export type ChildType = MaybeArray<JSX.Element | string | number | bigint | boolean | null | undefined>;
+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> = { get: () => T };
 export type MaybePromiseOrGenerator<T> = T | Promise<T> | Generator<T> | AsyncGenerator<T>;
 export interface BaseAttributes {
@@ -57,6 +59,57 @@ export interface ComponentType<P = {}> {
   rendering?: string;
 }
+export interface MonoBuiltinElements {
+  /**
+   * A built-in element of mono-jsx that toggles the visibility of its children.
+   * @mono-jsx
+   */
+  show: BaseAttributes & {
+    /**
+     * Show the children if the value is truthy.
+     */
+    when?: any;
+    /**
+     * Enables view transition for the children.
+     */
+    viewTransition?: string | boolean;
+  };
+  /**
+   * A built-in element of mono-jsx that toggles the visibility of its children.
+   * @mono-jsx
+   */
+  hidden: BaseAttributes & {
+    /**
+     * Hide the children if the value is truthy.
+     */
+    when?: any;
+    /**
+     * Enables view transition for the children.
+     */
+    viewTransition?: string | boolean;
+  };
+  /**
+   * A a built-in element of mono-jsx that chooses one of its children based on the `slot` attribute to display.
+   * It is similar to a switch statement in programming languages.
+   * @mono-jsx
+   */
+  switch: BaseAttributes & {
+    /**
+     * Which child to display.
+     */
+    value?: string | number | boolean | null;
+    /**
+     * Enables view transition for the children.
+     */
+    viewTransition?: string | boolean;
+  };
+}
 declare global {
   namespace JSX {
     type ElementType<P = any> =
@@ -71,7 +124,7 @@ declare global {
     interface CustomElements {}
     interface Element extends VNode, Response {}
     interface IntrinsicAttributes extends BaseAttributes, AsyncComponentAttributes {}
-    interface IntrinsicElements extends HTML.Elements, HTML.SVGElements, HTML.CustomElements, JSX.BuiltinElements {}
+    interface IntrinsicElements extends HTML.Elements, HTML.SVGElements, HTML.CustomElements, JSX.BuiltinElements, MonoBuiltinElements {}
   }
   interface FCExtension<FC = {}> {}

package/types/mono.d.ts CHANGED Viewed

@@ -3,55 +3,6 @@ import type { AsyncComponentAttributes, BaseAttributes, ComponentType } from "./
 export type WithParams<T> = T & { params?: Record<string, string> };
 export interface Elements {
-  /**
-   * A built-in element of mono-jsx that toggles the visibility of its children.
-   * @mono-jsx
-   */
-  show: BaseAttributes & {
-    /**
-     * Show the children if the value is truthy.
-     */
-    when?: any;
-    /**
-     * Enables view transition for the children.
-     */
-    viewTransition?: string | boolean;
-  };
-  /**
-   * A built-in element of mono-jsx that toggles the visibility of its children.
-   * @mono-jsx
-   */
-  hidden: BaseAttributes & {
-    /**
-     * Hide the children if the value is truthy.
-     */
-    when?: any;
-    /**
-     * Enables view transition for the children.
-     */
-    viewTransition?: string | boolean;
-  };
-  /**
-   * A a built-in element of mono-jsx that chooses one of its children based on the `slot` attribute to display.
-   * It is similar to a switch statement in programming languages.
-   * @mono-jsx
-   */
-  switch: BaseAttributes & {
-    /**
-     * Which child to display.
-     */
-    value?: string | number | boolean | null;
-    /**
-     * Enables view transition for the children.
-     */
-    viewTransition?: string | boolean;
-  };
   /**
    * A built-in element of mono-jsx that is used to load components lazily,
    * which can improve performance by reducing the initial load time of the application.
@@ -238,7 +189,7 @@ export interface Session {
 }
 declare global {
-  interface FCExtension {
+  interface FCExtension<FC> {
     /**
      * The global signals shared across the application.
      */

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

@@ -1,65 +0,0 @@
-import type { BaseAttributes } from "../jsx.d.ts";
-export interface Elements {
-  /**
-   * A built-in element of mono-jsx that toggles the visibility of its children.
-   * @mono-jsx
-   */
-  show: BaseAttributes & {
-    /**
-     * Show the children if the value is truthy.
-     */
-    when?: any;
-    /**
-     * Enables view transition for the children.
-     */
-    viewTransition?: string | boolean;
-  };
-  hidden: BaseAttributes & {
-    /**
-     * Hide the children if the value is truthy.
-     */
-    when?: any;
-    /**
-     * Enables view transition for the children.
-     */
-    viewTransition?: string | boolean;
-  };
-  /**
-   * A a built-in element of mono-jsx that chooses one of its children based on the `slot` attribute to display.
-   * It is similar to a switch statement in programming languages.
-   * @mono-jsx
-   */
-  switch: BaseAttributes & {
-    /**
-     * Which child to display.
-     */
-    value?: string | number | boolean | null;
-    /**
-     * Enables view transition for the children.
-     */
-    viewTransition?: string | boolean;
-  };
-}
-declare global {
-  interface FCExtension<FC> {
-    /**
-     * Creates a new signals object.
-     *
-     * **⚠ This is a client-side only API.**
-     */
-    extend<T extends Record<string, unknown>>(initValue: T): FC & T;
-  }
-  /**
-   * Creates a new signals object.
-   * @mono-jsx
-   */
-  var Store: <T extends Record<string, unknown>>(initValue: T) => FC & T;
-}