npm - mono-jsx - Versions diffs - 0.1.1 → 0.1.3 - Mend

mono-jsx 0.1.1 → 0.1.3

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

package/README.md CHANGED Viewed

@@ -5,9 +5,9 @@
 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.
 - 🚀 No build step needed
-- 🦋 Lightweight(8KB gzipped), zero dependencies
+- 🦋 Lightweight (8KB gzipped), zero dependencies
 - 🔫 Minimal state runtime
-- 🚨 Full Web API types
+- 🚨 Complete Web API Typescript definitions
 - ⏳ Streaming rendering
 - 🌎 Universal, works in Node.js, Deno, Bun, Cloudflare Workers, etc.
@@ -57,7 +57,7 @@ bunx mono-jsx setup
 ## Usage
-To create a html response in server-side, you just need to return a `<html>` element 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
@@ -65,7 +65,7 @@ To create a html response in server-side, you just need to return a `<html>` ele
 export default {
   fetch: (req) => (
     <html>
-      <h1>Hello World!</h1>
+      <h1>Welcome to mono-jsx!</h1>
     </html>
   ),
 };
@@ -95,7 +95,7 @@ serve({
   port: 3000,
   fetch: (req) => (
     <html>
-      <h1>Hello World!</h1>
+      <h1>Welcome to mono-jsx!</h1>
     </html>
   ),
 });
@@ -113,11 +113,11 @@ mono-jsx uses [**JSX**](https://react.dev/learn/describing-the-ui) to describe t
 ### Using Standard HTML Property Names
-mono-jsx uses standard HTML property names instead of React's overthinked property names.
+mono-jsx adopts standard HTML property names, avoiding React's custom property naming conventions.
-- `className` -> `class`
-- `htmlFor` -> `for`
-- `onChange` -> `onInput`
+- `className` becomes `class`
+- `htmlFor` becomes `for`
+- `onChange` becomes `onInput`
 ### Composition `class`
@@ -148,7 +148,7 @@ 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` proptery). 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) 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.
 ```jsx
 function Container() {
@@ -208,7 +208,7 @@ function Button() {
 ```
 > [!NOTE]
-> the event handler would never be called in server-side. Instead 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.**
+> 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.**
 ```tsx
 function Button(this: FC, props: { role: string }) {
@@ -238,12 +238,30 @@ Plus, mono-jsx supports the `mount` event that will be triggered when the elemen
 function App() {
   return (
     <div onMount={(evt) => console.log(evt.target, "Mounted!")}>
-      <h1>Hello World!</h1>
+      <h1>Welcome to mono-jsx!</h1>
     </div>
   );
 }
 ```
+mono-jsx also accepts a function as the `action` property for `form` elements, which will be called when the form is submitted.
+```tsx
+function App() {
+  return (
+    <form
+      action={(data: FormData, evt) => {
+        evt.defaultPrevented // true
+        console.log(data.get("name"));
+      }}
+    >
+      <input type="text" name="name" />
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
 ## Using State
 mono-jsx provides a minimal state runtime that allows you to update view based on state changes in client-side.
@@ -298,7 +316,7 @@ function App(this: FC<{ show: boolean }>) {
   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>
     </div>
@@ -333,18 +351,18 @@ 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 asynchrously. 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, 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.
 ```jsx
 async function Sleep(ms) {
   await new Promise((resolve) => setTimeout(resolve, ms));
-  return <solt />;
+  return <slot />;
 }
 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>
@@ -358,13 +376,13 @@ You can also set `rendering` attribute to "eager" to render the async component
 ```jsx
 async function Sleep(ms) {
   await new Promise((resolve) => setTimeout(resolve, ms));
-  return <solt />;
+  return <slot />;
 }
 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>

package/jsx-runtime.mjs CHANGED Viewed

@@ -46,9 +46,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 +119,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 +241,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) + ">");
@@ -325,7 +381,7 @@ async function renderNode(ctx, node, stripSlotProp) {
               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 +451,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 +465,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 +522,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 +547,7 @@ async function renderNode(ctx, node, stripSlotProp) {
                       buffer += " " + propName;
                     }
                   } else {
-                    buffer += " " + renderAttr(propName, propValue);
+                    buffer += " " + (propValue === true ? escapeHTML(propName) : escapeHTML(propName) + "=" + toAttrStringLit("" + propValue));
                   }
                 }
             }
@@ -538,50 +592,6 @@ 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);

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "mono-jsx",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "`<html>` as a `Response`.",
   "type": "module",
   "module": "./index.mjs",

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"