npm - mono-jsx - Versions diffs - 0.3.0 → 0.3.2 - Mend

mono-jsx 0.3.0 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) 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.
@@ -336,7 +339,7 @@ function Main(this: FC<{}, { title: string }>) {
       <h1>{this.app.title}</h1>
       <h2>Changing the title</h2>
       <input
-        onInput={(evt) => this.app.title = evt.target.value }
+        onInput={(evt) => this.app.title = evt.target.value}
         placeholder="Enter a new title"
       />
     </main>
@@ -604,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/jsx-runtime.mjs CHANGED Viewed

@@ -11,12 +11,12 @@ function createState(fc, appState, context, request) {
   const computed = (fn) => {
     const deps = /* @__PURE__ */ Object.create(null);
     collectDeps = (fc2, key, value2) => deps[fc2 + ":" + key] = value2;
-    const value = fn();
+    const value = fn.call(proxy);
     collectDeps = void 0;
     if (value instanceof Promise || deps.size === 0) return value;
     return [$computed, { value, deps, fn: fn.toString(), fc }, $vnode];
   };
-  return new Proxy(/* @__PURE__ */ Object.create(null), {
+  const proxy = new Proxy(/* @__PURE__ */ Object.create(null), {
     get(target, key, receiver) {
       switch (key) {
         case "app":
@@ -47,6 +47,7 @@ function createState(fc, appState, context, request) {
       return Reflect.set(target, key, value, receiver);
     }
   });
+  return proxy;
 }
 // runtime/index.ts
@@ -643,10 +644,10 @@ function render(node, renderOptions = {}) {
             write("<script>(()=>{" + js + "})()<\/script>");
           }
           if (htmx) {
-            write(`<script src="https://raw.esm.sh/htmx.org${htmx === true ? "" : "@" + htmx}/dist/htmx.min.js"><\/script>`);
-            for (const [name, version] of Object.entries(renderOptions)) {
-              if (name.startsWith("html-ext-")) {
-                write(`<script src="https://raw.esm.sh/${name}${version === true ? "" : "@" + version}"><\/script>`);
+            write(`<script src="https://raw.esm.sh/htmx.org${htmx === true ? "" : escapeHTML("@" + htmx)}/dist/htmx.min.js"><\/script>`);
+            for (const [key, value] of Object.entries(renderOptions)) {
+              if (key.startsWith("htmx-ext-") && value) {
+                write(`<script src="https://raw.esm.sh/${key}${value === true ? "" : escapeHTML("@" + value)}"><\/script>`);
               }
             }
           }
@@ -675,7 +676,7 @@ var jsx = (tag, props = /* @__PURE__ */ Object.create(null), key) => {
     const renderOptions = /* @__PURE__ */ Object.create(null);
     const optionsKeys = /* @__PURE__ */ new Set(["appState", "context", "request", "status", "headers", "rendering", "htmx"]);
     for (const [key2, value] of Object.entries(props)) {
-      if (optionsKeys.has(key2) || key2.startsWith("html-ext-")) {
+      if (optionsKeys.has(key2) || key2.startsWith("htmx-ext-")) {
         renderOptions[key2] = value;
         delete props[key2];
       }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "mono-jsx",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "`<html>` as a `Response`.",
   "type": "module",
   "module": "./index.mjs",
@@ -26,8 +26,7 @@
     }
   },
   "scripts": {
-    "prepublishOnly": "deno task build",
-    "postinstall": "node setup.mjs"
+    "prepublishOnly": "deno task build"
   },
   "files": [
     "*.mjs",

package/setup.mjs CHANGED Viewed

@@ -1,8 +1,6 @@
 // setup.ts
 import { existsSync } from "node:fs";
 import { readFile, writeFile } from "node:fs/promises";
-import { fileURLToPath } from "node:url";
-import { argv } from "node:process";
 async function setup() {
   if (globalThis.Deno && existsSync("deno.jsonc")) {
     console.log("Please add the following options to your deno.jsonc file:");
@@ -41,18 +39,6 @@ async function setup() {
   await writeFile(tsConfigFilename, JSON.stringify(tsConfig, null, 2));
   console.log("\u2705 mono-jsx setup complete.");
 }
-function isMain() {
-  if (import.meta.main) {
-    return true;
-  }
-  if (import.meta.url.startsWith("file:")) {
-    return argv[1] === fileURLToPath(import.meta.url);
-  }
-  return false;
-}
-if (isMain()) {
-  setup();
-}
 export {
   setup
 };

package/types/render.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@
  * @see https://htmx.org/docs/#extensions
  */
 type HtmxExts = {
-  [key in `html-ext-${JSX.HtmxExtensions[keyof JSX.HtmxExtensions]}`]:
+  [key in `htmx-ext-${JSX.HtmxExtensions[keyof JSX.HtmxExtensions]}`]:
     | number
     | string
     | boolean;