npm - mono-jsx - Versions diffs - 0.7.5 → 0.8.0-beta.11 - Mend

mono-jsx 0.7.5 → 0.8.0-beta.11

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

package/README.md +39 -19
package/dom/jsx-runtime.mjs +703 -0
package/jsx-runtime.mjs +265 -250
package/package.json +15 -3
package/setup.mjs +101 -7
package/types/dom/jsx-runtime.d.ts +22 -0
package/types/dom/mono.d.ts +47 -0
package/types/html.d.ts +89 -6
package/types/htmx.d.ts +1 -3
package/types/index.d.ts +2 -2
package/types/jsx-runtime.d.ts +14 -2
package/types/jsx.d.ts +114 -9
package/types/mono.d.ts +66 -178
package/types/render.d.ts +5 -3

package/README.md CHANGED Viewed

@@ -10,7 +10,7 @@ mono-jsx is a JSX runtime that renders the `<html>` element to a `Response` obje
 - ⚡️ Use web components, no virtual DOM
 - 💡 Complete Web API TypeScript definitions
 - ⏳ Streaming rendering
-- 🗂️ Built-in router(SPA mode)
+- 🗂️ Built-in router (SPA mode)
 - 🔑 Session storage
 - 🥷 [htmx](#using-htmx) integration
 - 🌎 Universal, works in Node.js, Deno, Bun, Cloudflare Workers, etc.
@@ -40,6 +40,8 @@ To use mono-jsx as your JSX runtime, add the following configuration to your `ts
 ```jsonc
 {
   "compilerOptions": {
+    "module": "esnext",
+    "moduleResolution": "bundler",
     "jsx": "react-jsx",
     "jsxImportSource": "mono-jsx"
   }
@@ -431,22 +433,38 @@ mono-jsx renders HTML on the server side and sends no hydration JavaScript to th
 To render a component by name, you can use the `<component>` element with the `name` prop, and ensure the component is registered in the `components` prop of root `<html>` element.
 ```tsx
+function Foo(props: { bar: string }) {
+  return <h1>{props.bar}</h1>;
+}
 export default {
   fetch: (req) => (
-    <html components={{ Foo }}>
-      <component name="Foo" props={{ /* props for the component */ }} placeholder={<p>Loading...</p>} />
+    <html request={req} components={{ Foo }}>
+      <component name="Foo" props={{ bar: "baz" }} placeholder={<p>Loading...</p>} />
     </html>
   )
 }
 ```
-Or you can use the `<component>` element with the `is` prop to render a component by function reference without registering the component in the `components` prop of root `<html>` element.
+You can use the `<component>` element with the `is` prop to render a component by function reference without registering the component in the `components` prop of root `<html>` element.
 ```tsx
 export default {
   fetch: (req) => (
-    <html>
-      <component is={Foo} props={{ /* props for the component */ }} placeholder={<p>Loading...</p>} />
+    <html request={req}>
+      <component is={Foo} props={{ bar: "baz" }} placeholder={<p>Loading...</p>} />
+    </html>
+  )
+}
+```
+Or you can use the `<component>` element with the `as` prop to render a component by JSX element.
+```tsx
+export default {
+  fetch: (req) => (
+    <html request={req}>
+      <component as={<Foo bar="baz" />} placeholder={<p>Loading...</p>} />
     </html>
   )
 }
@@ -476,7 +494,7 @@ function Dash(this: FC<{ page: "Profile" | "Projects" | "Settings" }>) {
 export default {
   fetch: (req) => (
-    <html components={{ Profile, Projects, Settings }}>
+    <html request={req} components={{ Profile, Projects, Settings }}>
       <Dash />
     </html>
   )
@@ -491,7 +509,7 @@ async function Lazy(this: FC<{ show: boolean }>, props: { url: string }) {
   return (
     <div>
       <toggle show={this.show}>
-        <component name="Foo" props={{ /* props for the component */ }} placeholder={<p>Loading...</p>} />
+        <component name="Foo" props={{ bar: "baz" }} placeholder={<p>Loading...</p>} />
       </toggle>
      <button onClick={() => this.show = true }>Load `Foo` Component</button>
     </div>
@@ -500,7 +518,7 @@ async function Lazy(this: FC<{ show: boolean }>, props: { url: string }) {
 export default {
   fetch: (req) => (
-    <html components={{ Foo }}>
+    <html request={req} components={{ Foo }}>
       <Lazy />
     </html>
   )
@@ -545,7 +563,7 @@ interface AppSignals {
   themeColor: string;
 }
-function Header(this: FC<{}, AppSignals>) {
+function Header(this: App<FC, AppSignals>) {
   return (
     <header>
       <h1 style={{ color: this.app.themeColor }}>Welcome to mono-jsx!</h1>
@@ -553,7 +571,7 @@ function Header(this: FC<{}, AppSignals>) {
   )
 }
-function Footer(this: FC<{}, AppSignals>) {
+function Footer(this: App<FC, AppSignals>) {
   return (
     <footer>
       <p style={{ color: this.app.themeColor }}>(c) 2025 mono-jsx.</p>
@@ -561,12 +579,12 @@ function Footer(this: FC<{}, AppSignals>) {
   )
 }
-function Main(this: FC<{}, AppSignals>) {
+function Main(this: App<FC, AppSignals>) {
   return (
     <main>
       <p>
         <label>Theme Color: </label>
-        <input type="color" onInput={({ target }) => this.app.themeColor = target.value}/>
+        <input type="color" $value={this.app.themeColor} />
       </p>
     </main>
   )
@@ -574,7 +592,7 @@ function Main(this: FC<{}, AppSignals>) {
 export default {
   fetch: (req) => (
-    <html app={{ themeColor: "#232323" }}>
+    <html app={{ themeColor: "#232323" } satisfies AppSignals}>
       <Header />
       <Main />
       <Footer />
@@ -696,7 +714,7 @@ function App(this: FC<{ lang: "en" | "zh" | "🙂" }>) {
       <switch value={this.lang}>
         <h1 slot="en">Hello, world!</h1>
         <h1 slot="zh">你好，世界！</h1>
-        <h1>✋🌎❗️</h1>
+        <h1 slot="🙂">✋🌎❗️</h1>
       </switch>
       <p>
         <button onClick={() => this.lang = "en"}>English</button>
@@ -837,7 +855,7 @@ The `this` object has the following built-in properties:
 - `effect`: A method to create side effects.
 ```ts
-type FC<Signals = {}, AppSignals = {}, Context = {}, Refs = {}, AppRefs = {}> = {
+type FC<Signals = {}, Refs = {}, AppSignals = {}, AppRefs = {}, Context = {}> = {
   readonly app: AppSignals & { refs: AppRefs; url: WithParams<URL> }
   readonly context: Context;
   readonly request: WithParams<Request>;
@@ -859,7 +877,7 @@ See the [Using Signals](#using-signals) section for more details on how to use s
 You can use `this.refs` to access refs in your components. Refs are defined using the `ref` attribute in JSX, and they allow you to access DOM elements directly. The `refs` object is a map of ref names to DOM elements.
 ```tsx
-function App(this: Refs<FC, { input: HTMLInputElement }>) {
+function App(this: Refs<FC, { input?: HTMLInputElement }>) {
   this.effect(() => {
     this.refs.input?.addEventListener("input", (evt) => {
       console.log("Input changed:", evt.target.value);
@@ -878,7 +896,7 @@ function App(this: Refs<FC, { input: HTMLInputElement }>) {
 You can also use `this.app.refs` to access app-level refs:
 ```tsx
-function Layout(this: Refs<FC, {}, { h1: HTMLH1Element }>) {
+function Layout(this: FC) {
   return (
     <>
     <header>
@@ -899,6 +917,8 @@ The `<component>` element also supports the `ref` attribute, which allows you to
 - `refresh`: A method to re-render the component with the current name and props.
 ```tsx
+import type { ComponentElement } from "mono-jsx";
 function App(this: Refs<FC, { component: ComponentElement }>) {
   this.effect(() => {
     // updating the component name and props will trigger a re-render of the component
@@ -906,7 +926,7 @@ function App(this: Refs<FC, { component: ComponentElement }>) {
     this.refs.component.props = {};
     const timer = setInterval(() => {
-       // re-render the component
+      // re-render the component
       this.refs.component.refresh();
     }, 1000);
     return () => clearInterval(timer); // cleanup