From 7b85a35b2419f5b2390be0243056ac815e140c0a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=81=AA=E5=B0=8F=E9=99=88?= Date: Tue, 2 Jan 2024 18:15:30 +0800 Subject: [PATCH 01/34] feat: zip publisher support browser (#2744) --- modules/code-generator/README.md | 14 ++++- modules/code-generator/package.json | 2 + .../code-generator/src/publisher/zip/index.ts | 18 ++++--- .../code-generator/src/publisher/zip/utils.ts | 3 +- .../tests/public/publisher/zip/zip.test.ts | 51 +++++++++++++++++-- 5 files changed, 74 insertions(+), 14 deletions(-) diff --git a/modules/code-generator/README.md b/modules/code-generator/README.md index 03ce94b54..1d67b3aa1 100644 --- a/modules/code-generator/README.md +++ b/modules/code-generator/README.md @@ -94,16 +94,26 @@ await CodeGenerator.init(); 4. 出码 ```js -const result = await CodeGenerator.generateCode({ +const project = await CodeGenerator.generateCode({ solution: 'icejs', // 出码方案 (目前内置有 icejs 和 rax ) schema, // 编排搭建出来的 schema }); -console.log(result); // 出码结果(默认是递归结构描述的，可以传 flattenResult: true 以生成扁平结构的结果) +console.log(project); // 出码结果(默认是递归结构描述的，可以传 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 将各种插件组合成一套适合您的业务场景的出码方案。 diff --git a/modules/code-generator/package.json b/modules/code-generator/package.json index 6ff1ecb63..5c0d91cc0 100644 --- a/modules/code-generator/package.json +++ b/modules/code-generator/package.json @@ -80,6 +80,7 @@ "change-case": "^3.1.0", "commander": "^6.1.0", "debug": "^4.3.2", + "file-saver": "^2.0.5", "fp-ts": "^2.11.9", "fs-extra": "9.x", "glob": "^7.2.0", @@ -109,6 +110,7 @@ "devDependencies": { "@iceworks/spec": "^1.4.2", "@types/babel__traverse": "^7.11.0", + "@types/file-saver": "^2.0.7", "@types/jest": "^27.0.2", "@types/lodash": "^4.14.162", "@types/node": "^14.14.20", diff --git a/modules/code-generator/src/publisher/zip/index.ts b/modules/code-generator/src/publisher/zip/index.ts index cc2f082b2..0ac0b6f67 100644 --- a/modules/code-generator/src/publisher/zip/index.ts +++ b/modules/code-generator/src/publisher/zip/index.ts @@ -2,9 +2,9 @@ import { ResultDir } from '@alilc/lowcode-types'; import { PublisherFactory, IPublisher, IPublisherFactoryParams, PublisherError } from '../../types'; import { getErrorMessage } from '../../utils/errors'; import { isNodeProcess, writeZipToDisk, generateProjectZip } from './utils'; +import { saveAs } from 'file-saver'; -// export type ZipBuffer = Buffer | Blob; -export type ZipBuffer = Buffer; +export type ZipBuffer = Buffer | Blob; declare type ZipPublisherResponse = string | ZipBuffer; @@ -44,10 +44,16 @@ export const createZipPublisher: PublisherFactory => { let zip = new JSZip(); zip = writeFolderToZip(project, zip, true); - // const zipType = isNodeProcess() ? 'nodebuffer' : 'blob'; - const zipType = 'nodebuffer'; // 目前先只支持 node 调用 + const zipType = isNodeProcess() ? 'nodebuffer' : 'blob'; return zip.generateAsync({ type: zipType }); }; diff --git a/modules/code-generator/tests/public/publisher/zip/zip.test.ts b/modules/code-generator/tests/public/publisher/zip/zip.test.ts index ed37980d0..d51957004 100644 --- a/modules/code-generator/tests/public/publisher/zip/zip.test.ts +++ b/modules/code-generator/tests/public/publisher/zip/zip.test.ts @@ -1,6 +1,14 @@ import CodeGen from '../../../../src'; +import fileSaver from 'file-saver'; +import * as utils from '../../../../src/publisher/zip/utils'; + +jest.mock('file-saver'); describe('public/publisher/zip/zip', () => { + afterEach(() => { + jest.clearAllMocks(); + }); + it('should works', async () => { const zip = CodeGen.publishers.zip({ outputPath: 'demo-output', @@ -19,15 +27,15 @@ describe('public/publisher/zip/zip', () => { ], }; - expect(zip.getOutputPath()).toMatchInlineSnapshot(`"demo-output"`); + expect(zip.getOutputPath()).toMatchInlineSnapshot('"demo-output"'); - expect(zip.getProject()).toMatchInlineSnapshot(`undefined`); + expect(zip.getProject()).toMatchInlineSnapshot('undefined'); zip.setProject(demoProject); expect(zip.getProject()).toBeTruthy(); - expect(zip.getOutputPath()).toMatchInlineSnapshot(`"demo-output"`); + expect(zip.getOutputPath()).toMatchInlineSnapshot('"demo-output"'); expect(zip.setOutputPath('output')).toBe(undefined); - expect(zip.getOutputPath()).toMatchInlineSnapshot(`"output"`); + expect(zip.getOutputPath()).toMatchInlineSnapshot('"output"'); const publishRes = await zip.publish({ project: demoProject, @@ -41,4 +49,39 @@ describe('public/publisher/zip/zip', () => { const zip = CodeGen.publishers.zip({}); expect(zip.publish()).rejects.toBeTruthy(); }); + + it('should publish the project as a zip file in the browser', async () => { + const zipContent = 'zip content'; + const zipName = 'example-project'; + jest.spyOn(utils, 'isNodeProcess').mockReturnValue(false); + // new Zip 里面也有平台判断，所以这里 mock + jest.spyOn(utils, 'generateProjectZip').mockResolvedValue(zipContent as any); + const spy = jest.spyOn(fileSaver, 'saveAs'); + + const zip = CodeGen.publishers.zip({ + projectSlug: zipName, + }); + + const demoProject = { + name: 'demo', + dirs: [], + files: [ + { + name: 'package', + ext: 'json', + content: '{ "name": "demo", "version": "1.0.0" }', + }, + ], + }; + + zip.setProject(demoProject); + const publishRes = await zip.publish({ + project: demoProject, + }); + + expect(publishRes.success).toBeTruthy(); + expect(spy).toBeCalledWith(zipContent, `${zipName}.zip`); + spy.mockReset(); + spy.mockRestore(); + }); }); From 173978ffd4f8b13f6babcc5c14b2c450bca73eb7 Mon Sep 17 00:00:00 2001 From: wangwei <1021281778@qq.com> Date: Wed, 3 Jan 2024 15:17:40 +0800 Subject: [PATCH 02/34] chore(release): code-gen 1.1.7 --- modules/code-generator/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/code-generator/package.json b/modules/code-generator/package.json index 5c0d91cc0..cd114fa06 100644 --- a/modules/code-generator/package.json +++ b/modules/code-generator/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-code-generator", - "version": "1.1.6", + "version": "1.1.7", "description": "出码引擎 for LowCode Engine", "license": "MIT", "main": "lib/index.js", From e1f3a11c4197317fd9a520ca014b78905096b46f Mon Sep 17 00:00:00 2001 From: LiuTeiTei Date: Thu, 4 Jan 2024 18:20:22 +0800 Subject: [PATCH 03/34] fix: trigger onFilterResultChanged when filtered --- .../src/views/filter-tree.ts | 5 +++++ .../src/views/tree-node.tsx | 16 +++++++++++--- .../src/views/tree-title.tsx | 22 +++++++++++++------ 3 files changed, 33 insertions(+), 10 deletions(-) diff --git a/packages/plugin-outline-pane/src/views/filter-tree.ts b/packages/plugin-outline-pane/src/views/filter-tree.ts index 2a07e15c6..793aa03cc 100644 --- a/packages/plugin-outline-pane/src/views/filter-tree.ts +++ b/packages/plugin-outline-pane/src/views/filter-tree.ts @@ -77,6 +77,11 @@ export const matchTreeNode = ( return matchTreeNode(childNode, keywords, filterOps); }).find(Boolean); + // 如果命中了子节点，需要将该节点展开 + if (matchChild && treeNode.expandable) { + treeNode.setExpanded(true); + } + treeNode.setFilterReult({ filterWorking: true, matchChild, diff --git a/packages/plugin-outline-pane/src/views/tree-node.tsx b/packages/plugin-outline-pane/src/views/tree-node.tsx index be6e6ae2c..11bd95d12 100644 --- a/packages/plugin-outline-pane/src/views/tree-node.tsx +++ b/packages/plugin-outline-pane/src/views/tree-node.tsx @@ -34,7 +34,7 @@ class ModalTreeNodeView extends PureComponent<{ } componentDidMount(): void { - const rootTreeNode = this.rootTreeNode; + const { rootTreeNode } = this; rootTreeNode.onExpandableChanged(() => { this.setState({ treeChildren: rootTreeNode.children, @@ -53,7 +53,7 @@ class ModalTreeNodeView extends PureComponent<{ } render() { - const rootTreeNode = this.rootTreeNode; + const { rootTreeNode } = this; const { expanded } = rootTreeNode; const hasVisibleModalNode = !!this.modalNodesManager?.getVisibleModalNode(); @@ -98,6 +98,9 @@ export default class TreeNodeView extends PureComponent<{ conditionFlow: boolean; expandable: boolean; treeChildren: TreeNode[] | null; + filterWorking: boolean; + matchChild: boolean; + matchSelf: boolean; } = { expanded: false, selected: false, @@ -110,6 +113,9 @@ export default class TreeNodeView extends PureComponent<{ conditionFlow: false, expandable: false, treeChildren: [], + filterWorking: false, + matchChild: false, + matchSelf: false, }; eventOffCallbacks: Array = []; @@ -154,6 +160,10 @@ export default class TreeNodeView extends PureComponent<{ treeChildren: treeNode.children, }); }); + treeNode.onFilterResultChanged(() => { + const { filterWorking: newFilterWorking, matchChild: newMatchChild, matchSelf: newMatchSelf } = treeNode.filterReult; + this.setState({ filterWorking: newFilterWorking, matchChild: newMatchChild, matchSelf: newMatchSelf }); + }); this.eventOffCallbacks.push( doc?.onDropLocationChanged(() => { this.setState({ @@ -216,7 +226,7 @@ export default class TreeNodeView extends PureComponent<{ let shouldShowModalTreeNode: boolean = this.shouldShowModalTreeNode(); // filter 处理 - const { filterWorking, matchChild, matchSelf } = treeNode.filterReult; + const { filterWorking, matchChild, matchSelf } = this.state; if (!isRootNode && filterWorking && !matchChild && !matchSelf) { // 条件过滤生效时，如果未命中本节点或子节点，则不展示该节点 // 根节点始终展示 diff --git a/packages/plugin-outline-pane/src/views/tree-title.tsx b/packages/plugin-outline-pane/src/views/tree-title.tsx index c8c0e75b0..f822bd644 100644 --- a/packages/plugin-outline-pane/src/views/tree-title.tsx +++ b/packages/plugin-outline-pane/src/views/tree-title.tsx @@ -29,9 +29,15 @@ export default class TreeTitle extends PureComponent<{ title: string; condition?: boolean; visible?: boolean; + filterWorking: boolean; + keywords: string; + matchSelf: boolean; } = { editing: false, title: '', + filterWorking: false, + keywords: '', + matchSelf: false, }; private lastInput?: HTMLInputElement; @@ -100,6 +106,10 @@ export default class TreeTitle extends PureComponent<{ visible: !hidden, }); }); + treeNode.onFilterResultChanged(() => { + const { filterWorking: newFilterWorking, keywords: newKeywords, matchSelf: newMatchSelf } = treeNode.filterReult; + this.setState({ filterWorking: newFilterWorking, keywords: newKeywords, matchSelf: newMatchSelf }); + }); } deleteClick = () => { const { treeNode } = this.props; @@ -109,7 +119,7 @@ export default class TreeTitle extends PureComponent<{ render() { const { treeNode, isModal } = this.props; const { pluginContext } = treeNode; - const { editing } = this.state; + const { editing, filterWorking, matchSelf, keywords } = this.state; const isCNode = !treeNode.isRoot(); const { node } = treeNode; const { componentMeta } = node; @@ -125,11 +135,9 @@ export default class TreeTitle extends PureComponent<{ marginLeft: -indent, }; } - const { filterWorking, matchSelf, keywords } = treeNode.filterReult; const Extra = pluginContext.extraTitle; const { intlNode, common, config } = pluginContext; - const Tip = common.editorCabin.Tip; - const Title = common.editorCabin.Title; + const { Tip, Title } = common.editorCabin; const couldHide = availableActions.includes('hide'); const couldLock = availableActions.includes('lock'); const couldUnlock = availableActions.includes('unlock'); @@ -253,7 +261,7 @@ class RenameBtn extends PureComponent<{ }> { render() { const { intl, common } = this.props.treeNode.pluginContext; - const Tip = common.editorCabin.Tip; + const { Tip } = common.editorCabin; return (