@djvlc/runtime-host-react 1.1.2 → 1.1.3

package/dist/index.js

@@ -1,8 +1,16 @@
 // src/react-runtime.ts
-import { useState, useCallback, useRef } from "react";
+import { useState, useCallback, useRef, useMemo } from "react";
 import {
   createRuntime
 } from "@djvlc/runtime-core";
+var defaultMetrics = {
+  initTime: 0,
+  loadTime: 0,
+  renderTime: 0,
+  totalTime: 0,
+  initTimestamp: null,
+  readyTimestamp: null
+};
 function useReactRuntime(options) {
   const [runtime, setRuntime] = useState(null);
   const [loading, setLoading] = useState(true);
@@ -10,12 +18,29 @@ function useReactRuntime(options) {
   const [page, setPage] = useState(null);
   const [error, setError] = useState(null);
   const [hostApi, setHostApi] = useState(null);
+  const [metrics, setMetrics] = useState(defaultMetrics);
   const runtimeRef = useRef(null);
+  const timingRef = useRef({
+    startTime: 0,
+    initStartTime: 0,
+    loadStartTime: 0,
+    renderStartTime: 0
+  });
+  const isReady = useMemo(() => phase === "ready", [phase]);
+  const hasError = useMemo(() => phase === "error" || error !== null, [phase, error]);
   const init = useCallback(async () => {
     const container = options.containerRef?.current;
     if (!container) {
       throw new Error("Container element not found");
     }
+    timingRef.current.startTime = performance.now();
+    timingRef.current.initStartTime = timingRef.current.startTime;
+    if (options.enableMetrics) {
+      setMetrics((prev) => ({
+        ...prev,
+        initTimestamp: Date.now()
+      }));
+    }
     const runtimeInstance = createRuntime({
       ...options,
       container,
@@ -41,23 +66,46 @@ function useReactRuntime(options) {
     });
     await runtimeInstance.init();
     setHostApi(runtimeInstance.getHostApi());
+    if (options.enableMetrics) {
+      setMetrics((prev) => ({
+        ...prev,
+        initTime: performance.now() - timingRef.current.initStartTime
+      }));
+    }
   }, [options]);
   const load = useCallback(async () => {
     if (!runtimeRef.current) {
       throw new Error("Runtime not initialized");
     }
+    timingRef.current.loadStartTime = performance.now();
     const result = await runtimeRef.current.load();
     setPage(result);
     setHostApi(runtimeRef.current.getHostApi());
+    if (options.enableMetrics) {
+      setMetrics((prev) => ({
+        ...prev,
+        loadTime: performance.now() - timingRef.current.loadStartTime
+      }));
+    }
     return result;
-  }, []);
+  }, [options.enableMetrics]);
   const render = useCallback(async () => {
     if (!runtimeRef.current) {
       throw new Error("Runtime not initialized");
     }
+    timingRef.current.renderStartTime = performance.now();
     await runtimeRef.current.render();
     setLoading(false);
-  }, []);
+    if (options.enableMetrics) {
+      const now = performance.now();
+      setMetrics((prev) => ({
+        ...prev,
+        renderTime: now - timingRef.current.renderStartTime,
+        totalTime: now - timingRef.current.startTime,
+        readyTimestamp: Date.now()
+      }));
+    }
+  }, [options.enableMetrics]);
   const destroy = useCallback(() => {
     runtimeRef.current?.destroy();
     runtimeRef.current = null;
@@ -67,13 +115,43 @@ function useReactRuntime(options) {
     setError(null);
     setPhase("idle");
     setLoading(true);
+    setMetrics(defaultMetrics);
   }, []);
+  const reload = useCallback(async () => {
+    if (!runtimeRef.current) {
+      throw new Error("Runtime not initialized");
+    }
+    setError(null);
+    setLoading(true);
+    await load();
+    await render();
+  }, [load, render]);
   const setVariable = useCallback((key, value) => {
     runtimeRef.current?.setVariable(key, value);
   }, []);
+  const setVariables = useCallback((variables) => {
+    if (!runtimeRef.current) return;
+    Object.entries(variables).forEach(([key, value]) => {
+      runtimeRef.current?.setVariable(key, value);
+    });
+  }, []);
+  const getVariable = useCallback((key) => {
+    return runtimeRef.current?.getState().variables[key];
+  }, []);
   const refreshData = useCallback(async (queryId) => {
     await runtimeRef.current?.refreshData(queryId);
   }, []);
+  const executeAction = useCallback(async (actionType, params) => {
+    const api = hostApi;
+    if (!api) {
+      throw new Error("HostAPI not available");
+    }
+    const response = await api.executeAction(actionType, params || {});
+    if (response.success) {
+      return response.data;
+    }
+    throw new Error(response.errorMessage || "Action failed");
+  }, [hostApi]);
   return {
     runtime,
     loading,
@@ -81,12 +159,19 @@ function useReactRuntime(options) {
     page,
     error,
     hostApi,
+    isReady,
+    hasError,
+    metrics,
     init,
     load,
     render,
     destroy,
+    reload,
     setVariable,
-    refreshData
+    setVariables,
+    getVariable,
+    refreshData,
+    executeAction
   };
 }
 
@@ -142,13 +227,20 @@ function DJVRenderer({
   onLoad,
   onError,
   onReady,
+  onPhaseChange,
   loadingComponent,
   errorComponent,
+  emptyComponent,
   children,
   className,
-  style
+  style,
+  retryCount = 3,
+  retryDelay = 1e3,
+  timeout = 3e4
 }) {
   const containerRef = useRef2(null);
+  const mountedRef = useRef2(true);
+  const retryCountRef = useRef2(0);
   const [state, setState] = useState2({
     phase: "idle",
     page: null,
@@ -177,8 +269,8 @@ function DJVRenderer({
   const {
     runtime,
     loading,
-    phase: _phase,
-    page: _page,
+    phase,
+    page,
     error,
     hostApi,
     init,
@@ -186,27 +278,61 @@ function DJVRenderer({
     render,
     destroy
   } = useReactRuntime(options);
-  void _phase;
-  void _page;
-  const initAndLoad = useCallback2(async () => {
-    if (!containerRef.current) return;
+  useEffect(() => {
+    onPhaseChange?.(phase);
+  }, [phase, onPhaseChange]);
+  const initWithRetry = useCallback2(async () => {
+    if (!containerRef.current || !mountedRef.current) return;
+    const timeoutPromise = new Promise((_, reject) => {
+      setTimeout(() => reject(new Error("\u52A0\u8F7D\u8D85\u65F6")), timeout);
+    });
     try {
-      await init();
-      const pageData = await load();
-      onLoad?.(pageData);
-      await render();
-      onReady?.();
-      if (runtime) {
-        runtime.onStateChange((newState) => {
-          setState(newState);
-        });
-      }
+      await Promise.race([
+        (async () => {
+          await init();
+          const pageData = await load();
+          if (mountedRef.current) {
+            onLoad?.(pageData);
+          }
+          await render();
+          if (mountedRef.current) {
+            onReady?.();
+            retryCountRef.current = 0;
+            if (runtime) {
+              runtime.onStateChange((newState) => {
+                if (mountedRef.current) {
+                  setState(newState);
+                }
+              });
+            }
+          }
+        })(),
+        timeoutPromise
+      ]);
     } catch (err) {
+      if (!mountedRef.current) return;
+      if (retryCountRef.current < retryCount) {
+        retryCountRef.current++;
+        if (debug) {
+          console.log(`[DJVRenderer] \u91CD\u8BD5 ${retryCountRef.current}/${retryCount}...`);
+        }
+        setTimeout(() => {
+          if (mountedRef.current) {
+            initWithRetry();
+          }
+        }, retryDelay);
+      }
     }
-  }, [init, load, render, runtime, onLoad, onReady]);
+  }, [init, load, render, runtime, onLoad, onReady, timeout, retryCount, retryDelay, debug]);
+  const handleRetry = useCallback2(() => {
+    retryCountRef.current = 0;
+    initWithRetry();
+  }, [initWithRetry]);
   useEffect(() => {
-    initAndLoad();
+    mountedRef.current = true;
+    initWithRetry();
     return () => {
+      mountedRef.current = false;
       destroy();
     };
   }, [pageUid]);
@@ -214,18 +340,43 @@ function DJVRenderer({
     if (!loading) return null;
     return loadingComponent || /* @__PURE__ */ jsxs("div", { className: "djvlc-loading", children: [
       /* @__PURE__ */ jsx2("div", { className: "djvlc-loading-spinner" }),
-      /* @__PURE__ */ jsx2("span", { children: "\u52A0\u8F7D\u4E2D..." })
+      /* @__PURE__ */ jsx2("span", { children: "\u52A0\u8F7D\u4E2D..." }),
+      retryCountRef.current > 0 && /* @__PURE__ */ jsxs("span", { className: "djvlc-loading-retry", children: [
+        "\u91CD\u8BD5 ",
+        retryCountRef.current,
+        "/",
+        retryCount
+      ] })
     ] });
   };
   const renderError = () => {
     if (!error) return null;
     if (typeof errorComponent === "function") {
-      return errorComponent(error);
+      return errorComponent(error, handleRetry);
+    }
+    return errorComponent || /* @__PURE__ */ jsxs("div", { className: "djvlc-error", children: [
+      /* @__PURE__ */ jsx2("div", { className: "djvlc-error-icon", children: "\u26A0\uFE0F" }),
+      /* @__PURE__ */ jsxs("span", { className: "djvlc-error-message", children: [
+        "\u52A0\u8F7D\u5931\u8D25\uFF1A",
+        error.message
+      ] }),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          className: "djvlc-error-retry-btn",
+          onClick: handleRetry,
+          type: "button",
+          children: "\u91CD\u8BD5"
+        }
+      )
+    ] });
+  };
+  const renderEmpty = () => {
+    if (loading || error || page) return null;
+    if (phase === "ready" && !page) {
+      return emptyComponent || /* @__PURE__ */ jsx2("div", { className: "djvlc-empty", children: /* @__PURE__ */ jsx2("span", { children: "\u6682\u65E0\u5185\u5BB9" }) });
     }
-    return errorComponent || /* @__PURE__ */ jsx2("div", { className: "djvlc-error", children: /* @__PURE__ */ jsxs("span", { children: [
-      "\u52A0\u8F7D\u5931\u8D25\uFF1A",
-      error.message
-    ] }) });
+    return null;
   };
   return /* @__PURE__ */ jsx2(RuntimeProvider, { runtime, state, hostApi, children: /* @__PURE__ */ jsxs(
     "div",
@@ -233,9 +384,12 @@ function DJVRenderer({
       ref: containerRef,
       className: `djvlc-renderer ${className || ""}`,
       style,
+      "data-phase": phase,
+      "data-page-uid": pageUid,
       children: [
         renderLoading(),
         renderError(),
+        renderEmpty(),
         children
       ]
     }
@@ -243,51 +397,94 @@ function DJVRenderer({
 }
 
 // src/components/DJVProvider.tsx
-import { useState as useState3, useEffect as useEffect2 } from "react";
+import { useState as useState3, useEffect as useEffect2, useRef as useRef3 } from "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
+var defaultState2 = {
+  phase: "idle",
+  page: null,
+  variables: {},
+  queries: {},
+  components: /* @__PURE__ */ new Map(),
+  error: null,
+  destroyed: false
+};
 function DJVProvider({
   runtime,
   hostApi,
-  children
+  children,
+  className,
+  debug = false,
+  onStateChange,
+  onPhaseChange,
+  onError
 }) {
   const [state, setState] = useState3(
-    runtime?.getState() || {
-      phase: "idle",
-      page: null,
-      variables: {},
-      queries: {},
-      components: /* @__PURE__ */ new Map(),
-      error: null,
-      destroyed: false
-    }
+    runtime?.getState() || defaultState2
   );
+  const prevPhaseRef = useRef3(state.phase);
   useEffect2(() => {
-    if (!runtime) return;
+    if (!runtime) {
+      setState(defaultState2);
+      return;
+    }
+    setState(runtime.getState());
     const unsubscribe = runtime.onStateChange((newState) => {
       setState(newState);
+      onStateChange?.(newState);
+      if (newState.phase !== prevPhaseRef.current) {
+        onPhaseChange?.(newState.phase);
+        if (debug) {
+          console.log(`[DJVProvider] Phase changed: ${prevPhaseRef.current} -> ${newState.phase}`);
+        }
+        prevPhaseRef.current = newState.phase;
+      }
+      if (newState.error) {
+        onError?.(newState.error);
+      }
     });
     return () => {
       unsubscribe();
     };
-  }, [runtime]);
-  return /* @__PURE__ */ jsx3(RuntimeProvider, { runtime, state, hostApi, children: /* @__PURE__ */ jsx3("div", { className: "djvlc-provider", children }) });
+  }, [runtime, onStateChange, onPhaseChange, onError, debug]);
+  useEffect2(() => {
+  }, [hostApi]);
+  return /* @__PURE__ */ jsx3(RuntimeProvider, { runtime, state, hostApi, children: /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: ["djvlc-provider", className].filter(Boolean).join(" "),
+      "data-phase": state.phase,
+      children
+    }
+  ) });
 }
 
 // src/hooks/useDJVRuntime.ts
-import { useCallback as useCallback3, useState as useState4, useEffect as useEffect3, useMemo } from "react";
+import { useCallback as useCallback3, useState as useState4, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef4 } from "react";
 function useDJVRuntime() {
   const context = useRuntimeContext();
-  const loading = useMemo(() => {
+  const loading = useMemo2(() => {
     const phase = context.state.phase;
     return phase !== "ready" && phase !== "error";
   }, [context.state.phase]);
+  const isReady = context.state.phase === "ready";
+  const hasError = context.state.phase === "error" || context.state.error !== null;
+  const reload = useCallback3(async () => {
+    if (!context.runtime) {
+      throw new Error("Runtime not available");
+    }
+    await context.runtime.load();
+    await context.runtime.render();
+  }, [context.runtime]);
   return {
     runtime: context.runtime,
     state: context.state,
     loading,
     phase: context.state.phase,
     error: context.state.error,
-    page: context.state.page
+    page: context.state.page,
+    isReady,
+    hasError,
+    reload
   };
 }
 function useHostApi() {
@@ -312,67 +509,143 @@ function useRuntimeStateWritable(key, defaultValue) {
   );
   return [value, setValue];
 }
-function useQuery(queryId) {
+function useQuery(queryId, options) {
   const context = useRuntimeContext();
   const [loading, setLoading] = useState4(false);
   const [error, setError] = useState4(null);
+  const [lastUpdated, setLastUpdated] = useState4(null);
+  const mountedRef = useRef4(true);
   const data = context.state.queries[queryId];
   const refetch = useCallback3(async () => {
+    if (!mountedRef.current) return;
     setLoading(true);
     setError(null);
     try {
       await context.runtime?.refreshData(queryId);
+      if (mountedRef.current) {
+        setLastUpdated(Date.now());
+      }
     } catch (e) {
-      setError(e);
+      if (mountedRef.current) {
+        setError(e);
+      }
     } finally {
-      setLoading(false);
+      if (mountedRef.current) {
+        setLoading(false);
+      }
     }
   }, [context.runtime, queryId]);
+  useEffect3(() => {
+    mountedRef.current = true;
+    if (options?.refreshOnMount && context.runtime) {
+      refetch();
+    }
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  useEffect3(() => {
+    if (!options?.refreshInterval || options.refreshInterval <= 0) return;
+    const timer = setInterval(() => {
+      refetch();
+    }, options.refreshInterval);
+    return () => clearInterval(timer);
+  }, [options?.refreshInterval, refetch]);
+  useEffect3(() => {
+    if (!options?.refreshOnFocus) return;
+    const handleFocus = () => {
+      refetch();
+    };
+    window.addEventListener("focus", handleFocus);
+    return () => window.removeEventListener("focus", handleFocus);
+  }, [options?.refreshOnFocus, refetch]);
   return {
     data,
     loading,
     error,
-    refetch
+    refetch,
+    lastUpdated
   };
 }
-function useAction(actionType) {
+function useAction(actionType, options) {
   const context = useRuntimeContext();
   const [loading, setLoading] = useState4(false);
   const [result, setResult] = useState4();
   const [error, setError] = useState4(null);
-  const execute = useCallback3(
-    async (params) => {
+  const [executionCount, setExecutionCount] = useState4(0);
+  const mountedRef = useRef4(true);
+  useEffect3(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  const reset = useCallback3(() => {
+    setResult(void 0);
+    setError(null);
+    setExecutionCount(0);
+  }, []);
+  const executeWithRetry = useCallback3(
+    async (params, retriesLeft) => {
       const hostApi = context.hostApi;
       if (!hostApi) {
         throw new Error("HostAPI not available");
       }
-      setLoading(true);
-      setError(null);
       try {
         const response = await hostApi.executeAction(
           actionType,
           params
         );
         if (response.success) {
-          setResult(response.data);
           return response.data;
         } else {
-          throw new Error(response.message || "Action failed");
+          throw new Error(response.errorMessage || "Action failed");
         }
       } catch (e) {
-        setError(e);
+        if (retriesLeft > 0) {
+          await new Promise((resolve) => setTimeout(resolve, options?.retryDelay || 1e3));
+          return executeWithRetry(params, retriesLeft - 1);
+        }
+        throw e;
+      }
+    },
+    [context.hostApi, actionType, options?.retryDelay]
+  );
+  const execute = useCallback3(
+    async (params) => {
+      if (!mountedRef.current) return void 0;
+      setLoading(true);
+      setError(null);
+      setExecutionCount((c) => c + 1);
+      try {
+        const data = await executeWithRetry(params, options?.retryCount || 0);
+        if (mountedRef.current) {
+          setResult(data);
+          options?.onSuccess?.(data);
+        }
+        return data;
+      } catch (e) {
+        const err = e;
+        if (mountedRef.current) {
+          setError(err);
+          options?.onError?.(err);
+        }
         throw e;
       } finally {
-        setLoading(false);
+        if (mountedRef.current) {
+          setLoading(false);
+        }
       }
     },
-    [context.hostApi, actionType]
+    [executeWithRetry, options]
   );
   return {
     execute,
     loading,
     result,
-    error
+    error,
+    reset,
+    executionCount
   };
 }
 function useData(queryId, params, options) {
@@ -380,42 +653,69 @@ function useData(queryId, params, options) {
   const [data, setData] = useState4();
   const [loading, setLoading] = useState4(false);
   const [error, setError] = useState4(null);
+  const [isFetched, setIsFetched] = useState4(false);
+  const mountedRef = useRef4(true);
+  const paramsRef = useRef4(params);
+  useEffect3(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
   const refetch = useCallback3(
     async (newParams) => {
       const hostApi = context.hostApi;
-      if (!hostApi) {
-        throw new Error("HostAPI not available");
-      }
+      if (!hostApi || !mountedRef.current) return;
       setLoading(true);
       setError(null);
       try {
-        const response = await hostApi.requestData(
+        const data2 = await hostApi.requestData(
           queryId,
-          newParams || params
+          newParams || paramsRef.current
         );
-        if (response.success) {
-          setData(response.data);
-        } else {
-          throw new Error(response.message || "Query failed");
-        }
+        if (!mountedRef.current) return;
+        setData(data2);
+        setIsFetched(true);
+        options?.onSuccess?.(data2);
       } catch (e) {
-        setError(e);
+        if (mountedRef.current) {
+          const err = e;
+          setError(err);
+          options?.onError?.(err);
+        }
       } finally {
-        setLoading(false);
+        if (mountedRef.current) {
+          setLoading(false);
+        }
       }
     },
-    [context.hostApi, queryId, params]
+    [context.hostApi, queryId, options]
   );
+  useEffect3(() => {
+    const prevParams = paramsRef.current;
+    paramsRef.current = params;
+    if (options?.refreshOnParamsChange !== false && context.hostApi && isFetched && JSON.stringify(prevParams) !== JSON.stringify(params)) {
+      refetch();
+    }
+  }, [params, context.hostApi, options?.refreshOnParamsChange, isFetched, refetch]);
   useEffect3(() => {
     if (options?.immediate !== false && context.hostApi) {
       refetch();
     }
   }, [context.hostApi]);
+  useEffect3(() => {
+    if (!options?.refreshInterval || options.refreshInterval <= 0) return;
+    const timer = setInterval(() => {
+      refetch();
+    }, options.refreshInterval);
+    return () => clearInterval(timer);
+  }, [options?.refreshInterval, refetch]);
   return {
     data,
     loading,
     error,
-    refetch
+    refetch,
+    isFetched
   };
 }
 function useRuntimeEvent(eventType, handler) {
@@ -429,19 +729,209 @@ function useRuntimeEvent(eventType, handler) {
     };
   }, [context.runtime, eventType, handler]);
 }
+function usePageInfo() {
+  const context = useRuntimeContext();
+  const page = context.state.page;
+  return useMemo2(() => ({
+    /** 页面 UID */
+    pageUid: page?.pageUid,
+    /** 页面版本 ID */
+    pageVersionId: page?.pageVersionId,
+    /** Schema 版本 */
+    schemaVersion: page?.pageJson?.schemaVersion,
+    /** 页面标题 */
+    title: page?.title,
+    /** 页面配置 */
+    config: page?.config,
+    /** 页面是否已加载 */
+    isLoaded: page !== null
+  }), [page]);
+}
+function useComponentState(componentId) {
+  const context = useRuntimeContext();
+  const componentStatus = context.state.components.get(componentId);
+  return useMemo2(() => ({
+    /** 组件是否已加载 */
+    isLoaded: componentStatus?.status === "loaded",
+    /** 组件是否加载中 */
+    isLoading: componentStatus?.status === "loading",
+    /** 组件是否加载失败 */
+    hasError: componentStatus?.status === "failed",
+    /** 加载耗时 */
+    loadTime: componentStatus?.loadTime,
+    /** 组件信息 */
+    info: componentStatus
+  }), [componentStatus]);
+}
+function useLifecycle(options) {
+  const context = useRuntimeContext();
+  const [hasMounted, setHasMounted] = useState4(false);
+  const [hasReady, setHasReady] = useState4(false);
+  const prevPhaseRef = useRef4(context.state.phase);
+  const mountedRef = useRef4(true);
+  useEffect3(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  useEffect3(() => {
+    const currentPhase = context.state.phase;
+    if (currentPhase !== prevPhaseRef.current) {
+      options?.onPhaseChange?.(currentPhase);
+      prevPhaseRef.current = currentPhase;
+    }
+    if (!hasMounted && currentPhase !== "idle") {
+      setHasMounted(true);
+      Promise.resolve(options?.onMounted?.()).catch((error) => {
+        options?.onError?.(error);
+      });
+    }
+    if (!hasReady && currentPhase === "ready") {
+      setHasReady(true);
+      Promise.resolve(options?.onReady?.()).catch((error) => {
+        options?.onError?.(error);
+      });
+    }
+    if (currentPhase === "error" && context.state.error) {
+      options?.onError?.(context.state.error);
+    }
+  }, [context.state.phase, context.state.error, hasMounted, hasReady, options]);
+  return {
+    /** 当前阶段 */
+    phase: context.state.phase,
+    /** 是否已 mounted */
+    hasMounted,
+    /** 是否已 ready */
+    hasReady
+  };
+}
+function useWhen(condition, callback, options) {
+  const [executed, setExecuted] = useState4(false);
+  const { once = true } = options || {};
+  useEffect3(() => {
+    if (condition && (!once || !executed)) {
+      setExecuted(true);
+      callback();
+    }
+  }, [condition, callback, once, executed]);
+  return {
+    /** 是否已执行 */
+    executed
+  };
+}
+function useDebouncedAction(actionType, delay = 300) {
+  const { execute: rawExecute, loading, result, error } = useAction(actionType);
+  const timeoutRef = useRef4(null);
+  const mountedRef = useRef4(true);
+  useEffect3(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  const execute = useCallback3((params) => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      if (mountedRef.current) {
+        rawExecute(params).catch(() => {
+        });
+      }
+    }, delay);
+  }, [rawExecute, delay]);
+  const cancel = useCallback3(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+  return {
+    execute,
+    loading,
+    result,
+    error,
+    cancel
+  };
+}
+function useAsync(asyncFn, deps = [], options) {
+  const [data, setData] = useState4();
+  const [loading, setLoading] = useState4(false);
+  const [error, setError] = useState4(null);
+  const mountedRef = useRef4(true);
+  useEffect3(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  const execute = useCallback3(async () => {
+    if (!mountedRef.current) return void 0;
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await asyncFn();
+      if (mountedRef.current) {
+        setData(result);
+        options?.onSuccess?.(result);
+      }
+      return result;
+    } catch (e) {
+      const err = e;
+      if (mountedRef.current) {
+        setError(err);
+        options?.onError?.(err);
+      }
+      return void 0;
+    } finally {
+      if (mountedRef.current) {
+        setLoading(false);
+      }
+    }
+  }, [asyncFn, ...deps]);
+  useEffect3(() => {
+    if (options?.immediate !== false) {
+      execute();
+    }
+  }, []);
+  return {
+    data,
+    loading,
+    error,
+    execute
+  };
+}
+function usePrevious(value) {
+  const ref = useRef4();
+  useEffect3(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
 export {
   DJVProvider,
   DJVRenderer,
   RuntimeContext,
   RuntimeProvider,
   useAction,
+  useAsync,
+  useComponentState,
   useDJVRuntime,
   useData,
+  useDebouncedAction,
   useHostApi,
+  useLifecycle,
+  usePageInfo,
+  usePrevious,
   useQuery,
   useReactRuntime,
   useRuntimeContext,
   useRuntimeEvent,
   useRuntimeState,
-  useRuntimeStateWritable
+  useRuntimeStateWritable,
+  useWhen
 };