@djvlc/runtime-host-vue 1.0.0

package/dist/index.js

@@ -0,0 +1,458 @@
+// src/vue-runtime.ts
+import { ref, shallowRef, readonly } 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 init = async () => {
+    const container = options.containerRef?.value;
+    if (!container) {
+      throw new Error("Container element not found");
+    }
+    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();
+  };
+  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: readonly(loading),
+    phase: readonly(phase),
+    page,
+    error,
+    hostApi,
+    init,
+    load,
+    render,
+    destroy,
+    setVariable,
+    refreshData
+  };
+}
+
+// src/components/DJVRenderer.ts
+import {
+  defineComponent,
+  ref as ref3,
+  shallowRef as shallowRef2,
+  onMounted,
+  onUnmounted as onUnmounted2,
+  watch,
+  h
+} from "vue";
+
+// src/composables/useRuntime.ts
+import { inject, provide, ref as ref2, computed, 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();
+  return {
+    runtime: computed(() => context.value.runtime),
+    state: computed(() => context.value.state),
+    loading: computed(() => {
+      const phase = context.value.state.phase;
+      return phase !== "ready" && phase !== "error";
+    }),
+    phase: computed(() => context.value.state.phase),
+    error: computed(() => context.value.state.error),
+    page: 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 computed(() => {
+    return context.value.state.variables[key];
+  });
+}
+function useRuntimeStateWritable(key, defaultValue) {
+  const context = injectRuntime();
+  const value = 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 = ref2(false);
+  const error = ref2(null);
+  const data = 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 = ref2(false);
+  const result = ref2();
+  const error = ref2(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 = ref2();
+  const loading = ref2(false);
+  const error = ref2(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);
+  });
+  onUnmounted(() => {
+    unsubscribe?.();
+  });
+}
+
+// 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
+    }
+  },
+  emits: ["load", "error", "ready"],
+  setup(props, { emit, slots }) {
+    const containerRef = ref3(null);
+    const contextValue = shallowRef2({
+      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);
+      }
+    };
+    onMounted(() => {
+      initAndLoad();
+    });
+    onUnmounted2(() => {
+      vueRuntime?.destroy();
+    });
+    watch(
+      () => props.pageUid,
+      () => {
+        vueRuntime?.destroy();
+        initAndLoad();
+      }
+    );
+    return () => {
+      return 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
+import { defineComponent as defineComponent2, shallowRef as shallowRef3, h as h2 } from "vue";
+var DJVProvider = defineComponent2({
+  name: "DJVProvider",
+  props: {
+    runtime: {
+      type: Object,
+      default: null
+    },
+    hostApi: {
+      type: Object,
+      default: null
+    }
+  },
+  setup(props, { slots }) {
+    const contextValue = shallowRef3({
+      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 () => h2("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
+    });
+  }
+};
+export {
+  DJVPlugin,
+  DJVProvider,
+  DJVRenderer,
+  RuntimeContextKey,
+  createVueRuntime,
+  injectRuntime,
+  provideRuntime,
+  useAction,
+  useDJVRuntime,
+  useData,
+  useHostApi,
+  useQuery,
+  useRuntimeEvent,
+  useRuntimeState,
+  useRuntimeStateWritable
+};

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@djvlc/runtime-host-vue",
+  "version": "1.0.0",
+  "description": "DJV 低代码平台 Vue3 宿主适配器",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --clean --external vue",
+    "dev": "tsup src/index.ts --format esm,cjs --dts --watch --external vue",
+    "test": "vitest run --passWithNoTests",
+    "test:watch": "vitest",
+    "lint": "eslint src --ext .ts,.vue",
+    "typecheck": "vue-tsc --noEmit",
+    "clean": "rimraf dist"
+  },
+  "dependencies": {
+    "@djvlc/runtime-core": "1.0.0",
+    "@djvlc/contracts-types": "^1.4.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.10.0",
+    "eslint": "^8.55.0",
+    "rimraf": "^5.0.5",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0",
+    "vitest": "^1.0.0",
+    "vue-tsc": "^2.0.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "keywords": [
+    "lowcode",
+    "runtime",
+    "vue",
+    "vue3",
+    "djv"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT"
+}