feat(van-ui): add Await component

Author: Hunter-Gu

components/dist/van-ui.d.ts

@@ -1,4 +1,4 @@
-import { ChildDom, State } from "vanjs-core";
+import { ChildDom, State, ValidChildDomValue } from "vanjs-core";
 export type CSSPropertyBag = Record<string, string | number>;
 export type CSSStyles = Record<string, CSSPropertyBag>;
 export interface ModalProps {
@@ -135,3 +135,19 @@ export interface FloatingWindowProps {
 }
 export declare const topMostZIndex: () => number;
 export declare const FloatingWindow: ({ title, closed, x, y, width, height, closeCross, customStacking, zIndex, disableMove, disableResize, headerColor, windowClass, windowStyleOverrides, headerClass, headerStyleOverrides, childrenContainerClass, childrenContainerStyleOverrides, crossClass, crossStyleOverrides, crossHoverClass, crossHoverStyleOverrides, }: FloatingWindowProps, ...children: readonly ChildDom[]) => () => HTMLDivElement | null;
+interface AwaitProps<Value> {
+    value: Promise<Value>;
+    Loading?: () => ValidChildDomValue;
+    Error?: (reason: Error) => ValidChildDomValue;
+}
+export type AwaitState<Value> = {
+    status: 'pending';
+} | {
+    value: Value;
+    status: 'fulfilled';
+} | {
+    value: Error;
+    status: 'rejected';
+};
+export declare const Await: <T>({ value, Loading, Error }: AwaitProps<T>, children: (data: T) => ValidChildDomValue) => () => ValidChildDomValue;
+export {};

components/dist/van-ui.js

@@ -427,3 +427,28 @@ export const FloatingWindow = ({ title, closed = van.state(false), x = 100, y =
         style: toStyleStr(childrenContainerStyleOverrides)
     }, children));
 };
+export const Await = ({ value, Loading, Error }, children) => {
+    const data = van.state({ status: 'pending' });
+    const resolve = (promise) => {
+        data.val = { status: 'pending' };
+        promise
+            .then((result) => {
+            data.val = {
+                value: result,
+                status: 'fulfilled',
+            };
+        })
+            .catch((err) => {
+            data.val = {
+                value: err,
+                status: 'rejected',
+            };
+        });
+    };
+    van.derive(() => resolve(value));
+    return () => data.val.status === 'pending'
+        ? Loading?.()
+        : data.val.status === 'rejected'
+            ? Error?.(data.val.value)
+            : children(data.val.value);
+};

components/dist/van-ui.nomodule.js

@@ -427,4 +427,29 @@
           style: toStyleStr(childrenContainerStyleOverrides)
       }, children));
   };
+  window.Await = ({ value, Loading, Error }, children) => {
+      const data = van.state({ status: 'pending' });
+      const resolve = (promise) => {
+          data.val = { status: 'pending' };
+          promise
+              .then((result) => {
+              data.val = {
+                  value: result,
+                  status: 'fulfilled',
+              };
+          })
+              .catch((err) => {
+              data.val = {
+                  value: err,
+                  status: 'rejected',
+              };
+          });
+      };
+      van.derive(() => resolve(value));
+      return () => data.val.status === 'pending'
+          ? Loading?.()
+          : data.val.status === 'rejected'
+              ? Error?.(data.val.value)
+              : children(data.val.value);
+  };
 }