mono-jsx 0.10.0-beta.21 → 0.10.0-beta.23

package/README.md

@@ -1226,7 +1226,7 @@ async function Post(this: FC) {
   </div>
 }
 
-Post.getMetadata = async function(this: FC) {
+Post.getMetadata = async function(this: FC): Promise<Metadata> {
   const post = await getPost(this.request.params.slug)
   return {
     title: post.title,

package/jsx-runtime.mjs

@@ -16,7 +16,7 @@ var $setup = /* @__PURE__ */ Symbol.for("mono.setup");
 var $rpc = /* @__PURE__ */ Symbol.for("mono.rpc");
 
 // version.ts
-var VERSION = "0.10.0-beta.21";
+var VERSION = "0.10.0-beta.23";
 
 // runtime/index.ts
 var EVENT = 1;
@@ -41,7 +41,7 @@ var RENDER_SWITCH_JS = `{var a=(l,u)=>{let s,r=l.getAttribute("value"),t,i,o=e=>
 var SIGNALS_JS = `{let h;const a=window,b=document,y=new Map,E=new Map,k=new Map,v=new Map,$=new Map,m=new Map,l=n=>y.get(n)??y.set(n,V(n)).get(n),F=()=>Object.create(null),p=(n,e)=>n.getAttribute(e),V=n=>{const e=F(),t=(o,c)=>{e[o]=c},s=new Map,r=(o,c)=>{let u=s.get(o);return u||(u=new Set,s.set(o,u)),u.add(c),()=>{u.delete(c),u.size===0&&s.delete(o)}},i=new Proxy(F(),{get:(o,c)=>b.querySelector("[data-ref='"+n+":"+c+"']")});return new Proxy(e,{get:(o,c,u)=>{switch(c){case"$init":return t;case"$watch":return r;case"app":return l(0);case"refs":return i;default:return h?.(n,c),Reflect.get(o,c,u)}},set:(o,c,u,g)=>{if(u!==Reflect.get(o,c,g)){const f=s.get(c);return f&&queueMicrotask(()=>f.forEach(d=>d())),Reflect.set(o,c,u,g)}return!1}})},M=(n,e,t)=>{switch(e){case"toggle":return $renderToggle(n,t);case"switch":return $renderSwitch(n,t);case"html":return()=>n.innerHTML=""+t()}if(e&&e.length>2&&e.startsWith("[")&&e.endsWith("]"))return $renderAttr(n,e.slice(1,-1),t);const s=n.parentElement,r=()=>n.textContent=""+t();if(b.startViewTransition&&s.hasAttribute("data-vt")){const i=s.getAttribute("data-vt");return i&&(s.style.viewTransitionName=i),()=>b.startViewTransition(r)}return r},S=n=>{const e=n.indexOf(":");return e>0?[Number(n.slice(0,e)),n.slice(e+1)]:null},q=(n,e,t,s)=>{const r=n.get(t);if(r!==void 0){s(r);return}const i=e.get(t);i?i.push(s):e.set(t,[s])},N=(n,e)=>{const t=a.$fmap?.get(n);if(t){e(t);return}const s=m.get(n);s?s.push(e):m.set(n,[e])};if(typeof a.$F=="function"){const n=a.$F;a.$F=(e,t)=>{n(e,t);const s=m.get(e);s&&(m.delete(e),s.forEach(r=>r(t)))}}const T=n=>typeof n=="function"&&n(),A=(n,e)=>customElements.define(n,class extends HTMLElement{disposes=[];connectedCallback(){e(this)}disconnectedCallback(){this.disposes.forEach(t=>t()),this.disposes.length=0}});A("m-signal",n=>{const e=Number(p(n,"scope")),t=l(e),s=p(n,"key");if(s)n.disposes.push(t.$watch(s,M(n,p(n,"mode"),()=>t[s])));else{const r=Number(p(n,"computed")),i=e+":"+r;q(E,v,i,o=>{N(r,c=>{const u=M(n,p(n,"mode"),c.bind(t));o.forEach(g=>{const[f,d]=S(g);n.disposes.push(l(f).$watch(d,u))})})})}}),A("m-effect",n=>{const{disposes:e}=n,t=Number(p(n,"scope"));q(k,$,t,s=>{const r=s.length,i=new Array(r);e.push(()=>{i.forEach(T),i.length=0});for(let o=0;o<r;o++)N(s[o],c=>{const u=[],g=l(t),f=()=>{T(i[o]),i[o]=c.call(g)};h=(d,w)=>u.push([d,w]),f(),h=void 0;for(const[d,w]of u)e.push(l(d).$watch(w,f))})})}),a.$S=(n,e)=>{const[t,s]=S(n);l(t).$init(s,e)},a.$C=(n,e,t)=>{const s=n+":"+e;E.set(s,t);const r=v.get(s);r&&(v.delete(s),r.forEach(i=>i(t)))},a.$E=(n,...e)=>{k.set(n,e);const t=$.get(n);t&&($.delete(n),t.forEach(s=>s(e)))},a.$patch=(n,...e)=>{for(const[t,...s]of e){let r=s.pop(),i=n;for(const o of s)i=i[o];i[r]=t}return n},a.$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 COMPONENT_JS = `{const e=document,a=(t,s)=>t.getAttribute(s);customElements.define("m-component",class extends HTMLElement{static observedAttributes=["name","props"];#t;#s;#r;#h;#i;#e=new Map;#a=!0;async#l(){if(!this.#t){this.#n("");return}const t=this.#s||"{}",s=this.#t+t,i={"x-component":this.#t,"x-props":t,"x-flags":$FLAGS},n=new AbortController;if(this.#h?.abort(),this.#h=n,this.#e.has(s)){this.#n(this.#e.get(s));return}this.#r?.length&&this.#n(this.#r);const r=await fetch(location.href,{headers:i,signal:n.signal});if(!r.ok)throw this.#n(""),new Error("Failed to fetch component '"+this.#t+"'");const[h,o]=await r.json();this.#e.set(s,h),this.#n(h),o&&(e.body.appendChild(e.createElement("script")).textContent=o)}#n(t){const s=()=>typeof t=="string"?this.innerHTML=t:this.replaceChildren(...t);this.hasAttribute("vt")&&e.startViewTransition&&!this.#a?e.startViewTransition(s):s(),this.#a=!1}get name(){return this.#t??null}set name(t){t&&t!==this.#t&&(this.#t=t,this.#o())}get props(){return this.#s?JSON.parse(this.#s):void 0}set props(t){const s=typeof t=="string"?t:JSON.stringify(t);s&&s!==this.#s&&(this.#s=s,this.#o())}attributeChangedCallback(t,s,i){this.#t&&i&&(t==="name"?this.name=i:t==="props"&&(this.props=i))}connectedCallback(){setTimeout(()=>{if(!this.#r){const t=a(this,"props");this.#t=a(this,"name"),this.#s=t?.startsWith("base64,")?atob(t.slice(7)):void 0,this.#r=[...this.childNodes]}this.#l()})}disconnectedCallback(){this.#e.clear(),this.#h?.abort(),this.#h=void 0,this.#i&&clearTimeout(this.#i),this.#i=void 0}#o(){this.#i&&clearTimeout(this.#i),this.#i=setTimeout(()=>{this.#i=void 0,this.#l()},50)}refresh(){this.#t&&this.#e.delete(this.#t+(this.#s||"{}")),this.#o()}});}`;
-var ROUTER_JS = `{const o=window,r=document,n=location,d=e=>e.origin===n.origin&&l(e)===l(n),l=({pathname:e,search:t})=>e+t;customElements.define("m-router",class extends HTMLElement{#e;#i=new Map;#n=l(n);#t;#a=!0;#s;#r;async#c(e){this.#e?.abort(),this.#e=new AbortController;const t=await fetch(e,{headers:{"x-route":"true","x-flags":$FLAGS},signal:this.#e.signal});if(t.status===404)return null;if(!t.ok)throw this.replaceChildren(),new Error("Failed to fetch route: "+t.status+" "+t.statusText);const i=await t.json();if(!Array.isArray(i))throw new Error(i?.error?i.error:"Invalid response from server");return i}#o(e){const t=()=>typeof e=="string"?this.innerHTML=e:this.replaceChildren(...e);this.hasAttribute("vt")&&r.startViewTransition&&!this.#a?r.startViewTransition(t):t(),this.#a=!1}#l(){r.querySelectorAll("nav a").forEach(e=>{const{href:t,classList:i}=e,s=e.closest("nav")?.getAttribute("data-active-class")??"active";d(new URL(t))?i.add(s):i.remove(s)})}async#h(e,t){this.#n=l(e);let i,s=this.#i.get(this.#n);if(s!==void 0&&!t?.refresh&&!this.hasAttribute("no-cache"))this.#o(s);else{const h=await this.#c(e);typeof $signals<"u"&&($signals(0).url=e);let a,c;h?[a,i,c]=h:a=this.#t??[],c||this.#i.set(this.#n,a),this.#o(a)}history[t?.replace?"replaceState":"pushState"]({},"",e),this.#l(),window.scrollTo(0,0),i&&(r.body.appendChild(r.createElement("script")).textContent=i)}navigate(e,t){const i=new URL(e,n.href);if(i.origin!==n.origin||e.startsWith("#")){n.href=e;return}d(i)||this.#h(i,t)}connectedCallback(){if(o.$router)throw new Error("Only one <m-router> element is allowed on the page");o.$router=this,setTimeout(()=>{if(!this.#t)if(this.hasAttribute("fallback"))this.removeAttribute("fallback"),this.#t=[...this.childNodes];else{this.#t=[];for(const e of this.childNodes)if(e.nodeType===1&&e.tagName==="TEMPLATE"&&e.hasAttribute("m-fallback")){this.#t.push(...e.content.childNodes),e.remove();break}}this.#i.set(n.href,[...this.childNodes])}),this.#s=e=>{if(e.defaultPrevented||e.altKey||e.ctrlKey||e.metaKey||e.shiftKey||!(e.target instanceof HTMLAnchorElement))return;const t=e.target.getAttribute("href");if(!t||t.startsWith("#"))return;const{download:i,href:s,rel:h,target:a}=e.target;i||h==="external"||a==="_blank"||!s.startsWith(n.origin)||(e.preventDefault(),this.navigate(s))},this.#r=()=>{l(n)!==this.#n&&this.#h(new URL(n.href))},o.addEventListener("popstate",this.#r),r.addEventListener("click",this.#s),setTimeout(()=>this.#l())}disconnectedCallback(){o.removeEventListener("popstate",this.#r),r.removeEventListener("click",this.#s),delete o.$router,this.#e?.abort(),this.#e=void 0,this.#i.clear(),this.#s=void 0,this.#r=void 0}});}`;
+var ROUTER_JS = `{const o=window,r=document,n=location,d=e=>e.origin===n.origin&&l(e)===l(n),l=({pathname:e,search:t})=>e+t;customElements.define("m-router",class extends HTMLElement{#e;#i=new Map;#n=l(n);#t;#s;#r;async#h(e){this.#e?.abort(),this.#e=new AbortController;const t=await fetch(e,{headers:{"x-route":"true","x-flags":$FLAGS},signal:this.#e.signal});if(t.status===404)return null;if(!t.ok)throw this.replaceChildren(),new Error("Failed to fetch route: "+t.status+" "+t.statusText);const i=await t.json();if(!Array.isArray(i))throw new Error(i?.error?i.error:"Invalid response from server");return i}#a(e){const t=()=>typeof e=="string"?this.innerHTML=e:this.replaceChildren(...e);this.hasAttribute("vt")&&r.startViewTransition?r.startViewTransition(t):t()}#o(){r.querySelectorAll("nav a").forEach(e=>{const{href:t,classList:i}=e,s=e.closest("nav")?.getAttribute("data-active-class")??"active";d(new URL(t))?i.add(s):i.remove(s)})}async#l(e,t){this.#n=l(e);let i,s=this.#i.get(this.#n);if(s!==void 0&&!t?.refresh&&!this.hasAttribute("no-cache"))this.#a(s);else{const h=await this.#h(e);typeof $signals<"u"&&($signals(0).url=e);let a,c;h?[a,i,c]=h:a=this.#t??[],c||this.#i.set(this.#n,a),this.#a(a)}t?.pop||(history[t?.replace?"replaceState":"pushState"]({},"",e),o.scrollTo(0,0)),this.#o(),i&&(r.body.appendChild(r.createElement("script")).textContent=i)}navigate(e,t){const i=new URL(e,n.href);if(i.origin!==n.origin||e.startsWith("#")){n.href=e;return}d(i)||this.#l(i,t)}connectedCallback(){if(o.$router)throw new Error("Only one <m-router> element is allowed on the page");o.$router=this,setTimeout(()=>{if(!this.#t)if(this.hasAttribute("fallback"))this.removeAttribute("fallback"),this.#t=[...this.childNodes];else{this.#t=[];for(const e of this.childNodes)if(e.nodeType===1&&e.tagName==="TEMPLATE"&&e.hasAttribute("m-fallback")){this.#t.push(...e.content.childNodes),e.remove();break}}this.#i.set(n.href,[...this.childNodes])}),this.#s=e=>{if(e.defaultPrevented||e.altKey||e.ctrlKey||e.metaKey||e.shiftKey||!(e.target instanceof HTMLAnchorElement))return;const t=e.target.getAttribute("href");if(!t||t.startsWith("#"))return;const{download:i,href:s,rel:h,target:a}=e.target;i||h==="external"||a==="_blank"||!s.startsWith(n.origin)||(e.preventDefault(),this.navigate(s))},this.#r=()=>{l(n)!==this.#n&&this.#l(new URL(n.href),{pop:!0})},o.addEventListener("popstate",this.#r),r.addEventListener("click",this.#s),requestAnimationFrame(()=>this.#o())}disconnectedCallback(){o.removeEventListener("popstate",this.#r),r.removeEventListener("click",this.#s),delete o.$router,this.#e?.abort(),this.#e=void 0,this.#i.clear(),this.#s=void 0,this.#r=void 0}});}`;
 var REDIRECT_JS = `{customElements.define("m-redirect",class extends HTMLElement{connectedCallback(){const e=this.getAttribute("to"),t=this.hasAttribute("replace");e&&($router?$router.navigate(e,{replace:t}):location.href=e)}});}`;
 var FORM_JS = `{const{document:d}=window,i=(n,e)=>n.getAttribute(e),E=n=>d.createElement(n),v=n=>{const e=E("template");return e.innerHTML=n,e.content};customElements.define("m-invalid",class extends HTMLElement{connectedCallback(){const n=i(this,"for"),e=this.closest("form"),a=this.textContent;if(n&&e&&a)for(const f of n.split(",")){const l=e.elements.namedItem(f.trim());if(l){const t=()=>{l.removeEventListener("input",t),l.setCustomValidity("")};l.addEventListener("input",t),l.setCustomValidity(a),l.focus()}}this.remove()}}),window.$onRFS=async n=>{n.preventDefault();const e=n.target;if(!e.checkValidity())return;const a=i(e,"data-submitting-class")??"submitting",f=new FormData(e),l=[...e.elements];for(const t of l)t._disabled=t.disabled,t.disabled=!0;e.querySelectorAll("m-formslot").forEach(t=>t.innerHTML=""),e.classList.add(a);try{const t=await fetch(location.href,{method:"POST",headers:{"x-route-form":"true","x-flags":$FLAGS},body:f});if(t.ok){const[y,b]=await t.json(),u=v(y),p=new Map;let m;if(u.querySelectorAll("[formslot]").forEach(r=>{const s=i(r,"formslot");if(s===":root"||s===":router"){const o=E("div");(s===":root"?d.body:$router).replaceChildren(o),m=[r,o]}else if(s===":form")m=[r,e];else if(s){const o='m-formslot[name="'+s+'"]',c=e.querySelector(o)??d.querySelector(o);c&&(r.remove(),p.set(r,c))}}),m)m[1].replaceWith(m[0]);else{const r=e.querySelector("m-formslot:not([name])");r?p.set(u,r):e.append(u);for(const[s,o]of p){const c=i(o,"scope"),g=i(o,"mode"),h=i(o,"onupdate");g==="insertbefore"?o.before(s):g==="insertafter"?o.after(s):o.replaceChildren(s),h&&$fmap.get(Number(h))?.call($signals?.(Number(c))??o,{type:"update",target:o})}setTimeout(()=>e.checkValidity()&&e.reset())}b&&(d.body.appendChild(E("script")).textContent=b+";document.currentScript.remove();")}}finally{e.classList.remove(a);for(const t of l)t.disabled=t._disabled,delete t._disabled}};}`;
 var RPC_JS = `{window.$RPC=(e,t)=>new Proxy(Object.create(null),{get(s,r){if(t.includes(r))return(...i)=>fetch(location.href,{method:"POST",body:JSON.stringify({fn:r,args:i}),headers:{"x-rpc":"true","x-rpc-id":e.toString()}}).then(async o=>{const{error:n,result:u}=await o.json();if(n)throw new Error(n);return u})}});}`;
@@ -836,7 +836,7 @@ async function renderNode(rc, node, stripSlotProp) {
             }
             writeAttr("ref");
             attrs += renderViewTransitionAttr(props);
-            let buf = "<m-component" + attrs + ">";
+            let buf = "<m-component" + attrs + ' style="display:contents">';
             if (pending) {
               const chunks = [];
               await renderChildren(
@@ -869,7 +869,7 @@ async function renderNode(rc, node, stripSlotProp) {
             if (!routeFC) {
               attrs += " fallback";
             }
-            write("<m-router" + attrs + ">");
+            write("<m-router" + attrs + ' style="display:contents">');
             if (routeFC) {
               if (routeFC instanceof Promise) {
                 routeFC = (await routeFC).default;
@@ -973,7 +973,7 @@ async function renderNode(rc, node, stripSlotProp) {
               if (replace) {
                 buf += " replace";
               }
-              buf += "></m-redirect>";
+              buf += " hidden></m-redirect>";
               write(buf);
               rc.flags.runtime |= REDIRECT;
             }
@@ -1005,7 +1005,7 @@ async function renderNode(rc, node, stripSlotProp) {
             } else if (tag === "invalid") {
               break;
             }
-            buf += ">";
+            buf += ' style="display:contents">';
             if (children) {
               const chunks = [];
               await renderChildren(
@@ -1124,7 +1124,7 @@ async function renderFC(rc, fcFn, props, eager) {
           markSignals(fcRc, signals);
         } else {
           const chunkIdAttr = 'chunk-id="' + (rc.flags.chunk++).toString(36) + '"';
-          write("<m-portal " + chunkIdAttr + ">");
+          write("<m-portal " + chunkIdAttr + ' style="display:contents">');
           if (props.pending) {
             await renderNode(rc, props.pending);
           }
@@ -1152,7 +1152,7 @@ async function renderFC(rc, fcFn, props, eager) {
           markSignals(fcRc, signals);
         } else {
           const chunkIdAttr = 'chunk-id="' + (rc.flags.chunk++).toString(36) + '"';
-          write("<m-portal " + chunkIdAttr + ">");
+          write("<m-portal " + chunkIdAttr + ' style="display:contents">');
           if (props.pending) {
             await renderNode(rc, props.pending);
           }
@@ -1365,7 +1365,7 @@ function renderSignal(rc, signal, mode, close = true) {
   if (mode && mode !== "html" && close) {
     buffer += " hidden";
   }
-  buffer += ">";
+  buffer += ' style="display:contents">';
   if (!mode || mode === "html") {
     let text;
     switch (typeof value) {

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "mono-jsx",
-  "version": "0.10.0-beta.21",
+  "version": "0.10.0-beta.23",
   "description": "`<html>` as a `Response` (Yet another JSX runtime for server-side rendering).",
   "type": "module",
+  "main": "./index.mjs",
   "module": "./index.mjs",
   "types": "./types/index.d.ts",
   "bin": {
@@ -11,18 +12,18 @@
   "exports": {
     ".": {
       "types": "./types/index.d.ts",
-      "node": "./index.mjs",
-      "import": "./index.mjs"
+      "import": "./index.mjs",
+      "node": "./index.mjs"
     },
     "./jsx-runtime": {
       "types": "./types/jsx-runtime.d.ts",
-      "node": "./jsx-runtime.mjs",
-      "import": "./jsx-runtime.mjs"
+      "import": "./jsx-runtime.mjs",
+      "node": "./jsx-runtime.mjs"
     },
     "./jsx-dev-runtime": {
       "types": "./types/jsx-runtime.d.ts",
-      "node": "./jsx-runtime.mjs",
-      "import": "./jsx-runtime.mjs"
+      "import": "./jsx-runtime.mjs",
+      "node": "./jsx-runtime.mjs"
     }
   },
   "scripts": {