feat: 支持设计器里的 utils 注入机制 (vu-xxx & 简单类型的 umd)

packages/designer/src/builtin-simulator/host.ts

@@ -14,6 +14,7 @@ import {
   isElement,
   isFormEvent,
   hasOwnProperty,
+  UtilsMetadata,
 } from '@ali/lowcode-utils';
 import {
   DragObjectType,
@@ -65,6 +66,7 @@ export interface BuiltinSimulatorProps {
   requestHandlersMap?: any;
   extraEnvironment?: Asset;
   library?: LibraryItem[];
+  utilsMetadata?: UtilsMetadata;
   simulatorUrl?: Asset;
   theme?: Asset;
   componentsAsset?: Asset;

packages/plugin-designer/src/index.tsx

@@ -60,10 +60,11 @@ export default class DesignerPlugin extends PureComponent<PluginProps, DesignerP
       if (!this._mounted) {
         return;
       }
-      const { components, packages, extraEnvironment } = assets;
+      const { components, packages, extraEnvironment, utils } = assets;
       const state = {
         componentMetadatas: components || [],
         library: packages || [],
+        utilsMetadata: utils || [],
         extraEnvironment,
         renderEnv,
         device,
@@ -96,6 +97,7 @@ export default class DesignerPlugin extends PureComponent<PluginProps, DesignerP
     const { editor } = this.props;
     const {
       componentMetadatas,
+      utilsMetadata,
       library,
       extraEnvironment,
       renderEnv,
@@ -121,6 +123,7 @@ export default class DesignerPlugin extends PureComponent<PluginProps, DesignerP
         componentMetadatas={componentMetadatas}
         simulatorProps={{
           library,
+          utilsMetadata,
           extraEnvironment,
           renderEnv,
           device,

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

@@ -15,7 +15,7 @@ import {
   compatibleLegaoSchema,
   isPlainObject,
   AssetLoader,
-
+  getProjectUtils,
 } from '@ali/lowcode-utils';
 
 import { RootSchema, ComponentSchema, TransformStage, NodeSchema } from '@ali/lowcode-types';
@@ -201,9 +201,6 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
       if (this._libraryMap !== host.libraryMap || this._componentsMap !== host.designer.componentsMap) {
         this._libraryMap = host.libraryMap || {};
         this._componentsMap = host.designer.componentsMap;
-        // 需要注意的是，autorun 依赖收集的是同步执行的代码，所以 await / promise / callback 里的变量不会被收集依赖
-        // 此例中，host.designer.componentsMap 是需要被收集依赖的，否则无法响应式
-        // await host.waitForCurrentDocument();
         this.buildComponents();
       }
 
@@ -276,6 +273,7 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
           currentLocale: this.locale,
           messages: {},
         },
+        ...getProjectUtils(this._libraryMap, host.get('utilsMetadata')),
       },
       constants: {},
       requestHandlersMap: this._requestHandlersMap,

packages/react-simulator-renderer/src/utils/misc.ts

@@ -0,0 +1,26 @@
+interface UtilsMetadata {
+  name: string;
+  npm: {
+    package: string;
+    version?: string;
+    exportName: string;
+    subName?: string;
+    destructuring?: boolean;
+    main?: string;
+  }
+}
+
+interface LibrayMap {
+  [key: string]: string;
+}
+
+export function getProjectUtils(librayMap: LibrayMap, utilsMetadata: UtilsMetadata[]) {
+  const projectUtils: { [packageName: string]: any } = {};
+  if (utilsMetadata) {
+    utilsMetadata.forEach(meta => {
+      if (librayMap[meta?.npm.package]) {
+        const lib = window[librayMap[meta?.npm.package]];
+      }
+    });
+  }
+}

packages/utils/src/build-components.ts

@@ -101,3 +101,39 @@ export function buildComponents(libraryMap: LibraryMap,
   });
   return components;
 }
+
+export interface UtilsMetadata {
+  name: string;
+  npm: {
+    package: string;
+    version?: string;
+    exportName: string;
+    subName?: string;
+    destructuring?: boolean;
+    main?: string;
+  }
+}
+
+interface LibrayMap {
+  [key: string]: string;
+}
+
+export function getProjectUtils(librayMap: LibrayMap, utilsMetadata: UtilsMetadata[]) {
+  const projectUtils: { [packageName: string]: any } = {};
+  if (utilsMetadata) {
+    utilsMetadata.forEach(meta => {
+      if (librayMap[meta?.npm?.package]) {
+        const lib = accessLibrary(librayMap[meta?.npm.package]);
+        if (lib.destructuring) {
+          Object.keys(lib).forEach(name => {
+            if (name === 'destructuring') return;
+            projectUtils[name] = lib[name];
+          });
+        } else {
+          projectUtils[meta?.npm?.exportName] = lib;
+        }
+      }
+    });
+  }
+  return projectUtils;
+}