npm - mono-jsx - Versions diffs - 0.4.0 → 0.6.0 - Mend

mono-jsx 0.4.0 → 0.6.0

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

package/README.md CHANGED Viewed

@@ -5,10 +5,12 @@
 mono-jsx is a JSX runtime that renders `<html>` element to `Response` object in JavaScript runtimes like Node.js, Deno, Bun, Cloudflare Workers, etc.
 - 🚀 No build step needed
-- 🦋 Lightweight (8KB gzipped), zero dependencies
-- 🔫 Minimal state runtime
-- 🚨 Complete Web API TypeScript definitions
+- 🦋 Lightweight (10KB gzipped), zero dependencies
+- 🚦 Signals as reactive primitives
+- ⚡️ Use web comonents, no virtual DOM
+- 💡 Complete Web API TypeScript definitions
 - ⏳ Streaming rendering
+- 🗂️ Built-in router
 - 🥷 [htmx](#using-htmx) integration
 - 🌎 Universal, works in Node.js, Deno, Bun, Cloudflare Workers, etc.
@@ -72,8 +74,8 @@ export default {
     <html>
       <h1>Welcome to mono-jsx!</h1>
     </html>
-  ),
-};
+  )
+}
 ```
 For Deno/Bun users, you can run the `app.tsx` directly:
@@ -83,13 +85,13 @@ deno serve app.tsx
 bun run app.tsx
 ```
-If you're building a web app with [Cloudflare Workers](https://developers.cloudflare.com/workers/wrangler/commands/#dev), use `wrangler dev` to start local development:
+If you're building a web app with [Cloudflare Workers](https://developers.cloudflare.com/workers/wrangler/commands/#dev), use `wrangler dev` to start your app in development mode:
 ```bash
 npx wrangler dev app.tsx
 ```
-**Node.js doesn't support JSX syntax or declarative fetch servers**, so we recommend using mono-jsx with [srvx](https://srvx.h3.dev/):
+**Node.js doesn't support JSX syntax or declarative fetch servers**, we recommend using mono-jsx with [srvx](https://srvx.h3.dev/):
 ```tsx
 // app.tsx
@@ -106,14 +108,14 @@ serve({
 });
 ```
-You'll need [tsx](https://www.npmjs.com/package/tsx) to start the app without a build step:
+And you'll need [tsx](https://www.npmjs.com/package/tsx) to start the app without a build step:
 ```bash
 npx tsx app.tsx
 ```
 > [!NOTE]
-> Only root `<html>` element will be rendered as a `Response` object. You cannot return a `<div>` or any other element directly from the `fetch` handler. This is a limitation of the mono-jsx runtime.
+> Only root `<html>` element will be rendered as a `Response` object. You cannot return a `<div>` or any other element directly from the `fetch` handler. This is a limitation of the mono-jsx.
 ## Using JSX
@@ -131,7 +133,7 @@ mono-jsx adopts standard HTML property names, avoiding React's custom naming con
 mono-jsx allows you to compose the `class` property using arrays of strings, objects, or expressions:
