@djvlc/runtime-host-vue 1.0.0

package/dist/index.cjs

@@ -0,0 +1,489 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DJVPlugin: () => DJVPlugin,
+  DJVProvider: () => DJVProvider,
+  DJVRenderer: () => DJVRenderer,
+  RuntimeContextKey: () => RuntimeContextKey,
+  createVueRuntime: () => createVueRuntime,
+  injectRuntime: () => injectRuntime,
+  provideRuntime: () => provideRuntime,
+  useAction: () => useAction,
+  useDJVRuntime: () => useDJVRuntime,
+  useData: () => useData,
+  useHostApi: () => useHostApi,
+  useQuery: () => useQuery,
+  useRuntimeEvent: () => useRuntimeEvent,
+  useRuntimeState: () => useRuntimeState,
+  useRuntimeStateWritable: () => useRuntimeStateWritable
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/vue-runtime.ts
+var import_vue = require("vue");
+var import_runtime_core = require("@djvlc/runtime-core");
+function createVueRuntime(options) {
+  const runtime = (0, import_vue.shallowRef)(null);
+  const loading = (0, import_vue.ref)(true);
+  const phase = (0, import_vue.ref)("idle");
+  const page = (0, import_vue.shallowRef)(null);
+  const error = (0, import_vue.shallowRef)(null);
+  const hostApi = (0, import_vue.shallowRef)(null);
+  const init = async () => {
+    const container = options.containerRef?.value;
+    if (!container) {
+      throw new Error("Container element not found");
+    }
+    const runtimeInstance = (0, import_runtime_core.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();
+  };
+  const load = async () => {
+    if (!runtime.value) {
+      throw new Error("Runtime not initialized");
+    }
+    const result = await runtime.value.load();
+    page.value = result;
+    hostApi.value = runtime.value.getHostApi();
+    return result;
+  };
+  const render = async () => {
+    if (!runtime.value) {
+      throw new Error("Runtime not initialized");
+    }
+    await runtime.value.render();
+    loading.value = false;
+  };
+  const destroy = () => {
+    runtime.value?.destroy();
+    runtime.value = null;
+    hostApi.value = null;
+    page.value = null;
+    error.value = null;
+    phase.value = "idle";
+    loading.value = true;
+  };
+  const setVariable = (key, value) => {
+    runtime.value?.setVariable(key, value);
+  };
+  const refreshData = async (queryId) => {
+    await runtime.value?.refreshData(queryId);
+  };
+  return {
+    runtime,
+    loading: (0, import_vue.readonly)(loading),
+    phase: (0, import_vue.readonly)(phase),
+    page,
+    error,
+    hostApi,
+    init,
+    load,
+    render,
+    destroy,
+    setVariable,
+    refreshData
+  };
+}
+
+// src/components/DJVRenderer.ts
+var import_vue3 = require("vue");
+
+// src/composables/useRuntime.ts
+var import_vue2 = require("vue");
+var RuntimeContextKey = /* @__PURE__ */ Symbol("DJVRuntime");
+function provideRuntime(value) {
+  (0, import_vue2.provide)(RuntimeContextKey, value);
+}
+function injectRuntime() {
+  const context = (0, import_vue2.inject)(RuntimeContextKey);
+  if (!context) {
+    throw new Error("useDJVRuntime must be used within a DJVProvider");
+  }
+  return context;
+}
+function useDJVRuntime() {
+  const context = injectRuntime();
+  return {
+    runtime: (0, import_vue2.computed)(() => context.value.runtime),
+    state: (0, import_vue2.computed)(() => context.value.state),
+    loading: (0, import_vue2.computed)(() => {
+      const phase = context.value.state.phase;
+      return phase !== "ready" && phase !== "error";
+    }),
+    phase: (0, import_vue2.computed)(() => context.value.state.phase),
+    error: (0, import_vue2.computed)(() => context.value.state.error),
+    page: (0, import_vue2.computed)(() => context.value.state.page)
+  };
+}
+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 (0, import_vue2.computed)(() => {
+    return context.value.state.variables[key];
+  });
+}
+function useRuntimeStateWritable(key, defaultValue) {
+  const context = injectRuntime();
+  const value = (0, import_vue2.computed)(() => {
+    return context.value.state.variables[key] ?? defaultValue;
+  });
+  const setValue = (newValue) => {
+    context.value.runtime?.setVariable(key, newValue);
+  };
+  return [value, setValue];
+}
+function useQuery(queryId) {
+  const context = injectRuntime();
+  const loading = (0, import_vue2.ref)(false);
+  const error = (0, import_vue2.ref)(null);
+  const data = (0, import_vue2.computed)(() => {
+    return context.value.state.queries[queryId];
+  });
+  const refetch = async () => {
+    loading.value = true;
+    error.value = null;
+    try {
+      await context.value.runtime?.refreshData(queryId);
+    } catch (e) {
+      error.value = e;
+    } finally {
+      loading.value = false;
+    }
+  };
+  return {
+    data,
+    loading,
+    error,
+    refetch
+  };
+}
+function useAction(actionType) {
+  const context = injectRuntime();
+  const loading = (0, import_vue2.ref)(false);
+  const result = (0, import_vue2.ref)();
+  const error = (0, import_vue2.ref)(null);
+  const execute = async (params) => {
+    const hostApi = context.value.hostApi;
+    if (!hostApi) {
+      throw new Error("HostAPI not available");
+    }
+    loading.value = true;
+    error.value = null;
+    try {
+      const response = await hostApi.executeAction(actionType, params);
+      if (response.success) {
+        result.value = response.data;
+        return response.data;
+      } else {
+        throw new Error(response.message || "Action failed");
+      }
+    } catch (e) {
+      error.value = e;
+      throw e;
+    } finally {
+      loading.value = false;
+    }
+  };
+  return {
+    execute,
+    loading,
+    result,
+    error
+  };
+}
+function useData(queryId, params, options) {
+  const context = injectRuntime();
+  const data = (0, import_vue2.ref)();
+  const loading = (0, import_vue2.ref)(false);
+  const error = (0, import_vue2.ref)(null);
+  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 response = await hostApi.requestData(
+        queryId,
+        newParams || params
+      );
+      if (response.success) {
+        data.value = response.data;
+      } else {
+        throw new Error(response.message || "Query failed");
+      }
+    } catch (e) {
+      error.value = e;
+    } finally {
+      loading.value = false;
+    }
+  };
+  if (options?.immediate !== false) {
+    refetch();
+  }
+  return {
+    data,
+    loading,
+    error,
+    refetch
+  };
+}
+function useRuntimeEvent(eventType, handler) {
+  const context = injectRuntime();
+  const unsubscribe = context.value.runtime?.on(eventType, (event) => {
+    handler(event.data);
+  });
+  (0, import_vue2.onUnmounted)(() => {
+    unsubscribe?.();
+  });
+}
+
+// src/components/DJVRenderer.ts
+var DJVRenderer = (0, import_vue3.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
+    }
+  },
+  emits: ["load", "error", "ready"],
+  setup(props, { emit, slots }) {
+    const containerRef = (0, import_vue3.ref)(null);
+    const contextValue = (0, import_vue3.shallowRef)({
+      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 initAndLoad = async () => {
+      if (!containerRef.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 vueRuntime.init();
+        contextValue.value = {
+          runtime: vueRuntime.runtime.value,
+          state: vueRuntime.runtime.value?.getState() || contextValue.value.state,
+          hostApi: vueRuntime.hostApi.value
+        };
+        const page = await vueRuntime.load();
+        emit("load", page);
+        contextValue.value = {
+          ...contextValue.value,
+          state: vueRuntime.runtime.value?.getState() || contextValue.value.state,
+          hostApi: vueRuntime.hostApi.value
+        };
+        await vueRuntime.render();
+        emit("ready");
+        vueRuntime.runtime.value?.onStateChange((state) => {
+          contextValue.value = {
+            ...contextValue.value,
+            state
+          };
+        });
+      } catch (error) {
+        emit("error", error);
+      }
+    };
+    (0, import_vue3.onMounted)(() => {
+      initAndLoad();
+    });
+    (0, import_vue3.onUnmounted)(() => {
+      vueRuntime?.destroy();
+    });
+    (0, import_vue3.watch)(
+      () => props.pageUid,
+      () => {
+        vueRuntime?.destroy();
+        initAndLoad();
+      }
+    );
+    return () => {
+      return (0, import_vue3.h)(
+        "div",
+        {
+          ref: containerRef,
+          class: "djvlc-renderer"
+        },
+        [
+          // 加载中插槽
+          vueRuntime?.loading.value && slots.loading?.(),
+          // 错误插槽
+          vueRuntime?.error.value && slots.error?.({ error: vueRuntime.error.value }),
+          // 默认插槽（额外内容）
+          slots.default?.()
+        ]
+      );
+    };
+  }
+});
+
+// src/components/DJVProvider.ts
+var import_vue4 = require("vue");
+var DJVProvider = (0, import_vue4.defineComponent)({
+  name: "DJVProvider",
+  props: {
+    runtime: {
+      type: Object,
+      default: null
+    },
+    hostApi: {
+      type: Object,
+      default: null
+    }
+  },
+  setup(props, { slots }) {
+    const contextValue = (0, import_vue4.shallowRef)({
+      runtime: props.runtime,
+      state: props.runtime?.getState() || {
+        phase: "idle",
+        page: null,
+        variables: {},
+        queries: {},
+        components: /* @__PURE__ */ new Map(),
+        error: null,
+        destroyed: false
+      },
+      hostApi: props.hostApi
+    });
+    provideRuntime(contextValue);
+    if (props.runtime) {
+      props.runtime.onStateChange((state) => {
+        contextValue.value = {
+          ...contextValue.value,
+          state
+        };
+      });
+    }
+    return () => (0, import_vue4.h)("div", { class: "djvlc-provider" }, slots.default?.());
+  }
+});
+
+// src/plugin.ts
+var DJVPlugin = {
+  install(app, options = {}) {
+    if (options.registerComponents !== false) {
+      app.component("DJVRenderer", DJVRenderer);
+      app.component("DJVProvider", DJVProvider);
+    }
+    app.provide("djvlc-config", {
+      apiBaseUrl: options.defaultApiBaseUrl,
+      cdnBaseUrl: options.defaultCdnBaseUrl
+    });
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DJVPlugin,
+  DJVProvider,
+  DJVRenderer,
+  RuntimeContextKey,
+  createVueRuntime,
+  injectRuntime,
+  provideRuntime,
+  useAction,
+  useDJVRuntime,
+  useData,
+  useHostApi,
+  useQuery,
+  useRuntimeEvent,
+  useRuntimeState,
+  useRuntimeStateWritable
+});