@djvlc/runtime-host-vue 1.0.3 → 1.0.4

package/dist/index.js

@@ -1,1060 +1 @@
-// src/vue-runtime.ts
-import { ref, shallowRef, readonly, computed } from "vue";
-import {
-  createRuntime
-} from "@djvlc/runtime-core";
-function createVueRuntime(options) {
-  const runtime = shallowRef(null);
-  const loading = ref(true);
-  const phase = ref("idle");
-  const page = shallowRef(null);
-  const error = shallowRef(null);
-  const hostApi = shallowRef(null);
-  const isReady = computed(() => phase.value === "ready");
-  const hasError = computed(() => phase.value === "error" || error.value !== null);
-  const metrics = shallowRef({
-    initTime: 0,
-    loadTime: 0,
-    renderTime: 0,
-    totalTime: 0,
-    initTimestamp: null,
-    readyTimestamp: null
-  });
-  let startTime = 0;
-  let initStartTime = 0;
-  let loadStartTime = 0;
-  let renderStartTime = 0;
-  const init = async () => {
-    const container = options.containerRef?.value;
-    if (!container) {
-      throw new Error("Container element not found");
-    }
-    startTime = performance.now();
-    initStartTime = startTime;
-    if (options.enableMetrics) {
-      metrics.value = {
-        ...metrics.value,
-        initTimestamp: Date.now()
-      };
-    }
-    const runtimeInstance = createRuntime({
-      ...options,
-      container,
-      onError: (err) => {
-        error.value = err;
-        options.onError?.(err);
-      },
-      onEvent: (event) => {
-        options.onEvent?.(event);
-      }
-    });
-    runtime.value = runtimeInstance;
-    runtimeInstance.onStateChange((state) => {
-      phase.value = state.phase;
-      loading.value = state.phase !== "ready" && state.phase !== "error";
-      if (state.page) {
-        page.value = state.page;
-      }
-      if (state.error) {
-        error.value = state.error;
-      }
-    });
-    await runtimeInstance.init();
-    hostApi.value = runtimeInstance.getHostApi();
-    if (options.enableMetrics) {
-      metrics.value = {
-        ...metrics.value,
-        initTime: performance.now() - initStartTime
-      };
-    }
-  };
-  const load = async () => {
-    if (!runtime.value) {
-      throw new Error("Runtime not initialized");
-    }
-    loadStartTime = performance.now();
-    const result = await runtime.value.load();
-    page.value = result;
-    hostApi.value = runtime.value.getHostApi();
-    if (options.enableMetrics) {
-      metrics.value = {
-        ...metrics.value,
-        loadTime: performance.now() - loadStartTime
-      };
-    }
-    return result;
-  };
-  const render = async () => {
-    if (!runtime.value) {
-      throw new Error("Runtime not initialized");
-    }
-    renderStartTime = performance.now();
-    await runtime.value.render();
-    loading.value = false;
-    if (options.enableMetrics) {
-      const now = performance.now();
-      metrics.value = {
-        ...metrics.value,
-        renderTime: now - renderStartTime,
-        totalTime: now - startTime,
-        readyTimestamp: Date.now()
-      };
-    }
-  };
-  const destroy = () => {
-    runtime.value?.destroy();
-    runtime.value = null;
-    hostApi.value = null;
-    page.value = null;
-    error.value = null;
-    phase.value = "idle";
-    loading.value = true;
-  };
-  const reload = async () => {
-    if (!runtime.value) {
-      throw new Error("Runtime not initialized");
-    }
-    error.value = null;
-    loading.value = true;
-    await load();
-    await render();
-  };
-  const setVariable = (key, value) => {
-    runtime.value?.setVariable(key, value);
-  };
-  const setVariables = (variables) => {
-    if (!runtime.value) return;
-    Object.entries(variables).forEach(([key, value]) => {
-      runtime.value?.setVariable(key, value);
-    });
-  };
-  const getVariable = (key) => {
-    return runtime.value?.getState().variables[key];
-  };
-  const refreshData = async (queryId) => {
-    await runtime.value?.refreshData(queryId);
-  };
-  const executeAction = async (actionType, params) => {
-    const api = hostApi.value;
-    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");
-  };
-  return {
-    runtime,
-    loading: readonly(loading),
-    phase: readonly(phase),
-    page,
-    error,
-    hostApi,
-    isReady,
-    hasError,
-    metrics,
-    init,
-    load,
-    render,
-    destroy,
-    reload,
-    setVariable,
-    setVariables,
-    getVariable,
-    refreshData,
-    executeAction
-  };
-}
-
-// src/components/DJVRenderer.ts
-import {
-  defineComponent,
-  ref as ref3,
-  shallowRef as shallowRef3,
-  onMounted as onMounted2,
-  onUnmounted as onUnmounted2,
-  watch as watch2,
-  h
-} from "vue";
-
-// src/composables/useRuntime.ts
-import {
-  inject,
-  provide,
-  readonly as readonly2,
-  ref as ref2,
-  shallowRef as shallowRef2,
-  computed as computed2,
-  watch,
-  onMounted,
-  onUnmounted
-} from "vue";
-var RuntimeContextKey = /* @__PURE__ */ Symbol("DJVRuntime");
-function provideRuntime(value) {
-  provide(RuntimeContextKey, value);
-}
-function injectRuntime() {
-  const context = inject(RuntimeContextKey);
-  if (!context) {
-    throw new Error("useDJVRuntime must be used within a DJVProvider");
-  }
-  return context;
-}
-function useDJVRuntime() {
-  const context = injectRuntime();
-  const loading = computed2(() => {
-    const phase = context.value.state.phase;
-    return phase !== "ready" && phase !== "error";
-  });
-  const isReady = computed2(() => context.value.state.phase === "ready");
-  const hasError = computed2(() => context.value.state.phase === "error" || context.value.state.error !== null);
-  const reload = async () => {
-    const runtime = context.value.runtime;
-    if (!runtime) {
-      throw new Error("Runtime not available");
-    }
-    await runtime.load();
-    await runtime.render();
-  };
-  return {
-    runtime: computed2(() => context.value.runtime),
-    state: computed2(() => context.value.state),
-    loading,
-    phase: computed2(() => context.value.state.phase),
-    error: computed2(() => context.value.state.error),
-    page: computed2(() => context.value.state.page),
-    isReady,
-    hasError,
-    reload
-  };
-}
-function useHostApi() {
-  const context = injectRuntime();
-  const hostApi = context.value.hostApi;
-  if (!hostApi) {
-    throw new Error("HostAPI not available. Make sure runtime is initialized.");
-  }
-  return hostApi;
-}
-function useRuntimeState(key) {
-  const context = injectRuntime();
-  return computed2(() => {
-    return context.value.state.variables[key];
-  });
-}
-function useRuntimeStateWritable(key, defaultValue) {
-  const context = injectRuntime();
-  const value = computed2(() => {
-    return context.value.state.variables[key] ?? defaultValue;
-  });
-  const setValue = (newValue) => {
-    context.value.runtime?.setVariable(key, newValue);
-  };
-  return [value, setValue];
-}
-function useQuery(queryId, options) {
-  const context = injectRuntime();
-  const loading = ref2(false);
-  const error = ref2(null);
-  const lastUpdated = ref2(null);
-  let intervalTimer = null;
-  const data = computed2(() => {
-    return context.value.state.queries[queryId];
-  });
-  const refetch = async () => {
-    loading.value = true;
-    error.value = null;
-    try {
-      await context.value.runtime?.refreshData(queryId);
-      lastUpdated.value = Date.now();
-    } catch (e) {
-      error.value = e;
-    } finally {
-      loading.value = false;
-    }
-  };
-  onMounted(() => {
-    if (options?.refreshOnMount && context.value.runtime) {
-      refetch();
-    }
-    if (options?.refreshInterval && options.refreshInterval > 0) {
-      intervalTimer = setInterval(refetch, options.refreshInterval);
-    }
-    if (options?.refreshOnFocus) {
-      window.addEventListener("focus", refetch);
-    }
-  });
-  onUnmounted(() => {
-    if (intervalTimer) {
-      clearInterval(intervalTimer);
-    }
-    if (options?.refreshOnFocus) {
-      window.removeEventListener("focus", refetch);
-    }
-  });
-  return {
-    data,
-    loading,
-    error,
-    refetch,
-    lastUpdated
-  };
-}
-function useAction(actionType, options) {
-  const context = injectRuntime();
-  const loading = ref2(false);
-  const result = shallowRef2();
-  const error = ref2(null);
-  const executionCount = ref2(0);
-  const reset = () => {
-    result.value = void 0;
-    error.value = null;
-    executionCount.value = 0;
-  };
-  const executeWithRetry = async (params, retriesLeft) => {
-    const hostApi = context.value.hostApi;
-    if (!hostApi) {
-      throw new Error("HostAPI not available");
-    }
-    try {
-      const response = await hostApi.executeAction(actionType, params);
-      if (response.success) {
-        return response.data;
-      } else {
-        throw new Error(response.errorMessage || "Action failed");
-      }
-    } catch (e) {
-      if (retriesLeft > 0) {
-        await new Promise((resolve) => setTimeout(resolve, options?.retryDelay || 1e3));
-        return executeWithRetry(params, retriesLeft - 1);
-      }
-      throw e;
-    }
-  };
-  const execute = async (params) => {
-    loading.value = true;
-    error.value = null;
-    executionCount.value++;
-    try {
-      const data = await executeWithRetry(params, options?.retryCount || 0);
-      result.value = data;
-      options?.onSuccess?.(data);
-      return data;
-    } catch (e) {
-      const err = e;
-      error.value = err;
-      options?.onError?.(err);
-      throw e;
-    } finally {
-      loading.value = false;
-    }
-  };
-  return {
-    execute,
-    loading,
-    result,
-    error,
-    reset,
-    executionCount
-  };
-}
-function useData(queryId, params, options) {
-  const context = injectRuntime();
-  const data = shallowRef2();
-  const loading = ref2(false);
-  const error = ref2(null);
-  const isFetched = ref2(false);
-  let intervalTimer = null;
-  const getCurrentParams = () => {
-    if (!params) return void 0;
-    if (typeof params === "object" && "value" in params) {
-      return params.value;
-    }
-    return params;
-  };
-  const refetch = async (newParams) => {
-    const hostApi = context.value.hostApi;
-    if (!hostApi) {
-      throw new Error("HostAPI not available");
-    }
-    loading.value = true;
-    error.value = null;
-    try {
-      const result = await hostApi.requestData(
-        queryId,
-        newParams || getCurrentParams()
-      );
-      data.value = result;
-      isFetched.value = true;
-      options?.onSuccess?.(result);
-    } catch (e) {
-      const err = e;
-      error.value = err;
-      options?.onError?.(err);
-    } finally {
-      loading.value = false;
-    }
-  };
-  if (params && typeof params === "object" && "value" in params && options?.refreshOnParamsChange !== false) {
-    watch(params, () => {
-      if (isFetched.value) {
-        refetch();
-      }
-    }, { deep: true });
-  }
-  onMounted(() => {
-    if (options?.immediate !== false && context.value.hostApi) {
-      refetch();
-    }
-    if (options?.refreshInterval && options.refreshInterval > 0) {
-      intervalTimer = setInterval(refetch, options.refreshInterval);
-    }
-  });
-  onUnmounted(() => {
-    if (intervalTimer) {
-      clearInterval(intervalTimer);
-    }
-  });
-  return {
-    data,
-    loading,
-    error,
-    refetch,
-    isFetched
-  };
-}
-function useRuntimeEvent(eventType, handler) {
-  const context = injectRuntime();
-  const unsubscribe = context.value.runtime?.on(eventType, (event) => {
-    handler(event.data);
-  });
-  onUnmounted(() => {
-    unsubscribe?.();
-  });
-}
-function usePageInfo() {
-  const context = injectRuntime();
-  return {
-    /** 页面 UID */
-    pageUid: computed2(() => context.value.state.page?.pageUid),
-    /** 页面版本 ID */
-    pageVersionId: computed2(() => context.value.state.page?.pageVersionId),
-    /** Schema 版本 */
-    schemaVersion: computed2(() => context.value.state.page?.pageJson?.schemaVersion),
-    /** 页面标题 */
-    title: computed2(() => {
-      const page = context.value.state.page;
-      return page?.title;
-    }),
-    /** 页面配置 */
-    config: computed2(() => {
-      const page = context.value.state.page;
-      return page?.config;
-    }),
-    /** 页面是否已加载 */
-    isLoaded: computed2(() => context.value.state.page !== null)
-  };
-}
-function useComponentState(componentId) {
-  const context = injectRuntime();
-  const componentStatus = computed2(() => {
-    return context.value.state.components.get(componentId);
-  });
-  return {
-    /** 组件是否已加载 */
-    isLoaded: computed2(() => componentStatus.value?.status === "loaded"),
-    /** 组件是否加载中 */
-    isLoading: computed2(() => componentStatus.value?.status === "loading"),
-    /** 组件是否加载失败 */
-    hasError: computed2(() => componentStatus.value?.status === "failed"),
-    /** 加载耗时 */
-    loadTime: computed2(() => componentStatus.value?.loadTime),
-    /** 组件信息 */
-    info: componentStatus
-  };
-}
-function useLifecycle(options) {
-  const context = injectRuntime();
-  const hasMounted = ref2(false);
-  const hasReady = ref2(false);
-  watch(
-    () => context.value.state.phase,
-    async (newPhase, oldPhase) => {
-      options?.onPhaseChange?.(newPhase);
-      if (!hasMounted.value && newPhase !== "idle") {
-        hasMounted.value = true;
-        try {
-          await options?.onMounted?.();
-        } catch (error) {
-          options?.onError?.(error);
-        }
-      }
-      if (!hasReady.value && newPhase === "ready") {
-        hasReady.value = true;
-        try {
-          await options?.onReady?.();
-        } catch (error) {
-          options?.onError?.(error);
-        }
-      }
-      if (newPhase === "error" && oldPhase !== "error") {
-        options?.onError?.(context.value.state.error);
-      }
-    },
-    { immediate: true }
-  );
-  return {
-    /** 当前阶段 */
-    phase: computed2(() => context.value.state.phase),
-    /** 是否已 mounted */
-    hasMounted: readonly2(hasMounted),
-    /** 是否已 ready */
-    hasReady: readonly2(hasReady)
-  };
-}
-function useWhen(condition, callback, options) {
-  const executed = ref2(false);
-  const { once = true, immediate = true } = options || {};
-  const stop = watch(
-    condition,
-    async (value) => {
-      if (value && (!once || !executed.value)) {
-        executed.value = true;
-        await callback();
-        if (once) {
-          stop();
-        }
-      }
-    },
-    { immediate }
-  );
-  onUnmounted(() => {
-    stop();
-  });
-  return {
-    /** 是否已执行 */
-    executed: readonly2(executed),
-    /** 手动停止监听 */
-    stop
-  };
-}
-function useDebouncedAction(actionType, delay = 300) {
-  const { execute: rawExecute, loading, result, error } = useAction(actionType);
-  let timeoutId = null;
-  const execute = (params) => {
-    if (timeoutId) {
-      clearTimeout(timeoutId);
-    }
-    timeoutId = setTimeout(() => {
-      rawExecute(params).catch(() => {
-      });
-    }, delay);
-  };
-  const cancel = () => {
-    if (timeoutId) {
-      clearTimeout(timeoutId);
-      timeoutId = null;
-    }
-  };
-  onUnmounted(() => {
-    cancel();
-  });
-  return {
-    execute,
-    loading,
-    result,
-    error,
-    cancel
-  };
-}
-function useGlobalConfig() {
-  const config = inject("djvlc-config", {});
-  return config;
-}
-
-// src/components/DJVRenderer.ts
-var DJVRenderer = defineComponent({
-  name: "DJVRenderer",
-  props: {
-    pageUid: {
-      type: String,
-      required: true
-    },
-    apiBaseUrl: {
-      type: String,
-      required: true
-    },
-    cdnBaseUrl: {
-      type: String,
-      required: true
-    },
-    channel: {
-      type: String,
-      default: "prod"
-    },
-    userId: String,
-    deviceId: String,
-    authToken: String,
-    previewToken: String,
-    debug: {
-      type: Boolean,
-      default: false
-    },
-    enableSRI: {
-      type: Boolean,
-      default: true
-    },
-    retryCount: {
-      type: Number,
-      default: 3
-    },
-    retryDelay: {
-      type: Number,
-      default: 1e3
-    },
-    timeout: {
-      type: Number,
-      default: 3e4
-    }
-  },
-  emits: ["load", "error", "ready", "phase-change"],
-  setup(props, { emit, slots }) {
-    const containerRef = ref3(null);
-    const mounted = ref3(true);
-    const retryAttempt = ref3(0);
-    const phase = ref3("idle");
-    const contextValue = shallowRef3({
-      runtime: null,
-      state: {
-        phase: "idle",
-        page: null,
-        variables: {},
-        queries: {},
-        components: /* @__PURE__ */ new Map(),
-        error: null,
-        destroyed: false
-      },
-      hostApi: null
-    });
-    provideRuntime(contextValue);
-    let vueRuntime = null;
-    const withTimeout = (promise, ms) => {
-      return Promise.race([
-        promise,
-        new Promise(
-          (_, reject) => setTimeout(() => reject(new Error("\u52A0\u8F7D\u8D85\u65F6")), ms)
-        )
-      ]);
-    };
-    const initWithRetry = async () => {
-      if (!containerRef.value || !mounted.value) return;
-      const options = {
-        pageUid: props.pageUid,
-        apiBaseUrl: props.apiBaseUrl,
-        cdnBaseUrl: props.cdnBaseUrl,
-        channel: props.channel,
-        userId: props.userId,
-        deviceId: props.deviceId,
-        authToken: props.authToken,
-        previewToken: props.previewToken,
-        debug: props.debug,
-        enableSRI: props.enableSRI,
-        containerRef,
-        onError: (error) => {
-          emit("error", error);
-        }
-      };
-      vueRuntime = createVueRuntime(options);
-      try {
-        await withTimeout(
-          (async () => {
-            await vueRuntime.init();
-            if (!mounted.value) return;
-            phase.value = "loading";
-            emit("phase-change", "loading");
-            contextValue.value = {
-              runtime: vueRuntime.runtime.value,
-              state: vueRuntime.runtime.value?.getState() || contextValue.value.state,
-              hostApi: vueRuntime.hostApi.value
-            };
-            const pageData = await vueRuntime.load();
-            if (!mounted.value) return;
-            emit("load", pageData);
-            contextValue.value = {
-              ...contextValue.value,
-              state: vueRuntime.runtime.value?.getState() || contextValue.value.state,
-              hostApi: vueRuntime.hostApi.value
-            };
-            await vueRuntime.render();
-            if (!mounted.value) return;
-            phase.value = "ready";
-            emit("phase-change", "ready");
-            emit("ready");
-            retryAttempt.value = 0;
-            vueRuntime.runtime.value?.onStateChange((state) => {
-              if (!mounted.value) return;
-              contextValue.value = {
-                ...contextValue.value,
-                state
-              };
-              phase.value = state.phase;
-              emit("phase-change", state.phase);
-            });
-          })(),
-          props.timeout
-        );
-      } catch (error) {
-        if (!mounted.value) return;
-        if (retryAttempt.value < props.retryCount) {
-          retryAttempt.value++;
-          if (props.debug) {
-            console.log(`[DJVRenderer] \u91CD\u8BD5 ${retryAttempt.value}/${props.retryCount}...`);
-          }
-          setTimeout(() => {
-            if (mounted.value) {
-              initWithRetry();
-            }
-          }, props.retryDelay);
-        } else {
-          phase.value = "error";
-          emit("phase-change", "error");
-          emit("error", error);
-        }
-      }
-    };
-    const handleRetry = () => {
-      retryAttempt.value = 0;
-      initWithRetry();
-    };
-    onMounted2(() => {
-      mounted.value = true;
-      initWithRetry();
-    });
-    onUnmounted2(() => {
-      mounted.value = false;
-      vueRuntime?.destroy();
-    });
-    watch2(
-      () => props.pageUid,
-      () => {
-        vueRuntime?.destroy();
-        retryAttempt.value = 0;
-        initWithRetry();
-      }
-    );
-    const renderDefaultLoading = () => {
-      return h("div", { class: "djvlc-loading" }, [
-        h("div", { class: "djvlc-loading-spinner" }),
-        h("span", {}, "\u52A0\u8F7D\u4E2D..."),
-        retryAttempt.value > 0 && h("span", { class: "djvlc-loading-retry" }, `\u91CD\u8BD5 ${retryAttempt.value}/${props.retryCount}`)
-      ]);
-    };
-    const renderDefaultError = (error) => {
-      return h("div", { class: "djvlc-error" }, [
-        h("div", { class: "djvlc-error-icon" }, "\u26A0\uFE0F"),
-        h("span", { class: "djvlc-error-message" }, `\u52A0\u8F7D\u5931\u8D25\uFF1A${error.message}`),
-        h(
-          "button",
-          {
-            class: "djvlc-error-retry-btn",
-            onClick: handleRetry,
-            type: "button"
-          },
-          "\u91CD\u8BD5"
-        )
-      ]);
-    };
-    const renderDefaultEmpty = () => {
-      return h("div", { class: "djvlc-empty" }, [h("span", {}, "\u6682\u65E0\u5185\u5BB9")]);
-    };
-    return () => {
-      const isLoading = vueRuntime?.loading.value ?? false;
-      const currentError = vueRuntime?.error.value;
-      const currentPage = vueRuntime?.page.value;
-      return h(
-        "div",
-        {
-          ref: containerRef,
-          class: "djvlc-renderer",
-          "data-phase": phase.value,
-          "data-page-uid": props.pageUid
-        },
-        [
-          // 加载中插槽
-          isLoading && (slots.loading?.() || renderDefaultLoading()),
-          // 错误插槽
-          currentError && (slots.error?.({ error: currentError, retry: handleRetry }) || renderDefaultError(currentError)),
-          // 空状态
-          !isLoading && !currentError && !currentPage && phase.value === "ready" && (slots.empty?.() || renderDefaultEmpty()),
-          // 默认插槽（额外内容）
-          slots.default?.()
-        ]
-      );
-    };
-  }
-});
-
-// src/components/DJVProvider.ts
-import {
-  defineComponent as defineComponent2,
-  shallowRef as shallowRef4,
-  watch as watch3,
-  onUnmounted as onUnmounted3,
-  h as h2
-} from "vue";
-var defaultState = {
-  phase: "idle",
-  page: null,
-  variables: {},
-  queries: {},
-  components: /* @__PURE__ */ new Map(),
-  error: null,
-  destroyed: false
-};
-var DJVProvider = defineComponent2({
-  name: "DJVProvider",
-  props: {
-    runtime: {
-      type: Object,
-      default: null
-    },
-    hostApi: {
-      type: Object,
-      default: null
-    },
-    class: {
-      type: String,
-      default: ""
-    },
-    debug: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ["state-change", "phase-change", "error"],
-  setup(props, { slots, emit }) {
-    let unsubscribe = null;
-    const contextValue = shallowRef4({
-      runtime: props.runtime,
-      state: props.runtime?.getState() || defaultState,
-      hostApi: props.hostApi
-    });
-    provideRuntime(contextValue);
-    const subscribeToRuntime = (runtime) => {
-      if (unsubscribe) {
-        unsubscribe();
-        unsubscribe = null;
-      }
-      if (!runtime) return;
-      unsubscribe = runtime.onStateChange((state) => {
-        const prevPhase = contextValue.value.state.phase;
-        contextValue.value = {
-          ...contextValue.value,
-          state
-        };
-        emit("state-change", state);
-        if (state.phase !== prevPhase) {
-          emit("phase-change", state.phase);
-          if (props.debug) {
-            console.log(`[DJVProvider] Phase changed: ${prevPhase} -> ${state.phase}`);
-          }
-        }
-        if (state.error) {
-          emit("error", state.error);
-        }
-      });
-    };
-    subscribeToRuntime(props.runtime);
-    watch3(
-      () => props.runtime,
-      (newRuntime, oldRuntime) => {
-        if (newRuntime !== oldRuntime) {
-          contextValue.value = {
-            runtime: newRuntime,
-            state: newRuntime?.getState() || defaultState,
-            hostApi: props.hostApi
-          };
-          subscribeToRuntime(newRuntime);
-        }
-      }
-    );
-    watch3(
-      () => props.hostApi,
-      (newHostApi) => {
-        contextValue.value = {
-          ...contextValue.value,
-          hostApi: newHostApi
-        };
-      }
-    );
-    onUnmounted3(() => {
-      if (unsubscribe) {
-        unsubscribe();
-        unsubscribe = null;
-      }
-    });
-    return () => h2(
-      "div",
-      {
-        class: ["djvlc-provider", props.class].filter(Boolean).join(" "),
-        "data-phase": contextValue.value.state.phase
-      },
-      slots.default?.()
-    );
-  }
-});
-
-// src/plugin.ts
-var DJVLC_CONFIG_KEY = "djvlc-config";
-function createTrackDirective() {
-  const observedElements = /* @__PURE__ */ new WeakSet();
-  return {
-    mounted(el, binding) {
-      const { event, data = {}, trigger = "click" } = binding.value;
-      if (trigger === "click") {
-        el.addEventListener("click", () => {
-          dispatchTrackEvent(event, { ...data, element: el.tagName });
-        });
-      } else if (trigger === "view") {
-        if (!observedElements.has(el)) {
-          observedElements.add(el);
-          const observer = new IntersectionObserver(
-            (entries) => {
-              entries.forEach((entry) => {
-                if (entry.isIntersecting) {
-                  dispatchTrackEvent(event, { ...data, element: el.tagName });
-                  observer.unobserve(el);
-                }
-              });
-            },
-            { threshold: 0.5 }
-          );
-          observer.observe(el);
-        }
-      } else if (trigger === "mounted") {
-        dispatchTrackEvent(event, { ...data, element: el.tagName });
-      }
-    }
-  };
-}
-function dispatchTrackEvent(event, data) {
-  window.dispatchEvent(
-    new CustomEvent("djvlc:track", {
-      detail: { event, data, timestamp: Date.now() }
-    })
-  );
-}
-function createVisibleDirective() {
-  return {
-    mounted(el, binding) {
-      updateVisibility(el, binding.value);
-    },
-    updated(el, binding) {
-      updateVisibility(el, binding.value);
-    }
-  };
-}
-function updateVisibility(el, visible) {
-  el.style.display = visible ? "" : "none";
-}
-function createLoadingDirective() {
-  const loadingOverlays = /* @__PURE__ */ new WeakMap();
-  return {
-    mounted(el, binding) {
-      el.style.position = "relative";
-      updateLoading(el, binding.value, loadingOverlays);
-    },
-    updated(el, binding) {
-      updateLoading(el, binding.value, loadingOverlays);
-    },
-    unmounted(el) {
-      const overlay = loadingOverlays.get(el);
-      if (overlay) {
-        overlay.remove();
-        loadingOverlays.delete(el);
-      }
-    }
-  };
-}
-function updateLoading(el, loading, overlays) {
-  let overlay = overlays.get(el);
-  if (loading) {
-    if (!overlay) {
-      overlay = document.createElement("div");
-      overlay.className = "djvlc-loading-overlay";
-      overlay.innerHTML = `
-        <div class="djvlc-loading-spinner"></div>
-      `;
-      overlay.style.cssText = `
-        position: absolute;
-        inset: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: rgba(255, 255, 255, 0.8);
-        z-index: 100;
-      `;
-      el.appendChild(overlay);
-      overlays.set(el, overlay);
-    }
-    overlay.style.display = "flex";
-  } else if (overlay) {
-    overlay.style.display = "none";
-  }
-}
-var DJVPlugin = {
-  install(app, options = {}) {
-    const prefix = options.componentPrefix || "";
-    if (options.registerComponents !== false) {
-      app.component(`${prefix}DJVRenderer`, DJVRenderer);
-      app.component(`${prefix}DJVProvider`, DJVProvider);
-    }
-    if (options.registerDirectives !== false) {
-      app.directive("djv-track", createTrackDirective());
-      app.directive("djv-visible", createVisibleDirective());
-      app.directive("djv-loading", createLoadingDirective());
-    }
-    const globalConfig = {
-      apiBaseUrl: options.apiBaseUrl,
-      cdnBaseUrl: options.cdnBaseUrl,
-      channel: options.channel,
-      debug: options.debug,
-      enableSRI: options.enableSRI,
-      enableMetrics: options.enableMetrics,
-      retryCount: options.retryCount,
-      retryDelay: options.retryDelay,
-      timeout: options.timeout
-    };
-    app.provide(DJVLC_CONFIG_KEY, globalConfig);
-    app.config.globalProperties.$djvlc = {
-      config: globalConfig,
-      track: dispatchTrackEvent
-    };
-  }
-};
-export {
-  DJVLC_CONFIG_KEY,
-  DJVPlugin,
-  DJVProvider,
-  DJVRenderer,
-  RuntimeContextKey,
-  createVueRuntime,
-  injectRuntime,
-  provideRuntime,
-  useAction,
-  useComponentState,
-  useDJVRuntime,
-  useData,
-  useDebouncedAction,
-  useGlobalConfig,
-  useHostApi,
-  useLifecycle,
-  usePageInfo,
-  useQuery,
-  useRuntimeEvent,
-  useRuntimeState,
-  useRuntimeStateWritable,
-  useWhen
-};
+import{defineComponent as e,ref as t,shallowRef as n,onMounted as r,onUnmounted as a,watch as o,h as i,provide as l,computed as s,readonly as c,inject as u}from"vue";import{createRuntime as d}from"@djvlc/runtime-core";function p(e){const r=n(null),a=t(!0),o=t("idle"),i=n(null),l=n(null),u=n(null),p=s(()=>"ready"===o.value),m=s(()=>"error"===o.value||null!==l.value),f=n({initTime:0,loadTime:0,renderTime:0,totalTime:0,initTimestamp:null,readyTimestamp:null});let y=0,h=0,v=0,w=0;const g=async()=>{if(!r.value)throw new Error("Runtime not initialized");v=performance.now();const t=await r.value.load();return i.value=t,u.value=r.value.getHostApi(),e.enableMetrics&&(f.value={...f.value,loadTime:performance.now()-v}),t},b=async()=>{if(!r.value)throw new Error("Runtime not initialized");if(w=performance.now(),await r.value.render(),a.value=!1,e.enableMetrics){const e=performance.now();f.value={...f.value,renderTime:e-w,totalTime:e-y,readyTimestamp:Date.now()}}};return{runtime:r,loading:c(a),phase:c(o),page:i,error:l,hostApi:u,isReady:p,hasError:m,metrics:f,init:async()=>{const t=e.containerRef?.value;if(!t)throw new Error("Container element not found");y=performance.now(),h=y,e.enableMetrics&&(f.value={...f.value,initTimestamp:Date.now()});const n=d({...e,container:t,onError:t=>{l.value=t,e.onError?.(t)},onEvent:t=>{e.onEvent?.(t)}});r.value=n,n.onStateChange(e=>{o.value=e.phase,a.value="ready"!==e.phase&&"error"!==e.phase,e.page&&(i.value=e.page),e.error&&(l.value=e.error)}),await n.init(),u.value=n.getHostApi(),e.enableMetrics&&(f.value={...f.value,initTime:performance.now()-h})},load:g,render:b,destroy:()=>{r.value?.destroy(),r.value=null,u.value=null,i.value=null,l.value=null,o.value="idle",a.value=!0},reload:async()=>{if(!r.value)throw new Error("Runtime not initialized");l.value=null,a.value=!0,await g(),await b()},setVariable:(e,t)=>{r.value?.setVariable(e,t)},setVariables:e=>{r.value&&Object.entries(e).forEach(([e,t])=>{r.value?.setVariable(e,t)})},getVariable:e=>r.value?.getState().variables[e],refreshData:async e=>{await(r.value?.refreshData(e))},executeAction:async(e,t)=>{const n=u.value;if(!n)throw new Error("HostAPI not available");const r=await n.executeAction(e,t||{});if(r.success)return r.data;throw new Error(r.errorMessage||"Action failed")}}}var m=Symbol("DJVRuntime");function f(e){l(m,e)}function y(){const e=u(m);if(!e)throw new Error("useDJVRuntime must be used within a DJVProvider");return e}function h(){const e=y(),t=s(()=>{const t=e.value.state.phase;return"ready"!==t&&"error"!==t}),n=s(()=>"ready"===e.value.state.phase),r=s(()=>"error"===e.value.state.phase||null!==e.value.state.error);return{runtime:s(()=>e.value.runtime),state:s(()=>e.value.state),loading:t,phase:s(()=>e.value.state.phase),error:s(()=>e.value.state.error),page:s(()=>e.value.state.page),isReady:n,hasError:r,reload:async()=>{const t=e.value.runtime;if(!t)throw new Error("Runtime not available");await t.load(),await t.render()}}}function v(){const e=y().value.hostApi;if(!e)throw new Error("HostAPI not available. Make sure runtime is initialized.");return e}function w(e){const t=y();return s(()=>t.value.state.variables[e])}function g(e,t){const n=y();return[s(()=>n.value.state.variables[e]??t),t=>{n.value.runtime?.setVariable(e,t)}]}function b(e,n){const o=y(),i=t(!1),l=t(null),c=t(null);let u=null;const d=s(()=>o.value.state.queries[e]),p=async()=>{i.value=!0,l.value=null;try{await(o.value.runtime?.refreshData(e)),c.value=Date.now()}catch(e){l.value=e}finally{i.value=!1}};return r(()=>{n?.refreshOnMount&&o.value.runtime&&p(),n?.refreshInterval&&n.refreshInterval>0&&(u=setInterval(p,n.refreshInterval)),n?.refreshOnFocus&&window.addEventListener("focus",p)}),a(()=>{u&&clearInterval(u),n?.refreshOnFocus&&window.removeEventListener("focus",p)}),{data:d,loading:i,error:l,refetch:p,lastUpdated:c}}function j(e,r){const a=y(),o=t(!1),i=n(),l=t(null),s=t(0),c=async(t,n)=>{const o=a.value.hostApi;if(!o)throw new Error("HostAPI not available");try{const n=await o.executeAction(e,t);if(n.success)return n.data;throw new Error(n.errorMessage||"Action failed")}catch(e){if(n>0)return await new Promise(e=>setTimeout(e,r?.retryDelay||1e3)),c(t,n-1);throw e}};return{execute:async e=>{o.value=!0,l.value=null,s.value++;try{const t=await c(e,r?.retryCount||0);return i.value=t,r?.onSuccess?.(t),t}catch(e){const t=e;throw l.value=t,r?.onError?.(t),e}finally{o.value=!1}},loading:o,result:i,error:l,reset:()=>{i.value=void 0,l.value=null,s.value=0},executionCount:s}}function T(e,i,l){const s=y(),c=n(),u=t(!1),d=t(null),p=t(!1);let m=null;const f=async t=>{const n=s.value.hostApi;if(!n)throw new Error("HostAPI not available");u.value=!0,d.value=null;try{const r=await n.requestData(e,t||(()=>{if(i)return"object"==typeof i&&"value"in i?i.value:i})());c.value=r,p.value=!0,l?.onSuccess?.(r)}catch(e){const t=e;d.value=t,l?.onError?.(t)}finally{u.value=!1}};return i&&"object"==typeof i&&"value"in i&&!1!==l?.refreshOnParamsChange&&o(i,()=>{p.value&&f()},{deep:!0}),r(()=>{!1!==l?.immediate&&s.value.hostApi&&f(),l?.refreshInterval&&l.refreshInterval>0&&(m=setInterval(f,l.refreshInterval))}),a(()=>{m&&clearInterval(m)}),{data:c,loading:u,error:d,refetch:f,isFetched:p}}function E(e,t){const n=y(),r=n.value.runtime?.on(e,e=>{t(e.data)});a(()=>{r?.()})}function I(){const e=y();return{pageUid:s(()=>e.value.state.page?.pageUid),pageVersionId:s(()=>e.value.state.page?.pageVersionId),schemaVersion:s(()=>e.value.state.page?.pageJson?.schemaVersion),title:s(()=>{const t=e.value.state.page;return t?.title}),config:s(()=>{const t=e.value.state.page;return t?.config}),isLoaded:s(()=>null!==e.value.state.page)}}function k(e){const t=y(),n=s(()=>t.value.state.components.get(e));return{isLoaded:s(()=>"loaded"===n.value?.status),isLoading:s(()=>"loading"===n.value?.status),hasError:s(()=>"failed"===n.value?.status),loadTime:s(()=>n.value?.loadTime),info:n}}function A(e){const n=y(),r=t(!1),a=t(!1);return o(()=>n.value.state.phase,async(t,o)=>{if(e?.onPhaseChange?.(t),!r.value&&"idle"!==t){r.value=!0;try{await(e?.onMounted?.())}catch(t){e?.onError?.(t)}}if(!a.value&&"ready"===t){a.value=!0;try{await(e?.onReady?.())}catch(t){e?.onError?.(t)}}"error"===t&&"error"!==o&&e?.onError?.(n.value.state.error)},{immediate:!0}),{phase:s(()=>n.value.state.phase),hasMounted:c(r),hasReady:c(a)}}function R(e,n,r){const i=t(!1),{once:l=!0,immediate:s=!0}=r||{},u=o(e,async e=>{!e||l&&i.value||(i.value=!0,await n(),l&&u())},{immediate:s});return a(()=>{u()}),{executed:c(i),stop:u}}function D(e,t=300){const{execute:n,loading:r,result:o,error:i}=j(e);let l=null;const s=()=>{l&&(clearTimeout(l),l=null)};return a(()=>{s()}),{execute:e=>{l&&clearTimeout(l),l=setTimeout(()=>{n(e).catch(()=>{})},t)},loading:r,result:o,error:i,cancel:s}}function S(){return u("djvlc-config",{})}var V=e({name:"DJVRenderer",props:{pageUid:{type:String,required:!0},apiBaseUrl:{type:String,required:!0},cdnBaseUrl:{type:String,required:!0},channel:{type:String,default:"prod"},userId:String,deviceId:String,authToken:String,previewToken:String,debug:{type:Boolean,default:!1},enableSRI:{type:Boolean,default:!0},retryCount:{type:Number,default:3},retryDelay:{type:Number,default:1e3},timeout:{type:Number,default:3e4}},emits:["load","error","ready","phase-change"],setup(e,{emit:l,slots:s}){const c=t(null),u=t(!0),d=t(0),m=t("idle"),y=n({runtime:null,state:{phase:"idle",page:null,variables:{},queries:{},components:new Map,error:null,destroyed:!1},hostApi:null});f(y);let h=null;const v=async()=>{if(!c.value||!u.value)return;const t={pageUid:e.pageUid,apiBaseUrl:e.apiBaseUrl,cdnBaseUrl:e.cdnBaseUrl,channel:e.channel,userId:e.userId,deviceId:e.deviceId,authToken:e.authToken,previewToken:e.previewToken,debug:e.debug,enableSRI:e.enableSRI,containerRef:c,onError:e=>{l("error",e)}};h=p(t);try{await(n=(async()=>{if(await h.init(),!u.value)return;m.value="loading",l("phase-change","loading"),y.value={runtime:h.runtime.value,state:h.runtime.value?.getState()||y.value.state,hostApi:h.hostApi.value};const e=await h.load();u.value&&(l("load",e),y.value={...y.value,state:h.runtime.value?.getState()||y.value.state,hostApi:h.hostApi.value},await h.render(),u.value&&(m.value="ready",l("phase-change","ready"),l("ready"),d.value=0,h.runtime.value?.onStateChange(e=>{u.value&&(y.value={...y.value,state:e},m.value=e.phase,l("phase-change",e.phase))})))})(),r=e.timeout,Promise.race([n,new Promise((e,t)=>setTimeout(()=>t(new Error("加载超时")),r))]))}catch(t){if(!u.value)return;d.value<e.retryCount?(d.value++,e.debug,setTimeout(()=>{u.value&&v()},e.retryDelay)):(m.value="error",l("phase-change","error"),l("error",t))}var n,r},w=()=>{d.value=0,v()};return r(()=>{u.value=!0,v()}),a(()=>{u.value=!1,h?.destroy()}),o(()=>e.pageUid,()=>{h?.destroy(),d.value=0,v()}),()=>{const t=h?.loading.value??!1,n=h?.error.value,r=h?.page.value;return i("div",{ref:c,class:"djvlc-renderer","data-phase":m.value,"data-page-uid":e.pageUid},[t&&(s.loading?.()||i("div",{class:"djvlc-loading"},[i("div",{class:"djvlc-loading-spinner"}),i("span",{},"加载中..."),d.value>0&&i("span",{class:"djvlc-loading-retry"},`重试 ${d.value}/${e.retryCount}`)])),n&&(s.error?.({error:n,retry:w})||(a=n,i("div",{class:"djvlc-error"},[i("div",{class:"djvlc-error-icon"},"⚠️"),i("span",{class:"djvlc-error-message"},`加载失败：${a.message}`),i("button",{class:"djvlc-error-retry-btn",onClick:w,type:"button"},"重试")]))),!t&&!n&&!r&&"ready"===m.value&&(s.empty?.()||i("div",{class:"djvlc-empty"},[i("span",{},"暂无内容")])),s.default?.()]);var a}}}),x={phase:"idle",page:null,variables:{},queries:{},components:new Map,error:null,destroyed:!1},B=e({name:"DJVProvider",props:{runtime:{type:Object,default:null},hostApi:{type:Object,default:null},class:{type:String,default:""},debug:{type:Boolean,default:!1}},emits:["state-change","phase-change","error"],setup(e,{slots:t,emit:r}){let l=null;const s=n({runtime:e.runtime,state:e.runtime?.getState()||x,hostApi:e.hostApi});f(s);const c=t=>{l&&(l(),l=null),t&&(l=t.onStateChange(t=>{const n=s.value.state.phase;s.value={...s.value,state:t},r("state-change",t),t.phase!==n&&(r("phase-change",t.phase),e.debug),t.error&&r("error",t.error)}))};return c(e.runtime),o(()=>e.runtime,(t,n)=>{t!==n&&(s.value={runtime:t,state:t?.getState()||x,hostApi:e.hostApi},c(t))}),o(()=>e.hostApi,e=>{s.value={...s.value,hostApi:e}}),a(()=>{l&&(l(),l=null)}),()=>i("div",{class:["djvlc-provider",e.class].filter(Boolean).join(" "),"data-phase":s.value.state.phase},t.default?.())}}),P="djvlc-config";function U(e,t){window.dispatchEvent(new CustomEvent("djvlc:track",{detail:{event:e,data:t,timestamp:Date.now()}}))}function J(e,t){e.style.display=t?"":"none"}function C(e,t,n){let r=n.get(e);t?(r||(r=document.createElement("div"),r.className="djvlc-loading-overlay",r.innerHTML='\n        <div class="djvlc-loading-spinner"></div>\n      ',r.style.cssText="\n        position: absolute;\n        inset: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: rgba(255, 255, 255, 0.8);\n        z-index: 100;\n      ",e.appendChild(r),n.set(e,r)),r.style.display="flex"):r&&(r.style.display="none")}var M={install(e,t={}){const n=t.componentPrefix||"";!1!==t.registerComponents&&(e.component(`${n}DJVRenderer`,V),e.component(`${n}DJVProvider`,B)),!1!==t.registerDirectives&&(e.directive("djv-track",function(){const e=new WeakSet;return{mounted(t,n){const{event:r,data:a={},trigger:o="click"}=n.value;if("click"===o)t.addEventListener("click",()=>{U(r,{...a,element:t.tagName})});else if("view"===o){if(!e.has(t)){e.add(t);const n=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting&&(U(r,{...a,element:t.tagName}),n.unobserve(t))})},{threshold:.5});n.observe(t)}}else"mounted"===o&&U(r,{...a,element:t.tagName})}}}()),e.directive("djv-visible",{mounted(e,t){J(e,t.value)},updated(e,t){J(e,t.value)}}),e.directive("djv-loading",function(){const e=new WeakMap;return{mounted(t,n){t.style.position="relative",C(t,n.value,e)},updated(t,n){C(t,n.value,e)},unmounted(t){const n=e.get(t);n&&(n.remove(),e.delete(t))}}}()));const r={apiBaseUrl:t.apiBaseUrl,cdnBaseUrl:t.cdnBaseUrl,channel:t.channel,debug:t.debug,enableSRI:t.enableSRI,enableMetrics:t.enableMetrics,retryCount:t.retryCount,retryDelay:t.retryDelay,timeout:t.timeout};e.provide(P,r),e.config.globalProperties.$djvlc={config:r,track:U}}};export{P as DJVLC_CONFIG_KEY,M as DJVPlugin,B as DJVProvider,V as DJVRenderer,m as RuntimeContextKey,p as createVueRuntime,y as injectRuntime,f as provideRuntime,j as useAction,k as useComponentState,h as useDJVRuntime,T as useData,D as useDebouncedAction,S as useGlobalConfig,v as useHostApi,A as useLifecycle,I as usePageInfo,b as useQuery,E as useRuntimeEvent,w as useRuntimeState,g as useRuntimeStateWritable,R as useWhen};