Merge pull request #40 from KNXCloud/feat-data-helper

feat(vue-simulator-renderer): 适配器支持设计器 dataHelper 参数

Author: keuby

packages/vue-simulator-renderer/src/interface.ts

@@ -1,5 +1,5 @@
 import { Router } from 'vue-router';
-import { Config } from '@knxcloud/lowcode-vue-renderer';
+import { Config, I18nMessages } from '@knxcloud/lowcode-vue-renderer';
 import { Component, ComponentPublicInstance, App } from 'vue';
 import { ComponentSchema, NpmInfo, RootSchema } from '@alilc/lowcode-types';
 import { BuiltinSimulatorRenderer, DocumentModel, Node } from '@alilc/lowcode-designer';
@@ -37,9 +37,11 @@ export interface DocumentInstance {
   readonly id: string;
   readonly key: string;
   readonly path: string;
+  readonly scope: Record<string, unknown>;
   readonly document: DocumentModel;
   readonly instancesMap: Map<string, ComponentInstance[]>;
   readonly schema: RootSchema;
+  readonly messages: I18nMessages;
   getComponentInstance(id: number): ComponentInstance | null;
   mountInstance(id: string, instance: ComponentInstance): (() => void) | void;
   unmountIntance(id: string, instance: ComponentInstance): void;

packages/vue-simulator-renderer/src/simulator-view.ts

@@ -53,18 +53,19 @@ export const Renderer = defineComponent({
   },
   render() {
     const { documentInstance, simulator } = this;
-    const { schema } = documentInstance;
+    const { schema, scope, messages } = documentInstance;
     const { designMode, device, locale, components } = simulator;
 
     if (!simulator.autoRender) return null;
 
     return h(LowCodeRenderer, {
+      scope: scope,
       schema: schema,
-      components: components,
       locale: locale,
-      messages: {},
-      designMode: designMode,
       device: device,
+      messages: messages,
+      components: components,
+      designMode: designMode,
       getNode: (id) => documentInstance.getNode(id),
       onCompGetCtx: (schema, ref) => documentInstance.mountInstance(schema.id!, ref),
     });

packages/vue-simulator-renderer/src/simulator.ts

@@ -12,7 +12,12 @@ import {
   onUnmounted,
 } from 'vue';
 import { config } from '@knxcloud/lowcode-vue-renderer';
-import { AssetLoader, buildComponents, getSubComponent } from '@knxcloud/lowcode-utils';
+import {
+  AssetLoader,
+  buildUtils,
+  buildComponents,
+  getSubComponent,
+} from '@knxcloud/lowcode-utils';
 import {
   ComponentInstance,
   DocumentInstance,
@@ -25,6 +30,7 @@ import { Slot, Leaf, Page } from './buildin-components';
 import { host } from './host';
 import {
   cursor,
+  deepMerge,
   findDOMNodes,
   getClientRects,
   getCompRootData,
@@ -41,14 +47,28 @@ const loader = new AssetLoader();
 
 const builtinComponents = { Slot, Leaf, Page };
 
-function createDocumentInstance(document: DocumentModel): DocumentInstance {
+export interface ProjectContext {
+  i18n: Record<string, object>;
+  appHelper: {
+    utils?: Record<string, unknown>;
+    constants?: Record<string, unknown>;
+    [x: string]: unknown;
+  };
+}
+
+function createDocumentInstance(
+  document: DocumentModel,
+  context: ProjectContext
+): DocumentInstance {
   /** 记录单个节点的组件实例列表 */
   const instancesMap = new Map<string, ComponentInstance[]>();
   /** 记录 vue 组件实例和组件 uid 的映射关系 */
   const vueInstanceMap = new Map<number, ComponentInstance>();
 
   const timestamp = ref(Date.now());
 
+  const schema = computed(() => document.export(TransformStage.Render));
+
   const checkInstanceMounted = (instance: ComponentInstance): boolean => {
     return instance.$.isMounted;
   };
@@ -141,8 +161,30 @@ function createDocumentInstance(document: DocumentModel): DocumentInstance {
       return fileName.startsWith('/') ? fileName : `/${fileName}`;
     }),
     key: computed(() => `${document.id}:${timestamp.value}`),
-    schema: computed(() => document.export(TransformStage.Render)),
+    scope: computed(() => {
+      const _schema = schema.value;
+
+      const {
+        utils: utilsInContext,
+        constants: constantsInContext,
+        ...otherHelpers
+      } = context.appHelper;
+
+      return {
+        utils: {
+          ...utilsInContext,
+          ...buildUtils(host.libraryMap, Reflect.get(_schema, 'utils') ?? []),
+        },
+        constants: {
+          ...constantsInContext,
+          ...Reflect.get(_schema, 'constants'),
+        },
+        ...otherHelpers,
+      };
+    }),
+    schema: schema,
     document: computed(() => document),
+    messages: computed(() => deepMerge(context.i18n, Reflect.get(schema.value, 'i18n'))),
     instancesMap: computed(() => instancesMap),
     getNode,
     mountInstance,
@@ -164,6 +206,14 @@ function createSimulatorRenderer() {
   const requestHandlersMap: Ref<Record<string, CallableFunction>> = shallowRef({});
   const documentInstances: Ref<DocumentInstance[]> = shallowRef([]);
 
+  const context: ProjectContext = reactive({
+    i18n: {},
+    appHelper: {
+      utils: {},
+      constants: {},
+    },
+  });
+
   const disposeFunctions: Array<() => void> = [];
 
   const documentInstanceMap = new Map<string, DocumentInstance>();
@@ -305,7 +355,7 @@ function createSimulatorRenderer() {
       documentInstances.value = host.project.documents.map((doc) => {
         let documentInstance = documentInstanceMap.get(doc.id);
         if (!documentInstance) {
-          documentInstance = createDocumentInstance(doc);
+          documentInstance = createDocumentInstance(doc, context);
           documentInstanceMap.set(doc.id, documentInstance);
           router.addRoute({
             name: documentInstance.id,
@@ -342,8 +392,16 @@ function createSimulatorRenderer() {
     }
   });
 
-  host.injectionConsumer.consume(() => {
-    // TODO: handle designer injection
+  host.injectionConsumer.consume((data) => {
+    if (context.appHelper) {
+      const { utils, constants, ...others } = data.appHelper;
+      Object.assign(context.appHelper, {
+        utils: Array.isArray(utils) ? buildUtils(host.libraryMap, utils) : utils ?? {},
+        constants: constants ?? {},
+        ...others,
+      });
+    }
+    context.i18n = data.i18n ?? {};
   });
 
   return simulator;

packages/vue-simulator-renderer/src/utils/deep-merge.ts

@@ -0,0 +1,12 @@
+import { isObject } from '@knxcloud/lowcode-utils';
+
+export function deepMerge<TL, TR>(o1: TL, o2: TR): TL & TR {
+  if (isObject(o1) && isObject(o2)) {
+    const result = Object.assign({}, o1);
+    Object.keys(o2).forEach((key) => {
+      Reflect.set(result, key, deepMerge(o1[key], o2[key]));
+    });
+    return result as TL & TR;
+  }
+  return (o2 ?? o1) as TL & TR;
+}

packages/vue-simulator-renderer/src/utils/index.ts

@@ -7,3 +7,4 @@ export * from './find-dom-nodes';
 export * from './logger';
 export * from './cursor';
 export * from './navtive-selection';
+export * from './deep-merge';