Compare commits

..

11 Commits

Author SHA1 Message Date
Jack Lian
ca3b6d084f chore(release): publish 1.1.9-beta.3 2023-07-12 18:46:55 +08:00
liujuping
61afbcab77 feat: add config.workspaceEmptyComponent 2023-07-12 18:28:39 +08:00
JackLian
3e5ae7024d chore(release): publish 1.1.9-beta.2 2023-07-12 11:42:58 +08:00
AndyJin
a3ab0e4b24 fix: the action of history would not update outline tree 2023-07-12 11:40:37 +08:00
JackLian
7bde669510 chore(release): publish 1.1.9-beta.1 2023-07-11 17:33:53 +08:00
liujuping
bf7b0b3877 feat: add new cache from diff origin component 2023-07-11 17:31:51 +08:00
橙林
60545d1c7f chore(code-gen): template sync icejs 2023-07-11 17:31:51 +08:00
橙林
a3e014dced chore(code-gen): icejs、icejs3 solutions plugins.components add containerInjectConstants 2023-07-11 17:31:50 +08:00
橙林
d428ca3b18 chore(code-gen): replace deprecated api 2023-07-11 17:31:50 +08:00
JackLian
fbcb14b426 chore(docs): publish 1.0.33 2023-07-11 17:31:50 +08:00
JackLian
61fe7a7916 chore(release): publish 1.1.9-beta.0 2023-07-10 16:47:24 +08:00
454 changed files with 5706 additions and 10194 deletions

4
.github/CODEOWNERS vendored
View File

@ -2,7 +2,7 @@
# These owners will be the default owners for everything in
# the repo. Unless a later match takes precedence
* @liujuping @1ncounter
* @liujuping @JackLian
/modules/material-parser @akirakai
/modules/code-generator @qingniaotonghua
/modules/code-generator @leoyuan

View File

@ -1,34 +0,0 @@
name: Pre Build
on:
push:
paths:
- 'packages/**'
- '!packages/**.md'
pull_request:
paths:
- 'packages/**'
- '!packages/**.md'
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v2
- name: Install dependencies and setup
run: npm install && npm run setup
- name: Build
run: npm run build
- name: Check build status
run: |
if [ $? -eq 0 ]; then
echo "Build succeeded!"
else
echo "Build failed!"
exit 1
fi

View File

@ -1,53 +0,0 @@
name: Update and Publish Docs
on:
push:
branches:
- develop
paths:
- 'docs/docs/**'
workflow_dispatch:
jobs:
publish-docs:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Setup Node.js
uses: actions/setup-node@v2
with:
ref: 'develop'
node-version: '16'
registry-url: 'https://registry.npmjs.org'
- run: cd docs && npm install
- run: |
cd docs
npm version patch
git config --local user.email "action@github.com"
git config --local user.name "GitHub Action"
git add package.json
git commit -m "chore(docs): publish documentation"
git push
- run: cd docs && npm run build && npm publish
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
- name: Get version
id: get_version
run: echo "version=$(node -p "require('./docs/package.json').version")" >> $GITHUB_OUTPUT
comment-pr:
needs: publish-docs
runs-on: ubuntu-latest
steps:
- name: Comment on PR
if: github.event_name == 'pull_request' && github.event.action == 'closed' && github.event.pull_request.merged == true
uses: actions/github-script@v4
with:
github-token: ${{ secrets.GITHUB_TOKEN }}
script: |
github.issues.createComment({
issue_number: context.issue.number,
owner: context.repo.owner,
repo: context.repo.repo,
body: '🚀 New version has been released: ' + '${{ needs.publish-docs.outputs.version }}'
})

View File

@ -1,30 +0,0 @@
name: Publish Engine Beta
on:
push:
branches:
- 'release/[0-9]+.[0-9]+.[0-9]+-beta'
paths:
- 'packages/**'
jobs:
publish-engine:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Setup Node.js
uses: actions/setup-node@v2
with:
node-version: '14'
registry-url: 'https://registry.npmjs.org'
- run: npm install && npm run setup
- run: |
npm run build
git config --local user.email "action@github.com"
git config --local user.name "GitHub Action"
- run: npm run pub:prerelease
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
- name: Get version
id: get_version
run: echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT

View File

@ -1,33 +0,0 @@
name: Publish Engine
on:
workflow_dispatch:
inputs:
publishCommand:
description: 'publish command'
required: true
jobs:
publish-engine:
runs-on: ubuntu-latest
if: >-
contains(github.ref, 'refs/heads/release/') &&
(github.actor == '1ncounter' || github.actor == 'liujuping')
steps:
- uses: actions/checkout@v2
- name: Setup Node.js
uses: actions/setup-node@v2
with:
node-version: '16'
registry-url: 'https://registry.npmjs.org'
- run: npm install && npm run setup
- run: |
npm run build
git config --local user.email "action@github.com"
git config --local user.name "GitHub Action"
- run: npm run ${{ github.event.inputs.publishCommand }}
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
- name: Get version
id: get_version
run: echo "version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT

View File

@ -106,35 +106,3 @@ jobs:
- name: test
run: cd packages/utils && npm test
test-editor-core:
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: '14'
- name: install
run: npm i && npm run setup:skip-build
- name: test
run: cd packages/editor-core && npm test
test-plugin-command:
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: '14'
- name: install
run: npm i && npm run setup:skip-build
- name: test
run: cd packages/plugin-command && npm test

2
.gitignore vendored
View File

@ -108,5 +108,3 @@ typings/
# codealike
codealike.json
.node
.must.config.js

View File

@ -39,12 +39,6 @@ module.exports = {
position: 'left',
label: '文章',
},
{
type: 'doc',
docId: 'video/index',
position: 'left',
label: '视频',
},
{
type: 'doc',
docId: 'demoUsage/intro',

View File

@ -64,11 +64,6 @@ module.exports = {
href: 'https://github.com/alibaba/lowcode-engine/releases',
},
...getDocsFromDir('guide/appendix'),
{
type: 'category',
label: '预置设置器详情',
items: getDocsFromDir('guide/appendix/setterDetails'),
},
],
},
{

View File

@ -1,6 +1,6 @@
---
title: canvas - 画布 API
sidebar_position: 10
sidebar_position: 12
---
> **@types** [IPublicApiCanvas](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/canvas.ts)<br/>

View File

@ -1,101 +0,0 @@
---
title: command - 指令 API
sidebar_position: 10
---
## 模块概览
该模块使得与命令系统的交互成为可能,提供了一种全面的方式来处理、执行和管理应用程序中的命令。
## 接口
### IPublicApiCommand
与命令交互的接口。它提供了注册、注销、执行和管理命令的方法。
## 方法
### registerCommand
注册一个新命令及其处理函数。
```
typescriptCopy code
/**
* 注册一个新的命令及其处理程序。
* @param command {IPublicTypeCommand} - 要注册的命令。
*/
registerCommand(command: IPublicTypeCommand): void;
```
### unregisterCommand
注销一个已存在的命令。
```
typescriptCopy code
/**
* 注销一个已存在的命令。
* @param name {string} - 要注销的命令的名称。
*/
unregisterCommand(name: string): void;
```
### executeCommand
根据名称和提供的参数执行命令,确保参数符合命令的定义。
```
typescriptCopy code
/**
* 根据名称和提供的参数执行命令。
* @param name {string} - 要执行的命令的名称。
* @param args {IPublicTypeCommandHandlerArgs} - 命令的参数。
*/
executeCommand(name: string, args?: IPublicTypeCommandHandlerArgs): void;
```
### batchExecuteCommand
批量执行命令,在所有命令执行后进行重绘,历史记录中只记录一次。
```
typescriptCopy code
/**
* 批量执行命令,随后进行重绘,历史记录中只记录一次。
* @param commands {Array} - 命令对象的数组,包含名称和可选参数。
*/
batchExecuteCommand(commands: { name: string; args?: IPublicTypeCommandHandlerArgs }[]): void;
```
### listCommands
列出所有已注册的命令。
```
typescriptCopy code
/**
* 列出所有已注册的命令。
* @returns {IPublicTypeListCommand[]} - 已注册命令的数组。
*/
listCommands(): IPublicTypeListCommand[];
```
### onCommandError
为命令执行过程中的错误注册错误处理回调函数。
```
typescriptCopy code
/**
* 为命令执行过程中的错误注册一个回调函数。
* @param callback {(name: string, error: Error) => void} - 错误处理的回调函数。
*/
onCommandError(callback: (name: string, error: Error) => void): void;
```

View File

@ -1,6 +1,6 @@
---
title: common - 通用 API
sidebar_position: 10
sidebar_position: 11
---
> **@types** [IPublicApiCommon](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/common.ts)<br/>
@ -82,7 +82,7 @@ executeTransaction(fn: () => void, type: IPublicEnumTransitionType): void;
```
**@since v1.0.16**
**示例**
##### 示例
```typescript
import { common } from '@alilc/lowcode-engine';
import { IPublicEnumTransitionType } from '@alilc/lowcode-types';
@ -132,8 +132,7 @@ createIntl(instance: string | object): {
**@since v1.0.17**
**示例**
##### 示例
```typescript
import { common } from '@alilc/lowcode-engine';
import enUS from './en-US.json';
@ -146,22 +145,6 @@ const { intl, getLocale, setLocale } = common.utils.createIntl({
```
#### intl
i18n 转换方法
```typescript
/**
* i18n 转换方法
*/
intl(data: IPublicTypeI18nData | string, params?: object): string;
```
**示例**
```
const title = common.utils.intl(node.title)
```
### skeletonCabin
#### Workbench
编辑器框架 View

View File

@ -1,210 +0,0 @@
---
title: commonUI - UI 组件库
sidebar_position: 10
---
## 简介
CommonUI API 是一个专为低代码引擎设计的组件 UI 库,使用它开发的插件,可以保证在不同项目和主题切换中能够保持一致性和兼容性。
## 组件列表
### Tip
提示组件
| 参数 | 说明 | 类型 | 默认值 |
|-----------|--------------|---------------------------------------|--------|
| className | className | string (optional) | |
| children | tip 的内容 | IPublicTypeI18nData \| ReactNode | |
| direction | tip 的方向 | 'top' \| 'bottom' \| 'left' \| 'right' | |
### HelpTip
带 help icon 的提示组件
| 参数 | 说明 | 类型 | 默认值 |
|-----------|--------|-----------------------------------|--------|
| help | 描述 | IPublicTypeHelpTipConfig | |
| direction | 方向 | IPublicTypeTipConfig['direction'] | 'top' |
| size | 方向 | IconProps['size'] | 'small'|
### Title
标题组件
| 参数 | 说明 | 类型 | 默认值 |
|-----------|------------|-----------------------------|--------|
| title | 标题内容 | IPublicTypeTitleContent | |
| className | className | string (optional) | |
| onClick | 点击事件 | () => void (optional) | |
### ContextMenu
| 参数 | 说明 | 类型 | 默认值 |
|--------|----------------------------------------------------|------------------------------------|--------|
| menus | 定义上下文菜单的动作数组 | IPublicTypeContextMenuAction[] | |
| children | 组件的子元素 | React.ReactElement[] | |
**IPublicTypeContextMenuAction Interface**
| 参数 | 说明 | 类型 | 默认值 |
|------------|--------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|----------------------------------------|
| name | 动作的唯一标识符<br/>Unique identifier for the action | string | |
| title | 显示的标题,可以是字符串或国际化数据<br/>Display title, can be a string or internationalized data | string \| IPublicTypeI18nData (optional) | |
| type | 菜单项类型<br/>Menu item type | IPublicEnumContextMenuType (optional) | IPublicEnumContextMenuType.MENU_ITEM |
| action | 点击时执行的动作,可选<br/>Action to execute on click, optional | (nodes: IPublicModelNode[]) => void (optional) | |
| items | 子菜单项或生成子节点的函数,可选,仅支持两级<br/>Sub-menu items or function to generate child node, optional | Omit<IPublicTypeContextMenuAction, 'items'>[] \| ((nodes: IPublicModelNode[]) => Omit<IPublicTypeContextMenuAction, 'items'>[]) (optional) | |
| condition | 显示条件函数<br/>Function to determine display condition | (nodes: IPublicModelNode[]) => boolean (optional) | |
| disabled | 禁用条件函数,可选<br/>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 (
<div>
<ContextMenu menus={menuItems}>
<div>右键点击这里</div>
</ContextMenu>
</div>
);
};
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 (
<div>
<div onClick={(e) => {
ContextMenu.create(menuItems, e);
}}>点击这里</div>
</div>
);
};
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 给我们。

View File

