From 5de97c10c8b308ebb63040f385853c8fa5c1bcaa Mon Sep 17 00:00:00 2001 From: JackLian Date: Thu, 8 Dec 2022 13:21:33 +0800 Subject: [PATCH] feat: add types for engineConfig and put it to types --- packages/editor-core/src/config.ts | 170 +++++--------------------- packages/editor-core/src/editor.ts | 15 ++- packages/types/src/assets.ts | 2 +- packages/types/src/engine-config.ts | 181 ++++++++++++++++++++++++++++ packages/types/src/index.ts | 1 + 5 files changed, 219 insertions(+), 150 deletions(-) create mode 100644 packages/types/src/engine-config.ts diff --git a/packages/editor-core/src/config.ts b/packages/editor-core/src/config.ts index 4d870f578..ad426f74b 100644 --- a/packages/editor-core/src/config.ts +++ b/packages/editor-core/src/config.ts @@ -1,9 +1,6 @@ -import { ComponentType } from 'react'; import { get as lodashGet } from 'lodash'; import { isPlainObject } from '@alilc/lowcode-utils'; - -import { RequestHandlersMap } from '@alilc/lowcode-datasource-types'; - +import { EngineOptions, IEngineConfig } from '@alilc/lowcode-types'; import { getLogger } from './utils/logger'; const logger = getLogger({ level: 'log', bizName: 'config' }); @@ -53,7 +50,7 @@ const VALID_ENGINE_OPTIONS = { enableStrictPluginMode: { type: 'boolean', default: STRICT_PLUGIN_MODE_DEFAULT, - description: '开启严格插件模式，默认值: STRICT_PLUGIN_MODE_DEFAULT , 严格模式下，插件将无法通过engineOptions传递自定义配置项', + description: '开启严格插件模式，默认值：STRICT_PLUGIN_MODE_DEFAULT , 严格模式下，插件将无法通过 engineOptions 传递自定义配置项', }, enableReactiveContainer: { type: 'boolean', @@ -123,7 +120,7 @@ const VALID_ENGINE_OPTIONS = { description: '自定义 simulatorUrl 的地址', }, /** - * 与 react-renderer 的 appHelper 一致， https://www.yuque.com/lce/doc/nhilce#appHelper + * 与 react-renderer 的 appHelper 一致，https://lowcode-engine.cn/site/docs/guide/expand/runtime/renderer#apphelper */ appHelper: { type: 'object', @@ -146,138 +143,7 @@ const VALID_ENGINE_OPTIONS = { description: '配置指定节点为根组件', }, }; -export interface EngineOptions { - /** - * 是否开启 condition 的能力，默认在设计器中不管 condition 是啥都正常展示 - */ - enableCondition?: boolean; - /** - * @todo designMode 无法映射到文档渲染模块 - * - * 设计模式，live 模式将会实时展示变量值，默认值：'design' - */ - designMode?: 'design' | 'live'; - /** - * 设备类型，默认值：'default' - */ - device?: 'default' | 'mobile' | string; - /** - * 指定初始化的 deviceClassName，挂载到画布的顶层节点上 - */ - deviceClassName?: string; - /** - * 语言，默认值：'zh-CN' - */ - locale?: string; - /** - * 渲染器类型，默认值：'react' - */ - renderEnv?: 'react' | 'rax' | string; - /** - * 设备类型映射器，处理设计器与渲染器中 device 的映射 - */ - deviceMapper?: { - transform: (originalDevice: string) => string; - }; - /** - * 开启严格插件模式，默认值: STRICT_PLUGIN_MODE_DEFAULT , 严格模式下，插件将无法通过engineOptions传递自定义配置项 - * enable strict plugin mode, default value: false - * under strict mode, customed engineOption is not accepted. - */ - enableStrictPluginMode?: boolean; - /** - * 开启拖拽组件时，即将被放入的容器是否有视觉反馈，默认值：false - */ - enableReactiveContainer?: boolean; - /** - * 关闭画布自动渲染，在资产包多重异步加载的场景有效，默认值：false - */ - disableAutoRender?: boolean; - /** - * 关闭拖拽组件时的虚线响应，性能考虑，默认值：false - */ - disableDetecting?: boolean; - /** - * 定制画布中点击被忽略的 selectors，默认值：undefined - */ - customizeIgnoreSelectors?: (defaultIgnoreSelectors: string[], e: MouseEvent) => string[]; - /** - * 禁止默认的设置面板，默认值：false - */ - disableDefaultSettingPanel?: boolean; - /** - * 禁止默认的设置器，默认值：false - */ - disableDefaultSetters?: boolean; - /** - * 打开画布的锁定操作，默认值：false - */ - enableCanvasLock?: boolean; - /** - * 容器锁定后，容器本身是否可以设置属性，仅当画布锁定特性开启时生效， 默认值为：false - */ - enableLockedNodeSetting?: boolean; - /** - * 当选中节点切换时，是否停留在相同的设置 tab 上，默认值：false - */ - stayOnTheSameSettingTab?: boolean; - /** - * 是否在只有一个 item 的时候隐藏设置 tabs，默认值：false - */ - hideSettingsTabsWhenOnlyOneItem?: boolean; - /** - * 自定义 loading 组件 - */ - loadingComponent?: ComponentType; - /** - * 设置所有属性支持变量配置，默认值：false - */ - supportVariableGlobally?: boolean; - /** - * 设置 simulator 相关的 url，默认值：undefined - */ - simulatorUrl?: string[]; - /** - * Vision-polyfill settings - */ - visionSettings?: { - // 是否禁用降级 reducer，默认值：false - disableCompatibleReducer?: boolean; - // 是否开启在 render 阶段开启 filter reducer，默认值：false - enableFilterReducerInRenderStage?: boolean; - }; - /** - * 与 react-renderer 的 appHelper 一致， https://www.yuque.com/lce/doc/nhilce#appHelper - */ - appHelper?: { - /** 全局公共函数 */ - utils?: Record; - /** 全局常量 */ - constants?: Record; - }; - /** - * 数据源引擎的请求处理器映射 - */ - requestHandlersMap?: RequestHandlersMap; - - /** - * @default true - * JSExpression 是否只支持使用 this 来访问上下文变量，假如需要兼容原来的 'state.xxx'，则设置为 false - */ - thisRequiredInJSE?: boolean; - - /** - * @default false - * 当开启组件未找到严格模式时，渲染模块不会默认给一个容器组件 - */ - enableStrictNotFoundMode?: boolean; - - /** - * 配置指定节点为根组件 - */ - focusNodeSelector?: (rootNode: Node) => Node; -} const getStrictModeValue = (engineOptions: EngineOptions, defaultValue: boolean): boolean => { if (!engineOptions || !isPlainObject(engineOptions)) { @@ -289,7 +155,25 @@ const getStrictModeValue = (engineOptions: EngineOptions, defaultValue: boolean) } return engineOptions.enableStrictPluginMode; }; -export class EngineConfig { + +export interface IEngineConfigPrivate { + /** + * if engineOptions.strictPluginMode === true, only accept propertied predefined in EngineOptions. + * + * @param {EngineOptions} engineOptions + * @memberof EngineConfig + */ + setEngineOptions(engineOptions: EngineOptions): void; + + notifyGot(key: string): void; + + setWait(key: string, resolve: (data: any) => void, once?: boolean): void; + + delWait(key: string, fn: any): void; +} + + +export class EngineConfig implements IEngineConfig, IEngineConfigPrivate { private config: { [key: string]: any } = {}; private waits = new Map< @@ -363,7 +247,7 @@ export class EngineConfig { }; Object.keys(engineOptions).forEach((key) => { if (isValidKey(key)) { - this.set(key, engineOptions[key]); + this.set(key, (engineOptions as any)[key]); } else { logger.warn(`failed to config ${key} to engineConfig, only predefined options can be set under strict mode, predefined options: `, VALID_ENGINE_OPTIONS); } @@ -408,7 +292,7 @@ export class EngineConfig { } } - private notifyGot(key: string) { + notifyGot(key: string): void { let waits = this.waits.get(key); if (!waits) { return; @@ -428,7 +312,7 @@ export class EngineConfig { } } - private setWait(key: string, resolve: (data: any) => void, once?: boolean) { + setWait(key: string, resolve: (data: any) => void, once?: boolean) { const waits = this.waits.get(key); if (waits) { waits.push({ resolve, once }); @@ -437,7 +321,7 @@ export class EngineConfig { } } - private delWait(key: string, fn: any) { + delWait(key: string, fn: any) { const waits = this.waits.get(key); if (!waits) { return; @@ -454,4 +338,4 @@ export class EngineConfig { } } -export const engineConfig = new EngineConfig(); +export const engineConfig = new EngineConfig(); \ No newline at end of file diff --git a/packages/editor-core/src/editor.ts b/packages/editor-core/src/editor.ts index bc46086f6..f3b52c61d 100644 --- a/packages/editor-core/src/editor.ts +++ b/packages/editor-core/src/editor.ts @@ -1,3 +1,5 @@ +/* eslint-disable no-console */ +/* eslint-disable max-len */ import { StrictEventEmitter } from 'strict-event-emitter-types'; import { EventEmitter } from 'events'; import { @@ -13,7 +15,6 @@ import { } from '@alilc/lowcode-types'; import { engineConfig } from './config'; import { globalLocale } from './intl'; -import * as utils from './utils'; import Preference from './utils/preference'; import { obx } from './utils'; import { AssetsJson, AssetLoader } from '@alilc/lowcode-utils'; @@ -68,7 +69,9 @@ export class Editor extends (EventEmitter as any) implements IEditor { private hooks: HookConfig[] = []; - get(keyOrType: KeyOrType): GetReturnType | undefined { + get( + keyOrType: KeyOrType, + ): GetReturnType | undefined { return this.context.get(keyOrType as any); } @@ -76,7 +79,7 @@ export class Editor extends (EventEmitter as any) implements IEditor { return this.context.has(keyOrType); } - set(key: KeyType, data: any): void | Promise { + set(key: KeyType, data: any): void | Promise { if (key === 'assets') { return this.setAssets(data); } @@ -113,8 +116,8 @@ export class Editor extends (EventEmitter as any) implements IEditor { const { exportName, url } = component; await (new AssetLoader()).load(url); if (window[exportName]) { - assets.components = assets.components.concat(window[exportName].components || []); - assets.componentList = assets.componentList.concat(window[exportName].componentList || []); + assets.components = assets.components.concat((window[exportName] as any).components || []); + assets.componentList = assets.componentList?.concat((window[exportName] as any).componentList || []); } return window[exportName]; }), @@ -215,7 +218,7 @@ export class Editor extends (EventEmitter as any) implements IEditor { registerHooks = (hooks: HookConfig[]) => { this.initHooks(hooks).forEach(({ message, type, handler }) => { if (['on', 'once'].indexOf(type) !== -1) { - this[type](message, handler); + this[type]((message as any), handler); } }); }; diff --git a/packages/types/src/assets.ts b/packages/types/src/assets.ts index 65129532a..581af679b 100644 --- a/packages/types/src/assets.ts +++ b/packages/types/src/assets.ts @@ -62,7 +62,7 @@ export interface AssetsJson { */ version: string; /** - * 大包列表，external与package的概念相似，融合在一起 + * 大包列表，external 与 package 的概念相似，融合在一起 */ packages?: Package[]; /** diff --git a/packages/types/src/engine-config.ts b/packages/types/src/engine-config.ts new file mode 100644 index 000000000..5fb2196fd --- /dev/null +++ b/packages/types/src/engine-config.ts @@ -0,0 +1,181 @@ +import { RequestHandlersMap } from '@alilc/lowcode-datasource-types'; +import { ComponentType } from 'react'; + +export interface EngineOptions { + /** + * 是否开启 condition 的能力，默认在设计器中不管 condition 是啥都正常展示 + */ + enableCondition?: boolean; + /** + * @todo designMode 无法映射到文档渲染模块 + * + * 设计模式，live 模式将会实时展示变量值，默认值：'design' + */ + designMode?: 'design' | 'live'; + /** + * 设备类型，默认值：'default' + */ + device?: 'default' | 'mobile' | string; + /** + * 指定初始化的 deviceClassName，挂载到画布的顶层节点上 + */ + deviceClassName?: string; + /** + * 语言，默认值：'zh-CN' + */ + locale?: string; + /** + * 渲染器类型，默认值：'react' + */ + renderEnv?: 'react' | 'rax' | string; + /** + * 设备类型映射器，处理设计器与渲染器中 device 的映射 + */ + deviceMapper?: { + transform: (originalDevice: string) => string; + }; + /** + * 开启严格插件模式，默认值：STRICT_PLUGIN_MODE_DEFAULT , 严格模式下，插件将无法通过 engineOptions 传递自定义配置项 + * enable strict plugin mode, default value: false + * under strict mode, customed engineOption is not accepted. + */ + enableStrictPluginMode?: boolean; + /** + * 开启拖拽组件时，即将被放入的容器是否有视觉反馈，默认值：false + */ + enableReactiveContainer?: boolean; + /** + * 关闭画布自动渲染，在资产包多重异步加载的场景有效，默认值：false + */ + disableAutoRender?: boolean; + /** + * 关闭拖拽组件时的虚线响应，性能考虑，默认值：false + */ + disableDetecting?: boolean; + /** + * 定制画布中点击被忽略的 selectors，默认值：undefined + */ + customizeIgnoreSelectors?: (defaultIgnoreSelectors: string[], e: MouseEvent) => string[]; + /** + * 禁止默认的设置面板，默认值：false + */ + disableDefaultSettingPanel?: boolean; + /** + * 禁止默认的设置器，默认值：false + */ + disableDefaultSetters?: boolean; + /** + * 打开画布的锁定操作，默认值：false + */ + enableCanvasLock?: boolean; + /** + * 容器锁定后，容器本身是否可以设置属性，仅当画布锁定特性开启时生效，默认值为：false + */ + enableLockedNodeSetting?: boolean; + /** + * 当选中节点切换时，是否停留在相同的设置 tab 上，默认值：false + */ + stayOnTheSameSettingTab?: boolean; + /** + * 是否在只有一个 item 的时候隐藏设置 tabs，默认值：false + */ + hideSettingsTabsWhenOnlyOneItem?: boolean; + /** + * 自定义 loading 组件 + */ + loadingComponent?: ComponentType; + /** + * 设置所有属性支持变量配置，默认值：false + */ + supportVariableGlobally?: boolean; + /** + * 设置 simulator 相关的 url，默认值：undefined + */ + simulatorUrl?: string[]; + /** + * Vision-polyfill settings + */ + visionSettings?: { + // 是否禁用降级 reducer，默认值：false + disableCompatibleReducer?: boolean; + // 是否开启在 render 阶段开启 filter reducer，默认值：false + enableFilterReducerInRenderStage?: boolean; + }; + /** + * 与 react-renderer 的 appHelper 一致，https://lowcode-engine.cn/site/docs/guide/expand/runtime/renderer#apphelper + */ + appHelper?: { + /** 全局公共函数 */ + utils?: Record; + /** 全局常量 */ + constants?: Record; + }; + + /** + * 数据源引擎的请求处理器映射 + */ + requestHandlersMap?: RequestHandlersMap; + + /** + * @default true + * JSExpression 是否只支持使用 this 来访问上下文变量，假如需要兼容原来的 'state.xxx'，则设置为 false + */ + thisRequiredInJSE?: boolean; + + /** + * @default false + * 当开启组件未找到严格模式时，渲染模块不会默认给一个容器组件 + */ + enableStrictNotFoundMode?: boolean; + + /** + * 配置指定节点为根组件 + */ + focusNodeSelector?: (rootNode: Node) => Node; +} + +export interface IEngineConfig { + /** + * 判断指定 key 是否有值 + * @param key + * @returns + */ + has(key: string): boolean; + + /** + * 获取指定 key 的值 + * @param key + * @param defaultValue + * @returns + */ + get(key: string, defaultValue?: any): any; + + /** + * 设置指定 key 的值 + * @param key + * @param value + */ + set(key: string, value: any): void; + + /** + * 批量设值，set 的对象版本 + * @param config + */ + setConfig(config: { [key: string]: any }): void; + + /** + * 获取指定 key 的值，若此时还未赋值，则等待，若已有值，则直接返回值 + * 注：此函数返回 Promise 实例，只会执行（fullfill）一次 + * @param key + * @returns + */ + onceGot(key: string): Promise; + + /** + * 获取指定 key 的值，函数回调模式，若多次被赋值，回调会被多次调用 + * @param key + * @param fn + * @returns + */ + onGot(key: string, fn: (data: any) => void): () => void; +} \ No newline at end of file diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts index 8ebd29693..9db5bae46 100644 --- a/packages/types/src/index.ts +++ b/packages/types/src/index.ts @@ -28,5 +28,6 @@ export * from './designer'; export * from './dragon'; export * from './shell'; export * from './shell-model-factory'; +export * from './engine-config'; // TODO: remove this in future versions export * from './deprecated';