mono-jsx 0.3.3 → 0.3.4

package/jsx-runtime.mjs

@@ -7,7 +7,7 @@ var $computed = Symbol.for("mono.computed");
 
 // runtime/index.ts
 var STATE_JS = `const m=new Map,u=e=>m.get(e)??m.set(e,b(e)).get(e),f=(e,t)=>e.getAttribute(t),d=(e,t)=>e.hasAttribute(t),b=e=>{const t=Object.create(null),r=new Map,n=(i,c)=>{let a=c;Object.defineProperty(t,i,{get:()=>a,set:o=>{if(o!==a){const l=r.get(i);l&&queueMicrotask(()=>l.forEach(h=>h())),a=o}}})},s=(i,c)=>{let a=r.get(i);a||(a=[],r.set(i,a)),a.push(c)};return e>0&&Object.defineProperty(t,"app",{get:()=>u(0).store,enumerable:!1,configurable:!1}),{store:t,define:n,watch:s}},g=(e,t,r)=>{if(t==="toggle"){let n;return()=>{if(!n){const s=e.firstElementChild;s&&s.tagName==="TEMPLATE"&&d(s,"m-slot")?(n=s.content.childNodes,e.innerHTML=""):n=e.childNodes}r()?e.append(...n):e.innerHTML=""}}if(t==="switch"){let n=f(e,"match"),s,i,c=o=>s.get(o)??s.set(o,[]).get(o),a;return()=>{if(!s){s=new Map,i=[];for(const o of e.childNodes)if(o.nodeType===1&&o.tagName==="TEMPLATE"&&d(o,"m-slot")){for(const l of o.content.childNodes)l.nodeType===1&&d(l,"slot")?c(f(l,"slot")).push(l):i.push(l);o.remove()}else n?c(n).push(o):i.push(o)}a=r(),e.innerHTML="",e.append(...s.has(a)?s.get(a):i)}}if(t&&t.length>2&&t.startsWith("[")&&t.endsWith("]")){let n=t.slice(1,-1),s=e.parentElement;return s.tagName==="M-GROUP"&&(s=s.previousElementSibling),()=>{const i=r();i===!1?s.removeAttribute(n):(n==="class"||n==="style")&&i&&typeof i=="object"?s.setAttribute(n,n==="class"?$cx(i):$styleToCSS(i)):s.setAttribute(n,i===!0?"":""+i)}}return()=>e.textContent=""+r()},p=e=>{const t=e.indexOf(":");if(t>0)return[Number(e.slice(0,t)),e.slice(t+1)];throw new Error("Invalid state key")};customElements.define("m-state",class extends HTMLElement{connectedCallback(){const e=this,t=f(e,"key");if(t){const r=u(Number(f(e,"fc")));r.watch(t,g(e,f(e,"mode"),()=>r.store[t]));return}}}),Object.assign(window,{$state:e=>e!==void 0?u(e).store:void 0,$defineState:(e,t)=>{const[r,n]=p(e);u(r).define(n,t)},$defineComputed:(e,t,r)=>{const n=document.querySelector("m-state[computed='"+e+"']");if(n){const s=u(Number(f(n,"fc"))).store,i=g(n,f(n,"mode"),t.bind(s));for(const c of r){const[a,o]=p(c);u(a).watch(o,i)}}}});`;
