npm - mono-jsx - Versions diffs - 0.3.3 → 0.4.0 - Mend

mono-jsx 0.3.3 → 0.4.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 (5) hide show

package/README.md CHANGED Viewed

@@ -281,6 +281,53 @@ function App() {
 }
 ```
+## Async Components
+mono-jsx supports async components that return a `Promise` or an async function. With [streaming rendering](#streaming-rendering), async components are rendered asynchronously, allowing you to fetch data or perform other async operations before rendering the component.
+```tsx
+async function Loader(props: { url: string }) {
+  const data = await fetch(url).then((res) => res.json());
+  return <JsonViewer data={data} />;
+}
+default {
+  fetch: (req) => (
+    <html>
+      <Loader url="https://api.example.com/data" placeholder={<p>Loading...</p>} />
+    </html>
+  ),
+};
+```
+You can also use async generators to yield multiple elements over time. This is useful for streaming rendering of LLM tokens:
+```jsx
+async function* Chat(props: { prompt: string }) {
+  const stream = await openai.chat.completions.create({
+    model: "gpt-4",
+    messages: [{ role: "user", content: prompt }],
+    stream: true,
+  });
+  for await (const event of stream) {
+    const text = event.choices[0]?.delta.content;
+    if (text) {
+      yield <span>{text}</span>;
+    }
+  }
+}
+default {
+  fetch: (req) => (
+    <html>
+      <Chat prompt="Tell me a story" placeholder={<span style="color:grey">●</span>} />
+    </html>
+  ),
+};
+```
 ## Reactive
 mono-jsx provides a minimal state runtime for updating the view based on client-side state changes.
@@ -575,9 +622,7 @@ async function Sleep({ ms }) {
 export default {
   fetch: (req) => (
     <html>
-      <h1>Welcome to mono-jsx!</h1>
-      <Sleep ms={1000} placeholder={<p>Sleeping...</p>}>
+      <Sleep ms={1000} placeholder={<p>Loading...</p>}>
         <p>After 1 second</p>
       </Sleep>
     </html>
@@ -588,16 +633,9 @@ export default {
 You can set the `rendering` attribute to `"eager"` to force synchronous rendering (the `placeholder` will be ignored):
 ```jsx
