npm - mono-jsx - Versions diffs - 0.8.1 → 0.9.0 - Mend

mono-jsx 0.8.1 → 0.9.0

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

package/README.md CHANGED Viewed

@@ -344,7 +344,7 @@ async function Loader(props: { url: string }) {
 export default {
   fetch: (req) => (
     <html>
-      <Loader url="https://api.example.com/data" placeholder={<p>Loading...</p>} />
+      <Loader url="https://api.example.com/data" pending={<p>Loading...</p>} />
     </html>
   )
 }
@@ -371,13 +371,13 @@ async function* Chat(props: { prompt: string }) {
 export default {
   fetch: (req) => (
     <html>
-      <Chat prompt="Tell me a story" placeholder={<span style="color:grey">●</span>} />
+      <Chat prompt="Tell me a story" pending={<span style="color:grey">●</span>} />
     </html>
   )
 }
 ```
-You can use `placeholder` to display a loading state while waiting for async components to render:
+You can use `pending` to display a loading state while waiting for async components to render:
 ```tsx
 async function Sleep({ ms }) {
@@ -388,7 +388,7 @@ async function Sleep({ ms }) {
 export default {
   fetch: (req) => (
     <html>
-      <Sleep ms={1000} placeholder={<p>Loading...</p>}>
+      <Sleep ms={1000} pending={<p>Loading...</p>}>
         <p>After 1 second</p>
       </Sleep>
     </html>
@@ -396,7 +396,7 @@ export default {
 }
 ```
-You can set the `rendering` attribute to `"eager"` to force synchronous rendering (the `placeholder` will be ignored):
+You can set the `rendering` attribute to `"eager"` to force synchronous rendering (the `pending` property will be ignored):
 ```tsx
 export default {
@@ -441,7 +441,7 @@ function Foo(props: { bar: string }) {
 export default {
   fetch: (req) => (
     <html request={req} components={{ Foo }}>
-      <component name="Foo" props={{ bar: "baz" }} placeholder={<p>Loading...</p>} />
+      <component name="Foo" props={{ bar: "baz" }} pending={<p>Loading...</p>} />
     </html>
   )
 }
@@ -453,7 +453,7 @@ You can use the `<component>` element with the `is` prop to render a component b
 export default {
   fetch: (req) => (
     <html request={req}>
-      <component is={Foo} props={{ bar: "baz" }} placeholder={<p>Loading...</p>} />
+      <component is={Foo} props={{ bar: "baz" }} pending={<p>Loading...</p>} />
     </html>
   )
 }
@@ -465,7 +465,7 @@ Or you can use the `<component>` element with the `as` prop to render a componen
 export default {
   fetch: (req) => (
     <html request={req}>
-      <component as={<Foo bar="baz" />} placeholder={<p>Loading...</p>} />
+      <component as={<Foo bar="baz" />} pending={<p>Loading...</p>} />
     </html>
   )
 }
@@ -487,7 +487,7 @@ function Dash(this: FC<{ page: "Profile" | "Projects" | "Settings" }>) {
         <button onClick={() => this.page = "Settings"}>Settings</button>
       </div>
       <div class="page">
-        <component name={this.page} placeholder={<p>Loading...</p>} />
+        <component name={this.page} pending={<p>Loading...</p>} />
       </div>
     </>
   )
@@ -509,7 +509,7 @@ async function Lazy(this: FC<{ show: boolean }>, props: { url: string }) {
   return (
     <div>
       <show when={this.show}>
-        <component name="Foo" props={{ bar: "baz" }} placeholder={<p>Loading...</p>} />
+        <component name="Foo" props={{ bar: "baz" }} pending={<p>Loading...</p>} />
       </show>
      <button onClick={() => this.show = true }>Load `Foo` Component</button>
     </div>
@@ -559,11 +559,11 @@ function Counter(
 You can define app signals by adding the `app` prop to the root `<html>` element. The app signals are available in all components via `this.app.<SignalName>`. Changes to the app signals will trigger re-renders in all components that use them:
 ```tsx
-interface AppSignals {
+interface IAppSignals {
   themeColor: string;
 }
-function Header(this: App<FC, AppSignals>) {
+function Header(this: WithAppSignals<FC, IAppSignals>) {
   return (
     <header>
       <h1 style={{ color: this.app.themeColor }}>Welcome to mono-jsx!</h1>
@@ -571,7 +571,7 @@ function Header(this: App<FC, AppSignals>) {
   )
 }
-function Footer(this: App<FC, AppSignals>) {
+function Footer(this: WithAppSignals<FC, IAppSignals>) {
   return (
     <footer>
       <p style={{ color: this.app.themeColor }}>(c) 2025 mono-jsx.</p>
@@ -579,7 +579,7 @@ function Footer(this: App<FC, AppSignals>) {
   )
 }
-function Main(this: App<FC, AppSignals>) {
+function Main(this: WithAppSignals<FC, IAppSignals>) {
   return (
     <main>
       <p>
@@ -879,20 +879,31 @@ The `this` object has the following built-in properties:
 - `request`: The request object from the `fetch` handler.
 - `session`: The session storage.
 - `refs`: A map of refs defined in the component.
-- `computed`: A method to create a computed signal.
-- `effect`: A method to create side effects.
+- `computed(fn)`: A method to create a computed signal.
+- `$(fn)`:  A shortcut for `computed(fn)`.
+- `effect(fn)`: A method to create side effects.
 ```ts
-type FC<Signals = {}, Refs = {}, AppSignals = {}, AppRefs = {}, Context = {}> = {
+type FC<Signals = {}, Refs = {}> = {
   readonly app: AppSignals & { refs: AppRefs; url: WithParams<URL> }
   readonly context: Context;
   readonly request: WithParams<Request>;
   readonly session: Session;
   readonly refs: Refs;
   readonly computed: <T = unknown>(fn: () => T) => T;
-  readonly $: FC["computed"];
+  readonly $: FC["computed"]; // A shortcut for `FC.computed`.
   readonly effect: (fn: () => void | (() => void)) => void;
 } & Signals;
+// define `AppSignals` type
+function Component(this: WithAppSignals<FC, { title: string }>) {
+  this.app.title // type: 'string'
+}
+// define `Context` type
+function Component(this: WithContext<FC, { secret: string }>) {
+  this.context.secret // type: 'string'
+}
 ```
 ### Using Signals
@@ -904,7 +915,7 @@ See the [Using Signals](#using-signals) section for more details on how to use s
 You can use `this.refs` to access refs in your components. Refs are defined using the `ref` attribute in JSX, and they allow you to access DOM elements directly. The `refs` object is a map of ref names to DOM elements.
 ```tsx
-function App(this: Refs<FC, { input?: HTMLInputElement }>) {
+function App(this: WithRefs<FC, { input?: HTMLInputElement }>) {
   this.effect(() => {
     this.refs.input?.addEventListener("input", (evt) => {
       console.log("Input changed:", evt.target.value);
@@ -946,7 +957,7 @@ The `<component>` element also supports the `ref` attribute, which allows you to
 ```tsx
 import type { ComponentElement } from "mono-jsx";
-function App(this: Refs<FC, { component: ComponentElement }>) {
+function App(this: WithRefs<FC, { component: ComponentElement }>) {
   this.effect(() => {
     // updating the component name and props will trigger a re-render of the component
     this.refs.component.name = "Foo";
@@ -971,7 +982,7 @@ function App(this: Refs<FC, { component: ComponentElement }>) {
 You can use the `context` property in `this` to access context values in your components. The context is defined on the root `<html>` element:
 ```tsx
-function Dash(this: Context<FC, { auth: { uuid: string; name: string } }>) {
+function Dash(this: WithContext<FC, { auth: { uuid: string; name: string } }>) {
   const { auth } = this.context;
   return (
     <div>

package/dom/jsx-runtime.mjs CHANGED Viewed

@@ -543,28 +543,28 @@ var renderFC = (fc, props, root, abortSignal) => {
   call$expr(scope, true);
   v = fc.call(scope, props);
   if (v instanceof Promise) {
-    let placeholder;
-    if (isVNode(props.placeholder)) {
-      placeholder = [...renderToFragment(scope, props.placeholder, abortSignal).childNodes];
+    let pendingNodes;
+    if (isVNode(props.pending)) {
+      pendingNodes = [...renderToFragment(scope, props.pending, abortSignal).childNodes];
     }
-    if (!placeholder?.length) {
-      placeholder = [createTextNode()];
+    if (!pendingNodes?.length) {
+      pendingNodes = [createTextNode()];
     }
-    root.append(...placeholder);
+    root.append(...pendingNodes);
     v.then((nodes) => {
       call$expr(scope, false);
-      placeholder[0].replaceWith(...renderToFragment(scope, nodes, abortSignal).childNodes);
+      pendingNodes[0].replaceWith(...renderToFragment(scope, nodes, abortSignal).childNodes);
     }).catch((err) => {
       if (isFunction(props.catch)) {
         const v2 = props.catch(err);
         if (isVNode(v2)) {
-          placeholder[0].replaceWith(...renderToFragment(scope, v2, abortSignal).childNodes);
+          pendingNodes[0].replaceWith(...renderToFragment(scope, v2, abortSignal).childNodes);
         }
       } else {
         console.error(err);
       }
     }).finally(() => {
-      placeholder.forEach((node) => node.remove());
+      pendingNodes.forEach((node) => node.remove());
     });
   } else {
     call$expr(scope, false);

package/jsx-runtime.mjs CHANGED Viewed

@@ -26,7 +26,7 @@ var STYLE_JS = `{var f=/^(-|f[lo].*[^se]$|g.{5,}[^ps]$|z|o[pr]|(W.{5})?[lL]i.*(t
 var RENDER_ATTR_JS = `{var s=(l,n,r)=>{let e=l.parentElement;return e.tagName==="M-GROUP"&&(e=e.previousElementSibling),()=>{let t=r();n==="value"?e.value=String(t):n==="checked"?e.checked=!!t:typeof t=="boolean"?e.toggleAttribute(n,t):t==null?e.removeAttribute(n):typeof t=="object"?n==="class"?e.setAttribute(n,$cx(t)):n==="style"?$applyStyle(e,t):e.setAttribute(n,JSON.stringify(t)):e.setAttribute(n,String(t))}};window.$renderAttr=s;}`;
 var RENDER_TOGGLE_JS = `{var i=(e,s)=>{let t,l=()=>e.replaceChildren(...s()?t:[]);return()=>{if(!t){let n=e.firstElementChild;n&&n.tagName==="TEMPLATE"&&n.hasAttribute("m-slot")?t=[...n.content.childNodes]:t=[...e.childNodes]}e.hasAttribute("vt")&&document.startViewTransition?document.startViewTransition(l):l()}};window.$renderToggle=i;}`;
 var RENDER_SWITCH_JS = `{var a=(l,u)=>{let s,r=l.getAttribute("value"),t,i,o=e=>t.get(e)??t.set(e,[]).get(e),d=()=>l.replaceChildren(...t.has(s)?t.get(s):i);return()=>{if(!t){t=new Map,i=[];for(let e of l.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):i.push(n);e.remove()}else r?o(r).push(e):i.push(e)}s=""+u(),l.hasAttribute("vt")&&document.startViewTransition?document.startViewTransition(d):d()}};window.$renderSwitch=a;}`;
-var SIGNALS_JS = `{let h;const w=window,p=document,y=new Map,k=new Map,$=new Map,u=n=>y.get(n)??y.set(n,N(n)).get(n),v=()=>Object.create(null),l=(n,e)=>n.getAttribute(e),N=n=>{const e=v(),t=(r,c)=>{e[r]=c},s=new Map,a=(r,c)=>{let i=s.get(r);return i||(i=new Set,s.set(r,i)),i.add(c),()=>{i.delete(c),i.size===0&&s.delete(r)}},o=new Proxy(v(),{get:(r,c)=>p.querySelector("[data-ref='"+n+":"+c+"']")});return new Proxy(e,{get:(r,c,i)=>{switch(c){case"$init":return t;case"$watch":return a;case"app":return u(0);case"refs":return o;default:return h?.(n,c),Reflect.get(r,c,i)}},set:(r,c,i,f)=>{if(i!==Reflect.get(r,c,f)){const d=s.get(c);return d&&queueMicrotask(()=>d.forEach(g=>g())),Reflect.set(r,c,i,f)}return!1}})},E=(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,a=()=>n.textContent=""+t();if(p.startViewTransition&&s.hasAttribute("data-vt")){const o=s.getAttribute("data-vt");return o&&(s.style.viewTransitionName=o),()=>p.startViewTransition(a)}return a},S=n=>{const e=n.indexOf(":");return e>0?[Number(n.slice(0,e)),n.slice(e+1)]:null},b=async(n,e=100)=>{const t=n();if(t!==void 0)return t;if(await new Promise(s=>setTimeout(s,25)),e<=0)throw new Error("Deferred value not found");return b(n,e-1)},T=n=>typeof n=="function"&&n(),M=(n,e)=>customElements.define(n,class extends HTMLElement{disposes=[];connectedCallback(){e(this)}disconnectedCallback(){this.disposes.forEach(t=>t()),this.disposes.length=0}});M("m-signal",n=>{const e=Number(l(n,"scope")),t=u(e),s=l(n,"key");if(s)n.disposes.push(t.$watch(s,E(n,l(n,"mode"),()=>t[s])));else{const a=Number(l(n,"computed"));b(()=>k.get(e+":"+a)).then(o=>{const r=E(n,l(n,"mode"),$fmap.get(a).bind(t));o.forEach(c=>{const[i,f]=S(c);n.disposes.push(u(i).$watch(f,r))})})}}),M("m-effect",n=>{const{disposes:e}=n,t=Number(l(n,"scope"));b(()=>$.get(t)??void 0).then(s=>{const a=s.length,o=new Array(a);e.push(()=>{o.forEach(T),o.length=0});for(let r=0;r<a;r++){const c=[],i=u(t),f=$fmap.get(s[r]),d=()=>{T(o[r]),o[r]=f?.call(i)};h=(g,m)=>c.push([g,m]),d(),h=void 0;for(const[g,m]of c)e.push(u(g).$watch(m,d))}})}),w.$S=(n,e)=>{const[t,s]=S(n);u(t).$init(s,e)},w.$C=(n,e,t)=>{k.set(n+":"+e,t)},w.$E=(n,...e)=>{$.set(n,e)},w.$patch=(n,...e)=>{for(const[t,...s]of e){let a=s.pop(),o=n;for(const r of s)o=o[r];o[a]=t}return n},w.$signals=n=>n!==void 0?u(n):void 0;}`;
+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 n=document,a=location,o=t=>t.split("#",1)[0],l=t=>o(t)===o(a.href);customElements.define("m-router",class extends HTMLElement{#t;#s;#i;#n;#e=new Map;#r=!0;async#c(t){const s=new AbortController,i={"x-route":"true","x-flags":$FLAGS};this.#n?.abort(),this.#n=s;const e=await fetch(t,{headers:i,signal:s.signal});if(e.status===404)return null;if(!e.ok)throw this.replaceChildren(),new Error("Failed to fetch route: "+e.status+" "+e.statusText);return e.json()}#a(t){const s=()=>typeof t=="string"?this.innerHTML=t:this.replaceChildren(...t);this.hasAttribute("vt")&&n.startViewTransition&&!this.#r?n.startViewTransition(s):s(),this.#r=!1}#o(){n.querySelectorAll("nav a").forEach(t=>{const{href:s,classList:i}=t,e=t.closest("nav")?.getAttribute("data-active-class")??"active";l(s)?i.add(e):i.remove(e)})}async#l(t,s){const i=this.#c(t).then(e=>{if(e){const[r,c]=e;return this.#e.set(t,r),this.#a(r),c}else this.#e.delete(t),this.#a(this.#t??[]),typeof $signals<"u"&&($signals(0).url=new URL(t))});this.#e.has(t)?this.#a(this.#e.get(t)):await i,history[s?.replace?"replaceState":"pushState"]({},"",t),this.#o(),window.scrollTo(0,0),i.then(e=>{e&&(n.body.appendChild(n.createElement("script")).textContent=e)})}navigate(t,s){const i=new URL(t,a.href);if(i.origin!==a.origin){a.href=t;return}l(i.href)||this.#l(t,s)}connectedCallback(){setTimeout(()=>{if(!this.#t)if(this.hasAttribute("fallback"))this.removeAttribute("fallback"),this.#t=[...this.childNodes];else{this.#t=[];for(const t of this.childNodes)if(t.nodeType===1&&t.tagName==="TEMPLATE"&&t.hasAttribute("m-fallback")){this.#t.push(...t.content.childNodes),t.remove();break}}}),this.#s=t=>{if(t.defaultPrevented||t.altKey||t.ctrlKey||t.metaKey||t.shiftKey||!(t.target instanceof HTMLAnchorElement))return;const{download:s,href:i,rel:e,target:r}=t.target;s||e==="external"||r==="_blank"||!i.startsWith(a.origin)||(t.preventDefault(),this.navigate(i))},this.#i=()=>this.#l(a.href),addEventListener("popstate",this.#i),n.addEventListener("click",this.#s),setTimeout(()=>this.#o()),globalThis.$router=this}disconnectedCallback(){removeEventListener("popstate",this.#i),n.removeEventListener("click",this.#s),delete globalThis.$router,this.#n?.abort(),this.#n=void 0,this.#e.clear(),this.#s=void 0,this.#i=void 0}});}`;
@@ -176,7 +176,7 @@ var $vnode = Symbol.for("jsx.vnode");
 var $setup = Symbol.for("mono.setup");
 // version.ts
-var VERSION = "0.8.1";
+var VERSION = "0.8.2";
 // render.ts
 var FunctionIdGenerator = class extends Map {
@@ -681,7 +681,7 @@ async function renderNode(rc, node, stripSlotProp) {
           }
           // `<component>` element
           case "component": {
-            let { placeholder, is, as } = props;
+            let { pending, is, as } = props;
             let attrs = "";
             let attrModifiers = "";
             let writeAttr = (propName, propValue = props[propName]) => {
@@ -710,11 +710,11 @@ async function renderNode(rc, node, stripSlotProp) {
             writeAttr("ref");
             attrs += renderViewTransitionAttr(props);
             let buf = "<m-component" + attrs + ">";
-            if (placeholder) {
+            if (pending) {
               const write2 = (chunk) => {
                 buf += chunk;
               };
-              await renderChildren({ ...rc, write: write2 }, placeholder);
+              await renderChildren({ ...rc, write: write2 }, pending);
             }
             buf += "</m-component>";
             if (attrModifiers) {
@@ -927,8 +927,8 @@ async function renderFC(rc, fcFn, props, eager) {
         } else {
           const chunkIdAttr = 'chunk-id="' + (rc.flags.chunk++).toString(36) + '"';
           write("<m-portal " + chunkIdAttr + ">");
-          if (props.placeholder) {
-            await renderNode(rc, props.placeholder);
+          if (props.pending) {
+            await renderNode(rc, props.pending);
           }
           write("</m-portal>");
           rc.suspenses.push(v.then(async (node) => {
@@ -951,8 +951,8 @@ async function renderFC(rc, fcFn, props, eager) {
         } else {
           const chunkIdAttr = 'chunk-id="' + (rc.flags.chunk++).toString(36) + '"';
           write("<m-portal " + chunkIdAttr + ">");
-          if (props.placeholder) {
-            await renderNode(rc, props.placeholder);
+          if (props.pending) {
+            await renderNode(rc, props.pending);
           }
           write("</m-portal>");
           const iter = () => rc.suspenses.push(

package/package.json CHANGED Viewed

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

package/types/jsx.d.ts CHANGED Viewed

@@ -38,7 +38,7 @@ export interface AsyncComponentAttributes {
   /**
    * The loading spinner for an async component.
    */
-  placeholder?: JSX.Element;
+  pending?: JSX.Element;
   /**
    * Rendering mode of an async component.
    * - `eager`: render async components eagerly
@@ -106,12 +106,12 @@ declare global {
       effect(fn: () => (() => void) | void): void;
     }
     & FCExtension<FC>
-    & Omit<Omit<Signals, "init" | "refs" | "computed" | "$" | "effect">, keyof FCExtension>;
+    & Omit<Omit<Signals, "refs" | "init" | "computed" | "$" | "effect">, keyof FCExtension>;
   /**
    *  Defines the `this.refs` type.
    */
-  type Refs<T, R extends {}> = T extends FC<infer S> ? FC<S, R> : never;
+  type WithRefs<T, R extends {}> = T extends FC<infer S> ? FC<S, R> : never;
   /**
    * The JSX namespace object.

package/types/mono.d.ts CHANGED Viewed

@@ -279,7 +279,7 @@ declare global {
   /**
    * Defines the `this.app` type.
    */
-  type App<T, AppSignals = {}, AppRefs = Record<string, HTMLElement>> = T extends FC<infer S, infer R> ? FC<S, R> & {
+  type WithAppSignals<T, AppSignals = {}, AppRefs = Record<string, HTMLElement>> = T extends FC<infer S, infer R> ? FC<S, R> & {
       /**
        * The global signals shared across the application.
        */
@@ -302,7 +302,7 @@ declare global {
   /**
    * Defines the `this.context` type.
    */
-  type Context<T, Context = {}> = T extends FC<infer S, infer R> ? FC<S, R> & {
+  type WithContext<T, Context = {}> = T extends FC<infer S, infer R> ? FC<S, R> & {
       /**
        * The rendering context object.
        *