Function to determine display condition | (nodes: IPublicModelNode[]) => boolean (optional) | | +| disabled | 禁用条件函数，可选
Function to determine disabled condition, optional | (nodes: IPublicModelNode[]) => boolean (optional) | | + +**ContextMenu 示例** + +```typescript +const App = () => { + const menuItems: IPublicTypeContextMenuAction[] = [ + { + name: 'a', + title: '选项 1', + action: () => console.log('选项 1 被点击'), + }, + { + name: 'b', + title: '选项 2', + action: () => console.log('选项 2 被点击'), + }, + ]; + + const ContextMenu = ctx.commonUI.ContextMenu; + + return ( +
+
+
+
+ );
+};
+
+export default App;
+```
+
+**ContextMenu.create 示例**
+
+```typescript
+const App = () => {
+ const menuItems: IPublicTypeContextMenuAction[] = [
+ {
+ name: 'a',
+ title: '选项 1',
+ action: () => console.log('选项 1 被点击'),
+ },
+ {
+ name: 'b',
+ title: '选项 2',
+ action: () => console.log('选项 2 被点击'),
+ },
+ ];
+
+ const ContextMenu = ctx.commonUI.ContextMenu;
+
+ return (
+ 右键点击这里
+
+
+ );
+};
+
+export default App;
+```
+
+### Balloon
+
+详细文档： [Balloon Documentation](https://fusion.design/pc/component/balloon)
+
+### Breadcrumb
+详细文档： [Breadcrumb Documentation](https://fusion.design/pc/component/breadcrumb)
+
+### Button
+详细文档： [Button Documentation](https://fusion.design/pc/component/button)
+
+### Card
+详细文档：[Card Documentation](https://fusion.design/pc/component/card)
+
+### Checkbox
+详细文档：[Checkbox Documentation](https://fusion.design/pc/component/checkbox)
+
+### DatePicker
+详细文档：[DatePicker Documentation](https://fusion.design/pc/component/datepicker)
+
+### Dialog
+详细文档：[Dialog Documentation](https://fusion.design/pc/component/dialog)
+
+### Dropdown
+详细文档：[Dropdown Documentation](https://fusion.design/pc/component/dropdown)
+
+### Form
+详细文档：[Form Documentation](https://fusion.design/pc/component/form)
+
+### Icon
+详细文档：[Icon Documentation](https://fusion.design/pc/component/icon)
+
+引擎默认主题支持的 icon 列表：https://fusion.design/64063/component/icon?themeid=20133
+
+
+### Input
+详细文档：[Input Documentation](https://fusion.design/pc/component/input)
+
+### Loading
+详细文档：[Loading Documentation](https://fusion.design/pc/component/loading)
+
+### Message
+详细文档：[Message Documentation](https://fusion.design/pc/component/message)
+
+### Overlay
+详细文档：[Overlay Documentation](https://fusion.design/pc/component/overlay)
+
+### Pagination
+详细文档：[Pagination Documentation](https://fusion.design/pc/component/pagination)
+
+### Radio
+详细文档：[Radio Documentation](https://fusion.design/pc/component/radio)
+
+### Search
+详细文档：[Search Documentation](https://fusion.design/pc/component/search)
+
+### Select
+详细文档：[Select Documentation](https://fusion.design/pc/component/select)
+
+### SplitButton
+详细文档：[SplitButton Documentation](https://fusion.design/pc/component/splitbutton)
+
+### Step
+详细文档：[Step Documentation](https://fusion.design/pc/component/step)
+
+### Switch
+详细文档：[Switch Documentation](https://fusion.design/pc/component/switch)
+
+### Tab
+详细文档：[Tab Documentation](https://fusion.design/pc/component/tab)
+
+### Table
+详细文档：[Table Documentation](https://fusion.design/pc/component/table)
+
+### Tree
+详细文档：[Tree Documentation](https://fusion.design/pc/component/tree)
+
+### TreeSelect
+详细文档：[TreeSelect Documentation](https://fusion.design/pc/component/treeselect)
+
+### Upload
+详细文档：[Upload Documentation](https://fusion.design/pc/component/upload)
+
+### Divider
+详细文档：[Divider Documentation](https://fusion.design/pc/component/divider)
+
+## 说明
+
+如果需要其他组件，可以提 issue 给我们。
diff --git a/docs/docs/api/config.md b/docs/docs/api/config.md
index 40d18eb3af..414cfc979f 100644
--- a/docs/docs/api/config.md
+++ b/docs/docs/api/config.md
@@ -1,22 +1,30 @@
---
title: config - 配置 API
-sidebar_position: 8
+sidebar_position: 5
---
+
+> **@types** [IPublicModelEngineConfig](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/engine-config.ts) {
+ ContextMenu.create(menuItems, e);
+ }}>点击这里
+ +> **@since** v1.0.0 + + ## 模块简介 配置模块，负责配置的读、写等操作。 -## -## 变量（variables） -无 -## -## 方法签名（functions） + +## 方法 ### get 获取指定 key 的值 -**类型定义** ```typescript -function get(key: string, defaultValue?: any): any +/** + * 获取指定 key 的值 + * get value by key + * @param key + * @param defaultValue + * @returns + */ +get(key: string, defaultValue?: any): any; ``` -**调用示例** +**示例** ```typescript import { config } from '@alilc/lowcode-engine'; @@ -26,11 +34,16 @@ config.get('keyB', { a: 1 }); ### set 设置指定 key 的值 -**类型定义** ```typescript -function set(key: string, value: any) +/** + * 设置指定 key 的值 + * set value for certain key + * @param key + * @param value + */ +set(key: string, value: any): void; ``` -**调用示例** +**示例** ```typescript import { config } from '@alilc/lowcode-engine'; @@ -40,40 +53,88 @@ config.set('keyC', 1); ### has 判断指定 key 是否有值 -**类型定义** ```typescript -function has(key: string): boolean +/** + * 判断指定 key 是否有值 + * check if config has certain key configed + * @param key + * @returns + */ +has(key: string): boolean; ``` -**调用示例** + +**示例** ```typescript import { config } from '@alilc/lowcode-engine'; config.has('keyD'); ``` -### + ### setConfig 批量设值，set 的对象版本 -**类型定义** ```typescript -function setConfig(config: { [key: string]: any }) +/** + * 批量设值，set 的对象版本 + * set multiple config key-values + * @param config + */ +setConfig(config: { [key: string]: any }): void; ``` -**调用示例** +**示例** ```typescript import { config } from '@alilc/lowcode-engine'; config.setConfig({ keyA: false, keyB: 2 }); ``` +### getPreference +获取全局 Preference 管理器，用于管理全局浏览器侧用户 Preference，如 Panel 是否钉住 + +```typescript +/** + * 获取全局 Preference, 用于管理全局浏览器侧用户 Preference，如 Panel 是否钉住 + * get global user preference manager, which can be use to store + * user`s preference in user localstorage, such as a panel is pinned or not. + * @returns {IPublicModelPreference} + * @since v1.1.0 + */ +getPreference(): IPublicModelPreference; +``` +相关类型：[IPublicModelPreference](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/preference.ts) + +**@since v1.1.0** + +示例 + +```javascript +import { config } from '@alilc/lowcode-engine'; + +const panelName = 'outline-master-pane'; + +// 设置大纲树面板钉住，在大纲树下次重新打开时生效 +config.getPreference().set(`${panelName}-pinned-status-isFloat`, false, 'skeleton') +``` + +## 事件 + ### onceGot 获取指定 key 的值，若此时还未赋值，则等待，若已有值，则直接返回值 注：此函数返回 Promise 实例 -**类型定义** + ```typescript -function onceGot(key: string): Promise
+ +## 配置方式 + +#### init API + +```javascript +import { init } from '@alilc/lowcode-engine'; + +init(document.getElementById('engine'), { + enableCondition: false, +}); +``` + +[**init api**](./init) + +#### config API + +```javascript +import { config } from '@alilc/lowcode-engine'; + +config.set('enableCondition', false) +``` + +[**config api**](./config) + +## 配置详情 + +> 源码详见 [IPublicTypeEngineOptions](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/engine-options.ts) + + +### 画布 + +#### locale - 语言 + +`@type {string}`、`@default {zh-CN}` + +语言 + +#### device - 设备类型 + +`@type {string}` + +引擎默认支持的 device 类型有 `default`、`mobile`、`iphonex`、`iphone6`。 + +插件 `@alilc/lowcode-plugin-simulator-select` 支持的 device 类型有 `default`、`phone`、`tablet`、`desktop`。 + +如果需要自定义的 device 类型，需要补充 device 类型对应的样式，例如 device 为 phone 时，需要补充样式如下： + +```css +.lc-simulator-device-phone { + top: 16px; + bottom: 16px; + left: 50%; + width: 375px; + transform: translateX(-50%); + margin: auto; +} +``` + +#### deviceClassName + +`@type {string}` + +指定初始化的 deviceClassName，挂载到画布的顶层节点上 + +#### appHelper + +与 react-renderer 的 appHelper 一致，https://lowcode-engine.cn/site/docs/guide/expand/runtime/renderer#apphelper + + +#### enableCondition + +`@type {boolean}` + +是否开启 condition 的能力，默认在设计器中不管 condition 是啥都正常展示 + +#### disableAutoRender + +`@type {boolean}` `@default {false}` + +关闭画布自动渲染，在资产包多重异步加载的场景有效 + +#### renderEnv - 渲染器类型 + +渲染器类型 + +`@type {string}`、`@default {react}` + +#### simulatorUrl + +`@type {string[]}` + +设置 simulator 相关的 url + +#### enableStrictNotFoundMode + +`@type {boolean}` `@default {false}` + +当开启组件未找到严格模式时，渲染模块不会默认给一个容器组件 + +### 编排 + +#### focusNodeSelector - 指定根组件 + +配置指定节点为根组件 + +类型定义 + +```typescript + focusNodeSelector?: (rootNode: IPublicModelNode) => Node; +``` + +#### supportVariableGlobally - 全局变量配置 + +`@type {boolean}` `@default {false}` + +设置所有属性支持变量配置 + +开启拖拽组件时，即将被放入的容器是否有视觉反馈 + +#### customizeIgnoreSelectors - 点击忽略 + +配置画布中，需要屏蔽点击事件的元素，即配置的元素默认点击行为均不生效。 + +类型定义: + +```typescript + customizeIgnoreSelectors?: (defaultIgnoreSelectors: string[], e: MouseEvent) => string[]; +``` + +默认值: + +```javascript +() => { + return [ + '.next-input-group', + '.next-checkbox-group', + '.next-checkbox-wrapper', + '.next-date-picker', + '.next-input', + '.next-month-picker', + '.next-number-picker', + '.next-radio-group', + '.next-range', + '.next-range-picker', + '.next-rating', + '.next-select', + '.next-switch', + '.next-time-picker', + '.next-upload', + '.next-year-picker', + '.next-breadcrumb-item', + '.next-calendar-header', + '.next-calendar-table', + '.editor-container', // 富文本组件 + ] +} +``` + +#### enableCanvasLock + +`@type {boolean}` `@default {false}` + +打开画布的锁定操作 + +#### enableLockedNodeSetting + +`@type {boolean}` `@default {false}` + +容器锁定后，容器本身是否可以设置属性，仅当画布锁定特性开启时生效 + +#### enableMouseEventPropagationInCanvas + +`@type {boolean}` `@default {false}` + +鼠标事件（mouseover、mouseleave、mousemove）在画布中是否允许冒泡，默认不允许。 + +#### enableReactiveContainer + +`@type {boolean}` `@default {false}` + +#### enableContextMenu - 开启右键菜单 + +`@type {boolean}` `@default {false}` + +是否开启右键菜单 + +#### disableDetecting + +`@type {boolean}` `@default {false}` + +关闭拖拽组件时的虚线响应，性能考虑 + + +#### disableDefaultSettingPanel + +`@type {boolean}` `@default {false}` + +禁止默认的设置面板 + +#### disableDefaultSetters + +`@type {boolean}` `@default {false}` + +禁止默认的设置器 + +#### stayOnTheSameSettingTab + +`@type {boolean}` `@default {false}` + +当选中节点切换时，是否停留在相同的设置 tab 上 + +#### hideSettingsTabsWhenOnlyOneItem + +`@type {boolean}` `@default {false}` + +是否在只有一个 item 的时候隐藏设置 tabs + +#### hideComponentAction + +`@type {boolean}` `@default {false}` + +隐藏设计器辅助层 + +#### thisRequiredInJSE + +`@type {boolean}` `@default {true}` + +JSExpression 是否只支持使用 this 来访问上下文变量，假如需要兼容原来的 'state.xxx'，则设置为 false + +### 应用级设计器 + +#### enableWorkspaceMode - 应用级设计模式 + +`@type {boolean}` `@default {false}` + +开启应用级设计模式 + +#### enableAutoOpenFirstWindow + +`@type {boolean}` `@default {true}` + +应用级设计模式下，自动打开第一个窗口 + +#### workspaceEmptyComponent + +应用级设计模式下，当窗口为空时，展示的占位组件 + +### 定制组件 + +#### faultComponent + +组件渲染错误时的占位组件 + +#### notFoundComponent + +组件不存在时的占位组件 + +#### loadingComponent - loading 组件 + +自定义 loading 组件 + +### 插件 + +#### defaultSettingPanelProps + +内置设置面板插件的 panelProps + +#### defaultOutlinePaneProps + +内置大纲树面板插件的 panelProps + +### 其他 + +#### enableStrictPluginMode + +`@type {boolean}` + +开启严格插件模式，默认值：STRICT_PLUGIN_MODE_DEFAULT , 严格模式下，插件将无法通过 engineOptions 传递自定义配置项 + +#### requestHandlersMap + +数据源引擎的请求处理器映射 + +#### customPluginTransducer + +插件处理中间件，方便提供插件调试能力 + +类型定义 + +```typescript +customPluginTransducer: async (originPlugin: IPublicTypePlugin, ctx: IPublicModelPluginContext, options): IPublicTypePlugin; +``` + +#### defaultOutlinePaneProps + +`@type {object}` + +大纲树插件面板默认 props + diff --git a/docs/docs/api/event.md b/docs/docs/api/event.md index 26232b7c1f..c2e86f7106 100644 --- a/docs/docs/api/event.md +++ b/docs/docs/api/event.md @@ -1,42 +1,78 @@ --- title: event - 事件 API -sidebar_position: 7 +sidebar_position: 10 --- + +> **@types** [IPublicApiEvent](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/event.ts)
+> **@since** v1.0.0 + + ## 模块简介 负责事件处理 API，支持自定义监听事件、触发事件。 -## 方法签名（functions） +## 方法 ### on 监听事件 -**类型定义** ```typescript -function on(event: string, listener: (...args: unknown[]) => void): void; +/** + * 监听事件 + * add monitor to a event + * @param event 事件名称 + * @param listener 事件回调 + */ +on(event: string, listener: (...args: any[]) => void): IPublicTypeDisposable; ``` +相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) + +### prependListener +监听事件，会在其他回调函数之前执行 + +```typescript +/** + * 监听事件，会在其他回调函数之前执行 + * @param event 事件名称 + * @param listener 事件回调 + */ +prependListener(event: string, listener: (...args: any[]) => void): IPublicTypeDisposable; +``` +相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) ### off 取消监听事件 -**类型定义** ```typescript -function off(event: string, listener: (...args: unknown[]) => void): void; +/** + * 取消监听事件 + * cancel a monitor from a event + * @param event 事件名称 + * @param listener 事件回调 + */ +off(event: string, listener: (...args: any[]) => void): void; ``` ### emit 触发事件 -**类型定义** - ```typescript -function emit(event: string, ...args: unknown[]): void; +/** + * 触发事件 + * emit a message for a event + * @param event 事件名称 + * @param args 事件参数 + * @returns + */ +emit(event: string, ...args: any[]): void; ``` ## 使用示例 ### 事件触发和监听 + ```typescript const eventName = 'eventName'; // 事件监听 +// 插件中发出的事件，默认以 `common` 为前缀，监听时需要注意下 event.on(`common:${eventName}`); // 触发事件 @@ -74,7 +110,7 @@ import { event } from '@alilc/lowcode-engine'; class SetterB extends React.Component { bindFunction = () => { const { field, value } = this.props; - // 这里展示的和插件进行通信, 事件规则是插件名 + 方法 + // 这里展示的和插件进行通信，事件规则是插件名 + 方法 event.emit('eventBindDialog.openDialog', field.name, this.emitEventName); } } diff --git a/docs/docs/api/hotkey.md b/docs/docs/api/hotkey.md index 60e8a3f3f7..be6a3033d0 100644 --- a/docs/docs/api/hotkey.md +++ b/docs/docs/api/hotkey.md @@ -1,30 +1,37 @@ --- title: hotkey - 快捷键 API -sidebar_position: 5 +sidebar_position: 10 --- + +> **@types** [IPublicApiHotkey](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/hotkey.ts)
+> **@since** v1.0.0 + ## 模块简介 绑定快捷键 API，可以自定义项目快捷键使用。 -## 方法签名（functions） +## 方法 ### bind 绑定快捷键 -**类型定义** ```typescript -function bind( - combos: string[] | string, - callback: (e: KeyboardEvent, combo?: string) => any | false, - action?: string -): () => void; +/** + * 绑定快捷键 + * bind hotkey/hotkeys, + * @param combos 快捷键，格式如：['command + s'] 、['ctrl + shift + s'] 等 + * @param callback 回调函数 + * @param action + * @returns + */ +bind( + combos: string[] | string, + callback: IPublicTypeHotkeyCallback, + action?: string, + ): IPublicTypeDisposable; ``` +相关 types +- [IPublicTypeHotkeyCallback](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/hotkey-callback.ts) +- [IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) -**示例** -```typescript -hotkey.bind('command+s', (e) => { - e.preventDefault(); - // command+s 快捷键按下时需要执行的逻辑 -}); -``` ## 使用示例 ### 基础示例 @@ -53,7 +60,7 @@ function saveSchema(schema) { // 保存 schema 相关操作 } -const saveSampleHotKey = (ctx: ILowCodePluginContext) => { +const saveSampleHotKey = (ctx: IPublicModelPluginContext) => { return { name: 'saveSample', async init() { diff --git a/docs/docs/api/index.md b/docs/docs/api/index.md index 1afccce180..383b2952ce 100644 --- a/docs/docs/api/index.md +++ b/docs/docs/api/index.md @@ -3,14 +3,53 @@ title: API 总览 sidebar_position: 0 --- -引擎直接提供 9 大类 API，以及若干间接的 API，具体如下图： +引擎提供的公开 API 分为`命名空间`和`模型`两类，其中`命名空间`用于聚合一大类的 API，`模型`为各 API 涉及到的对象模型。 - +## 命名空间 -### API 设计约定 +引擎直接提供以下几大类 API + +- skeleton 面板 API +- material 物料 API +- project 模型 API +- simulator-host 模拟器 API +- hotkey 快捷键 API +- setters 设置器 API +- event 事件 API +- config 配置 API +- common 通用 API +- logger 日志 API +- init 初始化 API + +## 模型 +以下模型通过前面的 API 以返回值等形式间接透出。 + +- document-model 文档 +- node 节点 +- node-children 节点孩子 +- props 属性集 +- prop 属性 +- setting-field 设置属性 +- setting-top-entry 设置属性集 +- component-meta 物料元数据 +- selection 画布选中 +- detecting 画布 hover +- history 操作历史 +- window 低代码设计器窗口模型 +- detecting 画布节点悬停模型 +- modal-nodes-manager 模态节点管理器模型 +- plugin-instance 插件实例 +- drop-location 拖拽放置位置模型 + + +## API 设计约定 一些 API 设计约定： 1. 所有 API 命名空间都按照 variables / functions / events 来组织 2. 事件（events）的命名格式为：on[Will|Did]VerbNoun?，参考 [https://code.visualstudio.com/api/references/vscode-api#events](https://code.visualstudio.com/api/references/vscode-api#events) 3. 基于 Disposable 模式，对于事件的绑定、快捷键的绑定函数，返回值则是解绑函数 4. 对于属性的导出，统一用 .xxx 的 getter 模式，（尽量）不使用 .getXxx() + +## experimental + +说明此模块处于公测阶段, API 可能会发生改变. \ No newline at end of file diff --git a/docs/docs/api/init.md b/docs/docs/api/init.md index 50c5cf7013..dd84d9c00f 100644 --- a/docs/docs/api/init.md +++ b/docs/docs/api/init.md @@ -1,107 +1,25 @@ --- title: init - 初始化 API -sidebar_position: 10 +sidebar_position: 0 --- + +> **@since** v1.0.0 + + ## 模块简介 提供 init 等方法 -## 方法签名 -#### 1. init +## 方法 +#### init 初始化引擎 **方法定义** ```typescript -function init(container?: Element, options?: EngineOptions): void +function init(container?: Element, options?: IPublicTypeEngineOptions): void ``` -**初始化引擎的参数** -```typescript -interface EngineOptions { - /** - * 指定初始化的 device - */ - device?: 'default' | 'mobile'; - /** - * 指定初始化的 deviceClassName，挂载到画布的顶层节点上 - */ - deviceClassName?: string; - /** - * 是否开启 condition 的能力，默认在设计器中不管 condition 是啥都正常展示 - */ - enableCondition?: boolean; - /** - * 开启拖拽组件时，即将被放入的容器是否有视觉反馈，默认值：false - */ - enableReactiveContainer?: boolean; - /** - * 关闭画布自动渲染，在资产包多重异步加载的场景有效，默认值：false - */ - disableAutoRender?: boolean; - /** - * 打开画布的锁定操作，默认值：false - */ - enableCanvasLock?: boolean; - /** - * 容器锁定后，容器本身是否可以设置属性，仅当画布锁定特性开启时生效， 默认值为：false - */ - enableLockedNodeSetting?: boolean; - /** - * 开启画布上的鼠标事件的冒泡，默认值：false - */ - enableMouseEventPropagationInCanvas?: boolean; - /** - * 关闭拖拽组件时的虚线响应，性能考虑，默认值：false - */ - disableDetecting?: boolean; - /** - * 定制画布中点击被忽略的 selectors，默认值：undefined - */ - customizeIgnoreSelectors?: (defaultIgnoreSelectors: string[]) => string[]; - /** - * 禁止默认的设置面板，默认值：false - */ - disableDefaultSettingPanel?: boolean; - /** - * 禁止默认的设置器，默认值：false - */ - disableDefaultSetters?: boolean; - /** - * 当选中节点切换时，是否停留在相同的设置 tab 上，默认值：false - */ - stayOnTheSameSettingTab?: boolean; - /** - * 自定义 loading 组件 - */ - loadingComponent?: ComponentType; - - /** - * @default true - * JSExpression 是否只支持使用 this 来访问上下文变量，假如需要兼容原来的 'state.xxx'，则设置为 false - */ - thisRequiredInJSE?: boolean; +[**初始化引擎配置参数列表**](./configOptions) - /** - * @default false - * >= 1.0.14 - * 当开启组件未找到严格模式时，渲染模块不会默认给一个容器组件 - */ - enableStrictNotFoundMode?: boolean; - /** - * 配置指定节点为根组件 - * >= 1.0.15 - */ - focusNodeSelector?: (rootNode: Node) => Node; - - /** - * 工具类扩展 - */ - appHelper?: { - utils?: {}; - } - - [key: string]: any; -} -``` ## 使用示例 ```typescript import { init } from '@alilc/lowcode-engine'; @@ -110,7 +28,7 @@ init(document.getElementById('engine'), { enableCondition: false, }); ``` -### + ### 默认打开移动端画布 ```typescript import { init } from '@alilc/lowcode-engine'; @@ -135,4 +53,4 @@ init({ ``` 在引擎中即可这样使用。 - + diff --git a/docs/docs/api/logger.md b/docs/docs/api/logger.md index 3fbb7b7fcc..38d986258b 100644 --- a/docs/docs/api/logger.md +++ b/docs/docs/api/logger.md @@ -1,49 +1,80 @@ --- title: logger - 日志 API -sidebar_position: 9 +sidebar_position: 10 --- + +> **@types** [IPublicApiLogger](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/logger.ts)
+> **@since** v1.0.0 + + ## 模块简介 -引擎日志模块，可以按照 **日志级别 **和** 业务类型 **两个维度来定制日志，基于 [zen-logger](https://web.npm.alibaba-inc.com/package/zen-logger) 封装。 -> 注：日志级别可以通过 url query 动态调整，详见下方使用示例。 +引擎日志模块，可以按照 **日志级别 **和** 业务类型 **两个维度来定制日志。 +> 注：日志级别可以通过 url query 动态调整，详见下方[查看示例](#查看示例)。
+> 参考 [zen-logger](https://web.npm.alibaba-inc.com/package/zen-logger) 实现进行封装 + +## 方法 -## 变量（variables） -无 -## 方法签名（functions） -### log / warn / error / info / debug 日志记录方法 -**类型定义** ```typescript -function log(args: any[]): void -function warn(args: any[]): void -function error(args: any[]): void -function info(args: any[]): void -function debug(args: any[]): void +/** + * debug info + */ +debug(...args: any | any[]): void; + +/** + * normal info output + */ +info(...args: any | any[]): void; + +/** + * warning info output + */ +warn(...args: any | any[]): void; + +/** + * error info output + */ +error(...args: any | any[]): void; + +/** + * log info output + */ +log(...args: any | any[]): void; ``` -**调用示例** -```typescript -import { logger } from '@alilc/lowcode-engine'; +## 输出示例 + +```typescript +import { Logger } from '@alilc/lowcode-utils'; +const logger = new Logger({ level: 'warn', bizName: 'myPlugin:moduleA' }); logger.log('Awesome Low-Code Engine'); ``` -## 事件（events） -无 -## 使用示例 -```typescript -import { logger } from '@alilc/lowcode-engine'; +## 查看示例 + +开启查看方式： + +- 方式 1：所有 logger 创建时会有默认输出的 level, 默认为 warn , 即只展示 warn , error +- 方式 2：url 上追加 __logConf__进行开启，示例如下 + +``` +https://lowcode-engine.cn/demo/demo-general/index.html?__logConf__=warn +// 开启所有 bizName的 warn 和 error + +https://lowcode-engine.cn/demo/demo-general/index.html?__logConf__=debug +// 开启所有 bizName的 debug, log, info, warn 和 error + +https://lowcode-engine.cn/demo/demo-general/index.html?__logConf__=log +// 开启所有 bizName的 log, info, warn 和 error -// 内部实现：logger = getLogger({ level: 'warn', bizName: 'designer:pluginManager' }) +https://lowcode-engine.cn/demo/demo-general/index.html?__logConf__=warn|* +// 同 __logConf__=warn -// 若在url query中增加 `__logConf__` 可改变打印日志级别和限定业务类型日志 -// 默认：__logConf__=warn:* -logger.log('log'); // 不输出 -logger.warn('warn'); // 输出 -logger.error('error'); // 输出 +https://lowcode-engine.cn/demo/demo-general/index.html?__logConf__=warn|bizName +// 开启 bizName 的 debug, log, info, warn 和 error -// 比如：__logConf__=log:designer:pluginManager -logger.log('log'); // 输出 -logger.warn('warn'); // 输出 -logger.error('error'); // 输出 +https://lowcode-engine.cn/demo/demo-general/index.html?__logConf__=warn|partOfBizName +// 开启 bizName like '%partOfBizName%' 的 debug, log, info, warn 和 error ``` diff --git a/docs/docs/api/material.md b/docs/docs/api/material.md index 852287f649..0e09441275 100644 --- a/docs/docs/api/material.md +++ b/docs/docs/api/material.md @@ -1,23 +1,43 @@ --- title: material - 物料 API -sidebar_position: 2 +sidebar_position: 10 --- -# 模块简介 + +> **@types** [IPublicApiMaterial](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/material.ts)
+> **@since** v1.0.0 + + +## 模块简介 负责物料相关的 API，包括资产包、设计器辅助层、物料元数据和物料元数据管道函数。 -# 变量（variables） -## componentsMap +## 变量 +### componentsMap 获取组件 map 结构 +```typescript +/** + * 获取组件 map 结构 + * get map of components + */ +get componentsMap(): { [key: string]: IPublicTypeNpmInfo | ComponentType
+> **@since** v1.1.0 + +## 方法 + +### setData + +给剪贴板赋值 + +```typescript +/** + * 给剪贴板赋值 + * set data to clipboard + * + * @param {*} data + * @since v1.1.0 + */ +setData(data: any): void; +``` + +### waitPasteData + +设置剪贴板数据设置的回调 + +```typescript +/** + * 设置剪贴板数据设置的回调 + * set callback for clipboard provide paste data + * + * @param {KeyboardEvent} keyboardEvent + * @param {(data: any, clipboardEvent: ClipboardEvent) => void} cb + * @since v1.1.0 + */ +waitPasteData( + keyboardEvent: KeyboardEvent, + cb: (data: any, clipboardEvent: ClipboardEvent) => void, + ): void; +``` \ No newline at end of file diff --git a/docs/docs/api/model/component-meta.md b/docs/docs/api/model/component-meta.md new file mode 100644 index 0000000000..28f7fe7407 --- /dev/null +++ b/docs/docs/api/model/component-meta.md @@ -0,0 +1,173 @@ +--- +title: ComponentMeta +sidebar_position: 15 +--- + +> **@types** [IPublicModelComponentMeta](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/component-meta.ts)
+> **@since** v1.0.0 + +## 基本介绍 + +组件元数据信息模型 + +## 属性 + +### componentName + +组件名 + +`@type {string}` + +### isContainer + +是否是「容器型」组件 + +`@type {boolean}` + +### isMinimalRenderUnit +是否是最小渲染单元 + +当组件需要重新渲染时： +- 若为最小渲染单元，则只渲染当前组件， +- 若不为最小渲染单元，则寻找到上层最近的最小渲染单元进行重新渲染，直至根节点。 + +`@type {boolean}` + +### isModal + +是否为「模态框」组件 + +`@type {boolean}` + +### configure + +获取用于设置面板显示用的配置 + +`@type {IPublicTypeFieldConfig[]}` + +相关类型：[IPublicTypeFieldConfig](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/field-config.ts) + +### title + +标题 + +`@type {string | IPublicTypeI18nData | ReactElement}` + +相关类型：[IPublicTypeI18nData](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/i18n-data.ts) + +### icon + +图标 + +`@type {IPublicTypeIconType}` + +相关类型：[IPublicTypeIconType](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/icon-type.ts) + +### npm + +组件 npm 信息 + +`@type {IPublicTypeNpmInfo}` + +相关类型：[IPublicTypeNpmInfo](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/npm-info.ts) + +### availableActions + +获取元数据 + +`@type {IPublicTypeTransformedComponentMetadata}` + +相关类型：[IPublicTypeTransformedComponentMetadata](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/transformed-component-metadata.ts) + +### advanced + +组件元数据中高级配置部分 + +`@type {IPublicTypeAdvanced}` + +相关类型：[IPublicTypeAdvanced](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/advanced.ts) + +## 方法 + +### setNpm + +设置 npm 信息 + +```typescript +/** + * 设置 npm 信息 + * set method for npm inforamtion + * @param npm + */ +setNpm(npm: IPublicTypeNpmInfo): void; +``` + +相关类型：[IPublicTypeNpmInfo](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/npm-info.ts) + +### getMetadata + +获取元数据 + +```typescript +/** + * 获取元数据 + * get component metadata + */ +getMetadata(): IPublicTypeTransformedComponentMetadata; +``` + +相关类型：[IPublicTypeTransformedComponentMetadata](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/transformed-component-metadata.ts) + +### checkNestingUp + +检测当前对应节点是否可被放置在父节点中 + +```typescript +/** + * 检测当前对应节点是否可被放置在父节点中 + * check if the current node could be placed in parent node + * @param my 当前节点 + * @param parent 父节点 + */ +checkNestingUp(my: IPublicModelNode | IPublicTypeNodeData, parent: any): boolean; +``` + +相关类型： +- [IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) +- [IPublicTypeNodeData](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/node-data.ts) + + +### checkNestingDown + +检测目标节点是否可被放置在父节点中 + +```typescript +/** + * 检测目标节点是否可被放置在父节点中 + * check if the target node(s) could be placed in current node + * @param my 当前节点 + * @param parent 父节点 + */ +checkNestingDown( + my: IPublicModelNode | IPublicTypeNodeData, + target: IPublicTypeNodeSchema | IPublicModelNode | IPublicTypeNodeSchema[], + ): boolean; +``` + +相关类型： +- [IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) +- [IPublicTypeNodeData](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/node-data.ts) +- [IPublicTypeNodeSchema](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/node-schema.ts) + + +### refreshMetadata + +刷新元数据，会触发元数据的重新解析和刷新 + +```typescript +/** + * 刷新元数据，会触发元数据的重新解析和刷新 + * refresh metadata + */ +refreshMetadata(): void; +``` diff --git a/docs/docs/api/model/detecting.md b/docs/docs/api/model/detecting.md new file mode 100644 index 0000000000..ccd60e3a65 --- /dev/null +++ b/docs/docs/api/model/detecting.md @@ -0,0 +1,87 @@ +--- +title: Detecting +sidebar_position: 6 +--- +> **@types** [IPublicModelDetecting](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/detecting.ts)
+> **@since** v1.0.0 + +## 基本介绍 + +画布节点悬停模型 + +## 属性 + +### current + +当前 hover 的节点 + +`@type {IPublicModelNode | null}` + +相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) + +**@since v1.0.16** + +### enable + +是否启用 + +`@type {boolean}` + + +## 方法 +### capture + +hover 指定节点 + +```typescript +/** + * hover 指定节点 + * capture node with nodeId + * @param id 节点 id + */ +capture(id: string): void; +``` + +### release + +hover 离开指定节点 + +```typescript +/** + * hover 离开指定节点 + * release node with nodeId + * @param id 节点 id + */ +release(id: string): void; +``` + +### leave + +清空 hover 态 + +```typescript +/** + * 清空 hover 态 + * clear all hover state + */ +leave(): void; +``` + +## 事件 +### onDetectingChange +hover 节点变化事件 + +```typescript +/** + * hover 节点变化事件 + * set callback which will be called when hovering object changed. + * @since v1.1.0 + */ +onDetectingChange(fn: (node: IPublicModelNode | null) => void): IPublicTypeDisposable; +``` + +相关类型： +- [IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) +- [IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) + +**@since v1.1.0** \ No newline at end of file diff --git a/docs/docs/api/model/document-model.md b/docs/docs/api/model/document-model.md new file mode 100644 index 0000000000..8d813e7678 --- /dev/null +++ b/docs/docs/api/model/document-model.md @@ -0,0 +1,408 @@ +--- +title: DocumentModel +sidebar_position: 0 +--- +> **@types** [IPublicModelDocumentModel](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/document-model.ts)
+> **@since** v1.0.0 + +## 基本介绍 + +文档模型 + +## 属性 + +### id + +唯一 ID + +`@type {string}` + +### selection + +画布节点选中区模型实例 + +`@type {IPublicModelSelection}` + +相关章节：[节点选中区模型](./selection) + +相关类型：[IPublicModelSelection](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/selection.ts) + +### detecting + +画布节点 hover 区模型实例 + +`@type {IPublicModelDetecting}` + +相关章节：[画布节点悬停模型](./detecting) + +相关类型：[IPublicModelDetecting](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/detecting.ts) + +### history + +操作历史模型实例 + +`@type {IPublicModelHistory}` + +相关章节：[操作历史模型](./history) + +相关类型：[IPublicModelHistory](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/history.ts) + +### project + +获取当前文档模型所属的 project + +`@type {IPublicApiProject}` + +相关类型：[IPublicApiProject](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/project.ts) + +### root + +获取文档的根节点 + +`@type {IPublicModelNode | null}` + +相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) + +### nodesMap + +获取文档下所有节点 Map, key 为 nodeId + +`@type {Map
+> **@since** v1.0.0 + +## 基本介绍 + +拖拽对象 + +### 对应接口 +```typescript +import { IPublicModelDragon } from '@alilc/lowcode-types'; +``` + +### 支持版本 + +**@since** v1.1.0 + +## 属性 + +### dragging + +是否正在拖动 + +```typescript +/** + * is dragging or not + */ +get dragging(): boolean; +``` + +## 方法 + +### onDragstart + +绑定 dragstart 事件 + +```typescript +/** + * 绑定 dragstart 事件 + * bind a callback function which will be called on dragging start + * @param func + * @returns + */ +onDragstart(func: (e: IPublicModelLocateEvent) => any): () => void; +``` + +### onDrag + +绑定 drag 事件 +```typescript +/** + * 绑定 drag 事件 + * bind a callback function which will be called on dragging + * @param func + * @returns + */ +onDrag(func: (e: IPublicModelLocateEvent) => any): () => void; +``` + +### onDragend + +绑定 dragend 事件 + +```typescript +/** + * 绑定 dragend 事件 + * bind a callback function which will be called on dragging end + * @param func + * @returns + */ +onDragend(func: (o: { dragObject: IPublicModelDragObject; copy?: boolean }) => any): () => void; +``` + +### from + +设置拖拽监听的区域 shell，以及自定义拖拽转换函数 boost + +```typescript +/** + * 设置拖拽监听的区域 shell，以及自定义拖拽转换函数 boost +* set a html element as shell to dragon as monitoring target, and +* set boost function which is used to transform a MouseEvent to type +* IPublicTypeDragNodeDataObject. + * @param shell 拖拽监听的区域 + * @param boost 拖拽转换函数 + */ +from(shell: Element, boost: (e: MouseEvent) => IPublicTypeDragNodeDataObject | null): any; +``` + +### boost + +发射拖拽对象 +```typescript +/** + * 发射拖拽对象 + * boost your dragObject for dragging(flying) + * + * @param dragObject 拖拽对象 + * @param boostEvent 拖拽初始时事件 + */ +boost(dragObject: IPublicTypeDragObject, boostEvent: MouseEvent | DragEvent, fromRglNode?: IPublicModelNode): void; +``` + +### addSensor + +添加投放感应区 + +```typescript +/** + * 添加投放感应区 + * add sensor area + */ +addSensor(sensor: any): void; +``` + +### removeSensor + +移除投放感应 + +```typescript +/** + * 移除投放感应 + * remove sensor area + */ +removeSensor(sensor: any): void; +``` \ No newline at end of file diff --git a/docs/docs/api/model/drop-location.md b/docs/docs/api/model/drop-location.md new file mode 100644 index 0000000000..dc6a684e42 --- /dev/null +++ b/docs/docs/api/model/drop-location.md @@ -0,0 +1,54 @@ +--- +title: DropLocation +sidebar_position: 13 +--- + +> **@types** [IPublicModelDropLocation](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/drop-location.ts)
+> **@since** v1.1.0 + + +## 基本介绍 + +拖拽放置位置模型 + +## 属性 + +### target + +拖拽放置位置目标 + +`@type {IPublicModelNode | null}` + +相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) + +### detail + +拖拽放置位置详情 + +`@type {IPublicTypeLocationDetail}` + +相关类型：[IPublicTypeLocationDetail](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/location-detail.ts) + +### event + +拖拽放置位置对应的事件 + +`@type {IPublicTypeLocationDetail}` + +相关类型：[IPublicModelLocateEvent](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/location-event.ts) + +## 方法 + +### clone + +获取一份当前对象的克隆 + +```typescript +/** + * 获取一份当前对象的克隆 + * get a clone object of current dropLocation + */ +clone(event: IPublicModelLocateEvent): IPublicModelDropLocation; +``` + +相关类型：[IPublicModelLocateEvent](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/location-event.ts) \ No newline at end of file diff --git a/docs/docs/api/model/editor-view.md b/docs/docs/api/model/editor-view.md new file mode 100644 index 0000000000..a3cc83e1f2 --- /dev/null +++ b/docs/docs/api/model/editor-view.md @@ -0,0 +1,21 @@ +--- +title: EditorView +sidebar_position: 12 +--- + +> **[@experimental](./#experimental)**
+> **@types** [IPublicModelEditorView](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/editor-view.ts)
+> **@since** v1.1.7 + +窗口编辑视图 + +## 类型定义 + +``` +import { IPublicModelPluginContext } from "./plugin-context"; + +export interface IPublicModelEditorView extends IPublicModelPluginContext {}; + +``` + +相关类型定义: [IPublicModelPluginContext](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/plugin-context.ts) diff --git a/docs/docs/api/model/history.md b/docs/docs/api/model/history.md new file mode 100644 index 0000000000..b8c4d791b1 --- /dev/null +++ b/docs/docs/api/model/history.md @@ -0,0 +1,124 @@ +--- +title: History +sidebar_position: 5 +--- +> **@types** [IPublicModelHistory](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/history.ts)
+> **@since** v1.0.0 + +## 基本介绍 + +操作历史记录模型 + +## 方法 +### go + +历史记录跳转到指定位置 + +```typescript +/** + * 历史记录跳转到指定位置 + * go to a specific history + * @param cursor + */ +go(cursor: number): void; +``` + +### back + +历史记录后退 + +```typescript +/** + * 历史记录后退 + * go backward in history + */ +back(): void; +``` + +### forward + +forward() + +历史记录前进 + +```typescript +/** + * 历史记录前进 + * go forward in history + */ +forward(): void; +``` + +### savePoint + +保存当前状态 + +```typescript +/** + * 保存当前状态 + * do save current change as a record in history + */ +savePoint(): void; +``` + +### isSavePoint + +当前是否是「保存点」，即是否有状态变更但未保存 + +```typescript +/** + * 当前是否是「保存点」，即是否有状态变更但未保存 + * check if there is unsaved change for history + */ +isSavePoint(): boolean; +``` + +### getState + +获取 state，判断当前是否为「可回退」、「可前进」的状态 + +```typescript +/** + * 获取 state，判断当前是否为「可回退」、「可前进」的状态 + * get flags in number which indicat current change state + * + * | 1 | 1 | 1 | + * | -------- | -------- | -------- | + * | modified | redoable | undoable | + * eg: + * 7 means : modified && redoable && undoable + * 5 means : modified && undoable + */ +getState(): number; +``` + +## 事件 +### onChangeState + +监听 state 变更事件 + +```typescript +/** + * 监听 state 变更事件 + * monitor on stateChange event + * @param func + */ +onChangeState(func: () => any): IPublicTypeDisposable; +``` + +相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) + +### onChangeCursor + +监听历史记录游标位置变更事件 + +```typescript +/** + * 监听历史记录游标位置变更事件 + * monitor on cursorChange event + * @param func + */ +onChangeCursor(func: () => any): IPublicTypeDisposable; +``` + +相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) \ No newline at end of file diff --git a/docs/docs/api/model/modal-nodes-manager.md b/docs/docs/api/model/modal-nodes-manager.md new file mode 100644 index 0000000000..fead53f0a1 --- /dev/null +++ b/docs/docs/api/model/modal-nodes-manager.md @@ -0,0 +1,94 @@ +--- +title: ModalNodesManager +sidebar_position: 7 +--- +> **@types** [IPublicModelModalNodesManager](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/modal-nodes-manager.ts)
+> **@since** v1.0.0 + +## 基本介绍 + +模态节点管理器模型 + +## 方法 + +### setNodes + +设置模态节点，触发内部事件 + +```typescript +/** + * 设置模态节点，触发内部事件 + * set modal nodes, trigger internal events + */ +setNodes(): void; +``` + +### getModalNodes + +获取模态节点（们） + +```typescript +/** + * 获取模态节点（们） + * get modal nodes + */ +getModalNodes(): IPublicModelNode[]; +``` + +相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) + +### getVisibleModalNode + +获取当前可见的模态节点 + +```typescript +/** + * 获取当前可见的模态节点 + * get current visible modal node + */ +getVisibleModalNode(): IPublicModelNode | null; +``` + +相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) + +### hideModalNodes + +隐藏模态节点（们） + +```typescript +/** + * 隐藏模态节点（们） + * hide modal nodes + */ +hideModalNodes(): void; +``` + +### setVisible + +设置指定节点为可见态 + +```typescript +/** + * 设置指定节点为可见态 + * set specific model node as visible + * @param node IPublicModelNode + */ +setVisible(node: IPublicModelNode): void; +``` + +相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) + +### setInvisible + +设置指定节点为不可见态 + +```typescript +/** + * 设置指定节点为不可见态 + * set specific model node as invisible + * @param node IPublicModelNode + */ +setInvisible(node: IPublicModelNode): void; +``` + +相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) diff --git a/docs/docs/api/model/node-children.md b/docs/docs/api/model/node-children.md new file mode 100644 index 0000000000..5507fcbfb8 --- /dev/null +++ b/docs/docs/api/model/node-children.md @@ -0,0 +1,325 @@ +--- +title: NodeChildren +sidebar_position: 2 +--- +> **@types** [IPublicModelNodeChildren](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node-children.ts)
+> **@since** v1.0.0 + +## 基本介绍 +节点孩子模型 + +## 属性 +### owner + +返回当前 children 实例所属的节点实例 + +`@type {IPublicModelNode | null}` + +相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) + +### size + +children 内的节点实例数 + +`@type {number}` + + +### isEmptyNode + +是否为空 + +`@type {boolean}` + +**@since v1.1.0** +> v1.1.0 之前请使用 `isEmpty` + +### notEmptyNode + +是否不为空 + +`@type {boolean}` + +**@since v1.1.0** + +## 方法 +### delete +删除指定节点 + +```typescript +/** + * 删除指定节点 + * delete the node + * @param node + */ +delete(node: IPublicModelNode): boolean; +``` + +相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) + +### insert + +插入一个节点 + +```typescript +/** + * 插入一个节点 + * insert the node + * @param node + */ +insert(node: IPublicModelNode): boolean; +``` + +相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) + + +### indexOf + +返回指定节点的下标 + +```typescript +/** + * 返回指定节点的下标 + * get index of node in current children + * @param node + * @returns + */ +indexOf(node: IPublicModelNode): number; +``` + +相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) + +### splice + +类似数组 splice 操作 + +```typescript +/** + * 类似数组 splice 操作 + * provide the same function with {Array.prototype.splice} + * @param start + * @param deleteCount + * @param node + */ +splice(start: number, deleteCount: number, node?: IPublicModelNode): any; +``` + +相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) + + +### get + +返回指定下标的节点 + +```typescript +/** + * 返回指定下标的节点 + * get node with index + * @param index + * @returns + */ +get(index: number): IPublicModelNode | null; +``` + +相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) + + +### has + +是否包含指定节点 + +```typescript +/** + * 是否包含指定节点 + * check if node exists in current children + * @param node + * @returns + */ +has(node: IPublicModelNode): boolean; +``` + +相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) + + +### forEach + +类似数组的 forEach + +```typescript +/** + * 类似数组的 forEach + * provide the same function with {Array.prototype.forEach} + * @param fn + */ +forEach(fn: (node: IPublicModelNode, index: number) => void): void; + +``` + +相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) + +### reverse + +类似数组的 reverse + +```typescript +/** + * 类似数组的 reverse + * provide the same function with {Array.prototype.reverse} + */ +reverse(): IPublicModelNode[]; + +``` + +相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) + + +### map + +类似数组的 map + +```typescript +/** + * 类似数组的 map + * provide the same function with {Array.prototype.map} + * @param fn + */ +map
+> **@since** v1.0.0 + +## 基本介绍 + +节点模型 + +## 属性 +### id + +节点 id + +`@type {string}` + +### title + +节点标题 + +`@type {string | IPublicTypeI18nData | ReactElement}` + +相关类型：[IPublicTypeI18nData](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/i18n-data.ts) + +### isContainerNode + +是否为「容器型」节点 + +`@type {boolean}` + +**@since v1.1.0** +> v1.1.0 之前请使用 `isContainer` + +### isRootNode + +是否为根节点 + +`@type {boolean}` + +**@since v1.1.0** + +> v1.1.0 之前请使用 `isRoot` + +### isEmptyNode + +是否为空节点（无 children 或者 children 为空） + +`@type {boolean}` + +**@since v1.1.0** + +> v1.1.0 之前请使用 `isEmpty` + +### isPageNode + +是否为 Page 节点 + +`@type {boolean}` + +**@since v1.1.0** + +> v1.1.0 之前请使用 `isPage` + +### isComponentNode + +是否为 Component 节点 + +`@type {boolean}` + +**@since v1.1.0** + +> v1.1.0 之前请使用 `isComponent` + +### isModalNode + +是否为「模态框」节点 + +`@type {boolean}` + +**@since v1.1.0** + +> v1.1.0 之前请使用 `isModal` + +### isSlotNode + +是否为插槽节点 + +`@type {boolean}` + +**@since v1.1.0** + +> v1.1.0 之前请使用 `isSlot` + +### isParentalNode + +是否为父类/分支节点 + +`@type {boolean}` + +**@since v1.1.0** + +> v1.1.0 之前请使用 `isParental` + +### isLeafNode + +是否为叶子节点 + +`@type {boolean}` + +**@since v1.1.0** + +> v1.1.0 之前请使用 `isLeaf` + +### isLocked + +获取当前节点的锁定状态 + +**@since v1.0.16** + +### isRGLContainerNode +设置为磁贴布局节点，使用方式可参考：[磁贴布局在钉钉宜搭报表设计引擎中的实现](https://mp.weixin.qq.com/s/PSTut5ahAB8nlJ9kBpBaxw) + +`@type {boolean}` + +**@since v1.1.0** + +> v1.0.16 - v1.1.0 请使用 `isRGLContainer` + +### index + +下标 + +`@type {number}` + +### icon + +图标 + +`@type {IPublicTypeIconType}` + +相关类型：[IPublicTypeIconType](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/icon-type.ts) + +### zLevel + +节点所在树的层级深度，根节点深度为 0 + +`@type {number}` + +### componentName + +节点 componentName + +`@type {string}` + +### componentMeta + +节点的物料元数据 + +`@type {IPublicModelComponentMeta | null}` + +相关类型：[IPublicModelComponentMeta](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/component-meta.ts) + + +### document + +获取节点所属的[文档模型](./document-model)对象 + +`@type {IPublicModelDocumentModel | null}` + +相关类型：[IPublicModelDocumentModel](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/document-model.ts) + +### prevSibling + +获取当前节点的前一个兄弟节点 + +`@type {IPublicModelNode | null}` + +### nextSibling + +获取当前节点的后一个兄弟节点 + +`@type {IPublicModelNode | null}` + +### parent + +获取当前节点的父亲节点 + +`@type {IPublicModelNode | null}` + +### children + +获取当前节点的孩子节点模型 + +`@type {IPublicModelNodeChildren | null}` + +相关类型：[IPublicModelNodeChildren](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node-children.ts) + +### slots + +节点上挂载的插槽节点们 + +`@type {IPublicModelNode[]}` + +### slotFor + +当前节点为插槽节点时，返回节点对应的属性实例 + +`@type {IPublicModelProp | null}` + +相关类型：[IPublicModelProp](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/prop.ts) + +### props + +返回节点的属性集 + +`@type {IPublicModelProps | null}` + +相关类型：[IPublicModelProps](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/props.ts) + + +### propsData + +返回节点的属性集值 + +`@type {IPublicTypePropsMap | IPublicTypePropsList | null}` + +相关类型： +- [IPublicTypePropsMap](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/props-map.ts) +- [IPublicTypePropsList](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/props-list.ts) + +### conditionGroup + +获取条件组 + +`@type {IPublicModelExclusiveGroup | null}` + +相关类型：[IPublicModelExclusiveGroup](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/exclusive-group.ts) + +**@since v1.1.0** + +### schema + +获取符合搭建协议 - 节点 schema 结构 + +`@type {IPublicTypeNodeSchema | null}` + +相关类型：[IPublicTypeNodeSchema](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/node-schema.ts) + +### settingEntry + +获取对应的 setting entry + +`@type {IPublicModelSettingTopEntry}` + +相关章节：[设置器顶层操作对象](./setting-top-entry) + +相关类型：[IPublicModelSettingTopEntry](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/setting-top-entry.ts) + +### visible +当前节点是否可见 + +`@type {boolean}` + +**@since v1.1.0** + +## 方法 + +### getRect + +返回节点的尺寸、位置信息 + +```typescript +/** + * 返回节点的尺寸、位置信息 + * get rect information for this node + */ +getRect(): DOMRect | null; +``` + +### hasSlots + +是否有挂载插槽节点 + +```typescript +/** + * 是否有挂载插槽节点 + * check if current node has slots + */ +hasSlots(): boolean; +``` + +### hasCondition + +是否设定了渲染条件 + +```typescript +/** + * 是否设定了渲染条件 + * check if current node has condition value set + */ +hasCondition(): boolean; +``` + +### hasLoop + +是否设定了循环数据 + +```typescript +/** + * 是否设定了循环数据 + * check if loop is set for this node + */ +hasLoop(): boolean; +``` + +### getProp + +获取指定 path 的属性模型实例 + +```typescript +/** + * 获取指定 path 的属性模型实例 + * get prop by path + * @param path 属性路径，支持 a / a.b / a.0 等格式 + */ +getProp(path: string, createIfNone: boolean): IPublicModelProp | null; +``` + +相关类型：[IPublicModelProp](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/prop.ts) + +### getPropValue + +获取指定 path 的属性模型实例值 + +```typescript +/** + * 获取指定 path 的属性模型实例值 + * get prop value by path + * @param path 属性路径，支持 a / a.b / a.0 等格式 + */ +getPropValue(path: string): any; +``` + +### getExtraProp + +获取指定 path 的属性模型实例，注：导出时，不同于普通属性，该属性并不挂载在 props 之下，而是与 props 同级 + +```typescript +/** + * 获取指定 path 的属性模型实例， + * 注：导出时，不同于普通属性，该属性并不挂载在 props 之下，而是与 props 同级 + * + * get extra prop by path, an extra prop means a prop not exists in the `props` + * but as siblint of the `props` + * @param path 属性路径，支持 a / a.b / a.0 等格式 + * @param createIfNone 当没有属性的时候，是否创建一个属性 + */ +getExtraProp(path: string, createIfNone?: boolean): IPublicModelProp | null; +``` + +相关类型：[IPublicModelProp](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/prop.ts) + +### getExtraPropValue + +获取指定 path 的属性模型实例，注：导出时，不同于普通属性，该属性并不挂载在 props 之下，而是与 props 同级 + +```typescript +/** + * 获取指定 path 的属性模型实例， + * 注：导出时，不同于普通属性，该属性并不挂载在 props 之下，而是与 props 同级 + * + * get extra prop value by path, an extra prop means a prop not exists in the `props` + * but as siblint of the `props` + * @param path 属性路径，支持 a / a.b / a.0 等格式 + * @returns + */ +getExtraPropValue(path: string): any; +``` + +### setPropValue + +setPropValue(path: string, value: CompositeValue) + +设置指定 path 的属性模型实例值 + +```typescript +/** + * 设置指定 path 的属性模型实例值 + * set value for prop with path + * @param path 属性路径，支持 a / a.b / a.0 等格式 + * @param value 值 + */ +setPropValue(path: string, value: IPublicTypeCompositeValue): void; +``` + +相关类型：[IPublicTypeCompositeValue](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/composite-value.ts) + + +### setExtraPropValue + +设置指定 path 的属性模型实例值 + +```typescript +/** + * 设置指定 path 的属性模型实例值 + * set value for extra prop with path + * @param path 属性路径，支持 a / a.b / a.0 等格式 + * @param value 值 + */ +setExtraPropValue(path: string, value: IPublicTypeCompositeValue): void; +``` + +相关类型：[IPublicTypeCompositeValue](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/composite-value.ts) + +### importSchema + +导入节点数据 + +```typescript +/** + * 导入节点数据 + * import node schema + * @param data + */ +importSchema(data: IPublicTypeNodeSchema): void; +``` + +相关类型：[IPublicTypeNodeSchema](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/node-schema.ts) + +### exportSchema + +导出节点数据 + +```typescript +/** + * 导出节点数据 + * export schema from this node + * @param stage + * @param options + */ +exportSchema(stage: IPublicEnumTransformStage, options?: any): IPublicTypeNodeSchema; +``` + +相关类型： +- [IPublicEnumTransformStage](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/enum/transform-stage.ts) +- [IPublicTypeNodeSchema](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/node-schema.ts) + +### insertBefore + +在指定位置之前插入一个节点 + +```typescript +/** + * 在指定位置之前插入一个节点 + * insert a node befor current node + * @param node + * @param ref + * @param useMutator + */ +insertBefore( + node: IPublicModelNode, + ref?: IPublicModelNode | undefined, + useMutator?: boolean, + ): void; +``` + +### insertAfter + +在指定位置之后插入一个节点 + +```typescript +/** + * 在指定位置之后插入一个节点 + * insert a node after this node + * @param node + * @param ref + * @param useMutator + */ +insertAfter( + node: IPublicModelNode, + ref?: IPublicModelNode | undefined, + useMutator?: boolean, + ): void; +``` + +### replaceChild + +替换指定子节点 + +```typescript +/** + * 替换指定子节点 + * replace a child node with data provided + * @param node 待替换的子节点 + * @param data 用作替换的节点对象或者节点描述 + * @returns + */ +replaceChild(node: IPublicModelNode, data: any): IPublicModelNode | null; +``` + +### replaceWith + +将当前节点替换成指定节点描述 + +```typescript +/** + * 将当前节点替换成指定节点描述 + * replace current node with a new node schema + * @param schema + */ +replaceWith(schema: IPublicTypeNodeSchema): any; +``` + +相关类型：[IPublicTypeNodeSchema](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/node-schema.ts) + +### select + +选中当前节点实例 + +```typescript +/** + * 选中当前节点实例 + * select current node + */ +select(): void; +``` + +### hover + +设置悬停态 + +```typescript +/** + * 设置悬停态 + * set hover value for current node + * @param flag + */ +hover(flag: boolean): void; +``` + +### lock +设置节点锁定状态 + +```typescript +/** + * 设置节点锁定状态 + * set lock value for current node + * @param flag + * @since v1.0.16 + */ +lock(flag?: boolean): void; +``` + +**@since v1.0.16** + +### remove + +删除当前节点实例 + +```typescript +/** + * 删除当前节点实例 + * remove current node + */ +remove(): void; +``` + +### mergeChildren + +执行新增、删除、排序等操作 + +```typescript +/** + * 执行新增、删除、排序等操作 + * excute remove/add/sort operations on node`s children + * + * @since v1.1.0 + */ +mergeChildren( + remover: (node: IPublicModelNode, idx: number) => boolean, + adder: (children: IPublicModelNode[]) => any, + sorter: (firstNode: IPublicModelNode, secondNode: IPublicModelNode) => number +): any; +``` + +**@since v1.1.0** + +### contains + +当前节点是否包含某子节点 + +```typescript +/** + * 当前节点是否包含某子节点 + * check if current node contains another node as a child + * @param node + * @since v1.1.0 + */ +contains(node: IPublicModelNode): boolean; +``` + +**@since v1.1.0** + +### canPerformAction + +是否可执行某 action + +```typescript +/** + * 是否可执行某 action + * check if current node can perform certain aciton with actionName + * @param actionName action 名字 + * @since v1.1.0 + */ +canPerformAction(actionName: string): boolean; +``` + +**@since v1.1.0** + +### isConditionalVisible + +获取该节点的 ConditionalVisible 值 + +```typescript +/** + * 获取该节点的 ConditionalVisible 值 + * check if current node ConditionalVisible + * @since v1.1.0 + */ +isConditionalVisible(): boolean | undefined; +``` + +**@since v1.1.0** + +### setConditionalVisible +设置该节点的 ConditionalVisible 为 true + +```typescript +/** + * 设置该节点的 ConditionalVisible 为 true + * make this node as conditionalVisible === true + * @since v1.1.0 + */ +setConditionalVisible(): void; +``` + +**@since v1.1.0** + +### getDOMNode +获取节点实例对应的 dom 节点 + +```typescript +/** + * 获取节点实例对应的 dom 节点 + */ +getDOMNode(): HTMLElement; + +``` + +### getRGL + +获取磁贴相关信息 + +```typescript +/** + * 获取磁贴相关信息 + */ +getRGL(): { + isContainerNode: boolean; + isEmptyNode: boolean; + isRGLContainerNode: boolean; + isRGLNode: boolean; + isRGL: boolean; + rglNode: IPublicModelNode | null; +} +``` \ No newline at end of file diff --git a/docs/docs/api/model/plugin-instance.md b/docs/docs/api/model/plugin-instance.md new file mode 100644 index 0000000000..14ce388376 --- /dev/null +++ b/docs/docs/api/model/plugin-instance.md @@ -0,0 +1,40 @@ +--- +title: PluginInstance +sidebar_position: 12 +--- + +> **@types** [IPublicModelPluginInstance](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/plugin-instance.ts)
+> **@since** v1.1.0 + + +## 基本介绍 + +插件实例 + +## 属性 + +### pluginName + +插件名字 + +`@type {string}` + +### dep + +插件依赖 + +`@type {string[]}` + +### disabled + +插件是否禁用 + +`@type {boolean}` + +### meta + +插件 meta 信息 + +`@type {IPublicTypePluginMeta}` + +相关类型：[IPublicTypePluginMeta](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/plugin-meta.ts) diff --git a/docs/docs/api/model/prop.md b/docs/docs/api/model/prop.md new file mode 100644 index 0000000000..d9b0d14f42 --- /dev/null +++ b/docs/docs/api/model/prop.md @@ -0,0 +1,108 @@ +--- +title: Prop +sidebar_position: 3 +--- +> **@types** [IPublicModelProp](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/prop.ts)
+> **@since** v1.0.0 + +## 基本介绍 + +属性模型 + +## 属性 + +### id + +id + +`@type {string}` + +### key + +key 值 + +`@type {string | number | undefined}` + +### path + +返回当前 prop 的路径 + +`@type {string[]}` + +### node + +返回所属的节点实例 + +`@type {IPublicModelNode | null}` + +相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) + +### slotNode + +当本 prop 代表一个 Slot 时，返回对应的 slotNode + +`@type {IPublicModelNode | undefined | null}` + +相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) + + +## 方法 + +### setValue + +设置值 + +```typescript +/** + * 设置值 + * set value for this prop + * @param val + */ +setValue(val: IPublicTypeCompositeValue): void; +``` + +相关类型：[IPublicTypeCompositeValue](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/composite-value.ts) + +### getValue + +获取值 + +```typescript +/** + * 获取值 + * get value of this prop + */ +getValue(): any; +``` + +### remove + +移除值 + +```typescript +/** + * 移除值 + * remove value of this prop + * @since v1.0.16 + */ +remove(): void; +``` + +**@since v1.0.16** + +### exportSchema + +导出值 + +```typescript +/** + * 导出值 + * export schema + * @param stage + */ +exportSchema(stage: IPublicEnumTransformStage): IPublicTypeCompositeValue; +``` + +相关类型： +- [IPublicEnumTransformStage](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/enum/transform-stage.ts) +- [IPublicTypeCompositeValue](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/composite-value.ts) \ No newline at end of file diff --git a/docs/docs/api/model/props.md b/docs/docs/api/model/props.md new file mode 100644 index 0000000000..9bd6eaa66b --- /dev/null +++ b/docs/docs/api/model/props.md @@ -0,0 +1,160 @@ +--- +title: Props +sidebar_position: 4 +--- +> **@types** [IPublicModelProps](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/props.ts)
+> **@since** v1.0.0 + +## 基本介绍 + +属性集模型 + +## 属性 +### id + +id + +`@type {string}` + + +### path + +返回当前 props 的路径 + +`@type {string[]}` + + +### node + +返回当前属性集所属的节点实例 + +`@type {IPublicModelNode | null}` + +相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) + +## 方法 +### getProp + +获取指定 path 的属性模型实例 + +```typescript +/** + * 获取指定 path 的属性模型实例 + * get prop by path + * @param path 属性路径，支持 a / a.b / a.0 等格式 + */ +getProp(path: string): IPublicModelProp | null; +``` + +相关类型：[IPublicModelProp](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/prop.ts) + +### getPropValue + +获取指定 path 的属性模型实例值 + +```typescript +/** + * 获取指定 path 的属性模型实例值 + * get value of prop by path + * @param path 属性路径，支持 a / a.b / a.0 等格式 + */ +getPropValue(path: string): any; +``` + +### getExtraProp + +获取指定 path 的属性模型实例，注：导出时，不同于普通属性，该属性并不挂载在 props 之下，而是与 props 同级 + +```typescript +/** + * 获取指定 path 的属性模型实例， + * 注：导出时，不同于普通属性，该属性并不挂载在 props 之下，而是与 props 同级 + * get extra prop by path + * @param path 属性路径，支持 a / a.b / a.0 等格式 + */ +getExtraProp(path: string): IPublicModelProp | null; +``` + +相关类型：[IPublicModelProp](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/prop.ts) + +### getExtraPropValue + +获取指定 path 的属性模型实例值，注：导出时，不同于普通属性，该属性并不挂载在 props 之下，而是与 props 同级 + +```typescript +/** + * 获取指定 path 的属性模型实例值 + * 注：导出时，不同于普通属性，该属性并不挂载在 props 之下，而是与 props 同级 + * get value of extra prop by path + * @param path 属性路径，支持 a / a.b / a.0 等格式 + */ +getExtraPropValue(path: string): any; +``` + +### setPropValue + +设置指定 path 的属性模型实例值 + +```typescript +/** + * 设置指定 path 的属性模型实例值 + * set value of prop by path + * @param path 属性路径，支持 a / a.b / a.0 等格式 + * @param value 值 + */ +setPropValue(path: string, value: IPublicTypeCompositeValue): void; +``` + +相关类型：[IPublicTypeCompositeValue](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/composite-value.ts) + +### setExtraPropValue + +设置指定 path 的属性模型实例值 + +```typescript +/** + * 设置指定 path 的属性模型实例值 + * set value of extra prop by path + * @param path 属性路径，支持 a / a.b / a.0 等格式 + * @param value 值 + */ +setExtraPropValue(path: string, value: IPublicTypeCompositeValue): void; +``` + +相关类型：[IPublicTypeCompositeValue](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/composite-value.ts) + + +### has + +当前 props 是否包含某 prop + +```typescript +/** + * 当前 props 是否包含某 prop + * check if the specified key is existing or not. + * @param key + * @since v1.1.0 + */ +has(key: string): boolean; +``` + +**@since v1.1.0** + +### add + +添加一个 prop + +```typescript +/** + * 添加一个 prop + * add a key with given value + * @param value + * @param key + * @since v1.1.0 + */ +add(value: IPublicTypeCompositeValue, key?: string | number | undefined): any; +``` + +相关类型：[IPublicTypeCompositeValue](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/composite-value.ts) + +**@since v1.1.0** \ No newline at end of file diff --git a/docs/docs/api/model/resource.md b/docs/docs/api/model/resource.md new file mode 100644 index 0000000000..a5fdeaf782 --- /dev/null +++ b/docs/docs/api/model/resource.md @@ -0,0 +1,58 @@ +--- +title: Resource +sidebar_position: 13 +--- + +> **[@experimental](./#experimental)**
+> **@types** [IPublicModelResource](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/resource.ts)
+> **@since** v1.1.0 + +## 属性 + +### title + +资源标题 + +`@type {string}` + +### id + +资源 id + +`@type {string}` + +### name + +资源名字 + +`@type {string}` + +### type + +资源类型 + +`@type {string}` + +### category + +资源分类 + +`@type {string}` + +### icon + +资源 icon + +`@type {ReactElement}` + +### options + +资源配置信息 + +`@type {Object}` + +### config + +资源配置信息 + +`@type {Object}` \ No newline at end of file diff --git a/docs/docs/api/model/selection.md b/docs/docs/api/model/selection.md new file mode 100644 index 0000000000..9fc2e3a1cc --- /dev/null +++ b/docs/docs/api/model/selection.md @@ -0,0 +1,161 @@ +--- +title: Selection +sidebar_position: 6 +--- +> **@types** [IPublicModelSelection](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/selection.ts)
+> **@since** v1.0.0 + +## 基本介绍 + +画布节点选中模型 + +## 属性 +### selected + +返回选中的节点 id + +`@type {string[]}` + +### node +返回选中的节点（如多个节点只返回第一个） + +`@type {IPublicModelNode | null}` + +相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) + +**@since v1.1.0** + +## 方法 +### select + +选中指定节点（覆盖方式） + +```typescript +/** +* 选中指定节点（覆盖方式） +* select node with id, this will override current selection +* @param id +*/ +select(id: string): void; +``` + +### selectAll + +批量选中指定节点们 + +```typescript +/** +* 批量选中指定节点们 +* select node with ids, this will override current selection +* +* @param ids +*/ +selectAll(ids: string[]): void; +``` + +### remove + +**取消选中**选中的指定节点，不会删除组件 + +```typescript +/** +* 移除选中的指定节点 +* remove node from selection with node id +* @param id +*/ +remove(id: string): void; +``` + +### clear + +**取消选中**所有选中节点，不会删除组件 + +```typescript +/** +* 清除所有选中节点 +* clear current selection +*/ +clear(): void; +``` + +### has + +判断是否选中了指定节点 + +```typescript +/** +* 判断是否选中了指定节点 +* check if node with specific id is selected +* @param id +*/ +has(id: string): boolean; +``` + +### add + +选中指定节点（增量方式） + +```typescript +/** +* 选中指定节点（增量方式） +* add node with specific id to selection +* @param id +*/ +add(id: string): void; +``` + +### getNodes + +获取选中的节点实例 + +```typescript +/** +* 获取选中的节点实例 +* get selected nodes +*/ +getNodes(): IPublicModelNode[]; +``` + +相关类型：[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts) + +### getTopNodes +获取选区的顶层节点 +例如选中的节点为： + +- DivA + - ChildrenA +- DivB + +getNodes 返回的是 [DivA、ChildrenA、DivB]，getTopNodes 返回的是 [DivA、DivB]，其中 ChildrenA 由于是二层节点，getTopNodes 不会返回 + +```typescript +/** +* 获取选区的顶层节点 +* get seleted top nodes +* for example: +* getNodes() returns [A, subA, B], then +* getTopNodes() will return [A, B], subA will be removed +* @since v1.0.16 +*/ +getTopNodes(includeRoot?: boolean): IPublicModelNode[]; +``` + +**@since v1.0.16** + +## 事件 +### onSelectionChange + +注册 selection 变化事件回调 + +```typescript +/** +* 注册 selection 变化事件回调 +* set callback which will be called when selection is changed +* @since v1.1.0 +*/ +onSelectionChange(fn: (ids: string[]) => void): IPublicTypeDisposable; +``` + +相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) + +**@since v1.1.0** \ No newline at end of file diff --git a/docs/docs/api/model/setting-field.md b/docs/docs/api/model/setting-field.md new file mode 100644 index 0000000000..226a0c7e5b --- /dev/null +++ b/docs/docs/api/model/setting-field.md @@ -0,0 +1,342 @@ +--- +title: SettingField +sidebar_position: 6 +--- +> **@types** [IPublicModelSettingField](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/setting-field.ts)
+ +## 基本介绍 + +setter 设置器操作对象 + +## 属性 + +#### isGroup + +获取设置属性的 isGroup + +`@type {boolean}` + + +#### id + +获取设置属性的 id + +`@type {string}` + +#### name + +获取设置属性的 name + +`@type {string | number | undefined}` + +#### key + +获取设置属性的 key + +`@type {string | number | undefined}` + +#### path + +获取设置属性的 path + +`@type {(string | number)[]}` + +#### title + +获取设置属性的 title + +`@type {string}` + +#### setter + +获取设置属性的 setter + +`@type {IPublicTypeSetterType | null}` + +#### expanded + +获取设置属性的 expanded + +`@type {boolean}` + +#### extraProps + +获取设置属性的 extraProps + +`@type {IPublicTypeFieldExtraProps}` + +#### props + +`@type {IPublicModelSettingTopEntry}` + +相关章节：[设置器顶层操作对象](./setting-top-entry) + +相关类型：[IPublicModelSettingTopEntry](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/setting-top-entry.ts) + +#### node + +获取设置属性对应的节点实例 + +`@type {IPublicModelNode | null}` + + +#### parent + +获取设置属性的父设置属性 + +`@type {IPublicModelSettingTopEntry | IPublicModelSettingField}` + +相关章节：[设置器顶层操作对象](./setting-top-entry) + +相关类型：[IPublicModelSettingTopEntry](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/setting-top-entry.ts) + +#### top + +获取顶级设置属性 + +`@type {IPublicModelSettingTopEntry}` + +相关章节：[设置器顶层操作对象](./setting-top-entry) + +相关类型：[IPublicModelSettingTopEntry](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/setting-top-entry.ts) + +#### isSettingField + +是否是 SettingField 实例 + +`@type {boolean}` + +#### componentMeta + +`@type {IPublicModelComponentMeta}` + +相关类型：[IPublicModelComponentMeta](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/component-meta.ts) + +#### items + +获取设置属性的 items + +`@type {Array
+ +## 基本介绍 + +setter 设置器顶层操作对象 + +## 属性 + +#### node + +返回所属的节点实例 + +`@type {IPublicModelNode | null}` + +## 方法 + +#### get + +获取子级属性对象 + +``` +/** + * 获取子级属性对象 + * @param propName + * @returns + */ +get(propName: string | number): IPublicModelSettingField | null; +``` +相关章节：[设置器操作对象](./setting-field) + +相关类型：[IPublicModelSettingField](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/setting-field.ts) + + +#### getPropValue + +获取指定 propName 的值 + +``` +/** + * 获取指定 propName 的值 + * @param propName + * @returns + */ +getPropValue(propName: string | number): any; +``` + +#### setPropValue + +设置指定 propName 的值 + +``` +/** + * 设置指定 propName 的值 + * @param propName + * @param value + */ +setPropValue(propName: string | number, value: any): void; +``` + +#### clearPropValue + +清除指定 propName 的值 + +``` +/** + * 清除指定 propName 的值 + * @param propName + */ +clearPropValue(propName: string | number): void; +``` \ No newline at end of file diff --git a/docs/docs/api/model/simulatorRender.md b/docs/docs/api/model/simulatorRender.md new file mode 100644 index 0000000000..f5bacec493 --- /dev/null +++ b/docs/docs/api/model/simulatorRender.md @@ -0,0 +1,38 @@ +--- +title: SimulatorRender +sidebar_position: 6 +--- +> **@types** [IPublicModelSimulatorRender](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/simulator-render.ts)
+> **@since** v1.0.0 + +## 基本介绍 + +画布节点选中模型 + +## 属性 +### components + +画布组件列表 + +```typescript +/** + * 画布组件列表 + */ +components: { + [key: string]: any; +} +``` + +## 方法 + +### rerender + +触发画布重新渲染 + +```typescript +/** + * 触发画布重新渲染 + */ +rerender: () => void; +``` + diff --git a/docs/docs/api/model/window.md b/docs/docs/api/model/window.md new file mode 100644 index 0000000000..9db39996fa --- /dev/null +++ b/docs/docs/api/model/window.md @@ -0,0 +1,107 @@ +--- +title: Window +sidebar_position: 12 +--- + +> **[@experimental](./#experimental)**
+> **@types** [IPublicModelWindow](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/window.ts)
+> **@since** v1.1.0 + + +## 基本介绍 + +低代码设计器窗口模型 + +## 属性 + +### id + +窗口唯一 id + +`@type {string}` + +### title + +窗口标题 + +`@type {string}` + +### icon + +`@type {ReactElement}` + +### resource + +窗口对应资源 + +`@type {IPublicModelResource}` + +关联模型 [IPublicModelResource](./resource) + +### currentEditorView +窗口当前视图 + +`@type {IPublicModelEditorView}` + +关联模型 [IPublicModelEditorView](./editor-view) + +**@since v1.1.7** + +### editorViews + +窗口所有视图 + +`@type {IPublicModelEditorView[]}` + +关联模型 [IPublicModelEditorView](./editor-view) + +**@since v1.1.7** + +## 方法 + +### importSchema +当前窗口导入 schema, 会调用当前窗口对应资源的 import 钩子 + +```typescript +function importSchema(schema: IPublicTypeNodeSchema): void +``` + +相关类型：[IPublicTypeNodeSchema](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/node-schema.ts) + +### changeViewType +修改当前窗口视图类型 + +```typescript +function changeViewType(viewName: string): void +``` + +### save +当前窗口的保存方法，会调用当前窗口对应资源的 save 钩子 + +```typescript +function save(): Promise(void) +``` + +## 事件 + +### onChangeViewType + +窗口视图变更事件 + +``` +onChangeViewType(fn: (viewName: string) => void): IPublicTypeDisposable; +``` + +相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) + +### onSave + +窗口视图保存事件 + +``` +onSave(fn: () => void): IPublicTypeDisposable; +``` + +相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) + +**@since v1.1.7** diff --git a/docs/docs/api/plugins.md b/docs/docs/api/plugins.md index 8762dbacd6..df025f49e9 100644 --- a/docs/docs/api/plugins.md +++ b/docs/docs/api/plugins.md @@ -1,33 +1,36 @@ --- title: plugins - 插件 API -sidebar_position: 4 +sidebar_position: 2 --- +> **@types** [IPublicApiPlugins](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/plugins.ts)
+> **@since** v1.0.0 + ## 模块简介 插件管理器，提供编排模块中管理插件的能力。 -## 变量（variables） -无 -## 方法签名（functions） + +## 方法 ### register 注册插件 -#### 类型定义 ```typescript async function register( - pluginConfigCreator: (ctx: ILowCodePluginContext) => ILowCodePluginConfig, - options?: ILowCodeRegisterOptions, + plugin: IPublicTypePlugin, + options?: IPublicTypePluginRegisterOptions, ): Promise
+> **@since** v1.0.0 - // 声明 Setter 的 title - static displayName = 'AltStringSetter'; - - render() { - const { onChange, value, placeholder } = this.props; - return ( - onChange(val)} - > - ); - } -} -``` -开发完毕之后，注册 AltStringSetter 到设计器中： -```typescript -import AltStringSetter from './AltStringSetter'; -const registerSetter = window.AliLowCodeEngine.setters.registerSetter; -registerSetter('AltStringSetter', AltStringSetter); -``` -注册之后，我们就可以在物料中使用了，其中核心配置如下： -```typescript -{ - "props": { - "isExtends": true, - "override": [ - { - "name": "type", - "setter": "AltStringSetter" - } - ] - } -} -``` -完整配置如下： -```typescript -{ - "componentName": "Message", - "title": "Message", - "props": [ - { - "name": "title", - "propType": "string", - "description": "标题", - "defaultValue": "标题" - }, - { - "name": "type", - "propType": { - "type": "oneOf", - "value": [ - "success", - "warning", - "error", - "notice", - "help", - "loading" - ] - }, - "description": "反馈类型", - "defaultValue": "success" - } - ], - "configure": { - "props": { - "isExtends": true, - "override": [ - { - "name": "type", - "setter": "AltStringSetter" - } - ] - } - } -} -``` ## 模块简介 负责注册设置器、管理设置器的 API。注册自定义设置器之后可以在物料中进行使用。 -## 方法签名（functions） +## 方法 ### getSetter 获取指定 setter -**类型定义** ```typescript -function getSetter(type: string): RegisteredSetter; +/** + * 获取指定 setter + * get setter by type + * @param type + * @returns + */ +getSetter(type: string): IPublicTypeRegisteredSetter | null; ``` +相关类型：[IPublicTypeRegisteredSetter](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/registerd-setter.ts) ### getSettersMap 获取已注册的所有 settersMap -**类型定义** ```typescript -function getSettersMap(): Map
+> **@since** v1.0.0 + +## 模块简介 负责模拟器相关的 API，包括画布尺寸、语言等。 -# 方法（functions） -## set +## 方法 +### set +设置 host 配置值 +```typescript +/** + * 设置若干用于画布渲染的变量，比如画布大小、locale 等。 + * set config for simulator host, eg. device locale and so on. + * @param key + * @param value + */ +set(key: string, value: any): void; +``` +**示例** 设置若干用于画布渲染的变量，比如画布大小、locale 等。 以设置画布大小为例： @@ -21,11 +35,41 @@ project.simulatorHost.set('deviceClassName', 'my-canvas-class'); project.simulatorHost.set('deviceStyle', { canvas: { width: '300px', backgroundColor: 'red' }, viewport: { width: '280px' } }); ``` -## get +### get 获取模拟器中设置的变量，比如画布大小、locale 等。 + +```typescript +/** + * 获取模拟器中设置的变量，比如画布大小、locale 等。 + * set config value by key + * @param key + * @returns + */ +get(key: string): any; + +``` + +### rerender +触发组件构建，并刷新渲染画布 + ```typescript -project.simulatorHost.get('device'); +/** + * 触发组件构建，并刷新渲染画布 + * make simulator render again + */ +rerender(): void; ``` -## rerender -刷新渲染画布 +### scrollToNode +滚动到指定节点 + +```typescript +/** + * 滚动到指定节点 + * scroll to specific node + * @param node + * @since v1.1.0 + */ +scrollToNode(node: IPublicModelNode): void; +``` +**@since v1.1.0** diff --git a/docs/docs/api/skeleton.md b/docs/docs/api/skeleton.md index 80e3220f6f..396fad9e9e 100644 --- a/docs/docs/api/skeleton.md +++ b/docs/docs/api/skeleton.md @@ -1,25 +1,63 @@ --- title: skeleton - 面板 API -sidebar_position: 1 +sidebar_position: 10 --- +> **@types** [IPublicApiSkeleton](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/skeleton.ts)
+> **@since** v1.0.0 + + ## 模块简介 -面板 API 提供了面板扩展和管理的能力，如下图蓝色内容都是扩展出来的。
页面上可以扩展的区域共 5 个，具体如下：
 +面板 API 提供了面板扩展和管理的能力，如下图蓝色内容都是扩展出来的。 + + + +页面上可以扩展的区域共 5 个，具体如下： + ### 基本概念 -#### 扩展区域位置(area) +#### 扩展区域位置 (area) ##### topArea -展示在设计器的顶部区域，常见的相关区域的插件主要是：
1）注册设计器 Logo；
2）设计器操作回退和撤销按钮；
3）全局操作按钮，例如：保存、预览等； + +展示在设计器的顶部区域，常见的相关区域的插件主要是： +1. 注册设计器 Logo； +2. 设计器操作回退和撤销按钮； +3. 全局操作按钮，例如：保存、预览等； ##### leftArea -左侧区域的展示形式大多数是 Icon 和对应的面板，通过点击 Icon 可以展示对应的面板并隐藏其他的面板。
该区域相关插件的主要有：
1）大纲树展示，展示该设计器设计页面的大纲。
2）组件库，展示注册到设计器中的组件，点击之后，可以从组件库面板中拖拽到设计器的画布中。
3）数据源面板
4）JS 等代码面板。
可以发现，这个区域的面板大多数操作时是不需要同时并存的，且交互比较复杂的，需要一个更整块的区域来进行操作。 + +左侧区域的展示形式大多数是 Icon 和对应的面板，通过点击 Icon 可以展示对应的面板并隐藏其他的面板。 + +该区域相关插件的主要有： +1. 大纲树展示，展示该设计器设计页面的大纲。 +2. 组件库，展示注册到设计器中的组件，点击之后，可以从组件库面板中拖拽到设计器的画布中。 +3. 数据源面板 +4. JS 等代码面板。 + +可以发现，这个区域的面板大多数操作时是不需要同时并存的，且交互比较复杂的，需要一个更整块的区域来进行操作。 + ##### centerArea -画布区域，由于画布大多数是展示作用，所以一般扩展的种类比较少。常见的扩展有：
1）画布大小修改
2）物料选中扩展区域修改 + +画布区域，由于画布大多数是展示作用，所以一般扩展的种类比较少。常见的扩展有： +1. 画布大小修改 +2. 物料选中扩展区域修改 ##### rightArea + 右侧区域，常用于组件的配置。常见的扩展有：统一处理组件的配置项，例如统一删除某一个配置项，统一添加某一个配置项的。 ##### toolbar + 跟 topArea 类似，按需放置面板插件~ -#### 展示类型(type) -展示类型用于区分插件在设计器内可操作的几种不同界面类型。主要的几种类型为PanelDock、Widget、Dock，另有Panel类型目前不推荐使用。 +#### 展示类型 (type) + +展示类型用于区分插件在设计器内可操作的几种不同界面类型。主要的几种类型为 PanelDock、Widget、Dock，另有 Panel 类型目前不推荐使用。 ##### PanelDock -PanelDock 是以面板的形式展示在设计器的左侧区域的。其中主要有两个部分组成，一个是图标，一个是面板。当点击图标时可以控制面板的显示和隐藏。
下图是组件库插件的展示效果。
其中右上角可以进行固定，可以对弹出的宽度做设定
接入可以参考代码 + +PanelDock 是以面板的形式展示在设计器的左侧区域的。其中主要有两个部分组成，一个是图标，一个是面板。当点击图标时可以控制面板的显示和隐藏。 + +下图是组件库插件的展示效果。 + + + +其中右上角可以进行固定，可以对弹出的宽度做设定 + +接入可以参考代码 ```javascript import { skeleton } from "@alilc/lowcode-engine"; @@ -31,7 +69,8 @@ skeleton.add({ props: { align: "left", icon: "wenjian", - description: "JS面板", + title: '标题', // 图标下方展示的标题 + description: "JS 面板", }, panelProps: { floatable: true, // 是否可浮动 @@ -39,22 +78,27 @@ skeleton.add({ hideTitleBar: false, maxHeight: 800, maxWidth: 1200, - title: "JS面板", + title: "JS 面板", width: 600, }, }); ``` ##### Widget -Widget 形式是直接渲染在当前编辑器的对应位置上。如 demo 中在设计器顶部的所有组件都是这种展现形式。
接入可以参考代码： +Widget 形式是直接渲染在当前编辑器的对应位置上。如 demo 中在设计器顶部的所有组件都是这种展现形式。 + + + +接入可以参考代码： + ```javascript -import {skeleton} from "@alilc/lowcode-engine"; +import { skeleton } from "@alilc/lowcode-engine"; // 注册 logo 面板 skeleton.add({ area: "topArea", type: "Widget", name: "logo", - content: Logo, // Widget 组件实例 - contentProps: { // Widget 插件props + content: Logo, // Widget 组件实例 + contentProps: { // Widget 插件 props logo: "https://img.alicdn.com/tfs/TB1_SocGkT2gK0jSZFkXXcIQFXa-66-66.png", href: "/", @@ -66,7 +110,9 @@ skeleton.add({ }); ``` ##### Dock -一个图标的表现形式，可以用于语言切换、跳转到外部链接、打开一个 widget 等场景 + +一个图标的表现形式，可以用于语言切换、跳转到外部链接、打开一个 widget 等场景。 + ```javascript import { skeleton } from "@alilc/lowcode-engine"; @@ -74,41 +120,44 @@ skeleton.add({ area: "leftArea", type: "Dock", name: "opener", - content: Opener, // Widget 组件实例 - contentProps: { // Widget 插件props - xxx: "1", - }, props: { + icon: Icon, // Icon 组件实例 align: "bottom", - }, - onClick: function() { - // 打开外部链接 - window.open('https://lowcode-engine.cn'); - // 显示 widget - skeleton.showWidget('xxx'); + onClick: function () { + // 打开外部链接 + window.open('https://lowcode-engine.cn'); + // 显示 widget + skeleton.showWidget('xxx'); + } } }); ``` -####
-## 变量（variables） -无 -## 方法签名（functions） -### 1. add -```tsx -add(config: IWidgetBaseConfig & { - area?: string; -}, extraConfig?: object): IWidget | Panel; -``` + +## 方法 + +### add 往指定扩展区加入一块面板 +```typescript +/** + * 增加一个面板实例 + * add a new panel + * @param config + * @param extraConfig + * @returns + */ +add(config: IPublicTypeWidgetBaseConfig, extraConfig?: Record
icon: string | ReactElement; // icon 为字符串时，请确定当前 fusion 主题包中包含该 icon
description: string;
condition: Function; // 指定当前面板的显影状态 | | contentProps | 面板的实现类/节点的参数 | | @@ -116,71 +165,311 @@ IWidgetBaseConfig 定义如下： | index | 面板的位置，不传默认按插件注册顺序 | | +### remove +移除一个面板实例 -### 2. remove +```typescript +/** + * 移除一个面板实例 + * remove a panel + * @param config + * @returns + */ +remove(config: IPublicTypeWidgetBaseConfig): number | undefined; +``` -remove(config: IWidgetBaseConfig) +### getPanel -移除一个面板实例 +获取面板实例 + +```typescript +/** + * 获取面板实例 + * @param name 面板名称 + */ +getPanel(name: string): IPublicModelSkeletonItem | undefined; +``` -### 3. showPanel +相关类型：[IPublicModelSkeletonItem](https://github.com/alibaba/lowcode-engine/blob/main/packages/shell/src/model/skeleton-item.ts) -showPanel(name: string) +@since v1.1.10 + +### showPanel 展示指定 Panel 实例 -### 4. hidePanel +```typescript +/** + * 展示指定 Panel 实例 + * show panel by name + * @param name + */ +showPanel(name: string): void; +``` -hidePanel(name: string) +### hidePanel +隐藏面板 -### 5. showWidget +```typescript +/** + * 隐藏面板 + * hide panel by name + * @param name + */ +hidePanel(name: string): void; +``` -showWidget(name: string) +### showWidget 展示指定 Widget 实例 -### 6. hideWidget +```typescript +/** + * 展示指定 Widget 实例 + * show widget by name + * @param name + */ +showWidget(name: string): void; +``` + +### enableWidget +将 widget 启用。 +```typescript +/** + * 将 widget 启用 + * enable widget + * @param name + */ +enableWidget(name: string): void; +``` -hideWidget(name: string) +### hideWidget 隐藏指定 widget 实例。 -### 7. enableWidget +```typescript +/** + * 隐藏指定 widget 实例 + * hide widget by name + * @param name + */ +hideWidget(name: string): void; +``` + +### disableWidget + +将 widget 禁用掉，禁用后，所有鼠标事件都会被禁止掉。 + +适用场景：在该面板还在进行初始化构造时，可以先禁止掉，防止用户点击报错，待初始化完成，重新启用。 + +```typescript +/** + * 将 widget 禁用掉，禁用后，所有鼠标事件都会被禁止掉。 + * disable widget，and make it not responding any click event. + * @param name + */ +disableWidget(name: string): void; +``` + +### showArea +显示某个 Area + +```typescript +/** + * 显示某个 Area + * show area + * @param areaName name of area + */ +showArea(areaName: string): void; +``` + + +### hideArea +隐藏某个 Area + +```typescript +/** + * 隐藏某个 Area + * hide area + * @param areaName name of area + */ +hideArea(areaName: string): void; +``` + +### getAreaItems + +获取某个区域下的所有面板实例 + +```typescript +/** + * 获取某个区域下的所有面板实例 + * @param areaName IPublicTypeWidgetConfigArea + */ +getAreaItems(areaName: IPublicTypeWidgetConfigArea): IPublicModelSkeletonItem[] | undefined; +``` -enableWidget(name: string) +相关类型：[IPublicModelSkeletonItem](https://github.com/alibaba/lowcode-engine/blob/main/packages/shell/src/model/skeleton-item.ts) -将 widget 启用。
注：该函数将会触发全局事件 'skeleton.widget.enable' -### 8. disableWidget -disableWidget(name: string) +### registerConfigTransducer -将 widget 禁用掉，禁用后，所有鼠标事件都会被禁止掉。
适用场景：在该面板还在进行初始化构造时，可以先禁止掉，防止用户点击报错，待初始化完成，重新启用。 +注册一个面板的配置转换器（transducer）。 -## 事件（events） -### 1. onShowPanel +```typescript +/** + * 注册一个面板的配置转换器（transducer）。 + * Registers a configuration transducer for a panel. + * @param {IPublicTypeConfigTransducer} transducer + * - 要注册的转换器函数。该函数接受一个配置对象（类型为 IPublicTypeSkeletonConfig）作为输入，并返回修改后的配置对象。 + * - The transducer function to be registered. This function takes a configuration object + * + * @param {number} level + * - 转换器的优先级。优先级较高的转换器会先执行。 + * - The priority level of the transducer. Transducers with higher priority levels are executed first. + * + * @param {string} [id] + * - （可选）转换器的唯一标识符。用于在需要时引用或操作特定的转换器。 + * - (Optional) A unique identifier for the transducer. Used for referencing or manipulating a specific transducer when needed. + */ +registerConfigTransducer(transducer: IPublicTypeConfigTransducer, level: number, id?: string): void; +``` + +使用示例 + +```typescript +import { IPublicModelPluginContext, IPublicTypeSkeletonConfig } from '@alilc/lowcode-types'; + +function updatePanelWidth(config: IPublicTypeSkeletonConfig) { + if (config.type === 'PanelDock') { + return { + ...config, + panelProps: { + ...(config.panelProps || {}), + width: 240, + }, + } + } + + return config; +} + +const controlPanelWidthPlugin = (ctx: IPublicModelPluginContext) => { + const { skeleton } = ctx; + (skeleton as any).registerConfigTransducer?.(updatePanelWidth, 1, 'update-panel-width'); + + return { + init() {}, + }; +}; + +controlPanelWidthPlugin.pluginName = 'controlPanelWidthPlugin'; +controlPanelWidthPlugin.meta = { + dependencies: [], + engines: { + lowcodeEngine: '^1.2.3', // 插件需要配合 ^1.0.0 的引擎才可运行 + }, +}; + +export default controlPanelWidthPlugin; +``` -onShowPanel(listener: (...args: unknown[]) => void) +## 事件 +### onShowPanel 监听 Panel 实例显示事件 -### 2. onHidePanel -
onHidePanel(listener: (...args: unknown[]) => void) +```typescript +/** + * 监听 panel 显示事件 + * set callback for panel shown event + * @param listener + * @returns + */ +onShowPanel(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) => void): IPublicTypeDisposable; +``` + +相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) + +### onHidePanel 监听 Panel 实例隐藏事件 -### 3. onShowWidget +```typescript +/** + * 监听 Panel 实例隐藏事件 + * set callback for panel hidden event + * @param listener + * @returns + */ +onHidePanel(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) => void): IPublicTypeDisposable; +``` + +相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) + +### onDisableWidget -onShowWidget(listener: (...args: unknown[]) => void) +监听 Widget 实例 Disable 事件 + +```typescript +/** + * 监听 Widget 实例 Disable 事件 + * @param listener + */ +onDisableWidget(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) => void): IPublicTypeDisposable; +``` + +相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) + +### onEnableWidget + +监听 Widget 实例 Enable 事件 + +```typescript +/** + * 监听 Widget 实例 Enable 事件 + * @param listener + */ +onEnableWidget(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) => void): IPublicTypeDisposable; +``` + +相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) + +### onShowWidget 监听 Widget 实例显示事件 -### 4. onHideWidget -
onHideWidget(listener: (...args: unknown[]) => void) +```typescript +/** + * 监听 Widget 显示事件 + * set callback for widget shown event + * @param listener + * @returns + */ +onShowWidget(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) => void): IPublicTypeDisposable; +``` + +相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) + +### onHideWidget 监听 Widget 实例隐藏事件 + +```typescript +/** + * 监听 Widget 隐藏事件 + * set callback for widget hidden event + * @param listener + * @returns + */ +onHideWidget(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) => void): IPublicTypeDisposable; +``` + +相关类型：[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts) + ## 使用示例 + ```typescript import { skeleton } from '@alilc/lowcode-engine'; @@ -199,7 +488,7 @@ skeleton.add({ props: { align: 'top', icon: 'wenjian', - description: 'JS面板', + description: 'JS 面板', }, panelProps: { floatable: true, @@ -208,7 +497,7 @@ skeleton.add({ hideTitleBar: false, maxHeight: 800, maxWidth: 1200, - title: 'JS面板', + title: 'JS 面板', width: 600, }, content: SourceEditor, @@ -250,7 +539,7 @@ skeleton.disableWidget('sourceEditor'); import { skeleton } from '@alilc/lowcode-engine'; skeleton.add({ - name: 'bottomAreaPanelName', + name: 'bottomAreaPanelName', area: 'bottomArea', type: 'Panel', content: () => 'demoText', diff --git a/docs/docs/api/workspace.md b/docs/docs/api/workspace.md new file mode 100644 index 0000000000..74f7d6950f --- /dev/null +++ b/docs/docs/api/workspace.md @@ -0,0 +1,172 @@ +--- +title: workspace - 应用级 API +sidebar_position: 10 +--- + +> **[@experimental](./#experimental)**
+> **@types** [IPublicApiWorkspace](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/workspace.ts)
+> **@since** v1.1.0 + +## 模块简介 + +通过该模块可以开发应用级低代码设计器。 + +## 变量 + +### isActive + +是否启用 workspace 模式 + +### window + +当前设计器窗口模型 + +```typescript +get window(): IPublicModelWindow +``` + +关联模型 [IPublicModelWindow](./model/window) + +### plugins + +应用级别的插件注册 + +```typescript +get plugins(): IPublicApiPlugins +``` + +关联模型 [IPublicApiPlugins](./plugins) + +### skeleton + +应用级别的面板管理 + +```typescript +get skeleton(): IPublicApiSkeleton +``` + +关联模型 [IPublicApiSkeleton](./skeleton) + +### windows + +当前设计器的编辑窗口 + +```typescript +get window(): IPublicModelWindow[] +``` + +关联模型 [IPublicModelWindow](./model/window) + +### resourceList + +当前设计器的资源列表数据 + +``` +get resourceList(): IPublicModelResource; +``` + +关联模型 [IPublicModelResource](./model/resource) + +## 方法 + +### registerResourceType +注册资源 + +```typescript +/** 注册资源 */ +registerResourceType(resourceTypeModel: IPublicTypeResourceType): void; +``` + +相关类型：[IPublicTypeResourceType](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/resource-type.ts) + +### setResourceList + +设置设计器资源列表数据 + +```typescript +setResourceList(resourceList: IPublicResourceList) {} +``` + +相关类型：[IPublicResourceData](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/resource-list.ts) + +### openEditorWindow + +打开视图窗口 + +```typescript +/** + * 打开视图窗口 + * @deprecated + */ +openEditorWindow(resourceName: string, id: string, extra: Object, viewName?: string, sleep?: boolean): Promise
/* 组件内容 */
;
+};
+```
+
+**定义全局插件**：定义一个函数，这个函数会在插件被注册时调用。这个函数通常接受一个上下文对象 **ctx**，它提供了对引擎功能的访问。
+
+```javascript
+const globalPlugin = (ctx) => {
+ const { skeleton } = ctx;
+
+ skeleton.add({
+ type: 'PanelDock',
+ name: 'datapool',
+ content: ProvideViewPluginContext((props) => {
+ // 组件内容
+ return (
+ 
+
+## setter 配置
| 属性名 | 说明 |
| --- | --- |
| defaultValue | 默认值 |
-#### 返回类型
+## 返回类型
String
-会返回options中的value值
+
+会返回 options 中的 value 值
diff --git a/docs/docs/guide/appendix/setterDetails/event.md b/docs/docs/guide/appendix/setterDetails/event.md
index 26405e9081..b690b308f1 100644
--- a/docs/docs/guide/appendix/setterDetails/event.md
+++ b/docs/docs/guide/appendix/setterDetails/event.md
@@ -1,20 +1,23 @@
---
title: EventSetter
---
-#### 简介
+## 简介
可以将事件绑定在物料上
-#### 展示
-
+## 展示
+
+
+
+## 组件自带事件列表
+
+在物料协议的 configure.supports.events 中声明
-#### 组件自带事件列表
-在物料协议的configure.supports.events 中声明
```json
{
"configure ": {
"supports": {
"style": true,
"events": [{
- "name": "onChange",
+ "name": "onChange"
}, {
"name": "onExpand"
}, {
@@ -25,34 +28,38 @@ title: EventSetter
}
```
-#### 事件绑定
-
-可以选择已有的事件(schema中的**methods**节点)进行绑定，也可以选择新建事件，选择新建事件默认会增加_new的事件后缀命名，点确定以后会跳转到对应代码插件对应区块
-####
-#### 参数设置
-如果需要额外传参，需要将扩展参数设置打开，在代码面板中，编辑参数内容
+## 事件绑定
+
+
+可以选择已有的事件 (schema 中的**methods**节点) 进行绑定，也可以选择新建事件，选择新建事件默认会增加_new 的事件后缀命名，点确定以后会跳转到对应代码插件对应区块。
+
+## 参数设置
+
+如果需要额外传参，需要将扩展参数设置打开，在代码面板中，编辑参数内容。
+
注意：
- 额外参数必须被包装成一个对象，如参数模板中所示
- 可以使用动态变量例如 (this.items，this.state.xxx)
-```json
-{
- "testKey":this.state.text
-}
-```
+ ```javascript
+ {
+ testKey: this.state.text,
+ }
+ ```
-- 该参数是额外参数，会加在原有参数后面，例如在onClick中加入扩展传参，最终函数消费的时候应该如下所示
-```javascript
-// e为onClick原有函数传参，extParams为自定义传参
-onClick(e, extParams) {
- this.setState({
- isShowDialog: extParams.isShowDialog
- })
-}
-```
-#### 事件新建函数模板
-有时候我们创建的函数会有用到一些通用的函数模板，我们可以在物料协议的events.template中创建一个模板，如下
-```javascript
+- 该参数是额外参数，会加在原有参数后面，例如在 onClick 中加入扩展传参，最终函数消费的时候应该如下所示
+ ```javascript
+ // e 为 onClick 原有函数传参，extParams 为自定义传参
+ onClick(e, extParams) {
+ this.setState({
+ isShowDialog: extParams.isShowDialog,
+ });
+ }
+ ```
+## 事件新建函数模板
+有时候我们创建的函数会有用到一些通用的函数模板，我们可以在物料协议的 events.template 中创建一个模板，如下
+
+```json
{
"configure ": {
"supports": {
@@ -69,5 +76,7 @@ onClick(e, extParams) {
}
}
```
+
其中 ${extParams} 为扩展参数占位符，如果用户没有声明扩展参数，会移除对应的参数声明，定义模板后，每次创建完函数会自动生成模板函数，如下图
-
+
+
diff --git a/docs/docs/guide/appendix/setterDetails/function.md b/docs/docs/guide/appendix/setterDetails/function.md
new file mode 100644
index 0000000000..3135d8597e
--- /dev/null
+++ b/docs/docs/guide/appendix/setterDetails/function.md
@@ -0,0 +1,74 @@
+---
+title: FunctionSetter
+---
+## 简介
+可以将function绑定在物料上
+
+## 设置器返回
+
+设置器返回一个Function对象，调用function()运行Function对象得到运行结果。
+
+如下是一个典型的使用案例：
+
+```javascript
+export type TestProps = React.ComponentProps
+
+## setter 配置
+
| **属性名** | **类型** | **说明** |
| --- | --- | --- |
-| type | String | 选择器返回类型
-**可选值**:
-"string" | "node" |
+| type | String | 选择器返回类型 **可选值**: "string" \| "node" |
| defaultValue | String | ReactNode | 默认值 |
| hasClear | Boolean | 选择器是否显示清除按钮 |
-| icons | Array | 自定义icon集合；默认值详见[图标可选值](#SWnNn) |
+| icons | Array | 自定义 icon 集合；默认值详见[图标可选值](#图标可选值) |
| placeholder | String | 没有值的时候的占位符 |
-#### 返回类型
+## 返回类型
+
String | ReactNode
-#### 图标可选值
-```json
+
+## 图标可选值
+
+```javascript
[
'smile',
'cry',
diff --git a/docs/docs/guide/appendix/setterDetails/mixed.md b/docs/docs/guide/appendix/setterDetails/mixed.md
index 6ce3df0248..aa8d8ff420 100644
--- a/docs/docs/guide/appendix/setterDetails/mixed.md
+++ b/docs/docs/guide/appendix/setterDetails/mixed.md
@@ -1,13 +1,15 @@
---
title: MixedSetter
---
-#### 简介
-可以让属性同时支持多个setter
+## 简介
+可以让属性同时支持多个 setter
-#### 展示
-
+## 展示
+
+
+
+## 配置
-#### 配置
| **属性名** | **类型** | **说明** |
| --- | --- | --- |
| setters | Array
+
+## setter 配置
| 属性名 | 说明 |
| --- | --- |
| min, max | 指定最大最小值 |
@@ -14,6 +16,7 @@ title: NumberSetter
| units | 指定单位 string |
| precision | 设置小数位数 number |
-#### 返回类型
-#### Number
-会返回value值
+## 返回类型
+Number
+
+会返回 value 值
diff --git a/docs/docs/guide/appendix/setterDetails/radioGroup.md b/docs/docs/guide/appendix/setterDetails/radioGroup.md
index 10bbc13f4e..44fb47e981 100644
--- a/docs/docs/guide/appendix/setterDetails/radioGroup.md
+++ b/docs/docs/guide/appendix/setterDetails/radioGroup.md
@@ -1,24 +1,18 @@
---
title: RadioGroupSetter
---
-#### 简介
+## 简介
用于直观的展示选择并选择。
-#### 展示
-
-#### setter 配置
+## 展示
+
+
+
+## setter 配置
| 属性名 | 说明 |
| --- | --- |
| defaultValue | 默认值 |
-| options | 传入的数据源，
-**参数格式**:
-[
-{img: 'url',
-value: 'text',
-label/title: 'text'}, ...
-]
-||
-[ 'text', 'text', ...] |
+| options | 传入的数据源，**参数格式**: [{img: 'url', value: 'text', label/title: 'text'}, ...] \| [ 'text', 'text', ...] |
-#### 返回类型
+## 返回类型
String | Number | Boolean
-会返回options中的value值
+会返回 options 中的 value 值
diff --git a/docs/docs/guide/appendix/setterDetails/select.md b/docs/docs/guide/appendix/setterDetails/select.md
index 296bafebf1..2e50391941 100644
--- a/docs/docs/guide/appendix/setterDetails/select.md
+++ b/docs/docs/guide/appendix/setterDetails/select.md
@@ -1,24 +1,20 @@
---
title: SelectSetter
---
-#### 简介
+## 简介
用来选择组件。在限定的可选性内进行选择，核心能力是选择
-#### 展示
-
-#### setter 配置
+## 展示
+
+
+
+## setter 配置
| 属性名 | 说明 |
| --- | --- |
-| mode | 选择器模式
-
-可选值:
-'single', 'multiple', 'tag' |
+| mode | 选择器模式 可选值: 'single', 'multiple', 'tag' |
| defaultValue | 默认值 |
-| options | 传入的数据源，
-**参数格式**:
-[
-{label/title: '文字', value: 'text'}, ...
-] |
+| options | 传入的数据源，**参数格式**: [ {label/title: '文字', value: 'text'}, ...] |
+
+## 返回类型
-#### 返回类型
String | Number | Boolean
-会返回options中的value值
+会返回 options 中的 value 值
diff --git a/docs/docs/guide/appendix/setterDetails/slot.md b/docs/docs/guide/appendix/setterDetails/slot.md
index 52e3f9f3b4..7559343d52 100644
--- a/docs/docs/guide/appendix/setterDetails/slot.md
+++ b/docs/docs/guide/appendix/setterDetails/slot.md
@@ -2,92 +2,92 @@
title: SlotSetter
---
## 简介
-通过一个开启一个slot（插槽），可以在物料特定的一个位置渲染一个或者多个节点。slot比较适合物料的局部自定义渲染。
+通过一个开启一个 slot（插槽），可以在物料特定的一个位置渲染一个或者多个节点。slot 比较适合物料的局部自定义渲染。
## 展示
-
-
+
+
++
+ +
## setter 配置
| 属性名 | 类型 | 说明 |
| --- | --- | --- |
-| initialValue | Object | 默认值
-{
-"type": "JSSlot",
-"params": [
-"module"
- ],
-"value": []
-}
-
-params:接收函数的入参，可以直接在slot节点中消费，通过this.module (这里module是示例值，可根据实际函数入参更改)
-value:可以定义一个节点，每次打开插槽的时候默认填充一个节点
-
- |
-| hideParams | boolean | 是否隐藏入参，注意该值只能隐藏入参的输入框，适合单行展示，实际渲染的时候，还是会传入params的参数，和params:[]不同 |
-| checkedText | string | switch选中文案，默认显示"启用" |
-| unCheckedText | string | switch取消文案，默认显示"关闭" |
+| initialValue | Object | 默认值 { "type": "JSSlot", "params": [ "module" ], "value": [] } params:接收函数的入参，可以直接在slot节点中消费，通过this.module (这里module是示例值，可根据实际函数入参更改) value:可以定义一个节点，每次打开插槽的时候默认填充一个节点 |
+| hideParams | boolean | 是否隐藏入参，注意该值只能隐藏入参的输入框，适合单行展示，实际渲染的时候，还是会传入 params 的参数，和 params:[]不同 |
+| checkedText | string | switch 选中文案，默认显示"启用" |
+| unCheckedText | string | switch 取消文案，默认显示"关闭" |
## 配置示例
-### 普通示例
-#### 配置
+### 配置
+
```typescript
{
- name: "propName",
- title: "propTitle",
+ name: 'propName',
+ title: 'propTitle',
setter: {
- componentName: "SlotSetter",
+ componentName: 'SlotSetter',
isRequired: true,
- title: "组件坑位",
+ title: '组件坑位',
initialValue: {
- type: "JSSlot",
- value: []
+ type: 'JSSlot',
+ value: [],
},
}
}
```
-#### 组件
+### 组件
+
```typescript
function A(props) {
return props.propName;
}
```
-### 带参数的插槽示例
-#### 配置
+## 带参数的插槽示例
+### 配置
+
```typescript
{
- name: "propName",
- title: "propTitle",
- setter: {
- componentName: "SlotSetter",
- isRequired: true,
- title: "组件坑位",
- initialValue: {
- type: "JSSlot",
- params: [
- "module"
- ],
- value: []
- },
- }
+ name: 'propName',
+ title: 'propTitle',
+ setter: {
+ componentName: 'SlotSetter',
+ isRequired: true,
+ title: '组件坑位',
+ initialValue: {
+ type: 'JSSlot',
+ params: [ 'module'],
+ value: [],
+ },
}
+}
```
-#### 组件
+### 组件
+
组件需要传参数进行渲染，和普通示例的使用不一样。
+
```typescript
function A(props) {
- const module = []
+ const module = [];
return props.propName(module);
}
```
-#### param 使用示例
+### param 使用示例
+
1.开启插槽
-
+
+
+
2.拖拽组件到插槽中
-
+
+
3.在插槽内组件中使用变量绑定，绑定 this.xxx
+
xxx 入参的配置
-
+
+
diff --git a/docs/docs/guide/appendix/setterDetails/string.md b/docs/docs/guide/appendix/setterDetails/string.md
index 77e5aacf49..c30bba7701 100644
--- a/docs/docs/guide/appendix/setterDetails/string.md
+++ b/docs/docs/guide/appendix/setterDetails/string.md
@@ -1,14 +1,18 @@
---
title: StringSetter
---
-#### 简介
+## 简介
+
用来展示和修改字符串类型的属性值，不可换行
-#### 展示
-
-#### setter 配置
+## 展示
+
+
+
+## setter 配置
+
| 属性名 | 说明 |
| --- | --- |
| placeholder | 输入提示 |
-#### 返回类型
+## 返回类型
String
diff --git a/docs/docs/guide/appendix/setterDetails/style.md b/docs/docs/guide/appendix/setterDetails/style.md
index f733baaa36..c58f062f52 100644
--- a/docs/docs/guide/appendix/setterDetails/style.md
+++ b/docs/docs/guide/appendix/setterDetails/style.md
@@ -2,48 +2,27 @@
title: StyleSetter
---
## 简介
-通过开启StyleSetter,我们可以将样式配置面板来配置样式属性。
+通过开启 StyleSetter，我们可以将样式配置面板来配置样式属性。
## 展示
-
+
+
## setter 配置
| 属性名 | 类型 | 说明 |
| --- | --- | --- |
-| unit | String | 默认值 px
-
- |
-| placeholderScale | Number | 默认计算尺寸缩放 默认值为1
-
-在没有设定数值的时候，系统会通过window.getComputedStyle来计算展示的数值。
-在某些场景下，例如手机场景，在编辑器展示的是375的实际宽度，但是实际设计尺寸是750的宽度，这个时候需要对这个计算尺寸设成2 |
-| showModuleList | String[] | 默认值
-['background', 'border', 'font', 'layout', 'position']
-分别对应背景、边框、文字、布局、位置五个区块，可以针对不同的场景按需进行展示。
-例如文字的组件，我不需要修改边框的样式，就可以把边框模块隐藏掉 |
+| unit | String | 默认值 px 
|
+| placeholderScale | Number | 默认计算尺寸缩放 默认值为 1 
在没有设定数值的时候，系统会通过 window.getComputedStyle 来计算展示的数值。在某些场景下，例如手机场景，在编辑器展示的是 375 的实际宽度，但是实际设计尺寸是 750 的宽度，这个时候需要对这个计算尺寸设成 2 |
+| showModuleList | String[] | 默认值 ['background', 'border', 'font', 'layout', 'position'] 分别对应背景、边框、文字、布局、位置五个区块，可以针对不同的场景按需进行展示。 例如文字的组件，我不需要修改边框的样式，就可以把边框模块隐藏掉 |
| isShowCssCode | Boolean | 默认值: true, 是否展示css源码编辑 |
| layoutPropsConfig | Object | 布局样式设置 |
-| layoutPropsConfig.showDisPlayList | String[] | 默认值 ['inline', 'flex', 'block', 'inline-block', 'none']
-
-可按需展示
- |
-| layoutPropsConfig.isShowPadding | String | 默认值 true
-
-是否展示内边距 （四个边） |
-| layoutPropsConfig.isShowMargin | Boolean | 默认值 true
-
-是否展示外边距 （四个边） |
-| layoutPropsConfig.isShowWidthHeight | Boolean | 默认值 true
-
-是否展示宽高 |
+| layoutPropsConfig.showDisPlayList | String[] | 默认值 ['inline', 'flex', 'block', 'inline-block', 'none'] 
可按需展示 |
+| layoutPropsConfig.isShowPadding | String | 默认值 true 
是否展示内边距（四个边） ||
+| layoutPropsConfig.isShowMargin | Boolean | 默认值 true 
是否展示外边距（四个边） ||
+| layoutPropsConfig.isShowWidthHeight | Boolean | 默认值 true 
是否展示宽高 |
| fontPropsConfig | Object | 文字样式设置 |
-| fontPropsConfig.fontFamilyList | Array | [
- { value: 'Helvetica', label: 'Helvetica' },
- { value: 'Arial', label: 'Arial' },
- { value: 'serif', label: 'serif' },
- ]
-可以定制文字字体选项 |
+| fontPropsConfig.fontFamilyList | Array | [ { value: 'Helvetica', label: 'Helvetica' }, { value: 'Arial', label: 'Arial' },] 可以定制文字字体选项 |
| positionPropsConfig | Object | 位置样式设置 |
-| positionPropsConfig.isShowFloat | Boolean | 默认true 是否展示浮动 |
-| positionPropsConfig.isShowClear | Boolean | 默认true 是否展示清除浮动 |
+| positionPropsConfig.isShowFloat | Boolean | 默认 true 是否展示浮动 |
+| positionPropsConfig.isShowClear | Boolean | 默认 true 是否展示清除浮动 |
diff --git a/docs/docs/guide/appendix/setterDetails/textArea.md b/docs/docs/guide/appendix/setterDetails/textArea.md
index 9188012f85..eff698b3da 100644
--- a/docs/docs/guide/appendix/setterDetails/textArea.md
+++ b/docs/docs/guide/appendix/setterDetails/textArea.md
@@ -1,14 +1,16 @@
---
-title: StyleSetter
+title: TextAreaSetter
---
-#### 简介
+## 简介
表单输入组件。
-#### 展示
-
-#### setter 配置
+## 展示
+
+
+
+## setter 配置
| **属性名** | **类型** | **说明** |
| --- | --- | --- |
| placeholder | String | 输入提示 |
-#### 返回类型
+## 返回类型
String
diff --git a/docs/docs/guide/appendix/setterDetails/variable.md b/docs/docs/guide/appendix/setterDetails/variable.md
index 88e46e0cda..ed7d78c5b2 100644
--- a/docs/docs/guide/appendix/setterDetails/variable.md
+++ b/docs/docs/guide/appendix/setterDetails/variable.md
@@ -1,12 +1,16 @@
---
title: VariableSetter
---
-#### 简介
+## 简介
+
用来给属性值设定变量
-#### 展示
-
-
-####
-#### 变量列表
-包含所有的在协议中的**state**(state属性)节点数据和**methods**(自定义处理函数)节点数据
+## 展示
+
+
++ +
+
+## 变量列表
+包含所有的在协议中的**state**(state 属性) 节点数据和**methods**(自定义处理函数) 节点数据
diff --git a/docs/docs/guide/appendix/setters.md b/docs/docs/guide/appendix/setters.md
index 381ef8198d..d94b402865 100644
--- a/docs/docs/guide/appendix/setters.md
+++ b/docs/docs/guide/appendix/setters.md
@@ -4,38 +4,26 @@ sidebar_position: 4
---
| 预置 Setter | 返回类型 | 用途 | 截图 |
| --- | --- | --- | --- |
-| [ArraySetter](https://www.yuque.com/lce/doc/eiegwf?view=doc_embed&from=kb&from=kb&outline=1&title=1) | T[] | 列表数组行数据设置器 |  |
-| [BoolSetter](https://www.yuque.com/lce/doc/mdxryw?view=doc_embed&from=kb&from=kb&outline=1&title=1) | boolean | 布尔型数据设置器， |  |
-| ClassNameSetter | string | 样式名设置器 |  |
-| [ColorSetter](https://www.yuque.com/lce/doc/hu5ir6?view=doc_embed&from=kb&from=kb&outline=1&title=1) | string | 颜色设置器 |  |
-| DateMonthSetter |
- | 日期型-月数据设置器 |
- |
-| DateRangeSetter |
- | 日期型数据设置器，可选择时间区间 |
- |
-| DateSetter |
- | 日期型数据设置器 |
- |
-| DateYearSetter |
- | 日期型-年数据设置器 |
- |
-| [EventSetter](https://www.yuque.com/lce/doc/fiu8cz?view=doc_embed&from=kb&from=kb&outline=1&title=1) | function | 事件绑定设置器 |  |
-| [IconSetter](https://www.yuque.com/lce/doc/ry138x?view=doc_embed&from=kb&from=kb&outline=1&title=1) | string | 图标设置器 |  |
-| FunctionSetter | any | 函数型数据设置器 |  |
-| JsonSetter | object | json型数据设置器 |  |
-| [MixedSetter](https://www.yuque.com/lce/doc/ah6o2c?view=doc_embed&from=kb&from=kb&outline=1&title=1) | any | 混合型数据设置器 |  |
-| [NumberSetter](https://www.yuque.com/lce/doc/hk65u5?view=doc_embed&from=kb&from=kb&outline=1&title=1) | number | 数值型数据设置器 |  |
-| ObjectSetter | Record
+
+ 选择`编辑器`，并填写对应的问题，即可完成创建。
+
+ > 注 @alilc/create-element 版本需 >= 1.0.4，若看不到`编辑器`选项，请重新执行步骤 3
+5. 进入创建后的目录
+ ```bash
+ cd editor-project-name
+ ```
+6. 安装依赖
+ ```bash
+ npm install
+ ```
+7. 安装依赖成功后，启动项目 (注意观察上一步的输出，如有 error 等失败信息，请先进行排查)
+ ```bash
+ npm start
+ ```
+ 执行后如果看到这个界面，说明项目启动成功。您可以继续看后续章节了。本章节后续内容均为高级配置方式。
+
+ 
+
+## 方法 2: 使用 UMD 包方式配置
如果您不是从零开始的项目，您可能需要手工引入低代码引擎。
-## 引入 UMD 包资源
+### 引入 UMD 包资源
我们需要在启动前，正确在项目中通过 UMD 包方式直接依赖如下内容：
-（亦可使用异步加载工具，如果您按照正确的顺序进行加载）
+> 亦可使用异步加载工具，如果您按照正确的顺序进行加载
+
```html
-
+
-
+
@@ -65,16 +76,17 @@ git clone https://github.com/alibaba/lowcode-demo.git
-
+
-
+
```
-> 注：如果 unpkg 的服务比较缓慢，您可以使用 alicdn 来获得确定版本的低代码引擎，如对于引擎的 1.0.1 版本，可用 [https://alifd.alicdn.com/npm/@alilc/lowcode-engine@1.0.1/dist/js/engine-core.js](https://alifd.alicdn.com/npm/@alilc/lowcode-engine@1.0.1/dist/js/engine-core.js)
+> 注：如果 unpkg 的服务比较缓慢，您可以使用官方 CDN 来获得确定版本的低代码引擎，如对于引擎的 1.0.18 版本，可用以下官方 CDN 替代
+> - [https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.0.18/dist/js/engine-core.js](https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.0.18/dist/js/engine-core.js)
-## 配置打包
+### 配置打包
-因为这些资源已经通过 UMD 方式引入，所以在 Webpack 等构建工具中需要配置它们为 external，不再重复打包：
+因为这些资源已经通过 UMD 方式引入，所以在 webpack 等构建工具中需要配置它们为 external，不再重复打包：
```javascript
{
@@ -84,20 +96,14 @@ git clone https://github.com/alibaba/lowcode-demo.git
"prop-types": "var window.PropTypes",
"@alifd/next": "var window.Next",
"@alilc/lowcode-engine": "var window.AliLowCodeEngine",
- "@alilc/lowcode-editor-core": "var window.AliLowCodeEngine.common.editorCabin",
- "@alilc/lowcode-editor-skeleton": "var window.AliLowCodeEngine.common.skeletonCabin",
- "@alilc/lowcode-designer": "var window.AliLowCodeEngine.common.designerCabin",
"@alilc/lowcode-engine-ext": "var window.AliLowCodeEngineExt",
- "@ali/lowcode-engine": "var window.AliLowCodeEngine",
"moment": "var window.moment",
"lodash": "var window._"
}
}
```
-## 初始化低代码编辑器
-
-### 方法 2.1 使用 init 进行初始化
+### 初始化低代码编辑器
正确引入后，我们可以直接通过 window 上的变量进行引用，如 `window.AliLowCodeEngine.init`。您可以直接通过此方式初始化低代码引擎：
@@ -114,11 +120,12 @@ window.AliLowCodeEngine.init(document.getElementById('lce-container'), {
// package.json
{
"devDependencies": {
- "@alilc/lowcode-engine": "beta"
+ "@alilc/lowcode-engine": "^1.0.0"
}
}
```
```javascript
+// src/index.tsx
import { init } from '@alilc/lowcode-engine';
init(document.getElementById('lce-container'), {
@@ -133,52 +140,7 @@ init 的功能包括但不限于：
2. 传递 preference 并设置 plugins 入参；
3. 初始化 Workbench；
-> 本节中的低代码编辑器例子可以在 demo 中找到：[https://github.com/alibaba/lowcode-demo/blob/main/src/index.ts#L21-L34](https://github.com/alibaba/lowcode-demo/blob/main/src/index.ts#L21-L34)
-
-
-### 方法 2.2 使用 skeletonCabin.Workbench 方式初始化
-
-`init()` 内部会调用 `ReactDOM.render()` 函数，因此这样初始化的内容没有办法与外部的 React 组件进行通信，也就没有办法在一些自定义的 plugin 中获取 redux 上的全局数据等内容。
-因此，这种场景下您可以通过 `skeletonCabin.Workbench` 进行初始化。
-
-> 注：您不需要同时使用 2.1 和 2.2 的方法。根据使用场景，只有需要低代码引擎插件和外界进行一定通信时，2.2 提供的方法才是必要的。
-
-
-```javascript
-import React, { useState, useEffect } from 'react'
-import { project, plugins, common, skeleton } from '@alilc/lowcode-engine'
-
-// 此 schema 参考 demo 中的默认 schema 书写
-import userSchema from './schema.json'
-
-export default function EditorView() {
- /** 插件是否已初始化成功，因为必须要等插件初始化后才能渲染 Workbench */
- const [hasPluginInited, setHasPluginInited] = useState(false);
-
- useEffect(() => {
- plugins.init().then(() => {
- setHasPluginInited(true)
- }).catch(err => console.error(err))
- }, []);
-
- useEffect(() => {
- project.importSchema(userSchema)
- }, [userSchema]);
-
- if (!hasPluginInited) {
- return null;
- }
-
- return (
- 
-
基于 Schema 和物料组件，如何渲染出我们的页面？这一节描述的就是这个。
-# npm 包与仓库信息
+## npm 包与仓库信息
- React 框架渲染 npm 包：@alilc/lowcode-react-renderer
-- Rax 框架渲染 npm 包：@alilc/lowcode-rax-renderer
- 仓库：[https://github.com/alibaba/lowcode-engine](https://github.com/alibaba/lowcode-engine) 下的
- packages/renderer-core
- packages/react-renderer
- packages/react-simulator-renderer
-# 渲染框架原理
-## 整体架构
-
+## 渲染框架原理
+### 整体架构
+
+
-- 协议层：基于标准的《阿里巴巴中后台前端搭建协议规范》产出的 Schema 作为我们的规范协议。
+- 协议层：基于[《低代码引擎搭建协议规范》](/site/docs/specs/lowcode-spec) 产出的 Schema 作为我们的规范协议。
- 能力层：提供组件、区块、页面等渲染所需的核心能力，包括 Props 解析、样式注入、条件渲染等。
- 适配层：由于我们使用的运行时框架不是统一的，所以统一使用适配层将不同运行框架的差异部分，通过接口对外，让渲染层注册/适配对应所需的方法。能保障渲染层和能力层直接通过适配层连接起来，能起到独立可扩展的作用。
- 渲染层：提供核心的渲染方法，由于不同运行时框架提供的渲染方法是不同的，所以其通过适配层进行注入，只需要提供适配层所需的接口，即可实现渲染。
- 应用层：根据渲染层所提供的方法，可以应用到项目中，根据使用的方法和规模即可实现应用、页面、区块的渲染。
-## 核心解析
+### 核心解析
+
这里主要解析一下刚刚提到的架构中的适配层和渲染层。
-### 适配层
+
+#### 适配层
适配层提供的是各个框架之间的差异项。比如 `React.createElement` 和 `Rax.createElement` 方法是不同的。所以需要在适配层对 API 进行抹平。
-#### React
+##### React
```typescript
import { createElement } from 'react';
import {
@@ -42,7 +45,7 @@ adapter.setRuntime({
createElement,
});
```
-#### Rax
+##### Rax
```typescript
import { createElement } from 'rax';
import {
@@ -69,10 +72,12 @@ adapter.setRuntime({
- `ComponentRenderer`：组件渲染的方法。
- `BlockRenderer`：区块渲染的方法。
-### 渲染层
-#### React Renderer
+#### 渲染层
+##### React Renderer
内部的技术栈统一都是 React，大多数适配层的 API 都是按照 React 来设计的，所以对于 React Renderer 来说，需要做的不多。
+
React Renderer 的代码量很少，主要是将 React API 注册到适配层中。
+
```typescript
import React, { Component, PureComponent, createElement, createContext, forwardRef, ReactInstance, ContextType } from 'react';
import ReactDOM from 'react-dom';
@@ -112,7 +117,7 @@ adapter.setRenderers({
adapter.setConfigProvider(ConfigProvider);
```
-#### Rax Renderer
+##### Rax Renderer
Rax 的大多数 API 和 React 基本也是一致的，差异点在于重写了一些方法。
```typescript
import { Component, PureComponent, createElement, createContext, forwardRef } from 'rax';
@@ -146,8 +151,8 @@ adapter.setRenderers({
});
```
-## 多模式渲染
-### 预览模式渲染
+### 多模式渲染
+#### 预览模式渲染
预览模式的渲染，主要是通过 Schema、components 即可完成上述的页面渲染能力。
```typescript
import ReactRenderer from '@ali/lowcode-react-renderer';
@@ -183,12 +188,12 @@ ReactDOM.render((
), document.getElementById('root'));
```
-### 设计模式渲染（Simulator）
+#### 设计模式渲染（Simulator）
设计模式渲染就是将编排生成的《搭建协议》渲染成视图的过程，视图是可以交互的，所以必须要处理好内部数据流、生命周期、事件绑定、国际化等等。也称为画布的渲染，画布是 UI 编排的核心，它一般融合了页面的渲染以及组件/区块的拖拽、选择、快捷配置。
画布的渲染和预览模式的渲染的区别在于，画布的渲染和设计器之间是有交互的。所以在这里我们新增了一层 `Simulator` 作为设计器和渲染的连接器。
`Simulator` 是将设计器传入的 `DocumentModel` 和组件/库描述转成相应的 Schema 和 组件类。再调用 Render 层完成渲染。我们这里介绍一下它提供的能力。
-#### 整体架构
-
+##### 整体架构
+
- `Project`：位于顶层的 Project，保留了对所有文档模型的引用，用于管理应用级 Schema 的导入与导出。
- `Document`：文档模型包括 Simulator 与数据模型两部分。Simulator 通过一份 Simulator Host 协议与数据模型层通信，达到画布上的 UI 操作驱动数据模型变化。通过多文档的设计及多 Tab 交互方式，能够实现同时设计多个页面，以及在一个浏览器标签里进行搭建与配置应用属性。
@@ -200,11 +205,11 @@ ReactDOM.render((
- `SettingField`：它连接属性设置器 `Setter` 与属性模型 `Prop`，它是实现多节点属性批处理的关键。
- 通用交互模型：内置了拖拽、活跃追踪、悬停探测、剪贴板、滚动、快捷键绑定。
-#### 模拟器介绍
-
+##### 模拟器介绍
+
- 运行时环境：从运行时环境来看，目前我们有 React 生态、Rax 生态。而在对外的历程中，我们也会拥有 Vue 生态、Angular 生态等。
- 布局模式：不同于 C 端营销页的搭建，中后台场景大多是表单、表格，流式布局是主流的选择。对于设计师、产品来说，是需要绝对布局的方式来进行页面研发的。
- 研发场景：从研发场景来看，低代码搭建不仅有页面编排，还有诸如逻辑编排、业务编排的场景。
-基于以上思考，我们通过基于沙箱隔离的模拟器技术来实现了多运行时环境（如 React、Rax、小程序、Vue）、多模式（如流式布局、自由布局）、多场景（如页面编排、关系图编排）的 UI 编排。通过注册不同的运行时环境的渲染模块，能够实现编辑器从 React 页面搭建到 Rax 页面搭建的迁移。通过注册不同的模拟器画布，你可以基于 G6或者 mxgraph 来做关系图编排。你可以定制一个流式布局的画布，也可以定制一个自由布局的画布。
+基于以上思考，我们通过基于沙箱隔离的模拟器技术来实现了多运行时环境（如 React、Rax、小程序、Vue）、多模式（如流式布局、自由布局）、多场景（如页面编排、关系图编排）的 UI 编排。通过注册不同的运行时环境的渲染模块，能够实现编辑器从 React 页面搭建到 Rax 页面搭建的迁移。通过注册不同的模拟器画布，你可以基于 G6 或者 mxgraph 来做关系图编排。你可以定制一个流式布局的画布，也可以定制一个自由布局的画布。
diff --git a/docs/docs/guide/design/setter.md b/docs/docs/guide/design/setter.md
index 66de03bb1c..7afbbf034f 100644
--- a/docs/docs/guide/design/setter.md
+++ b/docs/docs/guide/design/setter.md
@@ -2,22 +2,27 @@
title: 设置器设计
sidebar_position: 6
---
+
设置器，又称为 Setter，是作为物料属性和用户交互的重要途径，在编辑器日常使用中有着非常重要的作用，本文重点介绍 Setter 的设计原理和使用方式，帮助用户更好的理解 Setter。
+
在编辑器的右边区域，Setter 的区块就展现在这里，如下图：
-
+
+
+
其中包含 属性、样式、事件、高级：
- 属性：展示该物料常规的属性；
- 样式：展示该物料样式的属性；
- 事件：如果该物料有声明事件，则会出现事件面板，用于绑定事件；
- 高级：两个逻辑相关的属性，**条件渲染**和**循环。**
-# npm 包与仓库信息
+## npm 包与仓库信息
- npm 包：@alilc/lowcode-engine-ext
- 仓库：[https://github.com/alibaba/lowcode-engine-ext](https://github.com/alibaba/lowcode-engine-ext)
-# 设置器模块原理
-
+## 设置器模块原理
+
+
设置面板依赖于以下三块抽象
@@ -25,8 +30,9 @@ sidebar_position: 6
- 设置对象 `settingTarget`，主要包含：选中的节点、是否同一值、值的储存等
- 设置列 `settingField`，主要和当前设置视图相关，包含视图的 `ref`、以及设置对象 `settingTarget`
-#### SettingTarget 抽象
-如果不是多选，可以直接暴露 `Node` 给到这，但涉及多选编辑的时候，大家的值时通常是不一样的，设置的时候需要批量设置进去，这里主要封装这些逻辑，把多选编辑的复杂性屏蔽掉。
+### SettingTarget 抽象
+
+如果不是多选，可以直接暴露 `Node` 给到这，但涉及多选编辑的时候，大家的值通常是不一样的，设置的时候需要批量设置进去，这里主要封装这些逻辑，把多选编辑的复杂性屏蔽掉。
所选节点所构成的**设置对象**抽象如下：
@@ -49,7 +55,7 @@ interface SettingTarget {
}
```
-基于设置对象所派生的**设置目标属性**抽象如下:
+基于设置对象所派生的**设置目标属性**抽象如下：
```typescript
interface SettingTargetProp extends SettingTarget {
@@ -68,8 +74,8 @@ interface SettingTargetProp extends SettingTarget {
}
```
-#### SettingField 抽象
-
+### SettingField 抽象
+
```typescript
interface SettingField extends SettingTarget {
diff --git a/docs/docs/guide/design/specs.md b/docs/docs/guide/design/specs.md
index be449e3dc1..2e8e4c195c 100644
--- a/docs/docs/guide/design/specs.md
+++ b/docs/docs/guide/design/specs.md
@@ -1,31 +1,51 @@
---
-title: 低代码引擎协议栈简介
+title: 协议栈简介
sidebar_position: 1
---
-# 什么是低代码协议
-这是两份中后台低代码领域的标准协议，即《低代码引擎物料协议规范》和《低代码引擎搭建协议规范》。它们保障了低代码领域的标准化，成为了生态建设和流通的基石。
-
-# 为什么需要协议
+## 什么是低代码协议
+低代码引擎体系基于三份协议来构建，分别是 [《低代码引擎搭建协议规范》](/site/docs/specs/lowcode-spec)、[《低代码引擎物料协议规范》](/site/docs/specs/material-spec)和[《低代码引擎资产包协议规范》](/site/docs/specs/assets-spec), 它们保障了低代码领域的标准化，成为了生态建设和流通的基石。
+
+
+
+## 为什么需要协议
+
首先，我们做一个不恰当的类比，我们将低代码引擎和 JavaScript 语言做一下类别。还记得之前，大家都被浏览器兼容性支配的恐惧，特别是 IE 和其他浏览器，对上层 API 实现的不一致，导致一份代码需要运行在两端需要做适配。当浏览器 / JavaScript 相关的标准出现之后，各个浏览器进行了 API 的统一，使得我们终于可以从这部分工作中解放出来（PS：Babel 对于语言特性的转换是另一个方面的问题）。
+
而在《低代码引擎搭建协议规范》出现之前，低代码领域也有类似的问题。
-## 概念不通
+
+### 概念不通
+
在交流的过程中，一些对于搭建产品的术语的不一致，导致了一些沟通成本，不管是在文章分享、技术分享、交流会上，都会有这个问题。
-## 物料孤岛
+
+### 物料孤岛
+
由于低代码产品实现的方式不同，物料的消费方式也各不相同。这里分为两种物料，低代码物料和 ProCode 物料。
+
对于低代码物料来说，A 平台创建的物料无法使用到 B 平台上，如果想在 B 平台实现同样的物料，需要按照 B 平台的标准搭建一份物料。
-对于 ProCode 物料来说，需要在低代码平台进行消费，是需要进行转换的，包括搭建配置项的生成、物料搭建试图等，可能还需要特殊的描述文件进行描述。由于这一层没有统一，同一份 ProCode 物料每接入一个低代码，可能需要的描述文件格式不同，转换的代码不同，使用的工具也不同。
-## 生态隔离
-不同低代码平台的生态体系也不相同，有的低代码平台的物料生态不错，有的低代码平台的搭建体验生态不错。但是这些利好的生态，都是无法互通的，甚至就算知道了代码，也无法复用，因为底层是不一致的。对于集团来说，每一个平台都创建一份自己的生态，这并不是利好的。
-## 技术深度不够
+
+对于 ProCode 物料来说，需要在低代码平台进行消费，是需要进行转换的，包括搭建配置项的生成、物料搭建视图等，可能还需要特殊的描述文件进行描述。由于这一层没有统一，同一份 ProCode 物料每接入一个低代码，可能需要的描述文件格式不同，转换的代码不同，使用的工具也不同。
+
+### 生态隔离
+
+不同低代码平台的生态体系也不相同，有的低代码平台的物料生态不错，有的低代码平台的搭建体验生态不错。但是这些利好的生态，都是无法互通的，甚至就算知道了代码也无法复用，因为底层是不一致的。对于阿里巴巴集团来说，每一个平台都创建一份自己的生态，这并不是利好的。
+
+### 低水平重复建设
+
大家可能觉得，以上问题对于自己造轮子来说，其实也是有利的，因为自己得到了技术上的成长。
-但是对于低代码的平台方，实际上更多的工作，在物料的转化、物料的生成、搭建体验的小优化、部分其他平台生态的实现。这些的技术深度其实并不高。
-## 价值不高
+
+但是对于低代码的平台方，实际上更多的工作，在物料的转化、物料的生成、搭建体验的小优化、部分其他平台生态的实现。这些的技术深度其实并不高，属于低水平重复建设部分。
+
+### 价值不高
+
如果每个业务都要从 0 开始做，做自己的平台，会花费大量的时间来构建底层基础设施，对业务本身而言并不是一件好事；而且前端领域的底层基础设施都大同小异，不同团队重复构建造成了极大的资源浪费。
+
这样的建设，会导致从 0 到 1 都需要花费大量的时间，往往在内部人力不足、投入有限时，产品很容易在未发展壮大的时候就面临了死亡相关的决策。
+
设想一下，如果可以开发一份全集团低代码平台都可以使用的物料，是否更有成就感呢？如果可以基于已有生态进行低代码平台的快速落地，而不是花费 1-2 年搭建一个可用的低代码平台，再验证市场。在快速的验证之后，再进行更深入的打磨，这其中的思考和技术含量是否更优于之前的模式呢？
-比如不同平台的低代码物料
-1. vc-deep — vc 协议 + Deep 组件库(企业智能基于 Fusion Next 定制)；
+以 2019 年的阿里巴巴的情况举例，不同平台的低代码物料但不限于：
+
+1. vc-deep — vc 协议 + Deep 组件库 (阿里巴巴企业智能团队基于 Fusion Next 定制)；
2. Iceluna 协议 + Fusion Next；
3. AIMake 物料；
4. vc-fusion-basic + 业务改造 — vc 协议 + Fusion Next(各业务 Fork 定制)；
@@ -33,28 +53,37 @@ sidebar_position: 1
6. vc 协议 + antd；
可以看到，各个搭建平台都需要维护一套自己的基础组件库，这是非常不合理的，对基础组件库的维护会分散开发同学完成业务目标的精力。
-建立统一的低代码领域标准化，是百利而无一害的。于是，在阿里巴巴集团2020财年进行了讨论，建立了搭建治理&物料流通战役，此战役便产出了《低代码引擎物料协议规范》、《低代码引擎搭建协议规范》两份规范，成为了低代码引擎和其生态的基础。
-# 协议的作用
-基于统一的协议，我们完成业务组件、区块、模板等各类物料的标准统一，基于统一的协议，我们完成业务组件、区块、模板等各类物料的标准统一，集团各类中后台研发系统生产的物料可借助物料中心进行跨系统流通，通过丰富物料生态的共享提升阿里巴巴中后台研发系统的效率。同时完成低代码引擎的标准统一以及低代码搭建中台能力的输出，帮助业务方快速孵化本业务域中后台研发系统。
-## 打破物料孤岛
-### 物料中心
-在《低代码引擎物料协议规范》成立了之后，规范先行建立了阿里巴巴各个中后台研发平台沟通、对话的基础，物料流通的先决条件已经成熟，这个时候我们还需要一个统一的物料源，用于管理物料的上传、存储、检索、分发，一个典型的中心化架构，类似 npm 的管理，这便是我们物料中心。
+建立统一的低代码领域标准化，是百利而无一害的。于是，在阿里巴巴集团 2020 年进行了讨论，建立了搭建治理&物料流通战役，此战役便产出了上文中的协议规范，成为了低代码引擎和其生态的基础。
+
+## 协议的作用
+
+基于统一的协议，我们完成业务组件、区块、模板等各类物料的标准统一，各类中后台研发系统生产的物料可借助物料中心进行跨系统流通，通过丰富物料生态的共享提升各平台研发系统的效率。同时完成低代码引擎的标准统一以及低代码搭建中台能力的输出，帮助业务方快速孵化本业务域中后台研发系统。
+
+### 打破物料孤岛
+
+#### 物料中心
+
+这里以阿里集团的前端物料中间建设为例，在《低代码引擎物料协议规范》落地之后，建立了阿里巴巴各个中后台研发平台沟通、对话的基础，物料流通的先决条件已经成熟，这个时候我们还需要一个统一的物料源，用于管理物料的上传、存储、检索、分发，一个典型的中心化架构，类似 npm 的管理，这便是我们物料中心。
+
Fusion Market 是物料中心的前身，它提供了业务组件的存储、文档展示和全局透出的功能，由于 fusion 体系在集团内的广泛使用，Fusion Market 沉淀了不少的业务组件，但是这个项目却一直不温不火，只看到业务组件数量的增加，却未看到物料流通起来。其中一个原因是，没有阿里巴巴前端委员会的背书，规范很难统一，规范如果不统一，物料就很难流通；
+
在规范成立之后，物料中心也将有了建设的基础，最终于 2019 年建立了物料中心，提供了物料流通的平台能力。
-### 低代码基础物料
+
+#### 低代码基础物料
+
就像 AntD、Element 之于源码研发模式，在低代码研发模式下各个搭建平台也需要一套统一的、开箱即用的低代码基础组件库。基于低代码描述协议完成了两份低代码基础物料的建设，即“Fusion 低代码基础组件库”和“AntD 低代码基础组件库”。
-### 源码组件低代码化
+
+#### 源码组件低代码化
+
将源码组件一键转化为低代码物料，符合低代码物料规范，可以在低代码平台进行流通。
### 低代码物料中心
-当低代码物料积累到一定的量级之后，所有的搭建平台的业务物料越来越多。这些物料通过低代码物料中心进行统一的管理和消费。
-## Setter 生态的基础
-Snippet(组件默认搭建 schema )由《低代码引擎搭建协议规范》定义，低代码引擎会按照规范对组件进行渲染，Configure 由《低代码引擎物料协议规范》定义，它描述了组件的 props 以及每个 prop 对应的 setter (Prop 配置面板)，低代码引擎提供了 14 个内置 Setter，但如果我们组件的 props 超出了引擎内置 setter 的范围，就需要我们自己来开发对应 Setter。
-setter 最终也慢慢形成了自己的生态，这使得开发物料更加容易，可以使用已有的 setter 生态，进行物料配置描述。
-## 低代码引擎实现标准
-低代码引擎是以上生态的消费端，它是实现了标准协议的低代码引擎。这是不可或缺的部分，低代码引擎这里就相当于一个标准浏览器，一方面给其他的低代码平台提供了一个 Demo，其他平台可以参考低代码引擎进行实现，满足官方协议，便也可以消费相关的物料生态和其他生态。
-通过物料中心实现集团各业务域物料跨系统流通是第一步，通过低代码引擎快速搭建出来的各业务域低代码平台平滑高效地使用各业务域物料，提升集团中后台研发系统的效率是关键的第二步。
+当低代码物料积累到一定的量级之后，所有的搭建平台的业务物料越来越多。这些物料通过低代码物料中心进行统一的管理和消费。
+### 设置器生态的基础
+Snippet(组件默认搭建 schema ) 由《低代码引擎搭建协议规范》定义，低代码引擎会按照规范对组件进行渲染，Configure 由《低代码引擎物料协议规范》定义，它描述了组件的 props 以及每个 prop 对应的设置器 (Prop 配置面板)，低代码引擎提供了 20+ 个内置设置器，但如果我们组件的 props 超出了引擎内置设置器的范围，就需要我们自己来开发对应设置器。
+设置器最终也慢慢形成了自己的生态，这使得开发物料更加容易，可以使用已有的生态中的设置器，进行物料配置描述。
+### 低代码引擎实现标准
-其中入料模块，使得任意符合物料协议的物料都可以被消费，也就打破了物料孤岛，实现物料之间的流通。
+低代码引擎是以上生态的消费端，它是实现了标准协议的低代码引擎。这是不可或缺的部分，低代码引擎这里就相当于一个标准浏览器，一方面给其他的低代码平台提供了一个 Demo，其他平台可以参考低代码引擎进行实现，满足官方协议，便也可以消费相关的物料生态和其他生态。
diff --git a/docs/docs/guide/design/summary.md b/docs/docs/guide/design/summary.md
index 604886e8b7..38d523cac9 100644
--- a/docs/docs/guide/design/summary.md
+++ b/docs/docs/guide/design/summary.md
@@ -1,46 +1,55 @@
---
-title: 低代码引擎架构综述
+title: 架构综述
sidebar_position: 0
---
## 分层架构描述
-
+
+
我们设计了这样一套分层架构，自下而上分别是协议 - 引擎 - 生态 - 平台。
-底层协议栈定义的是标准，**标准的统一让上层产物的互通成为可能**，
-**引擎是对协议的实现，同时通过能力的输出，向上支撑生态开放体系，提供各种生态扩展能力，**
-那么生态就好理解了，是基于引擎核心能力上扩展出来的，比如物料、设置器、插件等，还有工具链支撑开发体系，
-最后，各个平台基于引擎内核以及生态中的产品组合、衔接形成满足其需求的低代码平台。
+
+- 底层协议栈定义的是标准，**标准的统一让上层产物的互通成为可能**。
+- 引擎是**对协议的实现**，同时通过能力的输出，向上**支撑生态开放体系**，提供各种生态扩展能力。
+- 生态就好理解了，是基于引擎核心能力上扩展出来的，比如物料、设置器、插件等，还有工具链支撑开发体系。
+- 最后，各个平台基于引擎内核以及生态中的产品组合、衔接形成满足其需求的低代码平台。
+
**每一层都明确自身的定位，各司其职，协议不会去思考引擎如何实现，引擎也不会实现具体上层平台功能，上层平台的定制化均通过插件来实现，这些理念将会贯穿我们体系设计、实现的过程。**
## 引擎内核简述
-
+
+
+低代码引擎分为 4 大模块，入料 - 编排 - 渲染 - 出码：
-低代码引擎分为 4 大模块，入料 - 编排 - 渲染 - 出码。
-入料模块就是将外部的物料，比如海量的 npm 组件，按照《物料描述协议》进行描述。
-**注意，这里仅是增加描述，而非重写一套，这样我们能最大程度复用ProCode体系已沉淀的组件。**
-将描述后的数据通过引擎 API 注册后，在编辑器中使用。
-编排，本质上来讲，就是**不断在生成符合《搭建协议》的页面描述，将编辑器中的所有物料，进行布局设置、组件 CRUD 操作、以及 JS/CSS编写/逻辑编排**等，最终转换成页面描述，技术细节待会儿我们再展开讲讲。
-渲染，顾名思义，就是**将编排生成的页面描述结构渲染成视图的过程**，视图是面向用户的，所以必须处理好内部数据流、生命周期、事件绑定、国际化等。
-出码，就是**将页面描述结构解析和转换成应用代码的机制**。
+- 入料模块就是将外部的物料，比如海量的 npm 组件，按照[《低代码引擎物料协议规范》](/site/docs/specs/material-spec)进行描述。将描述后的数据通过引擎 API 注册后，在编辑器中使用。
+ > **注意，这里仅是增加描述，而非重写一套，这样我们能最大程度复用 ProCode 体系已沉淀的组件。**
+- 编排，本质上来讲，就是**不断在生成符合[《低代码引擎搭建协议规范》](/site/docs/specs/lowcode-spec)的页面描述，将编辑器中的所有物料，进行布局设置、组件 CRUD 操作、以及 JS / CSS 编写/ 逻辑编排 **等，最终转换成页面描述，技术细节后文会展开。
+- 渲染，顾名思义，就是**将编排生成的页面描述结构渲染成视图的过程**，视图是面向用户的，所以必须处理好内部数据流、生命周期、事件绑定、国际化等。
+- 出码，就是**将编排过程产生的符合[《低代码引擎搭建协议规范》](/site/docs/specs/lowcode-spec)的页面描述转换成另一种 DSL 或 编程语言代码的过程**。
## 引擎生态简述
-
+
-
+
引擎生态主要分为 3 部分，物料、设置器和插件。
+
### 物料生态
+
物料是低代码平台的生产资料，没有物料低代码平台则变成了无源之水无本之木。低代码平台的物料即低代码组件。因此低代码物料生态指的是：
-1）低代码物料生产能力和规范。
-2）对低代码物料进行统一管理的物料中心。
-3）基于 Fusion Next 的低代码基础组件库。
+1. 低代码物料生产能力和规范。
+2. 对低代码物料进行统一管理的物料中心。
+3. 基于 Fusion Next 的低代码基础组件库。
### 设置器生态
+
对于已接入物料的属性配置，需要不同的设置器。
+
比如配置数值类型的 age，需要一个数值设置器，配置对象类型的 hobby，需要一个对象设置器，依次类推。
+
每个设置器本质上都是一个 React 组件，接受由引擎传入的参数，比如 value 和 onChange，value 是初始传入的值，onChange 是在设置器的值变化时的回传函数，将值写回到引擎中。
-```json
+
+```typescript
// 一个最简单的文本设置器示例
class TextSetter extends Component {
render() {
@@ -49,9 +58,12 @@ class TextSetter extends Component {
}
}
```
+
大多数组件所使用的设置器都是一致或相似的。如同建设低代码基础组件库一样，设置器生态是一组基础的设置器，供大多数组件配置场景使用。
+
同时提供了设置器的定制功能。
### 插件生态
低代码引擎本身只包含了最小的内核，而我们所能看到的设计器上的按钮、面板等都是插件提供的。插件是组成设计器的必要部分。
+
因此我们提供了一套官方的插件生态，提供最基础的设计器功能。帮助用户通过使用插件，快速完成自己的设计器。
diff --git a/docs/docs/guide/expand/_category_.json b/docs/docs/guide/expand/_category_.json
index 36116999b1..15aeb3dea1 100644
--- a/docs/docs/guide/expand/_category_.json
+++ b/docs/docs/guide/expand/_category_.json
@@ -1,5 +1,5 @@
{
- "label": "扩展低代码应用",
+ "label": "扩展低代码编辑器",
"position": 2,
"collapsed": false,
"collapsible": true
diff --git a/docs/docs/guide/expand/editor/_category_.json b/docs/docs/guide/expand/editor/_category_.json
index b0c35885cb..52662a9d1e 100644
--- a/docs/docs/guide/expand/editor/_category_.json
+++ b/docs/docs/guide/expand/editor/_category_.json
@@ -1,4 +1,6 @@
{
- "label": "扩展低代码编辑器",
- "position": 1
+ "label": "扩展编辑态",
+ "position": 1,
+ "collapsed": false,
+ "collapsible": true
}
diff --git a/docs/docs/guide/expand/editor/cli.md b/docs/docs/guide/expand/editor/cli.md
index 7f46c7b2e7..0577a181db 100644
--- a/docs/docs/guide/expand/editor/cli.md
+++ b/docs/docs/guide/expand/editor/cli.md
@@ -1,181 +1,198 @@
---
title: 低代码生态脚手架 & 调试机制
-sidebar_position: 7
+sidebar_position: 10
---
## 脚手架简述
在 fork 低代码编辑器 demo 项目后，您可以直接在项目中任意扩展低代码编辑器。如果您想要将自己的组件/插件/设置器封装成一个独立的 npm 包并提供给社区，您可以使用我们的低代码脚手架建立低代码扩展。
> Windows 开发者请在 WSL 环境下使用开发工具
+>
> WSL 中文 doc：[https://docs.microsoft.com/zh-cn/windows/wsl/install](https://docs.microsoft.com/zh-cn/windows/wsl/install)
-中文教程：[https://blog.csdn.net/weixin_45027467/article/details/106862520](https://blog.csdn.net/weixin_45027467/article/details/106862520)
+>
+> 中文教程：[https://blog.csdn.net/weixin_45027467/article/details/106862520](https://blog.csdn.net/weixin_45027467/article/details/106862520)
## 脚手架功能
### 脚手架初始化
-```shell
-$ npm init @alilc/element your-element-name
+
+```bash
+npm init @alilc/element your-element-name
```
不写 your-element-name 的情况下，则在当前目录创建。
-> 觉得安装速度比较慢的同学，可以设置 npm 国内镜像，如
+> 注 1：如遇错误提示 `sh: create-element: command not found` 可先执行下述命令
+```bash
+npm install -g @alilc/create-element
+```
+> 注 2：觉得安装速度比较慢的同学，可以设置 npm 国内镜像，如
```bash
-$ npm init @alilc/element your-element-name --registry=https://registry.npmmirror.com
+npm init @alilc/element your-element-name --registry=https://registry.npmmirror.com
```
选择对应的元素类型，并填写对应的问题，即可完成创建。
-
+
+
+
### 脚手架本地环境调试
-```shell
+
+```bash
cd your-element-name
npm install
npm start
```
### 脚手架构建
-```shell
-$ npm run build
+
+```bash
+npm run build
```
+
### 脚手架发布
-修改版本号后，执行如下指令即可：
-```shell
-$ npm publish
-```
-# 🔥🔥🔥 调试物料/插件/设置器
+修改版本号后，执行如下指令即可：
-> 📢📢 📢 低代码生态脚手架提供的调试利器，在启动 setter/插件/物料 项目后，直接在已有的低代码平台就可以调试，不需要 npm link / 手改 npm main 入口等传统方式，轻松上手，强烈推荐使用！！
+```bash
+npm publish
+```
+## 🔥🔥🔥 在低代码项目中调试物料/插件/设置器
-注：若控制台出现如下错误，直接访问一次该 url 即可~
-
+> 📢📢📢 低代码生态脚手架提供的调试利器，在启动 setter/插件/物料 项目后，直接在已有的低代码平台就可以调试，不需要 npm link / 手改 npm main 入口等传统方式，轻松上手，强烈推荐使用！！
-## 组件/插件/Setter 侧
+### 组件/插件/Setter 侧
1. 插件/setter 在原有 alt 的配置中添加相关的调试配置
-```json
-// build.json 中
-{
- "plugins": [
- [
- "@alilc/build-plugin-alt",
- {
- "type": "plugin",
- "inject": true, // 开启注入调试
- // 配置要打开的页面，在注入调试模式下，不配置此项的话不会打开浏览器
- // 支持直接使用官方 demo 项目：https://lowcode-engine.cn/demo/index.html
- "openUrl": "https://lowcode-engine.cn/demo/index.html?debug"
- }
- ],
- ]
-}
-```
+ ```json
+ // build.json 中
+ {
+ "plugins": [
+ [
+ "@alilc/build-plugin-alt",
+ {
+ "type": "plugin",
+ "inject": true, // 开启注入调试
+ // 配置要打开的页面，在注入调试模式下，不配置此项的话不会打开浏览器
+ // 支持直接使用官方 demo 项目：https://lowcode-engine.cn/demo/index.html
+ "openUrl": "https://lowcode-engine.cn/demo/index.html?debug"
+ }
+ ],
+ ]
+ }
+ ```
2. 组件需先安装 @alilc/build-plugin-alt，再将组件内的 `build.lowcode.js`文件修改如下
-```javascript
-const { library } = require('./build.json');
-
-module.exports = {
- alias: {
- '@': './src',
- },
- plugins: [
- [
- // lowcode 的配置保持不变，这里仅为示意。
- '@alifd/build-plugin-lowcode',
- {
- library,
- engineScope: "@alilc"
- },
- ],
- [
- '@alilc/build-plugin-alt',
- {
- type: 'component',
- inject: true,
- library,
- // 配置要打开的页面，在注入调试模式下，不配置此项的话不会打开浏览器
- // 支持直接使用官方 demo 项目：https://lowcode-engine.cn/demo/index.html
- openUrl: "https://lowcode-engine.cn/demo/index.html?debug"
- }
- ]],
-};
-```
+ ```javascript
+ const { library } = require('./build.json');
+
+ module.exports = {
+ alias: {
+ '@': './src',
+ },
+ plugins: [
+ [
+ // lowcode 的配置保持不变，这里仅为示意。
+ '@alifd/build-plugin-lowcode',
+ {
+ library,
+ engineScope: "@alilc"
+ },
+ ],
+ [
+ '@alilc/build-plugin-alt',
+ {
+ type: 'component',
+ inject: true,
+ library,
+ // 配置要打开的页面，在注入调试模式下，不配置此项的话不会打开浏览器
+ // 支持直接使用官方 demo 项目：https://lowcode-engine.cn/demo/index.html
+ openUrl: "https://lowcode-engine.cn/demo/index.html?debug"
+ }
+ ]],
+ };
+ ```
3. 本地组件/插件/Setter正常启动调试，在项目的访问地址增加 debug，即可开启注入调试。
-```typescript
-https://lowcode-engine.cn/demo/index.html?debug
-```
-## 项目侧的准备
+ ```url
+ https://lowcode-engine.cn/demo/demo-general/index.html?debug
+ ```
+
+### 项目侧的准备
+
> 如果你的低代码项目 fork 自官方 demo，那么项目侧的准备已经就绪，不用再看以下内容~
1. 安装 @alilc/lowcode-plugin-inject
-```shell
-npm i @alilc/lowcode-plugin-inject --save-dev
-```
+ ```bash
+ npm i @alilc/lowcode-plugin-inject --save-dev
+ ```
2. 在引擎初始化侧引入插件
-```json
-import Inject, { injectAssets } from '@alilc/lowcode-plugin-inject';
-
-export default async () => {
- // 注意 Inject 插件必须在其他插件前注册，且所有插件的注册必须 await
- await plugins.register(Inject);
- await plugins.register(OtherPlugin);
- await plugins.register((ctx: ILowCodePluginContext) => {
- return {
- name: "editor-init",
- async init() {
- // 设置物料描述前，使用插件提供的 injectAssets 进行处理
- const { material, project } = ctx;
- material.setAssets(await injectAssets(assets));
- },
- };
- });
-}
-```
+ ```typescript
+ import Inject, { injectAssets } from '@alilc/lowcode-plugin-inject';
+ import { IPublicModelPluginContext } from '@alilc/lowcode-types';
+
+ export default async () => {
+ // 注意 Inject 插件必须在其他插件前注册，且所有插件的注册必须 await
+ await plugins.register(Inject);
+ await plugins.register(OtherPlugin);
+ await plugins.register((ctx: IPublicModelPluginContext) => {
+ return {
+ name: "editor-init",
+ async init() {
+ // 设置物料描述前，使用插件提供的 injectAssets 进行处理
+ const { material, project } = ctx;
+ material.setAssets(await injectAssets(assets));
+ },
+ };
+ });
+ }
+ ```
+
+3. 在 saveSchema 时过滤掉插入的 url，避免影响渲染态
+ ```typescript
+ import { filterPackages } from '@alilc/lowcode-plugin-inject';
+ export const saveSchema = async () => {
+ // ...
+ const packages = await filterPackages(editor.get('assets').packages);
+ window.localStorage.setItem(
+ 'packages',
+ JSON.stringify(packages),
+ );
+ // ...
+ };
+ ```
-3. 在 saveSchema 时过滤掉插入的url，避免影响渲染态
-```javascript
-import { filterPackages } from '@alilc/lowcode-plugin-inject';
-export const saveSchema = async () => {
- // ...
- const packages = await filterPackages(editor.get('assets').packages);
- window.localStorage.setItem(
- 'packages',
- JSON.stringify(packages),
- );
- // ...
-};
+4. 如果希望预览态也可以注入调试组件，则需要在 preview 逻辑里插入组件
+ ```javascript
+ import { injectComponents } from '@alilc/lowcode-plugin-inject';
-```
+ async function init() {
+ // 在传递给 ReactRenderer 前，先通过 injectComponents 进行处理
+ const components = await injectComponents(buildComponents(libraryMap, componentsMap));
+ // ...
+ }
+ ```
-4. 如果希望预览态也可以注入调试组件，则需要在 preview 逻辑里插入组件
-```javascript
-import { injectComponents } from '@alilc/lowcode-plugin-inject';
+注：若控制台出现如下错误，直接访问一次该 url 即可~
+
+
-async function init() {
- // 在传递给 ReactRenderer 前，先通过 injectComponents 进行处理
- const components = await injectComponents(buildComponents(libraryMap, componentsMap));
- // ...
-}
-```
-# Meta 信息
+## Meta 信息
meta 信息是放在生态元素 package.json 中的一小段 json，用户可以通过 meta 了解到这个元素的一些基本信息，如元素类型，一些入口信息等。
```typescript
interface LcMeta {
- type: 'plugin' | 'setter' | 'component'; // 元素类型，尚未实现
- pluginName: string; // 插件名，仅插件包含
+ type: 'plugin' | 'setter' | 'component'; // 元素类型，尚未实现
+ pluginName: string; // 插件名，仅插件包含
meta: {
- dependencies: string[]; // 插件依赖的其他插件列表，仅插件包含
+ dependencies: string[]; // 插件依赖的其他插件列表，仅插件包含
engines: {
- lowcodeEngine: string; // 适配的引擎版本
+ lowcodeEngine: string; // 适配的引擎版本
}
- prototype: string; // 物料描述入口，仅组件包含，尚未实现
- prototypeView: string; // 物料设计态入口，仅组件包含，尚未实现
+ prototype: string; // 物料描述入口，仅组件包含，尚未实现
+ prototypeView: string; // 物料设计态入口，仅组件包含，尚未实现
}
}
```
diff --git a/docs/docs/guide/expand/editor/graph.md b/docs/docs/guide/expand/editor/graph.md
new file mode 100644
index 0000000000..a45f34baf0
--- /dev/null
+++ b/docs/docs/guide/expand/editor/graph.md
@@ -0,0 +1,155 @@
+---
+title: 图编排扩展
+sidebar_position: 8
+---
+## 项目运行
+### 前置准备
+1. 参考 https://lowcode-engine.cn/site/docs/guide/quickStart/start
+2. 参考至Demo下载 https://lowcode-engine.cn/site/docs/guide/quickStart/start#%E4%B8%8B%E8%BD%BD-demo
+### 选择demo-graph-x6
+在根目录下执行：
+```bash
+cd demo-graph-x6
+```
+### 安装依赖
+在 lowcode-demo/demo-graph-x6目录下执行：
+```bash
+npm install
+```
+### 启动Demo
+在 lowcode-demo/demo-graph-x6 目录下执行：
+```bash
+npm run start
+```
+之后就可以通过 http://localhost:5556/ 来访问我们的 DEMO 了。
+
+## 认识Demo
+这里的Demo即通过图编排引擎加入了几个简单的物料而来，已经是可以面向真是用户的产品界面。
+
+### 区域组成
+#### 顶部：操作区
+- 右侧：保存到本地、重置页面、自定义按钮
+#### 顶部：工具区
+- 左侧：删除、撤销、重做、放大、缩小
+#### 左侧：面板与操作区
+- 物料面板：可以查找节点，并在此拖动节点到编辑器画布中
+#### 中部：可视化页面编辑画布区域
+- 点击节点/边在右侧面板中能够显示出对应组件的属性配置选项
+- 拖拽修改节点的排列顺序
+#### 右侧：组件级别配置
+- 选中的组件：从页面开始一直到当前选中的节点/边位置，点击对应的名称可以切换到对应的节点上
+- 选中组件的配置：属性：节点的基础属性值设置
+
+> 每个区域的组成都可以被替换和自定义来生成开发者需要的业务产品。
+
+## 目录介绍
+
+
+- public：与其他demo保持一致，均是lowcode engine所必要依赖
+- src
+ - plugins:：自定义插件，完成了x6的切面回调处理功能
+ - services：mock数据，真实场景中可能为异步获取数据
+
+## 开发插件
+```typescript
+function pluginX6DesignerExtension(ctx: IPublicModelPluginContext) {
+ return {
+ init() {
+ // 获取 x6 designer 内置插件的导出 api
+ const x6Designer = ctx.plugins['plugin-x6-designer'] as IDesigner;
+
+ x6Designer.onNodeRender((model, node) => {
+ // @ts-ignore
+ // 自定义 node 渲染逻辑
+ const { name, title } = model.propsData;
+ node.attr('text/textWrap/text', title || name);
+ });
+
+ x6Designer.onEdgeRender((model, edge) => {
+ // @ts-ignore
+ const { source, target, sourcePortId, targetPortId } = model.propsData;
+ console.log(sourcePortId, targetPortId);
+ requestAnimationFrame(() => {
+ edge.setSource({ cell: source, port: sourcePortId });
+ edge.setTarget({ cell: target, port: targetPortId });
+ });
+
+ // https://x6.antv.vision/zh/docs/tutorial/intermediate/edge-labels x6 标签模块
+ // appendLabel 会触发 onEdgeLabelRender
+ edge.appendLabel({
+ markup: Markup.getForeignObjectMarkup(),
+ attrs: {
+ fo: {
+ width: 120,
+ height: 30,
+ x: -60,
+ y: -15,
+ },
+ },
+ });
+ });
+
+ x6Designer.onEdgeLabelRender((args) => {
+ const { selectors } = args
+ const content = selectors.foContent as HTMLDivElement
+ if (content) {
+ ReactDOM.render(自定义 react 标签
, content)
+ }
+ })
+ }
+ }
+}
+
+pluginX6DesignerExtension.pluginName = 'plugin-x6-designer-extension';
+
+export default pluginX6DesignerExtension;
+```
+x6Designer为图实例暴露出来的一些接口，可基于此进行一些图的必要插件的封装，整个插件的封装完全follow低代码引擎的插件，详情可参考 https://lowcode-engine.cn/site/docs/guide/expand/editor/pluginWidget
+
+## 开发物料
+```bash
+npm init @alilc/element your-material-demo
+```
+
+
+仓库初始化完成
+
+
+接下来即可编写物料内容了
+图物料与低代码的dom场景存在画布的差异，因此暂不支持物料单独调试，须通过项目demo进行物料调试
+
+### 资产描述
+```bash
+npm run lowcode:build
+```
+如果物料是个React组件，则在执行上述命令时会自动生成对应的meta.ts，但图物料很多时候并非一个React组件，因此须手动生产meta.ts
+
+可参考： https://github.com/alibaba/lowcode-materials/blob/main/packages/graph-x6-materials/lowcode/send-email/meta.ts
+同时会自动生成物料描述文件
+
+### 物料调试
+#### 物料侧
+物料想要支持被项目动态inject调试，须在build.lowcode.js中加入
+```javascript
+[
+ '@alilc/build-plugin-alt',
+ {
+ type: 'component',
+ inject: true,
+ library
+ },
+]
+```
+
+
+本地启动
+```bash
+npm run lowcode:dev
+```
+#### 项目侧
+通过@alilc/lce-graph-core加载物料的天然支持了debug，因此无须特殊处理。
+若项目中自行加载，则参考 https://lowcode-engine.cn/site/docs/guide/expand/editor/cli
+项目访问地址后拼接query "?debug"即可进入物料调试
+
+
+
diff --git a/docs/docs/guide/expand/editor/material.md b/docs/docs/guide/expand/editor/material.md
index 88ea8b908b..6e4979553b 100644
--- a/docs/docs/guide/expand/editor/material.md
+++ b/docs/docs/guide/expand/editor/material.md
@@ -12,14 +12,14 @@ sidebar_position: 1
低代码编辑器中的物料需要进行一定的配置和处理，才能让用户在低代码平台使用起来。这个过程中，需要一份一份配置文件，也就是资产包。资产包文件中，针对每个物料定义了它们在低代码编辑器中的使用描述。
## 资产包配置
### 什么是低代码资产包
-
+
在低代码 Demo 中，我们可以看到，组件面板不只提供一个组件，组件是以集合的形式提供给低代码平台的，而低代码资产包正是这些组件构成集合的形式。
**_它背后的 Interface，_**[**_在引擎中的定义摘抄如下_**](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/assets.ts)**_：_**
```typescript
export interface Assets {
version: string; // 资产包协议版本号
- packages?: Arraydumb
+ return dumb
;
}
}
```
+
引入 parse 工具自动解析
+
```typescript
import parse from '@alilc/lowcode-material-parser';
(async () => {
@@ -59,7 +61,9 @@ import parse from '@alilc/lowcode-material-parser';
console.log(JSON.stringify(result, null, 2));
})();
```
+
因为一个组件可能输出多个子组件，所以解析结果是个数组。
+
```json
[
{
@@ -103,6 +107,7 @@ import parse from '@alilc/lowcode-material-parser';
}
]
```
+
## 手工配置物料描述
如果自动生成的物料无法满足需求，我们就需要手动配置物料描述。本节将分场景描述物料配置的内容。
@@ -113,7 +118,8 @@ import parse from '@alilc/lowcode-material-parser';
增加一个 size 属性，只能从 'large'、'normal'、'small' 这个候选值中选择。
-以上面自动解析的物料为例，在此基础上手工加上 size 属性：
+以上面自动解析的物料为例，在此基础上手工加上 size 属性：
+
```json
[
{
@@ -168,7 +174,7 @@ import parse from '@alilc/lowcode-material-parser';
"options": [
{ "title": "大", "value": "large" },
{ "title": "中", "value": "normal" },
- { "title": "小", "value": "small" },
+ { "title": "小", "value": "small" }
]
},
}
@@ -180,18 +186,20 @@ import parse from '@alilc/lowcode-material-parser';
```
#### 组件的属性既可以设置固定值，也可以绑定到变量
-我们知道一种属性形式就需要一种 setter 来设置，如果想要将 value 属性允许输入字符串，那就需要设置为 `StringSetter`，如果允许绑定变量，就需要设置为 `VariableSetter`，具体设置器请参考[预置 Setter 列表](https://www.yuque.com/lce/doc/oc220p)
-那如果都想要呢？可以使用 `MixedSetter` 来实现
-```json
+我们知道一种属性形式就需要一种 setter 来设置，如果想要将 value 属性允许输入字符串，那就需要设置为 `StringSetter`，如果允许绑定变量，就需要设置为 `VariableSetter`，具体设置器请参考[预置设置器列表](/site/docs/guide/appendix/setters)。
+
+那如果都想要呢？可以使用 `MixedSetter` 来实现。
+
+```javascript
{
- ...,
+ // ...
configure: {
isExtend: true,
props: [
{
- title: "输入框的值",
- name: "activeValue",
+ title: '输入框的值',
+ name: 'activeValue',
setter: {
componentName: 'MixedSetter',
isRequired: true,
@@ -208,14 +216,18 @@ import parse from '@alilc/lowcode-material-parser';
}
}
```
-设置后，就会出现 “切换设置器” 的操作项了
- 
+
+设置后，就会出现“切换设置器”的操作项了
+
+
+
+
#### 开启组件样式设置
-
+
-```tsx
+```javascript
{
configure: {
// ...,
@@ -229,12 +241,12 @@ import parse from '@alilc/lowcode-material-parser';
#### 设置组件的默认事件
-
+
-```tsx
+```javascript
{
configure: {
- // ...,
+ // ...
supports: {
events: ['onPressEnter', 'onClear', 'onChange', 'onKeyDown', 'onFocus', 'onBlur'],
},
@@ -245,9 +257,9 @@ import parse from '@alilc/lowcode-material-parser';
#### 设置 prop 标题的 tip
-
+
-```tsx
+```javascript
{
name: 'label',
setter: 'StringSetter',
@@ -259,7 +271,7 @@ import parse from '@alilc/lowcode-material-parser';
},
tip: {
type: 'i18n',
- zh_CN: '属性: label | 说明: 标签文本内容',
+ zh_CN: '属性：label | 说明：标签文本内容',
en_US: 'prop: label | description: label content',
},
},
@@ -268,72 +280,79 @@ import parse from '@alilc/lowcode-material-parser';
#### 配置 prop 对应 setter 在配置面板的展示方式
-inline:
+##### inline
+
+
-```tsx
+```javascript
{
configure: {
props: [{
description: '标签文本',
- display: 'inline'
+ display: 'inline',
}]
}
}
```
-block:
-
-```tsx
+##### block
+
+
+
+```javascript
{
configure: {
props: [{
description: '高级',
- display: 'block'
+ display: 'block',
}]
}
}
```
-accordion
+##### accordion
-
-```tsx
+
+
+```javascript
{
configure: {
props: [{
description: '表单项配置',
- display: 'accordion'
+ display: 'accordion',
}]
}
}
```
-entry
+##### entry
+
+
+
-
-
+
-```tsx
+```javascript
{
configure: {
props: [{
description: '风格与样式',
- display: 'entry'
+ display: 'entry',
}]
}
}
```
-plain
+##### plain
-
+
-```tsx
+```javascript
{
configure: {
props: [{
description: '返回上级',
- display: 'plain'
+ display: 'plain',
}]
}
}
@@ -343,14 +362,18 @@ plain
### 进阶配置
#### 组件的 children 属性允许传入 ReactNode
+
例如有一个如下的 Tab 选项卡组件，每个 TabPane 的 children 都是一个组件
-
+
+
+
只需要增加 `isContainer` 配置即可
-```json
+
+```javascript
{
- ...,
+ // ...
configure: {
- ...,
+ // ...
component: {
// 新增，设置组件为容器组件，可拖入组件
isContainer: true,
@@ -358,12 +381,14 @@ plain
}
}
```
+
假设我们希望只允许拖拽 Table、Button 等内容放在 TabPane 里。配置白名单 `childWhitelist` 即可
-```json
+
+```javascript
{
- ...,
+ // ...
configure: {
- ...,
+ // ...
component: {
isContainer: true,
nestingRule: {
@@ -377,17 +402,20 @@ plain
}
```
#### 组件的非 children 属性允许传入 ReactNode
+
这就需要使用 `SlotSetter` 开启插槽了，如下面示例，给 Tab 的 title 开启插槽，允许拖拽组件
-
+
+
+
```json
{
- // ...,
+ // ...
configure: {
isExtend: true,
props: [
{
- title: "选项卡标题",
- name: "title",
+ title: '选项卡标题',
+ name: 'title',
setter: {
componentName: 'MixedSetter',
props: {
@@ -397,39 +425,41 @@ plain
'VariableSetter',
],
},
- }
- }
- ]
- }
+ },
+ },
+ ],
+ },
}
```
#### 屏蔽组件在设计器中的操作按钮
正常情况下，组件允许复制：
-
+
+
+
如果希望禁止组件的复制行为，我们可以这样做：
-
-```tsx
+
+
+```javascript
{
configure: {
component: {
disableBehaviors: ['copy'],
- }
- }
+ },
+ },
}
```
#### 实现一个 BackwardSetter
-
+
-```tsx
+```javascript
{
name: 'back',
title: ' ',
- virtual: () => true,
display: 'plain',
setter: BackwardSetter,
}
@@ -457,16 +487,16 @@ const BackwardSetter: DynamicSetter = (target: SettingTarget) => {
- 始终隐藏当前 prop
-```tsx
+```javascript
{
// 始终隐藏当前 prop 配置
- condition: () => false
+ condition: () => false,
}
```
- 根据其它 prop 的值展示/隐藏当前 prop
-```tsx
+```javascript
{
// direction 为 hoz 则展示当前 prop 配置
condition: (target) => {
@@ -477,7 +507,7 @@ const BackwardSetter: DynamicSetter = (target: SettingTarget) => {
#### props 联动
-```tsx
+```javascript
// 根据当前 prop 的值动态设置其它 prop 的值
{
name: 'labelAlign',
@@ -510,9 +540,9 @@ const BackwardSetter: DynamicSetter = (target: SettingTarget) => {
#### 动态 setter 配置
-可以通过 DynamicSetter 传入的 target 获取一些引擎暴露的数据，例如当前有哪些组件被加载到引擎中，将这个数据作为 SelectSetter 的选项，让用户选择:
+可以通过 DynamicSetter 传入的 target 获取一些引擎暴露的数据，例如当前有哪些组件被加载到引擎中，将这个数据作为 SelectSetter 的选项，让用户选择：
-```tsx
+```javascript
{
setter: (target) => {
return {
@@ -528,7 +558,7 @@ const BackwardSetter: DynamicSetter = (target: SettingTarget) => {
}
),
),
- }
+ },
};
}
}
diff --git a/docs/docs/guide/expand/editor/parts/_category_.json b/docs/docs/guide/expand/editor/parts/_category_.json
new file mode 100644
index 0000000000..005a3caf6c
--- /dev/null
+++ b/docs/docs/guide/expand/editor/parts/_category_.json
@@ -0,0 +1,4 @@
+{
+ "label": "Parts 造物",
+ "position": 1
+}
diff --git a/docs/docs/guide/expand/editor/parts/partsIntro.md b/docs/docs/guide/expand/editor/parts/partsIntro.md
new file mode 100644
index 0000000000..a6fc6e8817
--- /dev/null
+++ b/docs/docs/guide/expand/editor/parts/partsIntro.md
@@ -0,0 +1,18 @@
+---
+title: 介绍
+sidebar_position: 1
+---
+## 介绍
+
+
+
+「Parts·造物」是基于开源低代码引擎打造的次时代物料研发和集成工具，一方面作为低代码引擎搭建低代码平台的一个样板展示开源生态下的各个组件如何集合在一起形成生产力，另一方面也可以生产低代码平台所需的物料。
+
+目前「Parts·造物」主要提供两大产品功能：
+ 1. React 组件导入低代码引擎：通过在线可视化的「物料描述」配置，任意工具开发的 React 组件都可以快速完成对低代码引擎的适配，导入到低代码引擎项目中进行使用。不必额外开发新的组件。
+ 2. 低代码生产组件：通过低代码的形式生产组件，极低上手门槛，提供丰富的原子组件用于组合，完善的调试预览和组件生命周期控制。生产的组件既可以在低代码引擎项目中使用，也可以出码后在普通源码项目中使用。
+
+
+## 联系我们
+
+
diff --git a/docs/docs/guide/expand/editor/parts/partsassets.md b/docs/docs/guide/expand/editor/parts/partsassets.md
new file mode 100644
index 0000000000..00670ecadc
--- /dev/null
+++ b/docs/docs/guide/expand/editor/parts/partsassets.md
@@ -0,0 +1,267 @@
+---
+title: 资产包管理
+sidebar_position: 4
+---
+
+## 介绍
+
+通过前述介绍，相信大家已经了解如何使用「[Parts·造物](https://parts.lowcode-engine.cn/)」来将已有的 React 组件快速接入低代码引擎，以及生产低代码组件。
+
+大家在使用的过程中，可能会希望构建出来的资产包可以后续随时访问下载，或者希望构建资产包时各个组件的版本等信息可以持久化起来并且能够多人维护。
+
+通过「[Parts·造物](https://parts.lowcode-engine.cn/)」的 `资产包` 管理功能帮助大家解决这个问题
+
+
+
+## 新建资产包
+
+首先，我们在 我的资产包 tab 中点击 `新建资产包`
+
+
+- 填写资产包名称
+- 配置资产包管理员，管理员拥有该资产包的所有权限，初始默认为资产包的创建者，还可以添加其他人作为管理员，
+- 配置资产包描述 (可选)
+- 点击 `确定`, 即可完成资产包的创建
+
+接下来需要为资产包添加一个或者多个组件。
+
+## 添加组件
+
+第二步：新建完资产包以后，我们就可以为其添加组件了，如果是新建资产包流程，新建完成之后会自动弹出组件配置的弹窗，当然，你可可以通过点击资产包卡片的方式打开组件配置的弹窗。
+
+
+- 点击弹窗中 `添加组件` 按钮，在弹出的组件选择面板中，选中需要添加的组件并点击 `下一步`。
+ 
+- 进入组件版本以及描述协议版本选择界面，选择所需要的正确版本，点击 `安装` 即可完成一个组件的添加。
+ 
+
+## 构建资产包
+
+添加完组件以后就点击 `保存并构建资产包` 进入资产包构建配置弹窗
+
+
+- `开启缓存` : 可充分利用之前的构建结果缓存来加速资产包的生成，我们会将每个组件的构建结果以 包名和版本号为 key 进行缓存。
+- `任务描述` : 当前构建任务的一些描述信息。
+
+点击 `确认` 按钮 会自动跳转到当前资产包的构建历史界面：
+
+构建历史界面会显示当前资产包所有的构建历史记录，表格状态栏展示了构建的状态：`成功`,`失败`,`正在运行` 三种状态，操作列可以在构建成功时复制或者下载资产包结果
+
+## 使用资产包
+你可以在 [lowcode-demo](https://github.com/alibaba/lowcode-demo) 中直接引用，可直接替换 demo 中原来的资产包文件：
+例如，在 [demo-lowcode-component](https://github.com/alibaba/lowcode-demo/tree/main/demo-lowcode-component) 中，直接用你的资产包文件替换文件[assets.json](https://github.com/alibaba/lowcode-demo/blob/main/demo-lowcode-component/src/services/assets.json)，即可快速使用自己的物料了。
+
+### 在编辑器中使用资产包
+在使用含有低代码组件的资产包注意 注意引擎版本必须大于等于 `1.1.0-beta.9`。
+然后直接替换 [lowcode-demo](https://github.com/alibaba/lowcode-demo) demo 中的 `assets.json` 文件即可。
+
+### 在预览中使用资产包
+在预览中使用资产包的整体思路是从 `资产包` 中提取并转换出 `ReactRenderer` 渲染所需要的 react 组件列表 (`components` 参数)，然后将 `schema` 以及 `components` 传入到 `ReactRenderer` 中进行渲染，需要注意的是，在 `资产包` 的转换过程中，我们也需要将 `低代码组件` 转换成 react 组件，具体逻辑可以参考下 [demo-lowcode-component](https://github.com/alibaba/lowcode-demo/tree/main/demo-lowcode-component) 中 `src/parse-assets.ts` 文件的实现。
+基于资产包进行预览的整体逻辑如下： [详见](https://github.com/alibaba/lowcode-demo/blob/main/demo-lowcode-component/src/preview.tsx)：
+```ts
+import ReactDOM from 'react-dom';
+import React, { useState } from 'react';
+import { Loading } from '@alifd/next';
+import ReactRenderer from '@alilc/lowcode-react-renderer';
+import { createFetchHandler } from '@alilc/lowcode-datasource-fetch-handler';
+import {
+ getProjectSchemaFromLocalStorage,
+} from './services/mockService';
+import assets from './services/assets.json';
+import { parseAssets } from './parse-assets';
+
+const getScenarioName = function () {
+ if (location.search) {
+ return new URLSearchParams(location.search.slice(1)).get('scenarioName') || 'index';
+ }
+ return 'index';
+};
+
+const SamplePreview = () => {
+ const [data, setData] = useState({});
+ async function init() {
+ const scenarioName = getScenarioName();
+ const projectSchema = getProjectSchemaFromLocalStorage(scenarioName);
+ const { componentsMap: componentsMapArray, componentsTree } = projectSchema;
+ const schema = componentsTree[0];
+ const componentsMap: any = {};
+ componentsMapArray.forEach((component: any) => {
+ componentsMap[component.componentName] = component;
+ });
+
+ // 特别提醒重点注意！！！：从资产包中解析出所有的 react 组件列表
+ const { components } = await parseAssets(assets);
+
+ setData({
+ schema,
+ components,
+ });
+ }
+
+ const { schema, components } = data;
+
+ if (!schema || !components) {
+ init();
+ return
+
+ );
+};
+
+ReactDOM.render(
\ No newline at end of file
diff --git a/docs/docs/guide/expand/editor/parts/partslcc.md b/docs/docs/guide/expand/editor/parts/partslcc.md
new file mode 100644
index 0000000000..4d24b72f3a
--- /dev/null
+++ b/docs/docs/guide/expand/editor/parts/partslcc.md
@@ -0,0 +1,92 @@
+---
+title: 低代码组件
+sidebar_position: 2
+---
+## 什么是低代码组件
+我们先了解一下什么是低代码组件，为什么要用低代码组件。
+
+低代码组件是通过可视化的方式生产的组件，这些组件既可以用于低代码搭建体系，也可以用于 ProCode 开发体系（后续迭代）。
+
+那么为什么我们要使用低代码的形式来开发组件：
+* 首先：轻快，低代码组件只需通过浏览器秒级完成初始化工作，不需要 ProCode 繁重的环境准备；环境一致（低代码环境），同时能够保证物料的开发环境和真实的运行环境是一致的，不会存在开发和运行环境不一致的问题。
+* 其次：通用能力可视化方式抽象，提升研发效能，比如获取远程数据、视图开发、依赖管理、生命周期、事件绑定等功能。
+
+低代码组件不是用来替代 ProCode 的开发方式，而是让开发者可以从 ProCode 中重复的工作脱离出来，抽象更多业务垂直的能力，从而起到提效的作用。
+
+## 创建组件
+
+环境准备：我们可以通过 Parts 提供的通用[低代码组件开发环境](https://parts.lowcode-engine.cn/material#/)开发。
+
+点击开发新组件 --> 填写组件标题 --> 填写组件名称 --> 点击确定，完成组件创建工作。
+
+
+
+## 组件开发
+
+一张图速览低代码组件开发的功能模块，其中大部分功能可以参考[低代码引擎文档](https://lowcode-engine.cn/site/docs/guide/quickStart/intro)。
+
+
+
+### 依赖管理
+
+依赖管理用于管理低代码组件本身的依赖（类似于 dependencies）。步骤：点击添加组件 --> 选择安装的组件 --> 保存并构建 (需要等待几分钟构建)。
+
+
+
+### 属性定义
+
+用于定义组件接收外部传入的 propTypes，组件内部可以通过this.props.${属性名称}的方式获取属性值。
+
+属性定义前建议先阅读 [物料描述详解](https://lowcode-engine.cn/site/docs/guide/expand/editor/metaSpec)、[预置设置器](https://lowcode-engine.cn/site/docs/guide/appendix/setters)。
+
+
+
+
+
+### 生命周期
+
+低代码组件的开发支持 componentDidMount、componentDidUpdate、componentDidCatch、componentWillUnmount 几个生命周期
+
+
+
+### 组件调试
+
+我们提供了一套线上实时调试的方案，只需点击右上角的调试按钮，就能自动创建一个低代码应用，在这个应用中可以实时调试当前的低代码组件。
+
+
+
+在低代码应用中使用，组件面板 --> 低代码组件，找到对应的低代码组件拖入画布即可。
+
+
+
+### 组件发布
+
+同时我们提供了组件发布的功能，用于组件版本管理，点击右上角的发布按钮即可发布组件
+
+
+
+## 组件使用
+
+组件的消费是通过资产包来管理的，详情请参考 [资产包管理](./partsassets)。
+
+## 组件导出
+
+开发好的低代码组件可以导出成为 React 组件，脱离低代码引擎独立使用。同时导出功能也为您的组件留出一份备份，您可以放心使用本产品的服务，而不用担心万一出现的不能服务的场景。
+
+在物料列表页面，低代码组件会有一个导出的动作。
+
+
+
+点击导出后，就会开启导出低代码组件的过程。这个过程持续 10s+，导出完成后会为您自动下载对应的 zip 包。
+
+
+
+zip 包解压后可以看到一个完整的组件脚手架工程，您可以在这个工程里继续开发调试，或者发布到合适的 npm 源中。
+
+
+
+注意：目前导出功能暂不支持 低代码组件嵌套。
+
+## 联系我们
+
+
\ No newline at end of file
diff --git a/docs/docs/guide/expand/editor/parts/prototype.md b/docs/docs/guide/expand/editor/parts/prototype.md
new file mode 100644
index 0000000000..b90728f657
--- /dev/null
+++ b/docs/docs/guide/expand/editor/parts/prototype.md
@@ -0,0 +1,121 @@
+---
+title: React 组件导入
+sidebar_position: 3
+---
+## 介绍
+大家在使用[低代码引擎](https://lowcode-engine.cn/)构建低代码应用平台时，遇到的一个主要问题是如何让已有的 React 组件能够快速低成本地接入进来。这个问题拆解下来主要包括两个子问题：
+1. 如何给已有组件[配置物料描述](/site/docs/specs/material-spec)，
+2. 如何构建出一个低代码引擎能够识别的资产包 (Assets)。
+
+我们的产品「[Parts·造物](https://parts.lowcode-engine.cn/)」可以帮助大家解决这个问题。我们通过在线可视化的方式完成物料描述配置，并且提供一键打包的功能生成引擎可以识别的资产包。
+
+## 导入物料
+首先，我们需要在 [物料管理](/site/docs/specs/material-spec) 页面导入我们需要进行在线物料描述配置的物料。
+
+
+- 点击列表左上方的 导入已有物料 按钮
+- 在弹框中输入 npm 包名
+- 点击 获取包信息 按钮，获取 npm 包基本信息
+- 点击确定，导入成功
+
+
+## 配置管理
+第二步：物料导入以后，我们就可以为导入的物料新增[物料描述配置](/site/docs/specs/material-spec)，点击右侧的组件配置开始配置。
+
+
+### 新增配置
+
+- 点击配置管理右上角的 新增配置
+ - 选择组件的版本号
+ - 填写组件路径，一般和 npm 包的 package.json 里的 main 字段相同（如果填写错误，后面会渲染不出来）
+ - 描述字段用于给这份配置增加一些备注信息。
+
+
+
+为了降低配置成本，第一次新增配置的时候会自动解析组件代码，生成一份初始化组件物料描述。所以需要等待片刻，用于代码解析。解析完成后，点击配置按钮即可进入在线配置界面。
+
+
+
+### 组件描述配置
+操作界面如下，接下来讲具体的配置流程
+
+
+
+#### 新增组件
+
+如果新增配置的过程中，代码自动解析失败或者解析出来的组件列表不满足开发要求，我们可以点击左侧组件列表插件 新增 按钮，添加新的组件，具体的字段描述可以参考提示内容，以 [react-color](https://github.com/casesandberg/react-color) 为例：
+
+
+
+
+#### 给组件增加物料描述
+
+- 打开左侧 Setter 面板
+- 按照组件的属性拖入需要 Setter 类型（如图中组件的 width 属性，拖入数字 Setter）
+- 各种 Setter 的介绍可以参看这篇文档：[预置设置器列表](/site/docs/guide/appendix/setters)
+- 配置属性的基本信息（如图所示）
+- 配置完成后点击右上角的保存
+
+
+
+
+
+#### 高级配置（属性联动）
+
+举个栗子：如图所示，如果期望“设置器”这个配置项的值“被修改”的时候，下面的“默认值”跟着变化。
+
+
+
+如何使用
+
+组件的属性配置目前支持 3 个基本的联动函数：
+
+- 显示状态：返回 true | false，如果返回 true，表示组件配置显示，否则配置时不显示
+- 获取值：当调用该配置节点的 getValue 方法时触发的方法
+- 值变化：当调用该配置节点的 setValue 方法时触发的方法
+
+
+
+方法的第一个参数都是当前配置节点的对象，常用到的有以下几个：
+
+- getValue(): 获取当前节点的值，如果当前节点是子节点的话，否则为 undefined
+- setValue(): 设置当前节点的值，如果当前节点是子节点的话
+- parent: 当前节点的父节点
+- getPropValue(propName): 父节点获取子节点的属性值，propName 为子节点的属性名称
+- setPropValue(propName, value): 父节点设置子节点的属性值，propName 为子节点的属性名称，value 为设置的值
+- getConfig: 获取当前节点的配置，如 title、setter 等
+
+
+#### 调试物料描述
+
+点击右上角的预览按钮，开始调试我们刚刚配置的属性，如果是组件的首次预览，会有一段组件构建的过程（构建出 umd 包的过程），构建完成后就可以调试我们的配置了。
+
+
+
+#### 发布物料描述
+物料描述调试没问题后，就可以到项目中去使用了，使用前需要先发布物料描述
+
+- 点击右上角的发布按钮
+- 选择需要发布的组件
+- 点击确定发布完成
+
+
+## 资产包
+第三步：物料描述发布完成后，接下来我们就需要构建出可用的资产包用于低代码应用中。
+
+#### 资产包构建
+有两种方式可以构建资产包：
+- 一种是通过 [`我的资产包`] 资产包管理模块进行整个资产包生命周期的管理，当然也包括资产包的构建，可参考 [资产包管理](./partsassets)
+- 一种是通过 [`我的物料`] 组件物料管理模块的 `资产包构建` 进行构建, 具体操作如下：
+
+ - 选择需要构建的组件
+ - 点击构建资产包按钮
+ - 选择刚刚的物料描述配置
+ - 开始构建，构建完成后你将得到一份 json 文件（里面包含了物料描述和 umd 包），就可以到项目中使用了
+
+#### 资产包使用
+详情请参考 [资产包管理](./partsassets#使用资产包)
+
+## 联系我们
+
+
diff --git a/docs/docs/guide/expand/editor/partsIntro.md b/docs/docs/guide/expand/editor/partsIntro.md
deleted file mode 100644
index 6e56ae1e64..0000000000
--- a/docs/docs/guide/expand/editor/partsIntro.md
+++ /dev/null
@@ -1,100 +0,0 @@
----
-title: 利用Parts造物快速使用react组件
-sidebar_position: 3
----
-## 介绍
-大家在使用[低代码引擎](https://lowcode-engine.cn/)构建低代码应用平台时，遇到的一个主要问题是如何让已有的 React 组件能够快速低成本地接入进来。这个问题拆解下来主要包括两个子问题：1. 如何给已有组件[配置物料描述](https://lowcode-engine.cn/material)，2. 如何构建出一个低代码引擎能够识别的资产包(Assets)。
-我们的产品 「[Parts·造物](https://parts.lowcode-engine.cn/)」 可以帮助大家解决这个问题。我们通过在线可视化的方式完成物料描述配置，并且提供一键打包的功能生成引擎可以识别的资产包。
-
-## 导入物料
-首先，我们需要在 [物料管理](https://parts.lowcode-engine.cn/material#/) 页面导入我们需要进行在线物料描述配置的物料。
-
-
-- 点击列表左上方的 导入已有物料 按钮
-- 在弹框中输入 npm包名
-- 点击 获取包信息 按钮，获取npm包基本信息
-- 点击确定，导入成功
-
-
-## 配置管理
-第二步：物料导入以后，我们就可以为导入的物料新增[物料描述配置](https://lowcode-engine.cn/material)，点击右侧的组件配置开始配置。
-
-
-### 新增配置
-
-- 点击配置管理右上角的 新增配置
- - 选择组件的版本号
- - 填写组件路径，一般和 npm 包的 package.json 里的 main 字段相同 （如果填写错误，后面会渲染不出来）
- - 描述字段用于给这份配置增加一些备注信息。
-
-
-为了降低配置成本，第一次新增配置的时候会自动解析组件代码，生成一份初始化组件物料描述。所以需要等待片刻，用于代码解析。解析完成后，点击配置按钮即可进入在线配置界面。
-
-### 组件描述配置
-操作界面如下，接下来讲具体的配置流程
-
-#### 新增组件
-如果新增配置的过程中，代码自动解析失败或者解析出来的组件列表不满足开发要求，我们可以点击左侧组件列表插件 新增 按钮，添加新的组件，具体的字段描述可以参考提示内容，以 [react-color](https://github.com/casesandberg/react-color) 为例：
-
-
-#### 给组件增加物料描述
-选中刚刚新增的BlockPicker组件，然后给它增加描述：
-
-- 打开左侧 Sette r面板
-- 按照组件的属性拖入需要 Setter 类型 （如图中组件的width属性，拖入数字Setter）
-- 各种 Setter 的介绍可以参看这篇文档：[https://www.yuque.com/lce/doc/grfylu](https://www.yuque.com/lce/doc/grfylu)
-- 配置属性的基本信息（如图所示）
-- 配置完成后点击右上角的保存
-
-
-
-#### 高级配置（属性联动）
-举个栗子：如图所示，如果期望 “设置器” 这个配置项的值 “被修改”的时候，下面的 “默认值” 跟着变化。
-
-如何使用
-组件的属性配置目前支持3个基本的联动函数：
-
-- 显示状态：返回true | false，如果返回true，表示组件配置显示，否则配置时不显示
-- 获取值：当调用该配置节点的getValue方法时触发的方法
-- 值变化：当调用该配置节点的setValue方法时触发的方法
-
-
-方法的第一个参数都是当前配置节点的对象，常用到的有以下几个：
-
-- getValue(): 获取当前节点的值，如果当前节点是子节点的话，否则为undefined
-- setValue(): 设置当前节点的值，如果当前节点是子节点的话
-- parent: 当前节点的父节点
-- getPropValue(propName): 父节点获取子节点的属性值，propName为子节点的属性名称
-- setPropValue(propName, value): 父节点设置子节点的属性值，propName为子节点的属性名称, value 为设置的值
-- getConfig: 获取当前节点的配置，如title、setter等
-#### 调试物料描述
-点击右上角的预览按钮，开始调试我们刚刚配置的属性，如果是组件的首次预览，会有一段组件构建的过程（构建出umd包的过程），构建完成后就可以调试我们的配置了。
-
-#### 发布物料描述
-物料描述调试没问题后，就可以到项目中去使用了，使用前需要先发布物料描述
-
-- 点击右上角的发布按钮
-- 选择需要发布的组件
-- 点击确定发布完成
-
-
-## 资产包构建
-第三步：物料描述发布完成后，接下来我们就需要构建出可用的资产包用于低代码应用中。
-#### 资产包构建
-
-- 选择需要构建的组件
-- 点击构建资产包按钮
-- 选择刚刚的物料描述配置
-- 开始构建，构建完成后你将得到一份json文件（里面包含了物料描述和umd包），就可以到项目中使用了
-
-
-#### 资产包使用
-**方式一、在 **[**lowcode-demo**](https://github.com/alibaba/lowcode-demo)**中直接引用，可直接替换demo中原来的资产包文件：**
-例如，在basic-fusion demo中，直接用你的资产包文件替换文件[assets.json](https://github.com/alibaba/lowcode-demo/blob/main/src/scenarios/basic-fusion/assets.json)，即可快速使用自己的物料了。
-**方式二、将新的资产包内容和现有的资产包内容融合：**
-将上面构建完成的资产包与你项目中的[assets.json文件](https://github.com/alibaba/lowcode-demo/blob/main/src/scenarios/basic-fusion/assets.json)合并，主要合并packages 和 components
-
-- packages中是构建好的umd包
-- components中是上面配置好的[物料描述](https://lowcode-engine.cn/material)，你也可以在基础上二次加工
-
-
diff --git a/docs/docs/guide/expand/editor/pluginContextMenu.md b/docs/docs/guide/expand/editor/pluginContextMenu.md
index 603aa09c0f..962c913e7e 100644
--- a/docs/docs/guide/expand/editor/pluginContextMenu.md
+++ b/docs/docs/guide/expand/editor/pluginContextMenu.md
@@ -1,69 +1,82 @@
---
-title: 插件扩展-编排扩展
+title: 插件扩展 - 编排扩展
sidebar_position: 6
---
+
## 场景一：扩展选中节点操作项
+
### 增加节点操作项
-
+
+
选中节点后，在选中框的右上角有操作按钮，编排模块默认实现了查看组件直系父节点、复制节点和删除节点按钮外，还可以通过相关 API 来扩展更多操作，如下代码：
+
```typescript
import { plugins } from '@alilc/lowcode-engine';
+import { IPublicModelPluginContext, IPublicModelNode } from '@alilc/lowcode-types';
import { Icon, Message } from '@alifd/next';
-const addHelloAction = (ctx: ILowCodePluginContext) => {
+const addHelloAction = (ctx: IPublicModelPluginContext) => {
return {
async init() {
- const { addBuiltinComponentAction } = ctx.material;
- addBuiltinComponentAction({
+ ctx.material.addBuiltinComponentAction({
name: 'hello',
content: {
icon: 
它主要包含这些功能点：
 - -- 顶部：操作区 - - 右侧：撤回和重做、保存到本地、重置页面、预览、异步加载资源 -- 左侧：面板与操作区 - - 大纲面板：可以调整页面内的组件树结构 - - 物料面板：可以查找组件，并在此拖动组件到编辑器画布中 - - 源码面板：可以编辑页面级别的 JavaScript 代码和 CSS 配置 - - 提交 Issue：可以给引擎开发提 bug - - Schema 编辑：可以编辑页面的底层数据 - - 中英文切换：可以切换编辑器的语言 -- 中部：可视化页面编辑画布区域 - - 点击组件在右侧面板中能够显示出对应组件的属性配置选项 - - 拖拽修改组件的排列顺序 - - 将组件拖拽到容器类型的组件中 - - 复制组件：点击组件右上角的复制按钮 - - 删除组件：点击组件右上角的 X 或者直接使用 `Delete` 键 -- 右侧：组件级别配置 - - 选中的组件：从页面开始一直到当前选中的组件位置，点击对应的名称可以切换到对应的组件上 - - 选中组件的配置：当前组件的大类目选项，根据组件类型不同，包含如下子类目： - - 属性：组件的基础属性值设置 - - 样式：组件的样式配置 - - 事件：绑定组件对外暴露的事件 - - 高级：循环、条件渲染与 key 设置 - -# 深入使用低代码引擎 Demo +## 低代码引擎 Demo 功能概览 + +我们可以从 Demo 的项目中看到页面中有很多的区块： + + + +它主要包含这些功能点： + + + +### 顶部：操作区 + +- 右侧：撤回和重做、保存到本地、重置页面、预览、异步加载资源 +### 左侧：面板与操作区 +- 大纲面板：可以调整页面内的组件树结构 +- 物料面板：可以查找组件，并在此拖动组件到编辑器画布中 +- 源码面板：可以编辑页面级别的 JavaScript 代码和 CSS 配置 +- 提交 Issue：可以给引擎开发提 bug +- Schema 编辑：可以编辑页面的底层数据 +- 中英文切换：可以切换编辑器的语言 + +### 中部：可视化页面编辑画布区域 +- 点击组件在右侧面板中能够显示出对应组件的属性配置选项 +- 拖拽修改组件的排列顺序 +- 将组件拖拽到容器类型的组件中 +- 复制组件：点击组件右上角的复制按钮 +- 删除组件：点击组件右上角的 X 或者直接使用 `Delete` 键 + +### 右侧：组件级别配置 +- 选中的组件：从页面开始一直到当前选中的组件位置，点击对应的名称可以切换到对应的组件上 +- 选中组件的配置：当前组件的大类目选项，根据组件类型不同，包含如下子类目： + - 属性：组件的基础属性值设置 + - 样式：组件的样式配置 + - 事件：绑定组件对外暴露的事件 + - 高级：循环、条件渲染与 key 设置 + +## 深入使用低代码引擎 Demo 我们在低代码引擎 Demo 中直接内置了产品使用文档，对常见场景中的使用进行了向导，它的入口如下： - + -如果暂时没有看到对应的产品使用文档，可以通过此永久链接直接访问：[https://www.yuque.com/lce/usage](https://www.yuque.com/lce/usage) +如果暂时没有看到对应的产品使用文档，可以通过此永久链接直接访问：[https://lowcode-engine.cn/site/docs/demoUsage/intro](https://lowcode-engine.cn/site/docs/demoUsage/intro) diff --git a/docs/docs/guide/quickStart/intro.md b/docs/docs/guide/quickStart/intro.md index 67750b2a94..b65baac269 100644 --- a/docs/docs/guide/quickStart/intro.md +++ b/docs/docs/guide/quickStart/intro.md @@ -1,6 +1,6 @@ --- title: 简介 -sidebar_position: 0 +sidebar_position: 1 --- # 阿里低代码引擎简介 @@ -18,7 +18,7 @@ sidebar_position: 0 - **可视化页面搭建**，通过简单的拖拽完成应用页面开发，对前端技能没有要求或不需要特别专业的了解； - **可视化模型设计**，与业务相关的数据存储变得更容易理解，甚至大多数简单场景可以做到表单即模型，模型字段的类型更加业务化； - **可视化流程设计**，不管是业务流程还是审批流程，都可以通过简单的点线连接来进行配置； -- **可视化报表及数据分析**，BI数据分析能力成为标配，随时随地通过拖拽选择来定义自定义分析报表； +- **可视化报表及数据分析**，BI 数据分析能力成为标配，随时随地通过拖拽选择来定义自定义分析报表； - **可视化服务与数据开放、集成**，具备与其他系统互联互通的配置； - **权限、角色设置标准化和业务化**，通过策略规则配置来将数据、操作的权限进行精细化管理； - **无需关心服务器、数据库等底层运维、计算设施设备、网络等等复杂技术概念**，具备安全、性能的统一解决方案，开发者只需要专注于业务本身； @@ -35,14 +35,29 @@ sidebar_position: 0 **低代码设计器** 现如今低代码平台越来越多，而每一个低代码平台中都会有的一个能力就是搭建和配置页面、模块的页面，这个页面我们称为设计器。例如，下图是中后台低代码平台的设计器。 - + 设计器承载着低代码平台的核心功能，包括入料、编排、组件配置、画布渲染等等。由于其功能多，打磨精细难，也是低代码平台建设最耗时的地方。 **定制扩展能力** 什么是扩展能力呢，一方面我们可以快速拥有一份标准的低代码设计器，另外一方面如果有业务独特的功能需要，我们可以不用看它的源码、不用关心其实现，可以使用 API、插件等方式快速完成能力的开发。 而低代码引擎对于设计器的扩展能力支持基本上覆盖了低代码设计器的所有功能点。下图是针对标准的设计器提供了扩展功能的区域。 - + **低代码设计器研发框架** 低代码引擎的核心是设计器，通过扩展、周边生态等可以产出各式各样的设计器。它不是一套可以适合所有人的低代码平台，而是帮助低代码平台的开发者，快速生产低代码平台的工具。 + +## 寻找适合您的低代码解决方案 + +帮助用户根据个人或企业需求选择合适的低代码产品。 + +| 特性/产品 | 低代码引擎 | Lab平台 | UIPaaS | +|-----------------|-----------------------------------------|-----------------------------------------|--------------------------------------------| +| **适用用户** | 前端开发者 | 需要快速搭建应用/页面的用户 | 企业用户，需要大规模部署低代码解决方案的组织 | +| **产品特点** | 设计器研发框架，适合定制开发 | 低代码平台, 可视化操作界面，易于上手 | 低代码平台孵化器，企业级功能 | +| **使用场景** | 定制和开发低代码平台的设计器部分 | 通过可视化, 快速开发应用或页面 | 帮助具有一定规模软件研发团队的的企业低成本定制低代码平台 | +| **产品关系** | 开源产品 | 基于UIPaaS技术实现, 展示了UIPaaS的部分能力 | 提供完整的低代码平台解决方案，商业产品 | +| **收费情况** | 免费 | 可免费使用（有额度限制），不提供私有化部署售卖 | 仅提供私有化部署售卖 | +| **官方网站** | [低代码引擎官网](https://lowcode-engine.cn/) | [Lab平台官网](https://lab.lowcode-engine.cn/) | [UIPaaS官网](https://uipaas.net/) | + +*注：请根据您的具体需求和条件选择合适的产品。如需更详细的信息，请访问各产品的官方网站。* diff --git a/docs/docs/guide/quickStart/start.md b/docs/docs/guide/quickStart/start.md index 001e4e789b..356f501769 100644 --- a/docs/docs/guide/quickStart/start.md +++ b/docs/docs/guide/quickStart/start.md @@ -1,71 +1,110 @@ --- -sidebar_position: 2 +sidebar_position: 3 title: 快速开始 --- -# 前置知识 -我们假定你已经对 HTML 和 JavaScript 都比较熟悉了。即便你之前使用其他编程语言，你也可以跟上这篇教程的。除此之外，我们假定你也已经熟悉了一些编程的概念，例如，函数、对象、数组，以及 class 的一些内容。
如果你想回顾一下 JavaScript，你可以阅读[这篇教程](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript)。注意，我们也用到了一些 ES6（较新的 JavaScript 版本）的特性。在这篇教程里，我们主要使用了[箭头函数（arrow functions）](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions)、[class](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes)、[let](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/let) 语句和 [const](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/const) 语句。你可以使用 [Babel REPL](https://babeljs.io/repl/#?presets=react&code_lz=MYewdgzgLgBApgGzgWzmWBeGAeAFgRgD4AJRBEAGhgHcQAnBAEwEJsB6AwgbgChRJY_KAEMAlmDh0YWRiGABXVOgB0AczhQAokiVQAQgE8AkowAUAcjogQUcwEpeAJTjDgUACIB5ALLK6aRklTRBQ0KCohMQk6Bx4gA) 在线预览 ES6 的编译结果。 -# 环境准备 -## WSL（Window 电脑） +## 前置知识 + +我们假定你已经对 HTML 和 JavaScript 都比较熟悉了。即便你之前使用其他编程语言，你也可以跟上这篇教程的。除此之外，我们假定你也已经熟悉了一些编程的概念，例如，函数、对象、数组，以及 class 的一些内容。 + +如果你想回顾一下 JavaScript，你可以阅读[这篇教程](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript)。注意，我们也用到了一些 ES6（较新的 JavaScript 版本）的特性。在这篇教程里，我们主要使用了[箭头函数（arrow functions）](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions)、[class](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes)、[let](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/let) 语句和 [const](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/const) 语句。你可以使用 [Babel REPL](https://babeljs.io/repl/#?presets=react&code_lz=MYewdgzgLgBApgGzgWzmWBeGAeAFgRgD4AJRBEAGhgHcQAnBAEwEJsB6AwgbgChRJY_KAEMAlmDh0YWRiGABXVOgB0AczhQAokiVQAQgE8AkowAUAcjogQUcwEpeAJTjDgUACIB5ALLK6aRklTRBQ0KCohMQk6Bx4gA) 在线预览 ES6 的编译结果。 + +## 环境准备 + +### WSL（Windows 电脑） + Window 环境需要使用 WSL 在 windows 下进行低代码引擎相关的开发。安装教程 ➡️ [WSL 安装教程](https://docs.microsoft.com/zh-cn/windows/wsl/install)。
**对于 Window 环境来说，之后所有需要执行命令的操作都是在 WSL 终端执行的。** -## Node -node 版本推荐 14.17.0。 -### 查看 Node 版本 - +### Node + +node 版本推荐 16.18.0。 + +#### 查看 Node 版本 + + + +#### 通过 n 来管理 node 版本 -### 变更 node 版本 可以安装 [n](https://www.npmjs.com/package/n) 来管理和变更 node 版本。 -#### 安装 -```json +##### 安装 n + +```bash npm install -g n ``` -#### 变更 node 版本 -```json +##### 变更 node 版本 + +```bash n 14.17.0 ``` -## React +### React + 低代码引擎的扩展能力都是基于 React 来研发的，在继续阅读之前最好有一定的 React 基础，React 学习教程 ➡️ [React 快速开始教程](https://zh-hans.reactjs.org/docs/getting-started.html)。 -## 下载 Demo -可以前往 github（https://github.com/alibaba/lowcode-demo）将 DEMO 下载到本地。 +### 下载 Demo + +可以前往 github（
这里记住**设计器**这个词，它描述的就是下面的这个页面，后面我们会经常看到它。
 -## 场景介绍 - +## 认识 Demo + +我们的 Demo 是一个**低代码平台的设计器**。它是一个低代码平台中最重要的一环，用户可以在这里通过拖拽、配置、写代码等等来完成一个页面的开发。由于用户的人群不同、场景不同、诉求不同等等，这个页面的功能就会有所差异。 + +这里记住**设计器**这个词，它描述的就是下面的这个页面，后面我们会经常看到它。 + + +### 场景介绍 + + Demo 根据**不同的设计器所需要的物料不同**，分为了下面的 8 个场景： @@ -75,37 +114,52 @@ Demo 根据**不同的设计器所需要的物料不同**，分为了下面的 8 - 基础 antd 组件 - 自定义初始化引擎 - 扩展节点操作项 -- 基于next实现的高级表单低代码物料 +- 基于 next 实现的高级表单低代码物料 - antd 高级组件 + formily 表单组件 可以点开不同的场景，看看他们使用的物料。 + + +### 目录介绍 -## 目录介绍 -仓库下的 src/scenarios 目录就对应刚刚介绍的场景。
 +仓库下每个 demo-xxx-xxx 目录都是一个可独立运行的 demo 工程，分别对应到刚刚介绍的场景。 -不同场景的目录结构实际上都是类似的，这里我们主要介绍一下综合场景的目录结构即可。
综合场景目录下只有一个文件，这个文件做了几个事情： + -- 通过 plugins.register 注册「切换场景」的插件，也就是上面介绍的切换场景的功能。 -- 通过 registerPlugins 注册更多的插件： - - ManualPlugin：增加弹出「低代码产品使用文档」按钮 - - Inject：支持调试功能 - - registerRefProp：支持给每个组件注入 ref - - ... -- 通过 init 初始化低代码设计器 +不同场景的目录结构实际上都是类似的，这里我们主要介绍一下综合场景的目录结构即可。 -做了这些事情之后，我们的低代码设计器就已经有了基本的能力了。也就是最开始我们看到的这样。
 + + +介绍下其中主要的内容 + +- 设计器入口文件 `src/index.ts` 这个文件做了下述几个事情： + - 通过 plugins.register 注册各种插件，包括官方插件 (已发布 npm 包形式的插件) 和 `plugins` 目录下内置的示例插件 + - 通过 init 初始化低代码设计器 +- plugins 目录，存放的都是示例插件，方便用户从中看到一个插件是如何实现的 +- services 目录，模拟数据请求、提供默认 schema、默认资产包等，此目录下内容在真实项目中应替换成真实的与服务端交互的服务。 +- 预览页面入口文件 `preview.tsx` + +剩下的各位看官可以通过源码来进一步了解。 + +做了这些事情之后，我们的低代码设计器就已经有了基本的能力了。也就是最开始我们看到的这样。 + + 接下来我们就根据我们自己的诉求通过对设计器进行扩展，改动成我们需要的设计器功能。 -# 开发一个插件 -## 方式1：在 DEMO 中直接新增插件 - + +## 开发一个插件 + +### 方式 1：在 DEMO 中直接新增插件 + + 可以在 demo/sample-plugins 直接新增插件，这里我新增的插件目录是 plugin-demo。并且新增了 index.tsx 文件，将下面的代码粘贴到 index.tsx 中。 + ```javascript import * as React from 'react'; -import { ILowCodePluginContext } from '@alilc/lowcode-engine'; +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; -const LowcodePluginPluginDemo = (ctx: ILowCodePluginContext) => { +const LowcodePluginPluginDemo = (ctx: IPublicModelPluginContext) => { return { // 插件对外暴露的数据和方法 exports() { @@ -114,7 +168,7 @@ const LowcodePluginPluginDemo = (ctx: ILowCodePluginContext) => { func: () => { console.log('方法也是一样'); }, - } + }; }, // 插件的初始化函数，在引擎初始化之后会立刻调用 init() { @@ -148,69 +202,112 @@ LowcodePluginPluginDemo.meta = { engines: { lowcodeEngine: '^1.0.0', // 插件需要配合 ^1.0.0 的引擎才可运行 }, -} +}; export default LowcodePluginPluginDemo; ``` -在 src/scenarios/index/index.ts 中新增下面代码
 +在 src/index.ts 中新增下面代码 + + + +这样在我们的设计器中就新增了一个 Demo 面板。 + + + +### 方式 2：在新的仓库下开发插件 -这样在我们的设计器中就新增了一个 Demo 面板。
 -## 方式2：在新的仓库下开发插件 初始化 -```json + +```bash npm init @alilc/element your-plugin-name ``` -选择设计器插件（plugin）
 +选择设计器插件（plugin） -根据操作完善信息
 + -插件项目就初始化完成了
 +根据操作完善信息 + + + +插件项目就初始化完成了 + + 在插件项目下安装依赖 -```json + +```bash npm install ``` 启动项目 -```json + +```bash npm run start ``` -调试项目
 +调试项目 + + -在 Demo 中调试项目
在 build.json 下面新增 "inject": true，就可以在 [https://lowcode-engine.cn/demo/index.html?debug](https://lowcode-engine.cn/demo/index.html?debug) 页面下进行调试了。
 -# 开发一个自定义物料 -## 初始化物料 -```json +在 Demo 中调试项目 + +在 build.json 下面新增 "inject": true，就可以在 [https://lowcode-engine.cn/demo/demo-general/index.html?debug](https://lowcode-engine.cn/demo/demo-general/index.html?debug) 页面下进行调试了。 + + + +## 开发一个自定义物料 + +### 初始化物料 + +```bash npm init @alilc/element your-material-demo ``` -选择组件/物料栏
 -配置其他信息
 +选择组件/物料栏 -这样我们就初始化好了一个 React 物料。
 -## 启动并调试物料 -### 安装依赖 -```json + + +配置其他信息 + + + +这样我们就初始化好了一个 React 物料。 + + + +### 启动并调试物料 + +#### 安装依赖 + +```bash npm i ``` -### 启动 -```json + +#### 启动 + +```bash npm run lowcode:dev ``` -我们就可以通过 [http://localhost:3333/](http://localhost:3333/) 看到我们的研发的物料了。
 -### 在 Demo 中调试 -```json +我们就可以通过 [http://localhost:3333/](http://localhost:3333/) 看到我们的研发的物料了。 + + + +#### 在 Demo 中调试 + +```bash npm i @alilc/build-plugin-alt ``` -修改 build.lowcode.js
 +修改 build.lowcode.js + + 如图，新增如下代码 -```json + +```javascript [ '@alilc/build-plugin-alt', { @@ -224,16 +321,21 @@ npm i @alilc/build-plugin-alt ], ``` -我们重新启动项目，就可以在 Demo 中找到我们的自定义组件。
 +我们重新启动项目，就可以在 Demo 中找到我们的自定义组件。 + + + +### 发布 -## 发布 首先进行构建 -```json + +```bash npm run lowcode:build ``` 发布组件 -```json + +```bash npm publish ``` @@ -243,7 +345,8 @@ npm publish - 组件代码：[https://unpkg.com/my-material-demo@0.1.0/build/lowcode/render/default/view.js](https://unpkg.com/my-material-demo@0.1.0/build/lowcode/render/default/view.js) 我们也可以从 [https://unpkg.com/my-material-demo@0.1.0/build/lowcode/assets-prod.json](https://unpkg.com/my-material-demo@0.1.0/build/lowcode/assets-prod.json) 找到我们的资产包描述。 -```json + +```bash { "packages": [ { @@ -288,9 +391,21 @@ npm publish } ``` -## 使用 -我们将刚刚发布的组件的 assets-prod.json 的内容放到 demo 的 src/universal/assets.json 中。
*最好放到最后，防止因为资源加载顺序问题导致出现报错。
如图，新增 packages 配置
如图，新增 components 配置
 +### 使用 + +我们将刚刚发布的组件的 assets-prod.json 的内容放到 demo 的 src/universal/assets.json 中。 + +> 最好放到最后，防止因为资源加载顺序问题导致出现报错。 + +如图，新增 packages 配置 + + +如图，新增 components 配置 + + 这时候再启动 DEMO 项目，就会有新的低代码物料了。接下来就按照你们的需求，继续扩展物料吧。 -# 总结 + +## 总结 + 这里只是简单的介绍了一些低代码引擎的基础能力，带大家简单的对低代码 DEMO 进行扩展，定制一些新的功能。低代码引擎的能力还有很多很多，可以继续去探索更多的功能。 diff --git a/docs/community/code-specification.md b/docs/docs/participate/code-specification.md similarity index 93% rename from docs/community/code-specification.md rename to docs/docs/participate/code-specification.md index f4378ee2cc..d6b387e305 100644 --- a/docs/community/code-specification.md +++ b/docs/docs/participate/code-specification.md @@ -1,5 +1,6 @@ --- title: 编码规约 +sidebar_position: 5 --- 编码规约 @@ -26,7 +27,7 @@ title: 编码规约 - 不要在全局命名空间内定义类型/值 - 共享的类型应该在 `types.ts` 里定义 - 在一个文件里，类型定义应该出现在顶部 - - interface 和 type 很类似，原则上能用 interface 实现，就用 interface , 如果不能才用 type + - interface 和 type 很类似，原则上能用 interface 实现，就用 interface , 如果不能才用 type ### 注释 diff --git a/docs/docs/participate/config.md b/docs/docs/participate/config.md deleted file mode 100644 index e300400100..0000000000 --- a/docs/docs/participate/config.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: 工程化配置 -sidebar_position: 3 ---- -目前引擎体系共包含 3 个 js 文件，即： -```html - - - - -``` - -工程化配置我们进行了统一，具体如下： -```shell -{ - "entry": { - ... - }, - "library": "...", - "libraryTarget": "umd", - "externals": { - "react": "var window.React", - "react-dom": "var window.ReactDOM", - "prop-types": "var window.PropTypes", - "rax": "var window.Rax", - "@alilc/lowcode-engine": "var window.AliLowCodeEngine", - "@alilc/lowcode-engine-ext": "var window.AliLowCodeEngineExt", - "moment": "var moment", - "lodash": "var _", - "@alifd/next": "var Next" - }, - "polyfill": false, - "outputDir": "dist", - "vendor": false, - "ignoreHtmlTemplate": true, - "sourceMap": true, - "plugins": [ - "build-plugin-react-app", - ["build-plugin-fusion", { - }], - ["build-plugin-moment-locales", { - "locales": ["zh-cn"] - }], - "./build.plugin.js" - ] -} - -``` -总结一下，有 2 点： - -1. **都不包含 polyfill，**需要应用级别单独引入 polyfill，推荐动态 polyfill -2. **都不包含 lodash / moment / next** - - -#### 前置依赖资源： -```html - - - - - - -``` - - -#### 所有资源： -```html - - - - - - - - - - - - -``` diff --git a/docs/docs/participate/doc.md b/docs/docs/participate/doc.md deleted file mode 100644 index c1ef26f8d4..0000000000 --- a/docs/docs/participate/doc.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: 官网文档协作流程 -sidebar_position: 3 ---- - -## 基本原则 - -### 维护方式 - -- 官方文档通过 github 管理文档源, 官网文档与[主仓库 develop 分支](https://github.com/alibaba/lowcode-engine/tree/develop/docs)保持同步。 -- 点击每篇文档下发的 `编辑此页` 可直接定位到 github 中位置。 -- 欢迎 PR， 文档 PR 也会作为贡献者贡献，会用于贡献度统计。 -- 文档同步到官方网站由官方人员进行操作，如有需要可以通过 issue 或 贡献者群与相关人员沟通。 - -### PR 方式 - -- 操作与代码贡献一致，指向 develop 分支。 \ No newline at end of file diff --git a/docs/docs/participate/flow.md b/docs/docs/participate/flow.md index 24ebd3629d..b8b804e123 100644 --- a/docs/docs/participate/flow.md +++ b/docs/docs/participate/flow.md @@ -19,7 +19,8 @@ sidebar_position: 2 几点要求： 1. commit message 格式遵循 [ConvensionalCommits](https://www.conventionalcommits.org/en/v1.0.0/#summary) - + +
2. 请按照一个 bugfix / feature 对应一个 commit，假如不是，请 rebase 后再提交 MR，不要一堆无用的、试验性的 commit。
好处：从引擎的整体 commit 历史来看，会很清晰，**每个 commit 完成一件确定的事，changelog 也能自动生成**。另外，假如因为某个 commit 导致了 bug，也很容易通过 rebase drop 等方式快速修复。
@@ -42,9 +43,9 @@ sidebar_position: 2
> 此处是理想节奏，实际情况可能会有调整
-- 日常迭代 2 周，一般月中或月底
+- 日常迭代 2 周，一般月中或月底，发版日两天前发最后一个 beta 版本，原则上不接受新 pr，灰度 2 天后，发正式版。
- 特殊情况紧急迭代随时发
-- 大Feature迭代，每年 2 - 4 次
+- 大 Feature 迭代，每年 2 - 4 次
### 发布步骤
@@ -57,7 +58,7 @@ sidebar_position: 2
```bash
git checkout develop
```
-2. 创建release分支
+2. 创建 release 分支
```bash
git checkout -b release/1.0.0
```
@@ -65,21 +66,50 @@ sidebar_position: 2
```bash
npm run build
```
-4. 发布到npm
+4. 发布到 npm
```bash
npm run pub
```
-5. 同步到 tnpm 源 & alifd CDN（此步骤将发布在 npm 源的包同步到阿里内网源，因为 alifd cdn 将依赖内网 npm 源）
+5. 同步到 tnpm 源 & alifd CDN & uipaas CDN（此步骤将发布在 npm 源的包同步到阿里内网源，因为 alifd cdn 将依赖内网 npm 源）
```bash
tnpm run sync
+ tnpm run syncOss
```
6. 更新[发布日志](https://github.com/alibaba/lowcode-engine/releases)
7. 合并 release/x.x.x 到 main 分支
8. 合并 main 分支到 develop 分支
-如果是发布beta 版本，步骤如下（以发布 1.0.1 版本为例）：
+如果是发布 beta 版本，步骤如下（以发布 1.0.1 版本为例）：
+
+#### 发某 y 位版本首个 beta，如 1.1.0-beta.0
+1. 拉 develop 分支
+ ```bash
+ git checkout develop
+ ```
+ 更新到最新（如需）
+ ```bash
+ git pull
+ ```
+2. 拉 release 分支，此处以 1.1.0 版本做示例
+ ```bash
+ git checkout -b release/1.1.0-beta
+ git push --set-upstream origin release/1.1.0-beta
+ ```
+3. build
+ ```bash
+ npm run build
+ ```
+4. 发布，此处需有 @alilc scope 发包权限
+ ```bash
+ npm run pub:preminor
+ ```
+5. 同步到 tnpm 源 & alifd CDN & uipaas CDN
+ ```bash
+ tnpm run sync
+ tnpm run syncOss
+ ```
-#### 发某版本首个 beta ，如 1.0.1-beta.0
+#### 发某 z 位版本首个 beta，如 1.0.1-beta.0
1. 拉 develop 分支
```bash
git checkout develop
@@ -91,6 +121,7 @@ sidebar_position: 2
2. 拉 release 分支，此处以 1.0.1 版本做示例
```bash
git checkout -b release/1.0.1-beta
+ git push --set-upstream origin release/1.0.1-beta
```
3. build
```bash
@@ -100,12 +131,13 @@ sidebar_position: 2
```bash
npm run pub:prepatch
```
-5. 同步到 tnpm 源 & alifd CDN
+5. 同步到 tnpm 源 & alifd CDN & uipaas CDN
```bash
tnpm run sync
+ tnpm run syncOss
```
-#### 发某版本非首个 beta ，如 1.0.1-beta.0 -> 1.0.1-beta.1
+#### 发某版本非首个 beta，如 1.0.1-beta.0 -> 1.0.1-beta.1
1. 切换到 release 分支
```bash
git checkout release/1.0.1-beta
@@ -122,9 +154,10 @@ sidebar_position: 2
```bash
npm run pub:prerelease
```
-5. 同步到 tnpm 源 & alifd CDN
+5. 同步到 tnpm 源 & alifd CDN & uipaas CDN
```bash
tnpm run sync
+ tnpm run syncOss
```
@@ -136,7 +169,7 @@ sidebar_position: 2
```bash
npm run build
```
-3. publish （此步骤需要 npm 发包权限）
+3. publish（此步骤需要 npm 发包权限）
```bash
npm run pub
```
@@ -144,9 +177,10 @@ sidebar_position: 2
```bash
npm publish --tag beta
```
-4. 同步到 tnpm 源 & alifd CDN
+4. 同步到 tnpm 源 & alifd CDN & uipaas CDN
```bash
tnpm run sync
+ tnpm run syncOss
```
**官网生效**
diff --git a/docs/docs/participate/index.md b/docs/docs/participate/index.md
index 854da7e183..e09f2ddad2 100644
--- a/docs/docs/participate/index.md
+++ b/docs/docs/participate/index.md
@@ -1,30 +1,118 @@
---
-title: 贡献者指南
+title: 参与贡献
sidebar_position: 0
---
-### 首个 Pull Request
-在写第一个 Pull Request？你可以从这一系列视频中学习怎么做：
-[How to Contribute to an Open Source Project on GitHub](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)
-为了使你能够快速上手和熟悉贡献流程，我们这里有个列表 [good first issues](https://github.com/alibaba/lowcode-engine/issues?q=is:open+is:issue+label:%22good+first+issue%22)，里面有相对没那么笼统的漏洞，从这开始是个不错的选择。
+### 环境准备
+
+开发 LowcodeEngine 需要 Node.js 16+。
+
+推荐使用 nvm 管理 Node.js，避免权限问题的同时，还能够随时切换当前使用的 Node.js 的版本。
+
+### 贡献低代码引擎
+
+#### clone 项目
+
+```
+git clone git@github.com:alibaba/lowcode-engine.git
+cd lowcode-engine
+```
+
+#### 安装依赖并构建
+
+```
+npm install && npm run setup
+```
+
+#### 调试环境配置
+
+本质上是将 demo 页面引入的几个 js/css 代理到 engine 项目，可以使用趁手的代理工具，这里推荐 [XSwitch](https://chrome.google.com/webstore/detail/xswitch/idkjhjggpffolpidfkikidcokdkdaogg?hl=en-US)。
+
+本地开发代理规则如下：
+```json
+{
+ "proxy": [
+ [
+ "https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/(.*)/dist/js/engine-core.js",
+ "http://localhost:5555/js/AliLowCodeEngine.js"
+ ],
+ [
+ "https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/(.*)/dist/css/engine-core.css",
+ "http://localhost:5555/css/AliLowCodeEngine.css"
+ ],
+ [
+ "https?://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/(.*)/dist/js/react-simulator-renderer.js",
+ "http://localhost:5555/js/ReactSimulatorRenderer.js"
+ ],
+ [
+ "https?://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/(.*)/dist/css/react-simulator-renderer.css",
+ "http://localhost:5555/css/ReactSimulatorRenderer.css"
+ ]
+ ]
+}
+```
+
+#### 开发
+
+```
+npm start
+```
+
+选择一个环境进行调试，例如[低代码引擎在线 DEMO](https://lowcode-engine.cn/demo/demo-general/index.html)
+
+开启代理之后，就可以进行开发调试了。
-如果你想解决一个 issue，请确定检查了该 issue 下的评论以防有人正在处理它。如果目前没人在处理该 issue，那么请留下评论去表明你想处理该 issue 以便其他人不会意外重复你的工作。
-如果有人留言表明要处理该 issue 但是超过两周没有跟进，你可以接手工作，不过也应该留言说明。
+### 贡献低代码引擎文档
-### 提交 Pull Request
-核心团队时刻关注 pull requests，我们会先评审你的 pull request，之后可能会合并，可能会要求再次更改，也可能会关闭该 pull request 并对此作出解释。我们会尽力全程更新和反馈。
+#### 开发文档
-**提交 pull request 前**，请确保完成以下步骤：
+在 lowcode-engine 目录下执行下面命令
+```
+cd docs
-1. Fork [此仓库](https://github.com/alibaba/lowcode-engine)，从 main 创建分支。
-2. 在仓库根目录下执行 yarn。
-3. 如果你修复了 bug 或者添加了代码，而这些内容需要测试，请添加测试！
-4. 确保通过测试套件（yarn test）。
-5. 请签订贡献者许可证协议（Contributor License Agreement）。
+npm start
+```
-### 核心贡献者交流
-如果你想长期参与到项目维护中，我们提供了一个核心贡献者交流群。
+#### 维护方式
+- 官方文档通过 github 管理文档源，官网文档与[主仓库 develop 分支](https://github.com/alibaba/lowcode-engine/tree/develop/docs)保持同步。
+- 点击每篇文档下发的 `编辑此页` 可直接定位到 github 中位置。
+- 欢迎 PR，文档 PR 也会作为贡献者贡献，会用于贡献度统计。
+- **文档同步到官方网站由官方人员进行操作**，如有需要可以通过 issue 或 贡献者群与相关人员沟通。
+- 为了提供更好的阅读和使用体验，文档中的图片文件会定期转换成可信的 CDN 地址。
+
+#### 文档格式
+
+本项目文档参考[文档编写指南](https://github.com/sparanoid/chinese-copywriting-guidelines)。
+
+使用 vscode 进行编辑的朋友可以安装 vscode 插件 [huacnlee.autocorrect](https://github.com/huacnlee/autocorrect) 辅助文档 lint。
+
+
+### 贡献低代码引擎生态
+
+相关源码详见[NPM 包对应源码位置汇总](/site/docs/guide/appendix/npms)
+
+开发调试方式详见[低代码生态脚手架 & 调试机制](/site/docs/guide/expand/editor/cli)
+
+### 发布
+
+PR 被合并之后，我们会尽快发布相关的正式版本或者 beta 版本。
+
+### 加入 Contributor 群
+提交过 Bugfix 或 Feature 类 PR 的同学，如果有兴趣一起参与维护 LowcodeEngine，我们提供了一个核心贡献者交流群。
1. 可以通过[填写问卷](https://survey.taobao.com/apps/zhiliao/4YEtu9gHF)的方式，参与到其中。
-2. 填写问卷后加微信号 `wxidvlalalalal` 说明一下
+2. 填写问卷后加微信号 `wxidvlalalalal` （注明 github id）我们会拉你到群里。
+
+如果你不知道可以贡献什么，可以到源码里搜 TODO 或 FIXME 找找。
+
+为了使你能够快速上手和熟悉贡献流程，我们这里有个列表 [good first issues](https://github.com/alibaba/lowcode-engine/issues?q=is:open+is:issue+label:%22good+first+issue%22)，里面有相对没那么笼统的漏洞，从这开始是个不错的选择。
+
+### PR 提交注意事项
+
+- lowcode-engine 仓库建议从 develop 创建分支，PR 指向 develop 分支。
+- 其他仓库从 main 分支创建分支，PR 指向 main 分支
+- 如果你修复了 bug 或者添加了代码，而这些内容需要测试，请添加测试！
+- 确保通过测试套件（yarn test）。
+- 请签订贡献者许可证协议（Contributor License Agreement）。
+ > 如已签署 CLA 仍被提示需要签署，[解决办法](/site/docs/faq/faq021)
\ No newline at end of file
diff --git a/docs/docs/participate/meet.md b/docs/docs/participate/meet.md
new file mode 100644
index 0000000000..23226bf1cd
--- /dev/null
+++ b/docs/docs/participate/meet.md
@@ -0,0 +1,55 @@
+---
+title: 开源社区例会
+sidebar_position: 0
+---
+
+## **简介**
+
+低代码引擎开源社区致力于共同推动低代码技术的发展和创新。本社区汇集了低代码技术领域的开发者、技术专家和行业观察者，通过定期的例会来交流思想、分享经验、讨论新技术，并探索低代码技术的未来发展方向。
+
+## 参与要求
+
+为了确保例会的质量和效果，我们建议以下人员参加：
+
+- **已参与低代码引擎贡献的成员**：那些对低代码引擎有实际贡献的社区成员。
+- **参考贡献指南**：可查阅[贡献指南](https://lowcode-engine.cn/site/docs/participate/)获取更多信息。
+- **提供过优秀建议的成员**：那些在过去为低代码引擎提供过有价值建议的成员。
+
+## **时间周期**
+
+- **周期性**：月例会
+
+### **特别说明**
+
+- 例会周期可根据成员反馈进行调整。如果讨论的议题较多，可增加例会频率；若议题较少，单次例会可能取消。若多次取消，可能会暂停例会。
+
+## **例会流程**
+
+### **准备阶段**
+
+- **定期确定议题**：会前一周确定下一次会议的议题。
+- **分发会议通知**：提前发送会议时间、议程和参与方式。
+
+### **会议阶段**
+
+- **开场和介绍**：简短开场和自我介绍，特别是新成员加入时。
+- **议题讨论**：按照议程进行议题讨论，每个议题分配一定时间，并留足够时间供讨论和提问。
+- **记录要点和决定**：记录讨论要点、决策和任何行动事项。
+
+### **后续阶段**
+
+- **分享会议纪要**：会后将会议纪要和行动计划分发给所有成员。
+- **执行和跟进**：根据会议中的讨论和决策执行相关任务，并在下次会议中进行跟进汇报。
+
+## **开源例会议题**
+
+开源例会议题包括但不限于：
+
+- **共建低代码行业发展**：探讨通过开源社区合作加速低代码行业发展。
+- **改进建议和反馈收集**：讨论社区成员对低代码引擎的使用体验和改进建议。
+- **前端技术与低代码的结合**：针对前端开发者，讨论将前端技术与低代码引擎结合的方式。
+- **低代码业务场景和经验分享**：邀请社区成员分享低代码引擎的实际应用经验。
+- **低代码技术原理介绍**：深入理解低代码引擎的技术原理和实现方式。
+- **低代码引擎的最新进展**：分享低代码引擎的最新进展，包括新版本发布和新功能实现等。
+- **低代码技术的未来展望**：讨论低代码技术的未来发展方向。
+- **最新低代码平台功能和趋势分析**：分享和讨论当前低代码平台的新功能、趋势和发展方向。
\ No newline at end of file
diff --git a/docs/docs/participate/prepare.md b/docs/docs/participate/prepare.md
deleted file mode 100644
index dd962cd647..0000000000
--- a/docs/docs/participate/prepare.md
+++ /dev/null
@@ -1,64 +0,0 @@
----
-title: 调试环境配置
-sidebar_position: 1
----
-低代码引擎的核心仓库是不包含任何物料、插件、setter 的，它本身用于生成低代码引擎的主包。
-
-如果您需要对低代码的主包进行开发和调试，需要用到本文里介绍的知识。
-
-如果您需要对低代码编辑器进行定制，您可能只需要 clone [lowcode-demo 项目](https://github.com/alibaba/lowcode-demo)并进行修改，参考“[配置低代码扩展点](/site/docs/guide/expand/editor/summary)”章节。
-
-> 前置条件：
-> node >= 14
-
-### 1. 拉取代码，启动项目
-```bash
-git clone git@github.com:alibaba/lowcode-engine.git
-cd lowcode-engine
-npm install && npm run setup
-npm start
-
-
-git clone git@github.com:alibaba/lowcode-demo.git
-cd lowcode-demo
-npm install && npm start
-```
-
-### 2. 配置资源代理
-本质上是将 demo 页面引入的几个 js/css 代理到 engine 项目，可以使用趁手的代理工具，这里推荐 [XSwitch](https://chrome.google.com/webstore/detail/xswitch/idkjhjggpffolpidfkikidcokdkdaogg?hl=en-US)。
-
-本地开发代理规则如下：
-```json
-{
- "proxy": [
- [
- "https://alifd.alicdn.com/npm/@alilc/lowcode-engine@(.*)/dist/js/engine-core.js",
- "http://localhost:5555/js/engine-core.js"
- ],
- [
- "https://alifd.alicdn.com/npm/@alilc/lowcode-engine@(.*)/dist/css/engine-core.css",
- "http://localhost:5555/css/engine-core.css"
- ],
- [
- "https?://alifd.alicdn.com/npm/@alilc/lowcode-engine@(.*)/dist/js/react-simulator-renderer.js",
- "http://localhost:5555/js/react-simulator-renderer.js"
- ],
- [
- "https?://alifd.alicdn.com/npm/@alilc/lowcode-engine@(.*)/dist/css/react-simulator-renderer.css",
- "http://localhost:5555/css/react-simulator-renderer.css"
- ],
- [
- "https?://alifd.alicdn.com/npm/@alilc/lowcode-engine@(.*)/dist/js/rax-simulator-renderer.js",
- "http://localhost:5555/js/rax-simulator-renderer.js"
- ],
- [
- "https?://alifd.alicdn.com/npm/@alilc/lowcode-engine@(.*)/dist/css/rax-simulator-renderer.css",
- "http://localhost:5555/css/rax-simulator-renderer.css"
- ],
- ]
-}
-```
-
-### 3. 本地调试物料/插件/设置器
-
-详见[低代码生态脚手架 & 调试机制](/site/docs/guide/expand/editor/cli)
diff --git a/docs/docs/specs/assets-spec.md b/docs/docs/specs/assets-spec.md
index 5c7df0163f..5a91b8dde3 100644
--- a/docs/docs/specs/assets-spec.md
+++ b/docs/docs/specs/assets-spec.md
@@ -2,8 +2,6 @@
title: 《低代码引擎资产包协议规范》
sidebar_position: 2
---
-# 《低代码引擎资产包协议规范》
-
## 1 介绍
### 1.1 本协议规范涉及的问题域
@@ -65,7 +63,7 @@ sidebar_position: 2
- setters { Array } 设计器中设置器描述协议列表
- extConfig { Object } 平台自定义扩展字段
-### 2.1 version（A）
+### 2.1 version (A)
定义当前协议 schema 的版本号；
@@ -73,9 +71,9 @@ sidebar_position: 2
| ---------- | ------ | ---------- | -------- | ------ |
| version | String | 协议版本号 | - | 1.1.0 |
-### 2.2 packages（A）
+### 2.2 packages (A)
-定义低代码编辑器中加载的资源列表，包含公共库和组件(库) cdn 资源等；
+定义低代码编辑器中加载的资源列表，包含公共库和组件 (库) cdn 资源等；
| 字段 | 字段描述 | 字段类型 | 规范等级 | 备注 |
| -------------------- | --------------------------------------------------------------- | ------------- | -------- | -------------------------------------------------------------------------------------------------------- |
@@ -92,13 +90,13 @@ sidebar_position: 2
| packages[].advancedEditUrls | 组件多个编辑态视图打包后的 CDN url 列表集合，包含 js 和 css | Object | AAA | 上层平台根据特定标识提取某个编辑态的资源，低代码引擎编辑器会加载这些资源，优先级高于 packages[].editUrls |
| packages[].advancedUrls | 组件多个端的渲染态视图打包后的 CDN url 列表集合，包含 js 和 css | Object | AAA | 上层平台根据特定标识提取某个渲染态的资源， 低代码引擎渲染模块会加载这些资源，优先级高于 packages[].urls |
| packages[].external | 当前资源在作为其他资源的依赖，在其他依赖打包时时是否被排除了(同 webpack 中 external 概念) | Boolean | AAA | 某些资源会被单独提取出来，是其他依赖的前置依赖，根据这个字段决定是否提前加载该资源 |
-| packages[].loadEnv | 指定当前资源加载的环境 | Array
API 是组件的属性解释，给开发者作为组件属性配置的参考。为了保持 API 的一致性，我们制定这个 API 命名规范。对于业界通用的，约定俗成的命名，我们遵循社区的约定。对于业界有多种规则难以确定的，我们确定其中一种，大家共同遵守。
-#### 通用规则
+##### 通用规则
- 所有的 API 采用小驼峰的书写规则，如 `onChange`、`direction`、`defaultVisible`。
- 标签名采用大驼峰书写规则，如 `Menu`、`Slider`、`DatePicker`。
-#### 通用命名
+##### 通用命名
| API 名称 | 类型 | 描述 | 常见变量 |
| :------------- | :------------- | :----------------------------------------------------------- | :---------------------------------------------------- |
@@ -250,7 +249,7 @@ API 是组件的属性解释，给开发者作为组件属性配置的参考。
| direction | enum | 方向，取值采用缩写的方式。 | hoz（水平）, ver（垂直） |
| align | enum | 对齐方式 | tl, tc, tr, cl, cc, cr, bl, bc, br |
| status | enum | 状态 | normal, success, error, warning |
-| size | enum | 大小 | small, medium, large 更大或更小可用(xxs, xs, xl, xxl) |
+| size | enum | 大小 | small, medium, large 更大或更小可用 (xxs, xs, xl, xxl) |
| type | enum or string | 分类:1. dom 结构不变、只有皮肤的变化 2.组件类型只有并列的几类 | normal, primary, secondary |
| visible | boolean | 是否显示 | |
| defaultVisible | boolean | 是否显示（非受控） | |
@@ -262,11 +261,11 @@ API 是组件的属性解释，给开发者作为组件属性配置的参考。
| has+'属性' | boolean | 拥有某个属性 | 例如 `hasArrow`， `hasHeader`， `hasClose` 等等 |
-#### 多选枚举
+##### 多选枚举
当某个 API 的接口，允许用户指定多个枚举值的时候，我们把这个接口定义为多选枚举。一个很典型的例子是某个弹层组件的 `closable` 属性，我们会允许：键盘 esc 按键、点击 mask、点击 close 按钮、点击组件以外的任何区域进行关闭。
-不要有一个 API 值，支持多种类型。例如某个弹层的组件，我们会允许 esc、点击 mask、点击 close 按钮等进行关闭。此时 API 设计可以通过多个 API 承载，例如:
+不要有一个 API 值，支持多种类型。例如某个弹层的组件，我们会允许 esc、点击 mask、点击 close 按钮等进行关闭。此时 API 设计可以通过多个 API 承载，例如：
```js
closable?: boolean; // 默认为 true
@@ -281,19 +280,19 @@ true 表示触发规则都会关闭，false 表示触发规则不会关闭。
- ``，任何情况下都不关闭，只能通过受控设置 visible
- ``，用户按 esc 或者点击关闭按钮会关闭
-#### 事件
+##### 事件
-- 标准事件或者自定义的符合 w3c 标准的事件，命名必须 on 开头, 即 `on` + 事件名，如 onExpand。
+- 标准事件或者自定义的符合 w3c 标准的事件，命名必须 on 开头， 即 `on` + 事件名，如 onExpand。
-#### 表单规范
+##### 表单规范
- 支持[受控模式](https://reactjs.org/docs/forms.html#controlled-components)(value + onChange) （A)
- value 控制组件数据展现
- onChange 组件发生变化时候的回调函数（第一个参数可以给到 value)
-- `value={undefined}` 的时候清空数据, field 的 reset 函数会给所有组件下发 undefined 数据 (AA)
+- `value={undefined}`的时候清空数据，field 的 reset 函数会给所有组件下发 undefined 数据 (AA))
- 一次完整操作抛一次 onChange 事件 `建议` 比如有 Process 表示进展中的状态，建议增加 API `onProcess`；如果有 Start 表示启动状态，建议增加 API `onStart` (AA)
-#### 属性的传递
+##### 属性的传递
**1. 原子组件（Atomic Component）**
> 最小粒子，不能再拆分的组件
@@ -355,9 +354,9 @@ $ iceworks sync
文件命名采取 [bcp47](https://tools.ietf.org/html/bcp47) 规范
-#### 目录规范
+##### 目录规范
-在 `src` 目录新增 `locale` 目录用于管理不同语言的文案.
+在 `src` 目录新增 `locale` 目录用于管理不同语言的文案。
```
|- BizHello
@@ -368,7 +367,7 @@ $ iceworks sync
|------ ja-JP.js
```
-#### 定义不同的语言
+##### 定义不同的语言
```javascript
// zh-CN.js
@@ -391,7 +390,7 @@ export default {
};
```
-#### 组件支持多语言建议方案
+##### 组件支持多语言建议方案
```jsx
// index.jsx
@@ -418,7 +417,7 @@ export default class BizHello extends Component {
}
```
-#### 组件支持全局替换国际化文案
+##### 组件支持全局替换国际化文案
配合 ConfigProvider 支持全局替换国际化文案。
@@ -452,7 +451,7 @@ export default ConfigProvider.config(BizHello, {
业务组件中如果有自定义的需要跟随主题色的 UI，一定要引入变量的形式，增加组件的流通性。
-#### src/index.scss
+##### src/index.scss
```css
/* 如果需要引入主题变量引入此段 */
@@ -499,12 +498,12 @@ export default {
api 属性标准参考 [https://fusion.design/help.html#/dev-biz](https://fusion.design/help.html#/dev-biz)
-#### 2.1.7 无障碍访问规范(AAA)
+#### 2.1.7 无障碍访问规范 (AAA)
-无障碍需要符合 [WCAG 2.1 A级标准](https://www.w3.org/TR/WCAG21/)，可参考 [W3C 无障碍最佳实践](https://www.w3.org/TR/wai-aria-practices-1.1/)、[Fusion 无障碍指引 2.3.1](https://alibaba-fusion.github.io/next/part1/basics.html) 章节等。
+无障碍需要符合 [WCAG 2.1 A 级标准](https://www.w3.org/TR/WCAG21/)，可参考 [W3C 无障碍最佳实践](https://www.w3.org/TR/wai-aria-practices-1.1/)、[Fusion 无障碍指引 2.3.1](https://alibaba-fusion.github.io/next/part1/basics.html) 章节等。
-#### 增加 a11y.md 无障碍 demo
+##### 增加 a11y.md 无障碍 demo
必须借助 API 才能完成无障碍工作的组件必须为开发者提供无障碍的使用文档，请[参考](https://fusion.design/pc/component/select?themeid=2#accessibility-container)组件 API 中 `ARIA and Keyboard` ，建议在 `demo` 目录新增 `a11y.md` 文件用于演示组件的无障碍使用。
@@ -518,7 +517,7 @@ component
详细指引查看无障碍开发指南 [https://alibaba-fusion.github.io/next/part1/basics.html](https://alibaba-fusion.github.io/next/part1/basics.html)。
-#### 通过键盘快速访问
+##### 通过键盘快速访问
一般键盘事件有 Up Arrow/Down Arrow/Enter/Esc/Tab
@@ -532,7 +531,7 @@ component
| Esc | 关闭列表 |
-#### 对读屏软件友好
+##### 对读屏软件友好
- 对于组件，我们为开发者内置 `role` 和特定 `aria-_属性`，开发者也可以对非组件 API 属性都可以透传至 DOM 元素，进行修改 `role` 和 `aria-_参数`，但是要注意对应关系，请[参考](https://alibaba-fusion.github.io/next/part1/WAI-ARIA.html)。
- 对一些特殊的组件传递参数才能支持无障碍，设置 `id`，`autoFocus` 和传参数，如下：
@@ -552,7 +551,7 @@ component
| -------------- | ------------------------------------------------------------------------------------------------- | ------ |
| version | 协议版本号 | String |
| componentsMap | 描述组件映射关系的集合 | Array |
-| componentsTree | 低代码业务组件树描述，是长度固定为1的数组, 即数组内仅包含根容器的描述（低代码业务组件容器类型） | Array |
+| componentsTree | 低代码业务组件树描述，是长度固定为 1 的数组，即数组内仅包含根容器的描述（低代码业务组件容器类型） | Array |
| utils | 工具类扩展映射关系 | Array |
| i18n | 国际化语料 | Object |
@@ -572,7 +571,7 @@ component
"name": "lucy",
},
"static": {}, // 用于定义自定组件的 static 属性
- "defaultProps": { // 默认 props： 选填仅用于定义低代码业务组件的默认属性固定对象
+ "defaultProps": { // 默认 props：选填仅用于定义低代码业务组件的默认属性固定对象
"name": "xxx"
},
"children": [{
@@ -609,8 +608,6 @@ component
- **组件属性信息 (A)：** 描述组件属性信息，通常包含参数、说明、类型、默认值 4 项内容。
- **能力配置/体验增强：** 推荐用于优化搭建产品编辑体验，定制编辑能力的配置信息。
-整体结构概览: [http://lowcode-engine.cn/doc?url=sde3wf](http://lowcode-engine.cn/doc?url=sde3wf)
-
##### 2.2.2.2 基础信息（A）
| 字段 | 字段描述 | 字段类型 | 允许空 |
@@ -836,14 +833,15 @@ props 数组下对象字段描述：
| name | 属性名 | String | type = 'field' 生效 |
| defaultValue | 默认值 | Any(视字段类型而定) | type = 'field' 生效 |
| supportVariable | 是否支持配置变量 | Boolean | type = 'field' 生效 |
-| condition | 配置当前 prop 是否展示 | (target: SettingTarget) => boolean; | - |
-| setter | 单个控件(setter)描述，搭建基础协议组件的描述对象，支持 JSExpression / JSFunction / JSSlot | `String\|Object\|Function` | type = 'field' 生效 |
+| condition | 配置当前 prop 是否展示 | (target: IPublicModelSettingField) => boolean; | - |
+| ignoreDefaultValue | 配置当前 prop 是否忽略默认值处理逻辑，如果返回值是 true 引擎不会处理默认值 | (target: IPublicModelSettingField) => boolean; | - |
+| setter | 单个控件 (setter) 描述，搭建基础协议组件的描述对象，支持 JSExpression / JSFunction / JSSlot | `String\|Object\|Function` | type = 'field' 生效 |
| extraProps | 其他配置属性（不做流通要求） | Object | 其他配置 |
-| extraProps.getValue | setter 渲染时被调用，setter 会根据该函数的返回值设置 setter 当前值 | Function | (target: SettingTarget, value: any) => any; |
-| extraProps.setValue | setter 内容修改时调用，开发者可在该函数内部修改节点 schema 或者进行其他操作 | Function | (target: SettingTarget, value: any) => void; |
+| extraProps.getValue | setter 渲染时被调用，setter 会根据该函数的返回值设置 setter 当前值 | Function | (target: IPublicModelSettingField, value: any) => any; |
+| extraProps.setValue | setter 内容修改时调用，开发者可在该函数内部修改节点 schema 或者进行其他操作 | Function | (target: IPublicModelSettingField, value: any) => void; |
-根据属性值类型 propType，确定对应控件类型 (setter) ，详见 [https://lowcode-engine.cn/docV2/grfylu](https://lowcode-engine.cn/docV2/grfylu)
+根据属性值类型 propType，确定对应控件类型 (setter) 。
###### 2.2.2.4.2 通用扩展面板支持性配置 supports (AA)
@@ -885,7 +883,7 @@ props 数组下对象字段描述：
| nestingRule.descendantBlacklist | 后裔节点类型黑名单 | `String\|Function` |
| nestingRule.ancestorWhitelist | 祖父节点类型白名单 | `String\|Function` |
| isNullNode(AAA) | 是否存在渲染的根节点 | Boolean |
-| isLayout(AAA) | 是否是layout布局组件 | Boolean |
+| isLayout(AAA) | 是否是 layout 布局组件 | Boolean |
| rootSelector(AAA) | 组件选中框的 cssSelector | String |
| disableBehaviors(AAA) | 用于屏蔽在设计器中选中组件时提供的操作项，默认操作项有 copy、hide、remove | String[] |
| actions(AAA) | 用于详细配置上述操作项的内容 | Object |
@@ -925,21 +923,21 @@ props 数组下对象字段描述：
| 字段 | 用途 | 类型 | 备注 |
| ------------------------------- | --------------------------------------------------------------------------------------------------- | ------- | --- |
-|initialChildren |组件拖入“设计器”时根据此配置自动生成 children 节点 schema |NodeData[]/Function NodeData[] | ((target: SettingTarget) => NodeData[]);|
-|getResizingHandlers| 用于配置设计器中组件 resize 操作工具的样式和内容| Function| (currentNode: any) => Array<{ type: 'N' | 'W' | 'S' | 'E' | 'NW' | 'NE' | 'SE' | 'SW'; content?: ReactElement; propTarget?: string; appearOn?: 'mouse-enter' | 'mouse-hover' | 'selected' | 'always'; }> / ReactElement[];
-|callbacks| 配置 callbacks 可捕获引擎抛出的一些事件，例如 onNodeAdd、onResize 等| Callback| -
-|callbacks.onNodeAdd| 在容器中拖入组件时触发的事件回调| Function| (e: MouseEvent, currentNode: any) => any
-|callbacks.onNodeRemove| 在容器中删除组件时触发的事件回调| Function| (e: MouseEvent, currentNode: any) => any
-|callbacks.onResize| 调整容器尺寸时触发的事件回调，常常与 getResizingHandlers搭配使用| Function| 详见 Types 定义
-|callbacks.onResizeStart| 调整容器尺寸开始时触发的事件回调，常常与 getResizingHandlers搭配使用| Function| 详见 Types 定义
-|callbacks.onResizeEnd| 调整容器尺寸结束时触发的事件回调，常常与 getResizingHandlers搭配使用| Function| 详见 Types 定义
-|callbacks.onSubtreeModified| 容器节点结构树发生变化时触发的回调| Function| (currentNode: any, options: any) => void;
-|callbacks.onMouseDownHook| 鼠标按下操作回调| Function| (e: MouseEvent, currentNode: any) => any;
-|callbacks.onClickHook| 鼠标单击操作回调| Function| (e: MouseEvent, currentNode: any) => any;
-|callbacks.onDblClickHook| 鼠标双击操作回调| Function| (e: MouseEvent, currentNode: any) => any;
-|callbacks.onMoveHook| 节点被拖动回调| Function| (currentNode: any) => boolean;
-|callbacks.onHoverHook| 节点被 hover 回调| Function| (currentNode: any) => boolean;
-|callbacks.onChildMoveHook| 容器节点的子节点被拖动回调| Function| (childNode: any, currentNode: any) => boolean;
+|initialChildren | 组件拖入“设计器”时根据此配置自动生成 children 节点 schema |NodeData[]/Function NodeData[] | ((target: IPublicModelSettingField) => NodeData[]);|
+|getResizingHandlers| 用于配置设计器中组件 resize 操作工具的样式和内容 | Function| (currentNode: any) => Array<{ type: 'N' | 'W' | 'S' | 'E' | 'NW' | 'NE' | 'SE' | 'SW'; content?: ReactElement; propTarget?: string; appearOn?: 'mouse-enter' | 'mouse-hover' | 'selected' | 'always'; }> / ReactElement[];
+|callbacks| 配置 callbacks 可捕获引擎抛出的一些事件，例如 onNodeAdd、onResize 等 | Callback| -
+|callbacks.onNodeAdd| 在容器中拖入组件时触发的事件回调 | Function| (e: MouseEvent, currentNode: any) => any
+|callbacks.onNodeRemove| 在容器中删除组件时触发的事件回调 | Function| (e: MouseEvent, currentNode: any) => any
+|callbacks.onResize| 调整容器尺寸时触发的事件回调，常常与 getResizingHandlers 搭配使用 | Function| 详见 Types 定义
+|callbacks.onResizeStart| 调整容器尺寸开始时触发的事件回调，常常与 getResizingHandlers 搭配使用 | Function| 详见 Types 定义
+|callbacks.onResizeEnd| 调整容器尺寸结束时触发的事件回调，常常与 getResizingHandlers 搭配使用 | Function| 详见 Types 定义
+|callbacks.onSubtreeModified| 容器节点结构树发生变化时触发的回调 | Function| (currentNode: any, options: any) => void;
+|callbacks.onMouseDownHook| 鼠标按下操作回调 | Function| (e: MouseEvent, currentNode: any) => any;
+|callbacks.onClickHook| 鼠标单击操作回调 | Function| (e: MouseEvent, currentNode: any) => any;
+|callbacks.onDblClickHook| 鼠标双击操作回调 | Function| (e: MouseEvent, currentNode: any) => any;
+|callbacks.onMoveHook| 节点被拖动回调 | Function| (currentNode: any) => boolean;
+|callbacks.onHoverHook| 节点被 hover 回调 | Function| (currentNode: any) => boolean;
+|callbacks.onChildMoveHook| 容器节点的子节点被拖动回调 | Function| (childNode: any, currentNode: any) => boolean;
描述举例：
@@ -1101,7 +1099,7 @@ export interface Advanced {
/**
* 拖入容器时，自动带入 children 列表
*/
- initialChildren?: NodeData[] | ((target: SettingTarget) => NodeData[]);
+ initialChildren?: NodeData[] | ((target: IPublicModelSettingField) => NodeData[]);
/**
* @todo 待补充文档
*/
@@ -1211,7 +1209,7 @@ export interface ComponentDescription { // 组件描述协议，通过 npm 中
- components { Array } 所有组件的描述协议列表
- sort { Object } 用于描述组件面板中的 tab 和 category
-##### 2.2.3.2 version（A）
+##### 2.2.3.2 version (A)
定义当前协议 schema 的版本号；
@@ -1219,9 +1217,9 @@ export interface ComponentDescription { // 组件描述协议，通过 npm 中
| ---------- | ------ | ---------- | -------- | ------ |
| version | String | 协议版本号 | - | 1.0.0 |
-##### 2.2.3.3 packages（A）
+##### 2.2.3.3 packages (A)
-定义低代码编辑器中加载的资源列表，包含公共库和组件(库) cdn 资源等；
+定义低代码编辑器中加载的资源列表，包含公共库和组件 (库) cdn 资源等；
| 字段 | 字段描述 | 字段类型 | 备注 |
| --------------- | ---------------------- | -------- | ------------------------------------------------------------ |
@@ -1232,7 +1230,7 @@ export interface ComponentDescription { // 组件描述协议，通过 npm 中
| packages[].editUrls (A) | 组件编辑态视图打包后的 CDN url 列表，包含 js 和 css | Array\ | 低代码引擎编辑器会加载这些 url |
| packages[].urls (AA) | 组件渲染态视图打包后的 CDN url 列表，包含 js 和 css | Array\ | 低代码引擎渲染模块会加载这些 url |
-描述举例:
+描述举例：
```json
{
@@ -1253,7 +1251,7 @@ export interface ComponentDescription { // 组件描述协议，通过 npm 中
]
},
{
- "title": "fusion组件库",
+ "title": "fusion 组件库",
"package": "@alifd/next",
"version": "1.24.18",
"urls": [
@@ -1292,11 +1290,11 @@ export interface ComponentDescription { // 组件描述协议，通过 npm 中
}
```
-##### 2.2.3.4 components （A）
+##### 2.2.3.4 components (A)
定义所有组件的描述协议列表，组件描述协议遵循本规范章节 2.2.2 的定义；
-##### 2.2.3.5 sort （A）
+##### 2.2.3.5 sort (A)
定义组件列表分组
@@ -1330,7 +1328,7 @@ export interface RemoteComponentDescription {
}
```
-## 3 物料规范-区块规范
+## 3 物料规范 - 区块规范
### 3.1 源码规范
@@ -1386,14 +1384,14 @@ block/
"category": "form",
"screenshot": "https://unpkg.com/@icedesign/user-landing-block/screenshot.png",
"views": [{ // 区块视图，配置此项后会进入 fusion cool
- "title": "视图1标题", // 区块视图标题
+ "title": "视图 1 标题", // 区块视图标题
"props": { // 区块支持的 props
"type": "primary"
},
"screenshot": "build/views/block_view1.png", // 【编译自动填充】视图截图，会在 build 时自动生成
"html": "build/views/block_view1.html", // 【编译自动填充】视图渲染后 html 结构，会在 build 时自动生成
},{
- "title": "视图2标题", // 区块视图标题
+ "title": "视图 2 标题", // 区块视图标题
"props": { // 区块支持的 props
"type": "sencondary"
},
@@ -1417,7 +1415,7 @@ block/
| i18n | 国际化语料 | Object |
-描述举例1：
+描述举例 1：
```json
{
@@ -1425,7 +1423,7 @@ block/
"componentsMap": [{ }],
"componentsTree": [{ // 区块组件树，顶层由区块容器组件包裹；
"componentName": "Block", // 区块容器组件名
- "fileName": "block1", // 区块容器1
+ "fileName": "block1", // 区块容器 1
"props": {},
"css": "body {font-size: 12px;}",
"state": {
@@ -1454,7 +1452,7 @@ block/
}
```
-描述举例2：
+描述举例 2：
```json
{
@@ -1527,13 +1525,13 @@ block/
│ │ └── app.js # 应用配置文件
│ ├── utils/ # 工具库
│ │ └── index.js # 应用第三方扩展函数
-│ ├── stores/ # [可选]全局状态管理
+│ ├── stores/ # [可选] 全局状态管理
│ │ └── user.js
-│ ├── locales/ # [可选]国际化资源
+│ ├── locales/ # [可选] 国际化资源
│ │ ├── en-US
│ │ └── zh-CN
│ ├── global.scss # 全局样式
-│ └── index.jsx # 应用入口脚本, 依赖 config/routes.js 的路由配置动态生成路由；
+│ └── index.jsx # 应用入口脚本，依赖 config/routes.js 的路由配置动态生成路由；
├── webpack.config.js # 项目工程配置，包含插件配置及自定义 `webpack` 配置等
├── README.md
├── package.json
@@ -1546,7 +1544,7 @@ block/
```
-#### 入口文件
+##### 入口文件
(/src/index.jsx)
@@ -1562,16 +1560,16 @@ const App = hot(router);
ReactDOM.render(', 'specify the working directory', '.')
.option('-q, --quiet', 'be quiet, do not output anything unless get error', false)
.option('-v, --verbose', 'be verbose, output more information', false)
+ .option('--solution-options ', 'specify the solution options', '{}')
.arguments('[input-schema] ali lowcode schema JSON file')
.action(function doGenerate(inputSchema, command) {
var options = command.opts();
diff --git a/modules/code-generator/example-schema.json b/modules/code-generator/example-schema.json
index aaf3a3e0d8..5e31b1bea9 100644
--- a/modules/code-generator/example-schema.json
+++ b/modules/code-generator/example-schema.json
@@ -62,17 +62,17 @@
"router": "/"
},
"props": {
- "ref": "outterView",
+ "ref": "outerView",
"autoLoading": true
},
"fileName": "test",
"state": {
- "text": "outter"
+ "text": "outer"
},
"lifeCycles": {
"componentDidMount": {
- "type": "JSExpression",
- "value": "function() { console.log('componentDidMount'); }"
+ "type": "JSFunction",
+ "value": "function componentDidMount() { console.log('componentDidMount'); }"
}
},
"dataSource": {
@@ -91,7 +91,7 @@
"isSync": true
},
"dataHandler": {
- "type": "JSExpression",
+ "type": "JSFunction",
"value": "function (response) {\nif (!response.data.success){\n throw new Error(response.data.message);\n }\n return response.data.data;\n}"
}
},
@@ -105,13 +105,13 @@
"isSync": true
},
"dataHandler": {
- "type": "JSExpression",
+ "type": "JSFunction",
"value": "function (response) {\nif (!response.data.success){\n throw new Error(response.data.message);\n }\n return response.data.data.result;\n}"
}
}
],
"dataHandler": {
- "type": "JSExpression",
+ "type": "JSFunction",
"value": "function (dataMap) {\n console.info(\"All datasources loaded:\", dataMap);\n}"
}
},
diff --git a/modules/code-generator/example-schema.json5 b/modules/code-generator/example-schema.json5
index f71096fc41..4ab02999ec 100644
--- a/modules/code-generator/example-schema.json5
+++ b/modules/code-generator/example-schema.json5
@@ -62,17 +62,17 @@
router: '/',
},
props: {
- ref: 'outterView',
+ ref: 'outerView',
autoLoading: true,
},
fileName: 'test',
state: {
- text: 'outter',
+ text: 'outer',
},
lifeCycles: {
componentDidMount: {
- type: 'JSExpression',
- value: "function() { console.log('componentDidMount'); }",
+ type: 'JSFunction',
+ value: "function componentDidMount() { console.log('componentDidMount'); }",
},
},
dataSource: {
@@ -91,7 +91,7 @@
isSync: true,
},
dataHandler: {
- type: 'JSExpression',
+ type: 'JSFunction',
value: 'function (response) {\nif (!response.data.success){\n throw new Error(response.data.message);\n }\n return response.data.data;\n}',
},
},
@@ -105,13 +105,13 @@
isSync: true,
},
dataHandler: {
- type: 'JSExpression',
+ type: 'JSFunction',
value: 'function (response) {\nif (!response.data.success){\n throw new Error(response.data.message);\n }\n return response.data.data.result;\n}',
},
},
],
dataHandler: {
- type: 'JSExpression',
+ type: 'JSFunction',
value: 'function (dataMap) {\n console.info("All datasources loaded:", dataMap);\n}',
},
},
diff --git a/modules/code-generator/package.json b/modules/code-generator/package.json
index 3e7898e390..cd114fa067 100644
--- a/modules/code-generator/package.json
+++ b/modules/code-generator/package.json
@@ -1,6 +1,6 @@
{
"name": "@alilc/lowcode-code-generator",
- "version": "1.0.7-beta.3",
+ "version": "1.1.7",
"description": "出码引擎 for LowCode Engine",
"license": "MIT",
"main": "lib/index.js",
@@ -80,6 +80,7 @@
"change-case": "^3.1.0",
"commander": "^6.1.0",
"debug": "^4.3.2",
+ "file-saver": "^2.0.5",
"fp-ts": "^2.11.9",
"fs-extra": "9.x",
"glob": "^7.2.0",
@@ -98,6 +99,7 @@
"qs": "^6.10.1",
"semver": "^7.3.4",
"short-uuid": "^3.1.1",
+ "babel-jest": "^26.5.2",
"tslib": "^2.3.1"
},
"browser": {
@@ -108,6 +110,7 @@
"devDependencies": {
"@iceworks/spec": "^1.4.2",
"@types/babel__traverse": "^7.11.0",
+ "@types/file-saver": "^2.0.7",
"@types/jest": "^27.0.2",
"@types/lodash": "^4.14.162",
"@types/node": "^14.14.20",
@@ -125,11 +128,11 @@
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
- "jest": "^27.4.7",
+ "jest": "^26.5.2",
"jest-util": "^27.4.2",
"rimraf": "^3.0.2",
"standard-version": "^9.1.1",
- "ts-jest": "^27.1.3",
+ "ts-jest": "^26.5.2",
"ts-loader": "^6.2.2",
"ts-node": "^8.10.2",
"tsconfig-paths": "^3.9.0",
@@ -142,5 +145,11 @@
"publishConfig": {
"access": "public",
"registry": "https://registry.npmjs.org/"
- }
+ },
+ "repository": {
+ "type": "http",
+ "url": "https://github.com/alibaba/lowcode-engine/tree/main/modules/code-generator"
+ },
+ "bugs": "https://github.com/alibaba/lowcode-engine/issues",
+ "homepage": "https://github.com/alibaba/lowcode-engine/#readme"
}
diff --git a/modules/code-generator/src/analyzer/componentAnalyzer.ts b/modules/code-generator/src/analyzer/componentAnalyzer.ts
index 952295a15f..69e8ad482d 100644
--- a/modules/code-generator/src/analyzer/componentAnalyzer.ts
+++ b/modules/code-generator/src/analyzer/componentAnalyzer.ts
@@ -1,13 +1,13 @@
-import type { NodeSchema, CompositeObject } from '@alilc/lowcode-types';
+import type { IPublicTypeNodeSchema, IPublicTypeCompositeObject } from '@alilc/lowcode-types';
import type { TComponentAnalyzer } from '../types';
import { handleSubNodes } from '../utils/schema';
export const componentAnalyzer: TComponentAnalyzer = (container) => {
let hasRefAttr = false;
- const nodeValidator = (n: NodeSchema) => {
+ const nodeValidator = (n: IPublicTypeNodeSchema) => {
if (n.props) {
- const props = n.props as CompositeObject;
+ const props = n.props as IPublicTypeCompositeObject;
if (props.ref) {
hasRefAttr = true;
}
diff --git a/modules/code-generator/src/cli/run.ts b/modules/code-generator/src/cli/run.ts
index db66b46013..ec6814f767 100644
--- a/modules/code-generator/src/cli/run.ts
+++ b/modules/code-generator/src/cli/run.ts
@@ -9,7 +9,7 @@ import * as path from 'path';
import { getErrorMessage } from '../utils/errors';
import CodeGenerator from '..';
import type { IProjectBuilder } from '..';
-import type { ProjectSchema } from '@alilc/lowcode-types';
+import type { IPublicTypeProjectSchema } from '@alilc/lowcode-types';
/**
* 执行出码 CLI 命令
@@ -25,6 +25,7 @@ export async function run(
output?: string;
quiet?: boolean;
verbose?: boolean;
+ solutionOptions?: string;
},
): Promise {
try {
@@ -41,6 +42,19 @@ export async function run(
);
}
+ let solutionOptions = {};
+
+ if (options.solutionOptions) {
+ try {
+ solutionOptions = JSON.parse(options.solutionOptions);
+ } catch (err: any) {
+ throw new Error(
+ `solution options parse error, error message is "${err.message}"`,
+ );
+ }
+ }
+
+
// 读取 Schema
const schema = await loadSchemaFile(schemaFile);
@@ -48,7 +62,7 @@ export async function run(
const createProjectBuilder = await getProjectBuilderFactory(options.solution, {
quiet: options.quiet,
});
- const builder = createProjectBuilder();
+ const builder = createProjectBuilder(solutionOptions);
// 生成代码
const generatedSourceCodes = await builder.generateProject(schema);
@@ -75,7 +89,7 @@ export async function run(
async function getProjectBuilderFactory(
solution: string,
{ quiet }: { quiet?: boolean },
-): Promise<() => IProjectBuilder> {
+): Promise<(options: {[prop: string]: any}) => IProjectBuilder> {
if (solution in CodeGenerator.solutions) {
return CodeGenerator.solutions[solution as 'icejs' | 'rax'];
}
@@ -117,7 +131,7 @@ function isLocalSolution(solution: string) {
return solution.startsWith('.') || solution.startsWith('/') || solution.startsWith('~');
}
-async function loadSchemaFile(schemaFile: string): Promise {
+async function loadSchemaFile(schemaFile: string): Promise {
if (!schemaFile) {
throw new Error('invalid schema file name');
}
diff --git a/modules/code-generator/src/cli/solutions/example-solution.ts b/modules/code-generator/src/cli/solutions/example-solution.ts
index 2efff780cd..bfb9d079b1 100644
--- a/modules/code-generator/src/cli/solutions/example-solution.ts
+++ b/modules/code-generator/src/cli/solutions/example-solution.ts
@@ -289,8 +289,8 @@ codealike.json
},
"lifeCycles": {
"componentDidMount": {
- "type": "JSExpression",
- "value": "function() { console.log('componentDidMount'); }"
+ "type": "JSFunction",
+ "value": "function componentDidMount() {\\n console.log('componentDidMount');\\n}"
}
},
"methodsModule": {
@@ -559,8 +559,8 @@ codealike.json
"registry": "https://registry.npm.xxx.com"
},
"dependencies": {
- "@alilc/lowcode-code-generator": "^1.0.0-beta.16",
- "@alilc/lowcode-types": "^1.0.0-beta.21",
+ "@alilc/lowcode-code-generator": "^1.0.0",
+ "@alilc/lowcode-types": "^1.0.0",
"tslib": "^2.3.0"
},
"devDependencies": {
@@ -635,18 +635,20 @@ export default function createHelloWorldProjectBuilder() {
template: CodeGen.solutionParts.icejs.template,
plugins: {
components: [
- CodeGen.plugins.react.reactCommonDeps(),
- CodeGen.plugins.common.esmodule({ fileType: 'jsx' }),
- CodeGen.plugins.react.containerClass(),
- CodeGen.plugins.react.containerInjectContext(),
- CodeGen.plugins.react.containerInjectUtils(),
- CodeGen.plugins.react.containerInjectDataSourceEngine(),
- CodeGen.plugins.react.containerInjectI18n(),
- CodeGen.plugins.react.containerInitState(),
- CodeGen.plugins.react.containerLifeCycle(),
- CodeGen.plugins.react.containerMethod(),
+ CodeGen.plugins.icejs.reactCommonDeps(),
+ CodeGen.plugins.common.esModule({ fileType: 'jsx' }),
+ CodeGen.plugins.common.styleImport(),
+ CodeGen.plugins.icejs.containerClass(),
+ CodeGen.plugins.icejs.containerInjectContext(),
+ CodeGen.plugins.icejs.containerInjectUtils(),
+ CodeGen.plugins.icejs.containerInjectDataSourceEngine(),
+ CodeGen.plugins.icejs.containerInjectI18n(),
+ CodeGen.plugins.icejs.containerInjectConstants(),
+ CodeGen.plugins.icejs.containerInitState(),
+ CodeGen.plugins.icejs.containerLifeCycle(),
+ CodeGen.plugins.icejs.containerMethod(),
examplePlugin(),
- CodeGen.plugins.react.jsx({
+ CodeGen.plugins.icejs.jsx({
nodeTypeMapping: {
Div: 'div',
Component: 'div',
@@ -657,18 +659,20 @@ export default function createHelloWorldProjectBuilder() {
CodeGen.plugins.style.css(),
],
pages: [
- CodeGen.plugins.react.reactCommonDeps(),
- CodeGen.plugins.common.esmodule({ fileType: 'jsx' }),
- CodeGen.plugins.react.containerClass(),
- CodeGen.plugins.react.containerInjectContext(),
- CodeGen.plugins.react.containerInjectUtils(),
- CodeGen.plugins.react.containerInjectDataSourceEngine(),
- CodeGen.plugins.react.containerInjectI18n(),
- CodeGen.plugins.react.containerInitState(),
- CodeGen.plugins.react.containerLifeCycle(),
- CodeGen.plugins.react.containerMethod(),
+ CodeGen.plugins.icejs.reactCommonDeps(),
+ CodeGen.plugins.common.esModule({ fileType: 'jsx' }),
+ CodeGen.plugins.common.styleImport(),
+ CodeGen.plugins.icejs.containerClass(),
+ CodeGen.plugins.icejs.containerInjectContext(),
+ CodeGen.plugins.icejs.containerInjectUtils(),
+ CodeGen.plugins.icejs.containerInjectDataSourceEngine(),
+ CodeGen.plugins.icejs.containerInjectI18n(),
+ CodeGen.plugins.icejs.containerInjectConstants(),
+ CodeGen.plugins.icejs.containerInitState(),
+ CodeGen.plugins.icejs.containerLifeCycle(),
+ CodeGen.plugins.icejs.containerMethod(),
examplePlugin(),
- CodeGen.plugins.react.jsx({
+ CodeGen.plugins.icejs.jsx({
nodeTypeMapping: {
Div: 'div',
Component: 'div',
@@ -679,13 +683,13 @@ export default function createHelloWorldProjectBuilder() {
CodeGen.plugins.style.css(),
],
router: [
- CodeGen.plugins.common.esmodule(),
+ CodeGen.plugins.common.esModule(),
CodeGen.solutionParts.icejs.plugins.router(),
],
entry: [CodeGen.solutionParts.icejs.plugins.entry()],
constants: [CodeGen.plugins.project.constants()],
utils: [
- CodeGen.plugins.common.esmodule(),
+ CodeGen.plugins.common.esModule(),
CodeGen.plugins.project.utils('react'),
],
i18n: [CodeGen.plugins.project.i18n()],
diff --git a/modules/code-generator/src/const/index.ts b/modules/code-generator/src/const/index.ts
index 103d912db6..24449ca429 100644
--- a/modules/code-generator/src/const/index.ts
+++ b/modules/code-generator/src/const/index.ts
@@ -8,5 +8,26 @@ export const CONTAINER_TYPE = {
export const SUPPORT_SCHEMA_VERSION_LIST = ['0.0.1', '1.0.0'];
+// built-in slot names which have been handled in ProjectBuilder
+export const BUILTIN_SLOT_NAMES = [
+ 'pages',
+ 'components',
+ 'router',
+ 'entry',
+ 'appConfig',
+ 'buildConfig',
+ 'constants',
+ 'utils',
+ 'i18n',
+ 'globalStyle',
+ 'htmlEntry',
+ 'packageJSON',
+ 'demo',
+];
+
+export const isBuiltinSlotName = function (name: string) {
+ return BUILTIN_SLOT_NAMES.includes(name);
+};
+
export * from './file';
export * from './generator';
diff --git a/modules/code-generator/src/generator/ModuleBuilder.ts b/modules/code-generator/src/generator/ModuleBuilder.ts
index f4554ef612..e172f716e5 100644
--- a/modules/code-generator/src/generator/ModuleBuilder.ts
+++ b/modules/code-generator/src/generator/ModuleBuilder.ts
@@ -1,4 +1,4 @@
-import { ProjectSchema, ResultFile, ResultDir } from '@alilc/lowcode-types';
+import { IPublicTypeProjectSchema, ResultFile, ResultDir } from '@alilc/lowcode-types';
import {
BuilderComponentPlugin,
@@ -62,10 +62,9 @@ export function createModuleBuilder(
if (options.postProcessors.length > 0) {
files = files.map((file) => {
- let { content } = file;
- const type = file.ext;
+ let { content, ext: type, name } = file;
options.postProcessors.forEach((processer) => {
- content = processer(content, type);
+ content = processer(content, type, name);
});
return createResultFile(file.name, type, content);
@@ -77,7 +76,7 @@ export function createModuleBuilder(
};
};
- const generateModuleCode = async (schema: ProjectSchema | string): Promise => {
+ const generateModuleCode = async (schema: IPublicTypeProjectSchema | string): Promise => {
// Init
const schemaParser: ISchemaParser = new SchemaParser();
const parseResult: IParseResult = schemaParser.parse(schema);
diff --git a/modules/code-generator/src/generator/ProjectBuilder.ts b/modules/code-generator/src/generator/ProjectBuilder.ts
index 2a1282d6eb..a910b49002 100644
--- a/modules/code-generator/src/generator/ProjectBuilder.ts
+++ b/modules/code-generator/src/generator/ProjectBuilder.ts
@@ -1,4 +1,4 @@
-import { ResultDir, ResultFile, ProjectSchema } from '@alilc/lowcode-types';
+import { ResultDir, ResultFile, IPublicTypeProjectSchema } from '@alilc/lowcode-types';
import {
IModuleBuilder,
@@ -16,6 +16,7 @@ import { createResultDir, addDirectory, addFile } from '../utils/resultHelper';
import { createModuleBuilder } from './ModuleBuilder';
import { ProjectPreProcessor, ProjectPostProcessor, IContextData } from '../types/core';
import { CodeGeneratorError } from '../types/error';
+import { isBuiltinSlotName } from '../const';
interface IModuleInfo {
moduleName?: string;
@@ -24,22 +25,36 @@ interface IModuleInfo {
}
export interface ProjectBuilderInitOptions {
+
/** 项目模板 */
template: IProjectTemplate;
+
/** 项目插件 */
plugins: IProjectPlugins;
+
/** 模块后置处理器 */
postProcessors: PostProcessor[];
+
/** Schema 解析器 */
schemaParser?: ISchemaParser;
+
/** 项目级别的前置处理器 */
projectPreProcessors?: ProjectPreProcessor[];
+
/** 项目级别的后置处理器 */
projectPostProcessors?: ProjectPostProcessor[];
+
/** 是否处于严格模式 */
inStrictMode?: boolean;
+
/** 一些额外的上下文数据 */
extraContextData?: Record;
+
+ /**
+ * Hook which is used to customize original options, we can reorder/add/remove plugins/processors
+ * of the existing solution.
+ */
+ customizeBuilderOptions?(originalOptions: ProjectBuilderInitOptions): ProjectBuilderInitOptions;
}
export class ProjectBuilder implements IProjectBuilder {
@@ -62,21 +77,26 @@ export class ProjectBuilder implements IProjectBuilder {
private projectPostProcessors: ProjectPostProcessor[];
/** 是否处于严格模式 */
- public readonly inStrictMode: boolean;
+ readonly inStrictMode: boolean;
/** 一些额外的上下文数据 */
- public readonly extraContextData: IContextData;
-
- constructor({
- template,
- plugins,
- postProcessors,
- schemaParser = new SchemaParser(),
- projectPreProcessors = [],
- projectPostProcessors = [],
- inStrictMode = false,
- extraContextData = {},
- }: ProjectBuilderInitOptions) {
+ readonly extraContextData: IContextData;
+
+ constructor(builderOptions: ProjectBuilderInitOptions) {
+ let customBuilderOptions = builderOptions;
+ if (typeof builderOptions.customizeBuilderOptions === 'function') {
+ customBuilderOptions = builderOptions.customizeBuilderOptions(builderOptions);
+ }
+ const {
+ template,
+ plugins,
+ postProcessors,
+ schemaParser = new SchemaParser(),
+ projectPreProcessors = [],
+ projectPostProcessors = [],
+ inStrictMode = false,
+ extraContextData = {},
+ } = customBuilderOptions;
this.template = template;
this.plugins = plugins;
this.postProcessors = postProcessors;
@@ -87,34 +107,39 @@ export class ProjectBuilder implements IProjectBuilder {
this.extraContextData = extraContextData;
}
- async generateProject(originalSchema: ProjectSchema | string): Promise {
+ async generateProject(originalSchema: IPublicTypeProjectSchema | string): Promise {
// Init
const { schemaParser } = this;
- const builders = this.createModuleBuilders();
-
- const projectRoot = await this.template.generateTemplate();
- let schema: ProjectSchema =
+ let schema: IPublicTypeProjectSchema =
typeof originalSchema === 'string' ? JSON.parse(originalSchema) : originalSchema;
- // Validate
- if (!schemaParser.validate(schema)) {
- throw new CodeGeneratorError('Schema is invalid');
- }
-
// Parse / Format
-
// Preprocess
for (const preProcessor of this.projectPreProcessors) {
// eslint-disable-next-line no-await-in-loop
schema = await preProcessor(schema);
}
+ // Validate
+ if (!schemaParser.validate(schema)) {
+ throw new CodeGeneratorError('Schema is invalid');
+ }
+
// Collect Deps
// Parse JSExpression
const parseResult: IParseResult = schemaParser.parse(schema);
+
+ const projectRoot = await this.template.generateTemplate(parseResult);
+
let buildResult: IModuleInfo[] = [];
+ const builders = this.createModuleBuilders({
+ extraContextData: {
+ projectRemark: parseResult?.project?.projectRemark,
+ template: this.template,
+ },
+ });
// Generator Code module
// components
// pages
@@ -241,14 +266,25 @@ export class ProjectBuilder implements IProjectBuilder {
});
}
- // TODO: 更多 slots 的处理？？是不是可以考虑把 template 中所有的 slots 都处理下？
+ // demo
+ if (parseResult.project && builders.demo) {
+ const { files } = await builders.demo.generateModule(parseResult.project);
+ buildResult.push({
+ path: this.template.slots.demo.path,
+ files,
+ });
+ }
- // Post Process
+ // handle extra slots
+ await this.generateExtraSlots(builders, parseResult, buildResult);
+ // Post Process
+ const isSingleComponent = parseResult?.project?.projectRemark?.isSingleComponent;
// Combine Modules
buildResult.forEach((moduleInfo) => {
let targetDir = getDirFromRoot(projectRoot, moduleInfo.path);
- if (moduleInfo.moduleName) {
+ // if project only contain single component, skip creation of directory.
+ if (moduleInfo.moduleName && !isSingleComponent) {
const dir = createResultDir(moduleInfo.moduleName);
addDirectory(targetDir, dir);
targetDir = dir;
@@ -260,13 +296,17 @@ export class ProjectBuilder implements IProjectBuilder {
let finalResult = projectRoot;
for (const projectPostProcessor of this.projectPostProcessors) {
// eslint-disable-next-line no-await-in-loop
- finalResult = await projectPostProcessor(finalResult, schema, originalSchema);
+ finalResult = await projectPostProcessor(finalResult, schema, originalSchema, {
+ template: this.template,
+ parseResult,
+ });
}
return finalResult;
}
- private createModuleBuilders(): Record {
+ private createModuleBuilders(extraContextData: Record = {}):
+ Record {
const builders: Record = {};
Object.keys(this.plugins).forEach((pluginName) => {
@@ -279,10 +319,12 @@ export class ProjectBuilder implements IProjectBuilder {
plugins: this.plugins[pluginName],
postProcessors: this.postProcessors,
contextData: {
+ // template: this.template,
inStrictMode: this.inStrictMode,
tolerateEvalErrors: true,
evalErrorsHandler: '',
...this.extraContextData,
+ ...extraContextData,
},
...options,
});
@@ -291,6 +333,22 @@ export class ProjectBuilder implements IProjectBuilder {
return builders;
}
+
+ private async generateExtraSlots(
+ builders: Record,
+ parseResult: IParseResult,
+ buildResult: IModuleInfo[],
+ ) {
+ for (const slotName in this.template.slots) {
+ if (!isBuiltinSlotName(slotName)) {
+ const { files } = await builders[slotName].generateModule(parseResult);
+ buildResult.push({
+ path: this.template.slots[slotName].path,
+ files,
+ });
+ }
+ }
+ }
}
export function createProjectBuilder(initOptions: ProjectBuilderInitOptions): IProjectBuilder {
diff --git a/modules/code-generator/src/index.ts b/modules/code-generator/src/index.ts
index 7cf861e6f8..da9b12d877 100644
--- a/modules/code-generator/src/index.ts
+++ b/modules/code-generator/src/index.ts
@@ -1,6 +1,6 @@
/**
* 低代码引擎的出码模块，负责将编排产出的 Schema 转换成实际可执行的代码。
- * 注意：为了保持 API 的稳定性, 这里所有导出的 API 均要显式命名方式导出
+ * 注意：为了保持 API 的稳定性，这里所有导出的 API 均要显式命名方式导出
* （即用 export { xxx } from 'xx' 的方式，不要直接 export * from 'xxx')
* 而且所有导出的 API 务必在 tests/public 中编写单元测试
*/
@@ -8,7 +8,8 @@ import { createProjectBuilder } from './generator/ProjectBuilder';
import { createModuleBuilder } from './generator/ModuleBuilder';
import { createDiskPublisher } from './publisher/disk';
import { createZipPublisher } from './publisher/zip';
-import createIceJsProjectBuilder, { plugins as reactPlugins } from './solutions/icejs';
+import createIceJsProjectBuilder, { plugins as icejsPlugins } from './solutions/icejs';
+import createIceJs3ProjectBuilder, { plugins as icejs3Plugins } from './solutions/icejs3';
import createRaxAppProjectBuilder, { plugins as raxPlugins } from './solutions/rax-app';
// 引入说明
@@ -18,6 +19,7 @@ import { COMMON_CHUNK_NAME, CLASS_DEFINE_CHUNK_NAME, DEFAULT_LINK_AFTER } from '
// 引入通用插件组
import esmodule from './plugins/common/esmodule';
import requireUtils from './plugins/common/requireUtils';
+import styleImport from './plugins/common/styleImport';
import css from './plugins/component/style/css';
import constants from './plugins/project/constants';
@@ -32,6 +34,7 @@ import * as CONSTANTS from './const';
// 引入内置解决方案模块
import icejs from './plugins/project/framework/icejs';
+import icejs3 from './plugins/project/framework/icejs3';
import rax from './plugins/project/framework/rax';
export default {
@@ -39,10 +42,12 @@ export default {
createModuleBuilder,
solutions: {
icejs: createIceJsProjectBuilder,
+ icejs3: createIceJs3ProjectBuilder,
rax: createRaxAppProjectBuilder,
},
solutionParts: {
icejs,
+ icejs3,
rax,
},
publishers: {
@@ -51,6 +56,7 @@ export default {
},
plugins: {
common: {
+
/**
* 处理 ES Module
* @deprecated please use esModule
@@ -58,12 +64,7 @@ export default {
esmodule,
esModule: esmodule,
requireUtils,
- },
- react: {
- ...reactPlugins,
- },
- rax: {
- ...raxPlugins,
+ styleImport,
},
style: {
css,
@@ -73,6 +74,22 @@ export default {
i18n,
utils,
},
+ icejs: {
+ ...icejsPlugins,
+ },
+ icejs3: {
+ ...icejs3Plugins,
+ },
+ rax: {
+ ...raxPlugins,
+ },
+
+ /**
+ * @deprecated please use icejs
+ */
+ react: {
+ ...icejsPlugins,
+ },
},
postprocessor: {
prettier,
diff --git a/modules/code-generator/src/parser/SchemaParser.ts b/modules/code-generator/src/parser/SchemaParser.ts
index 2e526d88bc..b4f7424ce5 100644
--- a/modules/code-generator/src/parser/SchemaParser.ts
+++ b/modules/code-generator/src/parser/SchemaParser.ts
@@ -4,14 +4,14 @@
*/
import changeCase from 'change-case';
import {
- UtilItem,
- NodeDataType,
- NodeSchema,
- ContainerSchema,
- ProjectSchema,
- PropsMap,
- NodeData,
- NpmInfo,
+ IPublicTypeUtilItem,
+ IPublicTypeNodeDataType,
+ IPublicTypeNodeSchema,
+ IPublicTypeContainerSchema,
+ IPublicTypeProjectSchema,
+ IPublicTypePropsMap,
+ IPublicTypeNodeData,
+ IPublicTypeNpmInfo,
} from '@alilc/lowcode-types';
import {
IPageMeta,
@@ -32,10 +32,11 @@ import {
import { SUPPORT_SCHEMA_VERSION_LIST } from '../const';
import { getErrorMessage } from '../utils/errors';
-import { handleSubNodes } from '../utils/schema';
+import { handleSubNodes, isValidContainerType, ContainerType } from '../utils/schema';
import { uniqueArray } from '../utils/common';
import { componentAnalyzer } from '../analyzer/componentAnalyzer';
import { ensureValidClassName } from '../utils/validate';
+import type { ProjectRemark } from '../types/intermediate';
const defaultContainer: IContainerInfo = {
containerType: 'Component',
@@ -71,18 +72,18 @@ function getRootComponentName(typeName: string, maps: Record, depName: string) {
+ const dep = internalDeps[depName];
+ return (dep && dep.type !== InternalDependencyType.PAGE) ? dep : null;
+}
+
export class SchemaParser implements ISchemaParser {
- validate(schema: ProjectSchema): boolean {
+ validate(schema: IPublicTypeProjectSchema): boolean {
if (SUPPORT_SCHEMA_VERSION_LIST.indexOf(schema.version) < 0) {
throw new CompatibilityError(`Not support schema with version [${schema.version}]`);
}
@@ -114,7 +120,7 @@ export class SchemaParser implements ISchemaParser {
return true;
}
- parse(schemaSrc: ProjectSchema | string): IParseResult {
+ parse(schemaSrc: IPublicTypeProjectSchema | string): IParseResult {
// TODO: collect utils depends in JSExpression
const compDeps: Record = {};
const internalDeps: Record = {};
@@ -139,9 +145,9 @@ export class SchemaParser implements ISchemaParser {
let containers: IContainerInfo[];
// Test if this is a lowcode component without container
if (schema.componentsTree.length > 0) {
- const firstRoot: ContainerSchema = schema.componentsTree[0] as ContainerSchema;
+ const firstRoot: IPublicTypeContainerSchema = schema.componentsTree[0] as IPublicTypeContainerSchema;
- if (!('fileName' in firstRoot) || !firstRoot.fileName) {
+ if (!firstRoot.fileName && !isValidContainerType(firstRoot)) {
// 整个 schema 描述一个容器，且无根节点定义
const container: IContainerInfo = {
...firstRoot,
@@ -149,18 +155,19 @@ export class SchemaParser implements ISchemaParser {
props: firstRoot.props || defaultContainer.props,
css: firstRoot.css || defaultContainer.css,
moduleName: (firstRoot as IContainerInfo).moduleName || defaultContainer.moduleName,
- children: schema.componentsTree as NodeSchema[],
+ children: schema.componentsTree as IPublicTypeNodeSchema[],
};
containers = [container];
} else {
// 普通带 1 到多个容器的 schema
containers = schema.componentsTree.map((n) => {
- const subRoot = n as ContainerSchema;
+ const subRoot = n as IPublicTypeContainerSchema;
const container: IContainerInfo = {
...subRoot,
componentName: getRootComponentName(subRoot.componentName, compDeps),
containerType: subRoot.componentName,
- moduleName: ensureValidClassName(changeCase.pascalCase(subRoot.fileName)),
+ moduleName: ensureValidClassName(subRoot.componentName === ContainerType.Component ?
+ subRoot.fileName : changeCase.pascalCase(subRoot.fileName)),
};
return container;
});
@@ -172,7 +179,7 @@ export class SchemaParser implements ISchemaParser {
// 分析引用能力的依赖
containers = containers.map((con) => ({
...con,
- analyzeResult: componentAnalyzer(con as ContainerSchema),
+ analyzeResult: componentAnalyzer(con as IPublicTypeContainerSchema),
}));
// 建立所有容器的内部依赖索引
@@ -210,7 +217,7 @@ export class SchemaParser implements ISchemaParser {
handleSubNodes(
container.children,
{
- node: (i: NodeSchema) => processChildren(i),
+ node: (i: IPublicTypeNodeSchema) => processChildren(i),
},
{
rerun: true,
@@ -219,12 +226,11 @@ export class SchemaParser implements ISchemaParser {
}
});
- // 分析容器内部组件依赖
containers.forEach((container) => {
const depNames = this.getComponentNames(container);
// eslint-disable-next-line no-param-reassign
container.deps = uniqueArray(depNames, (i: string) => i)
- .map((depName) => internalDeps[depName] || compDeps[depName])
+ .map((depName) => getInternalDep(internalDeps, depName) || compDeps[depName])
.filter(Boolean);
// container.deps = Object.keys(compDeps).map((depName) => compDeps[depName]);
});
@@ -254,13 +260,12 @@ export class SchemaParser implements ISchemaParser {
.filter((dep) => !!dep);
// 分析 Utils 依赖
- let utils: UtilItem[];
+ let utils: IPublicTypeUtilItem[];
if (schema.utils) {
utils = schema.utils;
utilsDeps = schema.utils
.filter(
- (u): u is { name: string; type: 'npm' | 'tnpm'; content: NpmInfo } =>
- u.type !== 'function',
+ (u): u is { name: string; type: 'npm' | 'tnpm'; content: IPublicTypeNpmInfo } => u.type !== 'function',
)
.map(
(u): IExternalDependency => ({
@@ -320,15 +325,22 @@ export class SchemaParser implements ISchemaParser {
utilsDeps,
packages: npms || [],
dataSourcesTypes: this.collectDataSourcesTypes(schema),
+ projectRemark: this.getProjectRemark(containers),
},
};
}
- getComponentNames(children: NodeDataType): string[] {
+ getProjectRemark(containers: IContainerInfo[]): ProjectRemark {
+ return {
+ isSingleComponent: containers.length === 1 && containers[0].containerType === 'Component',
+ };
+ }
+
+ getComponentNames(children: IPublicTypeNodeDataType): string[] {
return handleSubNodes(
children,
{
- node: (i: NodeSchema) => i.componentName,
+ node: (i: IPublicTypeNodeSchema) => i.componentName,
},
{
rerun: true,
@@ -336,8 +348,8 @@ export class SchemaParser implements ISchemaParser {
);
}
- decodeSchema(schemaSrc: string | ProjectSchema): ProjectSchema {
- let schema: ProjectSchema;
+ decodeSchema(schemaSrc: string | IPublicTypeProjectSchema): IPublicTypeProjectSchema {
+ let schema: IPublicTypeProjectSchema;
if (typeof schemaSrc === 'string') {
try {
schema = JSON.parse(schemaSrc);
@@ -352,7 +364,7 @@ export class SchemaParser implements ISchemaParser {
return schema;
}
- private collectDataSourcesTypes(schema: ProjectSchema): string[] {
+ private collectDataSourcesTypes(schema: IPublicTypeProjectSchema): string[] {
const dataSourcesTypes = new Set();
// 数据源的默认类型为 fetch
diff --git a/modules/code-generator/src/plugins/common/esmodule.ts b/modules/code-generator/src/plugins/common/esmodule.ts
index 04dfd1ce21..53f3f9418b 100644
--- a/modules/code-generator/src/plugins/common/esmodule.ts
+++ b/modules/code-generator/src/plugins/common/esmodule.ts
@@ -16,7 +16,7 @@ import {
IWithDependency,
} from '../../types';
-import { isValidIdentifier, isValidComponentName } from '../../utils/validate';
+import { isValidIdentifier } from '../../utils/validate';
// TODO: main 这个信息到底怎么用，是不是外部包不需要使用？
const DEP_MAIN_BLOCKLIST = ['lib', 'lib/index', 'es', 'es/index', 'main'];
@@ -261,7 +261,7 @@ function buildPackageImport(
if (!isValidIdentifier(name)) {
throw new CodeGeneratorError(`Invalid Identifier [${name}]`);
}
- if (info.nodeIdentifier && !isValidComponentName(info.nodeIdentifier)) {
+ if (info.nodeIdentifier && !isValidIdentifier(info.nodeIdentifier)) {
throw new CodeGeneratorError(`Invalid Identifier [${info.nodeIdentifier}]`);
}
});
@@ -443,6 +443,7 @@ function buildPackageImport(
export interface PluginConfig {
fileType?: string; // 导出的文件类型
useAliasName?: boolean; // 是否使用 componentName 重命名组件 identifier
+ filter?: (deps: IDependency[]) => IDependency[]; // 支持过滤能力
}
const pluginFactory: BuilderComponentPluginFactory = (config?: PluginConfig) => {
@@ -460,7 +461,8 @@ const pluginFactory: BuilderComponentPluginFactory = (config?: Plu
const ir = next.ir as IWithDependency;
if (ir && ir.deps && ir.deps.length > 0) {
- const packs = groupDepsByPack(ir.deps);
+ const deps = cfg.filter ? cfg.filter(ir.deps) : ir.deps;
+ const packs = groupDepsByPack(deps);
Object.keys(packs).forEach((pkg) => {
const chunks = buildPackageImport(pkg, packs[pkg], cfg.fileType, cfg.useAliasName);
diff --git a/modules/code-generator/src/plugins/common/styleImport.ts b/modules/code-generator/src/plugins/common/styleImport.ts
new file mode 100644
index 0000000000..23e1293025
--- /dev/null
+++ b/modules/code-generator/src/plugins/common/styleImport.ts
@@ -0,0 +1,64 @@
+import changeCase from 'change-case';
+import {
+ FileType,
+ BuilderComponentPluginFactory,
+ BuilderComponentPlugin,
+ ICodeStruct,
+ IWithDependency,
+ ChunkType,
+} from '../../types';
+
+import { COMMON_CHUNK_NAME } from '../../const/generator';
+
+const pluginFactory: BuilderComponentPluginFactory = () => {
+ const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
+ const next: ICodeStruct = {
+ ...pre,
+ };
+
+ const ir = next.ir as IWithDependency;
+ const { chunks } = next;
+
+ if (ir && ir.deps && ir.deps.length > 0) {
+ let lowcodeMaterialsStyleAdded = false;
+ let fusionUIStyleAdded = false;
+ let nextStyleAddedMap: Record = {};
+ ir.deps.forEach((dep: any) => {
+ if (dep.package === '@alifd/next' && !nextStyleAddedMap[dep.exportName]) {
+ chunks.push({
+ type: ChunkType.STRING,
+ fileType: FileType.JSX,
+ name: COMMON_CHUNK_NAME.InternalDepsImport,
+ content: `import '@alifd/next/lib/${changeCase.paramCase(dep.exportName)}/style';`,
+ linkAfter: [COMMON_CHUNK_NAME.ExternalDepsImport],
+ });
+ nextStyleAddedMap[dep.exportName] = true;
+ } else if (dep.package === '@alilc/lowcode-materials' && !lowcodeMaterialsStyleAdded) {
+ chunks.push({
+ type: ChunkType.STRING,
+ fileType: FileType.JSX,
+ name: COMMON_CHUNK_NAME.InternalDepsImport,
+ content: 'import \'@alilc/lowcode-materials/lib/style\';',
+ linkAfter: [COMMON_CHUNK_NAME.ExternalDepsImport],
+ });
+ lowcodeMaterialsStyleAdded = true;
+ } else if (dep.package === '@alifd/fusion-ui' && !fusionUIStyleAdded) {
+ chunks.push({
+ type: ChunkType.STRING,
+ fileType: FileType.JSX,
+ name: COMMON_CHUNK_NAME.InternalDepsImport,
+ content: 'import \'@alifd/fusion-ui/lib/style\';',
+ linkAfter: [COMMON_CHUNK_NAME.ExternalDepsImport],
+ });
+ fusionUIStyleAdded = true;
+ }
+ });
+ }
+
+ return next;
+ };
+
+ return plugin;
+};
+
+export default pluginFactory;
diff --git a/modules/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts b/modules/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
index 446b1d3f89..cb7a9e8c36 100644
--- a/modules/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
+++ b/modules/code-generator/src/plugins/component/rax/containerInjectDataSourceEngine.ts
@@ -1,8 +1,8 @@
/* eslint-disable @typescript-eslint/indent */
import {
- CompositeValue,
- JSExpression,
+ IPublicTypeCompositeValue,
+ IPublicTypeJSExpression,
InterpretDataSourceConfig,
isJSExpression,
isJSFunction,
@@ -56,7 +56,7 @@ const pluginFactory: BuilderComponentPluginFactory = (config?) =>
(dataSourceConfig && dataSourceConfig.list) || [];
const dataSourceEngineOptions = { runtimeConfig: true };
if (dataSourceItems.length > 0) {
- const requestHandlersMap: Record = {};
+ const requestHandlersMap: Record = {};
dataSourceItems.forEach((ds) => {
const dsType = ds.type || 'fetch';
@@ -178,7 +178,7 @@ _defineDataSourceConfig() {
export default pluginFactory;
-function wrapAsFunction(value: CompositeValue, scope: IScope): CompositeValue {
+function wrapAsFunction(value: IPublicTypeCompositeValue, scope: IScope): IPublicTypeCompositeValue {
if (isJSExpression(value) || isJSFunction(value)) {
return {
type: 'JSExpression',
diff --git a/modules/code-generator/src/plugins/component/rax/containerLifeCycle.ts b/modules/code-generator/src/plugins/component/rax/containerLifeCycle.ts
index f928c3995e..bbee6367f2 100644
--- a/modules/code-generator/src/plugins/component/rax/containerLifeCycle.ts
+++ b/modules/code-generator/src/plugins/component/rax/containerLifeCycle.ts
@@ -13,6 +13,7 @@ import {
IContainerInfo,
} from '../../../types';
import { debug } from '../../../utils/debug';
+import { isJSExpressionFn } from '../../../utils/common';
export interface PluginConfig {
fileType: string;
@@ -49,6 +50,7 @@ const pluginFactory: BuilderComponentPluginFactory = (config?) =>
// 过滤掉非法数据（有些场景下会误传入空字符串或 null)
if (
!isJSFunction(lifeCycles[lifeCycleName]) &&
+ !isJSExpressionFn(lifeCycles[lifeCycleName]) &&
!isJSExpression(lifeCycles[lifeCycleName])
) {
return;
diff --git a/modules/code-generator/src/plugins/component/rax/jsx.ts b/modules/code-generator/src/plugins/component/rax/jsx.ts
index ebc72104f0..ddae619cd6 100644
--- a/modules/code-generator/src/plugins/component/rax/jsx.ts
+++ b/modules/code-generator/src/plugins/component/rax/jsx.ts
@@ -1,8 +1,8 @@
import {
- NodeSchema,
- JSExpression,
- NpmInfo,
- CompositeValue,
+ IPublicTypeNodeSchema,
+ IPublicTypeJSExpression,
+ IPublicTypeNpmInfo,
+ IPublicTypeCompositeValue,
isJSExpression,
} from '@alilc/lowcode-types';
@@ -75,8 +75,7 @@ const pluginFactory: BuilderComponentPluginFactory = (config?) =>
// 注意：这里其实隐含了一个假设：schema 中的 componentName 应该是一个有效的 JS 标识符，而且是大写字母打头的
// FIXME: 为了快速修复临时加的逻辑，需要用 pre-process 的方式替代处理。
- const mapComponentNameToAliasOrKeepIt = (componentName: string) =>
- componentsNameAliasMap.get(componentName) || componentName;
+ const mapComponentNameToAliasOrKeepIt = (componentName: string) => componentsNameAliasMap.get(componentName) || componentName;
// 然后过滤掉所有的别名 chunks
next.chunks = next.chunks.filter((chunk) => !isImportAliasDefineChunk(chunk));
@@ -86,7 +85,7 @@ const pluginFactory: BuilderComponentPluginFactory = (config?) =>
// 2. 小程序出码的时候，很容易出现 Uncaught TypeError: Cannot read property 'avatar' of undefined 这样的异常(如下图的 50 行) -- 因为若直接出码，Rax 构建到小程序的时候会立即计算所有在视图中用到的变量
// 3. 通过 this.xxx 能拿到的东西太多了，而且自定义的 methods 可能会无意间破坏 Rax 框架或小程序框架在页面 this 上的东东
const customHandlers: HandlerSet = {
- expression(input: JSExpression, scope: IScope) {
+ expression(input: IPublicTypeJSExpression, scope: IScope) {
return transformJsExpr(generateExpression(input, scope), scope, {
dontWrapEval: !tolerateEvalErrors,
});
@@ -147,7 +146,7 @@ const pluginFactory: BuilderComponentPluginFactory = (config?) =>
function __$$eval(expr) {
try {
return expr();
- } catch (error) {
+ } catch (error) {
${evalErrorsHandler}
}
}
@@ -171,7 +170,7 @@ const pluginFactory: BuilderComponentPluginFactory = (config?) =>
return next;
function generateRaxLoopCtrl(
- nodeItem: NodeSchema,
+ nodeItem: IPublicTypeNodeSchema,
scope: IScope,
config?: NodeGeneratorConfig,
next?: NodePlugin,
@@ -218,7 +217,7 @@ function isImportAliasDefineChunk(chunk: ICodeChunk): chunk is ICodeChunk & {
ext: {
aliasName: string;
originalName: string;
- dependency: NpmInfo;
+ dependency: IPublicTypeNpmInfo;
};
} {
return (
@@ -226,13 +225,13 @@ function isImportAliasDefineChunk(chunk: ICodeChunk): chunk is ICodeChunk & {
!!chunk.ext &&
typeof chunk.ext.aliasName === 'string' &&
typeof chunk.ext.originalName === 'string' &&
- !!(chunk.ext.dependency as NpmInfo | null)?.componentName
+ !!(chunk.ext.dependency as IPublicTypeNpmInfo | null)?.componentName
);
}
function generateNodeAttrForRax(
this: { cfg: PluginConfig },
- attrData: { attrName: string; attrValue: CompositeValue },
+ attrData: { attrName: string; attrValue: IPublicTypeCompositeValue },
scope: IScope,
config?: NodeGeneratorConfig,
next?: AttrPlugin,
@@ -257,7 +256,7 @@ function generateNodeAttrForRax(
function generateEventHandlerAttrForRax(
attrName: string,
- attrValue: CompositeValue,
+ attrValue: IPublicTypeCompositeValue,
scope: IScope,
config?: NodeGeneratorConfig,
): CodePiece[] {
diff --git a/modules/code-generator/src/plugins/component/react/containerClass.ts b/modules/code-generator/src/plugins/component/react/containerClass.ts
index 0758c893e2..eab6cbebee 100644
--- a/modules/code-generator/src/plugins/component/react/containerClass.ts
+++ b/modules/code-generator/src/plugins/component/react/containerClass.ts
@@ -26,7 +26,7 @@ const pluginFactory: BuilderComponentPluginFactory = () => {
// 将模块名转换成 PascalCase 的格式，并添加特定后缀，防止命名冲突
const componentClassName = ensureValidClassName(
- `${changeCase.pascalCase(ir.moduleName)}$$Page`,
+ `${changeCase.pascalCase(ir.moduleName)}$$${ir.containerType}`,
);
next.chunks.push({
@@ -43,6 +43,18 @@ const pluginFactory: BuilderComponentPluginFactory = () => {
],
});
+ if (ir.containerType === 'Component') {
+ next.chunks.push({
+ type: ChunkType.STRING,
+ fileType: FileType.JSX,
+ name: CLASS_DEFINE_CHUNK_NAME.InsVar,
+ content: `static displayName = '${ir.moduleName}';`,
+ linkAfter: [
+ CLASS_DEFINE_CHUNK_NAME.Start,
+ ],
+ });
+ }
+
next.chunks.push({
type: ChunkType.STRING,
fileType: FileType.JSX,
diff --git a/modules/code-generator/src/plugins/component/react/containerInitState.ts b/modules/code-generator/src/plugins/component/react/containerInitState.ts
index 5f246e1156..d1dd0d1ddf 100644
--- a/modules/code-generator/src/plugins/component/react/containerInitState.ts
+++ b/modules/code-generator/src/plugins/component/react/containerInitState.ts
@@ -13,12 +13,12 @@ import {
} from '../../../types';
export interface PluginConfig {
- fileType: string;
+ fileType?: string;
implementType: 'inConstructor' | 'insMember' | 'hooks';
}
const pluginFactory: BuilderComponentPluginFactory = (config?) => {
- const cfg: PluginConfig = {
+ const cfg: PluginConfig & { fileType: string } = {
fileType: FileType.JSX,
implementType: 'inConstructor',
...config,
diff --git a/modules/code-generator/src/plugins/component/react/containerInjectDataSourceEngine.ts b/modules/code-generator/src/plugins/component/react/containerInjectDataSourceEngine.ts
index 20302dea99..c4385017b8 100644
--- a/modules/code-generator/src/plugins/component/react/containerInjectDataSourceEngine.ts
+++ b/modules/code-generator/src/plugins/component/react/containerInjectDataSourceEngine.ts
@@ -1,8 +1,8 @@
/* eslint-disable @typescript-eslint/indent */
import {
- CompositeValue,
- JSExpression,
+ IPublicTypeCompositeValue,
+ IPublicTypeJSExpression,
InterpretDataSourceConfig,
isJSExpression,
isJSFunction,
@@ -27,8 +27,9 @@ import {
import { generateCompositeType } from '../../../utils/compositeType';
import { parseExpressionConvertThis2Context } from '../../../utils/expressionParser';
-import { isContainerSchema } from '../../../utils/schema';
+import { isValidContainerType } from '../../../utils/schema';
import { REACT_CHUNK_NAME } from './const';
+import { isJSExpressionFn } from '../../../utils/common';
export interface PluginConfig {
fileType?: string;
@@ -37,6 +38,7 @@ export interface PluginConfig {
* 数据源配置
*/
datasourceConfig?: {
+
/** 数据源引擎的版本 */
engineVersion?: string;
@@ -67,12 +69,12 @@ const pluginFactory: BuilderComponentPluginFactory = (config?) =>
};
const scope = Scope.createRootScope();
- const dataSourceConfig = isContainerSchema(pre.ir) ? pre.ir.dataSource : null;
+ const dataSourceConfig = isValidContainerType(pre.ir) ? pre.ir.dataSource : null;
const dataSourceItems: InterpretDataSourceConfig[] =
(dataSourceConfig && dataSourceConfig.list) || [];
const dataSourceEngineOptions = { runtimeConfig: true };
if (dataSourceItems.length > 0) {
- const requestHandlersMap: Record = {};
+ const requestHandlersMap: Record = {};
dataSourceItems.forEach((ds) => {
const dsType = ds.type || 'fetch';
@@ -187,16 +189,16 @@ const pluginFactory: BuilderComponentPluginFactory = (config?) =>
export default pluginFactory;
-function wrapAsFunction(value: CompositeValue, scope: IScope): CompositeValue {
- if (isJSExpression(value) || isJSFunction(value)) {
+function wrapAsFunction(value: IPublicTypeCompositeValue, scope: IScope): IPublicTypeCompositeValue {
+ if (isJSExpression(value) || isJSFunction(value) || isJSExpressionFn(value)) {
return {
type: 'JSExpression',
- value: `function(){ return ((${value.value}))}`,
+ value: `function(){ return ((${value.value}))}.bind(this)`,
};
}
return {
type: 'JSExpression',
- value: `function(){return((${generateCompositeType(value, scope)}))}`,
+ value: `function(){return((${generateCompositeType(value, scope)}))}.bind(this)`,
};
}
diff --git a/modules/code-generator/src/plugins/component/react/containerInjectI18n.ts b/modules/code-generator/src/plugins/component/react/containerInjectI18n.ts
index da04029c00..aff42af15f 100644
--- a/modules/code-generator/src/plugins/component/react/containerInjectI18n.ts
+++ b/modules/code-generator/src/plugins/component/react/containerInjectI18n.ts
@@ -11,6 +11,7 @@ import {
FileType,
ICodeStruct,
} from '../../../types';
+import { getSlotRelativePath } from '../../../utils/pathHelper';
export interface PluginConfig {
fileType: string;
@@ -31,9 +32,8 @@ const pluginFactory: BuilderComponentPluginFactory = (config?) =>
type: ChunkType.STRING,
fileType: cfg.fileType,
name: COMMON_CHUNK_NAME.InternalDepsImport,
- // TODO: 下面这个路径有没有更好的方式来获取？而非写死
content: `
- import * as __$$i18n from '../../i18n';
+ import * as __$$i18n from '${getSlotRelativePath({ contextData: next.contextData, from: 'components', to: 'i18n' })}';
`,
linkAfter: [COMMON_CHUNK_NAME.ExternalDepsImport],
});
diff --git a/modules/code-generator/src/plugins/component/react/containerInjectUtils.ts b/modules/code-generator/src/plugins/component/react/containerInjectUtils.ts
index 6c614f143a..d9eb14f769 100644
--- a/modules/code-generator/src/plugins/component/react/containerInjectUtils.ts
+++ b/modules/code-generator/src/plugins/component/react/containerInjectUtils.ts
@@ -12,13 +12,17 @@ import {
ICodeStruct,
IContainerInfo,
} from '../../../types';
+import { getSlotRelativePath } from '../../../utils/pathHelper';
export interface PluginConfig {
- fileType: string;
+ fileType?: string;
+
+ /** prefer using class property to define utils */
+ preferClassProperty?: boolean;
}
const pluginFactory: BuilderComponentPluginFactory = (config?) => {
- const cfg: PluginConfig = {
+ const cfg: PluginConfig & { fileType: string } = {
fileType: FileType.JSX,
...config,
};
@@ -36,20 +40,31 @@ const pluginFactory: BuilderComponentPluginFactory = (config?) =>
type: ChunkType.STRING,
fileType: cfg.fileType,
name: COMMON_CHUNK_NAME.InternalDepsImport,
- // TODO: 下面这个路径有没有更好的方式来获取？而非写死
content: `
- import utils${useRef ? ', { RefsManager }' : ''} from '../../utils';
+ import utils${useRef ? ', { RefsManager }' : ''} from '${getSlotRelativePath({ contextData: next.contextData, from: 'components', to: 'utils' })}';
`,
linkAfter: [COMMON_CHUNK_NAME.ExternalDepsImport],
});
- next.chunks.push({
- type: ChunkType.STRING,
- fileType: cfg.fileType,
- name: CLASS_DEFINE_CHUNK_NAME.ConstructorContent,
- content: 'this.utils = utils;',
- linkAfter: [CLASS_DEFINE_CHUNK_NAME.ConstructorStart],
- });
+ if (cfg.preferClassProperty) {
+ // mode: class property
+ next.chunks.push({
+ type: ChunkType.STRING,
+ fileType: cfg.fileType,
+ name: CLASS_DEFINE_CHUNK_NAME.InsVar,
+ content: 'utils = utils;',
+ linkAfter: [...DEFAULT_LINK_AFTER[CLASS_DEFINE_CHUNK_NAME.InsVar]],
+ });
+ } else {
+ // mode: assign in constructor
+ next.chunks.push({
+ type: ChunkType.STRING,
+ fileType: cfg.fileType,
+ name: CLASS_DEFINE_CHUNK_NAME.ConstructorContent,
+ content: 'this.utils = utils;',
+ linkAfter: [CLASS_DEFINE_CHUNK_NAME.ConstructorStart],
+ });
+ }
if (useRef) {
next.chunks.push({
@@ -89,7 +104,7 @@ const pluginFactory: BuilderComponentPluginFactory = (config?) =>
type: ChunkType.STRING,
fileType: cfg.fileType,
name: CLASS_DEFINE_CHUNK_NAME.InsMethod,
- content: ` $ = () => null; `,
+ content: ' $ = () => null; ',
linkAfter: [...DEFAULT_LINK_AFTER[CLASS_DEFINE_CHUNK_NAME.InsMethod]],
});
@@ -97,7 +112,7 @@ const pluginFactory: BuilderComponentPluginFactory = (config?) =>
type: ChunkType.STRING,
fileType: cfg.fileType,
name: CLASS_DEFINE_CHUNK_NAME.InsMethod,
- content: ` $$ = () => []; `,
+ content: ' $$ = () => []; ',
linkAfter: [...DEFAULT_LINK_AFTER[CLASS_DEFINE_CHUNK_NAME.InsMethod]],
});
}
diff --git a/modules/code-generator/src/plugins/component/react/containerLifeCycle.ts b/modules/code-generator/src/plugins/component/react/containerLifeCycle.ts
index 8caa9b105a..5f7d6d22a7 100644
--- a/modules/code-generator/src/plugins/component/react/containerLifeCycle.ts
+++ b/modules/code-generator/src/plugins/component/react/containerLifeCycle.ts
@@ -13,15 +13,17 @@ import {
IContainerInfo,
} from '../../../types';
import { isJSFunction, isJSExpression } from '@alilc/lowcode-types';
+import { isJSExpressionFn } from '../../../utils/common';
export interface PluginConfig {
- fileType: string;
- exportNameMapping: Record;
- normalizeNameMapping: Record;
+ fileType?: string;
+ exportNameMapping?: Record;
+ normalizeNameMapping?: Record;
+ exclude?: string[];
}
const pluginFactory: BuilderComponentPluginFactory = (config?) => {
- const cfg: PluginConfig = {
+ const cfg = {
fileType: FileType.JSX,
exportNameMapping: {},
normalizeNameMapping: {},
@@ -41,6 +43,7 @@ const pluginFactory: BuilderComponentPluginFactory = (config?) =>
// 过滤掉非法数据（有些场景下会误传入空字符串或 null)
if (
!isJSFunction(lifeCycles[lifeCycleName]) &&
+ !isJSExpressionFn(lifeCycles[lifeCycleName]) &&
!isJSExpression(lifeCycles[lifeCycleName])
) {
return null;
@@ -54,6 +57,10 @@ const pluginFactory: BuilderComponentPluginFactory = (config?) =>
normalizeName = cfg.normalizeNameMapping[lifeCycleName] || lifeCycleName;
}
+ if (cfg?.exclude?.includes(normalizeName)) {
+ return null;
+ }
+
const exportName = cfg.exportNameMapping[lifeCycleName] || lifeCycleName;
if (normalizeName === 'constructor') {
return {
@@ -95,7 +102,7 @@ const pluginFactory: BuilderComponentPluginFactory = (config?) =>
}),
linkAfter: [...DEFAULT_LINK_AFTER[CLASS_DEFINE_CHUNK_NAME.InsMethod]],
};
- });
+ }).filter((i) => !!i);
next.chunks.push(...chunks.filter((x): x is ICodeChunk => x !== null));
}
diff --git a/modules/code-generator/src/plugins/component/react/jsx.ts b/modules/code-generator/src/plugins/component/react/jsx.ts
index 445dce7a5f..588b356ad6 100644
--- a/modules/code-generator/src/plugins/component/react/jsx.ts
+++ b/modules/code-generator/src/plugins/component/react/jsx.ts
@@ -16,7 +16,7 @@ import { COMMON_CHUNK_NAME } from '../../../const/generator';
import { createReactNodeGenerator } from '../../../utils/nodeToJSX';
import { Scope } from '../../../utils/Scope';
-import { JSExpression } from '@alilc/lowcode-types';
+import { IPublicTypeJSExpression } from '@alilc/lowcode-types';
import { generateExpression } from '../../../utils/jsExpression';
import { transformJsExpr } from '../../../core/jsx/handlers/transformJsExpression';
import { transformThis2Context } from '../../../core/jsx/handlers/transformThis2Context';
@@ -47,7 +47,7 @@ const pluginFactory: BuilderComponentPluginFactory = (config?) =>
// 这里会将内部的一些子上下文的访问(this.xxx)转换为 __$$context.xxx 的形式
// 与 Rax 所不同的是，这里不会将最顶层的 this 转换掉
const customHandlers: HandlerSet = {
- expression(input: JSExpression, scope: IScope, config) {
+ expression(input: IPublicTypeJSExpression, scope: IScope, config) {
return transformJsExpr(generateExpression(input, scope), scope, {
dontWrapEval: !(config?.tolerateEvalErrors ?? tolerateEvalErrors),
dontTransformThis2ContextAtRootScope: true,
@@ -58,7 +58,7 @@ const pluginFactory: BuilderComponentPluginFactory = (config?) =>
generateCompositeType(
{
type: 'JSFunction',
- value: input.value || 'null',
+ value: input.value || 'function () {}',
},
Scope.createRootScope(),
),
@@ -120,7 +120,7 @@ const pluginFactory: BuilderComponentPluginFactory = (config?) =>
function __$$eval(expr) {
try {
return expr();
- } catch (error) {
+ } catch (error) {
${evalErrorsHandler}
}
}
diff --git a/modules/code-generator/src/plugins/project/framework/icejs3/index.ts b/modules/code-generator/src/plugins/project/framework/icejs3/index.ts
new file mode 100644
index 0000000000..37fa7a9e39
--- /dev/null
+++ b/modules/code-generator/src/plugins/project/framework/icejs3/index.ts
@@ -0,0 +1,17 @@
+import template from './template';
+import globalStyle from './plugins/globalStyle';
+import packageJSON from './plugins/packageJSON';
+import layout from './plugins/layout';
+import appConfig from './plugins/appConfig';
+import buildConfig from './plugins/buildConfig';
+
+export default {
+ template,
+ plugins: {
+ appConfig,
+ buildConfig,
+ globalStyle,
+ packageJSON,
+ layout,
+ },
+};
diff --git a/modules/code-generator/src/plugins/project/framework/icejs3/plugins/appConfig.ts b/modules/code-generator/src/plugins/project/framework/icejs3/plugins/appConfig.ts
new file mode 100644
index 0000000000..6ec5384a5d
--- /dev/null
+++ b/modules/code-generator/src/plugins/project/framework/icejs3/plugins/appConfig.ts
@@ -0,0 +1,50 @@
+import {
+ BuilderComponentPlugin,
+ BuilderComponentPluginFactory,
+ ChunkType,
+ FileType,
+ ICodeStruct,
+} from '../../../../../types';
+import { COMMON_CHUNK_NAME } from '../../../../../const/generator';
+
+export interface AppConfigPluginConfig {
+
+}
+
+function getContent() {
+ return `import { defineAppConfig } from 'ice';
+
+// App config, see https://v3.ice.work/docs/guide/basic/app
+export default defineAppConfig(() => ({
+ // Set your configs here.
+ app: {
+ rootId: 'App',
+ },
+ router: {
+ type: 'browser',
+ basename: '/',
+ },
+}));`;
+}
+
+const pluginFactory: BuilderComponentPluginFactory = () => {
+ const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
+ const next: ICodeStruct = {
+ ...pre,
+ };
+
+ next.chunks.push({
+ type: ChunkType.STRING,
+ fileType: FileType.TS,
+ name: COMMON_CHUNK_NAME.FileMainContent,
+ content: getContent(),
+ linkAfter: [],
+ });
+
+ return next;
+ };
+
+ return plugin;
+};
+
+export default pluginFactory;
diff --git a/modules/code-generator/src/plugins/project/framework/icejs3/plugins/buildConfig.ts b/modules/code-generator/src/plugins/project/framework/icejs3/plugins/buildConfig.ts
new file mode 100644
index 0000000000..322796154a
--- /dev/null
+++ b/modules/code-generator/src/plugins/project/framework/icejs3/plugins/buildConfig.ts
@@ -0,0 +1,165 @@
+import {
+ BuilderComponentPlugin,
+ BuilderComponentPluginFactory,
+ ChunkType,
+ FileType,
+ ICodeStruct,
+} from '../../../../../types';
+import { COMMON_CHUNK_NAME } from '../../../../../const/generator';
+import { format } from '../../../../../utils/format';
+import { getThemeInfo } from '../../../../../utils/theme';
+
+export interface BuildConfigPluginConfig {
+
+ /** 包名 */
+ themePackage?: string;
+}
+
+function getContent(cfg?: BuildConfigPluginConfig, routesContent?: string) {
+ return `
+import { join } from 'path';
+import { defineConfig } from '@ice/app';
+import _ from 'lodash';
+import fusion from '@ice/plugin-fusion';
+import locales from '@ice/plugin-moment-locales';
+import type { Plugin } from '@ice/app/esm/types';
+
+interface PluginOptions {
+ id: string;
+}
+
+const plugin: Plugin = (options) => ({
+ // name 可选，插件名称
+ name: 'plugin-name',
+ // setup 必选，用于定制工程构建配置
+ setup: ({ onGetConfig, modifyUserConfig }) => {
+ modifyUserConfig('codeSplitting', 'page');
+
+ onGetConfig((config) => {
+ config.entry = {
+ web: join(process.cwd(), '.ice/entry.client.tsx'),
+ };
+
+ config.cssFilename = '[name].css';
+
+ config.configureWebpack = config.configureWebpack || [];
+ config.configureWebpack?.push((webpackConfig) => {
+ if (webpackConfig.output) {
+ webpackConfig.output.filename = '[name].js';
+ webpackConfig.output.chunkFilename = '[name].js';
+ }
+ return webpackConfig;
+ });
+
+ config.swcOptions = _.merge(config.swcOptions, {
+ compilationConfig: {
+ jsc: {
+ transform: {
+ react: {
+ runtime: 'classic',
+ },
+ },
+ },
+ }
+ });
+
+ // 解决 webpack publicPath 问题
+ config.transforms = config.transforms || [];
+ config.transforms.push((source: string, id: string) => {
+ if (id.includes('.ice/entry.client.tsx')) {
+ let code = \`
+ if (!__webpack_public_path__?.startsWith('http') && document.currentScript) {
+ // @ts-ignore
+ __webpack_public_path__ = document.currentScript.src.replace(/^(.*\\\\/)[^/]+$/, '$1');
+ window.__ICE_ASSETS_MANIFEST__ = window.__ICE_ASSETS_MANIFEST__ || {};
+ window.__ICE_ASSETS_MANIFEST__.publicPath = __webpack_public_path__;
+ }
+ \`;
+ code += source;
+ return { code };
+ }
+ });
+ });
+ },
+});
+
+// The project config, see https://v3.ice.work/docs/guide/basic/config
+const minify = process.env.NODE_ENV === 'production' ? 'swc' : false;
+export default defineConfig(() => ({
+ ssr: false,
+ ssg: false,
+ minify,
+ ${routesContent}
+ externals: {
+ react: 'React',
+ 'react-dom': 'ReactDOM',
+ 'react-dom/client': 'ReactDOM',
+ '@alifd/next': 'Next',
+ lodash: 'var window._',
+ '@alilc/lowcode-engine': 'var window.AliLowCodeEngine',
+ },
+ plugins: [
+ fusion(${cfg?.themePackage ? `{
+ importStyle: 'sass',
+ themePackage: '${getThemeInfo(cfg.themePackage).name}',
+ }` : `{
+ importStyle: 'sass',
+ }`}),
+ locales(),
+ plugin(),
+ ]
+}));
+ `;
+}
+
+function getRoutesContent(navData: any, needShell = true) {
+ const routes = [
+ 'routes: {',
+ ' defineRoutes: route => {',
+ ];
+ function _getRoutes(nav: any, _routes: string[] = []) {
+ const { slug, children } = nav;
+ if (children && children.length > 0) {
+ children.forEach((_nav: any) => _getRoutes(_nav, _routes));
+ } else if (slug) {
+ _routes.push(`route('/${slug}', '${slug}/index.jsx');`);
+ }
+ }
+ if (needShell) {
+ routes.push(" route('/', 'layout.jsx', () => {");
+ }
+ navData?.forEach((nav: any) => {
+ _getRoutes(nav, routes);
+ });
+ if (needShell) {
+ routes.push(' });');
+ }
+ routes.push(' }'); // end of defineRoutes
+ routes.push(' },'); // end of routes
+ return routes.join('\n');
+}
+
+const pluginFactory: BuilderComponentPluginFactory = (cfg?) => {
+ const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
+ const next: ICodeStruct = {
+ ...pre,
+ };
+
+ const { navConfig } = next.contextData;
+ const routesContent = navConfig?.data ? getRoutesContent(navConfig.data, true) : '';
+
+ next.chunks.push({
+ type: ChunkType.STRING,
+ fileType: FileType.MTS,
+ name: COMMON_CHUNK_NAME.FileMainContent,
+ content: format(getContent(cfg, routesContent)),
+ linkAfter: [],
+ });
+
+ return next;
+ };
+
+ return plugin;
+};
+
+export default pluginFactory;
diff --git a/modules/code-generator/src/plugins/project/framework/icejs3/plugins/globalStyle.ts b/modules/code-generator/src/plugins/project/framework/icejs3/plugins/globalStyle.ts
new file mode 100644
index 0000000000..3daaeecdc0
--- /dev/null
+++ b/modules/code-generator/src/plugins/project/framework/icejs3/plugins/globalStyle.ts
@@ -0,0 +1,56 @@
+import { COMMON_CHUNK_NAME } from '../../../../../const/generator';
+
+import {
+ BuilderComponentPlugin,
+ BuilderComponentPluginFactory,
+ ChunkType,
+ FileType,
+ ICodeStruct,
+ IProjectInfo,
+} from '../../../../../types';
+
+const pluginFactory: BuilderComponentPluginFactory = () => {
+ const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
+ const next: ICodeStruct = {
+ ...pre,
+ };
+
+ const ir = next.ir as IProjectInfo;
+
+ next.chunks.push({
+ type: ChunkType.STRING,
+ fileType: FileType.SCSS,
+ name: COMMON_CHUNK_NAME.StyleDepsImport,
+ content: `
+ // 引入默认全局样式
+ @import '@alifd/next/reset.scss';
+ `,
+ linkAfter: [],
+ });
+
+ next.chunks.push({
+ type: ChunkType.STRING,
+ fileType: FileType.SCSS,
+ name: COMMON_CHUNK_NAME.StyleCssContent,
+ content: `
+ body {
+ -webkit-font-smoothing: antialiased;
+ }
+ `,
+ linkAfter: [COMMON_CHUNK_NAME.StyleDepsImport],
+ });
+
+ next.chunks.push({
+ type: ChunkType.STRING,
+ fileType: FileType.SCSS,
+ name: COMMON_CHUNK_NAME.StyleCssContent,
+ content: ir.css || '',
+ linkAfter: [COMMON_CHUNK_NAME.StyleDepsImport],
+ });
+
+ return next;
+ };
+ return plugin;
+};
+
+export default pluginFactory;
diff --git a/modules/code-generator/src/plugins/project/framework/icejs3/plugins/layout.ts b/modules/code-generator/src/plugins/project/framework/icejs3/plugins/layout.ts
new file mode 100644
index 0000000000..a67f227019
--- /dev/null
+++ b/modules/code-generator/src/plugins/project/framework/icejs3/plugins/layout.ts
@@ -0,0 +1,41 @@
+import {
+ BuilderComponentPlugin,
+ BuilderComponentPluginFactory,
+ ChunkType,
+ FileType,
+ ICodeStruct,
+} from '../../../../../types';
+import { COMMON_CHUNK_NAME } from '../../../../../const/generator';
+
+const pluginFactory: BuilderComponentPluginFactory = () => {
+ const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
+ const next: ICodeStruct = {
+ ...pre,
+ };
+
+ next.chunks.push({
+ type: ChunkType.STRING,
+ fileType: FileType.JSX,
+ name: COMMON_CHUNK_NAME.FileMainContent,
+ content: `
+ import { Outlet } from 'ice';
+ import BasicLayout from '@/layouts/BasicLayout';
+
+ export default function Layout() {
+ return (
+
+
+ );;
+ }
+ `,
+ linkAfter: [],
+ });
+
+ return next;
+ };
+
+ return plugin;
+};
+
+export default pluginFactory;
diff --git a/modules/code-generator/src/plugins/project/framework/icejs3/plugins/packageJSON.ts b/modules/code-generator/src/plugins/project/framework/icejs3/plugins/packageJSON.ts
new file mode 100644
index 0000000000..3c39ba7399
--- /dev/null
+++ b/modules/code-generator/src/plugins/project/framework/icejs3/plugins/packageJSON.ts
@@ -0,0 +1,119 @@
+import { PackageJSON } from '@alilc/lowcode-types';
+
+import { COMMON_CHUNK_NAME } from '../../../../../const/generator';
+
+import {
+ BuilderComponentPlugin,
+ BuilderComponentPluginFactory,
+ ChunkType,
+ FileType,
+ ICodeStruct,
+ IProjectInfo,
+} from '../../../../../types';
+import { buildDataSourceDependencies } from '../../../../../utils/dataSource';
+
+interface IIceJs3PackageJSON extends PackageJSON {
+ originTemplate: string;
+}
+
+export type IceJs3PackageJsonPluginConfig = {
+
+ /**
+ * 数据源配置
+ */
+ datasourceConfig?: {
+
+ /** 数据源引擎的版本 */
+ engineVersion?: string;
+
+ /** 数据源引擎的包名 */
+ enginePackage?: string;
+
+ /** 数据源 handlers 的版本 */
+ handlersVersion?: {
+ [key: string]: string;
+ };
+
+ /** 数据源 handlers 的包名 */
+ handlersPackages?: {
+ [key: string]: string;
+ };
+ };
+
+ /** 包名 */
+ packageName?: string;
+
+ /** 版本 */
+ packageVersion?: string;
+};
+
+const pluginFactory: BuilderComponentPluginFactory = (cfg) => {
+ const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => {
+ const next: ICodeStruct = {
+ ...pre,
+ };
+
+ const ir = next.ir as IProjectInfo;
+
+ const packageJson: IIceJs3PackageJSON = {
+ name: cfg?.packageName || 'icejs3-demo-app',
+ version: cfg?.packageVersion || '0.1.5',
+ description: 'icejs 3 轻量级模板，使用 JavaScript，仅包含基础的 Layout。',
+ dependencies: {
+ moment: '^2.24.0',
+ react: '^18.2.0',
+ 'react-dom': '^18.2.0',
+ 'react-router': '^6.9.0',
+ 'react-router-dom': '^6.9.0',
+ 'intl-messageformat': '^9.3.6',
+ '@alifd/next': '1.26.15',
+ '@ice/runtime': '~1.1.0',
+ // 数据源相关的依赖:
+ ...buildDataSourceDependencies(ir, cfg?.datasourceConfig),
+ },
+ devDependencies: {
+ '@ice/app': '~3.1.0',
+ '@types/react': '^18.0.0',
+ '@types/react-dom': '^18.0.0',
+ '@types/node': '^18.11.17',
+ '@ice/plugin-fusion': '^1.0.1',
+ '@ice/plugin-moment-locales': '^1.0.0',
+ eslint: '^6.0.1',
+ stylelint: '^13.2.0',
+ },
+ scripts: {
+ start: 'ice start',
+ build: 'ice build',
+ lint: 'npm run eslint && npm run stylelint',
+ eslint: 'eslint --cache --ext .js,.jsx ./',
+ stylelint: 'stylelint ./**/*.scss',
+ },
+ engines: {
+ node: '>=14.0.0',
+ },
+ repository: {
+ type: 'git',
+ url: 'http://gitlab.xxx.com/msd/leak-scan/tree/master',
+ },
+ private: true,
+ originTemplate: '@alifd/scaffold-lite-js',
+ };
+
+ ir.packages.forEach((packageInfo) => {
+ packageJson.dependencies[packageInfo.package] = packageInfo.version;
+ });
+
+ next.chunks.push({
+ type: ChunkType.JSON,
+ fileType: FileType.JSON,
+ name: COMMON_CHUNK_NAME.FileMainContent,
+ content: packageJson,
+ linkAfter: [],
+ });
+
+ return next;
+ };
+ return plugin;
+};
+
+export default pluginFactory;
diff --git a/modules/code-generator/src/plugins/project/framework/icejs3/template/files/README.md.ts b/modules/code-generator/src/plugins/project/framework/icejs3/template/files/README.md.ts
new file mode 100644
index 0000000000..e73ab2b82c
--- /dev/null
+++ b/modules/code-generator/src/plugins/project/framework/icejs3/template/files/README.md.ts
@@ -0,0 +1,12 @@
+import { ResultFile } from '@alilc/lowcode-types';
+import { createResultFile } from '../../../../../../utils/resultHelper';
+
+export default function getFile(): [string[], ResultFile] {
+ const file = createResultFile(
+ 'README',
+ 'md',
+ 'This project is generated by lowcode-code-generator & lowcode-solution-icejs3.',
+ );
+
+ return [[], file];
+}
diff --git a/modules/code-generator/src/plugins/project/framework/icejs3/template/files/browserslistrc.ts b/modules/code-generator/src/plugins/project/framework/icejs3/template/files/browserslistrc.ts
new file mode 100644
index 0000000000..a3a346e3ff
--- /dev/null
+++ b/modules/code-generator/src/plugins/project/framework/icejs3/template/files/browserslistrc.ts
@@ -0,0 +1,14 @@
+import { ResultFile } from '@alilc/lowcode-types';
+import { createResultFile } from '../../../../../../utils/resultHelper';
+
+export default function getFile(): [string[], ResultFile] {
+ const file = createResultFile(
+ '.browserslistrc',
+ '',
+ `defaults
+ios_saf 9
+ `,
+ );
+
+ return [[], file];
+}
diff --git a/modules/code-generator/src/plugins/project/framework/icejs3/template/files/document.ts b/modules/code-generator/src/plugins/project/framework/icejs3/template/files/document.ts
new file mode 100644
index 0000000000..3345625557
--- /dev/null
+++ b/modules/code-generator/src/plugins/project/framework/icejs3/template/files/document.ts
@@ -0,0 +1,41 @@
+import { ResultFile } from '@alilc/lowcode-types';
+import { createResultFile } from '../../../../../../utils/resultHelper';
+
+/* eslint-disable max-len */
+export default function getFile(): [string[], ResultFile] {
+ const file = createResultFile(
+ 'document',
+ 'tsx',
+ `import React from 'react';
+import { Meta, Title, Links, Main, Scripts } from 'ice';
+
+export default function Document() {
+ return (
+
+
+
+
+
+
+
+
+
+ {childrenItems}
+
+ );
+ return subNav;
+ }
+
+ return null;
+ }
+
+ const navItem = (
+
+ {item.name}
+
+ );
+ return navItem;
+}
+
+const Navigation = (props, context) => {
+ const location = useLocation();
+ const { pathname } = location;
+ const { isCollapse } = context;
+ return (
+
+ );
+};
+
+Navigation.contextTypes = {
+ isCollapse: PropTypes.bool,
+};
+export default Navigation;
+ `,
+ );
+
+ return [['src', 'layouts', 'BasicLayout', 'components', 'PageNav'], file];
+}
diff --git a/modules/code-generator/src/plugins/project/framework/icejs3/template/files/src/layouts/BasicLayout/index.jsx.ts b/modules/code-generator/src/plugins/project/framework/icejs3/template/files/src/layouts/BasicLayout/index.jsx.ts
new file mode 100644
index 0000000000..9c7318dab0
--- /dev/null
+++ b/modules/code-generator/src/plugins/project/framework/icejs3/template/files/src/layouts/BasicLayout/index.jsx.ts
@@ -0,0 +1,92 @@
+import { ResultFile } from '@alilc/lowcode-types';
+import { createResultFile } from '../../../../../../../../../utils/resultHelper';
+
+export default function getFile(): [string[], ResultFile] {
+ const file = createResultFile(
+ 'index',
+ 'jsx',
+ `
+import React, { useState } from 'react';
+import { Shell, ConfigProvider } from '@alifd/next';
+import PageNav from './components/PageNav';
+import Logo from './components/Logo';
+import Footer from './components/Footer';
+
+(function() {
+ const throttle = function(type, name, obj = window) {
+ let running = false;
+
+ const func = () => {
+ if (running) {
+ return;
+ }
+
+ running = true;
+ requestAnimationFrame(() => {
+ obj.dispatchEvent(new CustomEvent(name));
+ running = false;
+ });
+ };
+
+ obj.addEventListener(type, func);
+ };
+
+ throttle('resize', 'optimizedResize');
+})();
+
+export default function BasicLayout({ children }) {
+ const getDevice = width => {
+ const isPhone =
+ typeof navigator !== 'undefined' && navigator && navigator.userAgent.match(/phone/gi);
+
+ if (width < 680 || isPhone) {
+ return 'phone';
+ }
+ if (width < 1280 && width > 680) {
+ return 'tablet';
+ }
+ return 'desktop';
+ };
+
+ const [device, setDevice] = useState(getDevice(NaN));
+ window.addEventListener('optimizedResize', e => {
+ setDevice(getDevice(e && e.target && e.target.innerWidth));
+ });
+ return (
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+
+ );
+}
+ `,
+ );
+
+ return [['src', 'layouts', 'BasicLayout'], file];
+}
diff --git a/modules/code-generator/src/plugins/project/framework/icejs3/template/files/src/layouts/BasicLayout/menuConfig.js.ts b/modules/code-generator/src/plugins/project/framework/icejs3/template/files/src/layouts/BasicLayout/menuConfig.js.ts
new file mode 100644
index 0000000000..636539b657
--- /dev/null
+++ b/modules/code-generator/src/plugins/project/framework/icejs3/template/files/src/layouts/BasicLayout/menuConfig.js.ts
@@ -0,0 +1,22 @@
+import { ResultFile } from '@alilc/lowcode-types';
+import { createResultFile } from '../../../../../../../../../utils/resultHelper';
+
+export default function getFile(): [string[], ResultFile] {
+ const file = createResultFile(
+ 'menuConfig',
+ 'js',
+ `
+const headerMenuConfig = [];
+const asideMenuConfig = [
+ {
+ name: 'Dashboard',
+ path: '/',
+ icon: 'smile',
+ },
+];
+export { headerMenuConfig, asideMenuConfig };
+ `,
+ );
+
+ return [['src', 'layouts', 'BasicLayout'], file];
+}
diff --git a/modules/code-generator/src/plugins/project/framework/icejs3/template/files/tsconfig.ts b/modules/code-generator/src/plugins/project/framework/icejs3/template/files/tsconfig.ts
new file mode 100644
index 0000000000..f58639db20
--- /dev/null
+++ b/modules/code-generator/src/plugins/project/framework/icejs3/template/files/tsconfig.ts
@@ -0,0 +1,38 @@
+import { ResultFile } from '@alilc/lowcode-types';
+import { createResultFile } from '../../../../../../utils/resultHelper';
+
+export default function getFile(): [string[], ResultFile] {
+ const file = createResultFile(
+ 'tsconfig',
+ 'json',
+ `
+{
+ "compilerOptions": {
+ "baseUrl": "./",
+ "module": "ESNext",
+ "target": "ESNext",
+ "lib": ["DOM", "ESNext", "DOM.Iterable"],
+ "jsx": "react-jsx",
+ "moduleResolution": "node",
+ "allowSyntheticDefaultImports": true,
+ "forceConsistentCasingInFileNames": true,
+ "noImplicitReturns": true,
+ "noImplicitThis": true,
+ "noImplicitAny": false,
+ "importHelpers": true,
+ "strictNullChecks": true,
+ "suppressImplicitAnyIndexErrors": true,
+ "skipLibCheck": true,
+ "paths": {
+ "@/*": ["./src/*"],
+ "ice": [".ice"]
+ }
+ },
+ "include": ["src", ".ice"],
+ "exclude": ["build"]
+}
+ `,
+ );
+
+ return [[], file];
+}
diff --git a/modules/code-generator/src/plugins/project/framework/icejs3/template/files/typings.ts b/modules/code-generator/src/plugins/project/framework/icejs3/template/files/typings.ts
new file mode 100644
index 0000000000..c8cbe92545
--- /dev/null
+++ b/modules/code-generator/src/plugins/project/framework/icejs3/template/files/typings.ts
@@ -0,0 +1,20 @@
+import { ResultFile } from '@alilc/lowcode-types';
+import { createResultFile } from '../../../../../../utils/resultHelper';
+
+export default function getFile(): [string[], ResultFile] {
+ const file = createResultFile(
+ 'typings.d',
+ 'ts',
+ `/// ;
+ }
+}
+ `,
+ );
+
+ return [['src'], file];
+}
diff --git a/modules/code-generator/src/plugins/project/framework/icejs3/template/index.ts b/modules/code-generator/src/plugins/project/framework/icejs3/template/index.ts
new file mode 100644
index 0000000000..e29f931386
--- /dev/null
+++ b/modules/code-generator/src/plugins/project/framework/icejs3/template/index.ts
@@ -0,0 +1,57 @@
+import { IProjectTemplate } from '../../../../../types';
+import { generateStaticFiles } from './static-files';
+
+const icejs3Template: IProjectTemplate = {
+ slots: {
+ components: {
+ path: ['src', 'components'],
+ fileName: 'index',
+ },
+ pages: {
+ path: ['src', 'pages'],
+ fileName: 'index',
+ },
+ entry: {
+ path: ['src'],
+ fileName: 'app',
+ },
+ constants: {
+ path: ['src'],
+ fileName: 'constants',
+ },
+ utils: {
+ path: ['src'],
+ fileName: 'utils',
+ },
+ i18n: {
+ path: ['src'],
+ fileName: 'i18n',
+ },
+ globalStyle: {
+ path: ['src'],
+ fileName: 'global',
+ },
+ packageJSON: {
+ path: [],
+ fileName: 'package',
+ },
+ appConfig: {
+ path: ['src'],
+ fileName: 'app',
+ },
+ buildConfig: {
+ path: [],
+ fileName: 'ice.config',
+ },
+ layout: {
+ path: ['src', 'pages'],
+ fileName: 'layout',
+ },
+ },
+
+ generateTemplate() {
+ return generateStaticFiles();
+ },
+};
+
+export default icejs3Template;
diff --git a/modules/code-generator/src/plugins/project/framework/icejs3/template/static-files.ts b/modules/code-generator/src/plugins/project/framework/icejs3/template/static-files.ts
new file mode 100644
index 0000000000..8f3794b61a
--- /dev/null
+++ b/modules/code-generator/src/plugins/project/framework/icejs3/template/static-files.ts
@@ -0,0 +1,33 @@
+import { ResultDir } from '@alilc/lowcode-types';
+import { createResultDir } from '../../../../../utils/resultHelper';
+import { runFileGenerator } from '../../../../../utils/templateHelper';
+
+import file1 from './files/gitignore';
+import file2 from './files/README.md';
+import file3 from './files/browserslistrc';
+import file4 from './files/typings';
+import file5 from './files/document';
+import file6 from './files/src/layouts/BasicLayout/components/Footer/index.jsx';
+import file7 from './files/src/layouts/BasicLayout/components/Footer/index.style';
+import file8 from './files/src/layouts/BasicLayout/components/Logo/index.jsx';
+import file9 from './files/src/layouts/BasicLayout/components/Logo/index.style';
+import file10 from './files/src/layouts/BasicLayout/components/PageNav/index.jsx';
+import file11 from './files/src/layouts/BasicLayout/index.jsx';
+import file12 from './files/src/layouts/BasicLayout/menuConfig.js';
+
+export function generateStaticFiles(root = createResultDir('.')): ResultDir {
+ runFileGenerator(root, file1);
+ runFileGenerator(root, file2);
+ runFileGenerator(root, file3);
+ runFileGenerator(root, file4);
+ runFileGenerator(root, file5);
+ runFileGenerator(root, file6);
+ runFileGenerator(root, file7);
+ runFileGenerator(root, file8);
+ runFileGenerator(root, file9);
+ runFileGenerator(root, file10);
+ runFileGenerator(root, file11);
+ runFileGenerator(root, file12);
+
+ return root;
+}
diff --git a/modules/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts b/modules/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
index e95a3dc0bf..401ba3f97f 100644
--- a/modules/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
+++ b/modules/code-generator/src/plugins/project/framework/rax/plugins/packageJSON.ts
@@ -1,4 +1,4 @@
-import { NpmInfo, PackageJSON } from '@alilc/lowcode-types';
+import { IPublicTypeNpmInfo, PackageJSON } from '@alilc/lowcode-types';
import { COMMON_CHUNK_NAME } from '../../../../../const/generator';
import {
@@ -84,9 +84,9 @@ const pluginFactory: BuilderComponentPluginFactory = (cfg)
export default pluginFactory;
-function getNpmDependencies(project: IProjectInfo): NpmInfo[] {
- const npmDeps: NpmInfo[] = [];
- const npmNameToPkgMap = new Map();
+function getNpmDependencies(project: IProjectInfo): IPublicTypeNpmInfo[] {
+ const npmDeps: IPublicTypeNpmInfo[] = [];
+ const npmNameToPkgMap = new Map();
const allDeps = project.packages;
diff --git a/modules/code-generator/src/plugins/project/i18n.ts b/modules/code-generator/src/plugins/project/i18n.ts
index ae568f9724..4c36345a5f 100644
--- a/modules/code-generator/src/plugins/project/i18n.ts
+++ b/modules/code-generator/src/plugins/project/i18n.ts
@@ -41,7 +41,7 @@ const pluginFactory: BuilderComponentPluginFactory = () => {
// 按低代码规范里面的要求进行变量替换
const format = (msg, variables) => (
typeof msg === 'string'
- ? msg.replace(/\\\$\\{(\\w+)\\}/g, (match, key) => variables?.[key] ?? '')
+ ? msg.replace(/\\\$?\\{(\\w+)\\}/g, (match, key) => variables?.[key] ?? '')
: msg
);
diff --git a/modules/code-generator/src/postprocessor/prettier/index.ts b/modules/code-generator/src/postprocessor/prettier/index.ts
index afdcc62258..079c45582e 100644
--- a/modules/code-generator/src/postprocessor/prettier/index.ts
+++ b/modules/code-generator/src/postprocessor/prettier/index.ts
@@ -9,7 +9,7 @@ const PARSERS = ['css', 'scss', 'less', 'json', 'html', 'vue'];
export interface ProcessorConfig {
customFileTypeParser: Record;
- plugins?: Array;
+ plugins?: prettier.Plugin[];
}
const factory: PostProcessorFactory = (config?: ProcessorConfig) => {
@@ -20,8 +20,10 @@ const factory: PostProcessorFactory = (config?: ProcessorConfig
const codePrettier: PostProcessor = (content: string, fileType: string) => {
let parser: prettier.BuiltInParserName | any;
- if (fileType === 'js' || fileType === 'jsx') {
- parser = 'babel';
+ if (fileType === 'js' || fileType === 'jsx' || fileType === 'ts' || fileType === 'tsx') {
+ parser = 'babel-ts';
+ } else if (fileType === 'json') {
+ parser = 'json-stringify';
} else if (PARSERS.indexOf(fileType) >= 0) {
parser = fileType;
} else if (cfg.customFileTypeParser[fileType]) {
@@ -33,6 +35,8 @@ const factory: PostProcessorFactory = (config?: ProcessorConfig
return prettier.format(content, {
parser,
plugins: [parserBabel, parserPostCss, parserHtml, ...(cfg.plugins || [])],
+ singleQuote: true,
+ jsxSingleQuote: false,
});
};
diff --git a/modules/code-generator/src/publisher/zip/index.ts b/modules/code-generator/src/publisher/zip/index.ts
index cc2f082b27..0ac0b6f67f 100644
--- a/modules/code-generator/src/publisher/zip/index.ts
+++ b/modules/code-generator/src/publisher/zip/index.ts
@@ -2,9 +2,9 @@ import { ResultDir } from '@alilc/lowcode-types';
import { PublisherFactory, IPublisher, IPublisherFactoryParams, PublisherError } from '../../types';
import { getErrorMessage } from '../../utils/errors';
import { isNodeProcess, writeZipToDisk, generateProjectZip } from './utils';
+import { saveAs } from 'file-saver';
-// export type ZipBuffer = Buffer | Blob;
-export type ZipBuffer = Buffer;
+export type ZipBuffer = Buffer | Blob;
declare type ZipPublisherResponse = string | ZipBuffer;
@@ -44,10 +44,16 @@ export const createZipPublisher: PublisherFactory => {
let zip = new JSZip();
zip = writeFolderToZip(project, zip, true);
- // const zipType = isNodeProcess() ? 'nodebuffer' : 'blob';
- const zipType = 'nodebuffer'; // 目前先只支持 node 调用
+ const zipType = isNodeProcess() ? 'nodebuffer' : 'blob';
return zip.generateAsync({ type: zipType });
};
diff --git a/modules/code-generator/src/solutions/icejs.ts b/modules/code-generator/src/solutions/icejs.ts
index 85ce7c1f52..1149098ecb 100644
--- a/modules/code-generator/src/solutions/icejs.ts
+++ b/modules/code-generator/src/solutions/icejs.ts
@@ -3,6 +3,7 @@ import { IProjectBuilder, IProjectBuilderOptions } from '../types';
import { createProjectBuilder } from '../generator/ProjectBuilder';
import esmodule from '../plugins/common/esmodule';
+import styleImport from '../plugins/common/styleImport';
import containerClass from '../plugins/component/react/containerClass';
import containerInitState from '../plugins/component/react/containerInitState';
import containerInjectContext from '../plugins/component/react/containerInjectContext';
@@ -38,11 +39,13 @@ export default function createIceJsProjectBuilder(
esmodule({
fileType: 'jsx',
}),
+ styleImport(),
containerClass(),
containerInjectContext(),
containerInjectUtils(),
containerInjectDataSourceEngine(),
containerInjectI18n(),
+ containerInjectConstants(),
containerInitState(),
containerLifeCycle(),
containerMethod(),
@@ -61,6 +64,7 @@ export default function createIceJsProjectBuilder(
esmodule({
fileType: 'jsx',
}),
+ styleImport(),
containerClass(),
containerInjectContext(),
containerInjectUtils(),
@@ -91,16 +95,18 @@ export default function createIceJsProjectBuilder(
packageJSON: [icejs.plugins.packageJSON()],
},
postProcessors: [prettier()],
+ customizeBuilderOptions: options?.customizeBuilderOptions,
});
}
export const plugins = {
containerClass,
- containerInitState,
containerInjectContext,
containerInjectUtils,
- containerInjectI18n,
containerInjectDataSourceEngine,
+ containerInjectI18n,
+ containerInjectConstants,
+ containerInitState,
containerLifeCycle,
containerMethod,
jsx,
diff --git a/modules/code-generator/src/solutions/icejs3.ts b/modules/code-generator/src/solutions/icejs3.ts
new file mode 100644
index 0000000000..a8622e74ab
--- /dev/null
+++ b/modules/code-generator/src/solutions/icejs3.ts
@@ -0,0 +1,113 @@
+import { IProjectBuilder, IProjectBuilderOptions } from '../types';
+
+import { createProjectBuilder } from '../generator/ProjectBuilder';
+
+import esmodule from '../plugins/common/esmodule';
+import styleImport from '../plugins/common/styleImport';
+import containerClass from '../plugins/component/react/containerClass';
+import containerInitState from '../plugins/component/react/containerInitState';
+import containerInjectContext from '../plugins/component/react/containerInjectContext';
+import containerInjectUtils from '../plugins/component/react/containerInjectUtils';
+import containerInjectDataSourceEngine from '../plugins/component/react/containerInjectDataSourceEngine';
+import containerInjectConstants from '../plugins/component/react/containerInjectConstants';
+import containerInjectI18n from '../plugins/component/react/containerInjectI18n';
+import containerLifeCycle from '../plugins/component/react/containerLifeCycle';
+import containerMethod from '../plugins/component/react/containerMethod';
+import jsx from '../plugins/component/react/jsx';
+import reactCommonDeps from '../plugins/component/react/reactCommonDeps';
+import css from '../plugins/component/style/css';
+import constants from '../plugins/project/constants';
+import i18n from '../plugins/project/i18n';
+import utils from '../plugins/project/utils';
+
+import icejs3 from '../plugins/project/framework/icejs3';
+
+import { prettier } from '../postprocessor';
+
+export type IceJs3ProjectBuilderOptions = IProjectBuilderOptions;
+
+export default function createIceJsProjectBuilder(
+ options?: IceJs3ProjectBuilderOptions,
+): IProjectBuilder {
+ return createProjectBuilder({
+ inStrictMode: options?.inStrictMode,
+ extraContextData: { ...options },
+ template: icejs3.template,
+ plugins: {
+ components: [
+ reactCommonDeps(),
+ esmodule({
+ fileType: 'jsx',
+ }),
+ styleImport(),
+ containerClass(),
+ containerInjectContext(),
+ containerInjectUtils(),
+ containerInjectDataSourceEngine(),
+ containerInjectI18n(),
+ containerInjectConstants(),
+ containerInitState(),
+ containerLifeCycle(),
+ containerMethod(),
+ jsx({
+ nodeTypeMapping: {
+ Div: 'div',
+ Component: 'div',
+ Page: 'div',
+ Block: 'div',
+ },
+ }),
+ css(),
+ ],
+ pages: [
+ reactCommonDeps(),
+ esmodule({
+ fileType: 'jsx',
+ }),
+ styleImport(),
+ containerClass(),
+ containerInjectContext(),
+ containerInjectUtils(),
+ containerInjectDataSourceEngine(),
+ containerInjectI18n(),
+ containerInjectConstants(),
+ containerInitState(),
+ containerLifeCycle(),
+ containerMethod(),
+ jsx({
+ nodeTypeMapping: {
+ Div: 'div',
+ Component: 'div',
+ Page: 'div',
+ Block: 'div',
+ Box: 'div',
+ },
+ }),
+ css(),
+ ],
+ constants: [constants()],
+ utils: [esmodule(), utils('react')],
+ i18n: [i18n()],
+ globalStyle: [icejs3.plugins.globalStyle()],
+ packageJSON: [icejs3.plugins.packageJSON()],
+ buildConfig: [icejs3.plugins.buildConfig()],
+ appConfig: [icejs3.plugins.appConfig()],
+ layout: [icejs3.plugins.layout()],
+ },
+ postProcessors: [prettier()],
+ customizeBuilderOptions: options?.customizeBuilderOptions,
+ });
+}
+
+export const plugins = {
+ containerClass,
+ containerInitState,
+ containerInjectContext,
+ containerInjectUtils,
+ containerInjectI18n,
+ containerInjectDataSourceEngine,
+ containerLifeCycle,
+ containerMethod,
+ jsx,
+ commonDeps: reactCommonDeps,
+};
diff --git a/modules/code-generator/src/solutions/rax-app.ts b/modules/code-generator/src/solutions/rax-app.ts
index c2b3adac50..f7e9038353 100644
--- a/modules/code-generator/src/solutions/rax-app.ts
+++ b/modules/code-generator/src/solutions/rax-app.ts
@@ -71,6 +71,7 @@ export default function createRaxProjectBuilder(
packageJSON: [raxApp.plugins.packageJSON(options)],
},
postProcessors: [prettier()],
+ customizeBuilderOptions: options?.customizeBuilderOptions,
});
}
diff --git a/modules/code-generator/src/standalone-loader.ts b/modules/code-generator/src/standalone-loader.ts
index 882b1de9dd..0c8903ddcb 100644
--- a/modules/code-generator/src/standalone-loader.ts
+++ b/modules/code-generator/src/standalone-loader.ts
@@ -1,5 +1,5 @@
import fetch from 'node-fetch';
-import type { ProjectSchema, ResultDir } from '@alilc/lowcode-types';
+import type { IPublicTypeProjectSchema, ResultDir } from '@alilc/lowcode-types';
import type { FlattenFile } from './types/file';
declare const Worker: any;
@@ -26,7 +26,7 @@ export type Result = ResultDir | FlattenFile[];
export async function generateCode(options: {
solution: 'icejs' | 'rax';
- schema: ProjectSchema;
+ schema: IPublicTypeProjectSchema;
flattenResult?: boolean;
workerJsUrl?: string;
timeoutInMs?: number;
diff --git a/modules/code-generator/src/standalone-worker.ts b/modules/code-generator/src/standalone-worker.ts
index 71f56e67a3..e00a4877bf 100644
--- a/modules/code-generator/src/standalone-worker.ts
+++ b/modules/code-generator/src/standalone-worker.ts
@@ -1,5 +1,5 @@
/* eslint-disable no-console */
-import type { ProjectSchema } from '@alilc/lowcode-types';
+import type { IPublicTypeProjectSchema } from '@alilc/lowcode-types';
import CodeGen from './standalone';
declare const self: any;
@@ -13,7 +13,7 @@ self.onmessage = (event: any) => {
self.postMessage({ type: 'ready' });
-async function run(msg: { solution: string; schema: ProjectSchema; flattenResult?: boolean }) {
+async function run(msg: { solution: string; schema: IPublicTypeProjectSchema; flattenResult?: boolean }) {
try {
print('begin run...');
self.postMessage({ type: 'run:begin' });
diff --git a/modules/code-generator/src/standalone.ts b/modules/code-generator/src/standalone.ts
index 2f15515cf8..23d16e61f0 100644
--- a/modules/code-generator/src/standalone.ts
+++ b/modules/code-generator/src/standalone.ts
@@ -8,7 +8,8 @@ import './polyfills/buffer';
import { createProjectBuilder } from './generator/ProjectBuilder';
import { createModuleBuilder } from './generator/ModuleBuilder';
import { createZipPublisher } from './publisher/zip';
-import createIceJsProjectBuilder, { plugins as reactPlugins } from './solutions/icejs';
+import createIceJsProjectBuilder, { plugins as icejsPlugins } from './solutions/icejs';
+import createIceJs3ProjectBuilder, { plugins as icejs3Plugins } from './solutions/icejs3';
import createRaxAppProjectBuilder, { plugins as raxPlugins } from './solutions/rax-app';
// 引入说明
@@ -18,6 +19,7 @@ import { COMMON_CHUNK_NAME, CLASS_DEFINE_CHUNK_NAME, DEFAULT_LINK_AFTER } from '
// 引入通用插件组
import esmodule from './plugins/common/esmodule';
import requireUtils from './plugins/common/requireUtils';
+import styleImport from './plugins/common/styleImport';
import css from './plugins/component/style/css';
import constants from './plugins/project/constants';
@@ -32,6 +34,7 @@ import * as CONSTANTS from './const';
// 引入内置解决方案模块
import icejs from './plugins/project/framework/icejs';
+import icejs3 from './plugins/project/framework/icejs3';
import rax from './plugins/project/framework/rax';
export default {
@@ -39,10 +42,12 @@ export default {
createModuleBuilder,
solutions: {
icejs: createIceJsProjectBuilder,
+ icejs3: createIceJs3ProjectBuilder,
rax: createRaxAppProjectBuilder,
},
solutionParts: {
icejs,
+ icejs3,
rax,
},
publishers: {
@@ -50,6 +55,7 @@ export default {
},
plugins: {
common: {
+
/**
* 处理 ES Module
* @deprecated please use esModule
@@ -57,12 +63,7 @@ export default {
esmodule,
esModule: esmodule,
requireUtils,
- },
- react: {
- ...reactPlugins,
- },
- rax: {
- ...raxPlugins,
+ styleImport,
},
style: {
css,
@@ -72,6 +73,22 @@ export default {
i18n,
utils,
},
+ icejs: {
+ ...icejsPlugins,
+ },
+ icejs3: {
+ ...icejs3Plugins,
+ },
+ rax: {
+ ...raxPlugins,
+ },
+
+ /**
+ * @deprecated please use icejs
+ */
+ react: {
+ ...icejsPlugins,
+ },
},
postprocessor: {
prettier,
diff --git a/modules/code-generator/src/types/analyze.ts b/modules/code-generator/src/types/analyze.ts
index 43de307434..3bf444d29e 100644
--- a/modules/code-generator/src/types/analyze.ts
+++ b/modules/code-generator/src/types/analyze.ts
@@ -1,7 +1,7 @@
-import type { ContainerSchema } from '@alilc/lowcode-types';
+import type { IPublicTypeContainerSchema } from '@alilc/lowcode-types';
export interface ICompAnalyzeResult {
isUsingRef: boolean;
}
-export type TComponentAnalyzer = (container: ContainerSchema) => ICompAnalyzeResult;
+export type TComponentAnalyzer = (container: IPublicTypeContainerSchema) => ICompAnalyzeResult;
diff --git a/modules/code-generator/src/types/core.ts b/modules/code-generator/src/types/core.ts
index 99ca8c97ad..1219a1e767 100644
--- a/modules/code-generator/src/types/core.ts
+++ b/modules/code-generator/src/types/core.ts
@@ -1,19 +1,15 @@
import {
- JSONArray,
- JSONObject,
- CompositeArray,
- CompositeObject,
- ResultDir,
+ IPublicTypeCompositeArray,
+ IPublicTypeCompositeObject, IPublicTypeJSExpression,
+ IPublicTypeJSFunction, IPublicTypeJSONArray,
+ IPublicTypeJSONObject, IPublicTypeJSSlot, IPublicTypeNodeDataType,
+ IPublicTypeProjectSchema, ResultDir,
ResultFile,
- NodeDataType,
- ProjectSchema,
- JSExpression,
- JSFunction,
- JSSlot,
} from '@alilc/lowcode-types';
-import { IParseResult } from './intermediate';
+import type { ProjectBuilderInitOptions } from '../generator/ProjectBuilder';
import { IScopeBindings } from '../utils/ScopeBindings';
+import { IParseResult } from './intermediate';
export enum FileType {
CSS = 'css',
@@ -21,10 +17,13 @@ export enum FileType {
LESS = 'less',
HTML = 'html',
JS = 'js',
+ MJS = 'mjs',
JSX = 'jsx',
TS = 'ts',
+ MTS = 'mts',
TSX = 'tsx',
JSON = 'json',
+ MD = 'md',
}
export enum ChunkType {
@@ -64,14 +63,17 @@ export interface ICodeStruct extends IBaseCodeStruct {
/** 上下文数据，用来在插件之间共享一些数据 */
export interface IContextData extends IProjectBuilderOptions {
- /** 是否使用了 Ref 的 API (this.$/this.$$) */
- useRefApi?: boolean;
/**
* 其他自定义数据
* （三方自定义插件也可以在此放一些数据，建议起个长一点的名称，用自己的插件名做前缀，以防冲突）
*/
[key: string]: any;
+
+ /**
+ * 是否使用了 Ref 的 API (this.$/this.$$)
+ * */
+ useRefApi?: boolean;
}
export type BuilderComponentPlugin = (initStruct: ICodeStruct) => Promise;
@@ -95,7 +97,7 @@ export interface ICompiledModule {
export interface IModuleBuilder {
generateModule: (input: unknown) => Promise;
- generateModuleCode: (schema: ProjectSchema | string) => Promise;
+ generateModuleCode: (schema: IPublicTypeProjectSchema | string) => Promise;
linkCodeChunks: (chunks: Record, fileName: string) => ResultFile[];
addPlugin: (plugin: BuilderComponentPlugin) => void;
}
@@ -107,24 +109,25 @@ export interface IModuleBuilder {
* @interface ICodeGenerator
*/
export interface ICodeGenerator {
+
/**
* 出码接口，把 Schema 转换成代码文件系统描述
*
- * @param {(ProjectSchema)} schema 传入的 Schema
+ * @param {(IPublicTypeProjectSchema)} schema 传入的 Schema
* @returns {ResultDir}
* @memberof ICodeGenerator
*/
- toCode: (schema: ProjectSchema) => Promise;
+ toCode: (schema: IPublicTypeProjectSchema) => Promise;
}
export interface ISchemaParser {
- validate: (schema: ProjectSchema) => boolean;
- parse: (schema: ProjectSchema | string) => IParseResult;
+ validate: (schema: IPublicTypeProjectSchema) => boolean;
+ parse: (schema: IPublicTypeProjectSchema | string) => IParseResult;
}
export interface IProjectTemplate {
slots: Record;
- generateTemplate: () => ResultDir | Promise;
+ generateTemplate: (data: IParseResult) => ResultDir | Promise;
}
export interface IProjectSlot {
@@ -137,51 +140,65 @@ export interface IProjectPlugins {
}
export interface IProjectBuilderOptions {
- /** 是否处于严格模式(默认: 否) */
+
+ /** 是否处于严格模式 (默认：否) */
inStrictMode?: boolean;
/**
* 是否要容忍对 JSExpression 求值时的异常
* 默认：true
- * 注: 如果容忍异常，则会在求值时包裹 try-catch 块，
+ * 注：如果容忍异常，则会在求值时包裹 try-catch 块，
* catch 到异常时默认会抛出一个 CustomEvent 事件里面包含异常信息和求值的表达式
*/
tolerateEvalErrors?: boolean;
/**
* 容忍异常的时候的的错误处理语句块
- * 默认: 无
+ * 默认：无
* 您可以设置为一个语句块，比如：
* window.dispatchEvent(new CustomEvent('lowcode-eval-error', { error, expr }))
*
* 一般可以结合埋点监控模块用来监控求值异常
*
- * 其中:
+ * 其中：
* - error: 异常信息
* - expr: 求值的表达式
*/
evalErrorsHandler?: string;
+
+ /**
+ * Hook which is used to customize original options, we can reorder/add/remove plugins/processors
+ * of the existing solution.
+ */
+ customizeBuilderOptions?(originalOptions: ProjectBuilderInitOptions): ProjectBuilderInitOptions;
}
export interface IProjectBuilder {
- generateProject: (schema: ProjectSchema | string) => Promise;
+ generateProject: (schema: IPublicTypeProjectSchema | string) => Promise;
}
/** 项目级别的前置处理器 */
-export type ProjectPreProcessor = (schema: ProjectSchema) => Promise | ProjectSchema;
+export type ProjectPreProcessor = (schema: IPublicTypeProjectSchema) =>
+ Promise | IPublicTypeProjectSchema;
+
+export interface ProjectPostProcessorOptions {
+ parseResult?: IParseResult;
+ template?: IProjectTemplate;
+}
/** 项目级别的后置处理器 */
export type ProjectPostProcessor = (
result: ResultDir,
- schema: ProjectSchema,
- originalSchema: ProjectSchema | string,
+ schema: IPublicTypeProjectSchema,
+ originalSchema: IPublicTypeProjectSchema | string,
+ options: ProjectPostProcessorOptions,
) => Promise | ResultDir;
/** 模块级别的后置处理器的工厂方法 */
export type PostProcessorFactory = (config?: T) => PostProcessor;
/** 模块级别的后置处理器 */
-export type PostProcessor = (content: string, fileType: string) => string;
+export type PostProcessor = (content: string, fileType: string, name?: string) => string;
// TODO: temp interface, need modify
export interface IPluginOptions {
@@ -198,20 +215,20 @@ type CompositeTypeGenerator =
| BaseGenerator
| Array>;
-export type NodeGenerator = (nodeItem: NodeDataType, scope: IScope) => T;
+export type NodeGenerator = (nodeItem: IPublicTypeNodeDataType, scope: IScope) => T;
// FIXME: 在新的实现中，添加了第一参数 this: CustomHandlerSet 作为上下文。究其本质
// scopeBindings?: IScopeBindings;
-// 这个组合只用来用来处理 CompositeValue 类型，不是这个类型的不要放在这里
+// 这个组合只用来用来处理 IPublicTypeCompositeValue 类型，不是这个类型的不要放在这里
export interface HandlerSet {
string?: CompositeTypeGenerator;
boolean?: CompositeTypeGenerator;
number?: CompositeTypeGenerator;
- expression?: CompositeTypeGenerator;
- function?: CompositeTypeGenerator;
- slot?: CompositeTypeGenerator;
- array?: CompositeTypeGenerator;
- object?: CompositeTypeGenerator;
+ expression?: CompositeTypeGenerator;
+ function?: CompositeTypeGenerator;
+ slot?: CompositeTypeGenerator;
+ array?: CompositeTypeGenerator;
+ object?: CompositeTypeGenerator;
}
export interface CompositeValueGeneratorOptions {
diff --git a/modules/code-generator/src/types/deps.ts b/modules/code-generator/src/types/deps.ts
index cb2fb5eac4..a6531092d5 100644
--- a/modules/code-generator/src/types/deps.ts
+++ b/modules/code-generator/src/types/deps.ts
@@ -35,4 +35,4 @@ export interface IDependency {
main?: string; // 包导出组件入口文件路径 /lib/input
dependencyType?: DependencyType; // 依赖类型 内/外
componentName?: string; // 导入后名称
-}
+}
\ No newline at end of file
diff --git a/modules/code-generator/src/types/intermediate.ts b/modules/code-generator/src/types/intermediate.ts
index 43d8f0e844..7cba0bd44b 100644
--- a/modules/code-generator/src/types/intermediate.ts
+++ b/modules/code-generator/src/types/intermediate.ts
@@ -1,4 +1,9 @@
-import { I18nMap, UtilsMap, ContainerSchema, JSONObject } from '@alilc/lowcode-types';
+import {
+ IPublicTypeI18nMap,
+ IPublicTypeUtilsMap,
+ IPublicTypeContainerSchema,
+ IPublicTypeJSONObject,
+} from '@alilc/lowcode-types';
import { IDependency, INpmPackage } from './deps';
import { ICompAnalyzeResult } from './analyze';
@@ -6,7 +11,7 @@ import { ICompAnalyzeResult } from './analyze';
export interface IParseResult {
containers: IContainerInfo[];
globalUtils?: IUtilInfo;
- globalI18n?: I18nMap;
+ globalI18n?: IPublicTypeI18nMap;
globalRouter?: IRouterInfo;
project?: IProjectInfo;
}
@@ -15,14 +20,14 @@ export interface IWithDependency {
deps?: IDependency[];
}
-export interface IContainerInfo extends ContainerSchema, IWithDependency {
+export interface IContainerInfo extends IPublicTypeContainerSchema, IWithDependency {
containerType: string;
moduleName: string;
analyzeResult?: ICompAnalyzeResult;
}
export interface IUtilInfo extends IWithDependency {
- utils: UtilsMap;
+ utils: IPublicTypeUtilsMap;
}
export interface IRouterInfo extends IWithDependency {
@@ -33,16 +38,26 @@ export interface IRouterInfo extends IWithDependency {
}>;
}
+/**
+ * project's remarks
+ */
+export interface ProjectRemark {
+
+ /** if current project only contain one container which type is `Component` */
+ isSingleComponent?: boolean;
+}
+
export interface IProjectInfo {
css?: string;
containersDeps?: IDependency[];
utilsDeps?: IDependency[];
- constants?: JSONObject;
- i18n?: I18nMap;
+ constants?: IPublicTypeJSONObject;
+ i18n?: IPublicTypeI18nMap;
packages: INpmPackage[];
meta?: { name?: string; title?: string } | Record;
config?: Record;
dataSourcesTypes?: string[];
+ projectRemark?: ProjectRemark;
}
export interface IPageMeta {
diff --git a/modules/code-generator/src/types/jsx.ts b/modules/code-generator/src/types/jsx.ts
index c79f1d2070..28f948d639 100644
--- a/modules/code-generator/src/types/jsx.ts
+++ b/modules/code-generator/src/types/jsx.ts
@@ -1,4 +1,4 @@
-import { NodeSchema, CompositeValue } from '@alilc/lowcode-types';
+import { IPublicTypeNodeSchema, IPublicTypeCompositeValue } from '@alilc/lowcode-types';
import { HandlerSet, BaseGenerator, NodeGenerator } from './core';
export enum PIECE_TYPE {
@@ -17,11 +17,11 @@ export interface CodePiece {
export interface AttrData {
attrName: string;
- attrValue: CompositeValue;
+ attrValue: IPublicTypeCompositeValue;
}
-// 对 JSX 出码的理解，目前定制点包含 【包装】【标签名】【属性】
+// 对 JSX 出码的理解，目前定制点包含【包装】【标签名】【属性】
export type AttrPlugin = BaseGenerator;
-export type NodePlugin = BaseGenerator;
+export type NodePlugin = BaseGenerator;
export interface NodeGeneratorConfig {
handlers?: HandlerSet;
@@ -33,7 +33,7 @@ export interface NodeGeneratorConfig {
/**
* 是否要容忍对 JSExpression 求值时的异常
* 默认：true
- * 注: 如果容忍异常，则会在求值时包裹 try-catch 块 -- 通过 __$$eval / __$$evalArray
+ * 注：如果容忍异常，则会在求值时包裹 try-catch 块 -- 通过 __$$eval / __$$evalArray
* catch 到异常时默认会抛出一个 CustomEvent 事件里面包含异常信息和求值的表达式
*/
tolerateEvalErrors?: boolean;
diff --git a/modules/code-generator/src/utils/common.ts b/modules/code-generator/src/utils/common.ts
index cfba393e96..fa7ab30a95 100644
--- a/modules/code-generator/src/utils/common.ts
+++ b/modules/code-generator/src/utils/common.ts
@@ -1,5 +1,7 @@
+import type { IPublicTypeJSExpression, IPublicTypeJSFunction } from '@alilc/lowcode-types';
import changeCase from 'change-case';
import short from 'short-uuid';
+import { DependencyType, IDependency, IExternalDependency, IInternalDependency } from '../types';
// Doc: https://www.npmjs.com/package/change-case
@@ -39,3 +41,19 @@ export function getStaticExprValue(expr: string): T {
// eslint-disable-next-line no-new-func
return Function(`"use strict";return (${expr})`)();
}
+
+export function isJSExpressionFn(data: any): data is IPublicTypeJSFunction {
+ return data?.type === 'JSExpression' && data?.extType === 'function';
+}
+
+export function isInternalDependency(
+ dependency: IDependency,
+): dependency is IInternalDependency {
+ return dependency.dependencyType === DependencyType.Internal;
+}
+
+export function isExternalDependency(
+ dependency: IDependency,
+): dependency is IExternalDependency {
+ return dependency.dependencyType === DependencyType.External;
+}
\ No newline at end of file
diff --git a/modules/code-generator/src/utils/compositeType.ts b/modules/code-generator/src/utils/compositeType.ts
index b66e1279c0..0dd612641d 100644
--- a/modules/code-generator/src/utils/compositeType.ts
+++ b/modules/code-generator/src/utils/compositeType.ts
@@ -1,13 +1,13 @@
import {
- CompositeArray,
- CompositeValue,
- CompositeObject,
- JSFunction,
- JSExpression,
+ IPublicTypeCompositeArray,
+ IPublicTypeCompositeValue,
+ IPublicTypeCompositeObject,
+ IPublicTypeJSFunction,
+ IPublicTypeJSExpression,
isJSExpression,
isJSFunction,
isJSSlot,
- JSSlot,
+ IPublicTypeJSSlot,
} from '@alilc/lowcode-types';
import _ from 'lodash';
@@ -16,6 +16,7 @@ import { generateExpression, generateFunction } from './jsExpression';
import { generateJsSlot } from './jsSlot';
import { executeFunctionStack } from './aopHelper';
import { parseExpressionGetKeywords } from './expressionParser';
+import { isJSExpressionFn } from './common';
interface ILegaoVariable {
type: 'variable';
@@ -43,7 +44,7 @@ function isDataSource(v: unknown): v is DataSource {
}
function generateArray(
- value: CompositeArray,
+ value: IPublicTypeCompositeArray,
scope: IScope,
options: CompositeValueGeneratorOptions = {},
): string {
@@ -52,7 +53,7 @@ function generateArray(
}
function generateObject(
- value: CompositeObject,
+ value: IPublicTypeCompositeObject,
scope: IScope,
options: CompositeValueGeneratorOptions = {},
): string {
@@ -88,7 +89,7 @@ function generateBool(value: boolean): string {
return value ? 'true' : 'false';
}
-function genFunction(value: JSFunction): string {
+function genFunction(value: IPublicTypeJSFunction): string {
const globalVars = parseExpressionGetKeywords(value.value);
if (globalVars.includes('arguments')) {
@@ -98,7 +99,7 @@ function genFunction(value: JSFunction): string {
return generateFunction(value, { isArrow: true });
}
-function genJsSlot(value: JSSlot, scope: IScope, options: CompositeValueGeneratorOptions = {}) {
+function genJsSlot(value: IPublicTypeJSSlot, scope: IScope, options: CompositeValueGeneratorOptions = {}) {
if (options.nodeGenerator) {
return generateJsSlot(value, scope, options.nodeGenerator);
}
@@ -106,7 +107,7 @@ function genJsSlot(value: JSSlot, scope: IScope, options: CompositeValueGenerato
}
function generateUnknownType(
- value: CompositeValue,
+ value: IPublicTypeCompositeValue,
scope: IScope,
options: CompositeValueGeneratorOptions = {},
): string {
@@ -128,7 +129,7 @@ function generateUnknownType(
// FIXME: 这个是临时方案
// 在遇到 type variable 私有类型时，转换为 JSExpression
if (isVariable(value)) {
- const transValue: JSExpression = {
+ const transValue: IPublicTypeJSExpression = {
type: 'JSExpression',
value: value.variable,
};
@@ -159,7 +160,7 @@ function generateUnknownType(
return generateExpression(value, scope);
}
- if (isJSFunction(value)) {
+ if (isJSFunction(value) || isJSExpressionFn(value)) {
if (options.handlers?.function) {
return executeFunctionStack(value, scope, options.handlers.function, genFunction, options);
}
@@ -188,7 +189,7 @@ function generateUnknownType(
if (options.handlers?.object) {
return executeFunctionStack(value, scope, options.handlers.object, generateObject, options);
}
- return generateObject(value as CompositeObject, scope, options);
+ return generateObject(value as IPublicTypeCompositeObject, scope, options);
}
if (_.isString(value)) {
@@ -218,7 +219,7 @@ function generateUnknownType(
// 这一层曾经是对产出做最外层包装的，但其实包装逻辑不应该属于这一层
// 这一层先不去掉，做冗余，方便后续重构
export function generateCompositeType(
- value: CompositeValue,
+ value: IPublicTypeCompositeValue,
scope: IScope,
options: CompositeValueGeneratorOptions = {},
): string {
diff --git a/modules/code-generator/src/utils/dataSource.ts b/modules/code-generator/src/utils/dataSource.ts
index 610f399344..5595b8defd 100644
--- a/modules/code-generator/src/utils/dataSource.ts
+++ b/modules/code-generator/src/utils/dataSource.ts
@@ -1,20 +1,24 @@
import changeCase from 'change-case';
import type { IProjectInfo } from '../types/intermediate';
-export type DataSourceDependenciesConfig = {
+export interface DataSourceDependenciesConfig {
+
/** 数据源引擎的版本 */
engineVersion?: string;
+
/** 数据源引擎的包名 */
enginePackage?: string;
+
/** 数据源 handlers 的版本 */
handlersVersion?: {
[key: string]: string;
};
+
/** 数据源 handlers 的包名 */
handlersPackages?: {
[key: string]: string;
};
-};
+}
export function buildDataSourceDependencies(
ir: IProjectInfo,
@@ -22,13 +26,13 @@ export function buildDataSourceDependencies(
): Record {
return {
// 数据源引擎的依赖包
- [cfg.enginePackage || '@alilc/lowcode-datasource-engine']: cfg.engineVersion || 'latest',
+ [cfg.enginePackage || '@alilc/lowcode-datasource-engine']: cfg.engineVersion || '^1.0.0',
// 各种数据源的 handlers 的依赖包
...(ir.dataSourcesTypes || []).reduce(
(acc, dsType) => ({
...acc,
- [getDataSourceHandlerPackageName(dsType)]: cfg.handlersVersion?.[dsType] || 'latest',
+ [getDataSourceHandlerPackageName(dsType)]: cfg.handlersVersion?.[dsType] || '^1.0.0',
}),
{},
),
diff --git a/modules/code-generator/src/utils/expressionParser.ts b/modules/code-generator/src/utils/expressionParser.ts
index cbc950bbc8..15320b9637 100644
--- a/modules/code-generator/src/utils/expressionParser.ts
+++ b/modules/code-generator/src/utils/expressionParser.ts
@@ -167,7 +167,7 @@ export function parseExpressionGetKeywords(expr: string | null | undefined): str
],
});
- const addIdentifierIfNeeded = (x: Record | number | null | undefined) => {
+ const addIdentifierIfNeeded = (x: Node | null | undefined) => {
if (typeof x === 'object' && isIdentifier(x) && JS_KEYWORDS.includes(x.name)) {
keywordVars.add(x.name);
}
@@ -189,7 +189,7 @@ export function parseExpressionGetKeywords(expr: string | null | undefined): str
addIdentifierIfNeeded(item);
});
} else {
- addIdentifierIfNeeded(fieldValue as Record | null);
+ addIdentifierIfNeeded(fieldValue as any);
}
}
});
@@ -217,7 +217,7 @@ export function parseExpressionGetGlobalVariables(
const ast = parser.parse(`!(${expr});`);
const addUndeclaredIdentifierIfNeeded = (
- x: Record | number | null | undefined,
+ x: Node | null | undefined,
path: NodePath,
) => {
if (typeof x === 'object' && isIdentifier(x) && !path.scope.hasBinding(x.name)) {
@@ -241,7 +241,7 @@ export function parseExpressionGetGlobalVariables(
addUndeclaredIdentifierIfNeeded(item, path);
});
} else {
- addUndeclaredIdentifierIfNeeded(fieldValue as Record | null, path);
+ addUndeclaredIdentifierIfNeeded(fieldValue as any, path);
}
}
});
diff --git a/modules/code-generator/src/utils/format.ts b/modules/code-generator/src/utils/format.ts
new file mode 100644
index 0000000000..7c865e8f34
--- /dev/null
+++ b/modules/code-generator/src/utils/format.ts
@@ -0,0 +1,12 @@
+import prettier from 'prettier';
+import parserBabel from 'prettier/parser-babel';
+
+export function format(content: string, options = {}) {
+ return prettier.format(content, {
+ parser: 'babel',
+ plugins: [parserBabel],
+ singleQuote: true,
+ jsxSingleQuote: false,
+ ...options,
+ });
+}
diff --git a/modules/code-generator/src/utils/index.ts b/modules/code-generator/src/utils/index.ts
index ff5194172d..8c41d678ff 100644
--- a/modules/code-generator/src/utils/index.ts
+++ b/modules/code-generator/src/utils/index.ts
@@ -11,6 +11,8 @@ import * as schema from './schema';
import * as version from './version';
import * as scope from './Scope';
import * as expressionParser from './expressionParser';
+import * as dataSource from './dataSource';
+import * as pathHelper from './pathHelper';
export {
common,
@@ -25,4 +27,6 @@ export {
version,
scope,
expressionParser,
+ dataSource,
+ pathHelper,
};
diff --git a/modules/code-generator/src/utils/jsExpression.ts b/modules/code-generator/src/utils/jsExpression.ts
index d6dc8c0273..08d2fafd8a 100644
--- a/modules/code-generator/src/utils/jsExpression.ts
+++ b/modules/code-generator/src/utils/jsExpression.ts
@@ -2,9 +2,10 @@ import * as parser from '@babel/parser';
import generate from '@babel/generator';
import traverse from '@babel/traverse';
import * as t from '@babel/types';
-import { JSExpression, JSFunction, isJSExpression, isJSFunction } from '@alilc/lowcode-types';
+import { IPublicTypeJSExpression, IPublicTypeJSFunction, isJSExpression, isJSFunction } from '@alilc/lowcode-types';
import { CodeGeneratorError, IScope } from '../types';
import { transformExpressionLocalRef, ParseError } from './expressionParser';
+import { isJSExpressionFn } from './common';
function parseFunction(content: string): t.FunctionExpression | null {
try {
@@ -78,13 +79,18 @@ function getBodyStatements(content: string) {
throw new Error('Can not find Function Statement');
}
-export function isJsCode(value: unknown): boolean {
- return isJSExpression(value) || isJSFunction(value);
+/**
+ * 是否是广义上的 JSFunction
+ * @param value
+ * @returns
+ */
+export function isBroadJSFunction(value: unknown): boolean {
+ return isJSExpressionFn(value) || isJSFunction(value);
}
export function generateExpression(value: any, scope: IScope): string {
if (isJSExpression(value)) {
- const exprVal = (value as JSExpression).value.trim();
+ const exprVal = (value as IPublicTypeJSExpression).value.trim();
if (!exprVal) {
return 'null';
}
@@ -96,6 +102,10 @@ export function generateExpression(value: any, scope: IScope): string {
throw new CodeGeneratorError('Not a JSExpression');
}
+function getFunctionSource(cfg: IPublicTypeJSFunction): string {
+ return cfg.source || cfg.value || cfg.compiled;
+}
+
export function generateFunction(
value: any,
config: {
@@ -112,21 +122,26 @@ export function generateFunction(
isBindExpr: false,
},
) {
- if (isJsCode(value)) {
- const functionCfg = value as JSFunction;
+ if (isBroadJSFunction(value)) {
+ const functionCfg = value as IPublicTypeJSFunction;
+ const functionSource = getFunctionSource(functionCfg);
if (config.isMember) {
- return transformFuncExpr2MethodMember(config.name || '', functionCfg.value);
+ return transformFuncExpr2MethodMember(config.name || '', functionSource);
}
if (config.isBlock) {
- return getBodyStatements(functionCfg.value);
+ return getBodyStatements(functionSource);
}
if (config.isArrow) {
- return getArrowFunction(functionCfg.value);
+ return getArrowFunction(functionSource);
}
if (config.isBindExpr) {
- return `(${functionCfg.value}).bind(this)`;
+ return `(${functionSource}).bind(this)`;
}
- return functionCfg.value;
+ return functionSource;
+ }
+
+ if (isJSExpression(value)) {
+ return value.value;
}
throw new CodeGeneratorError('Not a JSFunction or JSExpression');
diff --git a/modules/code-generator/src/utils/jsSlot.ts b/modules/code-generator/src/utils/jsSlot.ts
index 49f7b31704..265f6857f2 100644
--- a/modules/code-generator/src/utils/jsSlot.ts
+++ b/modules/code-generator/src/utils/jsSlot.ts
@@ -1,4 +1,4 @@
-import { JSSlot, isJSSlot, NodeData } from '@alilc/lowcode-types';
+import { IPublicTypeJSSlot, isJSSlot, IPublicTypeNodeData } from '@alilc/lowcode-types';
import { CodeGeneratorError, NodeGenerator, IScope } from '../types';
import { unwrapJsExprQuoteInJsx } from './jsxHelpers';
@@ -8,7 +8,7 @@ function generateSingleLineComment(commentText: string): string {
export function generateJsSlot(slot: any, scope: IScope, generator: NodeGenerator): string {
if (isJSSlot(slot)) {
- const { title, params, value } = slot as JSSlot;
+ const { title, params, value } = slot as IPublicTypeJSSlot;
// slot 也是分有参数和无参数的
// - 有参数的 slot 就是类似一个 render 函数，需要创建子作用域
@@ -39,7 +39,7 @@ export function generateJsSlot(slot: any, scope: IScope, generator: NodeGenerato
}
function generateNodeDataOrArrayForJsSlot(
- value: NodeData | NodeData[],
+ value: IPublicTypeNodeData | IPublicTypeNodeData[],
generator: NodeGenerator,
scope: IScope,
) {
diff --git a/modules/code-generator/src/utils/nodeToJSX.ts b/modules/code-generator/src/utils/nodeToJSX.ts
index 0b5919902f..d29f28762c 100644
--- a/modules/code-generator/src/utils/nodeToJSX.ts
+++ b/modules/code-generator/src/utils/nodeToJSX.ts
@@ -1,6 +1,6 @@
import _ from 'lodash';
import { pipe } from 'fp-ts/function';
-import { NodeSchema, isNodeSchema, NodeDataType, CompositeValue } from '@alilc/lowcode-types';
+import { IPublicTypeNodeSchema, isNodeSchema, IPublicTypeNodeDataType, IPublicTypeCompositeValue } from '@alilc/lowcode-types';
import {
IScope,
@@ -19,6 +19,7 @@ import { executeFunctionStack } from './aopHelper';
import { encodeJsxStringNode } from './encodeJsxAttrString';
import { unwrapJsExprQuoteInJsx } from './jsxHelpers';
import { transformThis2Context } from '../core/jsx/handlers/transformThis2Context';
+import { isValidIdentifier } from './validate';
function mergeNodeGeneratorConfig(
cfg1: NodeGeneratorConfig,
@@ -57,7 +58,7 @@ export function isPureString(v: string) {
}
function generateAttrValue(
- attrData: { attrName: string; attrValue: CompositeValue },
+ attrData: { attrName: string; attrValue: IPublicTypeCompositeValue },
scope: IScope,
config?: NodeGeneratorConfig,
): CodePiece[] {
@@ -76,7 +77,7 @@ function generateAttrValue(
function generateAttr(
attrName: string,
- attrValue: CompositeValue,
+ attrValue: IPublicTypeCompositeValue,
scope: IScope,
config?: NodeGeneratorConfig,
): CodePiece[] {
@@ -115,7 +116,7 @@ function generateAttr(
}
function generateAttrs(
- nodeItem: NodeSchema,
+ nodeItem: IPublicTypeNodeSchema,
scope: IScope,
config?: NodeGeneratorConfig,
): CodePiece[] {
@@ -126,11 +127,13 @@ function generateAttrs(
if (props) {
if (!Array.isArray(props)) {
Object.keys(props).forEach((propName: string) => {
- pieces = pieces.concat(generateAttr(propName, props[propName], scope, config));
+ if (isValidIdentifier(propName)) {
+ pieces = pieces.concat(generateAttr(propName, props[propName] as IPublicTypeCompositeValue, scope, config));
+ }
});
} else {
props.forEach((prop) => {
- if (prop.name && !prop.spread) {
+ if (prop.name && isValidIdentifier(prop.name) && !prop.spread) {
pieces = pieces.concat(generateAttr(prop.name, prop.value, scope, config));
}
@@ -144,7 +147,7 @@ function generateAttrs(
}
function generateBasicNode(
- nodeItem: NodeSchema,
+ nodeItem: IPublicTypeNodeSchema,
scope: IScope,
config?: NodeGeneratorConfig,
): CodePiece[] {
@@ -160,7 +163,7 @@ function generateBasicNode(
}
function generateSimpleNode(
- nodeItem: NodeSchema,
+ nodeItem: IPublicTypeNodeSchema,
scope: IScope,
config?: NodeGeneratorConfig,
): CodePiece[] {
@@ -182,7 +185,7 @@ function generateSimpleNode(
function linkPieces(pieces: CodePiece[]): string {
const tagsPieces = pieces.filter((p) => p.type === PIECE_TYPE.TAG);
if (tagsPieces.length !== 1) {
- throw new CodeGeneratorError('One node only need one tag define');
+ throw new CodeGeneratorError('Only one tag definition required', tagsPieces);
}
const tagName = tagsPieces[0].value;
@@ -216,13 +219,13 @@ function linkPieces(pieces: CodePiece[]): string {
}
function generateNodeSchema(
- nodeItem: NodeSchema,
+ nodeItem: IPublicTypeNodeSchema,
scope: IScope,
config?: NodeGeneratorConfig,
): string {
const pieces: CodePiece[] = [];
if (config?.nodePlugins) {
- const res = executeFunctionStack(
+ const res = executeFunctionStack(
nodeItem,
scope,
config.nodePlugins,
@@ -247,11 +250,11 @@ function generateNodeSchema(
* @type NodePlugin Extended
*
* @export
- * @param {NodeSchema} nodeItem 当前 UI 节点
+ * @param {IPublicTypeNodeSchema} nodeItem 当前 UI 节点
* @returns {CodePiece[]} 实现功能的相关代码片段
*/
export function generateReactLoopCtrl(
- nodeItem: NodeSchema,
+ nodeItem: IPublicTypeNodeSchema,
scope: IScope,
config?: NodeGeneratorConfig,
next?: NodePlugin,
@@ -270,8 +273,7 @@ export function generateReactLoopCtrl(
const loopDataExpr = pipe(
nodeItem.loop,
// 将 JSExpression 转换为 JS 表达式代码:
- (expr) =>
- generateCompositeType(expr, scope, {
+ (expr) => generateCompositeType(expr, scope, {
handlers: config?.handlers,
tolerateEvalErrors: false, // 这个内部不需要包 try catch, 下面会统一加的
}),
@@ -302,11 +304,11 @@ export function generateReactLoopCtrl(
* @type NodePlugin
*
* @export
- * @param {NodeSchema} nodeItem 当前 UI 节点
+ * @param {IPublicTypeNodeSchema} nodeItem 当前 UI 节点
* @returns {CodePiece[]} 实现功能的相关代码片段
*/
export function generateConditionReactCtrl(
- nodeItem: NodeSchema,
+ nodeItem: IPublicTypeNodeSchema,
scope: IScope,
config?: NodeGeneratorConfig,
next?: NodePlugin,
@@ -337,11 +339,11 @@ export function generateConditionReactCtrl(
* @type NodePlugin
*
* @export
- * @param {NodeSchema} nodeItem 当前 UI 节点
+ * @param {IPublicTypeNodeSchema} nodeItem 当前 UI 节点
* @returns {CodePiece[]} 实现功能的相关代码片段
*/
export function generateReactExprInJS(
- nodeItem: NodeSchema,
+ nodeItem: IPublicTypeNodeSchema,
scope: IScope,
config?: NodeGeneratorConfig,
next?: NodePlugin,
@@ -366,7 +368,7 @@ export function generateReactExprInJS(
const handleChildren = (v: string[]) => v.join('');
export function createNodeGenerator(cfg: NodeGeneratorConfig = {}): NodeGenerator {
- const generateNode = (nodeItem: NodeDataType, scope: IScope): string => {
+ const generateNode = (nodeItem: IPublicTypeNodeDataType, scope: IScope): string => {
if (_.isArray(nodeItem)) {
const resList = nodeItem.map((n) => generateNode(n, scope));
return handleChildren(resList);
@@ -391,8 +393,7 @@ export function createNodeGenerator(cfg: NodeGeneratorConfig = {}): NodeGenerato
return `{${valueStr}}`;
};
- return (nodeItem: NodeDataType, scope: IScope) =>
- unwrapJsExprQuoteInJsx(generateNode(nodeItem, scope));
+ return (nodeItem: IPublicTypeNodeDataType, scope: IScope) => unwrapJsExprQuoteInJsx(generateNode(nodeItem, scope));
}
const defaultReactGeneratorConfig: NodeGeneratorConfig = {
diff --git a/modules/code-generator/src/utils/pathHelper.ts b/modules/code-generator/src/utils/pathHelper.ts
new file mode 100644
index 0000000000..8440089d89
--- /dev/null
+++ b/modules/code-generator/src/utils/pathHelper.ts
@@ -0,0 +1,41 @@
+import { IContextData } from '../types';
+
+function relativePath(from: string[], to: string[]): string[] {
+ const length = Math.min(from.length, to.length);
+ let samePartsLength = length;
+ for (let i = 0; i < length; i++) {
+ if (from[i] !== to[i]) {
+ samePartsLength = i;
+ break;
+ }
+ }
+ if (samePartsLength === 0) {
+ return to;
+ }
+ let outputParts = [];
+ for (let i = samePartsLength; i < from.length; i++) {
+ outputParts.push('..');
+ }
+ outputParts = [...outputParts, ...to.slice(samePartsLength)];
+ if (outputParts[0] !== '..') {
+ outputParts.unshift('.');
+ }
+ return outputParts;
+}
+
+export function getSlotRelativePath(options: {
+ contextData: IContextData;
+ from: string;
+ to: string;
+}) {
+ const { contextData, from, to } = options;
+ const isSingleComponent = contextData?.extraContextData?.projectRemark?.isSingleComponent;
+ const template = contextData?.extraContextData?.template;
+ let toPath = template.slots[to].path;
+ toPath = [...toPath, template.slots[to].fileName!];
+ let fromPath = template.slots[from].path;
+ if (!isSingleComponent && ['components', 'pages'].indexOf(from) !== -1) {
+ fromPath = [...fromPath, 'pageName'];
+ }
+ return relativePath(fromPath, toPath).join('/');
+}
\ No newline at end of file
diff --git a/modules/code-generator/src/utils/schema.ts b/modules/code-generator/src/utils/schema.ts
index b2faecbc64..f9529945eb 100644
--- a/modules/code-generator/src/utils/schema.ts
+++ b/modules/code-generator/src/utils/schema.ts
@@ -1,20 +1,21 @@
import * as _ from 'lodash';
import {
- JSExpression,
- NodeData,
- NodeSchema,
+ IPublicTypeJSExpression,
+ IPublicTypeNodeData,
+ IPublicTypeNodeSchema,
isJSExpression,
isJSSlot,
isDOMText,
- ContainerSchema,
- NpmInfo,
- CompositeValue,
+ IPublicTypeContainerSchema,
+ IPublicTypeNpmInfo,
+ IPublicTypeCompositeValue,
isNodeSchema,
isJSFunction,
} from '@alilc/lowcode-types';
import { CodeGeneratorError } from '../types/error';
+import { isJSExpressionFn } from './common';
-export function isContainerSchema(x: any): x is ContainerSchema {
+export function isContainerSchema(x: any): x is IPublicTypeContainerSchema {
return (
typeof x === 'object' &&
x &&
@@ -23,7 +24,7 @@ export function isContainerSchema(x: any): x is ContainerSchema {
);
}
-export function isNpmInfo(x: any): x is NpmInfo {
+export function isNpmInfo(x: any): x is IPublicTypeNpmInfo {
return typeof x === 'object' && x && typeof x.package === 'string';
}
@@ -43,11 +44,11 @@ const DEFAULT_MAX_DEPTH = 100000;
* @returns
*/
export function handleSubNodes(
- children: NodeSchema['children'],
+ children: IPublicTypeNodeSchema['children'],
handlers: {
string?: (i: string) => T;
- expression?: (i: JSExpression) => T;
- node?: (i: NodeSchema) => T;
+ expression?: (i: IPublicTypeJSExpression) => T;
+ node?: (i: IPublicTypeNodeSchema) => T;
},
options?: {
rerun?: boolean;
@@ -64,7 +65,7 @@ export function handleSubNodes(
}
if (Array.isArray(children)) {
- const list: NodeData[] = children as NodeData[];
+ const list: IPublicTypeNodeData[] = children as IPublicTypeNodeData[];
return list
.map((child) => handleSubNodes(child, handlers, { ...opt, maxDepth: maxDepth - 1 }))
.reduce((p, c) => p.concat(c), []);
@@ -84,7 +85,7 @@ export function handleSubNodes(
return handleSubNodes(children.value, handlers, { ...opt, maxDepth: maxDepth - 1 });
} else if (isNodeSchema(children)) {
const handler = handlers.node || noop;
- const child = children as NodeSchema;
+ const child = children as IPublicTypeNodeSchema;
result = handler(child);
if (child.children) {
@@ -100,7 +101,7 @@ export function handleSubNodes(
});
} else {
Object.values(child.props).forEach((value) => {
- const childRes = handleCompositeValueInProps(value);
+ const childRes = handleCompositeValueInProps(value as IPublicTypeCompositeValue);
childrenRes.push(...childRes);
});
}
@@ -115,7 +116,7 @@ export function handleSubNodes(
return childrenRes;
- function handleCompositeValueInProps(value: CompositeValue): T[] {
+ function handleCompositeValueInProps(value: IPublicTypeCompositeValue): T[] {
if (isJSSlot(value)) {
return handleSubNodes(value.value, handlers, { ...opt, maxDepth: maxDepth - 1 });
}
@@ -125,9 +126,10 @@ export function handleSubNodes(
return _.flatMap(value, (v) => handleCompositeValueInProps(v));
}
- // CompositeObject
+ // IPublicTypeCompositeObject
if (
!isJSExpression(value) &&
+ !isJSExpressionFn(value) &&
!isJSFunction(value) &&
typeof value === 'object' &&
value !== null
@@ -138,3 +140,17 @@ export function handleSubNodes(
return [];
}
}
+
+export function isValidContainerType(schema: IPublicTypeNodeSchema) {
+ return [
+ 'Page',
+ 'Component',
+ 'Block',
+ ].includes(schema.componentName);
+}
+
+export const enum ContainerType {
+ Page = 'Page',
+ Component = 'Component',
+ Block = 'Block',
+}
\ No newline at end of file
diff --git a/modules/code-generator/src/utils/theme.ts b/modules/code-generator/src/utils/theme.ts
new file mode 100644
index 0000000000..590cf711cf
--- /dev/null
+++ b/modules/code-generator/src/utils/theme.ts
@@ -0,0 +1,20 @@
+/**
+ * 获取主题信息
+ * @param theme theme 形如 @alife/theme-97 或者 @alife/theme-97@^1.0.0
+ */
+
+export interface ThemeInfo {
+ name: string;
+ version?: string;
+}
+
+export function getThemeInfo(theme: string): ThemeInfo {
+ const sepIdx = theme.indexOf('@', 1);
+ if (sepIdx === -1) {
+ return { name: theme };
+ }
+ return {
+ name: theme.slice(0, sepIdx),
+ version: theme.slice(sepIdx + 1),
+ };
+}
\ No newline at end of file
diff --git a/modules/code-generator/tests/bugfix/i18n-with-params.test.ts b/modules/code-generator/tests/bugfix/i18n-with-params.test.ts
index be2d5e9e68..b58afda8cf 100644
--- a/modules/code-generator/tests/bugfix/i18n-with-params.test.ts
+++ b/modules/code-generator/tests/bugfix/i18n-with-params.test.ts
@@ -1,7 +1,7 @@
import CodeGenerator from '../../src';
import * as fs from 'fs';
import * as path from 'path';
-import { ProjectSchema } from '@alilc/lowcode-types';
+import { IPublicTypeProjectSchema } from '@alilc/lowcode-types';
import { createDiskPublisher } from '../helpers/solutionHelper';
const testCaseBaseName = path.basename(__filename, '.test.ts');
@@ -19,7 +19,7 @@ describe(testCaseBaseName, () => {
`
,
+ mergeSchema?: Partial,
) {
const schemaJsonStr = fs.readFileSync(importPath, { encoding: 'utf8' });
const schema = { ...JSON.parse(schemaJsonStr), ...mergeSchema };
diff --git a/modules/code-generator/tests/bugfix/icejs-import-wrong-naming.test.ts b/modules/code-generator/tests/bugfix/icejs-import-wrong-naming.test.ts
index 51e22b3a97..efb7fd5bee 100644
--- a/modules/code-generator/tests/bugfix/icejs-import-wrong-naming.test.ts
+++ b/modules/code-generator/tests/bugfix/icejs-import-wrong-naming.test.ts
@@ -1,7 +1,7 @@
import CodeGenerator from '../../src';
import * as fs from 'fs';
import * as path from 'path';
-import { ProjectSchema } from '@alilc/lowcode-types';
+import { IPublicTypeProjectSchema } from '@alilc/lowcode-types';
import { createDiskPublisher } from '../helpers/solutionHelper';
const testCaseBaseName = path.basename(__filename, '.test.ts');
@@ -27,7 +27,7 @@ describe(testCaseBaseName, () => {
});
const generatedPageFileContent = readOutputTextFile('demo-project/src/pages/Test/index.jsx');
- expect(generatedPageFileContent).toContain(`import Foo from "example-package/lib/index.js";`);
+ expect(generatedPageFileContent).toContain('import Foo from \'example-package/lib/index.js\';');
});
test('named import with no alias', async () => {
@@ -47,7 +47,7 @@ describe(testCaseBaseName, () => {
const generatedPageFileContent = readOutputTextFile('demo-project/src/pages/Test/index.jsx');
expect(generatedPageFileContent).toContain(
- `import { Foo } from "example-package/lib/index.js";`,
+ 'import { Foo } from \'example-package/lib/index.js\';',
);
});
@@ -68,7 +68,7 @@ describe(testCaseBaseName, () => {
const generatedPageFileContent = readOutputTextFile('demo-project/src/pages/Test/index.jsx');
expect(generatedPageFileContent).toContain(
- `import { Bar as Foo } from "example-package/lib/index.js";`,
+ 'import { Bar as Foo } from \'example-package/lib/index.js\';',
);
});
@@ -88,7 +88,7 @@ describe(testCaseBaseName, () => {
});
const generatedPageFileContent = readOutputTextFile('demo-project/src/pages/Test/index.jsx');
- expect(generatedPageFileContent).toContain(`import Foo from "example-package/lib/index.js";`);
+ expect(generatedPageFileContent).toContain('import Foo from \'example-package/lib/index.js\';');
});
test('default import with sub name and export name', async () => {
@@ -107,9 +107,9 @@ describe(testCaseBaseName, () => {
});
const generatedPageFileContent = readOutputTextFile('demo-project/src/pages/Test/index.jsx');
- expect(generatedPageFileContent).toContain(`import Bar from "example-package/lib/index.js";`);
+ expect(generatedPageFileContent).toContain('import Bar from \'example-package/lib/index.js\';');
- expect(generatedPageFileContent).toContain(`const Foo = Bar.Baz;`);
+ expect(generatedPageFileContent).toContain('const Foo = Bar.Baz;');
});
test('default import with sub name without export name', async () => {
@@ -129,10 +129,10 @@ describe(testCaseBaseName, () => {
const generatedPageFileContent = readOutputTextFile('demo-project/src/pages/Test/index.jsx');
expect(generatedPageFileContent).toContain(
- `import __$examplePackage_default from "example-package/lib/index.js";`,
+ 'import __$examplePackage_default from \'example-package/lib/index.js\';',
);
- expect(generatedPageFileContent).toContain(`const Foo = __$examplePackage_default.Baz;`);
+ expect(generatedPageFileContent).toContain('const Foo = __$examplePackage_default.Baz;');
});
test('named import with sub name', async () => {
@@ -152,10 +152,10 @@ describe(testCaseBaseName, () => {
const generatedPageFileContent = readOutputTextFile('demo-project/src/pages/Test/index.jsx');
expect(generatedPageFileContent).toContain(
- `import { Bar } from "example-package/lib/index.js";`,
+ 'import { Bar } from \'example-package/lib/index.js\';',
);
- expect(generatedPageFileContent).toContain(`const Foo = Bar.Baz;`);
+ expect(generatedPageFileContent).toContain('const Foo = Bar.Baz;');
});
test('default imports with different componentName', async () => {
@@ -187,18 +187,18 @@ describe(testCaseBaseName, () => {
});
const generatedPageFileContent = readOutputTextFile('demo-project/src/pages/Test/index.jsx');
- expect(generatedPageFileContent).toContain(`import Foo from "example-package";`);
- expect(generatedPageFileContent).toContain(`import Baz from "example-package";`);
+ expect(generatedPageFileContent).toContain('import Foo from \'example-package\';');
+ expect(generatedPageFileContent).toContain('import Baz from \'example-package\';');
- expect(generatedPageFileContent).not.toContain(`const Foo =`);
- expect(generatedPageFileContent).not.toContain(`const Baz =`);
+ expect(generatedPageFileContent).not.toContain('const Foo =');
+ expect(generatedPageFileContent).not.toContain('const Baz =');
});
});
function exportProject(
importPath: string,
outputPath: string,
- mergeSchema?: Partial,
+ mergeSchema?: Partial,
) {
const schemaJsonStr = fs.readFileSync(importPath, { encoding: 'utf8' });
const schema = { ...JSON.parse(schemaJsonStr), ...mergeSchema };
diff --git a/modules/code-generator/tests/bugfix/icejs-missing-imports-1.test.ts b/modules/code-generator/tests/bugfix/icejs-missing-imports-1.test.ts
index 17c40a4fa1..cad73474ac 100644
--- a/modules/code-generator/tests/bugfix/icejs-missing-imports-1.test.ts
+++ b/modules/code-generator/tests/bugfix/icejs-missing-imports-1.test.ts
@@ -22,7 +22,7 @@ test(testCaseBaseName, async () => {
Button,
Typography,
Tag,
-} from "@alilc/antd-lowcode-materials/dist/antd-lowcode.esm.js";`);
+} from '@alilc/antd-lowcode-materials/dist/antd-lowcode.esm.js';`);
});
function exportProject(inputPath: string, outputPath: string) {
diff --git a/modules/code-generator/tests/bugfix/icejs-package-json-dependencies.test.ts b/modules/code-generator/tests/bugfix/icejs-package-json-dependencies.test.ts
index 6edd6b9124..88ca02c6ba 100644
--- a/modules/code-generator/tests/bugfix/icejs-package-json-dependencies.test.ts
+++ b/modules/code-generator/tests/bugfix/icejs-package-json-dependencies.test.ts
@@ -19,15 +19,15 @@ test(testCaseBaseName, async () => {
// 里面有的数据源则应该生成对应的 dependencies
expect(generatedPackageJson.dependencies).toMatchObject({
- '@alilc/lowcode-datasource-engine': 'latest',
- '@alilc/lowcode-datasource-fetch-handler': 'latest',
+ '@alilc/lowcode-datasource-engine': '^1.0.0',
+ '@alilc/lowcode-datasource-fetch-handler': '^1.0.0',
});
// 里面没有的，则不应该生成对应的 dependencies
expect(generatedPackageJson.dependencies).not.toMatchObject({
- '@alilc/lowcode-datasource-url-params-handler': 'latest',
- '@alilc/lowcode-datasource-mtop-handler': 'latest',
- '@alilc/lowcode-datasource-mopen-handler': 'latest',
+ '@alilc/lowcode-datasource-url-params-handler': '^1.0.0',
+ '@alilc/lowcode-datasource-mtop-handler': '^1.0.0',
+ '@alilc/lowcode-datasource-mopen-handler': '^1.0.0',
});
});
diff --git a/modules/code-generator/tests/bugfix/strict-mode-context-1.test.ts b/modules/code-generator/tests/bugfix/strict-mode-context-1.test.ts
index 9cfb09325d..ebca6a26fd 100644
--- a/modules/code-generator/tests/bugfix/strict-mode-context-1.test.ts
+++ b/modules/code-generator/tests/bugfix/strict-mode-context-1.test.ts
@@ -1,7 +1,7 @@
import CodeGenerator from '../../src';
import * as fs from 'fs';
import * as path from 'path';
-import { ProjectSchema } from '@alilc/lowcode-types';
+import { IPublicTypeProjectSchema } from '@alilc/lowcode-types';
import { createDiskPublisher } from '../helpers/solutionHelper';
import { IceJsProjectBuilderOptions } from '../../src/solutions/icejs';
@@ -33,7 +33,7 @@ describe(testCaseBaseName, () => {
function exportProject(
importPath: string,
outputPath: string,
- mergeSchema?: Partial,
+ mergeSchema?: Partial,
options?: IceJsProjectBuilderOptions,
) {
const schemaJsonStr = fs.readFileSync(importPath, { encoding: 'utf8' });
diff --git a/modules/code-generator/tests/bugfix/tolerate-eval-errors-1-loop.test.ts b/modules/code-generator/tests/bugfix/tolerate-eval-errors-1-loop.test.ts
index 11ba9de054..78f2b50b32 100644
--- a/modules/code-generator/tests/bugfix/tolerate-eval-errors-1-loop.test.ts
+++ b/modules/code-generator/tests/bugfix/tolerate-eval-errors-1-loop.test.ts
@@ -1,7 +1,7 @@
import CodeGenerator from '../../src';
import * as fs from 'fs';
import * as path from 'path';
-import { ProjectSchema } from '@alilc/lowcode-types';
+import { IPublicTypeProjectSchema } from '@alilc/lowcode-types';
import { createDiskPublisher } from '../helpers/solutionHelper';
import { IceJsProjectBuilderOptions } from '../../src/solutions/icejs';
@@ -28,7 +28,7 @@ test('loop should be generated link __$$evalArray(xxx).map', async () => {
function exportProject(
importPath: string,
outputPath: string,
- mergeSchema?: Partial,
+ mergeSchema?: Partial,
options?: IceJsProjectBuilderOptions,
) {
const schemaJsonStr = fs.readFileSync(importPath, { encoding: 'utf8' });
diff --git a/modules/code-generator/tests/bugfix/tolerate-eval-errors-2-nested-loop.test.ts b/modules/code-generator/tests/bugfix/tolerate-eval-errors-2-nested-loop.test.ts
index e8b65a5442..1842005938 100644
--- a/modules/code-generator/tests/bugfix/tolerate-eval-errors-2-nested-loop.test.ts
+++ b/modules/code-generator/tests/bugfix/tolerate-eval-errors-2-nested-loop.test.ts
@@ -1,7 +1,7 @@
import CodeGenerator from '../../src';
import * as fs from 'fs';
import * as path from 'path';
-import { ProjectSchema } from '@alilc/lowcode-types';
+import { IPublicTypeProjectSchema } from '@alilc/lowcode-types';
import { createDiskPublisher } from '../helpers/solutionHelper';
import { IceJsProjectBuilderOptions } from '../../src/solutions/icejs';
@@ -32,7 +32,7 @@ test('loop should be generated link __$$evalArray(xxx).map', async () => {
function exportProject(
importPath: string,
outputPath: string,
- mergeSchema?: Partial,
+ mergeSchema?: Partial,
options?: IceJsProjectBuilderOptions,
) {
const schemaJsonStr = fs.readFileSync(importPath, { encoding: 'utf8' });
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/.browserslistrc b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/.browserslistrc
new file mode 100644
index 0000000000..55a130413d
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/.browserslistrc
@@ -0,0 +1,3 @@
+defaults
+ios_saf 9
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/.gitignore b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/.gitignore
new file mode 100644
index 0000000000..4ec178818e
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/.gitignore
@@ -0,0 +1,25 @@
+
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules/
+
+# production
+build/
+dist/
+tmp/
+lib/
+
+# misc
+.idea/
+.happypack
+.DS_Store
+*.swp
+*.dia~
+.ice
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+index.module.scss.d.ts
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/README.md b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/README.md
new file mode 100644
index 0000000000..6d9dd75215
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/README.md
@@ -0,0 +1 @@
+This project is generated by lowcode-code-generator & lowcode-solution-icejs3.
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/ice.config.mts b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/ice.config.mts
new file mode 100644
index 0000000000..e1d8a28141
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/ice.config.mts
@@ -0,0 +1,90 @@
+import { join } from 'path';
+import { defineConfig } from '@ice/app';
+import _ from 'lodash';
+import fusion from '@ice/plugin-fusion';
+import locales from '@ice/plugin-moment-locales';
+import type { Plugin } from '@ice/app/esm/types';
+
+interface PluginOptions {
+ id: string;
+}
+
+const plugin: Plugin = (options) => ({
+ // name 可选，插件名称
+ name: 'plugin-name',
+ // setup 必选，用于定制工程构建配置
+ setup: ({ onGetConfig, modifyUserConfig }) => {
+ modifyUserConfig('codeSplitting', 'page');
+
+ onGetConfig((config) => {
+ config.entry = {
+ web: join(process.cwd(), '.ice/entry.client.tsx'),
+ };
+
+ config.cssFilename = '[name].css';
+
+ config.configureWebpack = config.configureWebpack || [];
+ config.configureWebpack?.push((webpackConfig) => {
+ if (webpackConfig.output) {
+ webpackConfig.output.filename = '[name].js';
+ webpackConfig.output.chunkFilename = '[name].js';
+ }
+ return webpackConfig;
+ });
+
+ config.swcOptions = _.merge(config.swcOptions, {
+ compilationConfig: {
+ jsc: {
+ transform: {
+ react: {
+ runtime: 'classic',
+ },
+ },
+ },
+ },
+ });
+
+ // 解决 webpack publicPath 问题
+ config.transforms = config.transforms || [];
+ config.transforms.push((source: string, id: string) => {
+ if (id.includes('.ice/entry.client.tsx')) {
+ let code = `
+ if (!__webpack_public_path__?.startsWith('http') && document.currentScript) {
+ // @ts-ignore
+ __webpack_public_path__ = document.currentScript.src.replace(/^(.*\\/)[^/]+$/, '$1');
+ window.__ICE_ASSETS_MANIFEST__ = window.__ICE_ASSETS_MANIFEST__ || {};
+ window.__ICE_ASSETS_MANIFEST__.publicPath = __webpack_public_path__;
+ }
+ `;
+ code += source;
+ return { code };
+ }
+ });
+ });
+ },
+});
+
+// The project config, see https://v3.ice.work/docs/guide/basic/config
+const minify = process.env.NODE_ENV === 'production' ? 'swc' : false;
+export default defineConfig(() => ({
+ ssr: false,
+ ssg: false,
+ minify,
+
+ externals: {
+ react: 'React',
+ 'react-dom': 'ReactDOM',
+ 'react-dom/client': 'ReactDOM',
+ '@alifd/next': 'Next',
+ lodash: 'var window._',
+ '@alilc/lowcode-engine': 'var window.AliLowCodeEngine',
+ },
+ plugins: [
+ fusion({
+ importStyle: 'sass',
+ }),
+ locales(),
+ plugin(),
+ ],
+}));
+
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/package.json b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/package.json
new file mode 100644
index 0000000000..38f24df0b1
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/package.json
@@ -0,0 +1,44 @@
+{
+ "name": "icejs3-demo-app",
+ "version": "0.1.5",
+ "description": "icejs 3 轻量级模板，使用 JavaScript，仅包含基础的 Layout。",
+ "dependencies": {
+ "moment": "^2.24.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-router": "^6.9.0",
+ "react-router-dom": "^6.9.0",
+ "intl-messageformat": "^9.3.6",
+ "@alifd/next": "1.19.18",
+ "@ice/runtime": "~1.1.0",
+ "@alilc/lowcode-datasource-engine": "^1.0.0",
+ "@alilc/lowcode-datasource-url-params-handler": "^1.0.0",
+ "@alilc/lowcode-datasource-fetch-handler": "^1.0.0"
+ },
+ "devDependencies": {
+ "@ice/app": "~3.1.0",
+ "@types/react": "^18.0.0",
+ "@types/react-dom": "^18.0.0",
+ "@types/node": "^18.11.17",
+ "@ice/plugin-fusion": "^1.0.1",
+ "@ice/plugin-moment-locales": "^1.0.0",
+ "eslint": "^6.0.1",
+ "stylelint": "^13.2.0"
+ },
+ "scripts": {
+ "start": "ice start",
+ "build": "ice build",
+ "lint": "npm run eslint && npm run stylelint",
+ "eslint": "eslint --cache --ext .js,.jsx ./",
+ "stylelint": "stylelint ./**/*.scss"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ },
+ "repository": {
+ "type": "git",
+ "url": "http://gitlab.xxx.com/msd/leak-scan/tree/master"
+ },
+ "private": true,
+ "originTemplate": "@alifd/scaffold-lite-js"
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/app.ts b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/app.ts
new file mode 100644
index 0000000000..6d5856292d
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/app.ts
@@ -0,0 +1,13 @@
+import { defineAppConfig } from 'ice';
+
+// App config, see https://v3.ice.work/docs/guide/basic/app
+export default defineAppConfig(() => ({
+ // Set your configs here.
+ app: {
+ rootId: 'App',
+ },
+ router: {
+ type: 'browser',
+ basename: '/',
+ },
+}));
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/constants.js b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/constants.js
new file mode 100644
index 0000000000..91198f9044
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/constants.js
@@ -0,0 +1,3 @@
+const __$$constants = { ENV: 'prod', DOMAIN: 'xxx.xxx.com' };
+
+export default __$$constants;
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/document.tsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/document.tsx
new file mode 100644
index 0000000000..aff0231d95
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/document.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Meta, Title, Links, Main, Scripts } from 'ice';
+
+export default function Document() {
+ return (
+
+
+
+
+
+
+
+
+
+ {childrenItems}
+
+ );
+ return subNav;
+ }
+
+ return null;
+ }
+
+ const navItem = (
+
+ {item.name}
+
+ );
+ return navItem;
+}
+
+const Navigation = (props, context) => {
+ const location = useLocation();
+ const { pathname } = location;
+ const { isCollapse } = context;
+ return (
+
+ );
+};
+
+Navigation.contextTypes = {
+ isCollapse: PropTypes.bool,
+};
+export default Navigation;
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/layouts/BasicLayout/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/layouts/BasicLayout/index.jsx
new file mode 100644
index 0000000000..18db44df5e
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/layouts/BasicLayout/index.jsx
@@ -0,0 +1,81 @@
+
+import React, { useState } from 'react';
+import { Shell, ConfigProvider } from '@alifd/next';
+import PageNav from './components/PageNav';
+import Logo from './components/Logo';
+import Footer from './components/Footer';
+
+(function() {
+ const throttle = function(type, name, obj = window) {
+ let running = false;
+
+ const func = () => {
+ if (running) {
+ return;
+ }
+
+ running = true;
+ requestAnimationFrame(() => {
+ obj.dispatchEvent(new CustomEvent(name));
+ running = false;
+ });
+ };
+
+ obj.addEventListener(type, func);
+ };
+
+ throttle('resize', 'optimizedResize');
+})();
+
+export default function BasicLayout({ children }) {
+ const getDevice = width => {
+ const isPhone =
+ typeof navigator !== 'undefined' && navigator && navigator.userAgent.match(/phone/gi);
+
+ if (width < 680 || isPhone) {
+ return 'phone';
+ }
+ if (width < 1280 && width > 680) {
+ return 'tablet';
+ }
+ return 'desktop';
+ };
+
+ const [device, setDevice] = useState(getDevice(NaN));
+ window.addEventListener('optimizedResize', e => {
+ setDevice(getDevice(e && e.target && e.target.innerWidth));
+ });
+ return (
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+
+ );
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/layouts/BasicLayout/menuConfig.js b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/layouts/BasicLayout/menuConfig.js
new file mode 100644
index 0000000000..5332202be4
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/layouts/BasicLayout/menuConfig.js
@@ -0,0 +1,11 @@
+
+const headerMenuConfig = [];
+const asideMenuConfig = [
+ {
+ name: 'Dashboard',
+ path: '/',
+ icon: 'smile',
+ },
+];
+export { headerMenuConfig, asideMenuConfig };
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/react-app/demo9-datasource-engine/expected/demo-project/src/components/Index/index.css b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/pages/Test/index.css
similarity index 100%
rename from modules/code-generator/tests/fixtures/test-cases/react-app/demo9-datasource-engine/expected/demo-project/src/components/Index/index.css
rename to modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/pages/Test/index.css
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/pages/Test/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/pages/Test/index.jsx
new file mode 100644
index 0000000000..794ad46a48
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/pages/Test/index.jsx
@@ -0,0 +1,205 @@
+// 注意: 出码引擎注入的临时变量默认都以 "__$$" 开头，禁止在搭建的代码中直接访问。
+// 例外：react 框架的导出名和各种组件名除外。
+import React from 'react';
+
+import { Form, Input, NumberPicker, Select, Button } from '@alifd/next';
+
+import { createUrlParamsHandler as __$$createUrlParamsRequestHandler } from '@alilc/lowcode-datasource-url-params-handler';
+
+import { createFetchHandler as __$$createFetchRequestHandler } from '@alilc/lowcode-datasource-fetch-handler';
+
+import { create as __$$createDataSourceEngine } from '@alilc/lowcode-datasource-engine/runtime';
+
+import '@alifd/next/lib/form/style';
+
+import '@alifd/next/lib/input/style';
+
+import '@alifd/next/lib/number-picker/style';
+
+import '@alifd/next/lib/select/style';
+
+import '@alifd/next/lib/button/style';
+
+import utils, { RefsManager } from '../../utils';
+
+import * as __$$i18n from '../../i18n';
+
+import __$$constants from '../../constants';
+
+import './index.css';
+
+class Test$$Page extends React.Component {
+ _context = this;
+
+ _dataSourceConfig = this._defineDataSourceConfig();
+ _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this, {
+ runtimeConfig: true,
+ requestHandlersMap: {
+ urlParams: __$$createUrlParamsRequestHandler(window.location.search),
+ fetch: __$$createFetchRequestHandler(),
+ },
+ });
+
+ get dataSourceMap() {
+ return this._dataSourceEngine.dataSourceMap || {};
+ }
+
+ reloadDataSource = async () => {
+ await this._dataSourceEngine.reloadDataSource();
+ };
+
+ get constants() {
+ return __$$constants || {};
+ }
+
+ constructor(props, context) {
+ super(props);
+
+ this.utils = utils;
+
+ this._refsManager = new RefsManager();
+
+ __$$i18n._inject2(this);
+
+ this.state = { text: 'outter' };
+ }
+
+ $ = (refName) => {
+ return this._refsManager.get(refName);
+ };
+
+ $$ = (refName) => {
+ return this._refsManager.getAll(refName);
+ };
+
+ _defineDataSourceConfig() {
+ const _this = this;
+ return {
+ list: [
+ {
+ id: 'urlParams',
+ type: 'urlParams',
+ isInit: function () {
+ return undefined;
+ }.bind(_this),
+ options: function () {
+ return undefined;
+ }.bind(_this),
+ },
+ {
+ id: 'user',
+ type: 'fetch',
+ options: function () {
+ return {
+ method: 'GET',
+ uri: 'https://shs.xxx.com/mock/1458/demo/user',
+ isSync: true,
+ };
+ }.bind(_this),
+ dataHandler: function (response) {
+ if (!response.data.success) {
+ throw new Error(response.data.message);
+ }
+ return response.data.data;
+ },
+ isInit: function () {
+ return undefined;
+ }.bind(_this),
+ },
+ {
+ id: 'orders',
+ type: 'fetch',
+ options: function () {
+ return {
+ method: 'GET',
+ uri: 'https://shs.xxx.com/mock/1458/demo/orders',
+ isSync: true,
+ };
+ }.bind(_this),
+ dataHandler: function (response) {
+ if (!response.data.success) {
+ throw new Error(response.data.message);
+ }
+ return response.data.data.result;
+ },
+ isInit: function () {
+ return undefined;
+ }.bind(_this),
+ },
+ ],
+ dataHandler: function (dataMap) {
+ console.info('All datasources loaded:', dataMap);
+ },
+ };
+ }
+
+ componentDidMount() {
+ this._dataSourceEngine.reloadDataSource();
+
+ console.log('componentDidMount');
+ }
+
+ render() {
+ const __$$context = this._context || this;
+ const { state } = __$$context;
+ return (
+
+
+ );
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/typings.d.ts b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/typings.d.ts
new file mode 100644
index 0000000000..a9f8de7ceb
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/typings.d.ts
@@ -0,0 +1,9 @@
+/// ;
+ }
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/utils.js b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/utils.js
new file mode 100644
index 0000000000..1190717924
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/utils.js
@@ -0,0 +1,47 @@
+import { createRef } from 'react';
+
+export class RefsManager {
+ constructor() {
+ this.refInsStore = {};
+ }
+
+ clearNullRefs() {
+ Object.keys(this.refInsStore).forEach((refName) => {
+ const filteredInsList = this.refInsStore[refName].filter(
+ (insRef) => !!insRef.current
+ );
+ if (filteredInsList.length > 0) {
+ this.refInsStore[refName] = filteredInsList;
+ } else {
+ delete this.refInsStore[refName];
+ }
+ });
+ }
+
+ get(refName) {
+ this.clearNullRefs();
+ if (this.refInsStore[refName] && this.refInsStore[refName].length > 0) {
+ return this.refInsStore[refName][0].current;
+ }
+
+ return null;
+ }
+
+ getAll(refName) {
+ this.clearNullRefs();
+ if (this.refInsStore[refName] && this.refInsStore[refName].length > 0) {
+ return this.refInsStore[refName].map((i) => i.current);
+ }
+
+ return [];
+ }
+
+ linkRef(refName) {
+ const refIns = createRef();
+ this.refInsStore[refName] = this.refInsStore[refName] || [];
+ this.refInsStore[refName].push(refIns);
+ return refIns;
+ }
+}
+
+export default {};
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/schema.json5 b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/schema.json5
new file mode 100644
index 0000000000..76c52fb5e8
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/schema.json5
@@ -0,0 +1,276 @@
+{
+ "version": "1.0.0",
+ "componentsMap": [
+ {
+ "componentName": "Button",
+ "package": "@alifd/next",
+ "version": "1.19.18",
+ "destructuring": true,
+ "exportName": "Button"
+ },
+ {
+ "componentName": "Button.Group",
+ "package": "@alifd/next",
+ "version": "1.19.18",
+ "destructuring": true,
+ "exportName": "Button",
+ "subName": "Group"
+ },
+ {
+ "componentName": "Input",
+ "package": "@alifd/next",
+ "version": "1.19.18",
+ "destructuring": true,
+ "exportName": "Input"
+ },
+ {
+ "componentName": "Form",
+ "package": "@alifd/next",
+ "version": "1.19.18",
+ "destructuring": true,
+ "exportName": "Form"
+ },
+ {
+ "componentName": "Form.Item",
+ "package": "@alifd/next",
+ "version": "1.19.18",
+ "destructuring": true,
+ "exportName": "Form",
+ "subName": "Item"
+ },
+ {
+ "componentName": "NumberPicker",
+ "package": "@alifd/next",
+ "version": "1.19.18",
+ "destructuring": true,
+ "exportName": "NumberPicker"
+ },
+ {
+ "componentName": "Select",
+ "package": "@alifd/next",
+ "version": "1.19.18",
+ "destructuring": true,
+ "exportName": "Select"
+ }
+ ],
+ "componentsTree": [
+ {
+ "componentName": "Page",
+ "id": "node$1",
+ "meta": {
+ "title": "测试",
+ "router": "/"
+ },
+ "props": {
+ "ref": "outterView",
+ "autoLoading": true
+ },
+ "fileName": "test",
+ "state": {
+ "text": "outter"
+ },
+ "lifeCycles": {
+ "componentDidMount": {
+ "type": "JSFunction",
+ "value": "function() { console.log('componentDidMount'); }"
+ }
+ },
+ dataSource: {
+ list: [
+ {
+ id: 'urlParams',
+ type: 'urlParams',
+ },
+ // 示例数据源：https://shs.xxx.com/mock/1458/demo/user
+ {
+ id: 'user',
+ type: 'fetch',
+ options: {
+ method: 'GET',
+ uri: 'https://shs.xxx.com/mock/1458/demo/user',
+ isSync: true,
+ },
+ dataHandler: {
+ type: 'JSExpression',
+ value: 'function (response) {\nif (!response.data.success){\n throw new Error(response.data.message);\n }\n return response.data.data;\n}',
+ },
+ },
+ // 示例数据源：https://shs.xxx.com/mock/1458/demo/orders
+ {
+ id: 'orders',
+ type: 'fetch',
+ options: {
+ method: 'GET',
+ uri: "https://shs.xxx.com/mock/1458/demo/orders",
+ isSync: true,
+ },
+ dataHandler: {
+ type: 'JSExpression',
+ value: 'function (response) {\nif (!response.data.success){\n throw new Error(response.data.message);\n }\n return response.data.data.result;\n}',
+ },
+ },
+ ],
+ dataHandler: {
+ type: 'JSExpression',
+ value: 'function (dataMap) {\n console.info("All datasources loaded:", dataMap);\n}',
+ },
+ },
+ "children": [
+ {
+ "componentName": "Form",
+ "id": "node$2",
+ "props": {
+ "labelCol": {
+ "type": "JSExpression",
+ "value": "this.state.colNum"
+ },
+ "style": {},
+ "ref": "testForm"
+ },
+ "children": [
+ {
+ "componentName": "Form.Item",
+ "id": "node$3",
+ "props": {
+ "label": "姓名：",
+ "name": "name",
+ "initValue": "李雷"
+ },
+ "children": [
+ {
+ "componentName": "Input",
+ "id": "node$4",
+ "props": {
+ "placeholder": "请输入",
+ "size": "medium",
+ "style": {
+ "width": 320
+ }
+ }
+ }
+ ]
+ },
+ {
+ "componentName": "Form.Item",
+ "id": "node$5",
+ "props": {
+ "label": "年龄：",
+ "name": "age",
+ "initValue": "22"
+ },
+ "children": [
+ {
+ "componentName": "NumberPicker",
+ "id": "node$6",
+ "props": {
+ "size": "medium",
+ "type": "normal"
+ }
+ }
+ ]
+ },
+ {
+ "componentName": "Form.Item",
+ "id": "node$7",
+ "props": {
+ "label": "职业：",
+ "name": "profession"
+ },
+ "children": [
+ {
+ "componentName": "Select",
+ "id": "node$8",
+ "props": {
+ "dataSource": [
+ {
+ "label": "教师",
+ "value": "t"
+ },
+ {
+ "label": "医生",
+ "value": "d"
+ },
+ {
+ "label": "歌手",
+ "value": "s"
+ }
+ ]
+ }
+ }
+ ]
+ },
+ {
+ "componentName": "Div",
+ "id": "node$9",
+ "props": {
+ "style": {
+ "textAlign": "center"
+ }
+ },
+ "children": [
+ {
+ "componentName": "Button.Group",
+ "id": "node$a",
+ "props": {},
+ "children": [
+ {
+ "componentName": "Button",
+ "id": "node$b",
+ "condition": {
+ "type": "JSExpression",
+ "value": "this.index >= 1"
+ },
+ "loop": ["a", "b", "c"],
+ "props": {
+ "type": "primary",
+ "style": {
+ "margin": "0 5px 0 5px"
+ },
+ },
+ "children": [
+ {
+ "type": "JSExpression",
+ "value": "this.item"
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ "constants": {
+ "ENV": "prod",
+ "DOMAIN": "xxx.xxx.com"
+ },
+ "css": "body {font-size: 12px;} .table { width: 100px;}",
+ "config": {
+ "sdkVersion": "1.0.3",
+ "historyMode": "hash",
+ "targetRootID": "J_Container",
+ "layout": {
+ "componentName": "BasicLayout",
+ "props": {
+ "logo": "...",
+ "name": "测试网站"
+ }
+ },
+ "theme": {
+ "package": "@alife/theme-fusion",
+ "version": "^0.1.0",
+ "primary": "#ff9966"
+ }
+ },
+ "meta": {
+ "name": "demo应用",
+ "git_group": "appGroup",
+ "project_name": "app_demo",
+ "description": "这是一个测试应用",
+ "spma": "spa23d",
+ "creator": "月飞"
+ }
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/.browserslistrc b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/.browserslistrc
new file mode 100644
index 0000000000..55a130413d
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/.browserslistrc
@@ -0,0 +1,3 @@
+defaults
+ios_saf 9
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/.gitignore b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/.gitignore
new file mode 100644
index 0000000000..4ec178818e
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/.gitignore
@@ -0,0 +1,25 @@
+
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules/
+
+# production
+build/
+dist/
+tmp/
+lib/
+
+# misc
+.idea/
+.happypack
+.DS_Store
+*.swp
+*.dia~
+.ice
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+index.module.scss.d.ts
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/README.md b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/README.md
new file mode 100644
index 0000000000..6d9dd75215
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/README.md
@@ -0,0 +1 @@
+This project is generated by lowcode-code-generator & lowcode-solution-icejs3.
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/ice.config.mts b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/ice.config.mts
new file mode 100644
index 0000000000..e1d8a28141
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/ice.config.mts
@@ -0,0 +1,90 @@
+import { join } from 'path';
+import { defineConfig } from '@ice/app';
+import _ from 'lodash';
+import fusion from '@ice/plugin-fusion';
+import locales from '@ice/plugin-moment-locales';
+import type { Plugin } from '@ice/app/esm/types';
+
+interface PluginOptions {
+ id: string;
+}
+
+const plugin: Plugin = (options) => ({
+ // name 可选，插件名称
+ name: 'plugin-name',
+ // setup 必选，用于定制工程构建配置
+ setup: ({ onGetConfig, modifyUserConfig }) => {
+ modifyUserConfig('codeSplitting', 'page');
+
+ onGetConfig((config) => {
+ config.entry = {
+ web: join(process.cwd(), '.ice/entry.client.tsx'),
+ };
+
+ config.cssFilename = '[name].css';
+
+ config.configureWebpack = config.configureWebpack || [];
+ config.configureWebpack?.push((webpackConfig) => {
+ if (webpackConfig.output) {
+ webpackConfig.output.filename = '[name].js';
+ webpackConfig.output.chunkFilename = '[name].js';
+ }
+ return webpackConfig;
+ });
+
+ config.swcOptions = _.merge(config.swcOptions, {
+ compilationConfig: {
+ jsc: {
+ transform: {
+ react: {
+ runtime: 'classic',
+ },
+ },
+ },
+ },
+ });
+
+ // 解决 webpack publicPath 问题
+ config.transforms = config.transforms || [];
+ config.transforms.push((source: string, id: string) => {
+ if (id.includes('.ice/entry.client.tsx')) {
+ let code = `
+ if (!__webpack_public_path__?.startsWith('http') && document.currentScript) {
+ // @ts-ignore
+ __webpack_public_path__ = document.currentScript.src.replace(/^(.*\\/)[^/]+$/, '$1');
+ window.__ICE_ASSETS_MANIFEST__ = window.__ICE_ASSETS_MANIFEST__ || {};
+ window.__ICE_ASSETS_MANIFEST__.publicPath = __webpack_public_path__;
+ }
+ `;
+ code += source;
+ return { code };
+ }
+ });
+ });
+ },
+});
+
+// The project config, see https://v3.ice.work/docs/guide/basic/config
+const minify = process.env.NODE_ENV === 'production' ? 'swc' : false;
+export default defineConfig(() => ({
+ ssr: false,
+ ssg: false,
+ minify,
+
+ externals: {
+ react: 'React',
+ 'react-dom': 'ReactDOM',
+ 'react-dom/client': 'ReactDOM',
+ '@alifd/next': 'Next',
+ lodash: 'var window._',
+ '@alilc/lowcode-engine': 'var window.AliLowCodeEngine',
+ },
+ plugins: [
+ fusion({
+ importStyle: 'sass',
+ }),
+ locales(),
+ plugin(),
+ ],
+}));
+
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/package.json b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/package.json
new file mode 100644
index 0000000000..3a0015c9bd
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/package.json
@@ -0,0 +1,48 @@
+{
+ "name": "icejs3-demo-app",
+ "version": "0.1.5",
+ "description": "icejs 3 轻量级模板，使用 JavaScript，仅包含基础的 Layout。",
+ "dependencies": {
+ "moment": "^2.24.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-router": "^6.9.0",
+ "react-router-dom": "^6.9.0",
+ "intl-messageformat": "^9.3.6",
+ "@alifd/next": "1.26.15",
+ "@ice/runtime": "~1.1.0",
+ "@alilc/lowcode-datasource-engine": "^1.0.0",
+ "@alilc/lowcode-datasource-url-params-handler": "^1.0.0",
+ "@alilc/b6-page": "^0.1.0",
+ "@alilc/b6-text": "^0.1.0",
+ "@alilc/b6-compact-legao-builtin": "1.x",
+ "antd": "3.x",
+ "@alilc/b6-util-mocks": "1.x"
+ },
+ "devDependencies": {
+ "@ice/app": "~3.1.0",
+ "@types/react": "^18.0.0",
+ "@types/react-dom": "^18.0.0",
+ "@types/node": "^18.11.17",
+ "@ice/plugin-fusion": "^1.0.1",
+ "@ice/plugin-moment-locales": "^1.0.0",
+ "eslint": "^6.0.1",
+ "stylelint": "^13.2.0"
+ },
+ "scripts": {
+ "start": "ice start",
+ "build": "ice build",
+ "lint": "npm run eslint && npm run stylelint",
+ "eslint": "eslint --cache --ext .js,.jsx ./",
+ "stylelint": "stylelint ./**/*.scss"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ },
+ "repository": {
+ "type": "git",
+ "url": "http://gitlab.xxx.com/msd/leak-scan/tree/master"
+ },
+ "private": true,
+ "originTemplate": "@alifd/scaffold-lite-js"
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/app.ts b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/app.ts
new file mode 100644
index 0000000000..6d5856292d
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/app.ts
@@ -0,0 +1,13 @@
+import { defineAppConfig } from 'ice';
+
+// App config, see https://v3.ice.work/docs/guide/basic/app
+export default defineAppConfig(() => ({
+ // Set your configs here.
+ app: {
+ rootId: 'App',
+ },
+ router: {
+ type: 'browser',
+ basename: '/',
+ },
+}));
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/constants.js b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/constants.js
new file mode 100644
index 0000000000..ea766c9da3
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/constants.js
@@ -0,0 +1,3 @@
+const __$$constants = {};
+
+export default __$$constants;
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/document.tsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/document.tsx
new file mode 100644
index 0000000000..aff0231d95
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/document.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Meta, Title, Links, Main, Scripts } from 'ice';
+
+export default function Document() {
+ return (
+
+
+
+
+
+
+
+
+
+ {childrenItems}
+
+ );
+ return subNav;
+ }
+
+ return null;
+ }
+
+ const navItem = (
+
+ {item.name}
+
+ );
+ return navItem;
+}
+
+const Navigation = (props, context) => {
+ const location = useLocation();
+ const { pathname } = location;
+ const { isCollapse } = context;
+ return (
+
+ );
+};
+
+Navigation.contextTypes = {
+ isCollapse: PropTypes.bool,
+};
+export default Navigation;
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/layouts/BasicLayout/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/layouts/BasicLayout/index.jsx
new file mode 100644
index 0000000000..18db44df5e
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/layouts/BasicLayout/index.jsx
@@ -0,0 +1,81 @@
+
+import React, { useState } from 'react';
+import { Shell, ConfigProvider } from '@alifd/next';
+import PageNav from './components/PageNav';
+import Logo from './components/Logo';
+import Footer from './components/Footer';
+
+(function() {
+ const throttle = function(type, name, obj = window) {
+ let running = false;
+
+ const func = () => {
+ if (running) {
+ return;
+ }
+
+ running = true;
+ requestAnimationFrame(() => {
+ obj.dispatchEvent(new CustomEvent(name));
+ running = false;
+ });
+ };
+
+ obj.addEventListener(type, func);
+ };
+
+ throttle('resize', 'optimizedResize');
+})();
+
+export default function BasicLayout({ children }) {
+ const getDevice = width => {
+ const isPhone =
+ typeof navigator !== 'undefined' && navigator && navigator.userAgent.match(/phone/gi);
+
+ if (width < 680 || isPhone) {
+ return 'phone';
+ }
+ if (width < 1280 && width > 680) {
+ return 'tablet';
+ }
+ return 'desktop';
+ };
+
+ const [device, setDevice] = useState(getDevice(NaN));
+ window.addEventListener('optimizedResize', e => {
+ setDevice(getDevice(e && e.target && e.target.innerWidth));
+ });
+ return (
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+
+ );
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/layouts/BasicLayout/menuConfig.js b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/layouts/BasicLayout/menuConfig.js
new file mode 100644
index 0000000000..5332202be4
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/layouts/BasicLayout/menuConfig.js
@@ -0,0 +1,11 @@
+
+const headerMenuConfig = [];
+const asideMenuConfig = [
+ {
+ name: 'Dashboard',
+ path: '/',
+ icon: 'smile',
+ },
+];
+export { headerMenuConfig, asideMenuConfig };
+
\ No newline at end of file
diff --git a/packages/rax-renderer/demo/miniapp/pages/index.acss b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/pages/Aaaa/index.css
similarity index 100%
rename from packages/rax-renderer/demo/miniapp/pages/index.acss
rename to modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/pages/Aaaa/index.css
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/pages/Aaaa/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/pages/Aaaa/index.jsx
new file mode 100644
index 0000000000..2945a9d8f5
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/pages/Aaaa/index.jsx
@@ -0,0 +1,118 @@
+// 注意: 出码引擎注入的临时变量默认都以 "__$$" 开头，禁止在搭建的代码中直接访问。
+// 例外：react 框架的导出名和各种组件名除外。
+import React from 'react';
+
+import { Page } from '@alilc/b6-page';
+
+import { Text } from '@alilc/b6-text';
+
+import { createUrlParamsHandler as __$$createUrlParamsRequestHandler } from '@alilc/lowcode-datasource-url-params-handler';
+
+import { create as __$$createDataSourceEngine } from '@alilc/lowcode-datasource-engine/runtime';
+
+import utils from '../../utils';
+
+import * as __$$i18n from '../../i18n';
+
+import __$$constants from '../../constants';
+
+import './index.css';
+
+class Aaaa$$Page extends React.Component {
+ _context = this;
+
+ _dataSourceConfig = this._defineDataSourceConfig();
+ _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this, {
+ runtimeConfig: true,
+ requestHandlersMap: {
+ urlParams: __$$createUrlParamsRequestHandler(window.location.search),
+ },
+ });
+
+ get dataSourceMap() {
+ return this._dataSourceEngine.dataSourceMap || {};
+ }
+
+ reloadDataSource = async () => {
+ await this._dataSourceEngine.reloadDataSource();
+ };
+
+ get constants() {
+ return __$$constants || {};
+ }
+
+ constructor(props, context) {
+ super(props);
+
+ this.utils = utils;
+
+ __$$i18n._inject2(this);
+
+ this.state = {};
+ }
+
+ $ = () => null;
+
+ $$ = () => [];
+
+ _defineDataSourceConfig() {
+ const _this = this;
+ return {
+ list: [
+ {
+ id: 'urlParams',
+ type: 'urlParams',
+ description: 'URL参数',
+ options: function () {
+ return {
+ uri: '',
+ };
+ }.bind(_this),
+ isInit: function () {
+ return undefined;
+ }.bind(_this),
+ },
+ ],
+ };
+ }
+
+ componentDidMount() {
+ this._dataSourceEngine.reloadDataSource();
+ }
+
+ render() {
+ const __$$context = this._context || this;
+ const { state } = __$$context;
+ return (
+
+
+ );
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/typings.d.ts b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/typings.d.ts
new file mode 100644
index 0000000000..a9f8de7ceb
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/typings.d.ts
@@ -0,0 +1,9 @@
+/// ;
+ }
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/utils.js b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/utils.js
new file mode 100644
index 0000000000..868d471106
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/utils.js
@@ -0,0 +1,61 @@
+import legaoBuiltin from '@alilc/b6-compact-legao-builtin';
+
+import { message, Modal as modal } from 'antd';
+
+import { mocks } from '@alilc/b6-util-mocks';
+
+import { createRef } from 'react';
+
+export class RefsManager {
+ constructor() {
+ this.refInsStore = {};
+ }
+
+ clearNullRefs() {
+ Object.keys(this.refInsStore).forEach((refName) => {
+ const filteredInsList = this.refInsStore[refName].filter(
+ (insRef) => !!insRef.current
+ );
+ if (filteredInsList.length > 0) {
+ this.refInsStore[refName] = filteredInsList;
+ } else {
+ delete this.refInsStore[refName];
+ }
+ });
+ }
+
+ get(refName) {
+ this.clearNullRefs();
+ if (this.refInsStore[refName] && this.refInsStore[refName].length > 0) {
+ return this.refInsStore[refName][0].current;
+ }
+
+ return null;
+ }
+
+ getAll(refName) {
+ this.clearNullRefs();
+ if (this.refInsStore[refName] && this.refInsStore[refName].length > 0) {
+ return this.refInsStore[refName].map((i) => i.current);
+ }
+
+ return [];
+ }
+
+ linkRef(refName) {
+ const refIns = createRef();
+ this.refInsStore[refName] = this.refInsStore[refName] || [];
+ this.refInsStore[refName].push(refIns);
+ return refIns;
+ }
+}
+
+export default {
+ legaoBuiltin,
+
+ message,
+
+ mocks,
+
+ modal,
+};
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/schema.json5 b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/schema.json5
new file mode 100644
index 0000000000..76e8248cbb
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/schema.json5
@@ -0,0 +1,123 @@
+{
+ version: '1.0.0',
+ componentsMap: [
+ {
+ package: '@alilc/b6-page',
+ version: '^0.1.0',
+ componentName: 'Page',
+ destructuring: true,
+ exportName: 'Page',
+ },
+ {
+ package: '@alilc/b6-text',
+ version: '^0.1.0',
+ componentName: 'Text',
+ destructuring: true,
+ exportName: 'Text',
+ },
+ ],
+ componentsTree: [
+ {
+ componentName: 'Page',
+ id: 'node_ockp6ci0hm1',
+ props: {
+ title: '',
+ backgroundColor: '#fff',
+ textColor: '#333',
+ style: {},
+ },
+ fileName: 'aaaa',
+ dataSource: {
+ list: [
+ {
+ id: 'urlParams',
+ type: 'urlParams',
+ description: 'URL参数',
+ options: {
+ uri: '',
+ },
+ },
+ ],
+ },
+ children: [
+ {
+ componentName: 'Text',
+ id: 'node_ockp6ci0hm2',
+ props: {
+ content: '欢迎使用 BuildSuccess！sadsad',
+ style: {},
+ fieldId: 'text_kp6ci11t',
+ },
+ },
+ ],
+ meta: {
+ router: '/aaaa',
+ },
+ methodsModule: {
+ type: 'JSModule',
+ compiled: '"use strict";\n\nObject.defineProperty(exports, "__esModule", {\n value: true\n});\nexports.helloPage = helloPage;\n\n/**\n * Private, and can be re-used functions\n * Actions panel help documentation：\n * @see https://yuque.antfin.com/docs/share/89ca7965-6387-4e3a-9964-81929ed48f1e\n */\nfunction printLog(obj) {\n console.info(obj);\n}\n/**\n * page function\n */\n\n\nfunction helloPage() {\n console.log(\'hello page\');\n}',
+ source: "/**\n * Private, and can be re-used functions\n * Actions panel help documentation：\n * @see https://yuque.antfin.com/docs/share/89ca7965-6387-4e3a-9964-81929ed48f1e\n */\nfunction printLog(obj) {\n console.info(obj);\n}\n\n/**\n * page function\n */\nexport function helloPage() {\n console.log('hello page');\n}",
+ },
+ },
+ ],
+ i18n: {},
+ utils: [
+ {
+ name: 'legaoBuiltin',
+ type: 'npm',
+ content: {
+ exportName: 'legaoBuiltin',
+ package: '@alilc/b6-compact-legao-builtin',
+ version: '1.x',
+ },
+ },
+ {
+ name: 'message',
+ type: 'npm',
+ content: {
+ package: 'antd',
+ version: '3.x',
+ destructuring: true,
+ exportName: 'message',
+ },
+ },
+ {
+ name: 'mocks',
+ type: 'npm',
+ content: {
+ package: '@alilc/b6-util-mocks',
+ version: '1.x',
+ exportName: 'mocks',
+ destructuring: true,
+ },
+ },
+ {
+ name: 'modal',
+ type: 'npm',
+ content: {
+ package: 'antd',
+ version: '3.x',
+ destructuring: true,
+ exportName: 'Modal',
+ },
+ },
+ ],
+ constants: {},
+ dataSource: {
+ list: [],
+ },
+ config: {
+ sdkVersion: '1.0.3',
+ historyMode: 'hash',
+ targetRootID: 'root',
+ miniAppBuildType: 'runtime',
+ },
+ meta: {
+ name: 'jinyuan-test2',
+ git_group: 'b6',
+ project_name: 'jinyuan-test2',
+ description: '瑾源测试',
+ spma: 'spmademo',
+ creator: '张三',
+ },
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/.browserslistrc b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/.browserslistrc
new file mode 100644
index 0000000000..55a130413d
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/.browserslistrc
@@ -0,0 +1,3 @@
+defaults
+ios_saf 9
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/.gitignore b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/.gitignore
new file mode 100644
index 0000000000..4ec178818e
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/.gitignore
@@ -0,0 +1,25 @@
+
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules/
+
+# production
+build/
+dist/
+tmp/
+lib/
+
+# misc
+.idea/
+.happypack
+.DS_Store
+*.swp
+*.dia~
+.ice
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+index.module.scss.d.ts
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/README.md b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/README.md
new file mode 100644
index 0000000000..6d9dd75215
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/README.md
@@ -0,0 +1 @@
+This project is generated by lowcode-code-generator & lowcode-solution-icejs3.
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/ice.config.mts b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/ice.config.mts
new file mode 100644
index 0000000000..e1d8a28141
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/ice.config.mts
@@ -0,0 +1,90 @@
+import { join } from 'path';
+import { defineConfig } from '@ice/app';
+import _ from 'lodash';
+import fusion from '@ice/plugin-fusion';
+import locales from '@ice/plugin-moment-locales';
+import type { Plugin } from '@ice/app/esm/types';
+
+interface PluginOptions {
+ id: string;
+}
+
+const plugin: Plugin = (options) => ({
+ // name 可选，插件名称
+ name: 'plugin-name',
+ // setup 必选，用于定制工程构建配置
+ setup: ({ onGetConfig, modifyUserConfig }) => {
+ modifyUserConfig('codeSplitting', 'page');
+
+ onGetConfig((config) => {
+ config.entry = {
+ web: join(process.cwd(), '.ice/entry.client.tsx'),
+ };
+
+ config.cssFilename = '[name].css';
+
+ config.configureWebpack = config.configureWebpack || [];
+ config.configureWebpack?.push((webpackConfig) => {
+ if (webpackConfig.output) {
+ webpackConfig.output.filename = '[name].js';
+ webpackConfig.output.chunkFilename = '[name].js';
+ }
+ return webpackConfig;
+ });
+
+ config.swcOptions = _.merge(config.swcOptions, {
+ compilationConfig: {
+ jsc: {
+ transform: {
+ react: {
+ runtime: 'classic',
+ },
+ },
+ },
+ },
+ });
+
+ // 解决 webpack publicPath 问题
+ config.transforms = config.transforms || [];
+ config.transforms.push((source: string, id: string) => {
+ if (id.includes('.ice/entry.client.tsx')) {
+ let code = `
+ if (!__webpack_public_path__?.startsWith('http') && document.currentScript) {
+ // @ts-ignore
+ __webpack_public_path__ = document.currentScript.src.replace(/^(.*\\/)[^/]+$/, '$1');
+ window.__ICE_ASSETS_MANIFEST__ = window.__ICE_ASSETS_MANIFEST__ || {};
+ window.__ICE_ASSETS_MANIFEST__.publicPath = __webpack_public_path__;
+ }
+ `;
+ code += source;
+ return { code };
+ }
+ });
+ });
+ },
+});
+
+// The project config, see https://v3.ice.work/docs/guide/basic/config
+const minify = process.env.NODE_ENV === 'production' ? 'swc' : false;
+export default defineConfig(() => ({
+ ssr: false,
+ ssg: false,
+ minify,
+
+ externals: {
+ react: 'React',
+ 'react-dom': 'ReactDOM',
+ 'react-dom/client': 'ReactDOM',
+ '@alifd/next': 'Next',
+ lodash: 'var window._',
+ '@alilc/lowcode-engine': 'var window.AliLowCodeEngine',
+ },
+ plugins: [
+ fusion({
+ importStyle: 'sass',
+ }),
+ locales(),
+ plugin(),
+ ],
+}));
+
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/package.json b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/package.json
new file mode 100644
index 0000000000..8f02ff1c7e
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/package.json
@@ -0,0 +1,42 @@
+{
+ "name": "icejs3-demo-app",
+ "version": "0.1.5",
+ "description": "icejs 3 轻量级模板，使用 JavaScript，仅包含基础的 Layout。",
+ "dependencies": {
+ "moment": "^2.24.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-router": "^6.9.0",
+ "react-router-dom": "^6.9.0",
+ "intl-messageformat": "^9.3.6",
+ "@alifd/next": "1.19.18",
+ "@ice/runtime": "~1.1.0",
+ "@alilc/lowcode-datasource-engine": "^1.0.0"
+ },
+ "devDependencies": {
+ "@ice/app": "~3.1.0",
+ "@types/react": "^18.0.0",
+ "@types/react-dom": "^18.0.0",
+ "@types/node": "^18.11.17",
+ "@ice/plugin-fusion": "^1.0.1",
+ "@ice/plugin-moment-locales": "^1.0.0",
+ "eslint": "^6.0.1",
+ "stylelint": "^13.2.0"
+ },
+ "scripts": {
+ "start": "ice start",
+ "build": "ice build",
+ "lint": "npm run eslint && npm run stylelint",
+ "eslint": "eslint --cache --ext .js,.jsx ./",
+ "stylelint": "stylelint ./**/*.scss"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ },
+ "repository": {
+ "type": "git",
+ "url": "http://gitlab.xxx.com/msd/leak-scan/tree/master"
+ },
+ "private": true,
+ "originTemplate": "@alifd/scaffold-lite-js"
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/app.ts b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/app.ts
new file mode 100644
index 0000000000..6d5856292d
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/app.ts
@@ -0,0 +1,13 @@
+import { defineAppConfig } from 'ice';
+
+// App config, see https://v3.ice.work/docs/guide/basic/app
+export default defineAppConfig(() => ({
+ // Set your configs here.
+ app: {
+ rootId: 'App',
+ },
+ router: {
+ type: 'browser',
+ basename: '/',
+ },
+}));
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/constants.js b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/constants.js
new file mode 100644
index 0000000000..91198f9044
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/constants.js
@@ -0,0 +1,3 @@
+const __$$constants = { ENV: 'prod', DOMAIN: 'xxx.xxx.com' };
+
+export default __$$constants;
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/document.tsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/document.tsx
new file mode 100644
index 0000000000..aff0231d95
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/document.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Meta, Title, Links, Main, Scripts } from 'ice';
+
+export default function Document() {
+ return (
+
+
+
+
+
+
+
+
+
+ {childrenItems}
+
+ );
+ return subNav;
+ }
+
+ return null;
+ }
+
+ const navItem = (
+
+ {item.name}
+
+ );
+ return navItem;
+}
+
+const Navigation = (props, context) => {
+ const location = useLocation();
+ const { pathname } = location;
+ const { isCollapse } = context;
+ return (
+
+ );
+};
+
+Navigation.contextTypes = {
+ isCollapse: PropTypes.bool,
+};
+export default Navigation;
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/layouts/BasicLayout/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/layouts/BasicLayout/index.jsx
new file mode 100644
index 0000000000..18db44df5e
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/layouts/BasicLayout/index.jsx
@@ -0,0 +1,81 @@
+
+import React, { useState } from 'react';
+import { Shell, ConfigProvider } from '@alifd/next';
+import PageNav from './components/PageNav';
+import Logo from './components/Logo';
+import Footer from './components/Footer';
+
+(function() {
+ const throttle = function(type, name, obj = window) {
+ let running = false;
+
+ const func = () => {
+ if (running) {
+ return;
+ }
+
+ running = true;
+ requestAnimationFrame(() => {
+ obj.dispatchEvent(new CustomEvent(name));
+ running = false;
+ });
+ };
+
+ obj.addEventListener(type, func);
+ };
+
+ throttle('resize', 'optimizedResize');
+})();
+
+export default function BasicLayout({ children }) {
+ const getDevice = width => {
+ const isPhone =
+ typeof navigator !== 'undefined' && navigator && navigator.userAgent.match(/phone/gi);
+
+ if (width < 680 || isPhone) {
+ return 'phone';
+ }
+ if (width < 1280 && width > 680) {
+ return 'tablet';
+ }
+ return 'desktop';
+ };
+
+ const [device, setDevice] = useState(getDevice(NaN));
+ window.addEventListener('optimizedResize', e => {
+ setDevice(getDevice(e && e.target && e.target.innerWidth));
+ });
+ return (
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+
+ );
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/layouts/BasicLayout/menuConfig.js b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/layouts/BasicLayout/menuConfig.js
new file mode 100644
index 0000000000..5332202be4
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/layouts/BasicLayout/menuConfig.js
@@ -0,0 +1,11 @@
+
+const headerMenuConfig = [];
+const asideMenuConfig = [
+ {
+ name: 'Dashboard',
+ path: '/',
+ icon: 'smile',
+ },
+];
+export { headerMenuConfig, asideMenuConfig };
+
\ No newline at end of file
diff --git a/packages/rax-renderer/demo/wechat-miniprogram/pages/index.wxss b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/pages/Test/index.css
similarity index 100%
rename from packages/rax-renderer/demo/wechat-miniprogram/pages/index.wxss
rename to modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/pages/Test/index.css
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/pages/Test/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/pages/Test/index.jsx
new file mode 100644
index 0000000000..080c4245b6
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/pages/Test/index.jsx
@@ -0,0 +1,129 @@
+// 注意: 出码引擎注入的临时变量默认都以 "__$$" 开头，禁止在搭建的代码中直接访问。
+// 例外：react 框架的导出名和各种组件名除外。
+import React from 'react';
+
+import { Form, Input, NumberPicker, Select, Button } from '@alifd/next';
+
+import '@alifd/next/lib/form/style';
+
+import '@alifd/next/lib/input/style';
+
+import '@alifd/next/lib/number-picker/style';
+
+import '@alifd/next/lib/select/style';
+
+import '@alifd/next/lib/button/style';
+
+import utils, { RefsManager } from '../../utils';
+
+import * as __$$i18n from '../../i18n';
+
+import __$$constants from '../../constants';
+
+import './index.css';
+
+class Test$$Page extends React.Component {
+ _context = this;
+
+ get constants() {
+ return __$$constants || {};
+ }
+
+ constructor(props, context) {
+ super(props);
+
+ this.utils = utils;
+
+ this._refsManager = new RefsManager();
+
+ __$$i18n._inject2(this);
+
+ this.state = { text: 'outter' };
+ }
+
+ $ = (refName) => {
+ return this._refsManager.get(refName);
+ };
+
+ $$ = (refName) => {
+ return this._refsManager.getAll(refName);
+ };
+
+ componentDidMount() {
+ console.log('componentDidMount');
+ }
+
+ render() {
+ const __$$context = this._context || this;
+ const { state } = __$$context;
+ return (
+
+
+ );
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/typings.d.ts b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/typings.d.ts
new file mode 100644
index 0000000000..a9f8de7ceb
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/typings.d.ts
@@ -0,0 +1,9 @@
+/// ;
+ }
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/utils.js b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/utils.js
new file mode 100644
index 0000000000..1190717924
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/utils.js
@@ -0,0 +1,47 @@
+import { createRef } from 'react';
+
+export class RefsManager {
+ constructor() {
+ this.refInsStore = {};
+ }
+
+ clearNullRefs() {
+ Object.keys(this.refInsStore).forEach((refName) => {
+ const filteredInsList = this.refInsStore[refName].filter(
+ (insRef) => !!insRef.current
+ );
+ if (filteredInsList.length > 0) {
+ this.refInsStore[refName] = filteredInsList;
+ } else {
+ delete this.refInsStore[refName];
+ }
+ });
+ }
+
+ get(refName) {
+ this.clearNullRefs();
+ if (this.refInsStore[refName] && this.refInsStore[refName].length > 0) {
+ return this.refInsStore[refName][0].current;
+ }
+
+ return null;
+ }
+
+ getAll(refName) {
+ this.clearNullRefs();
+ if (this.refInsStore[refName] && this.refInsStore[refName].length > 0) {
+ return this.refInsStore[refName].map((i) => i.current);
+ }
+
+ return [];
+ }
+
+ linkRef(refName) {
+ const refIns = createRef();
+ this.refInsStore[refName] = this.refInsStore[refName] || [];
+ this.refInsStore[refName].push(refIns);
+ return refIns;
+ }
+}
+
+export default {};
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/schema.json5 b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/schema.json5
new file mode 100644
index 0000000000..2228212067
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/schema.json5
@@ -0,0 +1,256 @@
+{
+ "version": "1.0.0",
+ "componentsMap": [
+ {
+ "componentName": "Button",
+ "package": "@alifd/next",
+ "version": "1.19.18",
+ "destructuring": true,
+ "exportName": "Button"
+ },
+ {
+ "componentName": "Button.Group",
+ "package": "@alifd/next",
+ "version": "1.19.18",
+ "destructuring": true,
+ "exportName": "Button",
+ "subName": "Group"
+ },
+ {
+ "componentName": "Input",
+ "package": "@alifd/next",
+ "version": "1.19.18",
+ "destructuring": true,
+ "exportName": "Input"
+ },
+ {
+ "componentName": "Form",
+ "package": "@alifd/next",
+ "version": "1.19.18",
+ "destructuring": true,
+ "exportName": "Form"
+ },
+ {
+ "componentName": "Form.Item",
+ "package": "@alifd/next",
+ "version": "1.19.18",
+ "destructuring": true,
+ "exportName": "Form",
+ "subName": "Item"
+ },
+ {
+ "componentName": "NumberPicker",
+ "package": "@alifd/next",
+ "version": "1.19.18",
+ "destructuring": true,
+ "exportName": "NumberPicker"
+ },
+ {
+ "componentName": "Select",
+ "package": "@alifd/next",
+ "version": "1.19.18",
+ "destructuring": true,
+ "exportName": "Select"
+ }
+ ],
+ "componentsTree": [
+ {
+ "componentName": "Page",
+ "id": "node$1",
+ "meta": {
+ "title": "测试",
+ "router": "/"
+ },
+ "props": {
+ "ref": "outterView",
+ "autoLoading": true
+ },
+ "fileName": "test",
+ "state": {
+ "text": "outter"
+ },
+ "lifeCycles": {
+ "componentDidMount": {
+ "type": "JSFunction",
+ "value": "function() { console.log('componentDidMount'); }"
+ }
+ },
+ "children": [
+ {
+ "componentName": "Form",
+ "id": "node$2",
+ "props": {
+ "labelCol": {
+ "type": "JSExpression",
+ "value": "this.state.colNum"
+ },
+ "style": {},
+ "ref": "testForm"
+ },
+ "children": [
+ {
+ "componentName": "Form.Item",
+ "id": "node$3",
+ "props": {
+ "label": {
+ type: 'JSExpression',
+ value: 'this.i18n("i18n-jwg27yo4")',
+ },
+ "name": "name",
+ "initValue": "李雷"
+ },
+ "children": [
+ {
+ "componentName": "Input",
+ "id": "node$4",
+ "props": {
+ "placeholder": "请输入",
+ "size": "medium",
+ "style": {
+ "width": 320
+ }
+ }
+ }
+ ]
+ },
+ {
+ "componentName": "Form.Item",
+ "id": "node$5",
+ "props": {
+ "label": "年龄：",
+ "name": "age",
+ "initValue": "22"
+ },
+ "children": [
+ {
+ "componentName": "NumberPicker",
+ "id": "node$6",
+ "props": {
+ "size": "medium",
+ "type": "normal"
+ }
+ }
+ ]
+ },
+ {
+ "componentName": "Form.Item",
+ "id": "node$7",
+ "props": {
+ "label": "职业：",
+ "name": "profession"
+ },
+ "children": [
+ {
+ "componentName": "Select",
+ "id": "node$8",
+ "props": {
+ "dataSource": [
+ {
+ "label": "教师",
+ "value": "t"
+ },
+ {
+ "label": "医生",
+ "value": "d"
+ },
+ {
+ "label": "歌手",
+ "value": "s"
+ }
+ ]
+ }
+ }
+ ]
+ },
+ {
+ "componentName": "Div",
+ "id": "node$9",
+ "props": {
+ "style": {
+ "textAlign": "center"
+ }
+ },
+ "children": [
+ {
+ "componentName": "Button.Group",
+ "id": "node$a",
+ "props": {},
+ "children": [
+ {
+ "componentName": "Button",
+ "id": "node$b",
+ "props": {
+ "type": "primary",
+ "style": {
+ "margin": "0 5px 0 5px"
+ },
+ "htmlType": "submit"
+ },
+ "children": [
+ "提交"
+ ]
+ },
+ {
+ "componentName": "Button",
+ "id": "node$d",
+ "props": {
+ "type": "normal",
+ "style": {
+ "margin": "0 5px 0 5px"
+ },
+ "htmlType": "reset"
+ },
+ "children": [
+ "重置"
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ "constants": {
+ "ENV": "prod",
+ "DOMAIN": "xxx.xxx.com"
+ },
+ "i18n": {
+ "zh-CN": {
+ "i18n-jwg27yo4": "你好",
+ "i18n-jwg27yo3": "中国"
+ },
+ "en-US": {
+ "i18n-jwg27yo4": "Hello",
+ "i18n-jwg27yo3": "China"
+ }
+ },
+ "css": "body {font-size: 12px;} .table { width: 100px;}",
+ "config": {
+ "sdkVersion": "1.0.3",
+ "historyMode": "hash",
+ "targetRootID": "J_Container",
+ "layout": {
+ "componentName": "BasicLayout",
+ "props": {
+ "logo": "...",
+ "name": "测试网站"
+ }
+ },
+ "theme": {
+ "package": "@alife/theme-fusion",
+ "version": "^0.1.0",
+ "primary": "#ff9966"
+ }
+ },
+ "meta": {
+ "name": "demo应用",
+ "git_group": "appGroup",
+ "project_name": "app_demo",
+ "description": "这是一个测试应用",
+ "spma": "spa23d",
+ "creator": "月飞"
+ }
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/.browserslistrc b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/.browserslistrc
new file mode 100644
index 0000000000..55a130413d
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/.browserslistrc
@@ -0,0 +1,3 @@
+defaults
+ios_saf 9
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/.gitignore b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/.gitignore
new file mode 100644
index 0000000000..4ec178818e
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/.gitignore
@@ -0,0 +1,25 @@
+
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules/
+
+# production
+build/
+dist/
+tmp/
+lib/
+
+# misc
+.idea/
+.happypack
+.DS_Store
+*.swp
+*.dia~
+.ice
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+index.module.scss.d.ts
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/README.md b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/README.md
new file mode 100644
index 0000000000..6d9dd75215
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/README.md
@@ -0,0 +1 @@
+This project is generated by lowcode-code-generator & lowcode-solution-icejs3.
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/ice.config.mts b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/ice.config.mts
new file mode 100644
index 0000000000..e1d8a28141
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/ice.config.mts
@@ -0,0 +1,90 @@
+import { join } from 'path';
+import { defineConfig } from '@ice/app';
+import _ from 'lodash';
+import fusion from '@ice/plugin-fusion';
+import locales from '@ice/plugin-moment-locales';
+import type { Plugin } from '@ice/app/esm/types';
+
+interface PluginOptions {
+ id: string;
+}
+
+const plugin: Plugin = (options) => ({
+ // name 可选，插件名称
+ name: 'plugin-name',
+ // setup 必选，用于定制工程构建配置
+ setup: ({ onGetConfig, modifyUserConfig }) => {
+ modifyUserConfig('codeSplitting', 'page');
+
+ onGetConfig((config) => {
+ config.entry = {
+ web: join(process.cwd(), '.ice/entry.client.tsx'),
+ };
+
+ config.cssFilename = '[name].css';
+
+ config.configureWebpack = config.configureWebpack || [];
+ config.configureWebpack?.push((webpackConfig) => {
+ if (webpackConfig.output) {
+ webpackConfig.output.filename = '[name].js';
+ webpackConfig.output.chunkFilename = '[name].js';
+ }
+ return webpackConfig;
+ });
+
+ config.swcOptions = _.merge(config.swcOptions, {
+ compilationConfig: {
+ jsc: {
+ transform: {
+ react: {
+ runtime: 'classic',
+ },
+ },
+ },
+ },
+ });
+
+ // 解决 webpack publicPath 问题
+ config.transforms = config.transforms || [];
+ config.transforms.push((source: string, id: string) => {
+ if (id.includes('.ice/entry.client.tsx')) {
+ let code = `
+ if (!__webpack_public_path__?.startsWith('http') && document.currentScript) {
+ // @ts-ignore
+ __webpack_public_path__ = document.currentScript.src.replace(/^(.*\\/)[^/]+$/, '$1');
+ window.__ICE_ASSETS_MANIFEST__ = window.__ICE_ASSETS_MANIFEST__ || {};
+ window.__ICE_ASSETS_MANIFEST__.publicPath = __webpack_public_path__;
+ }
+ `;
+ code += source;
+ return { code };
+ }
+ });
+ });
+ },
+});
+
+// The project config, see https://v3.ice.work/docs/guide/basic/config
+const minify = process.env.NODE_ENV === 'production' ? 'swc' : false;
+export default defineConfig(() => ({
+ ssr: false,
+ ssg: false,
+ minify,
+
+ externals: {
+ react: 'React',
+ 'react-dom': 'ReactDOM',
+ 'react-dom/client': 'ReactDOM',
+ '@alifd/next': 'Next',
+ lodash: 'var window._',
+ '@alilc/lowcode-engine': 'var window.AliLowCodeEngine',
+ },
+ plugins: [
+ fusion({
+ importStyle: 'sass',
+ }),
+ locales(),
+ plugin(),
+ ],
+}));
+
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/package.json b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/package.json
new file mode 100644
index 0000000000..8f02ff1c7e
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/package.json
@@ -0,0 +1,42 @@
+{
+ "name": "icejs3-demo-app",
+ "version": "0.1.5",
+ "description": "icejs 3 轻量级模板，使用 JavaScript，仅包含基础的 Layout。",
+ "dependencies": {
+ "moment": "^2.24.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-router": "^6.9.0",
+ "react-router-dom": "^6.9.0",
+ "intl-messageformat": "^9.3.6",
+ "@alifd/next": "1.19.18",
+ "@ice/runtime": "~1.1.0",
+ "@alilc/lowcode-datasource-engine": "^1.0.0"
+ },
+ "devDependencies": {
+ "@ice/app": "~3.1.0",
+ "@types/react": "^18.0.0",
+ "@types/react-dom": "^18.0.0",
+ "@types/node": "^18.11.17",
+ "@ice/plugin-fusion": "^1.0.1",
+ "@ice/plugin-moment-locales": "^1.0.0",
+ "eslint": "^6.0.1",
+ "stylelint": "^13.2.0"
+ },
+ "scripts": {
+ "start": "ice start",
+ "build": "ice build",
+ "lint": "npm run eslint && npm run stylelint",
+ "eslint": "eslint --cache --ext .js,.jsx ./",
+ "stylelint": "stylelint ./**/*.scss"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ },
+ "repository": {
+ "type": "git",
+ "url": "http://gitlab.xxx.com/msd/leak-scan/tree/master"
+ },
+ "private": true,
+ "originTemplate": "@alifd/scaffold-lite-js"
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/app.ts b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/app.ts
new file mode 100644
index 0000000000..6d5856292d
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/app.ts
@@ -0,0 +1,13 @@
+import { defineAppConfig } from 'ice';
+
+// App config, see https://v3.ice.work/docs/guide/basic/app
+export default defineAppConfig(() => ({
+ // Set your configs here.
+ app: {
+ rootId: 'App',
+ },
+ router: {
+ type: 'browser',
+ basename: '/',
+ },
+}));
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/constants.js b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/constants.js
new file mode 100644
index 0000000000..91198f9044
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/constants.js
@@ -0,0 +1,3 @@
+const __$$constants = { ENV: 'prod', DOMAIN: 'xxx.xxx.com' };
+
+export default __$$constants;
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/document.tsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/document.tsx
new file mode 100644
index 0000000000..aff0231d95
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/document.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Meta, Title, Links, Main, Scripts } from 'ice';
+
+export default function Document() {
+ return (
+
+
+
+
+
+
+
+
+
+ {childrenItems}
+
+ );
+ return subNav;
+ }
+
+ return null;
+ }
+
+ const navItem = (
+
+ {item.name}
+
+ );
+ return navItem;
+}
+
+const Navigation = (props, context) => {
+ const location = useLocation();
+ const { pathname } = location;
+ const { isCollapse } = context;
+ return (
+
+ );
+};
+
+Navigation.contextTypes = {
+ isCollapse: PropTypes.bool,
+};
+export default Navigation;
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/layouts/BasicLayout/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/layouts/BasicLayout/index.jsx
new file mode 100644
index 0000000000..18db44df5e
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/layouts/BasicLayout/index.jsx
@@ -0,0 +1,81 @@
+
+import React, { useState } from 'react';
+import { Shell, ConfigProvider } from '@alifd/next';
+import PageNav from './components/PageNav';
+import Logo from './components/Logo';
+import Footer from './components/Footer';
+
+(function() {
+ const throttle = function(type, name, obj = window) {
+ let running = false;
+
+ const func = () => {
+ if (running) {
+ return;
+ }
+
+ running = true;
+ requestAnimationFrame(() => {
+ obj.dispatchEvent(new CustomEvent(name));
+ running = false;
+ });
+ };
+
+ obj.addEventListener(type, func);
+ };
+
+ throttle('resize', 'optimizedResize');
+})();
+
+export default function BasicLayout({ children }) {
+ const getDevice = width => {
+ const isPhone =
+ typeof navigator !== 'undefined' && navigator && navigator.userAgent.match(/phone/gi);
+
+ if (width < 680 || isPhone) {
+ return 'phone';
+ }
+ if (width < 1280 && width > 680) {
+ return 'tablet';
+ }
+ return 'desktop';
+ };
+
+ const [device, setDevice] = useState(getDevice(NaN));
+ window.addEventListener('optimizedResize', e => {
+ setDevice(getDevice(e && e.target && e.target.innerWidth));
+ });
+ return (
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+
+ );
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/layouts/BasicLayout/menuConfig.js b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/layouts/BasicLayout/menuConfig.js
new file mode 100644
index 0000000000..5332202be4
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/layouts/BasicLayout/menuConfig.js
@@ -0,0 +1,11 @@
+
+const headerMenuConfig = [];
+const asideMenuConfig = [
+ {
+ name: 'Dashboard',
+ path: '/',
+ icon: 'smile',
+ },
+];
+export { headerMenuConfig, asideMenuConfig };
+
\ No newline at end of file
diff --git a/packages/rax-simulator-renderer/src/builtin-components/UnusualComponent/index.less b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/pages/Test/index.css
similarity index 100%
rename from packages/rax-simulator-renderer/src/builtin-components/UnusualComponent/index.less
rename to modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/pages/Test/index.css
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/pages/Test/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/pages/Test/index.jsx
new file mode 100644
index 0000000000..2f0a6efa9a
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/pages/Test/index.jsx
@@ -0,0 +1,107 @@
+// 注意: 出码引擎注入的临时变量默认都以 "__$$" 开头，禁止在搭建的代码中直接访问。
+// 例外：react 框架的导出名和各种组件名除外。
+import React from 'react';
+
+import Super, {
+ Button,
+ Input as CustomInput,
+ Form,
+ NumberPicker,
+ Select,
+ SearchTable as SearchTableExport,
+} from '@alifd/next';
+
+import SuperOther from '@alifd/next';
+
+import '@alifd/next/lib/super/style';
+
+import '@alifd/next/lib/button/style';
+
+import '@alifd/next/lib/input/style';
+
+import '@alifd/next/lib/form/style';
+
+import '@alifd/next/lib/number-picker/style';
+
+import '@alifd/next/lib/select/style';
+
+import '@alifd/next/lib/search-table/style';
+
+import utils from '../../utils';
+
+import * as __$$i18n from '../../i18n';
+
+import __$$constants from '../../constants';
+
+import './index.css';
+
+const SuperSub = Super.Sub;
+
+const SelectOption = Select.Option;
+
+const SearchTable = SearchTableExport.default;
+
+class Test$$Page extends React.Component {
+ _context = this;
+
+ get constants() {
+ return __$$constants || {};
+ }
+
+ constructor(props, context) {
+ super(props);
+
+ this.utils = utils;
+
+ __$$i18n._inject2(this);
+
+ this.state = {};
+ }
+
+ $ = () => null;
+
+ $$ = () => [];
+
+ componentDidMount() {}
+
+ render() {
+ const __$$context = this._context || this;
+ const { state } = __$$context;
+ return (
+
+
+ );
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/typings.d.ts b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/typings.d.ts
new file mode 100644
index 0000000000..a9f8de7ceb
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/typings.d.ts
@@ -0,0 +1,9 @@
+/// ;
+ }
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/utils.js b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/utils.js
new file mode 100644
index 0000000000..1190717924
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/utils.js
@@ -0,0 +1,47 @@
+import { createRef } from 'react';
+
+export class RefsManager {
+ constructor() {
+ this.refInsStore = {};
+ }
+
+ clearNullRefs() {
+ Object.keys(this.refInsStore).forEach((refName) => {
+ const filteredInsList = this.refInsStore[refName].filter(
+ (insRef) => !!insRef.current
+ );
+ if (filteredInsList.length > 0) {
+ this.refInsStore[refName] = filteredInsList;
+ } else {
+ delete this.refInsStore[refName];
+ }
+ });
+ }
+
+ get(refName) {
+ this.clearNullRefs();
+ if (this.refInsStore[refName] && this.refInsStore[refName].length > 0) {
+ return this.refInsStore[refName][0].current;
+ }
+
+ return null;
+ }
+
+ getAll(refName) {
+ this.clearNullRefs();
+ if (this.refInsStore[refName] && this.refInsStore[refName].length > 0) {
+ return this.refInsStore[refName].map((i) => i.current);
+ }
+
+ return [];
+ }
+
+ linkRef(refName) {
+ const refIns = createRef();
+ this.refInsStore[refName] = this.refInsStore[refName] || [];
+ this.refInsStore[refName].push(refIns);
+ return refIns;
+ }
+}
+
+export default {};
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/schema.json5 b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/schema.json5
new file mode 100644
index 0000000000..173b793e13
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/schema.json5
@@ -0,0 +1,159 @@
+{
+ "version": "1.0.0",
+ "componentsMap": [
+ {
+ "componentName": "Super",
+ "package": "@alifd/next",
+ "version": "1.19.18",
+ "destructuring": false,
+ "exportName": "Super"
+ },
+ {
+ "componentName": "SuperOther",
+ "package": "@alifd/next",
+ "version": "1.19.18",
+ "destructuring": false,
+ "exportName": "Super"
+ },
+ {
+ "componentName": "SuperSub",
+ "package": "@alifd/next",
+ "version": "1.19.18",
+ "destructuring": false,
+ "exportName": "Super",
+ "subName": "Sub",
+ },
+ {
+ "componentName": "Button",
+ "package": "@alifd/next",
+ "version": "1.19.18",
+ "destructuring": true,
+ "exportName": "Button"
+ },
+ {
+ "componentName": "SearchTable",
+ "package": "@alifd/next",
+ "version": "1.19.18",
+ "destructuring": true,
+ "exportName": "SearchTable",
+ "subName": "default",
+ },
+ {
+ "componentName": "Button.Group",
+ "package": "@alifd/next",
+ "version": "1.19.18",
+ "destructuring": true,
+ "exportName": "Button",
+ "subName": "Group"
+ },
+ {
+ "componentName": "CustomInput",
+ "package": "@alifd/next",
+ "version": "1.19.18",
+ "destructuring": true,
+ "exportName": "Input"
+ },
+ {
+ "componentName": "Form",
+ "package": "@alifd/next",
+ "version": "1.19.18",
+ "destructuring": true,
+ "exportName": "Form"
+ },
+ {
+ "componentName": "Form.Item",
+ "package": "@alifd/next",
+ "version": "1.19.18",
+ "destructuring": true,
+ "exportName": "Form",
+ "subName": "Item"
+ },
+ {
+ "componentName": "NumberPicker",
+ "package": "@alifd/next",
+ "version": "1.19.18",
+ "destructuring": true,
+ "exportName": "NumberPicker"
+ },
+ {
+ "componentName": "SelectOption",
+ "package": "@alifd/next",
+ "version": "1.19.18",
+ "destructuring": true,
+ "exportName": "Select",
+ "subName": "Option"
+ }
+ ],
+ "componentsTree": [
+ {
+ "componentName": "Page",
+ "id": "node$1",
+ "meta": {
+ "title": "测试",
+ "router": "/"
+ },
+ "fileName": "test",
+ "children": [
+ {
+ "componentName": "Super",
+ "props": {
+ "title": {
+ "type":"variable",
+ "value":"标题",
+ "variable":"this.state.title"
+ }
+ }
+ },
+ { "componentName": "SuperSub" },
+ { "componentName": "SuperOther" },
+ { "componentName": "Button" },
+ { "componentName": "Button.Group" },
+ { "componentName": "CustomInput" },
+ { "componentName": "Form.Item" },
+ { "componentName": "NumberPicker" },
+ { "componentName": "SelectOption" },
+ { "componentName": "SearchTable" },
+ ]
+ }
+ ],
+ "constants": {
+ "ENV": "prod",
+ "DOMAIN": "xxx.xxx.com"
+ },
+ "i18n": {
+ "zh-CN": {
+ "i18n-jwg27yo4": "你好",
+ "i18n-jwg27yo3": "中国"
+ },
+ "en-US": {
+ "i18n-jwg27yo4": "Hello",
+ "i18n-jwg27yo3": "China"
+ }
+ },
+ "css": "body {font-size: 12px;} .table { width: 100px;}",
+ "config": {
+ "sdkVersion": "1.0.3",
+ "historyMode": "hash",
+ "targetRootID": "J_Container",
+ "layout": {
+ "componentName": "BasicLayout",
+ "props": {
+ "logo": "...",
+ "name": "测试网站"
+ }
+ },
+ "theme": {
+ "package": "@alife/theme-fusion",
+ "version": "^0.1.0",
+ "primary": "#ff9966"
+ }
+ },
+ "meta": {
+ "name": "demo应用",
+ "git_group": "appGroup",
+ "project_name": "app_demo",
+ "description": "这是一个测试应用",
+ "spma": "spa23d",
+ "creator": "月飞"
+ }
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/.browserslistrc b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/.browserslistrc
new file mode 100644
index 0000000000..55a130413d
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/.browserslistrc
@@ -0,0 +1,3 @@
+defaults
+ios_saf 9
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/.gitignore b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/.gitignore
new file mode 100644
index 0000000000..4ec178818e
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/.gitignore
@@ -0,0 +1,25 @@
+
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules/
+
+# production
+build/
+dist/
+tmp/
+lib/
+
+# misc
+.idea/
+.happypack
+.DS_Store
+*.swp
+*.dia~
+.ice
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+index.module.scss.d.ts
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/README.md b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/README.md
new file mode 100644
index 0000000000..6d9dd75215
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/README.md
@@ -0,0 +1 @@
+This project is generated by lowcode-code-generator & lowcode-solution-icejs3.
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/ice.config.mts b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/ice.config.mts
new file mode 100644
index 0000000000..e1d8a28141
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/ice.config.mts
@@ -0,0 +1,90 @@
+import { join } from 'path';
+import { defineConfig } from '@ice/app';
+import _ from 'lodash';
+import fusion from '@ice/plugin-fusion';
+import locales from '@ice/plugin-moment-locales';
+import type { Plugin } from '@ice/app/esm/types';
+
+interface PluginOptions {
+ id: string;
+}
+
+const plugin: Plugin = (options) => ({
+ // name 可选，插件名称
+ name: 'plugin-name',
+ // setup 必选，用于定制工程构建配置
+ setup: ({ onGetConfig, modifyUserConfig }) => {
+ modifyUserConfig('codeSplitting', 'page');
+
+ onGetConfig((config) => {
+ config.entry = {
+ web: join(process.cwd(), '.ice/entry.client.tsx'),
+ };
+
+ config.cssFilename = '[name].css';
+
+ config.configureWebpack = config.configureWebpack || [];
+ config.configureWebpack?.push((webpackConfig) => {
+ if (webpackConfig.output) {
+ webpackConfig.output.filename = '[name].js';
+ webpackConfig.output.chunkFilename = '[name].js';
+ }
+ return webpackConfig;
+ });
+
+ config.swcOptions = _.merge(config.swcOptions, {
+ compilationConfig: {
+ jsc: {
+ transform: {
+ react: {
+ runtime: 'classic',
+ },
+ },
+ },
+ },
+ });
+
+ // 解决 webpack publicPath 问题
+ config.transforms = config.transforms || [];
+ config.transforms.push((source: string, id: string) => {
+ if (id.includes('.ice/entry.client.tsx')) {
+ let code = `
+ if (!__webpack_public_path__?.startsWith('http') && document.currentScript) {
+ // @ts-ignore
+ __webpack_public_path__ = document.currentScript.src.replace(/^(.*\\/)[^/]+$/, '$1');
+ window.__ICE_ASSETS_MANIFEST__ = window.__ICE_ASSETS_MANIFEST__ || {};
+ window.__ICE_ASSETS_MANIFEST__.publicPath = __webpack_public_path__;
+ }
+ `;
+ code += source;
+ return { code };
+ }
+ });
+ });
+ },
+});
+
+// The project config, see https://v3.ice.work/docs/guide/basic/config
+const minify = process.env.NODE_ENV === 'production' ? 'swc' : false;
+export default defineConfig(() => ({
+ ssr: false,
+ ssg: false,
+ minify,
+
+ externals: {
+ react: 'React',
+ 'react-dom': 'ReactDOM',
+ 'react-dom/client': 'ReactDOM',
+ '@alifd/next': 'Next',
+ lodash: 'var window._',
+ '@alilc/lowcode-engine': 'var window.AliLowCodeEngine',
+ },
+ plugins: [
+ fusion({
+ importStyle: 'sass',
+ }),
+ locales(),
+ plugin(),
+ ],
+}));
+
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/package.json b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/package.json
new file mode 100644
index 0000000000..393be4663e
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/package.json
@@ -0,0 +1,45 @@
+{
+ "name": "icejs3-demo-app",
+ "version": "0.1.5",
+ "description": "icejs 3 轻量级模板，使用 JavaScript，仅包含基础的 Layout。",
+ "dependencies": {
+ "moment": "^2.24.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-router": "^6.9.0",
+ "react-router-dom": "^6.9.0",
+ "intl-messageformat": "^9.3.6",
+ "@alifd/next": "1.26.15",
+ "@ice/runtime": "~1.1.0",
+ "@alilc/lowcode-datasource-engine": "^1.0.0",
+ "@alilc/lowcode-datasource-fetch-handler": "^1.0.0",
+ "@alife/container": "^1.0.0",
+ "@alife/mc-assets-1935": "0.1.9"
+ },
+ "devDependencies": {
+ "@ice/app": "~3.1.0",
+ "@types/react": "^18.0.0",
+ "@types/react-dom": "^18.0.0",
+ "@types/node": "^18.11.17",
+ "@ice/plugin-fusion": "^1.0.1",
+ "@ice/plugin-moment-locales": "^1.0.0",
+ "eslint": "^6.0.1",
+ "stylelint": "^13.2.0"
+ },
+ "scripts": {
+ "start": "ice start",
+ "build": "ice build",
+ "lint": "npm run eslint && npm run stylelint",
+ "eslint": "eslint --cache --ext .js,.jsx ./",
+ "stylelint": "stylelint ./**/*.scss"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ },
+ "repository": {
+ "type": "git",
+ "url": "http://gitlab.xxx.com/msd/leak-scan/tree/master"
+ },
+ "private": true,
+ "originTemplate": "@alifd/scaffold-lite-js"
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/app.ts b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/app.ts
new file mode 100644
index 0000000000..6d5856292d
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/app.ts
@@ -0,0 +1,13 @@
+import { defineAppConfig } from 'ice';
+
+// App config, see https://v3.ice.work/docs/guide/basic/app
+export default defineAppConfig(() => ({
+ // Set your configs here.
+ app: {
+ rootId: 'App',
+ },
+ router: {
+ type: 'browser',
+ basename: '/',
+ },
+}));
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/constants.js b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/constants.js
new file mode 100644
index 0000000000..ea766c9da3
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/constants.js
@@ -0,0 +1,3 @@
+const __$$constants = {};
+
+export default __$$constants;
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/document.tsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/document.tsx
new file mode 100644
index 0000000000..aff0231d95
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/document.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Meta, Title, Links, Main, Scripts } from 'ice';
+
+export default function Document() {
+ return (
+
+
+
+
+
+
+
+
+
+ {childrenItems}
+
+ );
+ return subNav;
+ }
+
+ return null;
+ }
+
+ const navItem = (
+
+ {item.name}
+
+ );
+ return navItem;
+}
+
+const Navigation = (props, context) => {
+ const location = useLocation();
+ const { pathname } = location;
+ const { isCollapse } = context;
+ return (
+
+ );
+};
+
+Navigation.contextTypes = {
+ isCollapse: PropTypes.bool,
+};
+export default Navigation;
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/layouts/BasicLayout/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/layouts/BasicLayout/index.jsx
new file mode 100644
index 0000000000..18db44df5e
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/layouts/BasicLayout/index.jsx
@@ -0,0 +1,81 @@
+
+import React, { useState } from 'react';
+import { Shell, ConfigProvider } from '@alifd/next';
+import PageNav from './components/PageNav';
+import Logo from './components/Logo';
+import Footer from './components/Footer';
+
+(function() {
+ const throttle = function(type, name, obj = window) {
+ let running = false;
+
+ const func = () => {
+ if (running) {
+ return;
+ }
+
+ running = true;
+ requestAnimationFrame(() => {
+ obj.dispatchEvent(new CustomEvent(name));
+ running = false;
+ });
+ };
+
+ obj.addEventListener(type, func);
+ };
+
+ throttle('resize', 'optimizedResize');
+})();
+
+export default function BasicLayout({ children }) {
+ const getDevice = width => {
+ const isPhone =
+ typeof navigator !== 'undefined' && navigator && navigator.userAgent.match(/phone/gi);
+
+ if (width < 680 || isPhone) {
+ return 'phone';
+ }
+ if (width < 1280 && width > 680) {
+ return 'tablet';
+ }
+ return 'desktop';
+ };
+
+ const [device, setDevice] = useState(getDevice(NaN));
+ window.addEventListener('optimizedResize', e => {
+ setDevice(getDevice(e && e.target && e.target.innerWidth));
+ });
+ return (
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+
+ );
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/layouts/BasicLayout/menuConfig.js b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/layouts/BasicLayout/menuConfig.js
new file mode 100644
index 0000000000..5332202be4
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/layouts/BasicLayout/menuConfig.js
@@ -0,0 +1,11 @@
+
+const headerMenuConfig = [];
+const asideMenuConfig = [
+ {
+ name: 'Dashboard',
+ path: '/',
+ icon: 'smile',
+ },
+];
+export { headerMenuConfig, asideMenuConfig };
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/pages/Test/index.css b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/pages/Test/index.css
new file mode 100644
index 0000000000..066114aeeb
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/pages/Test/index.css
@@ -0,0 +1,8 @@
+body {
+ font-size: 12px;
+}
+
+.botton {
+ width: 100px;
+ color: #ff00ff;
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/pages/Test/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/pages/Test/index.jsx
new file mode 100644
index 0000000000..6400d7445b
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/pages/Test/index.jsx
@@ -0,0 +1,292 @@
+// 注意: 出码引擎注入的临时变量默认都以 "__$$" 开头，禁止在搭建的代码中直接访问。
+// 例外：react 框架的导出名和各种组件名除外。
+import React from 'react';
+
+import {
+ Page as NextPage,
+ Block as NextBlock,
+ P as NextP,
+ Text as NextText,
+} from '@alife/container/lib/index.js';
+
+import { AliSearchTable as AliSearchTableExport } from '@alife/mc-assets-1935/build/lowcode/index.js';
+
+import { createFetchHandler as __$$createFetchRequestHandler } from '@alilc/lowcode-datasource-fetch-handler';
+
+import { create as __$$createDataSourceEngine } from '@alilc/lowcode-datasource-engine/runtime';
+
+import utils, { RefsManager } from '../../utils';
+
+import * as __$$i18n from '../../i18n';
+
+import __$$constants from '../../constants';
+
+import './index.css';
+
+const NextBlockCell = NextBlock.Cell;
+
+const AliSearchTable = AliSearchTableExport.default;
+
+class Test$$Page extends React.Component {
+ _context = this;
+
+ _dataSourceConfig = this._defineDataSourceConfig();
+ _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this, {
+ runtimeConfig: true,
+ requestHandlersMap: { fetch: __$$createFetchRequestHandler() },
+ });
+
+ get dataSourceMap() {
+ return this._dataSourceEngine.dataSourceMap || {};
+ }
+
+ reloadDataSource = async () => {
+ await this._dataSourceEngine.reloadDataSource();
+ };
+
+ get constants() {
+ return __$$constants || {};
+ }
+
+ constructor(props, context) {
+ super(props);
+
+ this.utils = utils;
+
+ this._refsManager = new RefsManager();
+
+ __$$i18n._inject2(this);
+
+ this.state = { text: 'outter', isShowDialog: false };
+ }
+
+ $ = (refName) => {
+ return this._refsManager.get(refName);
+ };
+
+ $$ = (refName) => {
+ return this._refsManager.getAll(refName);
+ };
+
+ _defineDataSourceConfig() {
+ const _this = this;
+ return {
+ list: [
+ {
+ type: 'fetch',
+ isInit: function () {
+ return true;
+ }.bind(_this),
+ options: function () {
+ return {
+ params: {},
+ method: 'GET',
+ isCors: true,
+ timeout: 5000,
+ headers: {},
+ uri: 'https://mocks.xxx.com/mock/jjpin/user/list',
+ };
+ }.bind(_this),
+ id: 'users',
+ },
+ ],
+ };
+ }
+
+ componentWillUnmount() {
+ console.log('will umount');
+ }
+
+ componentDidUpdate(prevProps, prevState, snapshot) {
+ console.log(this.state);
+ }
+
+ testFunc() {
+ console.log('test func');
+ }
+
+ onClick() {
+ this.setState({
+ isShowDialog: true,
+ });
+ }
+
+ closeDialog() {
+ this.setState({
+ isShowDialog: false,
+ });
+ }
+
+ onSearch(values) {
+ console.log('search form:', values);
+ console.log(this.dataSourceMap);
+ this.dataSourceMap['users'].load(values);
+ }
+
+ onClear() {
+ console.log('form reset');
+ this.setState({
+ isShowDialog: true,
+ });
+ }
+
+ onPageChange(page, pageSize) {
+ console.log(`page: ${page}, pageSize: ${pageSize}`);
+ }
+
+ componentDidMount() {
+ this._dataSourceEngine.reloadDataSource();
+
+ console.log('did mount');
+ }
+
+ render() {
+ const __$$context = this._context || this;
+ const { state } = __$$context;
+ return (
+
+
+ );
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/typings.d.ts b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/typings.d.ts
new file mode 100644
index 0000000000..a9f8de7ceb
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/typings.d.ts
@@ -0,0 +1,9 @@
+/// ;
+ }
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/utils.js b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/utils.js
new file mode 100644
index 0000000000..1190717924
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/utils.js
@@ -0,0 +1,47 @@
+import { createRef } from 'react';
+
+export class RefsManager {
+ constructor() {
+ this.refInsStore = {};
+ }
+
+ clearNullRefs() {
+ Object.keys(this.refInsStore).forEach((refName) => {
+ const filteredInsList = this.refInsStore[refName].filter(
+ (insRef) => !!insRef.current
+ );
+ if (filteredInsList.length > 0) {
+ this.refInsStore[refName] = filteredInsList;
+ } else {
+ delete this.refInsStore[refName];
+ }
+ });
+ }
+
+ get(refName) {
+ this.clearNullRefs();
+ if (this.refInsStore[refName] && this.refInsStore[refName].length > 0) {
+ return this.refInsStore[refName][0].current;
+ }
+
+ return null;
+ }
+
+ getAll(refName) {
+ this.clearNullRefs();
+ if (this.refInsStore[refName] && this.refInsStore[refName].length > 0) {
+ return this.refInsStore[refName].map((i) => i.current);
+ }
+
+ return [];
+ }
+
+ linkRef(refName) {
+ const refIns = createRef();
+ this.refInsStore[refName] = this.refInsStore[refName] || [];
+ this.refInsStore[refName].push(refIns);
+ return refIns;
+ }
+}
+
+export default {};
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/schema.json5 b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/schema.json5
new file mode 100644
index 0000000000..ca97204e9c
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/schema.json5
@@ -0,0 +1,353 @@
+{
+ "version": "1.0.0",
+ "componentsMap": [
+ {
+ "package": "@alife/mc-assets-1935",
+ "version": "0.1.9",
+ "exportName": "AliSearchTable",
+ "main": "build/lowcode/index.js",
+ "subName": "default",
+ "destructuring": true,
+ "componentName": "AliSearchTable"
+ },
+ {
+ "package": "@alife/container",
+ "version": "^1.0.0",
+ "exportName": "P",
+ "main": "lib/index.js",
+ "destructuring": true,
+ "subName": "",
+ "componentName": "NextP"
+ },
+ {
+ "package": "@alife/container",
+ "version": "^1.0.0",
+ "exportName": "Block",
+ "main": "lib/index.js",
+ "destructuring": true,
+ "subName": "Cell",
+ "componentName": "NextBlockCell"
+ },
+ {
+ "package": "@alife/container",
+ "version": "^1.0.0",
+ "exportName": "Block",
+ "main": "lib/index.js",
+ "destructuring": true,
+ "subName": "",
+ "componentName": "NextBlock"
+ },
+ {
+ "package": "@alife/container",
+ "version": "^1.0.0",
+ "exportName": "Text",
+ "main": "lib/index.js",
+ "destructuring": true,
+ "subName": "",
+ "componentName": "NextText"
+ },
+ {
+ "package": "@alife/container",
+ "version": "^1.0.0",
+ "exportName": "Page",
+ "main": "lib/index.js",
+ "destructuring": true,
+ "subName": "",
+ "componentName": "NextPage"
+ }
+ ],
+ "componentsTree": [
+ {
+ "componentName": "Page",
+ "id": "node_dockcviv8fo1",
+ "props": {
+ "ref": "outterView",
+ "style": {
+ "height": "100%"
+ }
+ },
+ "fileName": "test",
+ "dataSource": {
+ "list": [
+ {
+ "type": "fetch",
+ "isInit": true,
+ "options": {
+ "params": {},
+ "method": "GET",
+ "isCors": true,
+ "timeout": 5000,
+ "headers": {},
+ "uri": "https://mocks.xxx.com/mock/jjpin/user/list"
+ },
+ "id": "users"
+ }
+ ]
+ },
+ "css": "body {\n font-size: 12px;\n}\n\n.botton {\n width: 100px;\n color: #ff00ff\n}",
+ "lifeCycles": {
+ "componentDidMount": {
+ "type": "JSFunction",
+ "value": "function() {\n console.log('did mount');\n }"
+ },
+ "componentWillUnmount": {
+ "type": "JSFunction",
+ "value": "function() {\n console.log('will umount');\n }"
+ },
+ "componentDidUpdate": {
+ "type": "JSFunction",
+ "value": "function(prevProps, prevState, snapshot) {\n console.log(this.state);\n }"
+ }
+ },
+ "methods": {
+ "testFunc": {
+ "type": "JSFunction",
+ "value": "function() {\n console.log('test func');\n }"
+ },
+ "onClick": {
+ "type": "JSFunction",
+ "value": "function() {\n this.setState({\n isShowDialog: true\n })\n }"
+ },
+ "closeDialog": {
+ "type": "JSFunction",
+ "value": "function() {\n this.setState({\n isShowDialog: false\n })\n }"
+ },
+ "onSearch": {
+ "type": "JSFunction",
+ "value": "function(values) {\n console.log('search form:', values)\n console.log(this.dataSourceMap);\n this.dataSourceMap['users'].load(values)\n }"
+ },
+ "onClear": {
+ "type": "JSFunction",
+ "value": "function() {\n console.log('form reset')\n this.setState({\n isShowDialog: true\n })\n }"
+ },
+ "onPageChange": {
+ "type": "JSFunction",
+ "value": "function(page, pageSize) {\n console.log(`page: ${page}, pageSize: ${pageSize}`)\n }"
+ }
+ },
+ "state": {
+ "text": "outter",
+ "isShowDialog": false
+ },
+ "children": [
+ {
+ "componentName": "NextPage",
+ "id": "node_ockkgjwi8z1",
+ "props": {
+ "columns": 12,
+ "placeholderStyle": {
+ "gridRowEnd": "span 1",
+ "gridColumnEnd": "span 12"
+ },
+ "placeholder": "页面主体内容：拖拽Block布局组件到这里",
+ "header": {
+ "type": "JSSlot",
+ "value": [
+ {
+ "componentName": "NextP",
+ "id": "node_ockkgjwi8zn",
+ "props": {
+ "wrap": true,
+ "type": "body2",
+ "verAlign": "middle",
+ "textSpacing": true,
+ "align": "left",
+ "flex": true
+ },
+ "children": [
+ {
+ "componentName": "NextText",
+ "id": "node_ockkgjwi8zo",
+ "props": {
+ "type": "h5",
+ "children": "员工列表"
+ }
+ }
+ ]
+ }
+ ],
+ "title": "header"
+ },
+ "headerTest": {
+ "type": "JSSlot",
+ "value": [],
+ "title": "header"
+ },
+ "headerProps": {
+ "background": "surface"
+ },
+ "footer": {
+ "type": "JSSlot",
+ "title": "footer"
+ },
+ "minHeight": "100vh"
+ },
+ "children": [
+ {
+ "componentName": "NextBlock",
+ "id": "node_ockkgjwi8z2",
+ "props": {
+ "prefix": "next-",
+ "placeholderStyle": {
+ "height": "100%"
+ },
+ "noPadding": false,
+ "noBorder": false,
+ "background": "surface",
+ "colSpan": 12,
+ "rowSpan": 1,
+ "childTotalColumns": "1fr"
+ },
+ "title": "分区",
+ "children": [
+ {
+ "componentName": "NextBlockCell",
+ "id": "node_ockkgjwi8z3",
+ "props": {
+ "title": "",
+ "primaryKey": "732",
+ "prefix": "next-",
+ "placeholderStyle": {
+ "height": "100%"
+ },
+ "colSpan": 1,
+ "rowSpan": 1
+ },
+ "children": [
+ {
+ "componentName": "NextP",
+ "id": "node_ockkgjwi8zu",
+ "props": {
+ "wrap": true,
+ "type": "body2",
+ "textSpacing": true,
+ "verAlign": "center",
+ "align": "flex-start",
+ "flex": true
+ },
+ "children": [
+ {
+ "componentName": "AliSearchTable",
+ "id": "node_ockkgjwi8zv",
+ "props": {
+ "dataSource": {
+ "type": "JSExpression",
+ "value": "this.state.users.data"
+ },
+ "rowKey": "workid",
+ "columns": [
+ {
+ "title": "花名",
+ "dataIndex": "cname"
+ },
+ {
+ "title": "user_id",
+ "dataIndex": "workid"
+ },
+ {
+ "title": "部门",
+ "dataIndex": "dep"
+ }
+ ],
+ "searchItems": [
+ {
+ "label": "姓名",
+ "name": "cname"
+ },
+ {
+ "label": "部门",
+ "name": "dep"
+ }
+ ],
+ "onSearch": {
+ "type": "JSFunction",
+ "value": "function(){ return this.onSearch.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
+ },
+ "onClear": {
+ "type": "JSFunction",
+ "value": "function(){ return this.onClear.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
+ },
+ "pagination": {
+ "defaultPageSize": "",
+ "onPageChange": {
+ "type": "JSFunction",
+ "value": "function(){ return this.onPageChange.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
+ },
+ "showSizeChanger": true
+ }
+ }
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "componentName": "NextPage",
+ "id": "node_ockm4jxd6313",
+ "props": {
+ "columns": 12,
+ "headerDivider": true,
+ "placeholderStyle": {
+ "gridRowEnd": "span 1",
+ "gridColumnEnd": "span 12"
+ },
+ "placeholder": "页面主体内容：拖拽Block布局组件到这里",
+ "header": {
+ "type": "JSSlot",
+ "title": "header"
+ },
+ "headerProps": {
+ "background": "surface"
+ },
+ "footer": {
+ "type": "JSSlot",
+ "title": "footer"
+ },
+ "minHeight": "100vh"
+ },
+ "title": "页面",
+ "children": [
+ {
+ "componentName": "NextBlock",
+ "id": "node_ockm4jxd6314",
+ "props": {
+ "prefix": "next-",
+ "placeholderStyle": {
+ "height": "100%"
+ },
+ "noPadding": false,
+ "noBorder": false,
+ "background": "surface",
+ "colSpan": 12,
+ "rowSpan": 1,
+ "childTotalColumns": 1
+ },
+ "title": "区块",
+ "children": [
+ {
+ "componentName": "NextBlockCell",
+ "id": "node_ockm4jxd6315",
+ "props": {
+ "title": "",
+ "primaryKey": "472",
+ "prefix": "next-",
+ "placeholderStyle": {
+ "height": "100%"
+ },
+ "colSpan": 1,
+ "rowSpan": 1
+ }
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ "i18n": {}
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/.browserslistrc b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/.browserslistrc
new file mode 100644
index 0000000000..55a130413d
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/.browserslistrc
@@ -0,0 +1,3 @@
+defaults
+ios_saf 9
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/.gitignore b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/.gitignore
new file mode 100644
index 0000000000..4ec178818e
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/.gitignore
@@ -0,0 +1,25 @@
+
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules/
+
+# production
+build/
+dist/
+tmp/
+lib/
+
+# misc
+.idea/
+.happypack
+.DS_Store
+*.swp
+*.dia~
+.ice
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+index.module.scss.d.ts
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/README.md b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/README.md
new file mode 100644
index 0000000000..6d9dd75215
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/README.md
@@ -0,0 +1 @@
+This project is generated by lowcode-code-generator & lowcode-solution-icejs3.
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/ice.config.mts b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/ice.config.mts
new file mode 100644
index 0000000000..e1d8a28141
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/ice.config.mts
@@ -0,0 +1,90 @@
+import { join } from 'path';
+import { defineConfig } from '@ice/app';
+import _ from 'lodash';
+import fusion from '@ice/plugin-fusion';
+import locales from '@ice/plugin-moment-locales';
+import type { Plugin } from '@ice/app/esm/types';
+
+interface PluginOptions {
+ id: string;
+}
+
+const plugin: Plugin = (options) => ({
+ // name 可选，插件名称
+ name: 'plugin-name',
+ // setup 必选，用于定制工程构建配置
+ setup: ({ onGetConfig, modifyUserConfig }) => {
+ modifyUserConfig('codeSplitting', 'page');
+
+ onGetConfig((config) => {
+ config.entry = {
+ web: join(process.cwd(), '.ice/entry.client.tsx'),
+ };
+
+ config.cssFilename = '[name].css';
+
+ config.configureWebpack = config.configureWebpack || [];
+ config.configureWebpack?.push((webpackConfig) => {
+ if (webpackConfig.output) {
+ webpackConfig.output.filename = '[name].js';
+ webpackConfig.output.chunkFilename = '[name].js';
+ }
+ return webpackConfig;
+ });
+
+ config.swcOptions = _.merge(config.swcOptions, {
+ compilationConfig: {
+ jsc: {
+ transform: {
+ react: {
+ runtime: 'classic',
+ },
+ },
+ },
+ },
+ });
+
+ // 解决 webpack publicPath 问题
+ config.transforms = config.transforms || [];
+ config.transforms.push((source: string, id: string) => {
+ if (id.includes('.ice/entry.client.tsx')) {
+ let code = `
+ if (!__webpack_public_path__?.startsWith('http') && document.currentScript) {
+ // @ts-ignore
+ __webpack_public_path__ = document.currentScript.src.replace(/^(.*\\/)[^/]+$/, '$1');
+ window.__ICE_ASSETS_MANIFEST__ = window.__ICE_ASSETS_MANIFEST__ || {};
+ window.__ICE_ASSETS_MANIFEST__.publicPath = __webpack_public_path__;
+ }
+ `;
+ code += source;
+ return { code };
+ }
+ });
+ });
+ },
+});
+
+// The project config, see https://v3.ice.work/docs/guide/basic/config
+const minify = process.env.NODE_ENV === 'production' ? 'swc' : false;
+export default defineConfig(() => ({
+ ssr: false,
+ ssg: false,
+ minify,
+
+ externals: {
+ react: 'React',
+ 'react-dom': 'ReactDOM',
+ 'react-dom/client': 'ReactDOM',
+ '@alifd/next': 'Next',
+ lodash: 'var window._',
+ '@alilc/lowcode-engine': 'var window.AliLowCodeEngine',
+ },
+ plugins: [
+ fusion({
+ importStyle: 'sass',
+ }),
+ locales(),
+ plugin(),
+ ],
+}));
+
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/package.json b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/package.json
new file mode 100644
index 0000000000..d007025a60
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/package.json
@@ -0,0 +1,46 @@
+{
+ "name": "icejs3-demo-app",
+ "version": "0.1.5",
+ "description": "icejs 3 轻量级模板，使用 JavaScript，仅包含基础的 Layout。",
+ "dependencies": {
+ "moment": "^2.24.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-router": "^6.9.0",
+ "react-router-dom": "^6.9.0",
+ "intl-messageformat": "^9.3.6",
+ "@alifd/next": "1.26.15",
+ "@ice/runtime": "~1.1.0",
+ "@alilc/lowcode-datasource-engine": "^1.0.0",
+ "undefined": "*",
+ "@alife/container": "0.3.7",
+ "@alilc/antd-lowcode": "0.5.4",
+ "@alife/mc-assets-1935": "0.1.16"
+ },
+ "devDependencies": {
+ "@ice/app": "~3.1.0",
+ "@types/react": "^18.0.0",
+ "@types/react-dom": "^18.0.0",
+ "@types/node": "^18.11.17",
+ "@ice/plugin-fusion": "^1.0.1",
+ "@ice/plugin-moment-locales": "^1.0.0",
+ "eslint": "^6.0.1",
+ "stylelint": "^13.2.0"
+ },
+ "scripts": {
+ "start": "ice start",
+ "build": "ice build",
+ "lint": "npm run eslint && npm run stylelint",
+ "eslint": "eslint --cache --ext .js,.jsx ./",
+ "stylelint": "stylelint ./**/*.scss"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ },
+ "repository": {
+ "type": "git",
+ "url": "http://gitlab.xxx.com/msd/leak-scan/tree/master"
+ },
+ "private": true,
+ "originTemplate": "@alifd/scaffold-lite-js"
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/app.ts b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/app.ts
new file mode 100644
index 0000000000..6d5856292d
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/app.ts
@@ -0,0 +1,13 @@
+import { defineAppConfig } from 'ice';
+
+// App config, see https://v3.ice.work/docs/guide/basic/app
+export default defineAppConfig(() => ({
+ // Set your configs here.
+ app: {
+ rootId: 'App',
+ },
+ router: {
+ type: 'browser',
+ basename: '/',
+ },
+}));
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/constants.js b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/constants.js
new file mode 100644
index 0000000000..ea766c9da3
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/constants.js
@@ -0,0 +1,3 @@
+const __$$constants = {};
+
+export default __$$constants;
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/document.tsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/document.tsx
new file mode 100644
index 0000000000..aff0231d95
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/document.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Meta, Title, Links, Main, Scripts } from 'ice';
+
+export default function Document() {
+ return (
+
+
+
+
+
+
+
+
+
+ {childrenItems}
+
+ );
+ return subNav;
+ }
+
+ return null;
+ }
+
+ const navItem = (
+
+ {item.name}
+
+ );
+ return navItem;
+}
+
+const Navigation = (props, context) => {
+ const location = useLocation();
+ const { pathname } = location;
+ const { isCollapse } = context;
+ return (
+
+ );
+};
+
+Navigation.contextTypes = {
+ isCollapse: PropTypes.bool,
+};
+export default Navigation;
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/layouts/BasicLayout/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/layouts/BasicLayout/index.jsx
new file mode 100644
index 0000000000..18db44df5e
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/layouts/BasicLayout/index.jsx
@@ -0,0 +1,81 @@
+
+import React, { useState } from 'react';
+import { Shell, ConfigProvider } from '@alifd/next';
+import PageNav from './components/PageNav';
+import Logo from './components/Logo';
+import Footer from './components/Footer';
+
+(function() {
+ const throttle = function(type, name, obj = window) {
+ let running = false;
+
+ const func = () => {
+ if (running) {
+ return;
+ }
+
+ running = true;
+ requestAnimationFrame(() => {
+ obj.dispatchEvent(new CustomEvent(name));
+ running = false;
+ });
+ };
+
+ obj.addEventListener(type, func);
+ };
+
+ throttle('resize', 'optimizedResize');
+})();
+
+export default function BasicLayout({ children }) {
+ const getDevice = width => {
+ const isPhone =
+ typeof navigator !== 'undefined' && navigator && navigator.userAgent.match(/phone/gi);
+
+ if (width < 680 || isPhone) {
+ return 'phone';
+ }
+ if (width < 1280 && width > 680) {
+ return 'tablet';
+ }
+ return 'desktop';
+ };
+
+ const [device, setDevice] = useState(getDevice(NaN));
+ window.addEventListener('optimizedResize', e => {
+ setDevice(getDevice(e && e.target && e.target.innerWidth));
+ });
+ return (
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+
+ );
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/layouts/BasicLayout/menuConfig.js b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/layouts/BasicLayout/menuConfig.js
new file mode 100644
index 0000000000..5332202be4
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/layouts/BasicLayout/menuConfig.js
@@ -0,0 +1,11 @@
+
+const headerMenuConfig = [];
+const asideMenuConfig = [
+ {
+ name: 'Dashboard',
+ path: '/',
+ icon: 'smile',
+ },
+];
+export { headerMenuConfig, asideMenuConfig };
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/pages/Test/index.css b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/pages/Test/index.css
new file mode 100644
index 0000000000..066114aeeb
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/pages/Test/index.css
@@ -0,0 +1,8 @@
+body {
+ font-size: 12px;
+}
+
+.botton {
+ width: 100px;
+ color: #ff00ff;
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/pages/Test/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/pages/Test/index.jsx
new file mode 100644
index 0000000000..7427f164d9
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/pages/Test/index.jsx
@@ -0,0 +1,389 @@
+// 注意: 出码引擎注入的临时变量默认都以 "__$$" 开头，禁止在搭建的代码中直接访问。
+// 例外：react 框架的导出名和各种组件名除外。
+import React from 'react';
+
+import {
+ Page as NextPage,
+ Block as NextBlock,
+ P as NextP,
+} from '@alife/container/lib/index.js';
+
+import {
+ Card,
+ Space,
+ Typography,
+ Select,
+ Button,
+ Modal,
+ Form,
+ InputNumber,
+ Input,
+} from '@alilc/antd-lowcode/dist/antd-lowcode.esm.js';
+
+import { AliAutoSearchTable } from '@alife/mc-assets-1935/build/lowcode/index.js';
+
+import utils, { RefsManager } from '../../utils';
+
+import * as __$$i18n from '../../i18n';
+
+import __$$constants from '../../constants';
+
+import './index.css';
+
+const NextBlockCell = NextBlock.Cell;
+
+const AliAutoSearchTableDefault = AliAutoSearchTable.default;
+
+class Test$$Page extends React.Component {
+ _context = this;
+
+ get constants() {
+ return __$$constants || {};
+ }
+
+ constructor(props, context) {
+ super(props);
+
+ this.utils = utils;
+
+ this._refsManager = new RefsManager();
+
+ __$$i18n._inject2(this);
+
+ this.state = {
+ name: 'nongzhou',
+ gateways: [],
+ selectedGateway: null,
+ records: [],
+ modalVisible: false,
+ };
+ }
+
+ $ = (refName) => {
+ return this._refsManager.get(refName);
+ };
+
+ $$ = (refName) => {
+ return this._refsManager.getAll(refName);
+ };
+
+ componentWillUnmount() {
+ /* ... */
+ }
+
+ componentDidUpdate() {
+ /* ... */
+ }
+
+ onChange() {
+ /* ... */
+ }
+
+ getActions() {
+ /* ... */
+ }
+
+ onCreateOrder() {
+ /* ... */
+ }
+
+ onCancelModal() {
+ /* ... */
+ }
+
+ onConfirmCreateOrder() {
+ /* ... */
+ }
+
+ componentDidMount() {}
+
+ render() {
+ const __$$context = this._context || this;
+ const { state } = __$$context;
+ return (
+
+
+ );
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/typings.d.ts b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/typings.d.ts
new file mode 100644
index 0000000000..a9f8de7ceb
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/typings.d.ts
@@ -0,0 +1,9 @@
+/// ;
+ }
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/utils.js b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/utils.js
new file mode 100644
index 0000000000..1190717924
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/utils.js
@@ -0,0 +1,47 @@
+import { createRef } from 'react';
+
+export class RefsManager {
+ constructor() {
+ this.refInsStore = {};
+ }
+
+ clearNullRefs() {
+ Object.keys(this.refInsStore).forEach((refName) => {
+ const filteredInsList = this.refInsStore[refName].filter(
+ (insRef) => !!insRef.current
+ );
+ if (filteredInsList.length > 0) {
+ this.refInsStore[refName] = filteredInsList;
+ } else {
+ delete this.refInsStore[refName];
+ }
+ });
+ }
+
+ get(refName) {
+ this.clearNullRefs();
+ if (this.refInsStore[refName] && this.refInsStore[refName].length > 0) {
+ return this.refInsStore[refName][0].current;
+ }
+
+ return null;
+ }
+
+ getAll(refName) {
+ this.clearNullRefs();
+ if (this.refInsStore[refName] && this.refInsStore[refName].length > 0) {
+ return this.refInsStore[refName].map((i) => i.current);
+ }
+
+ return [];
+ }
+
+ linkRef(refName) {
+ const refIns = createRef();
+ this.refInsStore[refName] = this.refInsStore[refName] || [];
+ this.refInsStore[refName].push(refIns);
+ return refIns;
+ }
+}
+
+export default {};
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/schema.json5 b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/schema.json5
new file mode 100644
index 0000000000..b59b97e763
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/schema.json5
@@ -0,0 +1,677 @@
+{
+ version: '1.0.0',
+ componentsMap: [
+ {
+ package: '@alilc/antd-lowcode',
+ version: '0.5.4',
+ exportName: 'Typography',
+ main: 'dist/antd-lowcode.esm.js',
+ destructuring: true,
+ subName: 'Text',
+ componentName: 'Typography.Text',
+ },
+ {
+ package: '@alilc/antd-lowcode',
+ version: '0.5.4',
+ exportName: 'Select',
+ main: 'dist/antd-lowcode.esm.js',
+ destructuring: true,
+ componentName: 'Select',
+ },
+ {
+ package: '@alilc/antd-lowcode',
+ version: '0.5.4',
+ exportName: 'Space',
+ main: 'dist/antd-lowcode.esm.js',
+ destructuring: true,
+ componentName: 'Space',
+ },
+ {
+ package: '@alilc/antd-lowcode',
+ version: '0.5.4',
+ exportName: 'Button',
+ main: 'dist/antd-lowcode.esm.js',
+ destructuring: true,
+ componentName: 'Button',
+ },
+ {
+ package: '@alilc/antd-lowcode',
+ version: '0.5.4',
+ exportName: 'InputNumber',
+ main: 'dist/antd-lowcode.esm.js',
+ destructuring: true,
+ componentName: 'InputNumber',
+ },
+ {
+ package: '@alilc/antd-lowcode',
+ version: '0.5.4',
+ exportName: 'Form',
+ main: 'dist/antd-lowcode.esm.js',
+ destructuring: true,
+ subName: 'Item',
+ componentName: 'Form.Item',
+ },
+ {
+ package: '@alilc/antd-lowcode',
+ version: '0.5.4',
+ exportName: 'Input',
+ main: 'dist/antd-lowcode.esm.js',
+ destructuring: true,
+ subName: 'TextArea',
+ componentName: 'Input.TextArea',
+ },
+ {
+ package: '@alilc/antd-lowcode',
+ version: '0.5.4',
+ exportName: 'Form',
+ main: 'dist/antd-lowcode.esm.js',
+ destructuring: true,
+ componentName: 'Form',
+ },
+ {
+ package: '@alilc/antd-lowcode',
+ version: '0.5.4',
+ exportName: 'Modal',
+ main: 'dist/antd-lowcode.esm.js',
+ destructuring: true,
+ componentName: 'Modal',
+ },
+ {
+ package: '@alife/mc-assets-1935',
+ version: '0.1.16',
+ exportName: 'AliAutoSearchTable',
+ main: 'build/lowcode/index.js',
+ destructuring: true,
+ subName: 'default',
+ componentName: 'AliAutoSearchTableDefault',
+ },
+ {
+ package: '@alilc/antd-lowcode',
+ version: '0.5.4',
+ exportName: 'Card',
+ main: 'dist/antd-lowcode.esm.js',
+ destructuring: true,
+ componentName: 'Card',
+ },
+ {
+ package: '@alife/container',
+ version: '0.3.7',
+ exportName: 'P',
+ main: 'lib/index.js',
+ destructuring: true,
+ subName: '',
+ componentName: 'NextP',
+ },
+ {
+ package: '@alife/container',
+ version: '0.3.7',
+ exportName: 'Block',
+ main: 'lib/index.js',
+ destructuring: true,
+ subName: 'Cell',
+ componentName: 'NextBlockCell',
+ },
+ {
+ package: '@alife/container',
+ version: '0.3.7',
+ exportName: 'Block',
+ main: 'lib/index.js',
+ destructuring: true,
+ subName: '',
+ componentName: 'NextBlock',
+ },
+ {
+ devMode: 'lowcode',
+ componentName: 'Slot',
+ },
+ {
+ package: '@alife/container',
+ version: '0.3.7',
+ exportName: 'Page',
+ main: 'lib/index.js',
+ destructuring: true,
+ subName: '',
+ componentName: 'NextPage',
+ },
+ {
+ devMode: 'lowcode',
+ componentName: 'Page',
+ },
+ ],
+ componentsTree: [
+ {
+ componentName: 'Page',
+ id: 'node_dockcviv8fo1',
+ props: {
+ ref: 'outterView',
+ style: {
+ height: '100%',
+ },
+ },
+ fileName: 'test',
+ dataSource: {
+ list: [],
+ },
+ css: 'body {\n font-size: 12px;\n}\n\n.botton {\n width: 100px;\n color: #ff00ff\n}',
+ lifeCycles: {
+ componentDidMount: {
+ type: 'JSFunction',
+ value: 'function() { /* ... */ }',
+ },
+ componentWillUnmount: {
+ type: 'JSFunction',
+ value: 'function() { /* ... */ }',
+ },
+ componentDidUpdate: {
+ type: 'JSFunction',
+ value: 'function() { /* ... */ }',
+ },
+ },
+ methods: {
+ onChange: {
+ type: 'JSFunction',
+ value: 'function() { /* ... */ }',
+ },
+ getActions: {
+ type: 'JSFunction',
+ value: 'function() { /* ... */ }',
+ },
+ onCreateOrder: {
+ type: 'JSFunction',
+ value: 'function() { /* ... */ }',
+ },
+ onCancelModal: {
+ type: 'JSFunction',
+ value: 'function() { /* ... */ }',
+ },
+ onConfirmCreateOrder: {
+ type: 'JSFunction',
+ value: 'function() { /* ... */ }',
+ },
+ },
+ state: {
+ name: 'nongzhou',
+ gateways: [],
+ selectedGateway: null,
+ records: [],
+ modalVisible: false,
+ },
+ children: [
+ {
+ componentName: 'NextPage',
+ id: 'node_ocknqx3esma',
+ props: {
+ columns: 12,
+ headerDivider: true,
+ placeholderStyle: {
+ gridRowEnd: 'span 1',
+ gridColumnEnd: 'span 12',
+ },
+ placeholder: '页面主体内容：拖拽Block布局组件到这里',
+ header: {
+ type: 'JSSlot',
+ title: 'header',
+ },
+ headerProps: {
+ background: 'surface',
+ },
+ footer: {
+ type: 'JSSlot',
+ title: 'footer',
+ },
+ minHeight: '100vh',
+ style: {
+ cursor: 'pointer',
+ },
+ },
+ title: '页面',
+ children: [
+ {
+ componentName: 'NextBlock',
+ id: 'node_ocknqx3esmb',
+ props: {
+ prefix: 'next-',
+ placeholderStyle: {
+ height: '100%',
+ },
+ noPadding: false,
+ noBorder: false,
+ background: 'surface',
+ layoutmode: 'O',
+ colSpan: 12,
+ rowSpan: 1,
+ childTotalColumns: 12,
+ },
+ title: '区块',
+ children: [
+ {
+ componentName: 'NextBlockCell',
+ id: 'node_ocknqx3esmc',
+ props: {
+ title: '',
+ prefix: 'next-',
+ placeholderStyle: {
+ height: '100%',
+ },
+ layoutmode: 'O',
+ childTotalColumns: 12,
+ isAutoContainer: true,
+ colSpan: 12,
+ rowSpan: 1,
+ },
+ children: [
+ {
+ componentName: 'NextP',
+ id: 'node_ocknqx3esm1j',
+ props: {
+ wrap: false,
+ type: 'body2',
+ verAlign: 'middle',
+ textSpacing: true,
+ align: 'left',
+ full: true,
+ flex: true,
+ },
+ title: '段落',
+ children: [
+ {
+ componentName: 'Card',
+ id: 'node_ocknqx3esm1k',
+ props: {
+ title: '',
+ },
+ children: [
+ {
+ componentName: 'Space',
+ id: 'node_ocknqx3esm1n',
+ props: {
+ size: 0,
+ align: 'center',
+ direction: 'horizontal',
+ },
+ children: [
+ {
+ componentName: 'Typography.Text',
+ id: 'node_ocknqx3esm1l',
+ props: {
+ children: '所在网关：',
+ },
+ },
+ {
+ componentName: 'Select',
+ id: 'node_ocknqx3esm1m',
+ props: {
+ style: {
+ marginTop: '16px',
+ marginRight: '16px',
+ marginBottom: '16px',
+ marginLeft: '16px',
+ width: '400px',
+ display: 'inline-block',
+ },
+ options: {
+ type: 'JSExpression',
+ value: 'this.state.gateways',
+ },
+ mode: 'single',
+ defaultValue: ['auto-edd-uniproxy'],
+ labelInValue: true,
+ showSearch: true,
+ allowClear: false,
+ placeholder: '请选取网关',
+ showArrow: true,
+ loading: false,
+ tokenSeparators: [],
+ __events: {
+ eventDataList: [
+ {
+ type: 'componentEvent',
+ name: 'onChange',
+ relatedEventName: 'onChange',
+ },
+ ],
+ eventList: [
+ {
+ name: 'onBlur',
+ disabled: false,
+ },
+ {
+ name: 'onChange',
+ disabled: true,
+ },
+ {
+ name: 'onDeselect',
+ disabled: false,
+ },
+ {
+ name: 'onFocus',
+ disabled: false,
+ },
+ {
+ name: 'onInputKeyDown',
+ disabled: false,
+ },
+ {
+ name: 'onMouseEnter',
+ disabled: false,
+ },
+ {
+ name: 'onMouseLeave',
+ disabled: false,
+ },
+ {
+ name: 'onPopupScroll',
+ disabled: false,
+ },
+ {
+ name: 'onSearch',
+ disabled: false,
+ },
+ {
+ name: 'onSelect',
+ disabled: false,
+ },
+ {
+ name: 'onDropdownVisibleChange',
+ disabled: false,
+ },
+ ],
+ },
+ onChange: {
+ type: 'JSFunction',
+ value: 'function(){this.onChange.apply(this,Array.prototype.slice.call(arguments).concat([])) }',
+ },
+ },
+ },
+ ],
+ },
+ {
+ componentName: 'Button',
+ id: 'node_ockntwgdsn7',
+ props: {
+ type: 'primary',
+ children: '创建发布单',
+ style: {
+ display: 'block',
+ marginTop: '20px',
+ marginBottom: '20px',
+ },
+ __events: {
+ eventDataList: [
+ {
+ type: 'componentEvent',
+ name: 'onClick',
+ relatedEventName: 'onCreateOrder',
+ },
+ ],
+ eventList: [
+ {
+ name: 'onClick',
+ disabled: true,
+ },
+ ],
+ },
+ onClick: {
+ type: 'JSFunction',
+ value: 'function(){this.onCreateOrder.apply(this,Array.prototype.slice.call(arguments).concat([])) }',
+ },
+ },
+ },
+ {
+ componentName: 'Modal',
+ id: 'node_ockntx4eo9p',
+ props: {
+ title: '创建发布单',
+ visible: {
+ type: 'JSExpression',
+ value: 'this.state.modalVisible',
+ },
+ footer: '',
+ __events: {
+ eventDataList: [
+ {
+ type: 'componentEvent',
+ name: 'onCancel',
+ relatedEventName: 'onCancelModal',
+ },
+ ],
+ eventList: [
+ {
+ name: 'onCancel',
+ disabled: true,
+ },
+ {
+ name: 'onOk',
+ disabled: false,
+ },
+ ],
+ },
+ onCancel: {
+ type: 'JSFunction',
+ value: 'function(){this.onCancelModal.apply(this,Array.prototype.slice.call(arguments).concat([])) }',
+ },
+ zIndex: 2000,
+ },
+ hidden: true,
+ children: [
+ {
+ componentName: 'Form',
+ id: 'node_ockntx4eo9s',
+ props: {
+ labelCol: {
+ span: 6,
+ },
+ wrapperCol: {
+ span: 14,
+ },
+ onFinish: {
+ type: 'JSFunction',
+ value: 'function(){this.onConfirmCreateOrder.apply(this,Array.prototype.slice.call(arguments).concat([])) }',
+ },
+ name: 'basic',
+ __events: {
+ eventDataList: [
+ {
+ type: 'componentEvent',
+ name: 'onFinish',
+ relatedEventName: 'onConfirmCreateOrder',
+ },
+ ],
+ eventList: [
+ {
+ name: 'onFinish',
+ disabled: true,
+ },
+ {
+ name: 'onFinishFailed',
+ disabled: false,
+ },
+ {
+ name: 'onFieldsChange',
+ disabled: false,
+ },
+ {
+ name: 'onValuesChange',
+ disabled: false,
+ },
+ ],
+ },
+ },
+ children: [
+ {
+ componentName: 'Form.Item',
+ id: 'node_ockntx4eo91k',
+ props: {
+ label: '发布批次',
+ },
+ children: [
+ {
+ componentName: 'InputNumber',
+ id: 'node_ockntx4eo91l',
+ props: {
+ value: 3,
+ min: 1,
+ },
+ },
+ ],
+ },
+ {
+ componentName: 'Form.Item',
+ id: 'node_ockntx4eo91r',
+ props: {
+ label: '批次间隔时间',
+ },
+ children: [
+ {
+ componentName: 'InputNumber',
+ id: 'node_ockntx4eo91s',
+ props: {
+ value: 3,
+ },
+ },
+ ],
+ },
+ {
+ componentName: 'Form.Item',
+ id: 'node_ockntx4eo91y',
+ props: {
+ label: '备注 ',
+ },
+ children: [
+ {
+ componentName: 'Input.TextArea',
+ id: 'node_ockntx4eo91z',
+ props: {
+ rows: 3,
+ placeholder: '请输入',
+ },
+ },
+ ],
+ },
+ {
+ componentName: 'Form.Item',
+ id: 'node_ockntx4eo9v',
+ props: {
+ wrapperCol: {
+ offset: 6,
+ },
+ style: {
+ flexDirection: 'row',
+ alignItems: 'flex-end',
+ justifyContent: 'center',
+ display: 'flex',
+ },
+ labelAlign: 'right',
+ },
+ children: [
+ {
+ componentName: 'Button',
+ id: 'node_ockntx4eo9w',
+ props: {
+ type: 'primary',
+ children: '提交',
+ htmlType: 'submit',
+ },
+ },
+ {
+ componentName: 'Button',
+ id: 'node_ockntx4eo9x',
+ props: {
+ style: {
+ marginLeft: 20,
+ },
+ children: '取消',
+ __events: {
+ eventDataList: [
+ {
+ type: 'componentEvent',
+ name: 'onClick',
+ relatedEventName: 'onCancelModal',
+ },
+ ],
+ eventList: [
+ {
+ name: 'onClick',
+ disabled: true,
+ },
+ ],
+ },
+ onClick: {
+ type: 'JSFunction',
+ value: 'function(){this.onCancelModal.apply(this,Array.prototype.slice.call(arguments).concat([])) }',
+ },
+ },
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ {
+ componentName: 'AliAutoSearchTableDefault',
+ id: 'node_ocknqx3esm1q',
+ props: {
+ rowKey: 'key',
+ dataSource: {
+ type: 'JSExpression',
+ value: 'this.state.records',
+ },
+ columns: [
+ {
+ title: '发布名称',
+ dataIndex: 'order_name',
+ key: 'name',
+ },
+ {
+ title: '类型',
+ dataIndex: 'order_type_desc',
+ key: 'age',
+ },
+ {
+ title: '发布状态',
+ dataIndex: 'order_status_desc',
+ key: 'address',
+ },
+ {
+ title: '发布人',
+ dataIndex: 'creator_name',
+ },
+ {
+ title: '当前批次/总批次',
+ dataIndex: 'cur_batch_no',
+ },
+ {
+ title: '发布机器/总机器',
+ dataIndex: 'pubblish_ip_finish_num',
+ },
+ {
+ title: '发布时间',
+ dataIndex: 'publish_id',
+ },
+ ],
+ actions: {
+ type: 'JSExpression',
+ value: 'this.actions || []',
+ },
+ getActions: {
+ type: 'JSFunction',
+ value: 'function(){ return this.getActions.apply(this,Array.prototype.slice.call(arguments).concat([])) }',
+ },
+ },
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ i18n: {},
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/.browserslistrc b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/.browserslistrc
new file mode 100644
index 0000000000..55a130413d
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/.browserslistrc
@@ -0,0 +1,3 @@
+defaults
+ios_saf 9
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/.gitignore b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/.gitignore
new file mode 100644
index 0000000000..4ec178818e
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/.gitignore
@@ -0,0 +1,25 @@
+
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules/
+
+# production
+build/
+dist/
+tmp/
+lib/
+
+# misc
+.idea/
+.happypack
+.DS_Store
+*.swp
+*.dia~
+.ice
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+index.module.scss.d.ts
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/README.md b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/README.md
new file mode 100644
index 0000000000..6d9dd75215
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/README.md
@@ -0,0 +1 @@
+This project is generated by lowcode-code-generator & lowcode-solution-icejs3.
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/ice.config.mts b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/ice.config.mts
new file mode 100644
index 0000000000..e1d8a28141
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/ice.config.mts
@@ -0,0 +1,90 @@
+import { join } from 'path';
+import { defineConfig } from '@ice/app';
+import _ from 'lodash';
+import fusion from '@ice/plugin-fusion';
+import locales from '@ice/plugin-moment-locales';
+import type { Plugin } from '@ice/app/esm/types';
+
+interface PluginOptions {
+ id: string;
+}
+
+const plugin: Plugin = (options) => ({
+ // name 可选，插件名称
+ name: 'plugin-name',
+ // setup 必选，用于定制工程构建配置
+ setup: ({ onGetConfig, modifyUserConfig }) => {
+ modifyUserConfig('codeSplitting', 'page');
+
+ onGetConfig((config) => {
+ config.entry = {
+ web: join(process.cwd(), '.ice/entry.client.tsx'),
+ };
+
+ config.cssFilename = '[name].css';
+
+ config.configureWebpack = config.configureWebpack || [];
+ config.configureWebpack?.push((webpackConfig) => {
+ if (webpackConfig.output) {
+ webpackConfig.output.filename = '[name].js';
+ webpackConfig.output.chunkFilename = '[name].js';
+ }
+ return webpackConfig;
+ });
+
+ config.swcOptions = _.merge(config.swcOptions, {
+ compilationConfig: {
+ jsc: {
+ transform: {
+ react: {
+ runtime: 'classic',
+ },
+ },
+ },
+ },
+ });
+
+ // 解决 webpack publicPath 问题
+ config.transforms = config.transforms || [];
+ config.transforms.push((source: string, id: string) => {
+ if (id.includes('.ice/entry.client.tsx')) {
+ let code = `
+ if (!__webpack_public_path__?.startsWith('http') && document.currentScript) {
+ // @ts-ignore
+ __webpack_public_path__ = document.currentScript.src.replace(/^(.*\\/)[^/]+$/, '$1');
+ window.__ICE_ASSETS_MANIFEST__ = window.__ICE_ASSETS_MANIFEST__ || {};
+ window.__ICE_ASSETS_MANIFEST__.publicPath = __webpack_public_path__;
+ }
+ `;
+ code += source;
+ return { code };
+ }
+ });
+ });
+ },
+});
+
+// The project config, see https://v3.ice.work/docs/guide/basic/config
+const minify = process.env.NODE_ENV === 'production' ? 'swc' : false;
+export default defineConfig(() => ({
+ ssr: false,
+ ssg: false,
+ minify,
+
+ externals: {
+ react: 'React',
+ 'react-dom': 'ReactDOM',
+ 'react-dom/client': 'ReactDOM',
+ '@alifd/next': 'Next',
+ lodash: 'var window._',
+ '@alilc/lowcode-engine': 'var window.AliLowCodeEngine',
+ },
+ plugins: [
+ fusion({
+ importStyle: 'sass',
+ }),
+ locales(),
+ plugin(),
+ ],
+}));
+
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/package.json b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/package.json
new file mode 100644
index 0000000000..38f24df0b1
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/package.json
@@ -0,0 +1,44 @@
+{
+ "name": "icejs3-demo-app",
+ "version": "0.1.5",
+ "description": "icejs 3 轻量级模板，使用 JavaScript，仅包含基础的 Layout。",
+ "dependencies": {
+ "moment": "^2.24.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-router": "^6.9.0",
+ "react-router-dom": "^6.9.0",
+ "intl-messageformat": "^9.3.6",
+ "@alifd/next": "1.19.18",
+ "@ice/runtime": "~1.1.0",
+ "@alilc/lowcode-datasource-engine": "^1.0.0",
+ "@alilc/lowcode-datasource-url-params-handler": "^1.0.0",
+ "@alilc/lowcode-datasource-fetch-handler": "^1.0.0"
+ },
+ "devDependencies": {
+ "@ice/app": "~3.1.0",
+ "@types/react": "^18.0.0",
+ "@types/react-dom": "^18.0.0",
+ "@types/node": "^18.11.17",
+ "@ice/plugin-fusion": "^1.0.1",
+ "@ice/plugin-moment-locales": "^1.0.0",
+ "eslint": "^6.0.1",
+ "stylelint": "^13.2.0"
+ },
+ "scripts": {
+ "start": "ice start",
+ "build": "ice build",
+ "lint": "npm run eslint && npm run stylelint",
+ "eslint": "eslint --cache --ext .js,.jsx ./",
+ "stylelint": "stylelint ./**/*.scss"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ },
+ "repository": {
+ "type": "git",
+ "url": "http://gitlab.xxx.com/msd/leak-scan/tree/master"
+ },
+ "private": true,
+ "originTemplate": "@alifd/scaffold-lite-js"
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/app.ts b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/app.ts
new file mode 100644
index 0000000000..6d5856292d
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/app.ts
@@ -0,0 +1,13 @@
+import { defineAppConfig } from 'ice';
+
+// App config, see https://v3.ice.work/docs/guide/basic/app
+export default defineAppConfig(() => ({
+ // Set your configs here.
+ app: {
+ rootId: 'App',
+ },
+ router: {
+ type: 'browser',
+ basename: '/',
+ },
+}));
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/constants.js b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/constants.js
new file mode 100644
index 0000000000..91198f9044
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/constants.js
@@ -0,0 +1,3 @@
+const __$$constants = { ENV: 'prod', DOMAIN: 'xxx.xxx.com' };
+
+export default __$$constants;
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/document.tsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/document.tsx
new file mode 100644
index 0000000000..aff0231d95
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/document.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Meta, Title, Links, Main, Scripts } from 'ice';
+
+export default function Document() {
+ return (
+
+
+
+
+
+
+
+
+
+ {childrenItems}
+
+ );
+ return subNav;
+ }
+
+ return null;
+ }
+
+ const navItem = (
+
+ {item.name}
+
+ );
+ return navItem;
+}
+
+const Navigation = (props, context) => {
+ const location = useLocation();
+ const { pathname } = location;
+ const { isCollapse } = context;
+ return (
+
+ );
+};
+
+Navigation.contextTypes = {
+ isCollapse: PropTypes.bool,
+};
+export default Navigation;
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/layouts/BasicLayout/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/layouts/BasicLayout/index.jsx
new file mode 100644
index 0000000000..18db44df5e
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/layouts/BasicLayout/index.jsx
@@ -0,0 +1,81 @@
+
+import React, { useState } from 'react';
+import { Shell, ConfigProvider } from '@alifd/next';
+import PageNav from './components/PageNav';
+import Logo from './components/Logo';
+import Footer from './components/Footer';
+
+(function() {
+ const throttle = function(type, name, obj = window) {
+ let running = false;
+
+ const func = () => {
+ if (running) {
+ return;
+ }
+
+ running = true;
+ requestAnimationFrame(() => {
+ obj.dispatchEvent(new CustomEvent(name));
+ running = false;
+ });
+ };
+
+ obj.addEventListener(type, func);
+ };
+
+ throttle('resize', 'optimizedResize');
+})();
+
+export default function BasicLayout({ children }) {
+ const getDevice = width => {
+ const isPhone =
+ typeof navigator !== 'undefined' && navigator && navigator.userAgent.match(/phone/gi);
+
+ if (width < 680 || isPhone) {
+ return 'phone';
+ }
+ if (width < 1280 && width > 680) {
+ return 'tablet';
+ }
+ return 'desktop';
+ };
+
+ const [device, setDevice] = useState(getDevice(NaN));
+ window.addEventListener('optimizedResize', e => {
+ setDevice(getDevice(e && e.target && e.target.innerWidth));
+ });
+ return (
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+
+ );
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/layouts/BasicLayout/menuConfig.js b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/layouts/BasicLayout/menuConfig.js
new file mode 100644
index 0000000000..5332202be4
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/layouts/BasicLayout/menuConfig.js
@@ -0,0 +1,11 @@
+
+const headerMenuConfig = [];
+const asideMenuConfig = [
+ {
+ name: 'Dashboard',
+ path: '/',
+ icon: 'smile',
+ },
+];
+export { headerMenuConfig, asideMenuConfig };
+
\ No newline at end of file
diff --git a/packages/rax-simulator-renderer/src/utils/get-closest-node-instance.ts b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/pages/Test/index.css
similarity index 100%
rename from packages/rax-simulator-renderer/src/utils/get-closest-node-instance.ts
rename to modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/pages/Test/index.css
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/pages/Test/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/pages/Test/index.jsx
new file mode 100644
index 0000000000..515940c334
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/pages/Test/index.jsx
@@ -0,0 +1,205 @@
+// 注意: 出码引擎注入的临时变量默认都以 "__$$" 开头，禁止在搭建的代码中直接访问。
+// 例外：react 框架的导出名和各种组件名除外。
+import React from 'react';
+
+import { Form, Input, NumberPicker, Select, Button } from '@alifd/next';
+
+import { createUrlParamsHandler as __$$createUrlParamsRequestHandler } from '@alilc/lowcode-datasource-url-params-handler';
+
+import { createFetchHandler as __$$createFetchRequestHandler } from '@alilc/lowcode-datasource-fetch-handler';
+
+import { create as __$$createDataSourceEngine } from '@alilc/lowcode-datasource-engine/runtime';
+
+import '@alifd/next/lib/form/style';
+
+import '@alifd/next/lib/input/style';
+
+import '@alifd/next/lib/number-picker/style';
+
+import '@alifd/next/lib/select/style';
+
+import '@alifd/next/lib/button/style';
+
+import utils, { RefsManager } from '../../utils';
+
+import * as __$$i18n from '../../i18n';
+
+import __$$constants from '../../constants';
+
+import './index.css';
+
+class Test$$Page extends React.Component {
+ _context = this;
+
+ _dataSourceConfig = this._defineDataSourceConfig();
+ _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this, {
+ runtimeConfig: true,
+ requestHandlersMap: {
+ urlParams: __$$createUrlParamsRequestHandler(window.location.search),
+ fetch: __$$createFetchRequestHandler(),
+ },
+ });
+
+ get dataSourceMap() {
+ return this._dataSourceEngine.dataSourceMap || {};
+ }
+
+ reloadDataSource = async () => {
+ await this._dataSourceEngine.reloadDataSource();
+ };
+
+ get constants() {
+ return __$$constants || {};
+ }
+
+ constructor(props, context) {
+ super(props);
+
+ this.utils = utils;
+
+ this._refsManager = new RefsManager();
+
+ __$$i18n._inject2(this);
+
+ this.state = { text: 'outter' };
+ }
+
+ $ = (refName) => {
+ return this._refsManager.get(refName);
+ };
+
+ $$ = (refName) => {
+ return this._refsManager.getAll(refName);
+ };
+
+ _defineDataSourceConfig() {
+ const _this = this;
+ return {
+ list: [
+ {
+ id: 'urlParams',
+ type: 'urlParams',
+ isInit: function () {
+ return undefined;
+ }.bind(_this),
+ options: function () {
+ return undefined;
+ }.bind(_this),
+ },
+ {
+ id: 'user',
+ type: 'fetch',
+ options: function () {
+ return {
+ method: 'GET',
+ uri: 'https://shs.xxx.com/mock/1458/demo/user',
+ isSync: true,
+ };
+ }.bind(_this),
+ dataHandler: function (response) {
+ if (!response.data.success) {
+ throw new Error(response.data.message);
+ }
+ return response.data.data;
+ },
+ isInit: function () {
+ return undefined;
+ }.bind(_this),
+ },
+ {
+ id: 'orders',
+ type: 'fetch',
+ options: function () {
+ return {
+ method: 'GET',
+ uri: 'https://shs.xxx.com/mock/1458/demo/orders',
+ isSync: true,
+ };
+ }.bind(_this),
+ dataHandler: function (response) {
+ if (!response.data.success) {
+ throw new Error(response.data.message);
+ }
+ return response.data.data.result;
+ },
+ isInit: function () {
+ return undefined;
+ }.bind(_this),
+ },
+ ],
+ dataHandler: function (dataMap) {
+ console.info('All datasources loaded:', dataMap);
+ },
+ };
+ }
+
+ componentDidMount() {
+ this._dataSourceEngine.reloadDataSource();
+
+ console.log('componentDidMount');
+ }
+
+ render() {
+ const __$$context = this._context || this;
+ const { state } = __$$context;
+ return (
+
+
+ );
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/typings.d.ts b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/typings.d.ts
new file mode 100644
index 0000000000..a9f8de7ceb
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/typings.d.ts
@@ -0,0 +1,9 @@
+/// ;
+ }
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/utils.js b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/utils.js
new file mode 100644
index 0000000000..1190717924
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/utils.js
@@ -0,0 +1,47 @@
+import { createRef } from 'react';
+
+export class RefsManager {
+ constructor() {
+ this.refInsStore = {};
+ }
+
+ clearNullRefs() {
+ Object.keys(this.refInsStore).forEach((refName) => {
+ const filteredInsList = this.refInsStore[refName].filter(
+ (insRef) => !!insRef.current
+ );
+ if (filteredInsList.length > 0) {
+ this.refInsStore[refName] = filteredInsList;
+ } else {
+ delete this.refInsStore[refName];
+ }
+ });
+ }
+
+ get(refName) {
+ this.clearNullRefs();
+ if (this.refInsStore[refName] && this.refInsStore[refName].length > 0) {
+ return this.refInsStore[refName][0].current;
+ }
+
+ return null;
+ }
+
+ getAll(refName) {
+ this.clearNullRefs();
+ if (this.refInsStore[refName] && this.refInsStore[refName].length > 0) {
+ return this.refInsStore[refName].map((i) => i.current);
+ }
+
+ return [];
+ }
+
+ linkRef(refName) {
+ const refIns = createRef();
+ this.refInsStore[refName] = this.refInsStore[refName] || [];
+ this.refInsStore[refName].push(refIns);
+ return refIns;
+ }
+}
+
+export default {};
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/schema.json5 b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/schema.json5
new file mode 100644
index 0000000000..5b6776c1ee
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/schema.json5
@@ -0,0 +1,273 @@
+{
+ version: '1.0.0',
+ componentsMap: [
+ {
+ componentName: 'Button',
+ package: '@alifd/next',
+ version: '1.19.18',
+ destructuring: true,
+ exportName: 'Button',
+ },
+ {
+ componentName: 'Button.Group',
+ package: '@alifd/next',
+ version: '1.19.18',
+ destructuring: true,
+ exportName: 'Button',
+ subName: 'Group',
+ },
+ {
+ componentName: 'Input',
+ package: '@alifd/next',
+ version: '1.19.18',
+ destructuring: true,
+ exportName: 'Input',
+ },
+ {
+ componentName: 'Form',
+ package: '@alifd/next',
+ version: '1.19.18',
+ destructuring: true,
+ exportName: 'Form',
+ },
+ {
+ componentName: 'Form.Item',
+ package: '@alifd/next',
+ version: '1.19.18',
+ destructuring: true,
+ exportName: 'Form',
+ subName: 'Item',
+ },
+ {
+ componentName: 'NumberPicker',
+ package: '@alifd/next',
+ version: '1.19.18',
+ destructuring: true,
+ exportName: 'NumberPicker',
+ },
+ {
+ componentName: 'Select',
+ package: '@alifd/next',
+ version: '1.19.18',
+ destructuring: true,
+ exportName: 'Select',
+ },
+ ],
+ componentsTree: [
+ {
+ componentName: 'Page',
+ id: 'node$1',
+ meta: {
+ title: '测试',
+ router: '/',
+ },
+ props: {
+ ref: 'outterView',
+ autoLoading: true,
+ },
+ fileName: 'test',
+ state: {
+ text: 'outter',
+ },
+ lifeCycles: {
+ componentDidMount: {
+ type: 'JSFunction',
+ value: "function() { console.log('componentDidMount'); }",
+ },
+ },
+ dataSource: {
+ list: [
+ {
+ id: 'urlParams',
+ type: 'urlParams',
+ },
+ // 示例数据源：https://shs.xxx.com/mock/1458/demo/user
+ {
+ id: 'user',
+ type: 'fetch',
+ options: {
+ method: 'GET',
+ uri: 'https://shs.xxx.com/mock/1458/demo/user',
+ isSync: true,
+ },
+ dataHandler: {
+ type: 'JSFunction',
+ value: 'function (response) {\nif (!response.data.success){\n throw new Error(response.data.message);\n }\n return response.data.data;\n}',
+ },
+ },
+ // 示例数据源：https://shs.xxx.com/mock/1458/demo/orders
+ {
+ id: 'orders',
+ type: 'fetch',
+ options: {
+ method: 'GET',
+ uri: 'https://shs.xxx.com/mock/1458/demo/orders',
+ isSync: true,
+ },
+ dataHandler: {
+ type: 'JSFunction',
+ value: 'function (response) {\nif (!response.data.success){\n throw new Error(response.data.message);\n }\n return response.data.data.result;\n}',
+ },
+ },
+ ],
+ dataHandler: {
+ type: 'JSFunction',
+ value: 'function (dataMap) {\n console.info("All datasources loaded:", dataMap);\n}',
+ },
+ },
+ children: [
+ {
+ componentName: 'Form',
+ id: 'node$2',
+ props: {
+ labelCol: {
+ type: 'JSExpression',
+ value: 'this.state.colNum',
+ },
+ style: {},
+ ref: 'testForm',
+ },
+ children: [
+ {
+ componentName: 'Form.Item',
+ id: 'node$3',
+ props: {
+ label: '姓名：',
+ name: 'name',
+ initValue: '李雷',
+ },
+ children: [
+ {
+ componentName: 'Input',
+ id: 'node$4',
+ props: {
+ placeholder: '请输入',
+ size: 'medium',
+ style: {
+ width: 320,
+ },
+ },
+ },
+ ],
+ },
+ {
+ componentName: 'Form.Item',
+ id: 'node$5',
+ props: {
+ label: '年龄：',
+ name: 'age',
+ initValue: '22',
+ },
+ children: [
+ {
+ componentName: 'NumberPicker',
+ id: 'node$6',
+ props: {
+ size: 'medium',
+ type: 'normal',
+ },
+ },
+ ],
+ },
+ {
+ componentName: 'Form.Item',
+ id: 'node$7',
+ props: {
+ label: '职业：',
+ name: 'profession',
+ },
+ children: [
+ {
+ componentName: 'Select',
+ id: 'node$8',
+ props: {
+ dataSource: [
+ {
+ label: '教师',
+ value: 't',
+ },
+ {
+ label: '医生',
+ value: 'd',
+ },
+ {
+ label: '歌手',
+ value: 's',
+ },
+ ],
+ },
+ },
+ ],
+ },
+ {
+ componentName: 'Div',
+ id: 'node$9',
+ props: {
+ style: {
+ textAlign: 'center',
+ },
+ },
+ children: [
+ {
+ componentName: 'Button.Group',
+ id: 'node$a',
+ props: {},
+ children: [
+ {
+ componentName: 'Button',
+ id: 'node$b',
+ condition: false,
+ loop: ['a', 'b', 'c'],
+ props: {
+ type: 'primary',
+ style: {
+ margin: '0 5px 0 5px',
+ },
+ },
+ children: [
+ {
+ type: 'JSExpression',
+ value: 'this.item',
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ constants: {
+ ENV: 'prod',
+ DOMAIN: 'xxx.xxx.com',
+ },
+ css: 'body {font-size: 12px;} .table { width: 100px;}',
+ config: {
+ sdkVersion: '1.0.3',
+ historyMode: 'hash',
+ targetRootID: 'J_Container',
+ layout: {
+ componentName: 'BasicLayout',
+ props: {
+ logo: '...',
+ name: '测试网站',
+ },
+ },
+ theme: {
+ package: '@alife/theme-fusion',
+ version: '^0.1.0',
+ primary: '#ff9966',
+ },
+ },
+ meta: {
+ name: 'demo应用',
+ git_group: 'appGroup',
+ project_name: 'app_demo',
+ description: '这是一个测试应用',
+ spma: 'spa23d',
+ creator: '月飞',
+ },
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/.browserslistrc b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/.browserslistrc
new file mode 100644
index 0000000000..55a130413d
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/.browserslistrc
@@ -0,0 +1,3 @@
+defaults
+ios_saf 9
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/.gitignore b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/.gitignore
new file mode 100644
index 0000000000..4ec178818e
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/.gitignore
@@ -0,0 +1,25 @@
+
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules/
+
+# production
+build/
+dist/
+tmp/
+lib/
+
+# misc
+.idea/
+.happypack
+.DS_Store
+*.swp
+*.dia~
+.ice
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+index.module.scss.d.ts
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/README.md b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/README.md
new file mode 100644
index 0000000000..6d9dd75215
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/README.md
@@ -0,0 +1 @@
+This project is generated by lowcode-code-generator & lowcode-solution-icejs3.
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/ice.config.mts b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/ice.config.mts
new file mode 100644
index 0000000000..e1d8a28141
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/ice.config.mts
@@ -0,0 +1,90 @@
+import { join } from 'path';
+import { defineConfig } from '@ice/app';
+import _ from 'lodash';
+import fusion from '@ice/plugin-fusion';
+import locales from '@ice/plugin-moment-locales';
+import type { Plugin } from '@ice/app/esm/types';
+
+interface PluginOptions {
+ id: string;
+}
+
+const plugin: Plugin = (options) => ({
+ // name 可选，插件名称
+ name: 'plugin-name',
+ // setup 必选，用于定制工程构建配置
+ setup: ({ onGetConfig, modifyUserConfig }) => {
+ modifyUserConfig('codeSplitting', 'page');
+
+ onGetConfig((config) => {
+ config.entry = {
+ web: join(process.cwd(), '.ice/entry.client.tsx'),
+ };
+
+ config.cssFilename = '[name].css';
+
+ config.configureWebpack = config.configureWebpack || [];
+ config.configureWebpack?.push((webpackConfig) => {
+ if (webpackConfig.output) {
+ webpackConfig.output.filename = '[name].js';
+ webpackConfig.output.chunkFilename = '[name].js';
+ }
+ return webpackConfig;
+ });
+
+ config.swcOptions = _.merge(config.swcOptions, {
+ compilationConfig: {
+ jsc: {
+ transform: {
+ react: {
+ runtime: 'classic',
+ },
+ },
+ },
+ },
+ });
+
+ // 解决 webpack publicPath 问题
+ config.transforms = config.transforms || [];
+ config.transforms.push((source: string, id: string) => {
+ if (id.includes('.ice/entry.client.tsx')) {
+ let code = `
+ if (!__webpack_public_path__?.startsWith('http') && document.currentScript) {
+ // @ts-ignore
+ __webpack_public_path__ = document.currentScript.src.replace(/^(.*\\/)[^/]+$/, '$1');
+ window.__ICE_ASSETS_MANIFEST__ = window.__ICE_ASSETS_MANIFEST__ || {};
+ window.__ICE_ASSETS_MANIFEST__.publicPath = __webpack_public_path__;
+ }
+ `;
+ code += source;
+ return { code };
+ }
+ });
+ });
+ },
+});
+
+// The project config, see https://v3.ice.work/docs/guide/basic/config
+const minify = process.env.NODE_ENV === 'production' ? 'swc' : false;
+export default defineConfig(() => ({
+ ssr: false,
+ ssg: false,
+ minify,
+
+ externals: {
+ react: 'React',
+ 'react-dom': 'ReactDOM',
+ 'react-dom/client': 'ReactDOM',
+ '@alifd/next': 'Next',
+ lodash: 'var window._',
+ '@alilc/lowcode-engine': 'var window.AliLowCodeEngine',
+ },
+ plugins: [
+ fusion({
+ importStyle: 'sass',
+ }),
+ locales(),
+ plugin(),
+ ],
+}));
+
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/package.json b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/package.json
new file mode 100644
index 0000000000..fcdfc7bd4b
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/package.json
@@ -0,0 +1,45 @@
+{
+ "name": "icejs3-demo-app",
+ "version": "0.1.5",
+ "description": "icejs 3 轻量级模板，使用 JavaScript，仅包含基础的 Layout。",
+ "dependencies": {
+ "moment": "^2.24.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-router": "^6.9.0",
+ "react-router-dom": "^6.9.0",
+ "intl-messageformat": "^9.3.6",
+ "@alifd/next": "1.26.15",
+ "@ice/runtime": "~1.1.0",
+ "@alilc/lowcode-datasource-engine": "^1.0.0",
+ "undefined": "*",
+ "@alilc/antd-lowcode": "0.8.0",
+ "@alife/container": "0.3.7"
+ },
+ "devDependencies": {
+ "@ice/app": "~3.1.0",
+ "@types/react": "^18.0.0",
+ "@types/react-dom": "^18.0.0",
+ "@types/node": "^18.11.17",
+ "@ice/plugin-fusion": "^1.0.1",
+ "@ice/plugin-moment-locales": "^1.0.0",
+ "eslint": "^6.0.1",
+ "stylelint": "^13.2.0"
+ },
+ "scripts": {
+ "start": "ice start",
+ "build": "ice build",
+ "lint": "npm run eslint && npm run stylelint",
+ "eslint": "eslint --cache --ext .js,.jsx ./",
+ "stylelint": "stylelint ./**/*.scss"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ },
+ "repository": {
+ "type": "git",
+ "url": "http://gitlab.xxx.com/msd/leak-scan/tree/master"
+ },
+ "private": true,
+ "originTemplate": "@alifd/scaffold-lite-js"
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/app.ts b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/app.ts
new file mode 100644
index 0000000000..6d5856292d
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/app.ts
@@ -0,0 +1,13 @@
+import { defineAppConfig } from 'ice';
+
+// App config, see https://v3.ice.work/docs/guide/basic/app
+export default defineAppConfig(() => ({
+ // Set your configs here.
+ app: {
+ rootId: 'App',
+ },
+ router: {
+ type: 'browser',
+ basename: '/',
+ },
+}));
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/constants.js b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/constants.js
new file mode 100644
index 0000000000..ea766c9da3
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/constants.js
@@ -0,0 +1,3 @@
+const __$$constants = {};
+
+export default __$$constants;
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/document.tsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/document.tsx
new file mode 100644
index 0000000000..aff0231d95
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/document.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Meta, Title, Links, Main, Scripts } from 'ice';
+
+export default function Document() {
+ return (
+
+
+
+
+
+
+
+
+
+ {childrenItems}
+
+ );
+ return subNav;
+ }
+
+ return null;
+ }
+
+ const navItem = (
+
+ {item.name}
+
+ );
+ return navItem;
+}
+
+const Navigation = (props, context) => {
+ const location = useLocation();
+ const { pathname } = location;
+ const { isCollapse } = context;
+ return (
+
+ );
+};
+
+Navigation.contextTypes = {
+ isCollapse: PropTypes.bool,
+};
+export default Navigation;
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/layouts/BasicLayout/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/layouts/BasicLayout/index.jsx
new file mode 100644
index 0000000000..18db44df5e
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/layouts/BasicLayout/index.jsx
@@ -0,0 +1,81 @@
+
+import React, { useState } from 'react';
+import { Shell, ConfigProvider } from '@alifd/next';
+import PageNav from './components/PageNav';
+import Logo from './components/Logo';
+import Footer from './components/Footer';
+
+(function() {
+ const throttle = function(type, name, obj = window) {
+ let running = false;
+
+ const func = () => {
+ if (running) {
+ return;
+ }
+
+ running = true;
+ requestAnimationFrame(() => {
+ obj.dispatchEvent(new CustomEvent(name));
+ running = false;
+ });
+ };
+
+ obj.addEventListener(type, func);
+ };
+
+ throttle('resize', 'optimizedResize');
+})();
+
+export default function BasicLayout({ children }) {
+ const getDevice = width => {
+ const isPhone =
+ typeof navigator !== 'undefined' && navigator && navigator.userAgent.match(/phone/gi);
+
+ if (width < 680 || isPhone) {
+ return 'phone';
+ }
+ if (width < 1280 && width > 680) {
+ return 'tablet';
+ }
+ return 'desktop';
+ };
+
+ const [device, setDevice] = useState(getDevice(NaN));
+ window.addEventListener('optimizedResize', e => {
+ setDevice(getDevice(e && e.target && e.target.innerWidth));
+ });
+ return (
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+
+ );
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/layouts/BasicLayout/menuConfig.js b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/layouts/BasicLayout/menuConfig.js
new file mode 100644
index 0000000000..5332202be4
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/layouts/BasicLayout/menuConfig.js
@@ -0,0 +1,11 @@
+
+const headerMenuConfig = [];
+const asideMenuConfig = [
+ {
+ name: 'Dashboard',
+ path: '/',
+ icon: 'smile',
+ },
+];
+export { headerMenuConfig, asideMenuConfig };
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/pages/Test/index.css b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/pages/Test/index.css
new file mode 100644
index 0000000000..066114aeeb
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/pages/Test/index.css
@@ -0,0 +1,8 @@
+body {
+ font-size: 12px;
+}
+
+.botton {
+ width: 100px;
+ color: #ff00ff;
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/pages/Test/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/pages/Test/index.jsx
new file mode 100644
index 0000000000..9e93a3ff6f
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/pages/Test/index.jsx
@@ -0,0 +1,1076 @@
+// 注意: 出码引擎注入的临时变量默认都以 "__$$" 开头，禁止在搭建的代码中直接访问。
+// 例外：react 框架的导出名和各种组件名除外。
+import React from 'react';
+
+import {
+ Modal,
+ Steps,
+ Form,
+ Input,
+ Checkbox,
+ Select,
+ DatePicker,
+ InputNumber,
+ Button,
+} from '@alilc/antd-lowcode/dist/antd-lowcode.esm.js';
+
+import {
+ Text as NextText,
+ Page as NextPage,
+ Block as NextBlock,
+ P as NextP,
+} from '@alife/container/lib/index.js';
+
+import utils, { RefsManager } from '../../utils';
+
+import * as __$$i18n from '../../i18n';
+
+import __$$constants from '../../constants';
+
+import './index.css';
+
+const NextBlockCell = NextBlock.Cell;
+
+class Test$$Page extends React.Component {
+ _context = this;
+
+ get constants() {
+ return __$$constants || {};
+ }
+
+ constructor(props, context) {
+ super(props);
+
+ this.utils = utils;
+
+ this._refsManager = new RefsManager();
+
+ __$$i18n._inject2(this);
+
+ this.state = {
+ books: [],
+ currentStep: 0,
+ isModifyDialogVisible: false,
+ isModifyStatus: false,
+ secondCommitText: '完成并提交',
+ thirdAuditText: '审核中',
+ thirdButtonText: '修改',
+ customerProjectInfo: {
+ id: null,
+ systemProjectName: null,
+ projectVersionTypeArray: null,
+ projectVersionType: null,
+ versionLine: 2,
+ expectedTime: null,
+ expectedNum: null,
+ projectModal: null,
+ displayWidth: null,
+ displayHeight: null,
+ displayInch: null,
+ displayDpi: null,
+ mainSoc: null,
+ cpuCoreNum: null,
+ instructions: null,
+ osVersion: null,
+ status: null,
+ },
+ versionLinesArray: [
+ { label: 'AmapAuto 485', value: 1 },
+ { label: 'AmapAuto 505', value: 2 },
+ ],
+ projectModalsArray: [
+ { label: '车机', value: 1 },
+ { label: '车镜', value: 2 },
+ { label: '记录仪', value: 3 },
+ { label: '其他', value: 4 },
+ ],
+ osVersionsArray: [
+ { label: '安卓5', value: 1 },
+ { label: '安卓6', value: 2 },
+ { label: '安卓7', value: 3 },
+ { label: '安卓8', value: 4 },
+ { label: '安卓9', value: 5 },
+ { label: '安卓10', value: 6 },
+ ],
+ instructionsArray: [
+ { label: 'ARM64-V8', value: 'ARM64-V8' },
+ { label: 'ARM32-V7', value: 'ARM32-V7' },
+ { label: 'X86', value: 'X86' },
+ { label: 'X64', value: 'X64' },
+ ],
+ };
+ }
+
+ $ = (refName) => {
+ return this._refsManager.get(refName);
+ };
+
+ $$ = (refName) => {
+ return this._refsManager.getAll(refName);
+ };
+
+ componentDidUpdate(prevProps, prevState, snapshot) {}
+
+ componentWillUnmount() {}
+
+ __jp__init() {
+ /*...*/
+ }
+
+ __jp__initRouter() {
+ /*...*/
+ }
+
+ __jp__initDataSource() {
+ /*...*/
+ }
+
+ __jp__initEnv() {
+ /*...*/
+ }
+
+ __jp__initUtils() {
+ /*...*/
+ }
+
+ onFinishFirst() {
+ /*...*/
+ }
+
+ onClickPreSecond() {
+ /*...*/
+ }
+
+ onFinishSecond() {
+ /*...*/
+ }
+
+ onClickModifyThird() {
+ /*...*/
+ }
+
+ onOkModifyDialogThird() {
+ //第三步 修改 对话框 确定
+
+ this.setState({
+ currentStep: 0,
+ isModifyDialogVisible: false,
+ });
+ }
+
+ onCancelModifyDialogThird() {
+ //第三步 修改 对话框 取消
+
+ this.setState({
+ isModifyDialogVisible: false,
+ });
+ }
+
+ onFinishFailed() {}
+
+ onClickPreThird() {
+ // 第三步 上一步
+ this.setState({
+ currentStep: 1,
+ });
+ }
+
+ onClickFirstBack() {
+ // 第一步 返回按钮
+ this.$router.push('/myProjectList');
+ }
+
+ onClickSecondBack() {
+ // 第二步 返回按钮
+ this.$router.push('/myProjectList');
+ }
+
+ onClickThirdBack() {
+ // 第三步 返回按钮
+ this.$router.push('/myProjectList');
+ }
+
+ onValuesChange(_, values) {
+ this.setState({
+ customerProjectInfo: {
+ ...this.state.customerProjectInfo,
+ ...values,
+ },
+ });
+ }
+
+ componentDidMount() {}
+
+ render() {
+ const __$$context = this._context || this;
+ const { state } = __$$context;
+ return (
+
+
+ );
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/typings.d.ts b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/typings.d.ts
new file mode 100644
index 0000000000..a9f8de7ceb
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/typings.d.ts
@@ -0,0 +1,9 @@
+/// ;
+ }
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/utils.js b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/utils.js
new file mode 100644
index 0000000000..1190717924
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/utils.js
@@ -0,0 +1,47 @@
+import { createRef } from 'react';
+
+export class RefsManager {
+ constructor() {
+ this.refInsStore = {};
+ }
+
+ clearNullRefs() {
+ Object.keys(this.refInsStore).forEach((refName) => {
+ const filteredInsList = this.refInsStore[refName].filter(
+ (insRef) => !!insRef.current
+ );
+ if (filteredInsList.length > 0) {
+ this.refInsStore[refName] = filteredInsList;
+ } else {
+ delete this.refInsStore[refName];
+ }
+ });
+ }
+
+ get(refName) {
+ this.clearNullRefs();
+ if (this.refInsStore[refName] && this.refInsStore[refName].length > 0) {
+ return this.refInsStore[refName][0].current;
+ }
+
+ return null;
+ }
+
+ getAll(refName) {
+ this.clearNullRefs();
+ if (this.refInsStore[refName] && this.refInsStore[refName].length > 0) {
+ return this.refInsStore[refName].map((i) => i.current);
+ }
+
+ return [];
+ }
+
+ linkRef(refName) {
+ const refIns = createRef();
+ this.refInsStore[refName] = this.refInsStore[refName] || [];
+ this.refInsStore[refName].push(refIns);
+ return refIns;
+ }
+}
+
+export default {};
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/schema.json5 b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/schema.json5
new file mode 100644
index 0000000000..4c829cfab1
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/schema.json5
@@ -0,0 +1,1703 @@
+{
+ version: '1.0.0',
+ componentsMap: [
+ {
+ package: '@alife/container',
+ version: '0.3.7',
+ exportName: 'Text',
+ main: 'lib/index.js',
+ destructuring: true,
+ subName: '',
+ componentName: 'NextText',
+ },
+ {
+ package: '@alilc/antd-lowcode',
+ version: '0.8.0',
+ exportName: 'Modal',
+ main: 'dist/antd-lowcode.esm.js',
+ destructuring: true,
+ componentName: 'Modal',
+ },
+ {
+ package: '@alilc/antd-lowcode',
+ version: '0.8.0',
+ exportName: 'Steps',
+ main: 'dist/antd-lowcode.esm.js',
+ destructuring: true,
+ subName: 'Step',
+ componentName: 'Steps.Step',
+ },
+ {
+ package: '@alilc/antd-lowcode',
+ version: '0.8.0',
+ exportName: 'Steps',
+ main: 'dist/antd-lowcode.esm.js',
+ destructuring: true,
+ componentName: 'Steps',
+ },
+ {
+ package: '@alife/container',
+ version: '0.3.7',
+ exportName: 'P',
+ main: 'lib/index.js',
+ destructuring: true,
+ subName: '',
+ componentName: 'NextP',
+ },
+ {
+ package: '@alilc/antd-lowcode',
+ version: '0.8.0',
+ exportName: 'Input',
+ main: 'dist/antd-lowcode.esm.js',
+ destructuring: true,
+ componentName: 'Input',
+ },
+ {
+ package: '@alilc/antd-lowcode',
+ version: '0.8.0',
+ exportName: 'Form',
+ main: 'dist/antd-lowcode.esm.js',
+ destructuring: true,
+ subName: 'Item',
+ componentName: 'Form.Item',
+ },
+ {
+ package: '@alilc/antd-lowcode',
+ version: '0.8.0',
+ exportName: 'Checkbox',
+ main: 'dist/antd-lowcode.esm.js',
+ destructuring: true,
+ subName: 'Group',
+ componentName: 'Checkbox.Group',
+ },
+ {
+ package: '@alilc/antd-lowcode',
+ version: '0.8.0',
+ exportName: 'Select',
+ main: 'dist/antd-lowcode.esm.js',
+ destructuring: true,
+ componentName: 'Select',
+ },
+ {
+ package: '@alilc/antd-lowcode',
+ version: '0.8.0',
+ exportName: 'DatePicker',
+ main: 'dist/antd-lowcode.esm.js',
+ destructuring: true,
+ componentName: 'DatePicker',
+ },
+ {
+ package: '@alilc/antd-lowcode',
+ version: '0.8.0',
+ exportName: 'InputNumber',
+ main: 'dist/antd-lowcode.esm.js',
+ destructuring: true,
+ componentName: 'InputNumber',
+ },
+ {
+ package: '@alilc/antd-lowcode',
+ version: '0.8.0',
+ exportName: 'Button',
+ main: 'dist/antd-lowcode.esm.js',
+ destructuring: true,
+ componentName: 'Button',
+ },
+ {
+ package: '@alilc/antd-lowcode',
+ version: '0.8.0',
+ exportName: 'Form',
+ main: 'dist/antd-lowcode.esm.js',
+ destructuring: true,
+ componentName: 'Form',
+ },
+ {
+ package: '@alife/container',
+ version: '0.3.7',
+ exportName: 'Block',
+ main: 'lib/index.js',
+ destructuring: true,
+ subName: 'Cell',
+ componentName: 'NextBlockCell',
+ },
+ {
+ package: '@alife/container',
+ version: '0.3.7',
+ exportName: 'Block',
+ main: 'lib/index.js',
+ destructuring: true,
+ subName: '',
+ componentName: 'NextBlock',
+ },
+ {
+ devMode: 'lowcode',
+ componentName: 'Slot',
+ },
+ {
+ package: '@alife/container',
+ version: '0.3.7',
+ exportName: 'Page',
+ main: 'lib/index.js',
+ destructuring: true,
+ subName: '',
+ componentName: 'NextPage',
+ },
+ {
+ devMode: 'lowcode',
+ componentName: 'Page',
+ },
+ ],
+ componentsTree: [
+ {
+ componentName: 'Page',
+ id: 'node_dockcviv8fo1',
+ props: {
+ ref: 'outterView',
+ style: {
+ height: '100%',
+ },
+ },
+ fileName: 'test',
+ dataSource: {
+ list: [],
+ },
+ css: 'body {\n font-size: 12px;\n}\n\n.botton {\n width: 100px;\n color: #ff00ff\n}',
+ lifeCycles: {
+ constructor: {
+ type: 'JSFunction',
+ value: "function() { /*...*/ }",
+ },
+ componentDidMount: {
+ type: 'JSFunction',
+ value: 'function() {}',
+ },
+ componentDidUpdate: {
+ type: 'JSFunction',
+ value: 'function(prevProps, prevState, snapshot) {}',
+ },
+ componentWillUnmount: {
+ type: 'JSFunction',
+ value: 'function() {}',
+ },
+ },
+ methods: {
+ __jp__init: {
+ type: 'JSFunction',
+ value: "function() { /*...*/ }",
+ },
+ __jp__initRouter: {
+ type: 'JSFunction',
+ value: "function() { /*...*/ }",
+ },
+ __jp__initDataSource: {
+ type: 'JSFunction',
+ value: "function() { /*...*/ }",
+ },
+ __jp__initEnv: {
+ type: 'JSFunction',
+ value: "function() { /*...*/ }",
+ },
+ __jp__initUtils: {
+ type: 'JSFunction',
+ value: "function() { /*...*/ }",
+ },
+ onFinishFirst: {
+ type: 'JSFunction',
+ value: "function() { /*...*/ }",
+ },
+ onClickPreSecond: {
+ type: 'JSFunction',
+ value: "function() { /*...*/ }",
+ },
+ onFinishSecond: {
+ type: 'JSFunction',
+ value: "function() { /*...*/ }",
+ },
+ onClickModifyThird: {
+ type: 'JSFunction',
+ value: "function() { /*...*/ }",
+ },
+ onOkModifyDialogThird: {
+ type: 'JSFunction',
+ value: 'function() {\n //第三步 修改 对话框 确定\n\n this.setState({\n currentStep: 0,\n isModifyDialogVisible: false,\n });\n }',
+ },
+ onCancelModifyDialogThird: {
+ type: 'JSFunction',
+ value: 'function() {\n //第三步 修改 对话框 取消\n\n this.setState({\n isModifyDialogVisible: false,\n });\n }',
+ },
+ onFinishFailed: {
+ type: 'JSFunction',
+ value: 'function() {}',
+ },
+ onClickPreThird: {
+ type: 'JSFunction',
+ value: 'function() {\n // 第三步 上一步\n this.setState({\n currentStep: 1,\n });\n }',
+ },
+ onClickFirstBack: {
+ type: 'JSFunction',
+ value: "function() {\n // 第一步 返回按钮\n this.$router.push('/myProjectList');\n }",
+ },
+ onClickSecondBack: {
+ type: 'JSFunction',
+ value: "function() {\n // 第二步 返回按钮\n this.$router.push('/myProjectList');\n }",
+ },
+ onClickThirdBack: {
+ type: 'JSFunction',
+ value: "function() {\n // 第三步 返回按钮\n this.$router.push('/myProjectList');\n }",
+ },
+ onValuesChange: {
+ type: 'JSFunction',
+ value: 'function(_, values) {\n this.setState({\n customerProjectInfo: {\n ...this.state.customerProjectInfo,\n ...values,\n },\n });\n }',
+ },
+ },
+ state: {
+ books: [],
+ currentStep: 0,
+ isModifyDialogVisible: false,
+ isModifyStatus: false,
+ secondCommitText: '完成并提交',
+ thirdAuditText: '审核中',
+ thirdButtonText: '修改',
+ customerProjectInfo: {
+ id: null,
+ systemProjectName: null,
+ projectVersionTypeArray: null,
+ projectVersionType: null,
+ versionLine: 2,
+ expectedTime: null,
+ expectedNum: null,
+ projectModal: null,
+ displayWidth: null,
+ displayHeight: null,
+ displayInch: null,
+ displayDpi: null,
+ mainSoc: null,
+ cpuCoreNum: null,
+ instructions: null,
+ osVersion: null,
+ status: null,
+ },
+ versionLinesArray: [
+ {
+ label: 'AmapAuto 485',
+ value: 1,
+ },
+ {
+ label: 'AmapAuto 505',
+ value: 2,
+ },
+ ],
+ projectModalsArray: [
+ {
+ label: '车机',
+ value: 1,
+ },
+ {
+ label: '车镜',
+ value: 2,
+ },
+ {
+ label: '记录仪',
+ value: 3,
+ },
+ {
+ label: '其他',
+ value: 4,
+ },
+ ],
+ osVersionsArray: [
+ {
+ label: '安卓5',
+ value: 1,
+ },
+ {
+ label: '安卓6',
+ value: 2,
+ },
+ {
+ label: '安卓7',
+ value: 3,
+ },
+ {
+ label: '安卓8',
+ value: 4,
+ },
+ {
+ label: '安卓9',
+ value: 5,
+ },
+ {
+ label: '安卓10',
+ value: 6,
+ },
+ ],
+ instructionsArray: [
+ {
+ label: 'ARM64-V8',
+ value: 'ARM64-V8',
+ },
+ {
+ label: 'ARM32-V7',
+ value: 'ARM32-V7',
+ },
+ {
+ label: 'X86',
+ value: 'X86',
+ },
+ {
+ label: 'X64',
+ value: 'X64',
+ },
+ ],
+ },
+ children: [
+ {
+ componentName: 'Modal',
+ id: 'node_ockodngwu940',
+ props: {
+ title: '是否修改',
+ visible: {
+ type: 'JSExpression',
+ value: 'this.state.isModifyDialogVisible',
+ },
+ okText: '确认',
+ okType: '',
+ forceRender: false,
+ cancelText: '取消',
+ zIndex: 2000,
+ destroyOnClose: false,
+ confirmLoading: false,
+ __events: {
+ eventDataList: [
+ {
+ type: 'componentEvent',
+ name: 'onOk',
+ relatedEventName: 'onOkModifyDialogThird',
+ },
+ {
+ type: 'componentEvent',
+ name: 'onCancel',
+ relatedEventName: 'onCancelModifyDialogThird',
+ },
+ ],
+ eventList: [
+ {
+ name: 'onCancel',
+ disabled: true,
+ },
+ {
+ name: 'onOk',
+ disabled: true,
+ },
+ ],
+ },
+ onOk: {
+ type: 'JSFunction',
+ value: 'function(){this.onOkModifyDialogThird.apply(this,Array.prototype.slice.call(arguments).concat([])) }',
+ },
+ onCancel: {
+ type: 'JSFunction',
+ value: 'function(){this.onCancelModifyDialogThird.apply(this,Array.prototype.slice.call(arguments).concat([])) }',
+ },
+ },
+ hidden: true,
+ children: [
+ {
+ componentName: 'NextText',
+ id: 'node_ockodngwu946',
+ props: {
+ type: 'inherit',
+ children: '修改将撤回此前填写的信息',
+ style: {
+ fontStyle: 'normal',
+ textAlign: 'left',
+ display: 'block',
+ fontFamily: 'arial, helvetica, microsoft yahei',
+ fontWeight: 'normal',
+ },
+ },
+ },
+ ],
+ },
+ {
+ componentName: 'NextPage',
+ id: 'node_ocko19zplh1',
+ props: {
+ columns: 12,
+ headerDivider: true,
+ placeholderStyle: {
+ gridRowEnd: 'span 1',
+ gridColumnEnd: 'span 12',
+ },
+ placeholder: '页面主体内容：拖拽Block布局组件到这里',
+ header: {
+ type: 'JSSlot',
+ title: 'header',
+ },
+ headerProps: {
+ background: 'surface',
+ },
+ footer: {
+ type: 'JSSlot',
+ title: 'footer',
+ },
+ minHeight: '100vh',
+ style: {},
+ },
+ title: '页面',
+ children: [
+ {
+ componentName: 'NextBlock',
+ id: 'node_ocko19zplh2',
+ props: {
+ prefix: 'next-',
+ placeholderStyle: {
+ height: '100%',
+ },
+ noPadding: false,
+ noBorder: false,
+ background: 'surface',
+ layoutmode: 'O',
+ colSpan: 12,
+ rowSpan: 1,
+ childTotalColumns: 12,
+ },
+ title: '区块',
+ children: [
+ {
+ componentName: 'NextBlockCell',
+ id: 'node_ocko19zplh3',
+ props: {
+ title: '',
+ prefix: 'next-',
+ placeholderStyle: {
+ height: '100%',
+ },
+ layoutmode: 'O',
+ childTotalColumns: 12,
+ isAutoContainer: true,
+ colSpan: 12,
+ rowSpan: 1,
+ },
+ children: [
+ {
+ componentName: 'NextP',
+ id: 'node_ockoco6icv1w',
+ props: {
+ wrap: false,
+ type: 'body2',
+ verAlign: 'middle',
+ textSpacing: true,
+ align: 'left',
+ flex: true,
+ style: {
+ marginBottom: '24px',
+ },
+ },
+ title: '段落',
+ children: [
+ {
+ componentName: 'Steps',
+ id: 'node_ockoco6icv1x',
+ props: {
+ current: {
+ type: 'JSExpression',
+ value: 'this.state.currentStep',
+ },
+ },
+ children: [
+ {
+ componentName: 'Steps.Step',
+ id: 'node_ockoco6icv1y',
+ props: {
+ title: '版本申请',
+ description: '',
+ },
+ },
+ {
+ componentName: 'Steps.Step',
+ id: 'node_ockoco6icv1z',
+ props: {
+ title: '机器配置',
+ subTitle: '',
+ description: '',
+ },
+ },
+ {
+ componentName: 'Steps.Step',
+ id: 'node_ockoco6icv20',
+ props: {
+ title: '项目审批',
+ description: '',
+ },
+ },
+ ],
+ },
+ ],
+ },
+ {
+ componentName: 'NextP',
+ id: 'node_ockoco6icv12w',
+ props: {
+ wrap: false,
+ type: 'body2',
+ verAlign: 'middle',
+ textSpacing: true,
+ align: 'left',
+ full: true,
+ flex: true,
+ style: {
+ display: 'flex',
+ justifyContent: 'center',
+ },
+ },
+ title: '段落',
+ condition: {
+ type: 'JSExpression',
+ value: 'this.state.currentStep === 0',
+ },
+ children: [
+ {
+ componentName: 'Form',
+ id: 'node_ockoco6icv12x',
+ props: {
+ labelCol: {
+ span: 10,
+ },
+ wrapperCol: {
+ span: 10,
+ },
+ onFinish: {
+ type: 'JSFunction',
+ value: 'function(){this.onFinishFirst.apply(this,Array.prototype.slice.call(arguments).concat([])) }',
+ },
+ name: 'basic',
+ style: {
+ display: 'flex',
+ flexDirection: 'column',
+ width: '600px',
+ justifyContent: 'center',
+ },
+ layout: 'vertical',
+ __events: {
+ eventDataList: [
+ {
+ type: 'componentEvent',
+ name: 'onFinish',
+ relatedEventName: 'onFinishFirst',
+ },
+ {
+ type: 'componentEvent',
+ name: 'onValuesChange',
+ relatedEventName: 'onValuesChange',
+ },
+ ],
+ eventList: [
+ {
+ name: 'onFinish',
+ disabled: true,
+ },
+ {
+ name: 'onFinishFailed',
+ disabled: false,
+ },
+ {
+ name: 'onFieldsChange',
+ disabled: false,
+ },
+ {
+ name: 'onValuesChange',
+ disabled: true,
+ },
+ ],
+ },
+ initialValues: {
+ type: 'JSExpression',
+ value: 'this.state.customerProjectInfo',
+ },
+ onValuesChange: {
+ type: 'JSFunction',
+ value: 'function(){this.onValuesChange.apply(this,Array.prototype.slice.call(arguments).concat([])) }',
+ },
+ },
+ children: [
+ {
+ componentName: 'Form.Item',
+ id: 'node_ockojhvrkn2u',
+ props: {
+ label: '',
+ style: {
+ width: '600px',
+ },
+ colon: false,
+ name: 'id',
+ },
+ condition: false,
+ children: [
+ {
+ componentName: 'Input',
+ id: 'node_ockojhvrkn2v',
+ props: {
+ placeholder: '',
+ style: {
+ width: '600px',
+ },
+ bordered: false,
+ disabled: true,
+ },
+ },
+ ],
+ },
+ {
+ componentName: 'Form.Item',
+ id: 'node_ockoco6icv12y',
+ props: {
+ label: '版本类型选择',
+ name: 'projectVersionTypeArray',
+ initialValue: '',
+ labelAlign: 'left',
+ colon: false,
+ required: true,
+ style: {
+ flexDirection: 'column',
+ width: '600px',
+ },
+ requiredobj: {
+ required: true,
+ message: '请选择版本类型',
+ },
+ },
+ children: [
+ {
+ componentName: 'Checkbox.Group',
+ id: 'node_ockoco6icv12z',
+ props: {
+ options: [
+ {
+ label: '基础版本',
+ value: '3',
+ },
+ {
+ label: 'AR导航',
+ value: '1',
+ },
+ {
+ label: '货车导航',
+ value: '2',
+ },
+ {
+ label: 'UI定制',
+ value: '4',
+ disabled: false,
+ },
+ ],
+ style: {
+ width: '600px',
+ },
+ disabled: {
+ type: 'JSExpression',
+ value: 'this.state.customerProjectInfo.id > 0 && ! this.state.isModifyStatus',
+ },
+ },
+ },
+ ],
+ },
+ {
+ componentName: 'Form.Item',
+ id: 'node_ockoco6icv13a',
+ props: {
+ label: '版本线选择',
+ labelAlign: 'left',
+ colon: false,
+ required: true,
+ style: {
+ width: '600px',
+ },
+ name: 'versionLine',
+ requiredobj: {
+ required: true,
+ message: '请选择版本线',
+ },
+ extra: '',
+ },
+ children: [
+ {
+ componentName: 'Select',
+ id: 'node_ockoco6icv13b',
+ props: {
+ style: {
+ width: '600px',
+ },
+ options: {
+ type: 'JSExpression',
+ value: 'this.state.versionLinesArray',
+ },
+ disabled: {
+ type: 'JSExpression',
+ value: 'this.state.customerProjectInfo.id > 0 && ! this.state.isModifyStatus',
+ },
+ placeholder: '请选择版本线',
+ },
+ },
+ ],
+ },
+ {
+ componentName: 'Form.Item',
+ id: 'node_ockoco6icv13o',
+ props: {
+ label: '项目名称',
+ colon: false,
+ required: true,
+ style: {
+ display: 'flex',
+ },
+ labelAlign: 'left',
+ extra: '',
+ name: 'systemProjectName',
+ requiredobj: {
+ required: true,
+ message: '请按格式填写项目名称',
+ },
+ typeobj: {
+ type: 'string',
+ message: '请输入项目名称，格式：公司简称-产品名称-版本类型',
+ },
+ lenobj: {
+ max: 100,
+ message: '项目名称不能超过100个字符',
+ },
+ },
+ children: [
+ {
+ componentName: 'Input',
+ id: 'node_ockoco6icv13p',
+ props: {
+ placeholder: '公司简称-产品名称-版本类型',
+ style: {
+ width: '600px',
+ },
+ disabled: {
+ type: 'JSExpression',
+ value: 'this.state.customerProjectInfo.id > 0 && ! this.state.isModifyStatus',
+ },
+ },
+ },
+ ],
+ },
+ {
+ componentName: 'Form.Item',
+ id: 'node_ockoco6icv13v',
+ props: {
+ label: '预期交付时间',
+ style: {
+ width: '600px',
+ },
+ colon: false,
+ required: true,
+ name: 'expectedTime',
+ labelAlign: 'left',
+ requiredobj: {
+ required: true,
+ message: '请填写预期交付时间',
+ },
+ },
+ children: [
+ {
+ componentName: 'DatePicker',
+ id: 'node_ockoco6icv13w',
+ props: {
+ style: {
+ width: '600px',
+ },
+ disabled: {
+ type: 'JSExpression',
+ value: 'this.state.customerProjectInfo.id > 0 && ! this.state.isModifyStatus',
+ },
+ },
+ },
+ ],
+ },
+ {
+ componentName: 'Form.Item',
+ id: 'node_ockpmbs0bv8',
+ props: {
+ label: '预期出货量',
+ style: {
+ width: '600px',
+ },
+ required: true,
+ requiredobj: {
+ required: true,
+ message: '请填写预期出货量',
+ },
+ name: 'expectedNum',
+ labelAlign: 'left',
+ colon: false,
+ },
+ children: [
+ {
+ componentName: 'InputNumber',
+ id: 'node_ockpmbs0bv9',
+ props: {
+ value: 3,
+ style: {
+ width: '600px',
+ },
+ placeholder: '单位（台）使用该版本的机器数量+预计出货量，请如实填写',
+ disabled: {
+ type: 'JSExpression',
+ value: 'this.state.customerProjectInfo.id > 0 && ! this.state.isModifyStatus',
+ },
+ min: 0,
+ size: 'middle',
+ },
+ },
+ ],
+ },
+ {
+ componentName: 'Form.Item',
+ id: 'node_ockoco6icv130',
+ props: {
+ wrapperCol: {
+ offset: '',
+ },
+ style: {
+ flexDirection: 'row',
+ alignItems: 'baseline',
+ justifyContent: 'space-between',
+ width: '600px',
+ display: 'block',
+ },
+ labelAlign: 'left',
+ colon: false,
+ },
+ children: [
+ {
+ componentName: 'Button',
+ id: 'node_ockoco6icv132',
+ props: {
+ style: {
+ margin: '0px',
+ },
+ children: '返回',
+ __events: {
+ eventDataList: [
+ {
+ type: 'componentEvent',
+ name: 'onClick',
+ relatedEventName: 'onClickFirstBack',
+ },
+ ],
+ eventList: [
+ {
+ name: 'onClick',
+ disabled: true,
+ },
+ ],
+ },
+ onClick: {
+ type: 'JSFunction',
+ value: 'function(){this.onClickFirstBack.apply(this,Array.prototype.slice.call(arguments).concat([])) }',
+ },
+ },
+ },
+ {
+ componentName: 'Button',
+ id: 'node_ockoco6icv131',
+ props: {
+ type: 'primary',
+ children: '下一步',
+ htmlType: 'submit',
+ style: {
+ boxShadow: 'rgba(31, 56, 88, 0.2) 0px 0px 0px 0px',
+ float: 'right',
+ },
+ __events: {
+ eventDataList: [],
+ eventList: [
+ {
+ name: 'onClick',
+ disabled: false,
+ },
+ ],
+ },
+ },
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ {
+ componentName: 'NextP',
+ id: 'node_ockoco6icv1ue',
+ props: {
+ wrap: false,
+ type: 'body2',
+ verAlign: 'middle',
+ textSpacing: true,
+ align: 'left',
+ full: true,
+ flex: true,
+ style: {
+ display: 'flex',
+ justifyContent: 'center',
+ },
+ },
+ title: '段落',
+ condition: {
+ type: 'JSExpression',
+ value: 'this.state.currentStep === 1',
+ },
+ children: [
+ {
+ componentName: 'Form',
+ id: 'node_ockoco6icv1uf',
+ props: {
+ labelCol: {
+ span: 10,
+ },
+ wrapperCol: {
+ span: 10,
+ },
+ onFinish: {
+ type: 'JSFunction',
+ value: 'function(){this.onFinishSecond.apply(this,Array.prototype.slice.call(arguments).concat([])) }',
+ },
+ name: 'basic',
+ style: {
+ display: 'flex',
+ flexDirection: 'column',
+ width: '600px',
+ justifyContent: 'center',
+ height: '800px',
+ },
+ layout: 'vertical',
+ __events: {
+ eventDataList: [
+ {
+ type: 'componentEvent',
+ name: 'onFinish',
+ relatedEventName: 'onFinishSecond',
+ },
+ {
+ type: 'componentEvent',
+ name: 'onValuesChange',
+ relatedEventName: 'onValuesChange',
+ },
+ ],
+ eventList: [
+ {
+ name: 'onFinish',
+ disabled: true,
+ },
+ {
+ name: 'onFinishFailed',
+ disabled: false,
+ },
+ {
+ name: 'onFieldsChange',
+ disabled: false,
+ },
+ {
+ name: 'onValuesChange',
+ disabled: true,
+ },
+ ],
+ },
+ initialValues: {
+ type: 'JSExpression',
+ value: 'this.state.customerProjectInfo',
+ },
+ onValuesChange: {
+ type: 'JSFunction',
+ value: 'function(){this.onValuesChange.apply(this,Array.prototype.slice.call(arguments).concat([])) }',
+ },
+ },
+ children: [
+ {
+ componentName: 'Form.Item',
+ id: 'node_ockoco6icv1ui',
+ props: {
+ label: '设备类型选择',
+ labelAlign: 'left',
+ colon: false,
+ required: true,
+ style: {
+ width: '600px',
+ },
+ name: 'projectModal',
+ requiredobj: {
+ required: true,
+ message: '请选择设备类型',
+ },
+ },
+ children: [
+ {
+ componentName: 'Select',
+ id: 'node_ockoco6icv1uj',
+ props: {
+ style: {
+ width: '600px',
+ },
+ options: {
+ type: 'JSExpression',
+ value: 'this.state.projectModalsArray',
+ },
+ disabled: {
+ type: 'JSExpression',
+ value: 'this.state.customerProjectInfo.id > 0 && ! this.state.isModifyStatus',
+ },
+ placeholder: '请选择设备类型',
+ },
+ },
+ ],
+ },
+ {
+ componentName: 'Form.Item',
+ id: 'node_ockpmbs0bv17',
+ props: {
+ label: '屏幕分辨率宽',
+ style: {
+ width: '600px',
+ },
+ name: 'displayWidth',
+ colon: false,
+ required: true,
+ requiredobj: {
+ required: true,
+ message: '请输入屏幕分辨率宽',
+ },
+ labelAlign: 'left',
+ },
+ children: [
+ {
+ componentName: 'InputNumber',
+ id: 'node_ockpmbs0bv18',
+ props: {
+ value: 3,
+ style: {
+ width: '600px',
+ },
+ placeholder: '例如1280',
+ disabled: {
+ type: 'JSExpression',
+ value: 'this.state.customerProjectInfo.id > 0 && ! this.state.isModifyStatus',
+ },
+ min: 0,
+ },
+ },
+ ],
+ },
+ {
+ componentName: 'Form.Item',
+ id: 'node_ockpmbs0bv10',
+ props: {
+ label: '屏幕分辨率高',
+ style: {
+ width: '600px',
+ },
+ labelAlign: 'left',
+ colon: false,
+ name: 'displayHeight',
+ required: true,
+ requiredobj: {
+ required: true,
+ message: '请输入屏幕分辨率高',
+ },
+ },
+ children: [
+ {
+ componentName: 'InputNumber',
+ id: 'node_ockpmbs0bv11',
+ props: {
+ value: 3,
+ style: {
+ width: '600px',
+ },
+ placeholder: '例如720',
+ disabled: {
+ type: 'JSExpression',
+ value: 'this.state.customerProjectInfo.id > 0 && ! this.state.isModifyStatus',
+ },
+ min: 0,
+ },
+ },
+ ],
+ },
+ {
+ componentName: 'Form.Item',
+ id: 'node_ockpmbs0bvt',
+ props: {
+ label: '屏幕尺寸（inch）',
+ style: {
+ width: '600px',
+ },
+ name: 'displayInch',
+ labelAlign: 'left',
+ required: true,
+ colon: false,
+ requiredobj: {
+ required: true,
+ message: '请输入屏幕尺寸',
+ },
+ },
+ children: [
+ {
+ componentName: 'InputNumber',
+ id: 'node_ockpmbs0bvu',
+ props: {
+ value: 3,
+ style: {
+ width: '600px',
+ },
+ placeholder: '请输入尺寸',
+ disabled: {
+ type: 'JSExpression',
+ value: 'this.state.customerProjectInfo.id > 0 && ! this.state.isModifyStatus',
+ },
+ min: 0,
+ },
+ },
+ ],
+ },
+ {
+ componentName: 'Form.Item',
+ id: 'node_ockpmbs0bvm',
+ props: {
+ label: '屏幕DPI',
+ style: {
+ width: '600px',
+ },
+ labelAlign: 'left',
+ colon: false,
+ required: false,
+ name: 'displayDpi',
+ },
+ children: [
+ {
+ componentName: 'InputNumber',
+ id: 'node_ockpmbs0bvn',
+ props: {
+ value: 3,
+ style: {
+ width: '600px',
+ },
+ placeholder: 'UI定制项目必填',
+ disabled: {
+ type: 'JSExpression',
+ value: 'this.state.customerProjectInfo.id > 0 && ! this.state.isModifyStatus',
+ },
+ min: 0,
+ },
+ },
+ ],
+ },
+ {
+ componentName: 'Form.Item',
+ id: 'node_ockoco6icv1v3',
+ props: {
+ label: '芯片名称',
+ colon: false,
+ required: true,
+ style: {
+ display: 'flex',
+ },
+ labelAlign: 'left',
+ extra: '',
+ name: 'mainSoc',
+ requiredobj: {
+ required: true,
+ message: '请输入芯片名称',
+ },
+ lenobj: {
+ max: 50,
+ message: '芯片名称不能超过50个字符',
+ },
+ },
+ children: [
+ {
+ componentName: 'Input',
+ id: 'node_ockoco6icv1v4',
+ props: {
+ placeholder: '请输入芯片名称',
+ style: {
+ width: '600px',
+ },
+ disabled: {
+ type: 'JSExpression',
+ value: 'this.state.customerProjectInfo.id > 0 && ! this.state.isModifyStatus',
+ },
+ },
+ },
+ ],
+ },
+ {
+ componentName: 'Form.Item',
+ id: 'node_ockpmbs0bvf',
+ props: {
+ label: '芯片核数',
+ style: {
+ width: '600px',
+ },
+ required: true,
+ requiredobj: {
+ required: true,
+ message: '请输入芯片核数',
+ },
+ name: 'cpuCoreNum',
+ labelAlign: 'left',
+ colon: false,
+ },
+ children: [
+ {
+ componentName: 'InputNumber',
+ id: 'node_ockpmbs0bvg',
+ props: {
+ value: 3,
+ style: {
+ width: '600px',
+ },
+ placeholder: '请输入芯片核数',
+ disabled: {
+ type: 'JSExpression',
+ value: 'this.state.customerProjectInfo.id > 0 && ! this.state.isModifyStatus',
+ },
+ defaultValue: '',
+ min: 0,
+ },
+ },
+ ],
+ },
+ {
+ componentName: 'Form.Item',
+ id: 'node_ockpxba11aa',
+ props: {
+ label: '指令集',
+ style: {
+ width: '600px',
+ },
+ required: true,
+ requiredobj: {
+ required: true,
+ message: '请选择指令集',
+ },
+ name: 'instructions',
+ colon: false,
+ },
+ children: [
+ {
+ componentName: 'Select',
+ id: 'node_ockpxba11ab',
+ props: {
+ style: {
+ width: '600px',
+ },
+ options: {
+ type: 'JSExpression',
+ value: 'this.state.instructionsArray',
+ },
+ disabled: {
+ type: 'JSExpression',
+ value: 'this.state.customerProjectInfo.id > 0 && ! this.state.isModifyStatus',
+ },
+ },
+ },
+ ],
+ },
+ {
+ componentName: 'Form.Item',
+ id: 'node_ockodz1kiqh',
+ props: {
+ label: '系统版本',
+ labelAlign: 'left',
+ colon: false,
+ required: true,
+ style: {
+ width: '600px',
+ },
+ name: 'osVersion',
+ requiredobj: {
+ required: true,
+ message: '请选择系统版本',
+ },
+ },
+ children: [
+ {
+ componentName: 'Select',
+ id: 'node_ockodz1kiqi',
+ props: {
+ style: {
+ width: '600px',
+ },
+ options: {
+ type: 'JSExpression',
+ value: 'this.state.osVersionsArray',
+ },
+ disabled: {
+ type: 'JSExpression',
+ value: 'this.state.customerProjectInfo.id > 0 && ! this.state.isModifyStatus',
+ },
+ placeholder: '请选择系统版本',
+ },
+ },
+ ],
+ },
+ {
+ componentName: 'Form.Item',
+ id: 'node_ockoco6icv1uq',
+ props: {
+ wrapperCol: {
+ offset: '',
+ },
+ style: {
+ flexDirection: 'row',
+ width: '600px',
+ display: 'flex',
+ },
+ },
+ children: [
+ {
+ componentName: 'Button',
+ id: 'node_ockoco6icv1ur',
+ props: {
+ style: {
+ marginLeft: '0',
+ },
+ children: '返回',
+ __events: {
+ eventDataList: [
+ {
+ type: 'componentEvent',
+ name: 'onClick',
+ relatedEventName: 'onClickSecondBack',
+ },
+ ],
+ eventList: [
+ {
+ name: 'onClick',
+ disabled: true,
+ },
+ ],
+ },
+ onClick: {
+ type: 'JSFunction',
+ value: 'function(){this.onClickSecondBack.apply(this,Array.prototype.slice.call(arguments).concat([])) }',
+ },
+ },
+ },
+ {
+ componentName: 'Button',
+ id: 'node_ockoco6icv1vb',
+ props: {
+ type: 'primary',
+ children: {
+ type: 'JSExpression',
+ value: 'this.state.secondCommitText',
+ },
+ htmlType: 'submit',
+ style: {
+ float: 'right',
+ marginLeft: '20px',
+ },
+ loading: {
+ type: 'JSExpression',
+ value: 'this.state.LOADING_ADD_OR_UPDATE_CUSTOMER_PROJECT',
+ },
+ },
+ },
+ {
+ componentName: 'Button',
+ id: 'node_ockoco6icv1us',
+ props: {
+ type: 'primary',
+ children: '上一步',
+ htmlType: 'submit',
+ style: {
+ marginLeft: '0px',
+ float: 'right',
+ },
+ __events: {
+ eventDataList: [
+ {
+ type: 'componentEvent',
+ name: 'onClick',
+ relatedEventName: 'onClickPreSecond',
+ },
+ ],
+ eventList: [
+ {
+ name: 'onClick',
+ disabled: true,
+ },
+ ],
+ },
+ onClick: {
+ type: 'JSFunction',
+ value: 'function(){this.onClickPreSecond.apply(this,Array.prototype.slice.call(arguments).concat([])) }',
+ },
+ },
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ {
+ componentName: 'NextP',
+ id: 'node_ockodngwu9m',
+ props: {
+ wrap: false,
+ type: 'body2',
+ verAlign: 'middle',
+ textSpacing: true,
+ align: 'left',
+ full: true,
+ flex: true,
+ style: {
+ display: 'flex',
+ justifyContent: 'center',
+ },
+ },
+ title: '段落',
+ condition: {
+ type: 'JSExpression',
+ value: 'this.state.currentStep === 2',
+ },
+ children: [
+ {
+ componentName: 'Form',
+ id: 'node_ockodngwu9n',
+ props: {
+ labelCol: {
+ span: 10,
+ },
+ wrapperCol: {
+ span: 10,
+ },
+ onFinishFailed: {
+ type: 'JSFunction',
+ value: 'function(){this.onFinishFailed.apply(this,Array.prototype.slice.call(arguments).concat([])) }',
+ },
+ name: 'basic',
+ style: {
+ display: 'flex',
+ flexDirection: 'column',
+ width: '600px',
+ justifyContent: 'center',
+ },
+ layout: 'vertical',
+ __events: {
+ eventDataList: [
+ {
+ type: 'componentEvent',
+ name: 'onFinishFailed',
+ relatedEventName: 'onFinishFailed',
+ },
+ ],
+ eventList: [
+ {
+ name: 'onFinish',
+ disabled: false,
+ },
+ {
+ name: 'onFinishFailed',
+ disabled: true,
+ },
+ {
+ name: 'onFieldsChange',
+ disabled: false,
+ },
+ {
+ name: 'onValuesChange',
+ disabled: false,
+ },
+ ],
+ },
+ },
+ children: [
+ {
+ componentName: 'Form.Item',
+ id: 'node_ockodngwu91m',
+ props: {
+ label: '',
+ },
+ children: [
+ {
+ componentName: 'Steps',
+ id: 'node_ockodngwu91n',
+ props: {
+ current: 1,
+ style: {
+ width: '600px',
+ display: 'flex',
+ justifyContent: 'space-around',
+ alignItems: 'center',
+ height: '300px',
+ },
+ labelPlacement: 'horizontal',
+ direction: 'vertical',
+ },
+ children: [
+ {
+ componentName: 'Steps.Step',
+ id: 'node_ockodngwu91o',
+ props: {
+ title: '提交完成',
+ description: '',
+ style: {
+ width: '200px',
+ },
+ },
+ },
+ {
+ componentName: 'Steps.Step',
+ id: 'node_ockodngwu91p',
+ props: {
+ title: {
+ type: 'JSExpression',
+ value: 'this.state.thirdAuditText',
+ },
+ subTitle: '',
+ description: '',
+ style: {
+ width: '200px',
+ },
+ },
+ },
+ ],
+ },
+ ],
+ },
+ {
+ componentName: 'Form.Item',
+ id: 'node_ockodngwu914',
+ props: {
+ wrapperCol: {
+ offset: '',
+ },
+ style: {
+ flexDirection: 'row',
+ width: '600px',
+ display: 'flex',
+ },
+ },
+ children: [
+ {
+ componentName: 'Button',
+ id: 'node_ockodngwu915',
+ props: {
+ style: {
+ marginLeft: '0',
+ },
+ children: '返回',
+ __events: {
+ eventDataList: [
+ {
+ type: 'componentEvent',
+ name: 'onClick',
+ relatedEventName: 'onClickThirdBack',
+ },
+ ],
+ eventList: [
+ {
+ name: 'onClick',
+ disabled: true,
+ },
+ ],
+ },
+ onClick: {
+ type: 'JSFunction',
+ value: 'function(){this.onClickThirdBack.apply(this,Array.prototype.slice.call(arguments).concat([])) }',
+ },
+ },
+ },
+ {
+ componentName: 'Button',
+ id: 'node_ockodngwu916',
+ props: {
+ type: 'primary',
+ children: {
+ type: 'JSExpression',
+ value: 'this.state.thirdButtonText',
+ },
+ htmlType: 'submit',
+ style: {
+ float: 'right',
+ marginLeft: '20px',
+ },
+ __events: {
+ eventDataList: [
+ {
+ type: 'componentEvent',
+ name: 'onClick',
+ relatedEventName: 'onClickModifyThird',
+ },
+ ],
+ eventList: [
+ {
+ name: 'onClick',
+ disabled: true,
+ },
+ ],
+ },
+ onClick: {
+ type: 'JSFunction',
+ value: 'function(){this.onClickModifyThird.apply(this,Array.prototype.slice.call(arguments).concat([])) }',
+ },
+ },
+ },
+ {
+ componentName: 'Button',
+ id: 'node_ockosjrkvr1d',
+ props: {
+ type: 'primary',
+ children: '上一步',
+ htmlType: 'submit',
+ style: {
+ marginLeft: '0px',
+ float: 'right',
+ },
+ __events: {
+ eventDataList: [
+ {
+ type: 'componentEvent',
+ name: 'onClick',
+ relatedEventName: 'onClickPreThird',
+ },
+ ],
+ eventList: [
+ {
+ name: 'onClick',
+ disabled: true,
+ },
+ ],
+ },
+ onClick: {
+ type: 'JSFunction',
+ value: 'function(){this.onClickPreThird.apply(this,Array.prototype.slice.call(arguments).concat([])) }',
+ },
+ },
+ condition: {
+ type: 'JSExpression',
+ value: 'this.state.customerProjectInfo.status > 2',
+ },
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ i18n: {},
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/.browserslistrc b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/.browserslistrc
new file mode 100644
index 0000000000..55a130413d
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/.browserslistrc
@@ -0,0 +1,3 @@
+defaults
+ios_saf 9
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/.gitignore b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/.gitignore
new file mode 100644
index 0000000000..4ec178818e
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/.gitignore
@@ -0,0 +1,25 @@
+
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules/
+
+# production
+build/
+dist/
+tmp/
+lib/
+
+# misc
+.idea/
+.happypack
+.DS_Store
+*.swp
+*.dia~
+.ice
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+index.module.scss.d.ts
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/README.md b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/README.md
new file mode 100644
index 0000000000..6d9dd75215
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/README.md
@@ -0,0 +1 @@
+This project is generated by lowcode-code-generator & lowcode-solution-icejs3.
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/ice.config.mts b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/ice.config.mts
new file mode 100644
index 0000000000..e1d8a28141
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/ice.config.mts
@@ -0,0 +1,90 @@
+import { join } from 'path';
+import { defineConfig } from '@ice/app';
+import _ from 'lodash';
+import fusion from '@ice/plugin-fusion';
+import locales from '@ice/plugin-moment-locales';
+import type { Plugin } from '@ice/app/esm/types';
+
+interface PluginOptions {
+ id: string;
+}
+
+const plugin: Plugin = (options) => ({
+ // name 可选，插件名称
+ name: 'plugin-name',
+ // setup 必选，用于定制工程构建配置
+ setup: ({ onGetConfig, modifyUserConfig }) => {
+ modifyUserConfig('codeSplitting', 'page');
+
+ onGetConfig((config) => {
+ config.entry = {
+ web: join(process.cwd(), '.ice/entry.client.tsx'),
+ };
+
+ config.cssFilename = '[name].css';
+
+ config.configureWebpack = config.configureWebpack || [];
+ config.configureWebpack?.push((webpackConfig) => {
+ if (webpackConfig.output) {
+ webpackConfig.output.filename = '[name].js';
+ webpackConfig.output.chunkFilename = '[name].js';
+ }
+ return webpackConfig;
+ });
+
+ config.swcOptions = _.merge(config.swcOptions, {
+ compilationConfig: {
+ jsc: {
+ transform: {
+ react: {
+ runtime: 'classic',
+ },
+ },
+ },
+ },
+ });
+
+ // 解决 webpack publicPath 问题
+ config.transforms = config.transforms || [];
+ config.transforms.push((source: string, id: string) => {
+ if (id.includes('.ice/entry.client.tsx')) {
+ let code = `
+ if (!__webpack_public_path__?.startsWith('http') && document.currentScript) {
+ // @ts-ignore
+ __webpack_public_path__ = document.currentScript.src.replace(/^(.*\\/)[^/]+$/, '$1');
+ window.__ICE_ASSETS_MANIFEST__ = window.__ICE_ASSETS_MANIFEST__ || {};
+ window.__ICE_ASSETS_MANIFEST__.publicPath = __webpack_public_path__;
+ }
+ `;
+ code += source;
+ return { code };
+ }
+ });
+ });
+ },
+});
+
+// The project config, see https://v3.ice.work/docs/guide/basic/config
+const minify = process.env.NODE_ENV === 'production' ? 'swc' : false;
+export default defineConfig(() => ({
+ ssr: false,
+ ssg: false,
+ minify,
+
+ externals: {
+ react: 'React',
+ 'react-dom': 'ReactDOM',
+ 'react-dom/client': 'ReactDOM',
+ '@alifd/next': 'Next',
+ lodash: 'var window._',
+ '@alilc/lowcode-engine': 'var window.AliLowCodeEngine',
+ },
+ plugins: [
+ fusion({
+ importStyle: 'sass',
+ }),
+ locales(),
+ plugin(),
+ ],
+}));
+
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/package.json b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/package.json
new file mode 100644
index 0000000000..342a5a0774
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/package.json
@@ -0,0 +1,44 @@
+{
+ "name": "icejs3-demo-app",
+ "version": "0.1.5",
+ "description": "icejs 3 轻量级模板，使用 JavaScript，仅包含基础的 Layout。",
+ "dependencies": {
+ "moment": "^2.24.0",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-router": "^6.9.0",
+ "react-router-dom": "^6.9.0",
+ "intl-messageformat": "^9.3.6",
+ "@alifd/next": "1.26.15",
+ "@ice/runtime": "~1.1.0",
+ "@alilc/lowcode-datasource-engine": "^1.0.0",
+ "@alilc/lowcode-datasource-http-handler": "^1.0.0",
+ "@alilc/lowcode-components": "^1.0.0"
+ },
+ "devDependencies": {
+ "@ice/app": "~3.1.0",
+ "@types/react": "^18.0.0",
+ "@types/react-dom": "^18.0.0",
+ "@types/node": "^18.11.17",
+ "@ice/plugin-fusion": "^1.0.1",
+ "@ice/plugin-moment-locales": "^1.0.0",
+ "eslint": "^6.0.1",
+ "stylelint": "^13.2.0"
+ },
+ "scripts": {
+ "start": "ice start",
+ "build": "ice build",
+ "lint": "npm run eslint && npm run stylelint",
+ "eslint": "eslint --cache --ext .js,.jsx ./",
+ "stylelint": "stylelint ./**/*.scss"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ },
+ "repository": {
+ "type": "git",
+ "url": "http://gitlab.xxx.com/msd/leak-scan/tree/master"
+ },
+ "private": true,
+ "originTemplate": "@alifd/scaffold-lite-js"
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/app.ts b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/app.ts
new file mode 100644
index 0000000000..6d5856292d
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/app.ts
@@ -0,0 +1,13 @@
+import { defineAppConfig } from 'ice';
+
+// App config, see https://v3.ice.work/docs/guide/basic/app
+export default defineAppConfig(() => ({
+ // Set your configs here.
+ app: {
+ rootId: 'App',
+ },
+ router: {
+ type: 'browser',
+ basename: '/',
+ },
+}));
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/constants.js b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/constants.js
new file mode 100644
index 0000000000..ea766c9da3
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/constants.js
@@ -0,0 +1,3 @@
+const __$$constants = {};
+
+export default __$$constants;
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/document.tsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/document.tsx
new file mode 100644
index 0000000000..aff0231d95
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/document.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Meta, Title, Links, Main, Scripts } from 'ice';
+
+export default function Document() {
+ return (
+
+
+
+
+
+
+
+
+
+ {childrenItems}
+
+ );
+ return subNav;
+ }
+
+ return null;
+ }
+
+ const navItem = (
+
+ {item.name}
+
+ );
+ return navItem;
+}
+
+const Navigation = (props, context) => {
+ const location = useLocation();
+ const { pathname } = location;
+ const { isCollapse } = context;
+ return (
+
+ );
+};
+
+Navigation.contextTypes = {
+ isCollapse: PropTypes.bool,
+};
+export default Navigation;
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/layouts/BasicLayout/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/layouts/BasicLayout/index.jsx
new file mode 100644
index 0000000000..18db44df5e
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/layouts/BasicLayout/index.jsx
@@ -0,0 +1,81 @@
+
+import React, { useState } from 'react';
+import { Shell, ConfigProvider } from '@alifd/next';
+import PageNav from './components/PageNav';
+import Logo from './components/Logo';
+import Footer from './components/Footer';
+
+(function() {
+ const throttle = function(type, name, obj = window) {
+ let running = false;
+
+ const func = () => {
+ if (running) {
+ return;
+ }
+
+ running = true;
+ requestAnimationFrame(() => {
+ obj.dispatchEvent(new CustomEvent(name));
+ running = false;
+ });
+ };
+
+ obj.addEventListener(type, func);
+ };
+
+ throttle('resize', 'optimizedResize');
+})();
+
+export default function BasicLayout({ children }) {
+ const getDevice = width => {
+ const isPhone =
+ typeof navigator !== 'undefined' && navigator && navigator.userAgent.match(/phone/gi);
+
+ if (width < 680 || isPhone) {
+ return 'phone';
+ }
+ if (width < 1280 && width > 680) {
+ return 'tablet';
+ }
+ return 'desktop';
+ };
+
+ const [device, setDevice] = useState(getDevice(NaN));
+ window.addEventListener('optimizedResize', e => {
+ setDevice(getDevice(e && e.target && e.target.innerWidth));
+ });
+ return (
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+
+ );
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/layouts/BasicLayout/menuConfig.js b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/layouts/BasicLayout/menuConfig.js
new file mode 100644
index 0000000000..5332202be4
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/layouts/BasicLayout/menuConfig.js
@@ -0,0 +1,11 @@
+
+const headerMenuConfig = [];
+const asideMenuConfig = [
+ {
+ name: 'Dashboard',
+ path: '/',
+ icon: 'smile',
+ },
+];
+export { headerMenuConfig, asideMenuConfig };
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/pages/Example/index.css b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/pages/Example/index.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/pages/Example/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/pages/Example/index.jsx
new file mode 100644
index 0000000000..9a661ad753
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/pages/Example/index.jsx
@@ -0,0 +1,116 @@
+// 注意: 出码引擎注入的临时变量默认都以 "__$$" 开头，禁止在搭建的代码中直接访问。
+// 例外：react 框架的导出名和各种组件名除外。
+import React from 'react';
+
+import { Page, Table } from '@alilc/lowcode-components';
+
+import { createHttpHandler as __$$createHttpRequestHandler } from '@alilc/lowcode-datasource-http-handler';
+
+import { create as __$$createDataSourceEngine } from '@alilc/lowcode-datasource-engine/runtime';
+
+import utils from '../../utils';
+
+import * as __$$i18n from '../../i18n';
+
+import __$$constants from '../../constants';
+
+import './index.css';
+
+class Example$$Page extends React.Component {
+ _context = this;
+
+ _dataSourceConfig = this._defineDataSourceConfig();
+ _dataSourceEngine = __$$createDataSourceEngine(this._dataSourceConfig, this, {
+ runtimeConfig: true,
+ requestHandlersMap: { http: __$$createHttpRequestHandler() },
+ });
+
+ get dataSourceMap() {
+ return this._dataSourceEngine.dataSourceMap || {};
+ }
+
+ reloadDataSource = async () => {
+ await this._dataSourceEngine.reloadDataSource();
+ };
+
+ get constants() {
+ return __$$constants || {};
+ }
+
+ constructor(props, context) {
+ super(props);
+
+ this.utils = utils;
+
+ __$$i18n._inject2(this);
+
+ this.state = {};
+ }
+
+ $ = () => null;
+
+ $$ = () => [];
+
+ _defineDataSourceConfig() {
+ const _this = this;
+ return {
+ list: [
+ {
+ id: 'userList',
+ type: 'http',
+ description: '用户列表',
+ options: function () {
+ return {
+ uri: 'https://api.example.com/user/list',
+ };
+ }.bind(_this),
+ isInit: function () {
+ return undefined;
+ }.bind(_this),
+ },
+ ],
+ };
+ }
+
+ componentDidMount() {
+ this._dataSourceEngine.reloadDataSource();
+ }
+
+ render() {
+ const __$$context = this._context || this;
+ const { state } = __$$context;
+ return (
+
+ Alibaba Fusion
+
+ © 2019-现在 Alibaba Fusion & ICE
+
+
+ {image && 
}
+ {text}
+
+
+ );
+}
+ `,
+ );
+
+ return [['src', 'layouts', 'BasicLayout', 'components', 'Logo'], file];
+}
diff --git a/modules/code-generator/src/plugins/project/framework/icejs3/template/files/src/layouts/BasicLayout/components/Logo/index.style.ts b/modules/code-generator/src/plugins/project/framework/icejs3/template/files/src/layouts/BasicLayout/components/Logo/index.style.ts
new file mode 100644
index 0000000000..dfd00dd3e0
--- /dev/null
+++ b/modules/code-generator/src/plugins/project/framework/icejs3/template/files/src/layouts/BasicLayout/components/Logo/index.style.ts
@@ -0,0 +1,31 @@
+import { ResultFile } from '@alilc/lowcode-types';
+import { createResultFile } from '../../../../../../../../../../../utils/resultHelper';
+
+export default function getFile(): [string[], ResultFile] {
+ const file = createResultFile(
+ 'index',
+ 'module.scss',
+ `
+.logo{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #FF7300;
+ font-weight: bold;
+ font-size: 14px;
+ line-height: 22px;
+
+ &:visited, &:link {
+ color: #FF7300;
+ }
+
+ img {
+ height: 24px;
+ margin-right: 10px;
+ }
+}
+ `,
+ );
+
+ return [['src', 'layouts', 'BasicLayout', 'components', 'Logo'], file];
+}
diff --git a/modules/code-generator/src/plugins/project/framework/icejs3/template/files/src/layouts/BasicLayout/components/PageNav/index.jsx.ts b/modules/code-generator/src/plugins/project/framework/icejs3/template/files/src/layouts/BasicLayout/components/PageNav/index.jsx.ts
new file mode 100644
index 0000000000..1713057566
--- /dev/null
+++ b/modules/code-generator/src/plugins/project/framework/icejs3/template/files/src/layouts/BasicLayout/components/PageNav/index.jsx.ts
@@ -0,0 +1,79 @@
+import { ResultFile } from '@alilc/lowcode-types';
+import { createResultFile } from '../../../../../../../../../../../utils/resultHelper';
+
+export default function getFile(): [string[], ResultFile] {
+ const file = createResultFile(
+ 'index',
+ 'jsx',
+ `import React from 'react';
+import PropTypes from 'prop-types';
+import { Link, useLocation } from 'ice';
+import { Nav } from '@alifd/next';
+import { asideMenuConfig } from '../../menuConfig';
+
+const { SubNav } = Nav;
+const NavItem = Nav.Item;
+
+function getNavMenuItems(menusData) {
+ if (!menusData) {
+ return [];
+ }
+
+ return menusData
+ .filter(item => item.name && !item.hideInMenu)
+ .map((item, index) => getSubMenuOrItem(item, index));
+}
+
+function getSubMenuOrItem(item, index) {
+ if (item.children && item.children.some(child => child.name)) {
+ const childrenItems = getNavMenuItems(item.children);
+
+ if (childrenItems && childrenItems.length > 0) {
+ const subNav = (
+
+ Alibaba Fusion
+
+ © 2019-现在 Alibaba Fusion & ICE
+
+
+ {image && }
+ {text}
+
+
+ );
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss
new file mode 100644
index 0000000000..dad05a263f
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss
@@ -0,0 +1,20 @@
+
+.logo{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #FF7300;
+ font-weight: bold;
+ font-size: 14px;
+ line-height: 22px;
+
+ &:visited, &:link {
+ color: #FF7300;
+ }
+
+ img {
+ height: 24px;
+ margin-right: 10px;
+ }
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx
new file mode 100644
index 0000000000..911998b0d3
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link, useLocation } from 'ice';
+import { Nav } from '@alifd/next';
+import { asideMenuConfig } from '../../menuConfig';
+
+const { SubNav } = Nav;
+const NavItem = Nav.Item;
+
+function getNavMenuItems(menusData) {
+ if (!menusData) {
+ return [];
+ }
+
+ return menusData
+ .filter(item => item.name && !item.hideInMenu)
+ .map((item, index) => getSubMenuOrItem(item, index));
+}
+
+function getSubMenuOrItem(item, index) {
+ if (item.children && item.children.some(child => child.name)) {
+ const childrenItems = getNavMenuItems(item.children);
+
+ if (childrenItems && childrenItems.length > 0) {
+ const subNav = (
+
+
+
+ );
+ }
+}
+
+export default Test$$Page;
+
+function __$$eval(expr) {
+ try {
+ return expr();
+ } catch (error) {}
+}
+
+function __$$evalArray(expr) {
+ const res = __$$eval(expr);
+ return Array.isArray(res) ? res : [];
+}
+
+function __$$createChildContext(oldContext, ext) {
+ const childContext = {
+ ...oldContext,
+ ...ext,
+ };
+ childContext.__proto__ = oldContext;
+ return childContext;
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/pages/layout.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/pages/layout.jsx
new file mode 100644
index 0000000000..50fbb2d1f1
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/pages/layout.jsx
@@ -0,0 +1,10 @@
+import { Outlet } from 'ice';
+import BasicLayout from '@/layouts/BasicLayout';
+
+export default function Layout() {
+ return (
+
+ Alibaba Fusion
+
+ © 2019-现在 Alibaba Fusion & ICE
+
+
+ {image && }
+ {text}
+
+
+ );
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss
new file mode 100644
index 0000000000..dad05a263f
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss
@@ -0,0 +1,20 @@
+
+.logo{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #FF7300;
+ font-weight: bold;
+ font-size: 14px;
+ line-height: 22px;
+
+ &:visited, &:link {
+ color: #FF7300;
+ }
+
+ img {
+ height: 24px;
+ margin-right: 10px;
+ }
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx
new file mode 100644
index 0000000000..911998b0d3
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link, useLocation } from 'ice';
+import { Nav } from '@alifd/next';
+import { asideMenuConfig } from '../../menuConfig';
+
+const { SubNav } = Nav;
+const NavItem = Nav.Item;
+
+function getNavMenuItems(menusData) {
+ if (!menusData) {
+ return [];
+ }
+
+ return menusData
+ .filter(item => item.name && !item.hideInMenu)
+ .map((item, index) => getSubMenuOrItem(item, index));
+}
+
+function getSubMenuOrItem(item, index) {
+ if (item.children && item.children.some(child => child.name)) {
+ const childrenItems = getNavMenuItems(item.children);
+
+ if (childrenItems && childrenItems.length > 0) {
+ const subNav = (
+
+
+ );
+ }
+}
+
+export default Aaaa$$Page;
+
+function __$$eval(expr) {
+ try {
+ return expr();
+ } catch (error) {}
+}
+
+function __$$evalArray(expr) {
+ const res = __$$eval(expr);
+ return Array.isArray(res) ? res : [];
+}
+
+function __$$createChildContext(oldContext, ext) {
+ const childContext = {
+ ...oldContext,
+ ...ext,
+ };
+ childContext.__proto__ = oldContext;
+ return childContext;
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/pages/layout.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/pages/layout.jsx
new file mode 100644
index 0000000000..50fbb2d1f1
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2-utils-name-alias/expected/demo-project/src/pages/layout.jsx
@@ -0,0 +1,10 @@
+import { Outlet } from 'ice';
+import BasicLayout from '@/layouts/BasicLayout';
+
+export default function Layout() {
+ return (
+
+ Alibaba Fusion
+
+ © 2019-现在 Alibaba Fusion & ICE
+
+
+ {image && }
+ {text}
+
+
+ );
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss
new file mode 100644
index 0000000000..dad05a263f
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss
@@ -0,0 +1,20 @@
+
+.logo{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #FF7300;
+ font-weight: bold;
+ font-size: 14px;
+ line-height: 22px;
+
+ &:visited, &:link {
+ color: #FF7300;
+ }
+
+ img {
+ height: 24px;
+ margin-right: 10px;
+ }
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx
new file mode 100644
index 0000000000..911998b0d3
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link, useLocation } from 'ice';
+import { Nav } from '@alifd/next';
+import { asideMenuConfig } from '../../menuConfig';
+
+const { SubNav } = Nav;
+const NavItem = Nav.Item;
+
+function getNavMenuItems(menusData) {
+ if (!menusData) {
+ return [];
+ }
+
+ return menusData
+ .filter(item => item.name && !item.hideInMenu)
+ .map((item, index) => getSubMenuOrItem(item, index));
+}
+
+function getSubMenuOrItem(item, index) {
+ if (item.children && item.children.some(child => child.name)) {
+ const childrenItems = getNavMenuItems(item.children);
+
+ if (childrenItems && childrenItems.length > 0) {
+ const subNav = (
+
+
+
+ );
+ }
+}
+
+export default Test$$Page;
+
+function __$$eval(expr) {
+ try {
+ return expr();
+ } catch (error) {}
+}
+
+function __$$evalArray(expr) {
+ const res = __$$eval(expr);
+ return Array.isArray(res) ? res : [];
+}
+
+function __$$createChildContext(oldContext, ext) {
+ const childContext = {
+ ...oldContext,
+ ...ext,
+ };
+ childContext.__proto__ = oldContext;
+ return childContext;
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/pages/layout.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/pages/layout.jsx
new file mode 100644
index 0000000000..50fbb2d1f1
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/pages/layout.jsx
@@ -0,0 +1,10 @@
+import { Outlet } from 'ice';
+import BasicLayout from '@/layouts/BasicLayout';
+
+export default function Layout() {
+ return (
+
+ Alibaba Fusion
+
+ © 2019-现在 Alibaba Fusion & ICE
+
+
+ {image && }
+ {text}
+
+
+ );
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss
new file mode 100644
index 0000000000..dad05a263f
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss
@@ -0,0 +1,20 @@
+
+.logo{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #FF7300;
+ font-weight: bold;
+ font-size: 14px;
+ line-height: 22px;
+
+ &:visited, &:link {
+ color: #FF7300;
+ }
+
+ img {
+ height: 24px;
+ margin-right: 10px;
+ }
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx
new file mode 100644
index 0000000000..911998b0d3
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link, useLocation } from 'ice';
+import { Nav } from '@alifd/next';
+import { asideMenuConfig } from '../../menuConfig';
+
+const { SubNav } = Nav;
+const NavItem = Nav.Item;
+
+function getNavMenuItems(menusData) {
+ if (!menusData) {
+ return [];
+ }
+
+ return menusData
+ .filter(item => item.name && !item.hideInMenu)
+ .map((item, index) => getSubMenuOrItem(item, index));
+}
+
+function getSubMenuOrItem(item, index) {
+ if (item.children && item.children.some(child => child.name)) {
+ const childrenItems = getNavMenuItems(item.children);
+
+ if (childrenItems && childrenItems.length > 0) {
+ const subNav = (
+
+ this.state.title)} />
+
+ );
+ }
+}
+
+export default Test$$Page;
+
+function __$$eval(expr) {
+ try {
+ return expr();
+ } catch (error) {}
+}
+
+function __$$evalArray(expr) {
+ const res = __$$eval(expr);
+ return Array.isArray(res) ? res : [];
+}
+
+function __$$createChildContext(oldContext, ext) {
+ const childContext = {
+ ...oldContext,
+ ...ext,
+ };
+ childContext.__proto__ = oldContext;
+ return childContext;
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/pages/layout.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/pages/layout.jsx
new file mode 100644
index 0000000000..50fbb2d1f1
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/pages/layout.jsx
@@ -0,0 +1,10 @@
+import { Outlet } from 'ice';
+import BasicLayout from '@/layouts/BasicLayout';
+
+export default function Layout() {
+ return (
+
+ Alibaba Fusion
+
+ © 2019-现在 Alibaba Fusion & ICE
+
+
+ {image && }
+ {text}
+
+
+ );
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss
new file mode 100644
index 0000000000..dad05a263f
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss
@@ -0,0 +1,20 @@
+
+.logo{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #FF7300;
+ font-weight: bold;
+ font-size: 14px;
+ line-height: 22px;
+
+ &:visited, &:link {
+ color: #FF7300;
+ }
+
+ img {
+ height: 24px;
+ margin-right: 10px;
+ }
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx
new file mode 100644
index 0000000000..911998b0d3
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link, useLocation } from 'ice';
+import { Nav } from '@alifd/next';
+import { asideMenuConfig } from '../../menuConfig';
+
+const { SubNav } = Nav;
+const NavItem = Nav.Item;
+
+function getNavMenuItems(menusData) {
+ if (!menusData) {
+ return [];
+ }
+
+ return menusData
+ .filter(item => item.name && !item.hideInMenu)
+ .map((item, index) => getSubMenuOrItem(item, index));
+}
+
+function getSubMenuOrItem(item, index) {
+ if (item.children && item.children.some(child => child.name)) {
+ const childrenItems = getNavMenuItems(item.children);
+
+ if (childrenItems && childrenItems.length > 0) {
+ const subNav = (
+
+
+ 员工列表
+
+ }
+ headerTest={[]}
+ headerProps={{ background: 'surface' }}
+ footer={null}
+ minHeight="100vh"
+ >
+
+
+
+ this.state.users.data)}
+ rowKey="workid"
+ columns={[
+ { title: '花名', dataIndex: 'cname' },
+ { title: 'user_id', dataIndex: 'workid' },
+ { title: '部门', dataIndex: 'dep' },
+ ]}
+ searchItems={[
+ { label: '姓名', name: 'cname' },
+ { label: '部门', name: 'dep' },
+ ]}
+ onSearch={function () {
+ return this.onSearch.apply(
+ this,
+ Array.prototype.slice.call(arguments).concat([])
+ );
+ }.bind(this)}
+ onClear={function () {
+ return this.onClear.apply(
+ this,
+ Array.prototype.slice.call(arguments).concat([])
+ );
+ }.bind(this)}
+ pagination={{
+ defaultPageSize: '',
+ onPageChange: function () {
+ return this.onPageChange.apply(
+ this,
+ Array.prototype.slice.call(arguments).concat([])
+ );
+ }.bind(this),
+ showSizeChanger: true,
+ }}
+ />
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default Test$$Page;
+
+function __$$eval(expr) {
+ try {
+ return expr();
+ } catch (error) {}
+}
+
+function __$$evalArray(expr) {
+ const res = __$$eval(expr);
+ return Array.isArray(res) ? res : [];
+}
+
+function __$$createChildContext(oldContext, ext) {
+ const childContext = {
+ ...oldContext,
+ ...ext,
+ };
+ childContext.__proto__ = oldContext;
+ return childContext;
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/pages/layout.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/pages/layout.jsx
new file mode 100644
index 0000000000..50fbb2d1f1
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo4/expected/demo-project/src/pages/layout.jsx
@@ -0,0 +1,10 @@
+import { Outlet } from 'ice';
+import BasicLayout from '@/layouts/BasicLayout';
+
+export default function Layout() {
+ return (
+
+ Alibaba Fusion
+
+ © 2019-现在 Alibaba Fusion & ICE
+
+
+ {image && }
+ {text}
+
+
+ );
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss
new file mode 100644
index 0000000000..dad05a263f
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss
@@ -0,0 +1,20 @@
+
+.logo{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #FF7300;
+ font-weight: bold;
+ font-size: 14px;
+ line-height: 22px;
+
+ &:visited, &:link {
+ color: #FF7300;
+ }
+
+ img {
+ height: 24px;
+ margin-right: 10px;
+ }
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx
new file mode 100644
index 0000000000..911998b0d3
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link, useLocation } from 'ice';
+import { Nav } from '@alifd/next';
+import { asideMenuConfig } from '../../menuConfig';
+
+const { SubNav } = Nav;
+const NavItem = Nav.Item;
+
+function getNavMenuItems(menusData) {
+ if (!menusData) {
+ return [];
+ }
+
+ return menusData
+ .filter(item => item.name && !item.hideInMenu)
+ .map((item, index) => getSubMenuOrItem(item, index));
+}
+
+function getSubMenuOrItem(item, index) {
+ if (item.children && item.children.some(child => child.name)) {
+ const childrenItems = getNavMenuItems(item.children);
+
+ if (childrenItems && childrenItems.length > 0) {
+ const subNav = (
+
+
+
+
+
+
+
+ 所在网关：
+
+
+ this.state.modalVisible)}
+ footer=""
+ __events={{
+ eventDataList: [
+ {
+ type: 'componentEvent',
+ name: 'onCancel',
+ relatedEventName: 'onCancelModal',
+ },
+ ],
+ eventList: [
+ { name: 'onCancel', disabled: true },
+ { name: 'onOk', disabled: false },
+ ],
+ }}
+ onCancel={function () {
+ this.onCancelModal.apply(
+ this,
+ Array.prototype.slice.call(arguments).concat([])
+ );
+ }.bind(this)}
+ zIndex={2000}
+ >
+
+
+ this.state.records)}
+ columns={[
+ {
+ title: '发布名称',
+ dataIndex: 'order_name',
+ key: 'name',
+ },
+ {
+ title: '类型',
+ dataIndex: 'order_type_desc',
+ key: 'age',
+ },
+ {
+ title: '发布状态',
+ dataIndex: 'order_status_desc',
+ key: 'address',
+ },
+ { title: '发布人', dataIndex: 'creator_name' },
+ { title: '当前批次/总批次', dataIndex: 'cur_batch_no' },
+ {
+ title: '发布机器/总机器',
+ dataIndex: 'pubblish_ip_finish_num',
+ },
+ { title: '发布时间', dataIndex: 'publish_id' },
+ ]}
+ actions={__$$eval(() => this.actions || [])}
+ getActions={function () {
+ return this.getActions.apply(
+ this,
+ Array.prototype.slice.call(arguments).concat([])
+ );
+ }.bind(this)}
+ />
+
+
+
+
+
+
+ );
+ }
+}
+
+export default Test$$Page;
+
+function __$$eval(expr) {
+ try {
+ return expr();
+ } catch (error) {}
+}
+
+function __$$evalArray(expr) {
+ const res = __$$eval(expr);
+ return Array.isArray(res) ? res : [];
+}
+
+function __$$createChildContext(oldContext, ext) {
+ const childContext = {
+ ...oldContext,
+ ...ext,
+ };
+ childContext.__proto__ = oldContext;
+ return childContext;
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/pages/layout.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/pages/layout.jsx
new file mode 100644
index 0000000000..50fbb2d1f1
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo5/expected/demo-project/src/pages/layout.jsx
@@ -0,0 +1,10 @@
+import { Outlet } from 'ice';
+import BasicLayout from '@/layouts/BasicLayout';
+
+export default function Layout() {
+ return (
+
+ Alibaba Fusion
+
+ © 2019-现在 Alibaba Fusion & ICE
+
+
+ {image && }
+ {text}
+
+
+ );
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss
new file mode 100644
index 0000000000..dad05a263f
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss
@@ -0,0 +1,20 @@
+
+.logo{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #FF7300;
+ font-weight: bold;
+ font-size: 14px;
+ line-height: 22px;
+
+ &:visited, &:link {
+ color: #FF7300;
+ }
+
+ img {
+ height: 24px;
+ margin-right: 10px;
+ }
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx
new file mode 100644
index 0000000000..911998b0d3
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link, useLocation } from 'ice';
+import { Nav } from '@alifd/next';
+import { asideMenuConfig } from '../../menuConfig';
+
+const { SubNav } = Nav;
+const NavItem = Nav.Item;
+
+function getNavMenuItems(menusData) {
+ if (!menusData) {
+ return [];
+ }
+
+ return menusData
+ .filter(item => item.name && !item.hideInMenu)
+ .map((item, index) => getSubMenuOrItem(item, index));
+}
+
+function getSubMenuOrItem(item, index) {
+ if (item.children && item.children.some(child => child.name)) {
+ const childrenItems = getNavMenuItems(item.children);
+
+ if (childrenItems && childrenItems.length > 0) {
+ const subNav = (
+
+
+
+ );
+ }
+}
+
+export default Test$$Page;
+
+function __$$eval(expr) {
+ try {
+ return expr();
+ } catch (error) {}
+}
+
+function __$$evalArray(expr) {
+ const res = __$$eval(expr);
+ return Array.isArray(res) ? res : [];
+}
+
+function __$$createChildContext(oldContext, ext) {
+ const childContext = {
+ ...oldContext,
+ ...ext,
+ };
+ childContext.__proto__ = oldContext;
+ return childContext;
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/pages/layout.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/pages/layout.jsx
new file mode 100644
index 0000000000..50fbb2d1f1
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/pages/layout.jsx
@@ -0,0 +1,10 @@
+import { Outlet } from 'ice';
+import BasicLayout from '@/layouts/BasicLayout';
+
+export default function Layout() {
+ return (
+
+ Alibaba Fusion
+
+ © 2019-现在 Alibaba Fusion & ICE
+
+
+ {image && }
+ {text}
+
+
+ );
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss
new file mode 100644
index 0000000000..dad05a263f
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss
@@ -0,0 +1,20 @@
+
+.logo{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #FF7300;
+ font-weight: bold;
+ font-size: 14px;
+ line-height: 22px;
+
+ &:visited, &:link {
+ color: #FF7300;
+ }
+
+ img {
+ height: 24px;
+ margin-right: 10px;
+ }
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx
new file mode 100644
index 0000000000..911998b0d3
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link, useLocation } from 'ice';
+import { Nav } from '@alifd/next';
+import { asideMenuConfig } from '../../menuConfig';
+
+const { SubNav } = Nav;
+const NavItem = Nav.Item;
+
+function getNavMenuItems(menusData) {
+ if (!menusData) {
+ return [];
+ }
+
+ return menusData
+ .filter(item => item.name && !item.hideInMenu)
+ .map((item, index) => getSubMenuOrItem(item, index));
+}
+
+function getSubMenuOrItem(item, index) {
+ if (item.children && item.children.some(child => child.name)) {
+ const childrenItems = getNavMenuItems(item.children);
+
+ if (childrenItems && childrenItems.length > 0) {
+ const subNav = (
+
+ this.state.isModifyDialogVisible)}
+ okText="确认"
+ okType=""
+ forceRender={false}
+ cancelText="取消"
+ zIndex={2000}
+ destroyOnClose={false}
+ confirmLoading={false}
+ __events={{
+ eventDataList: [
+ {
+ type: 'componentEvent',
+ name: 'onOk',
+ relatedEventName: 'onOkModifyDialogThird',
+ },
+ {
+ type: 'componentEvent',
+ name: 'onCancel',
+ relatedEventName: 'onCancelModifyDialogThird',
+ },
+ ],
+ eventList: [
+ { name: 'onCancel', disabled: true },
+ { name: 'onOk', disabled: true },
+ ],
+ }}
+ onOk={function () {
+ this.onOkModifyDialogThird.apply(
+ this,
+ Array.prototype.slice.call(arguments).concat([])
+ );
+ }.bind(this)}
+ onCancel={function () {
+ this.onCancelModifyDialogThird.apply(
+ this,
+ Array.prototype.slice.call(arguments).concat([])
+ );
+ }.bind(this)}
+ >
+
+ 修改将撤回此前填写的信息
+
+
+
+
+
+
+ this.state.currentStep)}>
+
+
+ {!!__$$eval(() => this.state.currentStep === 0) && (
+
+
+
+ )}
+ {!!__$$eval(() => this.state.currentStep === 1) && (
+
+
+
+ )}
+ {!!__$$eval(() => this.state.currentStep === 2) && (
+
+
+
+ )}
+
+
+
+
+ );
+ }
+}
+
+export default Test$$Page;
+
+function __$$eval(expr) {
+ try {
+ return expr();
+ } catch (error) {}
+}
+
+function __$$evalArray(expr) {
+ const res = __$$eval(expr);
+ return Array.isArray(res) ? res : [];
+}
+
+function __$$createChildContext(oldContext, ext) {
+ const childContext = {
+ ...oldContext,
+ ...ext,
+ };
+ childContext.__proto__ = oldContext;
+ return childContext;
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/pages/layout.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/pages/layout.jsx
new file mode 100644
index 0000000000..50fbb2d1f1
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo7-literal-condition2/expected/demo-project/src/pages/layout.jsx
@@ -0,0 +1,10 @@
+import { Outlet } from 'ice';
+import BasicLayout from '@/layouts/BasicLayout';
+
+export default function Layout() {
+ return (
+
+ Alibaba Fusion
+
+ © 2019-现在 Alibaba Fusion & ICE
+
+
+ {image && }
+ {text}
+
+
+ );
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss
new file mode 100644
index 0000000000..dad05a263f
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/layouts/BasicLayout/components/Logo/index.module.scss
@@ -0,0 +1,20 @@
+
+.logo{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #FF7300;
+ font-weight: bold;
+ font-size: 14px;
+ line-height: 22px;
+
+ &:visited, &:link {
+ color: #FF7300;
+ }
+
+ img {
+ height: 24px;
+ margin-right: 10px;
+ }
+}
+
\ No newline at end of file
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx
new file mode 100644
index 0000000000..911998b0d3
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/layouts/BasicLayout/components/PageNav/index.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link, useLocation } from 'ice';
+import { Nav } from '@alifd/next';
+import { asideMenuConfig } from '../../menuConfig';
+
+const { SubNav } = Nav;
+const NavItem = Nav.Item;
+
+function getNavMenuItems(menusData) {
+ if (!menusData) {
+ return [];
+ }
+
+ return menusData
+ .filter(item => item.name && !item.hideInMenu)
+ .map((item, index) => getSubMenuOrItem(item, index));
+}
+
+function getSubMenuOrItem(item, index) {
+ if (item.children && item.children.some(child => child.name)) {
+ const childrenItems = getNavMenuItems(item.children);
+
+ if (childrenItems && childrenItems.length > 0) {
+ const subNav = (
+
+ this.dataSourceMap['userList'])}
+ columns={[
+ { dataIndex: 'name', title: '姓名' },
+ { dataIndex: 'age', title: '年龄' },
+ ]}
+ />
+
+ );
+ }
+}
+
+export default Example$$Page;
+
+function __$$eval(expr) {
+ try {
+ return expr();
+ } catch (error) {}
+}
+
+function __$$evalArray(expr) {
+ const res = __$$eval(expr);
+ return Array.isArray(res) ? res : [];
+}
+
+function __$$createChildContext(oldContext, ext) {
+ const childContext = {
+ ...oldContext,
+ ...ext,
+ };
+ childContext.__proto__ = oldContext;
+ return childContext;
+}
diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/pages/layout.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/pages/layout.jsx
new file mode 100644
index 0000000000..50fbb2d1f1
--- /dev/null
+++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo8-datasource-prop/expected/demo-project/src/pages/layout.jsx
@@ -0,0 +1,10 @@
+import { Outlet } from 'ice';
+import BasicLayout from '@/layouts/BasicLayout';
+
+export default function Layout() {
+ return (
+