feat: 支持引擎 init 时传入参数, 逐渐取代 editor 参数的功能

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

@@ -357,7 +357,6 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
       await renderer.loadAsyncLibrary(this.asyncLibraryMap);
     }
 
-
     // step 5 ready & render
     renderer.run();
 

packages/designer/src/document/node/props/prop.ts

@@ -1,4 +1,4 @@
-import { untracked, computed, obx } from '@ali/lowcode-editor-core';
+import { untracked, computed, obx, engineConfig } from '@ali/lowcode-editor-core';
 import { CompositeValue, isJSExpression, isJSSlot, JSSlot, SlotSchema } from '@ali/lowcode-types';
 import { uniqueId, isPlainObject, hasOwnProperty } from '@ali/lowcode-utils';
 import { PropStash } from './prop-stash';
@@ -99,10 +99,12 @@ export class Prop implements IPropParent {
 
   export(stage: TransformStage = TransformStage.Save): CompositeValue | UNSET {
     const type = this._type;
-
-    // 在设计器里，所有组件都需要展示
     if (stage === TransformStage.Render && this.key === '___condition___') {
-      return true;
+      // 在设计器里，所有组件默认需要展示，除非开启了 enableCondition 配置
+      if (engineConfig.get('enableCondition') !== true) {
+        return true;
+      }
+      return this._value;
     }
 
     if (type === 'unset') {

packages/editor-core/src/config.ts

@@ -0,0 +1,106 @@
+export class EngineConfig {
+  private config: { [key: string]: any } = {};
+
+  private waits = new Map<
+  string,
+  Array<{
+    once?: boolean;
+    resolve:(data: any) => void;
+  }>
+  >();
+
+  constructor(config?: { [key: string]: any }) {
+    this.config = config || {};
+  }
+
+  has(key: string): boolean {
+    return this.config[key] !== undefined;
+  }
+
+  get(key: string): any {
+    return this.config[key];
+  }
+
+  set(key: string, value: any) {
+    this.config[key] = value;
+    this.notifyGot(key);
+  }
+
+  setConfig(config: { [key: string]: any }) {
+    if (config) {
+      Object.keys(config).forEach((key) => {
+        this.set(key, config[key]);
+      });
+    }
+  }
+
+  onceGot(key: string): Promise<any> {
+    const val = this.config[key];
+    if (val !== undefined) {
+      return Promise.resolve(val);
+    }
+    return new Promise((resolve) => {
+      this.setWait(key, resolve, true);
+    });
+  }
+
+  onGot(key: string, fn: (data: any) => void): () => void {
+    const val = this.config?.[key];
+    if (val !== undefined) {
+      fn(val);
+      return () => {};
+    } else {
+      this.setWait(key, fn);
+      return () => {
+        this.delWait(key, fn);
+      };
+    }
+  }
+
+  private notifyGot(key: string) {
+    let waits = this.waits.get(key);
+    if (!waits) {
+      return;
+    }
+    waits = waits.slice().reverse();
+    let i = waits.length;
+    while (i--) {
+      waits[i].resolve(this.get(key));
+      if (waits[i].once) {
+        waits.splice(i, 1);
+      }
+    }
+    if (waits.length > 0) {
+      this.waits.set(key, waits);
+    } else {
+      this.waits.delete(key);
+    }
+  }
+
+  private setWait(key: string, resolve: (data: any) => void, once?: boolean) {
+    const waits = this.waits.get(key);
+    if (waits) {
+      waits.push({ resolve, once });
+    } else {
+      this.waits.set(key, [{ resolve, once }]);
+    }
+  }
+
+  private delWait(key: string, fn: any) {
+    const waits = this.waits.get(key);
+    if (!waits) {
+      return;
+    }
+    let i = waits.length;
+    while (i--) {
+      if (waits[i].resolve === fn) {
+        waits.splice(i, 1);
+      }
+    }
+    if (waits.length < 1) {
+      this.waits.delete(key);
+    }
+  }
+}
+
+export const engineConfig = new EngineConfig();

packages/editor-core/src/index.ts

@@ -4,3 +4,4 @@ export * from './utils';
 export * from './di';
 export * from './hotkey';
 export * from './widgets';
+export * from './config';

packages/engine/src/engine-core.ts

@@ -1,6 +1,6 @@
 import { createElement } from 'react';
 import { render } from 'react-dom';
-import { globalContext, Editor } from '@ali/lowcode-editor-core';
+import { globalContext, Editor, engineConfig } from '@ali/lowcode-editor-core';
 import * as editorCabin from '@ali/lowcode-editor-core';
 import {
   Designer,
@@ -14,6 +14,7 @@ import * as skeletonCabin from '@ali/lowcode-editor-skeleton';
 import Outline, { OutlineBackupPane, getTreeMaster } from '@ali/lowcode-plugin-outline-pane';
 import DesignerPlugin from '@ali/lowcode-plugin-designer';
 import './modules/live-editing';
+import { isPlainObject } from '@ali/lowcode-utils';
 
 export * from './modules/editor-types';
 export * from './modules/skeleton-types';
@@ -67,6 +68,7 @@ export {
   // store,
   hotkey,
   monitor,
+  engineConfig,
 };
 
 const getSelection = () => designer.currentDocument?.selection;
@@ -95,6 +97,7 @@ const getSelection = () => designer.currentDocument?.selection;
   hotkey,
   monitor,
   init,
+  engineConfig,
 };
 
 // 注册默认的 setters
@@ -154,15 +157,55 @@ plugins.register((ctx: ILowCodePluginContext) => {
   };
 });
 
-export async function init(container?: Element) {
-  let engineContainer = container;
-  if (!engineContainer) {
+interface EngineOptions {
+  /**
+   * 是否开启 condition 的能力，默认在设计器中不管 condition 是啥都正常展示
+   */
+  enableCondition?: boolean;
+  /**
+   * 设计模式，live 模式将会实时展示变量值
+   */
+  designMode?: 'design' | 'live';
+  /**
+   * 设备类型
+   */
+  device?: 'default' | 'mobile' | string;
+  /**
+   * 语言
+   */
+  locale?: string;
+  /**
+   * 渲染器类型
+   */
+  renderEnv?: 'react' | 'rax' | string;
+  /**
+   * 设备类型映射器，处理设计器与渲染器中 device 的映射
+   */
+  deviceMapper?: {
+    transform: (originalDevice: string) => string;
+  };
+  [key: string]: any;
+}
+
+export async function init(container?: Element, options?: EngineOptions) {
+  let engineOptions = null;
+  let engineContainer = null;
+  if (isPlainObject(container)) {
+    engineOptions = container;
     engineContainer = document.createElement('div');
     document.body.appendChild(engineContainer);
+  } else {
+    engineOptions = options;
+    engineContainer = container;
+    if (!container) {
+      engineContainer = document.createElement('div');
+      document.body.appendChild(engineContainer);
+    }
   }
   engineContainer.id = 'engine';
 
   await plugins.init();
+  engineConfig.setConfig(engineOptions as any);
   render(
     createElement(Workbench, {
       skeleton,

packages/plugin-designer/src/index.tsx

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { Editor } from '@ali/lowcode-editor-core';
+import { Editor, engineConfig } from '@ali/lowcode-editor-core';
 import { DesignerView, Designer } from '@ali/lowcode-designer';
 import { Asset } from '@ali/lowcode-utils';
 import './index.scss';
@@ -49,14 +49,14 @@ export default class DesignerPlugin extends PureComponent<PluginProps, DesignerP
     const { editor } = this.props;
     try {
       const assets = await editor.onceGot('assets');
-      const renderEnv = await editor.get('renderEnv');
-      const device = await editor.get('device');
-      const locale = await editor.get('locale');
-      const designMode = await editor.get('designMode');
-      const deviceClassName = await editor.get('deviceClassName');
-      const simulatorUrl = await editor.get('simulatorUrl');
+      const renderEnv = engineConfig.get('renderEnv') || editor.get('renderEnv');
+      const device = engineConfig.get('device') || editor.get('device');
+      const locale = engineConfig.get('locale') || editor.get('locale');
+      const designMode = engineConfig.get('designMode') || editor.get('designMode');
+      const deviceClassName = engineConfig.get('deviceClassName') || editor.get('deviceClassName');
+      const simulatorUrl = engineConfig.get('simulatorUrl') || editor.get('simulatorUrl');
       // @TODO setupAssets 里设置 requestHandlersMap 不太合适
-      const requestHandlersMap = await editor.get('requestHandlersMap');
+      const requestHandlersMap = engineConfig.get('requestHandlersMap') || editor.get('requestHandlersMap');
       if (!this._mounted) {
         return;
       }