-```jsx
+```tsx
 <div
   class={[
     "container box",
@@ -145,7 +147,7 @@ mono-jsx allows you to compose the `class` property using arrays of strings, obj
 mono-jsx supports [pseudo classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes), [pseudo elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements), [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries), and [CSS nesting](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting) in the `style` property:
-```jsx
+```tsx
 <a
   style={{
     color: "black",
@@ -164,7 +166,7 @@ mono-jsx supports [pseudo classes](https://developer.mozilla.org/en-US/docs/Web/
 mono-jsx uses [`<slot>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) elements to render slotted content (equivalent to React's `children` property). You can also add the `name` attribute to define named slots:
-```jsx
+```tsx
 function Container() {
   return (
     <div class="container">
@@ -173,7 +175,7 @@ function Container() {
       {/* Named slot */}
       <slot name="desc" />
     </div>
-  );
+  )
 }
 function App() {
@@ -184,7 +186,7 @@ function App() {
       {/* This goes to the default slot */}
       <h1>Hello world!</h1>
     </Container>
-  );
+  )
 }
 ```
@@ -192,7 +194,7 @@ function App() {
 mono-jsx provides an `html` tag function to render raw HTML in JSX instead of React's `dangerouslySetInnerHTML`:
-```jsx
+```tsx
 function App() {
   return <div>{html`<h1>Hello world!</h1>`}</div>;
 }
@@ -200,14 +202,14 @@ function App() {
 The `html` tag function is globally available without importing. You can also use `css` and `js` tag functions for CSS and JavaScript:
-```jsx
+```tsx
 function App() {
   return (
     <head>
       <style>{css`h1 { font-size: 3rem; }`}</style>
       <script>{js`console.log("Hello world!")`}</script>
     </head>
-  );
+  )
 }
 ```
@@ -218,13 +220,13 @@ function App() {
 mono-jsx lets you write event handlers directly in JSX, similar to React:
-```jsx
+```tsx
 function Button() {
   return (
     <button onClick={(evt) => alert("BOOM!")}>
       Click Me
     </button>
-  );
+  )
 }
 ```
@@ -234,9 +236,10 @@ function Button() {
 ```tsx
 import { doSomething } from "some-library";
-function Button(this: FC, props: { role: string }) {
-  let message = "BOOM!";
-  console.log(message); // only executes on server-side
+function Button(this: FC<{ count: 0 }>, props: { role: string }) {
+  const message = "BOOM!";        // server-side variable
+  this.count = 0;                 // initialize a signal
+  console.log(message);           // only prints on server-side
   return (
     <button
       role={props.role}
@@ -247,37 +250,27 @@ function Button(this: FC, props: { role: string }) {
         Deno.exit(0);             // ❌ `Deno` is unavailable in the browser
         document.title = "BOOM!"; // ✅ `document` is a browser API
         console.log(evt.target);  // ✅ `evt` is the event object
-        this.count++;             // ✅ update the state `count`
+        this.count++;             // ✅ update the `count` signal
       }}
     >
-      Click Me
+      <slot />
     </button>
-  );
+  )
 }
 ```
-Additionally, mono-jsx supports the `mount` event for when elements are mounted in the client-side DOM:
-```jsx
-function App() {
-  return (
-    <div onMount={(evt) => console.log(evt.target, "Mounted!")}>
-      <h1>Welcome to mono-jsx!</h1>
-    </div>
-  );
-}
-```
+### Using `<form>` Element
-mono-jsx also accepts functions for the `action` property on `form` elements, which will be called on form submission:
+mono-jsx supports `<form>` elements with the `action` attribute. The `action` attribute can be a string URL or a function that accepts a `FormData` object. The function will be called on form submission, and the `FormData` object will contain the form data.
 ```tsx
 function App() {
   return (
-    <form action={(data: FormData, event: SubmitEvent) => console.log(data.get("name"))}>
+    <form action={(data: FormData) => console.log(data.get("name"))}>
       <input type="text" name="name" />
       <button type="submit">Submit</button>
     </form>
-  );
+  )
 }
 ```
@@ -291,18 +284,18 @@ async function Loader(props: { url: string }) {
   return <JsonViewer data={data} />;
 }
-default {
+export default {
   fetch: (req) => (
     <html>
       <Loader url="https://api.example.com/data" placeholder={<p>Loading...</p>} />
     </html>
-  ),
-};
+  )
+}
 ```
 You can also use async generators to yield multiple elements over time. This is useful for streaming rendering of LLM tokens:
-```jsx
+```tsx
 async function* Chat(props: { prompt: string }) {
   const stream = await openai.chat.completions.create({
     model: "gpt-4",
@@ -318,113 +311,169 @@ async function* Chat(props: { prompt: string }) {
   }
 }
-default {
+export default {
   fetch: (req) => (
     <html>
       <Chat prompt="Tell me a story" placeholder={<span style="color:grey">●</span>} />
     </html>
-  ),
-};
+  )
+}
 ```
-## Reactive
+## Using Signals
-mono-jsx provides a minimal state runtime for updating the view based on client-side state changes.
+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.
-### Using Component State
+### Using Component Signals
-You can use the `this` keyword in your components to manage state. The state is bound to the component instance and can be updated directly, and will automatically re-render the view when the state changes:
+You can use the `this` keyword in your components to manage signals. The signals is bound to the component instance and can be updated directly, and will automatically re-render the view when a signal changes:
 ```tsx
 function Counter(
   this: FC<{ count: number }>,
   props: { initialCount?: number },
 ) {
-  // Initialize state
+  // Initialize a singal
   this.count = props.initialCount ?? 0;
   return (
     <div>
-      {/* render state */}
+      {/* render singal */}
       <span>{this.count}</span>
-      {/* Update state to trigger re-render */}
+      {/* Update singal to trigger re-render */}
       <button onClick={() => this.count--}>-</button>
       <button onClick={() => this.count++}>+</button>
     </div>
-  );
+  )
 }
 ```
-### Using App State
+### Using App Signals
-You can define app state by adding `appState` prop to the root `<html>` element. The app state is available in all components via `this.app.<stateKey>`. Changes to the app state will trigger re-renders in all components that use it:
+You can define app signals by adding `app` prop to the root `<html>` element. The app signals is available in all components via `this.app.<SignalName>`. Changes to the app signals will trigger re-renders in all components that use it:
 ```tsx
-function Header(this: FC<{}, { title: string }>) {
+interface AppSignals {
+  themeColor: string;
+}
+function Header(this: FC<{}, AppSignals>) {
   return (
     <header>
-      <h1>{this.app.title}</h1>
+      <h1 style={this.computed(() => ({ color: this.app.themeColor }))}>Welcome to mono-jsx!</h1>
     </header>
-  );
+  )
 }
-function Footer(this: FC<{}, { title: string }>) {
+function Footer(this: FC<{}, AppSignals>) {
   return (
     <footer>
-      <p>(c) 2025 {this.app.title}</p>
+      <p style={this.computed(() => ({ color: this.app.themeColor }))}>(c) 2025 mono-jsx.</p>
     </footer>
-  );
+  )
 }
-function Main(this: FC<{}, { title: string }>) {
+function Main(this: FC<{}, AppSignals>) {
   return (
     <main>
-      <h1>{this.app.title}</h1>
-      <h2>Changing the title</h2>
-      <input
-        onInput={(evt) => this.app.title = evt.target.value}
-        placeholder="Enter a new title"
-      />
+      <p>
+        <label>Theme Color: </label>
+        <input type="color" onInput={({ target }) => this.app.themeColor = target.value}/>
+      </p>
     </main>
-  );
+  )
 }
 export default {
   fetch: (req) => (
-    <html appState={{ title: "Welcome to mono-jsx!" }}>
+    <html app={{ themeColor: "#232323" }}>
       <Header />
       <Main />
       <Footer />
     </html>
-  ),
-};
+  )
+}
 ```
-### Using Computed State
+### Using Computed Signals
-You can use `this.computed` to create computed state based on state. The computed state will automatically update when the state changes:
+You can use `this.computed` to create a derived signal based on other signals:
 ```tsx
 function App(this: FC<{ input: string }>) {
-  this.input = "Welcome to mono-jsx!";
+  this.input = "Welcome to mono-jsx";
   return (
     <div>
       <h1>{this.computed(() => this.input + "!")}</h1>
       <form action={(fd) => this.input = fd.get("input") as string}>
-        <input type="text" name="input" value={this.input} />
+        <input type="text" name="input" value={"" + this.input} />
         <button type="submit">Submit</button>
       </form>
     </div>
-  );
+  )
+}
+```
+### Using Effects
+You can use `this.effect` to create side effects based on signals. The effect will run whenever the signal changes:
+```tsx
+function App(this: FC<{ count: number }>) {
+  this.count = 0;
+  this.effect(() => {
+    console.log("Count changed:", this.count);
+  });
+  return (
+    <div>
+      <span>{this.count}</span>
+      <button onClick={() => this.count++}>+</button>
+    </div>
+  )
+}
+```
+The callback function of `this.effect` can return a cleanup function that gets run once the component element has been removed via `<toggle>` or `<switch>` condition rendering:
+```tsx
+function Counter(this: FC<{ count: number }>) {
+  this.count = 0;
+  this.effect(() => {
+    const interval = setInterval(() => {
+      this.count++;
+    }, 1000);
+    return () => clearInterval(interval);
+  });
+  return (
+    <div>
+      <span>{this.count}</span>
+    </div>
+  )
+}
+function App(this: FC<{ show: boolean }>) {
+  this.show = true
+  return (
+    <div>
+      <toggle show={this.show}>
+        <Foo />
+      </toggle>
+      <button onClick={e => this.show = !this.show }>{this.computed(() => this.show ? 'Hide': 'Show')}</button>
+    </div>
+  )
 }
 ```
-### Using `<toggle>` Element with State
+### Using `<toggle>` Element with Signals
-The `<toggle>` element conditionally renders content based on the value of a state.
+The `<toggle>` element conditionally renders content based on the `show` prop:
 ```tsx
 function App(this: FC<{ show: boolean }>) {
@@ -436,7 +485,7 @@ function App(this: FC<{ show: boolean }>) {
   return (
     <div>
-      <toggle value={this.show}>
+      <toggle show={this.show}>
         <h1>Welcome to mono-jsx!</h1>
       </toggle>
@@ -444,16 +493,16 @@ function App(this: FC<{ show: boolean }>) {
         {this.computed(() => this.show ? "Hide" : "Show")}
       </button>
     </div>
-  );
+  )
 }
 ```
-### Using `<switch>` Element with State
+### Using `<switch>` Element with Signals
-The `<switch>` element renders different content based on the value of a state. Elements with matching `slot` attributes are displayed when their value matches, otherwise default content is shown:
+The `<switch>` element renders different content based on the value of a signal. Elements with matching `slot` attributes are displayed when their value matches, otherwise default slots are shown:
 ```tsx
-function App(this: FC<{ lang: "en" | "zh" | "emoji" }>) {
+function App(this: FC<{ lang: "en" | "zh" | "🙂" }>) {
   this.lang = "en";
   return (
@@ -466,19 +515,19 @@ function App(this: FC<{ lang: "en" | "zh" | "emoji" }>) {
       <p>
         <button onClick={() => this.lang = "en"}>English</button>
         <button onClick={() => this.lang = "zh"}>中文</button>
-        <button onClick={() => this.lang = "emoji"}>Emoji</button>
+        <button onClick={() => this.lang = "🙂"}>🙂</button>
       </p>
     </div>
-  );
+  )
 }
 ```
-### Limitation of State
+### Limitation of Signals
-1\. Component state cannot be used in arrow function components.
+1\. Arrow function are non-stateful components.
 ```tsx
-// ❌ Won't work - state updates won't refresh the view
+// ❌ Won't work - use `this` in a non-stateful component
 const App = () => {
   this.count = 0;
   return (
@@ -486,7 +535,7 @@ const App = () => {
       <span>{this.count}</span>
       <button onClick={() => this.count++}>+</button>
     </div>
-  );
+  )
 };
 // ✅ Works correctly
@@ -497,16 +546,16 @@ function App(this: FC) {
       <span>{this.count}</span>
       <button onClick={() => this.count++}>+</button>
     </div>
-  );
+  )
 }
 ```
-2\. Component state cannot be computed outside of the `this.computed` method.
+2\. Signals cannot be computed outside of the `this.computed` method.
 ```tsx
-// ❌ Won't work - state updates won't refresh the view
+// ❌ Won't work - updates of a signal won't refresh the view
 function App(this: FC<{ message: string }>) {
-  this.message = "Welcome to mono-jsx!";
+  this.message = "Welcome to mono-jsx";
   return (
     <div>
       <h1 title={this.message + "!"}>{this.message + "!"}</h1>
@@ -514,12 +563,12 @@ function App(this: FC<{ message: string }>) {
         Click Me
       </button>
     </div>
-  );
+  )
 }
 // ✅ Works correctly
 function App(this: FC) {
-  this.message = "Welcome to mono-jsx!";
+  this.message = "Welcome to mono-jsx";
   return (
     <div>
       <h1 title={this.computed(() => this.message + "!")}>{this.computed(() => this.message + "!")}</h1>
@@ -527,33 +576,89 @@ function App(this: FC) {
         Click Me
       </button>
     </div>
-  );
+  )
+}
+```
+3\. The callback function of `this.computed` must be a pure function. That means it should not create side effects or access any non-stateful variables. For example, you cannot use `Deno` or `document` in the callback function:
+```tsx
+// ❌ Won't work - throws `Deno is not defined` when the button is clicked
+function App(this: FC<{ message: string }>) {
+  this.message = "Welcome to mono-jsx";
+  return (
+    <div>
+      <h1>{this.computed(() => this.message + "! (Deno " + Deno.version.deno + ")")}</h1>
+      <button onClick={() => this.message = "Clicked"}>
+        Click Me
+      </button>
+    </div>
+  )
+}
+// ✅ Works correctly
+function App(this: FC<{ message: string, denoVersion: string }>) {
+  this.denoVersion = Deno.version.deno;
+  this.message = "Welcome to mono-jsx";
+  return (
+    <div>
+      <h1>{this.computed(() => this.message + "! (Deno " + this.denoVersion + ")")}</h1>
+      <button onClick={() => this.message = "Clicked"}>
+        Click Me
+      </button>
+    </div>
+  )
 }
 ```
 ## Using `this` in Components
-mono-jsx binds a special `this` object to your components when they are rendered. This object contains properties and methods that you can use to manage state, context, and other features.
+mono-jsx binds a scoped signals object to `this` of your component functions. This allows you to access signals, context, and request information directly in your components.
-The `this` object contains the following properties:
+The `this` object has the following built-in properties:
-- `app`: The app state defined on the root `<html>` element.
+- `app`: The app signals defined on the root `<html>` element.
 - `context`: The context defined on the root `<html>` element.
 - `request`: The request object from the `fetch` handler.
-- `computed`: A method to create computed properties based on state.
+- `refs`: A map of refs defined in the component.
+- `computed`: A method to create a computed signal.
+- `effect`: A method to create side effects.
 ```ts
-type FC<State = {}, AppState = {}, Context = {}> = {
-  readonly app: AppState;
+type FC<Signals = {}, AppSignals = {}, Context = {}> = {
+  readonly app: AppSignals;
   readonly context: Context;
-  readonly request: Request;
-  readonly computed: <V = unknown>(computeFn: () => V) => V;
-} & Omit<State, "app" | "context" | "request" | "computed">;
+  readonly request: Request & { params?: Record<string, string> };
+  readonly refs: Record<string, HTMLElement | null>;
+  readonly computed: <T = unknown>(fn: () => T) => T;
+  readonly effect: (fn: () => void | (() => void)) => void;
+} & Omit<Signals, "app" | "context" | "request" | "computed" | "effect">;
 ```
-### Using State
+### Using Signals
+See the [Using Signals](#using-signals) section for more details on how to use signals in your components.
-Check the [Using State](#using-state) section for more details on how to use state in your components.
+### Using Refs
+You can use `this.refs` to access refs in your components. Define refs in your component using the `ref` attribute:
+```tsx
+function App(this: FC) {
+  this.effect(() => {
+    this.refs.input?.addEventListener("input", (evt) => {
+      console.log("Input changed:", evt.target.value);
+    });
+  });
+  return (
+    <div>
+      <input ref={this.refs.input} type="text" />
+      <button onClick={() => this.refs.input?.focus()}>Focus</button>
+    </div>
+  )
+}
+```
 ### Using Context
@@ -567,7 +672,7 @@ function Dash(this: FC<{}, {}, { auth: { uuid: string; name: string } }>) {
       <h1>Welcome back, {auth.name}!</h1>
       <p>Your UUID is {auth.uuid}</p>
     </div>
-  );
+  )
 }
 export default {
@@ -578,9 +683,9 @@ export default {
         {!auth && <p>Please Login</p>}
         {auth && <Dash />}
       </html>
-    );
-  },
-};
+    )
+  }
+}
 ```
 ### Accessing Request Info
@@ -597,7 +702,7 @@ function RequestInfo(this: FC) {
       <p>{request.url}</p>
       <p>{request.headers.get("user-agent")}</p>
     </div>
-  );
+  )
 }
 export default {
@@ -605,15 +710,15 @@ export default {
     <html request={req}>
       <RequestInfo />
     </html>
-  ),
-};
+  )
+}
 ```
 ## Streaming Rendering
 mono-jsx renders your `<html>` as a readable stream, allowing async components to render asynchronously. You can use `placeholder` to display a loading state while waiting for async components to render:
-```jsx
+```tsx
 async function Sleep({ ms }) {
   await new Promise((resolve) => setTimeout(resolve, ms));
   return <slot />;
@@ -626,13 +731,13 @@ export default {
         <p>After 1 second</p>
       </Sleep>
     </html>
-  ),
-};
+  )
+}
 ```
 You can set the `rendering` attribute to `"eager"` to force synchronous rendering (the `placeholder` will be ignored):
-```jsx
+```tsx
 export default {
   fetch: (req) => (
     <html>
@@ -640,13 +745,13 @@ export default {
         <p>After 1 second</p>
       </Sleep>
     </html>
-  ),
-};
+  )
+}
 ```
 You can add the `catch` attribute to handle errors in the async component. The `catch` attribute should be a function that returns a JSX element:
-```jsx
+```tsx
 async function Hello() {
   throw new Error("Something went wrong!");
   return <p>Hello world!</p>;
@@ -657,15 +762,212 @@ export default {
     <html>
       <Hello catch={err => <p>{err.message}</p>} />
     </html>
-  ),
-};
+  )
+}
+```
+## Lazy Rendering
+Since mono-jsx renders html on server side, and no hydration JS sent to client side. To render a component dynamically on client side, you can use the `<component>` element to ask the server to render a component and send the html back to client:
+```tsx
+export default {
+  fetch: (req) => (
+    <html components={{ Foo }}>
+      <component name="Foo" props={{ /* props for the component */ }} placeholder={<p>Loading...</p>} />
+    </html>
+  )
+}
+```
+You can use `<toggle>` element to control when to render the component:
+```tsx
+async function Lazy(this: FC<{ show: boolean }>, props: { url: string }) {
+  this.show = false;
+  return (
+    <div>
+      <toggle value={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>
+  )
+}
+```
+You also can use signal `name` or `props`, change the signal value will trigger the component to re-render with new name or props:
+```tsx
+import { Profile, Projects, Settings } from "./pages.tsx"
+async function Dash(this: FC<{ page: "Profile" | "Projects" | "Settings" }>) {
+  this.page = "Projects";
+  return (
+    <>
+      <div class="tab">
+        <button onClick={e => this.page = "Profile"}>Profile</botton>
+        <button onClick={e => this.page = "Projects"}>Projects</botton>
+        <button onClick={e => this.page = "Settings"}>Settings</botton>
+      </div>
+      <div class="page">
+        <component name={this.page} placeholder={<p>Loading...</p>} />
+      </div>
+    </>
+  )
+}
+export default {
+  fetch: (req) => (
+    <html components={{ Profile, Projects, Settings }}>
+      <Dash />
+    </html>
+  )
+}
+```
+## Using Router(SPA)
+mono-jsx provides a built-in `<router>` element that allows your app to render components based on the current URL. On client side, it hijacks all `click` events on `<a>` elements and asynchronously fetches the route component without reloading the entire page.
+To use the router, you need to define your routes as a mapping of URL patterns to components and pass it to the `<html>` element as `routes` prop. The `request` prop is also required to match the current URL against the defined routes.
+```tsx
+const routes = {
+  "/": Home,
+  "/about": About,
+  "/blog": Blog,
+  "/post/:id": Post,
+}
+export default {
+  fetch: (req) => (
+    <html request={req} routes={routes}>
+      <header>
+        <nav>
+          <a href="/">Home</a>
+          <a href="/about">About</a>
+          <a href="/blog">Blog</a>
+        </nav>
+      </header>
+      <router />
+    </html>
+  )
+}
+```
+mono-jsx router requires [URLPattern](https://developer.mozilla.org/en-US/docs/Web/API/URLPattern) to match a route:
+- ✅ Deno
+- ✅ Cloudflare Workers
+- ✅ Nodejs (>= 24)
+For Bun users, mono-jsx provides a `monoRoutes` function that uses Bun's builtin routing:
+```tsx
+// bun app.tsx
+import { monoRoutes } from "mono-jsx"
+const routes = {
+  "/": Home,
+  "/about": About,
+  "/blog": Blog,
+  "/post/:id": Post,
+}
+export default {
+  routes: monoRoutes(routes, (request) => (
+    <html request={request}>
+      <router />
+    </html>
+  ))
+}
+```
+### Using Route `params`
+When you define a route with a parameter (e.g., `/post/:id`), mono-jsx will automatically extract the parameter from the URL and make it available in the route component. The `params` object is available in the `request` property of the component's `this` context.
+You can access the `params` object in your route components to get the values of the parameters defined in the route pattern:
+```tsx
+// router pattern: "/post/:id"
+function Post(this: FC) {
+  this.request.url         // "http://localhost:3000/post/123"
+  this.request.params?.id  // "123"
+}
+```
+### Using DB/Storage in Route Components
+Route components are always rendered on server-side, you can use any database or storage API to fetch data in your route components. For example, if you're using a SQL database, you can use the `sql` tag function to query the database:
+```tsx
+async function Post(this: FC) {
+  const post = await sql`SELECT * FROM posts WHERE id = ${ this.request.params!.id }`
+  return (
+    <article>
+      <h2>{post.title}<h2>
+      <div>html`${post.content}`</div>
+    </article>
+  )
+}
+```
+### Nav Links
+Links under a `<nav>` element will be treated as navigation links by the router. When the `href` of a link matches a route, A active class will be added to the link element. By default, the active class is `active`, but you can customize it by setting the `data-active-class` attribute on the `<nav>` element. You can also add a custom style for the active link using nested CSS selectors in the `style` attribute of the `<nav>` element:
+```tsx
+export default {
+  fetch: (req) => (
+    <html request={req} routes={routes}>
+      <header>
+        <nav style={{ "& a.active": { fontWeight: "bold" } }} data-active-class="active">
+          <a href="/">Home</a>
+          <a href="/about">About</a>
+          <a href="/blog">Blog</a>
+        </nav>
+      </header>
+      <router />
+    </html>
+  )
+}
+```
+### Setting Fallback(404) Content
+You can add fallback(404) content to the `<router>` element as children, which will be displayed when no route matches the current URL:
+```tsx
+export default {
+  fetch: (req) => (
+    <html request={req} routes={routes}>
+      <router>
+        <p>Page Not Found</p>
+        <p>Back to <a href="/">Home</a></p>
+      </router>
+    </html>
+  )
+}
 ```
 ## Customizing html Response
 You can add `status` or `headers` attributes to the root `<html>` element to customize the http response:
-```jsx
+```tsx
 export default {
   fetch: (req) => (
     <html
@@ -678,15 +980,15 @@ export default {
     >
       <h1>Page Not Found</h1>
     </html>
-  ),
-};
+  )
+}
 ```
 ### Using htmx
 mono-jsx integrates with [htmx](https://htmx.org/) and [typed-htmx](https://github.com/Desdaemon/typed-htmx). To use htmx, add the `htmx` attribute to the root `<html>` element:
-```jsx
+```tsx
 export default {
   fetch: (req) => {
     const url = new URL(req.url);
@@ -705,16 +1007,16 @@ export default {
           Click Me
         </button>
       </html>
-    );
-  },
-};
+    )
+  }
+}
 ```
 #### Adding htmx Extensions
 You can add htmx [extensions](https://htmx.org/docs/#extensions) by adding the `htmx-ext-*` attribute to the root `<html>` element:
-```jsx
+```tsx
 export default {
   fetch: (req) => (
     <html htmx htmx-ext-response-targets htmx-ext-ws>
@@ -722,15 +1024,15 @@ export default {
         Click Me
       </button>
     </html>
-  ),
-};
+  )
+}
 ```
 #### Specifying htmx Version
 You can specify the htmx version by setting the `htmx` attribute to a specific version:
-```jsx
+```tsx
 export default {
   fetch: (req) => (
     <html htmx="2.0.4" htmx-ext-response-targets="2.0.2" htmx-ext-ws="2.0.2">
@@ -738,15 +1040,15 @@ export default {
         Click Me
       </button>
     </html>
-  ),
-};
+  )
+}
 ```
 #### Installing htmx Manually
 By default, mono-jsx installs htmx from [esm.sh](https://esm.sh/) CDN when you set the `htmx` attribute. You can also install htmx manually with your own CDN or local copy:
-```jsx
+```tsx
 export default {
   fetch: (req) => (
     <html>
@@ -760,8 +1062,8 @@ export default {
         </button>
       </body>
     </html>
-  ),
-};
+  )
+}
 ```
 ## License