-var 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 SUSPENSE_JS = `const n={},o=e=>e.getAttribute("chunk-id");c("m-portal",e=>{n[o(e)]=e}),c("m-chunk",e=>{setTimeout(()=>{const t=o(e),s=n[t];s&&(s.replaceWith(...e.firstChild.content.childNodes),e.remove(),delete n[t])})});function c(e,t){customElements.define(e,class extends HTMLElement{connectedCallback(){t(this)}})}`;
 var UTILS_JS = {
   /** cx.js (225 bytes) */
   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(" "):""}window.$cx=t;`,
@@ -358,20 +358,27 @@ async function renderNode(rc, node, stripSlotProp) {
         }
         if (typeof tag === "function") {
           const fcIndex = ++rc.status.fcIndex;
-          const { rendering, placeholder, catch: catchFC, ...fcProps } = props ?? /* @__PURE__ */ Object.create(null);
+          const { children, rendering, placeholder, catch: catchFC } = props;
           try {
-            const v = tag.call(createThis(fcIndex, rc.appState, rc.context, rc.request), fcProps);
-            const { children } = fcProps;
+            const v = tag.call(createThis(fcIndex, rc.appState, rc.context, rc.request), props);
             const fcSlots = children !== void 0 ? Array.isArray(children) ? isVNode(children) ? [children] : children : [children] : void 0;
+            const eager = (rendering ?? tag.rendering) === "eager";
             if (v instanceof Promise) {
-              if ((rendering ?? tag.rendering) === "eager") {
+              if (eager) {
                 await renderNode({ ...rc, fcIndex, fcSlots }, await v);
               } else {
                 const chunkIdAttr = 'chunk-id="' + (rc.status.chunkIndex++).toString(36) + '"';
                 rc.suspenses.push(v.then(async (node2) => {
-                  write("<m-chunk " + chunkIdAttr + "><template>");
-                  await renderNode({ ...rc, fcIndex, fcSlots }, node2);
-                  write("</template></m-chunk>");
+                  let buf = "<m-chunk " + chunkIdAttr + "><template>";
+                  await renderNode({
+                    ...rc,
+                    fcIndex,
+                    fcSlots,
+                    write: (chunk) => {
+                      buf += chunk;
+                    }
+                  }, node2);
+                  return buf + "</template></m-chunk>";
                 }));
                 write("<m-portal " + chunkIdAttr + ">");
                 if (placeholder) {
@@ -380,7 +387,7 @@ async function renderNode(rc, node, stripSlotProp) {
                 write("</m-portal>");
               }
             } else if (isObject(v) && Symbol.asyncIterator in v) {
-              if ((rendering ?? tag.rendering) === "eager") {
+              if (eager) {
                 for await (const c of v) {
                   await renderNode({ ...rc, fcIndex, fcSlots }, c);
                 }
@@ -672,7 +679,7 @@ function render(node, renderOptions = {}) {
             write("<script>/* app.js (generated by mono-jsx) */" + js + "<\/script>");
           }
           if (suspenses.length > 0) {
-            await Promise.all(suspenses.splice(0, suspenses.length));
+            await Promise.all(suspenses.splice(0, suspenses.length).map((suspense) => suspense.then(write)));
             await finalize();
           }
         };

package/package.json

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

package/types/css.d.ts

@@ -6107,7 +6107,8 @@ export interface StandardShorthandProperties<TLength = (string & {}) | 0, TTime
 }
 
 export interface StandardProperties<TLength = (string & {}) | 0, TTime = string & {}>
-  extends StandardLonghandProperties<TLength, TTime>, StandardShorthandProperties<TLength, TTime> {}
+  extends StandardLonghandProperties<TLength, TTime>, StandardShorthandProperties<TLength, TTime>
+{}
 
 export interface VendorLonghandProperties<TLength = (string & {}) | 0, TTime = string & {}> {
   /**
@@ -8018,7 +8019,8 @@ export interface VendorShorthandProperties<TLength = (string & {}) | 0, TTime =
 }
 
 export interface VendorProperties<TLength = (string & {}) | 0, TTime = string & {}>
-  extends VendorLonghandProperties<TLength, TTime>, VendorShorthandProperties<TLength, TTime> {}
+  extends VendorLonghandProperties<TLength, TTime>, VendorShorthandProperties<TLength, TTime>
+{}
 
 export interface ObsoleteProperties<TLength = (string & {}) | 0, TTime = string & {}> {
   /**
@@ -9143,7 +9145,8 @@ export interface Properties<TLength = (string & {}) | 0, TTime = string & {}>
     StandardProperties<TLength, TTime>,
     VendorProperties<TLength, TTime>,
     ObsoleteProperties<TLength, TTime>,
-    SvgProperties<TLength, TTime> {}
+    SvgProperties<TLength, TTime>
+{}
 
 export type AtRules =
   | "@charset"

package/types/mono.d.ts

@@ -66,7 +66,7 @@ export interface CSSProperties extends BaseCSSProperties, AtRuleCSSProperties, P
   [key: `&${" " | "." | "["}${string}`]: CSSProperties;
 }
 
-export type ChildType = JSX.Element | JSX.Element[] | string | number | bigint | boolean | null;
+export type ChildType = JSX.Element | (JSX.Element | string | null)[] | string | number | bigint | boolean | null;
 
 export interface BaseAttributes {
   children?: ChildType | ChildType[];
@@ -76,16 +76,16 @@ export interface BaseAttributes {
 
 export interface AsyncComponentAttributes {
   /**
-   * Error handler.
+   * Try to catch errors in the component.
    */
   catch?: (err: any) => JSX.Element;
   /**
-   * Loading spinner.
+   * The loading spinner for the async component.
    */
-  placeholder?: JSX.Element | string;
+  placeholder?: JSX.Element;
   /**
    * Rendering mode
-   * - `eager`: render immediately
+   * - `eager`: render async component eagerly
    */
   rendering?: "eager";
 }