mono-jsx 0.6.8 → 0.6.9

package/jsx-runtime.mjs

@@ -15,7 +15,7 @@ var STYLE_JS = `{var a=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^o
 var RENDER_ATTR_JS = `{var s=(l,t,r)=>{let n=l.parentElement;return n.tagName==="M-GROUP"&&(n=n.previousElementSibling),()=>{let e=r();e===!1||e===null||e===void 0?n.removeAttribute(t):typeof e=="object"&&e!==null&&(t==="class"||t==="style"||t==="props")?t==="class"?n.setAttribute(t,$cx(e)):t==="style"?$applyStyle(n,e):n.setAttribute(t,JSON.stringify(e)):n.setAttribute(t,e===!0?"":e)}};window.$renderAttr=s;}`;
 var RENDER_TOGGLE_JS = `{var s=(n,l)=>{let e;return()=>{if(!e){let t=n.firstElementChild;t&&t.tagName==="TEMPLATE"&&t.hasAttribute("m-slot")?e=[...t.content.childNodes]:e=[...n.childNodes]}n.replaceChildren(...l()?e:[])}};window.$renderToggle=s;}`;
 var RENDER_SWITCH_JS = `{var u=(s,d)=>{let r,i=s.getAttribute("value"),t,l,o=e=>t.get(e)??t.set(e,[]).get(e);return()=>{if(!t){t=new Map,l=[];for(let e of s.childNodes)if(e.nodeType===1&&e.tagName==="TEMPLATE"&&e.hasAttribute("m-slot")){for(let n of e.content.childNodes)n.nodeType===1&&n.hasAttribute("slot")?o(n.getAttribute("slot")).push(n):l.push(n);e.remove()}else i?o(i).push(e):l.push(e)}r=""+d(),s.replaceChildren(...t.has(r)?t.get(r):l)}};window.$renderSwitch=u;}`;
-var SIGNALS_JS = `{let m;const h=window,b=new Map,y=new Map,f=n=>y.get(n)??y.set(n,S(n)).get(n),k=()=>Object.create(null),d=(n,e)=>n.getAttribute(e),S=n=>{const e=k(),t=(c,r)=>{e[c]=r},s=new Map,a=(c,r)=>{let i=s.get(c);return i||(i=new Set,s.set(c,i)),i.add(r),()=>{i.delete(r),i.size===0&&s.delete(c)}},o=new Proxy(k(),{get:(c,r)=>document.querySelector("[data-ref='"+n+":"+r+"']")});return new Proxy(e,{get:(c,r,i)=>{switch(r){case"$init":return t;case"$watch":return a;case"app":return f(0);case"refs":return o;default:return m?.(n,r),Reflect.get(c,r,i)}},set:(c,r,i,l)=>{if(i!==Reflect.get(c,r,l)){const u=s.get(r);return u&&queueMicrotask(()=>u.forEach(g=>g())),Reflect.set(c,r,i,l)}return!1}})},$=(n,e,t)=>{switch(e){case"toggle":return $renderToggle(n,t);case"switch":return $renderSwitch(n,t);case"html":return()=>n.innerHTML=""+t()}return e&&e.length>2&&e.startsWith("[")&&e.endsWith("]")?$renderAttr(n,e.slice(1,-1),t):()=>n.textContent=""+t()},v=n=>{const e=n.indexOf(":");return e>0?[Number(n.slice(0,e)),n.slice(e+1)]:null},p=async n=>{const e=n();return e!==void 0?e:(await new Promise(t=>setTimeout(t,0)),p(n))},E=(n,e)=>customElements.define(n,class extends HTMLElement{disposes=[];connectedCallback(){e(this)}disconnectedCallback(){this.disposes.forEach(t=>t()),this.disposes.length=0}});E("m-signal",n=>{const e=Number(d(n,"scope")),t=f(e),s=d(n,"key");if(s)n.disposes.push(t.$watch(s,$(n,d(n,"mode"),()=>t[s])));else{const a=Number(d(n,"computed"));p(()=>b.get(e*1e9+a)).then(([o,c])=>{const r=$(n,d(n,"mode"),o.bind(t));c.forEach(i=>{const[l,u]=v(i);n.disposes.push(f(l).$watch(u,r))})})}}),E("m-effect",n=>{const{disposes:e}=n,t=Number(d(n,"scope")),s=Number(d(n,"n")),a=new Array(s);e.push(()=>{a.forEach(o=>typeof o=="function"&&o()),a.length=0});for(let o=0;o<s;o++){const c="$ME_"+t+"_"+o;p(()=>h[c]).then(r=>{const i=[],l=f(t),u=()=>{a[o]=r.call(l)};m=(g,w)=>i.push([g,w]),u(),m=void 0;for(const[g,w]of i)e.push(f(g).$watch(w,u))},()=>{})}}),h.$MS=(n,e)=>{const[t,s]=v(n);f(t).$init(s,e)},h.$MC=(n,e,t,s)=>{b.set(n*1e9+e,[t,s])},h.$patch=(n,...e)=>{for(const[t,...s]of e){const a=s.pop();let o=n;for(const c of s)o=o[c];o[a]=t}return n},h.$signals=n=>n!==void 0?f(n):void 0;}`;
+var SIGNALS_JS = `{let m;const h=window,b=new Map,k=new Map,l=n=>k.get(n)??k.set(n,M(n)).get(n),y=()=>Object.create(null),f=(n,e)=>n.getAttribute(e),M=n=>{const e=y(),t=(r,c)=>{e[r]=c},s=new Map,a=(r,c)=>{let o=s.get(r);return o||(o=new Set,s.set(r,o)),o.add(c),()=>{o.delete(c),o.size===0&&s.delete(r)}},i=new Proxy(y(),{get:(r,c)=>document.querySelector("[data-ref='"+n+":"+c+"']")});return new Proxy(e,{get:(r,c,o)=>{switch(c){case"$init":return t;case"$watch":return a;case"app":return l(0);case"refs":return i;default:return m?.(n,c),Reflect.get(r,c,o)}},set:(r,c,o,d)=>{if(o!==Reflect.get(r,c,d)){const u=s.get(c);return u&&queueMicrotask(()=>u.forEach(g=>g())),Reflect.set(r,c,o,d)}return!1}})},$=(n,e,t)=>{switch(e){case"toggle":return $renderToggle(n,t);case"switch":return $renderSwitch(n,t);case"html":return()=>n.innerHTML=""+t()}return e&&e.length>2&&e.startsWith("[")&&e.endsWith("]")?$renderAttr(n,e.slice(1,-1),t):()=>n.textContent=""+t()},E=n=>{const e=n.indexOf(":");return e>0?[Number(n.slice(0,e)),n.slice(e+1)]:null},p=async n=>{const e=n();return e!==void 0?e:(await new Promise(t=>setTimeout(t,0)),p(n))},S=n=>{typeof n=="function"&&n()},v=(n,e)=>customElements.define(n,class extends HTMLElement{disposes=[];connectedCallback(){e(this)}disconnectedCallback(){this.disposes.forEach(t=>t()),this.disposes.length=0}});v("m-signal",n=>{const e=Number(f(n,"scope")),t=l(e),s=f(n,"key");if(s)n.disposes.push(t.$watch(s,$(n,f(n,"mode"),()=>t[s])));else{const a=Number(f(n,"computed"));p(()=>b.get(e*1e9+a)).then(([i,r])=>{const c=$(n,f(n,"mode"),i.bind(t));r.forEach(o=>{const[d,u]=E(o);n.disposes.push(l(d).$watch(u,c))})})}}),v("m-effect",n=>{const{disposes:e}=n,t=Number(f(n,"scope")),s=Number(f(n,"n")),a=new Array(s);e.push(()=>{a.forEach(S),a.length=0});for(let i=0;i<s;i++){const r="$ME_"+t+"_"+i;p(()=>h[r]).then(c=>{const o=[],d=l(t),u=()=>{S(a[i]),a[i]=c.call(d)};m=(g,w)=>o.push([g,w]),u(),m=void 0;for(const[g,w]of o)e.push(l(g).$watch(w,u))},()=>{})}}),h.$MS=(n,e)=>{const[t,s]=E(n);l(t).$init(s,e)},h.$MC=(n,e,t,s)=>{b.set(n*1e9+e,[t,s])},h.$patch=(n,...e)=>{for(const[t,...s]of e){const a=s.pop();let i=n;for(const r of s)i=i[r];i[a]=t}return n},h.$signals=n=>n!==void 0?l(n):void 0;}`;
 var SUSPENSE_JS = `{const i=new Map,o=e=>e.getAttribute("chunk-id"),l=(e,t)=>customElements.define(e,class extends HTMLElement{connectedCallback(){t(this)}});l("m-portal",e=>{i.set(o(e),e)}),l("m-chunk",e=>{setTimeout(()=>{const t=o(e),n=i.get(t),s=e.firstChild?.content.childNodes;n&&(e.hasAttribute("next")?s&&n.before(...s):(e.hasAttribute("done")?n.remove():s&&n.replaceWith(...s),i.delete(t)),e.remove())})});}`;
 var LAZY_JS = `{const r=document,o=(t,s)=>t.getAttribute(s),i=(t,s=[])=>t.replaceChildren(...s);customElements.define("m-component",class extends HTMLElement{static observedAttributes=["name","props"];#t;#e;#i;#n;#s;async#r(){if(!this.#t){i(this);return}const t={"x-component":this.#t,"x-props":this.#e||"{}","x-flags":$FLAGS},s=new AbortController;this.#n?.abort(),this.#n=s,i(this,this.#i);const e=await fetch(location.href,{headers:t,signal:s.signal});if(!e.ok)throw i(this),new Error("Failed to fetch component '"+this.#t+"'");const[h,n]=await e.json();this.innerHTML=h,n&&(r.body.appendChild(r.createElement("script")).textContent=n)}get name(){return this.#t??null}set name(t){t&&t!==this.#t&&(this.#t=t,this.refresh())}get props(){return this.#e?JSON.parse(this.#e):void 0}set props(t){const s=typeof t=="string"?t:JSON.stringify(t);s&&s!==this.#e&&(this.#e=s,this.refresh())}connectedCallback(){setTimeout(()=>{if(!this.#i){const t=o(this,"props");this.#t=o(this,"name"),this.#e=t?.startsWith("base64,")?atob(t.slice(7)):void 0,this.#i=[...this.childNodes]}this.#r()})}disconnectedCallback(){i(this,this.#i),this.#n?.abort(),this.#n=void 0,this.#s&&clearTimeout(this.#s),this.#s=void 0}attributeChangedCallback(t,s,e){this.#t&&e&&(t==="name"?this.name=e:t==="props"&&(this.props=e))}refresh(){this.#s&&clearTimeout(this.#s),this.#s=setTimeout(()=>{this.#s=void 0,this.#r()},50)}});}`;
 var ROUTER_JS = `{const a=document,n=location,l=t=>t.split("#",1)[0],c=t=>l(t)===l(n.href);customElements.define("m-router",class extends HTMLElement{#t;#e;#s;#i;async#o(t){const s=new AbortController,e={"x-route":"true","x-flags":$FLAGS};this.#i?.abort(),this.#i=s;const i=await fetch(t,{headers:e,signal:s.signal});if(i.status===404)return this.replaceChildren(...this.#t),!0;if(!i.ok)throw this.replaceChildren(),new Error("Failed to fetch route: "+i.status+" "+i.statusText);const[o,r]=await i.json();this.innerHTML=o,r&&(a.body.appendChild(a.createElement("script")).textContent=r)}#n(){a.querySelectorAll("nav a").forEach(t=>{const{href:s,classList:e}=t,i=t.closest("nav")?.getAttribute("data-active-class")??"active";c(s)?e.add(i):e.remove(i)})}navigate(t,s){const e=new URL(t,n.href);if(e.origin!==n.origin){n.href=t;return}c(e.href)||this.#a(t,s)}async#a(t,s){const e=await this.#o(t);s?.replace?history.replaceState({},"",t):history.pushState({},"",t),e&&typeof $signals<"u"&&($signals(0).url=new URL(t)),this.#n(),window.scrollTo(0,0)}connectedCallback(){setTimeout(()=>{if(!this.#t)if(this.getAttribute("status")==="404")this.#t=[...this.childNodes];else{this.#t=[];for(const t of this.childNodes)if(t.nodeType===1&&t.tagName==="TEMPLATE"&&t.hasAttribute("m-slot")){this.#t.push(...t.content.childNodes),t.remove();break}}}),this.#e=t=>{if(t.defaultPrevented||t.altKey||t.ctrlKey||t.metaKey||t.shiftKey||!(t.target instanceof HTMLAnchorElement))return;const{download:s,href:e,rel:i,target:o}=t.target;s||i==="external"||o==="_blank"||!e.startsWith(n.origin)||(t.preventDefault(),this.navigate(e))},this.#s=()=>this.#a(n.href),addEventListener("popstate",this.#s),a.addEventListener("click",this.#e),setTimeout(()=>this.#n())}disconnectedCallback(){removeEventListener("popstate",this.#s),a.removeEventListener("click",this.#e),this.#i?.abort(),this.#i=void 0,this.#e=void 0,this.#s=void 0}});}`;
@@ -135,7 +135,7 @@ var $signal = Symbol.for("mono.signal");
 var $vnode = Symbol.for("jsx.vnode");
 
 // version.ts
-var VERSION = "0.6.7";
+var VERSION = "0.6.8";
 
 // render.ts
 var cdn = "https://raw.esm.sh";
@@ -325,7 +325,6 @@ async function render(node, options, write, writeJS, componentMode) {
     request,
     signals,
     routeFC,
-    eager: componentMode,
     flags: { scope: 0, chunk: 0, runtime: 0 },
     mcs: new IdGenManagerImpl(),
     mfs: new IdGenManagerImpl()
@@ -406,6 +405,14 @@ async function render(node, options, write, writeJS, componentMode) {
       runtimeFlag = runtime;
     }
   }
+  if (componentMode) {
+    const [tag, props] = node;
+    if (typeof tag === "function") {
+      await renderFC(rc, tag, props, true);
+      await finalize();
+      return;
+    }
+  }
   await renderNode(rc, node);
   if (rc.flags.scope > 0 && !componentMode) {
     markSignals(rc, signals.app);
@@ -799,7 +806,7 @@ function renderAttr(rc, attrName, attrValue, stripSlotProp) {
   }
   return [attr, addonHtml, signalValue];
 }
-async function renderFC(rc, fc, props) {
+async function renderFC(rc, fc, props, eager) {
   const { write } = rc;
   const { children } = props;
   const scopeId = ++rc.flags.scope;
@@ -810,7 +817,7 @@ async function renderFC(rc, fc, props) {
     const v = fc.call(signals, props);
     if (isObject(v) && !isVNode(v)) {
       if (v instanceof Promise) {
-        if (rc.eager || (props.rendering ?? fc.rendering) === "eager") {
+        if (eager || (props.rendering ?? fc.rendering) === "eager") {
           await renderNode({ ...rc, fcCtx }, await v);
           markSignals(rc, signals);
         } else {
@@ -832,7 +839,7 @@ async function renderFC(rc, fc, props) {
           }));
         }
       } else if (Symbol.asyncIterator in v) {
-        if (rc.eager || (props.rendering ?? fc.rendering) === "eager") {
+        if (eager || (props.rendering ?? fc.rendering) === "eager") {
           for await (const c of v) {
             await renderNode({ ...rc, fcCtx }, c);
           }

package/package.json

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