From 8cee0862e254b0065a2fc9c97d0aa24b6091273e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?LeoYuan=20=E8=A2=81=E5=8A=9B=E7=9A=93?= Date: Wed, 1 Jun 2022 19:10:55 +0800 Subject: [PATCH 01/98] chore(template-plugin): modify declaration of pluginName & meta object --- packages/template-plugin/package.json | 2 +- packages/template-plugin/proj/src/index.tsx | 16 +++++++++++----- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/template-plugin/package.json b/packages/template-plugin/package.json index d947dac..060d96e 100644 --- a/packages/template-plugin/package.json +++ b/packages/template-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-template-plugin", - "version": "1.0.2", + "version": "1.0.3", "description": "Ali lowCode engine plugin template", "main": "index.js", "scripts": { diff --git a/packages/template-plugin/proj/src/index.tsx b/packages/template-plugin/proj/src/index.tsx index 44d6d08..b633684 100644 --- a/packages/template-plugin/proj/src/index.tsx +++ b/packages/template-plugin/proj/src/index.tsx @@ -4,10 +4,6 @@ import Icon from './icon'; const <%- componentName %> = (ctx: ILowCodePluginContext) => { return { - // 插件名，注册环境下唯一 - name: '<%- componentName %>', - // 依赖的插件（插件名数组） - dep: [], // 插件对外暴露的数据和方法 exports() { return { @@ -21,7 +17,7 @@ const <%- componentName %> = (ctx: ILowCodePluginContext) => { init() { // 你可以拿到其他插件暴露的方法和属性 // const { data, func } = ctx.plugins.pluginA; - // func(); + // func(); // console.log(options.name); @@ -42,4 +38,14 @@ const <%- componentName %> = (ctx: ILowCodePluginContext) => { }; }; +// 插件名，注册环境下唯一 +<%- componentName %>.pluginName = '<%- componentName %>'; +<%- componentName %>.meta = { + // 依赖的插件（插件名数组） + dependencies: [], + engines: { + lowcodeEngine: '^1.0.0', // 插件需要配合 ^1.0.0 的引擎才可运行 + }, +} + export default <%- componentName %>; From 83bb2e6cc1dab86a998d2a5c1e4009aa38585f55 Mon Sep 17 00:00:00 2001 From: eternalsky Date: Mon, 6 Jun 2022 17:40:49 +0800 Subject: [PATCH 02/98] =?UTF-8?q?feat(build-plugin-alt):=20=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E9=85=8D=E7=BD=AE=20library?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/build-plugin-alt/CHANGELOG.md | 4 ++++ packages/build-plugin-alt/package.json | 2 +- packages/build-plugin-alt/src/index.ts | 11 ++++++----- .../build-plugin-alt/src/inject/makeInjectInfo.ts | 5 ++++- 4 files changed, 15 insertions(+), 7 deletions(-) diff --git a/packages/build-plugin-alt/CHANGELOG.md b/packages/build-plugin-alt/CHANGELOG.md index ec70f7d..aab2670 100644 --- a/packages/build-plugin-alt/CHANGELOG.md +++ b/packages/build-plugin-alt/CHANGELOG.md @@ -1,5 +1,9 @@ # Changelog +## 1.1.0 + +- `feat` 支持配置 library + ## 1.0.9 - `fix` openUrl 配置在组件状态下不生效 diff --git a/packages/build-plugin-alt/package.json b/packages/build-plugin-alt/package.json index 5ec457b..b783a7b 100644 --- a/packages/build-plugin-alt/package.json +++ b/packages/build-plugin-alt/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/build-plugin-alt", - "version": "1.0.9", + "version": "1.1.0", "description": "build-scripts plugin template for developers", "main": "lib/index.js", "files": [ diff --git a/packages/build-plugin-alt/src/index.ts b/packages/build-plugin-alt/src/index.ts index 35bee12..6fd17fd 100644 --- a/packages/build-plugin-alt/src/index.ts +++ b/packages/build-plugin-alt/src/index.ts @@ -17,10 +17,11 @@ interface IOpitons { inject: boolean; openUrl: string; generateMeta: boolean; + library: string; } const plugin: IPlugin = ({ context, registerTask, onGetWebpackConfig, onHook, log }, options) => { - const { type, inject, openUrl, generateMeta = true } = options as unknown as IOpitons; + const { type, inject, openUrl, generateMeta = true, library } = options as unknown as IOpitons; const { command, rootDir, userConfig, pkg } = context; const mainFilePrefix = path.join(rootDir, 'src', (pkg.main as string).replace(/lib\/(.*).js/, "$1")); let mainFile = `${mainFilePrefix}.tsx`; @@ -69,9 +70,9 @@ const plugin: IPlugin = ({ context, registerTask, onGetWebpackConfig, onHook, lo } } else { - onGetWebpackConfig('lowcode-dev', (config) => { - // console.log(config.toConfig()); - }) + // onGetWebpackConfig('lowcode-dev', (config) => { + // console.log(config.toConfig()); + // }) } onHook('after.start.devServer', ({ url }) => { if (inject && openUrl) { @@ -82,7 +83,7 @@ const plugin: IPlugin = ({ context, registerTask, onGetWebpackConfig, onHook, lo }) onHook('before.start.load', ({ args }) => { if (inject) { - makeInjectInfo({ pkg, port: args.port, type }); + makeInjectInfo({ pkg, port: args.port, type, library }); injectApis(); } }); diff --git a/packages/build-plugin-alt/src/inject/makeInjectInfo.ts b/packages/build-plugin-alt/src/inject/makeInjectInfo.ts index 40bbe59..ccc3a9f 100644 --- a/packages/build-plugin-alt/src/inject/makeInjectInfo.ts +++ b/packages/build-plugin-alt/src/inject/makeInjectInfo.ts @@ -1,7 +1,7 @@ import * as fs from 'fs-extra'; import { getFilePath } from './utils'; -export default ({ pkg, port, type }) => { +export default ({ pkg, port, type, library }) => { const cacheFilePath = getFilePath(); fs.ensureFileSync(cacheFilePath); let cache = {}; @@ -12,17 +12,20 @@ export default ({ pkg, port, type }) => { cache[`${port}-utils`] = { packageName: pkg.name, type: type === 'plugin' ? 'designerPlugin' : 'setter', + library, subType: '', url: `http://127.0.0.1:${port}/js/utils.js?name=${pkg.name}`, }; } else { cache[`${port}-view`] = { packageName: pkg.name, + library, type: 'view', url: `http://127.0.0.1:${port}/view.js?name=${pkg.name}`, }; cache[`${port}-meta`] = { packageName: pkg.name, + library, type: 'meta', url: `http://127.0.0.1:${port}/meta.js?name=${pkg.name}`, } From 4f41dc2dc1b9e6a71576672f2d51412e7fe95d97 Mon Sep 17 00:00:00 2001 From: eternalsky Date: Mon, 6 Jun 2022 20:12:56 +0800 Subject: [PATCH 03/98] =?UTF-8?q?feat(lowcode-plugin-inject):=20=E9=80=82?= =?UTF-8?q?=E9=85=8D=E4=BC=A0=E5=85=A5=20library?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/lowcode-plugin-inject/HISTORY.md | 3 +++ packages/lowcode-plugin-inject/package.json | 2 +- packages/lowcode-plugin-inject/src/utils.tsx | 12 +++++++----- 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/lowcode-plugin-inject/HISTORY.md b/packages/lowcode-plugin-inject/HISTORY.md index 245562d..07cbaef 100644 --- a/packages/lowcode-plugin-inject/HISTORY.md +++ b/packages/lowcode-plugin-inject/HISTORY.md @@ -1,2 +1,5 @@ +# 1.1.1 / 2022-06-06 +* feat: 适配传入 library + # 1.0.0 / 2022-01-10 * feat: init diff --git a/packages/lowcode-plugin-inject/package.json b/packages/lowcode-plugin-inject/package.json index 5e9d09c..deff900 100644 --- a/packages/lowcode-plugin-inject/package.json +++ b/packages/lowcode-plugin-inject/package.json @@ -1,7 +1,7 @@ { "name": "@alilc/lowcode-plugin-inject", "author": "ens", - "version": "1.0.0", + "version": "1.1.1", "description": "lowcode-plugin-inject", "main": "lib/index.js", "module": "es/index.js", diff --git a/packages/lowcode-plugin-inject/src/utils.tsx b/packages/lowcode-plugin-inject/src/utils.tsx index bcbdfd2..41282d8 100644 --- a/packages/lowcode-plugin-inject/src/utils.tsx +++ b/packages/lowcode-plugin-inject/src/utils.tsx @@ -218,13 +218,14 @@ function envFilter(injects) { function getComponentFromUrlItems(items) { const map = {}; items.forEach((item) => { - const { packageName, type, url } = item; + const { packageName, type, url, library } = item; if (!map[packageName]) { map[packageName] = { packageName, }; } map[packageName][type] = url; + map[packageName]['library'] = library; }) return map; } @@ -243,9 +244,9 @@ export async function injectAssets(assets) { assets.packages.push({ "package": name, "version": '0.1.0', - "library": pascalCaseName, - "urls": item.view, - "editUrls": item.view, + "library": item.library || pascalCaseName, + "urls": [item.view], + "editUrls": [item.view], }); assets.components.push({ exportName: `${pascalCaseName}Meta`, @@ -276,8 +277,9 @@ export async function injectComponents(components) { const libraryMap = {}; const componentsMap = {}; Object.keys(injectedComponents).forEach((name) => { + const { library } = injectedComponents[name]; const pascalName = pascal(name); - libraryMap[name] = pascalName; + libraryMap[name] = library || pascalName; componentsMap[pascalName] = window[`${pascalName}Meta`]?.components?.find(item => item.componentName === pascalName)?.npm; }) const injectedComponentsForRenderer = await buildComponents(libraryMap, componentsMap, undefined); From e442f1197ffddf015036855c6feefb782107a3aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A8=8B=E7=A7=91?= Date: Tue, 14 Jun 2022 15:03:37 +0800 Subject: [PATCH 04/98] feat: add build-plugin-lowcode --- packages/build-plugin-lowcode/.gitignore | 26 + packages/build-plugin-lowcode/README.md | 31 + .../demo/component/build.lowcode.js | 15 + .../demo/component/lowcode/button/meta.ts | 56 + .../demo/component/lowcode/input/meta.ts | 56 + .../demo/component/package.json | 53 + .../component/src/components/button/index.tsx | 17 + .../component/src/components/input/index.tsx | 17 + .../demo/component/src/index.scss | 1 + .../demo/component/src/index.tsx | 6 + .../demo/component/tsconfig.json | 21 + packages/build-plugin-lowcode/package.json | 34 + .../src/config/user-config.js | 71 + .../build-plugin-lowcode/src/constants.js | 119 ++ packages/build-plugin-lowcode/src/index.js | 1311 +++++++++++++++++ .../src/public/designer.html | 302 ++++ .../src/public/index.html | 302 ++++ .../src/public/preview.html | 32 + .../src/templates/assets.json | 31 + .../src/templates/component-meta.js | 11 + .../src/templates/index.jsx | 250 ++++ .../src/templates/meta.js | 168 +++ .../src/templates/preview.jsx | 93 ++ .../src/templates/view.js | 23 + .../build-plugin-lowcode/src/utils/index.js | 226 +++ .../build-plugin-lowcode/src/utils/npm.ts | 37 + .../src/utils/parse-props.ts | 261 ++++ 27 files changed, 3570 insertions(+) create mode 100644 packages/build-plugin-lowcode/.gitignore create mode 100644 packages/build-plugin-lowcode/README.md create mode 100644 packages/build-plugin-lowcode/demo/component/build.lowcode.js create mode 100644 packages/build-plugin-lowcode/demo/component/lowcode/button/meta.ts create mode 100644 packages/build-plugin-lowcode/demo/component/lowcode/input/meta.ts create mode 100644 packages/build-plugin-lowcode/demo/component/package.json create mode 100644 packages/build-plugin-lowcode/demo/component/src/components/button/index.tsx create mode 100644 packages/build-plugin-lowcode/demo/component/src/components/input/index.tsx create mode 100644 packages/build-plugin-lowcode/demo/component/src/index.scss create mode 100644 packages/build-plugin-lowcode/demo/component/src/index.tsx create mode 100644 packages/build-plugin-lowcode/demo/component/tsconfig.json create mode 100644 packages/build-plugin-lowcode/package.json create mode 100644 packages/build-plugin-lowcode/src/config/user-config.js create mode 100644 packages/build-plugin-lowcode/src/constants.js create mode 100644 packages/build-plugin-lowcode/src/index.js create mode 100644 packages/build-plugin-lowcode/src/public/designer.html create mode 100644 packages/build-plugin-lowcode/src/public/index.html create mode 100644 packages/build-plugin-lowcode/src/public/preview.html create mode 100644 packages/build-plugin-lowcode/src/templates/assets.json create mode 100644 packages/build-plugin-lowcode/src/templates/component-meta.js create mode 100644 packages/build-plugin-lowcode/src/templates/index.jsx create mode 100644 packages/build-plugin-lowcode/src/templates/meta.js create mode 100644 packages/build-plugin-lowcode/src/templates/preview.jsx create mode 100644 packages/build-plugin-lowcode/src/templates/view.js create mode 100644 packages/build-plugin-lowcode/src/utils/index.js create mode 100644 packages/build-plugin-lowcode/src/utils/npm.ts create mode 100644 packages/build-plugin-lowcode/src/utils/parse-props.ts diff --git a/packages/build-plugin-lowcode/.gitignore b/packages/build-plugin-lowcode/.gitignore new file mode 100644 index 0000000..181d3ad --- /dev/null +++ b/packages/build-plugin-lowcode/.gitignore @@ -0,0 +1,26 @@ +# See https://help.github.com/ignore-files/ for more about ignoring files. + +# dependencies +node_modules/ + +# production +build/ +dist/ +tmp/ +lib/ +es/ +.tmp/ + +# misc +.idea/ +.happypack +.DS_Store +*.swp +*.dia~ + +npm-debug.log* +yarn-debug.log* +yarn-error.log* +yarn.lock + +storybook-static/ diff --git a/packages/build-plugin-lowcode/README.md b/packages/build-plugin-lowcode/README.md new file mode 100644 index 0000000..d64b06d --- /dev/null +++ b/packages/build-plugin-lowcode/README.md @@ -0,0 +1,31 @@ +## 概述 + +## 使用文档 + +``` +export interface LowcodeOptions { + builtinAssets?: Array; // 会作为内置资产保存到构建产物中 + extraAssets?: Array; // 只在调试环境加载到资产包中 + noParse?: boolean; // 关闭自动解析生成 lowcode meta + categories?: string[]; // 组件在组件面板中的分类 + groups?: string[]; // 组件在组件面板中的 tab 分组 + baseLibrary?: 'react'|'rax'; + setterMap?: SetterMap; // 注入 setter +} + +export interface SetterMap { + [SetterName: string]: string; +} + +``` +## 开发调试 +### 组件开发 + +`demo/component` 目录下是测试组件的项目，改项目引用了 build-plugin-lowcode ，相关配置在 `demo/component/build.lowcode.js` 中； + +可以修改 build-plugin-lowcode 的代码、修改 demo/component/build.lowcode.js 的配置进行调试； + +``` +在 build-plugin-lowcode 根目录下执行启动调试环境 +npm run component:dev +``` \ No newline at end of file diff --git a/packages/build-plugin-lowcode/demo/component/build.lowcode.js b/packages/build-plugin-lowcode/demo/component/build.lowcode.js new file mode 100644 index 0000000..dde5639 --- /dev/null +++ b/packages/build-plugin-lowcode/demo/component/build.lowcode.js @@ -0,0 +1,15 @@ +const package = require('./package.json'); + +module.exports = { + alias: { + '@': './src/components', + }, + plugins: [ + [ + '../../src/index.js', + { + engineScope: '@alilc' + }, + ], + ], +}; diff --git a/packages/build-plugin-lowcode/demo/component/lowcode/button/meta.ts b/packages/build-plugin-lowcode/demo/component/lowcode/button/meta.ts new file mode 100644 index 0000000..6d21b0e --- /dev/null +++ b/packages/build-plugin-lowcode/demo/component/lowcode/button/meta.ts @@ -0,0 +1,56 @@ + +import { ComponentMetadata, Snippet } from '@alilc/lowcode-types'; + +const ButtonMeta: ComponentMetadata = { + "componentName": "Button", + "title": "Button", + "docUrl": "", + "screenshot": "", + "devMode": "proCode", + "npm": { + "package": "@alilc/example-components", + "version": "1.0.0", + "exportName": "Button", + "main": "src/index.tsx", + "destructuring": true, + "subName": "" + }, + "configure": { + "props": [ + { + "title": { + "label": { + "type": "i18n", + "en-US": "title", + "zh-CN": "title" + } + }, + "name": "title", + "setter": { + "componentName": "StringSetter", + "isRequired": true, + "initialValue": "" + } + } + ], + "supports": { + "style": true + }, + "component": {} + } +}; +const snippets: Snippet[] = [ + { + "title": "Button", + "screenshot": "", + "schema": { + "componentName": "Button", + "props": {} + } + } +]; + +export default { + ...ButtonMeta, + snippets +}; diff --git a/packages/build-plugin-lowcode/demo/component/lowcode/input/meta.ts b/packages/build-plugin-lowcode/demo/component/lowcode/input/meta.ts new file mode 100644 index 0000000..ee8d9c0 --- /dev/null +++ b/packages/build-plugin-lowcode/demo/component/lowcode/input/meta.ts @@ -0,0 +1,56 @@ + +import { ComponentMetadata, Snippet } from '@alilc/lowcode-types'; + +const InputMeta: ComponentMetadata = { + "componentName": "Input", + "title": "Input", + "docUrl": "", + "screenshot": "", + "devMode": "proCode", + "npm": { + "package": "@alilc/example-components", + "version": "1.0.0", + "exportName": "Input", + "main": "src/index.tsx", + "destructuring": true, + "subName": "" + }, + "configure": { + "props": [ + { + "title": { + "label": { + "type": "i18n", + "en-US": "title", + "zh-CN": "title" + } + }, + "name": "title", + "setter": { + "componentName": "StringSetter", + "isRequired": true, + "initialValue": "" + } + } + ], + "supports": { + "style": true + }, + "component": {} + } +}; +const snippets: Snippet[] = [ + { + "title": "Input", + "screenshot": "", + "schema": { + "componentName": "Input", + "props": {} + } + } +]; + +export default { + ...InputMeta, + snippets +}; diff --git a/packages/build-plugin-lowcode/demo/component/package.json b/packages/build-plugin-lowcode/demo/component/package.json new file mode 100644 index 0000000..023d6cc --- /dev/null +++ b/packages/build-plugin-lowcode/demo/component/package.json @@ -0,0 +1,53 @@ +{ + "name": "@alilc/example-components", + "version": "1.0.0", + "description": "A component library based on Fusion Next", + "files": [ + "docs/", + "es/", + "lib/", + "build/" + ], + "main": "lib/index.js", + "module": "es/index.js", + "stylePath": "style.js", + "scripts": { + "start": "build-scripts start --config ./build.lowcode.js", + "build": "build-scripts build --config ./build.lowcode.js", + "lint": "f2elint scan", + "lint:fix": "f2elint fix" + }, + "keywords": [ + "ice", + "react", + "component" + ], + "dependencies": { + "@alifd/next": "^1.21.8", + "@alife/theme-whale-light": "^0.10.1", + "@storybook/addon-docs": "^6.3.4", + "@storybook/addon-essentials": "^6.3.4", + "@storybook/addon-storysource": "^6.3.4", + "moment": "^2.29.1", + "prop-types": "^15.5.8" + }, + "devDependencies": { + "@alib/build-scripts": "^0.1.3", + "@alifd/next": "^1.x" + }, + "peerDependencies": { + "@alifd/next": "1.x", + "react": "^16.9.0", + "react-dom": "^16.9.0" + }, + "publishConfig": { + "access": "public" + }, + "license": "MIT", + "husky": { + "hooks": { + "pre-commit": "f2elint commit-file-scan", + "commit-msg": "f2elint commit-msg-scan" + } + } +} \ No newline at end of file diff --git a/packages/build-plugin-lowcode/demo/component/src/components/button/index.tsx b/packages/build-plugin-lowcode/demo/component/src/components/button/index.tsx new file mode 100644 index 0000000..8873be8 --- /dev/null +++ b/packages/build-plugin-lowcode/demo/component/src/components/button/index.tsx @@ -0,0 +1,17 @@ +import * as React from 'react'; +import { Button } from '@alifd/next'; + +interface ComponentProps { + title: string; +} + +export default function ComponentB(props: ComponentProps) { + const { title, children = '按钮', ...others } = props; + + return ( +
+ {title} + +
+ ); +} diff --git a/packages/build-plugin-lowcode/demo/component/src/components/input/index.tsx b/packages/build-plugin-lowcode/demo/component/src/components/input/index.tsx new file mode 100644 index 0000000..c41d5e5 --- /dev/null +++ b/packages/build-plugin-lowcode/demo/component/src/components/input/index.tsx @@ -0,0 +1,17 @@ +import * as React from 'react'; +import { Input } from '@alifd/next'; + +interface ComponentProps { + title: string; +} + +export default function ComponentB(props: ComponentProps) { + const { title, ...others } = props; + + return ( +
+ { title } + +
+ ); +} diff --git a/packages/build-plugin-lowcode/demo/component/src/index.scss b/packages/build-plugin-lowcode/demo/component/src/index.scss new file mode 100644 index 0000000..da46ffc --- /dev/null +++ b/packages/build-plugin-lowcode/demo/component/src/index.scss @@ -0,0 +1 @@ +$biz-css-prefix: '.bizpack'; diff --git a/packages/build-plugin-lowcode/demo/component/src/index.tsx b/packages/build-plugin-lowcode/demo/component/src/index.tsx new file mode 100644 index 0000000..5b33c9c --- /dev/null +++ b/packages/build-plugin-lowcode/demo/component/src/index.tsx @@ -0,0 +1,6 @@ + +import Button from './components/button'; +import Input from './components/input'; + +export const bizCssPrefix = 'bizpack'; +export { Button, Input }; diff --git a/packages/build-plugin-lowcode/demo/component/tsconfig.json b/packages/build-plugin-lowcode/demo/component/tsconfig.json new file mode 100644 index 0000000..a511d68 --- /dev/null +++ b/packages/build-plugin-lowcode/demo/component/tsconfig.json @@ -0,0 +1,21 @@ +{ + "compileOnSave": false, + "buildOnSave": false, + "compilerOptions": { + "outDir": "build", + "module": "esnext", + "target": "es6", + "jsx": "react", + "moduleResolution": "node", + "lib": ["es6", "dom"], + "sourceMap": true, + "allowJs": true, + "noUnusedLocals": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "skipLibCheck": true + }, + "include": ["src/*.ts", "src/*.tsx"], + "exclude": ["node_modules", "build", "public"] +} diff --git a/packages/build-plugin-lowcode/package.json b/packages/build-plugin-lowcode/package.json new file mode 100644 index 0000000..6a9541a --- /dev/null +++ b/packages/build-plugin-lowcode/package.json @@ -0,0 +1,34 @@ +{ + "name": "@alifd/build-plugin-lowcode", + "version": "0.3.0", + "description": "build plugin for component-to-lowcode", + "main": "index.js", + "keywords": [ + "plugin" + ], + "scripts": { + "component:dev": "cd demo/component && npm start" + }, + "author": "", + "license": "MIT", + "dependencies": { + "@alilc/lowcode-material-parser": "^1.0.1", + "@alilc/lowcode-rax-renderer": "^1.0.2", + "@alilc/lowcode-react-renderer": "^1.0.1", + "@alilc/lowcode-types": "^1.0.1", + "@alilc/lowcode-utils": "^1.0.1", + "axios": "^0.21.4", + "build-scripts-config": "^3.0.0", + "chokidar": "^3.5.3", + "cross-spawn-promise": "^0.10.2", + "driver-universal": "^3.4.0", + "glob": "^7.1.7", + "handlebars": "^4.4.0", + "html-webpack-plugin": "^3.2.0", + "is-wsl": "^2.2.0", + "lodash": "^4.17.21", + "rpx-loader": "^1.0.1", + "style-loader": "^2.0.0", + "webpack": "^4.46.0" + } +} diff --git a/packages/build-plugin-lowcode/src/config/user-config.js b/packages/build-plugin-lowcode/src/config/user-config.js new file mode 100644 index 0000000..aeefd45 --- /dev/null +++ b/packages/build-plugin-lowcode/src/config/user-config.js @@ -0,0 +1,71 @@ +const path = require('path'); + +module.exports = [ + { + name: 'alias', + validation: 'object', + configWebpack: (config, alias, context) => { + const { rootDir } = context; + const aliasWithRoot = {}; + Object.keys(alias).forEach((key) => { + if (path.isAbsolute(alias[key])) { + aliasWithRoot[key] = alias[key]; + } else { + aliasWithRoot[key] = path.resolve(rootDir, alias[key]); + } + }); + config.merge({ + resolve: { + alias: aliasWithRoot, + }, + }); + }, + }, + { + name: 'library', + validation: 'string', + }, + { + name: 'libraryExport', + validation: 'string', + }, + { + name: 'libraryTarget', + validation: 'string', + }, + { + name: 'filename', + validation: 'string', + }, + { + name: 'sourceMap', + validation: 'boolean', + }, + { + name: 'minify', + validation: 'boolean', + }, + { + name: 'type', + validation: 'string', + }, + { + name: 'devServer', + validation: 'object', + defaultValue: { + logLevel: 'silent', + compress: true, + disableHostCheck: true, + clientLogLevel: 'error', + hot: true, + quiet: true, + overlay: false, + }, + configWebpack: (config, devServer, context) => { + const { command } = context; + if (command === 'start' && devServer) { + config.merge({ devServer }); + } + }, + }, +]; diff --git a/packages/build-plugin-lowcode/src/constants.js b/packages/build-plugin-lowcode/src/constants.js new file mode 100644 index 0000000..d281d41 --- /dev/null +++ b/packages/build-plugin-lowcode/src/constants.js @@ -0,0 +1,119 @@ +const SUPPORTED_COMMAND = ['start', 'build']; + +const COMMON_EXTERNALS = { + react: 'var window.React', + 'react-dom': 'var window.ReactDOM', + 'prop-types': 'var window.PropTypes', + '@alifd/next': 'var window.Next', + '@alifd/meet': 'var window.Meet', + '@ali/visualengine': 'var window.VisualEngine', + '@ali/visualengine-utils': 'var window.VisualEngineUtils', + '@ali/lowcode-engine': 'var window.AliLowCodeEngine', + '@alilc/lowcode-engine': 'var window.AliLowCodeEngine', + rax: 'var window.Rax', + antd: 'var window.antd', + '@ant-design/icons': 'var window.icons', + '@alifd/lowcode-preset-plugin': 'var window.PluginLowcodeEditor', + 'monaco-editor/esm/vs/editor/editor.api': 'var window.monaco', + 'monaco-editor/esm/vs/editor/editor.main.js': 'var window.monaco', +}; + +const DEFAULT_GROUPS = ['精选组件', '原子组件']; +const DEFAULT_CATEGORIES = [ + '基础元素', + '布局容器类', + '表格类', + '表单详情类', + '帮助类', + '对话框类', + '业务类', + '通用', + '引导', + '信息输入', + '信息展示', + '信息反馈', +]; + +const STATIC_RESOURCES = { + themeVariableUrl: 'https://alifd.alicdn.com/npm/@alifd/theme-lowcode-dark@0.6.1/variables.css', + themeStyleUrl: + 'https://alifd.alicdn.com/npm/@alifd/theme-lowcode-dark@0.6.1/dist/next.var.min.css', + engineCoreCssUrl: + 'https://dev.g.alicdn.com/ali-lowcode/ali-lowcode-engine/0.16.6/engine-core.css', + enginePresetCssUrl: + 'https://alifd.alicdn.com/npm/@alifd/lowcode-preset-plugin@1.1.7/dist/editor-preset-plugin.css', + engineExtCssUrl: 'https://g.alicdn.com/ali-lowcode/lowcode-engine-ext/1.0.20/engine-ext.css', + engineCoreJsUrl: 'https://dev.g.alicdn.com/ali-lowcode/ali-lowcode-engine/0.16.6/engine-core.js', + engineExtJsUrl: 'https://g.alicdn.com/ali-lowcode/lowcode-engine-ext/1.0.20/engine-ext.js', + enginePresetJsUrl: + 'https://alifd.alicdn.com/npm/@alifd/lowcode-preset-plugin@1.1.7/dist/editor-preset-plugin.js', +}; + +const ALILC_STATIC_RESOURCES = { + themeVariableUrl: 'https://alifd.alicdn.com/npm/@alifd/theme-lowcode-dark@0.6.1/variables.css', + themeStyleUrl: + 'https://alifd.alicdn.com/npm/@alifd/theme-lowcode-dark@0.6.1/dist/next.var.min.css', + engineCoreCssUrl: + 'https://alifd.alicdn.com/npm/@alilc/lowcode-engine@1.0.6/dist/css/engine-core.css', + engineExtCssUrl: + 'https://alifd.alicdn.com/npm/@alilc/lowcode-engine-ext@1.0.3/dist/css/engine-ext.css', + enginePresetCssUrl: + 'https://alifd.alicdn.com/npm/@alifd/lowcode-preset-plugin@1.1.7/dist/editor-preset-plugin.css', + engineCoreJsUrl: + 'https://alifd.alicdn.com/npm/@alilc/lowcode-engine@1.0.6/dist/js/engine-core.js', + engineExtJsUrl: + 'https://alifd.alicdn.com/npm/@alilc/lowcode-engine-ext@1.0.3/dist/js/engine-ext.js', + enginePresetJsUrl: + 'https://alifd.alicdn.com/npm/@alifd/lowcode-preset-plugin@1.1.7/dist/editor-preset-plugin.js', +}; + +const STATIC_RESOURCES_MAP = { + '@ali': STATIC_RESOURCES, + '@alilc': ALILC_STATIC_RESOURCES, +}; + +const BASIC_LIBRARY_VERSION = { + '@alifd/next': '1.25.23', + '@alifd/meet': '2.6.3', + antd: '4.17.3', +}; +const COMPONENT_PROPS = [ + 'componentName', + 'title', + 'description', + 'docUrl', + 'screenshot', + 'icon', + 'tags', + 'keywards', + 'devMode', + 'npm', + + 'props', + 'configure', + 'snippets', + 'group', + 'category', + 'priority', +]; + +const UNPKG_BASE_URL_MAP = { + '@ali': 'https://unpkg.alibaba-inc.com', + '@alilc': 'https://unpkg.com', +}; + +const META_TYPES = ['', 'dev', 'web', 'mobile', 'design', 'sketch']; + +module.exports = { + SUPPORTED_COMMAND, + COMMON_EXTERNALS, + DEFAULT_GROUPS, + DEFAULT_CATEGORIES, + STATIC_RESOURCES, + ALILC_STATIC_RESOURCES, + STATIC_RESOURCES_MAP, + BASIC_LIBRARY_VERSION, + COMPONENT_PROPS, + UNPKG_BASE_URL_MAP, + META_TYPES, +}; diff --git a/packages/build-plugin-lowcode/src/index.js b/packages/build-plugin-lowcode/src/index.js new file mode 100644 index 0000000..9f679b2 --- /dev/null +++ b/packages/build-plugin-lowcode/src/index.js @@ -0,0 +1,1311 @@ +const path = require('path'); +const glob = require('glob'); +const axios = require('axios'); +const fse = require('fs-extra'); +const chokidar = require('chokidar'); +const mergeWith = require('lodash/mergeWith'); +const parser = require('@alilc/lowcode-material-parser'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const { getWebpackConfig } = require('build-scripts-config'); +const isWsl = require('is-wsl'); + +let INIT_STATE = false; +let PARSED_NPM_NAME; +const { debug } = console; + +const UTILS = require('./utils'); +const CONSTANTS = require('./constants'); +const { installModule } = require('./utils/npm.ts'); +const userWebpackConfig = require('./config/user-config'); + +const { + parseProps, + parseNpmName, + generateEntry, + asyncDebounce, + camel2KebabComponentName, + kebab2CamelComponentName, +} = UTILS; + +const { + COMMON_EXTERNALS, + DEFAULT_GROUPS, + DEFAULT_CATEGORIES, + STATIC_RESOURCES_MAP, + BASIC_LIBRARY_VERSION, + COMPONENT_PROPS, + UNPKG_BASE_URL_MAP, + META_TYPES, +} = CONSTANTS; + +const debounceBuild = asyncDebounce(build, 300); +const debounceStart = asyncDebounce(start, 300); + +const defaultEntryPaths = [ + `./src/index.tsx`, + `./index.js`, + `./lib/index.js`, + `./src/index.ts`, + `./src/index.js`, + `./src/index.jsx`, + `./src/index.tsx`, + `./components/index.ts`, + `./components/index.tsx`, +]; + +const defaultScssEntryPaths = [ + `./src/index.scss`, + `./src/main.scss`, + `./index.scss`, + `./main.scss`, + `./components/index.scss`, +]; + +function getEntry(rootDir, entryPath) { + if (entryPath && fse.existsSync(path.resolve(rootDir, entryPath))) { + return path.resolve(rootDir, entryPath); + } + for (let i = 0; i < defaultEntryPaths.length; i++) { + const p = path.resolve(rootDir, defaultEntryPaths[i]); + if (fse.existsSync(p)) { + return p; + } + } + return ''; +} + +function getScssEntry(rootDir) { + for (let i = 0; i < defaultScssEntryPaths.length; i++) { + const p = path.resolve(rootDir, defaultScssEntryPaths[i]); + if (fse.existsSync(p)) { + return p; + } + } + return ''; +} + +function formatComponentSchema(schema) { + let { props } = schema; + const defaultProps = {}; + let noStyleProp = true; + if (props && Array.isArray(props)) { + props.forEach((prop) => { + if (prop.defaultValue) { + defaultProps[prop.name] = prop.defaultValue; + } + if (noStyleProp && ['style'].includes(prop.name)) { + noStyleProp = false; + } + }); + if (noStyleProp) { + props.push({ + name: 'style', + propType: 'object', + }); + } + } else { + props = [ + { + name: 'style', + propType: 'object', + }, + ]; + } + schema.props = props; + const parsedSchema = parseProps(schema); + delete parsedSchema.props; + parsedSchema.snippets = [ + { + title: schema.componentName, + screenshot: schema.screenshot, + schema: { + componentName: schema.componentName, + props: defaultProps, + }, + }, + ]; + return parsedSchema; +} + +function getUsedComponentViews(rootDir, targetDir = 'lowcode', components) { + let viewPaths = glob.sync(path.resolve(rootDir, `${targetDir}/**/view.@(js|ts|jsx|tsx)`)); + if (viewPaths && viewPaths.length) { + viewPaths = viewPaths.map((item) => { + return item.slice(path.resolve(rootDir, targetDir).length + 1, item.lastIndexOf('view') - 1); + }); + } + return components + ? components.filter((component) => { + return viewPaths.includes(camel2KebabComponentName(component)); + }) + : viewPaths.map((dir) => kebab2CamelComponentName(dir)); +} + +function getUsedComponentMetas(rootDir, lowcodeDir = 'lowcode', metaFilename, components) { + let metaPaths = glob.sync( + path.resolve(rootDir, `${lowcodeDir}/**/${metaFilename}.@(js|ts|jsx|tsx)`), + ); + if (metaPaths && metaPaths.length) { + metaPaths = metaPaths.map((item) => { + return item.slice( + path.resolve(rootDir, lowcodeDir).length + 1, + item.lastIndexOf(metaFilename) - 1, + ); + }); + } + return components + ? components.filter((component) => { + return metaPaths.includes(camel2KebabComponentName(component)); + }) + : metaPaths.map((dir) => kebab2CamelComponentName(dir)); +} + +/** + * 将 css 打包到 js 文件中 + * @param {object} config webpack chain 配置 + */ +function useStyleLoader(config) { + const cssRule = config.module.rule('css'); + const scssRule = config.module.rule('scss'); + const scssModuleRule = config.module.rule('scss-module'); + const lessRule = config.module.rule('less'); + const lessModuleRule = config.module.rule('less-module'); + cssRule.uses.delete('MiniCssExtractPlugin.loader'); + scssRule.uses.delete('MiniCssExtractPlugin.loader'); + scssModuleRule.uses.delete('MiniCssExtractPlugin.loader'); + lessRule.uses.delete('MiniCssExtractPlugin.loader'); + lessModuleRule.uses.delete('MiniCssExtractPlugin.loader'); + cssRule.use('style-loader').loader('style-loader').before('css-loader'); + scssRule.use('style-loader').loader('style-loader').before('css-loader'); + scssModuleRule.use('style-loader').loader('style-loader').before('css-loader'); + lessRule.use('style-loader').loader('style-loader').before('css-loader'); + lessModuleRule.use('style-loader').loader('style-loader').before('css-loader'); +} + +async function registerSetter(context, setterMap) { + return Promise.all(Object.values(setterMap).map((setter) => installModule(context, setter))); +} + +module.exports = async (options, pluginOptions = {}) => { + const { registerUserConfig, registerCliOption } = options; + const { rootDir, command } = options.context; + if (!CONSTANTS.SUPPORTED_COMMAND.includes(command)) { + debug('Command %s not supported.', command); + return; + } + const cliOptions = ['watch', 'skip-demo', 'watch-dist', 'https', 'disable-open']; + registerCliOption( + cliOptions.map((name) => ({ + name, + commands: ['start', 'build'], + })), + ); + registerUserConfig(userWebpackConfig); + + const mode = command === 'start' ? 'development' : 'production'; + process.argv.forEach((val, index) => { + debug(`${index}: ${val}`); + }); + + const { setterMap, engineScope } = pluginOptions; + if (setterMap) { + await registerSetter( + { + workDir: rootDir, + npmClient: engineScope === '@alilc' ? 'npm' : 'tnpm', + }, + setterMap, + ); + } + + if (mode === 'production') { + await debounceBuild(options, pluginOptions, true); + return; + } + await debounceStart(options, pluginOptions); + const watchPattern = path.resolve(rootDir, 'src/**/**'); + const watcher = chokidar.watch(watchPattern); + ['add', 'change', 'unlink'].forEach((item) => { + watcher.on(item, async () => { + await debounceStart(options, pluginOptions); + }); + }); +}; + +function confirmMetaTypes(rootDir, lowcodeDir, metaTypes) { + return metaTypes.filter((item) => { + const metaFilename = item ? `meta.${item}` : 'meta'; + const res = glob.sync( + path.resolve(rootDir, `${lowcodeDir}/**/${metaFilename}.@(js|ts|jsx|tsx)`), + ); + return res.length; + }); +} + +function confirmRenderPlatforms(rootDir, platforms) { + const result = platforms.filter((item) => { + if (item === 'default') return false; + const viewPath = `src/${item}/components`; + const res = glob.sync(path.resolve(rootDir, `${viewPath}/**/view.@(js|ts|jsx|tsx)`)); + return res.length; + }); + result.unshift('default'); + return result; +} + +async function build(options, pluginOptions, execCompile) { + const webPackConfig = getWebpackConfig('production'); + const { context } = options; + const { rootDir, pkg: package, userConfig = {} } = context; + const { alias = {} } = userConfig; + const { + components, + metaFormat, + noParse, + engineScope, + metaTypes = META_TYPES, + bundleEachComponentMeta, + lowcodeDir = 'lowcode', + entryPath, + platforms = [], + } = pluginOptions || {}; + !noParse && + (await initLowCodeSchema( + rootDir, + package, + alias['@'], + metaFormat, + metaFormat, + components, + engineScope === '@alilc' ? 'npm' : 'tnpm', + entryPath, + )); + const confirmedMetaTypes = confirmMetaTypes(rootDir, lowcodeDir, metaTypes); + const metaPaths = await Promise.all( + confirmedMetaTypes.map((item) => { + return bundleMetaV2(options, pluginOptions, execCompile, item); + }), + ); + const metaPathMap = {}; + metaPaths.forEach((item) => { + metaPathMap[item.slice(item.lastIndexOf('/') + 1, item.lastIndexOf('.'))] = item; + }); + const confirmedRenderPlatforms = confirmRenderPlatforms(rootDir, platforms); + const renderViewPathMap = {}; + const renderViewPaths = await Promise.all( + confirmedRenderPlatforms.map(async (item) => { + return await bundleRenderView(options, pluginOptions, item, execCompile); + }), + ); + renderViewPaths.forEach((item) => { + renderViewPathMap[item.slice(item.lastIndexOf('/') + 1, item.lastIndexOf('.'))] = item; + }); + const result = { + metaPathMap, + renderViewPathMap, + platforms: confirmedRenderPlatforms, + viewPath: await bundleEditorView( + webPackConfig, + options, + pluginOptions, + metaPathMap, + confirmedRenderPlatforms, + execCompile, + ), + assetsPaths: await bundleAssets( + options, + pluginOptions, + confirmedMetaTypes, + confirmedRenderPlatforms, + execCompile, + ), + }; + if (bundleEachComponentMeta) { + result.componentMetaPath = await bundleComponentMeta( + webPackConfig, + options, + pluginOptions, + execCompile, + ); + } + return result; +} + +async function start(options, pluginOptions) { + const { registerTask, getAllTask, onGetWebpackConfig } = options; + const { rootDir, pkg: package, commandArgs } = options.context; + const { https } = commandArgs; + if (!PARSED_NPM_NAME) { + PARSED_NPM_NAME = parseNpmName(package.name); + } + const { + package: packageName = package.name, + library = PARSED_NPM_NAME.uniqueName, + umdUrls, + renderUrls, + editUrls, + baseLibrary = 'react', + groups = DEFAULT_GROUPS, + categories = DEFAULT_CATEGORIES, + extraAssets = [], + builtinAssets = [], + ignoreComponents = {}, + staticResources = {}, + disableStyleLoader = false, + engineScope = '@ali', + externals = {}, + setterMap = {}, + fullbackMeta = 'default', + } = pluginOptions || {}; + if (baseLibrary === 'rax' && Array.isArray(extraAssets)) { + extraAssets.push( + 'https://g.alicdn.com/code/npm/@alife/mobile-page/0.1.1/build/lowcode/assets-prod.json', + ); + } + const metaExportName = `${PARSED_NPM_NAME.uniqueName}Meta`; + const { viewPath, metaPathMap, renderViewPathMap, platforms } = await debounceBuild( + options, + pluginOptions, + false, + ); + const devViewUrls = !disableStyleLoader ? ['/view.js'] : ['/view.js', '/view.css']; + const advancedRenderUrls = {}; + platforms.forEach((platform) => { + advancedRenderUrls[platform] = [`./${platform}.view.js`]; + }); + let _setterMap = '{'; + const setterImportStr = Object.keys(setterMap || {}) + .map((item) => { + _setterMap += `\n ${item},`; + return `import ${item} from '${setterMap[item]}';`; + }) + .join('\n'); + _setterMap += '\n}'; + const indexJs = generateEntry({ + template: 'index.jsx', + filename: 'index.jsx', + rootDir, + params: { + package: packageName, + version: package.version, + library, + urls: JSON.stringify(renderUrls || umdUrls || devViewUrls), + editUrls: JSON.stringify(editUrls || umdUrls || devViewUrls), + advancedRenderUrls: JSON.stringify(advancedRenderUrls), + devMode: true, + metaExportName, + baseLibrary, + groups: JSON.stringify(groups), + categories: JSON.stringify(categories), + extraAssets: JSON.stringify(extraAssets), + builtinAssets: JSON.stringify(builtinAssets), + ignoreComponents: JSON.stringify(ignoreComponents), + setterImportStr, + setterMap: _setterMap, + metaPathMap: JSON.stringify(metaPathMap), + fullbackMeta, + }, + }); + const previewJs = generateEntry({ + template: 'preview.jsx', + filename: 'preview.jsx', + rootDir, + params: { + isRax: baseLibrary === 'rax', + }, + }); + if (getAllTask().includes('lowcode-dev')) return; + registerTask('lowcode-dev', getWebpackConfig('development')); + onGetWebpackConfig('lowcode-dev', (config) => { + const entry = { + index: indexJs, + preview: previewJs, + ...metaPathMap, + ...renderViewPathMap, + }; + if (!editUrls && !umdUrls) { + entry.view = viewPath; + } + + config.merge({ + entry, + }); + config.plugin('index').use(HtmlWebpackPlugin, [ + { + inject: false, + templateParameters: { + ...STATIC_RESOURCES_MAP[engineScope], + ...staticResources, + }, + template: require.resolve('./public/index.html'), + filename: 'index.html', + }, + ]); + config.plugin('designer').use(HtmlWebpackPlugin, [ + { + inject: false, + templateParameters: { + ...STATIC_RESOURCES_MAP[engineScope], + ...staticResources, + }, + template: require.resolve('./public/designer.html'), + filename: 'designer.html', + }, + ]); + config.plugin('preview').use(HtmlWebpackPlugin, [ + { + inject: false, + templateParameters: { + previewCssUrl: '', + }, + template: require.resolve('./public/preview.html'), + filename: 'preview.html', + }, + ]); + config.devServer.headers({ 'Access-Control-Allow-Origin': '*' }); + + config.devServer.https(Boolean(https)); + config.devServer.set('transportMode', 'ws'); + // WSL 环境下正常的文件 watch 失效，需切换为 poll 模式 + if (isWsl) { + config.merge({ + devServer: { + watchOptions: { + poll: 1000, + }, + }, + }); + } + config.externals({ ...COMMON_EXTERNALS, ...externals }); + !disableStyleLoader && useStyleLoader(config); + if (baseLibrary === 'rax') { + config.module.rule('scss').use('rpx-loader').loader('rpx-loader').before('css-loader'); + } + }); +} + +async function initLowCodeSchema( + rootDir, + package, + componentsPath, + devAlias, + metaFormat, + components, + npmClient = 'tnpm', + lowcodeDir = 'lowcode', + entryPath, +) { + if (INIT_STATE) { + return; + } + INIT_STATE = true; + if (!PARSED_NPM_NAME) { + PARSED_NPM_NAME = parseNpmName(package.name); + } + const entry = getEntry(rootDir, entryPath); + const lowcodeDirExists = await fse.existsSync(path.resolve(rootDir, lowcodeDir)); + if (lowcodeDirExists) { + const lowcodeDirs = await fse.readdir(path.resolve(rootDir, lowcodeDir)); + const componentsDirs = await fse.readdir( + path.resolve(rootDir, componentsPath || 'src/components'), + ); + const lowcodeDirMap = {}; + lowcodeDirs.forEach((item) => { + lowcodeDirMap[item] = true; + }); + const newComponentDir = componentsDirs.filter((dir) => !lowcodeDirMap[dir]); + if (!newComponentDir || !newComponentDir.length) { + return; + } + } + let result = await parser.default({ accesser: 'local', entry, npmClient }); + if (!result) { + // 未解析出结果，默认生成结果 + result = [ + formatComponentSchema({ + componentName: PARSED_NPM_NAME.uniqueName, + npm: { + package: package.name, + version: package.version, + exportName: 'default', + main: 'lib/index.js', + destructuring: false, + subName: '', + }, + }), + ]; + } else if (result.length === 1 && result[0].componentName === 'default') { + result[0].componentName = PARSED_NPM_NAME.uniqueName; + if (result[0].title === 'default') { + result[0].title = PARSED_NPM_NAME.uniqueName; + } + } + const metaDevSubfix = devAlias ? `.${devAlias}` : ''; + const filteredComponents = + !components || !components.length + ? result + : result.filter((item) => item && components.includes(item.componentName)); + filteredComponents.forEach((item) => { + const componentNameFolder = camel2KebabComponentName(item.componentName); + if ( + !fse.existsSync( + path.resolve( + rootDir, + `${lowcodeDir}/${componentNameFolder}/meta${metaDevSubfix}.${metaFormat || 'ts'}`, + ), + ) && + !fse.existsSync( + path.resolve(rootDir, `${lowcodeDir}/${componentNameFolder}/meta${metaDevSubfix}.js`), + ) + ) { + const schema = formatComponentSchema(item); + if (schema.title === package.name) { + schema.title = schema.componentName; + } + const { snippets } = schema; + const componentDescription = schema; + delete componentDescription.snippets; + fse.outputFileSync( + path.resolve( + rootDir, + `${lowcodeDir}/${componentNameFolder}/meta${metaDevSubfix}.${metaFormat || 'ts'}`, + ), + ` +import { ComponentMetadata, Snippet } from '@alilc/lowcode-types'; + +const ${item.componentName}Meta: ComponentMetadata = ${JSON.stringify( + componentDescription, + null, + 2, + )}; +const snippets: Snippet[] = ${JSON.stringify(snippets, null, 2)}; + +export default { + ...${item.componentName}Meta, + snippets +}; +`, + ); + } + }); +} + +async function bundleMetaV2(options, pluginOptions, execCompile, metaType) { + const { registerTask, getAllTask, onGetWebpackConfig, context } = options; + const { rootDir, pkg: package, userConfig = {} } = context; + if (!PARSED_NPM_NAME) { + PARSED_NPM_NAME = parseNpmName(package.name); + } + const metaExportName = `${PARSED_NPM_NAME.uniqueName}Meta`; + let { components } = pluginOptions || {}; + const { + categories = DEFAULT_CATEGORIES, + externals = {}, + basicLibraryVersion: customBasicLibraryVersion, + buildTarget = 'build', + fullbackMeta = 'default', + lowcodeDir = 'lowcode', + npmInfo = {}, + } = pluginOptions || {}; + if (components && !Array.isArray(components)) { + console.error('[@alifd/build-plugin-lowcode] components must be Array'); + components = null; + } + const metaSuffix = metaType ? `.${metaType}` : ''; + const metaFilename = `meta${metaSuffix}`; + let fullbackComponents; + let fullbackMetaSuffix; + if (fullbackMeta) { + fullbackMetaSuffix = fullbackMeta === 'default' ? '' : `.${fullbackMeta}`; + fullbackComponents = getUsedComponentMetas( + rootDir, + lowcodeDir, + `meta${fullbackMetaSuffix}`, + components, + ); + } + const usedComponents = getUsedComponentMetas( + rootDir, + lowcodeDir, + `meta${metaSuffix}`, + components, + ); + const componentsImportStr = fullbackComponents + .map((component) => { + const componentNameFolder = camel2KebabComponentName(component); + let metaJsPath = path.resolve( + rootDir, + `${lowcodeDir}/${componentNameFolder}/${metaFilename}`, + ); + if (!usedComponents.includes(component) && fullbackComponents.includes(component)) { + metaJsPath = path.resolve( + rootDir, + `${lowcodeDir}/${componentNameFolder}/meta${fullbackMetaSuffix}`, + ); + usedComponents.push(component); + } + return `import ${ + component.includes('.') ? component.replace(/\./g, '') : component + }Meta from '${metaJsPath}'`; + }) + .join('\n'); + const metaPath = generateEntry({ + template: 'meta.js', + filename: `meta${metaSuffix}.js`, + rootDir, + params: { + componentsImportStr, + components: usedComponents.map( + (component) => `${component.includes('.') ? component.replace(/\./g, '') : component}Meta`, + ), + execCompile, + metaExportName, + categories: JSON.stringify(categories), + npmInfo: JSON.stringify(npmInfo || {}), + version: package.version, + packageName: package.name, + basicLibraryVersion: JSON.stringify(customBasicLibraryVersion || BASIC_LIBRARY_VERSION), + }, + }); + if (!execCompile || getAllTask().includes(`lowcode-meta-${metaType}`)) return metaPath; + registerTask(`lowcode-meta-${metaType}`, getWebpackConfig('production')); + onGetWebpackConfig(`lowcode-meta-${metaType}`, (config) => { + config.merge({ + entry: { + [`meta${metaSuffix}`]: metaPath, + }, + }); + config.output.library(metaExportName).libraryTarget('umd'); + config.output.path(path.resolve(rootDir, `${buildTarget}/${lowcodeDir}`)); + config.externals({ ...COMMON_EXTERNALS, ...externals }); + useStyleLoader(config); + }); + return metaPath; +} + +async function bundleEditorView( + webPackConfig, + options, + pluginOptions, + metaPathMap, + platforms, + execCompile, +) { + const { registerTask, getAllTask, onGetWebpackConfig } = options; + const { rootDir, pkg: package } = options.context; + if (!PARSED_NPM_NAME) { + PARSED_NPM_NAME = parseNpmName(package.name); + } + const { + package: packageName = package.name, + library = PARSED_NPM_NAME.uniqueName, + umdUrls, + renderUrls, + editUrls, + baseLibrary = 'react', + components, + groups = DEFAULT_GROUPS, + categories = DEFAULT_CATEGORIES, + staticResources = {}, + singleComponent = false, + ignoreComponents = {}, + engineScope = '@ali', + externals = {}, + setterMap = {}, + buildTarget = 'build', + fullbackMeta = 'default', + lowcodeDir = 'lowcode', + entryPath, + } = pluginOptions || {}; + const metaExportName = `${PARSED_NPM_NAME.uniqueName}Meta`; + const advancedRenderUrls = {}; + platforms.forEach((platform) => { + advancedRenderUrls[platform] = [ + `./render/${platform}/view.js`, + `./render/${platform}/view.css`, + ]; + }); + let _setterMap = '{'; + const setterImportStr = Object.keys(setterMap || {}) + .map((item) => { + _setterMap += `\n ${item},`; + return `import ${item} from '${setterMap[item]}';`; + }) + .join('\n'); + _setterMap += '\n}'; + const indexJsParams = { + package: packageName, + version: package.version, + library, + urls: JSON.stringify( + renderUrls || + umdUrls || [ + `${buildTarget}/${lowcodeDir}/view.js`, + `${buildTarget}/${lowcodeDir}/view.css`, + ], + ), + editUrls: JSON.stringify( + editUrls || + umdUrls || [ + `${buildTarget}/${lowcodeDir}/view.js`, + `${buildTarget}/${lowcodeDir}/view.css`, + ], + ), + advancedRenderUrls: JSON.stringify(advancedRenderUrls), + metaUrl: `${buildTarget}/${lowcodeDir}/meta.js`, + devMode: false, + metaExportName, + baseLibrary, + groups: JSON.stringify(groups), + categories: JSON.stringify(categories), + ignoreComponents: JSON.stringify(ignoreComponents), + extraAssets: 'false', + builtinAssets: 'false', + setterImportStr, + setterMap: _setterMap, + metaPathMap: JSON.stringify(metaPathMap), + fullbackMeta, + }; + const indexJs = generateEntry({ + template: 'index.jsx', + filename: 'index.jsx', + rootDir, + params: indexJsParams, + }); + const previewJs = generateEntry({ + template: 'preview.jsx', + filename: 'preview.jsx', + rootDir, + params: { + isRax: baseLibrary === 'rax', + }, + }); + let componentViews; + let componentViewsExportStr; + let componentViewsImportStr; + const lowcodeViewPath = path.resolve(rootDir, `${lowcodeDir}/view.tsx`); + if (singleComponent && fse.existsSync(lowcodeViewPath)) { + componentViewsImportStr = `import * as SingleComponentData from '${lowcodeViewPath}'`; + componentViews = `{ + ...SingleComponentData + }`; + componentViewsExportStr = `export { default } from '${lowcodeViewPath}';export * from '${lowcodeViewPath}';`; + } else { + const _componentViews = getUsedComponentViews(rootDir, lowcodeDir, components) || []; + componentViews = `{${_componentViews + .map((component) => { + return `${component}: ${component}`; + }) + .join(',')}}`; + componentViewsExportStr = _componentViews + .map((component) => { + return `const ${component} = getRealComponent(${component}Data, '${component}');\nexport { ${component} };`; + }) + .join('\n'); + componentViewsExportStr += `\nexport { default } from '${getEntry(rootDir, entryPath)}';`; + componentViewsImportStr = _componentViews + .map((component) => { + const componentNameFolder = camel2KebabComponentName(component); + const viewJsPath = path.resolve(rootDir, `${lowcodeDir}/${componentNameFolder}/view`); + return `import * as ${component}Data from '${viewJsPath}'`; + }) + .join('\n'); + } + const scssEntry = getScssEntry(rootDir); + const viewPath = generateEntry({ + template: 'view.js', + filename: 'view.js', + rootDir, + params: { + entryPath: getEntry(rootDir, entryPath), + scssImport: scssEntry ? `import '${scssEntry}'` : '', + componentViews, + componentViewsExportStr, + componentViewsImportStr, + library, + execCompile, + }, + }); + console.log('in render view: ', execCompile); + if (!execCompile || editUrls || umdUrls || getAllTask().includes('lowcode-editor-view')) + return viewPath; + registerTask('lowcode-editor-view', webPackConfig); + onGetWebpackConfig('lowcode-editor-view', (config) => { + debug('editor view build'); + config.plugin('HtmlWebpackPlugin').use(HtmlWebpackPlugin, [ + { + inject: false, + templateParameters: { + ...STATIC_RESOURCES_MAP[engineScope], + ...staticResources, + }, + template: require.resolve('./public/index.html'), + filename: 'index.html', + }, + ]); + config.plugin('designer').use(HtmlWebpackPlugin, [ + { + inject: false, + templateParameters: { + ...STATIC_RESOURCES_MAP[engineScope], + ...staticResources, + }, + template: require.resolve('./public/designer.html'), + filename: 'designer.html', + }, + ]); + config.plugin('preview').use(HtmlWebpackPlugin, [ + { + inject: false, + templateParameters: { + previewCssUrl: './preview.css', + }, + template: require.resolve('./public/preview.html'), + filename: 'preview.html', + }, + ]); + config.merge({ + entry: { + view: viewPath, + index: indexJs, + preview: previewJs, + }, + }); + config.output.library(library).libraryTarget('umd'); + config.output.path(path.resolve(rootDir, `${buildTarget}/${lowcodeDir}`)); + config.externals({ ...COMMON_EXTERNALS, ...externals }); + if (baseLibrary === 'rax') { + const scssRule = config.module.rule('scss'); + scssRule.use('rpx-loader').loader('rpx-loader').before('css-loader'); + } + }); + return viewPath; +} + +async function bundleRenderView(options, pluginOptions, platform, execCompile) { + const { registerTask, getAllTask, onGetWebpackConfig } = options; + const { rootDir, pkg: package } = options.context; + if (!PARSED_NPM_NAME) { + PARSED_NPM_NAME = parseNpmName(package.name); + } + const { + library = PARSED_NPM_NAME.uniqueName, + umdUrls, + editUrls, + baseLibrary = 'react', + components, + externals = {}, + buildTarget = 'build', + lowcodeDir = 'lowcode', + entryPath, + } = pluginOptions || {}; + let componentViews; + let componentViewsExportStr; + let componentViewsImportStr; + const _componentViews = + getUsedComponentViews(rootDir, `src/${platform}/components`, components) || []; + console.log('_componentViews: ', _componentViews); + componentViews = `{${_componentViews + .map((component) => { + return `${component}: ${component}`; + }) + .join(',')}}`; + componentViewsExportStr = _componentViews + .map((component) => { + return `const ${component} = getRealComponent(${component}Data, '${component}');\nexport { ${component} };`; + }) + .join('\n'); + componentViewsExportStr += `\nexport { default } from '${getEntry(rootDir, entryPath)}';`; + componentViewsImportStr = _componentViews + .map((component) => { + const componentNameFolder = camel2KebabComponentName(component); + const viewJsPath = path.resolve( + rootDir, + `src/${platform}/components/${componentNameFolder}/view`, + ); + return `import * as ${component}Data from '${viewJsPath}'`; + }) + .join('\n'); + if (platform === 'default') { + componentViewsExportStr = ''; + componentViewsImportStr = ''; + } + const scssEntry = getScssEntry(rootDir); + const viewPath = generateEntry({ + template: 'view.js', + filename: `${platform}.view.js`, + rootDir, + params: { + entryPath: getEntry(rootDir, entryPath), + scssImport: scssEntry ? `import '${scssEntry}'` : '', + componentViews, + componentViewsExportStr, + componentViewsImportStr, + library, + execCompile, + }, + }); + if (!execCompile || editUrls || umdUrls || getAllTask().includes(`render-view-${platform}`)) + return viewPath; + registerTask(`render-view-${platform}`, getWebpackConfig('production')); + onGetWebpackConfig(`render-view-${platform}`, (config) => { + debug('render view build: ', viewPath); + config.merge({ + entry: { + view: viewPath, + }, + }); + config.output.library(library).libraryTarget('umd'); + config.output.path(path.resolve(rootDir, `${buildTarget}/${lowcodeDir}/render/${platform}`)); + config.externals({ ...COMMON_EXTERNALS, ...externals }); + if (baseLibrary === 'rax') { + const scssRule = config.module.rule('scss'); + scssRule.use('rpx-loader').loader('rpx-loader').before('css-loader'); + } + }); + return viewPath; +} + +async function bundleAssets(options, pluginOptions, metaTypes, renderTypes, execCompile) { + const { onHook } = options; + const { rootDir, pkg: package } = options.context; + if (!PARSED_NPM_NAME) { + PARSED_NPM_NAME = parseNpmName(package.name); + } + const metaExportName = `${PARSED_NPM_NAME.uniqueName}Meta`; + const { + package: packageName = package.name, + baseUrl, + library = PARSED_NPM_NAME.uniqueName, + umdUrls, + renderUrls, + editUrls, + groups = DEFAULT_GROUPS, + categories = DEFAULT_CATEGORIES, + builtinAssets = [], + extraAssets = [], + baseLibrary, + ignoreComponents = {}, + buildTarget = 'build', + engineScope = '@ali', + lowcodeDir = 'lowcode', + } = pluginOptions || {}; + + if (baseLibrary === 'rax' && Array.isArray(extraAssets)) { + extraAssets.push( + `https://g.alicdn.com/code/npm/@alife/mobile-page/0.1.1/build/lowcode/assets-prod.json`, + ); + } + const baseSchemas = await Promise.all( + builtinAssets.map(async (url) => { + if (typeof url === 'object') { + return url; + } else { + try { + return await axios(url).then(({ data }) => data); + } catch (e) { + console.error( + `[@alifd/build-plugin-lowcode] get assets data from builtin assets ${url} failed: `, + e, + ); + return {}; + } + } + }), + ); + const extraSchemas = await Promise.all( + extraAssets.map(async (url) => { + if (typeof url === 'object') { + return url; + } else { + try { + return await axios(url).then(({ data }) => data); + } catch (e) { + console.error( + `[@alifd/build-plugin-lowcode] get assets data from builtin assets ${url} failed: `, + e, + ); + return {}; + } + } + }), + ); + const assetsPaths = await Promise.all( + ['daily', 'prod', 'dev'].map(async (item) => { + const _baseUrl = + (baseUrl && baseUrl[item]) || + `${UNPKG_BASE_URL_MAP[engineScope]}/${package.name}@${package.version}`; + let urls; + let metaUrl; + const metaUrls = {}; + const advancedRenderUrls = {}; + const advancedEditUrls = {}; + const advancedMetaUrls = {}; + if (item === 'dev') { + urls = JSON.stringify([`./view.js`, `./view.css`]); + metaTypes.forEach((item) => { + const _url = item ? `./meta.${item}.js` : './meta.js'; + if (!metaUrl) metaUrl = _url; + metaUrls[item || 'default'] = _url; + advancedMetaUrls[item || 'default'] = [_url]; + }); + renderTypes.forEach((renderType) => { + advancedRenderUrls[renderType] = [ + `./render/${renderType}.view.js`, + `./render/${renderType}.view.css`, + ]; + }); + } else { + urls = JSON.stringify([ + `${_baseUrl}/${buildTarget}/${lowcodeDir}/view.js`, + `${_baseUrl}/${buildTarget}/${lowcodeDir}/view.css`, + ]); + metaTypes.forEach((item) => { + const _url = item + ? `${_baseUrl}/${buildTarget}/${lowcodeDir}/meta.${item}.js` + : `${_baseUrl}/${buildTarget}/${lowcodeDir}/meta.js`; + if (!metaUrl) metaUrl = _url; + metaUrls[item || 'default'] = _url; + advancedMetaUrls[item || 'default'] = [_url]; + }); + renderTypes.forEach((renderType) => { + advancedRenderUrls[renderType] = [ + `${_baseUrl}/${buildTarget}/${lowcodeDir}/render/${renderType}/view.js`, + `${_baseUrl}/${buildTarget}/${lowcodeDir}/render/${renderType}/view.css`, + ]; + }); + } + const _urls = advancedRenderUrls.default || renderUrls || umdUrls; + const _editUrls = editUrls || umdUrls; + const assetsPath = generateEntry({ + template: 'assets.json', + filename: `assets-${item}.json`, + rootDir, + params: { + package: packageName, + version: package.version, + library, + urls: _urls ? JSON.stringify(_urls) : urls, + editUrls: _editUrls ? JSON.stringify(_editUrls) : urls, + metaUrl, + metaUrls: JSON.stringify(metaUrls), + metaExportName, + groups: JSON.stringify(groups), + categories: JSON.stringify(categories), + ignoreComponents: JSON.stringify(ignoreComponents), + advancedRenderUrls: JSON.stringify(advancedRenderUrls), + advancedEditUrls: JSON.stringify(advancedEditUrls), + advancedMetaUrls: JSON.stringify(advancedMetaUrls), + }, + }); + let schemas = baseSchemas; + if (item === 'dev') { + schemas = [...extraSchemas, ...baseSchemas]; + } + const assetsData = require(assetsPath); + schemas.forEach((schemaItem) => { + mergeWith(assetsData, schemaItem, (objValue, srcValue) => { + if (Array.isArray(objValue) && Array.isArray(srcValue)) { + if (typeof objValue[0] === 'string') { + const tempMap = {}; + srcValue.forEach((srcItem) => { + tempMap[srcItem] = true; + }); + objValue.forEach((objItem) => { + if (!tempMap[objItem]) { + srcValue.push(objItem); + } + }); + return srcValue; + } else { + return srcValue.concat(objValue); + } + } + }); + }); + const packageMap = {}; + assetsData.packages.forEach((packageItem) => { + if (!packageMap[packageItem.package]) { + packageMap[packageItem.package] = packageItem; + } + }); + assetsData.packages = Object.values(packageMap); + fse.outputFileSync(assetsPath, JSON.stringify(assetsData, null, 2)); + return assetsPath; + }), + ); + if (!execCompile) return assetsPaths; + onHook('after.build.compile', () => { + ['dev', 'daily', 'prod'].forEach((item) => { + const filename = `assets-${item}.json`; + const targetPath = path.resolve(rootDir, `${buildTarget}/${lowcodeDir}/${filename}`); + const originPath = path.resolve(rootDir, `.tmp/${filename}`); + if (!fse.existsSync(originPath)) { + return; + } + fse.outputFileSync(targetPath, JSON.stringify(require(originPath), null, 2)); + }); + updatePackage(rootDir, baseUrl, lowcodeDir, buildTarget, engineScope); + }); + return assetsPaths; +} + +function updatePackage( + rootDir, + baseUrl, + lowcodeDir = 'lowcode', + buildTarget = 'build', + engineScope = '@ali', +) { + const packageData = require(path.resolve(rootDir, 'package.json')); + let { componentConfig } = packageData; + if (!componentConfig) { + componentConfig = {}; + } + const isBetaVersion = packageData.version.includes('-beta'); + const _baseUrl = + (baseUrl && (isBetaVersion ? baseUrl.daily : baseUrl.prod)) || + `${UNPKG_BASE_URL_MAP[engineScope]}/${packageData.name}@${packageData.version}`; + componentConfig.materialSchema = `${_baseUrl}/${buildTarget}/${lowcodeDir}/assets-${ + isBetaVersion ? 'daily' : 'prod' + }.json`; + packageData.componentConfig = componentConfig; + fse.outputFileSync(path.resolve(rootDir, 'package.json'), JSON.stringify(packageData, null, 2)); +} + +async function bundleComponentMeta(webPackConfig, options, pluginOptions, execCompile) { + const { registerTask, getAllTask, onGetWebpackConfig, context, onHook } = options; + const { rootDir, pkg: package } = context; + let { components } = pluginOptions || {}; + const { + devAlias, + externals = {}, + buildTarget = 'build', + lowcodeDir = 'lowcode', + } = pluginOptions || {}; + if (components && !Array.isArray(components)) { + console.error('[@alifd/build-plugin-lowcode] components must be Array'); + components = null; + } + + const metaDevSubfix = devAlias ? `.${devAlias}` : ''; + const metaFilename = `meta${metaDevSubfix}`; + const usedDevComponents = getUsedComponentMetas(rootDir, `meta${metaDevSubfix}`, components); + + const componentsMetaPath = usedDevComponents.map((component) => { + const componentMetaExportName = `${component}Meta`; + const componentNameFolder = camel2KebabComponentName(component); + const componentJsPath = `${lowcodeDir}/${componentNameFolder}/${metaFilename}`; + const metaJsPath = path.resolve(rootDir, componentJsPath); + const componentMetaName = `${component}Meta`; + const componentImportStr = `import ${componentMetaName} from '${metaJsPath}';`; + const componentMetaPath = generateEntry({ + template: 'component-meta.js', + filename: `${componentJsPath}.js`, + rootDir, + params: { + componentProps: COMPONENT_PROPS, + componentImportStr, + component: componentMetaName, + execCompile, + componentMetaExportName, + version: package.version, + packageName: package.name, + }, + }); + return componentMetaPath; + }); + + usedDevComponents.forEach((component, idx) => { + (function (comp, index) { + const componentNameFolder = camel2KebabComponentName(comp); + const taskName = `lowcode-${componentNameFolder}-meta`; + if (!execCompile || getAllTask().includes(taskName)) return componentsMetaPath; + registerTask(taskName, getWebpackConfig('production')); + onGetWebpackConfig(taskName, (config) => { + const componentMetaExportName = `${comp}Meta`; + const componentJsPath = `${lowcodeDir}/${componentNameFolder}/${metaFilename}`; + config.merge({ + entry: { + [componentJsPath]: componentsMetaPath[index], + }, + }); + config.output.library(componentMetaExportName).libraryTarget('umd'); + config.output.path(path.resolve(rootDir, `${buildTarget}/${lowcodeDir}`)); + config.externals({ ...COMMON_EXTERNALS, ...externals }); + useStyleLoader(config); + }); + })(component, idx); + }); + + onHook('after.build.compile', () => { + usedDevComponents.forEach((comp) => { + const componentNameFolder = camel2KebabComponentName(comp); + const componentJsPath = `${lowcodeDir}/${componentNameFolder}/${metaFilename}`; + const originPath = path.resolve( + rootDir, + `${buildTarget}/${lowcodeDir}/${componentJsPath}.js`, + ); + + // 把meta.js里面的window替换成this + const jsContent = fse.readFileSync(originPath, 'utf-8'); + const jsContentTarget = jsContent.replace('window', 'this'); + fse.outputFileSync(originPath, jsContentTarget); + + try { + const targetPath = path.resolve( + rootDir, + `${buildTarget}/${lowcodeDir}/${componentJsPath}.json`, + ); + fse.outputFileSync(targetPath, JSON.stringify(require(originPath), null, 2)); + } catch (e) {} + }); + }); + + return componentsMetaPath; +} + +// function transferMeta2Json(rootDir) { +// require('jsdom-global')(); +// // globalThis = global; +// const jsdom = require('jsdom'); +// const { JSDOM } = jsdom; +// const DOM = new JSDOM( +// ` +// +// + +// +// +// +// +// DEMO 预览 +// + +// +//
+// +// +// `, +// { +// runScripts: 'dangerously', +// resources: 'usable', +// storageQuota: 10000000, +// url: 'https://example.org?appCode=test', +// }, +// ); +// const { window } = DOM; +// window.onload = () => { +// debug('ready to roll!'); +// try { +// const p = require(path.resolve(rootDir, 'build/lowcode/meta.js')); +// fse.outputFileSync( +// path.resolve(rootDir, 'build/lowcode/meta.json'), +// toJson(p.default.assetsProd), +// ); +// } catch (e) { +// debug('error: ', e); +// } +// process.exit(0); +// }; +// } diff --git a/packages/build-plugin-lowcode/src/public/designer.html b/packages/build-plugin-lowcode/src/public/designer.html new file mode 100644 index 0000000..648c109 --- /dev/null +++ b/packages/build-plugin-lowcode/src/public/designer.html @@ -0,0 +1,302 @@ + + + + + + + DEMO 预览 + + + + + + + + + +
+ + + + + + + + + + + + + + + + diff --git a/packages/build-plugin-lowcode/src/public/index.html b/packages/build-plugin-lowcode/src/public/index.html new file mode 100644 index 0000000..648c109 --- /dev/null +++ b/packages/build-plugin-lowcode/src/public/index.html @@ -0,0 +1,302 @@ + + + + + + + DEMO 预览 + + + + + + + + + +
+ + + + + + + + + + + + + + + + diff --git a/packages/build-plugin-lowcode/src/public/preview.html b/packages/build-plugin-lowcode/src/public/preview.html new file mode 100644 index 0000000..1148077 --- /dev/null +++ b/packages/build-plugin-lowcode/src/public/preview.html @@ -0,0 +1,32 @@ + + + + + + App 渲染器 + + + + +
+ + + + + + + + + + + + diff --git a/packages/build-plugin-lowcode/src/templates/assets.json b/packages/build-plugin-lowcode/src/templates/assets.json new file mode 100644 index 0000000..3a050df --- /dev/null +++ b/packages/build-plugin-lowcode/src/templates/assets.json @@ -0,0 +1,31 @@ +{ + "packages": [ + { + "package": "{{{package}}}", + "version": "{{{version}}}", + "library": "{{{library}}}", + "urls": {{{urls}}}, + "editUrls": {{{editUrls}}}, + "advancedUrls": {{{advancedRenderUrls}}}, + "advancedEditUrls": {{{advancedEditUrls}}} + } + ], + "components": [ + { + "exportName": "{{{metaExportName}}}", + "npm": { + "package": "{{{package}}}", + "version": "{{{version}}}" + }, + "url": "{{{metaUrl}}}", + "urls": {{{metaUrls}}}, + "advancedUrls": {{{advancedMetaUrls}}} + } + ], + "sort": { + "groupList": {{{groups}}}, + "categoryList": {{{categories}}} + }, + "groupList": {{{groups}}}, + "ignoreComponents": {{{ignoreComponents}}} +} diff --git a/packages/build-plugin-lowcode/src/templates/component-meta.js b/packages/build-plugin-lowcode/src/templates/component-meta.js new file mode 100644 index 0000000..c0e86a8 --- /dev/null +++ b/packages/build-plugin-lowcode/src/templates/component-meta.js @@ -0,0 +1,11 @@ +{{{ componentImportStr }}}; + +const componentMeta = {{{ component }}}; + +const { + {{{componentProps}}} +} = componentMeta; + +export { + {{{componentProps}}} +}; diff --git a/packages/build-plugin-lowcode/src/templates/index.jsx b/packages/build-plugin-lowcode/src/templates/index.jsx new file mode 100644 index 0000000..2d09c44 --- /dev/null +++ b/packages/build-plugin-lowcode/src/templates/index.jsx @@ -0,0 +1,250 @@ +import init, { editor, project, material, setters } from '@alifd/lowcode-preset-plugin'; +import mergeWith from 'lodash/mergeWith'; +{{{setterImportStr}}} + +const queryObject = new URLSearchParams(window.location.search); +const fullbackMeta = '{{{fullbackMeta}}}' || ''; +let platform = queryObject.get('platform') || ''; +let metaType = queryObject.get('metaType') || platform || ''; +const metaPathMap = {{{metaPathMap}}}; +const key = metaType ? `meta.${metaType}` : 'meta'; +if (!metaPathMap[key]) { + console.warn(`[@alifd/build-plugin-lowcode] metaType can only in [${Object.keys(metaPathMap)}], current metaType is ${key}, fullback to ${fullbackMeta || 'default'}.`); + metaType = fullbackMeta === 'default' ? '' : fullbackMeta; +} +const isNewEngineVersion = !!material; +const devMode = !!{{{ devMode }}}; +const baseLibrary = '{{{baseLibrary}}}'; +const basePackages = [ + { + package: 'moment', + version: '2.24.0', + urls: ['https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js'], + library: 'moment', + }, + { + package: "lodash", + library: "_", + urls: [ + "https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js" + ] + }, + { + title: 'fusion组件库', + package: '@alifd/next', + version: '1.25.23', + urls: [ + 'https://g.alicdn.com/code/lib/alifd__next/1.25.23/next.min.css', + 'https://g.alicdn.com/code/lib/alifd__next/1.25.23/next-with-locales.min.js', + ], + library: 'Next', + }, + { + package: 'antd', + version: '4.17.3', + urls: [ + 'https://g.alicdn.com/code/lib/antd/4.17.3/antd.min.js', + 'https://g.alicdn.com/code/lib/antd/4.17.3/antd.min.css', + ], + library: 'antd', + }, +]; + +if (baseLibrary === 'rax') { + basePackages.push({ + title: 'meet', + package: '@alifd/meet', + version: 'meet@2.4.2-beta.6', + urls: [ + 'https://mc-fusion.alibaba-inc.com/unpkg/@alifd/meet@2.4.2-beta.6/umd/meet.lowcode.js', + 'https://mc-fusion.alibaba-inc.com/unpkg/@alifd/meet@2.4.2-beta.6/umd/meet.min.css', + ], + library: 'Meet', + }); +} + +const assets = { + packages: [] +}; + +let assetsName = './assets-dev.json'; + +const setterMap = {{{setterMap}}}; +if (typeof setterMap === 'object' && Object.keys(setterMap).length) { + setters.registerSetter(setterMap); +} +if (devMode) { + assets.packages.push({ + "package": "{{{package}}}", + "version": "{{{version}}}", + "library": "{{{library}}}", + "urls": {{{ urls }}}, + "editUrls": {{{editUrls}}}, + "advancedUrls": {{{advancedRenderUrls}}}, + }); + assets.groupList = {{{groups}}}; + assets.sort = { + "groupList": {{{groups}}}, + "categoryList": {{{categories}}} + }; + assets.ignoreComponents = {{{ignoreComponents}}}; + + assets.components = [{ + exportName: '{{{metaExportName}}}', + url: metaType ? `/meta.${metaType}.js` : '/meta.js', + }]; +} + +const schema = getPageSchema() || { + componentName: 'Page', + id: 'node_dockcviv8fo1', + props: { + ref: 'outterView', + style: { + height: '100%', + }, + }, + fileName: 'lowcode', + dataSource: { + list: [], + }, + state: { + text: 'outter', + isShowDialog: false, + }, + css: 'body {font-size: 12px;} .botton{width:100px;color:#ff00ff}', + lifeCycles: { + componentDidMount: { + type: 'JSFunction', + value: "function() {\n console.log('did mount');\n }", + }, + componentWillUnmount: { + type: 'JSFunction', + value: "function() {\n console.log('will umount');\n }", + }, + }, + methods: { + testFunc: { + type: 'JSFunction', + value: "function() {\n console.log('test func');\n }", + }, + onClick: { + type: 'JSFunction', + value: 'function() {\n this.setState({\n isShowDialog: true\n })\n }', + }, + closeDialog: { + type: 'JSFunction', + value: 'function() {\n this.setState({\n isShowDialog: false\n })\n }', + }, + }, + children: [], +}; + +const LCE_CONTAINER = document.getElementById('lce-container'); + +init(() => { + return { + name: 'editor-init', + async init() { + if (!devMode) { + const devAssets = await (await fetch(assetsName)).json(); + const packages = devAssets.packages; + assets.packages = assets.packages.concat(packages); + assets.components = devAssets.components.map(item => { + if (item.advancedUrls && metaType && item.advancedUrls[metaType] && item.advancedUrls[metaType].length) { + item.url = item.advancedUrls[metaType][0]; + } else if (item.urls && metaType && item.urls[metaType]) { + item.url = item.urls[metaType]; + } + return item; + }); + assets.groupList = devAssets.groupList; + } else { + const extraAssets = {{{extraAssets}}}; + const builtinAssets = {{{builtinAssets}}}; + extraAssets && await handleExtraAssets(assets, extraAssets); + builtinAssets && await handleExtraAssets(assets, builtinAssets); + } + + assets.packages = basePackages.concat(assets.packages); + assets.packages = assets.packages.map(item => { + if (item.editUrls && item.editUrls.length) { + item.renderUrls = item.urls; + item.urls = item.editUrls; + } + return item; + }) + + if (baseLibrary && baseLibrary === 'rax') { + editor.set('renderEnv', 'rax'); + project.onRendererReady(() => { + editor.get('designer').currentDocument.simulator._iframe.onload = () => { + editor.get('designer').currentDocument.simulator.set('device', 'phone'); + } + }); + } + + if (isNewEngineVersion) { + material.setAssets(assets); + project.openDocument(schema); + } else { + editor.setAssets(assets); + project.open(schema); + } + }, + } +}, [], LCE_CONTAINER); + +function getPageSchema() { + const schema = JSON.parse( + window.localStorage.getItem('projectSchema') || '{}' + ); + + const pageSchema = schema?.componentsTree?.[0]; + return pageSchema; +}; + +async function handleExtraAssets(assets, extraAssets) { + if (extraAssets && Array.isArray(extraAssets) && extraAssets.length) { + const baseSchemas = await Promise.all( + extraAssets.map(async (url) => { + if (typeof url === 'object') { + return url; + } else { + try { + return (await fetch(url)).json(); + } catch (e) { + console.error(`get assets data from builtin assets ${url} failed: `, e); + return {}; + } + } + }) + ); + baseSchemas.forEach((item) => { + const _assets = { + ...item, + packages: item.packages || [item.package], + components: item.components, + componentList: (item.componentList || []).map((comp) => { + if (comp.children) { + comp.children = comp.children.map((snippet) => { + if (!snippet.sort) { + snippet.sort = { + category: comp.title, + group: '原子组件', + }; + } + return snippet; + }); + } + return comp; + }), + }; + mergeWith(assets, _assets, (objValue, srcValue) => { + if (Array.isArray(objValue) && Array.isArray(srcValue)) { + return srcValue.concat(objValue); + } + }); + }); + } +} \ No newline at end of file diff --git a/packages/build-plugin-lowcode/src/templates/meta.js b/packages/build-plugin-lowcode/src/templates/meta.js new file mode 100644 index 0000000..baff363 --- /dev/null +++ b/packages/build-plugin-lowcode/src/templates/meta.js @@ -0,0 +1,168 @@ +{{{ componentsImportStr }}} + +const componentCategorySort = {}; +{{{categories}}} + .reverse() + .forEach((item, index) => { + componentCategorySort[item] = ++index; + }); + +function generateComponentList(components) { + const componentList = [ + { + title: '常用', + icon: '', + children: [], + }, + { + title: '容器', + icon: '', + children: [], + }, + { + title: '导航', + icon: '', + children: [], + }, + { + title: '内容', + icon: '', + children: [], + }, + { + title: 'Feedback 反馈', + icon: '', + children: [], + }, + ]; + + const groupMap = { + 原子组件: true, + }; + const compGroup = {}; + + components.forEach((comp) => { + const category = comp.category || '其他'; + if (comp.group && !compGroup[comp.componentName]) { + compGroup[comp.componentName] = comp.group; + } + if (comp.group && !groupMap[comp.group]) { + groupMap[comp.group] = true; + } + let target = componentList.find((item) => item.title === category); + if (!target) { + target = { + title: category, + icon: '', + children: [], + }; + + componentList.push(target); + } + + if (comp.snippets && comp.snippets.length) { + target.children.push({ + componentName: comp.componentName, + title: comp.title || comp.componentName, + sort: { + category: target.title, + group: compGroup[comp.componentName] || '原子组件', + priority: componentCategorySort[target.title] || 0, + }, + icon: '', + package: comp.npm.pkg, + snippets: comp.snippets || [], + }); + } + }); + return componentList; +} + +function fillRealVersion(meta, packageName = '{{{packageName}}}', version = '{{{version}}}', basicLibraryVersion={{{basicLibraryVersion}}}) { + if (!meta || !version) { + return meta; + } + const { npm } = meta; + if (!npm) { + return meta; + } + if (typeof basicLibraryVersion === 'object' && basicLibraryVersion[npm.package]) { + meta.npm = { + ...npm, + version: basicLibraryVersion[npm.package] + }; + } else if (npm.package === packageName) { + meta.npm = { + ...npm, + version + }; + } + return meta; +} + +const componentMetas = [{{{ components }}}]; +const components = []; +const npmInfo = {{{ npmInfo }}}; +componentMetas.forEach(meta => { + if (Array.isArray(meta)) { + components.push( + ...meta.map((item) => { + if (!item.npm) { + const { componentName } = item; + const names = componentName.split('.'); + const [exportName, subName] = names; + item.npm = { + exportName: exportName, + main: '', + destructuring: true, + subName: names.length > 1 ? componentName.slice(componentName.indexOf('.') + 1) : subName, + }; + } + item.npm = { ...npmInfo, ...(item.npm || {}) }; + return fillRealVersion(item); + }), + ); + } else if (meta.components) { + components.push( + ...meta.components.map((item) => { + if (!item.npm) { + const { componentName } = item; + const names = componentName.split('.'); + const [exportName, subName] = names; + item.npm = { + exportName: exportName, + main: '', + destructuring: true, + subName: names.length > 1 ? componentName.slice(componentName.indexOf('.') + 1) : subName, + }; + } + item.npm = { ...npmInfo, ...(item.npm || {}) }; + return fillRealVersion(item); + }), + ); + } else { + if (!meta.npm) { + const { componentName } = meta; + const names = componentName.split('.'); + const [exportName, subName] = names; + meta.npm = { + exportName: exportName, + main: '', + destructuring: true, + subName: names.length > 1 ? componentName.slice(componentName.indexOf('.') + 1) : subName, + }; + } + meta.npm = { ...npmInfo, ...(meta.npm || {}) }; + components.push(fillRealVersion(meta)); + } +}); + +const componentList = generateComponentList(components); + +export { components, componentList }; + +const execCompile = !!{{{ execCompile }}}; + +if (!execCompile) { + window.{{{metaExportName}}} = { components, componentList }; +} \ No newline at end of file diff --git a/packages/build-plugin-lowcode/src/templates/preview.jsx b/packages/build-plugin-lowcode/src/templates/preview.jsx new file mode 100644 index 0000000..7b5b9cd --- /dev/null +++ b/packages/build-plugin-lowcode/src/templates/preview.jsx @@ -0,0 +1,93 @@ +{{#if isRax}} +const loadingStyle = { + width: '100vw', + height: '100vh', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + fontWeight: 300, + fontSize: '24px', + lineHeight: '36px', +}; +import { useState, render } from "rax"; +import Renderer from "@ali/lowcode-rax-renderer"; +import UniversalDriver from 'driver-universal'; +const Loading = () =>

Loading...

; +{{else}} +import ReactDOM from 'react-dom'; +import React, { useState } from 'react'; +import { Loading } from '@alifd/next'; +import Renderer from '@alilc/lowcode-react-renderer'; +{{/if}} + +import { buildComponents, assetBundle, AssetLevel, AssetLoader } from '@alilc/lowcode-utils'; + +const queryObject = new URLSearchParams(window.location.search); +const platform = queryObject.get('platform') || 'default'; + +const SamplePreview = () => { + const [data, setData] = useState({}); + + async function init() { + const packages = JSON.parse(window.localStorage.getItem('packages')); + const projectSchema = JSON.parse(window.localStorage.getItem('projectSchema')); + const { componentsMap: componentsMapArray, componentsTree } = projectSchema; + const componentsMap = {}; + componentsMapArray.forEach((component) => { + componentsMap[component.componentName] = component; + }); + const schema = componentsTree[0]; + + const libraryMap = {}; + const libraryAsset = []; + packages.forEach(({ package: _package, library, urls, renderUrls, advancedUrls }) => { + libraryMap[_package] = library; + if (advancedUrls && advancedUrls[platform]) { + libraryAsset.push(advancedUrls[platform]); + } else if (renderUrls) { + libraryAsset.push(renderUrls); + } else if (urls) { + libraryAsset.push(urls); + } + }); + + const vendors = [assetBundle(libraryAsset, AssetLevel.Library)]; + + // TODO asset may cause pollution + const assetLoader = new AssetLoader(); + try{ + await assetLoader.load(libraryAsset); + } catch (e) { + console.warn('[LowcodePreview] load resources failed: ', e); + } + const components = buildComponents(libraryMap, componentsMap); + + setData({ + schema, + components, + }); + } + + const { schema, components } = data; + + if (!schema || !components) { + init(); + return ; + } + + return ( +
+ +
+ ); +}; + +{{#if isRax}} +render(, document.getElementById('ice-container'), { driver: UniversalDriver }); +{{else}} +ReactDOM.render(, document.getElementById('ice-container')); +{{/if}} diff --git a/packages/build-plugin-lowcode/src/templates/view.js b/packages/build-plugin-lowcode/src/templates/view.js new file mode 100644 index 0000000..f70b441 --- /dev/null +++ b/packages/build-plugin-lowcode/src/templates/view.js @@ -0,0 +1,23 @@ +{{{ componentViewsImportStr }}} +{{{ componentViewsExportStr }}} + +import * as componentInstances from '{{{entryPath}}}'; + +{{{scssImport}}} + +export * from '{{{entryPath}}}'; + +const coveredComponents = {{{componentViews}}}; + +const library = '{{{ library }}}'; +const execCompile = !!{{{ execCompile }}}; + +if (!execCompile) { + window[library] = Object.assign({__esModule: true}, componentInstances || {}, coveredComponents || {}); +} + +function getRealComponent(component, componentName) { + if (component.default) return component.default; + if (component[componentName]) return component[componentName]; + return component; +} \ No newline at end of file diff --git a/packages/build-plugin-lowcode/src/utils/index.js b/packages/build-plugin-lowcode/src/utils/index.js new file mode 100644 index 0000000..c10efc8 --- /dev/null +++ b/packages/build-plugin-lowcode/src/utils/index.js @@ -0,0 +1,226 @@ +const _ = require('lodash'); +const path = require('path'); +const fse = require('fs-extra'); +const hbs = require('handlebars'); +const parseProps = require('./parse-props.ts'); + +/** + * @description generate js file as webpack entry + * @param {String} template template path + * @param {String} filename + * @param {String} rootDir + * @param {Object} params params for compile template content + * @returns {String} path of entry file + */ +function generateEntry({ template, filename = 'index.js', rootDir = process.cwd(), params }) { + const hbsTemplatePath = path.join(__dirname, `../templates/${template}`); + const hbsTemplateContent = fse.readFileSync(hbsTemplatePath, 'utf-8'); + const compileTemplateContent = hbs.compile(hbsTemplateContent); + + const tempDir = path.join(rootDir, '.tmp'); + const jsPath = path.join(tempDir, filename); + + const jsTemplateContent = compileTemplateContent(params); + fse.outputFileSync(jsPath, jsTemplateContent); + + return jsPath; +} + +function parseNpmName(npmName) { + if (typeof npmName !== 'string') { + throw new TypeError('Expected a string'); + } + const matched = + npmName.charAt(0) === '@' ? /(@[^\/]+)\/(.+)/g.exec(npmName) : [npmName, '', npmName]; + if (!matched) { + throw new Error(`[parse-package-name] "${npmName}" is not a valid string`); + } + const scope = matched[1]; + const name = (matched[2] || '').replace(/\s+/g, '').replace(/[\-_]+([^\-_])/g, ($0, $1) => { + return $1.toUpperCase(); + }); + const uniqueName = + (matched[1] ? matched[1].charAt(1).toUpperCase() + matched[1].slice(2) : '') + + name.charAt(0).toUpperCase() + + name.slice(1); + return { + scope, + name, + uniqueName, + }; +} + +function camel2KebabComponentName(camel) { + return camel + .replace(/[A-Z]/g, (item) => { + return `-${item.toLowerCase()}`; + }) + .replace(/^\-/, ''); +} + +function kebab2CamelComponentName(kebab) { + const camel = kebab.charAt(0).toUpperCase() + kebab.substr(1); + return camel.replace(/-([a-z])/g, (keb, item) => { + return item.toUpperCase(); + }); +} + +function generateComponentList(components) { + const componentList = [ + { + title: '常用', + icon: '', + children: [], + }, + { + title: '容器', + icon: '', + children: [], + }, + { + title: '导航', + icon: '', + children: [], + }, + { + title: '内容', + icon: '', + children: [], + }, + { + title: 'Feedback 反馈', + icon: '', + children: [], + }, + ]; + + components.forEach((comp) => { + const category = comp.category || '其他'; + let target = componentList.find((item) => item.title === category); + if (!target) { + target = { + title: category, + icon: '', + children: [], + }; + + componentList.push(target); + } + + if (comp.snippets) { + target.children.push({ + componentName: comp.componentName, + title: comp.title || comp.componentName, + icon: '', + package: comp.npm.pkg, + snippets: comp.snippets || [], + }); + } + }); + return componentList; +} + +function replacer(key, value) { + if (typeof value === 'function') { + return { + type: 'JSFunction', + value: String(value), + }; + } + return value; +} + +function isAsyncFunction(fn) { + return fn[Symbol.toStringTag] === 'AsyncFunction'; +} +function reviewer(key, value) { + if (!value) { + return value; + } + if (key === 'icon') { + if (typeof value === 'object') { + return { + type: 'smile', + size: 'small', + }; + } + } + if (typeof value === 'object') { + if (value.type === 'JSFunction') { + let _value = value.value && value.value.trim(); + let template = ` + return function lowcode() { + const self = this; + try { + return (${_value}).apply(self, arguments); + } catch(e) { + console.log('call function which parsed by lowcode for key ${key} failed: ', e); + return e.message; + } + };`; + try { + return Function(template)(); + } catch (e) { + if (e && e.message.includes("Unexpected token '{'")) { + console.log('method need add funtion prefix'); + _value = `function ${_value}`; + template = ` + return function lowcode() { + const self = this; + try { + return (${_value}).apply(self, arguments); + } catch(e) { + console.log('call function which parsed by lowcode for key ${key} failed: ', e); + return e.message; + } + };`; + return Function(template)(); + } + console.error('parse lowcode function error: ', e); + console.error(value); + return value; + } + } + } + return value; +} + +function toJson(object, replacer) { + return JSON.stringify(object, replacer || this.replacer, 2); +} + +function parseJson(json) { + const input = typeof json === 'string' ? json : JSON.stringify(json); + return JSON.parse(input, this.reviewer); +} + +function asyncDebounce(func, wait) { + const debounced = _.debounce(async (resolve, reject, bindSelf, args) => { + try { + const result = await func.bind(bindSelf)(...args); + resolve(result); + } catch (error) { + reject(error); + } + }, wait); + + // This is the function that will be bound by the caller, so it must contain the `function` keyword. + function returnFunc(...args) { + return new Promise((resolve, reject) => { + debounced(resolve, reject, this, args); + }); + } + + return returnFunc; +} + +module.exports = { + toJson, + parseProps, + parseNpmName, + generateEntry, + asyncDebounce, + generateComponentList, + camel2KebabComponentName, + kebab2CamelComponentName, +}; diff --git a/packages/build-plugin-lowcode/src/utils/npm.ts b/packages/build-plugin-lowcode/src/utils/npm.ts new file mode 100644 index 0000000..447c88f --- /dev/null +++ b/packages/build-plugin-lowcode/src/utils/npm.ts @@ -0,0 +1,37 @@ +const path = require('path'); +const { pathExists } = require('fs-extra'); +const spawn = require('cross-spawn-promise'); + +async function isNPMInstalled(args) { + return pathExists(path.join(args.workDir, 'node_modules')); +} + +async function install(args) { + if (await isNPMInstalled(args)) return; + const { workDir, npmClient = 'tnpm' } = args; + try { + await spawn(npmClient, ['i'], { stdio: 'inherit', cwd: workDir }); + } catch (e) { + // TODO + } +} + +async function isNPMModuleInstalled(args, name) { + const modulePkgJsonPath = path.resolve(args.workDir || '', 'node_modules', name, 'package.json'); + return pathExists(modulePkgJsonPath); +} + +async function installModule(args, name) { + if (await isNPMModuleInstalled(args, name)) return; + const { workDir, npmClient = 'tnpm' } = args; + try { + await spawn(npmClient, ['i', name], { stdio: 'inherit', cwd: workDir }); + } catch (e) { + // TODO + } +} + +module.exports = { + installModule, + install, +}; diff --git a/packages/build-plugin-lowcode/src/utils/parse-props.ts b/packages/build-plugin-lowcode/src/utils/parse-props.ts new file mode 100644 index 0000000..87a5bf9 --- /dev/null +++ b/packages/build-plugin-lowcode/src/utils/parse-props.ts @@ -0,0 +1,261 @@ +function propConfigToFieldConfig(propConfig) { + const { name, description } = propConfig; + const title = { + label: { + type: 'i18n', + 'en-US': name, + 'zh-CN': (description && description.slice(0, 10)) || name, + }, + tip: description ? `${name} | ${description}` : undefined, + }; + const setter = propConfig.setter ? propConfig.setter : propTypeToSetter(propConfig.propType); + delete propConfig.propType; + return { + title, + ...propConfig, + // TODO 这边直接用propConfig，将setter丢在propconfig里，需要确认是否在PropConfig扩展还是换实现 + setter, + }; +} + +function propTypeToSetter(propType) { + let typeName; + let isRequired = false; + if (typeof propType === 'string') { + typeName = propType; + } else if (typeof propType === 'object') { + typeName = propType.type; + isRequired = propType.isRequired; + } else { + typeName = 'string'; + } + // TODO: use mixinSetter wrapper + switch (typeName) { + case 'string': + return { + componentName: 'StringSetter', + isRequired, + initialValue: '', + }; + case 'number': + return { + componentName: 'NumberSetter', + isRequired, + initialValue: 0, + }; + case 'bool': + return { + componentName: 'BoolSetter', + isRequired, + initialValue: false, + }; + case 'oneOf': + const dataSource = (propType.value || []).map((value, index) => { + const t = typeof value; + return { + label: + t === 'string' || t === 'number' || t === 'boolean' ? String(value) : `value ${index}`, + value, + }; + }); + const componentName = dataSource.length >= 4 ? 'SelectSetter' : 'RadioGroupSetter'; + return { + componentName, + props: { dataSource, options: dataSource }, + isRequired, + initialValue: dataSource[0] ? dataSource[0].value : null, + }; + + case 'element': + case 'node': // TODO: use Mixin + return { + // slotSetter + componentName: 'SlotSetter', + props: { + mode: typeName, + }, + isRequired, + initialValue: { + type: 'JSSlot', + value: [], + }, + }; + case 'shape': + case 'exact': + const items = (propType.value || []).map((item) => propConfigToFieldConfig(item)); + return { + componentName: 'ObjectSetter', + props: { + config: { + items, + extraSetter: typeName === 'shape' ? propTypeToSetter('any') : null, + }, + }, + isRequired, + initialValue: (field) => { + const data = {}; + items.forEach((item) => { + let initial = item.defaultValue; + if (initial == null && item.setter && typeof item.setter === 'object') { + initial = item.setter.initialValue; + } + data[item.name] = initial + ? typeof initial === 'function' + ? initial(field) + : initial + : null; + }); + return data; + }, + }; + case 'object': + case 'objectOf': + return { + componentName: 'ObjectSetter', + props: { + config: { + extraSetter: propTypeToSetter(typeName === 'objectOf' ? propType.value : 'any'), + }, + }, + isRequired, + initialValue: {}, + }; + case 'array': + case 'arrayOf': + return { + componentName: 'ArraySetter', + props: { + itemSetter: propTypeToSetter(typeName === 'arrayOf' ? propType.value : 'any'), + }, + isRequired, + initialValue: [], + }; + case 'func': + return { + componentName: 'FunctionSetter', + isRequired, + }; + case 'color': + return { + componentName: 'ColorSetter', + isRequired, + }; + case 'oneOfType': + return { + componentName: 'MixedSetter', + props: { + // TODO: + setters: (propType.value || []).map((item) => propTypeToSetter(item)), + }, + isRequired, + }; + default: + // do nothing + } + return { + componentName: 'MixedSetter', + isRequired, + props: {}, + }; +} + +const EVENT_RE = /^on|after|before[A-Z][\w]*$/; + +module.exports = function (metadata) { + const { configure = {} } = metadata; + // TODO types后续补充 + let extendsProps = null; + if (configure.props) { + if (Array.isArray(configure.props)) { + return metadata; + } + const { isExtends, override = [] } = configure.props; + // 不开启继承时，直接返回configure配置 + if (!isExtends) { + return { + ...metadata, + configure: { + ...configure, + props: [...override], + }, + }; + } + + extendsProps = {}; + // 开启继承后，缓存重写内容的配置 + override.forEach((prop) => { + extendsProps[prop.name] = prop; + }); + } + + if (!metadata.props) { + return { + ...metadata, + configure: { + ...configure, + props: [], + }, + }; + } + const { component = {}, supports = {} } = configure; + const supportedEvents = supports.events ? null : []; + const props = []; + + metadata.props.forEach((prop) => { + const { name, propType, description } = prop; + if ( + name === 'children' && + (component.isContainer || propType === 'node' || propType === 'element' || propType === 'any') + ) { + if (component.isContainer !== false) { + component.isContainer = true; + props.push(propConfigToFieldConfig(prop)); + return; + } + } + + if (EVENT_RE.test(name) && (propType === 'func' || propType === 'any')) { + if (supportedEvents) { + supportedEvents.push({ + name, + description, + }); + supports.events = supportedEvents; + } + return; + } + + if (name === 'className' && (propType === 'string' || propType === 'any')) { + if (supports.className == null) { + supports.className = true; + } + return; + } + + if (name === 'style' && (propType === 'object' || propType === 'any')) { + if (supports.style == null) { + supports.style = true; + } + return; + } + + // 存在覆盖配置时 + if (extendsProps) { + if (name in extendsProps) { + prop = extendsProps[name]; + } + } + + props.push(propConfigToFieldConfig(prop)); + }); + + return { + ...metadata, + configure: { + ...configure, + props, + supports, + component, + }, + }; +}; From 53c8df13c59112f8b98898567ab83d02152888d7 Mon Sep 17 00:00:00 2001 From: mark Date: Wed, 15 Jun 2022 15:43:00 +0800 Subject: [PATCH 05/98] fix: fix preview issue --- packages/build-plugin-lowcode/demo/component/package.json | 3 +++ packages/build-plugin-lowcode/package.json | 2 +- packages/build-plugin-lowcode/src/index.js | 8 ++------ 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/build-plugin-lowcode/demo/component/package.json b/packages/build-plugin-lowcode/demo/component/package.json index 023d6cc..2ceb728 100644 --- a/packages/build-plugin-lowcode/demo/component/package.json +++ b/packages/build-plugin-lowcode/demo/component/package.json @@ -49,5 +49,8 @@ "pre-commit": "f2elint commit-file-scan", "commit-msg": "f2elint commit-msg-scan" } + }, + "componentConfig": { + "materialSchema": "https://unpkg.com/@alilc/example-components@1.0.0/build/lowcode/assets-prod.json" } } \ No newline at end of file diff --git a/packages/build-plugin-lowcode/package.json b/packages/build-plugin-lowcode/package.json index 6a9541a..0e1391c 100644 --- a/packages/build-plugin-lowcode/package.json +++ b/packages/build-plugin-lowcode/package.json @@ -1,6 +1,6 @@ { "name": "@alifd/build-plugin-lowcode", - "version": "0.3.0", + "version": "0.3.1-beta.0", "description": "build plugin for component-to-lowcode", "main": "index.js", "keywords": [ diff --git a/packages/build-plugin-lowcode/src/index.js b/packages/build-plugin-lowcode/src/index.js index 9f679b2..2016422 100644 --- a/packages/build-plugin-lowcode/src/index.js +++ b/packages/build-plugin-lowcode/src/index.js @@ -926,10 +926,6 @@ async function bundleRenderView(options, pluginOptions, platform, execCompile) { return `import * as ${component}Data from '${viewJsPath}'`; }) .join('\n'); - if (platform === 'default') { - componentViewsExportStr = ''; - componentViewsImportStr = ''; - } const scssEntry = getScssEntry(rootDir); const viewPath = generateEntry({ template: 'view.js', @@ -1051,8 +1047,8 @@ async function bundleAssets(options, pluginOptions, metaTypes, renderTypes, exec }); renderTypes.forEach((renderType) => { advancedRenderUrls[renderType] = [ - `./render/${renderType}.view.js`, - `./render/${renderType}.view.css`, + `./render/${renderType}/view.js`, + `./render/${renderType}/view.css`, ]; }); } else { From d6da0d246a3a19956df24c20ab5eed2bd0afbed3 Mon Sep 17 00:00:00 2001 From: mark Date: Tue, 21 Jun 2022 10:32:50 +0800 Subject: [PATCH 06/98] fix: fix main in package.json --- packages/build-plugin-lowcode/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/build-plugin-lowcode/package.json b/packages/build-plugin-lowcode/package.json index 0e1391c..961e13d 100644 --- a/packages/build-plugin-lowcode/package.json +++ b/packages/build-plugin-lowcode/package.json @@ -1,8 +1,8 @@ { "name": "@alifd/build-plugin-lowcode", - "version": "0.3.1-beta.0", + "version": "0.3.1-beta.1", "description": "build plugin for component-to-lowcode", - "main": "index.js", + "main": "src/index.js", "keywords": [ "plugin" ], From 738f2970aa4b5a6efabb50486c5678c632bbe71d Mon Sep 17 00:00:00 2001 From: eternalsky Date: Fri, 8 Jul 2022 14:28:42 +0800 Subject: [PATCH 07/98] =?UTF-8?q?feat(build-plugin-alt):=20=E5=9C=A8=20inj?= =?UTF-8?q?ect=20=E6=A8=A1=E5=BC=8F=E4=B8=8B=E4=B8=8D=E4=BD=BF=E7=94=A8=20?= =?UTF-8?q?miniCssExtract?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/build-plugin-alt/package.json | 5 +++-- packages/build-plugin-alt/src/baseConfig.ts | 2 ++ packages/build-plugin-alt/src/index.ts | 2 ++ .../build-plugin-alt/src/utils/dropMinicss.ts | 20 +++++++++++++++++++ 4 files changed, 27 insertions(+), 2 deletions(-) create mode 100644 packages/build-plugin-alt/src/utils/dropMinicss.ts diff --git a/packages/build-plugin-alt/package.json b/packages/build-plugin-alt/package.json index b783a7b..f997442 100644 --- a/packages/build-plugin-alt/package.json +++ b/packages/build-plugin-alt/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/build-plugin-alt", - "version": "1.1.0", + "version": "1.2.0", "description": "build-scripts plugin template for developers", "main": "lib/index.js", "files": [ @@ -64,7 +64,8 @@ "kolorist": "^1.5.0", "lodash": "^4.17.21", "moment-locales-webpack-plugin": "^1.2.0", - "react-dev-utils": "^11.0.4" + "react-dev-utils": "^11.0.4", + "style-loader": "^2.0.0" }, "publishConfig": { "access": "public", diff --git a/packages/build-plugin-alt/src/baseConfig.ts b/packages/build-plugin-alt/src/baseConfig.ts index 7bc9810..49dc5ba 100644 --- a/packages/build-plugin-alt/src/baseConfig.ts +++ b/packages/build-plugin-alt/src/baseConfig.ts @@ -54,6 +54,8 @@ export default (config: WebpackChain, { rootDir, entry, type, pkg, mainFile, gen "@alilc/lowcode-designer": "var window.AliLowCodeEngine.common.designerCabin", }); + + // see https://github.com/webpack/webpack/releases/tag/v4.0.0 for details config.module.rule('mjs2js') .test(/\.mjs$/) .include diff --git a/packages/build-plugin-alt/src/index.ts b/packages/build-plugin-alt/src/index.ts index 6fd17fd..acad568 100644 --- a/packages/build-plugin-alt/src/index.ts +++ b/packages/build-plugin-alt/src/index.ts @@ -11,6 +11,7 @@ import builtinConfig from './builtinConfig'; import injectConfig from './inject/config'; import makeInjectInfo from './inject/makeInjectInfo'; import injectApis from './inject/apis'; +import dropMinicss from './utils/dropMinicss'; interface IOpitons { type: 'setter' | 'plugin' | 'component'; @@ -47,6 +48,7 @@ const plugin: IPlugin = ({ context, registerTask, onGetWebpackConfig, onHook, lo }); devConfig(config, { pkg }); if (inject) { + dropMinicss(config); injectConfig(config, { rootDir, pkg, type }) } }); diff --git a/packages/build-plugin-alt/src/utils/dropMinicss.ts b/packages/build-plugin-alt/src/utils/dropMinicss.ts new file mode 100644 index 0000000..80786dd --- /dev/null +++ b/packages/build-plugin-alt/src/utils/dropMinicss.ts @@ -0,0 +1,20 @@ +import Config from "webpack-chain" + +/** + * 去除 minicss 的逻辑 + * @param {*} config + */ +export default (config: Config) => { + config.plugins.delete('MiniCssExtractPlugin'); + ['scss', 'css', 'less'].forEach((ruleName) => { + ['', '-module'].forEach((suffix) => { + const finalRuleName = `${ruleName}${suffix}`; + config.module.rule(finalRuleName).uses.delete('MiniCssExtractPlugin.loader'); + config.module.rule(finalRuleName) + .use('style-loader') + .before('css-loader') + .loader(require.resolve('style-loader')); + }); + }); + console.log(config.toString()); +} \ No newline at end of file From 29f5611ea4dd7dee46fbd48f5d7839378c6df270 Mon Sep 17 00:00:00 2001 From: eternalsky Date: Fri, 8 Jul 2022 14:49:47 +0800 Subject: [PATCH 08/98] =?UTF-8?q?refactor(build-plugin-alt):=20=E5=88=A0?= =?UTF-8?q?=E9=99=A4=E6=97=A0=E7=94=A8=20console?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/build-plugin-alt/src/utils/dropMinicss.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/build-plugin-alt/src/utils/dropMinicss.ts b/packages/build-plugin-alt/src/utils/dropMinicss.ts index 80786dd..1d6ccc2 100644 --- a/packages/build-plugin-alt/src/utils/dropMinicss.ts +++ b/packages/build-plugin-alt/src/utils/dropMinicss.ts @@ -16,5 +16,4 @@ export default (config: Config) => { .loader(require.resolve('style-loader')); }); }); - console.log(config.toString()); } \ No newline at end of file From 28476fac1838c3a78a3c1a3f13de066efb273620 Mon Sep 17 00:00:00 2001 From: eternalsky Date: Fri, 8 Jul 2022 14:58:09 +0800 Subject: [PATCH 09/98] =?UTF-8?q?fix(build-plugin-alt):=20inject=20?= =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E4=B8=8B=EF=BC=8C=E6=9C=AA=E9=85=8D=E7=BD=AE?= =?UTF-8?q?=20openUrl=20=E7=9A=84=E6=83=85=E5=86=B5=E4=B8=8B=EF=BC=8C?= =?UTF-8?q?=E6=89=93=E5=BC=80=20lowcode-engine=20demo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/build-plugin-alt/CHANGELOG.md | 9 +++++++++ packages/build-plugin-alt/package.json | 2 +- packages/build-plugin-alt/src/index.ts | 8 ++++++-- 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/packages/build-plugin-alt/CHANGELOG.md b/packages/build-plugin-alt/CHANGELOG.md index aab2670..b674715 100644 --- a/packages/build-plugin-alt/CHANGELOG.md +++ b/packages/build-plugin-alt/CHANGELOG.md @@ -1,5 +1,14 @@ # Changelog +## 1.2.1 + +- `refactor` 删除无用 console +- `fix` inject 模式下，为配置 openUrl 的情况下，打开 lowcode-engine demo。 + +## 1.2.0 + +- `feat` 在 inject 模式下不使用 miniCssExtract + ## 1.1.0 - `feat` 支持配置 library diff --git a/packages/build-plugin-alt/package.json b/packages/build-plugin-alt/package.json index f997442..87470ca 100644 --- a/packages/build-plugin-alt/package.json +++ b/packages/build-plugin-alt/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/build-plugin-alt", - "version": "1.2.0", + "version": "1.2.1", "description": "build-scripts plugin template for developers", "main": "lib/index.js", "files": [ diff --git a/packages/build-plugin-alt/src/index.ts b/packages/build-plugin-alt/src/index.ts index acad568..7bbf4ec 100644 --- a/packages/build-plugin-alt/src/index.ts +++ b/packages/build-plugin-alt/src/index.ts @@ -77,8 +77,12 @@ const plugin: IPlugin = ({ context, registerTask, onGetWebpackConfig, onHook, lo // }) } onHook('after.start.devServer', ({ url }) => { - if (inject && openUrl) { - openBrowser(openUrl); + if (inject) { + if (openUrl) { + openBrowser(openUrl); + } else { + openBrowser('https://lowcode-engine.cn/demo/index.html?debug'); + } } else { openBrowser(openUrl || url); } From d26957b1958f4ac464ea9fc1278714f6976aef57 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=87=91=E7=A6=85?= Date: Sun, 10 Jul 2022 21:49:57 +0800 Subject: [PATCH 10/98] feat: support setter dev --- .../demo/component/build.lowcode.js | 9 +++++++- .../demo/component/lowcode/button/meta.ts | 8 ++++--- .../demo/component/package.json | 9 +++++--- .../demo/setter/build.lowcode.js | 22 +++++++++++++++++++ .../demo/setter/package.json | 19 ++++++++++++++++ .../demo/setter/src/index.tsx | 19 ++++++++++++++++ .../demo/setter/tsconfig.json | 21 ++++++++++++++++++ packages/build-plugin-lowcode/package.json | 3 ++- packages/build-plugin-lowcode/src/index.js | 14 ++++++++++-- .../src/templates/index.jsx | 11 ++++++---- .../build-plugin-lowcode/src/utils/npm.ts | 6 ++++- 11 files changed, 126 insertions(+), 15 deletions(-) create mode 100644 packages/build-plugin-lowcode/demo/setter/build.lowcode.js create mode 100644 packages/build-plugin-lowcode/demo/setter/package.json create mode 100644 packages/build-plugin-lowcode/demo/setter/src/index.tsx create mode 100644 packages/build-plugin-lowcode/demo/setter/tsconfig.json diff --git a/packages/build-plugin-lowcode/demo/component/build.lowcode.js b/packages/build-plugin-lowcode/demo/component/build.lowcode.js index dde5639..99dd729 100644 --- a/packages/build-plugin-lowcode/demo/component/build.lowcode.js +++ b/packages/build-plugin-lowcode/demo/component/build.lowcode.js @@ -8,7 +8,14 @@ module.exports = { [ '../../src/index.js', { - engineScope: '@alilc' + engineScope: '@alilc', + extraAssets: [ + 'https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.3/dist/assets.json' + ], + setterMap: { + TestSetter: '@alilc/magic-editor-setter@1.0.0' + }, + npmClient: 'cnpm' }, ], ], diff --git a/packages/build-plugin-lowcode/demo/component/lowcode/button/meta.ts b/packages/build-plugin-lowcode/demo/component/lowcode/button/meta.ts index 6d21b0e..f7a86b4 100644 --- a/packages/build-plugin-lowcode/demo/component/lowcode/button/meta.ts +++ b/packages/build-plugin-lowcode/demo/component/lowcode/button/meta.ts @@ -7,6 +7,7 @@ const ButtonMeta: ComponentMetadata = { "docUrl": "", "screenshot": "", "devMode": "proCode", + group: '测试组件', "npm": { "package": "@alilc/example-components", "version": "1.0.0", @@ -27,9 +28,10 @@ const ButtonMeta: ComponentMetadata = { }, "name": "title", "setter": { - "componentName": "StringSetter", - "isRequired": true, - "initialValue": "" + "componentName": "TestSetter", + props: { + defaultChecked: true + } } } ], diff --git a/packages/build-plugin-lowcode/demo/component/package.json b/packages/build-plugin-lowcode/demo/component/package.json index 2ceb728..6eafe61 100644 --- a/packages/build-plugin-lowcode/demo/component/package.json +++ b/packages/build-plugin-lowcode/demo/component/package.json @@ -24,12 +24,15 @@ ], "dependencies": { "@alifd/next": "^1.21.8", - "@alife/theme-whale-light": "^0.10.1", + "@alilc/lowcode-setter-behavior": "^1.0.0", + "@alilc/lowcode-setter-title": "^1.0.2", + "@alilc/magic-editor-setter": "^1.0.0", "@storybook/addon-docs": "^6.3.4", "@storybook/addon-essentials": "^6.3.4", "@storybook/addon-storysource": "^6.3.4", "moment": "^2.29.1", - "prop-types": "^15.5.8" + "prop-types": "^15.5.8", + "undefined": "^undefined" }, "devDependencies": { "@alib/build-scripts": "^0.1.3", @@ -53,4 +56,4 @@ "componentConfig": { "materialSchema": "https://unpkg.com/@alilc/example-components@1.0.0/build/lowcode/assets-prod.json" } -} \ No newline at end of file +} diff --git a/packages/build-plugin-lowcode/demo/setter/build.lowcode.js b/packages/build-plugin-lowcode/demo/setter/build.lowcode.js new file mode 100644 index 0000000..95260a5 --- /dev/null +++ b/packages/build-plugin-lowcode/demo/setter/build.lowcode.js @@ -0,0 +1,22 @@ +const package = require('./package.json'); + +module.exports = { + alias: { + '@': './src/components', + }, + plugins: [ + [ + '../../src/index.js', + { + engineScope: '@alilc', + extraAssets: [ + 'https://unpkg.com/@alilc/lowcode-materials@1.0.3/build/lowcode/assets-prod.json' + ], + type: 'setter', + setterName: 'SelectSetter', + npmClient: 'cnpm', + noParse: true + }, + ], + ], +}; diff --git a/packages/build-plugin-lowcode/demo/setter/package.json b/packages/build-plugin-lowcode/demo/setter/package.json new file mode 100644 index 0000000..939f9e1 --- /dev/null +++ b/packages/build-plugin-lowcode/demo/setter/package.json @@ -0,0 +1,19 @@ +{ + "name": "@alilc/advance-select-setter", + "version": "1.0.0", + "description": "", + "main": "lib/index.js", + "scripts": { + "start": "build-scripts start --config ./build.lowcode.js", + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "MIT", + "dependencies": { + "@alifd/next": "^1.25.42", + "react": "^18.2.0" + }, + "devDependencies": { + "@alib/build-scripts": "^0.1.3" + } +} diff --git a/packages/build-plugin-lowcode/demo/setter/src/index.tsx b/packages/build-plugin-lowcode/demo/setter/src/index.tsx new file mode 100644 index 0000000..3d6437b --- /dev/null +++ b/packages/build-plugin-lowcode/demo/setter/src/index.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; + +import { Select, Icon } from '@alifd/next'; + +class AdvancedSelectSetter extends React.Component { + + render () { + const { value, onChange, dataSource, options, helpUrl="https://fusion.design" } = this.props; + + return
+ { + const val = e.currentTarget.value; + onChange?.(val); + }} + style={{ width: '100%' }} + /> +
+ ); +}; + +export default InputSetter; diff --git a/packages/build-plugin-lowcode/demo/antd-setter-map/tsconfig.json b/packages/build-plugin-lowcode/demo/antd-setter-map/tsconfig.json new file mode 100644 index 0000000..a511d68 --- /dev/null +++ b/packages/build-plugin-lowcode/demo/antd-setter-map/tsconfig.json @@ -0,0 +1,21 @@ +{ + "compileOnSave": false, + "buildOnSave": false, + "compilerOptions": { + "outDir": "build", + "module": "esnext", + "target": "es6", + "jsx": "react", + "moduleResolution": "node", + "lib": ["es6", "dom"], + "sourceMap": true, + "allowJs": true, + "noUnusedLocals": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "skipLibCheck": true + }, + "include": ["src/*.ts", "src/*.tsx"], + "exclude": ["node_modules", "build", "public"] +} diff --git a/packages/build-plugin-lowcode/package.json b/packages/build-plugin-lowcode/package.json index d39d0b0..3ceda6b 100644 --- a/packages/build-plugin-lowcode/package.json +++ b/packages/build-plugin-lowcode/package.json @@ -8,7 +8,8 @@ ], "scripts": { "component:dev": "cd demo/component && npm start", - "setter:dev": "cd demo/setter && npm start" + "setter:dev": "cd demo/setter && npm start", + "antdSetterMap:dev": "cd demo/antd-setter-map && npm start" }, "repository": { "type": "git", diff --git a/packages/build-plugin-lowcode/src/public/index.html b/packages/build-plugin-lowcode/src/public/index.html index 648c109..3379b3b 100644 --- a/packages/build-plugin-lowcode/src/public/index.html +++ b/packages/build-plugin-lowcode/src/public/index.html @@ -47,6 +47,9 @@ + <% if (typeof antdCssUrl === 'string') { %> + + <% } %>
@@ -58,6 +61,9 @@ + <% if (typeof antdJsUrl === 'string') { %> + + <% } %> + + + + + + + + + + + + + + + + + + + + +
+ + + diff --git a/packages/lowcode-preset-plugin/src/index.scss b/packages/lowcode-preset-plugin/src/index.scss new file mode 100644 index 0000000..ccd203d --- /dev/null +++ b/packages/lowcode-preset-plugin/src/index.scss @@ -0,0 +1,3 @@ +#engine { + height: 100vh; +} \ No newline at end of file diff --git a/packages/lowcode-preset-plugin/src/index.tsx b/packages/lowcode-preset-plugin/src/index.tsx new file mode 100644 index 0000000..d6ccb8c --- /dev/null +++ b/packages/lowcode-preset-plugin/src/index.tsx @@ -0,0 +1,40 @@ +import { init, plugins } from '@alilc/lowcode-engine'; +import { createFetchHandler } from '@alilc/lowcode-datasource-fetch-handler' + +import registerDefaultPlugins from './plugins'; +import registerDefaultSetters from './setters'; + +import './index.scss'; + +export * from '@alilc/lowcode-engine'; + +const defaultConfig = { + // locale: 'zh-CN', + enableCondition: true, + enableCanvasLock: true, + // 默认绑定变量 + supportVariableGlobally: true, + // simulatorUrl 在当 engine-core.js 同一个父路径下时是不需要配置的！！！ + // 这里因为用的是 alifd cdn，在不同 npm 包，engine-core.js 和 react-simulator-renderer.js 是不同路径 + simulatorUrl: [ + 'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/css/react-simulator-renderer.css', + 'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/js/react-simulator-renderer.js' + ], + requestHandlersMap: { + fetch: createFetchHandler() + } +}; + +export default async (cb, customPlugins, container, config) => { + + await registerDefaultPlugins(); + registerDefaultSetters(); + + // 处理外部传入初始化回调 + if (typeof cb === 'function') { + cb.pluginName = 'editorInit'; + await plugins.register(cb); + } + + init(container, config || defaultConfig); +} \ No newline at end of file diff --git a/packages/lowcode-preset-plugin/src/plugins/index.tsx b/packages/lowcode-preset-plugin/src/plugins/index.tsx new file mode 100644 index 0000000..f3abea3 --- /dev/null +++ b/packages/lowcode-preset-plugin/src/plugins/index.tsx @@ -0,0 +1,207 @@ +import React from 'react'; +import { + ILowCodePluginContext, + plugins, + project, +} from '@alilc/lowcode-engine'; +import AliLowCodeEngineExt from '@alilc/lowcode-engine-ext'; +import { Button } from '@alifd/next'; +import UndoRedoPlugin from '@alilc/lowcode-plugin-undo-redo'; +import ComponentsPane from '@alilc/lowcode-plugin-components-pane'; +import ZhEnPlugin from '@alilc/lowcode-plugin-zh-en'; +import CodeGenPlugin from '@alilc/lowcode-plugin-code-generator'; +import DataSourcePanePlugin from '@alilc/lowcode-plugin-datasource-pane'; +import SchemaPlugin from '@alilc/lowcode-plugin-schema'; +import CodeEditor from "@alilc/lowcode-plugin-code-editor"; +import ManualPlugin from "@alilc/lowcode-plugin-manual"; +import Inject, { injectAssets } from '@alilc/lowcode-plugin-inject'; +import SimulatorResizer from '@alilc/lowcode-plugin-simulator-select'; + +import Logo from './logo'; + +const registerDefaultPlugins = async () => { + await plugins.register(ManualPlugin); + + // await plugins.register(Inject); + + // plugin API 见 https://lowcode-engine.cn/docV2/ibh9fh + SchemaPlugin.pluginName = 'SchemaPlugin'; + await plugins.register(SchemaPlugin); + + SimulatorResizer.pluginName = 'SimulatorResizer'; + plugins.register(SimulatorResizer); + + const builtinPluginRegistry = (ctx: ILowCodePluginContext) => { + return { + name: 'builtin-plugin-registry', + async init() { + const { skeleton } = ctx; + // 注册 logo 面板 + skeleton.add({ + area: 'topArea', + type: 'Widget', + name: 'logo', + content: Logo, + contentProps: { + logo: 'https://img.alicdn.com/imgextra/i4/O1CN013w2bmQ25WAIha4Hx9_!!6000000007533-55-tps-137-26.svg', + href: 'https://lowcode-engine.cn', + }, + props: { + align: 'left', + }, + }); + + // 注册组件面板 + const componentsPane = skeleton.add({ + area: 'leftArea', + type: 'PanelDock', + name: 'componentsPane', + content: ComponentsPane, + contentProps: {}, + props: { + align: 'top', + icon: 'zujianku', + description: '组件库', + }, + }); + componentsPane?.disable?.(); + project.onSimulatorRendererReady(() => { + componentsPane?.enable?.(); + }) + }, + }; + } + builtinPluginRegistry.pluginName = 'builtinPluginRegistry'; + await plugins.register(builtinPluginRegistry); + + // 设置内置 setter 和事件绑定、插件绑定面板 + const setterRegistry = (ctx: ILowCodePluginContext) => { + const { setterMap, pluginMap } = AliLowCodeEngineExt; + return { + name: 'ext-setters-registry', + async init() { + const { setters, skeleton } = ctx; + // 注册setterMap + setters.registerSetter(setterMap); + // 注册插件 + // 注册事件绑定面板 + skeleton.add({ + area: 'centerArea', + type: 'Widget', + content: pluginMap.EventBindDialog, + name: 'eventBindDialog', + props: {}, + }); + + // 注册变量绑定面板 + skeleton.add({ + area: 'centerArea', + type: 'Widget', + content: pluginMap.VariableBindDialog, + name: 'variableBindDialog', + props: {}, + }); + }, + }; + } + setterRegistry.pluginName = 'setterRegistry'; + await plugins.register(setterRegistry); + + // 注册回退/前进 + await plugins.register(UndoRedoPlugin); + + // 注册中英文切换 + await plugins.register(ZhEnPlugin); + + // 注册保存面板 + const saveSample = (ctx: ILowCodePluginContext) => { + return { + name: 'saveSample', + async init() { + const { skeleton, hotkey } = ctx; + + skeleton.add({ + name: 'saveSample', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + }, + content: ( + + ), + }); + skeleton.add({ + name: 'resetSchema', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + }, + content: ( + + ), + }); + hotkey.bind('command+s', (e) => { + e.preventDefault(); + // saveSchema(); + }); + }, + }; + } + saveSample.pluginName = 'saveSample'; + await plugins.register(saveSample); + + DataSourcePanePlugin.pluginName = 'DataSourcePane'; + // 插件参数声明 & 传递，参考：https://www.yuque.com/lce/doc/ibh9fh#peEmG + await plugins.register(DataSourcePanePlugin, { + importPlugins: [], + dataSourceTypes: [ + { + type: 'fetch', + }, + { + type: 'jsonp', + } + ] + }); + + CodeEditor.pluginName = 'CodeEditor'; + await plugins.register(CodeEditor); + + // 注册出码插件 + CodeGenPlugin.pluginName = 'CodeGenPlugin'; + await plugins.register(CodeGenPlugin); + + const previewSample = (ctx: ILowCodePluginContext) => { + return { + name: 'previewSample', + async init() { + const { skeleton } = ctx; + skeleton.add({ + name: 'previewSample', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + }, + content: ( + + ), + }); + }, + }; + }; + previewSample.pluginName = 'previewSample'; + await plugins.register(previewSample); + + console.log('完成内置插件注册') +} + +export default registerDefaultPlugins; \ No newline at end of file diff --git a/packages/lowcode-preset-plugin/src/plugins/logo/index.tsx b/packages/lowcode-preset-plugin/src/plugins/logo/index.tsx new file mode 100644 index 0000000..3b0a3c8 --- /dev/null +++ b/packages/lowcode-preset-plugin/src/plugins/logo/index.tsx @@ -0,0 +1,4 @@ + +export default () => { + return
logo
; +} diff --git a/packages/lowcode-preset-plugin/src/setters/index.tsx b/packages/lowcode-preset-plugin/src/setters/index.tsx new file mode 100644 index 0000000..1b9314c --- /dev/null +++ b/packages/lowcode-preset-plugin/src/setters/index.tsx @@ -0,0 +1,5 @@ +const registerDefaultSetters = () => { + +} + +export default registerDefaultSetters; \ No newline at end of file diff --git a/packages/lowcode-preset-plugin/tsconfig.json b/packages/lowcode-preset-plugin/tsconfig.json new file mode 100644 index 0000000..23314ab --- /dev/null +++ b/packages/lowcode-preset-plugin/tsconfig.json @@ -0,0 +1,44 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "declaration": true, + "lib": ["es2015", "dom"], + // Target latest version of ECMAScript. + "target": "esnext", + // Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. + "module": "esnext", + // Search under node_modules for non-relative imports. + "moduleResolution": "node", + // Process & infer types from .js files. + "allowJs": true, + // Report errors in .js files. + "checkJs": false, + // Don't emit; allow Babel to transform files. + // "noEmit": true, + // Enable strictest settings like strictNullChecks & noImplicitAny. + "strict": true, + // Allow default imports from modules with no default export. This does not affect code emit, just typechecking. + "allowSyntheticDefaultImports": true, + // Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. + "esModuleInterop": true, + // Specify JSX code generation: 'preserve', 'react-native', or 'react'. + "jsx": "preserve", + // Import emit helpers (e.g. __extends, __rest, etc..) from tslib + "importHelpers": true, + // Enables experimental support for ES7 decorators. + "experimentalDecorators": true, + // Generates corresponding .map file. + "sourceMap": true, + // Disallow inconsistently-cased references to the same file. + "forceConsistentCasingInFileNames": true, + // Allow json import + "resolveJsonModule": true, + // skip type checking of declaration files + "skipLibCheck": true, + "outDir": "lib" + }, + "include": [ + "./src/" + ], + "exclude": ["**/test", "**/lib", "**/es", "node_modules"] +} From a3917b1201c922a060d71c18d34af31263b5450c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=87=91=E7=A6=85?= Date: Thu, 20 Oct 2022 01:59:12 +0800 Subject: [PATCH 30/98] feat: lowcode-preset-plugin promote --- packages/build-plugin-lowcode/package.json | 2 +- packages/build-plugin-lowcode/src/index.js | 2 + .../src/templates/index.jsx | 5 +- .../lowcode-preset-plugin/build.plugin.js | 23 +-- packages/lowcode-preset-plugin/demo/index.tsx | 16 +- .../lowcode-preset-plugin/demo/preview.tsx | 79 +++++++++ packages/lowcode-preset-plugin/package.json | 1 + .../lowcode-preset-plugin/public/preview.html | 25 +++ packages/lowcode-preset-plugin/src/index.tsx | 7 +- .../src/plugins/index.tsx | 82 ++++----- .../src/plugins/logo/index.scss | 9 + .../src/plugins/logo/index.tsx | 15 +- packages/lowcode-preset-plugin/src/utils.ts | 155 ++++++++++++++++++ 13 files changed, 356 insertions(+), 65 deletions(-) create mode 100644 packages/lowcode-preset-plugin/public/preview.html create mode 100644 packages/lowcode-preset-plugin/src/plugins/logo/index.scss create mode 100644 packages/lowcode-preset-plugin/src/utils.ts diff --git a/packages/build-plugin-lowcode/package.json b/packages/build-plugin-lowcode/package.json index 5f6efd5..a7621b8 100644 --- a/packages/build-plugin-lowcode/package.json +++ b/packages/build-plugin-lowcode/package.json @@ -1,6 +1,6 @@ { "name": "@alifd/build-plugin-lowcode", - "version": "0.3.6", + "version": "0.3.7-beta.0", "description": "build plugin for component-to-lowcode", "main": "src/index.js", "keywords": [ diff --git a/packages/build-plugin-lowcode/src/index.js b/packages/build-plugin-lowcode/src/index.js index 089e3fb..21725ea 100644 --- a/packages/build-plugin-lowcode/src/index.js +++ b/packages/build-plugin-lowcode/src/index.js @@ -365,6 +365,7 @@ async function start(options, pluginOptions) { fullbackMeta = 'default', type = 'component', setterName, + presetConfig = {}, } = pluginOptions || {}; if (baseLibrary === 'rax' && Array.isArray(extraAssets)) { extraAssets.push( @@ -420,6 +421,7 @@ async function start(options, pluginOptions) { fullbackMeta, setterName: setterName || '', type, + presetConfig: JSON.stringify(presetConfig), }, }); const previewJs = generateEntry({ diff --git a/packages/build-plugin-lowcode/src/templates/index.jsx b/packages/build-plugin-lowcode/src/templates/index.jsx index 322e54d..201488e 100644 --- a/packages/build-plugin-lowcode/src/templates/index.jsx +++ b/packages/build-plugin-lowcode/src/templates/index.jsx @@ -70,6 +70,7 @@ const assets = { let assetsName = './assets-dev.json'; const setterMap = {{{setterMap}}}; +const presetConfig = {{{presetConfig}}}; const type = '{{{type}}}'; @@ -196,7 +197,9 @@ init(() => { } }, } -}, [], LCE_CONTAINER); +}, [], LCE_CONTAINER, { + presetConfig +}); function getPageSchema() { const schema = JSON.parse( diff --git a/packages/lowcode-preset-plugin/build.plugin.js b/packages/lowcode-preset-plugin/build.plugin.js index 75238bd..9f236db 100644 --- a/packages/lowcode-preset-plugin/build.plugin.js +++ b/packages/lowcode-preset-plugin/build.plugin.js @@ -23,6 +23,7 @@ module.exports = ({ onGetWebpackConfig }) => { config.merge({ entry: { lowcode: hasTsx ? require.resolve(`./demo/index.tsx`) : require.resolve(`./demo/index.ts`), + preview: require.resolve(`./demo/preview.tsx`) , }, }); config @@ -41,17 +42,17 @@ module.exports = ({ onGetWebpackConfig }) => { config.externals(externals); - // config - // .plugin('preview') - // .use(HtmlWebpackPlugin, [ - // { - // inject: false, - // templateParameters: { - // }, - // template: require.resolve('./public/preview.html'), - // filename: 'preview.html', - // }, - // ]); + config + .plugin('preview') + .use(HtmlWebpackPlugin, [ + { + inject: false, + templateParameters: { + }, + template: require.resolve('./public/preview.html'), + filename: 'preview.html', + }, + ]); config.plugins.delete('hot'); config.devServer.hot(false); diff --git a/packages/lowcode-preset-plugin/demo/index.tsx b/packages/lowcode-preset-plugin/demo/index.tsx index 01e2996..9a1948a 100644 --- a/packages/lowcode-preset-plugin/demo/index.tsx +++ b/packages/lowcode-preset-plugin/demo/index.tsx @@ -1,5 +1,7 @@ import init, { editor, project, material, setters } from '../src/index'; import { createFetchHandler } from '@alilc/lowcode-datasource-fetch-handler' +import { getPageSchema } from '../src/utils'; + const LCE_CONTAINER = document.getElementById('lce-container'); const config = { @@ -16,6 +18,11 @@ const config = { ], requestHandlersMap: { fetch: createFetchHandler() + }, + presetConfig: { + logo: { + logo: 'https://cdn.npmmirror.com/npmmirror-logo.png' + } } }; @@ -44,12 +51,3 @@ const config = { }; }, [], LCE_CONTAINER, config); })(); - -function getPageSchema() { - const schema = JSON.parse( - window.localStorage.getItem('projectSchema') || '{}' - ); - - const pageSchema = schema?.componentsTree?.[0]; - return pageSchema; -}; diff --git a/packages/lowcode-preset-plugin/demo/preview.tsx b/packages/lowcode-preset-plugin/demo/preview.tsx index e69de29..5a726bc 100644 --- a/packages/lowcode-preset-plugin/demo/preview.tsx +++ b/packages/lowcode-preset-plugin/demo/preview.tsx @@ -0,0 +1,79 @@ +import ReactDOM from 'react-dom'; +import React, { useState } from 'react'; +import { Loading } from '@alifd/next'; +import { buildComponents, assetBundle, AssetLevel, AssetLoader } from '@alilc/lowcode-utils'; +import ReactRenderer from '@alilc/lowcode-react-renderer'; +import { injectComponents } from '@alilc/lowcode-plugin-inject'; +import { createFetchHandler } from '@alilc/lowcode-datasource-fetch-handler' + +import { getPageSchemaFromLocalStorage, getPackages } from '../src/utils'; + +const getScenarioName = function () { + if (location.search) { + return new URLSearchParams(location.search.slice(1)).get('scenarioName') || 'index' + } + return 'index'; +} + +const SamplePreview = () => { + const [data, setData] = useState({}); + + async function init() { + const scenarioName = getScenarioName(); + const packages = getPackages(); + const projectSchema = getPageSchemaFromLocalStorage(); + const { componentsMap: componentsMapArray, componentsTree } = projectSchema; + const componentsMap: any = {}; + componentsMapArray.forEach((component: any) => { + componentsMap[component.componentName] = component; + }); + const schema = componentsTree[0]; + + const libraryMap = {}; + const libraryAsset = []; + packages.forEach(({ package: _package, library, urls, renderUrls }) => { + libraryMap[_package] = library; + if (renderUrls) { + libraryAsset.push(renderUrls); + } else if (urls) { + libraryAsset.push(urls); + } + }); + + const vendors = [assetBundle(libraryAsset, AssetLevel.Library)]; + + // TODO asset may cause pollution + const assetLoader = new AssetLoader(); + await assetLoader.load(libraryAsset); + const components = await injectComponents(buildComponents(libraryMap, componentsMap)); + + setData({ + schema, + components, + }); + } + + const { schema, components } = data; + + if (!schema || !components) { + init(); + return ; + } + + return ( +
+ +
+ ); +}; + +ReactDOM.render(, document.getElementById('ice-container')); diff --git a/packages/lowcode-preset-plugin/package.json b/packages/lowcode-preset-plugin/package.json index 7fdcf4d..add5a95 100644 --- a/packages/lowcode-preset-plugin/package.json +++ b/packages/lowcode-preset-plugin/package.json @@ -37,6 +37,7 @@ "devDependencies": { "@alilc/lowcode-datasource-fetch-handler": "^1.1.3", "@alilc/lowcode-engine": "^1.0.15", + "@types/react": "^18.0.21", "fs-extra": "^10.1.0", "tsconfig-paths-webpack-plugin": "^3.2.0" } diff --git a/packages/lowcode-preset-plugin/public/preview.html b/packages/lowcode-preset-plugin/public/preview.html new file mode 100644 index 0000000..5cd14c2 --- /dev/null +++ b/packages/lowcode-preset-plugin/public/preview.html @@ -0,0 +1,25 @@ + + + + + + 阿里低代码引擎 Demo - 预览页 + + + + +
+ + + + + + + + + + diff --git a/packages/lowcode-preset-plugin/src/index.tsx b/packages/lowcode-preset-plugin/src/index.tsx index d6ccb8c..304466b 100644 --- a/packages/lowcode-preset-plugin/src/index.tsx +++ b/packages/lowcode-preset-plugin/src/index.tsx @@ -27,7 +27,10 @@ const defaultConfig = { export default async (cb, customPlugins, container, config) => { - await registerDefaultPlugins(); + const realConfig = { ...defaultConfig, ...(config || {})}; + const { presetConfig } = realConfig; + + await registerDefaultPlugins(presetConfig); registerDefaultSetters(); // 处理外部传入初始化回调 @@ -36,5 +39,5 @@ export default async (cb, customPlugins, container, config) => { await plugins.register(cb); } - init(container, config || defaultConfig); + init(container, realConfig); } \ No newline at end of file diff --git a/packages/lowcode-preset-plugin/src/plugins/index.tsx b/packages/lowcode-preset-plugin/src/plugins/index.tsx index f3abea3..2811baf 100644 --- a/packages/lowcode-preset-plugin/src/plugins/index.tsx +++ b/packages/lowcode-preset-plugin/src/plugins/index.tsx @@ -5,7 +5,7 @@ import { project, } from '@alilc/lowcode-engine'; import AliLowCodeEngineExt from '@alilc/lowcode-engine-ext'; -import { Button } from '@alifd/next'; +import { Button, Icon } from '@alifd/next'; import UndoRedoPlugin from '@alilc/lowcode-plugin-undo-redo'; import ComponentsPane from '@alilc/lowcode-plugin-components-pane'; import ZhEnPlugin from '@alilc/lowcode-plugin-zh-en'; @@ -18,8 +18,9 @@ import Inject, { injectAssets } from '@alilc/lowcode-plugin-inject'; import SimulatorResizer from '@alilc/lowcode-plugin-simulator-select'; import Logo from './logo'; +import { preview, resetSchema, saveSchema } from 'src/utils'; -const registerDefaultPlugins = async () => { +const registerDefaultPlugins = async (presetConfig) => { await plugins.register(ManualPlugin); // await plugins.register(Inject); @@ -36,6 +37,9 @@ const registerDefaultPlugins = async () => { name: 'builtin-plugin-registry', async init() { const { skeleton } = ctx; + const { logo: customLogoConfig } = presetConfig || {}; + + // 注册 logo 面板 skeleton.add({ area: 'topArea', @@ -43,8 +47,8 @@ const registerDefaultPlugins = async () => { name: 'logo', content: Logo, contentProps: { - logo: 'https://img.alicdn.com/imgextra/i4/O1CN013w2bmQ25WAIha4Hx9_!!6000000007533-55-tps-137-26.svg', - href: 'https://lowcode-engine.cn', + logo: customLogoConfig?.logo || 'https://img.alicdn.com/imgextra/i4/O1CN013w2bmQ25WAIha4Hx9_!!6000000007533-55-tps-137-26.svg', + href: customLogoConfig?.href || 'https://lowcode-engine.cn', }, props: { align: 'left', @@ -113,39 +117,63 @@ const registerDefaultPlugins = async () => { // 注册中英文切换 await plugins.register(ZhEnPlugin); + const previewSample = (ctx: ILowCodePluginContext) => { + return { + name: 'previewSample', + async init() { + const { skeleton } = ctx; + skeleton.add({ + name: 'previewSample', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + }, + content: ( + + ), + }); + }, + }; + }; + previewSample.pluginName = 'previewSample'; + await plugins.register(previewSample); + // 注册保存面板 const saveSample = (ctx: ILowCodePluginContext) => { return { name: 'saveSample', async init() { const { skeleton, hotkey } = ctx; - skeleton.add({ - name: 'saveSample', + name: 'resetSchema', area: 'topArea', type: 'Widget', props: { align: 'right', }, content: ( - ), }); skeleton.add({ - name: 'resetSchema', + name: 'saveSample', area: 'topArea', type: 'Widget', props: { align: 'right', }, content: ( - ), }); + hotkey.bind('command+s', (e) => { e.preventDefault(); // saveSchema(); @@ -156,6 +184,10 @@ const registerDefaultPlugins = async () => { saveSample.pluginName = 'saveSample'; await plugins.register(saveSample); + // 注册出码插件 + CodeGenPlugin.pluginName = 'CodeGenPlugin'; + await plugins.register(CodeGenPlugin); + DataSourcePanePlugin.pluginName = 'DataSourcePane'; // 插件参数声明 & 传递，参考：https://www.yuque.com/lce/doc/ibh9fh#peEmG await plugins.register(DataSourcePanePlugin, { @@ -173,34 +205,6 @@ const registerDefaultPlugins = async () => { CodeEditor.pluginName = 'CodeEditor'; await plugins.register(CodeEditor); - // 注册出码插件 - CodeGenPlugin.pluginName = 'CodeGenPlugin'; - await plugins.register(CodeGenPlugin); - - const previewSample = (ctx: ILowCodePluginContext) => { - return { - name: 'previewSample', - async init() { - const { skeleton } = ctx; - skeleton.add({ - name: 'previewSample', - area: 'topArea', - type: 'Widget', - props: { - align: 'right', - }, - content: ( - - ), - }); - }, - }; - }; - previewSample.pluginName = 'previewSample'; - await plugins.register(previewSample); - console.log('完成内置插件注册') } diff --git a/packages/lowcode-preset-plugin/src/plugins/logo/index.scss b/packages/lowcode-preset-plugin/src/plugins/logo/index.scss new file mode 100644 index 0000000..a1f0526 --- /dev/null +++ b/packages/lowcode-preset-plugin/src/plugins/logo/index.scss @@ -0,0 +1,9 @@ +.lowcode-logo-plugin { + height: 48px; + display: flex; + flex-direction: row; + align-items: center; + img { + max-height: 80%; + } +} \ No newline at end of file diff --git a/packages/lowcode-preset-plugin/src/plugins/logo/index.tsx b/packages/lowcode-preset-plugin/src/plugins/logo/index.tsx index 3b0a3c8..cf989ac 100644 --- a/packages/lowcode-preset-plugin/src/plugins/logo/index.tsx +++ b/packages/lowcode-preset-plugin/src/plugins/logo/index.tsx @@ -1,4 +1,15 @@ +import * as React from 'react'; -export default () => { - return
logo
; +import './index.scss'; + +export interface LogoPluginProps { + logo: string; + href: string; +} + +export default (props: LogoPluginProps) => { + const { logo, href } = props; + return
+ +
; } diff --git a/packages/lowcode-preset-plugin/src/utils.ts b/packages/lowcode-preset-plugin/src/utils.ts new file mode 100644 index 0000000..a1d1b71 --- /dev/null +++ b/packages/lowcode-preset-plugin/src/utils.ts @@ -0,0 +1,155 @@ +import { material, project } from '@alilc/lowcode-engine'; +import { Message } from '@alifd/next'; +export const SAVE_KEY = 'projectSchema'; +console.log(SAVE_KEY); + +export const preview = () => { + saveSchema(); + setTimeout(() => { + window.open('./preview.html'); + }, 500); +}; + +export const saveSchema = () => { + window.localStorage.setItem( + SAVE_KEY, + JSON.stringify(project.exportSchema()) + ); + const packages = material.getAssets().packages; + window.localStorage.setItem( + 'packages', + JSON.stringify(packages) + ); + Message.success('成功保存到本地'); +}; + +export const resetSchema = async () => { + const projectSchema = JSON.parse( + window.localStorage.getItem(SAVE_KEY) || `{ + "componentName": "Page" + }` + ); + projectSchema.componentsTree = [{ + componentName: 'Page' + }]; + + window.localStorage.setItem( + SAVE_KEY, + JSON.stringify(projectSchema) + ); + project.getCurrentDocument()?.importSchema({ + componentName: 'Page', + fileName: 'sample', + }); + project.simulator.rerender(); + Message.success('成功重置页面'); +} + +export const getPackages = () => { + return JSON.parse(window.localStorage.getItem('packages') || '[]'); +} + +export const getPageSchemaFromLocalStorage = () => { + const schema = JSON.parse( + window.localStorage.getItem(SAVE_KEY) || '{}' + ); + + return schema; +} + +export const getPageSchema = async (type) => { + const schema = JSON.parse( + window.localStorage.getItem(SAVE_KEY) || '{}' + ); + + const pageSchema = schema?.componentsTree?.[0]; + + if (pageSchema) { + return pageSchema; + } + const initialSchema = await request('./schema.json'); + if (type === 'setter') { + initialSchema.children.push({ + "componentName": "BuiltInComp", + }) + } + return initialSchema; +}; + +function request( + dataAPI: string, + method = 'GET', + data?: object | string, + headers?: object, + otherProps?: any, +): Promise { + return new Promise((resolve, reject): void => { + if (otherProps && otherProps.timeout) { + setTimeout((): void => { + reject(new Error('timeout')); + }, otherProps.timeout); + } + fetch(dataAPI, { + method, + credentials: 'include', + headers, + body: data, + ...otherProps, + }) + .then((response: Response): any => { + switch (response.status) { + case 200: + case 201: + case 202: + return response.json(); + case 204: + if (method === 'DELETE') { + return { + success: true, + }; + } else { + return { + __success: false, + code: response.status, + }; + } + case 400: + case 401: + case 403: + case 404: + case 406: + case 410: + case 422: + case 500: + return response + .json() + .then((res: object): any => { + return { + __success: false, + code: response.status, + data: res, + }; + }) + .catch((): object => { + return { + __success: false, + code: response.status, + }; + }); + default: + return null; + } + }) + .then((json: any): void => { + if (json && json.__success !== false) { + resolve(json); + } else { + delete json.__success; + reject(json); + } + }) + .catch((err: Error): void => { + reject(err); + }); + }); +} \ No newline at end of file From d54781b981d3787619b2b77a5e797c6f352078ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=87=91=E7=A6=85?= Date: Wed, 26 Oct 2022 03:21:28 +0800 Subject: [PATCH 31/98] fix: fix rax component --- packages/build-plugin-lowcode/package.json | 2 +- .../build-plugin-lowcode/src/constants.js | 1 + .../src/public/preview.html | 2 ++ .../src/templates/index.jsx | 19 ++++++++++++------- 4 files changed, 16 insertions(+), 8 deletions(-) diff --git a/packages/build-plugin-lowcode/package.json b/packages/build-plugin-lowcode/package.json index a7621b8..b2d4c07 100644 --- a/packages/build-plugin-lowcode/package.json +++ b/packages/build-plugin-lowcode/package.json @@ -1,6 +1,6 @@ { "name": "@alifd/build-plugin-lowcode", - "version": "0.3.7-beta.0", + "version": "0.3.7-beta.1", "description": "build plugin for component-to-lowcode", "main": "src/index.js", "keywords": [ diff --git a/packages/build-plugin-lowcode/src/constants.js b/packages/build-plugin-lowcode/src/constants.js index 839837b..b942466 100644 --- a/packages/build-plugin-lowcode/src/constants.js +++ b/packages/build-plugin-lowcode/src/constants.js @@ -10,6 +10,7 @@ const COMMON_EXTERNALS = { '@ali/visualengine-utils': 'var window.VisualEngineUtils', '@ali/lowcode-engine': 'var window.AliLowCodeEngine', '@alilc/lowcode-engine': 'var window.AliLowCodeEngine', + '@ali/lowcode-rax-renderer': 'var window.alilcLowcodeRaxRenderer', rax: 'var window.Rax', antd: 'var window.antd', '@ant-design/icons': 'var window.icons', diff --git a/packages/build-plugin-lowcode/src/public/preview.html b/packages/build-plugin-lowcode/src/public/preview.html index 1148077..752bcc0 100644 --- a/packages/build-plugin-lowcode/src/public/preview.html +++ b/packages/build-plugin-lowcode/src/public/preview.html @@ -8,6 +8,7 @@ /> App 渲染器 + @@ -18,6 +19,7 @@ }; + diff --git a/packages/build-plugin-lowcode/src/templates/index.jsx b/packages/build-plugin-lowcode/src/templates/index.jsx index 201488e..48cebe4 100644 --- a/packages/build-plugin-lowcode/src/templates/index.jsx +++ b/packages/build-plugin-lowcode/src/templates/index.jsx @@ -1,4 +1,4 @@ -import init, { editor, project, material, setters } from '@alifd/lowcode-preset-plugin'; +import init, { editor, project, material, setters, config } from '@alifd/lowcode-preset-plugin'; import mergeWith from 'lodash/mergeWith'; {{{setterImportStr}}} @@ -180,12 +180,17 @@ init(() => { }) if (baseLibrary && baseLibrary === 'rax') { - editor.set('renderEnv', 'rax'); - project.onRendererReady(() => { - editor.get('designer').currentDocument.simulator._iframe.onload = () => { - editor.get('designer').currentDocument.simulator.set('device', 'phone'); - } - }); + if (isNewEngineVersion) { + config.set('renderEnv', 'rax'); + config.set('simulatorUrl', undefined); + } else { + editor.set('renderEnv', 'rax'); + project.onRendererReady(() => { + editor.get('designer').currentDocument.simulator._iframe.onload = () => { + editor.get('designer').currentDocument.simulator.set('device', 'phone'); + } + }); + } } if (isNewEngineVersion) { From e23f04899efb98db964949991a2d016ced283089 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?LeoYuan=20=E8=A2=81=E5=8A=9B=E7=9A=93?= Date: Fri, 4 Nov 2022 14:25:33 +0800 Subject: [PATCH 32/98] chore: add LCE as dependency to make use of typing support --- packages/template-plugin/proj/package.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/template-plugin/proj/package.json b/packages/template-plugin/proj/package.json index 24d5795..06bb255 100644 --- a/packages/template-plugin/proj/package.json +++ b/packages/template-plugin/proj/package.json @@ -18,7 +18,9 @@ "access": "public", "registry": "https://registry.npmjs.org/" }, - "dependencies": {}, + "dependencies": { + "@alilc/lowcode-engine": "^1.0.0" + }, "peerDependencies": { "react": "^16.0.0" }, From d963935e171d99cd36a4c2234d8a15bccdfa172f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?LeoYuan=20=E8=A2=81=E5=8A=9B=E7=9A=93?= Date: Fri, 4 Nov 2022 15:18:26 +0800 Subject: [PATCH 33/98] fix: build.js should export config --- packages/template-plugin/proj/build.js | 9 ++------- packages/template-plugin/proj/package.json | 2 -- 2 files changed, 2 insertions(+), 9 deletions(-) diff --git a/packages/template-plugin/proj/build.js b/packages/template-plugin/proj/build.js index 64b6819..70f3349 100644 --- a/packages/template-plugin/proj/build.js +++ b/packages/template-plugin/proj/build.js @@ -1,5 +1,6 @@ -{ +module.exports = { plugins: [ + 'build-plugin-fusion', [ '@alilc/build-plugin-alt', { @@ -10,12 +11,6 @@ // 支持直接使用官方 demo 项目：https://lowcode-engine.cn/demo/index.html // openUrl: 'https://lowcode-engine.cn/demo/index.html?debug', } - ], - [ - 'build-plugin-fusion', - { - themePackage: '@alifd/theme-lowcode-light' - } ] ] } \ No newline at end of file diff --git a/packages/template-plugin/proj/package.json b/packages/template-plugin/proj/package.json index 06bb255..bf0c9cc 100644 --- a/packages/template-plugin/proj/package.json +++ b/packages/template-plugin/proj/package.json @@ -26,8 +26,6 @@ }, "devDependencies": { "@alib/build-scripts": "^0.1.32", - "@alifd/theme-lowcode-light": "^0.2.1", - "@recore/config": "^2.0.6", "@types/react": "^16.0.3", "build-plugin-fusion": "^0.1.19", "@alilc/build-plugin-alt": "^1.0.0" From 6132957e4bbc0aba016724dde40b26431ab5a95a Mon Sep 17 00:00:00 2001 From: eternalsky Date: Wed, 9 Nov 2022 20:39:17 +0800 Subject: [PATCH 34/98] =?UTF-8?q?feat(build-plugin-alt):=20=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E9=85=8D=E7=BD=AE=E9=A1=B9=20usePrivateIp=EF=BC=8C?= =?UTF-8?q?=E4=B8=BA=20true=20=E6=97=B6=20injectInfo=20=E4=BD=BF=E7=94=A8?= =?UTF-8?q?=20private=20ip=20=E8=80=8C=E9=9D=9E=20local=20ip=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/build-plugin-alt/CHANGELOG.md | 4 ++++ packages/build-plugin-alt/package.json | 3 ++- packages/build-plugin-alt/src/index.ts | 11 +++++++++-- packages/build-plugin-alt/src/utils/getIp.ts | 7 +++++++ 4 files changed, 22 insertions(+), 3 deletions(-) create mode 100644 packages/build-plugin-alt/src/utils/getIp.ts diff --git a/packages/build-plugin-alt/CHANGELOG.md b/packages/build-plugin-alt/CHANGELOG.md index 2b79510..ca13bda 100644 --- a/packages/build-plugin-alt/CHANGELOG.md +++ b/packages/build-plugin-alt/CHANGELOG.md @@ -1,5 +1,9 @@ # Changelog +## 1.3.0 + +- `feat` 新增配置项 usePrivateIp，为 true 时 injectInfo 使用 private ip 而非 local ip。 + ## 1.2.2 - `fix` inject 接口监听 0.0.0.0，避免 localhost 和 127.0.0.1 没有匹配的情况 diff --git a/packages/build-plugin-alt/package.json b/packages/build-plugin-alt/package.json index d97e569..94953ed 100644 --- a/packages/build-plugin-alt/package.json +++ b/packages/build-plugin-alt/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/build-plugin-alt", - "version": "1.2.2", + "version": "1.3.0-beta.0", "description": "build-scripts plugin template for developers", "main": "lib/index.js", "files": [ @@ -64,6 +64,7 @@ "build-scripts-config": "^3.0.3", "fs-extra": "^9.1.0", "html-webpack-plugin": "^4.0.0", + "ip": "^1.1.8", "is-wsl": "^2.2.0", "koa": "^2.13.4", "kolorist": "^1.5.0", diff --git a/packages/build-plugin-alt/src/index.ts b/packages/build-plugin-alt/src/index.ts index 0f5c058..6722492 100644 --- a/packages/build-plugin-alt/src/index.ts +++ b/packages/build-plugin-alt/src/index.ts @@ -12,6 +12,7 @@ import injectConfig from './inject/config'; import makeInjectInfo from './inject/makeInjectInfo'; import injectApis from './inject/apis'; import dropMinicss from './utils/dropMinicss'; +import { getIp } from './utils/getIp'; interface IOpitons { type: 'setter' | 'plugin' | 'component'; @@ -19,10 +20,11 @@ interface IOpitons { openUrl: string; generateMeta: boolean; library: string; + usePrivateIp: boolean; } const plugin: IPlugin = ({ context, registerTask, onGetWebpackConfig, onHook, log }, options) => { - const { type, inject, openUrl, generateMeta = true, library } = options as unknown as IOpitons; + const { type, inject, openUrl, generateMeta = true, library, usePrivateIp } = options as unknown as IOpitons; const { command, rootDir, userConfig, pkg } = context; const mainFilePrefix = path.join(rootDir, 'src', (pkg.main as string).replace(/lib\/(.*).js/, "$1")); let mainFile = `${mainFilePrefix}.tsx`; @@ -91,7 +93,12 @@ const plugin: IPlugin = ({ context, registerTask, onGetWebpackConfig, onHook, lo onHook('before.start.load', ({ args }) => { if (inject) { - makeInjectInfo({ pkg, host: args.host || '127.0.0.1', port: args.port, type, library }); + let host = '127.0.0.1'; + if (usePrivateIp) { + host = getIp(); + } + console.log(host); + makeInjectInfo({ pkg, host, port: args.port, type, library }); injectApis(); } }); diff --git a/packages/build-plugin-alt/src/utils/getIp.ts b/packages/build-plugin-alt/src/utils/getIp.ts new file mode 100644 index 0000000..2c5e901 --- /dev/null +++ b/packages/build-plugin-alt/src/utils/getIp.ts @@ -0,0 +1,7 @@ +import * as ip from 'ip'; + +const getIp = () => { + return ip.address('private'); +} + +export { getIp }; \ No newline at end of file From 51611d1e2e6dc3fce86d529b4284fd85c59ee1f2 Mon Sep 17 00:00:00 2001 From: eternalsky Date: Wed, 9 Nov 2022 20:48:55 +0800 Subject: [PATCH 35/98] =?UTF-8?q?feat(lowcode-plugin-inject):=20=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E9=85=8D=E7=BD=AE=E9=A1=B9=20`injectServerHost`?= =?UTF-8?q?=EF=BC=8C=E7=94=A8=E4=BA=8E=E9=85=8D=E7=BD=AE=20inject=20?= =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E5=99=A8=E7=9A=84=E5=9C=B0=E5=9D=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/lowcode-plugin-inject/HISTORY.md | 3 +++ packages/lowcode-plugin-inject/package.json | 2 +- packages/lowcode-plugin-inject/src/index.tsx | 4 ++-- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/lowcode-plugin-inject/HISTORY.md b/packages/lowcode-plugin-inject/HISTORY.md index 07cbaef..3218496 100644 --- a/packages/lowcode-plugin-inject/HISTORY.md +++ b/packages/lowcode-plugin-inject/HISTORY.md @@ -1,3 +1,6 @@ +# 1.2.0 / 2022-11-09 +* feat: 新增配置项 `injectServerHost`，用于配置 inject 服务器的地址 + # 1.1.1 / 2022-06-06 * feat: 适配传入 library diff --git a/packages/lowcode-plugin-inject/package.json b/packages/lowcode-plugin-inject/package.json index c39d565..a8ea369 100644 --- a/packages/lowcode-plugin-inject/package.json +++ b/packages/lowcode-plugin-inject/package.json @@ -1,7 +1,7 @@ { "name": "@alilc/lowcode-plugin-inject", "author": "ens", - "version": "1.1.3", + "version": "1.2.0-beta.0", "description": "lowcode-plugin-inject", "main": "lib/index.js", "module": "es/index.js", diff --git a/packages/lowcode-plugin-inject/src/index.tsx b/packages/lowcode-plugin-inject/src/index.tsx index 6a8849f..289bbc5 100644 --- a/packages/lowcode-plugin-inject/src/index.tsx +++ b/packages/lowcode-plugin-inject/src/index.tsx @@ -22,10 +22,10 @@ export async function getInjectedPlugin(name: string, ctx: ILowCodePluginContext } interface IOptions { - injectServerHost: string; + injectServerHost?: string; } -const Inject = (ctx: ILowCodePluginContext, options: IOptions) => { +const Inject = (ctx: ILowCodePluginContext, options: IOptions = {}) => { if (options?.injectServerHost) { setInjectServerHost(options.injectServerHost); } From 67e41ea47eb14ffb422c82202142bc9dfaba3826 Mon Sep 17 00:00:00 2001 From: eternalsky Date: Thu, 10 Nov 2022 15:42:12 +0800 Subject: [PATCH 36/98] =?UTF-8?q?fix(lowcode-plugin-inject):=20=E9=A2=84?= =?UTF-8?q?=E8=A7=88=E6=80=81=E5=AF=B9=E5=A4=9A=E7=BB=84=E4=BB=B6=E7=9A=84?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E6=9C=89=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/lowcode-plugin-inject/HISTORY.md | 3 ++- packages/lowcode-plugin-inject/package.json | 2 +- packages/lowcode-plugin-inject/src/utils.tsx | 4 +++- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/lowcode-plugin-inject/HISTORY.md b/packages/lowcode-plugin-inject/HISTORY.md index 3218496..243ee9f 100644 --- a/packages/lowcode-plugin-inject/HISTORY.md +++ b/packages/lowcode-plugin-inject/HISTORY.md @@ -1,5 +1,6 @@ -# 1.2.0 / 2022-11-09 +# 1.2.0 * feat: 新增配置项 `injectServerHost`，用于配置 inject 服务器的地址 +* fix: 预览态对多组件的支持有问题 # 1.1.1 / 2022-06-06 * feat: 适配传入 library diff --git a/packages/lowcode-plugin-inject/package.json b/packages/lowcode-plugin-inject/package.json index a8ea369..92d3959 100644 --- a/packages/lowcode-plugin-inject/package.json +++ b/packages/lowcode-plugin-inject/package.json @@ -1,7 +1,7 @@ { "name": "@alilc/lowcode-plugin-inject", "author": "ens", - "version": "1.2.0-beta.0", + "version": "1.2.0-beta.1", "description": "lowcode-plugin-inject", "main": "lib/index.js", "module": "es/index.js", diff --git a/packages/lowcode-plugin-inject/src/utils.tsx b/packages/lowcode-plugin-inject/src/utils.tsx index 0e4afbb..390f4aa 100644 --- a/packages/lowcode-plugin-inject/src/utils.tsx +++ b/packages/lowcode-plugin-inject/src/utils.tsx @@ -287,7 +287,9 @@ export async function injectComponents(components) { const { library } = injectedComponents[name]; const pascalName = pascal(name); libraryMap[name] = library || pascalName; - componentsMap[pascalName] = window[`${pascalName}Meta`]?.components?.find(item => item.componentName === pascalName)?.npm; + window[`${pascalName}Meta`]?.components?.forEach((item) => { + componentsMap[item.componentName] = item.npm; + }) }) const injectedComponentsForRenderer = await buildComponents(libraryMap, componentsMap, undefined); if (Object.keys(injectedComponents).length > 0) { From c5a47980b017f1d4ff90bcb83492f0c41fdf0d79 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=87=91=E7=A6=85?= Date: Thu, 24 Nov 2022 19:17:40 +0800 Subject: [PATCH 37/98] fix: fix preview issue --- packages/build-plugin-lowcode/package.json | 2 +- packages/build-plugin-lowcode/src/constants.js | 4 ++++ packages/build-plugin-lowcode/src/index.js | 18 +++++++++++++++++- .../src/public/preview.html | 10 +++++++--- 4 files changed, 29 insertions(+), 5 deletions(-) diff --git a/packages/build-plugin-lowcode/package.json b/packages/build-plugin-lowcode/package.json index b2d4c07..62f87a6 100644 --- a/packages/build-plugin-lowcode/package.json +++ b/packages/build-plugin-lowcode/package.json @@ -1,6 +1,6 @@ { "name": "@alifd/build-plugin-lowcode", - "version": "0.3.7-beta.1", + "version": "0.3.8", "description": "build plugin for component-to-lowcode", "main": "src/index.js", "keywords": [ diff --git a/packages/build-plugin-lowcode/src/constants.js b/packages/build-plugin-lowcode/src/constants.js index b942466..87b876e 100644 --- a/packages/build-plugin-lowcode/src/constants.js +++ b/packages/build-plugin-lowcode/src/constants.js @@ -48,6 +48,8 @@ const STATIC_RESOURCES = { engineExtJsUrl: 'https://g.alicdn.com/ali-lowcode/lowcode-engine-ext/1.0.20/engine-ext.js', enginePresetJsUrl: 'https://alifd.alicdn.com/npm/@alifd/lowcode-preset-plugin@1.1.8/dist/editor-preset-plugin.js', + raxRenderJsUrl: 'https://alifd.alicdn.com/npm/@alilc/lowcode-rax-renderer@1.0.12/dist/index.umd.js', + raxRenderCssUrl: 'https://alifd.alicdn.com/npm/@alilc/lowcode-rax-renderer@1.0.12/dist/index.css', }; const ALILC_STATIC_RESOURCES = { @@ -66,6 +68,8 @@ const ALILC_STATIC_RESOURCES = { 'https://alifd.alicdn.com/npm/@alilc/lowcode-engine-ext@1.0.4/dist/js/engine-ext.js', enginePresetJsUrl: 'https://alifd.alicdn.com/npm/@alifd/lowcode-preset-plugin@1.1.8/dist/editor-preset-plugin.js', + raxRenderJsUrl: 'https://alifd.alicdn.com/npm/@alilc/lowcode-rax-renderer@1.0.12/dist/index.umd.js', + raxRenderCssUrl: 'https://alifd.alicdn.com/npm/@alilc/lowcode-rax-renderer@1.0.12/dist/index.css', }; const STATIC_RESOURCES_MAP = { diff --git a/packages/build-plugin-lowcode/src/index.js b/packages/build-plugin-lowcode/src/index.js index 21725ea..e2eb8c1 100644 --- a/packages/build-plugin-lowcode/src/index.js +++ b/packages/build-plugin-lowcode/src/index.js @@ -392,7 +392,13 @@ async function start(options, pluginOptions) { const setterImportStr = Object.keys(setterMap || {}) .map((item) => { _setterMap += `\n ${item},`; - return `import ${item} from '${setterMap[item]}';`; + const setterStr = setterMap[item]; + const lastIndexOfAt = setterStr.lastIndexOf('@'); + let npmName = setterStr; + if (lastIndexOfAt > 0) { + npmName = setterStr.slice(0, lastIndexOfAt); + } + return `import ${item} from '${npmName}';`; }) .join('\n'); _setterMap += '\n}'; @@ -475,6 +481,8 @@ async function start(options, pluginOptions) { inject: false, templateParameters: { previewCssUrl: '', + isRax: baseLibrary === 'rax', + ...STATIC_RESOURCES_MAP[engineScope], }, template: require.resolve('./public/preview.html'), filename: 'preview.html', @@ -735,6 +743,9 @@ async function bundleEditorView( fullbackMeta = 'default', lowcodeDir = 'lowcode', entryPath, + type = 'component', + setterName, + presetConfig = {}, } = pluginOptions || {}; const metaExportName = `${PARSED_NPM_NAME.uniqueName}Meta`; const advancedRenderUrls = {}; @@ -784,6 +795,9 @@ async function bundleEditorView( setterMap: _setterMap, metaPathMap: JSON.stringify(metaPathMap), fullbackMeta, + setterName: setterName || '', + type, + presetConfig: JSON.stringify(presetConfig), }; const indexJs = generateEntry({ template: 'index.jsx', @@ -878,6 +892,8 @@ async function bundleEditorView( inject: false, templateParameters: { previewCssUrl: './preview.css', + isRax: baseLibrary === 'rax', + ...STATIC_RESOURCES_MAP[engineScope], }, template: require.resolve('./public/preview.html'), filename: 'preview.html', diff --git a/packages/build-plugin-lowcode/src/public/preview.html b/packages/build-plugin-lowcode/src/public/preview.html index 752bcc0..0e1fd8b 100644 --- a/packages/build-plugin-lowcode/src/public/preview.html +++ b/packages/build-plugin-lowcode/src/public/preview.html @@ -8,7 +8,9 @@ /> App 渲染器 - + <% if (isRax && typeof raxRenderCssUrl === 'string') { %> + + <% } %> @@ -18,8 +20,10 @@ locale: 'zh_CN', }; - - + <% if (isRax && typeof raxRenderJsUrl === 'string') { %> + + + <% } %> From 9600b8db70252c428def7125187756c9a523dcfa Mon Sep 17 00:00:00 2001 From: JackLian Date: Fri, 2 Dec 2022 16:32:24 +0800 Subject: [PATCH 38/98] feat: add create editor type project to cli --- packages/create-element/package.json | 5 +- packages/create-element/src/editor.ts | 12 + packages/create-element/src/index.ts | 11 +- packages/template-editor/.gitignore | 34 + packages/template-editor/README.md | 5 + packages/template-editor/package.json | 21 + packages/template-editor/proj/.editorconfig | 14 + packages/template-editor/proj/.eslintignore | 6 + packages/template-editor/proj/.eslintrc | 3 + packages/template-editor/proj/.prettierrc.js | 7 + packages/template-editor/proj/_gitignore | 43 ++ packages/template-editor/proj/_npmignore | 24 + packages/template-editor/proj/build.json | 35 + packages/template-editor/proj/build.plugin.js | 57 ++ packages/template-editor/proj/package.json | 57 ++ .../template-editor/proj/public/favicon.png | Bin 0 -> 3612 bytes .../meta.js | 1 + .../view.css | 0 .../view.js | 1 + .../template-editor/proj/public/index.ejs | 41 ++ .../template-editor/proj/public/index.html | 1 + .../proj/public/mock-pages.json | 1 + .../proj/public/mock/info.json | 3 + .../template-editor/proj/public/preview.html | 25 + .../template-editor/proj/scripts/watchdog.js | 15 + .../template-editor/proj/src/appHelper.ts | 14 + packages/template-editor/proj/src/global.scss | 55 ++ packages/template-editor/proj/src/index.ts | 112 ++++ .../plugins/plugin-component-panel/index.tsx | 28 + .../plugin-default-setters-registry/index.tsx | 34 + .../src/plugins/plugin-editor-init/index.tsx | 50 ++ .../index.tsx | 170 +++++ .../src/plugins/plugin-logo-sample/index.scss | 25 + .../src/plugins/plugin-logo-sample/index.tsx | 74 +++ .../plugins/plugin-preview-sample/index.tsx | 41 ++ .../src/plugins/plugin-save-sample/index.tsx | 52 ++ .../plugins/plugin-simulator-locale/index.tsx | 53 ++ packages/template-editor/proj/src/preview.tsx | 84 +++ .../proj/src/services/assets.json | 139 ++++ .../proj/src/services/defaultI18nSchema.json | 10 + .../proj/src/services/defaultPageSchema.json | 611 ++++++++++++++++++ .../proj/src/services/mockService.ts | 119 ++++ .../proj/src/services/schema.json | 445 +++++++++++++ packages/template-editor/proj/tsconfig.json | 44 ++ 44 files changed, 2577 insertions(+), 5 deletions(-) create mode 100644 packages/create-element/src/editor.ts create mode 100644 packages/template-editor/.gitignore create mode 100644 packages/template-editor/README.md create mode 100644 packages/template-editor/package.json create mode 100644 packages/template-editor/proj/.editorconfig create mode 100644 packages/template-editor/proj/.eslintignore create mode 100644 packages/template-editor/proj/.eslintrc create mode 100644 packages/template-editor/proj/.prettierrc.js create mode 100644 packages/template-editor/proj/_gitignore create mode 100644 packages/template-editor/proj/_npmignore create mode 100644 packages/template-editor/proj/build.json create mode 100644 packages/template-editor/proj/build.plugin.js create mode 100644 packages/template-editor/proj/package.json create mode 100644 packages/template-editor/proj/public/favicon.png create mode 100644 packages/template-editor/proj/public/fixtures/basic-fusion-with-single-component/meta.js create mode 100644 packages/template-editor/proj/public/fixtures/basic-fusion-with-single-component/view.css create mode 100644 packages/template-editor/proj/public/fixtures/basic-fusion-with-single-component/view.js create mode 100644 packages/template-editor/proj/public/index.ejs create mode 100644 packages/template-editor/proj/public/index.html create mode 100644 packages/template-editor/proj/public/mock-pages.json create mode 100644 packages/template-editor/proj/public/mock/info.json create mode 100644 packages/template-editor/proj/public/preview.html create mode 100755 packages/template-editor/proj/scripts/watchdog.js create mode 100644 packages/template-editor/proj/src/appHelper.ts create mode 100644 packages/template-editor/proj/src/global.scss create mode 100644 packages/template-editor/proj/src/index.ts create mode 100644 packages/template-editor/proj/src/plugins/plugin-component-panel/index.tsx create mode 100644 packages/template-editor/proj/src/plugins/plugin-default-setters-registry/index.tsx create mode 100644 packages/template-editor/proj/src/plugins/plugin-editor-init/index.tsx create mode 100644 packages/template-editor/proj/src/plugins/plugin-load-incremental-assets-widget/index.tsx create mode 100644 packages/template-editor/proj/src/plugins/plugin-logo-sample/index.scss create mode 100644 packages/template-editor/proj/src/plugins/plugin-logo-sample/index.tsx create mode 100644 packages/template-editor/proj/src/plugins/plugin-preview-sample/index.tsx create mode 100644 packages/template-editor/proj/src/plugins/plugin-save-sample/index.tsx create mode 100644 packages/template-editor/proj/src/plugins/plugin-simulator-locale/index.tsx create mode 100644 packages/template-editor/proj/src/preview.tsx create mode 100644 packages/template-editor/proj/src/services/assets.json create mode 100644 packages/template-editor/proj/src/services/defaultI18nSchema.json create mode 100644 packages/template-editor/proj/src/services/defaultPageSchema.json create mode 100644 packages/template-editor/proj/src/services/mockService.ts create mode 100644 packages/template-editor/proj/src/services/schema.json create mode 100644 packages/template-editor/proj/tsconfig.json diff --git a/packages/create-element/package.json b/packages/create-element/package.json index 7cbb1e4..3e03eed 100644 --- a/packages/create-element/package.json +++ b/packages/create-element/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/create-element", - "version": "1.1.3", + "version": "1.1.4", "description": "", "main": "lib/index.js", "bin": { @@ -16,7 +16,7 @@ }, "repository": { "type": "git", - "url": "git@gitlab.alibaba-inc.com:guanghong.wsj/lowcode-tools.git", + "url": "https://github.com/alibaba/lowcode-tools.git", "directory": "packages/create-ali-lowcode" }, "author": "eternalsky", @@ -35,6 +35,7 @@ "yargs": "^17.2.0" }, "devDependencies": { + "typescript": "4.6.2", "@types/cross-spawn": "^6.0.2", "@types/fs-extra": "^9.0.13", "@types/glob": "^7.1.4", diff --git a/packages/create-element/src/editor.ts b/packages/create-element/src/editor.ts new file mode 100644 index 0000000..6f3fd14 --- /dev/null +++ b/packages/create-element/src/editor.ts @@ -0,0 +1,12 @@ +import yargs from 'yargs'; +import { hideBin } from 'yargs/helpers'; +import InitFunc from './base'; + +export default async (answers) => { + new InitFunc({ + argv: yargs(hideBin(process.argv)).argv, + answers, + templatePkg: '@alilc/lowcode-template-editor', + prefix: 'lowcode-editor', + }).init(); +} \ No newline at end of file diff --git a/packages/create-element/src/index.ts b/packages/create-element/src/index.ts index 7e5c770..2560599 100644 --- a/packages/create-element/src/index.ts +++ b/packages/create-element/src/index.ts @@ -4,6 +4,7 @@ import * as path from 'path'; import initComponent from './component'; import initSetter from './setter'; import initPlugin from './plugin'; +import initEditor from './editor'; import yargs from 'yargs'; import { hideBin } from 'yargs/helpers' @@ -19,13 +20,17 @@ const getQuestions = ({ argv }) => { value: 'component', }, { - name: '组件设置器（setter）', + name: '设置器 (setter)', value: 'setter', }, { - name: '设计器插件（plugin）', + name: '插件 (plugin)', value: 'plugin', }, + { + name: '编辑器 (editor)', + value: 'editor', + }, ] }, { @@ -60,6 +65,7 @@ const initMap = { component: initComponent, setter: initSetter, plugin: initPlugin, + editor: initEditor, }; const main = async () => { @@ -76,4 +82,3 @@ const main = async () => { } main(); - diff --git a/packages/template-editor/.gitignore b/packages/template-editor/.gitignore new file mode 100644 index 0000000..5bd9daa --- /dev/null +++ b/packages/template-editor/.gitignore @@ -0,0 +1,34 @@ +node_modules/ +.idea +.vscode +~* + +# Packages # +############ +# it's better to unpack these files and commit the raw source +# git has its own built in compression methods +*.7z +*.dmg +*.gz +*.iso +*.jar +*.rar +*.tar +*.zip + +# Logs and databases # +###################### +*.log +*.sql +*.sqlite + +# OS generated files # +###################### +.DS_Store + *.swp +.DS_Store? +._* +.Spotlight-V100 +.Trashes +ehthumbs.db +Thumbs.db \ No newline at end of file diff --git a/packages/template-editor/README.md b/packages/template-editor/README.md new file mode 100644 index 0000000..0e08529 --- /dev/null +++ b/packages/template-editor/README.md @@ -0,0 +1,5 @@ +# editor template for lowcode engine + +--- + +This template is used by Ali LowCode Tools \ No newline at end of file diff --git a/packages/template-editor/package.json b/packages/template-editor/package.json new file mode 100644 index 0000000..326281c --- /dev/null +++ b/packages/template-editor/package.json @@ -0,0 +1,21 @@ +{ + "name": "@alilc/lowcode-template-editor", + "version": "1.0.2", + "description": "Ali lowCode engine editor template", + "main": "index.js", + "scripts": { + "pub": "npm publish", + "beta": "npm publish --tag beta" + }, + "repository": { + "type": "git", + "url": "https://github.com/alibaba/lowcode-tools.git", + "directory": "packages/template-plugin" + }, + "publishConfig": { + "access": "public", + "registry": "https://registry.npmjs.org/" + }, + "author": "JackLian", + "license": "MIT" +} \ No newline at end of file diff --git a/packages/template-editor/proj/.editorconfig b/packages/template-editor/proj/.editorconfig new file mode 100644 index 0000000..9d5248e --- /dev/null +++ b/packages/template-editor/proj/.editorconfig @@ -0,0 +1,14 @@ +# editorconfig.org + +root = true + +[*] +charset = utf-8 +end_of_line = lf +indent_size = 2 +indent_style = space +insert_final_newline = true +trim_trailing_whitespace = true + +[*.md] +trim_trailing_whitespace = false diff --git a/packages/template-editor/proj/.eslintignore b/packages/template-editor/proj/.eslintignore new file mode 100644 index 0000000..e07bb85 --- /dev/null +++ b/packages/template-editor/proj/.eslintignore @@ -0,0 +1,6 @@ +dist/ +build/ +.* +~* +gulpfile.js +node_modules/ diff --git a/packages/template-editor/proj/.eslintrc b/packages/template-editor/proj/.eslintrc new file mode 100644 index 0000000..db78d35 --- /dev/null +++ b/packages/template-editor/proj/.eslintrc @@ -0,0 +1,3 @@ +{ + "extends": "./node_modules/@recore/config/.eslintrc" +} diff --git a/packages/template-editor/proj/.prettierrc.js b/packages/template-editor/proj/.prettierrc.js new file mode 100644 index 0000000..24c5859 --- /dev/null +++ b/packages/template-editor/proj/.prettierrc.js @@ -0,0 +1,7 @@ +module.exports = { + printWidth: 100, + tabWidth: 2, + semi: true, + singleQuote: true, + trailingComma: 'all', +}; diff --git a/packages/template-editor/proj/_gitignore b/packages/template-editor/proj/_gitignore new file mode 100644 index 0000000..10239e7 --- /dev/null +++ b/packages/template-editor/proj/_gitignore @@ -0,0 +1,43 @@ +node_modules/ +build/ +es/ +lib/ +.idea/ +.vscode/ +jsconfig.json +typings.json +typings/ +~* + +# Packages # +############ +# it's better to unpack these files and commit the raw source +# git has its own built in compression methods +*.7z +*.dmg +*.gz +*.iso +*.jar +*.rar +*.tar +*.zip + +# Logs and databases # +###################### +*.log +*.sql +*.sqlite + +# OS generated files # +###################### +.DS_Store + *.swp +.DS_Store? +._* +.Spotlight-V100 +.Trashes +ehthumbs.db +Thumbs.db +.lock +package-lock.json +.vdev diff --git a/packages/template-editor/proj/_npmignore b/packages/template-editor/proj/_npmignore new file mode 100644 index 0000000..0ea1248 --- /dev/null +++ b/packages/template-editor/proj/_npmignore @@ -0,0 +1,24 @@ +node_modules/ +*.iml +.idea/ +.vscode/ +jsconfig.json +typings.json +typings/ +*~ +~* +*.diff +*.log +*.patch +*.bak +.DS_Store +Thumbs.db +.project +.*proj +.svn/ +*.swp +.lock +package-lock.json +.vdev +# demo +# mock diff --git a/packages/template-editor/proj/build.json b/packages/template-editor/proj/build.json new file mode 100644 index 0000000..1d9ea4a --- /dev/null +++ b/packages/template-editor/proj/build.json @@ -0,0 +1,35 @@ +{ + "entry": { + "preview": "./src/preview.tsx", + "index": "./src/index.ts" + }, + "vendor": false, + "devServer": { + "hot": false + }, + "publicPath": "/", + "externals": { + "react": "var window.React", + "react-dom": "var window.ReactDOM", + "prop-types": "var window.PropTypes", + "@alifd/next": "var window.Next", + "@alilc/lowcode-engine": "var window.AliLowCodeEngine", + "@alilc/lowcode-engine-ext": "var window.AliLowCodeEngineExt", + "moment": "var window.moment", + "lodash": "var window._" + }, + "plugins": [ + [ + "build-plugin-react-app" + ], + [ + "build-plugin-moment-locales", + { + "locales": [ + "zh-cn" + ] + } + ], + "./build.plugin.js" + ] +} diff --git a/packages/template-editor/proj/build.plugin.js b/packages/template-editor/proj/build.plugin.js new file mode 100644 index 0000000..8796fea --- /dev/null +++ b/packages/template-editor/proj/build.plugin.js @@ -0,0 +1,57 @@ +const fs = require('fs-extra'); +const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); + +const { version } = JSON.parse(fs.readFileSync('./package.json', 'utf8')); + +module.exports = ({ onGetWebpackConfig }) => { + onGetWebpackConfig((config) => { + config.resolve.plugin('tsconfigpaths').use(TsconfigPathsPlugin, [ + { + configFile: './tsconfig.json', + }, + ]); + + config.merge({ + node: { + fs: 'empty', + }, + }); + + config + .plugin('index') + .use(HtmlWebpackPlugin, [ + { + inject: false, + minify: false, + templateParameters: { + version, + }, + template: require.resolve('./public/index.ejs'), + filename: 'index.html', + }, + ]); + config + .plugin('preview') + .use(HtmlWebpackPlugin, [ + { + inject: false, + templateParameters: { + }, + template: require.resolve('./public/preview.html'), + filename: 'preview.html', + }, + ]); + + config.plugins.delete('hot'); + config.devServer.hot(false); + + config.module // fixes https://github.com/graphql/graphql-js/issues/1272 + .rule('mjs$') + .test(/\.mjs$/) + .include + .add(/node_modules/) + .end() + .type('javascript/auto'); + }); +}; diff --git a/packages/template-editor/proj/package.json b/packages/template-editor/proj/package.json new file mode 100644 index 0000000..21f798a --- /dev/null +++ b/packages/template-editor/proj/package.json @@ -0,0 +1,57 @@ +{ + "name": "<%- name %>", + "author": "<%- author %>", + "version": "1.0.0", + "description": "<%- description %>", + "license": "MIT", + "main": "index.js", + "scripts": { + "start": "build-scripts start --disable-reload --port 5556", + "build": "build-scripts build", + "prepublishOnly": "npm run build", + "pub": "node ./scripts/watchdog.js && npm pub" + }, + "files": [ + "build" + ], + "config": {}, + "dependencies": { + "@alilc/lowcode-datasource-fetch-handler": "^1.0.1", + "@alilc/lowcode-plugin-code-editor": "^1.0.3", + "@alilc/lowcode-plugin-code-generator": "^1.0.4", + "@alilc/lowcode-plugin-components-pane": "^1.0.2", + "@alilc/lowcode-plugin-datasource-pane": "^1.0.6", + "@alilc/lowcode-plugin-inject": "^1.0.0", + "@alilc/lowcode-plugin-manual": "^1.0.3", + "@alilc/lowcode-plugin-schema": "^1.0.2", + "@alilc/lowcode-plugin-simulator-select": "^1.0.2", + "@alilc/lowcode-plugin-undo-redo": "^1.0.0", + "@alilc/lowcode-plugin-zh-en": "^1.0.0", + "@alilc/lowcode-plugin-set-ref-prop": "^1.0.1", + "@alilc/lowcode-react-renderer": "^1.0.0", + "@alilc/lowcode-setter-behavior": "^1.0.0", + "@alilc/lowcode-setter-title": "^1.0.2", + "@formily/antd": "^2.1.9", + "@formily/core": "^2.1.9", + "@formily/react": "^2.1.9", + "antd": "^4.21.4", + "moment": "^2.29.3", + "uuid": "^8.3.2" + }, + "devDependencies": { + "@alib/build-scripts": "^0.1.18", + "@alilc/lowcode-engine": "^1.0.0", + "@alilc/lowcode-engine-ext": "^1.0.0", + "@alilc/lowcode-types": "^1.0.0", + "@types/events": "^3.0.0", + "@types/react": "^16.8.3", + "@types/react-dom": "^16.8.2", + "@types/streamsaver": "^2.0.0", + "@types/uuid": "^8.3.4", + "build-plugin-fusion": "^0.1.0", + "build-plugin-moment-locales": "^0.1.0", + "build-plugin-react-app": "^1.1.2", + "fs-extra": "^10.0.1", + "tsconfig-paths-webpack-plugin": "^3.2.0" + } +} diff --git a/packages/template-editor/proj/public/favicon.png b/packages/template-editor/proj/public/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..307ffbd82dba398d6db6459102bff331eef7df6b GIT binary patch literal 3612 zcmV+%4&(8OP)Px#L}ge>W=%~1DgXcg2mk?xX#fNO00031000^Q000001E2u_0{{R30RRC20H6W@ z1ONa40RR91TA%{}1ONa40RR91S^xk507-m{w*UYQhDk(0RCodHT?>#D#Towp*}H|i z+dTn!mde8i1wu-BR8XSvS)#mzvO>hDgg^x>qli)9_Kq+LcPJ3Bu+SK-ynID85>dgJ zf)ItMP%%POG)f4F%3HbJz2lbM?R>q<9(%hpvoo`^$1F!z?agfW|Ns5>H@$y%|NT!N z)9I8O0kys}9V_WeB7QCjaV`-)%ss()2JZ3U%EY}OCKh25^exJF;@jsa+eD=m&vNcs z+8Bi@I#8tHdjNF^fEtX}4+gmB!oBs2;z-h|Ic09)=5q&i}FecJ(A2&TE=5fm5G(0gxyZEdH6iu2h_ zJ5PO}Rndte;mJhtI{@%`&ZB5b;y0%*&~w8>C>pyHqyEk4y=A80C>Rkpo_d2}APn0Z z`vpM$ZW1@AMzs8%!l?uF-0&cZ#+Q(YU7a5!1>j~nT>L<*4QEp%S__bGgNbmbDHL?D zc!5q%(PmRq>|XRi*kE^<2+iLE7c0;;;j#2>=t+RvRkLC4%RE$EJ$gCjzI#K9DHglS zeOMZ5R79pjJ=zx_zkpTT#fD9CW1*mZ$u+$jl}p#DIy8xzBJUR^$g&*@ZFlD=odQ`E zK8ge%$2fOuDyulJJixs`2f{tzOEWnqjtV>cMgWq9ydk)0#$pb)OGC2 zyd5S;I^_@Jm(l@C^gfV%VZr9$OrMgxyy6}LKnkatcPA59cwD{W7OGqAKlB1Ib~J_y8w|V z(BsGFq%}`aO$#gQ+ynI7-~fuz1~k&So~-aRs`dZcJSL!&e(UPcGF)d^;?pO-3_x#k z&U92aoJAbJ4vzIcP_j3Es=aY-kL$P40h^Wh2!VU$OZ3`ZRN~o1W#zjmz=tRh9t>Z_ z>u9BOATvK;8Dt3-vw)s60d`MZ^Xu76A?oGdoDeJj*iI_;)*=lf;8d5p7NY@_$GR+x z$|Opy^BHmQR*dw6F$l$ts0_#@IJscGzkIqrLKORm9_ zztJAZQU#|$hDhewd4Vj|Qn?=J)XH1ii4{5CB$7R#tLn#5{1{ehG&Cj1HCN`ZskY)x zNAxN6{RU61$+j$o*QI!^104v>1oNuo95f}yRoB%CJL`l>Du*EE@3urSA0SWp))cQb zpaUV;W3eQ~?9yvu-s+fcEdFg%)=TN;%RJEP(ep7|cpmoHJdaHc^I{X?i@f-=n3a85 zS!ObXcs`xX9B8WWV&(KQ7(1pjyYk-Su|Lz$YLKuK|G|5x&c88ToH?K)p(>b+@1!%j z_FlxhJE|Mg*_P$8cp-C~$PIK&us+@u)9l)7QFbbQk(&@iM-USUU$Y~z z(@$d;<#r>8PM8k)(u@$+wtb8wySYs6ehcd55XeDd&+J^yJpuH=@H`NopNrvic?JTk z%%{4FuQPJ9z9#3<~?2N zQD&F{Spucd2jL%~HxD_DnneVdUZn+?!I(_2(c-5jX-|`-5MaW_ZRw2ES2I@$^hIU} zPt&9!Ab1KbDBGEqlk--=G$*Ga&ncx%5%6+a=zqy-ljZbolU1fROV6|!fjRfvX}^Nu z@L{+EUHnRuon{q;=NsbE3E0_=*pZG{oXU-`)6=llkJ=H?Hh9nx70)E9E!$9Bm&2;z=LrvB2-VO*34&C5jyZdzE$Q1+DZ*F{8q%WHYTlza1|{p z3#rcMNCdzMr;-yb^p<}J(-U(-)Jd1Yw9F}xWm}vDT8_vpcAs>R@>M{-j!{=>V+UNn zVrPL))WiSMudWD6n4hCs-_M-Zv;aWkJ(QwNa!bm0M`k#e6V0&4E`?wy@F}co(!2pRl&bu%6DZ}elcXU z^H%`u2B%du)uRQi#7jV-XHofakfj=lqa){QDx`?zn)$_$8ExuO2sLv8odkKy)2Muc zh61+;3S=u*Te%7gns+tm-Jc~Q+3j&aYeS%6E>OPZcj&znwd;~mrcoSurjb0#beNV# zjS_cf#o5{T>f^1|1v&|G__qN0R%2wubU{nYvS{Y}wjy8!zLO$LOs&_W@#-iBNjdNd z!=R8PgyKx1y^}TJto1#OsgewqES|*FIz2iG@+=uhqYa)GWL@?y6rHA?tyM(5eDZa< z)tY5)%#4e|_vqswBO+2vHHATkZ-{QjI63hTl{9Gc22CCr^HAp>2Q%_uQOvKIr6P=(QnL6x-x1jUm>r*5A3!InnSvDC$&IC3sHSD&_svj zDiL7kND|}`YvA{bXA_n;Fb)03O40qti8uPQ36P`m;e;c-lfM@>4ekNxZ@Ft4h+{1Z zkR-UxNzkkXI1-||IV1Dtyw7lcIL0+t0>iZDoEWVeGm?)y_NF0Ss_+S%aImLwFm`W- zvlo+-HX+xPp1~GY%sTSVjPcA0FY%XasxeJ z+g%C3?6$dG6VY{R+ta|UnEHkH2)ciBY>OL-nU?~%Wok1G@Miq5B zX!tM;xRXV3u)lsIQP7`8D&!!057B-MzI1n5!HHWOZjB(G)=BcT#g0BK)(V%5f$q6; zN?uhU&G{i*9dOdD*b1ju;#cE<$< z0&o(5UJ~32rh|9mS92|??LXI3!>N2-psAr`9xBN>{nJ$BSSisfSc&gAU$gjlCVU?4 z^nb1jOh-WzZ-Drrg|y4*>g$`1PKQRN6PmscV+Qx?c$nXA1}q$ejlP~~!A@NwdCFEn z5>6gaxCa0FZYkUW8h(U=RH{7~iaSfbPo4%KW-;xD&-^tEe4+G#FH1%UIX5sZc_*tR zJtJNK)4}{cdFXbU@6$I~={h)guWdTQzH2Sj!4xH-JVGx{jO73sD=r?%w0Kia`Dd0n zXF6o;xAb9neZy$JztusOZPfZV8PepGabK+9{gy0CdE9B`g}50qGU8c zep{a=tt5F2F&<2wNgmA2%B2ZM5f04GQ<`mdZ5!P=@-pr7?xNC2uNIPV!V&#`cUPJHzcr5%K8(PTA^(8r%Hd@r^OOPu)!m&GEUkz-rMJJ8ESi2>fK*KG6 zRLqJD$JrH+K=37)0&Pd%UrnU|cQL`MrkCJrPI~*&2xKGqMnp8NOUpEOo0#H>mJizu zC-Wz8NKKXJHk%=D4H`|LWyQRRzQSdKMJ3jP{?0TWI67!NK>ll5p7~oAU*RDSG0l*$ z#k7dJ`5x3ea>ukRhY59owpUNZ985VX!Fvln*d zf&lGk3j)CjFdxqWOzD7XnV2`?o$RT!p#7&U3*7h3{Xk31e.length)&&(t=e.length);for(var n=0,r=new Array(t);n1&&void 0!==arguments[1]?arguments[1]:"m-220318",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"0.1.0",r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{"@alifd/next":"1.25.23","@alifd/meet":"2.6.3",antd:"4.17.3"};if(!e||!n)return e;var o=e.npm;return o?("object"===d(r)&&r[o.package]?e.npm=m(m({},o),{},{version:r[o.package]}):o.package===t&&(e.npm=m(m({},o),{},{version:n})),e):e}["\u57fa\u7840\u5143\u7d20","\u5e03\u5c40\u5bb9\u5668\u7c7b","\u8868\u683c\u7c7b","\u8868\u5355\u8be6\u60c5\u7c7b","\u5e2e\u52a9\u7c7b","\u5bf9\u8bdd\u6846\u7c7b","\u4e1a\u52a1\u7c7b","\u901a\u7528","\u5f15\u5bfc","\u4fe1\u606f\u8f93\u5165","\u4fe1\u606f\u5c55\u793a","\u4fe1\u606f\u53cd\u9988"].reverse().forEach((function(e,t){b[e]=++t}));var v,S=[];[i].forEach((function(e){Array.isArray(e)?S.push.apply(S,c(e.map((function(e){return h(e)})))):e.components?S.push.apply(S,c(e.components.map((function(e){return h(e)})))):S.push(h(e))}));var O=g(S),j=!0}])})); \ No newline at end of file diff --git a/packages/template-editor/proj/public/fixtures/basic-fusion-with-single-component/view.css b/packages/template-editor/proj/public/fixtures/basic-fusion-with-single-component/view.css new file mode 100644 index 0000000..e69de29 diff --git a/packages/template-editor/proj/public/fixtures/basic-fusion-with-single-component/view.js b/packages/template-editor/proj/public/fixtures/basic-fusion-with-single-component/view.js new file mode 100644 index 0000000..39c2ac3 --- /dev/null +++ b/packages/template-editor/proj/public/fixtures/basic-fusion-with-single-component/view.js @@ -0,0 +1 @@ +!function e(t,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports.M220318=n():t.M220318=n()}(window,(function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function t(){return e.default}:function t(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=345)}({3:function(e,t){e.exports=window.React},345:function(e,t,n){e.exports=n(429)},346:function(e,t,n){},429:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return l}));var r={};n.r(r),n.d(r,"default",(function(){return l}));var o=n(3),u=function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols)for(var o=0,r=Object.getOwnPropertySymbols(e);o + + + + + + 阿里低代码引擎 Demo + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + diff --git a/packages/template-editor/proj/public/index.html b/packages/template-editor/proj/public/index.html new file mode 100644 index 0000000..9992af0 --- /dev/null +++ b/packages/template-editor/proj/public/index.html @@ -0,0 +1 @@ +勿删，删了有奇妙的 bug😄~ \ No newline at end of file diff --git a/packages/template-editor/proj/public/mock-pages.json b/packages/template-editor/proj/public/mock-pages.json new file mode 100644 index 0000000..9251342 --- /dev/null +++ b/packages/template-editor/proj/public/mock-pages.json @@ -0,0 +1 @@ +{"success":true,"content":[{"gmtModified":"2021-03-06 00:40:54","formUuid":"FORM-6X866SC1KM4O4BLF3U7879QB0EMT2Z3TGIWLKW","parentNavUuid":"NAV-SYSTEM-PARENT-UUID","hidden":"n","navUuid":"FORM-6X866SC1KM4O4BLF3U7879QB0EMT2Z3TGIWLKW","navType":"PAGE","isIndex":"n","isNew":"n","gmtCreate":"2021-03-06 00:27:26","title":{"en-US":"页面1","zh-CN":"页面1","type":"i18n"},"relateUuid":"FORM-6X866SC1KM4O4BLF3U7879QB0EMT2Z3TGIWLKW","parentId":0,"listOrder":0,"id":556103}]} \ No newline at end of file diff --git a/packages/template-editor/proj/public/mock/info.json b/packages/template-editor/proj/public/mock/info.json new file mode 100644 index 0000000..006209b --- /dev/null +++ b/packages/template-editor/proj/public/mock/info.json @@ -0,0 +1,3 @@ +{ + "info": "Hello AliLowCode!!" +} \ No newline at end of file diff --git a/packages/template-editor/proj/public/preview.html b/packages/template-editor/proj/public/preview.html new file mode 100644 index 0000000..3ffe43b --- /dev/null +++ b/packages/template-editor/proj/public/preview.html @@ -0,0 +1,25 @@ + + + + + + 阿里低代码引擎 Demo - 预览页 + + + + +
+ + + + + + + + + + diff --git a/packages/template-editor/proj/scripts/watchdog.js b/packages/template-editor/proj/scripts/watchdog.js new file mode 100755 index 0000000..57964a5 --- /dev/null +++ b/packages/template-editor/proj/scripts/watchdog.js @@ -0,0 +1,15 @@ +#!/usr/bin/env node +const fs = require('fs'); +const { join } = require('path'); + +const workingDir = process.cwd(); + +const pkg = JSON.parse(fs.readFileSync(join(workingDir, 'package.json'), 'utf-8')); +if (pkg.private) return; +const { files } = pkg; +files.forEach(file => { + const fileDir = join(workingDir, file); + if (!fs.existsSync(fileDir)) { + throw new Error(`${fileDir} does not exist, plz run build`); + } +}); diff --git a/packages/template-editor/proj/src/appHelper.ts b/packages/template-editor/proj/src/appHelper.ts new file mode 100644 index 0000000..b2530a2 --- /dev/null +++ b/packages/template-editor/proj/src/appHelper.ts @@ -0,0 +1,14 @@ +import { createFetchHandler } from '@alilc/lowcode-datasource-fetch-handler' +const appHelper = { + requestHandlersMap: { + fetch: createFetchHandler() + }, + utils: { + demoUtil: (...params: any[]) => { console.log(`this is a demoUtil with params ${params}`)} + }, + constants: { + ConstantA: 'ConstantA', + ConstantB: 'ConstantB' + } +}; +export default appHelper; \ No newline at end of file diff --git a/packages/template-editor/proj/src/global.scss b/packages/template-editor/proj/src/global.scss new file mode 100644 index 0000000..02906a3 --- /dev/null +++ b/packages/template-editor/proj/src/global.scss @@ -0,0 +1,55 @@ +body { + font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, PingFang SC-Light, Microsoft YaHei; + font-size: 12px; + * { + box-sizing: border-box; + } +} + +body, #lce-container { + position: fixed; + left: 0; + right: 0; + bottom: 0; + top: 0; + box-sizing: border-box; + padding: 0; + margin: 0; + overflow: hidden; + text-rendering: optimizeLegibility; + -webkit-user-select: none; + -webkit-user-drag: none; + -webkit-text-size-adjust: none; + -webkit-touch-callout: none; + -webkit-font-smoothing: antialiased; + #engine { + width: 100%; + height: 100%; + } +} + +html { + min-width: 1024px; +} + +.save-sample { + width: 80px; + height: 30px; + background-color: #5584FF; + border: none; + outline: none; + border-radius: 4px; + color: white; + cursor: pointer; +} + +.load-assets { + width: 100px; + height: 30px; + background-color: #5584FF; + border: none; + outline: none; + border-radius: 4px; + color: white; + cursor: pointer; +} diff --git a/packages/template-editor/proj/src/index.ts b/packages/template-editor/proj/src/index.ts new file mode 100644 index 0000000..326a895 --- /dev/null +++ b/packages/template-editor/proj/src/index.ts @@ -0,0 +1,112 @@ +import { init, plugins } from '@alilc/lowcode-engine'; +import { createFetchHandler } from '@alilc/lowcode-datasource-fetch-handler' +import EditorInitPlugin from './plugins/plugin-editor-init'; +import UndoRedoPlugin from '@alilc/lowcode-plugin-undo-redo'; +import ZhEnPlugin from '@alilc/lowcode-plugin-zh-en'; +import CodeGenPlugin from '@alilc/lowcode-plugin-code-generator'; +import DataSourcePanePlugin from '@alilc/lowcode-plugin-datasource-pane'; +import SchemaPlugin from '@alilc/lowcode-plugin-schema'; +import CodeEditorPlugin from "@alilc/lowcode-plugin-code-editor"; +import ManualPlugin from "@alilc/lowcode-plugin-manual"; +import InjectPlugin from '@alilc/lowcode-plugin-inject'; +import SimulatorResizerPlugin from '@alilc/lowcode-plugin-simulator-select'; +import ComponentPanelPlugin from './plugins/plugin-component-panel'; +import DefaultSettersRegistryPlugin from './plugins/plugin-default-setters-registry'; +import LoadIncrementalAssetsWidgetPlugin from './plugins/plugin-load-incremental-assets-widget'; +import SaveSamplePlugin from './plugins/plugin-save-sample'; +import PreviewSamplePlugin from './plugins/plugin-preview-sample'; +import SetRefPropPlugin from '@alilc/lowcode-plugin-set-ref-prop'; +import LogoSamplePlugin from './plugins/plugin-logo-sample'; +import SimulatorLocalePlugin from './plugins/plugin-simulator-locale'; +import appHelper from './appHelper'; +import './global.scss'; + +async function registerPlugins() { + await plugins.register(EditorInitPlugin, { + scenarioName: 'general', + displayName: '综合场景', + info: { + urls: [ + { + key: '设计器', + value: 'https://github.com/alibaba/lowcode-demo/tree/main/demo-general', + }, + { + key: 'fusion-ui 物料', + value: 'https://github.com/alibaba/lowcode-materials/tree/main/packages/fusion-ui', + }, + { + key: 'fusion 物料', + value: 'https://github.com/alibaba/lowcode-materials/tree/main/packages/fusion-lowcode-materials', + } + ], + }, + }); + + // 设置内置 setter 和事件绑定、插件绑定面板 + await plugins.register(DefaultSettersRegistryPlugin); + + await plugins.register(LogoSamplePlugin); + + await plugins.register(ComponentPanelPlugin); + + await plugins.register(SchemaPlugin, { isProjectSchema: true }); + + await plugins.register(ManualPlugin); + + // 注册回退/前进 + await plugins.register(UndoRedoPlugin); + + // 注册中英文切换 + await plugins.register(ZhEnPlugin); + + await plugins.register(InjectPlugin); + + await plugins.register(SetRefPropPlugin); + + await plugins.register(SimulatorResizerPlugin); + + await plugins.register(LoadIncrementalAssetsWidgetPlugin); + + + // 插件参数声明 & 传递，参考：https://www.yuque.com/lce/doc/ibh9fh#peEmG + await plugins.register(DataSourcePanePlugin, { + importPlugins: [], + dataSourceTypes: [ + { + type: 'fetch', + }, + { + type: 'jsonp', + } + ] + }); + + await plugins.register(CodeEditorPlugin); + + // 注册出码插件 + await plugins.register(CodeGenPlugin); + + await plugins.register(SaveSamplePlugin); + + await plugins.register(PreviewSamplePlugin); + + // 设计器区域多语言切换 + await plugins.register(SimulatorLocalePlugin); +}; + +(async function main() { + await registerPlugins(); + + init(document.getElementById('lce-container')!, { + locale: 'zh-CN', + enableCondition: true, + enableCanvasLock: true, + // 默认绑定变量 + supportVariableGlobally: true, + requestHandlersMap: { + fetch: createFetchHandler(), + }, + appHelper, + }); +})(); diff --git a/packages/template-editor/proj/src/plugins/plugin-component-panel/index.tsx b/packages/template-editor/proj/src/plugins/plugin-component-panel/index.tsx new file mode 100644 index 0000000..42c3a91 --- /dev/null +++ b/packages/template-editor/proj/src/plugins/plugin-component-panel/index.tsx @@ -0,0 +1,28 @@ +import { ILowCodePluginContext, project } from '@alilc/lowcode-engine'; +import ComponentsPane from '@alilc/lowcode-plugin-components-pane'; +const ComponentPanelPlugin = (ctx: ILowCodePluginContext) => { + return { + async init() { + const { skeleton } = ctx; + // 注册组件面板 + const componentsPane = skeleton.add({ + area: 'leftArea', + type: 'PanelDock', + name: 'componentsPane', + content: ComponentsPane, + contentProps: {}, + props: { + align: 'top', + icon: 'zujianku', + description: '组件库', + }, + }); + componentsPane?.disable?.(); + project.onSimulatorRendererReady(() => { + componentsPane?.enable?.(); + }) + }, + }; +} +ComponentPanelPlugin.pluginName = 'ComponentPanelPlugin'; +export default ComponentPanelPlugin; \ No newline at end of file diff --git a/packages/template-editor/proj/src/plugins/plugin-default-setters-registry/index.tsx b/packages/template-editor/proj/src/plugins/plugin-default-setters-registry/index.tsx new file mode 100644 index 0000000..95de13c --- /dev/null +++ b/packages/template-editor/proj/src/plugins/plugin-default-setters-registry/index.tsx @@ -0,0 +1,34 @@ +import { ILowCodePluginContext } from '@alilc/lowcode-engine'; +import AliLowCodeEngineExt from '@alilc/lowcode-engine-ext'; + +// 设置内置 setter 和事件绑定、插件绑定面板 +const DefaultSettersRegistryPlugin = (ctx: ILowCodePluginContext) => { + return { + async init() { + const { setterMap, pluginMap } = AliLowCodeEngineExt; + const { setters, skeleton } = ctx; + // 注册setterMap + setters.registerSetter(setterMap); + // 注册插件 + // 注册事件绑定面板 + skeleton.add({ + area: 'centerArea', + type: 'Widget', + content: pluginMap.EventBindDialog, + name: 'eventBindDialog', + props: {}, + }); + + // 注册变量绑定面板 + skeleton.add({ + area: 'centerArea', + type: 'Widget', + content: pluginMap.VariableBindDialog, + name: 'variableBindDialog', + props: {}, + }); + }, + }; +} +DefaultSettersRegistryPlugin.pluginName = 'DefaultSettersRegistryPlugin'; +export default DefaultSettersRegistryPlugin; \ No newline at end of file diff --git a/packages/template-editor/proj/src/plugins/plugin-editor-init/index.tsx b/packages/template-editor/proj/src/plugins/plugin-editor-init/index.tsx new file mode 100644 index 0000000..767dd71 --- /dev/null +++ b/packages/template-editor/proj/src/plugins/plugin-editor-init/index.tsx @@ -0,0 +1,50 @@ +import { ILowCodePluginContext } from '@alilc/lowcode-engine'; +import { injectAssets } from '@alilc/lowcode-plugin-inject'; +import assets from '../../services/assets.json'; +import { getProjectSchema } from '../../services/mockService'; +const EditorInitPlugin = (ctx: ILowCodePluginContext, options: any) => { + return { + async init() { + const { material, project, config } = ctx; + const scenarioName = options['scenarioName']; + const scenarioDisplayName = options['displayName'] || scenarioName; + const scenarioInfo = options['info'] || {}; + // 保存在config中用于引擎范围其他插件使用 + config.set('scenarioName', scenarioName); + config.set('scenarioDisplayName', scenarioDisplayName); + config.set('scenarioInfo', scenarioInfo); + + // 设置物料描述 + + await material.setAssets(await injectAssets(assets)); + + const schema = await getProjectSchema(scenarioName); + // 加载 schema + project.importSchema(schema as any); + }, + }; +} +EditorInitPlugin.pluginName = 'EditorInitPlugin'; +EditorInitPlugin.meta = { + preferenceDeclaration: { + title: '保存插件配置', + properties: [ + { + key: 'scenarioName', + type: 'string', + description: '用于localstorage存储key', + }, + { + key: 'displayName', + type: 'string', + description: '用于显示的场景名', + }, + { + key: 'info', + type: 'object', + description: '用于扩展信息', + } + ], + }, +}; +export default EditorInitPlugin; \ No newline at end of file diff --git a/packages/template-editor/proj/src/plugins/plugin-load-incremental-assets-widget/index.tsx b/packages/template-editor/proj/src/plugins/plugin-load-incremental-assets-widget/index.tsx new file mode 100644 index 0000000..0b0bb9d --- /dev/null +++ b/packages/template-editor/proj/src/plugins/plugin-load-incremental-assets-widget/index.tsx @@ -0,0 +1,170 @@ +import { ILowCodePluginContext } from '@alilc/lowcode-engine'; +import { Button } from '@alifd/next'; +import { material } from '@alilc/lowcode-engine'; +import { Message } from '@alifd/next'; + +const loadIncrementalAssets = () => { + material?.onChangeAssets(() => { + Message.success('[MCBreadcrumb] 物料加载成功'); + }); + + material.loadIncrementalAssets({ + packages: [ + { + title: 'MCBreadcrumb', + package: 'mc-breadcrumb', + version: '1.0.0', + urls: [ + 'https://unpkg.alibaba-inc.com/mc-breadcrumb@1.0.0/dist/MCBreadcrumb.js', + 'https://unpkg.alibaba-inc.com/mc-breadcrumb@1.0.0/dist/MCBreadcrumb.css', + ], + library: 'MCBreadcrumb', + }, + ], + components: [ + { + componentName: 'MCBreadcrumb', + title: 'MCBreadcrumb', + docUrl: '', + screenshot: '', + npm: { + package: 'mc-breadcrumb', + version: '1.0.0', + exportName: 'MCBreadcrumb', + main: 'lib/index.js', + destructuring: false, + subName: '', + }, + props: [ + { + name: 'prefix', + propType: 'string', + description: '样式类名的品牌前缀', + defaultValue: 'next-', + }, + { + name: 'title', + propType: 'string', + description: '标题', + defaultValue: 'next-', + }, + { + name: 'rtl', + propType: 'bool', + }, + { + name: 'children', + propType: { + type: 'instanceOf', + value: 'node', + }, + description: '面包屑子节点，需传入 Breadcrumb.Item', + }, + { + name: 'maxNode', + propType: { + type: 'oneOfType', + value: [ + 'number', + { + type: 'oneOf', + value: ['auto'], + }, + ], + }, + description: + '面包屑最多显示个数，超出部分会被隐藏, 设置为 auto 会自动根据父元素的宽度适配。', + defaultValue: 100, + }, + { + name: 'separator', + propType: { + type: 'instanceOf', + value: 'node', + }, + description: '分隔符，可以是文本或 Icon', + }, + { + name: 'component', + propType: { + type: 'oneOfType', + value: ['string', 'func'], + }, + description: '设置标签类型', + defaultValue: 'nav', + }, + { + name: 'className', + propType: 'any', + }, + { + name: 'style', + propType: 'object', + }, + ], + configure: { + component: { + isContainer: true, + isModel: true, + rootSelector: 'div.MCBreadcrumb', + }, + }, + }, + ], + + componentList: [ + { + title: '常用', + icon: '', + children: [ + { + componentName: 'MCBreadcrumb', + title: 'MC面包屑', + icon: '', + package: 'mc-breadcrumb', + library: 'MCBreadcrumb', + snippets: [ + { + title: 'MC面包屑', + screenshot: + 'https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_breadcrumb.png', + schema: { + componentName: 'MCBreadcrumb', + props: { + title: '物料中心', + prefix: 'next-', + maxNode: 100, + }, + }, + }, + ], + }, + ], + }, + ], + }); +}; +const LoadIncrementalAssetsWidgetPlugin = (ctx: ILowCodePluginContext) => { + return { + async init() { + const { skeleton } = ctx; + + skeleton.add({ + name: 'loadAssetsSample', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + width: 80, + }, + content: ( + + ), + }); + }, + }; +} +LoadIncrementalAssetsWidgetPlugin.pluginName = 'LoadIncrementalAssetsWidgetPlugin'; +export default LoadIncrementalAssetsWidgetPlugin; \ No newline at end of file diff --git a/packages/template-editor/proj/src/plugins/plugin-logo-sample/index.scss b/packages/template-editor/proj/src/plugins/plugin-logo-sample/index.scss new file mode 100644 index 0000000..d8b63f6 --- /dev/null +++ b/packages/template-editor/proj/src/plugins/plugin-logo-sample/index.scss @@ -0,0 +1,25 @@ +.lowcode-plugin-logo { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: flex-end; + width: 300px; + .logo { + display: block; + width: 139px; + height: 26px; + cursor: pointer; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + } + .scenario-name { + display: block; + margin-left: 20px; + margin-right: 5px; + font-size: 15px; + } + .info-dropdown { + display: block; + } +} diff --git a/packages/template-editor/proj/src/plugins/plugin-logo-sample/index.tsx b/packages/template-editor/proj/src/plugins/plugin-logo-sample/index.tsx new file mode 100644 index 0000000..7e4c337 --- /dev/null +++ b/packages/template-editor/proj/src/plugins/plugin-logo-sample/index.tsx @@ -0,0 +1,74 @@ +import React from 'react'; +import { ILowCodePluginContext } from '@alilc/lowcode-engine'; +import { Dropdown, Menu } from '@alifd/next'; +import './index.scss'; +export interface IProps { + logo?: string; + href?: string; + scenarioInfo?: any; + scenarioDisplayName?: string; +} + +const Logo: React.FC = (props): React.ReactElement => { + const { scenarioDisplayName, scenarioInfo } = props; + const urls = scenarioInfo?.urls || []; + return ( + + ); +}; +// 示例 Logo widget +const LogoSamplePlugin = (ctx: ILowCodePluginContext) => { + return { + async init() { + const { skeleton, config } = ctx; + const scenarioDisplayName = config.get('scenarioDisplayName'); + const scenarioInfo = config.get('scenarioInfo'); + // 注册 logo widget + skeleton.add({ + area: 'topArea', + type: 'Widget', + name: 'logo', + content: , + contentProps: { + logo: 'https://img.alicdn.com/imgextra/i4/O1CN013w2bmQ25WAIha4Hx9_!!6000000007533-55-tps-137-26.svg', + href: 'https://lowcode-engine.cn', + }, + props: { + align: 'left', + }, + }); + }, + }; +} +LogoSamplePlugin.pluginName = 'LogoSamplePlugin'; +LogoSamplePlugin.meta = { + dependencies: ['EditorInitPlugin'], +}; +export default LogoSamplePlugin; \ No newline at end of file diff --git a/packages/template-editor/proj/src/plugins/plugin-preview-sample/index.tsx b/packages/template-editor/proj/src/plugins/plugin-preview-sample/index.tsx new file mode 100644 index 0000000..65f6c32 --- /dev/null +++ b/packages/template-editor/proj/src/plugins/plugin-preview-sample/index.tsx @@ -0,0 +1,41 @@ +import { ILowCodePluginContext } from '@alilc/lowcode-engine'; +import { Button } from '@alifd/next'; +import { + saveSchema, +} from '../../services/mockService'; + +// 保存功能示例 +const PreviewSamplePlugin = (ctx: ILowCodePluginContext) => { + return { + async init() { + const { skeleton, config } = ctx; + const doPreview = () => { + const scenarioName = config.get('scenarioName'); + console.log('go preview with scenarioName:',scenarioName ); + saveSchema(scenarioName);; + setTimeout(() => { + const search = location.search ? `${location.search}&scenarioName=${scenarioName}` : `?scenarioName=${scenarioName}`; + window.open(`./preview.html${search}`); + }, 500); + }; + skeleton.add({ + name: 'previewSample', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + }, + content: ( + + ), + }); + }, + }; +} +PreviewSamplePlugin.pluginName = 'PreviewSamplePlugin'; +PreviewSamplePlugin.meta = { + dependencies: ['EditorInitPlugin'], +}; +export default PreviewSamplePlugin; \ No newline at end of file diff --git a/packages/template-editor/proj/src/plugins/plugin-save-sample/index.tsx b/packages/template-editor/proj/src/plugins/plugin-save-sample/index.tsx new file mode 100644 index 0000000..d347aa3 --- /dev/null +++ b/packages/template-editor/proj/src/plugins/plugin-save-sample/index.tsx @@ -0,0 +1,52 @@ +import { ILowCodePluginContext } from '@alilc/lowcode-engine'; +import { Button } from '@alifd/next'; +import { + saveSchema, + resetSchema, +} from '../../services/mockService'; + +// 保存功能示例 +const SaveSamplePlugin = (ctx: ILowCodePluginContext) => { + return { + async init() { + const { skeleton, hotkey, config } = ctx; + const scenarioName = config.get('scenarioName'); + + skeleton.add({ + name: 'saveSample', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + }, + content: ( + + ), + }); + skeleton.add({ + name: 'resetSchema', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + }, + content: ( + + ), + }); + hotkey.bind('command+s', (e) => { + e.preventDefault(); + saveSchema(scenarioName); + }); + }, + }; +} +SaveSamplePlugin.pluginName = 'SaveSamplePlugin'; +SaveSamplePlugin.meta = { + dependencies: ['EditorInitPlugin'], +}; +export default SaveSamplePlugin; \ No newline at end of file diff --git a/packages/template-editor/proj/src/plugins/plugin-simulator-locale/index.tsx b/packages/template-editor/proj/src/plugins/plugin-simulator-locale/index.tsx new file mode 100644 index 0000000..d26aab7 --- /dev/null +++ b/packages/template-editor/proj/src/plugins/plugin-simulator-locale/index.tsx @@ -0,0 +1,53 @@ +import React from 'react'; +import { ILowCodePluginContext } from '@alilc/lowcode-engine'; +import { Select } from '@alifd/next'; + +const Option = Select.Option; +export interface IProps { + currentLocale: string; + onChange: (value: string) => void; +} + +const LocaleSelect: React.FC = (props): React.ReactElement => { + const { currentLocale, onChange } = props; + const currentLocaleValue = currentLocale || 'zh-CN'; + return ( +
+ +
+ ); +}; +// 画布区域语言切换 +const SimulatorLocalePlugin = (ctx: ILowCodePluginContext) => { + return { + async init() { + const { project, skeleton } = ctx; + const currentLocale = project.simulatorHost?.get('locale') || 'zh-CN'; + const onLocaleChange = (value: string): void => { + project.simulatorHost.set('locale', value); + } + skeleton.add({ + area: 'topArea', + type: 'Widget', + name: 'simulatorLocale', + content: , + props: { + align: 'center', + }, + }); + }, + }; +} +SimulatorLocalePlugin.pluginName = 'SimulatorLocalePlugin'; +SimulatorLocalePlugin.meta = { +}; +export default SimulatorLocalePlugin; \ No newline at end of file diff --git a/packages/template-editor/proj/src/preview.tsx b/packages/template-editor/proj/src/preview.tsx new file mode 100644 index 0000000..2b62f36 --- /dev/null +++ b/packages/template-editor/proj/src/preview.tsx @@ -0,0 +1,84 @@ +import ReactDOM from 'react-dom'; +import React, { useState } from 'react'; +import { Loading } from '@alifd/next'; +import { buildComponents, assetBundle, AssetLevel, AssetLoader } from '@alilc/lowcode-utils'; +import ReactRenderer from '@alilc/lowcode-react-renderer'; +import { injectComponents } from '@alilc/lowcode-plugin-inject'; +import appHelper from './appHelper'; +import { getProjectSchemaFromLocalStorage, getPackagesFromLocalStorage, getPreviewLocale, setPreviewLocale } from './services/mockService'; + +const getScenarioName = function () { + if (location.search) { + return new URLSearchParams(location.search.slice(1)).get('scenarioName') || 'general'; + } + return 'general'; +} + +const SamplePreview = () => { + const [data, setData] = useState({}); + + async function init() { + const scenarioName = getScenarioName(); + const packages = getPackagesFromLocalStorage(scenarioName); + const projectSchema = getProjectSchemaFromLocalStorage(scenarioName); + const { componentsMap: componentsMapArray, componentsTree , i18n} = projectSchema; + const componentsMap: any = {}; + componentsMapArray.forEach((component: any) => { + componentsMap[component.componentName] = component; + }); + const pageSchema = componentsTree[0]; + + const libraryMap = {}; + const libraryAsset = []; + packages.forEach(({ package: _package, library, urls, renderUrls }) => { + libraryMap[_package] = library; + if (renderUrls) { + libraryAsset.push(renderUrls); + } else if (urls) { + libraryAsset.push(urls); + } + }); + + const vendors = [assetBundle(libraryAsset, AssetLevel.Library)]; + + // TODO asset may cause pollution + const assetLoader = new AssetLoader(); + await assetLoader.load(libraryAsset); + const components = await injectComponents(buildComponents(libraryMap, componentsMap)); + + setData({ + schema: pageSchema, + components, + i18n, + }); + } + + const { schema, components, i18n = {} } = data as any; + + if (!schema || !components) { + init(); + return ; + } + const currentLocale = getPreviewLocale(getScenarioName()); + + if (!(window as any).setPreviewLocale) { + // for demo use only, can use this in console to switch language for i18n test + // 在控制台 window.setPreviewLocale('en-US') 或 window.setPreviewLocale('zh-CN') 查看切换效果 + (window as any).setPreviewLocale = (locale:string) => setPreviewLocale(getScenarioName(), locale); + } + + return ( +
+ +
+ ); +}; + +ReactDOM.render(, document.getElementById('ice-container')); diff --git a/packages/template-editor/proj/src/services/assets.json b/packages/template-editor/proj/src/services/assets.json new file mode 100644 index 0000000..310167c --- /dev/null +++ b/packages/template-editor/proj/src/services/assets.json @@ -0,0 +1,139 @@ +{ + "packages": [ + { + "package": "moment", + "version": "2.24.0", + "urls": [ + "https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js" + ], + "library": "moment" + }, + { + "package": "lodash", + "library": "_", + "urls": [ + "https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js" + ] + }, + { + "title": "fusion组件库", + "package": "@alifd/next", + "version": "1.26.4", + "urls": [ + "https://g.alicdn.com/code/lib/alifd__next/1.26.4/next.min.css", + "https://g.alicdn.com/code/lib/alifd__next/1.26.4/next-with-locales.min.js" + ], + "library": "Next" + }, + { + "title": "NextTable", + "package": "NextTable", + "version": "1.0.1", + "urls": [ + "https://g.alicdn.com/fusion-platform/pro-table/1.0.1/next-table.js", + "https://g.alicdn.com/fusion-platform/pro-table/1.0.1/next-table.css" + ], + "library": "NextTable" + }, + { + "package": "@alilc/lowcode-materials", + "version": "1.0.4", + "library": "AlilcLowcodeMaterials", + "urls": [ + "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.5/dist/AlilcLowcodeMaterials.js", + "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.5/dist/AlilcLowcodeMaterials.css" + ], + "editUrls": [ + "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.5/build/lowcode/view.js", + "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.5/build/lowcode/view.css" + ] + }, + { + "package": "@alifd/pro-layout", + "version": "1.0.1-beta.6", + "library": "AlifdProLayout", + "urls": [ + "https://alifd.alicdn.com/npm/@alifd/pro-layout@1.0.1-beta.6/dist/AlifdProLayout.js", + "https://alifd.alicdn.com/npm/@alifd/pro-layout@1.0.1-beta.6/dist/AlifdProLayout.css" + ], + "editUrls": [ + "https://alifd.alicdn.com/npm/@alifd/pro-layout@1.0.1-beta.6/build/lowcode/view.js", + "https://alifd.alicdn.com/npm/@alifd/pro-layout@1.0.1-beta.6/build/lowcode/view.css" + ] + }, + { + "package": "@alifd/fusion-ui", + "version": "1.0.5", + "library": "AlifdFusionUi", + "urls": [ + "https://alifd.alicdn.com/npm/@alifd/fusion-ui@1.0.5/dist/AlifdFusionUi.js", + "https://alifd.alicdn.com/npm/@alifd/fusion-ui@1.0.5/dist/AlifdFusionUi.css" + ], + "editUrls": [ + "https://alifd.alicdn.com/npm/@alifd/fusion-ui@1.0.5/build/lowcode/view.js", + "https://alifd.alicdn.com/npm/@alifd/fusion-ui@1.0.5/build/lowcode/view.css" + ] + } + ], + "components": [ + { + "exportName": "AlilcLowcodeMaterialsMeta", + "npm": { + "package": "@alilc/lowcode-materials" + }, + "url": "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.5/build/lowcode/meta.js", + "urls": { + "default": "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.5/build/lowcode/meta.js", + "design": "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.5/build/lowcode/meta.design.js" + } + }, + { + "exportName": "AlifdProLayoutMeta", + "npm": { + "package": "@alifd/pro-layout", + "version": "1.0.1-beta.6" + }, + "url": "https://alifd.alicdn.com/npm/@alifd/pro-layout@1.0.1-beta.6/build/lowcode/meta.js", + "urls": { + "default": "https://alifd.alicdn.com/npm/@alifd/pro-layout@1.0.1-beta.6/build/lowcode/meta.js", + "design": "https://alifd.alicdn.com/npm/@alifd/pro-layout@1.0.1-beta.6/build/lowcode/meta.design.js" + } + }, + { + "exportName": "AlifdFusionUiMeta", + "npm": { + "package": "@alifd/fusion-ui" + }, + "url": "https://alifd.alicdn.com/npm/@alifd/fusion-ui@1.0.5/build/lowcode/meta.js", + "urls": { + "default": "https://alifd.alicdn.com/npm/@alifd/fusion-ui@1.0.5/build/lowcode/meta.js", + "design": "https://alifd.alicdn.com/npm/@alifd/fusion-ui@1.0.5/build/lowcode/meta.design.js" + } + } + ], + "sort": { + "groupList": [ + "精选组件", + "原子组件" + ], + "categoryList": [ + "基础元素", + "布局容器类", + "表格类", + "表单详情类", + "帮助类", + "对话框类", + "业务类", + "通用", + "引导", + "信息输入", + "信息展示", + "信息反馈" + ] + }, + "groupList": [ + "精选组件", + "原子组件" + ], + "ignoreComponents": {} +} diff --git a/packages/template-editor/proj/src/services/defaultI18nSchema.json b/packages/template-editor/proj/src/services/defaultI18nSchema.json new file mode 100644 index 0000000..0490ac8 --- /dev/null +++ b/packages/template-editor/proj/src/services/defaultI18nSchema.json @@ -0,0 +1,10 @@ +{ + "zh-CN": { + "i18n-jwg27yo4": "你好 ", + "i18n-jwg27yo3": "{name} 博士" + }, + "en-US": { + "i18n-jwg27yo4": "Hello ", + "i18n-jwg27yo3": "Doctor {name}" + } +} \ No newline at end of file diff --git a/packages/template-editor/proj/src/services/defaultPageSchema.json b/packages/template-editor/proj/src/services/defaultPageSchema.json new file mode 100644 index 0000000..ca141e9 --- /dev/null +++ b/packages/template-editor/proj/src/services/defaultPageSchema.json @@ -0,0 +1,611 @@ +{ + "componentName": "Page", + "id": "node_dockcviv8fo1", + "docId": "doclaqkk3b9", + "props": { + "ref": "outerView", + "style": { + "height": "100%" + } + }, + "fileName": "/", + "dataSource": { + "list": [ + { + "type": "fetch", + "isInit": true, + "options": { + "params": {}, + "method": "GET", + "isCors": true, + "timeout": 5000, + "headers": {}, + "uri": "mock/info.json" + }, + "id": "info", + "shouldFetch": { + "type": "JSFunction", + "value": "function() { \n console.log('should fetch.....');\n return true; \n}" + } + } + ] + }, + "state": { + "text": { + "type": "JSExpression", + "value": "\"outer\"" + }, + "isShowDialog": { + "type": "JSExpression", + "value": "false" + } + }, + "css": "body {\n font-size: 12px;\n}\n\n.button {\n width: 100px;\n color: #ff00ff\n}", + "lifeCycles": { + "componentDidMount": { + "type": "JSFunction", + "value": "function componentDidMount() {\n console.log('did mount');\n}" + }, + "componentWillUnmount": { + "type": "JSFunction", + "value": "function componentWillUnmount() {\n console.log('will unmount');\n}" + } + }, + "methods": { + "testFunc": { + "type": "JSFunction", + "value": "function testFunc() {\n console.log('test func');\n}" + }, + "onClick": { + "type": "JSFunction", + "value": "function onClick() {\n this.setState({\n isShowDialog: true\n });\n}" + }, + "closeDialog": { + "type": "JSFunction", + "value": "function closeDialog() {\n this.setState({\n isShowDialog: false\n });\n}" + }, + "getHelloWorldText": { + "type": "JSFunction", + "value": "function getHelloWorldText() {\n return this.i18n('i18n-jwg27yo4');\n}" + }, + "getHelloWorldText2": { + "type": "JSFunction", + "value": "function getHelloWorldText2() {\n return this.i18n('i18n-jwg27yo3', {\n name: '絮黎'\n });\n}" + }, + "onTestConstantsButtonClicked": { + "type": "JSFunction", + "value": "function onTestConstantsButtonClicked() {\n console.log('constants.ConstantA:', this.constants.ConstantA);\n console.log('constants.ConstantB:', this.constants.ConstantB);\n}" + }, + "onTestUtilsButtonClicked": { + "type": "JSFunction", + "value": "function onTestUtilsButtonClicked() {\n this.utils.demoUtil('param1', 'param2');\n}" + } + }, + "originCode": "class LowcodeComponent extends Component {\n state = {\n \"text\": \"outer\",\n \"isShowDialog\": false\n }\n componentDidMount() {\n console.log('did mount');\n }\n componentWillUnmount() {\n console.log('will unmount');\n }\n testFunc() {\n console.log('test func');\n }\n onClick() {\n this.setState({\n isShowDialog: true\n })\n }\n closeDialog() {\n this.setState({\n isShowDialog: false\n })\n }\n getHelloWorldText() {\n return this.i18n('i18n-jwg27yo4');\n }\n getHelloWorldText2() {\n return this.i18n('i18n-jwg27yo3', {\n name: '絮黎',\n });\n }\n\n onTestConstantsButtonClicked() {\n console.log('constants.ConstantA:', this.constants.ConstantA);\n console.log('constants.ConstantB:', this.constants.ConstantB);\n\t}\n\n\tonTestUtilsButtonClicked(){\n this.utils.demoUtil('param1', 'param2');\n\t}\n}", + "hidden": false, + "title": "", + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextPage", + "id": "node_ockzs2vw431", + "docId": "doclaqkk3b9", + "props": { + "headerDivider": true, + "minHeight": "100vh", + "presetNav": true, + "presetAside": true, + "footer": false, + "nav": false, + "aside": false, + "placeholderStyle": { + "gridRowEnd": "span 1", + "gridColumnEnd": "span 12" + }, + "headerProps": { + "background": "surface" + }, + "header": { + "type": "JSSlot", + "value": { + "componentName": "Slot", + "id": "node_oclawu75i01", + "docId": "doclawu75i0", + "props": {}, + "children": [ + { + "componentName": "NextPageHeader", + "id": "node_ockzs2vw433", + "docId": "doclaqkk3b9", + "props": {}, + "title": "页面头部", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextRowColContainer", + "id": "node_ockzs2vw434", + "docId": "doclaqkk3b9", + "props": { + "rowGap": 20, + "colGap": 20 + }, + "title": "行列容器", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextRow", + "id": "node_ockzs2vw435", + "docId": "doclaqkk3b9", + "props": {}, + "title": "行", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextCol", + "id": "node_ockzs2vw436", + "docId": "doclaqkk3b9", + "props": { + "colSpan": 1 + }, + "title": "列", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextP", + "id": "node_ockzvfoetv17", + "docId": "dockzvfoetv", + "props": { + "wrap": false, + "type": "body2", + "verAlign": "middle", + "textSpacing": true, + "align": "left" + }, + "title": "段落", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextText", + "id": "node_ockzvfoetv18", + "docId": "dockzvfoetv", + "props": { + "type": "h5", + "children": { + "type": "JSExpression", + "value": "this.state.info?.info", + "mock": "标题标题" + }, + "mark": false, + "code": false, + "delete": false, + "underline": false, + "strong": false + }, + "hidden": false, + "title": "", + "isLocked": false, + "condition": true, + "conditionGroup": "" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + }, + "isTab": false, + "contentAlignCenter": false, + "contentProps": { + "style": { + "background": "rgba(255,255,255,0)" + } + }, + "navProps": { + "width": 200 + }, + "asideProps": { + "width": 200 + }, + "background": "lining" + }, + "title": "页面", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextBlock", + "id": "node_ockzs2vw437", + "docId": "doclaqkk3b9", + "props": { + "placeholderStyle": { + "height": "100%" + }, + "noPadding": false, + "noBorder": false, + "title": "区域标题", + "rowGap": 20, + "colGap": 20, + "background": "surface", + "layoutmode": "O", + "strict": true, + "colSpan": 12, + "rowSpan": 1, + "mode": "transparent", + "childTotalColumns": 12 + }, + "title": "区域", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextBlockCell", + "id": "node_ockzs2vw438", + "docId": "doclaqkk3b9", + "props": { + "colSpan": 12, + "rowSpan": 1, + "mode": "procard", + "isAutoContainer": true, + "title": "多语言示例", + "hasDivider": true, + "loading": false, + "bodyPadding": "", + "hasCollapse": false, + "text": true, + "visibleButtonCount": 3, + "isFillContainer": true, + "operationConfig": { + "align": "center" + }, + "operations": [] + }, + "hidden": false, + "title": "", + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextRowColContainer", + "id": "node_ockzs2vw439", + "docId": "doclaqkk3b9", + "props": { + "rowGap": 20, + "colGap": 20 + }, + "title": "行列容器", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextRow", + "id": "node_ockzs2vw43a", + "docId": "doclaqkk3b9", + "props": {}, + "title": "行", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextCol", + "id": "node_ockzs2vw43b", + "docId": "doclaqkk3b9", + "props": { + "colSpan": 1, + "justifyContent": "flex-start" + }, + "title": "列", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextP", + "id": "node_oclaqjdn9qv", + "docId": "doclaqjdn9q", + "props": { + "wrap": false, + "type": "body2", + "verAlign": "middle", + "textSpacing": true, + "align": "left", + "prefix": "", + "full": false, + "flex": false + }, + "title": "段落", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextText", + "id": "node_oclaqjdn9qw", + "docId": "doclaqjdn9q", + "props": { + "type": "h5", + "children": { + "type": "JSExpression", + "value": "this.getHelloWorldText()", + "mock": "标题标题" + }, + "prefix": "", + "classname": "", + "mark": false, + "code": false, + "delete": false, + "underline": false, + "strong": false + }, + "hidden": false, + "title": "", + "isLocked": false, + "condition": true, + "conditionGroup": "" + }, + { + "componentName": "NextText", + "id": "node_oclarv0wja2", + "docId": "doclarv56xh", + "props": { + "type": "h5", + "children": { + "type": "JSExpression", + "value": "this.getHelloWorldText2()", + "mock": "另一个i18n" + }, + "prefix": "", + "classname": "", + "mark": false, + "code": false, + "delete": false, + "underline": false, + "strong": false + }, + "hidden": false, + "title": "", + "isLocked": false, + "condition": true, + "conditionGroup": "" + } + ] + } + ] + } + ] + } + ] + } + ] + }, + { + "componentName": "NextBlockCell", + "id": "node_oclawu71ac2", + "docId": "doclawu75i0", + "props": { + "colSpan": 12, + "rowSpan": 1, + "mode": "procard", + "isAutoContainer": true, + "title": "appHelper示例", + "hasDivider": true, + "loading": false, + "bodyPadding": "", + "hasCollapse": false, + "text": true, + "visibleButtonCount": 3, + "isFillContainer": true, + "operationConfig": { + "align": "center" + }, + "operations": [] + }, + "hidden": false, + "title": "", + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextRowColContainer", + "id": "node_oclawu71ac3", + "docId": "doclawu75i0", + "props": { + "rowGap": 20, + "colGap": 20 + }, + "title": "行列容器", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextRow", + "id": "node_oclawu71ac4", + "docId": "doclawu75i0", + "props": {}, + "title": "行", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextCol", + "id": "node_oclawu71ac5", + "docId": "doclawu75i0", + "props": { + "colSpan": 1 + }, + "title": "列", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextP", + "id": "node_oclawu71ac3n", + "docId": "doclawu71ac", + "props": { + "wrap": false, + "type": "body2", + "verAlign": "middle", + "textSpacing": true, + "align": "left", + "prefix": "", + "full": false, + "flex": false + }, + "title": "段落", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "Button", + "id": "node_oclawu71ac3o", + "docId": "doclawu71ac", + "props": { + "prefix": "next-", + "type": "primary", + "size": "medium", + "htmlType": "button", + "component": "button", + "children": "constants", + "iconSize": "xxs", + "loading": false, + "text": false, + "warning": false, + "disabled": false, + "ref": "button-4951c2d3", + "__events": { + "eventDataList": [ + { + "type": "componentEvent", + "name": "onClick", + "relatedEventName": "onTestConstantsButtonClicked" + } + ], + "eventList": [ + { + "name": "onClick", + "description": "点击按钮的回调\n@param {Object} e Event Object", + "disabled": true + }, + { + "name": "onMouseUp", + "disabled": false + } + ] + }, + "onClick": { + "type": "JSFunction", + "value": "function(){this.onTestConstantsButtonClicked.apply(this,Array.prototype.slice.call(arguments).concat([])) }" + } + }, + "hidden": false, + "title": "", + "isLocked": false, + "condition": true, + "conditionGroup": "" + }, + { + "componentName": "Button", + "id": "node_oclawu71ac3p", + "docId": "doclawu71ac", + "props": { + "prefix": "next-", + "type": "primary", + "size": "medium", + "htmlType": "button", + "component": "button", + "children": "utils", + "iconSize": "xxs", + "loading": false, + "text": false, + "warning": false, + "disabled": false, + "__events": { + "eventDataList": [ + { + "type": "componentEvent", + "name": "onClick", + "relatedEventName": "onTestUtilsButtonClicked" + } + ], + "eventList": [ + { + "name": "onClick", + "description": "点击按钮的回调\n@param {Object} e Event Object", + "disabled": true + }, + { + "name": "onMouseUp", + "disabled": false + } + ] + }, + "onClick": { + "type": "JSFunction", + "value": "function(){this.onTestUtilsButtonClicked.apply(this,Array.prototype.slice.call(arguments).concat([])) }" + } + }, + "hidden": false, + "title": "", + "isLocked": false, + "condition": true, + "conditionGroup": "" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] +} \ No newline at end of file diff --git a/packages/template-editor/proj/src/services/mockService.ts b/packages/template-editor/proj/src/services/mockService.ts new file mode 100644 index 0000000..423c50d --- /dev/null +++ b/packages/template-editor/proj/src/services/mockService.ts @@ -0,0 +1,119 @@ +import { material, project } from '@alilc/lowcode-engine'; +import { filterPackages } from '@alilc/lowcode-plugin-inject' +import { Message, Dialog } from '@alifd/next'; +import { ProjectSchema, TransformStage } from '@alilc/lowcode-types'; +import DefaultPageSchema from './defaultPageSchema.json'; +import DefaultI18nSchema from './defaultI18nSchema.json'; + +const generateProjectSchema = (pageSchema: any, i18nSchema: any): ProjectSchema => { + return { + componentsTree: [pageSchema], + componentsMap: material.componentsMap as any, + version: '1.0.0', + i18n: i18nSchema, + }; +} + + +export const saveSchema = async (scenarioName: string = 'unknown') => { + setProjectSchemaToLocalStorage(scenarioName); + await setPackgesToLocalStorage(scenarioName); + Message.success('成功保存到本地'); +}; + +export const resetSchema = async (scenarioName: string = 'unknown') => { + try { + await new Promise((resolve, reject) => { + Dialog.confirm({ + content: '确定要重置吗？您所有的修改都将消失！', + onOk: () => { + resolve(); + }, + onCancel: () => { + reject() + }, + }) + }) + } catch(err) { + return; + } + const defaultSchema = generateProjectSchema(DefaultPageSchema, DefaultI18nSchema); + + project.importSchema(defaultSchema as any); + project.simulatorHost?.rerender(); + + setProjectSchemaToLocalStorage(scenarioName); + await setPackgesToLocalStorage(scenarioName); + Message.success('成功重置页面'); +} + +const getLSName = (scenarioName: string, ns: string = 'projectSchema') => `${scenarioName}:${ns}`; + +export const getProjectSchemaFromLocalStorage = (scenarioName: string) => { + if (!scenarioName) { + console.error('scenarioName is required!'); + return; + } + const localValue = window.localStorage.getItem(getLSName(scenarioName)); + if (localValue) { + return JSON.parse(localValue); + } + return undefined; +} + +const setProjectSchemaToLocalStorage = (scenarioName: string) => { + if (!scenarioName) { + console.error('scenarioName is required!'); + return; + } + window.localStorage.setItem( + getLSName(scenarioName), + JSON.stringify(project.exportSchema(TransformStage.Save)) + ); +} + +const setPackgesToLocalStorage = async (scenarioName: string) => { + if (!scenarioName) { + console.error('scenarioName is required!'); + return; + } + const packages = await filterPackages(material.getAssets().packages); + window.localStorage.setItem( + getLSName(scenarioName, 'packages'), + JSON.stringify(packages), + ); +} + +export const getPackagesFromLocalStorage = (scenarioName: string) => { + if (!scenarioName) { + console.error('scenarioName is required!'); + return; + } + return JSON.parse(window.localStorage.getItem(getLSName(scenarioName, 'packages')) || '{}'); +} + +export const getProjectSchema = async (scenarioName: string = 'unknown') : Promise => { + const pageSchema = await getPageSchema(scenarioName); + return generateProjectSchema(pageSchema, DefaultI18nSchema); +}; + +export const getPageSchema = async (scenarioName: string = 'unknown') => { + const pageSchema = getProjectSchemaFromLocalStorage(scenarioName)?.componentsTree?.[0]; + if (pageSchema) { + return pageSchema; + } + + console.log(`failed to get page schema for scenarioName ${scenarioName} from localstorage, use default page schema`, DefaultPageSchema); + return DefaultPageSchema; +}; + +export const getPreviewLocale = (scenarioName: string) => { + const key = getLSName(scenarioName, 'previewLocale'); + return window.localStorage.getItem(key) || 'zh-CN'; +} + +export const setPreviewLocale = (scenarioName: string, locale: string) => { + const key = getLSName(scenarioName, 'previewLocale'); + window.localStorage.setItem(key, locale || 'zh-CN'); + window.location.reload(); +} diff --git a/packages/template-editor/proj/src/services/schema.json b/packages/template-editor/proj/src/services/schema.json new file mode 100644 index 0000000..81e6f00 --- /dev/null +++ b/packages/template-editor/proj/src/services/schema.json @@ -0,0 +1,445 @@ +{ + "componentName": "Page", + "id": "node_dockcviv8fo1", + "docId": "doclaqkk3b9", + "props": { + "ref": "outerView", + "style": { + "height": "100%" + } + }, + "fileName": "/", + "dataSource": { + "list": [ + { + "type": "fetch", + "isInit": true, + "options": { + "params": {}, + "method": "GET", + "isCors": true, + "timeout": 5000, + "headers": {}, + "uri": "mock/info.json" + }, + "id": "info", + "shouldFetch": { + "type": "JSFunction", + "value": "function() { \n console.log('should fetch.....');\n return true; \n}" + } + } + ] + }, + "state": { + "text": { + "type": "JSExpression", + "value": "\"outer\"" + }, + "isShowDialog": { + "type": "JSExpression", + "value": "false" + } + }, + "css": "body {\n font-size: 12px;\n}\n\n.button {\n width: 100px;\n color: #ff00ff\n}", + "lifeCycles": { + "componentDidMount": { + "type": "JSFunction", + "value": "function componentDidMount() {\n console.log('did mount');\n}" + }, + "componentWillUnmount": { + "type": "JSFunction", + "value": "function componentWillUnmount() {\n console.log('will unmount');\n}" + } + }, + "methods": { + "testFunc": { + "type": "JSFunction", + "value": "function testFunc() {\n console.log('test func');\n}" + }, + "onClick": { + "type": "JSFunction", + "value": "function onClick() {\n this.setState({\n isShowDialog: true\n });\n}" + }, + "closeDialog": { + "type": "JSFunction", + "value": "function closeDialog() {\n this.setState({\n isShowDialog: false\n });\n}" + }, + "onClickTestConstants": { + "type": "JSFunction", + "value": "function onClickTestConstants() {\n console.log('this.constants.ConstantA', this.constants.ConstantA);\n console.log('this.constants.ConstantB', this.constants.ConstantB);\n}" + }, + "onClickTestUtils": { + "type": "JSFunction", + "value": "function onClickTestUtils() {\n this.utils.demoUtil('a', 'b');\n}" + } + }, + "originCode": "class LowcodeComponent extends Component {\n state = {\n \"text\": \"outer\",\n \"isShowDialog\": false\n }\n componentDidMount() {\n console.log('did mount');\n }\n componentWillUnmount() {\n console.log('will unmount');\n }\n testFunc() {\n console.log('test func');\n }\n onClick() {\n this.setState({\n isShowDialog: true\n })\n }\n closeDialog() {\n this.setState({\n isShowDialog: false\n })\n }\n\tonClickTestConstants(){\n console.log('this.constants.ConstantA', this.constants.ConstantA);\n console.log('this.constants.ConstantB', this.constants.ConstantB);\n }\n onClickTestUtils() {\n this.utils.demoUtil('a', 'b');\n }\n}", + "hidden": false, + "title": "", + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextPage", + "id": "node_ockzs2vw431", + "docId": "doclaqkk3b9", + "props": { + "headerDivider": true, + "minHeight": "100vh", + "presetNav": true, + "presetAside": true, + "footer": false, + "nav": false, + "aside": false, + "placeholderStyle": { + "gridRowEnd": "span 1", + "gridColumnEnd": "span 12" + }, + "headerProps": { + "background": "surface" + }, + "header": { + "type": "JSSlot", + "value": { + "componentName": "NextPageHeader", + "id": "node_ockzs2vw433", + "docId": "doclaqkk3b9", + "props": {}, + "title": "页面头部", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextRowColContainer", + "id": "node_ockzs2vw434", + "docId": "doclaqkk3b9", + "props": { + "rowGap": 20, + "colGap": 20 + }, + "title": "行列容器", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextRow", + "id": "node_ockzs2vw435", + "docId": "doclaqkk3b9", + "props": {}, + "title": "行", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextCol", + "id": "node_ockzs2vw436", + "docId": "doclaqkk3b9", + "props": { + "colSpan": 1 + }, + "title": "列", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextP", + "id": "node_ockzvfoetv17", + "docId": "dockzvfoetv", + "props": { + "wrap": false, + "type": "body2", + "verAlign": "middle", + "textSpacing": true, + "align": "left" + }, + "title": "段落", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextText", + "id": "node_ockzvfoetv18", + "docId": "dockzvfoetv", + "props": { + "type": "h5", + "children": { + "type": "JSExpression", + "value": "this.state.info?.info", + "mock": "标题标题" + }, + "mark": false, + "code": false, + "delete": false, + "underline": false, + "strong": false, + "prefix": "", + "classname": "", + "ref": "nexttext-3a39ea8b" + }, + "hidden": false, + "title": "", + "isLocked": false, + "condition": true, + "conditionGroup": "" + } + ] + } + ] + } + ] + } + ] + } + ] + } + }, + "isTab": false, + "contentAlignCenter": false, + "contentProps": { + "style": { + "background": "rgba(255,255,255,0)" + } + }, + "navProps": { + "width": 200 + }, + "asideProps": { + "width": 200 + }, + "background": "lining", + "ref": "nextpage-3cc814e7" + }, + "title": "页面", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextBlock", + "id": "node_oclat5fpb6ga", + "docId": "doclat87b8r", + "props": { + "placeholderStyle": { + "height": "100%" + }, + "noPadding": false, + "noBorder": false, + "title": "区域标题", + "rowGap": 20, + "colGap": 20, + "background": "surface", + "layoutmode": "O", + "strict": true, + "colSpan": 12, + "rowSpan": 1, + "mode": "transparent", + "childTotalColumns": 12 + }, + "title": "区域", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextBlockCell", + "id": "node_oclat5fpb6gb", + "docId": "doclat87b8r", + "props": { + "colSpan": 12, + "rowSpan": 1, + "mode": "procard", + "isAutoContainer": true, + "title": "区块标题", + "hasDivider": true, + "loading": false, + "hasCollapse": false, + "text": true, + "isFillContainer": true, + "operations": [] + }, + "hidden": false, + "title": "", + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextRowColContainer", + "id": "node_oclat5fpb6gc", + "docId": "doclat87b8r", + "props": { + "rowGap": 20, + "colGap": 20 + }, + "title": "行列容器", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextRow", + "id": "node_oclat5fpb6gd", + "docId": "doclat87b8r", + "props": {}, + "title": "行", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextCol", + "id": "node_oclat5fpb6ge", + "docId": "doclat87b8r", + "props": { + "colSpan": 1 + }, + "title": "列", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextP", + "id": "node_oclat5fpb6gf", + "docId": "doclat87b8r", + "props": { + "wrap": false, + "type": "body2", + "verAlign": "middle", + "textSpacing": true, + "align": "left" + }, + "title": "段落", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "Button", + "id": "node_oclat5fpb6gg", + "docId": "doclat5fpb6", + "props": { + "prefix": "next-", + "type": "primary", + "size": "medium", + "htmlType": "button", + "component": "button", + "children": "测试constants", + "iconSize": "xxs", + "loading": false, + "text": false, + "warning": false, + "disabled": false, + "__events": { + "eventDataList": [ + { + "type": "componentEvent", + "name": "onClick", + "relatedEventName": "onClickTestConstants" + } + ], + "eventList": [ + { + "name": "onClick", + "description": "点击按钮的回调\n@param {Object} e Event Object", + "disabled": true + }, + { + "name": "onMouseUp", + "disabled": false + } + ] + }, + "onClick": { + "type": "JSFunction", + "value": "function(){this.onClickTestConstants.apply(this,Array.prototype.slice.call(arguments).concat([])) }" + }, + "ghost": false + }, + "hidden": false, + "title": "", + "isLocked": false, + "condition": true, + "conditionGroup": "" + }, + { + "componentName": "Button", + "id": "node_oclat5fpb6gh", + "docId": "doclat5fpb6", + "props": { + "prefix": "next-", + "type": "primary", + "size": "medium", + "htmlType": "button", + "component": "button", + "children": "测试utils", + "iconSize": "xxs", + "loading": false, + "text": false, + "warning": false, + "disabled": false, + "ref": "button-0d20c188", + "__events": { + "eventDataList": [ + { + "type": "componentEvent", + "name": "onClick", + "relatedEventName": "onClickTestUtils" + } + ], + "eventList": [ + { + "name": "onClick", + "description": "点击按钮的回调\n@param {Object} e Event Object", + "disabled": true + }, + { + "name": "onMouseUp", + "disabled": false + } + ] + }, + "onClick": { + "type": "JSFunction", + "value": "function(){this.onClickTestUtils.apply(this,Array.prototype.slice.call(arguments).concat([])) }" + } + }, + "hidden": false, + "title": "", + "isLocked": false, + "condition": true, + "conditionGroup": "" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] +} \ No newline at end of file diff --git a/packages/template-editor/proj/tsconfig.json b/packages/template-editor/proj/tsconfig.json new file mode 100644 index 0000000..23314ab --- /dev/null +++ b/packages/template-editor/proj/tsconfig.json @@ -0,0 +1,44 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "declaration": true, + "lib": ["es2015", "dom"], + // Target latest version of ECMAScript. + "target": "esnext", + // Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. + "module": "esnext", + // Search under node_modules for non-relative imports. + "moduleResolution": "node", + // Process & infer types from .js files. + "allowJs": true, + // Report errors in .js files. + "checkJs": false, + // Don't emit; allow Babel to transform files. + // "noEmit": true, + // Enable strictest settings like strictNullChecks & noImplicitAny. + "strict": true, + // Allow default imports from modules with no default export. This does not affect code emit, just typechecking. + "allowSyntheticDefaultImports": true, + // Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. + "esModuleInterop": true, + // Specify JSX code generation: 'preserve', 'react-native', or 'react'. + "jsx": "preserve", + // Import emit helpers (e.g. __extends, __rest, etc..) from tslib + "importHelpers": true, + // Enables experimental support for ES7 decorators. + "experimentalDecorators": true, + // Generates corresponding .map file. + "sourceMap": true, + // Disallow inconsistently-cased references to the same file. + "forceConsistentCasingInFileNames": true, + // Allow json import + "resolveJsonModule": true, + // skip type checking of declaration files + "skipLibCheck": true, + "outDir": "lib" + }, + "include": [ + "./src/" + ], + "exclude": ["**/test", "**/lib", "**/es", "node_modules"] +} From 21f30c95aa5fd8002bc940d1427472239544e355 Mon Sep 17 00:00:00 2001 From: JackLian Date: Fri, 2 Dec 2022 16:39:56 +0800 Subject: [PATCH 39/98] doc: replace doc url --- packages/create-element/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/create-element/README.md b/packages/create-element/README.md index 37808a4..81699a3 100644 --- a/packages/create-element/README.md +++ b/packages/create-element/README.md @@ -1,3 +1,3 @@ # 低代码引擎生态元素脚手架 -使用文档见：https://www.yuque.com/lce/doc/ulvlkz \ No newline at end of file +使用文档见：https://lowcode-engine.cn/site/docs/guide/expand/editor/cli \ No newline at end of file From 411e3433798576bedbc4a6e5b47f6287df191d90 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?LeoYuan=20=E8=A2=81=E5=8A=9B=E7=9A=93?= Date: Fri, 9 Dec 2022 10:10:07 +0800 Subject: [PATCH 40/98] chore(tpl-plugin): 1.0.6 --- packages/template-plugin/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/template-plugin/package.json b/packages/template-plugin/package.json index 356ce96..f7ab85a 100644 --- a/packages/template-plugin/package.json +++ b/packages/template-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-template-plugin", - "version": "1.0.5", + "version": "1.0.6", "description": "Ali lowCode engine plugin template", "main": "index.js", "scripts": { @@ -18,4 +18,4 @@ }, "author": "eternalsky", "license": "MIT" -} \ No newline at end of file +} From f7a6b1e57236770ad075d67b13f7eaa415dd60f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9E=97=E7=86=A0?= Date: Mon, 12 Dec 2022 20:42:21 +0800 Subject: [PATCH 41/98] fix: replace yuque links, and some minor change (#22) --- README.md | 2 +- packages/build-plugin-alt/README.md | 4 +--- packages/build-plugin-alt/src/entry/universal/plugin.tsx | 3 +-- packages/build-plugin-lowcode/package.json | 2 +- packages/lowcode-plugin-inject/README.md | 2 +- packages/lowcode-preset-plugin/src/plugins/index.tsx | 6 +++--- packages/template-editor/package.json | 2 +- packages/template-editor/proj/src/index.ts | 6 +++--- packages/template-plugin/proj/build.js | 8 ++++---- 9 files changed, 16 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index ea28023..53f0b23 100644 --- a/README.md +++ b/README.md @@ -14,4 +14,4 @@ ## 使用文档 -https://www.yuque.com/lce/doc/ulvlkz \ No newline at end of file +https://lowcode-engine.cn/site/docs/guide/expand/editor/cli \ No newline at end of file diff --git a/packages/build-plugin-alt/README.md b/packages/build-plugin-alt/README.md index 9e692ca..38bf8ec 100644 --- a/packages/build-plugin-alt/README.md +++ b/packages/build-plugin-alt/README.md @@ -1,5 +1,3 @@ # 低代码引擎生态元素开发插件（build-scripts） -使用文档见：https://www.yuque.com/lce/doc/ulvlkz - - +使用文档见：https://lowcode-engine.cn/site/docs/guide/expand/editor/cli diff --git a/packages/build-plugin-alt/src/entry/universal/plugin.tsx b/packages/build-plugin-alt/src/entry/universal/plugin.tsx index d8519b2..4ce7f05 100644 --- a/packages/build-plugin-alt/src/entry/universal/plugin.tsx +++ b/packages/build-plugin-alt/src/entry/universal/plugin.tsx @@ -24,7 +24,7 @@ export default async ({ type, demoPlugin = undefined }) => { await plugins.register(plugin); } } - // plugin API 见 https://yuque.antfin.com/ali-lowcode/docs/cdukce + // plugin API 见 https://lowcode-engine.cn/site/docs/api/plugins (SchemaPlugin as any).pluginName = 'SchemaPlugin'; await registerPlugin(SchemaPlugin); (CodeEditor as any).pluginName = 'CodeEditor'; @@ -253,4 +253,3 @@ export default async ({ type, demoPlugin = undefined }) => { await registerPlugin(previewSample); } - diff --git a/packages/build-plugin-lowcode/package.json b/packages/build-plugin-lowcode/package.json index 62f87a6..a2464c2 100644 --- a/packages/build-plugin-lowcode/package.json +++ b/packages/build-plugin-lowcode/package.json @@ -25,7 +25,7 @@ "@alilc/lowcode-types": "^1.0.1", "@alilc/lowcode-utils": "^1.0.1", "axios": "^0.21.4", - "build-scripts-config": "^3.0.0", + "build-scripts-config": "^3.0.3", "chokidar": "^3.5.3", "cross-spawn-promise": "^0.10.2", "driver-universal": "^3.4.0", diff --git a/packages/lowcode-plugin-inject/README.md b/packages/lowcode-plugin-inject/README.md index a4d1c8c..e492f1a 100644 --- a/packages/lowcode-plugin-inject/README.md +++ b/packages/lowcode-plugin-inject/README.md @@ -1,3 +1,3 @@ # 低代码引擎生态元素项目内调试用插件 -使用文档见：https://www.yuque.com/lce/doc/ulvlkz \ No newline at end of file +使用文档见：https://lowcode-engine.cn/site/docs/guide/expand/editor/cli \ No newline at end of file diff --git a/packages/lowcode-preset-plugin/src/plugins/index.tsx b/packages/lowcode-preset-plugin/src/plugins/index.tsx index 2811baf..f0672ba 100644 --- a/packages/lowcode-preset-plugin/src/plugins/index.tsx +++ b/packages/lowcode-preset-plugin/src/plugins/index.tsx @@ -25,7 +25,7 @@ const registerDefaultPlugins = async (presetConfig) => { // await plugins.register(Inject); - // plugin API 见 https://lowcode-engine.cn/docV2/ibh9fh + // plugin API 见 https://lowcode-engine.cn/site/docs/api/plugins SchemaPlugin.pluginName = 'SchemaPlugin'; await plugins.register(SchemaPlugin); @@ -173,7 +173,7 @@ const registerDefaultPlugins = async (presetConfig) => { ), }); - + hotkey.bind('command+s', (e) => { e.preventDefault(); // saveSchema(); @@ -189,7 +189,7 @@ const registerDefaultPlugins = async (presetConfig) => { await plugins.register(CodeGenPlugin); DataSourcePanePlugin.pluginName = 'DataSourcePane'; - // 插件参数声明 & 传递，参考：https://www.yuque.com/lce/doc/ibh9fh#peEmG + // 插件参数声明 & 传递，参考：https://lowcode-engine.cn/site/docs/api/plugins#设置插件参数版本示例 await plugins.register(DataSourcePanePlugin, { importPlugins: [], dataSourceTypes: [ diff --git a/packages/template-editor/package.json b/packages/template-editor/package.json index 326281c..2a11efd 100644 --- a/packages/template-editor/package.json +++ b/packages/template-editor/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-template-editor", - "version": "1.0.2", + "version": "1.0.3", "description": "Ali lowCode engine editor template", "main": "index.js", "scripts": { diff --git a/packages/template-editor/proj/src/index.ts b/packages/template-editor/proj/src/index.ts index 326a895..12ec053 100644 --- a/packages/template-editor/proj/src/index.ts +++ b/packages/template-editor/proj/src/index.ts @@ -43,6 +43,8 @@ async function registerPlugins() { }, }); + await plugins.register(InjectPlugin); + // 设置内置 setter 和事件绑定、插件绑定面板 await plugins.register(DefaultSettersRegistryPlugin); @@ -60,8 +62,6 @@ async function registerPlugins() { // 注册中英文切换 await plugins.register(ZhEnPlugin); - await plugins.register(InjectPlugin); - await plugins.register(SetRefPropPlugin); await plugins.register(SimulatorResizerPlugin); @@ -69,7 +69,7 @@ async function registerPlugins() { await plugins.register(LoadIncrementalAssetsWidgetPlugin); - // 插件参数声明 & 传递，参考：https://www.yuque.com/lce/doc/ibh9fh#peEmG + // 插件参数声明 & 传递，参考：https://lowcode-engine.cn/site/docs/api/plugins#设置插件参数版本示例 await plugins.register(DataSourcePanePlugin, { importPlugins: [], dataSourceTypes: [ diff --git a/packages/template-plugin/proj/build.js b/packages/template-plugin/proj/build.js index 70f3349..db03e70 100644 --- a/packages/template-plugin/proj/build.js +++ b/packages/template-plugin/proj/build.js @@ -5,11 +5,11 @@ module.exports = { '@alilc/build-plugin-alt', { type: 'plugin', - // 开启注入调试模式，see：https://www.yuque.com/lce/doc/ulvlkz - // inject: true, + // 开启注入调试模式，see：https://lowcode-engine.cn/site/docs/guide/expand/editor/cli + inject: true, // 配置要打开的页面，在注入调试模式下，不配置此项的话不会打开浏览器 - // 支持直接使用官方 demo 项目：https://lowcode-engine.cn/demo/index.html - // openUrl: 'https://lowcode-engine.cn/demo/index.html?debug', + // 支持直接使用官方 demo 项目：https://lowcode-engine.cn/demo/demo-general/index.html + // openUrl: 'https://lowcode-engine.cn/demo/demo-general/index.html?debug', } ] ] From 39024365cc44e6b60b466ffd7d399ab874010dd8 Mon Sep 17 00:00:00 2001 From: JackLian Date: Mon, 12 Dec 2022 20:44:56 +0800 Subject: [PATCH 42/98] chore(template-plugin): publish 1.0.7 --- packages/template-plugin/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/template-plugin/package.json b/packages/template-plugin/package.json index f7ab85a..e169cd1 100644 --- a/packages/template-plugin/package.json +++ b/packages/template-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-template-plugin", - "version": "1.0.6", + "version": "1.0.7", "description": "Ali lowCode engine plugin template", "main": "index.js", "scripts": { From 5ef5747d4ba6550f726fc6a3661108a4f3de7bcb Mon Sep 17 00:00:00 2001 From: JackLian Date: Wed, 21 Dec 2022 13:28:10 +0800 Subject: [PATCH 43/98] chore: change cdn links --- packages/build-plugin-lowcode/src/constants.js | 16 ++++++++-------- packages/lowcode-preset-plugin/public/index.html | 8 ++++---- packages/template-editor/package.json | 2 +- packages/template-editor/proj/public/index.ejs | 8 ++++---- 4 files changed, 17 insertions(+), 17 deletions(-) diff --git a/packages/build-plugin-lowcode/src/constants.js b/packages/build-plugin-lowcode/src/constants.js index 87b876e..91a81e5 100644 --- a/packages/build-plugin-lowcode/src/constants.js +++ b/packages/build-plugin-lowcode/src/constants.js @@ -48,8 +48,8 @@ const STATIC_RESOURCES = { engineExtJsUrl: 'https://g.alicdn.com/ali-lowcode/lowcode-engine-ext/1.0.20/engine-ext.js', enginePresetJsUrl: 'https://alifd.alicdn.com/npm/@alifd/lowcode-preset-plugin@1.1.8/dist/editor-preset-plugin.js', - raxRenderJsUrl: 'https://alifd.alicdn.com/npm/@alilc/lowcode-rax-renderer@1.0.12/dist/index.umd.js', - raxRenderCssUrl: 'https://alifd.alicdn.com/npm/@alilc/lowcode-rax-renderer@1.0.12/dist/index.css', + raxRenderJsUrl: 'https://alifd.alicdn.com/npm/@alilc/lowcode-rax-renderer@1.0.18/dist/index.umd.js', + raxRenderCssUrl: 'https://alifd.alicdn.com/npm/@alilc/lowcode-rax-renderer@1.0.18/dist/index.css', }; const ALILC_STATIC_RESOURCES = { @@ -57,19 +57,19 @@ const ALILC_STATIC_RESOURCES = { themeStyleUrl: 'https://alifd.alicdn.com/npm/@alifd/theme-lowcode-dark@0.6.1/dist/next.var.min.css', engineCoreCssUrl: - 'https://alifd.alicdn.com/npm/@alilc/lowcode-engine@1.0.12/dist/css/engine-core.css', + 'https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.0.18/dist/css/engine-core.css', engineExtCssUrl: - 'https://alifd.alicdn.com/npm/@alilc/lowcode-engine-ext@1.0.4/dist/css/engine-ext.css', + 'https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.5/dist/css/engine-ext.css', enginePresetCssUrl: 'https://alifd.alicdn.com/npm/@alifd/lowcode-preset-plugin@1.1.8/dist/editor-preset-plugin.css', engineCoreJsUrl: - 'https://alifd.alicdn.com/npm/@alilc/lowcode-engine@1.0.12/dist/js/engine-core.js', + 'https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.0.18/dist/js/engine-core.js', engineExtJsUrl: - 'https://alifd.alicdn.com/npm/@alilc/lowcode-engine-ext@1.0.4/dist/js/engine-ext.js', + 'https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.5/dist/js/engine-ext.js', enginePresetJsUrl: 'https://alifd.alicdn.com/npm/@alifd/lowcode-preset-plugin@1.1.8/dist/editor-preset-plugin.js', - raxRenderJsUrl: 'https://alifd.alicdn.com/npm/@alilc/lowcode-rax-renderer@1.0.12/dist/index.umd.js', - raxRenderCssUrl: 'https://alifd.alicdn.com/npm/@alilc/lowcode-rax-renderer@1.0.12/dist/index.css', + raxRenderJsUrl: 'https://alifd.alicdn.com/npm/@alilc/lowcode-rax-renderer@1.0.18/dist/index.umd.js', + raxRenderCssUrl: 'https://alifd.alicdn.com/npm/@alilc/lowcode-rax-renderer@1.0.18/dist/index.css', }; const STATIC_RESOURCES_MAP = { diff --git a/packages/lowcode-preset-plugin/public/index.html b/packages/lowcode-preset-plugin/public/index.html index 7348665..61b93cb 100644 --- a/packages/lowcode-preset-plugin/public/index.html +++ b/packages/lowcode-preset-plugin/public/index.html @@ -11,9 +11,9 @@ - + - + @@ -29,9 +29,9 @@ - + - + @@ -29,9 +29,9 @@ - + - + From aa5fef0b972802c04f05437f0aa3ccd86e768387 Mon Sep 17 00:00:00 2001 From: eternalsky Date: Fri, 23 Dec 2022 15:14:33 +0800 Subject: [PATCH 44/98] =?UTF-8?q?fix(build-plugin-alt):=20babelPluginMeta?= =?UTF-8?q?=20=E5=AF=B9=20package=20=E4=B8=AD=E4=B8=80=E9=83=A8=E5=88=86?= =?UTF-8?q?=20meta=20=E6=9C=AA=E5=AE=9A=E4=B9=89=E7=9A=84=E6=83=85?= =?UTF-8?q?=E5=86=B5=E5=A4=84=E7=90=86=E9=94=99=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/build-plugin-alt/CHANGELOG.md | 1 + packages/build-plugin-alt/package.json | 2 +- .../build-plugin-alt/src/babelPluginMeta.ts | 18 +++++++++--------- 3 files changed, 11 insertions(+), 10 deletions(-) diff --git a/packages/build-plugin-alt/CHANGELOG.md b/packages/build-plugin-alt/CHANGELOG.md index ca13bda..3708547 100644 --- a/packages/build-plugin-alt/CHANGELOG.md +++ b/packages/build-plugin-alt/CHANGELOG.md @@ -3,6 +3,7 @@ ## 1.3.0 - `feat` 新增配置项 usePrivateIp，为 true 时 injectInfo 使用 private ip 而非 local ip。 +- `fix` babelPluginMeta 对 package 中一部分 meta 未定义的情况处理错误 ## 1.2.2 diff --git a/packages/build-plugin-alt/package.json b/packages/build-plugin-alt/package.json index 94953ed..c952a23 100644 --- a/packages/build-plugin-alt/package.json +++ b/packages/build-plugin-alt/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/build-plugin-alt", - "version": "1.3.0-beta.0", + "version": "1.3.0", "description": "build-scripts plugin template for developers", "main": "lib/index.js", "files": [ diff --git a/packages/build-plugin-alt/src/babelPluginMeta.ts b/packages/build-plugin-alt/src/babelPluginMeta.ts index 1781d2a..7fde198 100644 --- a/packages/build-plugin-alt/src/babelPluginMeta.ts +++ b/packages/build-plugin-alt/src/babelPluginMeta.ts @@ -11,7 +11,7 @@ interface IMeta { interface IVisitorPass { opts?: { filename: string; - meta: IMeta; + meta?: IMeta; } filename?: string; } @@ -40,10 +40,10 @@ const injectMetaVisitor: Visitor = { (BabelTypes.isStringLiteral(property) && property.value === 'pluginName') ) { const meta = pass.meta; - if (meta.pluginName) { + pass.cache.pluginNameAssignmentExists = true; + if (meta?.pluginName) { path.node.right = BabelTypes.stringLiteral(meta.pluginName); addInfoComment(path.node); - pass.cache.pluginNameAssignmentExists = true; } } if ( @@ -51,11 +51,11 @@ const injectMetaVisitor: Visitor = { (BabelTypes.isStringLiteral(property) && property.value === 'meta') ) { const meta = pass.meta; - if (meta.meta) { + pass.cache.metaAssignmentExists = true; + if (meta?.meta) { const generateAst = template(`const a = ${JSON.stringify(meta.meta)}`)() as BabelTypes.VariableDeclaration; path.node.right = generateAst.declarations[0].init; addInfoComment(path.node); - pass.cache.metaAssignmentExists = true; } } } @@ -78,13 +78,13 @@ export default function (babel: { types: typeof BabelTypes }): { if (t.isIdentifier(path.node.declaration)) { const declarationName = path.node.declaration.name; path.parentPath.traverse(injectMetaVisitor, { ...state.opts, declarationName, cache }) - if (!cache.pluginNameAssignmentExists) { - const generatedNode = template(`${declarationName}.pluginName = "${state.opts.meta.pluginName}"`)(); + if (!cache.pluginNameAssignmentExists && state.opts?.meta?.pluginName) { + const generatedNode = template(`${declarationName}.pluginName = "${state.opts?.meta?.pluginName}"`)(); addInfoComment(generatedNode); path.insertBefore(generatedNode); } - if (!cache.metaAssignmentExists) { - const generatedNode = template(`${declarationName}.meta = ${JSON.stringify(state.opts.meta.meta)}`)(); + if (!cache.metaAssignmentExists && state.opts?.meta?.meta) { + const generatedNode = template(`${declarationName}.meta = ${JSON.stringify(state.opts?.meta?.meta)}`)(); addInfoComment(generatedNode); path.insertBefore(generatedNode); } From 2375952deddb08519a491ec4af80c5b1d132507e Mon Sep 17 00:00:00 2001 From: eternalsky Date: Mon, 30 Jan 2023 16:36:05 +0800 Subject: [PATCH 45/98] =?UTF-8?q?chore(lowcode-plugin-inject):=201.2.0=20?= =?UTF-8?q?=E6=AD=A3=E5=BC=8F=E7=89=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/lowcode-plugin-inject/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/lowcode-plugin-inject/package.json b/packages/lowcode-plugin-inject/package.json index 92d3959..f0c92d2 100644 --- a/packages/lowcode-plugin-inject/package.json +++ b/packages/lowcode-plugin-inject/package.json @@ -1,7 +1,7 @@ { "name": "@alilc/lowcode-plugin-inject", "author": "ens", - "version": "1.2.0-beta.1", + "version": "1.2.0", "description": "lowcode-plugin-inject", "main": "lib/index.js", "module": "es/index.js", From 5ae4b5677bb74945d74d80cefffc1b673998eccc Mon Sep 17 00:00:00 2001 From: JackLian Date: Thu, 16 Feb 2023 11:10:02 +0800 Subject: [PATCH 46/98] feat: upgrade plugin template --- packages/template-plugin/package.json | 2 +- packages/template-plugin/proj/package.json | 2 +- packages/template-plugin/proj/src/index.tsx | 20 ++++---------------- 3 files changed, 6 insertions(+), 18 deletions(-) diff --git a/packages/template-plugin/package.json b/packages/template-plugin/package.json index e169cd1..94b7b55 100644 --- a/packages/template-plugin/package.json +++ b/packages/template-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-template-plugin", - "version": "1.0.7", + "version": "1.0.8", "description": "Ali lowCode engine plugin template", "main": "index.js", "scripts": { diff --git a/packages/template-plugin/proj/package.json b/packages/template-plugin/proj/package.json index bf0c9cc..ce85df0 100644 --- a/packages/template-plugin/proj/package.json +++ b/packages/template-plugin/proj/package.json @@ -19,7 +19,7 @@ "registry": "https://registry.npmjs.org/" }, "dependencies": { - "@alilc/lowcode-engine": "^1.0.0" + "@alilc/lowcode-types": "^1.1.1" }, "peerDependencies": { "react": "^16.0.0" diff --git a/packages/template-plugin/proj/src/index.tsx b/packages/template-plugin/proj/src/index.tsx index b633684..8c9ef2e 100644 --- a/packages/template-plugin/proj/src/index.tsx +++ b/packages/template-plugin/proj/src/index.tsx @@ -1,24 +1,12 @@ import * as React from 'react'; -import { ILowCodePluginContext } from '@alilc/lowcode-engine'; +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; import Icon from './icon'; -const <%- componentName %> = (ctx: ILowCodePluginContext) => { +const <%- componentName %> = (ctx: IPublicModelPluginContext, options: any) => { return { - // 插件对外暴露的数据和方法 - exports() { - return { - data: '你可以把插件的数据这样对外暴露', - func: () => { - console.log('方法也是一样'); - }, - } - }, // 插件的初始化函数，在引擎初始化之后会立刻调用 init() { - // 你可以拿到其他插件暴露的方法和属性 - // const { data, func } = ctx.plugins.pluginA; - // func(); - + // 你可以拿到插件注册时的初始化参数 // console.log(options.name); // 往引擎增加面板 @@ -44,7 +32,7 @@ const <%- componentName %> = (ctx: ILowCodePluginContext) => { // 依赖的插件（插件名数组） dependencies: [], engines: { - lowcodeEngine: '^1.0.0', // 插件需要配合 ^1.0.0 的引擎才可运行 + lowcodeEngine: '^1.1.0', // 插件需要配合 ^1.1.0 的引擎才可运行 }, } From 10655310d97fa99ab89dbf06c42f40b8fb0b828e Mon Sep 17 00:00:00 2001 From: eternalsky Date: Fri, 17 Feb 2023 14:11:17 +0800 Subject: [PATCH 47/98] =?UTF-8?q?fix(build-plugin-alt):=20=E5=90=AF?= =?UTF-8?q?=E5=8A=A8=E6=97=B6=E6=8A=A5=E6=89=BE=E4=B8=8D=E5=88=B0=20moment?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/build-plugin-alt/CHANGELOG.md | 4 ++++ packages/build-plugin-alt/package.json | 3 ++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/build-plugin-alt/CHANGELOG.md b/packages/build-plugin-alt/CHANGELOG.md index 3708547..b02461a 100644 --- a/packages/build-plugin-alt/CHANGELOG.md +++ b/packages/build-plugin-alt/CHANGELOG.md @@ -1,5 +1,9 @@ # Changelog +## 1.3.1 + +- `fix` 启动时报找不到 moment + ## 1.3.0 - `feat` 新增配置项 usePrivateIp，为 true 时 injectInfo 使用 private ip 而非 local ip。 diff --git a/packages/build-plugin-alt/package.json b/packages/build-plugin-alt/package.json index c952a23..d8221c6 100644 --- a/packages/build-plugin-alt/package.json +++ b/packages/build-plugin-alt/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/build-plugin-alt", - "version": "1.3.0", + "version": "1.3.1", "description": "build-scripts plugin template for developers", "main": "lib/index.js", "files": [ @@ -69,6 +69,7 @@ "koa": "^2.13.4", "kolorist": "^1.5.0", "lodash": "^4.17.21", + "moment": "^2.29.4", "moment-locales-webpack-plugin": "^1.2.0", "react-dev-utils": "^11.0.4", "style-loader": "^2.0.0" From dd91e21619e8c77d9be469b0b906ce59064d7466 Mon Sep 17 00:00:00 2001 From: eternalsky Date: Mon, 20 Feb 2023 11:23:23 +0800 Subject: [PATCH 48/98] =?UTF-8?q?fix(lowcode-plugin-inject):=20=E5=85=BC?= =?UTF-8?q?=E5=AE=B9=E6=96=B0=E7=89=88=E6=8F=92=E4=BB=B6=20pluginName=20?= =?UTF-8?q?=E7=9A=84=E5=A3=B0=E6=98=8E=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/lowcode-plugin-inject/HISTORY.md | 3 +++ packages/lowcode-plugin-inject/package.json | 5 +++-- packages/lowcode-plugin-inject/src/index.tsx | 22 +++++++++++++------- 3 files changed, 20 insertions(+), 10 deletions(-) diff --git a/packages/lowcode-plugin-inject/HISTORY.md b/packages/lowcode-plugin-inject/HISTORY.md index 243ee9f..128516a 100644 --- a/packages/lowcode-plugin-inject/HISTORY.md +++ b/packages/lowcode-plugin-inject/HISTORY.md @@ -1,3 +1,6 @@ +# 1.2.1 +* fix: 兼容新版插件 pluginName 的声明方式 + # 1.2.0 * feat: 新增配置项 `injectServerHost`，用于配置 inject 服务器的地址 * fix: 预览态对多组件的支持有问题 diff --git a/packages/lowcode-plugin-inject/package.json b/packages/lowcode-plugin-inject/package.json index f0c92d2..7e36ea2 100644 --- a/packages/lowcode-plugin-inject/package.json +++ b/packages/lowcode-plugin-inject/package.json @@ -1,7 +1,7 @@ { "name": "@alilc/lowcode-plugin-inject", "author": "ens", - "version": "1.2.0", + "version": "1.2.1", "description": "lowcode-plugin-inject", "main": "lib/index.js", "module": "es/index.js", @@ -26,6 +26,7 @@ "dependencies": { "@alifd/next": "^1.25.13", "@alilc/lowcode-engine": "^1.0.0", + "@alilc/lowcode-types": "^1.1.2", "@alilc/lowcode-utils": "^1.0.0", "case": "^1.6.3", "fetch-jsonp": "^1.2.1", @@ -35,7 +36,7 @@ "react": "^16.0.0" }, "devDependencies": { - "@alilc/build-plugin-alt": "beta", + "@alilc/build-plugin-alt": "^1.0.0", "@alib/build-scripts": "^0.1.32", "@alifd/theme-lowcode-light": "^0.2.1", "@recore/config": "^2.0.6", diff --git a/packages/lowcode-plugin-inject/src/index.tsx b/packages/lowcode-plugin-inject/src/index.tsx index 289bbc5..238fb78 100644 --- a/packages/lowcode-plugin-inject/src/index.tsx +++ b/packages/lowcode-plugin-inject/src/index.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import { ILowCodePluginContext, plugins, setters } from '@alilc/lowcode-engine'; +import { plugins, setters } from '@alilc/lowcode-engine'; +import { IPublicModelPluginContext, IPublicTypePlugin } from '@alilc/lowcode-types'; import { getInjectedResource, injectAssets, needInject, injectComponents, filterPackages, setInjectServerHost } from './utils'; import { Notification } from '@alifd/next'; @@ -7,7 +8,7 @@ import { Notification } from '@alifd/next'; let injectedPluginConfigMap = null; let injectedPlugins = []; -export async function getInjectedPlugin(name: string, ctx: ILowCodePluginContext) { +export async function getInjectedPlugin(name: string, ctx: IPublicModelPluginContext) { if (!injectedPluginConfigMap) { injectedPluginConfigMap = {}; injectedPlugins = await getInjectedResource('plugin'); @@ -18,6 +19,7 @@ export async function getInjectedPlugin(name: string, ctx: ILowCodePluginContext }); } } + if (name === undefined) return undefined; return injectedPluginConfigMap[name]; } @@ -25,7 +27,7 @@ interface IOptions { injectServerHost?: string; } -const Inject = (ctx: ILowCodePluginContext, options: IOptions = {}) => { +const Inject = (ctx: IPublicModelPluginContext, options: IOptions = {}) => { if (options?.injectServerHost) { setInjectServerHost(options.injectServerHost); } @@ -33,12 +35,16 @@ const Inject = (ctx: ILowCodePluginContext, options: IOptions = {}) => { if (needInject) { // 覆盖后续的插件注册逻辑，所有只有本插件后面注册的插件才可以支持 inject 逻辑 const originalRegister = plugins.register; - plugins.register = async function (plugin: any, pluginOptions: any, options: any) { - const pluginConfig = plugin(ctx, pluginOptions); - // return originalRegister.call(this, plugin, pluginOptions, options); - const injectedSameNamePlugin = await getInjectedPlugin(pluginConfig.name, ctx); + plugins.register = async function (plugin: IPublicTypePlugin, pluginOptions: any, options: any) { + let pluginName = plugin.pluginName; + if (!pluginName) { + const pluginConfig = plugin(ctx, pluginOptions); + // 兼容逻辑 + pluginName = (pluginConfig as any).name; + } + const injectedSameNamePlugin = await getInjectedPlugin(pluginName, ctx); if (injectedSameNamePlugin) { - injectedPluginConfigMap[pluginConfig.name] = null; + injectedPluginConfigMap[pluginName] = null; return originalRegister.call(this, injectedSameNamePlugin, pluginOptions, options); } else { return originalRegister.call(this, plugin, pluginOptions, options); From 028af6e6fccf5fbc8028095403ed2e0b254dc3f9 Mon Sep 17 00:00:00 2001 From: eternalsky Date: Mon, 20 Feb 2023 19:33:00 +0800 Subject: [PATCH 49/98] =?UTF-8?q?fix(lowcode-plugin-inject):=20=E7=BB=A7?= =?UTF-8?q?=E7=BB=AD=E5=85=BC=E5=AE=B9=E6=96=B0=E7=89=88=E6=8F=92=E4=BB=B6?= =?UTF-8?q?=20pluginName=20=E7=9A=84=E5=A3=B0=E6=98=8E=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/lowcode-plugin-inject/HISTORY.md | 3 +++ packages/lowcode-plugin-inject/package.json | 2 +- packages/lowcode-plugin-inject/src/index.tsx | 8 ++++++-- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/lowcode-plugin-inject/HISTORY.md b/packages/lowcode-plugin-inject/HISTORY.md index 128516a..b7dad52 100644 --- a/packages/lowcode-plugin-inject/HISTORY.md +++ b/packages/lowcode-plugin-inject/HISTORY.md @@ -1,3 +1,6 @@ +# 1.2.2 +* fix: 继续兼容新版插件 pluginName 的声明方式 + # 1.2.1 * fix: 兼容新版插件 pluginName 的声明方式 diff --git a/packages/lowcode-plugin-inject/package.json b/packages/lowcode-plugin-inject/package.json index 7e36ea2..08a8093 100644 --- a/packages/lowcode-plugin-inject/package.json +++ b/packages/lowcode-plugin-inject/package.json @@ -1,7 +1,7 @@ { "name": "@alilc/lowcode-plugin-inject", "author": "ens", - "version": "1.2.1", + "version": "1.2.2", "description": "lowcode-plugin-inject", "main": "lib/index.js", "module": "es/index.js", diff --git a/packages/lowcode-plugin-inject/src/index.tsx b/packages/lowcode-plugin-inject/src/index.tsx index 238fb78..c9e7f57 100644 --- a/packages/lowcode-plugin-inject/src/index.tsx +++ b/packages/lowcode-plugin-inject/src/index.tsx @@ -14,8 +14,12 @@ export async function getInjectedPlugin(name: string, ctx: IPublicModelPluginCon injectedPlugins = await getInjectedResource('plugin'); if (injectedPlugins && injectedPlugins.length > 0) { injectedPlugins.forEach((item: any) => { - const config = item.module(ctx); - injectedPluginConfigMap[config.name] = item.module; + let pluginName = item.module?.pluginName; + if (!pluginName) { + const config = item.module(ctx); + pluginName = config?.name; + } + injectedPluginConfigMap[pluginName] = item.module; }); } } From abb3c327a718415e65f94540fef82e58209c69ca Mon Sep 17 00:00:00 2001 From: eternalsky Date: Mon, 20 Feb 2023 19:41:50 +0800 Subject: [PATCH 50/98] =?UTF-8?q?fix(build-plugin-alt):=20=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=E9=BB=98=E8=AE=A4=E6=89=93=E5=BC=80=E6=B5=8F=E8=A7=88?= =?UTF-8?q?=E5=99=A8=E5=9C=B0=E5=9D=80=EF=BC=8C=E4=BF=AE=E5=A4=8D=E4=B8=A2?= =?UTF-8?q?=E5=A4=B1=20debug=20=E5=8F=82=E6=95=B0=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/build-plugin-alt/CHANGELOG.md | 4 ++++ packages/build-plugin-alt/package.json | 2 +- packages/build-plugin-alt/src/index.ts | 2 +- 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/build-plugin-alt/CHANGELOG.md b/packages/build-plugin-alt/CHANGELOG.md index b02461a..7f5f6f7 100644 --- a/packages/build-plugin-alt/CHANGELOG.md +++ b/packages/build-plugin-alt/CHANGELOG.md @@ -1,5 +1,9 @@ # Changelog +## 1.3.2 + +- `fix` 修改默认打开浏览器地址，修复丢失 debug 参数问题 + ## 1.3.1 - `fix` 启动时报找不到 moment diff --git a/packages/build-plugin-alt/package.json b/packages/build-plugin-alt/package.json index d8221c6..c9cdbd7 100644 --- a/packages/build-plugin-alt/package.json +++ b/packages/build-plugin-alt/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/build-plugin-alt", - "version": "1.3.1", + "version": "1.3.2", "description": "build-scripts plugin template for developers", "main": "lib/index.js", "files": [ diff --git a/packages/build-plugin-alt/src/index.ts b/packages/build-plugin-alt/src/index.ts index 6722492..27627e6 100644 --- a/packages/build-plugin-alt/src/index.ts +++ b/packages/build-plugin-alt/src/index.ts @@ -84,7 +84,7 @@ const plugin: IPlugin = ({ context, registerTask, onGetWebpackConfig, onHook, lo if (openUrl) { openBrowser(openUrl); } else { - openBrowser('https://lowcode-engine.cn/demo/index.html?debug'); + openBrowser('https://lowcode-engine.cn/demo/demo-general/index.html?debug'); } } else { openBrowser(openUrl || url); From 8927db53b5a46d225b489235720a5b9e1be7b545 Mon Sep 17 00:00:00 2001 From: eternalsky Date: Thu, 16 Mar 2023 14:28:27 +0800 Subject: [PATCH 51/98] chore(release): 0.3.9 --- packages/build-plugin-lowcode/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/build-plugin-lowcode/package.json b/packages/build-plugin-lowcode/package.json index a2464c2..704fc69 100644 --- a/packages/build-plugin-lowcode/package.json +++ b/packages/build-plugin-lowcode/package.json @@ -1,6 +1,6 @@ { "name": "@alifd/build-plugin-lowcode", - "version": "0.3.8", + "version": "0.3.9", "description": "build plugin for component-to-lowcode", "main": "src/index.js", "keywords": [ From 6a6254407f46dfb30f050ee9c1d52656907345e0 Mon Sep 17 00:00:00 2001 From: JackLian Date: Fri, 24 Mar 2023 16:06:25 +0800 Subject: [PATCH 52/98] feat: upgrade editor template --- packages/template-editor/package.json | 4 +- packages/template-editor/proj/package.json | 22 +- .../template-editor/proj/public/index.ejs | 4 +- .../template-editor/proj/src/appHelper.ts | 2 +- packages/template-editor/proj/src/index.ts | 13 +- .../plugins/plugin-component-panel/index.tsx | 6 +- .../plugin-custom-setter-sample/index.tsx | 19 + .../setters/behavior-setter.tsx | 27 + .../setters/custom-setter.tsx | 13 + .../plugin-default-setters-registry/index.tsx | 6 +- .../src/plugins/plugin-editor-init/index.tsx | 6 +- .../index.tsx | 4 +- .../src/plugins/plugin-logo-sample/index.tsx | 4 +- .../plugins/plugin-lowcode-component/index.ts | 29 + .../lowcode-schema.json | 342 ++++++++ .../plugins/plugin-preview-sample/index.tsx | 7 +- .../src/plugins/plugin-save-sample/index.tsx | 4 +- .../plugins/plugin-simulator-locale/index.tsx | 4 +- packages/template-editor/proj/src/preview.tsx | 23 +- .../proj/src/services/assets.json | 63 +- .../proj/src/services/defaultPageSchema.json | 783 +++++++++--------- .../proj/src/services/mockService.ts | 15 +- 22 files changed, 910 insertions(+), 490 deletions(-) create mode 100644 packages/template-editor/proj/src/plugins/plugin-custom-setter-sample/index.tsx create mode 100644 packages/template-editor/proj/src/plugins/plugin-custom-setter-sample/setters/behavior-setter.tsx create mode 100644 packages/template-editor/proj/src/plugins/plugin-custom-setter-sample/setters/custom-setter.tsx create mode 100644 packages/template-editor/proj/src/plugins/plugin-lowcode-component/index.ts create mode 100644 packages/template-editor/proj/src/plugins/plugin-lowcode-component/lowcode-schema.json diff --git a/packages/template-editor/package.json b/packages/template-editor/package.json index 25ec269..48babce 100644 --- a/packages/template-editor/package.json +++ b/packages/template-editor/package.json @@ -1,7 +1,7 @@ { "name": "@alilc/lowcode-template-editor", - "version": "1.0.4", - "description": "Ali lowCode engine editor template", + "version": "1.0.5", + "description": "LowCodeEngine editor template", "main": "index.js", "scripts": { "pub": "npm publish", diff --git a/packages/template-editor/proj/package.json b/packages/template-editor/proj/package.json index 21f798a..a4df143 100644 --- a/packages/template-editor/proj/package.json +++ b/packages/template-editor/proj/package.json @@ -19,30 +19,27 @@ "@alilc/lowcode-datasource-fetch-handler": "^1.0.1", "@alilc/lowcode-plugin-code-editor": "^1.0.3", "@alilc/lowcode-plugin-code-generator": "^1.0.4", - "@alilc/lowcode-plugin-components-pane": "^1.0.2", - "@alilc/lowcode-plugin-datasource-pane": "^1.0.6", - "@alilc/lowcode-plugin-inject": "^1.0.0", - "@alilc/lowcode-plugin-manual": "^1.0.3", + "@alilc/lowcode-plugin-components-pane": "^1.0.4", + "@alilc/lowcode-plugin-datasource-pane": "^1.0.9", + "@alilc/lowcode-plugin-inject": "^1.2.1", + "@alilc/lowcode-plugin-manual": "^1.0.4", "@alilc/lowcode-plugin-schema": "^1.0.2", "@alilc/lowcode-plugin-simulator-select": "^1.0.2", "@alilc/lowcode-plugin-undo-redo": "^1.0.0", "@alilc/lowcode-plugin-zh-en": "^1.0.0", "@alilc/lowcode-plugin-set-ref-prop": "^1.0.1", - "@alilc/lowcode-react-renderer": "^1.0.0", + "@alilc/lowcode-react-renderer": "^1.1.2", "@alilc/lowcode-setter-behavior": "^1.0.0", "@alilc/lowcode-setter-title": "^1.0.2", - "@formily/antd": "^2.1.9", - "@formily/core": "^2.1.9", - "@formily/react": "^2.1.9", "antd": "^4.21.4", "moment": "^2.29.3", "uuid": "^8.3.2" }, "devDependencies": { "@alib/build-scripts": "^0.1.18", - "@alilc/lowcode-engine": "^1.0.0", - "@alilc/lowcode-engine-ext": "^1.0.0", - "@alilc/lowcode-types": "^1.0.0", + "@alilc/lowcode-engine": "^1.1.4", + "@alilc/lowcode-engine-ext": "^1.0.5", + "@alilc/lowcode-types": "^1.1.4", "@types/events": "^3.0.0", "@types/react": "^16.8.3", "@types/react-dom": "^16.8.2", @@ -53,5 +50,8 @@ "build-plugin-react-app": "^1.1.2", "fs-extra": "^10.0.1", "tsconfig-paths-webpack-plugin": "^3.2.0" + }, + "resolutions": { + "@babel/core": "7.20.12" } } diff --git a/packages/template-editor/proj/public/index.ejs b/packages/template-editor/proj/public/index.ejs index 2a0a733..b4efc26 100644 --- a/packages/template-editor/proj/public/index.ejs +++ b/packages/template-editor/proj/public/index.ejs @@ -11,7 +11,7 @@ - + @@ -29,7 +29,7 @@ - + diff --git a/packages/template-editor/proj/src/appHelper.ts b/packages/template-editor/proj/src/appHelper.ts index b2530a2..699f28a 100644 --- a/packages/template-editor/proj/src/appHelper.ts +++ b/packages/template-editor/proj/src/appHelper.ts @@ -1,4 +1,4 @@ -import { createFetchHandler } from '@alilc/lowcode-datasource-fetch-handler' +import { createFetchHandler } from '@alilc/lowcode-datasource-fetch-handler'; const appHelper = { requestHandlersMap: { fetch: createFetchHandler() diff --git a/packages/template-editor/proj/src/index.ts b/packages/template-editor/proj/src/index.ts index 12ec053..5ab61e3 100644 --- a/packages/template-editor/proj/src/index.ts +++ b/packages/template-editor/proj/src/index.ts @@ -15,13 +15,17 @@ import DefaultSettersRegistryPlugin from './plugins/plugin-default-setters-regis import LoadIncrementalAssetsWidgetPlugin from './plugins/plugin-load-incremental-assets-widget'; import SaveSamplePlugin from './plugins/plugin-save-sample'; import PreviewSamplePlugin from './plugins/plugin-preview-sample'; +import CustomSetterSamplePlugin from './plugins/plugin-custom-setter-sample'; import SetRefPropPlugin from '@alilc/lowcode-plugin-set-ref-prop'; import LogoSamplePlugin from './plugins/plugin-logo-sample'; import SimulatorLocalePlugin from './plugins/plugin-simulator-locale'; +import lowcodePlugin from './plugins/plugin-lowcode-component'; import appHelper from './appHelper'; import './global.scss'; async function registerPlugins() { + await plugins.register(InjectPlugin); + await plugins.register(EditorInitPlugin, { scenarioName: 'general', displayName: '综合场景', @@ -43,8 +47,6 @@ async function registerPlugins() { }, }); - await plugins.register(InjectPlugin); - // 设置内置 setter 和事件绑定、插件绑定面板 await plugins.register(DefaultSettersRegistryPlugin); @@ -68,8 +70,7 @@ async function registerPlugins() { await plugins.register(LoadIncrementalAssetsWidgetPlugin); - - // 插件参数声明 & 传递，参考：https://lowcode-engine.cn/site/docs/api/plugins#设置插件参数版本示例 + // 插件参数声明 & 传递，参考：https://lowcode-engine.cn/site/docs/api/plugins#%E8%AE%BE%E7%BD%AE%E6%8F%92%E4%BB%B6%E5%8F%82%E6%95%B0%E7%89%88%E6%9C%AC%E7%A4%BA%E4%BE%8B await plugins.register(DataSourcePanePlugin, { importPlugins: [], dataSourceTypes: [ @@ -91,8 +92,12 @@ async function registerPlugins() { await plugins.register(PreviewSamplePlugin); + await plugins.register(CustomSetterSamplePlugin); + // 设计器区域多语言切换 await plugins.register(SimulatorLocalePlugin); + + await plugins.register(lowcodePlugin); }; (async function main() { diff --git a/packages/template-editor/proj/src/plugins/plugin-component-panel/index.tsx b/packages/template-editor/proj/src/plugins/plugin-component-panel/index.tsx index 42c3a91..0285eb9 100644 --- a/packages/template-editor/proj/src/plugins/plugin-component-panel/index.tsx +++ b/packages/template-editor/proj/src/plugins/plugin-component-panel/index.tsx @@ -1,9 +1,9 @@ -import { ILowCodePluginContext, project } from '@alilc/lowcode-engine'; +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; import ComponentsPane from '@alilc/lowcode-plugin-components-pane'; -const ComponentPanelPlugin = (ctx: ILowCodePluginContext) => { +const ComponentPanelPlugin = (ctx: IPublicModelPluginContext) => { return { async init() { - const { skeleton } = ctx; + const { skeleton, project } = ctx; // 注册组件面板 const componentsPane = skeleton.add({ area: 'leftArea', diff --git a/packages/template-editor/proj/src/plugins/plugin-custom-setter-sample/index.tsx b/packages/template-editor/proj/src/plugins/plugin-custom-setter-sample/index.tsx new file mode 100644 index 0000000..8eefcd0 --- /dev/null +++ b/packages/template-editor/proj/src/plugins/plugin-custom-setter-sample/index.tsx @@ -0,0 +1,19 @@ +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; +import TitleSetter from '@alilc/lowcode-setter-title'; +import BehaviorSetter from './setters/behavior-setter'; +import CustomSetter from './setters/custom-setter'; + +// 保存功能示例 +const CustomSetterSamplePlugin = (ctx: IPublicModelPluginContext) => { + return { + async init() { + const { setters } = ctx; + + setters.registerSetter('TitleSetter', TitleSetter); + setters.registerSetter('BehaviorSetter', BehaviorSetter); + setters.registerSetter('CustomSetter', CustomSetter); + }, + }; +} +CustomSetterSamplePlugin.pluginName = 'CustomSetterSamplePlugin'; +export default CustomSetterSamplePlugin; \ No newline at end of file diff --git a/packages/template-editor/proj/src/plugins/plugin-custom-setter-sample/setters/behavior-setter.tsx b/packages/template-editor/proj/src/plugins/plugin-custom-setter-sample/setters/behavior-setter.tsx new file mode 100644 index 0000000..34e9be5 --- /dev/null +++ b/packages/template-editor/proj/src/plugins/plugin-custom-setter-sample/setters/behavior-setter.tsx @@ -0,0 +1,27 @@ +import * as React from 'react'; +import BehaviorSetter from '@alilc/lowcode-setter-behavior'; + + +const defaultExtraBehaviorActions: any[] = []; +class LocalBehaviorSetter extends React.Component { + render() { + // ignore url && responseFormatter props, use default ones + const { url: propsUrl, responseFormatter: propsFormatter, extraBehaviorActions: propsExtraBehaviorActions = [], ...otherProps } = this.props; + const url = 'https://hn.algolia.com/api/v1/search?query'; + const responseFormatter = (response) => response.hits.map((item) => ({ + label: item.title, + value: item.author + })); + const extraBehaviorActions = propsExtraBehaviorActions.concat(defaultExtraBehaviorActions); + return ( + + ); + } +} + +export default LocalBehaviorSetter; \ No newline at end of file diff --git a/packages/template-editor/proj/src/plugins/plugin-custom-setter-sample/setters/custom-setter.tsx b/packages/template-editor/proj/src/plugins/plugin-custom-setter-sample/setters/custom-setter.tsx new file mode 100644 index 0000000..9fe9d51 --- /dev/null +++ b/packages/template-editor/proj/src/plugins/plugin-custom-setter-sample/setters/custom-setter.tsx @@ -0,0 +1,13 @@ +import React, { Component } from 'react'; +// import classNames from 'classnames'; + +class CustomSetter extends Component { + render() { + const { defaultValue, value, onChange } = this.props; + const { editor } = this.props.field; + + return
hello world
; + } +} + +export default CustomSetter; diff --git a/packages/template-editor/proj/src/plugins/plugin-default-setters-registry/index.tsx b/packages/template-editor/proj/src/plugins/plugin-default-setters-registry/index.tsx index 95de13c..7ab0789 100644 --- a/packages/template-editor/proj/src/plugins/plugin-default-setters-registry/index.tsx +++ b/packages/template-editor/proj/src/plugins/plugin-default-setters-registry/index.tsx @@ -1,13 +1,13 @@ -import { ILowCodePluginContext } from '@alilc/lowcode-engine'; +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; import AliLowCodeEngineExt from '@alilc/lowcode-engine-ext'; // 设置内置 setter 和事件绑定、插件绑定面板 -const DefaultSettersRegistryPlugin = (ctx: ILowCodePluginContext) => { +const DefaultSettersRegistryPlugin = (ctx: IPublicModelPluginContext) => { return { async init() { const { setterMap, pluginMap } = AliLowCodeEngineExt; const { setters, skeleton } = ctx; - // 注册setterMap + // 注册 setterMap setters.registerSetter(setterMap); // 注册插件 // 注册事件绑定面板 diff --git a/packages/template-editor/proj/src/plugins/plugin-editor-init/index.tsx b/packages/template-editor/proj/src/plugins/plugin-editor-init/index.tsx index 767dd71..2ffe649 100644 --- a/packages/template-editor/proj/src/plugins/plugin-editor-init/index.tsx +++ b/packages/template-editor/proj/src/plugins/plugin-editor-init/index.tsx @@ -1,15 +1,15 @@ -import { ILowCodePluginContext } from '@alilc/lowcode-engine'; +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; import { injectAssets } from '@alilc/lowcode-plugin-inject'; import assets from '../../services/assets.json'; import { getProjectSchema } from '../../services/mockService'; -const EditorInitPlugin = (ctx: ILowCodePluginContext, options: any) => { +const EditorInitPlugin = (ctx: IPublicModelPluginContext, options: any) => { return { async init() { const { material, project, config } = ctx; const scenarioName = options['scenarioName']; const scenarioDisplayName = options['displayName'] || scenarioName; const scenarioInfo = options['info'] || {}; - // 保存在config中用于引擎范围其他插件使用 + // 保存在 config 中用于引擎范围其他插件使用 config.set('scenarioName', scenarioName); config.set('scenarioDisplayName', scenarioDisplayName); config.set('scenarioInfo', scenarioInfo); diff --git a/packages/template-editor/proj/src/plugins/plugin-load-incremental-assets-widget/index.tsx b/packages/template-editor/proj/src/plugins/plugin-load-incremental-assets-widget/index.tsx index 0b0bb9d..015182d 100644 --- a/packages/template-editor/proj/src/plugins/plugin-load-incremental-assets-widget/index.tsx +++ b/packages/template-editor/proj/src/plugins/plugin-load-incremental-assets-widget/index.tsx @@ -1,4 +1,4 @@ -import { ILowCodePluginContext } from '@alilc/lowcode-engine'; +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; import { Button } from '@alifd/next'; import { material } from '@alilc/lowcode-engine'; import { Message } from '@alifd/next'; @@ -144,7 +144,7 @@ const loadIncrementalAssets = () => { ], }); }; -const LoadIncrementalAssetsWidgetPlugin = (ctx: ILowCodePluginContext) => { +const LoadIncrementalAssetsWidgetPlugin = (ctx: IPublicModelPluginContext) => { return { async init() { const { skeleton } = ctx; diff --git a/packages/template-editor/proj/src/plugins/plugin-logo-sample/index.tsx b/packages/template-editor/proj/src/plugins/plugin-logo-sample/index.tsx index 7e4c337..6ffc2b9 100644 --- a/packages/template-editor/proj/src/plugins/plugin-logo-sample/index.tsx +++ b/packages/template-editor/proj/src/plugins/plugin-logo-sample/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { ILowCodePluginContext } from '@alilc/lowcode-engine'; +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; import { Dropdown, Menu } from '@alifd/next'; import './index.scss'; export interface IProps { @@ -44,7 +44,7 @@ const Logo: React.FC = (props): React.ReactElement => { ); }; // 示例 Logo widget -const LogoSamplePlugin = (ctx: ILowCodePluginContext) => { +const LogoSamplePlugin = (ctx: IPublicModelPluginContext) => { return { async init() { const { skeleton, config } = ctx; diff --git a/packages/template-editor/proj/src/plugins/plugin-lowcode-component/index.ts b/packages/template-editor/proj/src/plugins/plugin-lowcode-component/index.ts new file mode 100644 index 0000000..48089ba --- /dev/null +++ b/packages/template-editor/proj/src/plugins/plugin-lowcode-component/index.ts @@ -0,0 +1,29 @@ +import { IPublicModelPluginContext } from "@alilc/lowcode-types"; +import lowcodeSchema from './lowcode-schema.json' + +const lowcodePlugin = (ctx: IPublicModelPluginContext) => { + return { + async init() { + const { material } = ctx; + material.loadIncrementalAssets({ + version: '', + components: [{ + devMode: 'lowCode', + componentName: 'LowcodeDemo', + title: '低代码组件示例', + group: '低代码组件', + schema: lowcodeSchema as any, + snippets: [{ + schema: { + componentName: 'LowcodeDemo' + }, + }] + }], + }) + }, + }; +} +lowcodePlugin.pluginName = 'lowcodePlugin'; +lowcodePlugin.meta = { +}; +export default lowcodePlugin; \ No newline at end of file diff --git a/packages/template-editor/proj/src/plugins/plugin-lowcode-component/lowcode-schema.json b/packages/template-editor/proj/src/plugins/plugin-lowcode-component/lowcode-schema.json new file mode 100644 index 0000000..7415f21 --- /dev/null +++ b/packages/template-editor/proj/src/plugins/plugin-lowcode-component/lowcode-schema.json @@ -0,0 +1,342 @@ +{ + "version": "1.0.0", + "componentsMap": [ + ], + "componentsTree": [ + { + "componentName": "Component", + "id": "node_dockcviv8fo1", + "props": { + "ref": "outerView", + "style": { + "height": "100%" + } + }, + "docId": "doclaqkk3b9", + "fileName": "/", + "dataSource": { + "list": [ + { + "type": "fetch", + "isInit": true, + "options": { + "params": {}, + "method": "GET", + "isCors": true, + "timeout": 5000, + "headers": {}, + "uri": "mock/info.json" + }, + "id": "info", + "shouldFetch": { + "type": "JSFunction", + "value": "function() { \n console.log('should fetch.....');\n return true; \n}" + } + } + ] + }, + "state": { + "text": { + "type": "JSExpression", + "value": "\"outer\"" + }, + "isShowDialog": { + "type": "JSExpression", + "value": "false" + } + }, + "css": "body {\n font-size: 12px;\n}\n\n.button {\n width: 100px;\n color: #ff00ff\n}", + "lifeCycles": { + "componentDidMount": { + "type": "JSFunction", + "value": "function componentDidMount() {\n console.log('did mount');\n}" + }, + "componentWillUnmount": { + "type": "JSFunction", + "value": "function componentWillUnmount() {\n console.log('will unmount');\n}" + } + }, + "methods": { + "testFunc": { + "type": "JSFunction", + "value": "function testFunc() {\n console.log('test func');\n}" + }, + "onClick": { + "type": "JSFunction", + "value": "function onClick() {\n this.setState({\n isShowDialog: true\n });\n}" + }, + "closeDialog": { + "type": "JSFunction", + "value": "function closeDialog() {\n this.setState({\n isShowDialog: false\n });\n}" + }, + "getHelloWorldText": { + "type": "JSFunction", + "value": "function getHelloWorldText() {\n return this.i18n('i18n-jwg27yo4');\n}" + }, + "getHelloWorldText2": { + "type": "JSFunction", + "value": "function getHelloWorldText2() {\n return this.i18n('i18n-jwg27yo3', {\n name: '絮黎'\n });\n}" + }, + "onTestConstantsButtonClicked": { + "type": "JSFunction", + "value": "function onTestConstantsButtonClicked() {\n console.log('constants.ConstantA:', this.constants.ConstantA);\n console.log('constants.ConstantB:', this.constants.ConstantB);\n}" + }, + "onTestUtilsButtonClicked": { + "type": "JSFunction", + "value": "function onTestUtilsButtonClicked() {\n this.utils.demoUtil('param1', 'param2');\n}" + } + }, + "originCode": "class LowcodeComponent extends Component {\n state = {\n \"text\": \"outer\",\n \"isShowDialog\": false\n }\n componentDidMount() {\n console.log('did mount');\n }\n componentWillUnmount() {\n console.log('will unmount');\n }\n testFunc() {\n console.log('test func');\n }\n onClick() {\n this.setState({\n isShowDialog: true\n });\n }\n closeDialog() {\n this.setState({\n isShowDialog: false\n });\n }\n getHelloWorldText() {\n return this.i18n('i18n-jwg27yo4');\n }\n getHelloWorldText2() {\n return this.i18n('i18n-jwg27yo3', {\n name: '絮黎',\n });\n }\n onTestConstantsButtonClicked() {\n console.log('constants.ConstantA:', this.constants.ConstantA);\n console.log('constants.ConstantB:', this.constants.ConstantB);\n\t}\n\tonTestUtilsButtonClicked(){\n this.utils.demoUtil('param1', 'param2');\n\t}\n}", + "hidden": false, + "title": "", + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextRowColContainer", + "id": "node_oclawu71ac3", + "docId": "doclawu75i0", + "props": { + "rowGap": 20, + "colGap": 20 + }, + "title": "行列容器", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextRow", + "id": "node_oclawu71ac4", + "docId": "doclawu75i0", + "props": {}, + "title": "行", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextCol", + "id": "node_oclawu71ac5", + "docId": "doclawu75i0", + "props": { + "colSpan": 1 + }, + "title": "列", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextP", + "id": "node_oclawu71ac3n", + "docId": "doclawu71ac", + "props": { + "wrap": false, + "type": "body2", + "verAlign": "middle", + "textSpacing": true, + "align": "left", + "prefix": "", + "full": false, + "flex": false + }, + "title": "段落", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "Button", + "id": "node_oclawu71ac3o", + "docId": "doclawu71ac", + "props": { + "prefix": "next-", + "type": "primary", + "size": "medium", + "htmlType": "button", + "component": "button", + "children": "constants", + "iconSize": "xxs", + "loading": false, + "text": false, + "warning": false, + "disabled": false, + "ref": "button-4951c2d3", + "__events": { + "eventDataList": [ + { + "type": "componentEvent", + "name": "onClick", + "relatedEventName": "onTestConstantsButtonClicked" + } + ], + "eventList": [ + { + "name": "onClick", + "description": "点击按钮的回调\n@param {Object} e Event Object", + "disabled": true + }, + { + "name": "onMouseUp", + "disabled": false + } + ] + }, + "onClick": { + "type": "JSFunction", + "value": "function(){this.onTestConstantsButtonClicked.apply(this,Array.prototype.slice.call(arguments).concat([])) }" + } + }, + "hidden": false, + "title": "", + "isLocked": false, + "condition": true, + "conditionGroup": "" + }, + { + "componentName": "Button", + "id": "node_oclawu71ac3p", + "docId": "doclawu71ac", + "props": { + "prefix": "next-", + "type": "primary", + "size": "medium", + "htmlType": "button", + "component": "button", + "children": "utils", + "iconSize": "xxs", + "loading": false, + "text": false, + "warning": false, + "disabled": false, + "__events": { + "eventDataList": [ + { + "type": "componentEvent", + "name": "onClick", + "relatedEventName": "onTestUtilsButtonClicked" + } + ], + "eventList": [ + { + "name": "onClick", + "description": "点击按钮的回调\n@param {Object} e Event Object", + "disabled": true + }, + { + "name": "onMouseUp", + "disabled": false + } + ] + }, + "onClick": { + "type": "JSFunction", + "value": "function(){this.onTestUtilsButtonClicked.apply(this,Array.prototype.slice.call(arguments).concat([])) }" + } + }, + "hidden": false, + "title": "", + "isLocked": false, + "condition": true, + "conditionGroup": "" + } + ] + } + ] + } + ] + } + ] + }, + { + "componentName": "NextP", + "id": "node_oclaqjdn9qv", + "docId": "doclaqjdn9q", + "props": { + "wrap": false, + "type": "body2", + "verAlign": "middle", + "textSpacing": true, + "align": "left", + "prefix": "", + "full": false, + "flex": false + }, + "title": "段落", + "hidden": false, + "isLocked": false, + "condition": true, + "conditionGroup": "", + "children": [ + { + "componentName": "NextText", + "id": "node_oclaqjdn9qw", + "docId": "doclaqjdn9q", + "props": { + "type": "h5", + "children": { + "type": "JSExpression", + "value": "this.getHelloWorldText()", + "mock": "标题标题" + }, + "prefix": "", + "classname": "", + "mark": false, + "code": false, + "delete": false, + "underline": false, + "strong": false + }, + "hidden": false, + "title": "", + "isLocked": false, + "condition": true, + "conditionGroup": "" + }, + { + "componentName": "NextText", + "id": "node_oclarv0wja2", + "docId": "doclarv56xh", + "props": { + "type": "h5", + "children": { + "type": "JSExpression", + "value": "this.getHelloWorldText2()", + "mock": "另一个i18n" + }, + "prefix": "", + "classname": "", + "mark": false, + "code": false, + "delete": false, + "underline": false, + "strong": false + }, + "hidden": false, + "title": "", + "isLocked": false, + "condition": true, + "conditionGroup": "" + } + ] + } + ] + } + ], + "i18n": { + "zh-CN": { + "i18n-jwg27yo4": "你好 ", + "i18n-jwg27yo3": "{name} 博士" + }, + "en-US": { + "i18n-jwg27yo4": "Hello ", + "i18n-jwg27yo3": "Doctor {name}" + } + } +} \ No newline at end of file diff --git a/packages/template-editor/proj/src/plugins/plugin-preview-sample/index.tsx b/packages/template-editor/proj/src/plugins/plugin-preview-sample/index.tsx index 65f6c32..38cd0cf 100644 --- a/packages/template-editor/proj/src/plugins/plugin-preview-sample/index.tsx +++ b/packages/template-editor/proj/src/plugins/plugin-preview-sample/index.tsx @@ -1,18 +1,17 @@ -import { ILowCodePluginContext } from '@alilc/lowcode-engine'; +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; import { Button } from '@alifd/next'; import { saveSchema, } from '../../services/mockService'; // 保存功能示例 -const PreviewSamplePlugin = (ctx: ILowCodePluginContext) => { +const PreviewSamplePlugin = (ctx: IPublicModelPluginContext) => { return { async init() { const { skeleton, config } = ctx; const doPreview = () => { const scenarioName = config.get('scenarioName'); - console.log('go preview with scenarioName:',scenarioName ); - saveSchema(scenarioName);; + saveSchema(scenarioName); setTimeout(() => { const search = location.search ? `${location.search}&scenarioName=${scenarioName}` : `?scenarioName=${scenarioName}`; window.open(`./preview.html${search}`); diff --git a/packages/template-editor/proj/src/plugins/plugin-save-sample/index.tsx b/packages/template-editor/proj/src/plugins/plugin-save-sample/index.tsx index d347aa3..8785c67 100644 --- a/packages/template-editor/proj/src/plugins/plugin-save-sample/index.tsx +++ b/packages/template-editor/proj/src/plugins/plugin-save-sample/index.tsx @@ -1,4 +1,4 @@ -import { ILowCodePluginContext } from '@alilc/lowcode-engine'; +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; import { Button } from '@alifd/next'; import { saveSchema, @@ -6,7 +6,7 @@ import { } from '../../services/mockService'; // 保存功能示例 -const SaveSamplePlugin = (ctx: ILowCodePluginContext) => { +const SaveSamplePlugin = (ctx: IPublicModelPluginContext) => { return { async init() { const { skeleton, hotkey, config } = ctx; diff --git a/packages/template-editor/proj/src/plugins/plugin-simulator-locale/index.tsx b/packages/template-editor/proj/src/plugins/plugin-simulator-locale/index.tsx index d26aab7..d47c0ab 100644 --- a/packages/template-editor/proj/src/plugins/plugin-simulator-locale/index.tsx +++ b/packages/template-editor/proj/src/plugins/plugin-simulator-locale/index.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { ILowCodePluginContext } from '@alilc/lowcode-engine'; +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; import { Select } from '@alifd/next'; const Option = Select.Option; @@ -27,7 +27,7 @@ const LocaleSelect: React.FC = (props): React.ReactElement => { ); }; // 画布区域语言切换 -const SimulatorLocalePlugin = (ctx: ILowCodePluginContext) => { +const SimulatorLocalePlugin = (ctx: IPublicModelPluginContext) => { return { async init() { const { project, skeleton } = ctx; diff --git a/packages/template-editor/proj/src/preview.tsx b/packages/template-editor/proj/src/preview.tsx index 2b62f36..97d8c0a 100644 --- a/packages/template-editor/proj/src/preview.tsx +++ b/packages/template-editor/proj/src/preview.tsx @@ -1,6 +1,8 @@ import ReactDOM from 'react-dom'; import React, { useState } from 'react'; import { Loading } from '@alifd/next'; +import mergeWith from 'lodash/mergeWith'; +import isArray from 'lodash/isArray'; import { buildComponents, assetBundle, AssetLevel, AssetLoader } from '@alilc/lowcode-utils'; import ReactRenderer from '@alilc/lowcode-react-renderer'; import { injectComponents } from '@alilc/lowcode-plugin-inject'; @@ -21,7 +23,12 @@ const SamplePreview = () => { const scenarioName = getScenarioName(); const packages = getPackagesFromLocalStorage(scenarioName); const projectSchema = getProjectSchemaFromLocalStorage(scenarioName); - const { componentsMap: componentsMapArray, componentsTree , i18n} = projectSchema; + const { + componentsMap: componentsMapArray, + componentsTree, + i18n, + dataSource: projectDataSource, + } = projectSchema; const componentsMap: any = {}; componentsMapArray.forEach((component: any) => { componentsMap[component.componentName] = component; @@ -50,10 +57,11 @@ const SamplePreview = () => { schema: pageSchema, components, i18n, + projectDataSource, }); } - const { schema, components, i18n = {} } = data as any; + const { schema, components, i18n = {}, projectDataSource = {} } = data as any; if (!schema || !components) { init(); @@ -67,11 +75,20 @@ const SamplePreview = () => { (window as any).setPreviewLocale = (locale:string) => setPreviewLocale(getScenarioName(), locale); } + function customizer(objValue: [], srcValue: []) { + if (isArray(objValue)) { + return objValue.concat(srcValue || []); + } + } + return (
{ +const generateProjectSchema = (pageSchema: any, i18nSchema: any): IPublicTypeProjectSchema => { return { componentsTree: [pageSchema], componentsMap: material.componentsMap as any, @@ -17,7 +17,7 @@ const generateProjectSchema = (pageSchema: any, i18nSchema: any): ProjectSchema export const saveSchema = async (scenarioName: string = 'unknown') => { setProjectSchemaToLocalStorage(scenarioName); - await setPackgesToLocalStorage(scenarioName); + await setPackagesToLocalStorage(scenarioName); Message.success('成功保存到本地'); }; @@ -43,7 +43,7 @@ export const resetSchema = async (scenarioName: string = 'unknown') => { project.simulatorHost?.rerender(); setProjectSchemaToLocalStorage(scenarioName); - await setPackgesToLocalStorage(scenarioName); + await setPackagesToLocalStorage(scenarioName); Message.success('成功重置页面'); } @@ -68,11 +68,11 @@ const setProjectSchemaToLocalStorage = (scenarioName: string) => { } window.localStorage.setItem( getLSName(scenarioName), - JSON.stringify(project.exportSchema(TransformStage.Save)) + JSON.stringify(project.exportSchema(IPublicEnumTransformStage.Save)) ); } -const setPackgesToLocalStorage = async (scenarioName: string) => { +const setPackagesToLocalStorage = async (scenarioName: string) => { if (!scenarioName) { console.error('scenarioName is required!'); return; @@ -92,7 +92,7 @@ export const getPackagesFromLocalStorage = (scenarioName: string) => { return JSON.parse(window.localStorage.getItem(getLSName(scenarioName, 'packages')) || '{}'); } -export const getProjectSchema = async (scenarioName: string = 'unknown') : Promise => { +export const getProjectSchema = async (scenarioName: string = 'unknown') : Promise => { const pageSchema = await getPageSchema(scenarioName); return generateProjectSchema(pageSchema, DefaultI18nSchema); }; @@ -103,7 +103,6 @@ export const getPageSchema = async (scenarioName: string = 'unknown') => { return pageSchema; } - console.log(`failed to get page schema for scenarioName ${scenarioName} from localstorage, use default page schema`, DefaultPageSchema); return DefaultPageSchema; }; From 7188559654c1ddbc711d9180b00a340b4879b783 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=87=91=E7=A6=85?= Date: Sat, 25 Mar 2023 15:41:57 +0800 Subject: [PATCH 53/98] feat: add template-material --- packages/create-element/package.json | 2 +- packages/create-element/src/component.ts | 16 +-- .../.editorconfig | 13 +++ .../.eslintignore | 1 + .../.eslintrc.js | 6 + .../.gitignore | 18 +++ .../.prettierrc.js | 8 ++ .../rax-multiple-component-template/README.md | 1 + .../commitlint.config.js | 3 + .../f2elint.config.js | 5 + .../package.json | 27 +++++ .../projectTemplate/.commitlintrc | 25 ++++ .../projectTemplate/.editorconfig | 13 +++ .../projectTemplate/.eslintignore | 10 ++ .../projectTemplate/.eslintrc.js | 7 ++ .../projectTemplate/.gitignore | 98 ++++++++++++++++ .../projectTemplate/.markdownlint.json | 3 + .../projectTemplate/.markdownlintignore | 4 + .../projectTemplate/.npmignore | 3 + .../projectTemplate/.prettierignore | 13 +++ .../projectTemplate/.prettierrc.js | 8 ++ .../projectTemplate/.stylelintignore | 11 ++ .../projectTemplate/.stylelintrc.js | 3 + .../projectTemplate/CHANGELOG.md | 0 .../projectTemplate/README.md | 17 +++ .../projectTemplate/_gitignore | 101 +++++++++++++++++ .../projectTemplate/_npmignore | 3 + .../projectTemplate/build.json | 17 +++ .../projectTemplate/build.lowcode.js | 17 +++ .../projectTemplate/commitlint.config.js | 3 + .../docs/example-component/README.md | 9 ++ .../docs/example-component/demo/basic.jsx | 12 ++ .../projectTemplate/f2elint.config.js | 5 + .../projectTemplate/package.json | 94 +++++++++++++++ .../example-component/component.tsx | 38 +++++++ .../src/components/example-component/index.ts | 4 + .../components/example-component/style.scss | 17 +++ .../projectTemplate/src/index.ts | 2 + .../projectTemplate/tsconfig.json | 35 ++++++ .../projectTemplate/tslint.json | 24 ++++ .../tsconfig.json | 29 +++++ .../.editorconfig | 13 +++ .../.eslintignore | 1 + .../.eslintrc.js | 6 + .../rax-single-component-template/.gitignore | 18 +++ .../.prettierrc.js | 8 ++ .../rax-single-component-template/README.md | 1 + .../commitlint.config.js | 3 + .../f2elint.config.js | 5 + .../package.json | 25 ++++ .../projectTemplate/.commitlintrc | 25 ++++ .../projectTemplate/.editorconfig | 13 +++ .../projectTemplate/.eslintignore | 10 ++ .../projectTemplate/.eslintrc.js | 7 ++ .../projectTemplate/.gitignore | 98 ++++++++++++++++ .../projectTemplate/.markdownlint.json | 3 + .../projectTemplate/.markdownlintignore | 7 ++ .../projectTemplate/.npmignore | 3 + .../projectTemplate/.prettierignore | 13 +++ .../projectTemplate/.prettierrc.js | 8 ++ .../projectTemplate/.stylelintignore | 11 ++ .../projectTemplate/.stylelintrc.js | 3 + .../projectTemplate/CHANGELOG.md | 0 .../projectTemplate/README.md | 28 +++++ .../projectTemplate/_gitignore | 101 +++++++++++++++++ .../projectTemplate/_npmignore | 3 + .../projectTemplate/build.json | 15 +++ .../projectTemplate/build.lowcode.js | 17 +++ .../projectTemplate/commitlint.config.js | 3 + .../projectTemplate/demo/advance.jsx | 12 ++ .../projectTemplate/demo/basic.jsx | 12 ++ .../projectTemplate/f2elint.config.js | 5 + .../projectTemplate/package.json | 107 ++++++++++++++++++ .../projectTemplate/src/component.tsx | 38 +++++++ .../projectTemplate/src/index.ts | 3 + .../projectTemplate/src/style.scss | 17 +++ .../projectTemplate/tsconfig.json | 25 ++++ .../projectTemplate/tslint.json | 24 ++++ .../tsconfig.json | 29 +++++ .../.gitignore | 97 ++++++++++++++++ .../README.md | 1 + .../commitlint.config.js | 3 + .../f2elint.config.js | 5 + .../package.json | 26 +++++ .../projectTemplate/.commitlintrc | 25 ++++ .../projectTemplate/.editorconfig | 13 +++ .../projectTemplate/.eslintignore | 6 + .../projectTemplate/.eslintrc.js | 8 ++ .../projectTemplate/.gitignore | 98 ++++++++++++++++ .../projectTemplate/.markdownlint.json | 3 + .../projectTemplate/.markdownlintignore | 4 + .../projectTemplate/.npmignore | 2 + .../projectTemplate/.prettierignore | 11 ++ .../projectTemplate/.prettierrc.js | 8 ++ .../projectTemplate/.stylelintignore | 7 ++ .../projectTemplate/.stylelintrc.js | 3 + .../projectTemplate/CHANGELOG.md | 0 .../projectTemplate/README.md | 17 +++ .../projectTemplate/_gitignore | 101 +++++++++++++++++ .../projectTemplate/_npmignore | 3 + .../projectTemplate/build.json | 16 +++ .../projectTemplate/build.lowcode.js | 16 +++ .../projectTemplate/commitlint.config.js | 3 + .../docs/.dumi/theme/builtins/API.tsx | 74 ++++++++++++ .../docs/.dumi/theme/builtins/index.scss | 57 ++++++++++ .../docs/.dumi/theme/layout.tsx | 9 ++ .../projectTemplate/docs/.umirc.ts | 68 +++++++++++ .../docs/src/colorful-button/index.md | 21 ++++ .../docs/src/colorful-input/index.md | 21 ++++ .../projectTemplate/f2elint.config.js | 5 + .../projectTemplate/package.json | 80 +++++++++++++ .../colorful-button/colorful-button.tsx | 36 ++++++ .../src/components/colorful-button/index.scss | 5 + .../src/components/colorful-button/index.tsx | 4 + .../colorful-input/colorful-input.tsx | 28 +++++ .../src/components/colorful-input/index.scss | 5 + .../src/components/colorful-input/index.tsx | 4 + .../projectTemplate/src/index.scss | 2 + .../projectTemplate/src/index.tsx | 11 ++ .../projectTemplate/src/variables.scss | 3 + .../projectTemplate/src/variables.tsx | 3 + .../projectTemplate/tsconfig.json | 25 ++++ .../projectTemplate/tslint.json | 24 ++++ .../tsconfig.json | 29 +++++ .../.devcontainer.json | 3 + .../.editorconfig | 13 +++ .../.eslintignore | 6 + .../.eslintrc.js | 8 ++ .../.gitignore | 22 ++++ .../.markdownlint.json | 3 + .../.markdownlintignore | 4 + .../.prettierrc.js | 8 ++ .../.stylelintignore | 7 ++ .../.stylelintrc.js | 3 + .../.vscode/extensions.json | 7 ++ .../.vscode/settings.json | 11 ++ .../react-single-component-template/README.md | 3 + .../commitlint.config.js | 3 + .../f2elint.config.js | 5 + .../package.json | 36 ++++++ .../projectTemplate/.editorconfig | 13 +++ .../projectTemplate/.eslintignore | 6 + .../projectTemplate/.eslintrc.js | 8 ++ .../projectTemplate/.gitignore | 22 ++++ .../projectTemplate/.markdownlint.json | 3 + .../projectTemplate/.markdownlintignore | 4 + .../projectTemplate/.prettierrc.js | 8 ++ .../projectTemplate/.stylelintignore | 7 ++ .../projectTemplate/.stylelintrc.js | 3 + .../projectTemplate/.vscode/extensions.json | 7 ++ .../projectTemplate/.vscode/settings.json | 11 ++ .../projectTemplate/README.md | 11 ++ .../projectTemplate/_gitignore | 101 +++++++++++++++++ .../projectTemplate/_npmignore | 3 + .../projectTemplate/build.json | 13 +++ .../projectTemplate/build.lowcode.js | 16 +++ .../projectTemplate/commitlint.config.js | 3 + .../projectTemplate/demo/usage.md | 24 ++++ .../projectTemplate/f2elint.config.js | 5 + .../projectTemplate/jest.config.js | 3 + .../projectTemplate/package.json | 62 ++++++++++ .../projectTemplate/src/index.scss | 4 + .../projectTemplate/src/index.tsx | 23 ++++ .../projectTemplate/test/index.test.jsx | 9 ++ .../projectTemplate/test/setupTests.js | 4 + .../projectTemplate/tsconfig.json | 21 ++++ 166 files changed, 2963 insertions(+), 8 deletions(-) create mode 100644 packages/template-material/rax-multiple-component-template/.editorconfig create mode 100644 packages/template-material/rax-multiple-component-template/.eslintignore create mode 100644 packages/template-material/rax-multiple-component-template/.eslintrc.js create mode 100644 packages/template-material/rax-multiple-component-template/.gitignore create mode 100644 packages/template-material/rax-multiple-component-template/.prettierrc.js create mode 100644 packages/template-material/rax-multiple-component-template/README.md create mode 100644 packages/template-material/rax-multiple-component-template/commitlint.config.js create mode 100644 packages/template-material/rax-multiple-component-template/f2elint.config.js create mode 100644 packages/template-material/rax-multiple-component-template/package.json create mode 100644 packages/template-material/rax-multiple-component-template/projectTemplate/.commitlintrc create mode 100644 packages/template-material/rax-multiple-component-template/projectTemplate/.editorconfig create mode 100644 packages/template-material/rax-multiple-component-template/projectTemplate/.eslintignore create mode 100644 packages/template-material/rax-multiple-component-template/projectTemplate/.eslintrc.js create mode 100644 packages/template-material/rax-multiple-component-template/projectTemplate/.gitignore create mode 100644 packages/template-material/rax-multiple-component-template/projectTemplate/.markdownlint.json create mode 100644 packages/template-material/rax-multiple-component-template/projectTemplate/.markdownlintignore create mode 100644 packages/template-material/rax-multiple-component-template/projectTemplate/.npmignore create mode 100644 packages/template-material/rax-multiple-component-template/projectTemplate/.prettierignore create mode 100644 packages/template-material/rax-multiple-component-template/projectTemplate/.prettierrc.js create mode 100644 packages/template-material/rax-multiple-component-template/projectTemplate/.stylelintignore create mode 100644 packages/template-material/rax-multiple-component-template/projectTemplate/.stylelintrc.js create mode 100644 packages/template-material/rax-multiple-component-template/projectTemplate/CHANGELOG.md create mode 100644 packages/template-material/rax-multiple-component-template/projectTemplate/README.md create mode 100644 packages/template-material/rax-multiple-component-template/projectTemplate/_gitignore create mode 100644 packages/template-material/rax-multiple-component-template/projectTemplate/_npmignore create mode 100644 packages/template-material/rax-multiple-component-template/projectTemplate/build.json create mode 100644 packages/template-material/rax-multiple-component-template/projectTemplate/build.lowcode.js create mode 100644 packages/template-material/rax-multiple-component-template/projectTemplate/commitlint.config.js create mode 100644 packages/template-material/rax-multiple-component-template/projectTemplate/docs/example-component/README.md create mode 100644 packages/template-material/rax-multiple-component-template/projectTemplate/docs/example-component/demo/basic.jsx create mode 100644 packages/template-material/rax-multiple-component-template/projectTemplate/f2elint.config.js create mode 100644 packages/template-material/rax-multiple-component-template/projectTemplate/package.json create mode 100644 packages/template-material/rax-multiple-component-template/projectTemplate/src/components/example-component/component.tsx create mode 100644 packages/template-material/rax-multiple-component-template/projectTemplate/src/components/example-component/index.ts create mode 100644 packages/template-material/rax-multiple-component-template/projectTemplate/src/components/example-component/style.scss create mode 100644 packages/template-material/rax-multiple-component-template/projectTemplate/src/index.ts create mode 100644 packages/template-material/rax-multiple-component-template/projectTemplate/tsconfig.json create mode 100644 packages/template-material/rax-multiple-component-template/projectTemplate/tslint.json create mode 100644 packages/template-material/rax-multiple-component-template/tsconfig.json create mode 100644 packages/template-material/rax-single-component-template/.editorconfig create mode 100644 packages/template-material/rax-single-component-template/.eslintignore create mode 100644 packages/template-material/rax-single-component-template/.eslintrc.js create mode 100644 packages/template-material/rax-single-component-template/.gitignore create mode 100644 packages/template-material/rax-single-component-template/.prettierrc.js create mode 100644 packages/template-material/rax-single-component-template/README.md create mode 100644 packages/template-material/rax-single-component-template/commitlint.config.js create mode 100644 packages/template-material/rax-single-component-template/f2elint.config.js create mode 100644 packages/template-material/rax-single-component-template/package.json create mode 100644 packages/template-material/rax-single-component-template/projectTemplate/.commitlintrc create mode 100644 packages/template-material/rax-single-component-template/projectTemplate/.editorconfig create mode 100644 packages/template-material/rax-single-component-template/projectTemplate/.eslintignore create mode 100644 packages/template-material/rax-single-component-template/projectTemplate/.eslintrc.js create mode 100644 packages/template-material/rax-single-component-template/projectTemplate/.gitignore create mode 100644 packages/template-material/rax-single-component-template/projectTemplate/.markdownlint.json create mode 100644 packages/template-material/rax-single-component-template/projectTemplate/.markdownlintignore create mode 100644 packages/template-material/rax-single-component-template/projectTemplate/.npmignore create mode 100644 packages/template-material/rax-single-component-template/projectTemplate/.prettierignore create mode 100644 packages/template-material/rax-single-component-template/projectTemplate/.prettierrc.js create mode 100644 packages/template-material/rax-single-component-template/projectTemplate/.stylelintignore create mode 100644 packages/template-material/rax-single-component-template/projectTemplate/.stylelintrc.js create mode 100644 packages/template-material/rax-single-component-template/projectTemplate/CHANGELOG.md create mode 100644 packages/template-material/rax-single-component-template/projectTemplate/README.md create mode 100644 packages/template-material/rax-single-component-template/projectTemplate/_gitignore create mode 100644 packages/template-material/rax-single-component-template/projectTemplate/_npmignore create mode 100644 packages/template-material/rax-single-component-template/projectTemplate/build.json create mode 100644 packages/template-material/rax-single-component-template/projectTemplate/build.lowcode.js create mode 100644 packages/template-material/rax-single-component-template/projectTemplate/commitlint.config.js create mode 100644 packages/template-material/rax-single-component-template/projectTemplate/demo/advance.jsx create mode 100644 packages/template-material/rax-single-component-template/projectTemplate/demo/basic.jsx create mode 100644 packages/template-material/rax-single-component-template/projectTemplate/f2elint.config.js create mode 100644 packages/template-material/rax-single-component-template/projectTemplate/package.json create mode 100644 packages/template-material/rax-single-component-template/projectTemplate/src/component.tsx create mode 100644 packages/template-material/rax-single-component-template/projectTemplate/src/index.ts create mode 100644 packages/template-material/rax-single-component-template/projectTemplate/src/style.scss create mode 100644 packages/template-material/rax-single-component-template/projectTemplate/tsconfig.json create mode 100644 packages/template-material/rax-single-component-template/projectTemplate/tslint.json create mode 100644 packages/template-material/rax-single-component-template/tsconfig.json create mode 100644 packages/template-material/react-multiple-component-template/.gitignore create mode 100644 packages/template-material/react-multiple-component-template/README.md create mode 100644 packages/template-material/react-multiple-component-template/commitlint.config.js create mode 100644 packages/template-material/react-multiple-component-template/f2elint.config.js create mode 100644 packages/template-material/react-multiple-component-template/package.json create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/.commitlintrc create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/.editorconfig create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/.eslintignore create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/.eslintrc.js create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/.gitignore create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/.markdownlint.json create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/.markdownlintignore create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/.npmignore create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/.prettierignore create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/.prettierrc.js create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/.stylelintignore create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/.stylelintrc.js create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/CHANGELOG.md create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/README.md create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/_gitignore create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/_npmignore create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/build.json create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/build.lowcode.js create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/commitlint.config.js create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/docs/.dumi/theme/builtins/API.tsx create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/docs/.dumi/theme/builtins/index.scss create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/docs/.dumi/theme/layout.tsx create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/docs/.umirc.ts create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/docs/src/colorful-button/index.md create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/docs/src/colorful-input/index.md create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/f2elint.config.js create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/package.json create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/src/components/colorful-button/colorful-button.tsx create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/src/components/colorful-button/index.scss create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/src/components/colorful-button/index.tsx create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/src/components/colorful-input/colorful-input.tsx create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/src/components/colorful-input/index.scss create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/src/components/colorful-input/index.tsx create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/src/index.scss create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/src/index.tsx create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/src/variables.scss create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/src/variables.tsx create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/tsconfig.json create mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/tslint.json create mode 100644 packages/template-material/react-multiple-component-template/tsconfig.json create mode 100644 packages/template-material/react-single-component-template/.devcontainer.json create mode 100644 packages/template-material/react-single-component-template/.editorconfig create mode 100644 packages/template-material/react-single-component-template/.eslintignore create mode 100644 packages/template-material/react-single-component-template/.eslintrc.js create mode 100644 packages/template-material/react-single-component-template/.gitignore create mode 100644 packages/template-material/react-single-component-template/.markdownlint.json create mode 100644 packages/template-material/react-single-component-template/.markdownlintignore create mode 100644 packages/template-material/react-single-component-template/.prettierrc.js create mode 100644 packages/template-material/react-single-component-template/.stylelintignore create mode 100644 packages/template-material/react-single-component-template/.stylelintrc.js create mode 100644 packages/template-material/react-single-component-template/.vscode/extensions.json create mode 100644 packages/template-material/react-single-component-template/.vscode/settings.json create mode 100644 packages/template-material/react-single-component-template/README.md create mode 100644 packages/template-material/react-single-component-template/commitlint.config.js create mode 100644 packages/template-material/react-single-component-template/f2elint.config.js create mode 100644 packages/template-material/react-single-component-template/package.json create mode 100644 packages/template-material/react-single-component-template/projectTemplate/.editorconfig create mode 100644 packages/template-material/react-single-component-template/projectTemplate/.eslintignore create mode 100644 packages/template-material/react-single-component-template/projectTemplate/.eslintrc.js create mode 100644 packages/template-material/react-single-component-template/projectTemplate/.gitignore create mode 100644 packages/template-material/react-single-component-template/projectTemplate/.markdownlint.json create mode 100644 packages/template-material/react-single-component-template/projectTemplate/.markdownlintignore create mode 100644 packages/template-material/react-single-component-template/projectTemplate/.prettierrc.js create mode 100644 packages/template-material/react-single-component-template/projectTemplate/.stylelintignore create mode 100644 packages/template-material/react-single-component-template/projectTemplate/.stylelintrc.js create mode 100644 packages/template-material/react-single-component-template/projectTemplate/.vscode/extensions.json create mode 100644 packages/template-material/react-single-component-template/projectTemplate/.vscode/settings.json create mode 100644 packages/template-material/react-single-component-template/projectTemplate/README.md create mode 100644 packages/template-material/react-single-component-template/projectTemplate/_gitignore create mode 100644 packages/template-material/react-single-component-template/projectTemplate/_npmignore create mode 100644 packages/template-material/react-single-component-template/projectTemplate/build.json create mode 100644 packages/template-material/react-single-component-template/projectTemplate/build.lowcode.js create mode 100644 packages/template-material/react-single-component-template/projectTemplate/commitlint.config.js create mode 100644 packages/template-material/react-single-component-template/projectTemplate/demo/usage.md create mode 100644 packages/template-material/react-single-component-template/projectTemplate/f2elint.config.js create mode 100644 packages/template-material/react-single-component-template/projectTemplate/jest.config.js create mode 100644 packages/template-material/react-single-component-template/projectTemplate/package.json create mode 100644 packages/template-material/react-single-component-template/projectTemplate/src/index.scss create mode 100644 packages/template-material/react-single-component-template/projectTemplate/src/index.tsx create mode 100644 packages/template-material/react-single-component-template/projectTemplate/test/index.test.jsx create mode 100644 packages/template-material/react-single-component-template/projectTemplate/test/setupTests.js create mode 100644 packages/template-material/react-single-component-template/projectTemplate/tsconfig.json diff --git a/packages/create-element/package.json b/packages/create-element/package.json index 3e03eed..0d952e9 100644 --- a/packages/create-element/package.json +++ b/packages/create-element/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/create-element", - "version": "1.1.4", + "version": "1.1.6", "description": "", "main": "lib/index.js", "bin": { diff --git a/packages/create-element/src/component.ts b/packages/create-element/src/component.ts index dc8cf77..2b9f378 100644 --- a/packages/create-element/src/component.ts +++ b/packages/create-element/src/component.ts @@ -4,6 +4,7 @@ import { hideBin } from 'yargs/helpers'; import { fs as fieFs } from 'fie-api'; import * as inquirer from 'inquirer'; import Base from './base'; +import { transformFileName } from './utils'; class InitComponent extends Base { constructor(options) { @@ -19,7 +20,8 @@ class InitComponent extends Base { evaluate: /<%([\s\S]+?)%>/g, interpolate: /<%=([\s\S]+?)%>/g, escape: /<%-([\s\S]+?)%>/g - } + }, + filenameTransformer: transformFileName }; fieFs.copyDirectory(copyParams); } @@ -32,18 +34,18 @@ export default async (answers) => { message: '请选择包模式', choices: [{ name: 'react-单组件', - value: 'pc-single', + value: 'react-single', }, { name: 'react-组件库', - value: 'pc-multiple', + value: 'react-multiple', }, { name: 'rax-单组件', - value: 'mobile-single', + value: 'rax-single', }, { name: 'rax-组件库', - value: 'mobile-multiple', + value: 'rax-multiple', }], - default: 'pc-single', + default: 'react-single', }]; const result = await inquirer.prompt(promptList); new InitComponent({ @@ -53,7 +55,7 @@ export default async (answers) => { ...answers, engineScope: '@alilc', }, - templatePkg: `@alifd/${result.packageType}-component-template`, + templatePkg: `@alilc/${result.packageType}-component-template`, prefix: 'lowcode-setter', }).init(); } \ No newline at end of file diff --git a/packages/template-material/rax-multiple-component-template/.editorconfig b/packages/template-material/rax-multiple-component-template/.editorconfig new file mode 100644 index 0000000..3192996 --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/.editorconfig @@ -0,0 +1,13 @@ +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true +quote_type = single + +[*.md] +trim_trailing_whitespace = false diff --git a/packages/template-material/rax-multiple-component-template/.eslintignore b/packages/template-material/rax-multiple-component-template/.eslintignore new file mode 100644 index 0000000..c2658d7 --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/.eslintignore @@ -0,0 +1 @@ +node_modules/ diff --git a/packages/template-material/rax-multiple-component-template/.eslintrc.js b/packages/template-material/rax-multiple-component-template/.eslintrc.js new file mode 100644 index 0000000..7c06200 --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/.eslintrc.js @@ -0,0 +1,6 @@ +module.exports = { + extends: ['eslint-config-ali/typescript/node', 'prettier', 'prettier/@typescript-eslint'], + rules: { + '@typescript-eslint/no-require-imports': 0, + }, +}; diff --git a/packages/template-material/rax-multiple-component-template/.gitignore b/packages/template-material/rax-multiple-component-template/.gitignore new file mode 100644 index 0000000..8c8419a --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/.gitignore @@ -0,0 +1,18 @@ +logs/ +npm-debug.log +yarn-error.log +node_modules/ +package-lock.json +yarn.lock +coverage/ +.idea/ +run/ +.DS_Store +*.sw* +*.un~ +.tsbuildinfo +.tsbuildinfo.* +/dist/ +.nodejs-cache/ +.nodejs-cache +dist diff --git a/packages/template-material/rax-multiple-component-template/.prettierrc.js b/packages/template-material/rax-multiple-component-template/.prettierrc.js new file mode 100644 index 0000000..9353f63 --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/.prettierrc.js @@ -0,0 +1,8 @@ +module.exports = { + printWidth: 100, + tabWidth: 2, + semi: true, + singleQuote: true, + trailingComma: 'all', + arrowParens: 'always', +}; diff --git a/packages/template-material/rax-multiple-component-template/README.md b/packages/template-material/rax-multiple-component-template/README.md new file mode 100644 index 0000000..da2d866 --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/README.md @@ -0,0 +1 @@ +# 移动端大包组件模板 diff --git a/packages/template-material/rax-multiple-component-template/commitlint.config.js b/packages/template-material/rax-multiple-component-template/commitlint.config.js new file mode 100644 index 0000000..52f3b75 --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/commitlint.config.js @@ -0,0 +1,3 @@ +module.exports = { + extends: ['ali'], +}; diff --git a/packages/template-material/rax-multiple-component-template/f2elint.config.js b/packages/template-material/rax-multiple-component-template/f2elint.config.js new file mode 100644 index 0000000..9cdb28f --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/f2elint.config.js @@ -0,0 +1,5 @@ +module.exports = { + enableStylelint: false, + enableMarkdownlint: false, + enablePrettier: true, +}; diff --git a/packages/template-material/rax-multiple-component-template/package.json b/packages/template-material/rax-multiple-component-template/package.json new file mode 100644 index 0000000..11e6cc1 --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/package.json @@ -0,0 +1,27 @@ +{ + "name": "@alilc/rax-multiple-component-template", + "version": "0.1.1", + "description": "rax 组件库模板", + "main": "lib/index.js", + "files": [ + "projectTemplate/", + "singleComponentTemplate/", + "singleDocTemplate/" + ], + "scripts": { + "f2elint-scan": "fie lint", + "f2elint-fix": "fie lint -fix" + }, + "author": "", + "license": "MIT", + "dependencies": { + }, + "devDependencies": { + }, + "husky": { + "hooks": { + "pre-commit": "f2elint commit-file-scan", + "commit-msg": "f2elint commit-msg-scan" + } + } +} diff --git a/packages/template-material/rax-multiple-component-template/projectTemplate/.commitlintrc b/packages/template-material/rax-multiple-component-template/projectTemplate/.commitlintrc new file mode 100644 index 0000000..96654a0 --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/projectTemplate/.commitlintrc @@ -0,0 +1,25 @@ +{ + "rules": { + "header-max-length": [2, "always", 72], + "subject-empty": [2, "never"], + "subject-full-stop": [2, "never", "."], + "type-empty": [2, "never"], + "type-case": [2, "always", "lower-case"], + "type-enum": [2, "always", + [ + "build", + "chore", + "ci", + "docs", + "feat", + "fix", + "perf", + "refactor", + "revert", + "style", + "test", + "temp" + ] + ] + } +} diff --git a/packages/template-material/rax-multiple-component-template/projectTemplate/.editorconfig b/packages/template-material/rax-multiple-component-template/projectTemplate/.editorconfig new file mode 100644 index 0000000..3192996 --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/projectTemplate/.editorconfig @@ -0,0 +1,13 @@ +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true +quote_type = single + +[*.md] +trim_trailing_whitespace = false diff --git a/packages/template-material/rax-multiple-component-template/projectTemplate/.eslintignore b/packages/template-material/rax-multiple-component-template/projectTemplate/.eslintignore new file mode 100644 index 0000000..05c40bc --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/projectTemplate/.eslintignore @@ -0,0 +1,10 @@ +node_modules/ +build/ +dist/ +es/ +lib/ +miniapp-preview/ +types/ +**/*.min.js +**/*-min.js +**/*.bundle.js diff --git a/packages/template-material/rax-multiple-component-template/projectTemplate/.eslintrc.js b/packages/template-material/rax-multiple-component-template/projectTemplate/.eslintrc.js new file mode 100644 index 0000000..6cbbeec --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/projectTemplate/.eslintrc.js @@ -0,0 +1,7 @@ +module.exports = { + extends: [ + 'eslint-config-ali/typescript/rax', + "prettier", + 'prettier/@typescript-eslint', + ], +}; diff --git a/packages/template-material/rax-multiple-component-template/projectTemplate/.gitignore b/packages/template-material/rax-multiple-component-template/projectTemplate/.gitignore new file mode 100644 index 0000000..e3bebec --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/projectTemplate/.gitignore @@ -0,0 +1,98 @@ +.DS_Store + +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +package-lock.json +yarn.lock +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# TypeScript v1 declaration files +typings/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env + +# next.js build output +.next + +# special demo file for locally reappear issue +docs/**/demo/issues.md + +precss.css +.sass-cache/ +scripts/server-remote +__html/ +umd/ +es/ +lib/ +types/ +demos/ +!scripts/demos/ +/platform +build/ +test/coverage/ +test/**/coverage/ +mochawesome-report/ +coverage/ +gemini-report/ +.idea/ +.vscode/ +*.iml +.tea/ +/platform/ +react/ +platform/ +dist/ +_docs_/ +doc.json +meet-react/ +miniapp-preview/ +.tmp/ diff --git a/packages/template-material/rax-multiple-component-template/projectTemplate/.markdownlint.json b/packages/template-material/rax-multiple-component-template/projectTemplate/.markdownlint.json new file mode 100644 index 0000000..c859bfb --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/projectTemplate/.markdownlint.json @@ -0,0 +1,3 @@ +{ + "extends": "markdownlint-config-ali" +} diff --git a/packages/template-material/rax-multiple-component-template/projectTemplate/.markdownlintignore b/packages/template-material/rax-multiple-component-template/projectTemplate/.markdownlintignore new file mode 100644 index 0000000..a40f6e3 --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/projectTemplate/.markdownlintignore @@ -0,0 +1,4 @@ +node_modules/ +build/ +dist/ + diff --git a/packages/template-material/rax-multiple-component-template/projectTemplate/.npmignore b/packages/template-material/rax-multiple-component-template/projectTemplate/.npmignore new file mode 100644 index 0000000..5947400 --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/projectTemplate/.npmignore @@ -0,0 +1,3 @@ +miniapp-preview/ +.idea/ +.vscode/ diff --git a/packages/template-material/rax-multiple-component-template/projectTemplate/.prettierignore b/packages/template-material/rax-multiple-component-template/projectTemplate/.prettierignore new file mode 100644 index 0000000..ad20c13 --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/projectTemplate/.prettierignore @@ -0,0 +1,13 @@ +node_modules/ +build/ +dist/ +es/ +lib/ +umd/ +miniapp-preview/ +types/ +.cachefile/ +deps.json +package-lock.json +yarn.lock +miniapp/**/*.axml diff --git a/packages/template-material/rax-multiple-component-template/projectTemplate/.prettierrc.js b/packages/template-material/rax-multiple-component-template/projectTemplate/.prettierrc.js new file mode 100644 index 0000000..9353f63 --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/projectTemplate/.prettierrc.js @@ -0,0 +1,8 @@ +module.exports = { + printWidth: 100, + tabWidth: 2, + semi: true, + singleQuote: true, + trailingComma: 'all', + arrowParens: 'always', +}; diff --git a/packages/template-material/rax-multiple-component-template/projectTemplate/.stylelintignore b/packages/template-material/rax-multiple-component-template/projectTemplate/.stylelintignore new file mode 100644 index 0000000..92b284c --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/projectTemplate/.stylelintignore @@ -0,0 +1,11 @@ +node_modules/ +build/ +dist/ +es/ +lib/ +miniapp-preview/ +types/ +**/*.min.css +**/*-min.css +**/*.bundle.css + diff --git a/packages/template-material/rax-multiple-component-template/projectTemplate/.stylelintrc.js b/packages/template-material/rax-multiple-component-template/projectTemplate/.stylelintrc.js new file mode 100644 index 0000000..74a5a54 --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/projectTemplate/.stylelintrc.js @@ -0,0 +1,3 @@ +module.exports = { + extends: 'stylelint-config-ali', +}; diff --git a/packages/template-material/rax-multiple-component-template/projectTemplate/CHANGELOG.md b/packages/template-material/rax-multiple-component-template/projectTemplate/CHANGELOG.md new file mode 100644 index 0000000..e69de29 diff --git a/packages/template-material/rax-multiple-component-template/projectTemplate/README.md b/packages/template-material/rax-multiple-component-template/projectTemplate/README.md new file mode 100644 index 0000000..2177246 --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/projectTemplate/README.md @@ -0,0 +1,17 @@ +# <%= projectName %> + +一个面向移动端的跨端多包组件库 + +## 调试 +启动调试 + +```bash +npm start [demoName] +``` + +构建 + +```bash +npm run build +``` + diff --git a/packages/template-material/rax-multiple-component-template/projectTemplate/_gitignore b/packages/template-material/rax-multiple-component-template/projectTemplate/_gitignore new file mode 100644 index 0000000..ebdca34 --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/projectTemplate/_gitignore @@ -0,0 +1,101 @@ +.DS_Store + +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +package-lock.json +yarn.lock +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# TypeScript v1 declaration files +typings/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env + +# next.js build output +.next + +# special demo file for locally reappear issue +docs/**/demo/issues.md + +precss.css +.sass-cache/ +scripts/server-remote +__html/ +umd/ +es/ +lib/ +types/ +demos/ +!scripts/demos/ +/platform +build/ +test/coverage/ +test/**/coverage/ +mochawesome-report/ +coverage/ +gemini-report/ +.idea/ +.vscode/ +*.iml +.tea/ +/platform/ +react/ +platform/ +dist/ +_docs_/ +doc.json +meet-react/ +miniapp-preview/ +.tmp/ + +.umi/ +.umi-production/ \ No newline at end of file diff --git a/packages/template-material/rax-multiple-component-template/projectTemplate/_npmignore b/packages/template-material/rax-multiple-component-template/projectTemplate/_npmignore new file mode 100644 index 0000000..5947400 --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/projectTemplate/_npmignore @@ -0,0 +1,3 @@ +miniapp-preview/ +.idea/ +.vscode/ diff --git a/packages/template-material/rax-multiple-component-template/projectTemplate/build.json b/packages/template-material/rax-multiple-component-template/projectTemplate/build.json new file mode 100644 index 0000000..7083026 --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/projectTemplate/build.json @@ -0,0 +1,17 @@ +{ + "type": "rax", + "inlineStyle": false, + "targets": [ + "web", + "miniapp", + "wechat-miniprogram" + ], + "library": "MyBizComponent", + "plugins": [ + "build-plugin-component-multiple", + "build-plugin-doc-multiple" + ], + "alias": { + "components": "./src/components" + } +} diff --git a/packages/template-material/rax-multiple-component-template/projectTemplate/build.lowcode.js b/packages/template-material/rax-multiple-component-template/projectTemplate/build.lowcode.js new file mode 100644 index 0000000..dc8ef54 --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/projectTemplate/build.lowcode.js @@ -0,0 +1,17 @@ +const { library } = require('./build.json'); + +module.exports = { + alias: { + '@': './src/components', + }, + plugins: [ + [ + '@alifd/build-plugin-lowcode', + { + library, + baseLibrary: 'rax', + engineScope: "<%= arguments[0].engineScope || '@ali' %>" + } + ], + ], +}; diff --git a/packages/template-material/rax-multiple-component-template/projectTemplate/commitlint.config.js b/packages/template-material/rax-multiple-component-template/projectTemplate/commitlint.config.js new file mode 100644 index 0000000..52f3b75 --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/projectTemplate/commitlint.config.js @@ -0,0 +1,3 @@ +module.exports = { + extends: ['ali'], +}; diff --git a/packages/template-material/rax-multiple-component-template/projectTemplate/docs/example-component/README.md b/packages/template-material/rax-multiple-component-template/projectTemplate/docs/example-component/README.md new file mode 100644 index 0000000..0f8f0e5 --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/projectTemplate/docs/example-component/README.md @@ -0,0 +1,9 @@ +--- +title: 示例组件 +description: 组件描述 +category: General +--- + +示例组件 + + diff --git a/packages/template-material/rax-multiple-component-template/projectTemplate/docs/example-component/demo/basic.jsx b/packages/template-material/rax-multiple-component-template/projectTemplate/docs/example-component/demo/basic.jsx new file mode 100644 index 0000000..6d7af68 --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/projectTemplate/docs/example-component/demo/basic.jsx @@ -0,0 +1,12 @@ +/** + * @title 基础 + * @desc 这是一个基础 demo + * @order 1 + */ +/* @jsx createElement */ +import { createElement } from 'rax'; +import { ExampleComponent } from '<%= projectName %>'; + +export default () => { + return 组件示例; +}; diff --git a/packages/template-material/rax-multiple-component-template/projectTemplate/f2elint.config.js b/packages/template-material/rax-multiple-component-template/projectTemplate/f2elint.config.js new file mode 100644 index 0000000..ff8f05d --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/projectTemplate/f2elint.config.js @@ -0,0 +1,5 @@ +module.exports = { + enableStylelint: true, + enableMarkdownlint: true, + enablePrettier: true, +}; diff --git a/packages/template-material/rax-multiple-component-template/projectTemplate/package.json b/packages/template-material/rax-multiple-component-template/projectTemplate/package.json new file mode 100644 index 0000000..81932fa --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/projectTemplate/package.json @@ -0,0 +1,94 @@ +{ + "name": "<%= projectName %>", + "version": "0.1.0", + "description": "", + "main": "lib/index.js", + "module": "es/index.js", + "unpkg": "dist/index.umd.js", + "typings": "types/index.d.ts", + "files": [ + "build", + "dist", + "lib", + "es", + "types" + ], + "logo": "https://gw.alicdn.com/imgextra/i2/O1CN01XA2RsI1fjjzUmc2kh_!!6000000004043-2-tps-243-240.png", + "scripts": { + "start": "build-scripts start", + "build": "build-scripts build", + "lowcode:dev": "build-scripts start --config ./build.lowcode.js", + "lowcode:build": "build-scripts build --config ./build.lowcode.js", + "lint": "fie lint", + "f2elint-scan": "f2elint scan", + "f2elint-fix": "f2elint fix", + "prepublishOnly": "npm run build && npm run lowcode:build" + }, + "keywords": [ + "Rax" + ], + "husky": { + "hooks": { + "pre-commit": "f2elint commit-file-scan", + "commit-msg": "f2elint commit-msg-scan" + } + }, + "lint-staged": { + "src/**/*.(ts|tsx)": [ + "tslint --fix", + "prettier --write", + "git add" + ], + "docs/**/*.md": [ + "prettier --write", + "git add" + ], + "@(docs|src)/**/*.@(js|jsx|ts|tsx)": [ + "eslint --fix", + "prettier --write", + "git add" + ] + }, + "peerDependencies": { + "rax": "^1.0.11" + }, + "devDependencies": { + "@alib/build-scripts": "^0.1.20", + "@alifd/build-plugin-lowcode": "^0.3.0", + "@types/rax": "^1.0.5", + "build-plugin-component-multiple": "^1.0.0-beta.13", + "build-plugin-doc-multiple": "^1.0.0-beta.8", + "driver-universal": "^3.1.0", + "eslint-plugin-jsx-plus": "^0.1.0", + "execa": "^2.0.5", + "expect.js": "^0.3.1", + "f2elint": "^1.2.0", + "husky": "^3.0.1", + "iceworks": "^3.4.5", + "jest": "^24.8.0", + "jest-cli": "^24.8.0", + "lint-staged": "^9.4.2", + "prettier": "^1.19.1", + "rax": "^1.0.11", + "ts-loader": "^6.0.4", + "ts-mocha": "^8.0.0", + "ts-node": "^9.1.1", + "tslint": "^5.18.0", + "tslint-config-ali": "^0.2.4", + "tslint-config-prettier": "^1.18.0", + "tslint-plugin-prettier": "^2.0.1", + "typescript": "^3.5.3" + }, + "dependencies": { + "rax-image": "^2.3.2", + "rax-text": "^2.1.2", + "rax-view": "^2.2.0", + "tslib": "^2.0.1" + }, + "nyc": { + "include": "src" + }, + "componentConfig": { + "isComponentLibrary": 1 + } +} diff --git a/packages/template-material/rax-multiple-component-template/projectTemplate/src/components/example-component/component.tsx b/packages/template-material/rax-multiple-component-template/projectTemplate/src/components/example-component/component.tsx new file mode 100644 index 0000000..487db3c --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/projectTemplate/src/components/example-component/component.tsx @@ -0,0 +1,38 @@ +import { createElement, forwardRef, ForwardRefRenderFunction } from 'rax'; +import View from 'rax-view'; +import Text from 'rax-text'; +import './style.scss'; + +export interface ComponentProps { + /** + * 名称 + */ + name: string; + /** + * 子节点 + */ + children: any; +} + +/** + * 示例组件 + * @param props + * @constructor + */ +function ExampleComponent(props: ComponentProps, ref: any) { + return ( + + {props.name || ''} + {props.children} + + ); +} + +const RefComponent = forwardRef(ExampleComponent as ForwardRefRenderFunction); + +RefComponent.defaultProps = { + name: '标题', +}; +RefComponent.displayName = 'ExampleComponent'; + +export default RefComponent; diff --git a/packages/template-material/rax-multiple-component-template/projectTemplate/src/components/example-component/index.ts b/packages/template-material/rax-multiple-component-template/projectTemplate/src/components/example-component/index.ts new file mode 100644 index 0000000..fbaa584 --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/projectTemplate/src/components/example-component/index.ts @@ -0,0 +1,4 @@ +import Component from './component'; + +export type { ComponentProps } from './component'; +export default Component; diff --git a/packages/template-material/rax-multiple-component-template/projectTemplate/src/components/example-component/style.scss b/packages/template-material/rax-multiple-component-template/projectTemplate/src/components/example-component/style.scss new file mode 100644 index 0000000..9897c75 --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/projectTemplate/src/components/example-component/style.scss @@ -0,0 +1,17 @@ +.container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: 200rpx; +} + +.name { + color: #222; + font-size: 80rpx; +} + +.content { + color: #666; + font-size: 40rpx; +} diff --git a/packages/template-material/rax-multiple-component-template/projectTemplate/src/index.ts b/packages/template-material/rax-multiple-component-template/projectTemplate/src/index.ts new file mode 100644 index 0000000..1d3efac --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/projectTemplate/src/index.ts @@ -0,0 +1,2 @@ +export { default as ExampleComponent } from './components/example-component'; +export type { ComponentProps } from './components/example-component'; diff --git a/packages/template-material/rax-multiple-component-template/projectTemplate/tsconfig.json b/packages/template-material/rax-multiple-component-template/projectTemplate/tsconfig.json new file mode 100644 index 0000000..11552bf --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/projectTemplate/tsconfig.json @@ -0,0 +1,35 @@ +{ + "compilerOptions": { + "module": "ESNext", + "target": "ESNext", + "jsx": "preserve", + "jsxFactory": "createElement", + "declaration": false, + "outDir": "./lib", + "removeComments": true, + "strict": false, + "noImplicitAny": false, + "noImplicitThis": false, + "preserveConstEnums": true, + "noUnusedLocals": true, + "noUnusedParameters": false, + "noImplicitReturns": true, + "moduleResolution": "node", + "esModuleInterop": true, + "experimentalDecorators": true, + "importHelpers": true, + "baseUrl": ".", + "paths": { + "*": [ + "src/*" + ] + } + }, + "include": [ + "src" + ], + "exclude": [ + "node_modules", + "lib" + ] +} diff --git a/packages/template-material/rax-multiple-component-template/projectTemplate/tslint.json b/packages/template-material/rax-multiple-component-template/projectTemplate/tslint.json new file mode 100644 index 0000000..c412334 --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/projectTemplate/tslint.json @@ -0,0 +1,24 @@ +{ + "extends": ["tslint-config-ali", "tslint-config-prettier"], + "rules": { + "no-implicit-dependencies": [false, "src", "docs"], + "quotemark": [true, "single", "jsx-double"], + "no-empty": [true, "allow-empty-catch", "allow-empty-functions"], + "no-console": [true, "log"], + "variable-name": [ + false, + "check-format", + "allow-leading-underscore", + "allow-trailing-underscore", + "allow-pascal-case" + ], + "only-arrow-functions": false, + "object-literal-sort-keys": false, + "ordered-imports": false, + "interface-name": false, + "no-boolean-literal-compare": false + }, + "linterOptions": { + "exclude": ["node_modules/**"] + } +} diff --git a/packages/template-material/rax-multiple-component-template/tsconfig.json b/packages/template-material/rax-multiple-component-template/tsconfig.json new file mode 100644 index 0000000..fb2a43d --- /dev/null +++ b/packages/template-material/rax-multiple-component-template/tsconfig.json @@ -0,0 +1,29 @@ +{ + "compilerOptions": { + "rootDir": "src", + "outDir": "lib", + "module": "commonjs", + "moduleResolution": "node", + "strict": true, + "strictNullChecks": false, + "jsx": "react", + "target": "esnext", + "experimentalDecorators": true, + "skipLibCheck": true, + "declaration": true, + "lib": [ + "dom", + "es5", + "es6", + "es7", + "scripthost", + "es2018.promise" + ], + "emitDecoratorMetadata": true, + "preserveConstEnums": true, + "allowSyntheticDefaultImports": true + }, + "include": [ + "src/**/*" + ] +} \ No newline at end of file diff --git a/packages/template-material/rax-single-component-template/.editorconfig b/packages/template-material/rax-single-component-template/.editorconfig new file mode 100644 index 0000000..3192996 --- /dev/null +++ b/packages/template-material/rax-single-component-template/.editorconfig @@ -0,0 +1,13 @@ +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true +quote_type = single + +[*.md] +trim_trailing_whitespace = false diff --git a/packages/template-material/rax-single-component-template/.eslintignore b/packages/template-material/rax-single-component-template/.eslintignore new file mode 100644 index 0000000..c2658d7 --- /dev/null +++ b/packages/template-material/rax-single-component-template/.eslintignore @@ -0,0 +1 @@ +node_modules/ diff --git a/packages/template-material/rax-single-component-template/.eslintrc.js b/packages/template-material/rax-single-component-template/.eslintrc.js new file mode 100644 index 0000000..7c06200 --- /dev/null +++ b/packages/template-material/rax-single-component-template/.eslintrc.js @@ -0,0 +1,6 @@ +module.exports = { + extends: ['eslint-config-ali/typescript/node', 'prettier', 'prettier/@typescript-eslint'], + rules: { + '@typescript-eslint/no-require-imports': 0, + }, +}; diff --git a/packages/template-material/rax-single-component-template/.gitignore b/packages/template-material/rax-single-component-template/.gitignore new file mode 100644 index 0000000..8c8419a --- /dev/null +++ b/packages/template-material/rax-single-component-template/.gitignore @@ -0,0 +1,18 @@ +logs/ +npm-debug.log +yarn-error.log +node_modules/ +package-lock.json +yarn.lock +coverage/ +.idea/ +run/ +.DS_Store +*.sw* +*.un~ +.tsbuildinfo +.tsbuildinfo.* +/dist/ +.nodejs-cache/ +.nodejs-cache +dist diff --git a/packages/template-material/rax-single-component-template/.prettierrc.js b/packages/template-material/rax-single-component-template/.prettierrc.js new file mode 100644 index 0000000..9353f63 --- /dev/null +++ b/packages/template-material/rax-single-component-template/.prettierrc.js @@ -0,0 +1,8 @@ +module.exports = { + printWidth: 100, + tabWidth: 2, + semi: true, + singleQuote: true, + trailingComma: 'all', + arrowParens: 'always', +}; diff --git a/packages/template-material/rax-single-component-template/README.md b/packages/template-material/rax-single-component-template/README.md new file mode 100644 index 0000000..be443ee --- /dev/null +++ b/packages/template-material/rax-single-component-template/README.md @@ -0,0 +1 @@ +# 移动端单包组件模板 diff --git a/packages/template-material/rax-single-component-template/commitlint.config.js b/packages/template-material/rax-single-component-template/commitlint.config.js new file mode 100644 index 0000000..52f3b75 --- /dev/null +++ b/packages/template-material/rax-single-component-template/commitlint.config.js @@ -0,0 +1,3 @@ +module.exports = { + extends: ['ali'], +}; diff --git a/packages/template-material/rax-single-component-template/f2elint.config.js b/packages/template-material/rax-single-component-template/f2elint.config.js new file mode 100644 index 0000000..9cdb28f --- /dev/null +++ b/packages/template-material/rax-single-component-template/f2elint.config.js @@ -0,0 +1,5 @@ +module.exports = { + enableStylelint: false, + enableMarkdownlint: false, + enablePrettier: true, +}; diff --git a/packages/template-material/rax-single-component-template/package.json b/packages/template-material/rax-single-component-template/package.json new file mode 100644 index 0000000..aa70c0f --- /dev/null +++ b/packages/template-material/rax-single-component-template/package.json @@ -0,0 +1,25 @@ +{ + "name": "@alilc/rax-single-component-template", + "version": "0.1.1", + "description": "rax 单组件模板", + "files": [ + "projectTemplate/" + ], + "main": "lib/index.js", + "scripts": { + "f2elint-scan": "fie lint", + "f2elint-fix": "fie lint -fix" + }, + "author": "", + "license": "MIT", + "dependencies": { + }, + "devDependencies": { + }, + "husky": { + "hooks": { + "pre-commit": "f2elint commit-file-scan", + "commit-msg": "f2elint commit-msg-scan" + } + } +} diff --git a/packages/template-material/rax-single-component-template/projectTemplate/.commitlintrc b/packages/template-material/rax-single-component-template/projectTemplate/.commitlintrc new file mode 100644 index 0000000..96654a0 --- /dev/null +++ b/packages/template-material/rax-single-component-template/projectTemplate/.commitlintrc @@ -0,0 +1,25 @@ +{ + "rules": { + "header-max-length": [2, "always", 72], + "subject-empty": [2, "never"], + "subject-full-stop": [2, "never", "."], + "type-empty": [2, "never"], + "type-case": [2, "always", "lower-case"], + "type-enum": [2, "always", + [ + "build", + "chore", + "ci", + "docs", + "feat", + "fix", + "perf", + "refactor", + "revert", + "style", + "test", + "temp" + ] + ] + } +} diff --git a/packages/template-material/rax-single-component-template/projectTemplate/.editorconfig b/packages/template-material/rax-single-component-template/projectTemplate/.editorconfig new file mode 100644 index 0000000..3192996 --- /dev/null +++ b/packages/template-material/rax-single-component-template/projectTemplate/.editorconfig @@ -0,0 +1,13 @@ +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true +quote_type = single + +[*.md] +trim_trailing_whitespace = false diff --git a/packages/template-material/rax-single-component-template/projectTemplate/.eslintignore b/packages/template-material/rax-single-component-template/projectTemplate/.eslintignore new file mode 100644 index 0000000..05c40bc --- /dev/null +++ b/packages/template-material/rax-single-component-template/projectTemplate/.eslintignore @@ -0,0 +1,10 @@ +node_modules/ +build/ +dist/ +es/ +lib/ +miniapp-preview/ +types/ +**/*.min.js +**/*-min.js +**/*.bundle.js diff --git a/packages/template-material/rax-single-component-template/projectTemplate/.eslintrc.js b/packages/template-material/rax-single-component-template/projectTemplate/.eslintrc.js new file mode 100644 index 0000000..6cbbeec --- /dev/null +++ b/packages/template-material/rax-single-component-template/projectTemplate/.eslintrc.js @@ -0,0 +1,7 @@ +module.exports = { + extends: [ + 'eslint-config-ali/typescript/rax', + "prettier", + 'prettier/@typescript-eslint', + ], +}; diff --git a/packages/template-material/rax-single-component-template/projectTemplate/.gitignore b/packages/template-material/rax-single-component-template/projectTemplate/.gitignore new file mode 100644 index 0000000..e3bebec --- /dev/null +++ b/packages/template-material/rax-single-component-template/projectTemplate/.gitignore @@ -0,0 +1,98 @@ +.DS_Store + +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +package-lock.json +yarn.lock +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# TypeScript v1 declaration files +typings/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env + +# next.js build output +.next + +# special demo file for locally reappear issue +docs/**/demo/issues.md + +precss.css +.sass-cache/ +scripts/server-remote +__html/ +umd/ +es/ +lib/ +types/ +demos/ +!scripts/demos/ +/platform +build/ +test/coverage/ +test/**/coverage/ +mochawesome-report/ +coverage/ +gemini-report/ +.idea/ +.vscode/ +*.iml +.tea/ +/platform/ +react/ +platform/ +dist/ +_docs_/ +doc.json +meet-react/ +miniapp-preview/ +.tmp/ diff --git a/packages/template-material/rax-single-component-template/projectTemplate/.markdownlint.json b/packages/template-material/rax-single-component-template/projectTemplate/.markdownlint.json new file mode 100644 index 0000000..c859bfb --- /dev/null +++ b/packages/template-material/rax-single-component-template/projectTemplate/.markdownlint.json @@ -0,0 +1,3 @@ +{ + "extends": "markdownlint-config-ali" +} diff --git a/packages/template-material/rax-single-component-template/projectTemplate/.markdownlintignore b/packages/template-material/rax-single-component-template/projectTemplate/.markdownlintignore new file mode 100644 index 0000000..92ea40e --- /dev/null +++ b/packages/template-material/rax-single-component-template/projectTemplate/.markdownlintignore @@ -0,0 +1,7 @@ +node_modules/ +build/ +dist/ +es/ +lib/ +miniapp-preview/ +types/ diff --git a/packages/template-material/rax-single-component-template/projectTemplate/.npmignore b/packages/template-material/rax-single-component-template/projectTemplate/.npmignore new file mode 100644 index 0000000..5947400 --- /dev/null +++ b/packages/template-material/rax-single-component-template/projectTemplate/.npmignore @@ -0,0 +1,3 @@ +miniapp-preview/ +.idea/ +.vscode/ diff --git a/packages/template-material/rax-single-component-template/projectTemplate/.prettierignore b/packages/template-material/rax-single-component-template/projectTemplate/.prettierignore new file mode 100644 index 0000000..ad20c13 --- /dev/null +++ b/packages/template-material/rax-single-component-template/projectTemplate/.prettierignore @@ -0,0 +1,13 @@ +node_modules/ +build/ +dist/ +es/ +lib/ +umd/ +miniapp-preview/ +types/ +.cachefile/ +deps.json +package-lock.json +yarn.lock +miniapp/**/*.axml diff --git a/packages/template-material/rax-single-component-template/projectTemplate/.prettierrc.js b/packages/template-material/rax-single-component-template/projectTemplate/.prettierrc.js new file mode 100644 index 0000000..9353f63 --- /dev/null +++ b/packages/template-material/rax-single-component-template/projectTemplate/.prettierrc.js @@ -0,0 +1,8 @@ +module.exports = { + printWidth: 100, + tabWidth: 2, + semi: true, + singleQuote: true, + trailingComma: 'all', + arrowParens: 'always', +}; diff --git a/packages/template-material/rax-single-component-template/projectTemplate/.stylelintignore b/packages/template-material/rax-single-component-template/projectTemplate/.stylelintignore new file mode 100644 index 0000000..92b284c --- /dev/null +++ b/packages/template-material/rax-single-component-template/projectTemplate/.stylelintignore @@ -0,0 +1,11 @@ +node_modules/ +build/ +dist/ +es/ +lib/ +miniapp-preview/ +types/ +**/*.min.css +**/*-min.css +**/*.bundle.css + diff --git a/packages/template-material/rax-single-component-template/projectTemplate/.stylelintrc.js b/packages/template-material/rax-single-component-template/projectTemplate/.stylelintrc.js new file mode 100644 index 0000000..74a5a54 --- /dev/null +++ b/packages/template-material/rax-single-component-template/projectTemplate/.stylelintrc.js @@ -0,0 +1,3 @@ +module.exports = { + extends: 'stylelint-config-ali', +}; diff --git a/packages/template-material/rax-single-component-template/projectTemplate/CHANGELOG.md b/packages/template-material/rax-single-component-template/projectTemplate/CHANGELOG.md new file mode 100644 index 0000000..e69de29 diff --git a/packages/template-material/rax-single-component-template/projectTemplate/README.md b/packages/template-material/rax-single-component-template/projectTemplate/README.md new file mode 100644 index 0000000..deff6d1 --- /dev/null +++ b/packages/template-material/rax-single-component-template/projectTemplate/README.md @@ -0,0 +1,28 @@ +--- +title: 示例组件 +description: 组件描述 +category: General +--- + +一个面向移动端的跨端单组件包 + +## 使用 + +```bash +npm install <%= projectName %> --save +``` + + +## 调试 +启动调试 + +```bash +npm start +``` + +构建 + +```bash +npm run build +``` + diff --git a/packages/template-material/rax-single-component-template/projectTemplate/_gitignore b/packages/template-material/rax-single-component-template/projectTemplate/_gitignore new file mode 100644 index 0000000..ebdca34 --- /dev/null +++ b/packages/template-material/rax-single-component-template/projectTemplate/_gitignore @@ -0,0 +1,101 @@ +.DS_Store + +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +package-lock.json +yarn.lock +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# TypeScript v1 declaration files +typings/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env + +# next.js build output +.next + +# special demo file for locally reappear issue +docs/**/demo/issues.md + +precss.css +.sass-cache/ +scripts/server-remote +__html/ +umd/ +es/ +lib/ +types/ +demos/ +!scripts/demos/ +/platform +build/ +test/coverage/ +test/**/coverage/ +mochawesome-report/ +coverage/ +gemini-report/ +.idea/ +.vscode/ +*.iml +.tea/ +/platform/ +react/ +platform/ +dist/ +_docs_/ +doc.json +meet-react/ +miniapp-preview/ +.tmp/ + +.umi/ +.umi-production/ \ No newline at end of file diff --git a/packages/template-material/rax-single-component-template/projectTemplate/_npmignore b/packages/template-material/rax-single-component-template/projectTemplate/_npmignore new file mode 100644 index 0000000..5947400 --- /dev/null +++ b/packages/template-material/rax-single-component-template/projectTemplate/_npmignore @@ -0,0 +1,3 @@ +miniapp-preview/ +.idea/ +.vscode/ diff --git a/packages/template-material/rax-single-component-template/projectTemplate/build.json b/packages/template-material/rax-single-component-template/projectTemplate/build.json new file mode 100644 index 0000000..43b5762 --- /dev/null +++ b/packages/template-material/rax-single-component-template/projectTemplate/build.json @@ -0,0 +1,15 @@ +{ + "type": "rax", + "inlineStyle": false, + "targets": ["web", "miniapp", "wechat-miniprogram"], + "library": "MyBizComponent", + "plugins": [ + [ + "build-plugin-component-multiple", + { + "multiple": false + } + ], + "build-plugin-doc-multiple" + ] +} diff --git a/packages/template-material/rax-single-component-template/projectTemplate/build.lowcode.js b/packages/template-material/rax-single-component-template/projectTemplate/build.lowcode.js new file mode 100644 index 0000000..9a24249 --- /dev/null +++ b/packages/template-material/rax-single-component-template/projectTemplate/build.lowcode.js @@ -0,0 +1,17 @@ +const { library } = require('./build.json'); + +module.exports = { + alias: { + '@': './src', + }, + plugins: [ + [ + '@alifd/build-plugin-lowcode', + { + library, + baseLibrary: 'rax', + engineScope: "<%= arguments[0].engineScope || '@ali' %>" + } + ], + ], +}; diff --git a/packages/template-material/rax-single-component-template/projectTemplate/commitlint.config.js b/packages/template-material/rax-single-component-template/projectTemplate/commitlint.config.js new file mode 100644 index 0000000..52f3b75 --- /dev/null +++ b/packages/template-material/rax-single-component-template/projectTemplate/commitlint.config.js @@ -0,0 +1,3 @@ +module.exports = { + extends: ['ali'], +}; diff --git a/packages/template-material/rax-single-component-template/projectTemplate/demo/advance.jsx b/packages/template-material/rax-single-component-template/projectTemplate/demo/advance.jsx new file mode 100644 index 0000000..1813dc6 --- /dev/null +++ b/packages/template-material/rax-single-component-template/projectTemplate/demo/advance.jsx @@ -0,0 +1,12 @@ +/** + * @title 高级 + * @desc 这是一个高级 demo + * @order 2 + */ +/* @jsx createElement */ +import { createElement } from 'rax'; +import Component from '<%= projectName %>'; + +export default () => { + return 高级组件示例; +}; diff --git a/packages/template-material/rax-single-component-template/projectTemplate/demo/basic.jsx b/packages/template-material/rax-single-component-template/projectTemplate/demo/basic.jsx new file mode 100644 index 0000000..e392425 --- /dev/null +++ b/packages/template-material/rax-single-component-template/projectTemplate/demo/basic.jsx @@ -0,0 +1,12 @@ +/** + * @title 基础 + * @desc 这是一个基础 demo + * @order 1 + */ +/* @jsx createElement */ +import { createElement } from 'rax'; +import Component from '<%= projectName %>'; + +export default () => { + return 组件示例; +}; diff --git a/packages/template-material/rax-single-component-template/projectTemplate/f2elint.config.js b/packages/template-material/rax-single-component-template/projectTemplate/f2elint.config.js new file mode 100644 index 0000000..ff8f05d --- /dev/null +++ b/packages/template-material/rax-single-component-template/projectTemplate/f2elint.config.js @@ -0,0 +1,5 @@ +module.exports = { + enableStylelint: true, + enableMarkdownlint: true, + enablePrettier: true, +}; diff --git a/packages/template-material/rax-single-component-template/projectTemplate/package.json b/packages/template-material/rax-single-component-template/projectTemplate/package.json new file mode 100644 index 0000000..ec2615e --- /dev/null +++ b/packages/template-material/rax-single-component-template/projectTemplate/package.json @@ -0,0 +1,107 @@ +{ + "name": "<%= projectName %>", + "version": "0.1.0", + "description": "", + "main": "lib/index.js", + "module": "es/index.js", + "unpkg": "dist/index.umd.js", + "typings": "types/index.d.ts", + "files": [ + "build", + "dist", + "lib", + "es", + "types" + ], + "logo": "https://gw.alicdn.com/imgextra/i2/O1CN01XA2RsI1fjjzUmc2kh_!!6000000004043-2-tps-243-240.png", + "scripts": { + "start": "build-scripts start", + "build": "build-scripts build", + "lowcode:dev": "build-scripts start --config ./build.lowcode.js", + "lowcode:build": "build-scripts build --config ./build.lowcode.js", + "lint": "fie lint", + "f2elint-scan": "f2elint scan", + "f2elint-fix": "f2elint fix", + "prepublishOnly": "npm run build && npm run lowcode:build" + }, + "keywords": [ + "Rax" + ], + "husky": { + "hooks": { + "pre-commit": "f2elint commit-file-scan", + "commit-msg": "f2elint commit-msg-scan" + } + }, + "lint-staged": { + "src/**/*.(ts|tsx)": [ + "tslint --fix", + "prettier --write", + "git add" + ], + "docs/**/*.md": [ + "prettier --write", + "git add" + ], + "@(docs|src)/**/*.@(js|jsx|ts|tsx)": [ + "eslint --fix", + "prettier --write", + "git add" + ] + }, + "peerDependencies": { + "rax": "^1.0.11" + }, + "devDependencies": { + "@alib/build-scripts": "^0.1.20", + "@alifd/build-plugin-lowcode": "^0.3.0", + "@types/rax": "^1.0.5", + "build-plugin-component-multiple": "^1.0.0-beta.13", + "build-plugin-doc-multiple": "^1.0.0-beta.8", + "eslint-plugin-jsx-plus": "^0.1.0", + "driver-universal": "^3.1.0", + "execa": "^2.0.5", + "expect.js": "^0.3.1", + "f2elint": "^1.2.0", + "husky": "^3.0.1", + "iceworks": "^3.4.5", + "jest": "^24.8.0", + "jest-cli": "^24.8.0", + "lint-staged": "^9.4.2", + "prettier": "^1.19.1", + "rax": "^1.0.11", + "ts-loader": "^6.0.4", + "ts-mocha": "^8.0.0", + "ts-node": "^9.1.1", + "tslint": "^5.18.0", + "tslint-config-ali": "^0.2.4", + "tslint-config-prettier": "^1.18.0", + "tslint-plugin-prettier": "^2.0.1", + "typescript": "^3.5.3" + }, + "dependencies": { + "rax-image": "^2.3.2", + "rax-text": "^2.1.2", + "rax-view": "^2.2.0", + "tslib": "^2.0.1" + }, + "resolutions": { + "webpack": "^4.46.x" + }, + "nyc": { + "include": "src" + }, + <% if (!_.isUndefined((arguments[0] || {}).group)) { %> + "publishConfig": { + "registry": "https://registry.npm.alibaba-inc.com" + }, + "homepage": "https://mc-fusion.alibaba-inc.com/unpkg/<%= projectName %>/build/index.html", + "repository": { + "type": "git", + "url": "git@gitlab.alibaba-inc.com:<%=group%>/<%=project%>.git" + }, + <% } %> + "componentConfig": { + "isComponentLibrary": 0 + } +} diff --git a/packages/template-material/rax-single-component-template/projectTemplate/src/component.tsx b/packages/template-material/rax-single-component-template/projectTemplate/src/component.tsx new file mode 100644 index 0000000..487db3c --- /dev/null +++ b/packages/template-material/rax-single-component-template/projectTemplate/src/component.tsx @@ -0,0 +1,38 @@ +import { createElement, forwardRef, ForwardRefRenderFunction } from 'rax'; +import View from 'rax-view'; +import Text from 'rax-text'; +import './style.scss'; + +export interface ComponentProps { + /** + * 名称 + */ + name: string; + /** + * 子节点 + */ + children: any; +} + +/** + * 示例组件 + * @param props + * @constructor + */ +function ExampleComponent(props: ComponentProps, ref: any) { + return ( + + {props.name || ''} + {props.children} + + ); +} + +const RefComponent = forwardRef(ExampleComponent as ForwardRefRenderFunction); + +RefComponent.defaultProps = { + name: '标题', +}; +RefComponent.displayName = 'ExampleComponent'; + +export default RefComponent; diff --git a/packages/template-material/rax-single-component-template/projectTemplate/src/index.ts b/packages/template-material/rax-single-component-template/projectTemplate/src/index.ts new file mode 100644 index 0000000..23ea0fb --- /dev/null +++ b/packages/template-material/rax-single-component-template/projectTemplate/src/index.ts @@ -0,0 +1,3 @@ +import Component, { ComponentProps } from './component'; + +export { Component as default, ComponentProps }; diff --git a/packages/template-material/rax-single-component-template/projectTemplate/src/style.scss b/packages/template-material/rax-single-component-template/projectTemplate/src/style.scss new file mode 100644 index 0000000..9897c75 --- /dev/null +++ b/packages/template-material/rax-single-component-template/projectTemplate/src/style.scss @@ -0,0 +1,17 @@ +.container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: 200rpx; +} + +.name { + color: #222; + font-size: 80rpx; +} + +.content { + color: #666; + font-size: 40rpx; +} diff --git a/packages/template-material/rax-single-component-template/projectTemplate/tsconfig.json b/packages/template-material/rax-single-component-template/projectTemplate/tsconfig.json new file mode 100644 index 0000000..7c71b38 --- /dev/null +++ b/packages/template-material/rax-single-component-template/projectTemplate/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "module": "ESNext", + "target": "ESNext", + "jsx": "preserve", + "jsxFactory": "createElement", + "declaration": false, + "outDir": "./lib", + "removeComments": true, + "strict": false, + "noImplicitAny": false, + "noImplicitThis": false, + "preserveConstEnums": true, + "noUnusedLocals": true, + "noUnusedParameters": false, + "noImplicitReturns": true, + "moduleResolution": "node", + "baseUrl": "./", + "esModuleInterop": true, + "experimentalDecorators": true, + "importHelpers": true + }, + "include": ["src"], + "exclude": ["node_modules", "lib"] +} diff --git a/packages/template-material/rax-single-component-template/projectTemplate/tslint.json b/packages/template-material/rax-single-component-template/projectTemplate/tslint.json new file mode 100644 index 0000000..24b4e52 --- /dev/null +++ b/packages/template-material/rax-single-component-template/projectTemplate/tslint.json @@ -0,0 +1,24 @@ +{ + "extends": ["tslint-config-ali", "tslint-config-prettier"], + "rules": { + "no-implicit-dependencies": [true, "dev"], + "quotemark": [true, "single", "jsx-double"], + "no-empty": [true, "allow-empty-catch", "allow-empty-functions"], + "no-console": [true, "log"], + "variable-name": [ + false, + "check-format", + "allow-leading-underscore", + "allow-trailing-underscore", + "allow-pascal-case" + ], + "only-arrow-functions": false, + "object-literal-sort-keys": false, + "ordered-imports": false, + "interface-name": false, + "no-boolean-literal-compare": false + }, + "linterOptions": { + "exclude": ["node_modules/**"] + } +} diff --git a/packages/template-material/rax-single-component-template/tsconfig.json b/packages/template-material/rax-single-component-template/tsconfig.json new file mode 100644 index 0000000..fb2a43d --- /dev/null +++ b/packages/template-material/rax-single-component-template/tsconfig.json @@ -0,0 +1,29 @@ +{ + "compilerOptions": { + "rootDir": "src", + "outDir": "lib", + "module": "commonjs", + "moduleResolution": "node", + "strict": true, + "strictNullChecks": false, + "jsx": "react", + "target": "esnext", + "experimentalDecorators": true, + "skipLibCheck": true, + "declaration": true, + "lib": [ + "dom", + "es5", + "es6", + "es7", + "scripthost", + "es2018.promise" + ], + "emitDecoratorMetadata": true, + "preserveConstEnums": true, + "allowSyntheticDefaultImports": true + }, + "include": [ + "src/**/*" + ] +} \ No newline at end of file diff --git a/packages/template-material/react-multiple-component-template/.gitignore b/packages/template-material/react-multiple-component-template/.gitignore new file mode 100644 index 0000000..3180816 --- /dev/null +++ b/packages/template-material/react-multiple-component-template/.gitignore @@ -0,0 +1,97 @@ +.DS_Store + +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +package-lock.json +yarn.lock +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# TypeScript v1 declaration files +typings/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env + +# next.js build output +.next + +# special demo file for locally reappear issue +docs/**/demo/issues.md + +precss.css +.sass-cache/ +scripts/server-remote +__html/ +umd/ +es/ +lib/ +types/ +demos/ +!scripts/demos/ +/platform +build/ +test/coverage/ +test/**/coverage/ +mochawesome-report/ +coverage/ +gemini-report/ +.idea/ +.vscode/ +*.iml +.tea/ +/platform/ +react/ +platform/ +dist/ +_docs_/ +doc.json +meet-react/ +miniapp-preview/ diff --git a/packages/template-material/react-multiple-component-template/README.md b/packages/template-material/react-multiple-component-template/README.md new file mode 100644 index 0000000..69c1887 --- /dev/null +++ b/packages/template-material/react-multiple-component-template/README.md @@ -0,0 +1 @@ +# PC大包组件模板 diff --git a/packages/template-material/react-multiple-component-template/commitlint.config.js b/packages/template-material/react-multiple-component-template/commitlint.config.js new file mode 100644 index 0000000..52f3b75 --- /dev/null +++ b/packages/template-material/react-multiple-component-template/commitlint.config.js @@ -0,0 +1,3 @@ +module.exports = { + extends: ['ali'], +}; diff --git a/packages/template-material/react-multiple-component-template/f2elint.config.js b/packages/template-material/react-multiple-component-template/f2elint.config.js new file mode 100644 index 0000000..9cdb28f --- /dev/null +++ b/packages/template-material/react-multiple-component-template/f2elint.config.js @@ -0,0 +1,5 @@ +module.exports = { + enableStylelint: false, + enableMarkdownlint: false, + enablePrettier: true, +}; diff --git a/packages/template-material/react-multiple-component-template/package.json b/packages/template-material/react-multiple-component-template/package.json new file mode 100644 index 0000000..86190d1 --- /dev/null +++ b/packages/template-material/react-multiple-component-template/package.json @@ -0,0 +1,26 @@ +{ + "name": "@alilc/react-multiple-component-template", + "version": "0.1.3", + "description": "react 组件库模板", + "files": [ + "projectTemplate/", + "singleComponentTemplate/", + "singleDocTemplate/" + ], + "scripts": { + "f2elint-scan": "fie lint", + "f2elint-fix": "fie lint -fix" + }, + "author": "", + "license": "MIT", + "dependencies": { + }, + "devDependencies": { + }, + "husky": { + "hooks": { + "pre-commit": "f2elint commit-file-scan", + "commit-msg": "f2elint commit-msg-scan" + } + } +} diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/.commitlintrc b/packages/template-material/react-multiple-component-template/projectTemplate/.commitlintrc new file mode 100644 index 0000000..96654a0 --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/.commitlintrc @@ -0,0 +1,25 @@ +{ + "rules": { + "header-max-length": [2, "always", 72], + "subject-empty": [2, "never"], + "subject-full-stop": [2, "never", "."], + "type-empty": [2, "never"], + "type-case": [2, "always", "lower-case"], + "type-enum": [2, "always", + [ + "build", + "chore", + "ci", + "docs", + "feat", + "fix", + "perf", + "refactor", + "revert", + "style", + "test", + "temp" + ] + ] + } +} diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/.editorconfig b/packages/template-material/react-multiple-component-template/projectTemplate/.editorconfig new file mode 100644 index 0000000..3192996 --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/.editorconfig @@ -0,0 +1,13 @@ +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true +quote_type = single + +[*.md] +trim_trailing_whitespace = false diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/.eslintignore b/packages/template-material/react-multiple-component-template/projectTemplate/.eslintignore new file mode 100644 index 0000000..ec02607 --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/.eslintignore @@ -0,0 +1,6 @@ +node_modules/ +build/ +dist/ +**/*.min.js +**/*-min.js +**/*.bundle.js diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/.eslintrc.js b/packages/template-material/react-multiple-component-template/projectTemplate/.eslintrc.js new file mode 100644 index 0000000..1744b9b --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/.eslintrc.js @@ -0,0 +1,8 @@ +module.exports = { + extends: [ + 'eslint-config-ali/typescript/react', + "prettier", + 'prettier/@typescript-eslint', + 'prettier/react', + ], +}; diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/.gitignore b/packages/template-material/react-multiple-component-template/projectTemplate/.gitignore new file mode 100644 index 0000000..e3bebec --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/.gitignore @@ -0,0 +1,98 @@ +.DS_Store + +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +package-lock.json +yarn.lock +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# TypeScript v1 declaration files +typings/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env + +# next.js build output +.next + +# special demo file for locally reappear issue +docs/**/demo/issues.md + +precss.css +.sass-cache/ +scripts/server-remote +__html/ +umd/ +es/ +lib/ +types/ +demos/ +!scripts/demos/ +/platform +build/ +test/coverage/ +test/**/coverage/ +mochawesome-report/ +coverage/ +gemini-report/ +.idea/ +.vscode/ +*.iml +.tea/ +/platform/ +react/ +platform/ +dist/ +_docs_/ +doc.json +meet-react/ +miniapp-preview/ +.tmp/ diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/.markdownlint.json b/packages/template-material/react-multiple-component-template/projectTemplate/.markdownlint.json new file mode 100644 index 0000000..c859bfb --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/.markdownlint.json @@ -0,0 +1,3 @@ +{ + "extends": "markdownlint-config-ali" +} diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/.markdownlintignore b/packages/template-material/react-multiple-component-template/projectTemplate/.markdownlintignore new file mode 100644 index 0000000..a40f6e3 --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/.markdownlintignore @@ -0,0 +1,4 @@ +node_modules/ +build/ +dist/ + diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/.npmignore b/packages/template-material/react-multiple-component-template/projectTemplate/.npmignore new file mode 100644 index 0000000..66f8fb5 --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/.npmignore @@ -0,0 +1,2 @@ +.idea/ +.vscode/ diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/.prettierignore b/packages/template-material/react-multiple-component-template/projectTemplate/.prettierignore new file mode 100644 index 0000000..98de8f2 --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/.prettierignore @@ -0,0 +1,11 @@ +node_modules/ +lib/ +build/ +dist/ +umd/ +es/ +.cachefile/ +deps.json +package-lock.json +yarn.lock +miniapp/**/*.axml diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/.prettierrc.js b/packages/template-material/react-multiple-component-template/projectTemplate/.prettierrc.js new file mode 100644 index 0000000..9353f63 --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/.prettierrc.js @@ -0,0 +1,8 @@ +module.exports = { + printWidth: 100, + tabWidth: 2, + semi: true, + singleQuote: true, + trailingComma: 'all', + arrowParens: 'always', +}; diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/.stylelintignore b/packages/template-material/react-multiple-component-template/projectTemplate/.stylelintignore new file mode 100644 index 0000000..89707c0 --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/.stylelintignore @@ -0,0 +1,7 @@ +node_modules/ +build/ +dist/ +**/*.min.css +**/*-min.css +**/*.bundle.css + diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/.stylelintrc.js b/packages/template-material/react-multiple-component-template/projectTemplate/.stylelintrc.js new file mode 100644 index 0000000..74a5a54 --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/.stylelintrc.js @@ -0,0 +1,3 @@ +module.exports = { + extends: 'stylelint-config-ali', +}; diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/CHANGELOG.md b/packages/template-material/react-multiple-component-template/projectTemplate/CHANGELOG.md new file mode 100644 index 0000000..e69de29 diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/README.md b/packages/template-material/react-multiple-component-template/projectTemplate/README.md new file mode 100644 index 0000000..4f4be1c --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/README.md @@ -0,0 +1,17 @@ +# <%= projectName %> + +一个面向 PC 的业务组件库 + +## 调试 +启动调试 + +``` +npm run lowcode:dev # 打开开发环境，运行所有组件 +``` + +构建 + +``` +npm run lowcode:build +``` + diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/_gitignore b/packages/template-material/react-multiple-component-template/projectTemplate/_gitignore new file mode 100644 index 0000000..ebdca34 --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/_gitignore @@ -0,0 +1,101 @@ +.DS_Store + +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +package-lock.json +yarn.lock +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# TypeScript v1 declaration files +typings/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env + +# next.js build output +.next + +# special demo file for locally reappear issue +docs/**/demo/issues.md + +precss.css +.sass-cache/ +scripts/server-remote +__html/ +umd/ +es/ +lib/ +types/ +demos/ +!scripts/demos/ +/platform +build/ +test/coverage/ +test/**/coverage/ +mochawesome-report/ +coverage/ +gemini-report/ +.idea/ +.vscode/ +*.iml +.tea/ +/platform/ +react/ +platform/ +dist/ +_docs_/ +doc.json +meet-react/ +miniapp-preview/ +.tmp/ + +.umi/ +.umi-production/ \ No newline at end of file diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/_npmignore b/packages/template-material/react-multiple-component-template/projectTemplate/_npmignore new file mode 100644 index 0000000..5947400 --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/_npmignore @@ -0,0 +1,3 @@ +miniapp-preview/ +.idea/ +.vscode/ diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/build.json b/packages/template-material/react-multiple-component-template/projectTemplate/build.json new file mode 100644 index 0000000..c67549d --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/build.json @@ -0,0 +1,16 @@ +{ + "library": "BizComps", + "libraryTarget": "umd", + "sourceMap": true, + "alias": { + "@": "./src/components" + }, + "plugins": [ + [ + "build-plugin-component", + { + "themePackage": "@alifd/theme-2" + } + ] + ] +} diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/build.lowcode.js b/packages/template-material/react-multiple-component-template/projectTemplate/build.lowcode.js new file mode 100644 index 0000000..6536047 --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/build.lowcode.js @@ -0,0 +1,16 @@ +const { library } = require('./build.json'); + +module.exports = { + alias: { + '@': './src', + }, + plugins: [ + [ + '@alifd/build-plugin-lowcode', + { + library, + engineScope: "<%= arguments[0].engineScope || '@ali' %>" + }, + ], + ], +}; diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/commitlint.config.js b/packages/template-material/react-multiple-component-template/projectTemplate/commitlint.config.js new file mode 100644 index 0000000..52f3b75 --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/commitlint.config.js @@ -0,0 +1,3 @@ +module.exports = { + extends: ['ali'], +}; diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/docs/.dumi/theme/builtins/API.tsx b/packages/template-material/react-multiple-component-template/projectTemplate/docs/.dumi/theme/builtins/API.tsx new file mode 100644 index 0000000..6cdc6c5 --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/docs/.dumi/theme/builtins/API.tsx @@ -0,0 +1,74 @@ +import React, { useContext } from 'react'; +import type { IApiComponentProps } from 'dumi/theme'; +import { context, useApiData } from 'dumi/theme'; + +import './index.scss'; + +const LOCALE_TEXTS = { + 'zh-CN': { + name: '参数', + description: '说明', + type: '类型', + default: '默认值', + required: '(必选)', + }, + 'en-US': { + name: 'Name', + description: 'Description', + type: 'Type', + default: 'Default', + required: '(required)', + }, +}; + +export default ({ identifier, export: expt }: IApiComponentProps) => { + const data = useApiData(identifier); + const { locale = '' } = useContext(context); + + const texts = /^zh|cn$/i.test(locale) ? LOCALE_TEXTS['zh-CN'] : LOCALE_TEXTS['en-US']; + + const defaultComponentName = identifier + ?.replace(/-([a-z])/g, function (all, i) { + return i.toUpperCase(); + }) + ?.replace(/^\S/, (s) => s.toUpperCase()); + + return ( + <> + {data && ( + <> +

+ + {expt === 'default' ? defaultComponentName : expt} +

+ + + + + + + + + + + {data[expt]?.map((row) => ( + + + + + + + ))} + +
{texts.name}{texts.description}{texts.type}{texts.default}
{row.identifier}{row.description || '--'} + {row.type} + + {row.default || (row.required && texts.required) || '--'} +
+ + )} + + ); +}; diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/docs/.dumi/theme/builtins/index.scss b/packages/template-material/react-multiple-component-template/projectTemplate/docs/.dumi/theme/builtins/index.scss new file mode 100644 index 0000000..433f7c7 --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/docs/.dumi/theme/builtins/index.scss @@ -0,0 +1,57 @@ +.apiContainer { + border: none !important; + .apiTitle{ + text-transform: capitalize; + } + thead tr { + th { + background: #fff; + border: none; + font-weight: 700; + text-align: left; + word-wrap: break-word; + letter-spacing: 0.2px; + padding: 4px 0 10px; + border-bottom: 2px solid #333; + font-size: 14px; + &:first-child { + padding-left: 8px; + } + } + } + tbody tr { + td { + border: none; + border-bottom: 1px solid #ccc; + text-align: left; + margin: 0; + padding: 18px 18px 18px 0; + color: #666; + word-wrap: break-word; + line-height: 24px; + letter-spacing: 0.2px; + font-size: 14px; + code { + color: #666; + word-wrap: break-word; + line-height: 24px; + letter-spacing: 0.2px; + font-size: 13px; + } + &:last-child { + min-width: 72px; + } + &:first-child{ + color: #595959; + font-weight: 600; + white-space: nowrap; + padding-left: 8px; + font-size: 14px; + } + } + } +} + +.__dumi-default-layout-footer-meta { + border: none; +} diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/docs/.dumi/theme/layout.tsx b/packages/template-material/react-multiple-component-template/projectTemplate/docs/.dumi/theme/layout.tsx new file mode 100644 index 0000000..5e71efe --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/docs/.dumi/theme/layout.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import Layout from 'dumi-theme-default/es/layout'; + +import '@/index.scss'; +import '@alifd/theme-2/dist/next.min.css'; + +export default ({ children, ...props }) => { + return {children}; +}; diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/docs/.umirc.ts b/packages/template-material/react-multiple-component-template/projectTemplate/docs/.umirc.ts new file mode 100644 index 0000000..dea3658 --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/docs/.umirc.ts @@ -0,0 +1,68 @@ +import { defineConfig } from 'dumi'; +import fs from 'fs'; +import { join } from 'path'; + +const { version } = JSON.parse(fs.readFileSync(join(__dirname, '../package.json'), 'utf8')); + +const productStyles = + '.__dumi-default-menu{display:none} .__dumi-default-layout{padding-left:58px!important}'; + +const productPath = `/<%= projectName %>@${version}/build/docs/`; + +export default defineConfig({ + // other config entry + chainWebpack(memo) { + memo.module + .rule('js') + .include.add(join(__dirname, '../')) + .end() + .exclude.add(/node_modules/); + + // 删除 dumi 内置插件 + memo.plugins.delete('friendly-error'); + memo.plugins.delete('copy'); + // 配置文件import alias + memo.resolve.alias.set('@', join(__dirname, '../src')); + memo.resolve.alias.set('@components', join(__dirname, '../src/components')); + memo.resolve.alias.set('<%= projectName %>', join(__dirname, '../src')); + }, + logo: 'https://fusion.alicdn.com/images/jdSvK6gaqaWB.png', + exportStatic: process.env.NODE_ENV === 'production' ? { htmlSuffix: true } : {}, + base: process.env.NODE_ENV === 'production' ? productPath : '/', + publicPath: process.env.NODE_ENV === 'production' ? productPath : '/', + styles: process.env.NODE_ENV === 'production' ? [productStyles] : [], + nodeModulesTransform: { + type: 'none', + exclude: [], + }, + // md文件中使用@需配置alias + alias: { + '@': join(__dirname, '../src'), + '@components': join(__dirname, '../src/components'), + '<%= projectName %>': join(__dirname, '../src'), + }, + apiParser: { + propFilter: (prop) => { + if (prop.declarations !== undefined && prop.declarations.length > 0) { + const hasPropAdditionalDescription = prop.declarations.find((declaration) => { + if (declaration.fileName.includes('node_modules')) { + return ( + declaration.fileName.includes('alifd/next') || + declaration.fileName.includes('bizcharts') + ); + } + return true; + }); + + return Boolean(hasPropAdditionalDescription); + } + return true; + }, + }, + mfsu: {}, + locales: [ + ['zh-CN', '中文'], + ['en-US', 'English'], + ], + outputPath: '../build/docs', +}); diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/docs/src/colorful-button/index.md b/packages/template-material/react-multiple-component-template/projectTemplate/docs/src/colorful-button/index.md new file mode 100644 index 0000000..740f36d --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/docs/src/colorful-button/index.md @@ -0,0 +1,21 @@ +## 何时使用 + +适合表单场景。 + +## 示例 + +```tsx +import React from 'react'; +import { ColorfulButton } from '<%= projectName %>'; + + +export default () => { + return
+ +
+}; +``` + +## API + + diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/docs/src/colorful-input/index.md b/packages/template-material/react-multiple-component-template/projectTemplate/docs/src/colorful-input/index.md new file mode 100644 index 0000000..62f6f9d --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/docs/src/colorful-input/index.md @@ -0,0 +1,21 @@ +## 何时使用 + +适合表单场景。 + +## 示例 + +```tsx +import React from 'react'; +import { ColorfulInput } from '<%= projectName %>'; + + +export default () => { + return
+ +
+}; +``` + +## API + + diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/f2elint.config.js b/packages/template-material/react-multiple-component-template/projectTemplate/f2elint.config.js new file mode 100644 index 0000000..ff8f05d --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/f2elint.config.js @@ -0,0 +1,5 @@ +module.exports = { + enableStylelint: true, + enableMarkdownlint: true, + enablePrettier: true, +}; diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/package.json b/packages/template-material/react-multiple-component-template/projectTemplate/package.json new file mode 100644 index 0000000..a8ca3d5 --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/package.json @@ -0,0 +1,80 @@ +{ + "name": "<%= projectName %>", + "version": "0.1.0", + "description": "<%= description %>", + "main": "lib/index.js", + "module": "es/index.js", + "typings": "types/index.d.ts", + "files": [ + "build", + "dist", + "lib", + "es", + "types" + ], + "scripts": { + "start": "npm run dumi", + "build": "build-scripts build", + "lowcode:dev": "build-scripts start --config ./build.lowcode.js", + "lowcode:build": "build-scripts build --config ./build.lowcode.js", + "f2elint-scan": "f2elint scan", + "f2elint-fix": "f2elint fix", + "dumi": "cross-env APP_ROOT=docs dumi dev", + "dumi:build": "cross-env APP_ROOT=docs dumi build", + "prepublishOnly": "npm run build && npm run lowcode:build && npm run dumi:build" + }, + "directories": { + "test": "test" + }, + "keywords": [ + "Fusion" + ], + "author": "fusion-team", + "license": "MIT", + "husky": { + "hooks": { + "pre-commit": "f2elint commit-file-scan", + "commit-msg": "f2elint commit-msg-scan" + } + }, + "lint-staged": { + "**/*.{js,jsx,ts,tsx,vue}": "f2elint exec eslint", + "**/*.{css,scss,less,acss}": "f2elint exec stylelint" + }, + "peerDependencies": { + "react": "^16.x", + "react-dom": "^16.x", + "moment": "latest" + }, + "devDependencies": { + "@alib/build-scripts": "^0.1.3", + "@alifd/build-plugin-lowcode": "^0.3.0", + "@alifd/theme-2": "^0.4.0", + "@types/react": "^16.14.24", + "@types/react-dom": "^16.9.4", + "build-plugin-component": "^1.12.1", + "build-plugin-fusion": "^0.1.0", + "cross-env": "^7.0.3", + "@umijs/plugin-sass": "^1.1.1", + "dumi": "^1.1.49", + "dumi-theme-default": "^1.1.24", + "f2elint": "^1.2.0", + "node-sass": "^8.0.0" + }, + "dependencies": { + "moment": "^2.29.4", + "@alifd/next": "^1.25.27", + "prop-types": "^15.5.8", + "react": "^16.x", + "react-dom": "^16.x" + }, + "acceptDependencies": { + "webpack": "^4.46.x" + }, + "resolutions": { + "webpack": "^4.46.x" + }, + "componentConfig": { + "isComponentLibrary": true + } +} diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/src/components/colorful-button/colorful-button.tsx b/packages/template-material/react-multiple-component-template/projectTemplate/src/components/colorful-button/colorful-button.tsx new file mode 100644 index 0000000..7369743 --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/src/components/colorful-button/colorful-button.tsx @@ -0,0 +1,36 @@ +import * as React from 'react'; +import { createElement } from 'react'; +import { Button } from '@alifd/next'; +// import { ButtonProps } from '@alifd/next/types/button'; +import './index.scss'; + +export interface ColorfulButtonProps { + /** + * 类型 + */ + type?: "primary" | "secondary" | "normal"; + color?: 'string'; + style?: 'object' +} + +const ColorfulButton: React.FC = function ColorfulButton({ + type = 'primary', + color, + style = {}, + ...otherProps +}) { + const _style = style || {}; + if (color) { + _style.backgroundColor = color; + } + const _otherProps = otherProps || {}; + _otherProps.style = _style; + return ( + + ); +}; + +ColorfulButton.displayName = 'ColorfulButton'; +export default ColorfulButton; + + diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/src/components/colorful-button/index.scss b/packages/template-material/react-multiple-component-template/projectTemplate/src/components/colorful-button/index.scss new file mode 100644 index 0000000..35c2a38 --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/src/components/colorful-button/index.scss @@ -0,0 +1,5 @@ +@import '../../variables.scss'; + +#{$biz-css-prefix}-colorful-button { + border: 2px dashed blue; +} diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/src/components/colorful-button/index.tsx b/packages/template-material/react-multiple-component-template/projectTemplate/src/components/colorful-button/index.tsx new file mode 100644 index 0000000..44bffc9 --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/src/components/colorful-button/index.tsx @@ -0,0 +1,4 @@ +import ColorfulButton from './colorful-button'; + +export type { ColorfulButtonProps } from './colorful-button'; +export default ColorfulButton; diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/src/components/colorful-input/colorful-input.tsx b/packages/template-material/react-multiple-component-template/projectTemplate/src/components/colorful-input/colorful-input.tsx new file mode 100644 index 0000000..0f41bb7 --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/src/components/colorful-input/colorful-input.tsx @@ -0,0 +1,28 @@ +import * as React from 'react'; +import { createElement } from 'react'; +import { Input } from '@alifd/next'; +import { bizCssPrefix } from '../../variables'; +import './index.scss'; + +export interface ColorfulInputProps { + color?: 'string'; + style?: 'object' +} + +const ColorfulInput: React.FC = function ColorfulInput({ + color, + style = {}, + ...otherProps +}) { + const _style = style || {}; + if (color) { + _style.backgroundColor = color; + } + const _otherProps = otherProps || {}; + _otherProps.style = _style; + return ( + + ); +}; + +export default ColorfulInput; diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/src/components/colorful-input/index.scss b/packages/template-material/react-multiple-component-template/projectTemplate/src/components/colorful-input/index.scss new file mode 100644 index 0000000..35c2a38 --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/src/components/colorful-input/index.scss @@ -0,0 +1,5 @@ +@import '../../variables.scss'; + +#{$biz-css-prefix}-colorful-button { + border: 2px dashed blue; +} diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/src/components/colorful-input/index.tsx b/packages/template-material/react-multiple-component-template/projectTemplate/src/components/colorful-input/index.tsx new file mode 100644 index 0000000..fd371d9 --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/src/components/colorful-input/index.tsx @@ -0,0 +1,4 @@ +import ColorfulInput from './colorful-input'; + +export type { ColorfulInputProps } from './colorful-input'; +export default ColorfulInput; diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/src/index.scss b/packages/template-material/react-multiple-component-template/projectTemplate/src/index.scss new file mode 100644 index 0000000..89f68d2 --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/src/index.scss @@ -0,0 +1,2 @@ +@import './components/colorful-button/index.scss'; +@import './components/colorful-input/index.scss'; diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/src/index.tsx b/packages/template-material/react-multiple-component-template/projectTemplate/src/index.tsx new file mode 100644 index 0000000..d4f9446 --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/src/index.tsx @@ -0,0 +1,11 @@ +export type { ColorfulButtonProps } from './components/colorful-button'; +export { default as ColorfulButton } from './components/colorful-button'; + +export type { ColorfulInputProps } from './components/colorful-input'; +export { default as ColorfulInput } from './components/colorful-input'; + +const bizCssPrefix = 'bizpack'; + +export { + bizCssPrefix +} diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/src/variables.scss b/packages/template-material/react-multiple-component-template/projectTemplate/src/variables.scss new file mode 100644 index 0000000..3f74226 --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/src/variables.scss @@ -0,0 +1,3 @@ +@import '~@alifd/next/variables.scss'; + +$biz-css-prefix: '.bizpack'; diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/src/variables.tsx b/packages/template-material/react-multiple-component-template/projectTemplate/src/variables.tsx new file mode 100644 index 0000000..5ffa6c7 --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/src/variables.tsx @@ -0,0 +1,3 @@ +const bizCssPrefix = 'bizpack'; + +export { bizCssPrefix }; diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/tsconfig.json b/packages/template-material/react-multiple-component-template/projectTemplate/tsconfig.json new file mode 100644 index 0000000..296912c --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "module": "ESNext", + "target": "ESNext", + "jsx": "react", + "jsxFactory": "createElement", + "declaration": false, + "outDir": "./lib", + "removeComments": true, + "strict": false, + "noImplicitAny": false, + "noImplicitThis": false, + "preserveConstEnums": true, + "noUnusedLocals": true, + "noUnusedParameters": false, + "noImplicitReturns": true, + "moduleResolution": "node", + "baseUrl": "./", + "esModuleInterop": true, + "experimentalDecorators": true, + "importHelpers": true + }, + "include": ["src"], + "exclude": ["node_modules", "lib"] +} diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/tslint.json b/packages/template-material/react-multiple-component-template/projectTemplate/tslint.json new file mode 100644 index 0000000..24b4e52 --- /dev/null +++ b/packages/template-material/react-multiple-component-template/projectTemplate/tslint.json @@ -0,0 +1,24 @@ +{ + "extends": ["tslint-config-ali", "tslint-config-prettier"], + "rules": { + "no-implicit-dependencies": [true, "dev"], + "quotemark": [true, "single", "jsx-double"], + "no-empty": [true, "allow-empty-catch", "allow-empty-functions"], + "no-console": [true, "log"], + "variable-name": [ + false, + "check-format", + "allow-leading-underscore", + "allow-trailing-underscore", + "allow-pascal-case" + ], + "only-arrow-functions": false, + "object-literal-sort-keys": false, + "ordered-imports": false, + "interface-name": false, + "no-boolean-literal-compare": false + }, + "linterOptions": { + "exclude": ["node_modules/**"] + } +} diff --git a/packages/template-material/react-multiple-component-template/tsconfig.json b/packages/template-material/react-multiple-component-template/tsconfig.json new file mode 100644 index 0000000..fb2a43d --- /dev/null +++ b/packages/template-material/react-multiple-component-template/tsconfig.json @@ -0,0 +1,29 @@ +{ + "compilerOptions": { + "rootDir": "src", + "outDir": "lib", + "module": "commonjs", + "moduleResolution": "node", + "strict": true, + "strictNullChecks": false, + "jsx": "react", + "target": "esnext", + "experimentalDecorators": true, + "skipLibCheck": true, + "declaration": true, + "lib": [ + "dom", + "es5", + "es6", + "es7", + "scripthost", + "es2018.promise" + ], + "emitDecoratorMetadata": true, + "preserveConstEnums": true, + "allowSyntheticDefaultImports": true + }, + "include": [ + "src/**/*" + ] +} \ No newline at end of file diff --git a/packages/template-material/react-single-component-template/.devcontainer.json b/packages/template-material/react-single-component-template/.devcontainer.json new file mode 100644 index 0000000..d635f64 --- /dev/null +++ b/packages/template-material/react-single-component-template/.devcontainer.json @@ -0,0 +1,3 @@ +{ + "template": "alif2e" +} \ No newline at end of file diff --git a/packages/template-material/react-single-component-template/.editorconfig b/packages/template-material/react-single-component-template/.editorconfig new file mode 100644 index 0000000..3192996 --- /dev/null +++ b/packages/template-material/react-single-component-template/.editorconfig @@ -0,0 +1,13 @@ +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true +quote_type = single + +[*.md] +trim_trailing_whitespace = false diff --git a/packages/template-material/react-single-component-template/.eslintignore b/packages/template-material/react-single-component-template/.eslintignore new file mode 100644 index 0000000..ec02607 --- /dev/null +++ b/packages/template-material/react-single-component-template/.eslintignore @@ -0,0 +1,6 @@ +node_modules/ +build/ +dist/ +**/*.min.js +**/*-min.js +**/*.bundle.js diff --git a/packages/template-material/react-single-component-template/.eslintrc.js b/packages/template-material/react-single-component-template/.eslintrc.js new file mode 100644 index 0000000..1744b9b --- /dev/null +++ b/packages/template-material/react-single-component-template/.eslintrc.js @@ -0,0 +1,8 @@ +module.exports = { + extends: [ + 'eslint-config-ali/typescript/react', + "prettier", + 'prettier/@typescript-eslint', + 'prettier/react', + ], +}; diff --git a/packages/template-material/react-single-component-template/.gitignore b/packages/template-material/react-single-component-template/.gitignore new file mode 100644 index 0000000..f306598 --- /dev/null +++ b/packages/template-material/react-single-component-template/.gitignore @@ -0,0 +1,22 @@ +# See https://help.github.com/ignore-files/ for more about ignoring files. + +# dependencies +node_modules/ + +# production +build/ +dist/ +tmp/ +lib/ +es/ + +# misc +.idea/ +.happypack +.DS_Store +*.swp +*.dia~ + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/packages/template-material/react-single-component-template/.markdownlint.json b/packages/template-material/react-single-component-template/.markdownlint.json new file mode 100644 index 0000000..c859bfb --- /dev/null +++ b/packages/template-material/react-single-component-template/.markdownlint.json @@ -0,0 +1,3 @@ +{ + "extends": "markdownlint-config-ali" +} diff --git a/packages/template-material/react-single-component-template/.markdownlintignore b/packages/template-material/react-single-component-template/.markdownlintignore new file mode 100644 index 0000000..a40f6e3 --- /dev/null +++ b/packages/template-material/react-single-component-template/.markdownlintignore @@ -0,0 +1,4 @@ +node_modules/ +build/ +dist/ + diff --git a/packages/template-material/react-single-component-template/.prettierrc.js b/packages/template-material/react-single-component-template/.prettierrc.js new file mode 100644 index 0000000..9353f63 --- /dev/null +++ b/packages/template-material/react-single-component-template/.prettierrc.js @@ -0,0 +1,8 @@ +module.exports = { + printWidth: 100, + tabWidth: 2, + semi: true, + singleQuote: true, + trailingComma: 'all', + arrowParens: 'always', +}; diff --git a/packages/template-material/react-single-component-template/.stylelintignore b/packages/template-material/react-single-component-template/.stylelintignore new file mode 100644 index 0000000..89707c0 --- /dev/null +++ b/packages/template-material/react-single-component-template/.stylelintignore @@ -0,0 +1,7 @@ +node_modules/ +build/ +dist/ +**/*.min.css +**/*-min.css +**/*.bundle.css + diff --git a/packages/template-material/react-single-component-template/.stylelintrc.js b/packages/template-material/react-single-component-template/.stylelintrc.js new file mode 100644 index 0000000..74a5a54 --- /dev/null +++ b/packages/template-material/react-single-component-template/.stylelintrc.js @@ -0,0 +1,3 @@ +module.exports = { + extends: 'stylelint-config-ali', +}; diff --git a/packages/template-material/react-single-component-template/.vscode/extensions.json b/packages/template-material/react-single-component-template/.vscode/extensions.json new file mode 100644 index 0000000..4170a59 --- /dev/null +++ b/packages/template-material/react-single-component-template/.vscode/extensions.json @@ -0,0 +1,7 @@ +{ + "recommendations": [ + "dbaeumer.vscode-eslint", + "stylelint.vscode-stylelint", + "esbenp.prettier-vscode" + ] +} diff --git a/packages/template-material/react-single-component-template/.vscode/settings.json b/packages/template-material/react-single-component-template/.vscode/settings.json new file mode 100644 index 0000000..98f2d83 --- /dev/null +++ b/packages/template-material/react-single-component-template/.vscode/settings.json @@ -0,0 +1,11 @@ +{ + "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "vue"], + "stylelint.validate": ["css","scss","less","acss"], + "editor.codeActionsOnSave": { + "source.fixAll.eslint": true, + "source.fixAll.stylelint": true, + "source.fixAll.markdownlint": true + }, + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode" +} diff --git a/packages/template-material/react-single-component-template/README.md b/packages/template-material/react-single-component-template/README.md new file mode 100644 index 0000000..d514444 --- /dev/null +++ b/packages/template-material/react-single-component-template/README.md @@ -0,0 +1,3 @@ +## 简介 + +这是一个 pc 端-单组件模板，projectTemplate 目录下是具体的模板内容。 diff --git a/packages/template-material/react-single-component-template/commitlint.config.js b/packages/template-material/react-single-component-template/commitlint.config.js new file mode 100644 index 0000000..52f3b75 --- /dev/null +++ b/packages/template-material/react-single-component-template/commitlint.config.js @@ -0,0 +1,3 @@ +module.exports = { + extends: ['ali'], +}; diff --git a/packages/template-material/react-single-component-template/f2elint.config.js b/packages/template-material/react-single-component-template/f2elint.config.js new file mode 100644 index 0000000..ff8f05d --- /dev/null +++ b/packages/template-material/react-single-component-template/f2elint.config.js @@ -0,0 +1,5 @@ +module.exports = { + enableStylelint: true, + enableMarkdownlint: true, + enablePrettier: true, +}; diff --git a/packages/template-material/react-single-component-template/package.json b/packages/template-material/react-single-component-template/package.json new file mode 100644 index 0000000..011f2f4 --- /dev/null +++ b/packages/template-material/react-single-component-template/package.json @@ -0,0 +1,36 @@ +{ + "name": "@alilc/react-single-component-template", + "version": "0.1.2", + "description": "react 单组件模板", + "files": [ + "projectTemplate/" + ], + "main": "lib/index.js", + "module": "es/index.js", + "stylePath": "style.js", + "scripts": { + "eslint": "eslint --cache --ext .js,.jsx ./", + "eslint:fix": "npm run eslint -- --fix", + "stylelint": "stylelint \"**/*.{css,scss,less}\"", + "lint": "npm run eslint && npm run stylelint", + "f2elint-scan": "f2elint scan", + "f2elint-fix": "f2elint fix" + }, + "keywords": [ + "ice", + "react", + "component" + ], + "dependencies": {}, + "devDependencies": {}, + "peerDependencies": {}, + "componentConfig": { + "name": "ExampleComponent", + "title": "demo component", + "category": "Information" + }, + "publishConfig": { + "access": "public" + }, + "license": "MIT" +} diff --git a/packages/template-material/react-single-component-template/projectTemplate/.editorconfig b/packages/template-material/react-single-component-template/projectTemplate/.editorconfig new file mode 100644 index 0000000..3192996 --- /dev/null +++ b/packages/template-material/react-single-component-template/projectTemplate/.editorconfig @@ -0,0 +1,13 @@ +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true +quote_type = single + +[*.md] +trim_trailing_whitespace = false diff --git a/packages/template-material/react-single-component-template/projectTemplate/.eslintignore b/packages/template-material/react-single-component-template/projectTemplate/.eslintignore new file mode 100644 index 0000000..ec02607 --- /dev/null +++ b/packages/template-material/react-single-component-template/projectTemplate/.eslintignore @@ -0,0 +1,6 @@ +node_modules/ +build/ +dist/ +**/*.min.js +**/*-min.js +**/*.bundle.js diff --git a/packages/template-material/react-single-component-template/projectTemplate/.eslintrc.js b/packages/template-material/react-single-component-template/projectTemplate/.eslintrc.js new file mode 100644 index 0000000..1744b9b --- /dev/null +++ b/packages/template-material/react-single-component-template/projectTemplate/.eslintrc.js @@ -0,0 +1,8 @@ +module.exports = { + extends: [ + 'eslint-config-ali/typescript/react', + "prettier", + 'prettier/@typescript-eslint', + 'prettier/react', + ], +}; diff --git a/packages/template-material/react-single-component-template/projectTemplate/.gitignore b/packages/template-material/react-single-component-template/projectTemplate/.gitignore new file mode 100644 index 0000000..f306598 --- /dev/null +++ b/packages/template-material/react-single-component-template/projectTemplate/.gitignore @@ -0,0 +1,22 @@ +# See https://help.github.com/ignore-files/ for more about ignoring files. + +# dependencies +node_modules/ + +# production +build/ +dist/ +tmp/ +lib/ +es/ + +# misc +.idea/ +.happypack +.DS_Store +*.swp +*.dia~ + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/packages/template-material/react-single-component-template/projectTemplate/.markdownlint.json b/packages/template-material/react-single-component-template/projectTemplate/.markdownlint.json new file mode 100644 index 0000000..c859bfb --- /dev/null +++ b/packages/template-material/react-single-component-template/projectTemplate/.markdownlint.json @@ -0,0 +1,3 @@ +{ + "extends": "markdownlint-config-ali" +} diff --git a/packages/template-material/react-single-component-template/projectTemplate/.markdownlintignore b/packages/template-material/react-single-component-template/projectTemplate/.markdownlintignore new file mode 100644 index 0000000..a40f6e3 --- /dev/null +++ b/packages/template-material/react-single-component-template/projectTemplate/.markdownlintignore @@ -0,0 +1,4 @@ +node_modules/ +build/ +dist/ + diff --git a/packages/template-material/react-single-component-template/projectTemplate/.prettierrc.js b/packages/template-material/react-single-component-template/projectTemplate/.prettierrc.js new file mode 100644 index 0000000..9353f63 --- /dev/null +++ b/packages/template-material/react-single-component-template/projectTemplate/.prettierrc.js @@ -0,0 +1,8 @@ +module.exports = { + printWidth: 100, + tabWidth: 2, + semi: true, + singleQuote: true, + trailingComma: 'all', + arrowParens: 'always', +}; diff --git a/packages/template-material/react-single-component-template/projectTemplate/.stylelintignore b/packages/template-material/react-single-component-template/projectTemplate/.stylelintignore new file mode 100644 index 0000000..89707c0 --- /dev/null +++ b/packages/template-material/react-single-component-template/projectTemplate/.stylelintignore @@ -0,0 +1,7 @@ +node_modules/ +build/ +dist/ +**/*.min.css +**/*-min.css +**/*.bundle.css + diff --git a/packages/template-material/react-single-component-template/projectTemplate/.stylelintrc.js b/packages/template-material/react-single-component-template/projectTemplate/.stylelintrc.js new file mode 100644 index 0000000..74a5a54 --- /dev/null +++ b/packages/template-material/react-single-component-template/projectTemplate/.stylelintrc.js @@ -0,0 +1,3 @@ +module.exports = { + extends: 'stylelint-config-ali', +}; diff --git a/packages/template-material/react-single-component-template/projectTemplate/.vscode/extensions.json b/packages/template-material/react-single-component-template/projectTemplate/.vscode/extensions.json new file mode 100644 index 0000000..4170a59 --- /dev/null +++ b/packages/template-material/react-single-component-template/projectTemplate/.vscode/extensions.json @@ -0,0 +1,7 @@ +{ + "recommendations": [ + "dbaeumer.vscode-eslint", + "stylelint.vscode-stylelint", + "esbenp.prettier-vscode" + ] +} diff --git a/packages/template-material/react-single-component-template/projectTemplate/.vscode/settings.json b/packages/template-material/react-single-component-template/projectTemplate/.vscode/settings.json new file mode 100644 index 0000000..98f2d83 --- /dev/null +++ b/packages/template-material/react-single-component-template/projectTemplate/.vscode/settings.json @@ -0,0 +1,11 @@ +{ + "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "vue"], + "stylelint.validate": ["css","scss","less","acss"], + "editor.codeActionsOnSave": { + "source.fixAll.eslint": true, + "source.fixAll.stylelint": true, + "source.fixAll.markdownlint": true + }, + "editor.formatOnSave": true, + "editor.defaultFormatter": "esbenp.prettier-vscode" +} diff --git a/packages/template-material/react-single-component-template/projectTemplate/README.md b/packages/template-material/react-single-component-template/projectTemplate/README.md new file mode 100644 index 0000000..942dd5f --- /dev/null +++ b/packages/template-material/react-single-component-template/projectTemplate/README.md @@ -0,0 +1,11 @@ +# demo component + +@alifd/example-component + +intro component + +## API + +| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 | +| ------ | ---- | ---- | ---- | ------ | ---- | +| | | | | | | diff --git a/packages/template-material/react-single-component-template/projectTemplate/_gitignore b/packages/template-material/react-single-component-template/projectTemplate/_gitignore new file mode 100644 index 0000000..ebdca34 --- /dev/null +++ b/packages/template-material/react-single-component-template/projectTemplate/_gitignore @@ -0,0 +1,101 @@ +.DS_Store + +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +package-lock.json +yarn.lock +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# TypeScript v1 declaration files +typings/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env + +# next.js build output +.next + +# special demo file for locally reappear issue +docs/**/demo/issues.md + +precss.css +.sass-cache/ +scripts/server-remote +__html/ +umd/ +es/ +lib/ +types/ +demos/ +!scripts/demos/ +/platform +build/ +test/coverage/ +test/**/coverage/ +mochawesome-report/ +coverage/ +gemini-report/ +.idea/ +.vscode/ +*.iml +.tea/ +/platform/ +react/ +platform/ +dist/ +_docs_/ +doc.json +meet-react/ +miniapp-preview/ +.tmp/ + +.umi/ +.umi-production/ \ No newline at end of file diff --git a/packages/template-material/react-single-component-template/projectTemplate/_npmignore b/packages/template-material/react-single-component-template/projectTemplate/_npmignore new file mode 100644 index 0000000..5947400 --- /dev/null +++ b/packages/template-material/react-single-component-template/projectTemplate/_npmignore @@ -0,0 +1,3 @@ +miniapp-preview/ +.idea/ +.vscode/ diff --git a/packages/template-material/react-single-component-template/projectTemplate/build.json b/packages/template-material/react-single-component-template/projectTemplate/build.json new file mode 100644 index 0000000..13123e1 --- /dev/null +++ b/packages/template-material/react-single-component-template/projectTemplate/build.json @@ -0,0 +1,13 @@ +{ + "library": "BizComp", + "plugins": [ + "build-plugin-component", + "build-plugin-fusion", + [ + "build-plugin-moment-locales", + { + "locales": ["zh-cn"] + } + ] + ] +} diff --git a/packages/template-material/react-single-component-template/projectTemplate/build.lowcode.js b/packages/template-material/react-single-component-template/projectTemplate/build.lowcode.js new file mode 100644 index 0000000..6536047 --- /dev/null +++ b/packages/template-material/react-single-component-template/projectTemplate/build.lowcode.js @@ -0,0 +1,16 @@ +const { library } = require('./build.json'); + +module.exports = { + alias: { + '@': './src', + }, + plugins: [ + [ + '@alifd/build-plugin-lowcode', + { + library, + engineScope: "<%= arguments[0].engineScope || '@ali' %>" + }, + ], + ], +}; diff --git a/packages/template-material/react-single-component-template/projectTemplate/commitlint.config.js b/packages/template-material/react-single-component-template/projectTemplate/commitlint.config.js new file mode 100644 index 0000000..52f3b75 --- /dev/null +++ b/packages/template-material/react-single-component-template/projectTemplate/commitlint.config.js @@ -0,0 +1,3 @@ +module.exports = { + extends: ['ali'], +}; diff --git a/packages/template-material/react-single-component-template/projectTemplate/demo/usage.md b/packages/template-material/react-single-component-template/projectTemplate/demo/usage.md new file mode 100644 index 0000000..47391d6 --- /dev/null +++ b/packages/template-material/react-single-component-template/projectTemplate/demo/usage.md @@ -0,0 +1,24 @@ +--- +title: Simple Usage +order: 1 +--- + +本 Demo 演示一行文字的用法。 + +```jsx +import React, { Component } from 'react'; +import ReactDOM from 'react-dom'; +import ExampleComponent from '<%=projectName%>'; + +class App extends Component { + render() { + return ( +
+ +
+ ); + } +} + +ReactDOM.render(, mountNode); +``` diff --git a/packages/template-material/react-single-component-template/projectTemplate/f2elint.config.js b/packages/template-material/react-single-component-template/projectTemplate/f2elint.config.js new file mode 100644 index 0000000..ff8f05d --- /dev/null +++ b/packages/template-material/react-single-component-template/projectTemplate/f2elint.config.js @@ -0,0 +1,5 @@ +module.exports = { + enableStylelint: true, + enableMarkdownlint: true, + enablePrettier: true, +}; diff --git a/packages/template-material/react-single-component-template/projectTemplate/jest.config.js b/packages/template-material/react-single-component-template/projectTemplate/jest.config.js new file mode 100644 index 0000000..21ce944 --- /dev/null +++ b/packages/template-material/react-single-component-template/projectTemplate/jest.config.js @@ -0,0 +1,3 @@ +module.exports = { + setupFilesAfterEnv: ['/test/setupTests.js'], +}; diff --git a/packages/template-material/react-single-component-template/projectTemplate/package.json b/packages/template-material/react-single-component-template/projectTemplate/package.json new file mode 100644 index 0000000..0ce9f47 --- /dev/null +++ b/packages/template-material/react-single-component-template/projectTemplate/package.json @@ -0,0 +1,62 @@ +{ + "name": "<%=projectName%>", + "version": "0.1.0", + "description": "<%=description%>", + "files": [ + "demo/", + "es/", + "lib/", + "build", + "dist" + ], + "main": "lib/index.js", + "module": "es/index.js", + "stylePath": "style.js", + "scripts": { + "start": "build-scripts start", + "build": "build-scripts build", + "lowcode:dev": "build-scripts start --config ./build.lowcode.js", + "lowcode:build": "build-scripts build --config ./build.lowcode.js", + "test": "build-scripts test", + "prepublishOnly": "npm run build && npm run lowcode:build", + "eslint": "eslint --cache --ext .js,.jsx ./", + "eslint:fix": "npm run eslint -- --fix", + "stylelint": "stylelint \"**/*.{css,scss,less}\"", + "lint": "npm run eslint && npm run stylelint", + "f2elint-scan": "f2elint scan", + "f2elint-fix": "f2elint fix" + }, + "keywords": [ + "ice", + "react", + "component" + ], + "dependencies": { + "moment": "^2.29.4", + "@alifd/next": "^1.25.27", + "react": "^16.x", + "react-dom": "^16.x" + }, + "devDependencies": { + "@alib/build-scripts": "^0.1.3", + "@alifd/build-plugin-lowcode": "^0.3.0", + "@types/react": "^16.9.13", + "@types/react-dom": "^16.9.4", + "build-plugin-fusion": "^0.1.0", + "build-plugin-component": "^1.0.0", + "template-component-demo": "^2.0.3", + "build-plugin-moment-locales": "^0.1.0", + "f2elint": "^1.2.0" + }, + "peerDependencies": { + "moment": "latest", + "react": "^16.x", + "react-dom": "^16.x" + }, + "componentConfig": { + "name": "ExampleComponent", + "title": "demo component", + "category": "Information" + }, + "license": "MIT" +} diff --git a/packages/template-material/react-single-component-template/projectTemplate/src/index.scss b/packages/template-material/react-single-component-template/projectTemplate/src/index.scss new file mode 100644 index 0000000..2df7ceb --- /dev/null +++ b/packages/template-material/react-single-component-template/projectTemplate/src/index.scss @@ -0,0 +1,4 @@ +/* write style here */ +.ExampleComponent { + +} diff --git a/packages/template-material/react-single-component-template/projectTemplate/src/index.tsx b/packages/template-material/react-single-component-template/projectTemplate/src/index.tsx new file mode 100644 index 0000000..e188a4b --- /dev/null +++ b/packages/template-material/react-single-component-template/projectTemplate/src/index.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +import { forwardRef, ForwardRefRenderFunction } from 'react'; + +interface ComponentProps { + title: string; + content: string; +} + +const ExampleComponent = (props: ComponentProps, ref: any) => { + const { title, content, ...others } = props; + + return ( +
+

{title}

+ {content || 'Hello ExampleComponent'} +
+ ); +}; + +const RefExampleComponent = forwardRef(ExampleComponent as ForwardRefRenderFunction); +RefExampleComponent.displayName = 'ExampleComponent'; + +export default RefExampleComponent; diff --git a/packages/template-material/react-single-component-template/projectTemplate/test/index.test.jsx b/packages/template-material/react-single-component-template/projectTemplate/test/index.test.jsx new file mode 100644 index 0000000..66685c5 --- /dev/null +++ b/packages/template-material/react-single-component-template/projectTemplate/test/index.test.jsx @@ -0,0 +1,9 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import ExampleComponent from '../src/index'; +import '../src/main.scss'; + +it('renders', () => { + const wrapper = shallow(); + expect(wrapper.find('.ExampleComponent').length).toBe(1); +}); diff --git a/packages/template-material/react-single-component-template/projectTemplate/test/setupTests.js b/packages/template-material/react-single-component-template/projectTemplate/test/setupTests.js new file mode 100644 index 0000000..82edfc9 --- /dev/null +++ b/packages/template-material/react-single-component-template/projectTemplate/test/setupTests.js @@ -0,0 +1,4 @@ +import { configure } from 'enzyme'; +import Adapter from 'enzyme-adapter-react-16'; + +configure({ adapter: new Adapter() }); diff --git a/packages/template-material/react-single-component-template/projectTemplate/tsconfig.json b/packages/template-material/react-single-component-template/projectTemplate/tsconfig.json new file mode 100644 index 0000000..a511d68 --- /dev/null +++ b/packages/template-material/react-single-component-template/projectTemplate/tsconfig.json @@ -0,0 +1,21 @@ +{ + "compileOnSave": false, + "buildOnSave": false, + "compilerOptions": { + "outDir": "build", + "module": "esnext", + "target": "es6", + "jsx": "react", + "moduleResolution": "node", + "lib": ["es6", "dom"], + "sourceMap": true, + "allowJs": true, + "noUnusedLocals": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "skipLibCheck": true + }, + "include": ["src/*.ts", "src/*.tsx"], + "exclude": ["node_modules", "build", "public"] +} From 6af8ec500335b92d6bbfe658e06673a10b72b93a Mon Sep 17 00:00:00 2001 From: mark Date: Fri, 31 Mar 2023 11:06:11 +0800 Subject: [PATCH 54/98] fix: fix wrong type of props in react-multiple-component-template --- .../package.json | 6 +- .../projectTemplate/.gitignore | 98 ------------------- .../projectTemplate/.npmignore | 2 - .../projectTemplate/package.json | 3 +- .../colorful-button/colorful-button.tsx | 5 +- .../colorful-input/colorful-input.tsx | 4 +- 6 files changed, 7 insertions(+), 111 deletions(-) delete mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/.gitignore delete mode 100644 packages/template-material/react-multiple-component-template/projectTemplate/.npmignore diff --git a/packages/template-material/react-multiple-component-template/package.json b/packages/template-material/react-multiple-component-template/package.json index 86190d1..b26f64d 100644 --- a/packages/template-material/react-multiple-component-template/package.json +++ b/packages/template-material/react-multiple-component-template/package.json @@ -1,11 +1,9 @@ { "name": "@alilc/react-multiple-component-template", - "version": "0.1.3", + "version": "0.1.5", "description": "react 组件库模板", "files": [ - "projectTemplate/", - "singleComponentTemplate/", - "singleDocTemplate/" + "projectTemplate/*" ], "scripts": { "f2elint-scan": "fie lint", diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/.gitignore b/packages/template-material/react-multiple-component-template/projectTemplate/.gitignore deleted file mode 100644 index e3bebec..0000000 --- a/packages/template-material/react-multiple-component-template/projectTemplate/.gitignore +++ /dev/null @@ -1,98 +0,0 @@ -.DS_Store - -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* -package-lock.json -yarn.lock -# Runtime data -pids -*.pid -*.seed -*.pid.lock - -# Directory for instrumented libs generated by jscoverage/JSCover -lib-cov - -# Coverage directory used by tools like istanbul -coverage - -# nyc test coverage -.nyc_output - -# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) -.grunt - -# Bower dependency directory (https://bower.io/) -bower_components - -# node-waf configuration -.lock-wscript - -# Compiled binary addons (https://nodejs.org/api/addons.html) -build/Release - -# Dependency directories -node_modules/ -jspm_packages/ - -# TypeScript v1 declaration files -typings/ - -# Optional npm cache directory -.npm - -# Optional eslint cache -.eslintcache - -# Optional REPL history -.node_repl_history - -# Output of 'npm pack' -*.tgz - -# Yarn Integrity file -.yarn-integrity - -# dotenv environment variables file -.env - -# next.js build output -.next - -# special demo file for locally reappear issue -docs/**/demo/issues.md - -precss.css -.sass-cache/ -scripts/server-remote -__html/ -umd/ -es/ -lib/ -types/ -demos/ -!scripts/demos/ -/platform -build/ -test/coverage/ -test/**/coverage/ -mochawesome-report/ -coverage/ -gemini-report/ -.idea/ -.vscode/ -*.iml -.tea/ -/platform/ -react/ -platform/ -dist/ -_docs_/ -doc.json -meet-react/ -miniapp-preview/ -.tmp/ diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/.npmignore b/packages/template-material/react-multiple-component-template/projectTemplate/.npmignore deleted file mode 100644 index 66f8fb5..0000000 --- a/packages/template-material/react-multiple-component-template/projectTemplate/.npmignore +++ /dev/null @@ -1,2 +0,0 @@ -.idea/ -.vscode/ diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/package.json b/packages/template-material/react-multiple-component-template/projectTemplate/package.json index a8ca3d5..3cfacf5 100644 --- a/packages/template-material/react-multiple-component-template/projectTemplate/package.json +++ b/packages/template-material/react-multiple-component-template/projectTemplate/package.json @@ -58,8 +58,7 @@ "@umijs/plugin-sass": "^1.1.1", "dumi": "^1.1.49", "dumi-theme-default": "^1.1.24", - "f2elint": "^1.2.0", - "node-sass": "^8.0.0" + "f2elint": "^1.2.0" }, "dependencies": { "moment": "^2.29.4", diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/src/components/colorful-button/colorful-button.tsx b/packages/template-material/react-multiple-component-template/projectTemplate/src/components/colorful-button/colorful-button.tsx index 7369743..175b7c1 100644 --- a/packages/template-material/react-multiple-component-template/projectTemplate/src/components/colorful-button/colorful-button.tsx +++ b/packages/template-material/react-multiple-component-template/projectTemplate/src/components/colorful-button/colorful-button.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { createElement } from 'react'; import { Button } from '@alifd/next'; -// import { ButtonProps } from '@alifd/next/types/button'; import './index.scss'; export interface ColorfulButtonProps { @@ -9,8 +8,8 @@ export interface ColorfulButtonProps { * 类型 */ type?: "primary" | "secondary" | "normal"; - color?: 'string'; - style?: 'object' + color?: string; + style?: object; } const ColorfulButton: React.FC = function ColorfulButton({ diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/src/components/colorful-input/colorful-input.tsx b/packages/template-material/react-multiple-component-template/projectTemplate/src/components/colorful-input/colorful-input.tsx index 0f41bb7..c0354bd 100644 --- a/packages/template-material/react-multiple-component-template/projectTemplate/src/components/colorful-input/colorful-input.tsx +++ b/packages/template-material/react-multiple-component-template/projectTemplate/src/components/colorful-input/colorful-input.tsx @@ -5,8 +5,8 @@ import { bizCssPrefix } from '../../variables'; import './index.scss'; export interface ColorfulInputProps { - color?: 'string'; - style?: 'object' + color?: string; + style?: object; } const ColorfulInput: React.FC = function ColorfulInput({ From 25cf9946409c1f870d562318d3df91904b022fb8 Mon Sep 17 00:00:00 2001 From: eternalsky Date: Fri, 7 Apr 2023 19:41:24 +0800 Subject: [PATCH 55/98] fix(build-plugin-lowcode): remove useless externals --- packages/build-plugin-lowcode/package.json | 2 +- packages/build-plugin-lowcode/src/constants.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/build-plugin-lowcode/package.json b/packages/build-plugin-lowcode/package.json index 704fc69..cc68332 100644 --- a/packages/build-plugin-lowcode/package.json +++ b/packages/build-plugin-lowcode/package.json @@ -1,6 +1,6 @@ { "name": "@alifd/build-plugin-lowcode", - "version": "0.3.9", + "version": "0.3.10", "description": "build plugin for component-to-lowcode", "main": "src/index.js", "keywords": [ diff --git a/packages/build-plugin-lowcode/src/constants.js b/packages/build-plugin-lowcode/src/constants.js index 91a81e5..e5ed906 100644 --- a/packages/build-plugin-lowcode/src/constants.js +++ b/packages/build-plugin-lowcode/src/constants.js @@ -13,7 +13,6 @@ const COMMON_EXTERNALS = { '@ali/lowcode-rax-renderer': 'var window.alilcLowcodeRaxRenderer', rax: 'var window.Rax', antd: 'var window.antd', - '@ant-design/icons': 'var window.icons', '@alifd/lowcode-preset-plugin': 'var window.PluginLowcodeEditor', 'monaco-editor/esm/vs/editor/editor.api': 'var window.monaco', 'monaco-editor/esm/vs/editor/editor.main.js': 'var window.monaco', From 887ccb6d4304a62fc3b3d4ad998b4e1cedde3d38 Mon Sep 17 00:00:00 2001 From: kyokaxin <121713235+kyokaxin@users.noreply.github.com> Date: Tue, 11 Apr 2023 20:44:16 +0800 Subject: [PATCH 56/98] =?UTF-8?q?fix(build-plugin-lowcode):=20=E4=BF=AE?= =?UTF-8?q?=E5=A4=8D=20extraAssets=20=E5=86=85=E7=9A=84=20packages=20?= =?UTF-8?q?=E6=97=A0=E6=B3=95=E8=A6=86=E7=9B=96=E5=8E=9F=E6=9C=89=E7=9A=84?= =?UTF-8?q?=20basePackages=20(#27)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: backPackages filter * fix: backPackages filter refine --- packages/build-plugin-lowcode/src/templates/index.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/build-plugin-lowcode/src/templates/index.jsx b/packages/build-plugin-lowcode/src/templates/index.jsx index 48cebe4..9db365a 100644 --- a/packages/build-plugin-lowcode/src/templates/index.jsx +++ b/packages/build-plugin-lowcode/src/templates/index.jsx @@ -170,7 +170,10 @@ init(() => { builtinAssets && await handleExtraAssets(assets, builtinAssets); } - assets.packages = basePackages.concat(assets.packages); + // 覆盖basePackages中相同library + const packagesMap = new Map(); + assets.packages = [...assets.packages, ...basePackages].filter((pkg) => !packagesMap.has(pkg.library) && packagesMap.set(pkg.library, 1)) + assets.packages = assets.packages.map(item => { if (item.editUrls && item.editUrls.length) { item.renderUrls = item.urls; From 3eca9b230107af5d124edc035e390c33bf78f93e Mon Sep 17 00:00:00 2001 From: eternalsky Date: Tue, 11 Apr 2023 20:45:26 +0800 Subject: [PATCH 57/98] chore(build-plugin-lowcode): release 0.3.11 --- packages/build-plugin-lowcode/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/build-plugin-lowcode/package.json b/packages/build-plugin-lowcode/package.json index cc68332..1c7aea6 100644 --- a/packages/build-plugin-lowcode/package.json +++ b/packages/build-plugin-lowcode/package.json @@ -1,6 +1,6 @@ { "name": "@alifd/build-plugin-lowcode", - "version": "0.3.10", + "version": "0.3.11", "description": "build plugin for component-to-lowcode", "main": "src/index.js", "keywords": [ From 544384b9c1f63f4fc431d61aae13cb6fb827db3b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A9=99=E6=9E=97?= Date: Fri, 14 Apr 2023 11:21:08 +0800 Subject: [PATCH 58/98] fix(build-plugin-lowcode): fix component dependencies order --- packages/build-plugin-lowcode/src/templates/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/build-plugin-lowcode/src/templates/index.jsx b/packages/build-plugin-lowcode/src/templates/index.jsx index 9db365a..9e3081c 100644 --- a/packages/build-plugin-lowcode/src/templates/index.jsx +++ b/packages/build-plugin-lowcode/src/templates/index.jsx @@ -172,7 +172,7 @@ init(() => { // 覆盖basePackages中相同library const packagesMap = new Map(); - assets.packages = [...assets.packages, ...basePackages].filter((pkg) => !packagesMap.has(pkg.library) && packagesMap.set(pkg.library, 1)) + assets.packages = [...basePackages, ...assets.packages].filter((pkg) => !packagesMap.has(pkg.library) && packagesMap.set(pkg.library, 1)) assets.packages = assets.packages.map(item => { if (item.editUrls && item.editUrls.length) { From 04492a80e9555032c0d59328bcc223152f1c476e Mon Sep 17 00:00:00 2001 From: eternalsky Date: Fri, 14 Apr 2023 14:19:19 +0800 Subject: [PATCH 59/98] chore(build-plugin-lowcode): release 0.3.12 --- packages/build-plugin-lowcode/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/build-plugin-lowcode/package.json b/packages/build-plugin-lowcode/package.json index 1c7aea6..92593f0 100644 --- a/packages/build-plugin-lowcode/package.json +++ b/packages/build-plugin-lowcode/package.json @@ -1,6 +1,6 @@ { "name": "@alifd/build-plugin-lowcode", - "version": "0.3.11", + "version": "0.3.12", "description": "build plugin for component-to-lowcode", "main": "src/index.js", "keywords": [ From 496a32e0d56b240e0357a1358e4fa934403e6e66 Mon Sep 17 00:00:00 2001 From: kyokaxin <121713235+kyokaxin@users.noreply.github.com> Date: Tue, 18 Apr 2023 14:38:32 +0800 Subject: [PATCH 60/98] fix: Overwrite the same libraries in basePackages to ensure that basePackages are in the first order (#32) --- packages/build-plugin-lowcode/src/templates/index.jsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/build-plugin-lowcode/src/templates/index.jsx b/packages/build-plugin-lowcode/src/templates/index.jsx index 9e3081c..e35144b 100644 --- a/packages/build-plugin-lowcode/src/templates/index.jsx +++ b/packages/build-plugin-lowcode/src/templates/index.jsx @@ -170,9 +170,16 @@ init(() => { builtinAssets && await handleExtraAssets(assets, builtinAssets); } - // 覆盖basePackages中相同library + // Overwrite the same library in basePackages const packagesMap = new Map(); - assets.packages = [...basePackages, ...assets.packages].filter((pkg) => !packagesMap.has(pkg.library) && packagesMap.set(pkg.library, 1)) + const sortedKeys = [...new Set( + [...basePackages, ...assets.packages].map((item) => { + const { library } = item; + packagesMap.set(library, item); + return library; + }) + )]; + assets.packages = sortedKeys.map((key) => packagesMap.get(key)); assets.packages = assets.packages.map(item => { if (item.editUrls && item.editUrls.length) { From 392c0af5934f4c0f859b3e72a18c32737b84eecb Mon Sep 17 00:00:00 2001 From: eternalsky Date: Tue, 18 Apr 2023 14:40:30 +0800 Subject: [PATCH 61/98] chore(build-plugin-lowcode): release 0.3.13 --- packages/build-plugin-lowcode/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/build-plugin-lowcode/package.json b/packages/build-plugin-lowcode/package.json index 92593f0..f2bbe9a 100644 --- a/packages/build-plugin-lowcode/package.json +++ b/packages/build-plugin-lowcode/package.json @@ -1,6 +1,6 @@ { "name": "@alifd/build-plugin-lowcode", - "version": "0.3.12", + "version": "0.3.13", "description": "build plugin for component-to-lowcode", "main": "src/index.js", "keywords": [ From 078d15c1a1bdd181bfe8d6674cdca72073f2cba0 Mon Sep 17 00:00:00 2001 From: mark Date: Tue, 18 Apr 2023 19:26:49 +0800 Subject: [PATCH 62/98] feat: support customPlugins in build-plugin-lowcode --- packages/build-plugin-lowcode/src/index.js | 2 ++ packages/build-plugin-lowcode/src/templates/index.jsx | 5 +++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/build-plugin-lowcode/src/index.js b/packages/build-plugin-lowcode/src/index.js index e2eb8c1..58169a7 100644 --- a/packages/build-plugin-lowcode/src/index.js +++ b/packages/build-plugin-lowcode/src/index.js @@ -366,6 +366,7 @@ async function start(options, pluginOptions) { type = 'component', setterName, presetConfig = {}, + customPlugins = [], } = pluginOptions || {}; if (baseLibrary === 'rax' && Array.isArray(extraAssets)) { extraAssets.push( @@ -428,6 +429,7 @@ async function start(options, pluginOptions) { setterName: setterName || '', type, presetConfig: JSON.stringify(presetConfig), + customPlugins: JSON.stringify(customPlugins), }, }); const previewJs = generateEntry({ diff --git a/packages/build-plugin-lowcode/src/templates/index.jsx b/packages/build-plugin-lowcode/src/templates/index.jsx index e35144b..2381926 100644 --- a/packages/build-plugin-lowcode/src/templates/index.jsx +++ b/packages/build-plugin-lowcode/src/templates/index.jsx @@ -71,6 +71,7 @@ let assetsName = './assets-dev.json'; const setterMap = {{{setterMap}}}; const presetConfig = {{{presetConfig}}}; +const customPlugins = {{{customPlugins}}}; const type = '{{{type}}}'; @@ -212,8 +213,8 @@ init(() => { } }, } -}, [], LCE_CONTAINER, { - presetConfig +}, customPlugins || [], LCE_CONTAINER, { + ...presetConfig }); function getPageSchema() { From 974b67bcde2b614e6ad8c216b97f0d8228275d27 Mon Sep 17 00:00:00 2001 From: eternalsky Date: Wed, 26 Apr 2023 16:33:47 +0800 Subject: [PATCH 63/98] =?UTF-8?q?feat(build-plugin-lowcode/lowcode-preset-?= =?UTF-8?q?plugin):=20=E6=9B=B4=E6=96=B0=20alilc=20scope=20=E4=B8=8B?= =?UTF-8?q?=E7=9A=84=20lowcode=20engine=20=E4=BE=9D=E8=B5=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../demo/component/package.json | 3 +- packages/build-plugin-lowcode/package.json | 2 +- .../build-plugin-lowcode/src/constants.js | 28 +++++++++++++------ packages/build-plugin-lowcode/src/index.js | 15 ++++++---- .../src/templates/index.jsx | 1 + .../lowcode-preset-plugin/build.plugin.js | 3 ++ packages/lowcode-preset-plugin/package.json | 7 +++-- packages/lowcode-preset-plugin/src/index.tsx | 5 ++-- 8 files changed, 43 insertions(+), 21 deletions(-) diff --git a/packages/build-plugin-lowcode/demo/component/package.json b/packages/build-plugin-lowcode/demo/component/package.json index 6eafe61..2e30cc8 100644 --- a/packages/build-plugin-lowcode/demo/component/package.json +++ b/packages/build-plugin-lowcode/demo/component/package.json @@ -31,8 +31,7 @@ "@storybook/addon-essentials": "^6.3.4", "@storybook/addon-storysource": "^6.3.4", "moment": "^2.29.1", - "prop-types": "^15.5.8", - "undefined": "^undefined" + "prop-types": "^15.5.8" }, "devDependencies": { "@alib/build-scripts": "^0.1.3", diff --git a/packages/build-plugin-lowcode/package.json b/packages/build-plugin-lowcode/package.json index f2bbe9a..ca4f532 100644 --- a/packages/build-plugin-lowcode/package.json +++ b/packages/build-plugin-lowcode/package.json @@ -1,6 +1,6 @@ { "name": "@alifd/build-plugin-lowcode", - "version": "0.3.13", + "version": "0.3.14", "description": "build plugin for component-to-lowcode", "main": "src/index.js", "keywords": [ diff --git a/packages/build-plugin-lowcode/src/constants.js b/packages/build-plugin-lowcode/src/constants.js index e5ed906..40895e4 100644 --- a/packages/build-plugin-lowcode/src/constants.js +++ b/packages/build-plugin-lowcode/src/constants.js @@ -18,6 +18,11 @@ const COMMON_EXTERNALS = { 'monaco-editor/esm/vs/editor/editor.main.js': 'var window.monaco', }; +const ALILC_COMMON_EXTERNALS = { + ...COMMON_EXTERNALS, + '@alifd/lowcode-preset-plugin': 'var window.LowcodePresetPlugin', +}; + const DEFAULT_GROUPS = ['精选组件', '原子组件']; const DEFAULT_CATEGORIES = [ '基础元素', @@ -52,21 +57,21 @@ const STATIC_RESOURCES = { }; const ALILC_STATIC_RESOURCES = { - themeVariableUrl: 'https://alifd.alicdn.com/npm/@alifd/theme-lowcode-dark@0.6.1/variables.css', + themeVariableUrl: 'https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light@0.2.1/variables.css', themeStyleUrl: - 'https://alifd.alicdn.com/npm/@alifd/theme-lowcode-dark@0.6.1/dist/next.var.min.css', + 'https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light@0.2.1/dist/next.var.min.css', engineCoreCssUrl: - 'https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.0.18/dist/css/engine-core.css', + 'https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.1.7-beta.11/dist/css/engine-core.css', engineExtCssUrl: - 'https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.5/dist/css/engine-ext.css', + 'https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.6-beta.25/dist/css/engine-ext.css', enginePresetCssUrl: - 'https://alifd.alicdn.com/npm/@alifd/lowcode-preset-plugin@1.1.8/dist/editor-preset-plugin.css', + 'https://alifd.alicdn.com/npm/@alilc/lowcode-preset-plugin@0.1.2/dist/lowcode-preset-plugin.css', engineCoreJsUrl: - '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-engine/1.1.7-beta.11/dist/js/engine-core.js', engineExtJsUrl: - 'https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.5/dist/js/engine-ext.js', + 'https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.6-beta.25/dist/js/engine-ext.js', enginePresetJsUrl: - 'https://alifd.alicdn.com/npm/@alifd/lowcode-preset-plugin@1.1.8/dist/editor-preset-plugin.js', + 'https://alifd.alicdn.com/npm/@alilc/lowcode-preset-plugin@0.1.2/dist/lowcode-preset-plugin.js', raxRenderJsUrl: 'https://alifd.alicdn.com/npm/@alilc/lowcode-rax-renderer@1.0.18/dist/index.umd.js', raxRenderCssUrl: 'https://alifd.alicdn.com/npm/@alilc/lowcode-rax-renderer@1.0.18/dist/index.css', }; @@ -76,6 +81,11 @@ const STATIC_RESOURCES_MAP = { '@alilc': ALILC_STATIC_RESOURCES, }; +const COMMON_EXTERNALS_MAP = { + '@ali': COMMON_EXTERNALS, + '@alilc': ALILC_COMMON_EXTERNALS, +}; + const BASIC_LIBRARY_VERSION = { '@alifd/next': '1.25.23', '@alifd/meet': '2.6.3', @@ -111,6 +121,8 @@ const META_TYPES = ['', 'dev', 'web', 'mobile', 'design', 'sketch']; module.exports = { SUPPORTED_COMMAND, COMMON_EXTERNALS, + ALILC_COMMON_EXTERNALS, + COMMON_EXTERNALS_MAP, DEFAULT_GROUPS, DEFAULT_CATEGORIES, STATIC_RESOURCES, diff --git a/packages/build-plugin-lowcode/src/index.js b/packages/build-plugin-lowcode/src/index.js index e2eb8c1..7da5120 100644 --- a/packages/build-plugin-lowcode/src/index.js +++ b/packages/build-plugin-lowcode/src/index.js @@ -29,6 +29,7 @@ const { const { COMMON_EXTERNALS, + COMMON_EXTERNALS_MAP, DEFAULT_GROUPS, DEFAULT_CATEGORIES, STATIC_RESOURCES_MAP, @@ -502,7 +503,7 @@ async function start(options, pluginOptions) { }, }); } - config.externals({ ...COMMON_EXTERNALS, ...externals }); + config.externals({ ...COMMON_EXTERNALS_MAP[engineScope], ...externals }); !disableStyleLoader && useStyleLoader(config); if (baseLibrary === 'rax') { config.module.rule('scss').use('rpx-loader').loader('rpx-loader').before('css-loader'); @@ -631,6 +632,7 @@ async function bundleMetaV2(options, pluginOptions, execCompile, metaType) { buildTarget = 'build', fullbackMeta = 'default', lowcodeDir = 'lowcode', + engineScope = '@ali', npmInfo = {}, } = pluginOptions || {}; if (components && !Array.isArray(components)) { @@ -704,7 +706,7 @@ async function bundleMetaV2(options, pluginOptions, execCompile, metaType) { }); config.output.library(metaExportName).libraryTarget('umd'); config.output.path(path.resolve(rootDir, `${buildTarget}/${lowcodeDir}`)); - config.externals({ ...COMMON_EXTERNALS, ...externals }); + config.externals({ ...COMMON_EXTERNALS_MAP[engineScope], ...externals }); useStyleLoader(config); }); return metaPath; @@ -908,7 +910,7 @@ async function bundleEditorView( }); config.output.library(library).libraryTarget('umd'); config.output.path(path.resolve(rootDir, `${buildTarget}/${lowcodeDir}`)); - config.externals({ ...COMMON_EXTERNALS, ...externals }); + config.externals({ ...COMMON_EXTERNALS_MAP[engineScope], ...externals }); if (baseLibrary === 'rax') { const scssRule = config.module.rule('scss'); scssRule.use('rpx-loader').loader('rpx-loader').before('css-loader'); @@ -932,6 +934,7 @@ async function bundleRenderView(options, pluginOptions, platform, execCompile) { externals = {}, buildTarget = 'build', lowcodeDir = 'lowcode', + engineScope = '@ali', entryPath, } = pluginOptions || {}; let componentViews; @@ -988,7 +991,7 @@ async function bundleRenderView(options, pluginOptions, platform, execCompile) { }); config.output.library(library).libraryTarget('umd'); config.output.path(path.resolve(rootDir, `${buildTarget}/${lowcodeDir}/render/${platform}`)); - config.externals({ ...COMMON_EXTERNALS, ...externals }); + config.externals({ ...COMMON_EXTERNALS_MAP[engineScope], ...externals }); if (baseLibrary === 'rax') { const scssRule = config.module.rule('scss'); scssRule.use('rpx-loader').loader('rpx-loader').before('css-loader'); @@ -1207,7 +1210,7 @@ function updatePackage( async function bundleComponentMeta(webPackConfig, options, pluginOptions, execCompile) { const { registerTask, getAllTask, onGetWebpackConfig, context, onHook } = options; const { rootDir, pkg: package } = context; - let { components } = pluginOptions || {}; + let { components, engineScope = '@ali', } = pluginOptions || {}; const { devAlias, externals = {}, @@ -1263,7 +1266,7 @@ async function bundleComponentMeta(webPackConfig, options, pluginOptions, execCo }); config.output.library(componentMetaExportName).libraryTarget('umd'); config.output.path(path.resolve(rootDir, `${buildTarget}/${lowcodeDir}`)); - config.externals({ ...COMMON_EXTERNALS, ...externals }); + config.externals({ ...COMMON_EXTERNALS_MAP[engineScope], ...externals }); useStyleLoader(config); }); })(component, idx); diff --git a/packages/build-plugin-lowcode/src/templates/index.jsx b/packages/build-plugin-lowcode/src/templates/index.jsx index e35144b..1077267 100644 --- a/packages/build-plugin-lowcode/src/templates/index.jsx +++ b/packages/build-plugin-lowcode/src/templates/index.jsx @@ -213,6 +213,7 @@ init(() => { }, } }, [], LCE_CONTAINER, { + supportVariableGlobally: true, presetConfig }); diff --git a/packages/lowcode-preset-plugin/build.plugin.js b/packages/lowcode-preset-plugin/build.plugin.js index 9f236db..5890c3d 100644 --- a/packages/lowcode-preset-plugin/build.plugin.js +++ b/packages/lowcode-preset-plugin/build.plugin.js @@ -2,6 +2,7 @@ const { join } = require('path'); const fs = require('fs-extra'); const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); +const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; const { version } = JSON.parse(fs.readFileSync('./package.json', 'utf8')); const { externals } = JSON.parse(fs.readFileSync('./build.json', 'utf8')); @@ -54,6 +55,8 @@ module.exports = ({ onGetWebpackConfig }) => { }, ]); + // config.plugin('analyzer').use(BundleAnalyzerPlugin); + config.plugins.delete('hot'); config.devServer.hot(false); diff --git a/packages/lowcode-preset-plugin/package.json b/packages/lowcode-preset-plugin/package.json index add5a95..8208bba 100644 --- a/packages/lowcode-preset-plugin/package.json +++ b/packages/lowcode-preset-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/lowcode-preset-plugin", - "version": "0.1.1", + "version": "0.1.2", "description": "", "main": "lib/index.js", "files": [ @@ -29,6 +29,7 @@ "@alilc/lowcode-plugin-simulator-select": "^1.0.0", "@alilc/lowcode-plugin-undo-redo": "^1.0.0", "@alilc/lowcode-plugin-zh-en": "^1.0.0", + "@alilc/lowcode-types": "^1.1.6", "build-plugin-component": "^1.12.0", "prop-types": "^15.5.8", "react": "^16.x", @@ -37,8 +38,10 @@ "devDependencies": { "@alilc/lowcode-datasource-fetch-handler": "^1.1.3", "@alilc/lowcode-engine": "^1.0.15", + "@alilc/lowcode-react-renderer": "^1.1.6", "@types/react": "^18.0.21", "fs-extra": "^10.1.0", - "tsconfig-paths-webpack-plugin": "^3.2.0" + "tsconfig-paths-webpack-plugin": "^3.2.0", + "webpack-bundle-analyzer": "^4.8.0" } } diff --git a/packages/lowcode-preset-plugin/src/index.tsx b/packages/lowcode-preset-plugin/src/index.tsx index 304466b..cf877d7 100644 --- a/packages/lowcode-preset-plugin/src/index.tsx +++ b/packages/lowcode-preset-plugin/src/index.tsx @@ -1,5 +1,6 @@ import { init, plugins } from '@alilc/lowcode-engine'; import { createFetchHandler } from '@alilc/lowcode-datasource-fetch-handler' +import { IPublicTypeEngineOptions, IPublicTypePlugin } from '@alilc/lowcode-types'; import registerDefaultPlugins from './plugins'; import registerDefaultSetters from './setters'; @@ -25,9 +26,9 @@ const defaultConfig = { } }; -export default async (cb, customPlugins, container, config) => { +export default async (cb: IPublicTypePlugin, customPlugins: any, container: HTMLElement, config: IPublicTypeEngineOptions & { presetConfig: any }) => { - const realConfig = { ...defaultConfig, ...(config || {})}; + const realConfig = { ...defaultConfig, ...(config || {}) }; const { presetConfig } = realConfig; await registerDefaultPlugins(presetConfig); From 500666711724d63a48e47e0180797f1852f441b2 Mon Sep 17 00:00:00 2001 From: eternalsky Date: Wed, 26 Apr 2023 16:44:52 +0800 Subject: [PATCH 64/98] =?UTF-8?q?feat(build-plugin-lowcode):=20=E6=94=AF?= =?UTF-8?q?=E6=8C=81=20customPlugins?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/build-plugin-lowcode/package.json | 2 +- packages/build-plugin-lowcode/src/templates/index.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/build-plugin-lowcode/package.json b/packages/build-plugin-lowcode/package.json index ca4f532..ecf4f8d 100644 --- a/packages/build-plugin-lowcode/package.json +++ b/packages/build-plugin-lowcode/package.json @@ -1,6 +1,6 @@ { "name": "@alifd/build-plugin-lowcode", - "version": "0.3.14", + "version": "0.3.15", "description": "build plugin for component-to-lowcode", "main": "src/index.js", "keywords": [ diff --git a/packages/build-plugin-lowcode/src/templates/index.jsx b/packages/build-plugin-lowcode/src/templates/index.jsx index be9edc0..d6b41b3 100644 --- a/packages/build-plugin-lowcode/src/templates/index.jsx +++ b/packages/build-plugin-lowcode/src/templates/index.jsx @@ -213,7 +213,7 @@ init(() => { } }, } -}, [], LCE_CONTAINER, { +}, customPlugins || [], LCE_CONTAINER, { supportVariableGlobally: true, presetConfig }); From e2f140d394005e3fe3db24edd29c02d141e170d4 Mon Sep 17 00:00:00 2001 From: eternalsky Date: Thu, 27 Apr 2023 14:20:27 +0800 Subject: [PATCH 65/98] fix(build-plugin-lowcode): build error caused by customPlugins --- packages/build-plugin-lowcode/package.json | 2 +- packages/build-plugin-lowcode/src/index.js | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/build-plugin-lowcode/package.json b/packages/build-plugin-lowcode/package.json index ecf4f8d..f23668a 100644 --- a/packages/build-plugin-lowcode/package.json +++ b/packages/build-plugin-lowcode/package.json @@ -1,6 +1,6 @@ { "name": "@alifd/build-plugin-lowcode", - "version": "0.3.15", + "version": "0.3.16", "description": "build plugin for component-to-lowcode", "main": "src/index.js", "keywords": [ diff --git a/packages/build-plugin-lowcode/src/index.js b/packages/build-plugin-lowcode/src/index.js index acb38bc..c4db274 100644 --- a/packages/build-plugin-lowcode/src/index.js +++ b/packages/build-plugin-lowcode/src/index.js @@ -750,6 +750,7 @@ async function bundleEditorView( type = 'component', setterName, presetConfig = {}, + customPlugins = [], } = pluginOptions || {}; const metaExportName = `${PARSED_NPM_NAME.uniqueName}Meta`; const advancedRenderUrls = {}; @@ -802,6 +803,7 @@ async function bundleEditorView( setterName: setterName || '', type, presetConfig: JSON.stringify(presetConfig), + customPlugins: JSON.stringify(customPlugins), }; const indexJs = generateEntry({ template: 'index.jsx', From 2065e061758013ccd4646f60f846bc8b1755c6c3 Mon Sep 17 00:00:00 2001 From: eternalsky Date: Tue, 9 May 2023 15:42:35 +0800 Subject: [PATCH 66/98] =?UTF-8?q?fix(build-plugin-alt):=20=E4=BF=AE?= =?UTF-8?q?=E5=A4=8D=E6=9C=AC=E5=9C=B0=E8=B0=83=E8=AF=95=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/build-plugin-alt/package.json | 2 +- packages/build-plugin-alt/src/entry/setter.ts | 7 - .../src/entry/universal/plugin.tsx | 153 ++++++------------ .../build-plugin-alt/src/public/assets.json | 104 +----------- .../build-plugin-alt/src/public/index.html | 8 +- .../build-plugin-alt/src/public/schema.json | 18 --- 6 files changed, 53 insertions(+), 239 deletions(-) diff --git a/packages/build-plugin-alt/package.json b/packages/build-plugin-alt/package.json index c9cdbd7..2583816 100644 --- a/packages/build-plugin-alt/package.json +++ b/packages/build-plugin-alt/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/build-plugin-alt", - "version": "1.3.2", + "version": "1.3.3", "description": "build-scripts plugin template for developers", "main": "lib/index.js", "files": [ diff --git a/packages/build-plugin-alt/src/entry/setter.ts b/packages/build-plugin-alt/src/entry/setter.ts index 4a1330b..d3faa5d 100644 --- a/packages/build-plugin-alt/src/entry/setter.ts +++ b/packages/build-plugin-alt/src/entry/setter.ts @@ -12,12 +12,5 @@ import './universal/global.scss'; init(document.getElementById('lce-container'), { enableCondition: true, enableCanvasLock: true, - disableDefaultSettingPanel: false, - disableDefaultSetters: false, - stayOnTheSameSettingTab: false, - simulatorUrl: [ - 'https://cdn.jsdelivr.net/npm/@alilc/lowcode-react-simulator-renderer@^1.0.0/dist/js/react-simulator-renderer.js', - 'https://cdn.jsdelivr.net/npm/@alilc/lowcode-react-simulator-renderer@^1.0.0/dist/css/react-simulator-renderer.css' - ], }); })() \ No newline at end of file diff --git a/packages/build-plugin-alt/src/entry/universal/plugin.tsx b/packages/build-plugin-alt/src/entry/universal/plugin.tsx index 4ce7f05..9a67507 100644 --- a/packages/build-plugin-alt/src/entry/universal/plugin.tsx +++ b/packages/build-plugin-alt/src/entry/universal/plugin.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import { - ILowCodePluginContext, plugins, skeleton, } from '@alilc/lowcode-engine'; +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; import Logo from '../../builtIn/logo'; import UndoRedo from '@alilc/lowcode-plugin-undo-redo'; import ComponentsPane from '@alilc/lowcode-plugin-components-pane'; @@ -13,24 +13,21 @@ import CodeEditor from "@alilc/lowcode-plugin-code-editor"; import { getPageSchema, saveSchema, resetSchema, preview } from './utils'; import assets from '../../public/assets.json'; - +; export default async ({ type, demoPlugin = undefined }) => { const registerPlugin = async (plugin) => { - if (!demoPlugin) { - return plugin; - } - if (plugin.pluginName !== demoPlugin.pluginName) { - await plugins.register(plugin); + // 避免要调试的插件被二次注册 + if (demoPlugin?.pluginName && plugin.pluginName === demoPlugin?.pluginName) { + return; } + await plugins.register(plugin); } // plugin API 见 https://lowcode-engine.cn/site/docs/api/plugins - (SchemaPlugin as any).pluginName = 'SchemaPlugin'; await registerPlugin(SchemaPlugin); - (CodeEditor as any).pluginName = 'CodeEditor'; await registerPlugin(CodeEditor); - const editorInit = (ctx: ILowCodePluginContext) => { + const editorInit = (ctx: IPublicModelPluginContext) => { return { name: 'editor-init', @@ -99,7 +96,7 @@ export default async ({ type, demoPlugin = undefined }) => { // 设置物料描述 const { material, project } = ctx; - material.setAssets(assets); + material.setAssets(assets as any); const schema = await getPageSchema(type); @@ -112,7 +109,7 @@ export default async ({ type, demoPlugin = undefined }) => { await registerPlugin(editorInit); - const builtinPluginRegistry = (ctx: ILowCodePluginContext) => { + const builtinPluginRegistry = (ctx: IPublicModelPluginContext) => { return { name: 'builtin-plugin-registry', async init() { @@ -153,103 +150,47 @@ export default async ({ type, demoPlugin = undefined }) => { await registerPlugin(builtinPluginRegistry); - // 将新版本setter覆盖内置引擎setter (新版本部分setter处于内测状态，如果有问题可以将该插件注册移除，或者联系@度城) - const setterRegistry = (ctx: ILowCodePluginContext) => { - const { setterMap, pluginMap } = window.AliLowCodeEngineExt; - return { - name: 'ext-setters-registry', - async init() { - // 注册setterMap - window.AliLowCodeEngine.setters.registerSetter(setterMap); - // 注册插件 - // 注册事件绑定面板 - window.AliLowCodeEngine.skeleton.add({ - area: 'centerArea', - type: 'Widget', - content: pluginMap.EventBindDialog, - name: 'eventBindDialog', - props: {}, - }); - - // 注册变量绑定面板 - skeleton.add({ - area: 'centerArea', - type: 'Widget', - content: pluginMap.VariableBindDialog, - name: 'variableBindDialog', - props: {}, - }); - } - } - } - setterRegistry.pluginName = 'setterRegistry'; - await registerPlugin(setterRegistry); - // 注册回退/前进 await registerPlugin(UndoRedo); // 注册中英文切换 await registerPlugin(ZhEn); - // 注册保存面板 - const saveSample = (ctx: ILowCodePluginContext) => { - return { - name: 'saveSample', - async init() { - ctx.skeleton.add({ - name: 'saveSample', - area: 'topArea', - type: 'Widget', - props: { - align: 'right', - }, - content: - }); - // ctx.skeleton.add({ - // name: 'resetSchema', - // area: 'topArea', - // type: 'Widget', - // props: { - // align: 'right', - // }, - // content: - // }); - ctx.hotkey.bind('command+s', (e) => { - e.preventDefault(); - saveSchema(); - }); - }, - }; - } - saveSample.pluginName = 'saveSample'; - await registerPlugin(saveSample); - - const previewSample = (ctx: ILowCodePluginContext) => { - return { - name: 'previewSample', - async init() { - ctx.skeleton.add({ - name: 'previewSample', - area: 'topArea', - type: 'Widget', - props: { - align: 'right', - }, - content: , - }); - }, - }; - } - - previewSample.pluginName = 'previewSample'; - - await registerPlugin(previewSample); + // 注册保存面板 + const saveSample = (ctx: IPublicModelPluginContext) => { + return { + name: 'saveSample', + async init() { + ctx.skeleton.add({ + name: 'saveSample', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + }, + content: + }); + ctx.skeleton.add({ + name: 'resetSchema', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + }, + content: + }); + ctx.hotkey.bind('command+s', (e) => { + e.preventDefault(); + saveSchema(); + }); + }, + }; + } + saveSample.pluginName = 'saveSample'; + await registerPlugin(saveSample); } diff --git a/packages/build-plugin-alt/src/public/assets.json b/packages/build-plugin-alt/src/public/assets.json index 388e5a4..ab8e7b3 100644 --- a/packages/build-plugin-alt/src/public/assets.json +++ b/packages/build-plugin-alt/src/public/assets.json @@ -26,116 +26,14 @@ "https://g.alicdn.com/code/lib/alifd__next/1.24.18/next-with-locales.min.js" ], "library": "Next" - }, - { - "title": "NextTable", - "package": "NextTable", - "version": "1.0.1", - "urls": [ - "https://g.alicdn.com/fusion-platform/pro-table/1.0.1/next-table.js", - "https://g.alicdn.com/fusion-platform/pro-table/1.0.1/next-table.css" - ], - "library": "NextTable" - }, - { - "package": "@alilc/lowcode-materials", - "version": "latest", - "library": "AlilcLowcodeMaterials", - "urls": [ - "https://alifd.alicdn.com/npm/@alilc/lowcode-materials/dist/AlilcLowcodeMaterials.js", - "https://alifd.alicdn.com/npm/@alilc/lowcode-materials/dist/AlilcLowcodeMaterials.css" - ], - "editUrls": [ - "https://alifd.alicdn.com/npm/@alilc/lowcode-materials/build/lowcode/view.js", - "https://alifd.alicdn.com/npm/@alilc/lowcode-materials/build/lowcode/view.css" - ] - }, - { - "package": "@alifd/pro-layout", - "version": "1.0.1-beta.1", - "library": "AlifdProLayout", - "urls": [ - "https://alifd.alicdn.com/npm/@alifd/pro-layout@1.0.1-beta.1/dist/AlifdProLayout.js", - "https://alifd.alicdn.com/npm/@alifd/pro-layout@1.0.1-beta.1/dist/AlifdProLayout.css" - ], - "editUrls": [ - "https://alifd.alicdn.com/npm/@alifd/pro-layout@1.0.1-beta.1/build/lowcode/view.js", - "https://alifd.alicdn.com/npm/@alifd/pro-layout@1.0.1-beta.1/build/lowcode/view.css" - ] - }, - { - "package": "@alifd/fusion-ui", - "version": "1.0.1", - "library": "AlifdFusionUi", - "urls": [ - "https://alifd.alicdn.com/npm/@alifd/fusion-ui@1.0.2/dist/AlifdFusionUi.js", - "https://alifd.alicdn.com/npm/@alifd/fusion-ui@1.0.2/dist/AlifdFusionUi.css" - ], - "editUrls": [ - "https://alifd.alicdn.com/npm/@alifd/fusion-ui@1.0.2/build/lowcode/view.js", - "https://alifd.alicdn.com/npm/@alifd/fusion-ui@1.0.2/build/lowcode/view.css" - ] } ], "components": [ - { - "exportName": "AlilcLowcodeMaterialsMeta", - "npm": { - "package": "@alilc/lowcode-materials" - }, - "url": "https://alifd.alicdn.com/npm/@alilc/lowcode-materials/build/lowcode/meta.js", - "urls": { - "default": "https://alifd.alicdn.com/npm/@alilc/lowcode-materials/build/lowcode/meta.js", - "design": "https://alifd.alicdn.com/npm/@alilc/lowcode-materials/build/lowcode/meta.design.js" - } - }, - { - "exportName": "AlifdProLayoutMeta", - "npm": { - "package": "@alifd/pro-layout", - "version": "1.0.1-beta.1" - }, - "url": "https://alifd.alicdn.com/npm/@alifd/pro-layout@1.0.1-beta.1/build/lowcode/meta.js", - "urls": { - "default": "https://alifd.alicdn.com/npm/@alifd/pro-layout@1.0.1-beta.1/build/lowcode/meta.js", - "design": "https://alifd.alicdn.com/npm/@alifd/pro-layout@1.0.1-beta.1/build/lowcode/meta.design.js" - } - }, - { - "exportName": "AlifdFusionUiMeta", - "npm": { - "package": "@alifd/fusion-ui" - }, - "url": "https://alifd.alicdn.com/npm/@alifd/fusion-ui@1.0.2/build/lowcode/meta.js", - "urls": { - "default": "https://alifd.alicdn.com/npm/@alifd/fusion-ui@1.0.2/build/lowcode/meta.js", - "design": "https://alifd.alicdn.com/npm/@alifd/fusion-ui@1.0.2/build/lowcode/meta.design.js" - } - } ], "sort": { - "groupList": [ - "精选组件", - "原子组件" - ], - "categoryList": [ - "基础元素", - "布局容器类", - "表格类", - "表单详情类", - "帮助类", - "对话框类", - "业务类", - "通用", - "引导", - "信息输入", - "信息展示", - "信息反馈" - ] + }, "groupList": [ - "精选组件", - "原子组件" ], "ignoreComponents": {} } \ No newline at end of file diff --git a/packages/build-plugin-alt/src/public/index.html b/packages/build-plugin-alt/src/public/index.html index 82df882..ac6da38 100644 --- a/packages/build-plugin-alt/src/public/index.html +++ b/packages/build-plugin-alt/src/public/index.html @@ -12,9 +12,9 @@ - + - + @@ -30,9 +30,9 @@ - + - + diff --git a/packages/build-plugin-alt/src/public/schema.json b/packages/build-plugin-alt/src/public/schema.json index 575db79..c0614eb 100644 --- a/packages/build-plugin-alt/src/public/schema.json +++ b/packages/build-plugin-alt/src/public/schema.json @@ -12,32 +12,14 @@ "list": [] }, "state": { - "text": "outer", - "isShowDialog": false }, "css": "body {font-size: 12px;} .button{width:100px;color:#ff00ff}", "lifeCycles": { - "componentDidMount": { - "type": "JSFunction", - "value": "function() {\n console.log('did mount');\n }" - }, - "componentWillUnmount": { - "type": "JSFunction", - "value": "function() {\n console.log('will unmount');\n }" - } }, "methods": { "testFunc": { "type": "JSFunction", "value": "function() {\n console.log('test func');\n }" - }, - "onClick": { - "type": "JSFunction", - "value": "function() {\n this.setState({\n isShowDialog: true\n })\n }" - }, - "closeDialog": { - "type": "JSFunction", - "value": "function() {\n this.setState({\n isShowDialog: false\n })\n }" } }, "children": [ From 6772648e37b899734fdd4aee275baec4b85848b0 Mon Sep 17 00:00:00 2001 From: eternalsky Date: Tue, 9 May 2023 15:48:18 +0800 Subject: [PATCH 67/98] =?UTF-8?q?doc(build-plugin-alt):=20=E4=BF=AE?= =?UTF-8?q?=E5=A4=8D=E6=9C=AC=E5=9C=B0=E8=B0=83=E8=AF=95=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/build-plugin-alt/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/build-plugin-alt/CHANGELOG.md b/packages/build-plugin-alt/CHANGELOG.md index 7f5f6f7..b8b5055 100644 --- a/packages/build-plugin-alt/CHANGELOG.md +++ b/packages/build-plugin-alt/CHANGELOG.md @@ -1,5 +1,9 @@ # Changelog +## 1.3.3 + +- `fix` 修复本地调试问题 + ## 1.3.2 - `fix` 修改默认打开浏览器地址，修复丢失 debug 参数问题 From 51e1561680d8623c16a74e5dfa21bcb3c04a3fd7 Mon Sep 17 00:00:00 2001 From: JackLian Date: Thu, 11 May 2023 10:36:55 +0800 Subject: [PATCH 68/98] feat: init commit of build-plugin-lce, build-scripts plugin for lowcode-engine project only --- packages/build-plugin-lce/CHANGELOG.md | 0 packages/build-plugin-lce/README.md | 1 + packages/build-plugin-lce/package.json | 78 +++++++ .../src/common/babelPluginCorejsLock.js | 23 ++ .../src/common/formatPathForWin.js | 5 + .../src/common/getCompileBabel.js | 46 ++++ .../src/common/getRightEntryExtname.js | 36 ++++ .../src/common/getUMDWebpack.js | 158 ++++++++++++++ .../src/common/htmlInjection.js | 194 +++++++++++++++++ .../src/common/mergeBabelPlugins.js | 25 +++ .../src/common/setAssetsPath.js | 20 ++ .../build-plugin-lce/src/common/setDevLog.js | 39 ++++ .../src/common/setSassStyleExpanded.js | 17 ++ .../build-plugin-lce/src/compiler/babel.js | 197 ++++++++++++++++++ .../src/compiler/depAnalyze.js | 178 ++++++++++++++++ packages/build-plugin-lce/src/compiler/dts.js | 73 +++++++ .../src/compiler/generateStyle.js | 62 ++++++ .../src/configs/react/userConfig.js | 85 ++++++++ packages/build-plugin-lce/src/configs/reg.js | 17 ++ .../src/configs/userConfig.js | 86 ++++++++ packages/build-plugin-lce/src/index.js | 126 +++++++++++ .../build-plugin-lce/src/useConfig/define.js | 17 ++ 22 files changed, 1483 insertions(+) create mode 100644 packages/build-plugin-lce/CHANGELOG.md create mode 100644 packages/build-plugin-lce/README.md create mode 100644 packages/build-plugin-lce/package.json create mode 100644 packages/build-plugin-lce/src/common/babelPluginCorejsLock.js create mode 100644 packages/build-plugin-lce/src/common/formatPathForWin.js create mode 100644 packages/build-plugin-lce/src/common/getCompileBabel.js create mode 100644 packages/build-plugin-lce/src/common/getRightEntryExtname.js create mode 100644 packages/build-plugin-lce/src/common/getUMDWebpack.js create mode 100644 packages/build-plugin-lce/src/common/htmlInjection.js create mode 100644 packages/build-plugin-lce/src/common/mergeBabelPlugins.js create mode 100644 packages/build-plugin-lce/src/common/setAssetsPath.js create mode 100644 packages/build-plugin-lce/src/common/setDevLog.js create mode 100644 packages/build-plugin-lce/src/common/setSassStyleExpanded.js create mode 100644 packages/build-plugin-lce/src/compiler/babel.js create mode 100644 packages/build-plugin-lce/src/compiler/depAnalyze.js create mode 100644 packages/build-plugin-lce/src/compiler/dts.js create mode 100644 packages/build-plugin-lce/src/compiler/generateStyle.js create mode 100644 packages/build-plugin-lce/src/configs/react/userConfig.js create mode 100644 packages/build-plugin-lce/src/configs/reg.js create mode 100644 packages/build-plugin-lce/src/configs/userConfig.js create mode 100644 packages/build-plugin-lce/src/index.js create mode 100644 packages/build-plugin-lce/src/useConfig/define.js diff --git a/packages/build-plugin-lce/CHANGELOG.md b/packages/build-plugin-lce/CHANGELOG.md new file mode 100644 index 0000000..e69de29 diff --git a/packages/build-plugin-lce/README.md b/packages/build-plugin-lce/README.md new file mode 100644 index 0000000..3bd2934 --- /dev/null +++ b/packages/build-plugin-lce/README.md @@ -0,0 +1 @@ +this is a build-scripts plugin for LowCodeEngine development only. \ No newline at end of file diff --git a/packages/build-plugin-lce/package.json b/packages/build-plugin-lce/package.json new file mode 100644 index 0000000..a5ba4df --- /dev/null +++ b/packages/build-plugin-lce/package.json @@ -0,0 +1,78 @@ +{ + "name": "@alilc/build-plugin-lce", + "version": "0.0.3", + "description": "build plugin for LowCodeEngine", + "main": "src/index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "engines": { + "node": ">=12" + }, + "keywords": [ + "plugin" + ], + "author": "", + "license": "MIT", + "dependencies": { + "@babel/core": "^7.1.2", + "@babel/generator": "^7.7.2", + "@babel/parser": "^7.7.3", + "@babel/plugin-proposal-class-properties": "^7.16.0", + "@babel/plugin-proposal-private-methods": "^7.16.0", + "@babel/plugin-proposal-private-property-in-object": "^7.16.0", + "@babel/plugin-transform-runtime": "^7.6.2", + "@babel/traverse": "^7.7.2", + "@babel/types": "^7.7.2", + "babel-plugin-import": "^1.12.2", + "babel-plugin-module-resolver": "^4.0.0", + "babel-plugin-transform-define": "^2.0.0", + "build-scripts-config": "^3.0.0", + "camelcase": "^6.2.0", + "case-sensitive-paths-webpack-plugin": "^2.3.0", + "chalk": "^4.1.0", + "chokidar": "^3.3.1", + "console-clear": "^1.1.1", + "core-js": "^3.6.4", + "error-stack-tracey": "^0.1.3", + "fs-extra": "^8.1.0", + "handlebars": "^4.5.3", + "handlebars-loader": "^1.7.1", + "html-webpack-plugin": "^4.5.0", + "ice-npm-utils": "^3.0.0", + "image-source-loader": "^0.6.5", + "ip": "^1.1.5", + "js-yaml": "^4.0.0", + "json-loader": "^0.5.7", + "jsx2mp-runtime": "^0.4.15", + "loader-utils": "^1.4.0", + "marked": "^2.0.0", + "miniapp-builder-shared": "^0.2.10", + "miniapp-compile-config": "^0.2.5", + "optimize-css-assets-webpack-plugin": "^5.0.4", + "postcss-plugin-rpx2vw": "^0.0.2", + "postcss-preset-env": "^6.7.0", + "prismjs": "^1.17.1", + "qrcode-terminal": "^0.12.0", + "react-dev-utils": "^10.0.0", + "react-docgen": "^5.4.0", + "react-docgen-typescript": "^2.2.2", + "sass-loader": "^10.0.5", + "style-loader": "^1.2.1", + "template-component-demo": "^2.0.0", + "terser-webpack-plugin": "^4.1.0", + "time-fix-plugin": "^2.0.7", + "typescript": "^4.0.0", + "url-join": "^4.0.1", + "user-home": "^2.0.0", + "utils": "^0.3.1", + "webpack": "^4.41.1", + "webpack-chain": "^6.5.1", + "webpack-dev-server": "^3.11.2", + "webpack-node-externals": "^2.5.2", + "webpackbar": "^5.0.0-3" + }, + "devDependencies": { + "@types/node": "^12.12.18" + } +} diff --git a/packages/build-plugin-lce/src/common/babelPluginCorejsLock.js b/packages/build-plugin-lce/src/common/babelPluginCorejsLock.js new file mode 100644 index 0000000..2422e43 --- /dev/null +++ b/packages/build-plugin-lce/src/common/babelPluginCorejsLock.js @@ -0,0 +1,23 @@ +const path = require('path'); + +const coreJSPath = path.dirname(require.resolve('core-js/package.json')); +// eslint-disable-next-line no-unused-vars +module.exports = ({ types }, { fileList }) => { + return { + visitor: { + ImportDeclaration(nodePath, state) { + const entryFile = fileList.find((filePath) => { + // filePath may not have an extension + return filePath.includes((state.filename || '').replace(/\.[^/.]+$/, '')); + }); + if (entryFile) { + const { node } = nodePath; + // only replace core-js/modules/xxx added by @babel/preset-env + if (node.source.value.startsWith('core-js/modules')) { + node.source.value = node.source.value.replace('core-js/', `${coreJSPath}/`); + } + } + }, + }, + }; +}; diff --git a/packages/build-plugin-lce/src/common/formatPathForWin.js b/packages/build-plugin-lce/src/common/formatPathForWin.js new file mode 100644 index 0000000..c04bc6c --- /dev/null +++ b/packages/build-plugin-lce/src/common/formatPathForWin.js @@ -0,0 +1,5 @@ +const path = require('path'); + +module.exports = function formatPathForWin(filepath) { + return process.platform === 'win32' ? filepath.split(path.sep).join('/') : filepath; +}; diff --git a/packages/build-plugin-lce/src/common/getCompileBabel.js b/packages/build-plugin-lce/src/common/getCompileBabel.js new file mode 100644 index 0000000..6024632 --- /dev/null +++ b/packages/build-plugin-lce/src/common/getCompileBabel.js @@ -0,0 +1,46 @@ +const { getBabelConfig } = require('build-scripts-config'); +const formatPathForWin = require('./formatPathForWin'); + +module.exports = (options = {}, { babelPlugins, babelOptions, rootDir }) => { + const { modules } = options; + + const defaultBabel = getBabelConfig(); + + const additionalPlugins = [ + [require.resolve('@babel/plugin-transform-runtime'), { + corejs: false, + helpers: true, + regenerator: true, + useESModules: false, + }], + [require.resolve('@babel/plugin-proposal-class-properties'), { loose: true }], + [require.resolve('@babel/plugin-proposal-private-methods'), { loose: true }], + [require.resolve('@babel/plugin-proposal-private-property-in-object'), { loose: true }], + ]; + + const formatedBabelPlugins = (babelPlugins || []).map((plugin) => { + const [pluginName, pluginOptions, ...restOptions] = Array.isArray(plugin) ? plugin : [plugin]; + // 用户自定义的 babelPlugins 需要从项目目录寻址 + const pluginPath = require.resolve(pluginName, { paths: [rootDir] }); + return pluginOptions ? [pluginPath, pluginOptions, ...(restOptions || [])] : pluginPath; + }); + + defaultBabel.plugins = [...defaultBabel.plugins, ...additionalPlugins, ...formatedBabelPlugins]; + + // modify @babel/preset-env options + defaultBabel.presets = defaultBabel.presets.map((preset) => { + const [presetPath, presetOptions] = Array.isArray(preset) ? preset : [preset]; + const targetConfig = babelOptions.find(({ name }) => (formatPathForWin(presetPath).indexOf(name) > -1)); + const modifyOptions = targetConfig && targetConfig.options; + + if (formatPathForWin(presetPath).indexOf('@babel/preset-env') > -1) { + // default preset-env options for component compile + return [presetPath, { modules, loose: true, ...(modifyOptions || {}) }]; + } + if (presetOptions && modifyOptions) { + return [presetPath, { ...presetOptions, ...modifyOptions }]; + } + return preset; + }); + return defaultBabel; +}; diff --git a/packages/build-plugin-lce/src/common/getRightEntryExtname.js b/packages/build-plugin-lce/src/common/getRightEntryExtname.js new file mode 100644 index 0000000..fa32638 --- /dev/null +++ b/packages/build-plugin-lce/src/common/getRightEntryExtname.js @@ -0,0 +1,36 @@ +/** + * get the index file ext name for the right entry file + * + * @param {*} cwd current dir + * @returns + */ +const path = require('path'); +const glob = require('glob'); +const { + REG_JS_INDEX, + REG_SASS_INDEX, + REG_LESS_INDEX, +} = require('../configs/reg'); + +module.exports = cwd => { + const rootFilePaths = glob.sync('*', { + cwd, + }); + const extNames = {}; + rootFilePaths.forEach(i => { + if (REG_JS_INDEX.test(i) && !extNames.jsExt) { + extNames.jsExt = path.extname(i); + } + if (!extNames.styleExt) { + if (REG_SASS_INDEX.test(i)) { + extNames.styleExt = path.extname(i); + extNames.isSassLike = true; + } else if (REG_LESS_INDEX.test(i)) { + extNames.styleExt = path.extname(i); + extNames.isLessLike = true; + } + } + }); + + return Object.keys(extNames).length && extNames; +}; diff --git a/packages/build-plugin-lce/src/common/getUMDWebpack.js b/packages/build-plugin-lce/src/common/getUMDWebpack.js new file mode 100644 index 0000000..6a889bf --- /dev/null +++ b/packages/build-plugin-lce/src/common/getUMDWebpack.js @@ -0,0 +1,158 @@ +const path = require('path'); +const { upperFirst, camelCase } = require('lodash'); +const { getWebpackConfig } = require('build-scripts-config'); +const { defaultDynamicImportLibraries } = require('../compiler/depAnalyze'); +const setDefine = require('../useConfig/define'); +const setSassStyleExpanded = require('./setSassStyleExpanded'); + +module.exports = ({ context, compileOptions, extNames, hasMain }) => { + const mode = 'production'; + const config = getWebpackConfig(mode); + const { rootDir } = context; + const { + // dist minify + minify, + // dist sourceMap + sourceMap, + // library name + library, + // library target + libraryTarget = 'umd', + // library export, default is undefined + libraryExport, + // externals dependencies + externals = { + react: { + root: 'React', + commonjs: 'react', + commonjs2: 'react', + amd: 'react', + }, + 'react-dom': { + root: 'ReactDOM', + commonjs: 'react-dom', + commonjs2: 'react-dom', + amd: 'react-dom', + }, + '@alifd/next': { + root: 'Next', + commonjs: '@alifd/next', + commonjs2: '@alifd/next', + amd: '@alifd/next', + }, + moment: { + root: 'moment', + commonjs: 'moment', + commonjs2: 'moment', + amd: 'moment', + }, + }, + basicComponents = [], + define, + } = compileOptions; + const { jsExt, styleExt } = extNames; + // file name + const filename = compileOptions.filename || library; + const jsPath = path.resolve(rootDir, `src/index${jsExt}`); + + config.context(rootDir); + + // - set entry + const entryName = filename; + if (hasMain || styleExt) { + const cssPath = path.resolve( + rootDir, + hasMain ? 'src/main.scss' : `src/index${styleExt}`, + ); + config.entry(entryName).add(cssPath); + } + config.entry(entryName).add(jsPath); + + // - output library files + config.output + .path(path.resolve(rootDir, 'dist')) + .filename('[name].js') + .publicPath('./dist/') + .library(library) + .libraryExport(libraryExport) + .libraryTarget(libraryTarget); + + // - set externals + if (externals) { + const localExternals = [].concat(externals); + + /** + * see [rfc](https://github.com/ice-lab/iceworks-cli/issues/153). + * if `basicComponents` is `undefined`，concat `defaultDynamicImportLibraries`. + * if `basicComponents` is `false`, escape all default behavior. + * otherwise, merge `defaultDynamicImportLibraries` to `basicComponets` and deduplicate. + */ + const validBasicComponent = (basicComponents ? [...basicComponents, ...defaultDynamicImportLibraries] : []) + // if `external` item is a function，one have to deal with it himself + .filter((externalKey) => Object.keys(externals).includes(externalKey) && typeof externals[externalKey] !== 'function'); + + if (validBasicComponent.length) { + const regexs = validBasicComponent.map((name) => ({ + name, + regex: new RegExp(`${name.replace('/', '\\/') }\\/(es|lib)\\/([-\\w+]+)$`), + })); + + localExternals.push((_context, request, callback) => { + for (let i = 0; i < regexs.length; i++) { + const { name, regex } = regexs[i]; + if (regex.test(request)) { + const componentName = request.match(regex)[2]; + const externalKey = typeof externals[name] === 'string' ? externals[name] : externals[name].root; + + if (componentName) { + const externalInfo = [externalKey, upperFirst(camelCase(componentName))]; + const commonExternal = [name, upperFirst(camelCase(componentName))]; + + return callback(null, { + root: externalInfo, + amd: commonExternal, + commonjs: commonExternal, + commonjs2: commonExternal, + }); + } + } else if (regex.test(_context) && /\.(scss|less|css)$/.test(request)) { + /** + * to exclude styles of externals. As a side effect, a unused varible is generated. + */ + const externalKey = typeof externals[name] === 'string' ? externals[name] : externals[name].root; + return callback(null, externalKey); + } + } + return callback(); + }); + } + + + // set externals + config.externals(localExternals); + } + + // sourceMap + if (sourceMap) { + config.devtool(typeof sourceMap === 'string' ? sourceMap : 'source-map'); + config.optimization + .minimizer('TerserPlugin') + .tap(([options]) => [ + { ...options, sourceMap: true }, + ]); + } + // minify + if (!minify) { + // disable minify code + config.optimization.minimize(minify); + } + + if (define) { + setDefine(config, define, context); + } + + // prevent minify + setSassStyleExpanded(config); + + return config; +}; diff --git a/packages/build-plugin-lce/src/common/htmlInjection.js b/packages/build-plugin-lce/src/common/htmlInjection.js new file mode 100644 index 0000000..3914cb8 --- /dev/null +++ b/packages/build-plugin-lce/src/common/htmlInjection.js @@ -0,0 +1,194 @@ +const cloneDeep = require('lodash.clonedeep'); + +const htmlContentStorage = {}; +const multiHTMLContentStorage = {}; +const HTML_POSITIONS = { + headAppend: { + defaultValue: [], + type: 'array', + }, + headPrepend: { + defaultValue: [], + type: 'array', + }, + bodyAppend: { + defaultValue: [], + type: 'array', + }, + bodyPrepend: { + defaultValue: [], + type: 'array', + }, + htmlAttrs: { + defaultValue: '', + type: 'object', + }, + headAttrs: { + defaultValue: '', + type: 'object', + }, + bodyAttrs: { + defaultValue: '', + type: 'object', + }, + rootContainer: { + defaultValue: [], + type: 'string', + }, +}; +const TAGS_INFO = { + meta: { + selfClosing: true, + }, + title: {}, + link: { + selfClosing: true, + }, + style: {}, + script: {}, +}; + +function injectHTML(callback, position) { + if (!Object.keys(HTML_POSITIONS).includes(position)) { + console.warn('[user config]', `unknown position ${position}.`); + } + // store html content added by applyMethod + htmlContentStorage[position] = callback(htmlContentStorage[position]); +} + +function parseHTMLContent(content) { + if (Object.prototype.toString.call(content) === '[object Object]') { + const { tag, innerHTML, tagId, ...attrs } = content; + const { selfClosing } = TAGS_INFO[tag]; + const attrStr = parseHTMLAttrs(attrs); + return selfClosing && !innerHTML ? `<${tag}${attrStr}/>` : `<${tag}${attrStr}>${innerHTML}`; + } + return content; +} + +function parseHTMLAttrs(attrs) { + const attrKeys = Object.keys(attrs); + return attrKeys.length ? ` ${attrKeys.map((attrKey) => `${attrKey}="${attrs[attrKey]}"`).join(' ')}` : ''; +} + +function getHTMLParams(htmlContent) { + const htmlParams = {}; + Object.keys(htmlContent).forEach((htmlPosition) => { + const htmlTags = htmlContent[htmlPosition]; + htmlParams[htmlPosition] = Array.isArray(htmlTags) ? htmlTags.map((htmlTag) => parseHTMLContent(htmlTag)).join('\n') : parseHTMLContent(htmlTags); + }); + return htmlParams; +} + +function modifyHTMLPluginOptions(config, pluginName, options, params) { + if (config.plugins.get(pluginName)) { + // spa HtmlWebpackPlugin + config.plugin(pluginName).tap(([args]) => { + const defaultValues = {}; + Object.keys(HTML_POSITIONS).forEach((positionKey) => { + defaultValues[positionKey] = HTML_POSITIONS[positionKey].defaultValue; + }); + + /** + * for getDemoConfig needs extra info to inject to html. + * merge htmlAppendInjection to params for getDemoConfig. + */ + const { htmlAppendInjection } = args || {}; + + const _params = { + ...params, + }; + + if (htmlAppendInjection) { + Object.keys(htmlAppendInjection).forEach((position) => { + // eslint-disable-next-line no-param-reassign + _params[position] = (_params[position] || '').concat(htmlAppendInjection[position]); + }); + } + + const pluginOptions = { + ...args, + templateParameters: { + ...(args.templateParameters || {}), + ...defaultValues, // default value of html positions + ..._params, + }, + ...options, + }; + return [pluginOptions]; + }); + } +} + +function configHTMLPlugin(config) { + const htmlParams = getHTMLParams(htmlContentStorage); + const htmlPluginOptions = { + inject: false, + }; + const entry = config.entryPoints.entries(); + // mpa HtmlWebpackPlugin + if (Object.prototype.toString.call(entry) === '[object Object]' && Object.keys(entry).length > 1) { + // delete multi HtmlWebpackPlugin + Object.keys(entry).forEach((entryKey) => { + const pluginName = `HtmlWebpackPlugin_${entryKey}`; + modifyHTMLPluginOptions( + config, + pluginName, + htmlPluginOptions, + multiHTMLContentStorage[entryKey] ? getHTMLParams(multiHTMLContentStorage[entryKey]) : htmlParams, + ); + }); + } else { + modifyHTMLPluginOptions(config, 'HtmlWebpackPlugin', htmlPluginOptions, htmlParams); + } +} + +function configHTMLContent(htmlInjection, entryKey) { + let storage = htmlContentStorage; + if (entryKey) { + multiHTMLContentStorage[entryKey] = cloneDeep(htmlContentStorage); + storage = multiHTMLContentStorage[entryKey]; + } + Object.keys(htmlInjection).forEach((optionKey) => { + if (HTML_POSITIONS[optionKey]) { + const { type } = HTML_POSITIONS[optionKey]; + const value = htmlInjection[optionKey]; + if (type === 'array') { + const newValue = []; + // overwrite content by tagId / unique tag + value.forEach((tagInfo) => { + const { tagId, tag } = tagInfo; + let index = -1; + if (tag === 'title') { + index = (storage[optionKey] || []).findIndex((item) => item.tag === tag); + } else if (tagId) { + index = (storage[optionKey] || []).findIndex((item) => item.tagId === tagId); + } + + if (index > -1) { + storage[optionKey][index] = tagInfo; + } else { + newValue.push(tagInfo); + } + }); + storage[optionKey] = (storage[optionKey] || []).concat(newValue); + } else if (type === 'object') { + storage[optionKey] = { + ...(storage[optionKey] || {}), + ...value, + }; + } else { + storage[optionKey] = value; + } + } + }); +} + +exports.configWebpack = (htmlInjection) => { + if (htmlInjection) { + configHTMLContent(htmlInjection); + } +}; + +exports.configHTMLPlugin = configHTMLPlugin; +exports.configHTMLContent = configHTMLContent; diff --git a/packages/build-plugin-lce/src/common/mergeBabelPlugins.js b/packages/build-plugin-lce/src/common/mergeBabelPlugins.js new file mode 100644 index 0000000..58ddb0d --- /dev/null +++ b/packages/build-plugin-lce/src/common/mergeBabelPlugins.js @@ -0,0 +1,25 @@ +function mergeBabelPlugins(defaultPlugins = [], customPlugins = []) { + const plugins = {}; + // Use the plugin name as the key. If the pluginsMap does not exist, + // the plugin will be added, and if it exists, the plugin will be + // overwritten. + const addPlugin = (plugin) => { + if (typeof plugin === 'string') { + plugins[plugin] = plugin; + } else if (Array.isArray(plugin)) { + const key = plugin[0]; + plugins[key] = plugin; + } else { + console.warn('Unknown plugin description:', plugin); + } + } + + // Default plugins. + defaultPlugins.forEach(addPlugin); + // Custom plugins. + customPlugins.forEach(addPlugin); + + return Object.values(plugins); +} + +module.exports = mergeBabelPlugins; diff --git a/packages/build-plugin-lce/src/common/setAssetsPath.js b/packages/build-plugin-lce/src/common/setAssetsPath.js new file mode 100644 index 0000000..163671d --- /dev/null +++ b/packages/build-plugin-lce/src/common/setAssetsPath.js @@ -0,0 +1,20 @@ +const path = require('path'); +const { last } = require('lodash'); + +function getFilename(filePath) { + return last((filePath || '').split('/')); +} + +module.exports = function setAssetsPath( + config, + outputAssetsPath = { js: '', css: '' }, +) { + const filename = getFilename(config.output.get('filename')); + config.output.filename(path.join(outputAssetsPath.js, filename)); + const options = config.plugin('MiniCssExtractPlugin').get('args')[0]; + config.plugin('MiniCssExtractPlugin').tap(args => [ + Object.assign(...args, { + filename: path.join(outputAssetsPath.css, getFilename(options.filename)), + }), + ]); +}; diff --git a/packages/build-plugin-lce/src/common/setDevLog.js b/packages/build-plugin-lce/src/common/setDevLog.js new file mode 100644 index 0000000..595b5e2 --- /dev/null +++ b/packages/build-plugin-lce/src/common/setDevLog.js @@ -0,0 +1,39 @@ +const chalk = require('chalk'); +const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages'); + +module.exports = ({ urls, stats, log, context }) => { + const { port } = context.commandArgs; + + const statsJson = stats.toJson({ + all: false, + errors: true, + warnings: true, + timings: true, + }); + + const messages = formatWebpackMessages(statsJson); + const hasError = messages.errors.length; + + // compatible with webpack 5 + ['errors', 'warnings'].forEach((jsonKey) => { + statsJson[jsonKey] = (statsJson[jsonKey] || []).map((item) => (item.message || item)); + }); + + log.info(stats.toString({ + errors: true, + warnings: false, + colors: true, + assets: true, + chunks: false, + entrypoints: false, + modules: false, + timings: false, + })); + + if (!hasError) { + log.info(''); + log.info(chalk.green(' Starting the development server at:')); + log.info(' - Local : ', chalk.underline.white(urls.localUrlForBrowser)); + log.info(' - Network: ', chalk.underline.white(urls.lanUrlForTerminal)); + } +}; diff --git a/packages/build-plugin-lce/src/common/setSassStyleExpanded.js b/packages/build-plugin-lce/src/common/setSassStyleExpanded.js new file mode 100644 index 0000000..9eea1af --- /dev/null +++ b/packages/build-plugin-lce/src/common/setSassStyleExpanded.js @@ -0,0 +1,17 @@ +module.exports = (config) => { + ['scss', 'sass'].forEach((ruleName) => { + if (config.module.rules.get(ruleName) && config.module.rules.get(ruleName).uses.has('sass-loader')) { + config + .module + .rules + .get(ruleName) + .use('sass-loader') + .tap((opts) => ({ + ...opts, + sassOptions: { + outputStyle: 'expanded', + }, + })); + } + }); +}; diff --git a/packages/build-plugin-lce/src/compiler/babel.js b/packages/build-plugin-lce/src/compiler/babel.js new file mode 100644 index 0000000..e50587b --- /dev/null +++ b/packages/build-plugin-lce/src/compiler/babel.js @@ -0,0 +1,197 @@ +/** + * @file generate es and lib by babel. + * @author tony7lee + */ + +const path = require('path'); +const fs = require('fs-extra'); +const glob = require('glob'); +const babel = require('@babel/core'); +const getRaxBabelConfig = require('rax-babel-config'); +const { REG_JS, REG_D_TS } = require('../configs/reg'); +const getCompileBabel = require('../common/getCompileBabel'); +const { analyzePackage } = require('./depAnalyze'); +const generateStyle = require('./generateStyle'); +const dtsCompiler = require('./dts'); +const mergeBabelPlugins = require('../common/mergeBabelPlugins'); + +const getBabelConfig = ({ + target, + componentLibs, + rootDir, + babelPlugins, + babelOptions, + type, + alias, +}) => { + const params = target === 'es' ? { modules: false } : {}; + let babelConfig; + if (type === 'react') { + babelConfig = getCompileBabel(params, { babelPlugins, babelOptions, rootDir }); + } else { + babelConfig = getRaxBabelConfig({ + // Be careful~ change it's value by inlineStyle may cause break-change + styleSheet: true, + custom: { + ignore: ['**/**/*.d.ts'], + }, + ...params, + }); + babelConfig.presets.push([require.resolve('@babel/preset-typescript'), { jsxPragma: 'createElement' }]); + + babelConfig.plugins = mergeBabelPlugins(babelConfig.plugins, (babelPlugins || [])); + } + // generate babel-plugin-import config + const plugins = []; + componentLibs.forEach((libraryName) => { + // check es folder if target is es + const pluginOption = { + libraryName, + style: false, // style file will be require in style.js + }; + if (target === 'es') { + ['es', 'esm'].some((item) => { + const dirPath = path.join(rootDir, 'node_modules', libraryName, item); + const dirExist = fs.existsSync(dirPath); + + if (dirExist) { + pluginOption.libraryDirectory = item; + } + + return dirExist; + }); + } + plugins.push([ + require.resolve('babel-plugin-import'), + pluginOption, + libraryName, + ]); + }); + babelConfig.plugins = babelConfig.plugins.concat(plugins); + if (alias) { + const aliasRelative = {}; + Object.keys(alias).forEach((aliasKey) => { + aliasRelative[aliasKey] = alias[aliasKey].startsWith('./') ? alias[aliasKey] : `./${alias[aliasKey]}`; + }); + babelConfig.plugins = babelConfig.plugins.concat([[ + require.resolve('babel-plugin-module-resolver'), + { + root: ['./src'], + alias: aliasRelative, + }, + ]]); + } + return babelConfig; +}; + +module.exports = function babelCompiler(context, + { + log, + userOptions = {}, + type, + }) { + const { rootDir, pkg } = context; + + // FIXME: 没有 compilerOptions 这个参数 + const { + compilerOptions = {}, + babelOptions = [], + alias, + subComponents, + define, + disableGenerateStyle, + generateTypesForJs = false, + } = userOptions; + + + let { basicComponents = [] } = userOptions; + + if (type === 'rax') { + basicComponents = false; + } + + const { babelPlugins = [] } = userOptions; + + if (define) { + babelPlugins.push([ + require.resolve('babel-plugin-transform-define'), + define, + ]); + } + + // generate DTS for ts files, default is true + const { declaration = true } = compilerOptions; + const componentLibs = disableGenerateStyle ? [] : analyzePackage(pkg, basicComponents); + const srcPath = path.join(rootDir, 'src'); + const compileTargets = ['es', 'lib']; + const filesPath = glob.sync('**/*.*', { cwd: srcPath, ignore: ['node_modules/**', '*.d.ts', '*.?(ali|wechat).?(ts|tsx|js|jsx)'] }); + // traverse to compile the js files + const compileInfo = []; + compileTargets.forEach((target) => { + const destPath = path.join(rootDir, target); + fs.emptyDirSync(destPath); + + // Compile code + filesPath.forEach((filePath) => { + const sourceFile = path.join(srcPath, filePath); + if (!REG_JS.test(filePath) || REG_D_TS.test(filePath)) { + // copy file if it does not match REG_JS + try { + fs.copySync(sourceFile, path.join(destPath, filePath)); + log.info(`file ${filePath} copy successfully!`); + } catch (err) { + log.error(err); + } + } else { + // get babel config for compile + const libBabelConfig = getBabelConfig({ + target, + componentLibs, + rootDir, + babelPlugins, + babelOptions, + type, + alias, + }); + // compile file by babel + // TODO use context.babel + const rightPath = filePath.replace(REG_JS, '.js'); + const { code } = babel.transformFileSync(sourceFile, { + filename: rightPath, + ...libBabelConfig, + }); + const targetPath = path.join(destPath, rightPath); + fs.ensureDirSync(path.dirname(targetPath)); + fs.writeFileSync(targetPath, code, 'utf-8'); + + compileInfo.push({ + filePath, + sourceFile, + destPath, + }); + } + }); + + // Generate style.js + if (type === 'react' && !disableGenerateStyle) { + if (subComponents) { + // filter dir in destPath folder + const folderList = fs.readdirSync(destPath).filter((filePath) => { + return fs.lstatSync(path.join(destPath, filePath)).isDirectory(); + }); + folderList.forEach((folder) => { + generateStyle({ rootDir, basicComponents, destPath: path.join(destPath, folder), target, log, folder }); + }); + } + generateStyle({ rootDir, basicComponents, destPath, target, log }); + } + }); + // generate DTS for TS files + if (declaration) { + dtsCompiler(compileInfo, { + log, + generateTypesForJs, + }); + } + log.info('Generate es and lib successfully!'); +}; diff --git a/packages/build-plugin-lce/src/compiler/depAnalyze.js b/packages/build-plugin-lce/src/compiler/depAnalyze.js new file mode 100644 index 0000000..4ea468e --- /dev/null +++ b/packages/build-plugin-lce/src/compiler/depAnalyze.js @@ -0,0 +1,178 @@ +const fse = require('fs-extra'); +const path = require('path'); +const babel = require('@babel/core'); +const { REG_JS } = require('../configs/reg'); + +const getPkgJSON = (cwd, module) => { + const pkgPath = path.join(cwd, 'node_modules', module, 'package.json'); + if (!fse.existsSync(pkgPath)) return {}; + const jsonString = fse.readFileSync(pkgPath, 'utf-8'); + return JSON.parse(jsonString); +}; + +const defaultDynamicImportLibraries = [ + 'antd', + '@alifd/next', + '@alife/next', + '@icedesign/base', +]; + +function analyzePackage(pkg, basicComponents) { + // get dependencies from pakage.json + const { dependencies = {}, devDependencies = {}, peerDependencies = {} } = pkg; + const libraryNames = []; + if (basicComponents) { + Object.keys({ ...dependencies, ...devDependencies, ...peerDependencies }).forEach((depName) => { + // basic component: antd、@alifd/next、@alife/next、@icedesign/base + if ( + [ + ...defaultDynamicImportLibraries, + ...basicComponents, + ].includes(depName) + ) { + libraryNames.push(depName); + } + }); + } + return libraryNames; +} + +function filterDeps({ deps, rootDir, basicComponents }) { + return deps.filter((dep) => { + // relative path + if (/^\./.test(dep)) { + return false; + } + let basicLibrary = [ + /@icedesign\/.*/, + /^@icedesign\/base\/(lib|es)\/([^/]+)/, + /@alife\/.*/, + /^@alife\/next\/(lib|es)\/([^/]+)/, + /@alifd\/.*/, + /^@alifd\/next\/(lib|es)\/([^/]+)/, + /@ali\/ice-.*/, + /antd\/.*/, + ]; + if (basicComponents) { + basicComponents.forEach((component) => { + basicLibrary.push(new RegExp(`${component}/.*`)); + }); + } else { + // clear basicLibrary if set basicComponents to false + basicLibrary = []; + } + const isBasicLibrary = basicLibrary.some((library) => { + return library.test(dep); + }); + + if (isBasicLibrary) { + return true; + } + + const pkgJSON = getPkgJSON(rootDir, dep); + if (pkgJSON && (pkgJSON.componentConfig || pkgJSON.stylePath)) { + return true; + } + return false; + }); +} + +function getFileContent(filepath) { + try { + return String(fse.readFileSync(filepath)); + } catch (err) { + console.log('Can not open file ', filepath); + return ''; + } +} + +// analyze require() +function analyzeAST(code) { + const result = []; + const visitor = { + CallExpression(nodePath) { + const { callee, arguments: args } = nodePath.node; + const isImportNode = ( + callee.type === 'Identifier' && + callee.name === 'require' + ) || callee.type === 'Import'; + + if ( + isImportNode && + args.length === 1 && + args[0].type === 'StringLiteral' + ) { + result.push(args[0].value); + } + }, + ImportDeclaration(nodePath) { + result.push(nodePath.node.source.value); + }, + ExportAllDeclaration(nodePath) { + const { node } = nodePath; + if (node.source) { + result.push(node.source.value); + } + }, + ExportNamedDeclaration(nodePath) { + const { node } = nodePath; + if (node.source) { + result.push(node.source.value); + } + }, + }; + babel.transformSync(code, { + plugins: [{ visitor }], + }); + + return result; +} + +function dedupe(arr) { + if (!Array.isArray(arr)) { + throw new TypeError('[dedupe]: arr should be an array;'); + } + const map = {}; + for (let i = 0, len = arr.length; i < len; i++) { + const key = arr[i]; + map[key] = true; + } + return Object.keys(map); +} + +// require.resolve .jsx and .vue files +require.extensions['.jsx'] = require.extensions['.js']; +require.extensions['.vue'] = require.extensions['.js']; + +function analyzeDependencies(entryFilePath, rootDir, basicComponents) { + const tracedFiles = {}; + let result = []; + function trace(filename) { + // filter traceFiles and assets files + if (tracedFiles[filename] || !REG_JS.test(filename)) { + return; + } + tracedFiles[filename] = true; + const fileContent = getFileContent(filename); + const analyzeResult = dedupe(analyzeAST(fileContent)); + + result = result.concat(analyzeResult); + analyzeResult.forEach((module) => { + if (/^\./.test(module)) { + const modulePath = require.resolve( + path.join(path.dirname(filename), module), + ); + trace(modulePath); + } + }); + } + trace(require.resolve(entryFilePath)); + const deps = dedupe(result); + return filterDeps({ deps, rootDir, basicComponents }); +} + +module.exports = { + analyzeDependencies, + analyzePackage, + defaultDynamicImportLibraries, +}; diff --git a/packages/build-plugin-lce/src/compiler/dts.js b/packages/build-plugin-lce/src/compiler/dts.js new file mode 100644 index 0000000..1fcfefa --- /dev/null +++ b/packages/build-plugin-lce/src/compiler/dts.js @@ -0,0 +1,73 @@ +/** + * @file get the DTS for TS files. + * @author tony7lee + */ + +const path = require('path'); +const fse = require('fs-extra'); +const ts = require('typescript'); +const { REG_TS, REG_JS } = require('../configs/reg'); +const formatPathForWin = require('../common/formatPathForWin'); + +// compile options +const options = { + allowJs: true, + declaration: true, + emitDeclarationOnly: true, +}; + +module.exports = function dtsCompiler(compileInfo, { + log, + generateTypesForJs, +}) { + const regexFile = generateTypesForJs ? REG_JS : REG_TS; + + const needCompileList = compileInfo.filter(({ filePath }) => regexFile.test(filePath)).map((data) => { + const { filePath, destPath, sourceFile } = data; + const targetPath = path.join(destPath, filePath.replace(regexFile, '.d.ts')); + const fileNamesDTS = sourceFile.replace(regexFile, '.d.ts'); + return { + ...data, + targetPath, + fileNamesDTS, + }; + }); + + if (needCompileList.length === 0) { + return; + } + log.info('Compiling ts declaration ...'); + // Create a Program with an in-memory emit + let createdFiles = {}; + const host = ts.createCompilerHost(options); + host.writeFile = (fileName, contents) => { createdFiles[fileName] = contents; }; + + // Prepare and emit the d.ts files + const program = ts.createProgram(needCompileList.map(({ sourceFile }) => sourceFile), options, host); + const emitResult = program.emit(); + if (emitResult.diagnostics && emitResult.diagnostics.length > 0) { + emitResult.diagnostics.forEach((diagnostic) => { + const message = ts.flattenDiagnosticMessageText(diagnostic.messageText, '\n'); + if (diagnostic.file) { + const { line, character } = diagnostic.file.getLineAndCharacterOfPosition(diagnostic.start); + log.error(`${diagnostic.file.fileName} (${line + 1}, ${character + 1}): ${message}`); + } else { + log.error(message); + } + }); + } + + needCompileList.forEach(({ targetPath, fileNamesDTS }) => { + const content = createdFiles[ + formatPathForWin(fileNamesDTS) + ]; + // write file + if (content) { + fse.ensureDirSync(path.dirname(targetPath)); + fse.writeFileSync(targetPath, content, 'utf-8'); + } + }); + + // release + createdFiles = null; +}; diff --git a/packages/build-plugin-lce/src/compiler/generateStyle.js b/packages/build-plugin-lce/src/compiler/generateStyle.js new file mode 100644 index 0000000..f926a55 --- /dev/null +++ b/packages/build-plugin-lce/src/compiler/generateStyle.js @@ -0,0 +1,62 @@ +const path = require('path'); +const fs = require('fs-extra'); +const { analyzeDependencies } = require('./depAnalyze'); + +const parseStyleStatement = ({ target, module, rootDir }) => { + let styleStatement = ''; + const stylePaths = ['style', `${target}/style`]; + if (target === 'es') { + // compatible for component without es folder + stylePaths.push('lib/style.js'); + } + stylePaths.every((stylePath) => { + let keepSearch = true; + try { + require.resolve(`${module}/${stylePath}`); + styleStatement = `${module}/${stylePath}`; + keepSearch = false; + } catch (err) { + keepSearch = true; + } + return keepSearch; + }); + if (styleStatement) { + return target === 'es' + ? `import '${styleStatement}';` + : `require('${styleStatement}');`; + } + return ''; +}; + +module.exports = ({ rootDir, basicComponents, destPath, target, log, folder }) => { + // analyze dependencies for generate style.js + const styleDependencies = analyzeDependencies( + path.join(rootDir, `${target}${folder ? `/${folder}` : ''}/index`), + rootDir, + basicComponents, + ); + // generate style.js + const stylePath = path.join(destPath, 'style.js'); + // check index.scss and main.scss + let styleContent = ''; + ['index.scss', 'index.less', 'index.css', 'main.scss'].every((cssFile) => { + if (fs.existsSync(path.join(destPath, cssFile))) { + styleContent = + target === 'es' + ? `import './${cssFile}';` + : `require('./${cssFile}');`; + // return false to break loop + return false; + } + return true; + }); + const styleSatements = styleDependencies + .map((module) => parseStyleStatement({ module, rootDir, target })) + .join('\n'); + styleContent = + styleSatements || styleContent + ? [styleSatements, styleContent].filter(Boolean).join('\n') + : '//empty file'; + fs.writeFileSync(stylePath, styleContent, 'utf-8'); + log.info(`generate style.js to ${target}`); +}; diff --git a/packages/build-plugin-lce/src/configs/react/userConfig.js b/packages/build-plugin-lce/src/configs/react/userConfig.js new file mode 100644 index 0000000..9be7a6e --- /dev/null +++ b/packages/build-plugin-lce/src/configs/react/userConfig.js @@ -0,0 +1,85 @@ +const htmlInjection = require('../../common/htmlInjection'); + +// set default content of html +htmlInjection.configHTMLContent({ + headPrepend: [ + { + tag: 'meta', + charset: 'utf-8', + tagId: 'meta-charset', + }, + { + tag: 'meta', + 'http-equiv': 'x-ua-compatible', + content: 'ie=edge,chrome=1', + tagId: 'meta-compatible', + }, + { + tag: 'meta', + name: 'viewport', + content: 'width=device-width', + tagId: 'meta-viewport', + }, + ], + headAppend: [ + { + tag: 'title', + innerHTML: 'DEMO 预览', + }, + ], + rootContainer: '
', +}); + +module.exports = [ + { + name: 'demoTemplate', + validation: (val) => { + return Array.isArray(val) || typeof val === 'string'; + }, + }, + { + name: 'babelPlugins', + validation: 'array', + }, + { + name: 'babelOptions', + // [{ name: '@babel/preset-env', options: { module: false } }] + validation: 'array', + }, + { + name: 'basicComponents', + validation: (val) => { + return Array.isArray(val) || val === false; + }, + }, + { + name: 'externals', + validation: 'object', + }, + { + name: 'subComponents', + validation: 'boolean', + }, + { + name: 'htmlInjection', + validation: 'object', + }, + { + name: 'disableGenerateStyle', + validation: 'boolean', + }, + { + name: 'docGenIncludes', + validation: (val) => { + if (!Array.isArray(val)) { + return false; + } + for (let i = 0; i < val.length; i++) { + if (typeof val[i] !== 'string') { + return false; + } + } + return true; + }, + }, +]; diff --git a/packages/build-plugin-lce/src/configs/reg.js b/packages/build-plugin-lce/src/configs/reg.js new file mode 100644 index 0000000..21df9a1 --- /dev/null +++ b/packages/build-plugin-lce/src/configs/reg.js @@ -0,0 +1,17 @@ +/** + * @file constant regexp + * @author tony7lee + */ + +module.exports = { + REG_TS: /\.(tsx?)$/, + REG_D_TS: /\.d\.ts$/, + + REG_JS: /\.(jsx?|tsx?)$/, + REG_SASS: /\.(sa|sc|c)ss$/, + REG_LESS: /\.(le|c)ss$/, + + REG_JS_INDEX: /index\.(jsx?|tsx?)$/, + REG_SASS_INDEX: /index\.(sa|sc|c)ss$/, + REG_LESS_INDEX: /index\.(le|c)ss$/, +}; diff --git a/packages/build-plugin-lce/src/configs/userConfig.js b/packages/build-plugin-lce/src/configs/userConfig.js new file mode 100644 index 0000000..bca16ba --- /dev/null +++ b/packages/build-plugin-lce/src/configs/userConfig.js @@ -0,0 +1,86 @@ +const path = require('path'); + +module.exports = [ + { + name: 'alias', + validation: 'object', + configWebpack: (config, alias, context) => { + const { rootDir } = context; + const aliasWithRoot = {}; + Object.keys(alias).forEach((key) => { + if (path.isAbsolute(alias[key])) { + aliasWithRoot[key] = alias[key]; + } else { + aliasWithRoot[key] = path.resolve(rootDir, alias[key]); + } + }); + config.merge({ + resolve: { + alias: aliasWithRoot, + }, + }); + }, + }, + { + name: 'library', + validation: 'string', + }, + { + name: 'libraryExport', + validation: 'string', + }, + { + name: 'libraryTarget', + validation: 'string', + }, + { + name: 'filename', + validation: 'string', + }, + { + name: 'sourceMap', + validation: 'boolean', + }, + { + name: 'minify', + validation: 'boolean', + }, + { + name: 'type', + validation: 'string', + }, + { + name: 'devServer', + validation: 'object', + defaultValue: { + logLevel: 'silent', + compress: true, + disableHostCheck: true, + clientLogLevel: 'error', + hot: true, + quiet: true, + overlay: false, + before: (app) => { + app.use((req, res, next) => { + res.set('Access-Control-Allow-Origin', '*'); + next(); + }); + }, + }, + configWebpack: (config, devServer, context) => { + const { command } = context; + if (command === 'start' && devServer) { + config.merge({ devServer }); + } + }, + }, + { + name: 'define', + validation: 'object', + }, + { + name: 'generateTypesForJs', + validation: 'boolean', + default: false, + }, +]; diff --git a/packages/build-plugin-lce/src/index.js b/packages/build-plugin-lce/src/index.js new file mode 100644 index 0000000..d118c0d --- /dev/null +++ b/packages/build-plugin-lce/src/index.js @@ -0,0 +1,126 @@ +const path = require('path'); +const fs = require('fs-extra'); +const { getWebpackConfig, getJestConfig } = require('build-scripts-config'); +const openBrowser = require('react-dev-utils/openBrowser'); +const chokidar = require('chokidar'); + +const getRightEntryExtname = require('./common/getRightEntryExtname'); +const getUMDWebpack = require('./common/getUMDWebpack'); +const htmlInjection = require('./common/htmlInjection'); +const setDevLog = require('./common/setDevLog'); +const setSassStyleExpanded = require('./common/setSassStyleExpanded'); + +const defaultUserConfig = require('./configs/userConfig'); +const reactUserConfig = require('./configs/react/userConfig'); +const babelCompiler = require('./compiler/babel'); + +module.exports = ({ + context, + registerTask, + registerCliOption, + registerUserConfig, + onHook, + log, + onGetJestConfig, +}) => { + const { command, rootDir, commandArgs, userConfig } = context; + const { plugins, ...compileOptions } = userConfig; + const { library } = compileOptions; + + // config htmlInjection for once + if (userConfig.htmlInjection) { + htmlInjection.configWebpack(userConfig.htmlInjection); + } + + /** + * register task for demo + */ + const mode = command === 'start' ? 'development' : 'production'; + const webpackConfig = getWebpackConfig(mode); + + setSassStyleExpanded(webpackConfig); + + /** + * # register task for production + */ + // get the right index entry from the src folder + const extNames = getRightEntryExtname(path.resolve(rootDir, 'src/')); + let hasMain = false; + if (fs.existsSync(path.join(rootDir, 'src', 'main.scss'))) { + hasMain = true; + } + // pack the right entry files to dist + if (extNames && library && (command === 'build' || commandArgs.watchDist)) { + registerTask('component-dist', getUMDWebpack({ context, compileOptions, extNames, hasMain })); + } + + // register cli options + const cliOptions = ['watch', 'watch-dist', 'https', 'disable-open']; + registerCliOption( + cliOptions.map((name) => ({ + name, + commands: ['start', 'build'], + })), + ); + + // register user config + registerUserConfig(defaultUserConfig.concat(reactUserConfig)); + + if (commandArgs.watch) { + const srcPath = path.join(rootDir, 'src'); + const watcher = chokidar.watch(srcPath, { + ignoreInitial: true, + interval: 1000, + }); + watcher.on('change', (file) => { + log.info(`${file} changed, start compile library.`); + babelCompiler(context, { + log, + userOptions: compileOptions, + type: 'react', + }); + }); + + watcher.on('error', (error) => { + log.error('fail to watch file', error); + }); + } + + if (command === 'test') { + // jest config + onGetJestConfig((jestConfig) => { + const { moduleNameMapper, ...rest } = jestConfig; + const defaultJestConfig = getJestConfig({ rootDir, moduleNameMapper }); + return { + ...defaultJestConfig, + ...rest, + // defaultJestConfig.moduleNameMapper already combine jestConfig.moduleNameMapper + moduleNameMapper: defaultJestConfig.moduleNameMapper, + }; + }); + } + + const compilerHook = 'before.build.load'; + onHook(compilerHook, async () => { + /** + * # generate es and lib by using babel. + */ + babelCompiler(context, { + log, + userOptions: compileOptions, + type: 'react', + }); + }); + + onHook('after.start.compile', async ({ urls, stats }) => { + // 自定义 log 内容 + setDevLog({ log, context, urls, stats }); + }); + + onHook('after.start.devServer', ({ url }) => { + // do not open browser when restart dev + if (!process.env.RESTART_DEV && !commandArgs.disableOpen) { + openBrowser(url); + } + }); +}; diff --git a/packages/build-plugin-lce/src/useConfig/define.js b/packages/build-plugin-lce/src/useConfig/define.js new file mode 100644 index 0000000..4c7e62e --- /dev/null +++ b/packages/build-plugin-lce/src/useConfig/define.js @@ -0,0 +1,17 @@ +module.exports = (config, define, context) => { + const defineVariables = {}; + + Object.keys(define).forEach((defineKey) => { + defineVariables[defineKey] = JSON.stringify(define[defineKey]); + }); + + if (config.plugins.get('DefinePlugin')) { + config + .plugin('DefinePlugin') + .tap((args) => [Object.assign(...args, defineVariables)]); + } else { + const { webpack } = context; + config.plugin('DefinePlugin') + .use(webpack.DefinePlugin, [defineVariables]); + } +}; From c655ec061ceab978a9b2e2139aa57683ab4694b0 Mon Sep 17 00:00:00 2001 From: wuchao <57242263@163.com> Date: Thu, 25 May 2023 17:35:35 +0800 Subject: [PATCH 69/98] fix(build-plugin-lowcode): windows import path (#24) --- packages/build-plugin-lowcode/src/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/build-plugin-lowcode/src/index.js b/packages/build-plugin-lowcode/src/index.js index c4db274..0117ea8 100644 --- a/packages/build-plugin-lowcode/src/index.js +++ b/packages/build-plugin-lowcode/src/index.js @@ -64,7 +64,7 @@ const defaultScssEntryPaths = [ function getEntry(rootDir, entryPath) { if (entryPath && fse.existsSync(path.resolve(rootDir, entryPath))) { - return path.resolve(rootDir, entryPath); + return path.resolve(rootDir, entryPath).replace(/\\/g, '\\\\'); } for (let i = 0; i < defaultEntryPaths.length; i++) { const p = path.resolve(rootDir, defaultEntryPaths[i]); @@ -957,7 +957,8 @@ async function bundleRenderView(options, pluginOptions, platform, execCompile) { return `const ${component} = getRealComponent(${component}Data, '${component}');\nexport { ${component} };`; }) .join('\n'); - componentViewsExportStr += `\nexport { default } from '${getEntry(rootDir, entryPath)}';`; + const exportPath = `\nexport { default } from '${getEntry(rootDir, entryPath)}';`; + componentViewsExportStr += exportPath.includes('\\\\') ? exportPath : exportPath.replace(/\\/g, '\\\\'); componentViewsImportStr = _componentViews .map((component) => { const componentNameFolder = camel2KebabComponentName(component); From 94119258a5d75a006560086069839925634a46a8 Mon Sep 17 00:00:00 2001 From: eternalsky Date: Thu, 25 May 2023 17:37:30 +0800 Subject: [PATCH 70/98] chore(build-plugin-lowcode): release 0.3.17 --- packages/build-plugin-lowcode/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/build-plugin-lowcode/package.json b/packages/build-plugin-lowcode/package.json index f23668a..e0ef341 100644 --- a/packages/build-plugin-lowcode/package.json +++ b/packages/build-plugin-lowcode/package.json @@ -1,6 +1,6 @@ { "name": "@alifd/build-plugin-lowcode", - "version": "0.3.16", + "version": "0.3.17", "description": "build plugin for component-to-lowcode", "main": "src/index.js", "keywords": [ From 250b40b78f07d230c6c073cb662a15f8e85e3121 Mon Sep 17 00:00:00 2001 From: eternalsky Date: Thu, 29 Jun 2023 10:16:09 +0800 Subject: [PATCH 71/98] =?UTF-8?q?feat(create-element):=20rax=20=E5=B7=B2?= =?UTF-8?q?=E7=BB=8F=E8=BF=9B=E5=85=A5=E5=81=9C=E6=AD=A2=E7=BB=B4=E6=8A=A4?= =?UTF-8?q?=E5=91=A8=E6=9C=9F=EF=BC=8C=E5=8E=BB=E9=99=A4=20rax=20=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E7=94=9F=E6=88=90=E5=85=A5=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/create-element/HISOTRY.md | 4 ++++ packages/create-element/package.json | 2 +- packages/create-element/src/component.ts | 6 ------ 3 files changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/create-element/HISOTRY.md b/packages/create-element/HISOTRY.md index e700fce..42b26a1 100644 --- a/packages/create-element/HISOTRY.md +++ b/packages/create-element/HISOTRY.md @@ -1,3 +1,7 @@ +## 1.2.0 + +- `feat` rax 已经进入停止维护周期，去除 rax 组件生成入口 + ## 1.1.3 - `fix` 无法获取最新模板 diff --git a/packages/create-element/package.json b/packages/create-element/package.json index 0d952e9..b81a7db 100644 --- a/packages/create-element/package.json +++ b/packages/create-element/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/create-element", - "version": "1.1.6", + "version": "1.2.0", "description": "", "main": "lib/index.js", "bin": { diff --git a/packages/create-element/src/component.ts b/packages/create-element/src/component.ts index 2b9f378..ec6b130 100644 --- a/packages/create-element/src/component.ts +++ b/packages/create-element/src/component.ts @@ -38,12 +38,6 @@ export default async (answers) => { }, { name: 'react-组件库', value: 'react-multiple', - }, { - name: 'rax-单组件', - value: 'rax-single', - }, { - name: 'rax-组件库', - value: 'rax-multiple', }], default: 'react-single', }]; From 048a9b8924df6d90f006b9b95f783a327db6ce92 Mon Sep 17 00:00:00 2001 From: LiGuangNian <792841450@qq.com> Date: Mon, 12 Jun 2023 13:43:08 +0800 Subject: [PATCH 72/98] =?UTF-8?q?fix(build-plugin-lowcode):=20win=E5=B9=B3?= =?UTF-8?q?=E5=8F=B0=EF=BC=8C=E5=9C=A8lowcode=E4=B8=AD=E5=AE=9A=E4=B9=89vi?= =?UTF-8?q?ew.js=E5=90=8E=E8=8E=B7=E5=8F=96=E5=88=B0=E7=9A=84=E8=B7=AF?= =?UTF-8?q?=E5=BE=84=E4=B8=8D=E5=AF=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 原来获取到的路径 F:\xxx\pakcages\xxx\src\index.ts 修改后获取到的路径 F:\\xxx\\pakcages\\xxx\\src\\index.ts --- packages/build-plugin-lowcode/src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/build-plugin-lowcode/src/index.js b/packages/build-plugin-lowcode/src/index.js index 0117ea8..85fa216 100644 --- a/packages/build-plugin-lowcode/src/index.js +++ b/packages/build-plugin-lowcode/src/index.js @@ -962,7 +962,7 @@ async function bundleRenderView(options, pluginOptions, platform, execCompile) { componentViewsImportStr = _componentViews .map((component) => { const componentNameFolder = camel2KebabComponentName(component); - const viewJsPath = path.resolve( + const viewJsPath = getEntry( rootDir, `src/${platform}/components/${componentNameFolder}/view`, ); From b9c55faded8ca60fa2b2f968d8168765b9a90483 Mon Sep 17 00:00:00 2001 From: eternalsky Date: Thu, 29 Jun 2023 20:31:24 +0800 Subject: [PATCH 73/98] chore(build-plugin-lowocde): release 0.3.18 --- packages/build-plugin-lowcode/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/build-plugin-lowcode/package.json b/packages/build-plugin-lowcode/package.json index e0ef341..8e3a240 100644 --- a/packages/build-plugin-lowcode/package.json +++ b/packages/build-plugin-lowcode/package.json @@ -1,6 +1,6 @@ { "name": "@alifd/build-plugin-lowcode", - "version": "0.3.17", + "version": "0.3.18", "description": "build plugin for component-to-lowcode", "main": "src/index.js", "keywords": [ From b39c7a40f101a2d5c7a453581521d4607264eedc Mon Sep 17 00:00:00 2001 From: eternalsky Date: Thu, 29 Jun 2023 10:08:22 +0800 Subject: [PATCH 74/98] =?UTF-8?q?feat(build-plugin-lowcode):=20=E6=94=AF?= =?UTF-8?q?=E6=8C=81=20lowcode=20=E6=96=87=E4=BB=B6=E5=A4=B9=E7=9A=84?= =?UTF-8?q?=E6=9E=84=E5=BB=BA=E8=BE=93=E5=87=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/build-plugin-lowcode/README.md | 8 +- packages/build-plugin-lowcode/package.json | 4 + .../build-plugin-lowcode/src/compile/babel.js | 196 ++++++++++++++++++ .../build-plugin-lowcode/src/compile/meta.js | 86 ++++++++ packages/build-plugin-lowcode/src/index.js | 110 ++++------ .../src/utils/getDemoDir.js | 16 ++ .../build-plugin-lowcode/src/utils/index.js | 27 ++- .../src/utils/{npm.ts => npm.js} | 0 .../utils/{parse-props.ts => parse-props.js} | 0 9 files changed, 370 insertions(+), 77 deletions(-) create mode 100644 packages/build-plugin-lowcode/src/compile/babel.js create mode 100644 packages/build-plugin-lowcode/src/compile/meta.js create mode 100644 packages/build-plugin-lowcode/src/utils/getDemoDir.js rename packages/build-plugin-lowcode/src/utils/{npm.ts => npm.js} (100%) rename packages/build-plugin-lowcode/src/utils/{parse-props.ts => parse-props.js} (100%) diff --git a/packages/build-plugin-lowcode/README.md b/packages/build-plugin-lowcode/README.md index d64b06d..c323253 100644 --- a/packages/build-plugin-lowcode/README.md +++ b/packages/build-plugin-lowcode/README.md @@ -2,7 +2,7 @@ ## 使用文档 -``` +```ts export interface LowcodeOptions { builtinAssets?: Array; // 会作为内置资产保存到构建产物中 extraAssets?: Array; // 只在调试环境加载到资产包中 @@ -21,11 +21,11 @@ export interface SetterMap { ## 开发调试 ### 组件开发 -`demo/component` 目录下是测试组件的项目，改项目引用了 build-plugin-lowcode ，相关配置在 `demo/component/build.lowcode.js` 中； +`demo/component`目录下是测试组件的项目，改项目引用了 build-plugin-lowcode，相关配置在在 `demo/component/build.lowcode.js` 中； 可以修改 build-plugin-lowcode 的代码、修改 demo/component/build.lowcode.js 的配置进行调试； -``` -在 build-plugin-lowcode 根目录下执行启动调试环境 +```bash +# 在 build-plugin-lowcode 根目录下执行启动调试环境 npm run component:dev ``` \ No newline at end of file diff --git a/packages/build-plugin-lowcode/package.json b/packages/build-plugin-lowcode/package.json index 8e3a240..227d26f 100644 --- a/packages/build-plugin-lowcode/package.json +++ b/packages/build-plugin-lowcode/package.json @@ -24,16 +24,20 @@ "@alilc/lowcode-react-renderer": "^1.0.1", "@alilc/lowcode-types": "^1.0.1", "@alilc/lowcode-utils": "^1.0.1", + "@babel/core": "^7.22.5", "axios": "^0.21.4", + "build-plugin-component": "^1.12.0", "build-scripts-config": "^3.0.3", "chokidar": "^3.5.3", "cross-spawn-promise": "^0.10.2", "driver-universal": "^3.4.0", + "fs-extra": "^11.1.1", "glob": "^7.1.7", "handlebars": "^4.4.0", "html-webpack-plugin": "^3.2.0", "is-wsl": "^2.2.0", "lodash": "^4.17.21", + "rax-babel-config": "^2.0.4", "rpx-loader": "^1.0.1", "style-loader": "^2.0.0", "webpack": "^4.46.0" diff --git a/packages/build-plugin-lowcode/src/compile/babel.js b/packages/build-plugin-lowcode/src/compile/babel.js new file mode 100644 index 0000000..d0f3567 --- /dev/null +++ b/packages/build-plugin-lowcode/src/compile/babel.js @@ -0,0 +1,196 @@ +const glob = require("glob"); +const babel = require("@babel/core"); +const path = require("path"); +const fs = require("fs-extra"); +const getRaxBabelConfig = require("rax-babel-config"); +const getCompileBabel = require("build-plugin-component/src/utils/getCompileBabel"); +const dts = require('build-plugin-component/src/compiler/dts'); + +const defaultDynamicImportLibraries = [ + "antd", + "@alifd/next", + "@alife/next", + "@icedesign/base", +]; + +const getBabelConfig = ({ + target, + componentLibs = defaultDynamicImportLibraries, + rootDir, + babelPlugins, + babelOptions, + type, + alias, + root = 'lowcode', +}) => { + const params = target === "es" ? { modules: false } : {}; + let babelConfig; + if (type === "react") { + babelConfig = getCompileBabel(params, { + babelPlugins, + babelOptions, + rootDir, + }); + } else { + babelConfig = getRaxBabelConfig({ + // Be careful~ change it's value by inlineStyle may cause break-change + styleSheet: true, + custom: { + ignore: ["**/**/*.d.ts"], + }, + ...params, + }); + babelConfig.presets.push([ + require.resolve("@babel/preset-typescript"), + { jsxPragma: "createElement" }, + ]); + + babelConfig.plugins = [...babelConfig.plugins, ...(babelPlugins || [])]; + } + // generate babel-plugin-import config + const plugins = []; + componentLibs.forEach((libraryName) => { + // check es folder if target is es + const pluginOption = { + libraryName, + style: false, // style file will be require in style.js + }; + if (target === "es") { + ["es", "esm"].some((item) => { + const dirPath = path.join(rootDir, "node_modules", libraryName, item); + const dirExist = fs.existsSync(dirPath); + + if (dirExist) { + pluginOption.libraryDirectory = item; + } + + return dirExist; + }); + } + plugins.push([ + require.resolve("babel-plugin-import"), + pluginOption, + libraryName, + ]); + }); + babelConfig.plugins = babelConfig.plugins.concat(plugins); + if (alias) { + const aliasRelative = {}; + Object.keys(alias).forEach((aliasKey) => { + aliasRelative[aliasKey] = alias[aliasKey].startsWith("./") + ? alias[aliasKey] + : `./${alias[aliasKey]}`; + }); + babelConfig.plugins = babelConfig.plugins.concat([ + [ + require.resolve("babel-plugin-module-resolver"), + { + root: [root], + alias: aliasRelative, + }, + ], + ]); + } + return babelConfig; +}; + +const findGitIgnorePath = (rootDir) => { + let dir = rootDir; + let gitignorePath; + while (dir !== '/') { + const tempPath = path.join(dir, ".gitignore") + const fileExists = fs.pathExistsSync(tempPath); + if (fileExists) { + gitignorePath = tempPath; + break; + } else { + dir = path.dirname(dir); + } + } + return gitignorePath; +} + +const reg = { + REG_TS: /\.(tsx?)$/, + REG_D_TS: /\.d\.ts$/, + + REG_JS: /\.(jsx?|tsx?)$/, + REG_SASS: /\.(sa|sc|c)ss$/, + REG_LESS: /\.(le|c)ss$/, + + REG_JS_INDEX: /index\.(jsx?|tsx?)$/, + REG_SASS_INDEX: /index\.(sa|sc|c)ss$/, + REG_LESS_INDEX: /index\.(le|c)ss$/, +}; + + +const babelCompile = async ({ + source, + target, + rootDir, + userOptions, + type = "react", +}) => { + const { REG_SASS, REG_LESS, REG_JS, REG_D_TS } = reg; + const filesPath = glob.sync("**/*.*", { + cwd: source, + ignore: ["node_modules/**"], + }); + const compileInfo = []; + ['lib', 'es'].forEach((target) => { + const targetPath = `${source}_${target}`; + const distDirPath = path.join(rootDir, targetPath); + const { babelPlugins = [], babelOptions = [], alias } = userOptions; + fs.removeSync(distDirPath); + fs.ensureDirSync(distDirPath); + filesPath.forEach((filePath) => { + const sourceFile = path.join(rootDir, source, filePath); + if (!REG_JS.test(filePath) || REG_D_TS.test(filePath)) { + // copy file if it does not match REG_JS + try { + fs.copySync(sourceFile, path.join(distDirPath, filePath)); + console.log(`file ${filePath} copied`); + } catch (err) { + throw new Error(err); + } + } else { + const distFile = path.join(distDirPath, filePath.replace(REG_JS, ".js")); + const babelConfig = getBabelConfig({ + target, + rootDir, + babelOptions, + babelPlugins, + type, + alias, + }); + const { code } = babel.transformFileSync(sourceFile, { + filename: distFile, + ...babelConfig, + }); + fs.ensureDirSync(path.dirname(distFile)); + fs.writeFileSync(distFile, code, "utf-8"); + compileInfo.push({ + filePath, + sourceFile, + destPath: distDirPath, + }); + } + }); + // 检查 .gitignore 如果没有产出路径，则增加该配置 + const gitignorePath = findGitIgnorePath(rootDir); + if (gitignorePath) { + const gitignoreFile = fs.readFileSync(gitignorePath, "utf-8"); + if (!(new RegExp(`${targetPath}/`)).test(gitignoreFile)) { + const newGitignoreFile = `${targetPath}/\r\n${gitignoreFile}`; + fs.writeFileSync(gitignorePath, newGitignoreFile); + } + } + }); + // 生成声明文件 + dts(compileInfo, { + log: console, + }) +}; + +babelCompile.getBabelConfig = getBabelConfig; +module.exports = babelCompile; \ No newline at end of file diff --git a/packages/build-plugin-lowcode/src/compile/meta.js b/packages/build-plugin-lowcode/src/compile/meta.js new file mode 100644 index 0000000..6739df3 --- /dev/null +++ b/packages/build-plugin-lowcode/src/compile/meta.js @@ -0,0 +1,86 @@ +/** 生成 lowcode 的入口文件（meta.js, view.js） */ +const fs = require("fs-extra"); +const path = require("path"); +const babel = require("@babel/core"); +const { getBabelConfig } = require("./babel"); +const { glob } = require("glob"); + +const getAvailableFileName = ({ fileName, lowcodeDir, rootDir }) => { + let finalName = fileName; + + while (true) { + const files = glob.sync(`${finalName}.*`, { + cwd: lowcodeDir, + ignore: ["node_modules/**"], + }); + const fileHasExists = files.some((f) => { + return /\.j|tsx?$/.test(f); + }); + if (fileHasExists) { + finalName = `${finalName}_entry` + } else { + break; + } + } + return finalName; +}; + +module.exports = async ({ + rootDir, + tmpDir = ".tmp", + lowcodeDir = "lowcode", + userOptions, + type = "react", + package, +}) => { + const { babelPlugins = [], babelOptions = [], alias } = userOptions; + const exportsData = { + "./prototype": {}, + "./prototypeView": {}, + }; + const targetExportsMap = { + 'lib': 'require', + 'es': 'import', + }; + const fileNameEntryMap = { + meta: './prototype', + view: './prototypeView', + }; + ['lib', 'es'].forEach((target) => { + const babelConfigOptions = { + target, + babelOptions, + babelPlugins, + type, + alias, + rootDir, + }; + const babelConfig = getBabelConfig(babelConfigOptions); + ["meta", "view"].forEach((fileName) => { + const filePath = path.join(rootDir, tmpDir, `${fileName}.js`); + let fileContent = fs.readFileSync(filePath, "utf-8"); + fileContent = fileContent + .replace(new RegExp(path.join(rootDir, "lowcode"), "g"), ".") + .replace(new RegExp(path.join(rootDir, "src"), "g"), `../${target}`) + .replace(/\.ts(x)?('|")/g, "$2") + .replace(/\\\\/g, "/"); + const targetPath = `${lowcodeDir}_${target}`; + if (!package.files.includes(`${targetPath}/`)) { + package.files.push(`${targetPath}/`); + } + const entryName = getAvailableFileName({ fileName, lowcodeDir, rootDir }); + exportsData[fileNameEntryMap[fileName]][targetExportsMap[target]] = `${targetPath}/${entryName}`; + const distFilePath = path.join(rootDir, targetPath, `${entryName}.js`); + const { code } = babel.transformSync(fileContent, { + filename: distFilePath, + ...babelConfig, + }); + fs.ensureDirSync(path.dirname(distFilePath)); + fs.writeFileSync(distFilePath, code, "utf-8"); + }); + }); + package.exports = { + ...exportsData, + ...package.exports, + }; +}; diff --git a/packages/build-plugin-lowcode/src/index.js b/packages/build-plugin-lowcode/src/index.js index 85fa216..ff0199e 100644 --- a/packages/build-plugin-lowcode/src/index.js +++ b/packages/build-plugin-lowcode/src/index.js @@ -7,6 +7,9 @@ const mergeWith = require('lodash/mergeWith'); const parser = require('@alilc/lowcode-material-parser'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const { getWebpackConfig } = require('build-scripts-config'); +const babelCompile = require('./compile/babel'); +const metaCompile = require('./compile/meta'); +const getDemoDir = require('./utils/getDemoDir'); const isWsl = require('is-wsl'); let INIT_STATE = false; @@ -15,7 +18,7 @@ const { debug } = console; const UTILS = require('./utils'); const CONSTANTS = require('./constants'); -const { installModule } = require('./utils/npm.ts'); +const { installModule } = require('./utils/npm'); const userWebpackConfig = require('./config/user-config'); const { @@ -25,6 +28,7 @@ const { asyncDebounce, camel2KebabComponentName, kebab2CamelComponentName, + getUsedComponentMetas, } = UTILS; const { @@ -144,25 +148,6 @@ function getUsedComponentViews(rootDir, targetDir = 'lowcode', components) { : viewPaths.map((dir) => kebab2CamelComponentName(dir)); } -function getUsedComponentMetas(rootDir, lowcodeDir = 'lowcode', metaFilename, components) { - let metaPaths = glob.sync( - path.resolve(rootDir, `${lowcodeDir}/**/${metaFilename}.@(js|ts|jsx|tsx)`), - ); - if (metaPaths && metaPaths.length) { - metaPaths = metaPaths.map((item) => { - return item.slice( - path.resolve(rootDir, lowcodeDir).length + 1, - item.lastIndexOf(metaFilename) - 1, - ); - }); - } - return components - ? components.filter((component) => { - return metaPaths.includes(camel2KebabComponentName(component)); - }) - : metaPaths.map((dir) => kebab2CamelComponentName(dir)); -} - /** * 将 css 打包到 js 文件中 * @param {object} config webpack chain 配置 @@ -258,8 +243,8 @@ function confirmRenderPlatforms(rootDir, platforms) { async function build(options, pluginOptions, execCompile) { const webPackConfig = getWebpackConfig('production'); - const { context } = options; - const { rootDir, pkg: package, userConfig = {} } = context; + const { context, onHook } = options; + const { rootDir, pkg: package, userConfig = {}, commandArgs } = context; const { alias = {} } = userConfig; const { components, @@ -286,6 +271,21 @@ async function build(options, pluginOptions, execCompile) { lowcodeDir, entryPath, )); + if (execCompile) { + onHook('before.build.load', async () => { + await babelCompile({ + source: lowcodeDir, + rootDir, + userOptions: userConfig, + }) + await metaCompile({ + rootDir, + userOptions: userConfig, + lowcodeDir, + package, + }); + }) + } const confirmedMetaTypes = confirmMetaTypes(rootDir, lowcodeDir, metaTypes); const metaPaths = await Promise.all( confirmedMetaTypes.map((item) => { @@ -1184,7 +1184,7 @@ async function bundleAssets(options, pluginOptions, metaTypes, renderTypes, exec } fse.outputFileSync(targetPath, JSON.stringify(require(originPath), null, 2)); }); - updatePackage(rootDir, baseUrl, lowcodeDir, buildTarget, engineScope); + updatePackage(rootDir, baseUrl, lowcodeDir, buildTarget, engineScope, package); }); return assetsPaths; } @@ -1195,8 +1195,9 @@ function updatePackage( lowcodeDir = 'lowcode', buildTarget = 'build', engineScope = '@ali', + package, ) { - const packageData = require(path.resolve(rootDir, 'package.json')); + const packageData = package; let { componentConfig } = packageData; if (!componentConfig) { componentConfig = {}; @@ -1209,6 +1210,20 @@ function updatePackage( isBetaVersion ? 'daily' : 'prod' }.json`; packageData.componentConfig = componentConfig; + packageData.lcMeta = { + ...packageData.lcMeta, + type: 'component', + }; + if (!package.dependencies['@babel/runtime']) { + package.dependencies['@babel/runtime'] = '^7.0.0'; + } + packageData.exports = { + '.': { + import: packageData.module || 'es/index.js', + require: packageData.main || 'lib/index.js', + }, + ...packageData.exports, + } fse.outputFileSync(path.resolve(rootDir, 'package.json'), JSON.stringify(packageData, null, 2)); } @@ -1286,7 +1301,7 @@ async function bundleComponentMeta(webPackConfig, options, pluginOptions, execCo `${buildTarget}/${lowcodeDir}/${componentJsPath}.js`, ); - // 把meta.js里面的window替换成this + // 把 meta.js 里面的 window 替换成 this const jsContent = fse.readFileSync(originPath, 'utf-8'); const jsContentTarget = jsContent.replace('window', 'this'); fse.outputFileSync(originPath, jsContentTarget); @@ -1303,48 +1318,3 @@ async function bundleComponentMeta(webPackConfig, options, pluginOptions, execCo return componentsMetaPath; } - -// function transferMeta2Json(rootDir) { -// require('jsdom-global')(); -// // globalThis = global; -// const jsdom = require('jsdom'); -// const { JSDOM } = jsdom; -// const DOM = new JSDOM( -// ` -// -// - -// -// -// -// -// DEMO 预览 -// - -// -//
-// -// -// `, -// { -// runScripts: 'dangerously', -// resources: 'usable', -// storageQuota: 10000000, -// url: 'https://example.org?appCode=test', -// }, -// ); -// const { window } = DOM; -// window.onload = () => { -// debug('ready to roll!'); -// try { -// const p = require(path.resolve(rootDir, 'build/lowcode/meta.js')); -// fse.outputFileSync( -// path.resolve(rootDir, 'build/lowcode/meta.json'), -// toJson(p.default.assetsProd), -// ); -// } catch (e) { -// debug('error: ', e); -// } -// process.exit(0); -// }; -// } diff --git a/packages/build-plugin-lowcode/src/utils/getDemoDir.js b/packages/build-plugin-lowcode/src/utils/getDemoDir.js new file mode 100644 index 0000000..b6bcf67 --- /dev/null +++ b/packages/build-plugin-lowcode/src/utils/getDemoDir.js @@ -0,0 +1,16 @@ +const { existsSync } = require('fs'); +const { join } = require('path'); + +module.exports = function getDemoPath(projectDir) { + let demoDir; + // compatible with directory docs + const searchDirs = ['demo', 'docs']; + for (let i = 0; i < searchDirs.length; i++) { + const searchPath = join(projectDir, searchDirs[i]); + if (existsSync(searchPath)) { + demoDir = searchDirs[i]; + break; + } + } + return demoDir; +}; \ No newline at end of file diff --git a/packages/build-plugin-lowcode/src/utils/index.js b/packages/build-plugin-lowcode/src/utils/index.js index ca3c9d8..f5e5b0e 100644 --- a/packages/build-plugin-lowcode/src/utils/index.js +++ b/packages/build-plugin-lowcode/src/utils/index.js @@ -2,7 +2,8 @@ const _ = require('lodash'); const path = require('path'); const fse = require('fs-extra'); const hbs = require('handlebars'); -const parseProps = require('./parse-props.ts'); +const glob = require('glob'); +const parseProps = require('./parse-props'); /** * @description generate js file as webpack entry @@ -12,12 +13,12 @@ const parseProps = require('./parse-props.ts'); * @param {Object} params params for compile template content * @returns {String} path of entry file */ -function generateEntry({ template, filename = 'index.js', rootDir = process.cwd(), params }) { +function generateEntry({ template, filename = 'index.js', rootDir = process.cwd(), params, tmpDirName = '.tmp' }) { const hbsTemplatePath = path.join(__dirname, `../templates/${template}`); const hbsTemplateContent = fse.readFileSync(hbsTemplatePath, 'utf-8'); const compileTemplateContent = hbs.compile(hbsTemplateContent); - const tempDir = path.join(rootDir, '.tmp'); + const tempDir = path.join(rootDir, tmpDirName); const jsPath = path.join(tempDir, filename); const jsTemplateContent = compileTemplateContent(params); @@ -219,6 +220,25 @@ function asyncDebounce(func, wait) { return returnFunc; } +function getUsedComponentMetas(rootDir, lowcodeDir = 'lowcode', metaFilename, components) { + let metaPaths = glob.sync( + path.resolve(rootDir, `${lowcodeDir}/**/${metaFilename}.@(js|ts|jsx|tsx)`), + ); + if (metaPaths && metaPaths.length) { + metaPaths = metaPaths.map((item) => { + return item.slice( + path.resolve(rootDir, lowcodeDir).length + 1, + item.lastIndexOf(metaFilename) - 1, + ); + }); + } + return components + ? components.filter((component) => { + return metaPaths.includes(camel2KebabComponentName(component)); + }) + : metaPaths.map((dir) => kebab2CamelComponentName(dir)); +} + module.exports = { toJson, parseProps, @@ -228,4 +248,5 @@ module.exports = { generateComponentList, camel2KebabComponentName, kebab2CamelComponentName, + getUsedComponentMetas, }; diff --git a/packages/build-plugin-lowcode/src/utils/npm.ts b/packages/build-plugin-lowcode/src/utils/npm.js similarity index 100% rename from packages/build-plugin-lowcode/src/utils/npm.ts rename to packages/build-plugin-lowcode/src/utils/npm.js diff --git a/packages/build-plugin-lowcode/src/utils/parse-props.ts b/packages/build-plugin-lowcode/src/utils/parse-props.js similarity index 100% rename from packages/build-plugin-lowcode/src/utils/parse-props.ts rename to packages/build-plugin-lowcode/src/utils/parse-props.js From 487af765676923ddef80c3ee9536af45e1a920dd Mon Sep 17 00:00:00 2001 From: eternalsky Date: Thu, 29 Jun 2023 10:08:22 +0800 Subject: [PATCH 75/98] =?UTF-8?q?feat(build-plugin-lowcode):=20=E6=94=AF?= =?UTF-8?q?=E6=8C=81=20lowcode=20=E6=96=87=E4=BB=B6=E5=A4=B9=E7=9A=84?= =?UTF-8?q?=E6=9E=84=E5=BB=BA=E8=BE=93=E5=87=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/build-plugin-lowcode/README.md | 8 +- packages/build-plugin-lowcode/package.json | 4 + .../build-plugin-lowcode/src/compile/babel.js | 196 ++++++++++++++++++ .../build-plugin-lowcode/src/compile/meta.js | 86 ++++++++ packages/build-plugin-lowcode/src/index.js | 110 ++++------ .../src/utils/getDemoDir.js | 16 ++ .../build-plugin-lowcode/src/utils/index.js | 27 ++- .../src/utils/{npm.ts => npm.js} | 0 .../utils/{parse-props.ts => parse-props.js} | 0 9 files changed, 370 insertions(+), 77 deletions(-) create mode 100644 packages/build-plugin-lowcode/src/compile/babel.js create mode 100644 packages/build-plugin-lowcode/src/compile/meta.js create mode 100644 packages/build-plugin-lowcode/src/utils/getDemoDir.js rename packages/build-plugin-lowcode/src/utils/{npm.ts => npm.js} (100%) rename packages/build-plugin-lowcode/src/utils/{parse-props.ts => parse-props.js} (100%) diff --git a/packages/build-plugin-lowcode/README.md b/packages/build-plugin-lowcode/README.md index d64b06d..c323253 100644 --- a/packages/build-plugin-lowcode/README.md +++ b/packages/build-plugin-lowcode/README.md @@ -2,7 +2,7 @@ ## 使用文档 -``` +```ts export interface LowcodeOptions { builtinAssets?: Array; // 会作为内置资产保存到构建产物中 extraAssets?: Array; // 只在调试环境加载到资产包中 @@ -21,11 +21,11 @@ export interface SetterMap { ## 开发调试 ### 组件开发 -`demo/component` 目录下是测试组件的项目，改项目引用了 build-plugin-lowcode ，相关配置在 `demo/component/build.lowcode.js` 中； +`demo/component`目录下是测试组件的项目，改项目引用了 build-plugin-lowcode，相关配置在在 `demo/component/build.lowcode.js` 中； 可以修改 build-plugin-lowcode 的代码、修改 demo/component/build.lowcode.js 的配置进行调试； -``` -在 build-plugin-lowcode 根目录下执行启动调试环境 +```bash +# 在 build-plugin-lowcode 根目录下执行启动调试环境 npm run component:dev ``` \ No newline at end of file diff --git a/packages/build-plugin-lowcode/package.json b/packages/build-plugin-lowcode/package.json index 8e3a240..227d26f 100644 --- a/packages/build-plugin-lowcode/package.json +++ b/packages/build-plugin-lowcode/package.json @@ -24,16 +24,20 @@ "@alilc/lowcode-react-renderer": "^1.0.1", "@alilc/lowcode-types": "^1.0.1", "@alilc/lowcode-utils": "^1.0.1", + "@babel/core": "^7.22.5", "axios": "^0.21.4", + "build-plugin-component": "^1.12.0", "build-scripts-config": "^3.0.3", "chokidar": "^3.5.3", "cross-spawn-promise": "^0.10.2", "driver-universal": "^3.4.0", + "fs-extra": "^11.1.1", "glob": "^7.1.7", "handlebars": "^4.4.0", "html-webpack-plugin": "^3.2.0", "is-wsl": "^2.2.0", "lodash": "^4.17.21", + "rax-babel-config": "^2.0.4", "rpx-loader": "^1.0.1", "style-loader": "^2.0.0", "webpack": "^4.46.0" diff --git a/packages/build-plugin-lowcode/src/compile/babel.js b/packages/build-plugin-lowcode/src/compile/babel.js new file mode 100644 index 0000000..d0f3567 --- /dev/null +++ b/packages/build-plugin-lowcode/src/compile/babel.js @@ -0,0 +1,196 @@ +const glob = require("glob"); +const babel = require("@babel/core"); +const path = require("path"); +const fs = require("fs-extra"); +const getRaxBabelConfig = require("rax-babel-config"); +const getCompileBabel = require("build-plugin-component/src/utils/getCompileBabel"); +const dts = require('build-plugin-component/src/compiler/dts'); + +const defaultDynamicImportLibraries = [ + "antd", + "@alifd/next", + "@alife/next", + "@icedesign/base", +]; + +const getBabelConfig = ({ + target, + componentLibs = defaultDynamicImportLibraries, + rootDir, + babelPlugins, + babelOptions, + type, + alias, + root = 'lowcode', +}) => { + const params = target === "es" ? { modules: false } : {}; + let babelConfig; + if (type === "react") { + babelConfig = getCompileBabel(params, { + babelPlugins, + babelOptions, + rootDir, + }); + } else { + babelConfig = getRaxBabelConfig({ + // Be careful~ change it's value by inlineStyle may cause break-change + styleSheet: true, + custom: { + ignore: ["**/**/*.d.ts"], + }, + ...params, + }); + babelConfig.presets.push([ + require.resolve("@babel/preset-typescript"), + { jsxPragma: "createElement" }, + ]); + + babelConfig.plugins = [...babelConfig.plugins, ...(babelPlugins || [])]; + } + // generate babel-plugin-import config + const plugins = []; + componentLibs.forEach((libraryName) => { + // check es folder if target is es + const pluginOption = { + libraryName, + style: false, // style file will be require in style.js + }; + if (target === "es") { + ["es", "esm"].some((item) => { + const dirPath = path.join(rootDir, "node_modules", libraryName, item); + const dirExist = fs.existsSync(dirPath); + + if (dirExist) { + pluginOption.libraryDirectory = item; + } + + return dirExist; + }); + } + plugins.push([ + require.resolve("babel-plugin-import"), + pluginOption, + libraryName, + ]); + }); + babelConfig.plugins = babelConfig.plugins.concat(plugins); + if (alias) { + const aliasRelative = {}; + Object.keys(alias).forEach((aliasKey) => { + aliasRelative[aliasKey] = alias[aliasKey].startsWith("./") + ? alias[aliasKey] + : `./${alias[aliasKey]}`; + }); + babelConfig.plugins = babelConfig.plugins.concat([ + [ + require.resolve("babel-plugin-module-resolver"), + { + root: [root], + alias: aliasRelative, + }, + ], + ]); + } + return babelConfig; +}; + +const findGitIgnorePath = (rootDir) => { + let dir = rootDir; + let gitignorePath; + while (dir !== '/') { + const tempPath = path.join(dir, ".gitignore") + const fileExists = fs.pathExistsSync(tempPath); + if (fileExists) { + gitignorePath = tempPath; + break; + } else { + dir = path.dirname(dir); + } + } + return gitignorePath; +} + +const reg = { + REG_TS: /\.(tsx?)$/, + REG_D_TS: /\.d\.ts$/, + + REG_JS: /\.(jsx?|tsx?)$/, + REG_SASS: /\.(sa|sc|c)ss$/, + REG_LESS: /\.(le|c)ss$/, + + REG_JS_INDEX: /index\.(jsx?|tsx?)$/, + REG_SASS_INDEX: /index\.(sa|sc|c)ss$/, + REG_LESS_INDEX: /index\.(le|c)ss$/, +}; + + +const babelCompile = async ({ + source, + target, + rootDir, + userOptions, + type = "react", +}) => { + const { REG_SASS, REG_LESS, REG_JS, REG_D_TS } = reg; + const filesPath = glob.sync("**/*.*", { + cwd: source, + ignore: ["node_modules/**"], + }); + const compileInfo = []; + ['lib', 'es'].forEach((target) => { + const targetPath = `${source}_${target}`; + const distDirPath = path.join(rootDir, targetPath); + const { babelPlugins = [], babelOptions = [], alias } = userOptions; + fs.removeSync(distDirPath); + fs.ensureDirSync(distDirPath); + filesPath.forEach((filePath) => { + const sourceFile = path.join(rootDir, source, filePath); + if (!REG_JS.test(filePath) || REG_D_TS.test(filePath)) { + // copy file if it does not match REG_JS + try { + fs.copySync(sourceFile, path.join(distDirPath, filePath)); + console.log(`file ${filePath} copied`); + } catch (err) { + throw new Error(err); + } + } else { + const distFile = path.join(distDirPath, filePath.replace(REG_JS, ".js")); + const babelConfig = getBabelConfig({ + target, + rootDir, + babelOptions, + babelPlugins, + type, + alias, + }); + const { code } = babel.transformFileSync(sourceFile, { + filename: distFile, + ...babelConfig, + }); + fs.ensureDirSync(path.dirname(distFile)); + fs.writeFileSync(distFile, code, "utf-8"); + compileInfo.push({ + filePath, + sourceFile, + destPath: distDirPath, + }); + } + }); + // 检查 .gitignore 如果没有产出路径，则增加该配置 + const gitignorePath = findGitIgnorePath(rootDir); + if (gitignorePath) { + const gitignoreFile = fs.readFileSync(gitignorePath, "utf-8"); + if (!(new RegExp(`${targetPath}/`)).test(gitignoreFile)) { + const newGitignoreFile = `${targetPath}/\r\n${gitignoreFile}`; + fs.writeFileSync(gitignorePath, newGitignoreFile); + } + } + }); + // 生成声明文件 + dts(compileInfo, { + log: console, + }) +}; + +babelCompile.getBabelConfig = getBabelConfig; +module.exports = babelCompile; \ No newline at end of file diff --git a/packages/build-plugin-lowcode/src/compile/meta.js b/packages/build-plugin-lowcode/src/compile/meta.js new file mode 100644 index 0000000..6739df3 --- /dev/null +++ b/packages/build-plugin-lowcode/src/compile/meta.js @@ -0,0 +1,86 @@ +/** 生成 lowcode 的入口文件（meta.js, view.js） */ +const fs = require("fs-extra"); +const path = require("path"); +const babel = require("@babel/core"); +const { getBabelConfig } = require("./babel"); +const { glob } = require("glob"); + +const getAvailableFileName = ({ fileName, lowcodeDir, rootDir }) => { + let finalName = fileName; + + while (true) { + const files = glob.sync(`${finalName}.*`, { + cwd: lowcodeDir, + ignore: ["node_modules/**"], + }); + const fileHasExists = files.some((f) => { + return /\.j|tsx?$/.test(f); + }); + if (fileHasExists) { + finalName = `${finalName}_entry` + } else { + break; + } + } + return finalName; +}; + +module.exports = async ({ + rootDir, + tmpDir = ".tmp", + lowcodeDir = "lowcode", + userOptions, + type = "react", + package, +}) => { + const { babelPlugins = [], babelOptions = [], alias } = userOptions; + const exportsData = { + "./prototype": {}, + "./prototypeView": {}, + }; + const targetExportsMap = { + 'lib': 'require', + 'es': 'import', + }; + const fileNameEntryMap = { + meta: './prototype', + view: './prototypeView', + }; + ['lib', 'es'].forEach((target) => { + const babelConfigOptions = { + target, + babelOptions, + babelPlugins, + type, + alias, + rootDir, + }; + const babelConfig = getBabelConfig(babelConfigOptions); + ["meta", "view"].forEach((fileName) => { + const filePath = path.join(rootDir, tmpDir, `${fileName}.js`); + let fileContent = fs.readFileSync(filePath, "utf-8"); + fileContent = fileContent + .replace(new RegExp(path.join(rootDir, "lowcode"), "g"), ".") + .replace(new RegExp(path.join(rootDir, "src"), "g"), `../${target}`) + .replace(/\.ts(x)?('|")/g, "$2") + .replace(/\\\\/g, "/"); + const targetPath = `${lowcodeDir}_${target}`; + if (!package.files.includes(`${targetPath}/`)) { + package.files.push(`${targetPath}/`); + } + const entryName = getAvailableFileName({ fileName, lowcodeDir, rootDir }); + exportsData[fileNameEntryMap[fileName]][targetExportsMap[target]] = `${targetPath}/${entryName}`; + const distFilePath = path.join(rootDir, targetPath, `${entryName}.js`); + const { code } = babel.transformSync(fileContent, { + filename: distFilePath, + ...babelConfig, + }); + fs.ensureDirSync(path.dirname(distFilePath)); + fs.writeFileSync(distFilePath, code, "utf-8"); + }); + }); + package.exports = { + ...exportsData, + ...package.exports, + }; +}; diff --git a/packages/build-plugin-lowcode/src/index.js b/packages/build-plugin-lowcode/src/index.js index 85fa216..ff0199e 100644 --- a/packages/build-plugin-lowcode/src/index.js +++ b/packages/build-plugin-lowcode/src/index.js @@ -7,6 +7,9 @@ const mergeWith = require('lodash/mergeWith'); const parser = require('@alilc/lowcode-material-parser'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const { getWebpackConfig } = require('build-scripts-config'); +const babelCompile = require('./compile/babel'); +const metaCompile = require('./compile/meta'); +const getDemoDir = require('./utils/getDemoDir'); const isWsl = require('is-wsl'); let INIT_STATE = false; @@ -15,7 +18,7 @@ const { debug } = console; const UTILS = require('./utils'); const CONSTANTS = require('./constants'); -const { installModule } = require('./utils/npm.ts'); +const { installModule } = require('./utils/npm'); const userWebpackConfig = require('./config/user-config'); const { @@ -25,6 +28,7 @@ const { asyncDebounce, camel2KebabComponentName, kebab2CamelComponentName, + getUsedComponentMetas, } = UTILS; const { @@ -144,25 +148,6 @@ function getUsedComponentViews(rootDir, targetDir = 'lowcode', components) { : viewPaths.map((dir) => kebab2CamelComponentName(dir)); } -function getUsedComponentMetas(rootDir, lowcodeDir = 'lowcode', metaFilename, components) { - let metaPaths = glob.sync( - path.resolve(rootDir, `${lowcodeDir}/**/${metaFilename}.@(js|ts|jsx|tsx)`), - ); - if (metaPaths && metaPaths.length) { - metaPaths = metaPaths.map((item) => { - return item.slice( - path.resolve(rootDir, lowcodeDir).length + 1, - item.lastIndexOf(metaFilename) - 1, - ); - }); - } - return components - ? components.filter((component) => { - return metaPaths.includes(camel2KebabComponentName(component)); - }) - : metaPaths.map((dir) => kebab2CamelComponentName(dir)); -} - /** * 将 css 打包到 js 文件中 * @param {object} config webpack chain 配置 @@ -258,8 +243,8 @@ function confirmRenderPlatforms(rootDir, platforms) { async function build(options, pluginOptions, execCompile) { const webPackConfig = getWebpackConfig('production'); - const { context } = options; - const { rootDir, pkg: package, userConfig = {} } = context; + const { context, onHook } = options; + const { rootDir, pkg: package, userConfig = {}, commandArgs } = context; const { alias = {} } = userConfig; const { components, @@ -286,6 +271,21 @@ async function build(options, pluginOptions, execCompile) { lowcodeDir, entryPath, )); + if (execCompile) { + onHook('before.build.load', async () => { + await babelCompile({ + source: lowcodeDir, + rootDir, + userOptions: userConfig, + }) + await metaCompile({ + rootDir, + userOptions: userConfig, + lowcodeDir, + package, + }); + }) + } const confirmedMetaTypes = confirmMetaTypes(rootDir, lowcodeDir, metaTypes); const metaPaths = await Promise.all( confirmedMetaTypes.map((item) => { @@ -1184,7 +1184,7 @@ async function bundleAssets(options, pluginOptions, metaTypes, renderTypes, exec } fse.outputFileSync(targetPath, JSON.stringify(require(originPath), null, 2)); }); - updatePackage(rootDir, baseUrl, lowcodeDir, buildTarget, engineScope); + updatePackage(rootDir, baseUrl, lowcodeDir, buildTarget, engineScope, package); }); return assetsPaths; } @@ -1195,8 +1195,9 @@ function updatePackage( lowcodeDir = 'lowcode', buildTarget = 'build', engineScope = '@ali', + package, ) { - const packageData = require(path.resolve(rootDir, 'package.json')); + const packageData = package; let { componentConfig } = packageData; if (!componentConfig) { componentConfig = {}; @@ -1209,6 +1210,20 @@ function updatePackage( isBetaVersion ? 'daily' : 'prod' }.json`; packageData.componentConfig = componentConfig; + packageData.lcMeta = { + ...packageData.lcMeta, + type: 'component', + }; + if (!package.dependencies['@babel/runtime']) { + package.dependencies['@babel/runtime'] = '^7.0.0'; + } + packageData.exports = { + '.': { + import: packageData.module || 'es/index.js', + require: packageData.main || 'lib/index.js', + }, + ...packageData.exports, + } fse.outputFileSync(path.resolve(rootDir, 'package.json'), JSON.stringify(packageData, null, 2)); } @@ -1286,7 +1301,7 @@ async function bundleComponentMeta(webPackConfig, options, pluginOptions, execCo `${buildTarget}/${lowcodeDir}/${componentJsPath}.js`, ); - // 把meta.js里面的window替换成this + // 把 meta.js 里面的 window 替换成 this const jsContent = fse.readFileSync(originPath, 'utf-8'); const jsContentTarget = jsContent.replace('window', 'this'); fse.outputFileSync(originPath, jsContentTarget); @@ -1303,48 +1318,3 @@ async function bundleComponentMeta(webPackConfig, options, pluginOptions, execCo return componentsMetaPath; } - -// function transferMeta2Json(rootDir) { -// require('jsdom-global')(); -// // globalThis = global; -// const jsdom = require('jsdom'); -// const { JSDOM } = jsdom; -// const DOM = new JSDOM( -// ` -// -// - -// -// -// -// -// DEMO 预览 -// - -// -//
-// -// -// `, -// { -// runScripts: 'dangerously', -// resources: 'usable', -// storageQuota: 10000000, -// url: 'https://example.org?appCode=test', -// }, -// ); -// const { window } = DOM; -// window.onload = () => { -// debug('ready to roll!'); -// try { -// const p = require(path.resolve(rootDir, 'build/lowcode/meta.js')); -// fse.outputFileSync( -// path.resolve(rootDir, 'build/lowcode/meta.json'), -// toJson(p.default.assetsProd), -// ); -// } catch (e) { -// debug('error: ', e); -// } -// process.exit(0); -// }; -// } diff --git a/packages/build-plugin-lowcode/src/utils/getDemoDir.js b/packages/build-plugin-lowcode/src/utils/getDemoDir.js new file mode 100644 index 0000000..b6bcf67 --- /dev/null +++ b/packages/build-plugin-lowcode/src/utils/getDemoDir.js @@ -0,0 +1,16 @@ +const { existsSync } = require('fs'); +const { join } = require('path'); + +module.exports = function getDemoPath(projectDir) { + let demoDir; + // compatible with directory docs + const searchDirs = ['demo', 'docs']; + for (let i = 0; i < searchDirs.length; i++) { + const searchPath = join(projectDir, searchDirs[i]); + if (existsSync(searchPath)) { + demoDir = searchDirs[i]; + break; + } + } + return demoDir; +}; \ No newline at end of file diff --git a/packages/build-plugin-lowcode/src/utils/index.js b/packages/build-plugin-lowcode/src/utils/index.js index ca3c9d8..f5e5b0e 100644 --- a/packages/build-plugin-lowcode/src/utils/index.js +++ b/packages/build-plugin-lowcode/src/utils/index.js @@ -2,7 +2,8 @@ const _ = require('lodash'); const path = require('path'); const fse = require('fs-extra'); const hbs = require('handlebars'); -const parseProps = require('./parse-props.ts'); +const glob = require('glob'); +const parseProps = require('./parse-props'); /** * @description generate js file as webpack entry @@ -12,12 +13,12 @@ const parseProps = require('./parse-props.ts'); * @param {Object} params params for compile template content * @returns {String} path of entry file */ -function generateEntry({ template, filename = 'index.js', rootDir = process.cwd(), params }) { +function generateEntry({ template, filename = 'index.js', rootDir = process.cwd(), params, tmpDirName = '.tmp' }) { const hbsTemplatePath = path.join(__dirname, `../templates/${template}`); const hbsTemplateContent = fse.readFileSync(hbsTemplatePath, 'utf-8'); const compileTemplateContent = hbs.compile(hbsTemplateContent); - const tempDir = path.join(rootDir, '.tmp'); + const tempDir = path.join(rootDir, tmpDirName); const jsPath = path.join(tempDir, filename); const jsTemplateContent = compileTemplateContent(params); @@ -219,6 +220,25 @@ function asyncDebounce(func, wait) { return returnFunc; } +function getUsedComponentMetas(rootDir, lowcodeDir = 'lowcode', metaFilename, components) { + let metaPaths = glob.sync( + path.resolve(rootDir, `${lowcodeDir}/**/${metaFilename}.@(js|ts|jsx|tsx)`), + ); + if (metaPaths && metaPaths.length) { + metaPaths = metaPaths.map((item) => { + return item.slice( + path.resolve(rootDir, lowcodeDir).length + 1, + item.lastIndexOf(metaFilename) - 1, + ); + }); + } + return components + ? components.filter((component) => { + return metaPaths.includes(camel2KebabComponentName(component)); + }) + : metaPaths.map((dir) => kebab2CamelComponentName(dir)); +} + module.exports = { toJson, parseProps, @@ -228,4 +248,5 @@ module.exports = { generateComponentList, camel2KebabComponentName, kebab2CamelComponentName, + getUsedComponentMetas, }; diff --git a/packages/build-plugin-lowcode/src/utils/npm.ts b/packages/build-plugin-lowcode/src/utils/npm.js similarity index 100% rename from packages/build-plugin-lowcode/src/utils/npm.ts rename to packages/build-plugin-lowcode/src/utils/npm.js diff --git a/packages/build-plugin-lowcode/src/utils/parse-props.ts b/packages/build-plugin-lowcode/src/utils/parse-props.js similarity index 100% rename from packages/build-plugin-lowcode/src/utils/parse-props.ts rename to packages/build-plugin-lowcode/src/utils/parse-props.js From 02b1fe29be93088dd02bde381eaf8b1fe7287ef1 Mon Sep 17 00:00:00 2001 From: eternalsky Date: Fri, 30 Jun 2023 15:45:02 +0800 Subject: [PATCH 76/98] =?UTF-8?q?fix(build-plugin-lowcode):=20=E9=80=82?= =?UTF-8?q?=E9=85=8D=20lowcode-engine=20types?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/build-plugin-lowcode/package.json | 8 +++++--- packages/build-plugin-lowcode/src/index.js | 6 +++--- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/build-plugin-lowcode/package.json b/packages/build-plugin-lowcode/package.json index 227d26f..c122fc1 100644 --- a/packages/build-plugin-lowcode/package.json +++ b/packages/build-plugin-lowcode/package.json @@ -1,6 +1,6 @@ { "name": "@alifd/build-plugin-lowcode", - "version": "0.3.18", + "version": "0.3.19-beta.0", "description": "build plugin for component-to-lowcode", "main": "src/index.js", "keywords": [ @@ -9,7 +9,9 @@ "scripts": { "component:dev": "cd demo/component && npm start", "setter:dev": "cd demo/setter && npm start", - "antdSetterMap:dev": "cd demo/antd-setter-map && npm start" + "antdSetterMap:dev": "cd demo/antd-setter-map && npm start", + "pub": "npm publish", + "beta": "npm publish --tag=beta" }, "repository": { "type": "git", @@ -42,4 +44,4 @@ "style-loader": "^2.0.0", "webpack": "^4.46.0" } -} +} \ No newline at end of file diff --git a/packages/build-plugin-lowcode/src/index.js b/packages/build-plugin-lowcode/src/index.js index ff0199e..b885657 100644 --- a/packages/build-plugin-lowcode/src/index.js +++ b/packages/build-plugin-lowcode/src/index.js @@ -600,14 +600,14 @@ async function initLowCodeSchema( `${lowcodeDir}/${componentNameFolder}/meta${metaDevSubfix}.${metaFormat || 'ts'}`, ), ` -import { ComponentMetadata, Snippet } from '@alilc/lowcode-types'; +import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types'; -const ${item.componentName}Meta: ComponentMetadata = ${JSON.stringify( +const ${item.componentName}Meta: IPublicTypeComponentMetadata = ${JSON.stringify( componentDescription, null, 2, )}; -const snippets: Snippet[] = ${JSON.stringify(snippets, null, 2)}; +const snippets: IPublicTypeSnippet[] = ${JSON.stringify(snippets, null, 2)}; export default { ...${item.componentName}Meta, From a67ca6ce8e0dc93600516ea3729fb5a4142ff315 Mon Sep 17 00:00:00 2001 From: eternalsky Date: Tue, 4 Jul 2023 11:29:41 +0800 Subject: [PATCH 77/98] =?UTF-8?q?fix(build-plugin-lowcode):=20=E7=94=9F?= =?UTF-8?q?=E6=88=90=E7=9A=84lowcode=20=E4=BF=A1=E6=81=AF=E7=9A=84?= =?UTF-8?q?=E5=87=A0=E4=B8=AA=E9=94=99=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../build-plugin-lowcode/src/compile/meta.js | 5 +++-- packages/build-plugin-lowcode/src/index.js | 19 +++++++++++-------- .../src/templates/view.js | 2 +- 3 files changed, 15 insertions(+), 11 deletions(-) diff --git a/packages/build-plugin-lowcode/src/compile/meta.js b/packages/build-plugin-lowcode/src/compile/meta.js index 6739df3..7940bd2 100644 --- a/packages/build-plugin-lowcode/src/compile/meta.js +++ b/packages/build-plugin-lowcode/src/compile/meta.js @@ -37,6 +37,7 @@ module.exports = async ({ const exportsData = { "./prototype": {}, "./prototypeView": {}, + "./*": './*', }; const targetExportsMap = { 'lib': 'require', @@ -69,7 +70,7 @@ module.exports = async ({ package.files.push(`${targetPath}/`); } const entryName = getAvailableFileName({ fileName, lowcodeDir, rootDir }); - exportsData[fileNameEntryMap[fileName]][targetExportsMap[target]] = `${targetPath}/${entryName}`; + exportsData[fileNameEntryMap[fileName]][targetExportsMap[target]] = `./${targetPath}/${entryName}.js`; const distFilePath = path.join(rootDir, targetPath, `${entryName}.js`); const { code } = babel.transformSync(fileContent, { filename: distFilePath, @@ -80,7 +81,7 @@ module.exports = async ({ }); }); package.exports = { - ...exportsData, ...package.exports, + ...exportsData, }; }; diff --git a/packages/build-plugin-lowcode/src/index.js b/packages/build-plugin-lowcode/src/index.js index b885657..02de887 100644 --- a/packages/build-plugin-lowcode/src/index.js +++ b/packages/build-plugin-lowcode/src/index.js @@ -828,7 +828,8 @@ async function bundleEditorView( componentViews = `{ ...SingleComponentData }`; - componentViewsExportStr = `export { default } from '${lowcodeViewPath}';export * from '${lowcodeViewPath}';`; + // default 不一定存在，export { default } 不安全可能会报错 + componentViewsExportStr = `\nconst entryDefault = componentInstances.default;\nexport { entryDefault as default }';export * from '${lowcodeViewPath}';`; } else { const _componentViews = getUsedComponentViews(rootDir, lowcodeDir, components) || []; componentViews = `{${_componentViews @@ -841,7 +842,8 @@ async function bundleEditorView( return `const ${component} = getRealComponent(${component}Data, '${component}');\nexport { ${component} };`; }) .join('\n'); - componentViewsExportStr += `\nexport { default } from '${getEntry(rootDir, entryPath)}';`; + // default 不一定存在，export { default } 不安全可能会报错 + componentViewsExportStr += `\nconst entryDefault = componentInstances.default;\nexport { entryDefault as default }`; componentViewsImportStr = _componentViews .map((component) => { const componentNameFolder = camel2KebabComponentName(component); @@ -1217,12 +1219,13 @@ function updatePackage( if (!package.dependencies['@babel/runtime']) { package.dependencies['@babel/runtime'] = '^7.0.0'; } - packageData.exports = { - '.': { - import: packageData.module || 'es/index.js', - require: packageData.main || 'lib/index.js', - }, - ...packageData.exports, + const processMainFieldForExports = (entry) => { + if (!entry) return entry; + return `${entry.startsWith('./') ? '' : './'}${entry}${entry.endsWith('.js') ? '' : '.js'}` + } + packageData.exports['.'] = { + import: processMainFieldForExports(packageData.module) || './es/index.js', + require: processMainFieldForExports(packageData.main) || './lib/index.js', } fse.outputFileSync(path.resolve(rootDir, 'package.json'), JSON.stringify(packageData, null, 2)); } diff --git a/packages/build-plugin-lowcode/src/templates/view.js b/packages/build-plugin-lowcode/src/templates/view.js index f70b441..38143c4 100644 --- a/packages/build-plugin-lowcode/src/templates/view.js +++ b/packages/build-plugin-lowcode/src/templates/view.js @@ -1,10 +1,10 @@ {{{ componentViewsImportStr }}} -{{{ componentViewsExportStr }}} import * as componentInstances from '{{{entryPath}}}'; {{{scssImport}}} +{{{ componentViewsExportStr }}} export * from '{{{entryPath}}}'; const coveredComponents = {{{componentViews}}}; From 8c87e0adce0b5e9aaa98f7537d53d4ff433a7494 Mon Sep 17 00:00:00 2001 From: eternalsky Date: Wed, 26 Jul 2023 17:40:50 +0800 Subject: [PATCH 78/98] feat(build-plugin-lowcode): release 0.4.0 --- packages/build-plugin-lowcode/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/build-plugin-lowcode/package.json b/packages/build-plugin-lowcode/package.json index 227d26f..f40615f 100644 --- a/packages/build-plugin-lowcode/package.json +++ b/packages/build-plugin-lowcode/package.json @@ -1,6 +1,6 @@ { "name": "@alifd/build-plugin-lowcode", - "version": "0.3.18", + "version": "0.4.0", "description": "build plugin for component-to-lowcode", "main": "src/index.js", "keywords": [ From 4ca28d9a1357e66304cd0a58e1de651f33848f0d Mon Sep 17 00:00:00 2001 From: eternalsky Date: Fri, 30 Jun 2023 15:45:02 +0800 Subject: [PATCH 79/98] =?UTF-8?q?fix(build-plugin-lowcode):=20=E9=80=82?= =?UTF-8?q?=E9=85=8D=20lowcode-engine=20types?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/build-plugin-lowcode/package.json | 6 ++++-- packages/build-plugin-lowcode/src/index.js | 6 +++--- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/build-plugin-lowcode/package.json b/packages/build-plugin-lowcode/package.json index f40615f..b2c7b93 100644 --- a/packages/build-plugin-lowcode/package.json +++ b/packages/build-plugin-lowcode/package.json @@ -9,7 +9,9 @@ "scripts": { "component:dev": "cd demo/component && npm start", "setter:dev": "cd demo/setter && npm start", - "antdSetterMap:dev": "cd demo/antd-setter-map && npm start" + "antdSetterMap:dev": "cd demo/antd-setter-map && npm start", + "pub": "npm publish", + "beta": "npm publish --tag=beta" }, "repository": { "type": "git", @@ -42,4 +44,4 @@ "style-loader": "^2.0.0", "webpack": "^4.46.0" } -} +} \ No newline at end of file diff --git a/packages/build-plugin-lowcode/src/index.js b/packages/build-plugin-lowcode/src/index.js index ff0199e..b885657 100644 --- a/packages/build-plugin-lowcode/src/index.js +++ b/packages/build-plugin-lowcode/src/index.js @@ -600,14 +600,14 @@ async function initLowCodeSchema( `${lowcodeDir}/${componentNameFolder}/meta${metaDevSubfix}.${metaFormat || 'ts'}`, ), ` -import { ComponentMetadata, Snippet } from '@alilc/lowcode-types'; +import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types'; -const ${item.componentName}Meta: ComponentMetadata = ${JSON.stringify( +const ${item.componentName}Meta: IPublicTypeComponentMetadata = ${JSON.stringify( componentDescription, null, 2, )}; -const snippets: Snippet[] = ${JSON.stringify(snippets, null, 2)}; +const snippets: IPublicTypeSnippet[] = ${JSON.stringify(snippets, null, 2)}; export default { ...${item.componentName}Meta, From 5d2214c9bbb137c92424f0a911dcb140d94a0d6b Mon Sep 17 00:00:00 2001 From: eternalsky Date: Tue, 4 Jul 2023 11:29:41 +0800 Subject: [PATCH 80/98] =?UTF-8?q?fix(build-plugin-lowcode):=20=E7=94=9F?= =?UTF-8?q?=E6=88=90=E7=9A=84lowcode=20=E4=BF=A1=E6=81=AF=E7=9A=84?= =?UTF-8?q?=E5=87=A0=E4=B8=AA=E9=94=99=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../build-plugin-lowcode/src/compile/meta.js | 5 +++-- packages/build-plugin-lowcode/src/index.js | 19 +++++++++++-------- .../src/templates/view.js | 2 +- 3 files changed, 15 insertions(+), 11 deletions(-) diff --git a/packages/build-plugin-lowcode/src/compile/meta.js b/packages/build-plugin-lowcode/src/compile/meta.js index 6739df3..7940bd2 100644 --- a/packages/build-plugin-lowcode/src/compile/meta.js +++ b/packages/build-plugin-lowcode/src/compile/meta.js @@ -37,6 +37,7 @@ module.exports = async ({ const exportsData = { "./prototype": {}, "./prototypeView": {}, + "./*": './*', }; const targetExportsMap = { 'lib': 'require', @@ -69,7 +70,7 @@ module.exports = async ({ package.files.push(`${targetPath}/`); } const entryName = getAvailableFileName({ fileName, lowcodeDir, rootDir }); - exportsData[fileNameEntryMap[fileName]][targetExportsMap[target]] = `${targetPath}/${entryName}`; + exportsData[fileNameEntryMap[fileName]][targetExportsMap[target]] = `./${targetPath}/${entryName}.js`; const distFilePath = path.join(rootDir, targetPath, `${entryName}.js`); const { code } = babel.transformSync(fileContent, { filename: distFilePath, @@ -80,7 +81,7 @@ module.exports = async ({ }); }); package.exports = { - ...exportsData, ...package.exports, + ...exportsData, }; }; diff --git a/packages/build-plugin-lowcode/src/index.js b/packages/build-plugin-lowcode/src/index.js index b885657..02de887 100644 --- a/packages/build-plugin-lowcode/src/index.js +++ b/packages/build-plugin-lowcode/src/index.js @@ -828,7 +828,8 @@ async function bundleEditorView( componentViews = `{ ...SingleComponentData }`; - componentViewsExportStr = `export { default } from '${lowcodeViewPath}';export * from '${lowcodeViewPath}';`; + // default 不一定存在，export { default } 不安全可能会报错 + componentViewsExportStr = `\nconst entryDefault = componentInstances.default;\nexport { entryDefault as default }';export * from '${lowcodeViewPath}';`; } else { const _componentViews = getUsedComponentViews(rootDir, lowcodeDir, components) || []; componentViews = `{${_componentViews @@ -841,7 +842,8 @@ async function bundleEditorView( return `const ${component} = getRealComponent(${component}Data, '${component}');\nexport { ${component} };`; }) .join('\n'); - componentViewsExportStr += `\nexport { default } from '${getEntry(rootDir, entryPath)}';`; + // default 不一定存在，export { default } 不安全可能会报错 + componentViewsExportStr += `\nconst entryDefault = componentInstances.default;\nexport { entryDefault as default }`; componentViewsImportStr = _componentViews .map((component) => { const componentNameFolder = camel2KebabComponentName(component); @@ -1217,12 +1219,13 @@ function updatePackage( if (!package.dependencies['@babel/runtime']) { package.dependencies['@babel/runtime'] = '^7.0.0'; } - packageData.exports = { - '.': { - import: packageData.module || 'es/index.js', - require: packageData.main || 'lib/index.js', - }, - ...packageData.exports, + const processMainFieldForExports = (entry) => { + if (!entry) return entry; + return `${entry.startsWith('./') ? '' : './'}${entry}${entry.endsWith('.js') ? '' : '.js'}` + } + packageData.exports['.'] = { + import: processMainFieldForExports(packageData.module) || './es/index.js', + require: processMainFieldForExports(packageData.main) || './lib/index.js', } fse.outputFileSync(path.resolve(rootDir, 'package.json'), JSON.stringify(packageData, null, 2)); } diff --git a/packages/build-plugin-lowcode/src/templates/view.js b/packages/build-plugin-lowcode/src/templates/view.js index f70b441..38143c4 100644 --- a/packages/build-plugin-lowcode/src/templates/view.js +++ b/packages/build-plugin-lowcode/src/templates/view.js @@ -1,10 +1,10 @@ {{{ componentViewsImportStr }}} -{{{ componentViewsExportStr }}} import * as componentInstances from '{{{entryPath}}}'; {{{scssImport}}} +{{{ componentViewsExportStr }}} export * from '{{{entryPath}}}'; const coveredComponents = {{{componentViews}}}; From f8841015d4bdcc2122535645acd3693368f0d690 Mon Sep 17 00:00:00 2001 From: eternalsky Date: Wed, 26 Jul 2023 17:40:50 +0800 Subject: [PATCH 81/98] feat(build-plugin-lowcode): release 0.4.0 --- packages/build-plugin-lowcode/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/build-plugin-lowcode/package.json b/packages/build-plugin-lowcode/package.json index 227d26f..f40615f 100644 --- a/packages/build-plugin-lowcode/package.json +++ b/packages/build-plugin-lowcode/package.json @@ -1,6 +1,6 @@ { "name": "@alifd/build-plugin-lowcode", - "version": "0.3.18", + "version": "0.4.0", "description": "build plugin for component-to-lowcode", "main": "src/index.js", "keywords": [ From 993eac1966f28343d6065d5a66f0faf392eef87c Mon Sep 17 00:00:00 2001 From: eternalsky Date: Fri, 30 Jun 2023 15:45:02 +0800 Subject: [PATCH 82/98] =?UTF-8?q?fix(build-plugin-lowcode):=20=E9=80=82?= =?UTF-8?q?=E9=85=8D=20lowcode-engine=20types?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/build-plugin-lowcode/package.json | 6 ++++-- packages/build-plugin-lowcode/src/index.js | 6 +++--- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/build-plugin-lowcode/package.json b/packages/build-plugin-lowcode/package.json index f40615f..b2c7b93 100644 --- a/packages/build-plugin-lowcode/package.json +++ b/packages/build-plugin-lowcode/package.json @@ -9,7 +9,9 @@ "scripts": { "component:dev": "cd demo/component && npm start", "setter:dev": "cd demo/setter && npm start", - "antdSetterMap:dev": "cd demo/antd-setter-map && npm start" + "antdSetterMap:dev": "cd demo/antd-setter-map && npm start", + "pub": "npm publish", + "beta": "npm publish --tag=beta" }, "repository": { "type": "git", @@ -42,4 +44,4 @@ "style-loader": "^2.0.0", "webpack": "^4.46.0" } -} +} \ No newline at end of file diff --git a/packages/build-plugin-lowcode/src/index.js b/packages/build-plugin-lowcode/src/index.js index ff0199e..b885657 100644 --- a/packages/build-plugin-lowcode/src/index.js +++ b/packages/build-plugin-lowcode/src/index.js @@ -600,14 +600,14 @@ async function initLowCodeSchema( `${lowcodeDir}/${componentNameFolder}/meta${metaDevSubfix}.${metaFormat || 'ts'}`, ), ` -import { ComponentMetadata, Snippet } from '@alilc/lowcode-types'; +import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types'; -const ${item.componentName}Meta: ComponentMetadata = ${JSON.stringify( +const ${item.componentName}Meta: IPublicTypeComponentMetadata = ${JSON.stringify( componentDescription, null, 2, )}; -const snippets: Snippet[] = ${JSON.stringify(snippets, null, 2)}; +const snippets: IPublicTypeSnippet[] = ${JSON.stringify(snippets, null, 2)}; export default { ...${item.componentName}Meta, From e72c69d82d527e9ada052e01dda030bca6276ec0 Mon Sep 17 00:00:00 2001 From: eternalsky Date: Tue, 4 Jul 2023 11:29:41 +0800 Subject: [PATCH 83/98] =?UTF-8?q?fix(build-plugin-lowcode):=20=E7=94=9F?= =?UTF-8?q?=E6=88=90=E7=9A=84lowcode=20=E4=BF=A1=E6=81=AF=E7=9A=84?= =?UTF-8?q?=E5=87=A0=E4=B8=AA=E9=94=99=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../build-plugin-lowcode/src/compile/meta.js | 5 +++-- packages/build-plugin-lowcode/src/index.js | 19 +++++++++++-------- .../src/templates/view.js | 2 +- 3 files changed, 15 insertions(+), 11 deletions(-) diff --git a/packages/build-plugin-lowcode/src/compile/meta.js b/packages/build-plugin-lowcode/src/compile/meta.js index 6739df3..7940bd2 100644 --- a/packages/build-plugin-lowcode/src/compile/meta.js +++ b/packages/build-plugin-lowcode/src/compile/meta.js @@ -37,6 +37,7 @@ module.exports = async ({ const exportsData = { "./prototype": {}, "./prototypeView": {}, + "./*": './*', }; const targetExportsMap = { 'lib': 'require', @@ -69,7 +70,7 @@ module.exports = async ({ package.files.push(`${targetPath}/`); } const entryName = getAvailableFileName({ fileName, lowcodeDir, rootDir }); - exportsData[fileNameEntryMap[fileName]][targetExportsMap[target]] = `${targetPath}/${entryName}`; + exportsData[fileNameEntryMap[fileName]][targetExportsMap[target]] = `./${targetPath}/${entryName}.js`; const distFilePath = path.join(rootDir, targetPath, `${entryName}.js`); const { code } = babel.transformSync(fileContent, { filename: distFilePath, @@ -80,7 +81,7 @@ module.exports = async ({ }); }); package.exports = { - ...exportsData, ...package.exports, + ...exportsData, }; }; diff --git a/packages/build-plugin-lowcode/src/index.js b/packages/build-plugin-lowcode/src/index.js index b885657..02de887 100644 --- a/packages/build-plugin-lowcode/src/index.js +++ b/packages/build-plugin-lowcode/src/index.js @@ -828,7 +828,8 @@ async function bundleEditorView( componentViews = `{ ...SingleComponentData }`; - componentViewsExportStr = `export { default } from '${lowcodeViewPath}';export * from '${lowcodeViewPath}';`; + // default 不一定存在，export { default } 不安全可能会报错 + componentViewsExportStr = `\nconst entryDefault = componentInstances.default;\nexport { entryDefault as default }';export * from '${lowcodeViewPath}';`; } else { const _componentViews = getUsedComponentViews(rootDir, lowcodeDir, components) || []; componentViews = `{${_componentViews @@ -841,7 +842,8 @@ async function bundleEditorView( return `const ${component} = getRealComponent(${component}Data, '${component}');\nexport { ${component} };`; }) .join('\n'); - componentViewsExportStr += `\nexport { default } from '${getEntry(rootDir, entryPath)}';`; + // default 不一定存在，export { default } 不安全可能会报错 + componentViewsExportStr += `\nconst entryDefault = componentInstances.default;\nexport { entryDefault as default }`; componentViewsImportStr = _componentViews .map((component) => { const componentNameFolder = camel2KebabComponentName(component); @@ -1217,12 +1219,13 @@ function updatePackage( if (!package.dependencies['@babel/runtime']) { package.dependencies['@babel/runtime'] = '^7.0.0'; } - packageData.exports = { - '.': { - import: packageData.module || 'es/index.js', - require: packageData.main || 'lib/index.js', - }, - ...packageData.exports, + const processMainFieldForExports = (entry) => { + if (!entry) return entry; + return `${entry.startsWith('./') ? '' : './'}${entry}${entry.endsWith('.js') ? '' : '.js'}` + } + packageData.exports['.'] = { + import: processMainFieldForExports(packageData.module) || './es/index.js', + require: processMainFieldForExports(packageData.main) || './lib/index.js', } fse.outputFileSync(path.resolve(rootDir, 'package.json'), JSON.stringify(packageData, null, 2)); } diff --git a/packages/build-plugin-lowcode/src/templates/view.js b/packages/build-plugin-lowcode/src/templates/view.js index f70b441..38143c4 100644 --- a/packages/build-plugin-lowcode/src/templates/view.js +++ b/packages/build-plugin-lowcode/src/templates/view.js @@ -1,10 +1,10 @@ {{{ componentViewsImportStr }}} -{{{ componentViewsExportStr }}} import * as componentInstances from '{{{entryPath}}}'; {{{scssImport}}} +{{{ componentViewsExportStr }}} export * from '{{{entryPath}}}'; const coveredComponents = {{{componentViews}}}; From ea807d9e84805a7d777cfb6b4f4b19af24a5581b Mon Sep 17 00:00:00 2001 From: eternalsky Date: Thu, 27 Jul 2023 19:50:05 +0800 Subject: [PATCH 84/98] fix(build-plugin-lowcode): typo --- packages/build-plugin-lowcode/package.json | 2 +- packages/build-plugin-lowcode/src/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/build-plugin-lowcode/package.json b/packages/build-plugin-lowcode/package.json index 3149d03..2d2cb63 100644 --- a/packages/build-plugin-lowcode/package.json +++ b/packages/build-plugin-lowcode/package.json @@ -1,6 +1,6 @@ { "name": "@alifd/build-plugin-lowcode", - "version": "0.4.1", + "version": "0.4.2", "description": "build plugin for component-to-lowcode", "main": "src/index.js", "keywords": [ diff --git a/packages/build-plugin-lowcode/src/index.js b/packages/build-plugin-lowcode/src/index.js index 02de887..fcfde31 100644 --- a/packages/build-plugin-lowcode/src/index.js +++ b/packages/build-plugin-lowcode/src/index.js @@ -829,7 +829,7 @@ async function bundleEditorView( ...SingleComponentData }`; // default 不一定存在，export { default } 不安全可能会报错 - componentViewsExportStr = `\nconst entryDefault = componentInstances.default;\nexport { entryDefault as default }';export * from '${lowcodeViewPath}';`; + componentViewsExportStr = `\nconst entryDefault = componentInstances.default;\nexport { entryDefault as default };export * from '${lowcodeViewPath}';`; } else { const _componentViews = getUsedComponentViews(rootDir, lowcodeDir, components) || []; componentViews = `{${_componentViews From fb949ad2e7dfc73dc1a4d685de28213585bf973d Mon Sep 17 00:00:00 2001 From: eternalsky Date: Thu, 27 Jul 2023 20:34:58 +0800 Subject: [PATCH 85/98] =?UTF-8?q?fix(build-plugin-lowcode):=20=E5=8D=95?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=97=B6=E7=94=9F=E6=88=90=20lowcode=20?= =?UTF-8?q?=E7=9B=B8=E5=85=B3=E6=96=87=E4=BB=B6=E6=9C=89=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/build-plugin-lowcode/package.json | 2 +- packages/build-plugin-lowcode/src/index.js | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/build-plugin-lowcode/package.json b/packages/build-plugin-lowcode/package.json index 2d2cb63..61b58b4 100644 --- a/packages/build-plugin-lowcode/package.json +++ b/packages/build-plugin-lowcode/package.json @@ -1,6 +1,6 @@ { "name": "@alifd/build-plugin-lowcode", - "version": "0.4.2", + "version": "0.4.3", "description": "build plugin for component-to-lowcode", "main": "src/index.js", "keywords": [ diff --git a/packages/build-plugin-lowcode/src/index.js b/packages/build-plugin-lowcode/src/index.js index fcfde31..ab08cac 100644 --- a/packages/build-plugin-lowcode/src/index.js +++ b/packages/build-plugin-lowcode/src/index.js @@ -48,12 +48,11 @@ const debounceStart = asyncDebounce(start, 300); const defaultEntryPaths = [ `./src/index.tsx`, - `./index.js`, - `./lib/index.js`, `./src/index.ts`, `./src/index.js`, `./src/index.jsx`, - `./src/index.tsx`, + `./index.js`, + `./lib/index.js`, `./components/index.ts`, `./components/index.tsx`, ]; From ff69c0b319dadf2b5f1bca17bb1ef1e491c16bf7 Mon Sep 17 00:00:00 2001 From: eternalsky Date: Fri, 28 Jul 2023 16:29:17 +0800 Subject: [PATCH 86/98] =?UTF-8?q?fix(build-plugin-lowcode):=20lowcode=20al?= =?UTF-8?q?ias=20=E5=A4=84=E7=90=86=E9=97=AE=E9=A2=98=20&=20view=20?= =?UTF-8?q?=E6=A8=A1=E6=9D=BF=E8=A6=86=E7=9B=96=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/build-plugin-lowcode/package.json | 2 +- packages/build-plugin-lowcode/src/compile/babel.js | 10 ++++++---- packages/build-plugin-lowcode/src/templates/view.js | 2 +- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/build-plugin-lowcode/package.json b/packages/build-plugin-lowcode/package.json index 61b58b4..1760602 100644 --- a/packages/build-plugin-lowcode/package.json +++ b/packages/build-plugin-lowcode/package.json @@ -1,6 +1,6 @@ { "name": "@alifd/build-plugin-lowcode", - "version": "0.4.3", + "version": "0.4.5", "description": "build plugin for component-to-lowcode", "main": "src/index.js", "keywords": [ diff --git a/packages/build-plugin-lowcode/src/compile/babel.js b/packages/build-plugin-lowcode/src/compile/babel.js index d0f3567..1f34c62 100644 --- a/packages/build-plugin-lowcode/src/compile/babel.js +++ b/packages/build-plugin-lowcode/src/compile/babel.js @@ -77,15 +77,17 @@ const getBabelConfig = ({ if (alias) { const aliasRelative = {}; Object.keys(alias).forEach((aliasKey) => { - aliasRelative[aliasKey] = alias[aliasKey].startsWith("./") - ? alias[aliasKey] - : `./${alias[aliasKey]}`; + let aliasValue = alias[aliasKey]; + aliasValue = aliasValue.replace('src', target); + aliasRelative[aliasKey] = aliasValue.startsWith("./") + ? aliasValue + : `./${aliasValue}`; }); babelConfig.plugins = babelConfig.plugins.concat([ [ require.resolve("babel-plugin-module-resolver"), { - root: [root], + root: [root, target], alias: aliasRelative, }, ], diff --git a/packages/build-plugin-lowcode/src/templates/view.js b/packages/build-plugin-lowcode/src/templates/view.js index 38143c4..80e3457 100644 --- a/packages/build-plugin-lowcode/src/templates/view.js +++ b/packages/build-plugin-lowcode/src/templates/view.js @@ -4,8 +4,8 @@ import * as componentInstances from '{{{entryPath}}}'; {{{scssImport}}} -{{{ componentViewsExportStr }}} export * from '{{{entryPath}}}'; +{{{ componentViewsExportStr }}} const coveredComponents = {{{componentViews}}}; From 4b3966b6e40a70d7fdf95b262ff5f5cfcb71e793 Mon Sep 17 00:00:00 2001 From: eternalsky Date: Fri, 28 Jul 2023 17:26:43 +0800 Subject: [PATCH 87/98] =?UTF-8?q?doc(build-plugin-lowcode):=20=E4=BC=98?= =?UTF-8?q?=E5=8C=96=20README?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/build-plugin-lowcode/README.md | 16 ++++++++++++++++ packages/build-plugin-lowcode/package.json | 2 +- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/packages/build-plugin-lowcode/README.md b/packages/build-plugin-lowcode/README.md index c323253..f8a551c 100644 --- a/packages/build-plugin-lowcode/README.md +++ b/packages/build-plugin-lowcode/README.md @@ -17,6 +17,22 @@ export interface SetterMap { [SetterName: string]: string; } +export type Assets = { + package: string; + version: string; + urls: string[]; + library: string; +}; +// 示例 +// { +// package: 'antd', +// version: '4.17.3', +// urls: [ +// 'https://g.alicdn.com/code/lib/antd/4.17.3/antd.min.js', +// 'https://g.alicdn.com/code/lib/antd/4.17.3/antd.min.css', +// ], +// library: 'antd', +// } ``` ## 开发调试 ### 组件开发 diff --git a/packages/build-plugin-lowcode/package.json b/packages/build-plugin-lowcode/package.json index 1760602..b0533d6 100644 --- a/packages/build-plugin-lowcode/package.json +++ b/packages/build-plugin-lowcode/package.json @@ -1,6 +1,6 @@ { "name": "@alifd/build-plugin-lowcode", - "version": "0.4.5", + "version": "0.4.6", "description": "build plugin for component-to-lowcode", "main": "src/index.js", "keywords": [ From 62b803a762ce1f9ef6d1aa621f9982b1ab12ee98 Mon Sep 17 00:00:00 2001 From: eternalsky Date: Fri, 28 Jul 2023 18:08:52 +0800 Subject: [PATCH 88/98] =?UTF-8?q?fix(build-plugin-lowcode):=20=E4=BF=AE?= =?UTF-8?q?=E5=A4=8D=E8=AE=BE=E8=AE=A1=E6=80=81=E7=BB=84=E4=BB=B6=E8=A6=86?= =?UTF-8?q?=E7=9B=96=E9=A1=BA=E5=BA=8F=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/build-plugin-lowcode/package.json | 2 +- packages/build-plugin-lowcode/src/index.js | 2 +- packages/build-plugin-lowcode/src/templates/view.js | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/build-plugin-lowcode/package.json b/packages/build-plugin-lowcode/package.json index b0533d6..6d51820 100644 --- a/packages/build-plugin-lowcode/package.json +++ b/packages/build-plugin-lowcode/package.json @@ -1,6 +1,6 @@ { "name": "@alifd/build-plugin-lowcode", - "version": "0.4.6", + "version": "0.4.7", "description": "build plugin for component-to-lowcode", "main": "src/index.js", "keywords": [ diff --git a/packages/build-plugin-lowcode/src/index.js b/packages/build-plugin-lowcode/src/index.js index ab08cac..9cfcbb5 100644 --- a/packages/build-plugin-lowcode/src/index.js +++ b/packages/build-plugin-lowcode/src/index.js @@ -828,7 +828,7 @@ async function bundleEditorView( ...SingleComponentData }`; // default 不一定存在，export { default } 不安全可能会报错 - componentViewsExportStr = `\nconst entryDefault = componentInstances.default;\nexport { entryDefault as default };export * from '${lowcodeViewPath}';`; + componentViewsExportStr = `\nconst entryDefault = componentInstances.default;\nexport { entryDefault as default };\nexport * from '${lowcodeViewPath}';`; } else { const _componentViews = getUsedComponentViews(rootDir, lowcodeDir, components) || []; componentViews = `{${_componentViews diff --git a/packages/build-plugin-lowcode/src/templates/view.js b/packages/build-plugin-lowcode/src/templates/view.js index e3bd302..63fd533 100644 --- a/packages/build-plugin-lowcode/src/templates/view.js +++ b/packages/build-plugin-lowcode/src/templates/view.js @@ -1,12 +1,12 @@ -{{{ componentViewsImportStr }}} - import * as componentInstances from '{{{entryPath}}}'; +{{{ componentViewsImportStr }}} + {{{scssImport}}} {{{ componentViewsExportStr }}} + export * from '{{{entryPath}}}'; -{{{ componentViewsExportStr }}} const coveredComponents = {{{componentViews}}}; From 07e5f7608f90644bab22f0583285c2e705d094dd Mon Sep 17 00:00:00 2001 From: eternalsky Date: Fri, 11 Aug 2023 10:52:45 +0800 Subject: [PATCH 89/98] =?UTF-8?q?feat(template-material):=20=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=20package.json=20=E6=A8=A1=E6=9D=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../react-multiple-component-template/package.json | 2 +- .../projectTemplate/package.json | 10 ++++++++++ .../react-single-component-template/package.json | 2 +- .../projectTemplate/package.json | 10 ++++++++++ 4 files changed, 22 insertions(+), 2 deletions(-) diff --git a/packages/template-material/react-multiple-component-template/package.json b/packages/template-material/react-multiple-component-template/package.json index b26f64d..87439f6 100644 --- a/packages/template-material/react-multiple-component-template/package.json +++ b/packages/template-material/react-multiple-component-template/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/react-multiple-component-template", - "version": "0.1.5", + "version": "0.1.6", "description": "react 组件库模板", "files": [ "projectTemplate/*" diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/package.json b/packages/template-material/react-multiple-component-template/projectTemplate/package.json index 4c01efd..07a2424 100644 --- a/packages/template-material/react-multiple-component-template/projectTemplate/package.json +++ b/packages/template-material/react-multiple-component-template/projectTemplate/package.json @@ -4,6 +4,13 @@ "description": "<%= description %>", "main": "lib/index.js", "module": "es/index.js", + "exports": { + "./*": "./*", + ".": { + "import": "./es/index.js", + "require": "./lib/index.js" + } + }, "typings": "types/index.d.ts", "files": [ "build/", @@ -78,5 +85,8 @@ }, "componentConfig": { "isComponentLibrary": true + }, + "lcMeta": { + "type": "component" } } diff --git a/packages/template-material/react-single-component-template/package.json b/packages/template-material/react-single-component-template/package.json index 011f2f4..a009d2b 100644 --- a/packages/template-material/react-single-component-template/package.json +++ b/packages/template-material/react-single-component-template/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/react-single-component-template", - "version": "0.1.2", + "version": "0.1.3", "description": "react 单组件模板", "files": [ "projectTemplate/" diff --git a/packages/template-material/react-single-component-template/projectTemplate/package.json b/packages/template-material/react-single-component-template/projectTemplate/package.json index 1ac75f6..c1295f6 100644 --- a/packages/template-material/react-single-component-template/projectTemplate/package.json +++ b/packages/template-material/react-single-component-template/projectTemplate/package.json @@ -14,6 +14,13 @@ ], "main": "lib/index.js", "module": "es/index.js", + "exports": { + "./*": "./*", + ".": { + "import": "./es/index.js", + "require": "./lib/index.js" + } + }, "stylePath": "style.js", "scripts": { "start": "build-scripts start", @@ -61,5 +68,8 @@ "title": "demo component", "category": "Information" }, + "lcMeta": { + "type": "component" + }, "license": "MIT" } From a61fe7a16572cc710ee30555ffdf0ae8253224bb Mon Sep 17 00:00:00 2001 From: eternalsky Date: Fri, 11 Aug 2023 10:52:45 +0800 Subject: [PATCH 90/98] =?UTF-8?q?feat(template-material):=20=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=20package.json=20=E6=A8=A1=E6=9D=BF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../react-multiple-component-template/package.json | 2 +- .../projectTemplate/package.json | 10 ++++++++++ .../react-single-component-template/package.json | 2 +- .../projectTemplate/package.json | 10 ++++++++++ 4 files changed, 22 insertions(+), 2 deletions(-) diff --git a/packages/template-material/react-multiple-component-template/package.json b/packages/template-material/react-multiple-component-template/package.json index b26f64d..87439f6 100644 --- a/packages/template-material/react-multiple-component-template/package.json +++ b/packages/template-material/react-multiple-component-template/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/react-multiple-component-template", - "version": "0.1.5", + "version": "0.1.6", "description": "react 组件库模板", "files": [ "projectTemplate/*" diff --git a/packages/template-material/react-multiple-component-template/projectTemplate/package.json b/packages/template-material/react-multiple-component-template/projectTemplate/package.json index 4c01efd..07a2424 100644 --- a/packages/template-material/react-multiple-component-template/projectTemplate/package.json +++ b/packages/template-material/react-multiple-component-template/projectTemplate/package.json @@ -4,6 +4,13 @@ "description": "<%= description %>", "main": "lib/index.js", "module": "es/index.js", + "exports": { + "./*": "./*", + ".": { + "import": "./es/index.js", + "require": "./lib/index.js" + } + }, "typings": "types/index.d.ts", "files": [ "build/", @@ -78,5 +85,8 @@ }, "componentConfig": { "isComponentLibrary": true + }, + "lcMeta": { + "type": "component" } } diff --git a/packages/template-material/react-single-component-template/package.json b/packages/template-material/react-single-component-template/package.json index 011f2f4..a009d2b 100644 --- a/packages/template-material/react-single-component-template/package.json +++ b/packages/template-material/react-single-component-template/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/react-single-component-template", - "version": "0.1.2", + "version": "0.1.3", "description": "react 单组件模板", "files": [ "projectTemplate/" diff --git a/packages/template-material/react-single-component-template/projectTemplate/package.json b/packages/template-material/react-single-component-template/projectTemplate/package.json index 1ac75f6..c1295f6 100644 --- a/packages/template-material/react-single-component-template/projectTemplate/package.json +++ b/packages/template-material/react-single-component-template/projectTemplate/package.json @@ -14,6 +14,13 @@ ], "main": "lib/index.js", "module": "es/index.js", + "exports": { + "./*": "./*", + ".": { + "import": "./es/index.js", + "require": "./lib/index.js" + } + }, "stylePath": "style.js", "scripts": { "start": "build-scripts start", @@ -61,5 +68,8 @@ "title": "demo component", "category": "Information" }, + "lcMeta": { + "type": "component" + }, "license": "MIT" } From dae0dcaa40dc61aa70b66dacd466793b77658025 Mon Sep 17 00:00:00 2001 From: liujuping Date: Fri, 25 Aug 2023 15:18:47 +0800 Subject: [PATCH 91/98] feat: inject plugin suport workspace mode --- packages/lowcode-plugin-inject/package.json | 2 +- .../lowcode-plugin-inject/src/appInject.tsx | 164 ++++++++++++++++++ .../lowcode-plugin-inject/src/controller.ts | 70 ++++++++ packages/lowcode-plugin-inject/src/icon.tsx | 16 ++ packages/lowcode-plugin-inject/src/index.tsx | 51 +++--- packages/lowcode-plugin-inject/src/pane.scss | 48 +++++ packages/lowcode-plugin-inject/src/pane.tsx | 158 +++++++++++++++++ packages/lowcode-plugin-inject/src/utils.tsx | 2 +- 8 files changed, 487 insertions(+), 24 deletions(-) create mode 100644 packages/lowcode-plugin-inject/src/appInject.tsx create mode 100644 packages/lowcode-plugin-inject/src/controller.ts create mode 100644 packages/lowcode-plugin-inject/src/icon.tsx create mode 100644 packages/lowcode-plugin-inject/src/pane.scss create mode 100644 packages/lowcode-plugin-inject/src/pane.tsx diff --git a/packages/lowcode-plugin-inject/package.json b/packages/lowcode-plugin-inject/package.json index 08a8093..db64988 100644 --- a/packages/lowcode-plugin-inject/package.json +++ b/packages/lowcode-plugin-inject/package.json @@ -1,7 +1,7 @@ { "name": "@alilc/lowcode-plugin-inject", "author": "ens", - "version": "1.2.2", + "version": "1.2.3", "description": "lowcode-plugin-inject", "main": "lib/index.js", "module": "es/index.js", diff --git a/packages/lowcode-plugin-inject/src/appInject.tsx b/packages/lowcode-plugin-inject/src/appInject.tsx new file mode 100644 index 0000000..22b85fe --- /dev/null +++ b/packages/lowcode-plugin-inject/src/appInject.tsx @@ -0,0 +1,164 @@ +import { IPublicModelPluginContext, IPublicEnumPluginRegisterLevel } from '@alilc/lowcode-types'; +import { getInjectedResource, injectAssets } from './utils'; +import Icon from './icon'; +import { Pane } from './pane'; +import React from 'react'; +import { InjectConfig } from './controller'; + +const injectConfig = new InjectConfig(); + +let injectedPluginConfigMap = null; +let injectedPlugins = []; + +export async function getInjectedPlugin(name: string, ctx: IPublicModelPluginContext) { + if (!injectedPluginConfigMap) { + injectedPluginConfigMap = {}; + injectedPlugins = await getInjectedResource('plugin'); + if (injectedPlugins && injectedPlugins.length > 0) { + injectedPlugins.forEach((item: any) => { + const config = item.module(ctx); + injectedPluginConfigMap[config.name || item.module.pluginName] = item.module; + }); + } + } + return injectedPluginConfigMap[name]; +} + +export function AppInject(ctx: IPublicModelPluginContext, options: any) { + + const { workspace } = ctx; + + const getInjectPlugin = async (plugin: any, pluginOptions: any, ctx?: IPublicModelPluginContext) => { + let pluginName = plugin.pluginName; + if (!pluginName) { + const pluginConfig = plugin(ctx, pluginOptions); + pluginName = pluginConfig.name; + } + + const injectedSameNamePlugin = await getInjectedPlugin(pluginName, ctx); + const resourceName = ctx.editorWindow?.resource?.name; + const viewName = (ctx?.editorWindow?.currentEditorView as any)?.viewName; + const isGlobal = ctx?.registerLevel === IPublicEnumPluginRegisterLevel.Workspace; + if (!injectedSameNamePlugin) { + return plugin; + } + + if (isGlobal) { + if (injectConfig.has(pluginName, 'global')) { + return injectConfig.get(pluginName, 'global') ? injectedSameNamePlugin : plugin; + } + + injectConfig.set(pluginName, 'global', undefined, true) + return injectedSameNamePlugin; + } + + if (!viewName || !resourceName) { + return injectedSameNamePlugin; + } + + if (injectConfig.has(pluginName, resourceName, viewName)) { + return injectConfig.get(pluginName, resourceName, viewName) ? injectedSameNamePlugin : plugin; + } + + injectConfig.set(pluginName, resourceName, viewName, true); + + return injectedSameNamePlugin; + } + + ctx.config.set('customPluginTransducer', async (originPlugin: any, ctx: IPublicModelPluginContext, options) => { + const injectedSameNamePlugin = await getInjectPlugin(originPlugin, options, ctx); + return injectedSameNamePlugin; + }); + + return { + // 插件名，注册环境下唯一 + name: 'LowcodePluginInjectAlt', + // 依赖的插件（插件名数组） + dep: [], + + async init() { + const subPluginName = '___injectPlugins___'; + + const subPlugin = (ctx: IPublicModelPluginContext) => { + injectAssets(ctx) + return { + async init() { + } + } + } + + subPlugin.pluginName = subPluginName; + subPlugin.meta = { + dependencies: [], + engines: { + lowcodeEngine: '^1.0.0', // 插件需要配合 ^1.0.0 的引擎才可运行 + }, + }; + + workspace.onChangeActiveWindow(async () => { + for (const pluginName in injectedPluginConfigMap) { + const injectedSameNamePlugin = await getInjectedPlugin(pluginName, ctx); + if (!injectedSameNamePlugin) { + continue; + } + + const resourceName = workspace.window?.resource?.name; + const currentEditorView = workspace.window?.currentEditorView; + const viewName = (currentEditorView as any)?.viewName; + if (injectConfig.get(pluginName, resourceName, viewName) && !currentEditorView?.plugins.has(pluginName)) { + await currentEditorView?.plugins.register(injectedPluginConfigMap[pluginName], { + autoInit: true, + }); + } + + if (injectConfig.get(pluginName, 'global') && !workspace.plugins.has(pluginName)) { + await workspace.plugins.register(injectedPluginConfigMap[pluginName], { + autoInit: true, + }); + } + } + + if (workspace.window?.currentEditorView && !workspace.window?.currentEditorView.plugins?.has(subPlugin.pluginName)) { + await workspace.window?.currentEditorView.plugins.register(subPlugin) + } + }); + + await getInjectedPlugin(undefined, ctx); + + ctx.skeleton.add({ + area: 'leftArea', + name: 'inject-pane', + type: 'PanelDock', + props: { + icon: , + description: '调试', + className: 'inject-pane-icon', + }, + index: 2, + panelProps: { + width: '600px', + canSetFixed: false, + }, + content: (props) => { + return + }, + contentProps: { + pluginContext: ctx, + injectConfig, + injectedPluginConfigMap, + getInjectInfo: async () => { + const injectedSetters = await getInjectedResource('vs'); + return { + injectedSetters, + } + }, + updateInjectConfig: (pluginName: string, resourceName: string, viewName: string, check: boolean) => { + injectConfig.set(pluginName, resourceName, viewName, check) + injectConfig.save() + } + }, + }); + } + } + +} \ No newline at end of file diff --git a/packages/lowcode-plugin-inject/src/controller.ts b/packages/lowcode-plugin-inject/src/controller.ts new file mode 100644 index 0000000..dcacbde --- /dev/null +++ b/packages/lowcode-plugin-inject/src/controller.ts @@ -0,0 +1,70 @@ +import { set, get, has } from 'lodash'; +import { EventEmitter } from 'events'; + +export type IInjectConfig = { + [pluginName: string]: { + [resourceName: string]: { + [viewName: string]: boolean; + } | boolean; + + global?: boolean; + }; +}; + +export class InjectConfig { + _config: IInjectConfig = JSON.parse(localStorage.getItem('___inject_config___') || '{}'); + + event: EventEmitter = new EventEmitter() + + get config() { + return this._config; + } + + onChange(fn: (config: IInjectConfig) => void) { + this.event.on('changeConfig', fn); + return () => { + this.event.off('changeConfig', fn) + } + } + + set(pluginName, resourceName, viewName, injected: boolean) { + if (!viewName) { + set(this._config, [pluginName, resourceName], injected); + this._config = { + ...this._config, + } + this.event.emit('changeConfig', this.config); + return; + } + + set(this._config, [pluginName, resourceName, viewName], injected); + + this._config = { + ...this._config, + } + + this.event.emit('changeConfig', this.config); + } + + get(pluginName, resourceName, viewName?) { + if (!viewName) { + return get(this._config, [pluginName, resourceName], false) + } + return get(this._config, [pluginName, resourceName, viewName], false) + } + + has(pluginName, resourceName, viewName?) { + if (!viewName) { + return has(this._config, [pluginName, resourceName]) + } + return has(this._config, [pluginName, resourceName, viewName]) + } + + clearAll() { + this._config = {}; + } + + save() { + localStorage.setItem('___inject_config___', JSON.stringify(this._config)); + } +} \ No newline at end of file diff --git a/packages/lowcode-plugin-inject/src/icon.tsx b/packages/lowcode-plugin-inject/src/icon.tsx new file mode 100644 index 0000000..7614637 --- /dev/null +++ b/packages/lowcode-plugin-inject/src/icon.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; + +export default function Icon() { + return ( +
+
+ + + +
+
+ 调试 +
+
+ ); +} diff --git a/packages/lowcode-plugin-inject/src/index.tsx b/packages/lowcode-plugin-inject/src/index.tsx index c9e7f57..9eb8716 100644 --- a/packages/lowcode-plugin-inject/src/index.tsx +++ b/packages/lowcode-plugin-inject/src/index.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import { plugins, setters } from '@alilc/lowcode-engine'; -import { IPublicModelPluginContext, IPublicTypePlugin } from '@alilc/lowcode-types'; +import { IPublicModelPluginContext, IPublicEnumPluginRegisterLevel, IPublicTypePlugin } from '@alilc/lowcode-types'; import { getInjectedResource, injectAssets, needInject, injectComponents, filterPackages, setInjectServerHost } from './utils'; import { Notification } from '@alifd/next'; - +import { AppInject } from './appInject'; let injectedPluginConfigMap = null; let injectedPlugins = []; @@ -32,29 +32,39 @@ interface IOptions { } const Inject = (ctx: IPublicModelPluginContext, options: IOptions = {}) => { + if (!needInject) { + return { + init() {} + } + } + + if (ctx.registerLevel === IPublicEnumPluginRegisterLevel.Workspace) { + return AppInject(ctx, options); + } + if (options?.injectServerHost) { setInjectServerHost(options.injectServerHost); } + // inject 已有的设计器插件 - if (needInject) { - // 覆盖后续的插件注册逻辑，所有只有本插件后面注册的插件才可以支持 inject 逻辑 - const originalRegister = plugins.register; - plugins.register = async function (plugin: IPublicTypePlugin, pluginOptions: any, options: any) { - let pluginName = plugin.pluginName; - if (!pluginName) { - const pluginConfig = plugin(ctx, pluginOptions); - // 兼容逻辑 - pluginName = (pluginConfig as any).name; - } - const injectedSameNamePlugin = await getInjectedPlugin(pluginName, ctx); - if (injectedSameNamePlugin) { - injectedPluginConfigMap[pluginName] = null; - return originalRegister.call(this, injectedSameNamePlugin, pluginOptions, options); - } else { - return originalRegister.call(this, plugin, pluginOptions, options); - } + // 覆盖后续的插件注册逻辑，所有只有本插件后面注册的插件才可以支持 inject 逻辑 + const originalRegister = plugins.register; + plugins.register = async function (plugin: IPublicTypePlugin, pluginOptions: any, options: any) { + let pluginName = plugin.pluginName; + if (!pluginName) { + const pluginConfig = plugin(ctx, pluginOptions); + // 兼容逻辑 + pluginName = (pluginConfig as any).name; + } + const injectedSameNamePlugin = await getInjectedPlugin(pluginName, ctx); + if (injectedSameNamePlugin) { + injectedPluginConfigMap[pluginName] = null; + return originalRegister.call(this, injectedSameNamePlugin, pluginOptions, options); + } else { + return originalRegister.call(this, plugin, pluginOptions, options); } } + return { // 插件名，注册环境下唯一 name: 'LowcodePluginInjectAlt', @@ -62,9 +72,6 @@ const Inject = (ctx: IPublicModelPluginContext, options: IOptions = {}) => { dep: [], // 插件的初始化函数，在引擎初始化之后会立刻调用 async init() { - if (!needInject) { - return; - } // inject 新的设计器插件 if (injectedPluginConfigMap) { diff --git a/packages/lowcode-plugin-inject/src/pane.scss b/packages/lowcode-plugin-inject/src/pane.scss new file mode 100644 index 0000000..517529b --- /dev/null +++ b/packages/lowcode-plugin-inject/src/pane.scss @@ -0,0 +1,48 @@ +.inject-pane-icon { + height: 60px !important; + font-size: 12px; + text-align: center; + margin-bottom: 10px; +} + +.inject-setting-panel { + padding: 10px 20px; + + &-title { + font-size: 14px; + margin-bottom: 10px; + display: inline-block; + font-weight: bold; + } + + &-label { + width: 100px; + text-align: right; + margin-bottom: 10px; + margin-right: 15px; + display: inline-block; + } + + &-inject-item { + margin-left: 10px; + margin-bottom: 10px; + } + + &-table { + margin-bottom: 10px; + } + + &-empty { + padding: 20px; + + &-title { + font-weight: bold; + font-size: 14px; + } + + &-tips { + font-size: 12px; + margin-top: 10px; + } + } +} \ No newline at end of file diff --git a/packages/lowcode-plugin-inject/src/pane.tsx b/packages/lowcode-plugin-inject/src/pane.tsx new file mode 100644 index 0000000..79243fe --- /dev/null +++ b/packages/lowcode-plugin-inject/src/pane.tsx @@ -0,0 +1,158 @@ +import { Checkbox, Table, Button } from "@alifd/next"; +import { IPublicModelPluginContext } from "@alilc/lowcode-types"; +import * as React from 'react'; +import { InjectConfig } from "./controller"; + +import './pane.scss' + +export function Pane(props: { + injectConfig: InjectConfig; + pluginContext: IPublicModelPluginContext; + updateInjectConfig: (pluginName: string, resourceName: string, viewName: string, check: boolean) => void; + getInjectInfo(): Promise<{ + injectedSetters: any; + }> + injectedPluginConfigMap: any; +}) { + const [injectInfo, setInjectInfo] = React.useState<{ + injectedSetters?: any; + }>({}); + const [dataSource, setDataSource] = React.useState([]); + + const { workspace } = props.pluginContext; + const options: any[] = (workspace as any).resourceTypeList.map(resource => { + return { + label: resource.description || resource.resourceName, + value: resource.resourceName, + children: resource.editorViews?.map((view) => ({ + label: view.viewName + '视图', + value: view.viewName + })) + } + }); + + options.unshift({ + label: '全局', + value: 'global', + }); + + const updateConfig = React.useCallback((config) => { + const newDataSource = Object.entries(config).map(([key, value]) => { + return { + pluginName: key + } + }).filter(d => props.injectedPluginConfigMap[d.pluginName]); + setDataSource(newDataSource); + + props.getInjectInfo().then(res => { + setInjectInfo(res); + }); + }, []); + + React.useEffect(() => { + updateConfig(props.injectConfig.config); + props.injectConfig.onChange((config) => { + updateConfig(config); + }) + }, []); + + const { + injectedSetters, + } = injectInfo; + + if (!dataSource?.length && !injectedSetters?.length) { + return ( +
+
+ 未检测到调试插件/组件 +
+
+ ) + } + + return ( +
+ + 设计器插件： + + + + + + + ( + <> + { + options.map(resource => { + if (resource.children) { + return ( +
+ { resource.label } + { + resource.children.map(view => ( + { + props.updateInjectConfig(record.pluginName, resource.value, view.value, checked); + }} + > + { view.label } + + )) + } +
+ ) + } + return ( +
+ { resource.label } + { + props.updateInjectConfig(record.pluginName, resource.value, '', checked); + }} + > + +
+ ) + }) + } + + )} /> +
+ +
+ ) +} + +function InjectItem(props: { + title: string, + injectItems: { + name: string; + }[] +}) { + if (!props.injectItems || !props.injectItems.length) { + return null; + } + + return ( +
+ {props.title}： +
+ {props.injectItems && props.injectItems.map((item) => ( + {item.name} + ))} +
+
+ ) +} \ No newline at end of file diff --git a/packages/lowcode-plugin-inject/src/utils.tsx b/packages/lowcode-plugin-inject/src/utils.tsx index 390f4aa..ab0e031 100644 --- a/packages/lowcode-plugin-inject/src/utils.tsx +++ b/packages/lowcode-plugin-inject/src/utils.tsx @@ -272,7 +272,7 @@ export async function injectAssets(assets) { ) }) } - } catch (err) { } + } catch (err) {} return assets; } From d7f3c0223eff86af1ae2d1a14fe3e6691e3eb9e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8D=8E=E8=90=BD?= <45193953+Alubb77@users.noreply.github.com> Date: Tue, 5 Sep 2023 14:43:28 +0800 Subject: [PATCH 92/98] =?UTF-8?q?fix(build-plugin-alt):=20=E4=BF=AE?= =?UTF-8?q?=E5=A4=8D=E6=B3=A8=E5=85=A5=E6=A8=A1=E5=BC=8F=E7=9B=91=E5=90=AC?= =?UTF-8?q?=E5=BC=82=E5=B8=B8=E5=AF=BC=E8=87=B4=E6=8A=A5=E9=94=99=E7=9A=84?= =?UTF-8?q?=E9=97=AE=E9=A2=98=20(#41)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/build-plugin-alt/src/inject/apis.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/build-plugin-alt/src/inject/apis.ts b/packages/build-plugin-alt/src/inject/apis.ts index aaf5814..ec2c0c0 100644 --- a/packages/build-plugin-alt/src/inject/apis.ts +++ b/packages/build-plugin-alt/src/inject/apis.ts @@ -26,8 +26,8 @@ function makeJsonpStr(cbName, data) { return `;${cbName}(${JSON.stringify(data)})` } -async function portIsOccupied(_port) { - const server = net.createServer().listen(_port); +async function portIsOccupied(_port, _host) { + const server = net.createServer().listen(_port, _host); // eslint-disable-next-line no-shadow return new Promise((resolve) => { server.on('listening', () => { @@ -47,9 +47,9 @@ const HOST = '0.0.0.0'; const init = async () => { - if (await portIsOccupied(PORT)) { + if (await portIsOccupied(PORT, HOST)) { const timer = setInterval(async () => { - const isOccupied = await portIsOccupied(PORT); + const isOccupied = await portIsOccupied(PORT, HOST); if (!isOccupied) { logger.info('Original inject server is down, start another') clearInterval(timer); From 476855db9b38a53e3eaab6ab2f9f7aba54bf67cc Mon Sep 17 00:00:00 2001 From: eternalsky Date: Tue, 5 Sep 2023 14:48:38 +0800 Subject: [PATCH 93/98] chore(build-plugin-alt): release 1.3.4 --- packages/build-plugin-alt/CHANGELOG.md | 4 ++++ packages/build-plugin-alt/package.json | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/build-plugin-alt/CHANGELOG.md b/packages/build-plugin-alt/CHANGELOG.md index b8b5055..672c3c8 100644 --- a/packages/build-plugin-alt/CHANGELOG.md +++ b/packages/build-plugin-alt/CHANGELOG.md @@ -1,5 +1,9 @@ # Changelog +## 1.3.4 + +- `fix` 修复注入模式某些情况下监听异常导致报错的问题 + ## 1.3.3 - `fix` 修复本地调试问题 diff --git a/packages/build-plugin-alt/package.json b/packages/build-plugin-alt/package.json index 2583816..7572747 100644 --- a/packages/build-plugin-alt/package.json +++ b/packages/build-plugin-alt/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/build-plugin-alt", - "version": "1.3.3", + "version": "1.3.4", "description": "build-scripts plugin template for developers", "main": "lib/index.js", "files": [ From 81ab64b99148873062cad192ef5467bb45f50edb Mon Sep 17 00:00:00 2001 From: liujuping Date: Fri, 5 Jan 2024 15:16:29 +0800 Subject: [PATCH 94/98] feat: build-plugin-lce add rax-babel-config deps --- packages/build-plugin-lce/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/build-plugin-lce/package.json b/packages/build-plugin-lce/package.json index a5ba4df..e1127ef 100644 --- a/packages/build-plugin-lce/package.json +++ b/packages/build-plugin-lce/package.json @@ -65,6 +65,7 @@ "typescript": "^4.0.0", "url-join": "^4.0.1", "user-home": "^2.0.0", + "rax-babel-config": "^2.0.4", "utils": "^0.3.1", "webpack": "^4.41.1", "webpack-chain": "^6.5.1", From d6b066b383d77ceb4ae0a6c6c19dba60a3dd0bbc Mon Sep 17 00:00:00 2001 From: JackLian Date: Fri, 5 Jan 2024 15:27:56 +0800 Subject: [PATCH 95/98] feat: remove rax support --- packages/build-plugin-lce/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/build-plugin-lce/package.json b/packages/build-plugin-lce/package.json index e1127ef..768cade 100644 --- a/packages/build-plugin-lce/package.json +++ b/packages/build-plugin-lce/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/build-plugin-lce", - "version": "0.0.3", + "version": "0.0.4", "description": "build plugin for LowCodeEngine", "main": "src/index.js", "scripts": { From c7d4678615310eea2fd5785be12e28bbe05b76cb Mon Sep 17 00:00:00 2001 From: liujuping Date: Tue, 16 Jan 2024 17:32:23 +0800 Subject: [PATCH 96/98] feat: add compile declaration fail error --- .gitignore | 1 + packages/build-plugin-lce/package.json | 7 ++++--- packages/build-plugin-lce/src/compiler/dts.js | 1 + 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/.gitignore b/.gitignore index d8b9f33..5066c4d 100644 --- a/.gitignore +++ b/.gitignore @@ -732,3 +732,4 @@ packages/lowcode-preset-plugin/node_modules/_yargs-parser@14.0.0@yargs-parser/pa packages/lowcode-preset-plugin/node_modules/_yargs-parser@14.0.0@yargs-parser/README.md packages/lowcode-preset-plugin/node_modules/_yargs-parser@14.0.0@yargs-parser/lib/tokenize-arg-string.js packages/lowcode-preset-plugin/node_modules/_yargs-parser@14.0.0@yargs-parser/node_modules/camelcase +node_modules/ \ No newline at end of file diff --git a/packages/build-plugin-lce/package.json b/packages/build-plugin-lce/package.json index 768cade..5a7aa92 100644 --- a/packages/build-plugin-lce/package.json +++ b/packages/build-plugin-lce/package.json @@ -1,6 +1,6 @@ { "name": "@alilc/build-plugin-lce", - "version": "0.0.4", + "version": "0.0.5", "description": "build plugin for LowCodeEngine", "main": "src/index.js", "scripts": { @@ -75,5 +75,6 @@ }, "devDependencies": { "@types/node": "^12.12.18" - } -} + }, + "repository": "https://github.com/alibaba/lowcode-tools.git" +} \ No newline at end of file diff --git a/packages/build-plugin-lce/src/compiler/dts.js b/packages/build-plugin-lce/src/compiler/dts.js index 1fcfefa..cce3664 100644 --- a/packages/build-plugin-lce/src/compiler/dts.js +++ b/packages/build-plugin-lce/src/compiler/dts.js @@ -55,6 +55,7 @@ module.exports = function dtsCompiler(compileInfo, { log.error(message); } }); + throw new Error('Compile declaration failed.'); } needCompileList.forEach(({ targetPath, fileNamesDTS }) => { From 339d121a3929437d79543705aeab1893353f393e Mon Sep 17 00:00:00 2001 From: dong-gy <48462501+dong-gy@users.noreply.github.com> Date: Fri, 10 May 2024 16:39:33 +0800 Subject: [PATCH 97/98] =?UTF-8?q?fix:=20view.js=20=E4=B8=AD=20windows=20?= =?UTF-8?q?=E7=9A=84=E8=B7=AF=E5=BE=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/build-plugin-lowcode/src/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/build-plugin-lowcode/src/index.js b/packages/build-plugin-lowcode/src/index.js index 9cfcbb5..87bf4bc 100644 --- a/packages/build-plugin-lowcode/src/index.js +++ b/packages/build-plugin-lowcode/src/index.js @@ -846,8 +846,8 @@ async function bundleEditorView( componentViewsImportStr = _componentViews .map((component) => { const componentNameFolder = camel2KebabComponentName(component); - const viewJsPath = path.resolve(rootDir, `${lowcodeDir}/${componentNameFolder}/view`); - return `import * as ${component}Data from '${viewJsPath}'`; + const viewJsPath = path.resolve(rootDir, `${lowcodeDir}/${componentNameFolder}/view`).replace(/\\/g, '\\\\'); + return `import * as ${component}Data from '${viewJsPath}';`; }) .join('\n'); } From 7f104d6561cdf645c592f37b1adce90e57d17098 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8F=B5=E4=B9=8B?= Date: Tue, 13 May 2025 14:39:01 +0800 Subject: [PATCH 98/98] feat: add urls filter for inject --- packages/lowcode-plugin-inject/package.json | 9 ++++--- .../lowcode-plugin-inject/src/appInject.tsx | 16 ++++++------ packages/lowcode-plugin-inject/src/index.tsx | 13 +++++----- packages/lowcode-plugin-inject/src/utils.tsx | 25 ++++++++++++------- 4 files changed, 37 insertions(+), 26 deletions(-) diff --git a/packages/lowcode-plugin-inject/package.json b/packages/lowcode-plugin-inject/package.json index db64988..b563900 100644 --- a/packages/lowcode-plugin-inject/package.json +++ b/packages/lowcode-plugin-inject/package.json @@ -1,7 +1,7 @@ { "name": "@alilc/lowcode-plugin-inject", "author": "ens", - "version": "1.2.3", + "version": "1.2.4", "description": "lowcode-plugin-inject", "main": "lib/index.js", "module": "es/index.js", @@ -36,12 +36,15 @@ "react": "^16.0.0" }, "devDependencies": { - "@alilc/build-plugin-alt": "^1.0.0", "@alib/build-scripts": "^0.1.32", "@alifd/theme-lowcode-light": "^0.2.1", + "@alilc/build-plugin-alt": "^1.0.0", + "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@recore/config": "^2.0.6", "@types/react": "^16.0.3", - "build-plugin-fusion": "^0.1.19" + "build-plugin-fusion": "^0.1.19", + "react": "^16", + "react-dom": "^16" }, "license": "MIT" } diff --git a/packages/lowcode-plugin-inject/src/appInject.tsx b/packages/lowcode-plugin-inject/src/appInject.tsx index 22b85fe..daa46ff 100644 --- a/packages/lowcode-plugin-inject/src/appInject.tsx +++ b/packages/lowcode-plugin-inject/src/appInject.tsx @@ -1,5 +1,5 @@ import { IPublicModelPluginContext, IPublicEnumPluginRegisterLevel } from '@alilc/lowcode-types'; -import { getInjectedResource, injectAssets } from './utils'; +import { getInjectedResource, injectAssets, type InjectOptions } from './utils'; import Icon from './icon'; import { Pane } from './pane'; import React from 'react'; @@ -10,10 +10,10 @@ const injectConfig = new InjectConfig(); let injectedPluginConfigMap = null; let injectedPlugins = []; -export async function getInjectedPlugin(name: string, ctx: IPublicModelPluginContext) { +export async function getInjectedPlugin(name: string, ctx: IPublicModelPluginContext, injectOptions?: InjectOptions) { if (!injectedPluginConfigMap) { injectedPluginConfigMap = {}; - injectedPlugins = await getInjectedResource('plugin'); + injectedPlugins = await getInjectedResource('plugin', injectOptions); if (injectedPlugins && injectedPlugins.length > 0) { injectedPlugins.forEach((item: any) => { const config = item.module(ctx); @@ -35,7 +35,7 @@ export function AppInject(ctx: IPublicModelPluginContext, options: any) { pluginName = pluginConfig.name; } - const injectedSameNamePlugin = await getInjectedPlugin(pluginName, ctx); + const injectedSameNamePlugin = await getInjectedPlugin(pluginName, ctx, options); const resourceName = ctx.editorWindow?.resource?.name; const viewName = (ctx?.editorWindow?.currentEditorView as any)?.viewName; const isGlobal = ctx?.registerLevel === IPublicEnumPluginRegisterLevel.Workspace; @@ -80,7 +80,7 @@ export function AppInject(ctx: IPublicModelPluginContext, options: any) { const subPluginName = '___injectPlugins___'; const subPlugin = (ctx: IPublicModelPluginContext) => { - injectAssets(ctx) + injectAssets(ctx, options) return { async init() { } @@ -97,7 +97,7 @@ export function AppInject(ctx: IPublicModelPluginContext, options: any) { workspace.onChangeActiveWindow(async () => { for (const pluginName in injectedPluginConfigMap) { - const injectedSameNamePlugin = await getInjectedPlugin(pluginName, ctx); + const injectedSameNamePlugin = await getInjectedPlugin(pluginName, ctx, options); if (!injectedSameNamePlugin) { continue; } @@ -123,7 +123,7 @@ export function AppInject(ctx: IPublicModelPluginContext, options: any) { } }); - await getInjectedPlugin(undefined, ctx); + await getInjectedPlugin(undefined, ctx, options); ctx.skeleton.add({ area: 'leftArea', @@ -147,7 +147,7 @@ export function AppInject(ctx: IPublicModelPluginContext, options: any) { injectConfig, injectedPluginConfigMap, getInjectInfo: async () => { - const injectedSetters = await getInjectedResource('vs'); + const injectedSetters = await getInjectedResource('vs', options); return { injectedSetters, } diff --git a/packages/lowcode-plugin-inject/src/index.tsx b/packages/lowcode-plugin-inject/src/index.tsx index 9eb8716..6a08f79 100644 --- a/packages/lowcode-plugin-inject/src/index.tsx +++ b/packages/lowcode-plugin-inject/src/index.tsx @@ -1,17 +1,17 @@ import * as React from 'react'; import { plugins, setters } from '@alilc/lowcode-engine'; import { IPublicModelPluginContext, IPublicEnumPluginRegisterLevel, IPublicTypePlugin } from '@alilc/lowcode-types'; -import { getInjectedResource, injectAssets, needInject, injectComponents, filterPackages, setInjectServerHost } from './utils'; +import { getInjectedResource, injectAssets, needInject, injectComponents, filterPackages, setInjectServerHost, type InjectOptions } from './utils'; import { Notification } from '@alifd/next'; import { AppInject } from './appInject'; let injectedPluginConfigMap = null; let injectedPlugins = []; -export async function getInjectedPlugin(name: string, ctx: IPublicModelPluginContext) { +export async function getInjectedPlugin(name: string, ctx: IPublicModelPluginContext, injectOptions?: InjectOptions) { if (!injectedPluginConfigMap) { injectedPluginConfigMap = {}; - injectedPlugins = await getInjectedResource('plugin'); + injectedPlugins = await getInjectedResource('plugin', injectOptions); if (injectedPlugins && injectedPlugins.length > 0) { injectedPlugins.forEach((item: any) => { let pluginName = item.module?.pluginName; @@ -27,11 +27,12 @@ export async function getInjectedPlugin(name: string, ctx: IPublicModelPluginCon return injectedPluginConfigMap[name]; } -interface IOptions { +interface IOptions extends InjectOptions { injectServerHost?: string; } const Inject = (ctx: IPublicModelPluginContext, options: IOptions = {}) => { + const { injectServerHost, ...injectOptions } = options; if (!needInject) { return { init() {} @@ -56,7 +57,7 @@ const Inject = (ctx: IPublicModelPluginContext, options: IOptions = {}) => { // 兼容逻辑 pluginName = (pluginConfig as any).name; } - const injectedSameNamePlugin = await getInjectedPlugin(pluginName, ctx); + const injectedSameNamePlugin = await getInjectedPlugin(pluginName, ctx, injectOptions); if (injectedSameNamePlugin) { injectedPluginConfigMap[pluginName] = null; return originalRegister.call(this, injectedSameNamePlugin, pluginOptions, options); @@ -85,7 +86,7 @@ const Inject = (ctx: IPublicModelPluginContext, options: IOptions = {}) => { } }); } - const injectedSetters = await getInjectedResource('vs'); + const injectedSetters = await getInjectedResource('vs', injectOptions); injectedSetters.forEach((item) => { setters.registerSetter(item.module.displayName, item.module); }); diff --git a/packages/lowcode-plugin-inject/src/utils.tsx b/packages/lowcode-plugin-inject/src/utils.tsx index ab0e031..1466766 100644 --- a/packages/lowcode-plugin-inject/src/utils.tsx +++ b/packages/lowcode-plugin-inject/src/utils.tsx @@ -48,9 +48,16 @@ export function setInjectServerHost(finalInjectServerHost) { console.log('inject server host', injectServerHost); } +export interface InjectOptions { + filter?: (url: string) => boolean; +} + // 获取 inject 资源的 url，格式：['url1', 'url2'] -function getInjectUrls(resourceType, type = 'url'): Promise { +function getInjectUrls(resourceType, type = 'url', injectOptions?: InjectOptions): Promise { const filter = (_urls) => { + if (injectOptions?.filter) { + _urls = _urls.filter(url => injectOptions.filter(url)); + } if (!resourceType) { return type === 'url' ? _urls.map(item => item.url || item) : _urls; } @@ -131,8 +138,8 @@ function loadComponentFromSources(sources) { } // 获取 inject 的资源，格式 [{name, module, pluginType}] -export async function getInjectedResource(type) { - const urls = await getInjectUrls(type); +export async function getInjectedResource(type, injectOptions?: InjectOptions) { + const urls = await getInjectUrls(type, undefined, injectOptions); await loadComponentFromSources(urls); return window[arrayFlag].filter((item) => { const _item = item.default || item; @@ -238,10 +245,10 @@ function getComponentFromUrlItems(items) { } -export async function injectAssets(assets) { +export async function injectAssets(assets, injectOptions?: InjectOptions) { if (!needInject) return assets; try { - const injectUrls = await getInjectUrls('component', 'item'); + const injectUrls = await getInjectUrls('component', 'item', injectOptions); const components = getComponentFromUrlItems(injectUrls) Object.keys(components).forEach((name) => { const item = components[name]; @@ -276,9 +283,9 @@ export async function injectAssets(assets) { return assets; } -export async function injectComponents(components) { +export async function injectComponents(components, injectOptions?: InjectOptions) { if (!needInject) return components; - const injectUrls = await getInjectUrls('component', 'item'); + const injectUrls = await getInjectUrls('component', 'item', injectOptions); await loadComponentFromSources(injectUrls.map(item => item.url || item)); const injectedComponents = getComponentFromUrlItems(injectUrls); const libraryMap = {}; @@ -307,9 +314,9 @@ export async function injectComponents(components) { return { ...components, ...injectedComponentsForRenderer }; } -export async function filterPackages(packages = []) { +export async function filterPackages(packages = [], injectOptions?: InjectOptions) { if (!needInject) return packages; - const injectUrls = await getInjectUrls('component', 'item'); + const injectUrls = await getInjectUrls('component', 'item', injectOptions); const injectedComponents = getComponentFromUrlItems(injectUrls); return packages.filter((item) => { return !(item.package in injectedComponents)