Compare commits

..

36 Commits

Author SHA1 Message Date
JackLian
7f419bce69 chore(release): publish 1.1.0-beta.29 2023-02-02 09:38:49 +08:00
JackLian
1d1981040d Merge branch 'develop' into release/1.1.0-beta 2023-02-02 09:36:22 +08:00
JackLian
1e61ed8a21 chore(release): publish 1.1.0-beta.28 2023-02-01 14:50:19 +08:00
JackLian
8674eedc4d chore: merge from develop 2023-02-01 14:46:37 +08:00
JackLian
c80b3f098e chore(release): publish 1.1.0-beta.27 2023-01-30 09:13:36 +08:00
JackLian
97816ba85c chore(release): publish 1.1.0-beta.26 2023-01-30 09:10:05 +08:00
JackLian
7b90462109 chore: merge from develop 2023-01-30 09:06:54 +08:00
JackLian
583dfd5c0d chore(release): publish 1.1.0-beta.25 2023-01-13 18:22:17 +08:00
JackLian
fc896df066 Merge branch 'develop' into release/1.1.0-beta 2023-01-13 18:16:38 +08:00
JackLian
e9f7121df6 chore(release): publish 1.1.0-beta.24 2023-01-12 19:47:54 +08:00
JackLian
2220988fdc Merge branch 'develop' into release/1.1.0-beta 2023-01-12 18:56:32 +08:00
JackLian
42ec7c031c chore(release): publish 1.1.0-beta.23 2023-01-10 22:21:11 +08:00
JackLian
38915d615a chore: merge from develop 2023-01-10 21:58:24 +08:00
JackLian
1c86c1084a chore(release): publish 1.1.0-beta.22 2023-01-05 12:32:06 +08:00
JackLian
26036f89d1 Merge branch 'develop' into release/1.1.0-beta 2023-01-05 12:02:14 +08:00
JackLian
07cdacffeb chore(release): publish 1.1.0-beta.21 2023-01-03 19:31:40 +08:00
JackLian
6e0b3dd0bd Merge branch 'develop' into release/1.1.0-beta 2023-01-03 19:21:53 +08:00
liujuping
da2cd2a957 chore(release): publish 1.1.0-beta.20 2022-12-30 14:42:16 +08:00
liujuping
02a712d52a Merge branch develop into release/1.1.0-beta 2022-12-30 14:29:56 +08:00
liujuping
8fb6975c65 chore(release): publish 1.1.0-beta.19 2022-12-30 11:24:57 +08:00
liujuping
98df9023c5 Merge branch develop into release/1.1.0-beta 2022-12-30 11:15:05 +08:00
JackLian
7f7596697d chore(release): publish 1.1.0-beta.18 2022-12-27 18:56:01 +08:00
JackLian
8bfd7de54a chore: merge from develop 2022-12-27 18:42:23 +08:00
JackLian
efe7c6e7de chore(release): publish 1.1.0-beta.17 2022-12-27 12:48:38 +08:00
JackLian
b9e5ebfb91 chore: merge from develop 2022-12-27 12:39:14 +08:00
JackLian
8db8c9001a chore(release): publish 1.1.0-beta.16 2022-12-26 19:44:01 +08:00
JackLian
13c49ea5ff chore(release): publish 1.1.0-beta.15 2022-12-26 18:38:24 +08:00
JackLian
87a30ff3a8 chore: fix version 2022-12-26 18:33:40 +08:00
JackLian
eea4a9a608 chore(release): publish 1.1.0-beta.14 2022-12-26 17:53:56 +08:00
JackLian
ba3adcfb89 fix: expandable state not changed when node added/removed 2022-12-26 17:46:41 +08:00
JackLian
c0e946b522 chore(release): publish 1.1.0-beta.13 2022-12-26 14:38:04 +08:00
JackLian
53eb3a758a chore: merge from develop\ 2022-12-26 14:30:08 +08:00
JackLian
0964965ac4 chore(release): publish 1.1.0-beta.12 2022-12-22 17:42:53 +08:00
JackLian
5fd200f874 chore(release): publish 1.1.0-beta.11 2022-12-22 16:53:50 +08:00
JackLian
8479573f7b chore: use correct current version 2022-12-22 16:50:46 +08:00
JackLian
9aa46e4fe3 chore: use correct current version 2022-12-22 16:41:24 +08:00
1014 changed files with 8445 additions and 37430 deletions

View File