@ -1,6 +1,6 @@
---
title: config - 配置 API
sidebar_position: 5
sidebar_position: 8
---
> **@types** [IPublicModelEngineConfig](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/engine-config.ts)<br/>
@ -24,7 +24,7 @@ sidebar_position: 5
*/
get(key: string, defaultValue?: any): any;
```
**示例**
#### 示例
```typescript
import { config } from '@alilc/lowcode-engine';
@ -43,7 +43,7 @@ config.get('keyB', { a: 1 });
*/
set(key: string, value: any): void;
```
**示例**
#### 示例
```typescript
import { config } from '@alilc/lowcode-engine';
@ -63,7 +63,7 @@ config.set('keyC', 1);
has(key: string): boolean;
```
**示例**
#### 示例
```typescript
import { config } from '@alilc/lowcode-engine';
@ -81,7 +81,7 @@ config.has('keyD');
*/
setConfig(config: { [key: string]: any }): void;
```
**示例**
#### 示例
```typescript
import { config } from '@alilc/lowcode-engine';
@ -134,7 +134,7 @@ config.getPreference().set(`${panelName}-pinned-status-isFloat`, false, 'skeleto
*/
onceGot(key: string): Promise<any>;
```
**示例**
#### 示例
```typescript
import { config } from '@alilc/lowcode-engine';
@ -160,7 +160,7 @@ const value = await config.onceGot('keyA');
*/
onGot(key: string, fn: (data: any) => void): () => void;
```
**示例**
#### 示例
```typescript
import { config } from '@alilc/lowcode-engine';

View File

@ -1,306 +0,0 @@
---
title: config options - 配置列表
sidebar_position: 5
---
> **@types** [IPublicTypeEngineOptions](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/engine-options.ts)<br/>
## 配置方式
#### 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

View File

@ -1,6 +1,6 @@
---
title: event - 事件 API
sidebar_position: 10
sidebar_position: 7
---
> **@types** [IPublicApiEvent](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/event.ts)<br/>
@ -25,19 +25,6 @@ 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
取消监听事件

View File

@ -1,6 +1,6 @@
---
title: hotkey - 快捷键 API
sidebar_position: 10
sidebar_position: 5
---
> **@types** [IPublicApiHotkey](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/hotkey.ts)<br/>

View File

@ -1,6 +1,6 @@
---
title: init - 初始化 API
sidebar_position: 0
sidebar_position: 10
---
> **@since** v1.0.0
@ -17,7 +17,97 @@ sidebar_position: 0
function init(container?: Element, options?: IPublicTypeEngineOptions): void
```
[**初始化引擎配置参数列表**](./configOptions)
**初始化引擎的参数**
```typescript
interface IPublicTypeEngineOptions {
/**
* 指定初始化的 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;
/**
* @default false
* >= 1.0.14
* 当开启组件未找到严格模式时,渲染模块不会默认给一个容器组件
*/
enableStrictNotFoundMode?: boolean;
/**
* 配置指定节点为根组件
* >= 1.0.15
*/
focusNodeSelector?: (rootNode: Node) => Node;
/**
* 工具类扩展
*/
appHelper?: {
utils?: {};
}
[key: string]: any;
}
```
> 源码详见 [IPublicTypeEngineOptions](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/engine-options.ts)
## 使用示例
@ -28,7 +118,7 @@ init(document.getElementById('engine'), {
enableCondition: false,
});
```
###
### 默认打开移动端画布
```typescript
import { init } from '@alilc/lowcode-engine';

View File

@ -1,6 +1,6 @@
---
title: logger - 日志 API
sidebar_position: 10
sidebar_position: 9
---
> **@types** [IPublicApiLogger](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/logger.ts)<br/>

View File

@ -1,6 +1,6 @@
---
title: material - 物料 API
sidebar_position: 10
sidebar_position: 2
---
> **@types** [IPublicApiMaterial](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/material.ts)<br/>
@ -39,7 +39,7 @@ setAssets(assets: IPublicTypeAssetsJson): void;
相关类型:[IPublicTypeAssetsJson](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/assets-json.ts)
**示例**
##### 示例
直接在项目中引用 npm 包
```javascript
import { material } from '@alilc/lowcode-engine';
@ -85,7 +85,7 @@ getAssets(): IPublicTypeAssetsJson;
相关类型:[IPublicTypeAssetsJson](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/assets-json.ts)
**示例**
##### 示例
```typescript
import { material } from '@alilc/lowcode-engine';
@ -106,7 +106,7 @@ loadIncrementalAssets(incrementalAssets: IPublicTypeAssetsJson): Promise<void>;
```
相关类型:[IPublicTypeAssetsJson](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/assets-json.ts)
**示例**
##### 示例
```typescript
import { material } from '@alilc/lowcode-engine';
import assets1 from '@alilc/mc-assets-<siteId>/assets.json';
@ -116,21 +116,6 @@ material.setAssets(assets1);
material.loadIncrementalAssets(assets2);
```
更新特定物料的描述文件
```typescript
import { material } from '@alilc/lowcode-engine';
material.loadIncrementalAssets({
version: '',
components: [
{
"componentName": 'Button',
"props": [{ name: 'new', title: 'new', propType: 'string' }]
}
],
})
```
### 设计器辅助层
#### addBuiltinComponentAction
在设计器辅助层增加一个扩展 action
@ -146,7 +131,7 @@ addBuiltinComponentAction(action: IPublicTypeComponentAction): void;
相关类型:[IPublicTypeComponentAction](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/component-action.ts)
**示例**
##### 示例
新增设计扩展位,并绑定事件
```typescript
import { material } from '@alilc/lowcode-engine';
@ -186,7 +171,7 @@ removeBuiltinComponentAction(name: string): void;
- lock锁定不可编辑
- unlock解锁可编辑
**示例**
##### 示例
```typescript
import { material } from '@alilc/lowcode-engine';
@ -222,7 +207,7 @@ modifyBuiltinComponentAction(
**示例**
##### 示例
给原始的 remove 扩展时间添加执行前后的日志
```typescript
import { material } from '@alilc/lowcode-engine';
@ -237,90 +222,7 @@ material.modifyBuiltinComponentAction('remove', (action) => {
});
```
### 右键菜单项
#### addContextMenuOption
添加右键菜单项
```typescript
/**
* 添加右键菜单项
* @param action
*/
addContextMenuOption(action: IPublicTypeContextMenuAction): void;
```
示例
```typescript
import { IPublicEnumContextMenuType } from '@alilc/lowcode-types';
material.addContextMenuOption({
name: 'parentItem',
title: 'Parent Item',
condition: (nodes) => true,
items: [
{
name: 'childItem1',
title: 'Child Item 1',
action: (nodes) => console.log('Child Item 1 clicked', nodes),
condition: (nodes) => true
},
// 分割线
{
type: IPublicEnumContextMenuType.SEPARATOR
name: 'separator.1'
}
// 更多子菜单项...
]
});
```
#### removeContextMenuOption
删除特定右键菜单项
```typescript
/**
* 删除特定右键菜单项
* @param name
*/
removeContextMenuOption(name: string): void;
```
#### adjustContextMenuLayout
调整右键菜单项布局,每次调用都会覆盖之前注册的调整函数,只有最后注册的函数会被应用。
```typescript
/**
* 调整右键菜单项布局
* @param actions
*/
adjustContextMenuLayout(fn: (actions: IPublicTypeContextMenuItem[]) => IPublicTypeContextMenuItem[]): void;
```
**示例**
通过 adjustContextMenuLayout 补充分割线
```typescript
material.adjustContextMenuLayout((actions: IPublicTypeContextMenuAction) => {
const names = ['a', 'b'];
const newActions = [];
actions.forEach(d => {
newActions.push(d);
if (names.include(d.name)) {
newActions.push({ type: 'separator' })
}
});
return newActions
})
```
### 物料元数据
#### getComponentMeta
获取指定名称的物料元数据
@ -335,7 +237,7 @@ getComponentMeta(componentName: string): IPublicModelComponentMeta | null;
```
相关类型:[IPublicModelComponentMeta](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/component-meta.ts)
**示例**
##### 示例
```typescript
import { material } from '@alilc/lowcode-engine';
@ -356,7 +258,7 @@ material.getComponentMeta('Input');
```
相关类型:[IPublicModelComponentMeta](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/component-meta.ts)
**示例**
##### 示例
```typescript
import { material } from '@alilc/lowcode-engine';
@ -393,7 +295,7 @@ registerMetadataTransducer(
): void;
```
**示例**
##### 示例
给每一个组件的配置添加高级配置面板,其中有一个是否渲染配置项
```typescript
import { material } from '@alilc/lowcode-engine'
@ -438,31 +340,6 @@ function addonCombine(metadata: TransformedComponentMetadata) {
material.registerMetadataTransducer(addonCombine, 1, 'parse-func');
```
删除高级 Tab
```typescript
import { material } from '@alilc/lowcode-engine';
import { IPublicTypeFieldConfig } from '@alilc/lowcode-types';
material.registerMetadataTransducer((transducer) => {
const combined: IPublicTypeFieldConfig[] = [];
transducer.configure.combined?.forEach(d => {
if (d.name !== '#advanced') {
combined.push(d);
}
});
return {
...transducer,
configure: {
...transducer.configure,
combined,
}
};
}, 111, 'parse-func');
```
#### getRegisteredMetadataTransducers
获取所有物料元数据管道函数
@ -475,7 +352,7 @@ material.registerMetadataTransducer((transducer) => {
getRegisteredMetadataTransducers(): IPublicTypeMetadataTransducer[];
```
**示例**
##### 示例
```typescript
import { material } from '@alilc/lowcode-engine'
@ -496,7 +373,7 @@ onChangeAssets(fn: () => void): IPublicTypeDisposable;
相关类型:[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
**示例**
##### 示例
```typescript
import { material } from '@alilc/lowcode-engine';

View File

@ -1,6 +1,6 @@
{
"label": "模型定义 Models",
"position": 100,
"position": 14,
"collapsed": false,
"collapsible": true
}

View File

@ -101,7 +101,7 @@ from(shell: Element, boost: (e: MouseEvent) => IPublicTypeDragNodeDataObject | n
* @param dragObject 拖拽对象
* @param boostEvent 拖拽初始时事件
*/
boost(dragObject: IPublicTypeDragObject, boostEvent: MouseEvent | DragEvent, fromRglNode?: IPublicModelNode): void;
boost(dragObject: IPublicTypeDragObject, boostEvent: MouseEvent | DragEvent, fromRglNode?: Node | IPublicModelNode): void;
```
### addSensor

View File

@ -71,7 +71,7 @@ hideModalNodes(): void;
/**
* 设置指定节点为可见态
* set specific model node as visible
* @param node IPublicModelNode
* @param node Node
*/
setVisible(node: IPublicModelNode): void;
```
@ -86,7 +86,7 @@ setVisible(node: IPublicModelNode): void;
/**
* 设置指定节点为不可见态
* set specific model node as invisible
* @param node IPublicModelNode
* @param node Node
*/
setInvisible(node: IPublicModelNode): void;
```

View File

@ -658,21 +658,3 @@ setConditionalVisible(): void;
getDOMNode(): HTMLElement;
```
### getRGL
获取磁贴相关信息
```typescript
/**
* 获取磁贴相关信息
*/
getRGL(): {
isContainerNode: boolean;
isEmptyNode: boolean;
isRGLContainerNode: boolean;
isRGLNode: boolean;
isRGL: boolean;
rglNode: IPublicModelNode | null;
}
```

View File

@ -15,12 +15,6 @@ sidebar_position: 13
`@type {string}`
### id
资源 id
`@type {string}`
### name
资源名字
@ -50,9 +44,3 @@ sidebar_position: 13
资源配置信息
`@type {Object}`
### config
资源配置信息
`@type {Object}`

View File

@ -1,38 +0,0 @@
---
title: SimulatorRender
sidebar_position: 6
---
> **@types** [IPublicModelSimulatorRender](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/simulator-render.ts)<br/>
> **@since** v1.0.0
## 基本介绍
画布节点选中模型
## 属性
### components
画布组件列表
```typescript
/**
* 画布组件列表
*/
components: {
[key: string]: any;
}
```
## 方法
### rerender
触发画布重新渲染
```typescript
/**
* 触发画布重新渲染
*/
rerender: () => void;
```

View File

@ -1,6 +1,6 @@
---
title: plugins - 插件 API
sidebar_position: 2
sidebar_position: 4
---
> **@types** [IPublicApiPlugins](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/plugins.ts)<br/>
> **@since** v1.0.0

View File

@ -1,6 +1,6 @@
---
title: project - 模型 API
sidebar_position: 10
sidebar_position: 3
---
## 模块简介
@ -201,7 +201,7 @@ addPropsTransducer(
- [IPublicTypePropsTransducer](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/props-transducer.ts)
- [IPublicEnumTransformStage](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/enum/transform-stage.ts)
**示例**
#### 示例
在保存的时候删除每一个组件的 props.hidden
```typescript
import { project } from '@alilc/lowcode-engine';

View File

@ -1,6 +1,6 @@
---
title: setters - 设置器 API
sidebar_position: 10
sidebar_position: 6
---
> **@types** [IPublicApiSetters](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/setters.ts)<br/>
> **@since** v1.0.0

View File

@ -1,6 +1,6 @@
---
title: simulatorHost - 模拟器 API
sidebar_position: 10
sidebar_position: 3
---
> **@types** [IPublicApiSimulatorHost](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/simulator-host.ts)<br/>
> **@since** v1.0.0
@ -20,7 +20,7 @@ sidebar_position: 10
*/
set(key: string, value: any): void;
```
**示例**
#### 示例
设置若干用于画布渲染的变量比如画布大小、locale 等。
以设置画布大小为例:
@ -50,11 +50,11 @@ get(key: string): any;
```
### rerender
触发组件构建,并刷新渲染画布
刷新渲染画布
```typescript
/**
* 触发组件构建,并刷新渲染画布
* 刷新渲染画布
* make simulator render again
*/
rerender(): void;

View File

@ -1,6 +1,6 @@
---
title: skeleton - 面板 API
sidebar_position: 10
sidebar_position: 1
---
> **@types** [IPublicApiSkeleton](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/api/skeleton.ts)<br/>
> **@since** v1.0.0
@ -69,7 +69,6 @@ skeleton.add({
props: {
align: "left",
icon: "wenjian",
title: '标题', // 图标下方展示的标题
description: "JS 面板",
},
panelProps: {
@ -179,21 +178,6 @@ IWidgetBaseConfig 定义如下:
remove(config: IPublicTypeWidgetBaseConfig): number | undefined;
```
### getPanel
获取面板实例
```typescript
/**
* 获取面板实例
* @param name 面板名称
*/
getPanel(name: string): IPublicModelSkeletonItem | undefined;
```
相关类型:[IPublicModelSkeletonItem](https://github.com/alibaba/lowcode-engine/blob/main/packages/shell/src/model/skeleton-item.ts)
@since v1.1.10
### showPanel
@ -296,85 +280,6 @@ showArea(areaName: string): void;
*/
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
@ -387,7 +292,7 @@ export default controlPanelWidthPlugin;
* @param listener
* @returns
*/
onShowPanel(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) => void): IPublicTypeDisposable;
onShowPanel(listener: (...args: any[]) => void): IPublicTypeDisposable;
```
相关类型:[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
@ -403,38 +308,11 @@ onShowPanel(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) => v
* @param listener
* @returns
*/
onHidePanel(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) => void): IPublicTypeDisposable;
onHidePanel(listener: (...args: any[]) => 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)
### 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
@ -447,7 +325,7 @@ onEnableWidget(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) =
* @param listener
* @returns
*/
onShowWidget(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) => void): IPublicTypeDisposable;
onShowWidget(listener: (...args: any[]) => void): IPublicTypeDisposable;
```
相关类型:[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
@ -463,7 +341,7 @@ onShowWidget(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) =>
* @param listener
* @returns
*/
onHideWidget(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) => void): IPublicTypeDisposable;
onHideWidget(listener: (...args: any[]) => void): IPublicTypeDisposable;
```
相关类型:[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)

View File

@ -1,6 +1,6 @@
---
title: workspace - 应用级 API
sidebar_position: 10
sidebar_position: 12
---
> **[@experimental](./#experimental)**<br/>
@ -37,16 +37,6 @@ get plugins(): IPublicApiPlugins
关联模型 [IPublicApiPlugins](./plugins)
### skeleton
应用级别的面板管理
```typescript
get skeleton(): IPublicApiSkeleton
```
关联模型 [IPublicApiSkeleton](./skeleton)
### windows
当前设计器的编辑窗口
@ -87,21 +77,14 @@ registerResourceType(resourceTypeModel: IPublicTypeResourceType): void;
setResourceList(resourceList: IPublicResourceList) {}
```
相关类型:[IPublicResourceData](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/resource-list.ts)
相关类型:[IPublicResourceOptions](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/resource-options.ts)
### openEditorWindow
打开视图窗口
```typescript
/**
* 打开视图窗口
* @deprecated
*/
openEditorWindow(resourceName: string, id: string, extra: Object, viewName?: string, sleep?: boolean): Promise<void>;
/** 打开视图窗口 */
openEditorWindow(resource: Resource, sleep?: boolean): Promise<void>;
openEditorWindow(resourceName: string, title: string, options: Object, viewName?: string): void;
```
### openEditorWindowById
@ -117,16 +100,7 @@ openEditorWindowById(id: string): void;
移除视图窗口
```typescript
/**
* 移除视图窗口
* @deprecated
*/
removeEditorWindow(resourceName: string, id: string): void;
/**
* 移除视图窗口
*/
removeEditorWindow(resource: Resource): void;
removeEditorWindow(resourceName: string, title: string): void;
```
### removeEditorWindowById

View File

@ -1,15 +1,41 @@
# 官方文章
- [2023/11/09 UIPaaS | 基于 LowCodeEngine 的低代码平台孵化器](https://mp.weixin.qq.com/s/mKuv3_Wvgt5T3AGErUGBQQ)
---
title: 低代码引擎相关文章资料
---
## 官方文章
- [2023/04/04 什么?低代码引擎可以开发应用了](https://mp.weixin.qq.com/s/dwi40gJjGBHW9MVpag5Oxg)
- [2023/03/23 低代码引擎 LowCodeEngine 茁壮成长的一年](https://mp.weixin.qq.com/s/DDt4LQLFUBQ2-F5ehZGBKg)
- [2023/02/21 基于 LowCodeEngine 的低代码组件体系的建设和实践](https://mp.weixin.qq.com/s/rnvbGHImGt6oJuX2wCtaqw)
- [2022/12/21 低代码多分支协同开发的建设与实践](https://mp.weixin.qq.com/s/DmwxL67htHfTUP1U966N-Q)
- [2022/11/24 低代码引擎半岁啦,来跟大家唠唠嗑...](https://segmentfault.com/a/1190000042884409)
- [2022/10/27 低代码技术在研发团队的应用模式探讨](https://mp.weixin.qq.com/s/Ynk_wjJbmNw7fEG6UtGZbQ)
- [2022/08/23 基于 LowCodeEngine 的调试能力建设与实践](https://mp.weixin.qq.com/s/H8KvEOylmzLPgIuuBO0S9w)
- [2022/06/23 低代码渲染那些事](https://mp.weixin.qq.com/s/yqYey76qLGYPfDtpGkVFfA)
- [2022/06/16 关于 LowCode&ProCode 混合研发的思考](https://mp.weixin.qq.com/s/TY3VXjkSmsQoT47xma3wig)
- [2022/04/07 磁贴布局在钉钉宜搭报表设计引擎中的实现](https://mp.weixin.qq.com/s/PSTut5ahAB8nlJ9kBpBaxw)
- [2022/03/23 阿里低代码引擎 LowCodeEngine 正式开源!](https://mp.weixin.qq.com/s/T66LghtWLz2Oh048XqaniA)
- [2022/01/10 阿里低代码引擎和生态建设实战及思考](https://mp.weixin.qq.com/s/MI6MrUKKydtnSdO4xq6jwA)
- [2021/04/14 2B 领域下的低代码探索之路](https://mp.weixin.qq.com/s/HAxrMHLT43dPH488RiEIdw)
## Portal 设计项目实战
#### 直播回放
[https://www.bilibili.com/video/BV1AS4y1K7DP/](https://www.bilibili.com/video/BV1AS4y1K7DP/)
#### 示例项目
- 前端: [https://github.com/mark-ck/lowcode-portal](https://github.com/mark-ck/lowcode-portal)
- 后端: [https://github.com/mark-ck/document-solution-site](https://github.com/mark-ck/document-solution-site)
- 组件库:[https://github.com/mark-ck/portal-components](https://github.com/mark-ck/portal-components)
**注意**
1. 前端项目要把代码里请求接口的域名改成本地或者自己的域名;
2. 后端项目要把 config.default.js 里的 yuque 和 oss 配置补全;
#### 视频链接
- [阿里低代码引擎项目实战 (1)-引擎 demo 部署到 faas 服务](https://www.bilibili.com/video/BV1B44y1P7GM/)
- [【有翻车】阿里低代码引擎项目实战 (2)-保存页面到远端存储](https://www.bilibili.com/video/BV1AS4y1K7DP/)
- [阿里巴巴低代码引擎项目实战 (3)-自定义组件接入](https://www.bilibili.com/video/BV1dZ4y1m76S/)
- [阿里低代码引擎项目实战 (4)-自定义插件 - 页面管理](https://www.bilibili.com/video/BV17a411i73f/)
- [阿里低代码引擎项目实战 (4)-用户登录](https://www.bilibili.com/video/BV1Wu411e7EQ/)
- [【有翻车】阿里低代码引擎项目实战 (5)-表单回显](https://www.bilibili.com/video/BV1UY4y1v7D7/)
- [阿里低代码引擎项目实战 (6)-自定义插件 - 页面管理 - 后端](https://www.bilibili.com/video/BV1uZ4y1U7Ly/)
- [阿里低代码引擎项目实战 (6)-自定义插件 - 页面管理 - 前端](https://www.bilibili.com/video/BV1Yq4y1a74P/)
- [阿里低代码引擎项目实战 (7)-自定义插件 - 页面管理 (完结)](https://www.bilibili.com/video/BV13Y4y1e7EV/)

View File

@ -15,14 +15,3 @@ sidebar_position: 0
![image.png](https://img.alicdn.com/imgextra/i4/O1CN01XQfnYL1P4wxn01oXv_!!6000000001788-2-tps-3840-1896.png)
this.index 是当前循环的索引值。
3.在事件绑定函数中使用
在事件绑定函数中使用扩展参数设置
![image](https://github.com/alibaba/lowcode-engine/assets/11935995/7274506e-decd-497a-b07f-c95941a706b4)
绑定之后在函数中使用
![image](https://github.com/alibaba/lowcode-engine/assets/11935995/9d52ee5c-9959-4991-91be-9391e639bb7e)
按钮点击效果
![image](https://github.com/alibaba/lowcode-engine/assets/11935995/6ca590c9-1f5f-4d48-94a5-439130a22e92)

View File

@ -2,8 +2,6 @@
title: 3. 如何通过按钮展示/隐藏弹窗
sidebar_position: 1
---
> 说明:这个方式依赖低代码弹窗组件是否对外保留了相关的 API不同的物料支持的方式不一样这里只针对综合场景的弹窗物料。
## 1.拖拽一个按钮
![image.png](https://img.alicdn.com/imgextra/i1/O1CN01kLaWA31D6WwTui9VW_!!6000000000167-2-tps-3584-1812.png)

View File

@ -28,28 +28,6 @@ AliLowCodeEngine.project.simulator.renderer.components
```
看看对应的物料是否存在,如果不存在,排查物料问题。
如果不正常,查看资产包配置,其中资产包中的 `components``material.componentsMap` 生成有关系。
例如,物料配置信息在 @alilc/lowcode-materials 包里面,即需要在 components 中加上下面的代码
```javascript
"components": [{
"exportName": "AlilcLowcodeMaterialsMeta",
"npm": {
"package": "@alilc/lowcode-materials"
},
"url": "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.7/build/lowcode/meta.js",
"urls": {
"default": "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.7/build/lowcode/meta.js",
"design": "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.7/build/lowcode/meta.design.js"
}
}]
```
`material.componentsMap` 不存在相关的组件信息,原因有两个:
- 没有添加对应的物料到 components 字段中
- components 配置不正确,需要查看 url 是否正常加载,查看 exportName 是否配置正确,即 `window.${exportName}` 是否存在。
2.选中组件,在控制台中输入
```json
AliLowCodeEngine.project.currentDocument.selection.getNodes()[0].exportSchema('render')

View File

@ -10,28 +10,9 @@ tags: [FAQ]
## 处理方式
### 【推荐】升级到 Engine Verison 1.0.11 以上
### 新增 save propsReducer
通过新增 Save 态的 propsReducer将 hidden props 去掉。可以参考下面的代码:
```typescript
import { project } from '@alilc/lowcode-engine';
import { IPublicEnumTransformStage } from '@alilc/lowcode-types';
export const deleteHiddenTransducer = (ctx: any) => {
return {
name: 'deleteHiddenTransducer',
async init() {
project.addPropsTransducer((props: any): any => {
delete props.hidden;
return props;
}, IPublicEnumTransformStage.Save);
},
};
}
deleteHiddenTransducer.pluginName = 'deleteHiddenTransducer';
```
通过新增 Save 态的 propsReducer将 hidden props 去掉。
参考:
[https://github.com/alibaba/lowcode-demo/blob/main/src/sample-plugins/delete-hidden-transducer/index.ts](https://github.com/alibaba/lowcode-demo/blob/main/src/sample-plugins/delete-hidden-transducer/index.ts)
### 导出 schema 使用 Save 态
```typescript

View File

@ -1,31 +0,0 @@
---
title: Slot组件渲染报错问题
sidebar_position: 23
tags: [FAQ]
---
## 问题描述
在低代码引擎的页面渲染过程中可能会遇到一个关于Slot组件的报错提示“Slot找不到”。实际上在渲染态时不应使用Slot组件。
## 问题原因
低代码引擎渲染分为两个状态:设计态和渲染态。
- **设计态**为了帮助插槽进行可视化设计引入了Slot组件。
- **渲染态**在此状态下不需要使用Slot组件。
这个问题通常是因为在渲染态错误地使用了设计态的schema。
## 解决方案
1. **区分设计态和渲染态**:通过`project.exportSchema(TransformStage.Save)`的参数来区分。
- `TransformStage.Save`代表渲染态的schema其中不包含Slot组件。
- 【默认值】`TransformStage.Render`代表设计态的schema其中包含Slot组件。
2. **使用正确的API和参数**确保在渲染态使用正确的schema避免引用设计态的Slot组件。
3. **处理脏数据问题**:如果问题是由脏数据导致,清除数据并重新拖拽组件以恢复正常。
## 注意事项
- 确保在代码和配置中正确区分设计态和渲染态。
- 如果遇到持续的问题,检查是否有脏数据或配置错误,并进行相应的清理和调整。
## 相关链接
- Issue链接[Issue #1798](https://github.com/alibaba/lowcode-engine/issues/1798)
---

View File

@ -1,133 +0,0 @@
---
title: workspace 模式常见问题
sidebar_position: 23
tags: [FAQ]
---
#### 如何判断是否开启了IDE模式
- **通过官方API判断**:您可以通过访问 [workspace.isActive](/site/docs/api/workspace#isactive) 来判断当前是否处于IDE模式。这是阿里低代码引擎提供的一个官方API专门用于确认是否处于集成开发环境。
#### 如何使用插件的ctx来做判断在哪个模式下
- **插件是否为应用级别**:可以通过 **ctx.isPluginRegisteredInWorkspace** 方法来判断一个插件是否是应用级别的插件。这有助于理解插件在阿里低代码引擎中的作用域和潜在的使用场景。
- **插件的注册级别**:您可以使用 **ctx.registerLevel** 属性来判断插件处于哪个级别。插件级别的值包括:
- **Default**:默认级别。非 IDE 模式下的值
- **Workspace**:应用级别。
- **Resource**:资源级别。
- **EditorView**:编辑视图级别。 这些级别代表了插件可能的作用域和使用场景,有助于在开发和管理低代码应用时对插件进行更精确的控制和配置。
#### 如何在IDE模式下设置资源列表
- **设置资源列表API**在IDE模式下可以通过访问 [workspace.setResourceList](/site/docs/api/workspace#setresourcelist) 来设置或更新IDE中的资源列表。这确保您在编辑器窗口中打开的资源是最新且可访问的。
#### 如何打开视图窗口?
- **使用推荐的方法**:使用 `openEditorWindow(resource: Resource, sleep?: boolean): Promise<void>;` 来打开视图窗口。这里的 **resource** 参数指的是您要打开的特定资源,可通过 [workspace.resourceList](/site/docs/api/workspace#resourcelist) 获取。
- **不推荐使用的过时方法**:有一个过时的方法 `openEditorWindow(resourceName: string, id: string, extra: Object, viewName?: string, sleep?: boolean): Promise<void>;` 也用于打开视图窗口。虽然仍然可用,但官方不推荐使用此方法,并计划在后续版本中废弃,因为它在维护和可扩展性方面存在限制。
#### 如何在全局插件中获取视图的上下文?
- 在阿里低代码引擎的全局插件中获取视图的上下文,可以通过使用 **ProvideViewPluginContext** 函数实现。这个函数来自 **@alilc/lowcode-utils** 库,它使得您的 React 组件能够接收 **pluginContext** 作为 props进而访问和操作当前视图的状态和属性。
**步骤**
**引入依赖**:首先,确保您的插件文件中已经引入了 **ProvideViewPluginContext** 以及其他必要的依赖。
```
import { ProvideViewPluginContext } from '@alilc/lowcode-utils';
```
**定义 React 组件**:创建一个 React 组件,它将使用来自 **ProvideViewPluginContext****pluginContext**
```typescript
const MyComponent = (props) => {
const { pluginContext } = props;
// 组件逻辑
return <div>/* 组件内容 */</div>;
};
```
**定义全局插件**:定义一个函数,这个函数会在插件被注册时调用。这个函数通常接受一个上下文对象 **ctx**,它提供了对引擎功能的访问。
```javascript
const globalPlugin = (ctx) => {
const { skeleton } = ctx;
skeleton.add({
type: 'PanelDock',
name: 'datapool',
content: ProvideViewPluginContext((props) => {
// 组件内容
return (
<MyComponent {...props} />
)
}),
// 其他配置
contentProps: {
// 需要提供 pluginContext 作为参数
pluginContext: ctx,
}
});
};
```
通过这些步骤,您的全局插件中的 React 组件就能够获取并使用视图的上下文了。这为您在插件中实现更复杂的功能和交互提供了基础。
**注意事项**
- **组件重渲染**:正常情况下,**pluginsContext** 是视图的上下文。当视图切换时,组件会重新渲染。如果需要在组件中处理视图切换导致的重新渲染,可以利用 React 的 **key** 属性。
**示例代码**
```typescript
ProvideViewPluginContext(props => {
return (
<DataPoolPane
{...props}
key={props.pluginContext?.editorWindow?.id}
);
});
```
通过这种方式,当视图切换时,组件会根据视图的不同进行重新渲染,确保组件状态与当前视图的上下文保持一致。这对于在低代码平台上开发复杂插件和交互功能是非常有用的。
#### 如何判断插件是否在 Workspace 模式下注册?
**使用** **ctx.isPluginRegisteredInWorkspace()** **方法**:
通过 **ctx.isPluginRegisteredInWorkspace()** 方法,可以判断一个插件是否在 Workspace 级别注册。以下是一个示例代码片段:
```javascript
if (ctx.isPluginRegisteredInWorkspace('pluginName')) {
console.log('插件已在 Workspace 模式下注册。');
} else {
console.log('插件未在 Workspace 模式下注册。');
}
```
注意:此方法目前在 beta 版本中,可能会有 TypeScript 提示显示已移除。
**检查** **ctx.registerLevel** **的值**:
可以通过比较 **ctx.registerLevel** 的值来判断插件的注册级别。示例代码如下:
```javascript
if (ctx.registerLevel !== IPublicEnumPluginRegisterLevel.Workspace) {
console.log('插件未在 Workspace 模式下注册。');
} else {
console.log('插件已在 Workspace 模式下注册。');
}
```

View File

@ -1,47 +1,7 @@
---
title: FAQ 概述
sidebar_position: -1
sidebar_position: 1
tags: [FAQ]
---
不定期将社区常见问题及答案维护到此处
## Demo 使用
- [渲染唯一标识key](/site/docs/faq/faq002)
- [点击事件如何添加参数](/site/docs/faq/faq003)
- [如何通过 API 手动调用数据源请求](/site/docs/faq/faq006)
## 设计器定制
- [如何通过 this.utils 使用第三方工具扩展](/site/docs/faq/faq005)
- [设置面板中的高级 tab 如何配置](/site/docs/faq/faq007)
- [插件面板如何调整位置](/site/docs/faq/faq010)
- [workspace 模式常见问题](/site/docs/faq/faq024)
## 源码和依赖
- [某某 npm 包对应的源码在哪里?](/site/docs/faq/faq008)
## 错误和报错
- [物料出现 Component Not Found 相关报错](/site/docs/faq/faq009)
- [VERSION_PLACEHOLDER is not defined](/site/docs/faq/faq014)
- [Cannot read property 'Icon' of Undefined](/site/docs/faq/faq016)
- [windows 下运行低代码引擎源码出现报错](/site/docs/faq/faq019)
- [Can't import the named export from non ECMAScript module](/site/docs/faq/faq020)
- [Slot组件渲染报错问题](/site/docs/faq/faq023)
## 物料相关问题
- [如何获取物料当前处于编辑态还是渲染态](/site/docs/faq/faq011)
- [Procode 物料如何调用数据源方法](/site/docs/faq/faq012)
- [已有组件如何快速接入引擎](/site/docs/faq/faq015)
- [Modal 类组件 hidden 属性被强制设置 true](/site/docs/faq/faq013)
- [最小渲染单元配置](/site/docs/faq/faq004)
- [节点无法拖拽到 Page 下](/site/docs/faq/faq022)
## 其他说明
- [vue 画布支持说明](/site/docs/faq/faq017)
- [是否可以生成 Vue 页面代码?](/site/docs/faq/faq018)
## 参与贡献
- [提交 PR 时,明明签署过 CLA仍被提示需要签署](/site/docs/faq/faq021)
## 相关依赖文档
- [build-scripts 的使用文档](/site/docs/faq/faq001)

View File

@ -12,6 +12,8 @@ sidebar_position: 3
| @alilc/lowcode-engine | [https://github.com/alibaba/lowcode-engine](https://github.com/alibaba/lowcode-engine) | packages/engine |
| @alilc/lowcode-plugin-designer | [https://github.com/alibaba/lowcode-engine](https://github.com/alibaba/lowcode-engine) | packages/plugin-designer |
| @alilc/lowcode-plugin-outline-pane | [https://github.com/alibaba/lowcode-engine](https://github.com/alibaba/lowcode-engine) | packages/plugin-outline-pane |
| @alilc/lowcode-rax-renderer | [https://github.com/alibaba/lowcode-engine](https://github.com/alibaba/lowcode-engine) | packages/rax-renderer |
| @alilc/lowcode-rax-simulator-renderer | [https://github.com/alibaba/lowcode-engine](https://github.com/alibaba/lowcode-engine) | packages/rax-simulator-renderer |
| @alilc/lowcode-react-renderer | [https://github.com/alibaba/lowcode-engine](https://github.com/alibaba/lowcode-engine) | packages/react-renderer |
| @alilc/lowcode-react-simulator-renderer | [https://github.com/alibaba/lowcode-engine](https://github.com/alibaba/lowcode-engine) | packages/react-simulator-renderer |
| @alilc/lowcode-renderer-core | [https://github.com/alibaba/lowcode-engine](https://github.com/alibaba/lowcode-engine) | packages/renderer-core |

View File

@ -15,13 +15,15 @@ sidebar_position: 2
5. ignitor
6. plugin-designer
7. plugin-outline-pane
8. react-renderer
9. react-simulator-renderer
10. renderer-core
11. types
12. utils
13. material-parser
14. code-generator
8. rax-renderer
9. rax-simulator-renderer
10. react-renderer
11. react-simulator-renderer
12. renderer-core
13. types
14. utils
15. material-parser
16. code-generator
## 2. 引擎官方扩展包
包含了常用的设置器setter、跟 setter 绑定的插件等

View File

@ -105,6 +105,8 @@ sidebar_position: 0
### 初始化低代码编辑器
#### 方法 2.1 使用 init 进行初始化
正确引入后,我们可以直接通过 window 上的变量进行引用,如 `window.AliLowCodeEngine.init`。您可以直接通过此方式初始化低代码引擎:
```javascript
@ -142,5 +144,59 @@ init 的功能包括但不限于:
> 本节中的低代码编辑器例子可以在 demo 中找到:[https://github.com/alibaba/lowcode-demo/blob/main/demo-general/src/index.ts](https://github.com/alibaba/lowcode-demo/blob/main/demo-general/src/index.ts)
#### 方法 2.2 使用 skeletonCabin.Workbench 方式初始化
`init()` 内部会调用 `ReactDOM.render()` 函数,因此这样初始化的内容没有办法与外部的 React 组件进行通信,也就没有办法在一些自定义的 plugin 中获取 redux 上的全局数据等内容。
因此,这种场景下您可以通过 `skeletonCabin.Workbench` 进行初始化。
> 注:**不需要**同时使用 2.1 和 2.2 的方法。根据使用场景,当且只当有需要插件和外界进行一定通信时,才需要使用 2.2 提供的方法。
```javascript
import React, { useState, useEffect } from 'react';
import { project, plugins, common, skeleton } from '@alilc/lowcode-engine';
// 此处略去若干依赖引用
async function registerPlugins() {
// 此处略去若干插件注册
}
function EditorView() {
/** 插件是否已初始化成功,因为必须要等插件初始化后才能渲染 Workbench */
const [hasPluginInited, setHasPluginInited] = useState(false);
useEffect(() => {
plugins.init().then(() => {
setHasPluginInited(true);
}).catch(err => console.error(err));
}, []);
if (!hasPluginInited) {
return null;
}
const Workbench = common.skeletonCabin.Workbench;
return <Workbench />;
}
(async function main() {
await registerPlugins();
config.setConfig({
enableCondition: true,
enableCanvasLock: true,
supportVariableGlobally: true,
requestHandlersMap: {
fetch: createFetchHandler()
}
});
ReactDOM.render(<EditorView />, document.getElementById('lce-container')!);
})();
```
> 本节中的低代码编辑器类似的例子可以在 demo 中找到:[https://github.com/alibaba/lowcode-demo/blob/main/demo-custom-initialization/src/index.tsx](https://github.com/alibaba/lowcode-demo/blob/main/demo-custom-initialization/src/index.tsx)
## 配置低代码编辑器
详见[低代码扩展简述](/site/docs/guide/expand/editor/summary)章节。

View File

@ -11,6 +11,7 @@ sidebar_position: 4
## npm 包与仓库信息
- React 框架渲染 npm 包:@alilc/lowcode-react-renderer
- Rax 框架渲染 npm 包:@alilc/lowcode-rax-renderer
- 仓库:[https://github.com/alibaba/lowcode-engine](https://github.com/alibaba/lowcode-engine) 下的
- packages/renderer-core
- packages/react-renderer

View File

@ -58,7 +58,7 @@ sidebar_position: 1
## 协议的作用
基于统一的协议,我们完成业务组件、区块、模板等各类物料的标准统一,各类中后台研发系统生产的物料可借助物料中心进行跨系统流通,通过丰富物料生态的共享提升各平台研发系统的效率。同时完成低代码引擎的标准统一以及低代码搭建中台能力的输出,帮助业务方快速孵化本业务域中后台研发系统。
基于统一的协议,我们完成业务组件、区块、模板等各类物料的标准统一,基于统一的协议,我们完成业务组件、区块、模板等各类物料的标准统一,各类中后台研发系统生产的物料可借助物料中心进行跨系统流通,通过丰富物料生态的共享提升各平台研发系统的效率。同时完成低代码引擎的标准统一以及低代码搭建中台能力的输出,帮助业务方快速孵化本业务域中后台研发系统。
### 打破物料孤岛

View File

@ -20,7 +20,7 @@ sidebar_position: 0
低代码引擎分为 4 大模块,入料 - 编排 - 渲染 - 出码:
- 入料模块就是将外部的物料,比如海量的 npm 组件,按照[低代码引擎物料协议规范](/site/docs/specs/material-spec)进行描述。将描述后的数据通过引擎 API 注册后,在编辑器中使用。
- 入料模块就是将外部的物料,比如海量的 npm 组件,按照《物料描述协议》进行描述。将描述后的数据通过引擎 API 注册后,在编辑器中使用。
> **注意,这里仅是增加描述,而非重写一套,这样我们能最大程度复用 ProCode 体系已沉淀的组件。**
- 编排,本质上来讲,就是**不断在生成符合[《低代码引擎搭建协议规范》](/site/docs/specs/lowcode-spec)的页面描述,将编辑器中的所有物料,进行布局设置、组件 CRUD 操作、以及 JS / CSS 编写/ 逻辑编排 **等,最终转换成页面描述,技术细节后文会展开。
- 渲染,顾名思义,就是**将编排生成的页面描述结构渲染成视图的过程**,视图是面向用户的,所以必须处理好内部数据流、生命周期、事件绑定、国际化等。

View File

@ -1,6 +1,6 @@
---
title: 低代码生态脚手架 & 调试机制
sidebar_position: 10
sidebar_position: 8
---
## 脚手架简述

View File

@ -1,6 +1,6 @@
---
title: 图编排扩展
sidebar_position: 8
sidebar_position: 9
---
## 项目运行
### 前置准备

View File

@ -460,6 +460,7 @@ import parse from '@alilc/lowcode-material-parser';
{
name: 'back',
title: ' ',
virtual: () => true,
display: 'plain',
setter: BackwardSetter,
}

View File

@ -12,7 +12,7 @@ sidebar_position: 6
```typescript
import { plugins } from '@alilc/lowcode-engine';
import { IPublicModelPluginContext, IPublicModelNode } from '@alilc/lowcode-types';
import { IPublicModelPluginContext } from '@alilc/lowcode-types';
import { Icon, Message } from '@alifd/next';
const addHelloAction = (ctx: IPublicModelPluginContext) => {
@ -23,11 +23,11 @@ const addHelloAction = (ctx: IPublicModelPluginContext) => {
content: {
icon: <Icon type="atm" />,
title: 'hello',
action(node: IPublicModelNode) {
action(node: Node) {
Message.show('Welcome to Low-Code engine');
},
},
condition: (node: IPublicModelNode) => {
condition: (node: Node) => {
return node.componentMeta.componentName === 'NextTable';
},
important: true,

View File

@ -1,6 +1,6 @@
---
title: 设置器扩展
sidebar_position: 7
sidebar_position: 5
---
## 设置器简述

View File

@ -1,157 +0,0 @@
---
title: 主题色扩展
sidebar_position: 9
---
## 简介
主题色扩展允许用户定制多样的设计器主题,增加界面的个性化和品牌识别度。
## 设计器主题色定制
在 CSS 的根级别定义主题色变量可以确保这些变量在整个应用中都可用。例如:
```css
:root {
--color-brand: rgba(0, 108, 255, 1); /* 主品牌色 */
--color-brand-light: rgba(25, 122, 255, 1); /* 浅色品牌色 */
--color-brand-dark: rgba(0, 96, 229, 1); /* 深色品牌色 */
}
```
将样式文件引入到你的设计器中,定义的 CSS 变量就可以改变设计器的主题色了。
### 主题色变量
以下是低代码引擎设计器支持的主题色变量列表,以及它们的用途说明:
#### 品牌相关颜色
- `--color-brand`: 主品牌色
- `--color-brand-light`: 浅色品牌色
- `--color-brand-dark`: 深色品牌色
#### Icon 相关颜色
- `--color-icon-normal`: 默认状态
- `--color-icon-light`: icon light 状态
- `--color-icon-hover`: 鼠标悬停状态
- `--color-icon-active`: 激活状态
- `--color-icon-reverse`: 反色状态
- `--color-icon-disabled`: 禁用状态
- `--color-icon-pane`: 面板颜色
#### 线条和文本颜色
- `--color-line-normal`: 线条颜色
- `--color-line-darken`: 线条颜色(darken)
- `--color-title`: 标题颜色
- `--color-text`: 文字颜色
- `--color-text-dark`: 文字颜色(dark)
- `--color-text-light`: 文字颜色(light)
- `--color-text-reverse`: 反色情况下,文字颜色
- `--color-text-disabled`: 禁用态文字颜色
#### 菜单颜色
- `--color-context-menu-text`: 菜单项颜色
- `--color-context-menu-text-hover`: 菜单项 hover 颜色
- `--color-context-menu-text-disabled`: 菜单项 disabled 颜色
#### 字段和边框颜色
- `--color-field-label`: field 标签颜色
- `--color-field-text`: field 文本颜色
- `--color-field-placeholder`: field placeholder 颜色
- `--color-field-border`: field 边框颜色
- `--color-field-border-hover`: hover 态下field 边框颜色
- `--color-field-border-active`: active 态下field 边框颜色
- `--color-field-background`: field 背景色
#### 状态颜色
- `--color-success`: success 颜色
- `--colo-success-dark`: success 颜色(dark)
- `--color-success-light`: success 颜色(light)
- `--color-warning`: warning 颜色
- `--color-warning-dark`: warning 颜色(dark)
- `--color-warning-light`: warning 颜色(light)
- `--color-information`: information 颜色
- `--color-information-dark`: information 颜色(dark)
- `--color-information-light`: information 颜色(light)
- `--color-error`: error 颜色
- `--color-error-dark`: error 颜色(dark)
- `--color-error-light`: error 颜色(light)
- `--color-purple`: purple 颜色
- `--color-brown`: brown 颜色
#### 区块背景色
- `--color-block-background-normal`: 区块背景色
- `--color-block-background-light`: 区块背景色(light)。
- `--color-block-background-shallow`: 区块背景色 shallow
- `--color-block-background-dark`: 区块背景色(dark)
- `--color-block-background-disabled`: 区块背景色(disabled)
- `--color-block-background-active`: 区块背景色(active)
- `--color-block-background-active-light`: 区块背景色(active light)
- `--color-block-background-warning`: 区块背景色(warning)
- `--color-block-background-error`: 区块背景色(error)
- `--color-block-background-success`: 区块背景色(success)
- `--color-block-background-deep-dark`: 区块背景色(deep-dark),作用于多个组件同时拖拽的背景色。
#### 引擎相关颜色
- `--color-canvas-detecting-background`: 画布组件 hover 时遮罩背景色。
#### 其他区域背景色
- `--color-layer-mask-background`: 拖拽元素时,元素原来位置的遮罩背景色
- `--color-layer-tooltip-background`: tooltip 背景色
- `--color-pane-background`: 面板背景色
- `--color-background`: 设计器主要背景色
- `--color-top-area-background`: topArea 背景色,优先级大于 `--color-pane-background`
- `--color-left-area-background`: leftArea 背景色,优先级大于 `--color-pane-background`
- `--color-toolbar-background`: toolbar 背景色,优先级大于 `--color-pane-background`
- `--color-workspace-left-area-background`: 应用级 leftArea 背景色,优先级大于 `--color-pane-background`
- `--color-workspace-top-area-background`: 应用级 topArea 背景色,优先级大于 `--color-pane-background`
- `--color-workspace-sub-top-area-background`: 应用级二级 topArea 背景色,优先级大于 `--color-pane-background`
#### 其他变量
- `--workspace-sub-top-area-height`: 应用级二级 topArea 高度
- `--top-area-height`: 顶部区域的高度
- `--workspace-sub-top-area-margin`: 应用级二级 topArea margin
- `--workspace-sub-top-area-padding`: 应用级二级 topArea padding
- `--workspace-left-area-width`: 应用级 leftArea width
- `--left-area-width`: leftArea width
- `--simulator-top-distance`: simulator 距离容器顶部的距离
- `--simulator-bottom-distance`: simulator 距离容器底部的距离
- `--simulator-left-distance`: simulator 距离容器左边的距离
- `--simulator-right-distance`: simulator 距离容器右边的距离
- `--toolbar-padding`: toolbar 的 padding
- `--toolbar-height`: toolbar 的高度
- `--pane-title-height`: 面板标题高度
- `--pane-title-font-size`: 面板标题字体大小
- `--pane-title-padding`: 面板标题边距
- `--context-menu-item-height`: 右键菜单项高度
### 低代码引擎生态主题色定制
插件、物料、设置器等生态为了支持主题色需要对样式进行改造,需要对生态中的样式升级为 css 变量。例如:
```css
/* before */
background: #006cff;
/* after */
background: var(--color-brand, #006cff);
```
这里 `var(--color-brand, #默认色)` 表示使用 `--color-brand` 变量,如果该变量未定义,则使用默认颜色(#默认色)。
### fusion 物料进行主题色扩展
如果使用了 fusion 组件时,可以通过 [fusion 平台](https://fusion.design/) 进行主题色定制。在平台上,您可以选择不同的主题颜色,并直接应用于您的 fusion 组件,这样可以无缝地集成到您的应用设计中。

View File

@ -40,6 +40,7 @@ ReactDOM.render((
), document.getElementById('root'));
```
- rax-renderernpm 包替换为 @alilc/lowcode-rax-renderer
####
### 项目使用示例
> [设计器 demo](https://lowcode-engine.cn/demo/demo-general/index.html)

View File

@ -1,6 +1,6 @@
---
title: 试用低代码引擎 Demo
sidebar_position: 2
sidebar_position: 1
---
## 访问地址

View File

@ -1,6 +1,6 @@
---
title: 简介
sidebar_position: 1
sidebar_position: 0
---
# 阿里低代码引擎简介
@ -46,18 +46,3 @@ sidebar_position: 1
**低代码设计器研发框架**
低代码引擎的核心是设计器,通过扩展、周边生态等可以产出各式各样的设计器。它不是一套可以适合所有人的低代码平台,而是帮助低代码平台的开发者,快速生产低代码平台的工具。
## 寻找适合您的低代码解决方案
帮助用户根据个人或企业需求选择合适的低代码产品。
| 特性/产品 | 低代码引擎 | Lab平台 | UIPaaS |
|-----------------|-----------------------------------------|-----------------------------------------|--------------------------------------------|
| **适用用户** | 前端开发者 | 需要快速搭建应用/页面的用户 | 企业用户,需要大规模部署低代码解决方案的组织 |
| **产品特点** | 设计器研发框架,适合定制开发 | 低代码平台, 可视化操作界面,易于上手 | 低代码平台孵化器,企业级功能 |
| **使用场景** | 定制和开发低代码平台的设计器部分 | 通过可视化, 快速开发应用或页面 | 帮助具有一定规模软件研发团队的的企业低成本定制低代码平台 |
| **产品关系** | 开源产品 | 基于UIPaaS技术实现, 展示了UIPaaS的部分能力 | 提供完整的低代码平台解决方案,商业产品 |
| **收费情况** | 免费 | 可免费使用(有额度限制),不提供私有化部署售卖 | 仅提供私有化部署售卖 |
| **官方网站** | [低代码引擎官网](https://lowcode-engine.cn/) | [Lab平台官网](https://lab.lowcode-engine.cn/) | [UIPaaS官网](https://uipaas.net/) |
*注:请根据您的具体需求和条件选择合适的产品。如需更详细的信息,请访问各产品的官方网站。*

View File

@ -1,5 +1,5 @@
---
sidebar_position: 3
sidebar_position: 2
title: 快速开始
---
@ -11,7 +11,7 @@ title: 快速开始
## 环境准备
### WSLWindows 电脑)
### WSLWindow 电脑)
Window 环境需要使用 WSL 在 windows 下进行低代码引擎相关的开发。安装教程 ➡️ [WSL 安装教程](https://docs.microsoft.com/zh-cn/windows/wsl/install)。<br />**对于 Window 环境来说,之后所有需要执行命令的操作都是在 WSL 终端执行的。**

View File

@ -0,0 +1,88 @@
---
title: 工程化配置
sidebar_position: 3
---
目前引擎体系共包含 2 个 js 文件 (配套 2 个 css),即:
```html
<!-- 低代码引擎的页面框架样式 -->
<link rel="stylesheet" href="https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.0.18/dist/css/engine-core.css" />
<!-- 低代码引擎官方扩展的样式 -->
<link rel="stylesheet" href="https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.5/dist/css/engine-ext.css" />
<!-- 低代码引擎的主包 -->
<script crossorigin="anonymous" src="https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.0.18/dist/js/engine-core.js"></script>
<!-- 低代码引擎官方扩展的主包 -->
<script crossorigin="anonymous" src="https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.5/dist/js/engine-ext.js"></script>
```
> 注,这里的版本号是示例,请尽量选用最新版
工程化配置我们进行了统一,具体如下:
```shell
{
"entry": {
...
},
"library": "...",
"libraryTarget": "umd",
"externals": {
"react": "var window.React",
"react-dom": "var window.ReactDOM",
"prop-types": "var window.PropTypes",
"@alilc/lowcode-engine": "var window.AliLowCodeEngine",
"@alilc/lowcode-engine-ext": "var window.AliLowCodeEngineExt",
"moment": "var moment",
"lodash": "var _",
"@alifd/next": "var Next"
},
"polyfill": false,
"outputDir": "dist",
"vendor": false,
"ignoreHtmlTemplate": true,
"sourceMap": true,
"plugins": [
"build-plugin-react-app",
["build-plugin-fusion", {
}],
["build-plugin-moment-locales", {
"locales": ["zh-CN"]
}],
"./build.plugin.js"
]
}
```
总结一下,有 2 点:
1. **都不包含 polyfill**需要应用级别单独引入 polyfill推荐动态 polyfill
2. **都不包含 lodash / moment / next**
#### 前置依赖资源:
```html
<link rel="stylesheet" href="//alifd.alicdn.com/npm/@alifd/next/1.20.25/next.min.css">
<script src="//polyfill.alicdn.com/s/polyfill.min.js?features=default,es2017,es6,fetch,RegeneratorRuntime"></script>
<script src="//alifd.alicdn.com/npm/@alifd/next/1.20.25/next.min.js"></script>
<script src="//g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js"></script>
<script src="//g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"></script>
```
#### 所有资源:
```html
<link rel="stylesheet" href="//alifd.alicdn.com/npm/@alifd/next/1.20.25/next.min.css">
<link rel="stylesheet" href="//uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.0.18/dist/css/engine-core.css"/>
<link rel="stylesheet" href="//uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.0.5/dist/css/engine-ext.css"/>
<script src="//polyfill.alicdn.com/s/polyfill.min.js?features=default,es2017,es6,fetch,RegeneratorRuntime"></script>
<script src="//alifd.alicdn.com/npm/@alifd/next/1.20.25/next.min.js"></script>
<script src="//g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js"></script>
<script src="//g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"></script>
<!-- engine-core 引擎的 core负责引擎的基础模块 -->
<script crossorigin="anonymous" src="//uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.0.18/dist/js/engine-core.js"></script>
<!-- engine-ext 引擎的扩展包,负责收拢内置 setters / plugins方便迭代 -->
<script crossorigin="anonymous" src="//uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.0.5/dist/js/engine-ext.js"></script>
```

View File

@ -0,0 +1,25 @@
---
title: 参与文档贡献
sidebar_position: 3
---
## 基本原则
### 维护方式
- 官方文档通过 github 管理文档源,官网文档与[主仓库 develop 分支](https://github.com/alibaba/lowcode-engine/tree/develop/docs)保持同步。
- 点击每篇文档下发的 `编辑此页` 可直接定位到 github 中位置。
- 欢迎 PR文档 PR 也会作为贡献者贡献,会用于贡献度统计。
- **文档同步到官方网站由官方人员进行操作**,如有需要可以通过 issue 或 贡献者群与相关人员沟通。
- 为了提供更好的阅读和使用体验,文档中的图片文件会定期转换成可信的 CDN 地址。
### PR 提交注意事项
- 指向 develop 分支。
- 涉及到图片的,需附在文档同级的 img 目录下,通过相对地址引用。
### 文档格式
本项目文档参考[文档编写指南](https://github.com/sparanoid/chinese-copywriting-guidelines)。
使用 vscode 进行编辑的朋友可以安装 vscode 插件 [huacnlee.autocorrect](https://github.com/huacnlee/autocorrect) 辅助文档 lint。

View File

@ -1,118 +1,31 @@
---
title: 参与贡献
title: 贡献者指南
sidebar_position: 0
---
### 环境准备
开发 LowcodeEngine 需要 Node.js 16+。
推荐使用 nvm 管理 Node.js避免权限问题的同时还能够随时切换当前使用的 Node.js 的版本。
### 贡献低代码引擎
#### clone 项目
```
git clone git@github.com:alibaba/lowcode-engine.git
cd lowcode-engine
```
#### 安装依赖并构建
```
npm install && npm run setup
```
#### 调试环境配置
本质上是将 demo 页面引入的几个 js/css 代理到 engine 项目,可以使用趁手的代理工具,这里推荐 [XSwitch](https://chrome.google.com/webstore/detail/xswitch/idkjhjggpffolpidfkikidcokdkdaogg?hl=en-US)。
本地开发代理规则如下:
```json
{
"proxy": [
[
"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/(.*)/dist/js/engine-core.js",
"http://localhost:5555/js/AliLowCodeEngine.js"
],
[
"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/(.*)/dist/css/engine-core.css",
"http://localhost:5555/css/AliLowCodeEngine.css"
],
[
"https?://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/(.*)/dist/js/react-simulator-renderer.js",
"http://localhost:5555/js/ReactSimulatorRenderer.js"
],
[
"https?://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/(.*)/dist/css/react-simulator-renderer.css",
"http://localhost:5555/css/ReactSimulatorRenderer.css"
]
]
}
```
#### 开发
```
npm start
```
选择一个环境进行调试,例如[低代码引擎在线 DEMO](https://lowcode-engine.cn/demo/demo-general/index.html)
开启代理之后,就可以进行开发调试了。
### 贡献低代码引擎文档
#### 开发文档
在 lowcode-engine 目录下执行下面命令
```
cd docs
npm start
```
#### 维护方式
- 官方文档通过 github 管理文档源,官网文档与[主仓库 develop 分支](https://github.com/alibaba/lowcode-engine/tree/develop/docs)保持同步。
- 点击每篇文档下发的 `编辑此页` 可直接定位到 github 中位置。
- 欢迎 PR文档 PR 也会作为贡献者贡献,会用于贡献度统计。
- **文档同步到官方网站由官方人员进行操作**,如有需要可以通过 issue 或 贡献者群与相关人员沟通。
- 为了提供更好的阅读和使用体验,文档中的图片文件会定期转换成可信的 CDN 地址。
#### 文档格式
本项目文档参考[文档编写指南](https://github.com/sparanoid/chinese-copywriting-guidelines)。
使用 vscode 进行编辑的朋友可以安装 vscode 插件 [huacnlee.autocorrect](https://github.com/huacnlee/autocorrect) 辅助文档 lint。
### 贡献低代码引擎生态
相关源码详见[NPM 包对应源码位置汇总](/site/docs/guide/appendix/npms)
开发调试方式详见[低代码生态脚手架 & 调试机制](/site/docs/guide/expand/editor/cli)
### 发布
PR 被合并之后,我们会尽快发布相关的正式版本或者 beta 版本。
### 加入 Contributor 群
提交过 Bugfix 或 Feature 类 PR 的同学,如果有兴趣一起参与维护 LowcodeEngine我们提供了一个核心贡献者交流群。
1. 可以通过[填写问卷](https://survey.taobao.com/apps/zhiliao/4YEtu9gHF)的方式,参与到其中。
2. 填写问卷后加微信号 `wxidvlalalalal` (注明 github id我们会拉你到群里。
如果你不知道可以贡献什么,可以到源码里搜 TODO 或 FIXME 找找。
### 首个 Pull Request
在写第一个 Pull Request你可以从这一系列视频中学习怎么做
[How to Contribute to an Open Source Project on GitHub](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)
为了使你能够快速上手和熟悉贡献流程,我们这里有个列表 [good first issues](https://github.com/alibaba/lowcode-engine/issues?q=is:open+is:issue+label:%22good+first+issue%22),里面有相对没那么笼统的漏洞,从这开始是个不错的选择。
### PR 提交注意事项
如果你想解决一个 issue请确定检查了该 issue 下的评论以防有人正在处理它。如果目前没人在处理该 issue那么请留下评论去表明你想处理该 issue 以便其他人不会意外重复你的工作。
- lowcode-engine 仓库建议从 develop 创建分支PR 指向 develop 分支。
- 其他仓库从 main 分支创建分支PR 指向 main 分支
- 如果你修复了 bug 或者添加了代码,而这些内容需要测试,请添加测试!
- 确保通过测试套件yarn test
- 请签订贡献者许可证协议Contributor License Agreement
如果有人留言表明要处理该 issue 但是超过两周没有跟进,你可以接手工作,不过也应该留言说明。
### 提交 Pull Request
核心团队时刻关注 pull requests我们会先评审你的 pull request之后可能会合并可能会要求再次更改也可能会关闭该 pull request 并对此作出解释。我们会尽力全程更新和反馈。
**提交 pull request 前**,请确保完成以下步骤:
1. Fork [此仓库](https://github.com/alibaba/lowcode-engine),从 main 创建分支。
2. 在仓库根目录下执行 yarn。
3. 如果你修复了 bug 或者添加了代码,而这些内容需要测试,请添加测试!
4. 确保通过测试套件yarn test
5. 请签订贡献者许可证协议Contributor License Agreement
> 如已签署 CLA 仍被提示需要签署,[解决办法](/site/docs/faq/faq021)
### 核心贡献者交流
如果你想长期参与到项目维护中,我们提供了一个核心贡献者交流群。
1. 可以通过[填写问卷](https://survey.taobao.com/apps/zhiliao/4YEtu9gHF)的方式,参与到其中。
2. 填写问卷后加微信号 `wxidvlalalalal` 说明一下。

View File

@ -1,55 +0,0 @@
---
title: 开源社区例会
sidebar_position: 0
---
## **简介**
低代码引擎开源社区致力于共同推动低代码技术的发展和创新。本社区汇集了低代码技术领域的开发者、技术专家和行业观察者,通过定期的例会来交流思想、分享经验、讨论新技术,并探索低代码技术的未来发展方向。
## 参与要求
为了确保例会的质量和效果,我们建议以下人员参加:
- **已参与低代码引擎贡献的成员**:那些对低代码引擎有实际贡献的社区成员。
- **参考贡献指南**:可查阅[贡献指南](https://lowcode-engine.cn/site/docs/participate/)获取更多信息。
- **提供过优秀建议的成员**:那些在过去为低代码引擎提供过有价值建议的成员。
## **时间周期**
- **周期性**:月例会
### **特别说明**
- 例会周期可根据成员反馈进行调整。如果讨论的议题较多,可增加例会频率;若议题较少,单次例会可能取消。若多次取消,可能会暂停例会。
## **例会流程**
### **准备阶段**
- **定期确定议题**:会前一周确定下一次会议的议题。
- **分发会议通知**:提前发送会议时间、议程和参与方式。
### **会议阶段**
- **开场和介绍**:简短开场和自我介绍,特别是新成员加入时。
- **议题讨论**:按照议程进行议题讨论,每个议题分配一定时间,并留足够时间供讨论和提问。
- **记录要点和决定**:记录讨论要点、决策和任何行动事项。
### **后续阶段**
- **分享会议纪要**:会后将会议纪要和行动计划分发给所有成员。
- **执行和跟进**:根据会议中的讨论和决策执行相关任务,并在下次会议中进行跟进汇报。
## **开源例会议题**
开源例会议题包括但不限于:
- **共建低代码行业发展**:探讨通过开源社区合作加速低代码行业发展。
- **改进建议和反馈收集**:讨论社区成员对低代码引擎的使用体验和改进建议。
- **前端技术与低代码的结合**:针对前端开发者,讨论将前端技术与低代码引擎结合的方式。
- **低代码业务场景和经验分享**:邀请社区成员分享低代码引擎的实际应用经验。
- **低代码技术原理介绍**:深入理解低代码引擎的技术原理和实现方式。
- **低代码引擎的最新进展**:分享低代码引擎的最新进展,包括新版本发布和新功能实现等。
- **低代码技术的未来展望**:讨论低代码技术的未来发展方向。
- **最新低代码平台功能和趋势分析**:分享和讨论当前低代码平台的新功能、趋势和发展方向。

View File

@ -0,0 +1,64 @@
---
title: 调试环境配置
sidebar_position: 1
---
低代码引擎的核心仓库是不包含任何物料、插件、setter 的,它本身用于生成低代码引擎的主包。
如果您需要对低代码的主包进行开发和调试,需要用到本文里介绍的知识。
如果您需要对低代码编辑器进行定制,您可能只需要 clone [lowcode-demo 项目](https://github.com/alibaba/lowcode-demo)并进行修改,参考“[配置低代码扩展点](/site/docs/guide/expand/editor/summary)”章节。
> 前置条件:
> node 推荐使用 16.18.014.x 也可以)
### 1. 拉取代码,启动项目
```bash
git clone git@github.com:alibaba/lowcode-engine.git
cd lowcode-engine
npm install && npm run setup
npm start
git clone git@github.com:alibaba/lowcode-demo.git
cd lowcode-demo
npm install && npm start
```
### 2. 配置资源代理
本质上是将 demo 页面引入的几个 js/css 代理到 engine 项目,可以使用趁手的代理工具,这里推荐 [XSwitch](https://chrome.google.com/webstore/detail/xswitch/idkjhjggpffolpidfkikidcokdkdaogg?hl=en-US)。
本地开发代理规则如下:
```json
{
"proxy": [
[
"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/(.*)/dist/js/engine-core.js",
"http://localhost:5555/js/engine-core.js"
],
[
"https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/(.*)/dist/css/engine-core.css",
"http://localhost:5555/css/engine-core.css"
],
[
"https?://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/(.*)/dist/js/react-simulator-renderer.js",
"http://localhost:5555/js/react-simulator-renderer.js"
],
[
"https?://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/(.*)/dist/css/react-simulator-renderer.css",
"http://localhost:5555/css/react-simulator-renderer.css"
],
[
"https?://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/(.*)/dist/js/rax-simulator-renderer.js",
"http://localhost:5555/js/rax-simulator-renderer.js"
],
[
"https?://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/(.*)/dist/css/rax-simulator-renderer.css",
"http://localhost:5555/css/rax-simulator-renderer.css"
],
]
}
```
### 3. 本地调试物料/插件/设置器
详见[低代码生态脚手架 & 调试机制](/site/docs/guide/expand/editor/cli)

View File

@ -25,7 +25,7 @@ sidebar_position: 0
### 1.3 版本号
1.1.0
1.0.0
### 1.4 协议版本号规范A
@ -124,8 +124,7 @@ sidebar_position: 0
- config: { Object } 当前应用配置信息
- meta: { Object } 当前应用元数据信息
- dataSource: { Array } 当前应用的公共数据源
- router: { Object } 当前应用的路由配置信息
- pages: { Array } 当前应用的所有页面信息
描述举例:
@ -164,7 +163,6 @@ sidebar_position: 0
}
}],
"componentsTree": [{ // 描述内容,值类型 Array
"id": "page1",
"componentName": "Page", // 单个页面,枚举类型 Page|Block|Component
"fileName": "Page1",
"props": {},
@ -215,7 +213,7 @@ sidebar_position: 0
"css": "body {font-size: 12px;} .table { width: 100px;}",
"config": { // 当前应用配置信息
"sdkVersion": "1.0.3", // 渲染模块版本
"historyMode": "hash", // 不推荐,推荐在 router 字段中配置
"historyMode": "hash", // 浏览器路由browser 哈希路由hash
"targetRootID": "J_Container",
"layout": {
"componentName": "BasicLayout",
@ -252,23 +250,7 @@ sidebar_position: 0
"i18n-jwg27yo4": "Hello",
"i18n-jwg27yo3": "China"
}
},
"router": {
"baseUrl": "/",
"historyMode": "hash", // 浏览器路由browser 哈希路由hash
"routes": [
{
"path": "home",
"page": "page1"
}
]
},
"pages": [
{
"id": "page1",
"treeId": "page1"
}
]
}
```
@ -499,6 +481,7 @@ try {
- 说明:组件即将从 DOM 中移除
- componentDidCatch(error, info)
- 说明:组件捕获到异常
- Rax目前没有使用生命周期使用 hooks 替代生命周期;
该对象由一系列 key-value 组成key 为生命周期方法名value 为 JSFunction 的描述,详见下方示例:
@ -1269,7 +1252,7 @@ export const recordEvent = function(logkey, gmkey, gokey, reqMethod) {
### 2.8 当前应用配置信息AA
用于描述当前应用的配置信息,比如当前应用的 Shell/Layout、主题等。
用于描述当前应用的配置信息,比如当前应用的路由模式、Shell/Layout、主题等。
> 注意:该字段为扩展字段,消费方式由各自场景自己决定,包括运行时和出码。
@ -1284,192 +1267,6 @@ export const recordEvent = function(logkey, gmkey, gokey, reqMethod) {
用于描述当前应用的公共数据源,数据结构跟容器结构里的 ComponentDataSource 保持一致。
在运行时 / 出码使用时API 和应用级数据源 API 保持一致,都是 `this.dataSourceMap['globalDSName'].load()`
### 2.11 当前应用的路由信息AA
用于描述当前应用的路径 - 页面的关系。通过声明路由信息,应用能够在不同的路径里显示对应的页面。
##### 2.11.1 Router (应用路由配置)结构描述
路由配置的结构说明:
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 备注 |
| ----------- | ---------------------- | ------------------------------- | ------ | --------- | ------ |
| baseName | 应用根路径 | String | - | '/' | 选填| |
| historyMode | history 模式 | 枚举类型,包括'browser'、'hash' | - | 'browser' | 选填| |
| routes | 路由对象组,路径与页面的关系对照组 | Route[] | - | - | 必填| |
##### 2.11.2 Route (路由记录)结构描述
路由记录路径与页面的关系对照。Route 的结构说明:
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 备注 |
| -------- | ---------------------------- | ---------------------------- | ------ | ------ | ---------------------------------------------------------------------- |
| name | 该路径项的名称 | String | - | - | 选填 |
| path | 路径 | String | - | - | 必填,路径规则详见下面说明 |
| query | 路径的 query 参数 | Object | - | - | 选填 |
| page | 路径对应的页面 ID | String | - | - | 选填page 与 redirect 字段中必须要有有一个存在 |
| redirect | 此路径需要重定向到的路由信息 | String \| Object \| Function | - | - | 选填page 与 redirect 字段中必须要有有一个存在,详见下文 **redirect** |
| meta | 路由元数据 | Object | - | - | 选填 |
| children | 子路由 | Route[] | - | - | 选填 |
以上结构仅说明了路由记录需要的必需字段,如果需要更多的信息字段可以自行实现。
关于 **path** 字段的详细说明:
路由记录通常通过声明 path 字段来匹配对应的浏览器 URL 来确认是否满足匹配条件,如 `path=abc` 能匹配到 `/abc` 这个 URL。
> 在声明 path 字段的时候,可省略 `/`,只声明后面的字符,如 `/abc` 可声明为 `abc`
path页面路径是浏览器URL的组成部分同时大部分网站的 URL 也都受到了 Restful 思想的影响,所以我们也是用类似的形式作为路径的规则基底。
路径规则是路由配置的重要组成部分,我们希望一个路径配置的基本能力需要支持具体的路径(/xxx与路径参数 (/:abc
以一个 `/one/:two?/three/:four?/:five?` 路径为例,它能够解析以下路径:
- `/one/three`
- `/one/:two/three`
- `/one/three/:four`
- `/one/three/:five`
- `/one/:two/three/:four`
- `/one/:two/three/:five`
- `/one/three/:four/:five`
- `/one/:two/three/:four/:five`
更多的路径规则,如路径中的通配符、多次匹配等能力如有需要可自行实现。
关于 **redirect** 字段的详细说明:
**redirect** 字段有三种填入类型,分别是 `String``Object``Function`
1. 字符串(`String`)格式下默认处理为重定向到路径,支持传入 '/xxx'、'/xxx?ab=c'。
2. 对象(`String`)格式下可传入路由对象,如 { name: 'xxx' }、{ path: '/xxx' },可重定向到对应的路由对象。
3. 函数`Function`格式为`(to) => Route`,它的入参为当前路由项信息,支持返回一个 Route 对象或者字符串,存在一些特殊情况,在重定向的时候需要对重定向之后的路径进行处理的情况下,需要使用函数声明。
```json
{
"redirect": {
"type": "JSFunction",
"value": "(to) => { return { path: '/a', query: { fromPath: to.path } } }",
}
}
```
##### 完整描述示例
``` json
{
"router": {
"baseName": "/",
"historyMode": "hash",
"routes": [
{
"path": "home",
"page": "home"
},
{
"path": "/*",
"redirect": "notFound"
}
]
},
"componentsTree": [
{
"id": "home",
...
},
{
"id": "notFound",
...
}
]
}
```
### 2.12 当前应用的页面信息AA
用于描述当前应用的页面信息,比如页面对应的低代码搭建内容、页面标题、页面配置等。
在一些比较复杂的场景下,允许声明一层页面映射关系,以支持页面声明更多信息与配置,同时能够支持不同类型的产物。
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 备注 |
| ------- | --------------------- | ------ | ------ | ------ | -------------------------------------------------------- |
| id | 页面 id | String | - | - | 必填 |
| type | 页面类型 | String | - | - | 选填,可用来区分页面的类型 |
| treeId | 对应的低代码树中的 id | String | - | - | 选填,页面对应的 componentsTree 中的子项 id |
| packageId | 对应的资产包对象 | String | - | - | 选填,页面对应的资产包对象,一般用于微应用场景下,当路由匹配到当前页面的时候,会加载 `packageId` 对应的微应用进行渲染。 |
| meta | 页面元信息 | Object | - | - | 选填,用于描述当前应用的配置信息 |
| config | 页面配置 | Object | - | - | 选填,用于描述当前应用的元数据信息 |
#### 2.12.1 微应用(低代码+)相关说明
在开发过程中,我们经常会遇到一些特殊的情况,比如一个低代码应用想要集成一些别的系统的页面或者系统中的一些页面只能是源码开发(与低代码相对的纯工程代码形式),为了满足更多的使用场景,应用级渲染引擎引入了微应用(微前端)的概念,使低代码页面与其他的页面结合成为可能。
微应用对象通过资产包加载,需要暴露两个生命周期方法:
- mount(container: HTMLElement, props: any)
- 说明:微应用挂载到 containerdom 节点)的调用方法,会在渲染微应用时调用
- unmout(container: HTMLElement, props: any)
- 说明微应用从容器节点container卸载的调用方法会在卸载微应用时调用
> 在微应用的场景下,可能会存在多个页面路由到同一个应用,应用可通过资产包加载,所以需要将对应的页面配置指向对应的微应用(资产包)对象。
**描述示例**
```json
{
"router": {
"baseName": "/",
"historyMode": "hash",
"routes": [
{
"path": "home",
"page": "home"
},
{
"page": "guide",
"page": "guide"
},
{
"path": "/*",
"redirect": "notFound"
}
]
},
"pages": [
{
"id": "home",
"treeId": "home",
"meta": {
"title": "首页"
}
},
{
"id": "notFound",
"treeId": "notFound",
"meta": {
"title": "404页面"
}
},
{
"id": "guide",
"packagId": "microApp"
}
]
}
// 资产包
[
{
"id": "microApp",
"package": "microApp",
"version": "1.23.0",
"urls": [
"https://g.alicdn.com/code/lib/microApp.min.css",
"https://g.alicdn.com/code/lib/microApp.min.js"
],
"library": "microApp"
},
]
```
## 3 应用描述
### 3.1 文件目录
@ -1523,78 +1320,9 @@ path页面路径是浏览器URL的组成部分同时大部分网站的
### 3.2 应用级别 APIs
> 下文中 `xxx` 代指任意 API
#### 3.2.1 路由 Router API
- this.location.`xxx` 「不推荐,推荐统一通过 this.router api」
- this.history.`xxx` 「不推荐,推荐统一通过 this.router api」
- this.match.`xxx` 「不推荐,推荐统一通过 this.router api」
- this.router.`xxx`
##### Router 结构说明
| API | 函数签名 | 说明 |
| -------------- | ---------------------------------------------------------- | -------------------------------------------------------------- |
| getCurrentRoute | () => RouteLocation | 获取当前解析后的路由信息RouteLocation 结构详见下面说明 |
| push | (target: string \| Route) => void | 路由跳转方法,跳转到指定的路径或者 Route |
| replace | (target: string \| Route) => void | 路由跳转方法,与 `push` 的区别在于不会增加一条历史记录而是替换当前的历史记录 |
| beforeRouteLeave | (guard: (to: RouteLocation, from: RouteLocation) => boolean \| Route) => void | 路由跳转前的守卫方法,详见下面说明 |
| afterRouteChange | (fn: (to: RouteLocation, from: RouteLocation) => void) => void | 路由跳转后的钩子函数,会在每次路由改变后执行 |
##### 3.2.1.1 RouteLocation路由信息结构说明
**RouteLocation** 是路由控制器匹配到对应的路由记录后进行解析产生的对象,它的结构如下:
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 备注 |
| -------------- | ---------------------- | ------ | ------ | ------ | ------ |
| path | 当前解析后的路径 | String | - | - | 必填 |
| hash | 当前路径的 hash 值,以 # 开头 | String | - | - | 必填 |
| href | 当前的全部路径 | String | - | - | 必填 |
| params | 匹配到的路径参数 | Object | - | - | 必填 |
| query | 当前的路径 query 对象 | Object | - | - | 必填,代表当前地址的 search 属性的对象 |
| name | 匹配到的路由记录名 | String | - | - | 选填 |
| meta | 匹配到的路由记录元数据 | Object | - | - | 选填 |
| redirectedFrom | 原本指向向的路由记录 | Route | - | - | 选填,在重定向到当前地址之前,原先想访问的地址 |
| fullPath | 包括 search 和 hash 在内的完整地址 | String | - | - | 选填 |
##### beforeRouteLeave
通过 beforeRouteLeave 注册的路由守卫方法会在每次路由跳转前执行。该方法一般会在应用鉴权,路由重定向等场景下使用。
> `beforeRouteLeave` 只在 `router.push/replace` 的方法调用时生效。
传入守卫的入参为:
* to: 即将要进入的目标路由(RouteLocation)
* from: 当前导航正要离开的路由(RouteLocation)
该守卫返回一个 `boolean` 或者路由对象来告知路由控制器接下来的行为。
* 如果返回 `false` 则停止跳转
* 如果返回 `true`,则继续跳转
* 如果返回路由对象,则重定向至对应的路由
**使用范例:**
```json
{
"componentsTree": [{
"componentName": "Page",
"fileName": "Page1",
"props": {},
"children": [{
"componentName": "Div",
"props": {},
"children": [{
"componentName": "Button",
"props": {
"text": "跳转到首页",
"onClick": {
"type": "JSFunction",
"value": "function () { this.router.push('/home'); }"
}
},
}]
}],
}]
}
```
- this.location.`xxx`
- this.history.`xxx`
- this.match.`xxx`
#### 3.2.2 应用级别的公共函数或第三方扩展
- this.utils.`xxx`

View File

@ -1,16 +0,0 @@
# 官方视频
- [2023/11/20 云栖大会|阿里开源低代码引擎及商业解决方案](https://www.bilibili.com/video/BV1Ku4y1w7Zr)
- [2023/08/03 初识低代码引擎](https://www.bilibili.com/video/BV1gu411p7TC)
# 社区视频
- [低代码从入门到实战:低代码引擎实践](https://www.bilibili.com/video/BV1aP4y1Q7Xa/)
- [低代码技术在研发团队的应用模式](https://www.bilibili.com/video/BV1L14y1Y72J/)
- [阿里低代码引擎项目实战 (1)-引擎 demo 部署到 faas 服务](https://www.bilibili.com/video/BV1B44y1P7GM/)
- [【有翻车】阿里低代码引擎项目实战 (2)-保存页面到远端存储](https://www.bilibili.com/video/BV1AS4y1K7DP/)
- [阿里巴巴低代码引擎项目实战 (3)-自定义组件接入](https://www.bilibili.com/video/BV1dZ4y1m76S/)
- [阿里低代码引擎项目实战 (4)-自定义插件 - 页面管理](https://www.bilibili.com/video/BV17a411i73f/)
- [阿里低代码引擎项目实战 (4)-用户登录](https://www.bilibili.com/video/BV1Wu411e7EQ/)
- [【有翻车】阿里低代码引擎项目实战 (5)-表单回显](https://www.bilibili.com/video/BV1UY4y1v7D7/)
- [阿里低代码引擎项目实战 (6)-自定义插件 - 页面管理 - 后端](https://www.bilibili.com/video/BV1uZ4y1U7Ly/)
- [阿里低代码引擎项目实战 (6)-自定义插件 - 页面管理 - 前端](https://www.bilibili.com/video/BV1Yq4y1a74P/)
- [阿里低代码引擎项目实战 (7)-自定义插件 - 页面管理 (完结)](https://www.bilibili.com/video/BV13Y4y1e7EV/)

View File

@ -1,6 +1,6 @@
{
"name": "@alilc/lowcode-engine-docs",
"version": "1.2.31",
"version": "1.0.33",
"description": "低代码引擎版本化文档",
"license": "MIT",
"files": [

View File

@ -19,7 +19,7 @@ const onResponse = function (res) {
chunks.push(chunk);
});
res.on('end', () => {
res.on('end', (chunk) => {
const body = Buffer.concat(chunks);
console.table(JSON.stringify(JSON.parse(body.toString()), null, 2));
});
@ -39,7 +39,7 @@ const postData = JSON.stringify({
},
],
// 可以发布指定源的 npm 包,默认公网 npm
useTnpm: true,
useTnpm: false,
});
req.write(postData);

View File

@ -1,6 +1,6 @@
{
"lerna": "4.0.0",
"version": "1.3.2",
"version": "1.1.9-beta.3",
"npmClient": "yarn",
"useWorkspaces": true,
"packages": [

View File

@ -94,26 +94,16 @@ await CodeGenerator.init();
4. 出码
```js
const project = await CodeGenerator.generateCode({
const result = await CodeGenerator.generateCode({
solution: 'icejs', // 出码方案 (目前内置有 icejs 和 rax )
schema, // 编排搭建出来的 schema
});
console.log(project); // 出码结果(默认是递归结构描述的,可以传 flattenResult: true 以生成扁平结构的结果)
console.log(result); // 出码结果(默认是递归结构描述的,可以传 flattenResult: true 以生成扁平结构的结果)
```
注:一般来说在浏览器中出码适合做即时预览功能。
5. 下载 zip 包
```js
// 写入到 zip 包
await CodeGenerator.publishers.zip().publish({
project, // 上一步生成的 project
projectSlug: 'your-project-slug', // 项目标识 -- 对应下载 your-project-slug.zip 文件
});
```
### 5自定义出码
前端框架灵活多变,默认内置的出码方案很难满足所有人的需求,好在此代码生成器支持非常灵活的插件机制 -- 欢迎参考 ./src/plugins/xxx 来编写您自己的出码插件,然后参考 ./src/solutions/xxx 将各种插件组合成一套适合您的业务场景的出码方案。

View File

@ -1,6 +1,6 @@
{
"name": "@alilc/lowcode-code-generator",
"version": "1.1.7",
"version": "1.1.4",
"description": "出码引擎 for LowCode Engine",
"license": "MIT",
"main": "lib/index.js",
@ -80,7 +80,6 @@
"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",
@ -110,7 +109,6 @@
"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",

View File

@ -111,6 +111,8 @@ export class ProjectBuilder implements IProjectBuilder {
// Init
const { schemaParser } = this;
const projectRoot = await this.template.generateTemplate();
let schema: IPublicTypeProjectSchema =
typeof originalSchema === 'string' ? JSON.parse(originalSchema) : originalSchema;
@ -129,9 +131,6 @@ export class ProjectBuilder implements IProjectBuilder {
// Collect Deps
// Parse JSExpression
const parseResult: IParseResult = schemaParser.parse(schema);
const projectRoot = await this.template.generateTemplate(parseResult);
let buildResult: IModuleInfo[] = [];
const builders = this.createModuleBuilders({

View File

@ -16,14 +16,13 @@ import { isJSFunction, isJSExpression } from '@alilc/lowcode-types';
import { isJSExpressionFn } from '../../../utils/common';
export interface PluginConfig {
fileType?: string;
exportNameMapping?: Record<string, string>;
normalizeNameMapping?: Record<string, string>;
exclude?: string[];
fileType: string;
exportNameMapping: Record<string, string>;
normalizeNameMapping: Record<string, string>;
}
const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) => {
const cfg = {
const cfg: PluginConfig = {
fileType: FileType.JSX,
exportNameMapping: {},
normalizeNameMapping: {},
@ -57,10 +56,6 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
normalizeName = cfg.normalizeNameMapping[lifeCycleName] || lifeCycleName;
}
if (cfg?.exclude?.includes(normalizeName)) {
return null;
}
const exportName = cfg.exportNameMapping[lifeCycleName] || lifeCycleName;
if (normalizeName === 'constructor') {
return {
@ -102,7 +97,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
}),
linkAfter: [...DEFAULT_LINK_AFTER[CLASS_DEFINE_CHUNK_NAME.InsMethod]],
};
}).filter((i) => !!i);
});
next.chunks.push(...chunks.filter((x): x is ICodeChunk => x !== null));
}

View File

@ -67,12 +67,12 @@ const pluginFactory: BuilderComponentPluginFactory<IceJs3PackageJsonPluginConfig
'react-router-dom': '^6.9.0',
'intl-messageformat': '^9.3.6',
'@alifd/next': '1.26.15',
'@ice/runtime': '~1.1.0',
'@ice/runtime': '^1.0.0',
// 数据源相关的依赖:
...buildDataSourceDependencies(ir, cfg?.datasourceConfig),
},
devDependencies: {
'@ice/app': '~3.1.0',
'@ice/app': '^3.0.0',
'@types/react': '^18.0.0',
'@types/react-dom': '^18.0.0',
'@types/node': '^18.11.17',

View File

@ -27,7 +27,7 @@ export default function Document() {
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/react/18.2.0/umd/react.development.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/react-dom/18.2.0/umd/react-dom.development.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/??react-router/6.9.0/react-router.production.min.js,react-router-dom/6.9.0/react-router-dom.production.min.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/alifd__next/1.26.22/next.min.js" />
<script crossOrigin="anonymous" src="//alifd.alicdn.com/npm/@alifd/next/1.26.15/next.min.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/platform/c/??lodash/4.6.1/lodash.min.js,immutable/3.7.6/dist/immutable.min.js" />
<Scripts />

View File

@ -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 | Blob;
export type ZipBuffer = Buffer;
declare type ZipPublisherResponse = string | ZipBuffer;
@ -44,17 +44,11 @@ export const createZipPublisher: PublisherFactory<ZipFactoryParams, ZipPublisher
try {
const zipContent = await generateProjectZip(projectToPublish);
if (isNodeProcess()) {
// If not output path is provided on the node side, zip is not written to disk
// If not output path is provided, zip is not written to disk
const projectOutputPath = options.outputPath || outputPath;
if (projectOutputPath) {
if (projectOutputPath && isNodeProcess()) {
await writeZipToDisk(projectOutputPath, zipContent, zipName);
}
} else {
// the browser end does not require a path
// auto download zip files
saveAs(zipContent as Blob, `${zipName}.zip`);
}
return { success: true, payload: zipContent };
} catch (error) {

View File

@ -40,7 +40,8 @@ export const writeZipToDisk = (
export const generateProjectZip = async (project: ResultDir): Promise<ZipBuffer> => {
let zip = new JSZip();
zip = writeFolderToZip(project, zip, true);
const zipType = isNodeProcess() ? 'nodebuffer' : 'blob';
// const zipType = isNodeProcess() ? 'nodebuffer' : 'blob';
const zipType = 'nodebuffer'; // 目前先只支持 node 调用
return zip.generateAsync({ type: zipType });
};

View File

@ -127,7 +127,7 @@ export interface ISchemaParser {
export interface IProjectTemplate {
slots: Record<string, IProjectSlot>;
generateTemplate: (data: IParseResult) => ResultDir | Promise<ResultDir>;
generateTemplate: () => ResultDir | Promise<ResultDir>;
}
export interface IProjectSlot {

View File

@ -10,13 +10,13 @@
"react-router-dom": "^6.9.0",
"intl-messageformat": "^9.3.6",
"@alifd/next": "1.19.18",
"@ice/runtime": "~1.1.0",
"@ice/runtime": "^1.0.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",
"@ice/app": "^3.0.0",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@types/node": "^18.11.17",

View File

@ -19,7 +19,7 @@ export default function Document() {
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/react/18.2.0/umd/react.development.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/react-dom/18.2.0/umd/react-dom.development.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/??react-router/6.9.0/react-router.production.min.js,react-router-dom/6.9.0/react-router-dom.production.min.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/alifd__next/1.26.22/next.min.js" />
<script crossOrigin="anonymous" src="//alifd.alicdn.com/npm/@alifd/next/1.26.15/next.min.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/platform/c/??lodash/4.6.1/lodash.min.js,immutable/3.7.6/dist/immutable.min.js" />
<Scripts />

View File

@ -10,7 +10,7 @@
"react-router-dom": "^6.9.0",
"intl-messageformat": "^9.3.6",
"@alifd/next": "1.26.15",
"@ice/runtime": "~1.1.0",
"@ice/runtime": "^1.0.0",
"@alilc/lowcode-datasource-engine": "^1.0.0",
"@alilc/lowcode-datasource-url-params-handler": "^1.0.0",
"@alilc/b6-page": "^0.1.0",
@ -20,7 +20,7 @@
"@alilc/b6-util-mocks": "1.x"
},
"devDependencies": {
"@ice/app": "~3.1.0",
"@ice/app": "^3.0.0",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@types/node": "^18.11.17",

View File

@ -19,7 +19,7 @@ export default function Document() {
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/react/18.2.0/umd/react.development.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/react-dom/18.2.0/umd/react-dom.development.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/??react-router/6.9.0/react-router.production.min.js,react-router-dom/6.9.0/react-router-dom.production.min.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/alifd__next/1.26.22/next.min.js" />
<script crossOrigin="anonymous" src="//alifd.alicdn.com/npm/@alifd/next/1.26.15/next.min.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/platform/c/??lodash/4.6.1/lodash.min.js,immutable/3.7.6/dist/immutable.min.js" />
<Scripts />

View File

@ -10,11 +10,11 @@
"react-router-dom": "^6.9.0",
"intl-messageformat": "^9.3.6",
"@alifd/next": "1.19.18",
"@ice/runtime": "~1.1.0",
"@ice/runtime": "^1.0.0",
"@alilc/lowcode-datasource-engine": "^1.0.0"
},
"devDependencies": {
"@ice/app": "~3.1.0",
"@ice/app": "^3.0.0",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@types/node": "^18.11.17",

View File

@ -19,7 +19,7 @@ export default function Document() {
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/react/18.2.0/umd/react.development.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/react-dom/18.2.0/umd/react-dom.development.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/??react-router/6.9.0/react-router.production.min.js,react-router-dom/6.9.0/react-router-dom.production.min.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/alifd__next/1.26.22/next.min.js" />
<script crossOrigin="anonymous" src="//alifd.alicdn.com/npm/@alifd/next/1.26.15/next.min.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/platform/c/??lodash/4.6.1/lodash.min.js,immutable/3.7.6/dist/immutable.min.js" />
<Scripts />

View File

@ -10,11 +10,11 @@
"react-router-dom": "^6.9.0",
"intl-messageformat": "^9.3.6",
"@alifd/next": "1.19.18",
"@ice/runtime": "~1.1.0",
"@ice/runtime": "^1.0.0",
"@alilc/lowcode-datasource-engine": "^1.0.0"
},
"devDependencies": {
"@ice/app": "~3.1.0",
"@ice/app": "^3.0.0",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@types/node": "^18.11.17",

View File

@ -19,7 +19,7 @@ export default function Document() {
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/react/18.2.0/umd/react.development.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/react-dom/18.2.0/umd/react-dom.development.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/??react-router/6.9.0/react-router.production.min.js,react-router-dom/6.9.0/react-router-dom.production.min.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/alifd__next/1.26.22/next.min.js" />
<script crossOrigin="anonymous" src="//alifd.alicdn.com/npm/@alifd/next/1.26.15/next.min.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/platform/c/??lodash/4.6.1/lodash.min.js,immutable/3.7.6/dist/immutable.min.js" />
<Scripts />

View File

@ -10,14 +10,14 @@
"react-router-dom": "^6.9.0",
"intl-messageformat": "^9.3.6",
"@alifd/next": "1.26.15",
"@ice/runtime": "~1.1.0",
"@ice/runtime": "^1.0.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",
"@ice/app": "^3.0.0",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@types/node": "^18.11.17",

View File

@ -19,7 +19,7 @@ export default function Document() {
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/react/18.2.0/umd/react.development.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/react-dom/18.2.0/umd/react-dom.development.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/??react-router/6.9.0/react-router.production.min.js,react-router-dom/6.9.0/react-router-dom.production.min.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/alifd__next/1.26.22/next.min.js" />
<script crossOrigin="anonymous" src="//alifd.alicdn.com/npm/@alifd/next/1.26.15/next.min.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/platform/c/??lodash/4.6.1/lodash.min.js,immutable/3.7.6/dist/immutable.min.js" />
<Scripts />

View File

@ -10,7 +10,7 @@
"react-router-dom": "^6.9.0",
"intl-messageformat": "^9.3.6",
"@alifd/next": "1.26.15",
"@ice/runtime": "~1.1.0",
"@ice/runtime": "^1.0.0",
"@alilc/lowcode-datasource-engine": "^1.0.0",
"undefined": "*",
"@alife/container": "0.3.7",
@ -18,7 +18,7 @@
"@alife/mc-assets-1935": "0.1.16"
},
"devDependencies": {
"@ice/app": "~3.1.0",
"@ice/app": "^3.0.0",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@types/node": "^18.11.17",

View File

@ -19,7 +19,7 @@ export default function Document() {
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/react/18.2.0/umd/react.development.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/react-dom/18.2.0/umd/react-dom.development.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/??react-router/6.9.0/react-router.production.min.js,react-router-dom/6.9.0/react-router-dom.production.min.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/alifd__next/1.26.22/next.min.js" />
<script crossOrigin="anonymous" src="//alifd.alicdn.com/npm/@alifd/next/1.26.15/next.min.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/platform/c/??lodash/4.6.1/lodash.min.js,immutable/3.7.6/dist/immutable.min.js" />
<Scripts />

View File

@ -10,13 +10,13 @@
"react-router-dom": "^6.9.0",
"intl-messageformat": "^9.3.6",
"@alifd/next": "1.19.18",
"@ice/runtime": "~1.1.0",
"@ice/runtime": "^1.0.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",
"@ice/app": "^3.0.0",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@types/node": "^18.11.17",

View File

@ -19,7 +19,7 @@ export default function Document() {
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/react/18.2.0/umd/react.development.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/react-dom/18.2.0/umd/react-dom.development.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/??react-router/6.9.0/react-router.production.min.js,react-router-dom/6.9.0/react-router-dom.production.min.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/alifd__next/1.26.22/next.min.js" />
<script crossOrigin="anonymous" src="//alifd.alicdn.com/npm/@alifd/next/1.26.15/next.min.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/platform/c/??lodash/4.6.1/lodash.min.js,immutable/3.7.6/dist/immutable.min.js" />
<Scripts />

View File

@ -10,14 +10,14 @@
"react-router-dom": "^6.9.0",
"intl-messageformat": "^9.3.6",
"@alifd/next": "1.26.15",
"@ice/runtime": "~1.1.0",
"@ice/runtime": "^1.0.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",
"@ice/app": "^3.0.0",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@types/node": "^18.11.17",

View File

@ -19,7 +19,7 @@ export default function Document() {
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/react/18.2.0/umd/react.development.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/react-dom/18.2.0/umd/react-dom.development.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/??react-router/6.9.0/react-router.production.min.js,react-router-dom/6.9.0/react-router-dom.production.min.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/alifd__next/1.26.22/next.min.js" />
<script crossOrigin="anonymous" src="//alifd.alicdn.com/npm/@alifd/next/1.26.15/next.min.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/platform/c/??lodash/4.6.1/lodash.min.js,immutable/3.7.6/dist/immutable.min.js" />
<Scripts />

View File

@ -10,13 +10,13 @@
"react-router-dom": "^6.9.0",
"intl-messageformat": "^9.3.6",
"@alifd/next": "1.26.15",
"@ice/runtime": "~1.1.0",
"@ice/runtime": "^1.0.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",
"@ice/app": "^3.0.0",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@types/node": "^18.11.17",

View File

@ -19,7 +19,7 @@ export default function Document() {
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/react/18.2.0/umd/react.development.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/react-dom/18.2.0/umd/react-dom.development.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/??react-router/6.9.0/react-router.production.min.js,react-router-dom/6.9.0/react-router-dom.production.min.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/alifd__next/1.26.22/next.min.js" />
<script crossOrigin="anonymous" src="//alifd.alicdn.com/npm/@alifd/next/1.26.15/next.min.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/platform/c/??lodash/4.6.1/lodash.min.js,immutable/3.7.6/dist/immutable.min.js" />
<Scripts />

View File

@ -10,12 +10,12 @@
"react-router-dom": "^6.9.0",
"intl-messageformat": "^9.3.6",
"@alifd/next": "1.19.18",
"@ice/runtime": "~1.1.0",
"@ice/runtime": "^1.0.0",
"@alilc/lowcode-datasource-engine": "^1.0.0",
"@alilc/lowcode-datasource-jsonp-handler": "^1.0.0"
},
"devDependencies": {
"@ice/app": "~3.1.0",
"@ice/app": "^3.0.0",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@types/node": "^18.11.17",

View File

@ -19,7 +19,7 @@ export default function Document() {
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/react/18.2.0/umd/react.development.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/react-dom/18.2.0/umd/react-dom.development.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/??react-router/6.9.0/react-router.production.min.js,react-router-dom/6.9.0/react-router-dom.production.min.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/alifd__next/1.26.22/next.min.js" />
<script crossOrigin="anonymous" src="//alifd.alicdn.com/npm/@alifd/next/1.26.15/next.min.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/platform/c/??lodash/4.6.1/lodash.min.js,immutable/3.7.6/dist/immutable.min.js" />
<Scripts />

View File

@ -10,7 +10,7 @@
"react-router-dom": "^6.9.0",
"intl-messageformat": "^9.3.6",
"@alifd/next": "1.26.15",
"@ice/runtime": "~1.1.0",
"@ice/runtime": "^1.0.0",
"@alilc/lowcode-datasource-engine": "^1.0.0",
"undefined": "*",
"@alilc/antd-lowcode-materials": "0.9.4",
@ -18,7 +18,7 @@
"@alife/container": "0.3.7"
},
"devDependencies": {
"@ice/app": "~3.1.0",
"@ice/app": "^3.0.0",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@types/node": "^18.11.17",

View File

@ -19,7 +19,7 @@ export default function Document() {
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/react/18.2.0/umd/react.development.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/react-dom/18.2.0/umd/react-dom.development.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/??react-router/6.9.0/react-router.production.min.js,react-router-dom/6.9.0/react-router-dom.production.min.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/alifd__next/1.26.22/next.min.js" />
<script crossOrigin="anonymous" src="//alifd.alicdn.com/npm/@alifd/next/1.26.15/next.min.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/platform/c/??lodash/4.6.1/lodash.min.js,immutable/3.7.6/dist/immutable.min.js" />
<Scripts />

View File

@ -10,7 +10,7 @@
"react-router-dom": "^6.9.0",
"intl-messageformat": "^9.3.6",
"@alifd/next": "1.26.15",
"@ice/runtime": "~1.1.0",
"@ice/runtime": "^1.0.0",
"@alilc/lowcode-datasource-engine": "^1.0.0",
"undefined": "*",
"@alilc/antd-lowcode-materials": "0.11.0",
@ -18,7 +18,7 @@
"@alife/container": "0.3.7"
},
"devDependencies": {
"@ice/app": "~3.1.0",
"@ice/app": "^3.0.0",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@types/node": "^18.11.17",

View File

@ -19,7 +19,7 @@ export default function Document() {
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/react/18.2.0/umd/react.development.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/react-dom/18.2.0/umd/react-dom.development.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/??react-router/6.9.0/react-router.production.min.js,react-router-dom/6.9.0/react-router-dom.production.min.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/alifd__next/1.26.22/next.min.js" />
<script crossOrigin="anonymous" src="//alifd.alicdn.com/npm/@alifd/next/1.26.15/next.min.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js" />
<script crossOrigin="anonymous" src="//g.alicdn.com/platform/c/??lodash/4.6.1/lodash.min.js,immutable/3.7.6/dist/immutable.min.js" />
<Scripts />

View File

@ -1,14 +1,6 @@
import CodeGen from '../../../../src';
import fileSaver from 'file-saver';
import * as utils from '../../../../src/publisher/zip/utils';
jest.mock('file-saver');
describe('public/publisher/zip/zip', () => {
afterEach(() => {
jest.clearAllMocks();
});
it('should works', async () => {
const zip = CodeGen.publishers.zip({
outputPath: 'demo-output',
@ -27,15 +19,15 @@ describe('public/publisher/zip/zip', () => {
],
};
expect(zip.getOutputPath()).toMatchInlineSnapshot('"demo-output"');
expect(zip.getOutputPath()).toMatchInlineSnapshot(`"demo-output"`);
expect(zip.getProject()).toMatchInlineSnapshot('undefined');
expect(zip.getProject()).toMatchInlineSnapshot(`undefined`);
zip.setProject(demoProject);
expect(zip.getProject()).toBeTruthy();
expect(zip.getOutputPath()).toMatchInlineSnapshot('"demo-output"');
expect(zip.getOutputPath()).toMatchInlineSnapshot(`"demo-output"`);
expect(zip.setOutputPath('output')).toBe(undefined);
expect(zip.getOutputPath()).toMatchInlineSnapshot('"output"');
expect(zip.getOutputPath()).toMatchInlineSnapshot(`"output"`);
const publishRes = await zip.publish({
project: demoProject,
@ -49,39 +41,4 @@ describe('public/publisher/zip/zip', () => {
const zip = CodeGen.publishers.zip({});
expect(zip.publish()).rejects.toBeTruthy();
});
it('should publish the project as a zip file in the browser', async () => {
const zipContent = 'zip content';
const zipName = 'example-project';
jest.spyOn(utils, 'isNodeProcess').mockReturnValue(false);
// new Zip 里面也有平台判断,所以这里 mock
jest.spyOn(utils, 'generateProjectZip').mockResolvedValue(zipContent as any);
const spy = jest.spyOn(fileSaver, 'saveAs');
const zip = CodeGen.publishers.zip({
projectSlug: zipName,
});
const demoProject = {
name: 'demo',
dirs: [],
files: [
{
name: 'package',
ext: 'json',
content: '{ "name": "demo", "version": "1.0.0" }',
},
],
};
zip.setProject(demoProject);
const publishRes = await zip.publish({
project: demoProject,
});
expect(publishRes.success).toBeTruthy();
expect(spy).toBeCalledWith(zipContent, `${zipName}.zip`);
spy.mockReset();
spy.mockRestore();
});
});

Some files were not shown because too many files have changed in this diff Show More