diff --git a/.gitignore b/.gitignore index 05159f0473..baaa5d8f68 100644 --- a/.gitignore +++ b/.gitignore @@ -108,3 +108,5 @@ typings/ # codealike codealike.json .node + +.turbo \ No newline at end of file diff --git a/package.json b/package.json index 02585e563e..6ba29f8124 100644 --- a/package.json +++ b/package.json @@ -11,9 +11,9 @@ ] }, "scripts": { - "build": "./scripts/build.sh", - "build:npm": "lerna run build --stream", - "build:umd": "lerna run build:umd --stream", + "build": "npm run build:npm && npm run build:umd", + "build:npm": "npx turbo run build", + "build:umd": "npx turbo run build:umd", "clean": "rimraf ./packages/*/lib ./packages/*/es ./packages/*/dist ./packages/*/build", "clean:lib": "rimraf ./node_modules", "lint": "f2elint scan -q -i ./packages/*/src", @@ -42,19 +42,20 @@ } }, "devDependencies": { + "@alilc/lowcode-test-mate": "^1.0.1", + "@types/react-router": "5.1.18", + "babel-jest": "^26.5.2", + "build-plugin-component": "^1.12.0", "del": "^6.1.1", "execa": "^5.1.1", "f2elint": "^2.0.1", "gulp": "^4.0.2", "husky": "^7.0.4", "lerna": "^4.0.0", - "typescript": "4.6.2", - "yarn": "^1.22.17", "rimraf": "^3.0.2", - "@types/react-router": "5.1.18", - "build-plugin-component": "^1.12.0", - "babel-jest": "^26.5.2", - "@alilc/lowcode-test-mate": "^1.0.1" + "turbo": "^1.8.8", + "typescript": "4.6.2", + "yarn": "^1.22.17" }, "engines": { "node": ">=14.17.0 <18" @@ -67,4 +68,4 @@ "typescript": "4.6.2" }, "repository": "git@github.com:alibaba/lowcode-engine.git" -} +} \ No newline at end of file diff --git a/packages/designer/package.json b/packages/designer/package.json index 6350d00fb3..5657fe842d 100644 --- a/packages/designer/package.json +++ b/packages/designer/package.json @@ -15,9 +15,9 @@ }, "license": "MIT", "dependencies": { - "@alilc/lowcode-editor-core": "1.1.5", - "@alilc/lowcode-types": "1.1.5", - "@alilc/lowcode-utils": "1.1.5", + "@alilc/lowcode-editor-core": "workspace:^1.1.5", + "@alilc/lowcode-types": "workspace:^1.1.5", + "@alilc/lowcode-utils": "workspace:^1.1.5", "classnames": "^2.2.6", "react": "^16", "react-dom": "^16.7.0", @@ -53,4 +53,4 @@ "url": "https://github.com/alibaba/lowcode-engine/tree/main/packages/designer" }, "gitHead": "2669f179e6f899d395ce1942d0fe04f9c5ed48a6" -} +} \ No newline at end of file diff --git a/packages/designer/src/builtin-simulator/host.ts b/packages/designer/src/builtin-simulator/host.ts index 91ab1a17b5..3c7bf4ca10 100644 --- a/packages/designer/src/builtin-simulator/host.ts +++ b/packages/designer/src/builtin-simulator/host.ts @@ -14,11 +14,7 @@ import { createModuleEventBus, IEventBus, } from '@alilc/lowcode-editor-core'; -import { - ISimulatorHost, - Component, - DropContainer, -} from '../simulator'; +import { ISimulatorHost, Component, DropContainer } from '../simulator'; import Viewport from './viewport'; import { createSimulator } from './create-simulator'; import { Node, INode, contains, isRootNode, isLowCodeComponent } from '../document'; @@ -363,18 +359,25 @@ export class BuiltinSimulatorHost implements ISimulatorHost void, options?: IReactionOptions, + effect: (reaction: IReactionPublic) => void, + options?: IReactionOptions, ) { this._renderer = renderer; return autorun(effect, options); } - reaction(expression: (reaction: IReactionPublic) => unknown, effect: (value: unknown, prev: unknown, reaction: IReactionPublic) => void, - opts?: IReactionOptions | undefined): IReactionDisposer { + reaction( + expression: (reaction: IReactionPublic) => unknown, + effect: (value: unknown, prev: unknown, reaction: IReactionPublic) => void, + opts?: IReactionOptions | undefined, + ): IReactionDisposer { return reaction(expression, effect, opts); } - autorun(effect: (reaction: IReactionPublic) => void, options?: IReactionOptions): IReactionDisposer { + autorun( + effect: (reaction: IReactionPublic) => void, + options?: IReactionOptions, + ): IReactionDisposer { return autorun(effect, options); } @@ -490,7 +493,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost 0) { // 加载异步 Library await renderer.loadAsyncLibrary(this.asyncLibraryMap); - Object.keys(this.asyncLibraryMap).forEach(key => { + Object.keys(this.asyncLibraryMap).forEach((key) => { delete this.asyncLibraryMap[key]; }); } @@ -517,7 +520,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost 0) { // 加载异步 Library await this.renderer?.loadAsyncLibrary(this.asyncLibraryMap); - Object.keys(this.asyncLibraryMap).forEach(key => { + Object.keys(this.asyncLibraryMap).forEach((key) => { delete this.asyncLibraryMap[key]; }); } @@ -702,10 +705,14 @@ export class BuiltinSimulatorHost implements ISimulatorHost | null { + findDOMNodes( + instance: IPublicTypeComponentInstance, + selector?: string, + ): Array | null { const elements = this._renderer?.findDOMNodes(instance); if (!elements) { return null; @@ -1050,7 +1066,9 @@ export class BuiltinSimulatorHost implements ISimulatorHost | null { + getNodeInstanceFromElement( + target: Element | null, + ): IPublicTypeNodeInstance | null { if (!target) { return null; } @@ -1192,7 +1210,10 @@ export class BuiltinSimulatorHost implements ISimulatorHost { const onMoveHook = node.componentMeta?.advanced.callbacks?.onMoveHook; - const canMove = onMoveHook && typeof onMoveHook === 'function' ? onMoveHook(node.internalToShellNode()) : true; + const canMove = + onMoveHook && typeof onMoveHook === 'function' + ? onMoveHook(e, node?.internalToShellNode()) + : true; let parentContainerNode: INode | null = null; let parentNode = node.parent; @@ -1206,9 +1227,13 @@ export class BuiltinSimulatorHost implements ISimulatorHost node.isLocked); if (lockedNode) return null; - if ( - !dropContainer - ) { + if (!dropContainer) { return null; } @@ -1295,8 +1318,9 @@ export class BuiltinSimulatorHost implements ISimulatorHost 1 ? instances.find( - (_inst) => this.getClosestNodeInstance(_inst, container.id)?.instance === containerInstance, - ) + (_inst) => + this.getClosestNodeInstance(_inst, container.id)?.instance === containerInstance, + ) : instances[0] : null; const rect = inst @@ -1513,10 +1537,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost, - ) { + getNearByContainer({ container, instance }: DropContainer, drillDownExcludes: Set) { const { children } = container; if (!children || children.isEmpty()) { return null; diff --git a/packages/editor-core/package.json b/packages/editor-core/package.json index 3110d9dc1b..3c49fcaadf 100644 --- a/packages/editor-core/package.json +++ b/packages/editor-core/package.json @@ -14,8 +14,8 @@ }, "dependencies": { "@alifd/next": "^1.19.16", - "@alilc/lowcode-types": "1.1.5", - "@alilc/lowcode-utils": "1.1.5", + "@alilc/lowcode-types": "workspace:^1.1.5", + "@alilc/lowcode-utils": "workspace:^1.1.5", "classnames": "^2.2.6", "debug": "^4.1.1", "intl-messageformat": "^9.3.1", @@ -48,4 +48,4 @@ "url": "https://github.com/alibaba/lowcode-engine/tree/main/packages/editor-core" }, "gitHead": "2669f179e6f899d395ce1942d0fe04f9c5ed48a6" -} +} \ No newline at end of file diff --git a/packages/editor-skeleton/package.json b/packages/editor-skeleton/package.json index 365400b700..d27e2dda38 100644 --- a/packages/editor-skeleton/package.json +++ b/packages/editor-skeleton/package.json @@ -18,10 +18,10 @@ ], "dependencies": { "@alifd/next": "^1.20.12", - "@alilc/lowcode-designer": "1.1.5", - "@alilc/lowcode-editor-core": "1.1.5", - "@alilc/lowcode-types": "1.1.5", - "@alilc/lowcode-utils": "1.1.5", + "@alilc/lowcode-designer": "workspace:^1.1.5", + "@alilc/lowcode-editor-core": "workspace:^1.1.5", + "@alilc/lowcode-types": "workspace:^1.1.5", + "@alilc/lowcode-utils": "workspace:^1.1.5", "classnames": "^2.2.6", "react": "^16.8.1", "react-dom": "^16.8.1" @@ -42,4 +42,4 @@ "url": "https://github.com/alibaba/lowcode-engine/tree/main/packages/editor-skeleton" }, "gitHead": "2669f179e6f899d395ce1942d0fe04f9c5ed48a6" -} +} \ No newline at end of file diff --git a/packages/engine/README.md b/packages/engine/README.md index 2d1254e4a5..63b0fec1ff 100644 --- a/packages/engine/README.md +++ b/packages/engine/README.md @@ -1,5 +1,5 @@

