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

mono-jsx 0.9.1 → 0.9.2

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

package/README.md +3 -19
package/dom/index.mjs +5 -2
package/dom/jsx-runtime.mjs +21 -17
package/index.mjs +1 -1
package/jsx-runtime.mjs +11 -9
package/package.json +1 -1
package/types/dom/index.d.ts +6 -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,8 @@
 // dom/index.ts
-import { Store } from "./jsx-runtime.mjs";
+import { createStore } from "./jsx-runtime.mjs";
+var atom = (initValue) => createStore({ value: initValue });
+var store = createStore;
 export {
-  Store
+  atom,
+  store
 };

package/dom/jsx-runtime.mjs CHANGED Viewed

@@ -12,6 +12,7 @@ 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) => {
@@ -34,10 +35,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 {
@@ -134,12 +134,13 @@ 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 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);
@@ -156,7 +157,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 +205,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;
                 }
@@ -274,10 +273,16 @@ var createScope = (slots, abortSignal) => {
 };
 var createStore = (props) => {
   const scope = createScope().extend(props);
-  stores.add(scope);
+  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":
@@ -709,7 +714,6 @@ HTMLElement.prototype.mount = function(node, aboutSignal) {
   render(null, node, this, aboutSignal);
 };
 Object.assign(globalThis, {
-  Store: createStore,
   JSX,
   html,
   css: html,
@@ -718,7 +722,7 @@ Object.assign(globalThis, {
 export {
   Fragment,
   JSX,
-  createStore as Store,
+  createStore,
   html as css,
   html,
   html as js,

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.1";
 // render.ts
 var FunctionIdGenerator = class extends Map {
@@ -897,6 +897,8 @@ 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;
   }
@@ -1073,7 +1075,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 +1246,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 +1347,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.2",
   "description": "`<html>` as a `Response`.",
   "type": "module",
   "module": "./index.mjs",

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

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