mono-jsx 0.9.0 → 0.9.2

package/README.md

@@ -534,13 +534,13 @@ mono-jsx uses signals for updating the view when a signal changes. Signals are s
 You can use the `this` keyword in your components to manage signals. Signals are bound to the component instance, can be updated directly, and the view will automatically re-render when a signal changes:
 
 ```tsx
-function Counter(
-  this: FC<{ count: number }>,
-  props: { initialCount?: number },
-) {
+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 */}
@@ -1352,13 +1352,13 @@ function Component(this: FC) {
 
 mono-jsx renders HTML dynamically per request; large apps may tax your CPU resources. To improve rendering performance, mono-jsx introduces two built-in elements that can cache the rendered HTML of the children:
 
-- `<cache>` with specified `key` and `ttl`
+- `<cache>` with specified `key` and `maxAge`
 - `<static>` for elements that rarely change, such as `<svg>`
 
 ```tsx
 function BlogPage() {
   return (
-    <cache key="blog" ttl={86400}>
+    <cache key="blog" maxAge={86400}>
       <Blog />
     </cache>
   )

package/dom/index.mjs

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

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

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

@@ -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.8.2";
+var VERSION = "0.9.1";
 
 // render.ts
 var FunctionIdGenerator = class extends Map {
@@ -759,15 +759,15 @@ async function renderNode(rc, node, stripSlotProp) {
           }
           case "cache":
           case "static": {
-            const { $stack, key = $stack, ttl, children } = props;
+            const { $stack, key = $stack, maxAge, children } = props;
             if (children) {
               if (key) {
                 const now = Date.now();
                 const value = cache.get(key);
-                if (value && (!value.expires || value.expires > now)) {
-                  write("<!-- cached -->");
+                if (value && (!value.expiresAt || value.expiresAt > now)) {
+                  write("<!-- " + tag + " -->");
                   write(value.html);
-                  write("<!-- /cached -->");
+                  write("<!-- /" + tag + " -->");
                 } else {
                   let buf = "";
                   await renderChildren(
@@ -780,7 +780,7 @@ async function renderNode(rc, node, stripSlotProp) {
                     children,
                     true
                   );
-                  cache.set(key, { html: buf, expires: ttl ? now + ttl : void 0 });
+                  cache.set(key, { html: buf, expiresAt: typeof maxAge === "number" && maxAge > 0 ? now + maxAge * 1e3 : void 0 });
                   rc.write(buf);
                 }
               } else {
@@ -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

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

package/types/dom/index.d.ts

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

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

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

@@ -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.
@@ -116,9 +67,9 @@ export interface Elements {
      */
     key?: string;
     /**
-     * The time-to-live of the cache in seconds.
+     * The maximum age of the cache in seconds.
      */
-    ttl?: number;
+    maxAge?: number;
   };
 
   /**
@@ -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

@@ -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;
-}