npm - mono-jsx - Versions diffs - 0.1.2 → 0.2.0 - Mend

mono-jsx 0.1.2 → 0.2.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

@@ -2,32 +2,34 @@
 ![`<html>` as a `Response`](./.github/og-image.png)
-mono-jsx is a JSX runtime that renders `<html>` element to a `Response` object in JavaScript runtimes like Node.js, Deno, Bun, Cloudflare Workers, etc.
+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
+- 🚨 Complete Web API TypeScript definitions
 - ⏳ Streaming rendering
 - 🌎 Universal, works in Node.js, Deno, Bun, Cloudflare Workers, etc.
 ## Installation
-mono-jsx supports all modern JavaScript runtimes including Node.js, Deno, Bun, Cloudflare Workers, etc.
-You can install it via `npm i`, `deno add`, or `bun add`.
+mono-jsx supports all modern JavaScript runtimes including Node.js, Deno, Bun, and Cloudflare Workers.
+You can install it via `npm`, `deno`, or `bun`:
 ```bash
 # Node.js, Cloudflare Workers, or other node-compatible runtimes
 npm i mono-jsx
 # Deno
 deno add npm:mono-jsx
 # Bun
 bun add mono-jsx
 ```
 ## Setup JSX Runtime
-To use mono-jsx as JSX runtime, add the following configuration to your `tsconfig.json`(`deno.json` for Deno):
+To use mono-jsx as your JSX runtime, add the following configuration to your `tsconfig.json` (or `deno.json` for Deno):
 ```jsonc
 {
@@ -38,70 +40,70 @@ To use mono-jsx as JSX runtime, add the following configuration to your `tsconfi
 }
 ```
-Alternatively, you can also use pragma directive in your JSX file.
+Alternatively, you can use a pragma directive in your JSX file:
 ```js
 /** @jsxImportSource mono-jsx */
 ```
-You can also run `mono-jsx setup` to automatically add the configuration to your `tsconfig.json` or `deno.json`.
+You can also run `mono-jsx setup` to automatically add the configuration to your project:
 ```bash
 # Node.js, Cloudflare Workers, or other node-compatible runtimes
 npx mono-jsx setup
 # Deno
-deno run npm:mono-jsx setup
+deno run -A npm:mono-jsx setup
 # Bun
 bunx mono-jsx setup
 ```
 ## Usage
-mono-jsx allows you to return an `<html>` JSX element as a `Response` object in the `fetch` handler.
+mono-jsx allows you to return an `<html>` JSX element as a `Response` object in the `fetch` handler:
 ```tsx
 // app.tsx
 export default {
   fetch: (req) => (
     <html>
-      <h1>Hello World!</h1>
+      <h1>Welcome to mono-jsx!</h1>
     </html>
   ),
 };
 ```
-For Deno/Bun users, you can run the `app.tsx` directly.
+For Deno/Bun users, you can run the `app.tsx` directly:
 ```bash
 deno serve app.tsx
 bun run app.tsx
 ```
-If you are building a web app with [Cloudflare Workers](https://developers.cloudflare.com/workers/wrangler/commands/#dev), use `wrangler dev` command to start the app in local development mode.
+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:
 ```bash
 npx wrangler dev app.tsx
 ```
-**Node.js does not support JSX syntax and declarative fetch server**, we recommend using mono-jsx with [srvx](https://srvx.h3.dev/).
+**Node.js doesn't support JSX syntax or declarative fetch servers**, so we recommend using mono-jsx with [srvx](https://srvx.h3.dev/):
 ```tsx
 // app.tsx
 import { serve } from "srvx";
 serve({
   port: 3000,
   fetch: (req) => (
     <html>
-      <h1>Hello World!</h1>
+      <h1>Welcome to mono-jsx!</h1>
     </html>
   ),
 });
 ```
-and you will need [tsx](https://www.npmjs.com/package/tsx) to start the app without a build step.
+You'll need [tsx](https://www.npmjs.com/package/tsx) to start the app without a build step:
 ```bash
 npx tsx app.tsx
@@ -109,27 +111,33 @@ npx tsx app.tsx
 ## Using JSX
