npm - mono-jsx - Versions diffs - 0.9.14 → 0.10.0-beta.2 - Mend

mono-jsx 0.9.14 → 0.10.0-beta.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 (8) hide show

package/README.md CHANGED Viewed

@@ -11,6 +11,7 @@ mono-jsx is a JSX runtime that renders the `<html>` element to a `Response` obje
 - 💡 Complete Web API TypeScript definitions
 - ⏳ Streaming rendering
 - 🗂️ Built-in router (SPA mode)
+- 📡 Built-in remote procedure call (RPC) API
 - 🔑 Session storage
 - 🥷 [htmx](#using-htmx) integration
 - 🌎 Universal, works in Node.js, Deno, Bun, Cloudflare Workers, etc.
@@ -1295,7 +1296,7 @@ export default {
 ## Using Session
-mono-jsx provides a built-in session storage that allows you to manage user sessions. To use the session storage, you need to set the `session` prop on the root `<html>` element with the `cookie.secret` option.
+mono-jsx provides a built-in session storage that allows you to manage sessions. To use session storage, you need to set the `session` prop on the root `<html>` element with the `cookie.secret` option.
 ```tsx
 function Index(this: FC) {
@@ -1356,29 +1357,96 @@ function Component(this: FC) {
 }
 ```
-## Caching
+> [!WARNING]
+> The session storage stores data with cookies. **Therefore, you should never store sensitive data in the session storage.**
-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:
+## Using RPC
-- `<cache>` with specified `key` and `maxAge`
-- `<static>` for elements that rarely change, such as `<svg>`
+mono-jsx provides a built-in RPC API that allows you to call functions on the server from the client side. You can use the `createRPC` function to create a RPC object that contains the functions you want to call on the client side, and then pass it to the `expose` prop on the root `<html>` element.
 ```tsx
-function BlogPage() {
+import { createRPC } from "mono-jsx"
+const rpc = createRPC({
+  whoami: () => ({ name: "John" })
+})
+function App(this: FC<{ user?: { name: string } }>) {
   return (
-    <cache key="blog" maxAge={86400}>
-      <Blog />
-    </cache>
+    <div>
+      <show when={this.user}>
+        <p>Welcome, {this.user!.name}!</p>
+      </show>
+      <button onClick={async () => this.user = await rpc.whoami()}>Who am I?</button>
+    </div>
+  )
+}
+export default {
+  fetch: (req) => (
+    <html request={req} expose={{ rpc }}>
+      <App />
+    </html>
   )
 }
+```
+> [!NOTE]
+> mono-jsx sends the rpc invoke result to the client side as a JSON object.
+### Accessing request info in RPC functions
+You can access the request info in RPC functions by using the `this` scope:
-function Icon() {
+- `this.request`: The [request](#accessing-request-info) object.
+- `this.context`: The [context](#using-context) object.
+- `this.session`: The [session](#session-storage-api) storage.
+```ts
+type Admin = {
+  isAdmin: (id: number) => boolean;
+}
+const rpc = createRPC({
+  whoami: function (this: WithContext<RPC, { admin: Admin }>) {
+    const { admin } = this.context;
+    const user =  this.session.get<{ name: string }>("user")
+    return {
+      ip: this.request.headers.get("x-real-ip"),
+      isAdmin: user ? admin.isAdmin(user.id) : false,
+      user: user,
+    }
+  },
+})
+function App(this: FC) {
   return (
-    <static>
-      <svg>...</svg>
-    </static>
+    <button onClick={async () => console.log(await rpc.whoami())}>Who am I?</button>
   )
 }
+export default {
+  fetch: (req) => (
+    <html
+      request={req}
+      expose={{ rpc }}
+      session={{ cookie: { secret: "..." } }}
+      context={{ admin: { isAdmin: (id: number) => id === 1 } }}
+    >
+      <App />
+    </html>
+  )
+}
+```
+To use `this` in RPC functions, you can't use the arrow function syntax. You need to use the function declaration syntax. And the `RPC` type is defined as follows:
+```ts
+type RPC<Context extends Record<string, unknown> = {}> = {
+  request: Request;
+  context: Context;
+  session: Session;
+}
 ```
 ## Customizing HTML Response

package/index.mjs CHANGED Viewed

@@ -1,9 +1,6 @@
 // index.ts
 function buildRoutes(handler) {
   const { routes = {} } = handler(/* @__PURE__ */ Symbol.for("mono.setup"));
-  return monoRoutes(routes, handler);
-}
-function monoRoutes(routes, handler) {
   const handlers = {};
   for (const [path, fc] of Object.entries(routes)) {
     handlers[path] = (request) => {
@@ -13,7 +10,17 @@ function monoRoutes(routes, handler) {
   }
   return handlers;
 }
+var rpcIndex = 0;
+function createRPC(rpcFunctions) {
+  for (const [key, value] of Object.entries(rpcFunctions)) {
+    if (typeof value !== "function") {
+      throw new Error(`createRPC: ${key} is not a function`);
+    }
+  }
+  Reflect.set(rpcFunctions, /* @__PURE__ */ Symbol.for("mono.rpc"), rpcIndex++);
+  return rpcFunctions;
+}
 export {
   buildRoutes,
-  monoRoutes
+  createRPC
 };

package/jsx-runtime.mjs CHANGED Viewed

@@ -20,9 +20,10 @@ var SUSPENSE = 128;
 var COMPONENT = 256;
 var ROUTER = 512;
 var FORM = 1024;
+var RPC = 2048;
 var EVENT_JS = `{var w=window,m=new Map;w.$F=m.set.bind(m);w.$fmap=m;w.$emit=(e,i,s)=>m.get(i).call(w.$signals?.(s)??e.target,e.type==="mount"?e.target:e);w.$onsubmit=(e,i,s)=>{e.preventDefault();m.get(i).call(w.$signals?.(s)??e.target,new FormData(e.target),e)};}`;
 var CX_JS = `{var n=t=>typeof t=="string"?t:typeof t=="object"&&t!==null?(Array.isArray(t)?t.map(n).filter(Boolean):Object.entries(t).filter(([,e])=>!!e).map(([e])=>e)).join(" "):"";window.$cx=n;}`;
-var STYLE_JS = `{var f=/^(-|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 p=new Set;var u=t=>!!t&&(t.constructor===Object||t.constructor===void 0),g=t=>t.replace(/[a-z][A-Z]/g,n=>n.charAt(0)+"-"+n.charAt(1).toLowerCase());var d=t=>{let n=0;for(let e=0;e<t.length;e++)n=(n<<5)-n+t.charCodeAt(e)|0;return n>>>0};var h=(t,n)=>{let{inline:e,css:o}=b(n);if(o){let r="data-css-",s=d((e??"")+o.join("")),i=r+s.toString(36),l="["+i+"]";p.has(s)||(p.add(s),document.head.appendChild(document.createElement("style")).textContent=(e?l+"{"+e+"}":"")+o.map(a=>a===null?l:a).join("")),t.getAttributeNames().forEach(a=>a.startsWith(r)&&t.removeAttribute(a)),t.setAttribute(i,"")}else e&&t.setAttribute("style",e)},b=t=>{let n,e=[],o=new y;for(let[r,s]of Object.entries(t))switch(r.charCodeAt(0)){case 58:u(s)&&e.push(r.startsWith("::view-")?"":null,r+c(s));break;case 64:u(s)&&(r.startsWith("@keyframes ")?e.push(r+"{"+Object.entries(s).map(([i,l])=>u(l)?i+c(l):"").join("")+"}"):r.startsWith("@view-")?e.push(r+c(s)):e.push(r+"{",null,c(s)+"}"));break;case 38:u(s)&&e.push(null,r.slice(1)+c(s));break;default:n??={},n[r]=s}return n&&(o.inline=c(n).slice(1,-1)),e.length>0&&(o.css=e),o},c=t=>{let n="";for(let[e,o]of Object.entries(t)){let r=typeof o;if(r==="string"||r==="number"){let s=g(e),i=r==="number"?f.test(e)?""+o:o+"px":""+o;n+=(n?";":"")+s+":"+(s==="content"?JSON.stringify(i):i)}}return"{"+n+"}"},y=(()=>{function t(){}return t.prototype=Object.create(null),t})();window.$applyStyle=h;}`;
+var STYLE_JS = `{var f=/^(-|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 p=new Set;var g=t=>typeof t=="object"&&t!==null,u=t=>g(t)&&(t.constructor===Object||t.constructor===void 0),d=t=>t.replace(/[a-z][A-Z]/g,n=>n.charAt(0)+"-"+n.charAt(1).toLowerCase());var b=t=>{let n=0;for(let e=0;e<t.length;e++)n=(n<<5)-n+t.charCodeAt(e)|0;return n>>>0};var h=(t,n)=>{let{inline:e,css:o}=y(n);if(o){let r="data-css-",s=b((e??"")+o.join("")),i=r+s.toString(36),l="["+i+"]";p.has(s)||(p.add(s),document.head.appendChild(document.createElement("style")).textContent=(e?l+"{"+e+"}":"")+o.map(a=>a===null?l:a).join("")),t.getAttributeNames().forEach(a=>a.startsWith(r)&&t.removeAttribute(a)),t.setAttribute(i,"")}else e&&t.setAttribute("style",e)},y=t=>{let n,e=[],o=new x;for(let[r,s]of Object.entries(t))switch(r.charCodeAt(0)){case 58:u(s)&&e.push(r.startsWith("::view-")?"":null,r+c(s));break;case 64:u(s)&&(r.startsWith("@keyframes ")?e.push(r+"{"+Object.entries(s).map(([i,l])=>u(l)?i+c(l):"").join("")+"}"):r.startsWith("@view-")?e.push(r+c(s)):e.push(r+"{",null,c(s)+"}"));break;case 38:u(s)&&e.push(null,r.slice(1)+c(s));break;default:n??={},n[r]=s}return n&&(o.inline=c(n).slice(1,-1)),e.length>0&&(o.css=e),o},c=t=>{let n="";for(let[e,o]of Object.entries(t)){let r=typeof o;if(r==="string"||r==="number"){let s=d(e),i=r==="number"?f.test(e)?""+o:o+"px":""+o;n+=(n?";":"")+s+":"+(s==="content"?JSON.stringify(i):i)}}return"{"+n+"}"},x=(()=>{function t(){}return t.prototype=Object.create(null),t})();window.$applyStyle=h;}`;
 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;}`;
@@ -31,6 +32,7 @@ var SUSPENSE_JS = `{const i=new Map,o=e=>e.getAttribute("chunk-id"),l=(e,t)=>cus
 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 l=window,a=document,n=location,h=t=>t.origin===n.origin&&r(t)===r(n),r=({pathname:t,search:s})=>t+s;customElements.define("m-router",class extends HTMLElement{#s;#t=new Map;#r=r(n);#e;#o=!0;#i;#n;async#h(t){const s=new AbortController,i={"x-route":"true","x-flags":$FLAGS};this.#s?.abort(),this.#s=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")&&a.startViewTransition&&!this.#o?a.startViewTransition(s):s(),this.#o=!1}#l(){a.querySelectorAll("nav a").forEach(t=>{const{href:s,classList:i}=t,e=t.closest("nav")?.getAttribute("data-active-class")??"active";h(new URL(s))?i.add(e):i.remove(e)})}async#c(t,s){this.#r=r(new URL(t,n.href));const i=this.#h(t).then(e=>{if(e){const[o,c]=e;return this.#t.set(t,o),this.#a(o),c}else this.#t.delete(t),this.#a(this.#e??[]),typeof $signals<"u"&&($signals(0).url=new URL(t))});this.#t.has(t)?this.#a(this.#t.get(t)):await i,history[s?.replace?"replaceState":"pushState"]({},"",t),this.#l(),window.scrollTo(0,0),i.then(e=>{e&&(a.body.appendChild(a.createElement("script")).textContent=e)})}navigate(t,s){const i=new URL(t,n.href);if(i.origin!==n.origin||t.startsWith("#")){n.href=t;return}h(i)||this.#c(t,s)}connectedCallback(){setTimeout(()=>{if(!this.#e)if(this.hasAttribute("fallback"))this.removeAttribute("fallback"),this.#e=[...this.childNodes];else{this.#e=[];for(const t of this.childNodes)if(t.nodeType===1&&t.tagName==="TEMPLATE"&&t.hasAttribute("m-fallback")){this.#e.push(...t.content.childNodes),t.remove();break}}}),this.#i=t=>{if(t.defaultPrevented||t.altKey||t.ctrlKey||t.metaKey||t.shiftKey||!(t.target instanceof HTMLAnchorElement))return;const s=t.target.getAttribute("href");if(!s||s.startsWith("#"))return;const{download:i,href:e,rel:o,target:c}=t.target;i||o==="external"||c==="_blank"||!e.startsWith(n.origin)||(t.preventDefault(),this.navigate(e))},this.#n=()=>{r(n)!==this.#r&&this.#c(n.href)},l.addEventListener("popstate",this.#n),a.addEventListener("click",this.#i),setTimeout(()=>this.#l()),l.$router=this}disconnectedCallback(){l.removeEventListener("popstate",this.#n),a.removeEventListener("click",this.#i),delete l.$router,this.#s?.abort(),this.#s=void 0,this.#t.clear(),this.#i=void 0,this.#n=void 0}});}`;
 var FORM_JS = `{const d=window.document,c=(n,e)=>n.getAttribute(e),u=(n,e)=>n.appendChild(e);customElements.define("m-invalid",class extends HTMLElement{connectedCallback(){const n=c(this,"for"),e=this.closest("form"),m=this.textContent;if(n&&e&&m)for(const i of n.split(",")){const s=e.elements.namedItem(i.trim());if(s){const l=()=>{s.removeEventListener("input",l),s.setCustomValidity("")};s.addEventListener("input",l),s.setCustomValidity(m),s.focus()}}this.remove()}}),window.$onrfs=async n=>{n.preventDefault();const e=n.target;if(!e.checkValidity())return;const m=new FormData(e),i=[...e.elements];for(const l of i)l._disabled=l.disabled,l.disabled=!0;const s=await fetch(location.href,{method:"POST",headers:{"x-route-form":"true","x-flags":$FLAGS},body:m});if(s.ok){const[l,p]=await s.json(),E=d.createElement("template"),b=new Map;e.querySelectorAll("m-formslot").forEach(t=>{t.innerHTML=""}),E.innerHTML=l;for(const t of i)t.disabled=t._disabled,delete t._disabled;for(const t of E.content.childNodes){if(t.nodeType===1){const o=t,r=c(o,"formslot"),a=r?'m-formslot[name="'+r+'"]':"m-formslot",f=r?e.querySelector(a)??d.querySelector(a):e.querySelector(a);if(f){f.innerHTML="",b.set(o,f);continue}}u(e,t)}for(const[t,o]of b){const r=c(o,"onupdate"),a=c(o,"scope");switch(c(o,"mode")){case"insertbefore":o.before(t);break;case"insertafter":o.after(t);break;default:u(o,t)}r&&$fmap.get(Number(r))?.call($signals?.(Number(a))??o,{type:"update",target:o})}setTimeout(()=>{i.some(t=>!t.validity.valid)||e.reset()},0),p&&(u(d.body,d.createElement("script")).textContent=p+";document.currentScript.remove();")}};}`;
+var RPC_JS = `{window.$RPC=(e,t)=>new Proxy(Object.create(null),{get(s,r){if(t.includes(r))return(...i)=>fetch(location.href,{method:"POST",body:JSON.stringify({fn:r,args:i}),headers:{"x-rpc":"true","x-rpc-id":e.toString()}}).then(async o=>{const{error:n,result:u}=await o.json();if(n)throw new Error(n);return u})}});}`;
 // runtime/utils.ts
 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)/;
@@ -38,7 +40,7 @@ var regexpHtmlSafe = /["'&<>]/;
 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 isPlainObject = (v) => isObject(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 IdGen = class extends Map {
   #seq = 0;
@@ -174,9 +176,10 @@ 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");
+var $rpc = /* @__PURE__ */ Symbol.for("mono.rpc");
 // version.ts
-var VERSION = "0.9.14";
+var VERSION = "0.10.0-beta.1";
 // render.ts
 var FunctionIdGenerator = class extends Map {
@@ -226,18 +229,66 @@ var isVNode = (v) => Array.isArray(v) && v.length === 3 && v[2] === $vnode;
 var isReactive = (v) => v instanceof Signal || v instanceof Compute;
 var isFC = (v) => isFunction(v) && v.name.charCodeAt(0) <= /*Z*/
 90;
+var identifierRegex = /^[A-Za-z_$][0-9A-Za-z_$]*$/;
 var escapeCSSText = (str) => str.replace(/[><]/g, (m) => m.charCodeAt(0) === 60 ? "&lt;" : "&gt;");
 var toAttrStringLit = (str) => '"' + escapeHTML(str) + '"';
+var errorStringify = (err) => err instanceof Error ? err.message : String(err);
 function renderToWebStream(root, options) {
   const { routes, components } = options;
   const request = options.request;
   const headers = new Headers();
   const reqHeaders = request?.headers;
-  const compHeader = reqHeaders?.get("x-component");
+  const componentName = reqHeaders?.get("x-component");
   const routeForm = reqHeaders?.has("x-route-form");
+  const rpc = reqHeaders?.has("x-rpc");
+  if (rpc) {
+    if (!request || request.method !== "POST") {
+      return new Response(null, { status: 405 });
+    }
+    const rpcIdHeader = reqHeaders?.get("x-rpc-id");
+    if (!rpcIdHeader) {
+      return Response.json({ error: "RPC ID is required" }, { status: 400 });
+    }
+    const rpcId = Number(rpcIdHeader);
+    if (!Number.isInteger(rpcId)) {
+      return Response.json({ error: "RPC ID is invalid" }, { status: 400 });
+    }
+    const { session, context, expose } = options;
+    let rpcTarget;
+    if (expose) {
+      for (const value of Object.values(expose)) {
+        if (isPlainObject(value) && value[$rpc] === rpcId) {
+          rpcTarget = value;
+          break;
+        }
+      }
+    }
+    if (!rpcTarget) {
+      return Response.json({ error: "RPC target not found" }, { status: 404 });
+    }
+    return request.json().then(async (payload) => {
+      const { fn, args } = isObject(payload) ? payload : {};
+      if (!isString(fn) || !Array.isArray(args)) {
+        return Response.json({ error: "RPC payload is invalid" }, { status: 400 });
+      }
+      const rpcFunction = rpcTarget[fn];
+      if (!isFunction(rpcFunction)) {
+        return Response.json({ error: "RPC function not found: " + fn }, { status: 404 });
+      }
+      try {
+        const rpcSession = session ? await createSession(request, session) : void 0;
+        const result = await rpcFunction.apply(createRPCThis(request, context, rpcSession), args);
+        return Response.json({ result });
+      } catch (err) {
+        return Response.json({ error: errorStringify(err) }, { status: 500 });
+      }
+    }).catch((err) => {
+      return Response.json({ error: "Failed to parse RPC payload: " + errorStringify(err) }, { status: 400 });
+    });
+  }
   let status = options.status;
   let routeFC = request ? Reflect.get(request, "routeFC") : void 0;
-  let component = compHeader ? compHeader.startsWith("@comp_") ? componentsMap.getById(Number(compHeader.slice(6))) : components?.[compHeader] : null;
+  let component = componentName ? componentName.startsWith("@comp_") ? componentsMap.getById(Number(componentName.slice(6))) : components?.[componentName] : null;
   if (request) {
     request.URL = new URL(request.url);
   }
@@ -336,8 +387,8 @@ function renderToWebStream(root, options) {
       }),
       { headers }
     );
-  } else if (compHeader) {
-    return new Response("Component not found: " + component, { status: 404 });
+  } else if (componentName) {
+    return new Response("Component not found: " + componentName, { status: 404 });
   }
   headers.set("content-type", "text/html; charset=utf-8");
   headers.set("transfer-encoding", "chunked");
@@ -457,6 +508,20 @@ async function render(node, options, write, writeJS, componentMode, routeForm) {
       }
       fidGenerator.clear();
     }
+    if (options.expose) {
+      for (const [key, value] of Object.entries(options.expose)) {
+        if (identifierRegex.test(key)) {
+          if (isPlainObject(value)) {
+            if ($rpc in value) {
+              treeshake(RPC, RPC_JS, true);
+              js += "window." + key + "=$RPC(" + value[$rpc] + "," + stringify(Object.keys(value)) + ");";
+            }
+          }
+        } else {
+          console.warn("[mono-jsx] The key of the `expose` prop is not a valid JavaScript identifier: " + key);
+        }
+      }
+    }
     if (runtimeFlag & COMPONENT || runtimeFlag & ROUTER || runtimeFlag & FORM) {
       const { scope, chunk } = flags;
       js += 'window.$FLAGS="' + scope + "|" + chunk + "|" + runtimeFlag + "|" + fidGenerator.seq + '";';
@@ -765,9 +830,9 @@ async function renderNode(rc, node, stripSlotProp) {
                 const now = Date.now();
                 const value = cache.get(key);
                 if (value && (!value.expiresAt || value.expiresAt > now)) {
-                  write("<!-- " + tag + " -->");
+                  write("<!-- cache-hit -->");
                   write(value.html);
-                  write("<!-- /" + tag + " -->");
+                  write("<!-- /cache -->");
                 } else {
                   let buf = "";
                   await renderChildren(
@@ -1291,6 +1356,19 @@ function createThisProxy(rc, scopeId) {
   });
   return thisProxy;
 }
+function createRPCThis(request, context, session) {
+  const scope = new NullPrototypeObject();
+  Object.assign(scope, { request, context: context ?? {} });
+  Object.defineProperty(scope, "session", {
+    get() {
+      if (!session) {
+        throw new TypeError("[mono-jsx] The `session` prop in the `<html>` element is required.");
+      }
+      return session;
+    }
+  });
+  return scope;
+}
 async function createSession(request, options) {
   let sessionId;
   let sessionStore = /* @__PURE__ */ new Map();
@@ -1382,7 +1460,7 @@ var jsx = (tag, props = new NullPrototypeObject(), key) => {
       return props;
     }
     const renderOptions = new NullPrototypeObject();
-    const optionsKeys = /* @__PURE__ */ new Set(["app", "context", "components", "routes", "request", "session", "status", "headers", "htmx"]);
+    const optionsKeys = /* @__PURE__ */ new Set(["app", "context", "components", "expose", "routes", "request", "session", "status", "headers", "htmx"]);
     for (const [key2, value] of Object.entries(props)) {
       if (optionsKeys.has(key2) || key2.startsWith("htmx-ext-")) {
         renderOptions[key2] = value;

package/package.json CHANGED Viewed

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

package/setup.mjs CHANGED Viewed

@@ -57,7 +57,9 @@ export default {
 async function install() {
   if (globalThis.Deno) {
     await new Deno.Command("deno", {
-      args: ["add", "npm:mono-jsx"]
+      args: ["add", "npm:mono-jsx"],
+      stdout: "inherit",
+      stderr: "inherit"
     }).spawn().status;
   } else {
     let npm = "npm";
@@ -67,7 +69,7 @@ async function install() {
       npm = "pnpm";
     }
     const { spawnSync } = await import("node:child_process");
-    spawnSync(npm, ["add", "mono-jsx"]);
+    spawnSync(npm, ["add", "mono-jsx"], { stdio: "inherit" });
   }
 }
 async function setup() {
@@ -78,18 +80,12 @@ async function setup() {
   if (globalThis.Deno && await exists("deno.jsonc")) {
     await install();
     console.log("Please add the following options to your deno.jsonc file:");
-    console.log(
-      [
-        `{`,
-        `  "compilerOptions": {`,
-        `    %c"jsx": "react-jsx",`,
-        `    "jsxImportSource": "mono-jsx",%c`,
-        `  }`,
-        `}`
-      ].join("\n"),
-      "color:green",
-      ""
-    );
+    console.log("{");
+    console.log('  "compilerOptions": {');
+    console.log('    \x1B[32m"jsx": "react-jsx",\x1B[0m');
+    console.log('    \x1B[32m"jsxImportSource": "mono-jsx",\x1B[0m');
+    console.log("  }");
+    console.log("}");
     return;
   }
   let tsConfigFilename = globalThis.Deno ? "deno.json" : "tsconfig.json";
@@ -100,21 +96,20 @@ async function setup() {
   } catch {
   }
   const compilerOptions = tsConfig.compilerOptions ?? (tsConfig.compilerOptions = {});
-  if (compilerOptions.jsx === "react-jsx" && compilerOptions.jsxImportSource === "mono-jsx") {
-    console.log("%cmono-jsx already setup.", "color:grey");
-    return;
-  }
+  compilerOptions.lib ??= globalThis.Deno ? ["dom", "esnext", "deno.ns"] : ["dom", "esnext"];
+  compilerOptions.jsx = "react-jsx";
+  compilerOptions.jsxImportSource = "mono-jsx";
   if (!globalThis.Deno) {
-    compilerOptions.lib ??= ["dom", "esnext"];
     compilerOptions.module ??= "esnext";
     compilerOptions.moduleResolution ??= "bundler";
     compilerOptions.allowImportingTsExtensions ??= true;
     compilerOptions.noEmit ??= true;
   }
-  compilerOptions.jsx = "react-jsx";
-  compilerOptions.jsxImportSource = "mono-jsx";
   await writeFile(tsConfigFilename, JSON.stringify(tsConfig, null, 2));
-  console.log("\u2705 mono-jsx setup complete.");
+  console.log("\x1B[32m\u2705 mono-jsx setup complete.\x1B[0m");
+}
+if (import.meta.main) {
+  await setup();
 }
 async function exists(path) {
   try {

package/types/index.d.ts CHANGED Viewed

@@ -1,5 +1,3 @@
-import type { ComponentType } from "./jsx.d.ts";
 /**
  * `buildRoutes` creates a routing map for bun server.
  */
@@ -7,11 +5,6 @@ export function buildRoutes(
   handler: (req: Request) => Response,
 ): Record<string, (req: Request) => Response>;
-/**
- * `monoRoutes` creates a routing map for bun server.
- * @deprecated Use `buildRoutes` instead.
- */
-export function monoRoutes(
-  routes: Record<string, ComponentType<any> | Promise<{ default: ComponentType<any> }>>,
-  handler: (req: Request) => Response,
-): Record<string, (req: Request) => Response>;
+export function createRPC<V extends Record<string, (...args: any[]) => any>>(
+  rpcFunctions: V,
+): { [K in keyof V]: (...args: Parameters<V[K]>) => Promise<Awaited<ReturnType<V[K]>>> };

package/types/mono.d.ts CHANGED Viewed

@@ -195,19 +195,19 @@ declare global {
      */
     readonly app: {
       /**
-       * The `app.refs` object stores variables in the application scope.
+       * The `app.refs` 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: Record<string, HTMLElement>;
       /**
-       * The `app.url` object contains the current URL.
+       * The `app.url` represents the current URL.
        */
       readonly url: WithParams<URL>;
     };
     /**
-     * The `request` object contains the current request.
+     * The `request` represents the current request.
      *
      * **⚠ This is a server-side only API.**
      */
@@ -220,30 +220,61 @@ declare global {
       }
     >;
     /**
-     * The `session` object contains the current session.
+     * The `context` represents the current context.
+     *
+     * **⚠ This is a server-side only API.**
+     */
+    readonly context: Record<string, unknown>;
+    /**
+     * The `session` represents the current session.
      *
      * **⚠ This is a server-side only API.**
      */
     readonly session: Session;
   }
+  /**
+   * The `RPC` represents the current RPC request context.
+   */
+  interface RPC<Context extends Record<string, unknown> = {}> {
+    /**
+     * The `request` represents the current request.
+     *
+     * **⚠ This is a server-side only API.**
+     */
+    request: Request;
+    /**
+     * The `context` represents the current context.
+     *
+     * **⚠ This is a server-side only API.**
+     */
+    context: Context;
+    /**
+     * The `session` represents the current session.
+     *
+     * **⚠ This is a server-side only API.**
+     */
+    session: Session;
+  }
   /**
    * Defines the `this.app` type.
    */
-  type WithAppSignals<T, AppSignals = {}, AppRefs = Record<string, HTMLElement>> = T extends FC<infer S, infer R> ? FC<S, R> & {
+  type WithAppSignals<T, AppSignals = {}, AppRefs extends Record<string, HTMLElement> = Record<string, HTMLElement>> = T extends
+    FC<infer S, infer R> ? FC<S, R> & {
       /**
        * The global signals shared across the application.
        */
       readonly app: {
         /**
-         * The `app.refs` object stores variables in the application scope.
+         * The `app.refs` 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.
+         * The `app.url` represents the current URL.
          */
         readonly url: WithParams<URL>;
       } & Omit<AppSignals, "refs" | "url">;
@@ -253,7 +284,7 @@ declare global {
   /**
    * Defines the `this.context` type.
    */
-  type WithContext<T, Context = {}> = T extends FC<infer S, infer R> ? FC<S, R> & {
+  type WithContext<T, Context extends Record<string, unknown>> = T extends FC<infer S, infer R> ? FC<S, R> & {
       /**
        * The rendering context object.
        *
@@ -261,6 +292,9 @@ declare global {
        */
       readonly context: Context;
     }
+    : T extends RPC ? RPC & {
+        readonly context: Context;
+      }
     : never;
 }

package/types/render.d.ts CHANGED Viewed

@@ -80,6 +80,10 @@ export interface RenderOptions extends Partial<HtmxExts> {
    * Components to be rendered by the `<lazy>` element.
    */
   components?: Record<string, MaybeModule<ComponentType<any>>>;
+  /**
+   * The functions to be exposed server variables to the client.
+   */
+  expose?: Record<string, unknown>;
   /**
    * Routes to be used by the `<router>` element.
    */