- +

@@ -8,7 +8,7 @@
-An enterprise-class low-code technology stack with scale-out design +一套面向扩展设计的企业级低代码技术体系 [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url] @@ -16,53 +16,50 @@ An enterprise-class low-code technology stack with scale-out design [![codecov][codecov-image-url]][codecov-url] -[![](https://img.shields.io/badge/LowCodeEngine-Check%20Your%20Contribution-orange)](https://opensource.alibaba.com/contribution_leaderboard/details?projectValue=lowcode-engine) +[![](https://img.shields.io/badge/LowCodeEngine-%E6%9F%A5%E7%9C%8B%E8%B4%A1%E7%8C%AE%E6%8E%92%E8%A1%8C%E6%A6%9C-orange)](https://opensource.alibaba.com/contribution_leaderboard/details?projectValue=lowcode-engine) [npm-image]: https://img.shields.io/npm/v/@alilc/lowcode-engine.svg?style=flat-square [npm-url]: http://npmjs.org/package/@alilc/lowcode-engine - [download-image]: https://img.shields.io/npm/dm/@alilc/lowcode-engine.svg?style=flat-square [download-url]: https://npmjs.org/package/@alilc/lowcode-engine [help-wanted-image]: https://flat.badgen.net/github/label-issues/alibaba/lowcode-engine/help%20wanted/open [help-wanted-url]: https://github.com/alibaba/lowcode-engine/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22 - [issues-helper-image]: https://img.shields.io/badge/using-issues--helper-orange?style=flat-square [issues-helper-url]: https://github.com/actions-cool/issues-helper - [codecov-image-url]: https://codecov.io/gh/alibaba/lowcode-engine/branch/main/graph/badge.svg [codecov-url]: https://codecov.io/gh/alibaba/lowcode-engine
-[![](https://img.alicdn.com/imgextra/i2/O1CN01UhoS7C1sNNhySvfWi_!!6000000005754-2-tps-2878-1588.png)](http://lowcode-engine.cn) +[![](https://img.alicdn.com/imgextra/i2/O1CN01UhoS7C1sNNhySvfWi_!!6000000005754-2-tps-2878-1588.png)](https://lowcode-engine.cn) -English | [简体中文](./packages/engine/README-zh_CN.md) +简体中文 | [English](./README.md) -## ✨ Features +## ✨ 特性 -- 🌈 An extension-oriented kernel engine extracted from an enterprise-level low-code platform, pursuing the design concept of the smallest kernel and the strongest ecology -- 📦 Out-of-the-box high-quality ecological elements, including material systems, setters, plugins, etc. -- ⚙️ A complete tool chain, supporting the full-link R&D cycle of ecological elements such as material systems, setters, and plug-ins -- 🔌 Powerful expansion capability, has supported nearly 100 various vertical low-code platforms -- 🛡 Developed with TypeScript, providing complete type definition files +- 🌈 提炼自企业级低代码平台的面向扩展设计的内核引擎,奉行最小内核,最强生态的设计理念 +- 📦 开箱即用的高质量生态元素,包括 物料体系、设置器、插件 等 +- ⚙️ 完善的工具链,支持 物料体系、设置器、插件 等生态元素的全链路研发周期 +- 🔌 强大的扩展能力,已支撑 100+ 个各种类型低代码平台 +- 🛡 使用 TypeScript 开发,提供完整的类型定义文件 -## 🎯 Compatible Environments +## 🎯 兼容环境 -- Modern browsers (Chrome >= 80, Edge >= 80, last 2 safari versions, last 2 firefox versions) +- 现代浏览器(Chrome >= 80, Edge >= 80, last 2 safari versions, last 2 firefox versions) -## 📚 Engine Protocol +## 📚 引擎协议 -The engine fully implements the "LowCodeEngine Basic Construction Protocol Specification" and "LowCodeEngine Material Protocol Specification". The protocol stack is a key part of whether materials in the low-code field can be circulated. +引擎完整实现了《低代码引擎搭建协议规范》和《低代码引擎物料协议规范》,协议栈是低代码领域的物料能否流通的关键部分。 ![image](https://img.alicdn.com/imgextra/i3/O1CN01IisBcy1dNBIg16QFM_!!6000000003723-2-tps-1916-1070.png) -## 🌰 Usage example +## 🌰 使用示例 ```bash npm install @alilc/lowcode-engine --save-dev ``` -> **TIPS: Only cdn import is supported, npm package is used to provide code hinting capabilities such as typings** +> **TIPS:仅支持 cdn 方式引入,npm 包用于提供 typings 等代码提示能力** ```ts import { init, skeleton } from '@alilc/lowcode-engine'; @@ -73,8 +70,7 @@ skeleton.add({ name: 'logo', content: YourFantasticLogo, contentProps: { - logo: - 'https://img.alicdn.com/tfs/TB1_SocGkT2gK0jSZFkXXcIQFXa-66-66.png', + logo: 'https://img.alicdn.com/tfs/TB1_SocGkT2gK0jSZFkXXcIQFXa-66-66.png', href: '/', }, props: { @@ -86,7 +82,8 @@ skeleton.add({ init(document.getElementById('lce')); ``` -### Engineering configuration: +### 工程化配置: + ```json { "externals": { @@ -96,52 +93,54 @@ init(document.getElementById('lce')); } ``` -### cdn optional method: -#### Method 1: alifd cdn +### cdn 可选方式: + +#### 方式 1(推荐):alifd cdn + ```html https://alifd.alicdn.com/npm/@alilc/lowcode-engine@1.0.18/dist/js/engine-core.js - https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@1.0.18/dist/js/react-simulator-renderer.js ``` -#### Method 2: uipaas cdn +#### 方式 2(推荐):uipaas cdn + ```html https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.0.18/dist/js/engine-core.js - https://uipaas-assets.com/prod/npm/@alilc/lowcode-react-simulator-renderer/1.0.18/dist/js/react-simulator-renderer.js ``` -#### Method 3: unpkg +#### 方式 3:unpkg + ```html https://unpkg.com/@alilc/lowcode-engine@1.0.18/dist/js/engine-core.js - https://unpkg.com/@alilc/lowcode-react-simulator-renderer@1.0.18/dist/js/react-simulator-renderer.js ``` -#### Method 4: jsdelivr +#### 方式 4:jsdelivr + ```html https://cdn.jsdelivr.net/npm/@alilc/lowcode-engine@1.0.18/dist/js/engine-core.js - https://cdn.jsdelivr.net/npm/@alilc/lowcode-react-simulator-renderer@1.0.18/dist/js/react-simulator-renderer.js ``` -#### Method 5: Use your own cdn -Pass the files under packages/engine/dist and packages/(react|rax)-simulator-renderer/dist in the source code to your cdn provider +#### 方式 5:使用自有 cdn + +将源码中 packages/engine/dist 和 packages/(react|rax)-simulator-renderer/dist 下的文件传至你的 cdn 提供商 -## 🔗 Related Links +## 🔗 相关链接 -- [Official website home page](http://lowcode-engine.cn/) -- [Demo Play Now](http://lowcode-engine.cn/demo) | [Engine Demo Repository](https://github.com/alibaba/lowcode-demo) -- [Official Materials](https://github.com/alibaba/lowcode-materials) -- [official setter](https://github.com/alibaba/lowcode-engine-ext) -- [Official plugin (plugin)](https://github.com/alibaba/lowcode-plugins) -- [Ecological elements (materials, setters, plugins) toolchain](https://lowcode-engine.cn/site/docs/guide/expand/editor/cli) -- [User Documentation](http://lowcode-engine.cn/doc) +- [官网首页](https://lowcode-engine.cn/) +- [Demo 马上玩](https://lowcode-engine.cn/demo) | [引擎 Demo 仓库](https://github.com/alibaba/lowcode-demo) +- [官方物料](https://github.com/alibaba/lowcode-materials) +- [官方设置器(setter)](https://github.com/alibaba/lowcode-engine-ext) +- [官方插件(plugin)](https://github.com/alibaba/lowcode-plugins) +- [生态元素(物料、setter、插件)工具链](https://lowcode-engine.cn/site/docs/guide/expand/editor/cli) +- [用户文档](https://lowcode-engine.cn/doc) - [API](https://lowcode-engine.cn/site/docs/api/) -This [awesome-lowcode-engine](https://github.com/lowcode-workspace/awesome-lowcode-engine) page links to a repository which records all of the tools\materials\solutions that use or built for the lowcode-engine, PR is welcomed. +[awesome-lowcode-engine](https://github.com/lowcode-workspace/awesome-lowcode-engine) 中包含了一系列围绕引擎建设的工具、解决方案等,如果你有类似的解决方案或者工具,欢迎提 PR 到该仓库,让更多人了解到 -## 💻 Local debugging +## 💻 本地调试 ```bash $ git clone git@github.com:alibaba/lowcode-engine.git @@ -151,27 +150,28 @@ $ npm run setup $ npm start ``` -> 📢 npm access speed is slow, Alibaba employees can use tnpm, other students recommend using cnpm or specifying a mirror registry. +> 📢 npm 访问速度较慢,阿里员工可以使用 tnpm,其他同学建议使用 cnpm 或者指定镜像 registry。 > -> 📢 Windows environment must use [WSL](https://docs.microsoft.com/en-us/windows/wsl/install), other terminals are not guaranteed to work normally +> 📢 windows 环境必须使用 [WSL](https://docs.microsoft.com/zh-cn/windows/wsl/install),其他终端不保证能正常运行 + +lowcode-engine 启动后,提供了几个 umd 文件,可以结合 [lowcode-demo](https://github.com/alibaba/lowcode-demo) 项目做调试,文件代理规则参考[这里](https://lowcode-engine.cn/site/docs/participate/prepare#2-配置资源代理)。 -After lowcode-engine is started, several umd files are provided, which can be debugged in combination with the [lowcode-demo](https://github.com/alibaba/lowcode-demo) project. Refer to the file proxy rules [here](https://lowcode-engine.cn/site/docs/participate/prepare). +## 🤝 参与共建 -## 🤝 Participation +请先阅读: -Please read first: -1. [How to configure the engine debugging environment? ](https://lowcode-engine.cn/site/docs/participate/prepare) -2. [About the R&D collaboration process of the engine](https://lowcode-engine.cn/site/docs/participate/flow) -3. [Engineering Configuration of Engine](https://lowcode-engine.cn/site/docs/participate/config) +1. [如何配置引擎调试环境?](https://lowcode-engine.cn/site/docs/participate/prepare) +2. [关于引擎的研发协作流程](https://lowcode-engine.cn/site/docs/participate/flow) +3. [引擎的工程化配置](https://lowcode-engine.cn/site/docs/participate/config) -> Strongly recommend reading ["The Wisdom of Asking Questions"](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way), ["How to Ask Questions to the Open Source Community"](https: //github.com/seajs/seajs/issues/545) and [How to Report Bugs Effectively](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html), [ "How to Submit Unanswerable Questions to Open Source Projects"](https://zhuanlan.zhihu.com/p/25795393), better questions are easier to get help. (This paragraph refers to [antd](https://github.com/ant-design/ant-design)) +> 强烈推荐阅读 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)、[《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545) 和 [《如何有效地报告 Bug》](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html)、[《如何向开源项目提交无法解答的问题》](https://zhuanlan.zhihu.com/p/25795393),更好的问题更容易获得帮助。(此段参考 [antd](https://github.com/ant-design/ant-design)) -About Pull Request: -- set the target branch to **develop** other than **main** +关于提交 PR: +请将目标合并分支设置为 **develop**,不要指定 **main** 分支,在发布正式版本后,develop 分支将会合入 main 分支。 -## ❤️ Contributors +## ❤️ 致谢 -Special thanks to everyone who contributed to this project. +感谢所有为引擎项目贡献力量的同学们~

diff --git a/packages/engine/package.json b/packages/engine/package.json index 723ee40175..e1c91a9c9d 100644 --- a/packages/engine/package.json +++ b/packages/engine/package.json @@ -1,5 +1,5 @@ { - "name": "@alilc/lowcode-engine", + "name": "@ladder/lowcode-engine", "version": "1.1.5", "description": "An enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系", "main": "lib/engine-core.js", @@ -14,14 +14,15 @@ "version:update": "node ./scripts/version.js", "build": "NODE_OPTIONS=--max_old_space_size=8192 build-scripts build --skip-demo", "build:umd": "NODE_OPTIONS=--max_old_space_size=8192 build-scripts build --config build.umd.json", + "prepublishOnly": "npm run build && npm run build:umd", "test": "build-scripts test --config build.test.json --jest-passWithNoTests" }, - "license": "MIT", + "license": "NOLICENSE", "dependencies": { "@alifd/next": "^1.19.12", - "@alilc/lowcode-designer": "1.1.5", - "@alilc/lowcode-editor-core": "1.1.5", - "@alilc/lowcode-editor-skeleton": "1.1.5", + "@alilc/lowcode-designer": "workspace:^1.1.5", + "@alilc/lowcode-editor-core": "workspace:^1.1.5", + "@alilc/lowcode-editor-skeleton": "workspace:^1.1.5", "@alilc/lowcode-engine-ext": "^1.0.0", "@alilc/lowcode-plugin-designer": "1.1.5", "@alilc/lowcode-plugin-outline-pane": "1.1.5", @@ -47,11 +48,11 @@ }, "publishConfig": { "access": "public", - "registry": "https://registry.npmjs.org/" + "registry": "http://verdaccio.lkcoffee.com/" }, "repository": { "type": "http", "url": "https://github.com/alibaba/lowcode-engine/tree/main/packages/engine" }, "gitHead": "2669f179e6f899d395ce1942d0fe04f9c5ed48a6" -} +} \ No newline at end of file diff --git a/packages/engine/src/engine-core.ts b/packages/engine/src/engine-core.ts index b038df8188..8dc59e6f5b 100644 --- a/packages/engine/src/engine-core.ts +++ b/packages/engine/src/engine-core.ts @@ -14,6 +14,7 @@ import { IPublicTypeEngineOptions, IPublicModelDocumentModel, IPublicTypePluginMeta, + IPublicApiPlugins, } from '@alilc/lowcode-types'; import { Designer, @@ -21,11 +22,9 @@ import { ILowCodePluginContextPrivate, ILowCodePluginContextApiAssembler, PluginPreference, + IDesigner, } from '@alilc/lowcode-designer'; -import { - Skeleton as InnerSkeleton, - registerDefaults, -} from '@alilc/lowcode-editor-skeleton'; +import { Skeleton as InnerSkeleton, registerDefaults } from '@alilc/lowcode-editor-skeleton'; import { Workspace as InnerWorkspace, Workbench as WorkSpaceWorkbench, @@ -60,7 +59,11 @@ export * from './modules/skeleton-types'; export * from './modules/designer-types'; export * from './modules/lowcode-types'; -async function registryInnerPlugin(designer: Designer, editor: Editor, plugins: Plugins) { +async function registryInnerPlugin( + designer: IDesigner, + editor: Editor, + plugins: IPublicApiPlugins, +) { // 注册一批内置插件 await plugins.register(OutlinePlugin, {}, { autoInit: true }); await plugins.register(componentMetaParser(designer)); @@ -106,7 +109,11 @@ let plugins: Plugins; const pluginContextApiAssembler: ILowCodePluginContextApiAssembler = { // eslint-disable-next-line @typescript-eslint/no-unused-vars - assembleApis: (context: ILowCodePluginContextPrivate, pluginName: string, meta: IPublicTypePluginMeta) => { + assembleApis: ( + context: ILowCodePluginContextPrivate, + pluginName: string, + meta: IPublicTypePluginMeta, + ) => { context.hotkey = hotkey; context.project = project; context.skeleton = new Skeleton(innerSkeleton, pluginName, false); @@ -164,7 +171,7 @@ export async function init( container?: HTMLElement, options?: IPublicTypeEngineOptions, pluginPreference?: PluginPreference, - ) { +) { await destroy(); let engineOptions = null; if (isPlainObject(container)) { @@ -216,7 +223,7 @@ export async function destroy() { // remove all documents const { documents } = project; if (Array.isArray(documents) && documents.length > 0) { - documents.forEach(((doc: IPublicModelDocumentModel) => project.removeDocument(doc))); + documents.forEach((doc: IPublicModelDocumentModel) => project.removeDocument(doc)); } // TODO: delete plugins except for core plugins diff --git a/packages/engine/tsconfig.json b/packages/engine/tsconfig.json index c37b76ecc6..6d7b7c2273 100644 --- a/packages/engine/tsconfig.json +++ b/packages/engine/tsconfig.json @@ -6,4 +6,4 @@ "include": [ "./src/" ] -} +} \ No newline at end of file diff --git a/packages/plugin-designer/package.json b/packages/plugin-designer/package.json index 1673eab860..fc0207c577 100644 --- a/packages/plugin-designer/package.json +++ b/packages/plugin-designer/package.json @@ -18,9 +18,9 @@ ], "author": "xiayang.xy", "dependencies": { - "@alilc/lowcode-designer": "1.1.5", - "@alilc/lowcode-editor-core": "1.1.5", - "@alilc/lowcode-utils": "1.1.5", + "@alilc/lowcode-designer": "workspace:^1.1.5", + "@alilc/lowcode-editor-core": "workspace:^1.1.5", + "@alilc/lowcode-utils": "workspace:^1.1.5", "react": "^16.8.1", "react-dom": "^16.8.1" }, @@ -38,4 +38,4 @@ "url": "https://github.com/alibaba/lowcode-engine/tree/main/packages/plugin-designer" }, "gitHead": "2669f179e6f899d395ce1942d0fe04f9c5ed48a6" -} +} \ No newline at end of file diff --git a/packages/plugin-outline-pane/package.json b/packages/plugin-outline-pane/package.json index 73aaa01b43..687cc5da0c 100644 --- a/packages/plugin-outline-pane/package.json +++ b/packages/plugin-outline-pane/package.json @@ -13,10 +13,10 @@ }, "dependencies": { "@alifd/next": "^1.19.16", - "@alilc/lowcode-designer": "1.1.5", - "@alilc/lowcode-editor-core": "1.1.5", - "@alilc/lowcode-types": "1.1.5", - "@alilc/lowcode-utils": "1.1.5", + "@alilc/lowcode-designer": "workspace:^1.1.5", + "@alilc/lowcode-editor-core": "workspace:^1.1.5", + "@alilc/lowcode-types": "workspace:^1.1.5", + "@alilc/lowcode-utils": "workspace:^1.1.5", "classnames": "^2.2.6", "react": "^16", "react-dom": "^16.7.0", @@ -41,4 +41,4 @@ "url": "https://github.com/alibaba/lowcode-engine/tree/main/packages/plugin-outline-pane" }, "gitHead": "2669f179e6f899d395ce1942d0fe04f9c5ed48a6" -} +} \ No newline at end of file diff --git a/packages/plugin-outline-pane/src/controllers/pane-controller.ts b/packages/plugin-outline-pane/src/controllers/pane-controller.ts index a02844ad1b..49f2a6e1d4 100644 --- a/packages/plugin-outline-pane/src/controllers/pane-controller.ts +++ b/packages/plugin-outline-pane/src/controllers/pane-controller.ts @@ -100,7 +100,11 @@ export class PaneController implements IPublicModelSensor, ITreeBoard, IPublicTy private _shell: HTMLDivElement | null = null; - constructor(at: string | symbol, pluginContext: IPublicModelPluginContext, treeMaster: TreeMaster) { + constructor( + at: string | symbol, + pluginContext: IPublicModelPluginContext, + treeMaster: TreeMaster, + ) { this.pluginContext = pluginContext; this.treeMaster = treeMaster; this.at = at; @@ -159,7 +163,7 @@ export class PaneController implements IPublicModelSensor, ITreeBoard, IPublicTy const operationalNodes = nodes?.filter((node: any) => { const onMoveHook = node.componentMeta?.advanced.callbacks?.onMoveHook; - const canMove = onMoveHook && typeof onMoveHook === 'function' ? onMoveHook(node) : true; + const canMove = onMoveHook && typeof onMoveHook === 'function' ? onMoveHook(e, node) : true; return canMove; }); @@ -176,7 +180,12 @@ export class PaneController implements IPublicModelSensor, ITreeBoard, IPublicTy const originLoc = document?.dropLocation; const componentMeta = e.dragObject?.nodes ? e.dragObject.nodes[0].componentMeta : null; - if (e.dragObject?.type === 'node' && componentMeta && componentMeta.isModal && document?.focusNode) { + if ( + e.dragObject?.type === 'node' && + componentMeta && + componentMeta.isModal && + document?.focusNode + ) { return canvas.createLocation({ target: document?.focusNode, detail: { @@ -189,9 +198,12 @@ export class PaneController implements IPublicModelSensor, ITreeBoard, IPublicTy }); } - if (originLoc - && ((pos && pos === 'unchanged') || (irect && globalY >= irect.top && globalY <= irect.bottom)) - && dragObject) { + if ( + originLoc && + ((pos && pos === 'unchanged') || + (irect && globalY >= irect.top && globalY <= irect.bottom)) && + dragObject + ) { const loc = originLoc.clone(e); const indented = this.indentTrack.getIndentParent(originLoc, loc); if (indented) { @@ -220,7 +232,7 @@ export class PaneController implements IPublicModelSensor, ITreeBoard, IPublicTy } else { this.dwell.reset(); } - // FIXME: recreate new location + // FIXME: recreate new location } else if ((originLoc.detail as IPublicTypeLocationChildrenDetail).near) { (originLoc.detail as IPublicTypeLocationChildrenDetail).near = undefined; this.dwell.reset(); @@ -287,7 +299,12 @@ export class PaneController implements IPublicModelSensor, ITreeBoard, IPublicTy return false; } const rect = this._shell.getBoundingClientRect(); - return e.globalY >= rect.top && e.globalY <= rect.bottom && e.globalX >= rect.left && e.globalX <= rect.right; + return ( + e.globalY >= rect.top && + e.globalY <= rect.bottom && + e.globalX >= rect.left && + e.globalX <= rect.right + ); } /** @@ -326,7 +343,9 @@ export class PaneController implements IPublicModelSensor, ITreeBoard, IPublicTy if (!rect) { if (tryTimes < 3) { - this.tryScrollAgain = requestIdleCallback(() => this.scrollToNode(treeNode, detail, tryTimes + 1)); + this.tryScrollAgain = requestIdleCallback(() => + this.scrollToNode(treeNode, detail, tryTimes + 1), + ); } return; } @@ -334,7 +353,10 @@ export class PaneController implements IPublicModelSensor, ITreeBoard, IPublicTy const { height, top, bottom } = this.bounds; if (rect.top < top || rect.bottom > bottom) { const opt: any = {}; - opt.top = Math.min(rect.top + rect.height / 2 + scrollTop - top - height / 2, scrollHeight - height); + opt.top = Math.min( + rect.top + rect.height / 2 + scrollTop - top - height / 2, + scrollHeight - height, + ); if (rect.height >= height) { opt.top = Math.min(scrollTop + rect.top - top, opt.top); } @@ -348,7 +370,12 @@ export class PaneController implements IPublicModelSensor, ITreeBoard, IPublicTy /** -------------------- ITreeBoard end -------------------- */ - private getNear(treeNode: TreeNode, e: IPublicModelLocateEvent, originalIndex?: number, originalRect?: DOMRect) { + private getNear( + treeNode: TreeNode, + e: IPublicModelLocateEvent, + originalIndex?: number, + originalRect?: DOMRect, + ) { const { canvas, project } = this.pluginContext; const document = project.getCurrentDocument(); const { globalY, dragObject } = e; @@ -420,7 +447,9 @@ export class PaneController implements IPublicModelSensor, ITreeBoard, IPublicTy index, valid: document?.checkNesting(node.parent!, dragObject as any), near: { node, pos: 'before' }, - focus: checkRecursion(focusNode, dragObject) ? { type: 'node', node: focusNode } : undefined, + focus: checkRecursion(focusNode, dragObject) + ? { type: 'node', node: focusNode } + : undefined, }, }); } @@ -447,12 +476,17 @@ export class PaneController implements IPublicModelSensor, ITreeBoard, IPublicTy index: (index || 0) + 1, valid: document?.checkNesting(node.parent!, dragObject as any), near: { node, pos: 'after' }, - focus: checkRecursion(focusNode, dragObject) ? { type: 'node', node: focusNode } : undefined, + focus: checkRecursion(focusNode, dragObject) + ? { type: 'node', node: focusNode } + : undefined, }, }); } - private drillLocate(treeNode: TreeNode, e: IPublicModelLocateEvent): IPublicModelDropLocation | null { + private drillLocate( + treeNode: TreeNode, + e: IPublicModelLocateEvent, + ): IPublicModelDropLocation | null { const { canvas, project } = this.pluginContext; const document = project.getCurrentDocument(); const { dragObject, globalY } = e; @@ -616,25 +650,34 @@ export class PaneController implements IPublicModelSensor, ITreeBoard, IPublicTy if (!this._shell) { return undefined; } - return this._shell.querySelector(`.tree-node[data-id="${treeNode.id}"]`)?.getBoundingClientRect(); + return this._shell + .querySelector(`.tree-node[data-id="${treeNode.id}"]`) + ?.getBoundingClientRect(); } private getTreeTitleRect(treeNode: TreeNode): DOMRect | undefined { if (!this._shell) { return undefined; } - return this._shell.querySelector(`.tree-node-title[data-id="${treeNode.id}"]`)?.getBoundingClientRect(); + return this._shell + .querySelector(`.tree-node-title[data-id="${treeNode.id}"]`) + ?.getBoundingClientRect(); } private getTreeSlotsRect(treeNode: TreeNode): DOMRect | undefined { if (!this._shell) { return undefined; } - return this._shell.querySelector(`.tree-node-slots[data-id="${treeNode.id}"]`)?.getBoundingClientRect(); + return this._shell + .querySelector(`.tree-node-slots[data-id="${treeNode.id}"]`) + ?.getBoundingClientRect(); } } -function checkRecursion(parent: IPublicModelNode | undefined | null, dragObject: IPublicModelDragObject): boolean { +function checkRecursion( + parent: IPublicModelNode | undefined | null, + dragObject: IPublicModelDragObject, +): boolean { if (!parent) { return false; } diff --git a/packages/rax-renderer/package.json b/packages/rax-renderer/package.json index 366e1673c3..6c6848c325 100644 --- a/packages/rax-renderer/package.json +++ b/packages/rax-renderer/package.json @@ -30,8 +30,10 @@ "build": "build-scripts build" }, "dependencies": { - "@alilc/lowcode-renderer-core": "1.1.5", - "@alilc/lowcode-utils": "1.1.5", + "@alilc/lowcode-renderer-core": "workspace:^1.1.5", + "@alilc/lowcode-utils": "workspace:^1.1.5", + "prop-types": "^15.7.2", + "rax": "^1.2.3", "rax-find-dom-node": "^1.0.1" }, "devDependencies": { @@ -50,4 +52,4 @@ "license": "MIT", "homepage": "https://unpkg.alibaba-inc.com/@alilc/lowcode-rax-renderer@0.1.2/build/index.html", "gitHead": "2669f179e6f899d395ce1942d0fe04f9c5ed48a6" -} +} \ No newline at end of file diff --git a/packages/rax-simulator-renderer/package.json b/packages/rax-simulator-renderer/package.json index 87f2290553..9a1e579c21 100644 --- a/packages/rax-simulator-renderer/package.json +++ b/packages/rax-simulator-renderer/package.json @@ -13,10 +13,12 @@ "build:umd": "build-scripts build --config build.umd.json" }, "dependencies": { - "@alilc/lowcode-designer": "1.1.5", + "@alilc/lowcode-designer": "workspace:^1.1.5", + "@alilc/lowcode-editor-core": "workspace:^1.1.5", "@alilc/lowcode-rax-renderer": "1.1.5", - "@alilc/lowcode-types": "1.1.5", - "@alilc/lowcode-utils": "1.1.5", + "@alilc/lowcode-types": "workspace:^1.1.5", + "@alilc/lowcode-utils": "workspace:^1.1.5", + "@babel/runtime": "^7.21.0", "classnames": "^2.2.6", "driver-universal": "^3.1.3", "history": "^5.0.0", @@ -26,7 +28,8 @@ "path-to-regexp": "3.2.0", "rax-find-dom-node": "^1.0.0", "react": "^16", - "react-dom": "^16.7.0" + "react-dom": "^16.7.0", + "tslib": "^2.5.0" }, "devDependencies": { "@alib/build-scripts": "^0.1.18", @@ -51,4 +54,4 @@ }, "homepage": "https://unpkg.alibaba-inc.com/@alilc/lowcode-rax-simulator-renderer@1.0.73/build/index.html", "gitHead": "2669f179e6f899d395ce1942d0fe04f9c5ed48a6" -} +} \ No newline at end of file diff --git a/packages/react-renderer/package.json b/packages/react-renderer/package.json index d0cd2dc2ca..8a458773d4 100644 --- a/packages/react-renderer/package.json +++ b/packages/react-renderer/package.json @@ -22,7 +22,7 @@ ], "dependencies": { "@alifd/next": "^1.21.16", - "@alilc/lowcode-renderer-core": "1.1.5" + "@alilc/lowcode-renderer-core": "workspace:^1.1.5" }, "devDependencies": { "@alib/build-scripts": "^0.1.18", @@ -43,4 +43,4 @@ }, "homepage": "https://unpkg.alibaba-inc.com/@alilc/lowcode-react-renderer@1.0.21/build/index.html", "gitHead": "2669f179e6f899d395ce1942d0fe04f9c5ed48a6" -} +} \ No newline at end of file diff --git a/packages/react-simulator-renderer/package.json b/packages/react-simulator-renderer/package.json index 43c58581e3..929b146172 100644 --- a/packages/react-simulator-renderer/package.json +++ b/packages/react-simulator-renderer/package.json @@ -1,6 +1,6 @@ { - "name": "@alilc/lowcode-react-simulator-renderer", - "version": "1.1.5", + "name": "@ladder/lowcode-react-simulator-renderer", + "version": "1.0.7", "description": "react simulator renderer for alibaba lowcode designer", "main": "lib/index.js", "module": "es/index.js", @@ -14,18 +14,22 @@ "test": "build-scripts test --config build.test.json", "build": "NODE_OPTIONS=--max_old_space_size=8192 build-scripts build --skip-demo", "build:umd": "NODE_OPTIONS=--max_old_space_size=8192 build-scripts build --config build.umd.json", - "test:cov": "build-scripts test --config build.test.json --jest-coverage" + "test:cov": "build-scripts test --config build.test.json --jest-coverage", + "prepublishOnly": "npm run build && npm run build:umd" }, "dependencies": { - "@alilc/lowcode-designer": "1.1.5", - "@alilc/lowcode-react-renderer": "1.1.5", - "@alilc/lowcode-types": "1.1.5", - "@alilc/lowcode-utils": "1.1.5", + "@alilc/lowcode-designer": "1.1.6", + "@alilc/lowcode-react-renderer": "1.1.6", + "@alilc/lowcode-types": "1.1.6", + "@alilc/lowcode-utils": "1.1.6", "classnames": "^2.2.6", + "history": "^5.0.0", "mobx": "^6.3.0", "mobx-react": "^7.2.0", "react": "^16", - "react-dom": "^16.7.0" + "react-dom": "^16.7.0", + "react-router": "5", + "tslib": "^2.5.0" }, "devDependencies": { "@alib/build-scripts": "^0.1.18", @@ -37,11 +41,11 @@ }, "publishConfig": { "access": "public", - "registry": "https://registry.npmjs.org/" + "registry": "http://verdaccio.lkcoffee.com/" }, "repository": { "type": "http", "url": "https://github.com/alibaba/lowcode-engine/tree/main/packages/react-simulator-renderer" }, "gitHead": "2669f179e6f899d395ce1942d0fe04f9c5ed48a6" -} +} \ No newline at end of file diff --git a/packages/react-simulator-renderer/src/renderer-view.tsx b/packages/react-simulator-renderer/src/renderer-view.tsx index e8c7ce52e6..1cc6450f5c 100644 --- a/packages/react-simulator-renderer/src/renderer-view.tsx +++ b/packages/react-simulator-renderer/src/renderer-view.tsx @@ -11,10 +11,15 @@ import { host } from './host'; import { isRendererDetached } from './utils/misc'; import './renderer.less'; import { createIntl } from './locale'; +import { transformPxToRem } from './utils/px2rem'; // patch cloneElement avoid lost keyProps const originCloneElement = window.React.cloneElement; -(window as any).React.cloneElement = (child: any, { _leaf, ...props }: any = {}, ...rest: any[]) => { +(window as any).React.cloneElement = ( + child: any, + { _leaf, ...props }: any = {}, + ...rest: any[] +) => { if (child.ref && props.ref) { const dRef = props.ref; const cRef = child.ref; @@ -46,7 +51,9 @@ const originCloneElement = window.React.cloneElement; return originCloneElement(child, props, ...rest); }; -export default class SimulatorRendererView extends Component<{ rendererContainer: SimulatorRendererContainer }> { +export default class SimulatorRendererView extends Component<{ + rendererContainer: SimulatorRendererContainer; +}> { render() { const { rendererContainer } = this.props; return ( @@ -70,7 +77,13 @@ export class Routes extends Component<{ rendererContainer: SimulatorRendererCont } + render={(routeProps) => ( + + )} /> ); })} @@ -106,7 +119,11 @@ class Layout extends Component<{ rendererContainer: SimulatorRendererContainer } if (layout) { const { Component, props, componentName } = layout; if (Component) { - return {children}; + return ( + + {children} + + ); } if (componentName && rendererContainer.getComponent(componentName)) { return createElement( @@ -195,6 +212,7 @@ class Renderer extends Component<{ thisRequiredInJSE={host.thisRequiredInJSE} notFoundComponent={host.notFoundComponent} faultComponent={host.faultComponent} + faultComponentMap={host.faultComponentMap} customCreateElement={(Component: any, props: any, children: any) => { const { __id, ...viewProps } = props; viewProps.componentId = __id; @@ -204,6 +222,7 @@ class Renderer extends Component<{ } viewProps._componentName = leaf?.componentName; // 如果是容器 && 无children && 高宽为空 增加一个占位容器,方便拖动 + if ( !viewProps.dataSource && leaf?.isContainer() && @@ -218,7 +237,10 @@ class Renderer extends Component<{ defaultPlaceholder = intl('Locked elements and child elements cannot be edited'); } children = ( -

+
{viewProps.placeholder || defaultPlaceholder}
); @@ -251,10 +273,19 @@ class Renderer extends Component<{ return null; } + // px转化为rem + viewProps.style = transformPxToRem(viewProps.style); + return createElement( getDeviceView(Component, device, designMode), viewProps, - leaf?.isContainer() ? (children == null ? [] : Array.isArray(children) ? children : [children]) : children, + leaf?.isContainer() + ? children == null + ? [] + : Array.isArray(children) + ? children + : [children] + : children, ); }} __host={host} diff --git a/packages/react-simulator-renderer/src/renderer.less b/packages/react-simulator-renderer/src/renderer.less index 8f01193531..acc8976302 100644 --- a/packages/react-simulator-renderer/src/renderer.less +++ b/packages/react-simulator-renderer/src/renderer.less @@ -90,6 +90,7 @@ body.engine-document { #app { height: 100vh; + margin-right: calc(100% - 100vw); } diff --git a/packages/react-simulator-renderer/src/renderer.ts b/packages/react-simulator-renderer/src/renderer.ts index b3ba1df247..4c53c2e702 100644 --- a/packages/react-simulator-renderer/src/renderer.ts +++ b/packages/react-simulator-renderer/src/renderer.ts @@ -17,15 +17,26 @@ import { AssetLoader, getProjectUtils, } from '@alilc/lowcode-utils'; -import { IPublicTypeComponentSchema, IPublicEnumTransformStage, IPublicTypeNodeInstance, IPublicTypeProjectSchema } from '@alilc/lowcode-types'; +import { + IPublicTypeComponentSchema, + IPublicEnumTransformStage, + IPublicTypeNodeInstance, + IPublicTypeProjectSchema, +} from '@alilc/lowcode-types'; // just use types -import { BuiltinSimulatorRenderer, Component, IDocumentModel, INode } from '@alilc/lowcode-designer'; +import { + BuiltinSimulatorRenderer, + Component, + IDocumentModel, + INode, +} from '@alilc/lowcode-designer'; import LowCodeRenderer from '@alilc/lowcode-react-renderer'; import { createMemoryHistory, MemoryHistory } from 'history'; import Slot from './builtin-components/slot'; import Leaf from './builtin-components/leaf'; import { withQueryParams, parseQuery } from './utils/url'; import { merge } from 'lodash'; +import { transformPxToRem } from './utils/px2rem'; const loader = new AssetLoader(); configure({ enforceActions: 'never' }); @@ -170,15 +181,14 @@ export class DocumentInstance { host.setInstance(this.document.id, id, instances); } - mountContext() { - } + mountContext() {} getNode(id: string): INode | null { return this.document.getNode(id); } dispose() { - this.disposeFunctions.forEach(fn => fn()); + this.disposeFunctions.forEach((fn) => fn()); this.instancesMap = new Map(); } } @@ -252,57 +262,63 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer { makeObservable(this); this.autoRender = host.autoRender; - this.disposeFunctions.push(host.connect(this, () => { - // sync layout config - this._layout = host.project.get('config').layout; - - // todo: split with others, not all should recompute - if (this._libraryMap !== host.libraryMap - || this._componentsMap !== host.designer.componentsMap) { - this._libraryMap = host.libraryMap || {}; - this._componentsMap = host.designer.componentsMap; - this.buildComponents(); - } + this.disposeFunctions.push( + host.connect(this, () => { + // sync layout config + this._layout = host.project.get('config').layout; + + // todo: split with others, not all should recompute + if ( + this._libraryMap !== host.libraryMap || + this._componentsMap !== host.designer.componentsMap + ) { + this._libraryMap = host.libraryMap || {}; + this._componentsMap = host.designer.componentsMap; + this.buildComponents(); + } - // sync designMode - this._designMode = host.designMode; + // sync designMode + this._designMode = host.designMode; - this._locale = host.locale; + this._locale = host.locale; - // sync requestHandlersMap - this._requestHandlersMap = host.requestHandlersMap; + // sync requestHandlersMap + this._requestHandlersMap = host.requestHandlersMap; - // sync device - this._device = host.device; - })); + // sync device + this._device = host.device; + }), + ); const documentInstanceMap = new Map(); let initialEntry = '/'; let firstRun = true; - this.disposeFunctions.push(host.autorun(() => { - this._documentInstances = host.project.documents.map((doc) => { - let inst = documentInstanceMap.get(doc.id); - if (!inst) { - inst = new DocumentInstance(this, doc); - documentInstanceMap.set(doc.id, inst); + this.disposeFunctions.push( + host.autorun(() => { + this._documentInstances = host.project.documents.map((doc) => { + let inst = documentInstanceMap.get(doc.id); + if (!inst) { + inst = new DocumentInstance(this, doc); + documentInstanceMap.set(doc.id, inst); + } + return inst; + }); + const path = host.project.currentDocument + ? documentInstanceMap.get(host.project.currentDocument.id)!.path + : '/'; + if (firstRun) { + initialEntry = path; + firstRun = false; + } else if (this.history.location.pathname !== path) { + this.history.replace(path); } - return inst; - }); - const path = host.project.currentDocument - ? documentInstanceMap.get(host.project.currentDocument.id)!.path - : '/'; - if (firstRun) { - initialEntry = path; - firstRun = false; - } else if (this.history.location.pathname !== path) { - this.history.replace(path); - } - })); + }), + ); const history = createMemoryHistory({ initialEntries: [initialEntry], }); this.history = history; - history.listen((location) => { - const docId = location.pathname.slice(1); + history.listen((update) => { + const docId = update.location.pathname.slice(1); docId && host.project.open(docId); }); host.componentsConsumer.consume(async (componentsAsset) => { @@ -361,10 +377,10 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer { private buildComponents() { this._components = buildComponents( - this._libraryMap, - this._componentsMap, - this.createComponent.bind(this), - ); + this._libraryMap, + this._componentsMap, + this.createComponent.bind(this), + ); this._components = { ...builtinComponents, ...this._components, @@ -402,7 +418,10 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer { } } - getClosestNodeInstance(from: ReactInstance, nodeId?: string): IPublicTypeNodeInstance | null { + getClosestNodeInstance( + from: ReactInstance, + nodeId?: string, + ): IPublicTypeNodeInstance | null { return getClosestNodeInstance(from, nodeId); } @@ -465,6 +484,7 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer { rendererName: 'LowCodeRenderer', thisRequiredInJSE: host.thisRequiredInJSE, faultComponent: host.faultComponent, + faultComponentMap: host.faultComponentMap, customCreateElement: (Comp: any, props: any, children: any) => { const componentMeta = host.currentDocument?.getComponentMeta(Comp.displayName); if (componentMeta?.isModal) { @@ -477,6 +497,9 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer { isEmpty: () => false, isMock: true, }; + // px转化为rem + viewProps.style = transformPxToRem(props.style); + viewProps._leaf = _leaf; return createElement(Comp, viewProps, children); }, @@ -549,9 +572,10 @@ function cacheReactKey(el: Element): Element { return el; } // react17 采用 __reactFiber 开头 - REACT_KEY = Object.keys(el).find( - (key) => key.startsWith('__reactInternalInstance$') || key.startsWith('__reactFiber$'), - ) || ''; + REACT_KEY = + Object.keys(el).find( + (key) => key.startsWith('__reactInternalInstance$') || key.startsWith('__reactFiber$'), + ) || ''; if (!REACT_KEY && (el as HTMLElement).parentElement) { return cacheReactKey((el as HTMLElement).parentElement!); } @@ -562,9 +586,9 @@ const SYMBOL_VNID = Symbol('_LCNodeId'); const SYMBOL_VDID = Symbol('_LCDocId'); function getClosestNodeInstance( - from: ReactInstance, - specId?: string, - ): IPublicTypeNodeInstance | null { + from: ReactInstance, + specId?: string, +): IPublicTypeNodeInstance | null { let el: any = from; if (el) { if (isElement(el)) { @@ -594,7 +618,10 @@ function getClosestNodeInstance( return null; } -function getNodeInstance(fiberNode: any, specId?: string): IPublicTypeNodeInstance | null { +function getNodeInstance( + fiberNode: any, + specId?: string, +): IPublicTypeNodeInstance | null { const instance = fiberNode?.stateNode; if (instance && SYMBOL_VNID in instance) { const nodeId = instance[SYMBOL_VNID]; @@ -629,6 +656,7 @@ function getLowCodeComponentProps(props: any) { } newProps[k] = props[k]; }); + newProps['componentName'] = props['_componentName']; return newProps; } diff --git a/packages/react-simulator-renderer/src/utils/px2rem.ts b/packages/react-simulator-renderer/src/utils/px2rem.ts new file mode 100644 index 0000000000..522418f1d2 --- /dev/null +++ b/packages/react-simulator-renderer/src/utils/px2rem.ts @@ -0,0 +1,12 @@ +export const transformPxToRem = (styleData: Record = {}) => { + const style: Record = {}; + Object.keys(styleData).forEach((key) => { + const val = styleData[key]; + if (/px$/.test(val)) { + style[key] = `${parseFloat(val) / 50}rem`; + } else { + style[key] = val; + } + }); + return style; +}; diff --git a/packages/renderer-core/package.json b/packages/renderer-core/package.json index 75c407a202..29afabb02a 100644 --- a/packages/renderer-core/package.json +++ b/packages/renderer-core/package.json @@ -16,8 +16,9 @@ }, "dependencies": { "@alilc/lowcode-datasource-engine": "^1.0.0", - "@alilc/lowcode-types": "1.1.5", - "@alilc/lowcode-utils": "1.1.5", + "@alilc/lowcode-types": "workspace:^1.1.5", + "@alilc/lowcode-utils": "workspace:^1.1.5", + "@babel/runtime": "^7.21.0", "classnames": "^2.2.6", "debug": "^4.1.1", "fetch-jsonp": "^1.1.3", @@ -56,4 +57,4 @@ "url": "https://github.com/alibaba/lowcode-engine/tree/main/packages/renderer-core" }, "gitHead": "2669f179e6f899d395ce1942d0fe04f9c5ed48a6" -} +} \ No newline at end of file diff --git a/packages/shell/package.json b/packages/shell/package.json index 669bd3de14..9d3fc65a9e 100644 --- a/packages/shell/package.json +++ b/packages/shell/package.json @@ -15,12 +15,12 @@ }, "license": "MIT", "dependencies": { - "@alilc/lowcode-designer": "1.1.5", - "@alilc/lowcode-editor-core": "1.1.5", - "@alilc/lowcode-editor-skeleton": "1.1.5", - "@alilc/lowcode-types": "1.1.5", - "@alilc/lowcode-utils": "1.1.5", - "@alilc/lowcode-workspace": "1.1.5", + "@alilc/lowcode-designer": "workspace:^1.1.5", + "@alilc/lowcode-editor-core": "workspace:^1.1.5", + "@alilc/lowcode-editor-skeleton": "workspace:^1.1.5", + "@alilc/lowcode-types": "workspace:^1.1.5", + "@alilc/lowcode-utils": "workspace:^1.1.5", + "@alilc/lowcode-workspace": "workspace:^1.1.5", "classnames": "^2.2.6", "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.15.5", @@ -51,4 +51,4 @@ "url": "https://github.com/alibaba/lowcode-engine/tree/main/packages/shell" }, "gitHead": "2669f179e6f899d395ce1942d0fe04f9c5ed48a6" -} +} \ No newline at end of file diff --git a/packages/types/src/shell/type/metadata.ts b/packages/types/src/shell/type/metadata.ts index 7ed9dc6be6..fca43c3ad2 100644 --- a/packages/types/src/shell/type/metadata.ts +++ b/packages/types/src/shell/type/metadata.ts @@ -1,18 +1,25 @@ import { MouseEvent } from 'react'; import { IPublicTypePropType, IPublicTypeComponentAction } from './'; -import { IPublicModelNode, IPublicModelProp, IPublicModelSettingField } from '../model'; +import { + IPublicModelLocateEvent, + IPublicModelNode, + IPublicModelProp, + IPublicModelSettingField, +} from '../model'; /** * 嵌套控制函数 */ -export type IPublicTypeNestingFilter = (testNode: any, currentNode: any) => boolean; +export type IPublicTypeNestingFilter = ( + testNode: any, + currentNode: any, +) => boolean; /** * 嵌套控制 * 防止错误的节点嵌套,比如 a 嵌套 a, FormField 只能在 Form 容器下,Column 只能在 Table 下等 */ export interface IPublicTypeNestingRule { - /** * 子级白名单 */ @@ -43,7 +50,6 @@ export interface IPublicTypeNestingRule { * 组件能力配置 */ export interface IPublicTypeComponentConfigure { - /** * 是否容器组件 */ @@ -110,7 +116,6 @@ export interface IPublicTypeAutorunItem { * Live Text Editing(如果 children 内容是纯文本,支持双击直接编辑)的可配置项目 */ export interface IPublicTypeLiveTextEditingConfig { - /** * @todo 待补充文档 */ @@ -133,17 +138,18 @@ export interface IPublicTypeLiveTextEditingConfig { onSaveContent?: (content: string, prop: any) => any; } -export type ConfigureSupportEvent = string | { - name: string; - propType?: IPublicTypePropType; - description?: string; -}; +export type ConfigureSupportEvent = + | string + | { + name: string; + propType?: IPublicTypePropType; + description?: string; + }; /** * 通用扩展面板支持性配置 */ export interface ConfigureSupport { - /** * 支持事件列表 */ @@ -185,19 +191,34 @@ export interface ConfigureSupport { */ export interface IPublicTypeCallbacks { // hooks - onMouseDownHook?: (e: MouseEvent, currentNode: IPublicModelNode | null) => any; + onMouseDownHook?: ( + e: MouseEvent, + currentNode: IPublicModelNode | null, + ) => any; onDblClickHook?: (e: MouseEvent, currentNode: IPublicModelNode | null) => any; onClickHook?: (e: MouseEvent, currentNode: IPublicModelNode | null) => any; // onLocateHook?: (e: any, currentNode: any) => any; // onAcceptHook?: (currentNode: any, locationData: any) => any; - onMoveHook?: (currentNode: IPublicModelNode) => boolean; + onMoveHook?: ( + e: IPublicModelLocateEvent, + currentNode?: IPublicModelNode, + ) => boolean; // thinkof 限制性拖拽 onHoverHook?: (currentNode: IPublicModelNode) => boolean; - onChildMoveHook?: (childNode: IPublicModelNode, currentNode: IPublicModelNode) => boolean; + onChildMoveHook?: ( + childNode: IPublicModelNode, + currentNode: IPublicModelNode, + ) => boolean; // events - onNodeRemove?: (removedNode: IPublicModelNode | null, currentNode: IPublicModelNode | null) => void; - onNodeAdd?: (addedNode: IPublicModelNode | null, currentNode: IPublicModelNode | null) => void; + onNodeRemove?: ( + removedNode: IPublicModelNode | null, + currentNode: IPublicModelNode | null, + ) => void; + onNodeAdd?: ( + addedNode: IPublicModelNode | null, + currentNode: IPublicModelNode | null, + ) => void; onSubtreeModified?: (currentNode: IPublicModelNode, options: any) => void; onResize?: ( e: MouseEvent & { diff --git a/packages/utils/package.json b/packages/utils/package.json index c7fc7140c9..046b8dd8da 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -14,7 +14,8 @@ }, "dependencies": { "@alifd/next": "^1.19.16", - "@alilc/lowcode-types": "1.1.5", + "@alilc/lowcode-types": "workspace:^1.1.5", + "@babel/runtime": "^7.21.0", "lodash": "^4.17.21", "mobx": "^6.3.0", "react": "^16" @@ -33,4 +34,4 @@ "url": "https://github.com/alibaba/lowcode-engine/tree/main/packages/utils" }, "gitHead": "2669f179e6f899d395ce1942d0fe04f9c5ed48a6" -} +} \ No newline at end of file diff --git a/packages/workspace/package.json b/packages/workspace/package.json index 34c7cfa762..c4091e1f91 100644 --- a/packages/workspace/package.json +++ b/packages/workspace/package.json @@ -15,11 +15,11 @@ }, "license": "MIT", "dependencies": { - "@alilc/lowcode-designer": "1.1.5", - "@alilc/lowcode-editor-core": "1.1.5", - "@alilc/lowcode-editor-skeleton": "1.1.5", - "@alilc/lowcode-types": "1.1.5", - "@alilc/lowcode-utils": "1.1.5", + "@alilc/lowcode-designer": "workspace:^1.1.5", + "@alilc/lowcode-editor-core": "workspace:^1.1.5", + "@alilc/lowcode-editor-skeleton": "workspace:^1.1.5", + "@alilc/lowcode-types": "workspace:^1.1.5", + "@alilc/lowcode-utils": "workspace:^1.1.5", "classnames": "^2.2.6", "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.15.5", @@ -50,4 +50,4 @@ "url": "https://github.com/alibaba/lowcode-engine/tree/main/packages/shell" }, "gitHead": "2669f179e6f899d395ce1942d0fe04f9c5ed48a6" -} +} \ No newline at end of file diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml new file mode 100644 index 0000000000..b3c5141864 --- /dev/null +++ b/pnpm-workspace.yaml @@ -0,0 +1,4 @@ +prefer-workspace-packages: true +packages: + # all packages in direct subdirs of packages/ + - 'packages/**' diff --git a/tsconfig.json b/tsconfig.json index a063661419..57a57bb35d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,7 +1,10 @@ { "compilerOptions": { "declaration": true, - "lib": ["es2015", "dom"], + "lib": [ + "es2015", + "dom" + ], // Target latest version of ECMAScript. "target": "esnext", // Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. @@ -33,9 +36,17 @@ "baseUrl": "./packages", "useDefineForClassFields": true, "paths": { - "@alilc/lowcode-*": ["./*/src"] + "@alilc/lowcode-*": [ + "./*/src" + ] }, "outDir": "lib" }, - "exclude": ["**/tests/*", "**/*.test.ts", "**/lib", "**/es", "node_modules"] -} + "exclude": [ + "**/tests/*", + "**/*.test.ts", + "**/lib", + "**/es", + "node_modules" + ] +} \ No newline at end of file diff --git a/turbo.json b/turbo.json new file mode 100644 index 0000000000..072c26d3cc --- /dev/null +++ b/turbo.json @@ -0,0 +1,43 @@ +{ + "$schema": "https://turbo.build/schema.json", + "pipeline": { + "build": { + "dependsOn": [ + "^build" + ] + }, + "build:umd": { + "dependsOn": [ + "^build:umd" + ] + }, + "test": { + // A package's `test` script depends on that package's + // own `build` script being completed first. + "dependsOn": [ + "build" + ], + // A package's `test` script should only be rerun when + // either a `.tsx` or `.ts` file has changed in `src` or `test` folders. + "inputs": [ + "src/**/*.tsx", + "src/**/*.ts", + "test/**/*.ts", + "test/**/*.tsx" + ] + }, + // A package's `lint` script has no dependencies and + // can be run whenever. It also has no filesystem outputs. + "lint": {}, + "deploy": { + // A package's `deploy` script depends on the `build`, + // `test`, and `lint` scripts of the same package + // being completed. It also has no filesystem outputs. + "dependsOn": [ + "build", + "test", + "lint" + ] + } + } +} \ No newline at end of file