-mono-jsx uses [**JSX**](https://react.dev/learn/describing-the-ui) to describe the user interface, similar to React but with some differences.
+mono-jsx uses [**JSX**](https://react.dev/learn/describing-the-ui) to describe the user interface, similar to React but with key differences.
 ### Using Standard HTML Property Names
-mono-jsx adopts standard HTML property names, avoiding React's custom property naming conventions.
+mono-jsx adopts standard HTML property names, avoiding React's custom naming conventions:
-- `className` becomes `class`
-- `htmlFor` becomes `for`
-- `onChange` becomes `onInput`
+- `className` → `class`
+- `htmlFor` → `for`
+- `onChange` → `onInput`
-### Composition `class`
+### Composition with `class`
-mono-jsx allows you to compose the `class` property using an array of strings, objects, or expressions.
+mono-jsx allows you to compose the `class` property using arrays of strings, objects, or expressions:
 ```jsx
-<div class={["container box", isActive && "active", { hover: isHover }]} />;
+<div
+  class={[
+    "container box",
+    isActive && "active",
+    { hover: isHover },
+  ]}
+/>;
 ```
-### Using Pseudo Classes and Media Queries in the `style` Property
+### Using Pseudo Classes and Media Queries in `style`
-mono-jsx allows you to use [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.
+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
 <a
@@ -148,14 +156,16 @@ mono-jsx allows you to use [pseudo classes](https://developer.mozilla.org/en-US/
 ### `<slot>` Element
-mono-jsx uses [`<slot>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) element to render the slotted content (Equivalent to React's `children` property). Plus, you also can add the `name` attribute to define a named slot.
+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
 function Container() {
   return (
     <div class="container">
-      <slot /> {/* <h1>Hello world!</h1> */}
-      <slot name="desc" /> {/* <p>This is a description.</p> */}
+      {/* Default slot */}
+      <slot />
+      {/* Named slot */}
+      <slot name="desc" />
     </div>
   );
 }
@@ -163,7 +173,9 @@ function Container() {
 function App() {
   return (
     <Container>
+      {/* This goes to the named slot */}
       <p slot="desc">This is a description.</p>
+      {/* This goes to the default slot */}
       <h1>Hello world!</h1>
     </Container>
   );
@@ -172,7 +184,7 @@ function App() {
 ### `html` Tag Function
-mono-jsx doesn't support the `dangerouslySetInnerHTML` property, instead, it provides a `html` tag function to render raw HTML in JSX.
+mono-jsx provides an `html` tag function to render raw HTML in JSX instead of React's `dangerouslySetInnerHTML`:
 ```jsx
 function App() {
@@ -180,8 +192,7 @@ function App() {
 }
 ```
-The `html` tag function is a global function injected by mono-jsx, you can use it in any JSX expression without importing it.
-You also can use the `css` and `js`, that are just aliases of the `html` tag function, to render CSS and JavaScript code.
+The `html` tag function is globally available without importing. You can also use `css` and `js` tag functions for CSS and JavaScript:
 ```jsx
 function App() {
@@ -195,31 +206,38 @@ function App() {
 ```
 > [!WARNING]
-> the `html` tag function is **unsafe** that can cause [**XSS**](https://en.wikipedia.org/wiki/Cross-site_scripting) vulnerabilities.
+> The `html` tag function is **unsafe** and can cause [**XSS**](https://en.wikipedia.org/wiki/Cross-site_scripting) vulnerabilities.
 ### Event Handlers
-mono-jsx allows you to write event handlers directly in the JSX code, like React.
+mono-jsx lets you write event handlers directly in JSX, similar to React:
 ```jsx
 function Button() {
-  return <button onClick={(evt) => alert("BOOM!")}>Click Me</button>;
+  return (
+    <button onClick={(evt) => alert("BOOM!")}>
+      Click Me
+    </button>
+  );
 }
 ```
 > [!NOTE]
-> the event handler would never be called in server-side. It will be serialized to a string and sent to the client-side. **This means you should NOT use any server-side variables or functions in the event handler.**
+> Event handlers are never called on the server-side. They're serialized to strings and sent to the client. **This means you should NOT use server-side variables or functions in event handlers.**
 ```tsx
+import { doSomething } from "some-library";
 function Button(this: FC, props: { role: string }) {
   let message = "BOOM!";
-  console.log(message); // only print message in server-side
+  console.log(message); // only executes on server-side
   return (
     <button
       role={props.role}
       onClick={(evt) => {
         alert(message);           // ❌ `message` is a server-side variable
         console.log(props.role);  // ❌ `props` is a server-side variable
+        doSomething();            // ❌ `doSomething` is imported on the server-side
         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
@@ -232,35 +250,58 @@ function Button(this: FC, props: { role: string }) {
 }
 ```
-Plus, mono-jsx supports the `mount` event that will be triggered when the element is mounted in the client-side.
+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>Hello World!</h1>
+      <h1>Welcome to mono-jsx!</h1>
     </div>
   );
 }
 ```
-## Using State
+mono-jsx also accepts functions for the `action` property on `form` elements, which will be called on form submission:
+```tsx
+function App() {
+  return (
+    <form
+      action={(data: FormData, event: SubmitEvent) => {
+        event.preventDefault(); // true
+        console.log(data.get("name"));
+      }}
+    >
+      <input type="text" name="name" />
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+## Reactive
+mono-jsx provides a minimal state runtime for updating the view based on client-side state changes:
+### Using State
-mono-jsx provides a minimal state runtime that allows you to update view based on state changes in client-side.
+You can use `this` to define state in your components. The view will automatically update when the state changes:
 ```tsx
 function Counter(
   this: FC<{ count: number }>,
   props: { initialCount?: number },
 ) {
+  // Initialize state
   this.count = props.initialCount ?? 0;
   return (
     <div>
-      {/* use the state */}
+      {/* render state */}
       <span>{this.count}</span>
-      {/* use computed state */}
-      <span>doubled: {this.computed(() => 2 * this.count)}</span>
-      {/* update the state in event handlers */}
+      {/* Update state to trigger re-render */}
       <button onClick={() => this.count--}>-</button>
       <button onClick={() => this.count++}>+</button>
     </div>
@@ -268,11 +309,36 @@ function Counter(
 }
 ```
-> [!WARNING]
-> The state cannot be used in an arrow function component, you should use a `function` declaration instead.
+### Using Computed Properties
-```jsx
-// ❌ `this.count++` won't update the view, please use a function declaration instead
+You can use `this.computed` to create computed properties based on state. The computed property will automatically update when the state changes:
+```tsx
+function App(this: FC<{ input: string }>) {
+  this.input = 'Hello, world';
+  return (
+    <div>
+      <h1>{this.computed(() = this.input + "!")}</h1>
+      <form
+        action={(data: FormData ) => {
+          this.input = data.get("input") as string;
+        }}
+      >
+        <input type="text" name="input" value={this.input} />
+        <button type="submit">Submit</button>
+      </form>
+    </div>
+  );
+}
+```
+### Limitation of States
+1\. States cannot be used in arrow function components.
+```tsx
+// ❌ Won't work - state updates won't refresh the view
 const App = () => {
   this.count = 0;
   return (
@@ -282,40 +348,87 @@ const App = () => {
     </div>
   );
 };
+// ✅ Works correctly
+function App(this: FC) {
+  this.count = 0;
+  return (
+    <div>
+      <span>{this.count}</span>
+      <button onClick={() => this.count++}>+</button>
+    </div>
+  );
+}
+```
+2\. States cannot be computed outside of the `this.computed` method.
+```tsx
+// ❌ Won't work - state updates won't refresh the view
+function App(this: FC<{ message: string }>) {
+  this.message = "Hello, world";
+  return (
+    <div>
+      <h1 title={this.message + "!"}>{this.message + "!"}</h1>
+      <button onClick={() => this.message = "Clicked"}>
+        Click Me
+      </button>
+    </div>
+  );
+}
+// ✅ Works correctly
+function App(this: FC) {
+  this.message = "Hello, world";
+  return (
+    <div>
+      <h1 title={this.computed(() => this.message + "!")}>{this.computed(() => this.message + "!")}</h1>
+      <button onClick={() => this.message = "Clicked"}>
+        Click Me
+      </button>
+    </div>
+  );
+}
 ```
 ## Built-in Elements
-mono-jsx provides some built-in elements to help you build your app.
+mono-jsx provides built-in elements to help you build reactive UIs.
 ### `<toggle>` element
-`<toggle>` element allows you to toggle the visibility of the slotted content.
+The `<toggle>` element conditionally renders content based on a boolean value:
 ```tsx
 function App(this: FC<{ show: boolean }>) {
   this.show = false;
+  function toggle() {
+    this.show = !this.show;
+  }
   return (
     <div>
       <toggle value={this.show}>
-        <h1>Hello World!</h1>
+        <h1>Welcome to mono-jsx!</h1>
       </toggle>
-      <button onClick={toggle}>{this.computed(() => this.show ? "Hide" : "Show")}</button>
+      <button onClick={toggle}>
+        {this.computed(() => this.show ? "Hide" : "Show")}
+      </button>
     </div>
   );
-  function toggle() {
-    this.show = !this.show;
-  }
 }
 ```
 ### `<switch>` element
-`<switch>` element allows you to switch the slotted content based on the `value` property. You need to define the `slot` attribute in the slotted content to match the `value`, otherwise, the default slots will be rendered.
+The `<switch>` element renders different content based on a value. Elements with matching `slot` attributes are displayed when their value matches, otherwise default content is shown:
 ```tsx
 function App(this: FC<{ lang: "en" | "zh" | "emoji" }>) {
   this.lang = "en";
   return (
     <div>
       <switch value={this.lang}>
@@ -323,6 +436,7 @@ function App(this: FC<{ lang: "en" | "zh" | "emoji" }>) {
         <h1 slot="zh">你好，世界！</h1>
         <h1>✋🌎❗️</h1>
       </switch>
       <button onClick={() => this.lang = "en"}>English</button>
       <button onClick={() => this.lang = "zh"}>中文</button>
       <button onClick={() => this.lang = "emoji"}>Emoji</button>
@@ -333,10 +447,10 @@ function App(this: FC<{ lang: "en" | "zh" | "emoji" }>) {
 ## Streaming Rendering
-mono-jsx renders your `<html>` as a readable stream, that allows async function components are rendered asynchronously. You can set a `placeholder` attribute to show a loading state while the async component is loading.
+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
-async function Sleep(ms) {
+async function Sleep({ ms }) {
   await new Promise((resolve) => setTimeout(resolve, ms));
   return <slot />;
 }
@@ -344,7 +458,8 @@ async function Sleep(ms) {
 export default {
   fetch: (req) => (
     <html>
-      <h1>Hello World!</h1>
+      <h1>Welcome to mono-jsx!</h1>
       <Sleep ms={1000} placeholder={<p>Sleeping...</p>}>
         <p>After 1 second</p>
       </Sleep>
@@ -353,10 +468,10 @@ export default {
 };
 ```
-You can also set `rendering` attribute to "eager" to render the async component eagerly, which means the async component will be rendered as a sync function component and the `placeholder` will be ignored.
+You can set the `rendering` attribute to `"eager"` to force synchronous rendering (the `placeholder` will be ignored):
 ```jsx
-async function Sleep(ms) {
+async function Sleep({ ms }) {
   await new Promise((resolve) => setTimeout(resolve, ms));
   return <slot />;
 }
@@ -364,7 +479,8 @@ async function Sleep(ms) {
 export default {
   fetch: (req) => (
     <html>
-      <h1>Hello World!</h1>
+      <h1>Welcome to mono-jsx!</h1>
       <Sleep ms={1000} rendering="eager">
         <p>After 1 second</p>
       </Sleep>
@@ -373,9 +489,36 @@ export default {
 };
 ```
+## Using Context
+You can use the `context` property in `this` to access context values in your components. The context is defined on the root `<html>` element:
+```tsx
+function Dash(this: FC<{}, { auth: { uuid: string; name: string } }>) {
+  const { auth } = this.context;
+  return (
+    <div>
+      <h1>Welcome back, {auth.name}!</h1>;
+      <p>Your UUID is {auth.uuid}</p>
+    </div>
+  );
+}
+export default {
+  fetch: (req) => {
+    const auth = doAuth(req);
+    return (
+      <html context={{ auth }} request={req}>
+        <Dash />
+      </html>
+    );
+  },
+};
+```
 ## Accessing Request Info
-You can access the request info in a function component by using the `request` property in the `this` context. And you must pass the `request` object to the root `<html>` element to make it work.
+You can access request information in components via the `request` property in `this` which is set on the root `<html>` element:
 ```tsx
 function RequestInfo(this: FC) {
@@ -401,7 +544,7 @@ export default {
 ## Customizing Response
-You can add `status` or `headers` attribute to the `<html>` element to customize the response.
+Add `status` or `headers` attributes to the root `<html>` element to customize the response:
 ```jsx
 export default {

package/bin/mono-jsx CHANGED Viewed

@@ -1,34 +1,53 @@
 #!/usr/bin/env node
+import { existsSync } from "node:fs";
 import { readFile, writeFile } from "node:fs/promises";
 import process from "node:process";
 switch (process.argv[2]) {
   case "setup":
-    setup().then(() => {
-      console.log("✅ JSX runtime setup complete.");
-    });
+    setup()
     break;
   default:
     process.exit(0);
 }
 async function setup() {
-  let tsConfigPath = globalThis.Deno ? "deno.json" : "tsconfig.json";
+  if (globalThis.Deno && existsSync("deno.jsonc")) {
+    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",
+      "",
+    );
+    return;
+  }
+  let tsConfigFilename = globalThis.Deno ? "deno.json" : "tsconfig.json";
   let tsConfig = Object.create(null);
   try {
-    const json = await readFile(tsConfigPath, "utf8");
-    tsConfig = JSON.parse(json);
+    const data = await readFile(tsConfigFilename, "utf8");
+    tsConfig = JSON.parse(data);
   } catch {
     // ignore
   }
-  tsConfig.compilerOptions = {
-    ...tsConfig.compilerOptions,
-    jsx: "react-jsx",
-    jsxImportSource: "mono-jsx",
-  };
+  const compilerOptions = tsConfig.compilerOptions ?? (tsConfig.compilerOptions = {});
+  if (compilerOptions.jsx === "react-jsx" && compilerOptions.jsxImportSource === "mono-jsx") {
+    console.log("%cmono-jsx already setup.","color:grey");
+    return;
+  }
   if (!globalThis.Deno) {
-    tsConfig.compilerOptions.alllowJs = true
+    compilerOptions.module ??= "es2022";
+    compilerOptions.moduleResolution ??= "bundler";
   }
-  await writeFile(tsConfigPath, JSON.stringify(tsConfig, null, 2));
+  compilerOptions.jsx = "react-jsx";
+  compilerOptions.jsxImportSource = "mono-jsx";
+  await writeFile(tsConfigFilename, JSON.stringify(tsConfig, null, 2));
+  console.log("✅ mono-jsx setup complete.")
 }

package/jsx-runtime.mjs CHANGED Viewed

@@ -6,7 +6,7 @@ var $state = Symbol.for("mono.state");
 var $computed = Symbol.for("mono.computed");
 // state.ts
-function createState(request) {
+function createState(context, request) {
   let collectDeps;
   const computed = (fn) => {
     const deps = /* @__PURE__ */ Object.create(null);
@@ -18,24 +18,28 @@ function createState(request) {
   };
   return new Proxy(/* @__PURE__ */ Object.create(null), {
     get(target, key, receiver) {
-      const value = Reflect.get(target, key, receiver);
-      if (key === "request") {
-        if (!request) {
-          throw new Error("request is not defined");
+      switch (key) {
+        case "context":
+          return context ?? {};
+        case "request":
+          if (!request) {
+            throw new Error("request is not defined");
+          }
+          return request;
+        case "computed":
+          return computed;
+        default: {
+          const value = Reflect.get(target, key, receiver);
+          if (typeof key === "symbol") {
+            return value;
+          }
+          if (collectDeps) {
+            collectDeps(key, value);
+            return value;
+          }
+          return [$state, { key, value }, $vnode];
         }
-        return request;
-      }
-      if (key === "computed") {
-        return computed;
       }
-      if (typeof key === "symbol") {
-        return value;
-      }
-      if (collectDeps) {
-        collectDeps(key, value);
-        return value;
-      }
-      return [$state, { key, value }, $vnode];
     },
     set(target, key, value, receiver) {
       const vt = typeof value;
@@ -46,9 +50,16 @@ function createState(request) {
 }
 // runtime/index.ts
-var RUNTIME_STATE_JS = "const p=(e,i)=>e.getAttribute(i),m=(e,i)=>e.hasAttribute(i),M=new Map,T=e=>M.get(e)??M.set(e,L()).get(e);function L(){const e=Object.create(null),i=new Map;function f(n,o){let a=o;Object.defineProperty(e,n,{get:()=>a,set:u=>{if(u!==a){const r=i.get(n);r&&queueMicrotask(()=>r.forEach(s=>s())),a=u}}})}function d(n,o,a,u){let r;if(o==='toggle'){let s;r=()=>{if(!s){const t=n.firstElementChild;t&&t.tagName==='TEMPLATE'&&m(t,'m-slot')?(s=t.content.childNodes,n.innerHTML=''):s=n.childNodes}a()?n.append(...s):n.innerHTML=''}}else if(o==='switch'){let s=p(n,'match'),t,l,E=c=>t.get(c)??t.set(c,[]).get(c),h;r=()=>{if(!t){t=new Map,l=[];for(const c of n.childNodes)if(c.nodeType===1&&c.tagName==='TEMPLATE'&&m(c,'m-slot')){for(const g of c.content.childNodes)g.nodeType===1&&m(g,'slot')?E(p(g,'slot')).push(g):l.push(g);c.remove()}else s?E(s).push(c):l.push(c)}h=a(),n.innerHTML='',n.append(...t.has(h)?t.get(h):l)}}else if(o&&o.length>2&&o.startsWith('[')&&o.endsWith(']')){let s=o.slice(1,-1),t=n.parentElement;t.tagName==='M-GROUP'&&(t=t.previousElementSibling),r=()=>{const l=a();l===!1?t.removeAttribute(s):(s==='class'||s==='style')&&l&&typeof l=='object'?t.setAttribute(s,s==='class'?cx(l):styleToCSS(l)):t.setAttribute(s,l===!0?'':''+l)}}else r=()=>n.textContent=''+a();if(r)for(const s of u){let t=i.get(s);t||(t=[],i.set(s,t)),t.push(r)}}return{store:e,define:f,createEffect:d}}customElements.define('m-state',class extends HTMLElement{connectedCallback(){const e=this,i=p(e,'mode'),f=p(e,'key'),d=T(p(e,'fc'));f?d.createEffect(e,i,()=>d.store[f],[f]):m(e,'computed')&&setTimeout(()=>{const n=e.firstChild;if(n&&n.nodeType===1&&n.type==='computed'){const o=n.textContent;o&&new Function('$',o).call(d.store,(a,u)=>d.createEffect(e,i,a,u))}})}}),Object.assign(globalThis,{$state:e=>T(e).store,$defineState:(e,i)=>{const f=e.indexOf(':');f>0&&T(e.slice(0,f)).define(e.slice(f+1),i)}});";
-var RUNTIME_SUSPENSE_JS = "const n={},o=e=>e.getAttribute('chunk-id');c('m-portal',e=>{n[o(e)]=e}),c('m-chunk',e=>{const t=o(e),s=n[t];s&&setTimeout(()=>{s.replaceWith(...e.firstChild.content.childNodes),delete n[t],e.remove()})});function c(e,t){customElements.define(e,class extends HTMLElement{connectedCallback(){t(this)}})}";
-var RUNTIME_COMPONENTS_JS = { "cx": "var cx=(()=>{var e=r=>typeof r=='string',n=r=>typeof r=='object'&&r!==null;function t(r){return e(r)?r:n(r)?Array.isArray(r)?r.map(t).filter(Boolean).join(' '):Object.entries(r).filter(([,o])=>!!o).map(([o])=>o).join(' '):''}return t;})();", "styleToCSS": "var styleToCSS=(()=>{var a=new Set(['animation-iteration-count','aspect-ratio','border-image-outset','border-image-slice','border-image-width','box-flex-group','box-flex','box-ordinal-group','column-count','columns','fill-opacity','flex-grow','flex-negative','flex-order','flex-positive','flex-shrink','flex','flood-opacity','font-weight','grid-area','grid-column-end','grid-column-span','grid-column-start','grid-column','grid-row-end','grid-row-span','grid-row-start','grid-row','line-clamp','line-height','opacity','order','orphans','stop-opacity','stroke-dasharray','stroke-dashoffset','stroke-miterlimit','stroke-opacity','stroke-width','tab-size','widows','z-index','zoom']),s=r=>typeof r=='string',c=r=>typeof r=='object'&&r!==null,f=r=>r.replace(/[a-z][A-Z]/g,t=>t.charAt(0)+'-'+t.charAt(1).toLowerCase());function u(r){if(s(r))return r;if(!c(r))return'';let t='';for(let[n,o]of Array.isArray(r)?r:Object.entries(r)){if(o==null||o===!1||Number.isNaN(o)||!s(n))return'';let e=f(n),i=typeof o=='number'?a.has(e)?''+o:o+'px':''+o;t+=(t!==''?';':'')+e+':'+(e==='content'?JSON.stringify(i):i)}return t}return u;})();", "event": "window.$emit=(evt,el,fn,fc)=>fn.call(window.$state?.(fc)??el,evt);window.$onsubmit=(evt,el,fn,fc)=>{evt.preventDefault();fn.call(window.$state?.(fc)??el,new FormData(el),evt)};" };
+var RUNTIME_STATE_JS = `const p=(e,i)=>e.getAttribute(i),m=(e,i)=>e.hasAttribute(i),M=new Map,T=e=>M.get(e)??M.set(e,L()).get(e);function L(){const e=Object.create(null),i=new Map;function f(n,o){let a=o;Object.defineProperty(e,n,{get:()=>a,set:u=>{if(u!==a){const r=i.get(n);r&&queueMicrotask(()=>r.forEach(s=>s())),a=u}}})}function d(n,o,a,u){let r;if(o==="toggle"){let s;r=()=>{if(!s){const t=n.firstElementChild;t&&t.tagName==="TEMPLATE"&&m(t,"m-slot")?(s=t.content.childNodes,n.innerHTML=""):s=n.childNodes}a()?n.append(...s):n.innerHTML=""}}else if(o==="switch"){let s=p(n,"match"),t,l,E=c=>t.get(c)??t.set(c,[]).get(c),h;r=()=>{if(!t){t=new Map,l=[];for(const c of n.childNodes)if(c.nodeType===1&&c.tagName==="TEMPLATE"&&m(c,"m-slot")){for(const g of c.content.childNodes)g.nodeType===1&&m(g,"slot")?E(p(g,"slot")).push(g):l.push(g);c.remove()}else s?E(s).push(c):l.push(c)}h=a(),n.innerHTML="",n.append(...t.has(h)?t.get(h):l)}}else if(o&&o.length>2&&o.startsWith("[")&&o.endsWith("]")){let s=o.slice(1,-1),t=n.parentElement;t.tagName==="M-GROUP"&&(t=t.previousElementSibling),r=()=>{const l=a();l===!1?t.removeAttribute(s):(s==="class"||s==="style")&&l&&typeof l=="object"?t.setAttribute(s,s==="class"?cx(l):styleToCSS(l)):t.setAttribute(s,l===!0?"":""+l)}}else r=()=>n.textContent=""+a();if(r)for(const s of u){let t=i.get(s);t||(t=[],i.set(s,t)),t.push(r)}}return{store:e,define:f,createEffect:d}}customElements.define("m-state",class extends HTMLElement{connectedCallback(){const e=this,i=p(e,"mode"),f=p(e,"key"),d=T(p(e,"fc"));f?d.createEffect(e,i,()=>d.store[f],[f]):m(e,"computed")&&setTimeout(()=>{const n=e.firstChild;if(n&&n.nodeType===1&&n.type==="computed"){const o=n.textContent;o&&new Function("$",o).call(d.store,(a,u)=>d.createEffect(e,i,a,u))}})}}),Object.assign(globalThis,{$state:e=>T(e).store,$defineState:(e,i)=>{const f=e.indexOf(":");f>0&&T(e.slice(0,f)).define(e.slice(f+1),i)}});`;
+var RUNTIME_SUSPENSE_JS = `const n={},o=e=>e.getAttribute("chunk-id");c("m-portal",e=>{n[o(e)]=e}),c("m-chunk",e=>{const t=o(e),s=n[t];s&&setTimeout(()=>{s.replaceWith(...e.firstChild.content.childNodes),delete n[t],e.remove()})});function c(e,t){customElements.define(e,class extends HTMLElement{connectedCallback(){t(this)}})}`;
+var RUNTIME_COMPONENTS_JS = {
+  /** cx.js (239 bytes) */
+  cx: `var cx=(()=>{var n=e=>typeof e=="string",o=e=>typeof e=="object"&&e!==null;function t(e){return n(e)?e:o(e)?Array.isArray(e)?e.map(t).filter(Boolean).join(" "):Object.entries(e).filter(([,r])=>!!r).map(([r])=>r).join(" "):""}return t;})();`,
+  /** styleToCSS.js (1203 bytes) */
+  styleToCSS: `var styleToCSS=(()=>{var c=new Set(["animation-iteration-count","aspect-ratio","border-image-outset","border-image-slice","border-image-width","box-flex-group","box-flex","box-ordinal-group","column-count","columns","fill-opacity","flex-grow","flex-negative","flex-order","flex-positive","flex-shrink","flex","flood-opacity","font-weight","grid-area","grid-column-end","grid-column-span","grid-column-start","grid-column","grid-row-end","grid-row-span","grid-row-start","grid-row","line-clamp","line-height","opacity","order","orphans","stop-opacity","stroke-dasharray","stroke-dashoffset","stroke-miterlimit","stroke-opacity","stroke-width","tab-size","widows","z-index","zoom"]),s=e=>typeof e=="string",u=e=>typeof e=="object"&&e!==null,f=e=>e.replace(/[a-z][A-Z]/g,r=>r.charAt(0)+"-"+r.charAt(1).toLowerCase());function l(e){if(s(e))return e;if(u(e)){let r="";for(let[o,t]of Array.isArray(e)?e:Object.entries(e)){if(t==null||t===!1||Number.isNaN(t)||!s(o))return"";let n=f(o),i=typeof t=="number"?c.has(n)?""+t:t+"px":a(""+t);r+=(r!==""?";":"")+a(n)+":"+(n==="content"?JSON.stringify(i):i)}return r}return""}function a(e){return e.replace(/["<>]/g,r=>r==="<"?"&lt;":r===">"?"&gt;":"'")}return l;})();`,
+  /** event.js (176 bytes) */
+  event: `window.$emit=(evt,el,fn,fc)=>fn.call(window.$state?.(fc)??el,evt);window.$onsubmit=(evt,el,fn,fc)=>{evt.preventDefault();fn.call(window.$state?.(fc)??el,new FormData(el),evt)};`
+};
 // runtime/utils.ts
 var cssBareUnitProps = /* @__PURE__ */ new Set([
@@ -112,26 +123,75 @@ function cx(className) {
   return "";
 }
 function styleToCSS(style) {
-  if (isString(style)) return style;
-  if (!isObject(style)) return "";
-  let css = "";
-  for (const [k, v] of Array.isArray(style) ? style : Object.entries(style)) {
-    if (v === null || v === void 0 || v === false || Number.isNaN(v) || !isString(k)) return "";
-    const cssKey = toHyphenCase(k);
-    const cssValue = typeof v === "number" ? cssBareUnitProps.has(cssKey) ? "" + v : v + "px" : "" + v;
-    css += (css !== "" ? ";" : "") + cssKey + ":" + (cssKey === "content" ? JSON.stringify(cssValue) : cssValue);
+  if (isString(style)) {
+    return style;
+  }
+  if (isObject(style)) {
+    let css = "";
+    for (const [k, v] of Array.isArray(style) ? style : Object.entries(style)) {
+      if (v === null || v === void 0 || v === false || Number.isNaN(v) || !isString(k)) return "";
+      const cssKey = toHyphenCase(k);
+      const cssValue = typeof v === "number" ? cssBareUnitProps.has(cssKey) ? "" + v : v + "px" : escapeCSSText("" + v);
+      css += (css !== "" ? ";" : "") + escapeCSSText(cssKey) + ":" + (cssKey === "content" ? JSON.stringify(cssValue) : cssValue);
+    }
+    return css;
+  }
+  return "";
+}
+function escapeCSSText(str) {
+  return str.replace(/["<>]/g, (m) => {
+    if (m === "<") return "&lt;";
+    if (m === ">") return "&gt;";
+    return "'";
+  });
+}
+var regexpHtmlSafe = /["'&<>]/;
+function escapeHTML(str) {
+  if (typeof Bun === "object" && "escapeHTML" in Bun) return Bun.escapeHTML(str);
+  const match = regexpHtmlSafe.exec(str);
+  if (!match) {
+    return str;
+  }
+  let escape;
+  let index;
+  let lastIndex = 0;
+  let html2 = "";
+  for (index = match.index; index < str.length; index++) {
+    switch (str.charCodeAt(index)) {
+      case 34:
+        escape = "&quot;";
+        break;
+      case 38:
+        escape = "&amp;";
+        break;
+      case 39:
+        escape = "&#x27;";
+        break;
+      case 60:
+        escape = "&lt;";
+        break;
+      case 62:
+        escape = "&gt;";
+        break;
+      default:
+        continue;
+    }
+    if (lastIndex !== index) {
+      html2 += str.slice(lastIndex, index);
+    }
+    lastIndex = index + 1;
+    html2 += escape;
   }
-  return css;
+  return lastIndex !== index ? html2 + str.slice(lastIndex, index) : html2;
 }
 // render.ts
 var encoder = new TextEncoder();
 var regexpHtmlTag = /^[a-z][\w\-$]*$/;
-var regexpHtmlSafe = /["'&<>]/;
 var selfClosingTags = new Set("area,base,br,col,embed,hr,img,input,keygen,link,meta,param,source,track,wbr".split(","));
-var toAttrStringLit = (str) => JSON.stringify(escapeHTML(str));
 var isVNode = (v) => Array.isArray(v) && v.length === 3 && v[2] === $vnode;
 var hashCode = (s) => [...s].reduce((hash, c) => Math.imul(31, hash) + c.charCodeAt(0) | 0, 0);
+var toAttrStringLit = (str) => '"' + escapeHTML(str).replaceAll('"', '\\"') + '"';
 async function renderNode(ctx, node, stripSlotProp) {
   const { write, stateStore } = ctx;
   switch (typeof node) {
@@ -185,7 +245,7 @@ async function renderNode(ctx, node, stripSlotProp) {
           }
           break;
         }
-        const fcIndex = toString36(ctx.index.fc);
+        const fcIndex = ctx.index.fc.toString(36);
         if (tag === $state) {
           const { key, value } = props;
           write('<m-state fc="' + fcIndex + '" key=' + toAttrStringLit(key) + ">");
@@ -319,13 +379,13 @@ async function renderNode(ctx, node, stripSlotProp) {
             eager = true;
           }
           try {
-            const v = tag.call(createState(ctx.request), fcProps);
+            const v = tag.call(createState(ctx.context, ctx.request), fcProps);
             ctx.index.fc++;
             if (v instanceof Promise) {
               if (eager) {
                 await renderNode({ ...ctx, eager: true, slots: children }, await v);
               } else {
-                const chunkId = toString36(ctx.suspenses.length + 1);
+                const chunkId = (ctx.suspenses.length + 1).toString(36);
                 ctx.suspenses.push(v.then(async (c) => {
                   write('<m-chunk chunk-id="' + chunkId + '"><template>');
                   await renderNode({ ...ctx, eager, slots: children }, c);
@@ -395,11 +455,11 @@ async function renderNode(ctx, node, stripSlotProp) {
             }
             switch (propName) {
               case "class":
-                buffer += " " + renderAttr(propName, cx(propValue));
+                buffer += " class=" + toAttrStringLit(cx(propValue));
                 break;
               case "style":
                 if (isString(propValue) && propValue !== "") {
-                  buffer += " " + renderAttr(propName, cx(propValue));
+                  buffer += ' style="' + escapeCSSText(propValue) + '"';
                 } else if (isObject(propValue) && !Array.isArray(propValue)) {
                   const style = [];
                   const pseudoStyles = [];
@@ -409,55 +469,53 @@ async function renderNode(ctx, node, stripSlotProp) {
                     switch (k.charCodeAt(0)) {
                       case /* ':' */
                       58:
-                        pseudoStyles.push([k, styleToCSS(v)]);
+                        pseudoStyles.push([escapeCSSText(k), styleToCSS(v)]);
                         break;
                       case /* '@' */
                       64:
-                        atRuleStyles.push([k, styleToCSS(v)]);
+                        atRuleStyles.push([escapeCSSText(k), styleToCSS(v)]);
                         break;
                       case /* '&' */
                       38:
-                        nestingStyles.push([k, styleToCSS(v)]);
+                        nestingStyles.push([escapeCSSText(k), styleToCSS(v)]);
                         break;
                       default:
                         style.push([k, v]);
                     }
                   }
                   if (pseudoStyles.length > 0 || atRuleStyles.length > 0 || nestingStyles.length > 0) {
-                    let raw = "";
                     let css = "";
+                    let raw = "";
                     let styleIds;
                     let id;
                     let cssSelector;
-                    let key;
-                    let value;
                     if (style.length > 0) {
                       css = styleToCSS(style);
                       raw += css + "|";
                     }
                     raw += [pseudoStyles, atRuleStyles, nestingStyles].flat(1).map(([k, v]) => k + ">" + v).join("|");
                     styleIds = ctx.styleIds ?? (ctx.styleIds = /* @__PURE__ */ new Set());
-                    id = toString36(hashCode(raw));
+                    id = hashCode(raw).toString(36);
                     cssSelector = "[data-css-" + id + "]";
                     if (!styleIds.has(id)) {
                       styleIds.add(id);
                       if (css) {
                         css = cssSelector + "{" + css + "}";
                       }
-                      for ([key, value] of pseudoStyles) {
-                        css += cssSelector + key + "{" + value + "}";
+                      for (const [p, styles] of pseudoStyles) {
+                        css += cssSelector + p + "{" + styles + "}";
                       }
-                      for ([key, value] of atRuleStyles) {
-                        css += key + "{" + cssSelector + "{" + value + "}}";
+                      for (const [at, styles] of atRuleStyles) {
+                        css += at + "{" + cssSelector + "{" + styles + "}}";
                       }
-                      for ([key, value] of nestingStyles) {
-                        css += cssSelector + key.slice(1) + "{" + value + "}";
+                      for (const [n, styles] of nestingStyles) {
+                        css += cssSelector + n.slice(1) + "{" + styles + "}";
                       }
                       write('<style id="css-' + id + '">' + css + "</style>");
                     }
                     buffer += " data-css-" + id;
                   } else if (style.length > 0) {
-                    buffer += " " + renderAttr(propName, styleToCSS(style));
+                    buffer += ' style="' + styleToCSS(style) + '"';
                   }
                 }
                 break;
@@ -468,23 +526,23 @@ async function renderNode(ctx, node, stripSlotProp) {
                 break;
               case "action":
                 if (typeof propValue === "function" && tag === "form") {
-                  const id = "$MF_" + toString36(ctx.index.mf++);
+                  const id = "$MF_" + (ctx.index.mf++).toString(36);
                   write("<script>function " + id + "(fd){(" + propValue.toString() + ")(fd)}<\/script>");
                   buffer += ' onsubmit="$onsubmit(event,this,' + id + ",'" + fcIndex + `')"`;
                 } else if (isString(propValue)) {
-                  buffer += " " + renderAttr(propName, propValue);
+                  buffer += " action=" + toAttrStringLit(propValue);
                 }
                 break;
               case "slot":
                 if (!stripSlotProp && isString(propValue)) {
-                  buffer += " " + renderAttr(propName, propValue);
+                  buffer += " slot=" + toAttrStringLit(propValue);
                 }
                 break;
               default:
                 if (regexpHtmlTag.test(propName) && propValue !== void 0) {
                   if (propName.startsWith("on")) {
                     if (typeof propValue === "function") {
-                      const id = "$MF_" + toString36(ctx.index.mf++);
+                      const id = "$MF_" + (ctx.index.mf++).toString(36);
                       write("<script>function " + id + "(e){(" + propValue.toString() + ")(e)}<\/script>");
                       buffer += " " + propName.toLowerCase() + '="$emit(event,this,' + id + ",'" + fcIndex + `')"`;
                     }
@@ -493,7 +551,7 @@ async function renderNode(ctx, node, stripSlotProp) {
                       buffer += " " + propName;
                     }
                   } else {
-                    buffer += " " + renderAttr(propName, propValue);
+                    buffer += " " + (propValue === true ? escapeHTML(propName) : escapeHTML(propName) + "=" + toAttrStringLit("" + propValue));
                   }
                 }
             }
@@ -521,10 +579,6 @@ async function renderNode(ctx, node, stripSlotProp) {
             );
           }
         }
-      } else if (Array.isArray(node) || node && Symbol.iterator in node) {
-        for (const child of node) {
-          await renderNode(ctx, child);
-        }
       }
       break;
   }
@@ -538,69 +592,26 @@ async function renderChildren(ctx, children, stripSlotProp) {
     await renderNode(ctx, children, stripSlotProp);
   }
 }
-function renderAttr(key, value) {
-  return value === true ? key : key + "=" + toAttrStringLit("" + value);
-}
-function toString36(num) {
-  return num.toString(36);
-}
-function escapeHTML(str) {
-  const match = regexpHtmlSafe.exec(str);
-  if (!match) {
-    return str;
-  }
-  if (typeof Bun === "object" && "escapeHTML" in Bun) return Bun.escapeHTML(str);
-  let escape;
-  let index;
-  let lastIndex = 0;
-  let html2 = "";
-  for (index = match.index; index < str.length; index++) {
-    switch (str.charCodeAt(index)) {
-      case 34:
-        escape = "&quot;";
-        break;
-      case 38:
-        escape = "&amp;";
-        break;
-      case 39:
-        escape = "&#x27;";
-        break;
-      case 60:
-        escape = "&lt;";
-        break;
-      case 62:
-        escape = "&gt;";
-        break;
-      default:
-        continue;
-    }
-    if (lastIndex !== index) {
-      html2 += str.slice(lastIndex, index);
-    }
-    lastIndex = index + 1;
-    html2 += escape;
-  }
-  return lastIndex !== index ? html2 + str.slice(lastIndex, index) : html2;
-}
 function render(node, renderOptions = {}) {
-  const { request, status, headers: headersRaw, rendering } = renderOptions;
-  const headers = /* @__PURE__ */ Object.create(null);
-  if (headersRaw) {
-    const { etag, lastModified } = headersRaw;
+  const { context, request, status, headers: headersInit, rendering } = renderOptions;
+  const headers = new Headers();
+  if (headersInit) {
+    for (const [key, value] of Object.entries(headersInit)) {
+      if (value) {
+        headers.set(toHyphenCase(key), value);
+      }
+    }
+    const etag = headers.get("etag");
     if (etag && request?.headers.get("if-none-match") === etag) {
       return new Response(null, { status: 304 });
     }
+    const lastModified = headers.get("last-modified");
     if (lastModified && request?.headers.get("if-modified-since") === lastModified) {
       return new Response(null, { status: 304 });
     }
-    for (const [key, value] of Object.entries(headersRaw)) {
-      if (value) {
-        headers[toHyphenCase(key)] = value;
-      }
-    }
   }
-  headers["transfer-encoding"] = "chunked";
-  headers["content-type"] = "text/html; charset=utf-8";
+  headers.set("transfer-encoding", "chunked");
+  headers.set("content-type", "text/html; charset=utf-8");
   return new Response(
     new ReadableStream({
       async start(controller) {
@@ -610,6 +621,7 @@ function render(node, renderOptions = {}) {
         const rtComponents = { cx: false, styleToCSS: false };
         const ctx = {
           write,
+          context,
           request,
           stateStore,
           suspenses,
@@ -663,7 +675,7 @@ var jsx = (tag, props = /* @__PURE__ */ Object.create(null), key) => {
   }
   if (tag === "html") {
     const renderOptions = /* @__PURE__ */ Object.create(null);
-    for (const key2 of ["request", "status", "headers", "rendering"]) {
+    for (const key2 of ["context", "request", "status", "headers", "rendering"]) {
       if (Object.hasOwn(props, key2)) {
         renderOptions[key2] = props[key2];
         delete props[key2];
@@ -680,8 +692,8 @@ var html = (raw, ...values) => [
   $vnode
 ];
 Object.assign(globalThis, {
-  css: html,
   html,
+  css: html,
   js: html
 });
 export {

package/package.json CHANGED Viewed

@@ -1,25 +1,28 @@
 {
   "name": "mono-jsx",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "`<html>` as a `Response`.",
   "type": "module",
   "module": "./index.mjs",
+  "types": "./types/index.d.ts",
   "bin": {
     "mono-jsx": "./bin/mono-jsx"
   },
   "exports": {
     ".": {
+      "types": "./types/index.d.ts",
+      "node": "./index.mjs",
       "import": "./index.mjs"
     },
     "./jsx-runtime": {
       "types": "./types/jsx-runtime.d.ts",
-      "import": "./jsx-runtime.mjs",
-      "node": "./jsx-runtime.mjs"
+      "node": "./jsx-runtime.mjs",
+      "import": "./jsx-runtime.mjs"
     },
     "./jsx-dev-runtime": {
       "types": "./types/jsx-runtime.d.ts",
-      "import": "./jsx-runtime.mjs",
-      "node": "./jsx-runtime.mjs"
+      "node": "./jsx-runtime.mjs",
+      "import": "./jsx-runtime.mjs"
     }
   },
   "scripts": {

package/types/aria.d.ts CHANGED Viewed

@@ -231,7 +231,7 @@ export interface Attributes {
 }
 // All the WAI-ARIA 1.2 role attribute values from https://www.w3.org/TR/wai-aria-1.2/#role_definitions
-type Role =
+export type Role =
   | "alert"
   | "alertdialog"
   | "application"

package/types/html.d.ts CHANGED Viewed

@@ -135,7 +135,7 @@ export namespace HTML {
   interface FormAttributes<T extends EventTarget> extends GlobalAttributes<T> {
     "accept-charset"?: string;
-    action: string | (/* Mono specific */ (data: FormData) => void | Promise<void>);
+    action: string | (/* mono-jsx specific */ (data: FormData, event: SubmitEvent) => void | Promise<void>);
     autoComplete?: "on" | "off";
     encType?: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain";
     method?: "GET" | "POST" | "dialog";
@@ -820,8 +820,8 @@ export namespace HTML {
   }
   interface EventAttributes<T extends EventTarget> {
-    // Mono specific
-    onMount?: (e: { type: "mount"; target: T }) => void | Promise<void>;
+    // mono-jsx specific
+    onMount?: (e: { type: "mount"; currentTarget: T; target: T }) => void | Promise<void>;
     // Input Events
     onBeforeInput?: EventHandler<Event, T>;

package/types/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/types/jsx.d.ts CHANGED Viewed

@@ -4,7 +4,6 @@ import type * as Mono from "./mono.d.ts";
 import type { HTML } from "./html.d.ts";
 export type ChildType = VNode | string | number | bigint | boolean | null;
-export type Children = ChildType | (ChildType | ChildType[])[];
 export type VNode = readonly [
   tag: string | symbol | FC<any>,

package/types/mono.d.ts CHANGED Viewed

@@ -66,7 +66,10 @@ export interface CSSProperties extends BaseCSSProperties, AtRuleCSSProperties, P
   [key: `&${" " | "." | "["}${string}`]: CSSProperties;
 }
+export type ChildType = JSX.Element | string | number | bigint | boolean | null;
 export interface BaseAttributes {
+  children?: ChildType | (ChildType)[];
   key?: string | number;
   slot?: string;
 }
@@ -98,8 +101,9 @@ export interface Elements {
 }
 declare global {
-  type FC<T = Record<string, unknown>> = {
+  type FC<T = Record<string, unknown>, Context = Record<string, unknown>> = {
+    context: Context;
     request: Request;
-    computed: <T = unknown>(fn: () => T) => T;
+    computed: <V = unknown>(fn: () => V) => V;
   } & Omit<T, "request" | "computed">;
 }

package/types/render.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 export interface RenderOptions {
+  context?: Record<string, unknown>;
   request?: Request;
   status?: number;
   headers?: {