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 b24c91054a..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}`); // 触发事件 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 212337a620..383b2952ce 100644 --- a/docs/docs/api/index.md +++ b/docs/docs/api/index.md @@ -5,7 +5,7 @@ sidebar_position: 0 引擎提供的公开 API 分为`命名空间`和`模型`两类，其中`命名空间`用于聚合一大类的 API，`模型`为各 API 涉及到的对象模型。 -### 命名空间 +## 命名空间 引擎直接提供以下几大类 API @@ -21,7 +21,7 @@ sidebar_position: 0 - logger 日志 API - init 初始化 API -### 模型 +## 模型 以下模型通过前面的 API 以返回值等形式间接透出。 - document-model 文档 @@ -29,18 +29,27 @@ sidebar_position: 0 - node-children 节点孩子 - props 属性集 - prop 属性 -- setting-prop-entry 设置属性 +- setting-field 设置属性 - setting-top-entry 设置属性集 - component-meta 物料元数据 - selection 画布选中 - detecting 画布 hover - history 操作历史 +- window 低代码设计器窗口模型 +- detecting 画布节点悬停模型 +- modal-nodes-manager 模态节点管理器模型 +- plugin-instance 插件实例 +- drop-location 拖拽放置位置模型 -### API 设计约定 +## 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 93ad133d32..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'; diff --git a/docs/docs/api/logger.md b/docs/docs/api/logger.md index d523622d80..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 4cf1948cfd..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 f225386fc2..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 1ae573e7ec..396fad9e9e 100644 --- a/docs/docs/api/skeleton.md +++ b/docs/docs/api/skeleton.md @@ -1,7 +1,11 @@ --- 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 提供了面板扩展和管理的能力，如下图蓝色内容都是扩展出来的。 @@ -65,6 +69,7 @@ skeleton.add({ props: { align: "left", icon: "wenjian", + title: '标题', // 图标下方展示的标题 description: "JS 面板", }, panelProps: { @@ -86,7 +91,7 @@ Widget 形式是直接渲染在当前编辑器的对应位置上。如 demo 中 接入可以参考代码： ```javascript -import {skeleton} from "@alilc/lowcode-engine"; +import { skeleton } from "@alilc/lowcode-engine"; // 注册 logo 面板 skeleton.add({ area: "topArea", @@ -115,36 +120,36 @@ 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） +### add -### 1. add +往指定扩展区加入一块面板 -```tsx -add(config: IWidgetBaseConfig & { - area?: string; -}, extraConfig?: object): IWidget | Panel; +```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 | 面板的实现类/节点的参数 | | @@ -160,74 +165,309 @@ IWidgetBaseConfig 定义如下： | index | 面板的位置，不传默认按插件注册顺序 | | -### 2. remove - -remove(config: IWidgetBaseConfig) +### remove 移除一个面板实例 -### 3. showPanel +```typescript +/** + * 移除一个面板实例 + * remove a panel + * @param config + * @returns + */ +remove(config: IPublicTypeWidgetBaseConfig): number | undefined; +``` -showPanel(name: string) +### getPanel -展示指定 Panel 实例 +获取面板实例 -### 4. hidePanel +```typescript +/** + * 获取面板实例 + * @param name 面板名称 + */ +getPanel(name: string): IPublicModelSkeletonItem | undefined; +``` -hidePanel(name: string) +相关类型：[IPublicModelSkeletonItem](https://github.com/alibaba/lowcode-engine/blob/main/packages/shell/src/model/skeleton-item.ts) -### 5. showWidget +@since v1.1.10 -showWidget(name: string) +### showPanel -展示指定 Widget 实例 +展示指定 Panel 实例 -### 6. hideWidget +```typescript +/** + * 展示指定 Panel 实例 + * show panel by name + * @param name + */ +showPanel(name: string): void; +``` -hideWidget(name: string) +### hidePanel +隐藏面板 -隐藏指定 widget 实例。 +```typescript +/** + * 隐藏面板 + * hide panel by name + * @param name + */ +hidePanel(name: string): void; +``` -### 7. enableWidget +### showWidget -enableWidget(name: string) +展示指定 Widget 实例 +```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 -注：该函数将会触发全局事件 'skeleton.widget.enable' +隐藏指定 widget 实例。 -### 8. disableWidget +```typescript +/** + * 隐藏指定 widget 实例 + * hide widget by name + * @param name + */ +hideWidget(name: string): void; +``` -disableWidget(name: string) +### disableWidget 将 widget 禁用掉，禁用后，所有鼠标事件都会被禁止掉。 适用场景：在该面板还在进行初始化构造时，可以先禁止掉，防止用户点击报错，待初始化完成，重新启用。 -## 事件（events） -### 1. onShowPanel +```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; +``` + +相关类型：[IPublicModelSkeletonItem](https://github.com/alibaba/lowcode-engine/blob/main/packages/shell/src/model/skeleton-item.ts) + + + +### registerConfigTransducer + +注册一个面板的配置转换器（transducer）。 + +```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 +```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(listener: (...args: unknown[]) => void) +### 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 + +监听 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) -onShowWidget(listener: (...args: unknown[]) => void) +### 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 +```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(listener: (...args: unknown[]) => void) +### 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 @@ -299,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 (
+ 自定义 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 a5e374db91..6e4979553b 100644
--- a/docs/docs/guide/expand/editor/material.md
+++ b/docs/docs/guide/expand/editor/material.md
@@ -270,10 +270,11 @@ npm publish
### 在项目中引入资产包
```typescript
-import { ILowCodePluginContext, material, plugins } from '@alilc/lowcode-engine';
+import { material, plugins } from '@alilc/lowcode-engine';
+import { IPublicModelPluginContext } from '@alilc/lowcode-types';
// 动态加载 assets
-plugins.register((ctx: ILowCodePluginContext) => {
+plugins.register((ctx: IPublicModelPluginContext) => {
return {
name: 'ext-assets',
async init() {
diff --git a/docs/docs/guide/expand/editor/metaSpec.md b/docs/docs/guide/expand/editor/metaSpec.md
index 2e70550ac7..dda16a9cb3 100644
--- a/docs/docs/guide/expand/editor/metaSpec.md
+++ b/docs/docs/guide/expand/editor/metaSpec.md
@@ -10,7 +10,7 @@ sidebar_position: 2
## 可视化生成物料描述
-使用 Parts 造物平台：[使用文档](/site/docs/guide/expand/editor/partsIntro)
+使用 Parts 造物平台：[使用文档](/site/docs/guide/expand/editor/parts/partsIntro)
## 自动生成物料描述
@@ -460,7 +460,6 @@ import parse from '@alilc/lowcode-material-parser';
{
name: 'back',
title: ' ',
- virtual: () => true,
display: 'plain',
setter: BackwardSetter,
}
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/partsIntro.md b/docs/docs/guide/expand/editor/parts/prototype.md
similarity index 80%
rename from docs/docs/guide/expand/editor/partsIntro.md
rename to docs/docs/guide/expand/editor/parts/prototype.md
index 174afc37ad..b90728f657 100644
--- a/docs/docs/guide/expand/editor/partsIntro.md
+++ b/docs/docs/guide/expand/editor/parts/prototype.md
@@ -1,5 +1,5 @@
---
-title: 利用 Parts 造物快速使用 react 组件
+title: React 组件导入
sidebar_position: 3
---
## 介绍
@@ -50,8 +50,6 @@ sidebar_position: 3
#### 给组件增加物料描述
-选中刚刚新增的 BlockPicker 组件，然后给它增加描述：
-
- 打开左侧 Setter 面板
- 按照组件的属性拖入需要 Setter 类型（如图中组件的 width 属性，拖入数字 Setter）
- 各种 Setter 的介绍可以参看这篇文档：[预置设置器列表](/site/docs/guide/appendix/setters)
@@ -102,31 +100,22 @@ sidebar_position: 3
- 点击确定发布完成
-
-## 资产包构建
-
+## 资产包
第三步：物料描述发布完成后，接下来我们就需要构建出可用的资产包用于低代码应用中。
#### 资产包构建
+有两种方式可以构建资产包：
+- 一种是通过 [`我的资产包`] 资产包管理模块进行整个资产包生命周期的管理，当然也包括资产包的构建，可参考 [资产包管理](./partsassets)
+- 一种是通过 [`我的物料`] 组件物料管理模块的 `资产包构建` 进行构建, 具体操作如下：
-- 选择需要构建的组件
-- 点击构建资产包按钮
-- 选择刚刚的物料描述配置
-- 开始构建，构建完成后你将得到一份 json 文件（里面包含了物料描述和 umd 包），就可以到项目中使用了
-
-
+ - 选择需要构建的组件
+ - 点击构建资产包按钮
+ - 选择刚刚的物料描述配置
+ - 开始构建，构建完成后你将得到一份 json 文件（里面包含了物料描述和 umd 包），就可以到项目中使用了
#### 资产包使用
+详情请参考 [资产包管理](./partsassets#使用资产包)
-**方式一、在 **[**lowcode-demo**](https://github.com/alibaba/lowcode-demo)**中直接引用，可直接替换 demo 中原来的资产包文件：**
-
-例如，在 basic-fusion demo 中，直接用你的资产包文件替换文件[assets.json](https://github.com/alibaba/lowcode-demo/blob/main/demo-basic-fusion/src/services/assets.json)，即可快速使用自己的物料了。
-
-**方式二、将新的资产包内容和现有的资产包内容融合：**
-
-将上面构建完成的资产包与你项目中的[assets.json 文件](https://github.com/alibaba/lowcode-demo/blob/main/demo-basic-fusion/src/services/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 9dc75ce656..962c913e7e 100644
--- a/docs/docs/guide/expand/editor/pluginContextMenu.md
+++ b/docs/docs/guide/expand/editor/pluginContextMenu.md
@@ -2,7 +2,9 @@
title: 插件扩展 - 编排扩展
sidebar_position: 6
---
+
## 场景一：扩展选中节点操作项
+
### 增加节点操作项
@@ -10,27 +12,27 @@ sidebar_position: 6
```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: **对于 Window 环境来说，之后所有需要执行命令的操作都是在 WSL 终端执行的。** + ### Node + node 版本推荐 16.18.0。 #### 查看 Node 版本 +  #### 通过 n 来管理 node 版本 + 可以安装 [n](https://www.npmjs.com/package/n) 来管理和变更 node 版本。 ##### 安装 n + ```bash npm install -g n ``` ##### 变更 node 版本 + ```bash n 14.17.0 ``` ### React + 低代码引擎的扩展能力都是基于 React 来研发的，在继续阅读之前最好有一定的 React 基础，React 学习教程 ➡️ [React 快速开始教程](https://zh-hans.reactjs.org/docs/getting-started.html)。 ### 下载 Demo -可以前往 github（https://github.com/alibaba/lowcode-demo）将 DEMO 下载到本地。 + +可以前往 github（
API 是组件的属性解释，给开发者作为组件属性配置的参考。为了保持 API 的一致性，我们制定这个 API 命名规范。对于业界通用的，约定俗成的命名，我们遵循社区的约定。对于业界有多种规则难以确定的，我们确定其中一种，大家共同遵守。
-#### 通用规则
+##### 通用规则
- 所有的 API 采用小驼峰的书写规则，如 `onChange`、`direction`、`defaultVisible`。
- 标签名采用大驼峰书写规则，如 `Menu`、`Slider`、`DatePicker`。
-#### 通用命名
+##### 通用命名
| API 名称 | 类型 | 描述 | 常见变量 |
| :------------- | :------------- | :----------------------------------------------------------- | :---------------------------------------------------- |
@@ -262,7 +261,7 @@ API 是组件的属性解释，给开发者作为组件属性配置的参考。
| has+'属性' | boolean | 拥有某个属性 | 例如 `hasArrow`， `hasHeader`， `hasClose` 等等 |
-#### 多选枚举
+##### 多选枚举
当某个 API 的接口，允许用户指定多个枚举值的时候，我们把这个接口定义为多选枚举。一个很典型的例子是某个弹层组件的 `closable` 属性，我们会允许：键盘 esc 按键、点击 mask、点击 close 按钮、点击组件以外的任何区域进行关闭。
@@ -281,11 +280,11 @@ true 表示触发规则都会关闭，false 表示触发规则不会关闭。
- ``，任何情况下都不关闭，只能通过受控设置 visible
- ``，用户按 esc 或者点击关闭按钮会关闭
-#### 事件
+##### 事件
- 标准事件或者自定义的符合 w3c 标准的事件，命名必须 on 开头， 即 `on` + 事件名，如 onExpand。
-#### 表单规范
+##### 表单规范
- 支持[受控模式](https://reactjs.org/docs/forms.html#controlled-components)(value + onChange) （A)
- value 控制组件数据展现
@@ -293,7 +292,7 @@ true 表示触发规则都会关闭，false 表示触发规则不会关闭。
- `value={undefined}`的时候清空数据，field 的 reset 函数会给所有组件下发 undefined 数据 (AA))
- 一次完整操作抛一次 onChange 事件 `建议` 比如有 Process 表示进展中的状态，建议增加 API `onProcess`；如果有 Start 表示启动状态，建议增加 API `onStart` (AA)
-#### 属性的传递
+##### 属性的传递
**1. 原子组件（Atomic Component）**
> 最小粒子，不能再拆分的组件
@@ -355,7 +354,7 @@ $ iceworks sync
文件命名采取 [bcp47](https://tools.ietf.org/html/bcp47) 规范
-#### 目录规范
+##### 目录规范
在 `src` 目录新增 `locale` 目录用于管理不同语言的文案。
@@ -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
/* 如果需要引入主题变量引入此段 */
@@ -504,7 +503,7 @@ api 属性标准参考 [https://fusion.design/help.html#/dev-biz](https://fusio
无障碍需要符合 [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` 和传参数，如下：
@@ -834,11 +833,12 @@ props 数组下对象字段描述：
| name | 属性名 | String | type = 'field' 生效 |
| defaultValue | 默认值 | Any(视字段类型而定) | type = 'field' 生效 |
| supportVariable | 是否支持配置变量 | Boolean | type = 'field' 生效 |
-| condition | 配置当前 prop 是否展示 | (target: SettingTarget) => boolean; | - |
+| 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) 。
@@ -923,21 +923,21 @@ props 数组下对象字段描述：
| 字段 | 用途 | 类型 | 备注 |
| ------------------------------- | --------------------------------------------------------------------------------------------------- | ------- | --- |
-|initialChildren | 组件拖入“设计器”时根据此配置自动生成 children 节点 schema |NodeData[]/Function NodeData[] | ((target: SettingTarget) => NodeData[]);|
+|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.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.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;
+|callbacks.onChildMoveHook| 容器节点的子节点被拖动回调 | Function| (childNode: any, currentNode: any) => boolean;
描述举例：
@@ -1099,7 +1099,7 @@ export interface Advanced {
/**
* 拖入容器时，自动带入 children 列表
*/
- initialChildren?: NodeData[] | ((target: SettingTarget) => NodeData[]);
+ initialChildren?: NodeData[] | ((target: IPublicModelSettingField) => NodeData[]);
/**
* @todo 待补充文档
*/
@@ -1544,7 +1544,7 @@ block/
```
-#### 入口文件
+##### 入口文件
(/src/index.jsx)
@@ -1560,7 +1560,7 @@ 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 e0c6dd01f4..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,
});
@@ -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 (
+