mono-jsx 0.7.2 → 0.7.4

package/jsx-runtime.mjs

@@ -16,7 +16,7 @@ var STYLE_JS = `{var l=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^o
 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;}`;
-var SIGNALS_JS = `{let m;const w=window,p=document,y=new Map,k=new Map,l=n=>k.get(n)??k.set(n,T(n)).get(n),$=()=>Object.create(null),f=(n,e)=>n.getAttribute(e),T=n=>{const e=$(),t=(c,r)=>{e[c]=r},s=new Map,o=(c,r)=>{let i=s.get(c);return i||(i=new Set,s.set(c,i)),i.add(r),()=>{i.delete(r),i.size===0&&s.delete(c)}},a=new Proxy($(),{get:(c,r)=>p.querySelector("[data-ref='"+n+":"+r+"']")});return new Proxy(e,{get:(c,r,i)=>{switch(r){case"$init":return t;case"$watch":return o;case"app":return l(0);case"refs":return a;default:return m?.(n,r),Reflect.get(c,r,i)}},set:(c,r,i,d)=>{if(i!==Reflect.get(c,r,d)){const u=s.get(r);return u&&queueMicrotask(()=>u.forEach(g=>g())),Reflect.set(c,r,i,d)}return!1}})},v=(n,e,t)=>{switch(e){case"toggle":return $renderToggle(n,t);case"switch":return $renderSwitch(n,t);case"html":return()=>n.innerHTML=""+t()}if(e&&e.length>2&&e.startsWith("[")&&e.endsWith("]"))return $renderAttr(n,e.slice(1,-1),t);const s=n.parentElement,o=()=>n.textContent=""+t();return p.startViewTransition&&s.hasAttribute("data-vt")?(s.style.viewTransitionName=s.getAttribute("data-vt"),()=>p.startViewTransition(o)):o},E=n=>{const e=n.indexOf(":");return e>0?[Number(n.slice(0,e)),n.slice(e+1)]:null},b=async n=>{const e=n();return e!==void 0?e:(await new Promise(t=>setTimeout(t,0)),b(n))},S=n=>{typeof n=="function"&&n()},M=(n,e)=>customElements.define(n,class extends HTMLElement{disposes=[];connectedCallback(){e(this)}disconnectedCallback(){this.disposes.forEach(t=>t()),this.disposes.length=0}});M("m-signal",n=>{const e=Number(f(n,"scope")),t=l(e),s=f(n,"key");if(s)n.disposes.push(t.$watch(s,v(n,f(n,"mode"),()=>t[s])));else{const o=Number(f(n,"computed"));b(()=>y.get(e*1e9+o)).then(([a,c])=>{const r=v(n,f(n,"mode"),a.bind(t));c.forEach(i=>{const[d,u]=E(i);n.disposes.push(l(d).$watch(u,r))})})}}),M("m-effect",n=>{const{disposes:e}=n,t=Number(f(n,"scope")),s=Number(f(n,"n")),o=new Array(s);e.push(()=>{o.forEach(S),o.length=0});for(let a=0;a<s;a++){const c="$ME_"+t+"_"+a;b(()=>w[c]).then(r=>{const i=[],d=l(t),u=()=>{S(o[a]),o[a]=r.call(d)};m=(g,h)=>i.push([g,h]),u(),m=void 0;for(const[g,h]of i)e.push(l(g).$watch(h,u))},()=>{})}}),w.$MS=(n,e)=>{const[t,s]=E(n);l(t).$init(s,e)},w.$MC=(n,e,t,s)=>{y.set(n*1e9+e,[t,s])},w.$patch=(n,...e)=>{for(const[t,...s]of e){const o=s.pop();let a=n;for(const c of s)a=a[c];a[o]=t}return n},w.$signals=n=>n!==void 0?l(n):void 0;}`;
+var SIGNALS_JS = `{let m;const w=window,p=document,y=new Map,k=new Map,l=n=>k.get(n)??k.set(n,M(n)).get(n),$=()=>Object.create(null),f=(n,e)=>n.getAttribute(e),M=n=>{const e=$(),t=(i,r)=>{e[i]=r},s=new Map,a=(i,r)=>{let o=s.get(i);return o||(o=new Set,s.set(i,o)),o.add(r),()=>{o.delete(r),o.size===0&&s.delete(i)}},c=new Proxy($(),{get:(i,r)=>p.querySelector("[data-ref='"+n+":"+r+"']")});return new Proxy(e,{get:(i,r,o)=>{switch(r){case"$init":return t;case"$watch":return a;case"app":return l(0);case"refs":return c;default:return m?.(n,r),Reflect.get(i,r,o)}},set:(i,r,o,d)=>{if(o!==Reflect.get(i,r,d)){const u=s.get(r);return u&&queueMicrotask(()=>u.forEach(g=>g())),Reflect.set(i,r,o,d)}return!1}})},v=(n,e,t)=>{switch(e){case"toggle":return $renderToggle(n,t);case"switch":return $renderSwitch(n,t);case"html":return()=>n.innerHTML=""+t()}if(e&&e.length>2&&e.startsWith("[")&&e.endsWith("]"))return $renderAttr(n,e.slice(1,-1),t);const s=n.parentElement,a=()=>n.textContent=""+t();if(p.startViewTransition&&s.hasAttribute("data-vt")){const c=s.getAttribute("data-vt");return c&&(s.style.viewTransitionName=c),()=>p.startViewTransition(a)}return a},E=n=>{const e=n.indexOf(":");return e>0?[Number(n.slice(0,e)),n.slice(e+1)]:null},b=async n=>{const e=n();return e!==void 0?e:(await new Promise(t=>setTimeout(t,0)),b(n))},S=n=>{typeof n=="function"&&n()},T=(n,e)=>customElements.define(n,class extends HTMLElement{disposes=[];connectedCallback(){e(this)}disconnectedCallback(){this.disposes.forEach(t=>t()),this.disposes.length=0}});T("m-signal",n=>{const e=Number(f(n,"scope")),t=l(e),s=f(n,"key");if(s)n.disposes.push(t.$watch(s,v(n,f(n,"mode"),()=>t[s])));else{const a=Number(f(n,"computed"));b(()=>y.get(e*1e9+a)).then(([c,i])=>{const r=v(n,f(n,"mode"),c.bind(t));i.forEach(o=>{const[d,u]=E(o);n.disposes.push(l(d).$watch(u,r))})})}}),T("m-effect",n=>{const{disposes:e}=n,t=Number(f(n,"scope")),s=Number(f(n,"n")),a=new Array(s);e.push(()=>{a.forEach(S),a.length=0});for(let c=0;c<s;c++){const i="$ME_"+t+"_"+c;b(()=>w[i]).then(r=>{const o=[],d=l(t),u=()=>{S(a[c]),a[c]=r.call(d)};m=(g,h)=>o.push([g,h]),u(),m=void 0;for(const[g,h]of o)e.push(l(g).$watch(h,u))},()=>{})}}),w.$MS=(n,e)=>{const[t,s]=E(n);l(t).$init(s,e)},w.$MC=(n,e,t,s)=>{y.set(n*1e9+e,[t,s])},w.$patch=(n,...e)=>{for(const[t,...s]of e){const a=s.pop();let c=n;for(const i of s)c=c[i];c[a]=t}return n},w.$signals=n=>n!==void 0?l(n):void 0;}`;
 var SUSPENSE_JS = `{const i=new Map,o=e=>e.getAttribute("chunk-id"),l=(e,t)=>customElements.define(e,class extends HTMLElement{connectedCallback(){t(this)}});l("m-portal",e=>{i.set(o(e),e)}),l("m-chunk",e=>{setTimeout(()=>{const t=o(e),n=i.get(t),s=e.firstChild?.content.childNodes;n&&(e.hasAttribute("next")?s&&n.before(...s):(e.hasAttribute("done")?n.remove():s&&n.replaceWith(...s),i.delete(t)),e.remove())})});}`;
 var COMPONENT_JS = `{const e=document,a=(t,s)=>t.getAttribute(s);customElements.define("m-component",class extends HTMLElement{static observedAttributes=["name","props"];#t;#s;#r;#h;#i;#e=new Map;#a=!0;async#l(){if(!this.#t){this.#n("");return}const t=this.#s||"{}",s=this.#t+t,i={"x-component":this.#t,"x-props":t,"x-flags":$FLAGS},n=new AbortController;if(this.#h?.abort(),this.#h=n,this.#e.has(s)){this.#n(this.#e.get(s));return}this.#r?.length&&this.#n(this.#r);const r=await fetch(location.href,{headers:i,signal:n.signal});if(!r.ok)throw this.#n(""),new Error("Failed to fetch component '"+this.#t+"'");const[h,o]=await r.json();this.#e.set(s,h),this.#n(h),o&&(e.body.appendChild(e.createElement("script")).textContent=o)}#n(t){const s=()=>typeof t=="string"?this.innerHTML=t:this.replaceChildren(...t);this.hasAttribute("vt")&&e.startViewTransition&&!this.#a?e.startViewTransition(s):s(),this.#a=!1}get name(){return this.#t??null}set name(t){t&&t!==this.#t&&(this.#t=t,this.#o())}get props(){return this.#s?JSON.parse(this.#s):void 0}set props(t){const s=typeof t=="string"?t:JSON.stringify(t);s&&s!==this.#s&&(this.#s=s,this.#o())}attributeChangedCallback(t,s,i){this.#t&&i&&(t==="name"?this.name=i:t==="props"&&(this.props=i))}connectedCallback(){setTimeout(()=>{if(!this.#r){const t=a(this,"props");this.#t=a(this,"name"),this.#s=t?.startsWith("base64,")?atob(t.slice(7)):void 0,this.#r=[...this.childNodes]}this.#l()})}disconnectedCallback(){this.#e.clear(),this.#h?.abort(),this.#h=void 0,this.#i&&clearTimeout(this.#i),this.#i=void 0}#o(){this.#i&&clearTimeout(this.#i),this.#i=setTimeout(()=>{this.#i=void 0,this.#l()},50)}refresh(){this.#t&&this.#e.delete(this.#t+(this.#s||"{}")),this.#o()}});}`;
 var ROUTER_JS = `{const n=document,a=location,o=t=>t.split("#",1)[0],l=t=>o(t)===o(a.href);customElements.define("m-router",class extends HTMLElement{#t;#s;#i;#n;#e=new Map;#r=!0;async#c(t){const s=new AbortController,i={"x-route":"true","x-flags":$FLAGS};this.#n?.abort(),this.#n=s;const e=await fetch(t,{headers:i,signal:s.signal});if(e.status===404)return null;if(!e.ok)throw this.replaceChildren(),new Error("Failed to fetch route: "+e.status+" "+e.statusText);return e.json()}#a(t){const s=()=>typeof t=="string"?this.innerHTML=t:this.replaceChildren(...t);this.hasAttribute("vt")&&n.startViewTransition&&!this.#r?n.startViewTransition(s):s(),this.#r=!1}#o(){n.querySelectorAll("nav a").forEach(t=>{const{href:s,classList:i}=t,e=t.closest("nav")?.getAttribute("data-active-class")??"active";l(s)?i.add(e):i.remove(e)})}async#l(t,s){const i=this.#c(t).then(e=>{if(e){const[r,c]=e;return this.#e.set(t,r),this.#a(r),c}else this.#e.delete(t),this.#a(this.#t??[]),typeof $signals<"u"&&($signals(0).url=new URL(t))});this.#e.has(t)?this.#a(this.#e.get(t)):await i,history[s?.replace?"replaceState":"pushState"]({},"",t),this.#o(),window.scrollTo(0,0),i.then(e=>{e&&(n.body.appendChild(n.createElement("script")).textContent=e)})}navigate(t,s){const i=new URL(t,a.href);if(i.origin!==a.origin){a.href=t;return}l(i.href)||this.#l(t,s)}connectedCallback(){setTimeout(()=>{if(!this.#t)if(this.hasAttribute("fallback"))this.removeAttribute("fallback"),this.#t=[...this.childNodes];else{this.#t=[];for(const t of this.childNodes)if(t.nodeType===1&&t.tagName==="TEMPLATE"&&t.hasAttribute("m-slot")){this.#t.push(...t.content.childNodes),t.remove();break}}}),this.#s=t=>{if(t.defaultPrevented||t.altKey||t.ctrlKey||t.metaKey||t.shiftKey||!(t.target instanceof HTMLAnchorElement))return;const{download:s,href:i,rel:e,target:r}=t.target;s||e==="external"||r==="_blank"||!i.startsWith(a.origin)||(t.preventDefault(),this.navigate(i))},this.#i=()=>this.#l(a.href),addEventListener("popstate",this.#i),n.addEventListener("click",this.#s),setTimeout(()=>this.#o()),globalThis.$router=this}disconnectedCallback(){removeEventListener("popstate",this.#i),n.removeEventListener("click",this.#s),delete globalThis.$router,this.#n?.abort(),this.#n=void 0,this.#e.clear(),this.#s=void 0,this.#i=void 0}});}`;
@@ -143,7 +143,7 @@ var $signal = Symbol.for("mono.signal");
 var $vnode = Symbol.for("jsx.vnode");
 
 // version.ts
-var VERSION = "0.7.2";
+var VERSION = "0.7.3";
 
 // render.ts
 var cdn = "https://raw.esm.sh";
@@ -408,12 +408,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"]),
@@ -1230,7 +1233,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 +1266,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

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

package/types/html.d.ts

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

@@ -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,123 @@ 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 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 +243,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 +311,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 +390,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>;