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

mono-jsx 0.2.0 → 0.3.1

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

@@ -109,6 +109,9 @@ You'll need [tsx](https://www.npmjs.com/package/tsx) to start the app without a
 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.
 ## Using JSX
 mono-jsx uses [**JSX**](https://react.dev/learn/describing-the-ui) to describe the user interface, similar to React but with key differences.
@@ -309,22 +312,63 @@ function Counter(
 }
 ```
-### Using Computed Properties
+### Using App State
-You can use `this.computed` to create computed properties based on state. The computed property will automatically update when the state changes:
+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:
+```tsx
+function Header(this: FC<{}, { title: string }>) {
+  return (
+    <header>
+      <h1>{this.app.title}</h1>
+    </header>
+  );
+}
+function Footer(this: FC<{}, { title: string }>) {
+  return (
+    <footer>
+      <p>(c) 2025 {this.app.title}</p>
+    </footer>
+  );
+}
+function Main(this: FC<{}, { title: string }>) {
+  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"
+      />
+    </main>
+  );
+}
+export default {
+  fetch: (req) => (
+    <html appState={{ title: "Welcome to mono-jsx!" }}>
+      <Header />
+      <Main />
+      <Footer />
+    </html>
+  ),
+};
+```
+### Using Computed State
+You can use `this.computed` to create computed state based on state. The computed state will automatically update when the state changes:
 ```tsx
 function App(this: FC<{ input: string }>) {
-  this.input = 'Hello, world';
+  this.input = "Welcome to mono-jsx!";
   return (
     <div>
-      <h1>{this.computed(() = this.input + "!")}</h1>
+      <h1>{this.computed(() => this.input + "!")}</h1>
-      <form
-        action={(data: FormData ) => {
-          this.input = data.get("input") as string;
-        }}
-      >
+      <form action={(fd) => this.input = fd.get("input") as string}>
         <input type="text" name="input" value={this.input} />
         <button type="submit">Submit</button>
       </form>
@@ -366,7 +410,7 @@ function App(this: FC) {
 ```tsx
 // ❌ Won't work - state updates won't refresh the view
 function App(this: FC<{ message: string }>) {
-  this.message = "Hello, world";
+  this.message = "Welcome to mono-jsx!";
   return (
     <div>
       <h1 title={this.message + "!"}>{this.message + "!"}</h1>
@@ -379,7 +423,7 @@ function App(this: FC<{ message: string }>) {
 // ✅ Works correctly
 function App(this: FC) {
-  this.message = "Hello, world";
+  this.message = "Welcome to mono-jsx!";
   return (
     <div>
       <h1 title={this.computed(() => this.message + "!")}>{this.computed(() => this.message + "!")}</h1>
@@ -494,22 +538,23 @@ export default {
 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 } }>) {
+function Dash(this: FC<{}, {}, { auth: { uuid: string; name: string } }>) {
   const { auth } = this.context;
   return (
     <div>
-      <h1>Welcome back, {auth.name}!</h1>;
+      <h1>Welcome back, {auth.name}!</h1>
       <p>Your UUID is {auth.uuid}</p>
     </div>
   );
 }
 export default {
-  fetch: (req) => {
-    const auth = doAuth(req);
+  fetch: async (req) => {
+    const auth = await doAuth(req);
     return (
       <html context={{ auth }} request={req}>
-        <Dash />
+        {!auth && <p>Please Login</p>}
+        {auth && <Dash />}
       </html>
     );
   },
@@ -562,6 +607,88 @@ export default {
 };
 ```
+## 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
+export default {
+  fetch: (req) => {
+    const url = new URL(req.url);
+    if (url.pathname === "/clicked") {
+      return (
+        <html>
+          <span>Clicked!</span>
+        </html>
+      );
+    }
+    return (
+      <html htmx>
+        <button hx-get="/clicked" hx-swap="outerHTML">
+          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
+export default {
+  fetch: (req) => (
+    <html htmx htmx-ext-response-targets htmx-ext-ws>
+      <button hx-get="/clicked" hx-swap="outerHTML">
+        Click Me
+      </button>
+    </html>
+  ),
+};
+```
+### Specifying htmx Version
+You can specify the htmx version by setting the `htmx` attribute to a specific version:
+```jsx
+export default {
+  fetch: (req) => (
+    <html htmx="2.0.4" htmx-ext-response-targets="2.0.2" htmx-ext-ws="2.0.2">
+      <button hx-get="/clicked" hx-swap="outerHTML">
+        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
+export default {
+  fetch: (req) => (
+    <html>
+      <head>
+        <script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
+        <script src="https://unpkg.com/htmx-ext-ws@2.0.2" integrity="sha384-vuKxTKv5TX/b3lLzDKP2U363sOAoRo5wSvzzc3LJsbaQRSBSS+3rKKHcOx5J8doU" crossorigin="anonymous"></script>
+      </head>
+      <body>
+        <button hx-get="/clicked" hx-swap="outerHTML">
+          Click Me
+        </button>
+      </body>
+    </html>
+  ),
+};
+```
 ## License
 [MIT](LICENSE)

package/bin/mono-jsx CHANGED Viewed

@@ -1,8 +1,7 @@
 #!/usr/bin/env node
-import { existsSync } from "node:fs";
-import { readFile, writeFile } from "node:fs/promises";
 import process from "node:process";
+import { setup } from "../setup.mjs";
 switch (process.argv[2]) {
   case "setup":
@@ -11,43 +10,3 @@ switch (process.argv[2]) {
   default:
     process.exit(0);
 }
-async function setup() {
-  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 data = await readFile(tsConfigFilename, "utf8");
-    tsConfig = JSON.parse(data);
-  } catch {
-    // ignore
-  }
-  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) {
-    compilerOptions.module ??= "es2022";
-    compilerOptions.moduleResolution ??= "bundler";
-  }
-  compilerOptions.jsx = "react-jsx";
-  compilerOptions.jsxImportSource = "mono-jsx";
-  await writeFile(tsConfigFilename, JSON.stringify(tsConfig, null, 2));
-  console.log("✅ mono-jsx setup complete.")
-}