-async function Sleep({ ms }) {
-  await new Promise((resolve) => setTimeout(resolve, ms));
-  return <slot />;
-}
 export default {
   fetch: (req) => (
     <html>
-      <h1>Welcome to mono-jsx!</h1>
       <Sleep ms={1000} rendering="eager">
         <p>After 1 second</p>
       </Sleep>
@@ -606,7 +644,7 @@ export default {
 };
 ```
-You can add the `catch` attribute to handle errors in async components. The `catch` attribute should be a function that returns a JSX element:
+You can add the `catch` attribute to handle errors in the async component. The `catch` attribute should be a function that returns a JSX element:
 ```jsx
 async function Hello() {
@@ -617,7 +655,7 @@ async function Hello() {
 export default {
   fetch: (req) => (
     <html>
-      <Hello catch={err => <p>{err.messaage}</p>} />
+      <Hello catch={err => <p>{err.message}</p>} />
     </html>
   ),
 };
@@ -625,7 +663,7 @@ export default {
 ## Customizing html Response
-Add `status` or `headers` attributes to the root `<html>` element to customize the response:
+You can add `status` or `headers` attributes to the root `<html>` element to customize the http response:
 ```jsx
 export default {
@@ -635,6 +673,7 @@ export default {
       headers={{
         cacheControl: "public, max-age=0, must-revalidate",
         setCookie: "name=value",
+        "x-foo": "bar",
       }}
     >
       <h1>Page Not Found</h1>

package/jsx-runtime.mjs CHANGED Viewed

@@ -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 s=new Map,i=(e,t)=>e.hasAttribute(t),l=e=>e.getAttribute("chunk-id"),c=(e,t)=>customElements.define(e,class extends HTMLElement{connectedCallback(){t(this)}});c("m-portal",e=>{s.set(l(e),e)}),c("m-chunk",e=>{setTimeout(()=>{const t=e.firstChild?.content.childNodes,o=l(e),n=s.get(o);n&&(i(e,"next")?n.before(...t):(s.delete(o),i(e,"done")?n.remove():n.replaceWith(...t)),e.remove())})});`;
 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;`,
@@ -357,46 +357,80 @@ async function renderNode(rc, node, stripSlotProp) {
           break;
         }
         if (typeof tag === "function") {
+          const { children } = props;
           const fcIndex = ++rc.status.fcIndex;
-          const { rendering, placeholder, catch: catchFC, ...fcProps } = props ?? /* @__PURE__ */ Object.create(null);
           try {
-            const v = tag.call(createThis(fcIndex, rc.appState, rc.context, rc.request), fcProps);
-            const { children } = fcProps;
             const fcSlots = children !== void 0 ? Array.isArray(children) ? isVNode(children) ? [children] : children : [children] : void 0;
-            if (v instanceof Promise) {
-              if ((rendering ?? tag.rendering) === "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>");
-                }));
-                write("<m-portal " + chunkIdAttr + ">");
-                if (placeholder) {
-                  await renderNode({ ...rc, fcIndex }, placeholder);
+            const v = tag.call(createThis(fcIndex, rc.appState, rc.context, rc.request), props);
+            if (isObject(v) && !isVNode(v)) {
+              if (v instanceof Promise) {
+                if ((props.rendering ?? tag.rendering) === "eager") {
+                  await renderNode({ ...rc, fcIndex, fcSlots }, await v);
+                } else {
+                  const chunkIdAttr = 'chunk-id="' + (rc.status.chunkIndex++).toString(36) + '"';
+                  write("<m-portal " + chunkIdAttr + ">");
+                  if (props.placeholder) {
+                    await renderNode({ ...rc, fcIndex }, props.placeholder);
+                  }
+                  write("</m-portal>");
+                  rc.suspenses.push(v.then(async (node2) => {
+                    let buf = "<m-chunk " + chunkIdAttr + "><template>";
+                    await renderNode({
+                      ...rc,
+                      fcIndex,
+                      fcSlots,
+                      write: (chunk) => {
+                        buf += chunk;
+                      }
+                    }, node2);
+                    return buf + "</template></m-chunk>";
+                  }));
                 }
-                write("</m-portal>");
-              }
-            } else if (isObject(v) && Symbol.asyncIterator in v) {
-              if ((rendering ?? tag.rendering) === "eager") {
-                for await (const c of v) {
-                  await renderNode({ ...rc, fcIndex, fcSlots }, c);
+              } else if (Symbol.asyncIterator in v) {
+                if ((props.rendering ?? tag.rendering) === "eager") {
+                  for await (const c of v) {
+                    await renderNode({ ...rc, fcIndex, fcSlots }, c);
+                  }
+                } else {
+                  const chunkIdAttr = 'chunk-id="' + (rc.status.chunkIndex++).toString(36) + '"';
+                  write("<m-portal " + chunkIdAttr + ">");
+                  if (props.placeholder) {
+                    await renderNode({ ...rc, fcIndex }, props.placeholder);
+                  }
+                  write("</m-portal>");
+                  const iter = () => rc.suspenses.push(
+                    v.next().then(async ({ done, value }) => {
+                      let buf = "<m-chunk " + chunkIdAttr;
+                      if (done) {
+                        return buf + " done></m-chunk>";
+                      }
+                      buf += " next><template>";
+                      await renderNode({
+                        ...rc,
+                        fcIndex,
+                        fcSlots,
+                        write: (chunk) => {
+                          buf += chunk;
+                        }
+                      }, value);
+                      iter();
+                      return buf + "</template></m-chunk>";
+                    })
+                  );
+                  iter();
+                }
+              } else if (Symbol.iterator in v) {
+                for (const node2 of v) {
+                  await renderNode({ ...rc, fcIndex, fcSlots }, node2);
                 }
-              } else {
-              }
-            } else if (isObject(v) && Symbol.iterator in v && !isVNode(v)) {
-              for (const node2 of v) {
-                await renderNode({ ...rc, fcIndex, fcSlots }, node2);
               }
-            } else {
+            } else if (v || v === 0) {
               await renderNode({ ...rc, fcIndex, fcSlots }, v);
             }
           } catch (err) {
             if (err instanceof Error) {
-              if (typeof catchFC === "function") {
-                await renderNode({ ...rc, fcIndex }, catchFC(err));
+              if (props.catch) {
+                await renderNode({ ...rc, fcIndex }, props.catch(err));
               } else {
                 write('<pre style="color:red;font-size:1rem"><code>' + escapeHTML(err.message) + "</code></pre>");
                 console.error(err);
@@ -672,7 +706,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 CHANGED Viewed

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

package/types/css.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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";
 }