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

mono-jsx 0.8.1 → 0.8.2

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

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

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

@@ -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.8.2",
   "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