npm - mono-jsx - Versions diffs - 0.7.3 → 0.7.5 - Mend

mono-jsx 0.7.3 → 0.7.5

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

package/README.md CHANGED Viewed

@@ -5,7 +5,7 @@
 mono-jsx is a JSX runtime that renders the `<html>` element to a `Response` object.
 - 🚀 No build step needed
-- 🦋 Lightweight (10KB gzipped), zero dependencies
+- 🦋 Lightweight (12KB gzipped), zero dependencies
 - 🚦 Signals as reactive primitives
 - ⚡️ Use web components, no virtual DOM
 - 💡 Complete Web API TypeScript definitions
@@ -428,6 +428,8 @@ export default {
 mono-jsx renders HTML on the server side and sends no hydration JavaScript to the client. To render a component dynamically on the client, you can use the `<component>` element to ask the server to render a component:
+To render a component by name, you can use the `<component>` element with the `name` prop, and ensure the component is registered in the `components` prop of root `<html>` element.
 ```tsx
 export default {
   fetch: (req) => (
@@ -438,31 +440,19 @@ export default {
 }
 ```
-You can use the `<toggle>` element to control when to render a component:
+Or you can use the `<component>` element with the `is` prop to render a component by function reference without registering the component in the `components` prop of root `<html>` element.
 ```tsx
-async function Lazy(this: FC<{ show: boolean }>, props: { url: string }) {
-  this.show = false;
-  return (
-    <div>
-      <toggle show={this.show}>
-        <component name="Foo" props={{ /* props for the component */ }} placeholder={<p>Loading...</p>} />
-      </toggle>
-     <button onClick={() => this.show = true }>Load `Foo` Component</button>
-    </div>
-  )
-}
 export default {
   fetch: (req) => (
-    <html components={{ Foo }}>
-      <Lazy />
+    <html>
+      <component is={Foo} props={{ /* props for the component */ }} placeholder={<p>Loading...</p>} />
     </html>
   )
 }
 ```
-You can also use signals for `name` or `props` attributes of a component. Changing the signal value will trigger the component to re-render with the new name or props:
+You can also use [signals](#using-signals) for `name` or `props` attributes of a component. Changing the signal value will trigger the component to re-render with the new name or props:
 ```tsx
 import { Profile, Projects, Settings } from "./pages.tsx"
@@ -493,6 +483,30 @@ export default {
 }
 ```
+You can use the `<toggle>` element to control when to render a component:
+```tsx
+async function Lazy(this: FC<{ show: boolean }>, props: { url: string }) {
+  this.show = false;
+  return (
+    <div>
+      <toggle show={this.show}>
+        <component name="Foo" props={{ /* props for the component */ }} placeholder={<p>Loading...</p>} />
+      </toggle>
+     <button onClick={() => this.show = true }>Load `Foo` Component</button>
+    </div>
+  )
+}
+export default {
+  fetch: (req) => (
+    <html components={{ Foo }}>
+      <Lazy />
+    </html>
+  )
+}
+```
 ## Using Signals
 mono-jsx uses signals for updating the view when a signal changes. Signals are similar to React's state, but they are more lightweight and efficient. You can use signals to manage state in your components.

package/jsx-runtime.mjs CHANGED Viewed

@@ -12,7 +12,7 @@ var ROUTER = 512;
 var FORM = 1024;
 var EVENT_JS = `{var w=window;w.$emit=(e,f,s)=>f.call(w.$signals?.(s)??e.target,e.type==="mount"?e.target:e);w.$onsubmit=(e,f,s)=>{e.preventDefault();f.call(w.$signals?.(s)??e.target,new FormData(e.target),e)};}`;
 var CX_JS = `{var n=e=>typeof e=="string"?e:typeof e=="object"&&e!==null?Array.isArray(e)?e.map(n).filter(Boolean).join(" "):Object.entries(e).filter(([,t])=>!!t).map(([t])=>t).join(" "):"";window.$cx=n;}`;
-var STYLE_JS = `{var l=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;var u=e=>typeof e=="string",p=e=>typeof e=="object"&&e!==null,f=e=>e.replace(/[a-z][A-Z]/g,o=>o.charAt(0)+"-"+o.charAt(1).toLowerCase());var g=e=>{let o=[],n=[],r=new y;for(let[t,s]of Object.entries(e))switch(t.charCodeAt(0)){case 58:n.push(t.startsWith("::view-")?"":null,t+"{"+c(s)+"}");break;case 64:t.startsWith("@keyframes ")||t.startsWith("@view-")?p(s)&&n.push(t+"{"+Object.entries(s).map(([i,a])=>i+"{"+c(a)+"}").join("")+"}"):n.push(t+"{",null,"{"+c(s)+"}}");break;case 38:n.push(null,t.slice(1)+"{"+c(s)+"}");break;default:o.push([t,s])}return o.length>0&&(r.inline=c(o)),n.length>0&&(r.css=n),r},b=(e,o)=>{let{inline:n,css:r}=g(o);if(r){let t="data-css-",s="["+t+(Date.now()+Math.random()).toString(36).replace(".","")+"]";document.head.appendChild(document.createElement("style")).textContent=(n?s+"{"+n+"}":"")+r.map(i=>i===null?s:i).join(""),e.getAttributeNames().forEach(i=>i.startsWith(t)&&e.removeAttribute(i)),e.setAttribute(s.slice(1,-1),"")}else n&&e.setAttribute("style",n)},c=e=>{if(typeof e=="object"&&e!==null){let o="";for(let[n,r]of Array.isArray(e)?e:Object.entries(e))if(u(r)||typeof r=="number"){let t=f(n),s=typeof r=="number"?l.test(n)?""+r:r+"px":""+r;o+=(o?";":"")+t+":"+(t==="content"?JSON.stringify(s):s)}return o}return""},y=(()=>{function e(){}return e.prototype=Object.freeze(Object.create(null)),e})();window.$applyStyle=b;}`;
+var STYLE_JS = `{var l=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;var u=e=>typeof e=="string",p=e=>typeof e=="object"&&e!==null,f=e=>e.replace(/[a-z][A-Z]/g,o=>o.charAt(0)+"-"+o.charAt(1).toLowerCase());var g=e=>{let o=[],n=[],r=new h;for(let[t,s]of Object.entries(e))switch(t.charCodeAt(0)){case 58:n.push(t.startsWith("::view-")?"":null,t+"{"+c(s)+"}");break;case 64:t.startsWith("@keyframes ")||t.startsWith("@view-")?p(s)&&n.push(t+"{"+Object.entries(s).map(([i,a])=>i+"{"+c(a)+"}").join("")+"}"):n.push(t+"{",null,"{"+c(s)+"}}");break;case 38:n.push(null,t.slice(1)+"{"+c(s)+"}");break;default:o.push([t,s])}return o.length>0&&(r.inline=c(o)),n.length>0&&(r.css=n),r},b=(e,o)=>{let{inline:n,css:r}=g(o);if(r){let t="data-css-",s="["+t+(Date.now()+Math.random()).toString(36).replace(".","")+"]";document.head.appendChild(document.createElement("style")).textContent=(n?s+"{"+n+"}":"")+r.map(i=>i===null?s:i).join(""),e.getAttributeNames().forEach(i=>i.startsWith(t)&&e.removeAttribute(i)),e.setAttribute(s.slice(1,-1),"")}else n&&e.setAttribute("style",n)},c=e=>{if(typeof e=="object"&&e!==null){let o="";for(let[n,r]of Array.isArray(e)?e:Object.entries(e))if(u(r)||typeof r=="number"){let t=f(n),s=typeof r=="number"?l.test(n)?""+r:r+"px":""+r;o+=(o?";":"")+t+":"+(t==="content"?JSON.stringify(s):s)}return o}return""},h=(()=>{function e(){}return e.prototype=Object.freeze(Object.create(null)),e})();window.$applyStyle=b;}`;
 var RENDER_ATTR_JS = `{var s=(l,n,r)=>{let e=l.parentElement;return e.tagName==="M-GROUP"&&(e=e.previousElementSibling),()=>{let t=r();n==="value"?e.value=String(t):n==="checked"?e.checked=!!t:typeof t=="boolean"?e.toggleAttribute(n,t):t==null?e.removeAttribute(n):typeof t=="object"?n==="class"?e.setAttribute(n,$cx(t)):n==="style"?$applyStyle(e,t):e.setAttribute(n,JSON.stringify(t)):e.setAttribute(n,String(t))}};window.$renderAttr=s;}`;
 var RENDER_TOGGLE_JS = `{var i=(e,s)=>{let t,l=()=>e.replaceChildren(...s()?t:[]);return()=>{if(!t){let n=e.firstElementChild;n&&n.tagName==="TEMPLATE"&&n.hasAttribute("m-slot")?t=[...n.content.childNodes]:t=[...e.childNodes]}e.hasAttribute("vt")&&document.startViewTransition?document.startViewTransition(l):l()}};window.$renderToggle=i;}`;
 var RENDER_SWITCH_JS = `{var a=(l,u)=>{let s,r=l.getAttribute("value"),t,i,o=e=>t.get(e)??t.set(e,[]).get(e),d=()=>l.replaceChildren(...t.has(s)?t.get(s):i);return()=>{if(!t){t=new Map,i=[];for(let e of l.childNodes)if(e.nodeType===1&&e.tagName==="TEMPLATE"&&e.hasAttribute("m-slot")){for(let n of e.content.childNodes)n.nodeType===1&&n.hasAttribute("slot")?o(n.getAttribute("slot")).push(n):i.push(n);e.remove()}else r?o(r).push(e):i.push(e)}s=""+u(),l.hasAttribute("vt")&&document.startViewTransition?document.startViewTransition(d):d()}};window.$renderSwitch=a;}`;
@@ -28,6 +28,19 @@ var regexpHtmlSafe = /["'&<>]/;
 var isString = (v) => typeof v === "string";
 var isObject = (v) => typeof v === "object" && v !== null;
 var toHyphenCase = (k) => k.replace(/[a-z][A-Z]/g, (m) => m.charAt(0) + "-" + m.charAt(1).toLowerCase());
+var IdGen = class extends Map {
+  #seq = 0;
+  gen(v) {
+    return this.get(v) ?? this.set(v, this.#seq++).get(v);
+  }
+  getById(id) {
+    for (const [v, i] of this.entries()) {
+      if (i === id) {
+        return v;
+      }
+    }
+  }
+};
 var cx = (className) => {
   if (typeof className === "string") {
     return className;
@@ -143,15 +156,16 @@ var $signal = Symbol.for("mono.signal");
 var $vnode = Symbol.for("jsx.vnode");
 // version.ts
-var VERSION = "0.7.2";
+var VERSION = "0.7.4";
 // render.ts
 var cdn = "https://raw.esm.sh";
-var subtle = crypto.subtle;
 var encoder = new TextEncoder();
 var customElements = /* @__PURE__ */ new Map();
 var voidTags = new Set("area,base,br,col,embed,hr,img,input,keygen,link,meta,param,source,track,wbr".split(","));
 var cache = /* @__PURE__ */ new Map();
+var componentsMap = new IdGen();
+var subtle = crypto.subtle;
 var stringify = JSON.stringify;
 var isVNode = (v) => Array.isArray(v) && v.length === 3 && v[2] === $vnode;
 var isSignal = (v) => isObject(v) && !!v[$signal];
@@ -165,12 +179,6 @@ var Ref = class {
     this.name = name;
   }
 };
-var IdGen = class extends Map {
-  #seq = 0;
-  gen(v) {
-    return this.get(v) ?? this.set(v, this.#seq++).get(v);
-  }
-};
 var IdGenManager = class {
   #scopes = /* @__PURE__ */ new Map();
   size = 0;
@@ -209,11 +217,11 @@ function renderHtml(node, options) {
   const request = options.request;
   const headers = new Headers();
   const reqHeaders = request?.headers;
-  const componentHeader = reqHeaders?.get("x-component");
+  const compHeader = reqHeaders?.get("x-component");
+  let status = options.status;
   let routeFC = request ? Reflect.get(request, "x-route") : void 0;
   let routeForm;
-  let component = componentHeader ? components?.[componentHeader] : null;
-  let status = options.status;
+  let component = compHeader ? compHeader.startsWith("@comp_") ? componentsMap.getById(Number(compHeader.slice(6))) : components?.[compHeader] : null;
   if (request) {
     request.URL = new URL(request.url);
   }
@@ -295,7 +303,7 @@ function renderHtml(node, options) {
       }),
       { headers }
     );
-  } else if (componentHeader) {
+  } else if (compHeader) {
     return new Response("Component not found: " + component, { status: 404 });
   }
   headers.set("content-type", "text/html; charset=utf-8");
@@ -408,12 +416,15 @@ async function render(node, options, write, writeJS, componentMode, routeForm) {
       mcs.clear();
     }
     if (session && session.isDirty) {
-      const sessionEntries = session.entries();
+      const sessionStore = session.all();
       const { name = "session", domain, path, expires, maxAge, secure, sameSite, secret } = options.session?.cookie ?? {};
       if (secret) {
         let cookie = name + "=";
-        if (sessionEntries.length > 0) {
-          const data = JSON.stringify(sessionEntries);
+        if (Object.keys(sessionStore).length > 0) {
+          const data = JSON.stringify([
+            sessionStore,
+            Math.floor((expires ? expires.getTime() : Date.now() + (maxAge ?? 18e5)) / 1e3)
+          ]);
           const signature = await subtle.sign(
             "HMAC",
             await subtle.importKey("raw", encoder.encode(secret), { name: "HMAC", hash: "SHA-256" }, false, ["sign"]),
@@ -630,19 +641,25 @@ async function renderNode(rc, node, stripSlotProp) {
           }
           // `<component>` element
           case "component": {
-            let { placeholder, viewTransition } = props;
+            let { placeholder, viewTransition, is } = props;
             let attrs = "";
             let attrModifiers = "";
             for (const p of ["name", "props", "ref"]) {
-              let propValue = props[p];
-              let [attr, , attrSignal] = renderAttr(rc, p, propValue);
+              const [attr, , attrSignal] = renderAttr(rc, p, props[p]);
               if (attrSignal) {
                 attrModifiers += renderSignal(rc, attrSignal, [p]);
                 rc.flags.runtime |= RENDER_ATTR;
-                propValue = attrSignal[$signal].value;
               }
               attrs += attr;
             }
+            if (!props.name && typeof is === "function" && is.name) {
+              const c = is.name.charCodeAt(0);
+              if (c >= /*A*/
+              65 && c <= /*Z*/
+              90) {
+                attrs += ' name="@comp_' + componentsMap.gen(is) + '"';
+              }
+            }
             attrs += renderViewTransitionAttr(viewTransition);
             let buf = "<m-component" + attrs + ">";
             if (placeholder) {
@@ -1230,7 +1247,7 @@ async function createSession(request, options) {
       return isDirty;
     },
     get: (key) => sessionStore.get(key),
-    entries: () => [...sessionStore.entries()],
+    all: () => Object.fromEntries(sessionStore.entries()),
     set: (key, value) => {
       sessionStore.set(key, value);
       isDirty = true;
@@ -1263,8 +1280,11 @@ async function createSession(request, options) {
           encoder.encode(data)
         );
         if (verified) {
-          sessionId = sid;
-          sessionStore = new Map(JSON.parse(data));
+          const [map, exp] = JSON.parse(data);
+          if (typeof exp === "number" && exp * 1e3 > Date.now()) {
+            sessionStore = new Map(Object.entries(map));
+            sessionId = sid;
+          }
         }
       } catch (_) {
       }

package/package.json CHANGED Viewed

@@ -1,12 +1,12 @@
 {
   "name": "mono-jsx",
-  "version": "0.7.3",
+  "version": "0.7.5",
   "description": "`<html>` as a `Response`.",
   "type": "module",
   "module": "./index.mjs",
   "types": "./types/index.d.ts",
   "bin": {
-    "mono-jsx": "./bin/mono-jsx"
+    "mono-jsx": "bin/mono-jsx"
   },
   "exports": {
     ".": {
@@ -35,6 +35,6 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/ije/mono-jsx"
+    "url": "git+https://github.com/ije/mono-jsx.git"
   }
 }

package/types/html.d.ts CHANGED Viewed

@@ -46,6 +46,7 @@ export namespace HTML {
   interface GlobalAttributes<T extends EventTarget> extends EventAttributes<T>, Aria.Attributes, Mono.BaseAttributes, JSX.HtmlTag {
     /**
      * A reference to the element.
+     * @mono-jsx
      */
     ref?: HTMLElement | ((el: T) => unknown);
     /** Defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS). */
@@ -105,6 +106,12 @@ export namespace HTML {
     is?: string;
     /** A boolean value that makes the browser disregard user input events for the element. Useful when click events are present. */
     inert?: boolean;
+    /**
+     * Enables view transition for the element.
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API
+     * @mono-jsx
+     */
+    viewTransition?: string | boolean;
   }
   interface HtmlAttributes<T extends EventTarget> extends GlobalAttributes<T>, RenderOptions {}

package/types/mono.d.ts CHANGED Viewed

@@ -98,11 +98,6 @@ export interface BaseAttributes {
    * The `slot` attribute assigns a slot in a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM) shadow tree to an element: An element with a `slot` attribute is assigned to the slot created by the `<slot>` element whose name attribute's value matches that slot attribute's value.
    */
   slot?: string;
-  /**
-   * The `viewTransition` attribute is used to control the view transition of the children.
-   * @mono-jsx
-   */
-  viewTransition?: string | boolean;
 }
 export interface AsyncComponentAttributes {
@@ -123,95 +118,127 @@ export interface AsyncComponentAttributes {
 export interface Elements {
   /**
-   * The `toggle` element is a built-in element of mono-jsx that toggles the visibility of its children.
+   * A built-in element of mono-jsx that toggles the visibility of its children.
+   * @mono-jsx
    */
   toggle: BaseAttributes & {
     /**
-     * The `show` attribute is used to control the visibility of the children.
+     * The visibility of the children.
      */
     show?: any;
     /**
-     * The `hidden` attribute is used to control the visibility of the children.
+     * The visibility of the children.
      */
     hidden?: any;
+    /**
+     * Enables view transition for the children.
+     */
+    viewTransition?: string | boolean;
   };
   /**
-   * The `switch` element is a built-in element of mono-jsx that chooses one of its children based on the `slot` attribute to display.
+   * 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 & {
     /**
-     * The `value` attribute is used to control the value of the children.
+     * Which child to display.
      */
     value?: string | number | boolean | null;
+    /**
+     * Enables view transition for the children.
+     */
+    viewTransition?: string | boolean;
   };
   /**
-   * The `component` element is a built-in element of mono-jsx that is used to load components lazily,
+   * 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.
+   * @mono-jsx
    */
   component: BaseAttributes & AsyncComponentAttributes & {
     /**
-     * The `name` attribute is used to control the name of the component.
+     * The name of the component to render.
      */
     name?: string;
     /**
-     * The `props` attribute is used to control the props of the component.
+     * The component to render.
+     */
+    is?: import("./jsx.d.ts").FC<any>;
+    /**
+     * The props of the component to render.
      */
     props?: Record<string, unknown>;
     /**
-     * The `ref` attribute is used to control the ref of the component.
+     * The ref of the component.
      */
     ref?: ComponentElement | ((el: ComponentElement) => void);
+    /**
+     * Enables view transition for the children.
+     */
+    viewTransition?: string | boolean;
   };
   /**
-   * The `router` element is a built-in element of mono-jsx that provides SPA routing.
+   * A built-in element of mono-jsx that provides SPA routing.
+   * @mono-jsx
    */
   router: BaseAttributes & AsyncComponentAttributes & {
     /**
-     * The `base` attribute is used to set the base URL for the router.
+     * The base URL for the router.
      */
     base?: string;
     /**
-     * The `ref` attribute is used to control the ref of the router.
+     * The ref of the router.
      */
     ref?: RouterElement | ((el: RouterElement) => void);
+    /**
+     * Enables view transition for the children.
+     * @mono-jsx
+     */
+    viewTransition?: string | boolean;
   };
   /**
-   * The `cache` element is a built-in element of mono-jsx that caches the rendered content of the child nodes
+   * A built-in element of mono-jsx that caches the rendered content of the child nodes
    * with the given key and TTL.
+   * @mono-jsx
    */
   cache: BaseAttributes & {
     /**
-     * The `key` attribute is used to control the key of the cache.
+     * The key of the cache.
      */
     key?: string;
     /**
-     * The `ttl` attribute is used to control the TTL of the cache.
+     * The time-to-live of the cache in seconds.
      */
     ttl?: number;
   };
   /**
-   * The `static` element is a built-in element of mono-jsx that treats the child nodes as static content,
+   * A built-in element of mono-jsx that treats the child nodes as static content,
    * When the child nodes are rendered once, they will be cached in memory and reused on subsequent renders.
+   * @mono-jsx
    */
   static: BaseAttributes;
   /**
-   * The `redirect` element is a built-in element of mono-jsx that redirects to the given URL in the client side.
+   * A built-in element of mono-jsx that redirects to the given URL in the client side.
+   * @mono-jsx
    */
   redirect: {
     /**
-     * The `to` attribute is used to control the redirect URL.
+     * The redirect URL.
      */
     to?: string | URL;
     /**
-     * The `replace` attribute is used to control the replace behavior of the redirect.
+     * The replace behavior of the redirect.
      * Only works when the `router` element is used.
      */
     replace?: boolean;
   };
   /**
-   * The `invalid` element is a built-in element of mono-jsx that sets custom validation
+   * A built-in element of mono-jsx that sets custom validation
    * state for the form elements.
+   * @mono-jsx
    */
   invalid: BaseAttributes & {
     /**
@@ -220,63 +247,67 @@ export interface Elements {
     for?: string;
   };
   /**
-   * The `formslot` element is a built-in element of mono-jsx that is used to display the content of the route form
+   * A built-in element of mono-jsx that is used to display the content of the route form
    * in the `form` element.
+   * @mono-jsx
    */
   formslot: BaseAttributes & {
+    /**
+     * The insert position of the formslot.
+     */
     mode?: "insertbefore" | "insertafter" | "replace";
   };
 }
 /**
- * The `Session` type defines the session API.
+ * The session storage API.
  */
 export interface Session {
   /**
-   * The `sessionId` is used to identify the session.
+   * The session ID.
    */
   readonly sessionId: string;
   /**
-   * The `isDirty` is true, update the session cookie to the client.
+   * If true, update the session cookie to the client.
    */
   readonly isDirty: boolean;
   /**
-   * The `get` method is used to get a value from the session.
+   * Gets a value from the session.
    */
   get<T = unknown>(key: string): T | undefined;
   /**
-   * The `entries` method is used to get all the entries from the session.
+   * Gets all the entries from the session.
    */
-  entries(): [string, unknown][];
+  all(): Record<string, unknown>;
   /**
-   * The `set` method is used to set a value in the session.
+   * Sets a value in the session.
    */
   set(key: string, value: string | number | boolean | any[] | Record<string, unknown>): void;
   /**
-   * The `delete` method is used to delete a value from the session.
+   * Deletes a value from the session.
    */
   delete(key: string): void;
   /**
-   * The `destroy` method is used to destroy the session.
+   * Destroys the session.
    */
   destroy(): void;
 }
 declare global {
   /**
-   * The `html` function is used to create XSS-unsafed HTML content.
+   * Creates XSS-unsafed HTML content.
    */
   var html: JSX.Raw;
   /**
-   * The `css` function is an alias to `html`.
+   * An alias to `html`.
    */
   var css: JSX.Raw;
   /**
-   * The `js` function is an alias to `html`.
+   * An alias to `html`.
    */
   var js: JSX.Raw;
   /**
-   *  The `FC` type defines Signals/Context/Refs API.
+   *  Defines the Signals/Context/Refs types.
    */
   type FC<Signals = {}, AppSignals = {}, Context = {}, Refs = {}, AppRefs = {}> = {
     /**
@@ -284,78 +315,78 @@ declare global {
      */
     readonly app: {
       /**
-       * The `app.refs` object is used to store variables in the application scope.
+       * The `app.refs` object stores variables in the application scope.
        * It is similar to `refs`, but it is shared across all components in the application.
        *
        * **⚠ This is a client-side only API.**
        */
       readonly refs: AppRefs;
       /**
-       * The `app.url` object contains the current URL information.
+       * The `app.url` object contains the current URL.
        */
       readonly url: WithParams<URL>;
     } & Omit<AppSignals, "refs" | "url">;
     /**
-     * The rendering context.
+     * The rendering context object.
      *
      * **⚠ This is a server-side only API.**
      */
     readonly context: Context;
     /**
-     * The `request` object contains the current request information.
+     * The `request` object contains the current request.
      *
      * **⚠ This is a server-side only API.**
      */
     readonly request: WithParams<
       Request & {
         /**
-         * Returns the URL of request as a URL object.
+         * Returns the URL of the request as a URL object.
          */
         URL: URL;
       }
     >;
     /**
-     * The `form` object created by the route form submission.
+     * The `form` object created by the route form.
      *
      * **⚠ This is a server-side only API.**
      */
     readonly form?: FormData;
     /**
-     * The `session` object contains the current session information.
+     * The `session` object contains the current session.
      *
      * **⚠ This is a server-side only API.**
      */
     readonly session: Session;
     /**
-     * The `refs` object is used to store variables in clide side.
+     * The `refs` object stores variables in clide side.
      *
      * **⚠ This is a client-side only API.**
      */
     readonly refs: Refs;
     /**
-     * The `computed` method is used to create a computed signal.
+     * Creates a computed signal.
      */
     readonly computed: <T = unknown>(fn: () => T) => T;
     /**
-     * `this.$(fn)` is a shortcut for `this.computed(fn)`.
+     * A shortcut for `this.computed(fn)`.
      */
     readonly $: FC["computed"];
     /**
-     * The `effect` method is used to create a side effect.
+     * Creates a side effect.
      * **The effect function is only called on client side.**
      */
     readonly effect: (fn: () => void | (() => void)) => void;
   } & Omit<Signals, "app" | "context" | "request" | "session" | "form" | "refs" | "computed" | "$" | "effect">;
   /**
-   *  The `Refs` defines the `refs` types.
+   *  Defines the `refs` type.
    */
   type Refs<T, R = {}, RR = {}> = T extends FC<infer S, infer A, infer C> ? FC<S, A, C, R, RR> : never;
   /**
-   * The `Context` defines the `context` types.
+   * Defines the `context` type.
    */
   type Context<T, C = {}> = T extends FC<infer S, infer A, infer _, infer R, infer RR> ? FC<S, A, C, R, RR> : never;
   /**
-   * The `ComponentElement` type defines the component element.
+   * The `<component>` element.
    */
   type ComponentElement = {
     name: string;
@@ -363,7 +394,7 @@ declare global {
     refresh: () => Promise<void>;
   };
   /**
-   * The `RouterElement` type defines the router element.
+   * The `<router>` element.
    */
   type RouterElement = {
     navigate: (url: string | URL, options?: { replace?: boolean }) => Promise<void>;