@ -15,11 +15,12 @@ module.exports = {
'no-prototype-builtins': 1,
'no-useless-constructor': 1,
'no-empty-function': 1,
'@typescript-eslint/member-ordering': 0,
'lines-between-class-members': 0,
'no-await-in-loop': 0,
'no-plusplus': 0,
'@typescript-eslint/no-parameter-properties': 0,
'no-restricted-exports': ['error'],
'@typescript-eslint/no-unused-vars': 1,
'no-multi-assign': 1,
'no-dupe-class-members': 1,
'react/no-deprecated': 1,
@ -34,26 +35,22 @@ module.exports = {
'@typescript-eslint/indent': 0,
'import/no-cycle': 0,
'@typescript-eslint/no-shadow': 0,
'@typescript-eslint/method-signature-style': 0,
'@typescript-eslint/consistent-type-assertions': 0,
'@typescript-eslint/no-useless-constructor': 0,
"@typescript-eslint/method-signature-style": 0,
"@typescript-eslint/consistent-type-assertions": 0,
"@typescript-eslint/no-useless-constructor": 0,
'@typescript-eslint/dot-notation': 0, // for lint performance
'@typescript-eslint/restrict-plus-operands': 0, // for lint performance
'no-unexpected-multiline': 1,
'no-multiple-empty-lines': ['error', { max: 1 }],
'no-multiple-empty-lines': ['error', { "max": 1 }],
'lines-around-comment': ['error', {
beforeBlockComment: true,
afterBlockComment: false,
afterLineComment: false,
allowBlockStart: true,
"beforeBlockComment": true,
"afterBlockComment": false,
"afterLineComment": false,
"allowBlockStart": true,
}],
'comma-dangle': ['error', 'always-multiline'],
'@typescript-eslint/member-ordering': [
'error',
{ default: ['signature', 'field', 'constructor', 'method'] }
"@typescript-eslint/member-ordering": [
"error",
{ "default": ["signature", "field", "constructor", "method"] }
],
'@typescript-eslint/no-unused-vars': ['error'],
'no-redeclare': 0,
'@typescript-eslint/no-redeclare': 1,
},
}
};

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,33 +0,0 @@
name: Check Base Branch
on:
pull_request:
types: [opened]
jobs:
code-review:
name: Check
runs-on: ubuntu-latest
steps:
# 判断用户是否有写仓库权限
- name: 'Check User Permission'
uses: 'lannonbr/repo-permission-check-action@2.0.0'
with:
permission: 'write'
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- name: 'Check base branch name is develop or not'
if: github.event.pull_request.base.ref != 'develop' # check the target branch if it's master
uses: actions-cool/issues-helper@v2
with:
actions: 'create-comment'
token: ${{ secrets.GITHUB_TOKEN }}
issue-number: ${{ github.event.pull_request.number }}
body: |
感谢你的 PR根据引擎的 [研发协作流程](https://lowcode-engine.cn/site/docs/participate/flow),请将目标合入分支设置为 **develop**。
Thanks in advance, according to the [Contribution Guideline](https://lowcode-engine.cn/site/docs/participate/flow), please set the base branch to **develop**.
@${{ github.event.pull_request.user.login }}

View File

@ -72,25 +72,3 @@ jobs:
test-script: npm test -- --jest-ci --jest-json --jest-coverage --jest-testLocationInResults --jest-outputFile=report.json
package-manager: yarn
annotations: none
cov-utils:
runs-on: ubuntu-latest
# skip fork's PR, otherwise it fails while making a comment
if: ${{ github.event.pull_request.head.repo.full_name == 'alibaba/lowcode-engine' }}
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
- uses: ArtiomTr/jest-coverage-report-action@v2
with:
working-directory: packages/utils
test-script: npm test -- --jest-ci --jest-json --jest-coverage --jest-testLocationInResults --jest-outputFile=report.json
package-manager: yarn
annotations: none

View File

@ -1,4 +1,4 @@
name: Help Wanted
name: Issue Reply
on:
issues:

View File

@ -1,4 +1,4 @@
name: Insufficient Info
name: Issue Reply
on:
issues:

View File

@ -1,23 +0,0 @@
name: Pull Request Review By ChatGPT
on:
pull_request:
types: [opened, synchronize, reopened]
jobs:
code-review:
name: Code Review
runs-on: ubuntu-latest
steps:
# 判断用户是否有写仓库权限
- name: 'Check User Permission'
uses: 'lannonbr/repo-permission-check-action@2.0.0'
with:
permission: 'write'
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- uses: opensumi/actions/.github/actions/code-review@main
env:
OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}

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

@ -1,4 +1,4 @@
name: Lint & Test (Mods)
name: lint & test
on:
push:

View File

@ -1,4 +1,4 @@
name: Lint & Test (Pkgs)
name: lint & test
on:
push:
@ -42,99 +42,3 @@ jobs:
- name: test
run: cd packages/designer && npm test
test-editor-skeleton:
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-skeleton && npm test
test-renderer-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/renderer-core && npm test
test-react-simulator-renderer:
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/react-simulator-renderer && npm test
test-utils:
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/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

@ -24,6 +24,5 @@
- [Ychangqing](https://github.com/Ychangqing)
- [yize](https://github.com/yize)
- [youluna](https://github.com/youluna)
- [ibreathebsb](https://github.com/ibreathebsb)
如果您贡献过低代码引擎,但是没有看到您的名字,为我们的疏忽感到抱歉。欢迎您通过 PR 补充上自己的名字。

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/>
@ -62,7 +62,7 @@ createLocation(locationData: IPublicTypeLocationData): IPublicModelDropLocation;
```typescript
/**
* 创建一个滚动控制器 Scroller赋予一个视图滚动的基本能力
* a Scroller is a controller that gives a view (IPublicTypeScrollable) the ability scrolling
* a Scroller is a controller that gives a view (IPublicModelScrollable) the ability scrolling
* to some cordination by api scrollTo.
*
* when a scroller is inited, will need to pass is a scrollable, which has a scrollTarget.
@ -70,7 +70,7 @@ createLocation(locationData: IPublicTypeLocationData): IPublicModelDropLocation;
* move scrollTarget`s top-left corner to (options.left, options.top) that passed in.
* @since v1.1.0
*/
createScroller(scrollable: IPublicTypeScrollable): IPublicModelScroller;
createScroller(scrollable: IPublicModelScrollable): IPublicModelScroller;
```

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';
@ -95,17 +95,6 @@ common.utils.startTransaction(() => {
}, IPublicEnumTransitionType.repaint);
```
#### getConvertedExtraKey
props key 转化工具
```typescript
getConvertedExtraKey(key: string): string
```
**@since v1.0.17**
#### createIntl
i18n 相关工具
```typescript
@ -132,8 +121,7 @@ createIntl(instance: string | object): {
**@since v1.0.17**
**示例**
##### 示例
```typescript
import { common } from '@alilc/lowcode-engine';
import enUS from './en-US.json';
@ -146,22 +134,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';
@ -105,17 +105,6 @@ getPreference(): IPublicModelPreference;
**@since v1.1.0**
示例
```javascript
import { config } from '@alilc/lowcode-engine';
const panelName = 'outline-master-pane';
// 设置大纲树面板钉住,在大纲树下次重新打开时生效
config.getPreference().set(`${panelName}-pinned-status-isFloat`, false, 'skeleton')
```
## 事件
### onceGot
@ -134,7 +123,7 @@ config.getPreference().set(`${panelName}-pinned-status-isFloat`, false, 'skeleto
*/
onceGot(key: string): Promise<any>;
```
**示例**
#### 示例
```typescript
import { config } from '@alilc/lowcode-engine';
@ -160,7 +149,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
取消监听事件
@ -56,13 +43,12 @@ off(event: string, listener: (...args: any[]) => void): void;
```typescript
/**
* 触发事件
* emit a message for a event
* 取消监听事件
* cancel a monitor from a event
* @param event 事件名称
* @param args 事件参数
* @returns
* @param listener 事件回调
*/
emit(event: string, ...args: any[]): void;
off(event: string, listener: (...args: any[]) => void): void;
```
## 使用示例

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

@ -29,17 +29,12 @@ sidebar_position: 0
- node-children 节点孩子
- props 属性集
- prop 属性
- setting-field 设置属性
- setting-prop-entry 设置属性
- setting-top-entry 设置属性集
- component-meta 物料元数据
- selection 画布选中
- detecting 画布 hover
- history 操作历史
- window 低代码设计器窗口模型
- detecting 画布节点悬停模型
- modal-nodes-manager 模态节点管理器模型
- plugin-instance 插件实例
- drop-location 拖拽放置位置模型
## API 设计约定

View File

@ -1,6 +1,6 @@
---
title: init - 初始化 API
sidebar_position: 0
sidebar_position: 10
---
> **@since** v1.0.0
@ -9,7 +9,7 @@ sidebar_position: 0
## 模块简介
提供 init 等方法
## 方法
#### init
#### 1. init
初始化引擎
**方法定义**
@ -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';
@ -102,11 +102,11 @@ material.getAssets();
* @param incrementalAssets
* @returns
*/
loadIncrementalAssets(incrementalAssets: IPublicTypeAssetsJson): Promise<void>;
loadIncrementalAssets(incrementalAssets: IPublicTypeAssetsJson): 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';
@ -343,7 +245,6 @@ material.getComponentMeta('Input');
```
#### getComponentMetasMap
获取所有已注册的物料元数据
```typescript
@ -356,22 +257,13 @@ 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';
material.getComponentMetasMap();
```
#### refreshComponentMetasMap
刷新 componentMetasMap可触发模拟器里的 components 重新构建
**@since v1.1.7**
```typescript
refreshComponentMetasMap(): void;
```
### 物料元数据管道函数
#### registerMetadataTransducer
@ -393,7 +285,7 @@ registerMetadataTransducer(
): void;
```
**示例**
##### 示例
给每一个组件的配置添加高级配置面板,其中有一个是否渲染配置项
```typescript
import { material } from '@alilc/lowcode-engine'
@ -438,31 +330,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 +342,7 @@ material.registerMetadataTransducer((transducer) => {
getRegisteredMetadataTransducers(): IPublicTypeMetadataTransducer[];
```
**示例**
##### 示例
```typescript
import { material } from '@alilc/lowcode-engine'
@ -491,12 +358,9 @@ material.getRegisteredMetadataTransducers();
* add callback for assets changed event
* @param fn
*/
onChangeAssets(fn: () => void): IPublicTypeDisposable;
onChangeAssets(fn: () => void): void;
```
相关类型:[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

@ -1,173 +0,0 @@
---
title: ComponentMeta
sidebar_position: 15
---
> **@types** [IPublicModelComponentMeta](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/component-meta.ts)<br/>
> **@since** v1.0.0
## 基本介绍
组件元数据信息模型
## 属性
### componentName
组件名
`@type {string}`
### isContainer
是否是「容器型」组件
`@type {boolean}`
### isMinimalRenderUnit
是否是最小渲染单元
当组件需要重新渲染时:
- 若为最小渲染单元,则只渲染当前组件,
- 若不为最小渲染单元,则寻找到上层最近的最小渲染单元进行重新渲染,直至根节点。
`@type {boolean}`
### isModal
是否为「模态框」组件
`@type {boolean}`
### configure
获取用于设置面板显示用的配置
`@type {IPublicTypeFieldConfig[]}`
相关类型:[IPublicTypeFieldConfig](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/field-config.ts)
### title
标题
`@type {string | IPublicTypeI18nData | ReactElement}`
相关类型:[IPublicTypeI18nData](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/i18n-data.ts)
### icon
图标
`@type {IPublicTypeIconType}`
相关类型:[IPublicTypeIconType](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/icon-type.ts)
### npm
组件 npm 信息
`@type {IPublicTypeNpmInfo}`
相关类型:[IPublicTypeNpmInfo](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/npm-info.ts)
### availableActions
获取元数据
`@type {IPublicTypeTransformedComponentMetadata}`
相关类型:[IPublicTypeTransformedComponentMetadata](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/transformed-component-metadata.ts)
### advanced
组件元数据中高级配置部分
`@type {IPublicTypeAdvanced}`
相关类型:[IPublicTypeAdvanced](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/advanced.ts)
## 方法
### setNpm
设置 npm 信息
```typescript
/**
* 设置 npm 信息
* set method for npm inforamtion
* @param npm
*/
setNpm(npm: IPublicTypeNpmInfo): void;
```
相关类型:[IPublicTypeNpmInfo](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/npm-info.ts)
### getMetadata
获取元数据
```typescript
/**
* 获取元数据
* get component metadata
*/
getMetadata(): IPublicTypeTransformedComponentMetadata;
```
相关类型:[IPublicTypeTransformedComponentMetadata](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/transformed-component-metadata.ts)
### checkNestingUp
检测当前对应节点是否可被放置在父节点中
```typescript
/**
* 检测当前对应节点是否可被放置在父节点中
* check if the current node could be placed in parent node
* @param my 当前节点
* @param parent 父节点
*/
checkNestingUp(my: IPublicModelNode | IPublicTypeNodeData, parent: any): boolean;
```
相关类型:
- [IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
- [IPublicTypeNodeData](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/node-data.ts)
### checkNestingDown
检测目标节点是否可被放置在父节点中
```typescript
/**
* 检测目标节点是否可被放置在父节点中
* check if the target node(s) could be placed in current node
* @param my 当前节点
* @param parent 父节点
*/
checkNestingDown(
my: IPublicModelNode | IPublicTypeNodeData,
target: IPublicTypeNodeSchema | IPublicModelNode | IPublicTypeNodeSchema[],
): boolean;
```
相关类型:
- [IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
- [IPublicTypeNodeData](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/node-data.ts)
- [IPublicTypeNodeSchema](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/node-schema.ts)
### refreshMetadata
刷新元数据,会触发元数据的重新解析和刷新
```typescript
/**
* 刷新元数据,会触发元数据的重新解析和刷新
* refresh metadata
*/
refreshMetadata(): void;
```

View File

@ -139,12 +139,10 @@ importSchema(schema: IPublicTypeRootSchema): void;
* @param stage
* @returns
*/
exportSchema(stage: IPublicEnumTransformStage): IPublicTypeRootSchema | undefined;
exportSchema(stage: IPublicEnumTransformStage): any;
```
相关类型:
- [IPublicEnumTransformStage](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/enum/transform-stage.ts)
- [IPublicTypeRootSchema](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/root-schema.ts)
相关类型:[IPublicEnumTransformStage](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/enum/transform-stage.ts)
### insertNode
@ -222,7 +220,7 @@ checkNesting(
**@since v1.0.16**
### isDetectingNode
判断是否当前节点处于被探测状态
检查拖拽放置的目标节点是否可以放置该拖拽对象
```typescript
/**
@ -329,31 +327,27 @@ onChangeSelection(fn: (ids: string[]) => void): IPublicTypeDisposable;
* set callback for event on visibility changed for certain node
* @param fn
*/
onChangeNodeVisible(fn: (node: IPublicModelNode, visible: boolean) => void): IPublicTypeDisposable;
onChangeNodeVisible(fn: (node: IPublicModelNode, visible: boolean) => void): void;
```
- 相关类型:[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
- 相关类型:[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
相关类型:[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
### onChangeNodeChildren
onChangeNodeChildren(fn: (info?: IPublicTypeOnChangeOptions) => void)
当前 document 的节点 children 变更事件
```typescript
onChangeNodeChildren(fn: (info?: IPublicTypeOnChangeOptions) => void): IPublicTypeDisposable;
```
相关类型:[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
### onChangeNodeProp
当前 document 节点属性修改事件
```typescript
onChangeNodeProp(fn: (info: IPublicTypePropChangeOptions) => void): IPublicTypeDisposable;
onChangeNodeProp(fn: (info: IPublicTypePropChangeOptions) => void)
```
相关类型:[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
### onImportSchema
当前 document 导入新的 schema 事件
```typescript

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

@ -1,21 +0,0 @@
---
title: EditorView
sidebar_position: 12
---
> **[@experimental](./#experimental)**<br/>
> **@types** [IPublicModelEditorView](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/editor-view.ts)<br/>
> **@since** v1.1.7
窗口编辑视图
## 类型定义
```
import { IPublicModelPluginContext } from "./plugin-context";
export interface IPublicModelEditorView extends IPublicModelPluginContext {};
```
相关类型定义: [IPublicModelPluginContext](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/plugin-context.ts)

View File

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

View File

@ -62,11 +62,11 @@ delete(node: IPublicModelNode): boolean;
```typescript
/**
* 插入一个节点
* insert the node
* 删除指定节点
* delete the node
* @param node
*/
insert(node: IPublicModelNode): boolean;
delete(node: IPublicModelNode): boolean;
```
相关类型:[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
@ -156,21 +156,6 @@ forEach(fn: (node: IPublicModelNode, index: number) => void): void;
相关类型:[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
### reverse
类似数组的 reverse
```typescript
/**
* 类似数组的 reverse
* provide the same function with {Array.prototype.reverse}
*/
reverse(): IPublicModelNode[];
```
相关类型:[IPublicModelNode](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/node.ts)
### map

View File

@ -254,8 +254,6 @@ sidebar_position: 1
`@type {IPublicModelSettingTopEntry}`
相关章节:[设置器顶层操作对象](./setting-top-entry)
相关类型:[IPublicModelSettingTopEntry](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/setting-top-entry.ts)
### visible
@ -647,32 +645,3 @@ setConditionalVisible(): void;
```
**@since v1.1.0**
### getDOMNode
获取节点实例对应的 dom 节点
```typescript
/**
* 获取节点实例对应的 dom 节点
*/
getDOMNode(): HTMLElement;
```
### getRGL
获取磁贴相关信息
```typescript
/**
* 获取磁贴相关信息
*/
getRGL(): {
isContainerNode: boolean;
isEmptyNode: boolean;
isRGLContainerNode: boolean;
isRGLNode: boolean;
isRGL: boolean;
rglNode: IPublicModelNode | null;
}
```

View File

@ -4,7 +4,7 @@ sidebar_position: 13
---
> **[@experimental](./#experimental)**<br/>
> **@types** [IPublicModelResource](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/resource.ts)<br/>
> **@types** [IPublicModelWindow](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/resource.ts)<br/>
> **@since** v1.1.0
## 属性
@ -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,342 +0,0 @@
---
title: SettingField
sidebar_position: 6
---
> **@types** [IPublicModelSettingField](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/setting-field.ts)<br/>
## 基本介绍
setter 设置器操作对象
## 属性
#### isGroup
获取设置属性的 isGroup
`@type {boolean}`
#### id
获取设置属性的 id
`@type {string}`
#### name
获取设置属性的 name
`@type {string | number | undefined}`
#### key
获取设置属性的 key
`@type {string | number | undefined}`
#### path
获取设置属性的 path
`@type {(string | number)[]}`
#### title
获取设置属性的 title
`@type {string}`
#### setter
获取设置属性的 setter
`@type {IPublicTypeSetterType | null}`
#### expanded
获取设置属性的 expanded
`@type {boolean}`
#### extraProps
获取设置属性的 extraProps
`@type {IPublicTypeFieldExtraProps}`
#### props
`@type {IPublicModelSettingTopEntry}`
相关章节:[设置器顶层操作对象](./setting-top-entry)
相关类型:[IPublicModelSettingTopEntry](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/setting-top-entry.ts)
#### node
获取设置属性对应的节点实例
`@type {IPublicModelNode | null}`
#### parent
获取设置属性的父设置属性
`@type {IPublicModelSettingTopEntry | IPublicModelSettingField}`
相关章节:[设置器顶层操作对象](./setting-top-entry)
相关类型:[IPublicModelSettingTopEntry](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/setting-top-entry.ts)
#### top
获取顶级设置属性
`@type {IPublicModelSettingTopEntry}`
相关章节:[设置器顶层操作对象](./setting-top-entry)
相关类型:[IPublicModelSettingTopEntry](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/setting-top-entry.ts)
#### isSettingField
是否是 SettingField 实例
`@type {boolean}`
#### componentMeta
`@type {IPublicModelComponentMeta}`
相关类型:[IPublicModelComponentMeta](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/component-meta.ts)
#### items
获取设置属性的 items
`@type {Array<IPublicModelSettingField | IPublicTypeCustomView>}`
相关类型:[IPublicTypeCustomView](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/custom-view.ts)
## 方法
#### setKey
设置 key 值
```
/**
* 设置 key 值
* @param key
*/
setKey(key: string | number): void;
```
#### setValue
设置值
```
/**
* 设置值
* @param val 值
*/
setValue(val: IPublicTypeCompositeValue, extraOptions?: IPublicTypeSetValueOptions): void;
```
相关类型:
- [IPublicTypeCompositeValue](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/composite-value.ts)
- [IPublicTypeSetValueOptions](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/set-value-options.ts)
#### setPropValue
设置子级属性值
```
/**
* 设置子级属性值
* @param propName 子属性名
* @param value 值
*/
setPropValue(propName: string | number, value: any): void;
```
#### clearPropValue
清空指定属性值
```
/**
* 清空指定属性值
* @param propName
*/
clearPropValue(propName: string | number): void;
```
#### getDefaultValue
获取配置的默认值
```
/**
* 获取配置的默认值
* @returns
*/
getDefaultValue(): any;
```
#### getValue
获取值
```
/**
* 获取值
* @returns
*/
getValue(): any;
```
#### getPropValue
获取子级属性值
```
/**
* 获取子级属性值
* @param propName 子属性名
* @returns
*/
getPropValue(propName: string | number): any;
```
#### getExtraPropValue
获取顶层附属属性值
```
/**
* 获取顶层附属属性值
*/
getExtraPropValue(propName: string): any;
```
#### setExtraPropValue
设置顶层附属属性值
```
/**
* 设置顶层附属属性值
*/
setExtraPropValue(propName: string, value: any): void;
```
#### getProps
获取设置属性集
```
/**
* 获取设置属性集
* @returns
*/
getProps(): IPublicModelSettingTopEntry;
```
相关章节:[设置器顶层操作对象](./setting-top-entry)
相关类型:[IPublicModelSettingTopEntry](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/setting-top-entry.ts)
#### isUseVariable
是否绑定了变量
```
/**
* 是否绑定了变量
* @returns
*/
isUseVariable(): boolean;
```
#### setUseVariable
设置绑定变量
```
/**
* 设置绑定变量
* @param flag
*/
setUseVariable(flag: boolean): void;
```
#### createField
创建一个设置 field 实例
```
/**
* 创建一个设置 field 实例
* @param config
* @returns
*/
createField(config: IPublicTypeFieldConfig): IPublicModelSettingField;
```
相关类型:[IPublicTypeFieldConfig](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/field-config.ts)
#### getMockOrValue
获取值,当为变量时,返回 mock
```
/**
* 获取值,当为变量时,返回 mock
* @returns
*/
getMockOrValue(): any;
```
#### purge
销毁当前 field 实例
```
/**
* 销毁当前 field 实例
*/
purge(): void;
```
#### remove
移除当前 field 实例
```
/**
* 移除当前 field 实例
*/
remove(): void;
```
## 事件
#### onEffect
设置 autorun
```
/**
* 设置 autorun
* @param action
* @returns
*/
onEffect(action: () => void): IPublicTypeDisposable;
```
相关类型:[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)

View File

@ -1,74 +0,0 @@
---
title: SettingTopEntry
sidebar_position: 6
---
> **@types** [IPublicModelSettingTopEntry](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/setting-top-entry.ts)<br/>
## 基本介绍
setter 设置器顶层操作对象
## 属性
#### node
返回所属的节点实例
`@type {IPublicModelNode | null}`
## 方法
#### get
获取子级属性对象
```
/**
* 获取子级属性对象
* @param propName
* @returns
*/
get(propName: string | number): IPublicModelSettingField | null;
```
相关章节:[设置器操作对象](./setting-field)
相关类型:[IPublicModelSettingField](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/setting-field.ts)
#### getPropValue
获取指定 propName 的值
```
/**
* 获取指定 propName 的值
* @param propName
* @returns
*/
getPropValue(propName: string | number): any;
```
#### setPropValue
设置指定 propName 的值
```
/**
* 设置指定 propName 的值
* @param propName
* @param value
*/
setPropValue(propName: string | number, value: any): void;
```
#### clearPropValue
清除指定 propName 的值
```
/**
* 清除指定 propName 的值
* @param propName
*/
clearPropValue(propName: string | number): void;
```

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

@ -38,25 +38,6 @@ sidebar_position: 12
关联模型 [IPublicModelResource](./resource)
### currentEditorView
窗口当前视图
`@type {IPublicModelEditorView}`
关联模型 [IPublicModelEditorView](./editor-view)
**@since v1.1.7**
### editorViews
窗口所有视图
`@type {IPublicModelEditorView[]}`
关联模型 [IPublicModelEditorView](./editor-view)
**@since v1.1.7**
## 方法
### importSchema
@ -81,27 +62,3 @@ function changeViewType(viewName: string): void
```typescript
function save(): Promise(void)
```
## 事件
### onChangeViewType
窗口视图变更事件
```
onChangeViewType(fn: (viewName: string) => void): IPublicTypeDisposable;
```
相关类型:[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
### onSave
窗口视图保存事件
```
onSave(fn: () => void): IPublicTypeDisposable;
```
相关类型:[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
**@since v1.1.7**

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
@ -118,13 +118,11 @@ import { IPublicModelPluginContext } from '@alilc/lowcode-types';
const BuiltinPluginRegistry = (ctx: IPublicModelPluginContext, options: any) => {
return {
async init() {
// 直接传值方式:
// 通过 register(xxx, options) 传入
// 通过 options 取出
// 1.0.4 之后的传值方式,通过 register(xxx, options)
// 取值通过 options
// 引擎初始化时也可以设置某插件的全局配置项:
// 通过 engine.init(..., preference) 传入
// 通过 ctx.preference.getValue() 取出
// 1.0.4 之前的传值方式,通过 init(..., preference)
// 取值通过 ctx.preference.getValue()
},
};
}
@ -157,6 +155,7 @@ BuiltinPluginRegistry.meta = {
},
}
// 从 1.0.4 开始,支持直接在 pluginCreator 的第二个参数 options 获取入参
await plugins.register(BuiltinPluginRegistry, { key1: 'abc', key5: 'willNotPassToPlugin' });
```
@ -165,11 +164,8 @@ await plugins.register(BuiltinPluginRegistry, { key1: 'abc', key5: 'willNotPassT
获取指定插件
```typescript
/**
* 获取指定插件
* get plugin instance by name
*/
get(pluginName: string): IPublicModelPluginInstance | null;
function get(pluginName: string): IPublicModelPluginInstance;
```
关联模型 [IPublicModelPluginInstance](./model/plugin-instance)
@ -179,11 +175,8 @@ get(pluginName: string): IPublicModelPluginInstance | null;
获取所有的插件实例
```typescript
/**
* 获取所有的插件实例
* get all plugin instances
*/
getAll(): IPublicModelPluginInstance[];
function getAll(): IPublicModelPluginInstance[];
```
关联模型 [IPublicModelPluginInstance](./model/plugin-instance)
@ -193,11 +186,8 @@ getAll(): IPublicModelPluginInstance[];
判断是否有指定插件
```typescript
/**
* 判断是否有指定插件
* check if plugin with certain name exists
*/
has(pluginName: string): boolean;
function has(pluginName: string): boolean;
```
### delete
@ -205,25 +195,8 @@ has(pluginName: string): boolean;
删除指定插件
```typescript
/**
* 删除指定插件
* delete plugin instance by name
*/
delete(pluginName: string): void;
```
function delete(pluginName: string): void;
### getPluginPreference
引擎初始化时可以提供全局配置给到各插件,通过这个方法可以获得本插件对应的配置
```typescript
/**
* 引擎初始化时可以提供全局配置给到各插件,通过这个方法可以获得本插件对应的配置
* use this to get preference config for this plugin when engine.init() called
*/
getPluginPreference(
pluginName: string,
): Record<string, IPublicTypePreferenceValueType> | null | undefined;
```
## 相关类型定义

View File

@ -1,6 +1,6 @@
---
title: project - 模型 API
sidebar_position: 10
sidebar_position: 3
---
## 模块简介
@ -182,6 +182,19 @@ importSchema(schema?: IPublicTypeProjectSchema): void;
```
相关类型:[IPublicTypeProjectSchema](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/project-schema.ts)
### getCurrentDocument
获取当前的 document
```typescript
/**
* 获取当前的 document
* get current document
* @returns
*/
getCurrentDocument(): IPublicModelDocumentModel | null;
```
相关类型:[IPublicModelDocumentModel](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/document-model.ts)
### addPropsTransducer
增加一个属性的管道处理函数
@ -201,7 +214,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';
@ -239,35 +252,6 @@ setI18n(value: object): void;
**@since v1.0.17**
### setConfig
设置当前项目配置
```typescript
/**
* 设置当前项目配置
* set config for this project
* @param value object
* @since v1.1.4
*/
setConfig(value: IPublicTypeAppConfig): void;
setConfig<T extends keyof IPublicTypeAppConfig>(key: T, value: IPublicTypeAppConfig[T]): void;
```
**@since v1.1.4**
#### 如何扩展项目配置
```typescript
// shims.d.ts
declare module '@alilc/lowcode-types' {
export interface IPublicTypeAppConfig {
customProp: CustomPropType
}
}
export {};
```
## 事件

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
@ -145,7 +145,7 @@ export default class AltStringSetter extends React.PureComponent<AltStringSetter
```typescript
import AltStringSetter from './AltStringSetter';
import { setters } from '@alilc/lowcode-engine';
const { registerSetter } = setters;
const { registerSetter } = registerSetter;
registerSetter('AltStringSetter', AltStringSetter);
```
注册之后,我们就可以在物料中使用了,其中核心配置如下:

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: {
@ -91,7 +90,7 @@ Widget 形式是直接渲染在当前编辑器的对应位置上。如 demo 中
接入可以参考代码:
```javascript
import { skeleton } from "@alilc/lowcode-engine";
import {skeleton} from "@alilc/lowcode-engine";
// 注册 logo 面板
skeleton.add({
area: "topArea",
@ -120,15 +119,18 @@ skeleton.add({
area: "leftArea",
type: "Dock",
name: "opener",
content: Opener, // Widget 组件实例
contentProps: { // Widget 插件 props
xxx: "1",
},
props: {
icon: Icon, // Icon 组件实例
align: "bottom",
onClick: function () {
// 打开外部链接
window.open('https://lowcode-engine.cn');
// 显示 widget
skeleton.showWidget('xxx');
}
},
onClick: function() {
// 打开外部链接
window.open('https://lowcode-engine.cn');
// 显示 widget
skeleton.showWidget('xxx');
}
});
```
@ -157,7 +159,7 @@ IWidgetBaseConfig 定义如下:
| --- | --- | --- |
| name | 面板名称 | |
| area | 扩展区位置,可选值:'topArea' &#124; 'leftArea' &#124; 'rightArea' &#124; 'toolbar' &#124; 'bottomArea' &#124; 'mainArea' | |
| type | 面板类型,可选值:'Widget' &#124; 'PanelDock' &#124; 'Panel' &#124; Dock | 详见前文中对**展示类型**的描述 |
| type | 面板类型,可选值:'Widget' &#124; 'PanelDock' &#124; 'Panel' | 详见前文中对**展示类型**的描述 |
| content | 面板的实现类/节点,类型是 ReactClass &#124; ReactElement | |
| props | 面板属性 | align: 'top' &#124; 'bottom' &#124; 'left' &#124; 'center' &#124; 'right'; // 指定面板 icon 位置区域<br />icon: string &#124; ReactElement;  // icon 为字符串时,请确定当前 fusion 主题包中包含该 icon<br />description: string;<br />condition: Function; // 指定当前面板的显影状态 |
| contentProps | 面板的实现类/节点的参数 | |
@ -179,21 +181,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 +283,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,11 +295,9 @@ export default controlPanelWidthPlugin;
* @param listener
* @returns
*/
onShowPanel(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) => void): IPublicTypeDisposable;
onShowPanel(listener: (...args: any[]) => void): () => void;
```
相关类型:[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
### onHidePanel
监听 Panel 实例隐藏事件
@ -403,38 +309,9 @@ onShowPanel(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) => v
* @param listener
* @returns
*/
onHidePanel(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) => void): IPublicTypeDisposable;
onHidePanel(listener: (...args: any[]) => void): () => void;
```
相关类型:[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,10 +324,9 @@ onEnableWidget(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) =
* @param listener
* @returns
*/
onShowWidget(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) => void): IPublicTypeDisposable;
onShowWidget(listener: (...args: any[]) => void): () => void;
```
相关类型:[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
### onHideWidget
@ -463,11 +339,9 @@ onShowWidget(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) =>
* @param listener
* @returns
*/
onHideWidget(listener: (paneName?: string, panel?: IPublicModelSkeletonItem) => void): IPublicTypeDisposable;
onHideWidget(listener: (...args: any[]) => void): () => void;
```
相关类型:[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
## 使用示例
```typescript
@ -539,7 +413,7 @@ skeleton.disableWidget('sourceEditor');
import { skeleton } from '@alilc/lowcode-engine';
skeleton.add({
name: 'bottomAreaPanelName',
name: 'bottomAreaPanelName',
area: 'bottomArea',
type: 'Panel',
content: () => 'demoText',

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
当前设计器的编辑窗口
@ -79,6 +69,22 @@ registerResourceType(resourceTypeModel: IPublicTypeResourceType): void;
相关类型:[IPublicTypeResourceType](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/resource-type.ts)
### onChangeWindows
窗口新增/删除的事件
```typescript
function onChangeWindows(fn: () => void): void;
```
### onChangeActiveWindow
active 窗口变更事件
```typescript
function onChangeActiveWindow(fn: () => void): void;
```
### setResourceList
设置设计器资源列表数据
@ -87,21 +93,24 @@ 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)
### onResourceListChange
设计器资源列表数据变更事件
```typescript
onResourceListChange(fn: (resourceList: IPublicResourceList): void): (): void;
```
相关类型:[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 +126,7 @@ openEditorWindowById(id: string): void;
移除视图窗口
```typescript
/**
* 移除视图窗口
* @deprecated
*/
removeEditorWindow(resourceName: string, id: string): void;
/**
* 移除视图窗口
*/
removeEditorWindow(resource: Resource): void;
removeEditorWindow(resourceName: string, title: string): void;
```
### removeEditorWindowById
@ -136,37 +136,3 @@ removeEditorWindow(resource: Resource): void;
```typescript
removeEditorWindowById(id: string): void;
```
## 事件
### onChangeWindows
窗口新增/删除的事件
```typescript
function onChangeWindows(fn: () => void): IPublicTypeDisposable;
```
相关类型:[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
### onChangeActiveWindow
active 窗口变更事件
```typescript
function onChangeActiveWindow(fn: () => void): IPublicTypeDisposable;
```
相关类型:[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)
### onResourceListChange
设计器资源列表数据变更事件
```typescript
onResourceListChange(fn: (resourceList: IPublicResourceList): void): (): IPublicTypeDisposable;
```
- 相关类型:[IPublicResourceOptions](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/resource-options.ts)
- 相关类型:[IPublicTypeDisposable](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/type/disposable.ts)

View File

@ -1,15 +1,39 @@
# 官方文章
- [2023/11/09 UIPaaS | 基于 LowCodeEngine 的低代码平台孵化器](https://mp.weixin.qq.com/s/mKuv3_Wvgt5T3AGErUGBQQ)
- [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)
---
title: 低代码引擎相关文章资料
---
## 官方文章
- [低代码多分支协同开发的建设与实践](https://mp.weixin.qq.com/s/DmwxL67htHfTUP1U966N-Q)
- [低代码引擎半岁啦,来跟大家唠唠嗑...](https://segmentfault.com/a/1190000042884409)
- [低代码技术在研发团队的应用模式探讨](https://mp.weixin.qq.com/s/Ynk_wjJbmNw7fEG6UtGZbQ)
- [关于 LowCode&ProCode 混合研发的思考](https://mp.weixin.qq.com/s/TY3VXjkSmsQoT47xma3wig)
- [低代码渲染那些事](https://mp.weixin.qq.com/s/yqYey76qLGYPfDtpGkVFfA)
- [阿里低代码引擎和生态建设实战及思考](https://mp.weixin.qq.com/s/MI6MrUKKydtnSdO4xq6jwA)
- [磁贴布局在钉钉宜搭报表设计引擎中的实现](https://mp.weixin.qq.com/s/PSTut5ahAB8nlJ9kBpBaxw)
- [2B 领域下的低代码探索之路](https://mp.weixin.qq.com/s/HAxrMHLT43dPH488RiEIdw)
- [阿里低代码引擎 LowCodeEngine 正式开源!](https://mp.weixin.qq.com/s/T66LghtWLz2Oh048XqaniA)
## 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

@ -45,13 +45,16 @@ window.Next.Message.success('成功')
- 读取:每次打开面板时,都会尝试读取 schema 中的 originCode 字段,如果没有,则从 schema 上的字段还原代码;
- 写入:在关闭代码编辑面板(主动点击叉或者点击非代码编辑区块的被动关闭都算)时,将自动写入到 schema 中;您也可以在编辑过程中点击“保存”按钮手动保存;
| 源码面板中 | Schema 中 |
| 源码面板中 | schema 中 |
| --- | --- |
| 本地数据初始值设置:![image.png](https://img.alicdn.com/imgextra/i4/O1CN01V6iaTY1gVNHi7gQfK_!!6000000004147-2-tps-370-146.png) | ![image.png](https://img.alicdn.com/imgextra/i2/O1CN010rhIPa268BEfGmzO6_!!6000000007616-2-tps-2098-826.png) |
| 生命周期方法:![image.png](https://img.alicdn.com/imgextra/i4/O1CN010Y1TxV1QOvrVLRUjD_!!6000000001967-2-tps-478-260.png) | ![image.png](https://img.alicdn.com/imgextra/i3/O1CN01pbJzVQ1VSfAL7Lh8G_!!6000000002652-2-tps-2010-836.png) |
| 自定义函数:![image.png](https://img.alicdn.com/imgextra/i4/O1CN01S2gjFk1CU3fm61eiD_!!6000000000083-2-tps-660-642.png) | ![image.png](https://img.alicdn.com/imgextra/i2/O1CN01X35YxU1GUkjj1YWVj_!!6000000000626-2-tps-1862-822.png) |
| 编译前全量代码:![image.png](https://img.alicdn.com/imgextra/i2/O1CN01sbiK9N1kc1Uxp1OHY_!!6000000004703-2-tps-762-1122.png) | ![image.png](https://img.alicdn.com/imgextra/i3/O1CN01adKSg61QXAzRjQ4bm_!!6000000001985-2-tps-1906-796.png) |
| 本地数据初始值设置:
![image.png](https://img.alicdn.com/imgextra/i4/O1CN01V6iaTY1gVNHi7gQfK_!!6000000004147-2-tps-370-146.png) | ![image.png](https://img.alicdn.com/imgextra/i2/O1CN010rhIPa268BEfGmzO6_!!6000000007616-2-tps-2098-826.png) |
| 生命周期方法:
![image.png](https://img.alicdn.com/imgextra/i4/O1CN010Y1TxV1QOvrVLRUjD_!!6000000001967-2-tps-478-260.png) | ![image.png](https://img.alicdn.com/imgextra/i3/O1CN01pbJzVQ1VSfAL7Lh8G_!!6000000002652-2-tps-2010-836.png) |
| 自定义函数:
![image.png](https://img.alicdn.com/imgextra/i4/O1CN01S2gjFk1CU3fm61eiD_!!6000000000083-2-tps-660-642.png) | ![image.png](https://img.alicdn.com/imgextra/i2/O1CN01X35YxU1GUkjj1YWVj_!!6000000000626-2-tps-1862-822.png) |
| 编译前全量代码:
![image.png](https://img.alicdn.com/imgextra/i2/O1CN01sbiK9N1kc1Uxp1OHY_!!6000000004703-2-tps-762-1122.png) | ![image.png](https://img.alicdn.com/imgextra/i3/O1CN01adKSg61QXAzRjQ4bm_!!6000000001985-2-tps-1906-796.png) |
- 异常处理:如果代码解析失败,它将无法被正常保存到 schema 中,此时编辑器会弹层提示:

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 |
@ -42,6 +44,6 @@ sidebar_position: 3
| @alifd/fusion-ui | [https://github.com/alibaba/lowcode-materials](https://github.com/alibaba/lowcode-materials) | packages/fusion-ui |
| @alilc/lowcode-materials | [https://github.com/alibaba/lowcode-materials](https://github.com/alibaba/lowcode-materials) | packages/fusion-lowcode-materials |
| @alilc/antd-lowcode-materials | [https://github.com/alibaba/lowcode-materials](https://github.com/alibaba/lowcode-materials) | packages/antd-lowcode-materials |
| @alifd/layout(原 @alifd/pro-layout 升级后的版本) | [https://github.com/alibaba-fusion/layout](https://github.com/alibaba-fusion/layout) | |
| | | |
| | | |
| | | |

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

@ -1,74 +0,0 @@
---
title: FunctionSetter
---
## 简介
可以将function绑定在物料上
## 设置器返回
设置器返回一个Function对象调用function()运行Function对象得到运行结果。
如下是一个典型的使用案例:
```javascript
export type TestProps = React.ComponentProps<typeof Test> & {
testFunction?: Function | undefined;
};
const getTestData = () => {
if(this.props.testFunction === undefined){
return undefined;
}else{
return this.props.testFunction() // 返回testFunction()方法的运行结果;
}
}
```
## 参数设置
如果需要额外传参,需要将扩展参数设置打开,在代码面板中,编辑参数内容。
注意:
- 额外参数必须被包装成一个对象,如参数模板中所示
- 可以使用动态变量例如 (this.itemsthis.state.xxx)
```javascript
{
testKey: this.state.text,
}
```
- 该参数是额外参数,会加在原有参数后面,例如在 onClick 中加入扩展传参,最终函数消费的时候应该如下所示
```javascript
// e 为 onClick 原有函数传参extParams 为自定义传参
onClick(e, extParams) {
this.setState({
isShowDialog: extParams.isShowDialog,
});
}
```
## 事件新建函数模板
有时候我们创建的函数会有用到一些通用的函数模板,我们可以在物料协议的 meta.ts 中创建一个模板,如下
```TypeScript
{
name: 'onChange',
title: {
label: 'onChange',
tip: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
},
propType: 'func',
setter: [
{
componentName: 'FunctionSetter',
props: {
template: 'onTableChange(value,${extParams}){\n\n}',
},
},
],
}
```
其中 ${extParams} 为扩展参数占位符,如果用户没有声明扩展参数,会移除对应的参数声明。

View File

@ -14,7 +14,7 @@ sidebar_position: 4
| DateYearSetter || 日期型 - 年数据设置器 | |
| [EventSetter](./setterDetails/event) | function | 事件绑定设置器 | ![](https://img.alicdn.com/imgextra/i4/O1CN01qxIYiO1ksVknhTpnW_!!6000000004739-2-tps-1202-1014.png) |
| [IconSetter](./setterDetails/icon) | string | 图标设置器 | ![](https://img.alicdn.com/imgextra/i3/O1CN01zsOMxo1TXaBmjHCRc_!!6000000002392-2-tps-1172-579.png) |
| [FunctionSetter](./setterDetails/function) | function | 函数型数据设置器 | ![](https://img.alicdn.com/imgextra/i4/O1CN01jLiJBo1ZIp7OmDLp0_!!6000000003172-2-tps-794-110.png) |
| FunctionSetter | any | 函数型数据设置器 | ![](https://img.alicdn.com/imgextra/i4/O1CN01jLiJBo1ZIp7OmDLp0_!!6000000003172-2-tps-794-110.png) |
| JsonSetter | object | json 型数据设置器 | ![](https://img.alicdn.com/imgextra/i2/O1CN01mQTFjY1YiBQzWYj64_!!6000000003092-2-tps-1076-1068.png) |
| [MixedSetter](./setterDetails/mixed) | any | 混合型数据设置器 | ![](https://img.alicdn.com/imgextra/i1/O1CN01ZxomFY1JW4j7wIGuQ_!!6000000001035-2-tps-1552-480.png) |
| [NumberSetter](./setterDetails/number) | number | 数值型数据设置器 | ![](https://img.alicdn.com/imgextra/i3/O1CN01dSfSgg1WS2EpbqJIO_!!6000000002786-2-tps-1152-328.png) |

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

@ -336,7 +336,7 @@ simulator-renderer 通过调用 host 的方法,将 schema、components 等参
1. **画布内拖拽:**此时 sensor 是 simulatorHost拖拽完成之后会根据拖拽的位置来完成节点的精确插入。
2. **从组件面板拖拽到画布**:此时的 sensor 还是 simulatorHost因为拖拽结束的目标还是画布。
3. **大纲树面板拖拽到画布中**:此时有两个 sensor一个是大纲树当我们拖拽到画布区域时画布区域内的 simulatorHost 开始接管。
4. **画布拖拽到大纲树中**:从画布中开始拖拽时,最新生效的是 simulatorHost当离开画布到大纲树时大纲树 sensor 开始接管生效。当拖拽到大纲树的某一个节点下时,大纲树会将大纲树中的信息转化为 schema然后渲染到画布中。
4. **画布拖拽到画布中**:从画布中开始拖拽时,最新生效的是 simulatorHost当离开画布到大纲树时大纲树 sensor 开始接管生效。当拖拽到大纲树的某一个节点下时,大纲树会将大纲树中的信息转化为 schema然后渲染到画布中。
### 其他
引擎的编排能力远远不止上述所描述的功能,这里只描述了其核心和关键的功能。在整个引擎的迭代和设计过程中还有很多细节来使我们的引擎更好用、更容易扩展。

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
@ -21,7 +22,7 @@ sidebar_position: 4
![image.png](https://img.alicdn.com/imgextra/i1/O1CN01i4IiSR1cMtUFXaWQq_!!6000000003587-2-tps-1686-1062.png)
- 协议层:基于[《低代码引擎搭建协议规范》](/site/docs/specs/lowcode-spec) 产出的 Schema 作为我们的规范协议。
- 协议层:基于《低代码引擎搭建协议规范》](/site/docs/specs/lowcode-spec) 产出的 Schema 作为我们的规范协议。
- 能力层:提供组件、区块、页面等渲染所需的核心能力,包括 Props 解析、样式注入、条件渲染等。
- 适配层:由于我们使用的运行时框架不是统一的,所以统一使用适配层将不同运行框架的差异部分,通过接口对外,让渲染层注册/适配对应所需的方法。能保障渲染层和能力层直接通过适配层连接起来,能起到独立可扩展的作用。
- 渲染层:提供核心的渲染方法,由于不同运行时框架提供的渲染方法是不同的,所以其通过适配层进行注入,只需要提供适配层所需的接口,即可实现渲染。

View File

@ -32,7 +32,7 @@ sidebar_position: 6
### SettingTarget 抽象
如果不是多选,可以直接暴露 `Node` 给到这,但涉及多选编辑的时候,大家的值通常是不一样的,设置的时候需要批量设置进去,这里主要封装这些逻辑,把多选编辑的复杂性屏蔽掉。
如果不是多选,可以直接暴露 `Node` 给到这,但涉及多选编辑的时候,大家的值通常是不一样的,设置的时候需要批量设置进去,这里主要封装这些逻辑,把多选编辑的复杂性屏蔽掉。
所选节点所构成的**设置对象**抽象如下:

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,155 +0,0 @@
---
title: 图编排扩展
sidebar_position: 8
---
## 项目运行
### 前置准备
1. 参考 https://lowcode-engine.cn/site/docs/guide/quickStart/start
2. 参考至Demo下载 https://lowcode-engine.cn/site/docs/guide/quickStart/start#%E4%B8%8B%E8%BD%BD-demo
### 选择demo-graph-x6
在根目录下执行:
```bash
cd demo-graph-x6
```
### 安装依赖
 lowcode-demo/demo-graph-x6目录下执行
```bash
npm install
```
### 启动Demo
 lowcode-demo/demo-graph-x6 目录下执行
```bash
npm run start
```
之后就可以通过 http://localhost:5556/ 来访问我们的 DEMO 了。
## 认识Demo
这里的Demo即通过图编排引擎加入了几个简单的物料而来已经是可以面向真是用户的产品界面。
![image.png](https://img.alicdn.com/imgextra/i1/O1CN016TbCI31hM2sJy8qkR_!!6000000004262-2-tps-5120-2726.png)
### 区域组成
#### 顶部:操作区​
- 右侧:保存到本地、重置页面、自定义按钮
#### 顶部:工具区
- 左侧:删除、撤销、重做、放大、缩小
#### 左侧:面板与操作区​
- 物料面板:可以查找节点,并在此拖动节点到编辑器画布中
#### 中部:可视化页面编辑画布区域​
- 点击节点/边在右侧面板中能够显示出对应组件的属性配置选项
- 拖拽修改节点的排列顺序
#### 右侧:组件级别配置​
- 选中的组件:从页面开始一直到当前选中的节点/边位置,点击对应的名称可以切换到对应的节点上
- 选中组件的配置:属性:节点的基础属性值设置
> 每个区域的组成都可以被替换和自定义来生成开发者需要的业务产品。
## 目录介绍
![image.png](https://img.alicdn.com/imgextra/i3/O1CN01Luc8gr1tLq5QTbpb9_!!6000000005886-0-tps-832-1522.jpg)
- public与其他demo保持一致均是lowcode engine所必要依赖
- src
- plugins:自定义插件完成了x6的切面回调处理功能
- servicesmock数据真实场景中可能为异步获取数据
## 开发插件
```typescript
function pluginX6DesignerExtension(ctx: IPublicModelPluginContext) {
return {
init() {
// 获取 x6 designer 内置插件的导出 api
const x6Designer = ctx.plugins['plugin-x6-designer'] as IDesigner;
x6Designer.onNodeRender((model, node) => {
// @ts-ignore
// 自定义 node 渲染逻辑
const { name, title } = model.propsData;
node.attr('text/textWrap/text', title || name);
});
x6Designer.onEdgeRender((model, edge) => {
// @ts-ignore
const { source, target, sourcePortId, targetPortId } = model.propsData;
console.log(sourcePortId, targetPortId);
requestAnimationFrame(() => {
edge.setSource({ cell: source, port: sourcePortId });
edge.setTarget({ cell: target, port: targetPortId });
});
// https://x6.antv.vision/zh/docs/tutorial/intermediate/edge-labels x6 标签模块
// appendLabel 会触发 onEdgeLabelRender
edge.appendLabel({
markup: Markup.getForeignObjectMarkup(),
attrs: {
fo: {
width: 120,
height: 30,
x: -60,
y: -15,
},
},
});
});
x6Designer.onEdgeLabelRender((args) => {
const { selectors } = args
const content = selectors.foContent as HTMLDivElement
if (content) {
ReactDOM.render(<div>自定义 react 标签</div>, content)
}
})
}
}
}
pluginX6DesignerExtension.pluginName = 'plugin-x6-designer-extension';
export default pluginX6DesignerExtension;
```
x6Designer为图实例暴露出来的一些接口可基于此进行一些图的必要插件的封装整个插件的封装完全follow低代码引擎的插件详情可参考 https://lowcode-engine.cn/site/docs/guide/expand/editor/pluginWidget
## 开发物料
```bash
npm init @alilc/element your-material-demo
```
![image.png](https://img.alicdn.com/imgextra/i3/O1CN01DCCqO82ADuhS8ztCt_!!6000000008170-2-tps-546-208.png)
仓库初始化完成
![image.png](https://img.alicdn.com/imgextra/i2/O1CN01qK2rUe1JNpdqbdhoW_!!6000000001017-0-tps-5120-2830.jpg)
接下来即可编写物料内容了
图物料与低代码的dom场景存在画布的差异因此暂不支持物料单独调试须通过项目demo进行物料调试
### 资产描述
```bash
npm run lowcode:build
```
如果物料是个React组件则在执行上述命令时会自动生成对应的meta.ts<b>但图物料很多时候并非一个React组件因此须手动生产meta.ts</b>
可参考: https://github.com/alibaba/lowcode-materials/blob/main/packages/graph-x6-materials/lowcode/send-email/meta.ts
同时会自动生成物料描述文件
### 物料调试
#### 物料侧
物料想要支持被项目动态inject调试须在build.lowcode.js中加入
```javascript
[
'@alilc/build-plugin-alt',
{
type: 'component',
inject: true,
library
},
]
```
![image.png](https://img.alicdn.com/imgextra/i4/O1CN01HyXfL12992sDkOmOg_!!6000000008024-0-tps-5120-2824.jpg)
本地启动
```bash
npm run lowcode:dev
```
#### 项目侧
通过@alilc/lce-graph-core加载物料的天然支持了debug因此无须特殊处理。
若项目中自行加载,则参考 https://lowcode-engine.cn/site/docs/guide/expand/editor/cli
项目访问地址后拼接query "?debug"即可进入物料调试
![image.png](https://img.alicdn.com/imgextra/i2/O1CN01ke58hT1aRoYJzkutk_!!6000000003327-2-tps-5120-2790.png)

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,22 +12,23 @@ 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) => {
return {
async init() {
ctx.material.addBuiltinComponentAction({
const { addBuiltinComponentAction } = ctx.material;
addBuiltinComponentAction({
name: 'hello',
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,
@ -53,7 +54,8 @@ import { IPublicModelPluginContext } from '@alilc/lowcode-types';
const removeCopyAction = (ctx: IPublicModelPluginContext) => {
return {
async init() {
ctx.material.removeBuiltinComponentAction('copy');
const { removeBuiltinComponentAction } = ctx.material;
removeBuiltinComponentAction('copy');
}
}
};

View File

@ -172,16 +172,19 @@ skeleton.add({
area: 'leftArea',
type: 'Dock',
name: 'opener',
content: Opener, // Widget 组件实例
contentProps: { // Widget 插件 props
xxx: '1',
},
props: {
icon: Icon, // Icon 组件实例
align: 'bottom',
onClick: function () {
// 打开外部链接
window.open('https://lowcode-engine.cn');
// 显示 widget
skeleton.showWidget('xxx');
}
}
},
onClick: function () {
// 打开外部链接
window.open('https://lowcode-engine.cn');
// 显示 widget
skeleton.showWidget('xxx');
},
});
```

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

@ -23,9 +23,9 @@ sidebar_position: 1
## 如何使用
### 1) 通过命令行快速体验
欢迎使用命令行工具快速体验:`npx @alilc/lowcode-code-generator -i example-schema.json -o generated -s icejs3`
欢迎使用命令行工具快速体验:`npx @alilc/lowcode-code-generator -i example-schema.json -o generated -s icejs`
--其中 example-schema.json 可以从[这里下载](https://alifd.alicdn.com/npm/@alilc/lowcode-code-generator@latest/example-schema.json)
--其中 example-schema.json 可以从[这里下载](https://unpkg.com/@alilc/lowcode-code-generator@beta/example-schema.json)
### 2) 通过设计器插件快速体验
@ -112,7 +112,7 @@ await CodeGenerator.init();
```javascript
const result = await CodeGenerator.generateCode({
solution: 'icejs', // 出码方案 (目前内置有 icejs、icejs3 和 rax )
solution: 'icejs', // 出码方案 (目前内置有 icejs 和 rax )
schema, // 编排搭建出来的 schema
});
@ -124,7 +124,6 @@ console.log(result); // 出码结果 (默认是递归结构描述的,可以传
### 5自定义出码
前端框架灵活多变,默认内置的出码方案很难满足所有人的需求,好在此代码生成器支持非常灵活的插件机制 -- 内置功能大多都是通过插件完成的(在 `src/plugins`下),比如:
![image.png](https://img.alicdn.com/imgextra/i1/O1CN01CEl2Hq1omnH0UCyGF_!!6000000005268-2-tps-457-376.png)
所以您可以通过添加自己的插件或替换掉默认内置的插件来实现您的自定义功能。
为了方便自定义出码方案,出码模块还提供自定义出码方案的脚手架功能,即执行下面脚本即可生成一个自定义出码方案:
```shell

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 终端执行的。**
@ -132,7 +132,7 @@ Demo 根据**不同的设计器所需要的物料不同**,分为了下面的 8
介绍下其中主要的内容
- 设计器入口文件 `src/index.ts` 这个文件做了下述几个事情:
- 设计器入口文件 `source/index.ts` 这个文件做了下述几个事情:
- 通过 plugins.register 注册各种插件,包括官方插件 (已发布 npm 包形式的插件) 和 `plugins` 目录下内置的示例插件
- 通过 init 初始化低代码设计器
- plugins 目录,存放的都是示例插件,方便用户从中看到一个插件是如何实现的

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`
@ -1642,11 +1370,11 @@ path页面路径是浏览器URL的组成部分同时大部分网站的
"i18n": {
"zh-CN": {
"i18n-hello": "你好",
"i18n-chicken": "我有{count}只鸡"
"i18n-chicken": "我有${count}只鸡"
},
"en-US": {
"i18n-hello": "Hello",
"i18n-chicken": "I have {count} chicken"
"i18n-chicken": "I have ${count} chicken"
}
}
}

View File

@ -833,12 +833,11 @@ props 数组下对象字段描述:
| name | 属性名 | String | type = 'field' 生效 |
| defaultValue | 默认值 | Any(视字段类型而定) | type = 'field' 生效 |
| supportVariable | 是否支持配置变量 | Boolean | type = 'field' 生效 |
| condition | 配置当前 prop 是否展示 | (target: IPublicModelSettingField) => boolean; | - |
| ignoreDefaultValue | 配置当前 prop 是否忽略默认值处理逻辑,如果返回值是 true 引擎不会处理默认值 | (target: IPublicModelSettingField) => boolean; | - |
| condition | 配置当前 prop 是否展示 | (target: SettingTarget) => boolean; | - |
| setter | 单个控件 (setter) 描述,搭建基础协议组件的描述对象,支持 JSExpression / JSFunction / JSSlot | `String\|Object\|Function` | type = 'field' 生效 |
| extraProps | 其他配置属性(不做流通要求) | Object | 其他配置 |
| extraProps.getValue | setter 渲染时被调用setter 会根据该函数的返回值设置 setter 当前值 | Function | (target: IPublicModelSettingField, value: any) => any; |
| extraProps.setValue | setter 内容修改时调用,开发者可在该函数内部修改节点 schema 或者进行其他操作 | Function | (target: IPublicModelSettingField, value: any) => void; |
| extraProps.getValue | setter 渲染时被调用setter 会根据该函数的返回值设置 setter 当前值 | Function | (target: SettingTarget, value: any) => any; |
| extraProps.setValue | setter 内容修改时调用,开发者可在该函数内部修改节点 schema 或者进行其他操作 | Function | (target: SettingTarget, value: any) => void; |
根据属性值类型 propType确定对应控件类型 (setter) 。
@ -923,7 +922,7 @@ props 数组下对象字段描述:
| 字段 | 用途 | 类型 | 备注 |
| ------------------------------- | --------------------------------------------------------------------------------------------------- | ------- | --- |
|initialChildren | 组件拖入“设计器”时根据此配置自动生成 children 节点 schema |NodeData[]/Function NodeData[] | ((target: IPublicModelSettingField) => NodeData[]);|
|initialChildren | 组件拖入“设计器”时根据此配置自动生成 children 节点 schema |NodeData[]/Function NodeData[] | ((target: SettingTarget) => NodeData[]);|
|getResizingHandlers| 用于配置设计器中组件 resize 操作工具的样式和内容 | Function| (currentNode: any) => Array<{ type: 'N' | 'W' | 'S' | 'E' | 'NW' | 'NE' | 'SE' | 'SW'; content?: ReactElement; propTarget?: string; appearOn?: 'mouse-enter' | 'mouse-hover' | 'selected' | 'always'; }> / ReactElement[];
|callbacks| 配置 callbacks 可捕获引擎抛出的一些事件,例如 onNodeAdd、onResize 等 | Callback| -
|callbacks.onNodeAdd| 在容器中拖入组件时触发的事件回调 | Function| (e: MouseEvent, currentNode: any) => any
@ -1099,7 +1098,7 @@ export interface Advanced {
/**
* 拖入容器时,自动带入 children 列表
*/
initialChildren?: NodeData[] | ((target: IPublicModelSettingField) => NodeData[]);
initialChildren?: NodeData[] | ((target: SettingTarget) => NodeData[]);
/**
* @todo 待补充文档
*/

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.17",
"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.0-beta.29",
"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

@ -62,17 +62,17 @@
"router": "/"
},
"props": {
"ref": "outerView",
"ref": "outterView",
"autoLoading": true
},
"fileName": "test",
"state": {
"text": "outer"
"text": "outter"
},
"lifeCycles": {
"componentDidMount": {
"type": "JSFunction",
"value": "function componentDidMount() { console.log('componentDidMount'); }"
"type": "JSExpression",
"value": "function() { console.log('componentDidMount'); }"
}
},
"dataSource": {
@ -91,7 +91,7 @@
"isSync": true
},
"dataHandler": {
"type": "JSFunction",
"type": "JSExpression",
"value": "function (response) {\nif (!response.data.success){\n throw new Error(response.data.message);\n }\n return response.data.data;\n}"
}
},
@ -105,13 +105,13 @@
"isSync": true
},
"dataHandler": {
"type": "JSFunction",
"type": "JSExpression",
"value": "function (response) {\nif (!response.data.success){\n throw new Error(response.data.message);\n }\n return response.data.data.result;\n}"
}
}
],
"dataHandler": {
"type": "JSFunction",
"type": "JSExpression",
"value": "function (dataMap) {\n console.info(\"All datasources loaded:\", dataMap);\n}"
}
},

View File

@ -62,17 +62,17 @@
router: '/',
},
props: {
ref: 'outerView',
ref: 'outterView',
autoLoading: true,
},
fileName: 'test',
state: {
text: 'outer',
text: 'outter',
},
lifeCycles: {
componentDidMount: {
type: 'JSFunction',
value: "function componentDidMount() { console.log('componentDidMount'); }",
type: 'JSExpression',
value: "function() { console.log('componentDidMount'); }",
},
},
dataSource: {
@ -91,7 +91,7 @@
isSync: true,
},
dataHandler: {
type: 'JSFunction',
type: 'JSExpression',
value: 'function (response) {\nif (!response.data.success){\n throw new Error(response.data.message);\n }\n return response.data.data;\n}',
},
},
@ -105,13 +105,13 @@
isSync: true,
},
dataHandler: {
type: 'JSFunction',
type: 'JSExpression',
value: 'function (response) {\nif (!response.data.success){\n throw new Error(response.data.message);\n }\n return response.data.data.result;\n}',
},
},
],
dataHandler: {
type: 'JSFunction',
type: 'JSExpression',
value: 'function (dataMap) {\n console.info("All datasources loaded:", dataMap);\n}',
},
},

View File

@ -1,6 +1,6 @@
{
"name": "@alilc/lowcode-code-generator",
"version": "1.1.7",
"version": "1.0.7",
"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",
@ -145,11 +143,5 @@
"publishConfig": {
"access": "public",
"registry": "https://registry.npmjs.org/"
},
"repository": {
"type": "http",
"url": "https://github.com/alibaba/lowcode-engine/tree/main/modules/code-generator"
},
"bugs": "https://github.com/alibaba/lowcode-engine/issues",
"homepage": "https://github.com/alibaba/lowcode-engine/#readme"
}
}

View File

@ -289,8 +289,8 @@ codealike.json
},
"lifeCycles": {
"componentDidMount": {
"type": "JSFunction",
"value": "function componentDidMount() {\\n console.log('componentDidMount');\\n}"
"type": "JSExpression",
"value": "function() { console.log('componentDidMount'); }"
}
},
"methodsModule": {
@ -635,20 +635,18 @@ export default function createHelloWorldProjectBuilder() {
template: CodeGen.solutionParts.icejs.template,
plugins: {
components: [
CodeGen.plugins.icejs.reactCommonDeps(),
CodeGen.plugins.common.esModule({ fileType: 'jsx' }),
CodeGen.plugins.common.styleImport(),
CodeGen.plugins.icejs.containerClass(),
CodeGen.plugins.icejs.containerInjectContext(),
CodeGen.plugins.icejs.containerInjectUtils(),
CodeGen.plugins.icejs.containerInjectDataSourceEngine(),
CodeGen.plugins.icejs.containerInjectI18n(),
CodeGen.plugins.icejs.containerInjectConstants(),
CodeGen.plugins.icejs.containerInitState(),
CodeGen.plugins.icejs.containerLifeCycle(),
CodeGen.plugins.icejs.containerMethod(),
CodeGen.plugins.react.reactCommonDeps(),
CodeGen.plugins.common.esmodule({ fileType: 'jsx' }),
CodeGen.plugins.react.containerClass(),
CodeGen.plugins.react.containerInjectContext(),
CodeGen.plugins.react.containerInjectUtils(),
CodeGen.plugins.react.containerInjectDataSourceEngine(),
CodeGen.plugins.react.containerInjectI18n(),
CodeGen.plugins.react.containerInitState(),
CodeGen.plugins.react.containerLifeCycle(),
CodeGen.plugins.react.containerMethod(),
examplePlugin(),
CodeGen.plugins.icejs.jsx({
CodeGen.plugins.react.jsx({
nodeTypeMapping: {
Div: 'div',
Component: 'div',
@ -659,20 +657,18 @@ export default function createHelloWorldProjectBuilder() {
CodeGen.plugins.style.css(),
],
pages: [
CodeGen.plugins.icejs.reactCommonDeps(),
CodeGen.plugins.common.esModule({ fileType: 'jsx' }),
CodeGen.plugins.common.styleImport(),
CodeGen.plugins.icejs.containerClass(),
CodeGen.plugins.icejs.containerInjectContext(),
CodeGen.plugins.icejs.containerInjectUtils(),
CodeGen.plugins.icejs.containerInjectDataSourceEngine(),
CodeGen.plugins.icejs.containerInjectI18n(),
CodeGen.plugins.icejs.containerInjectConstants(),
CodeGen.plugins.icejs.containerInitState(),
CodeGen.plugins.icejs.containerLifeCycle(),
CodeGen.plugins.icejs.containerMethod(),
CodeGen.plugins.react.reactCommonDeps(),
CodeGen.plugins.common.esmodule({ fileType: 'jsx' }),
CodeGen.plugins.react.containerClass(),
CodeGen.plugins.react.containerInjectContext(),
CodeGen.plugins.react.containerInjectUtils(),
CodeGen.plugins.react.containerInjectDataSourceEngine(),
CodeGen.plugins.react.containerInjectI18n(),
CodeGen.plugins.react.containerInitState(),
CodeGen.plugins.react.containerLifeCycle(),
CodeGen.plugins.react.containerMethod(),
examplePlugin(),
CodeGen.plugins.icejs.jsx({
CodeGen.plugins.react.jsx({
nodeTypeMapping: {
Div: 'div',
Component: 'div',
@ -683,13 +679,13 @@ export default function createHelloWorldProjectBuilder() {
CodeGen.plugins.style.css(),
],
router: [
CodeGen.plugins.common.esModule(),
CodeGen.plugins.common.esmodule(),
CodeGen.solutionParts.icejs.plugins.router(),
],
entry: [CodeGen.solutionParts.icejs.plugins.entry()],
constants: [CodeGen.plugins.project.constants()],
utils: [
CodeGen.plugins.common.esModule(),
CodeGen.plugins.common.esmodule(),
CodeGen.plugins.project.utils('react'),
],
i18n: [CodeGen.plugins.project.i18n()],

View File

@ -8,26 +8,5 @@ export const CONTAINER_TYPE = {
export const SUPPORT_SCHEMA_VERSION_LIST = ['0.0.1', '1.0.0'];
// built-in slot names which have been handled in ProjectBuilder
export const BUILTIN_SLOT_NAMES = [
'pages',
'components',
'router',
'entry',
'appConfig',
'buildConfig',
'constants',
'utils',
'i18n',
'globalStyle',
'htmlEntry',
'packageJSON',
'demo',
];
export const isBuiltinSlotName = function (name: string) {
return BUILTIN_SLOT_NAMES.includes(name);
};
export * from './file';
export * from './generator';

View File

@ -62,9 +62,10 @@ export function createModuleBuilder(
if (options.postProcessors.length > 0) {
files = files.map((file) => {
let { content, ext: type, name } = file;
let { content } = file;
const type = file.ext;
options.postProcessors.forEach((processer) => {
content = processer(content, type, name);
content = processer(content, type);
});
return createResultFile(file.name, type, content);

View File

@ -16,7 +16,6 @@ import { createResultDir, addDirectory, addFile } from '../utils/resultHelper';
import { createModuleBuilder } from './ModuleBuilder';
import { ProjectPreProcessor, ProjectPostProcessor, IContextData } from '../types/core';
import { CodeGeneratorError } from '../types/error';
import { isBuiltinSlotName } from '../const';
interface IModuleInfo {
moduleName?: string;
@ -25,31 +24,22 @@ interface IModuleInfo {
}
export interface ProjectBuilderInitOptions {
/** 项目模板 */
template: IProjectTemplate;
/** 项目插件 */
plugins: IProjectPlugins;
/** 模块后置处理器 */
postProcessors: PostProcessor[];
/** Schema 解析器 */
schemaParser?: ISchemaParser;
/** 项目级别的前置处理器 */
projectPreProcessors?: ProjectPreProcessor[];
/** 项目级别的后置处理器 */
projectPostProcessors?: ProjectPostProcessor[];
/** 是否处于严格模式 */
inStrictMode?: boolean;
/** 一些额外的上下文数据 */
extraContextData?: Record<string, unknown>;
/**
* Hook which is used to customize original options, we can reorder/add/remove plugins/processors
* of the existing solution.
@ -111,6 +101,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,15 +121,11 @@ 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({
extraContextData: {
projectRemark: parseResult?.project?.projectRemark,
template: this.template,
},
});
// Generator Code module
@ -275,8 +263,7 @@ export class ProjectBuilder implements IProjectBuilder {
});
}
// handle extra slots
await this.generateExtraSlots(builders, parseResult, buildResult);
// TODO: 更多 slots 的处理??是不是可以考虑把 template 中所有的 slots 都处理下?
// Post Process
const isSingleComponent = parseResult?.project?.projectRemark?.isSingleComponent;
@ -333,22 +320,6 @@ export class ProjectBuilder implements IProjectBuilder {
return builders;
}
private async generateExtraSlots(
builders: Record<string, IModuleBuilder>,
parseResult: IParseResult,
buildResult: IModuleInfo[],
) {
for (const slotName in this.template.slots) {
if (!isBuiltinSlotName(slotName)) {
const { files } = await builders[slotName].generateModule(parseResult);
buildResult.push({
path: this.template.slots[slotName].path,
files,
});
}
}
}
}
export function createProjectBuilder(initOptions: ProjectBuilderInitOptions): IProjectBuilder {

View File

@ -1,6 +1,6 @@
/**
* Schema
* API API
* API , API
* export { xxx } from 'xx' export * from 'xxx')
* API tests/public
*/
@ -8,8 +8,7 @@ import { createProjectBuilder } from './generator/ProjectBuilder';
import { createModuleBuilder } from './generator/ModuleBuilder';
import { createDiskPublisher } from './publisher/disk';
import { createZipPublisher } from './publisher/zip';
import createIceJsProjectBuilder, { plugins as icejsPlugins } from './solutions/icejs';
import createIceJs3ProjectBuilder, { plugins as icejs3Plugins } from './solutions/icejs3';
import createIceJsProjectBuilder, { plugins as reactPlugins } from './solutions/icejs';
import createRaxAppProjectBuilder, { plugins as raxPlugins } from './solutions/rax-app';
// 引入说明
@ -19,7 +18,6 @@ import { COMMON_CHUNK_NAME, CLASS_DEFINE_CHUNK_NAME, DEFAULT_LINK_AFTER } from '
// 引入通用插件组
import esmodule from './plugins/common/esmodule';
import requireUtils from './plugins/common/requireUtils';
import styleImport from './plugins/common/styleImport';
import css from './plugins/component/style/css';
import constants from './plugins/project/constants';
@ -34,7 +32,6 @@ import * as CONSTANTS from './const';
// 引入内置解决方案模块
import icejs from './plugins/project/framework/icejs';
import icejs3 from './plugins/project/framework/icejs3';
import rax from './plugins/project/framework/rax';
export default {
@ -42,12 +39,10 @@ export default {
createModuleBuilder,
solutions: {
icejs: createIceJsProjectBuilder,
icejs3: createIceJs3ProjectBuilder,
rax: createRaxAppProjectBuilder,
},
solutionParts: {
icejs,
icejs3,
rax,
},
publishers: {
@ -56,7 +51,6 @@ export default {
},
plugins: {
common: {
/**
* ES Module
* @deprecated please use esModule
@ -64,7 +58,12 @@ export default {
esmodule,
esModule: esmodule,
requireUtils,
styleImport,
},
react: {
...reactPlugins,
},
rax: {
...raxPlugins,
},
style: {
css,
@ -74,22 +73,6 @@ export default {
i18n,
utils,
},
icejs: {
...icejsPlugins,
},
icejs3: {
...icejs3Plugins,
},
rax: {
...raxPlugins,
},
/**
* @deprecated please use icejs
*/
react: {
...icejsPlugins,
},
},
postprocessor: {
prettier,

View File

@ -32,7 +32,7 @@ import {
import { SUPPORT_SCHEMA_VERSION_LIST } from '../const';
import { getErrorMessage } from '../utils/errors';
import { handleSubNodes, isValidContainerType, ContainerType } from '../utils/schema';
import { handleSubNodes, isValidContainerType } from '../utils/schema';
import { uniqueArray } from '../utils/common';
import { componentAnalyzer } from '../analyzer/componentAnalyzer';
import { ensureValidClassName } from '../utils/validate';
@ -106,11 +106,6 @@ function processChildren(schema: IPublicTypeNodeSchema): void {
}
}
function getInternalDep(internalDeps: Record<string, IInternalDependency>, depName: string) {
const dep = internalDeps[depName];
return (dep && dep.type !== InternalDependencyType.PAGE) ? dep : null;
}
export class SchemaParser implements ISchemaParser {
validate(schema: IPublicTypeProjectSchema): boolean {
if (SUPPORT_SCHEMA_VERSION_LIST.indexOf(schema.version) < 0) {
@ -166,8 +161,7 @@ export class SchemaParser implements ISchemaParser {
...subRoot,
componentName: getRootComponentName(subRoot.componentName, compDeps),
containerType: subRoot.componentName,
moduleName: ensureValidClassName(subRoot.componentName === ContainerType.Component ?
subRoot.fileName : changeCase.pascalCase(subRoot.fileName)),
moduleName: ensureValidClassName(changeCase.pascalCase(subRoot.fileName)),
};
return container;
});
@ -226,11 +220,12 @@ export class SchemaParser implements ISchemaParser {
}
});
// 分析容器内部组件依赖
containers.forEach((container) => {
const depNames = this.getComponentNames(container);
// eslint-disable-next-line no-param-reassign
container.deps = uniqueArray<string>(depNames, (i: string) => i)
.map((depName) => getInternalDep(internalDeps, depName) || compDeps[depName])
.map((depName) => internalDeps[depName] || compDeps[depName])
.filter(Boolean);
// container.deps = Object.keys(compDeps).map((depName) => compDeps[depName]);
});

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