From d0c3c0f13c10a5e9545c680e4a6b12128c0720c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?LeoYuan=20=E8=A2=81=E5=8A=9B=E7=9A=93?= Date: Thu, 30 Mar 2023 11:35:09 +0800 Subject: [PATCH] feat: add styleImport plugin which handles style import of some fundamental materials --- modules/code-generator/example-schema.json | 4 +- modules/code-generator/example-schema.json5 | 4 +- modules/code-generator/src/index.ts | 23 +++++--- .../src/plugins/common/styleImport.ts | 54 +++++++++++++++++++ modules/code-generator/src/solutions/icejs.ts | 3 ++ .../code-generator/src/solutions/icejs3.ts | 3 ++ .../demo-project/src/pages/Test/index.jsx | 10 ++++ .../demo-project/src/pages/Test/index.jsx | 10 ++++ .../demo-project/src/pages/Test/index.jsx | 14 +++++ .../demo-project/src/pages/Test/index.jsx | 10 ++++ .../demo-project/src/pages/$/index.jsx | 2 + .../demo-project/src/pages/Test/index.jsx | 10 ++++ .../demo-project/src/pages/Test/index.jsx | 10 ++++ .../demo-project/src/pages/Test/index.jsx | 14 +++++ .../demo-project/src/pages/Test/index.jsx | 10 ++++ .../demo-project/src/pages/$/index.jsx | 2 + 16 files changed, 172 insertions(+), 11 deletions(-) create mode 100644 modules/code-generator/src/plugins/common/styleImport.ts diff --git a/modules/code-generator/example-schema.json b/modules/code-generator/example-schema.json index f41354514..5e31b1bea 100644 --- a/modules/code-generator/example-schema.json +++ b/modules/code-generator/example-schema.json @@ -62,12 +62,12 @@ "router": "/" }, "props": { - "ref": "outterView", + "ref": "outerView", "autoLoading": true }, "fileName": "test", "state": { - "text": "outter" + "text": "outer" }, "lifeCycles": { "componentDidMount": { diff --git a/modules/code-generator/example-schema.json5 b/modules/code-generator/example-schema.json5 index 085af24c1..4ab02999e 100644 --- a/modules/code-generator/example-schema.json5 +++ b/modules/code-generator/example-schema.json5 @@ -62,12 +62,12 @@ router: '/', }, props: { - ref: 'outterView', + ref: 'outerView', autoLoading: true, }, fileName: 'test', state: { - text: 'outter', + text: 'outer', }, lifeCycles: { componentDidMount: { diff --git a/modules/code-generator/src/index.ts b/modules/code-generator/src/index.ts index abe080557..0c8fdf384 100644 --- a/modules/code-generator/src/index.ts +++ b/modules/code-generator/src/index.ts @@ -8,7 +8,7 @@ import { createProjectBuilder } from './generator/ProjectBuilder'; import { createModuleBuilder } from './generator/ModuleBuilder'; import { createDiskPublisher } from './publisher/disk'; import { createZipPublisher } from './publisher/zip'; -import createIceJsProjectBuilder, { plugins as reactPlugins } from './solutions/icejs'; +import createIceJsProjectBuilder, { plugins as icejsPlugins } from './solutions/icejs'; import createIce3JsProjectBuilder, { plugins as icejs3Plugins } from './solutions/icejs3'; import createRaxAppProjectBuilder, { plugins as raxPlugins } from './solutions/rax-app'; @@ -19,6 +19,7 @@ import { COMMON_CHUNK_NAME, CLASS_DEFINE_CHUNK_NAME, DEFAULT_LINK_AFTER } from ' // 引入通用插件组 import esmodule from './plugins/common/esmodule'; import requireUtils from './plugins/common/requireUtils'; +import styleImport from './plugins/common/styleImport'; import css from './plugins/component/style/css'; import constants from './plugins/project/constants'; @@ -63,12 +64,7 @@ export default { esmodule, esModule: esmodule, requireUtils, - }, - react: { - ...reactPlugins, - }, - rax: { - ...raxPlugins, + styleImport, }, style: { css, @@ -78,9 +74,22 @@ export default { i18n, utils, }, + icejs: { + ...icejsPlugins, + }, icejs3: { ...icejs3Plugins, }, + rax: { + ...raxPlugins, + }, + + /** + * @deprecated please use icejs + */ + react: { + ...icejsPlugins, + }, }, postprocessor: { prettier, diff --git a/modules/code-generator/src/plugins/common/styleImport.ts b/modules/code-generator/src/plugins/common/styleImport.ts new file mode 100644 index 000000000..c340900ea --- /dev/null +++ b/modules/code-generator/src/plugins/common/styleImport.ts @@ -0,0 +1,54 @@ +import changeCase from 'change-case'; +import { + FileType, + BuilderComponentPluginFactory, + BuilderComponentPlugin, + ICodeStruct, + IWithDependency, + ChunkType, +} from '../../types'; + +import { COMMON_CHUNK_NAME } from '../../const/generator'; + +const pluginFactory: BuilderComponentPluginFactory = () => { + const plugin: BuilderComponentPlugin = async (pre: ICodeStruct) => { + const next: ICodeStruct = { + ...pre, + }; + + const ir = next.ir as IWithDependency; + const { chunks } = next; + + if (ir && ir.deps && ir.deps.length > 0) { + let lowcodeMaterialsStyleAdded = false; + let nextStyleAddedMap: Record = {}; + ir.deps.forEach((dep: any) => { + if (dep.package === '@alifd/next' && !nextStyleAddedMap[dep.exportName]) { + chunks.push({ + type: ChunkType.STRING, + fileType: FileType.JSX, + name: COMMON_CHUNK_NAME.InternalDepsImport, + content: `import '@alifd/next/lib/${changeCase.paramCase(dep.exportName)}/style';`, + linkAfter: [COMMON_CHUNK_NAME.ExternalDepsImport], + }); + nextStyleAddedMap[dep.exportName] = true; + } else if (dep.package === '@alilc/lowcode-materials' && !lowcodeMaterialsStyleAdded) { + chunks.push({ + type: ChunkType.STRING, + fileType: FileType.JSX, + name: COMMON_CHUNK_NAME.InternalDepsImport, + content: 'import \'@alilc/lowcode-materials/lib/style\';', + linkAfter: [COMMON_CHUNK_NAME.ExternalDepsImport], + }); + lowcodeMaterialsStyleAdded = true; + } + }); + } + + return next; + }; + + return plugin; +}; + +export default pluginFactory; diff --git a/modules/code-generator/src/solutions/icejs.ts b/modules/code-generator/src/solutions/icejs.ts index 1b3dec4af..6f5bdde59 100644 --- a/modules/code-generator/src/solutions/icejs.ts +++ b/modules/code-generator/src/solutions/icejs.ts @@ -3,6 +3,7 @@ import { IProjectBuilder, IProjectBuilderOptions } from '../types'; import { createProjectBuilder } from '../generator/ProjectBuilder'; import esmodule from '../plugins/common/esmodule'; +import styleImport from '../plugins/common/styleImport'; import containerClass from '../plugins/component/react/containerClass'; import containerInitState from '../plugins/component/react/containerInitState'; import containerInjectContext from '../plugins/component/react/containerInjectContext'; @@ -38,6 +39,7 @@ export default function createIceJsProjectBuilder( esmodule({ fileType: 'jsx', }), + styleImport(), containerClass(), containerInjectContext(), containerInjectUtils(), @@ -61,6 +63,7 @@ export default function createIceJsProjectBuilder( esmodule({ fileType: 'jsx', }), + styleImport(), containerClass(), containerInjectContext(), containerInjectUtils(), diff --git a/modules/code-generator/src/solutions/icejs3.ts b/modules/code-generator/src/solutions/icejs3.ts index 26128a9eb..c6870dfd0 100644 --- a/modules/code-generator/src/solutions/icejs3.ts +++ b/modules/code-generator/src/solutions/icejs3.ts @@ -3,6 +3,7 @@ import { IProjectBuilder, IProjectBuilderOptions } from '../types'; import { createProjectBuilder } from '../generator/ProjectBuilder'; import esmodule from '../plugins/common/esmodule'; +import styleImport from '../plugins/common/styleImport'; import containerClass from '../plugins/component/react/containerClass'; import containerInitState from '../plugins/component/react/containerInitState'; import containerInjectContext from '../plugins/component/react/containerInjectContext'; @@ -38,6 +39,7 @@ export default function createIceJsProjectBuilder( esmodule({ fileType: 'jsx', }), + styleImport(), containerClass(), containerInjectContext(), containerInjectUtils(), @@ -61,6 +63,7 @@ export default function createIceJsProjectBuilder( esmodule({ fileType: 'jsx', }), + styleImport(), containerClass(), containerInjectContext(), containerInjectUtils(), diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/pages/Test/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/pages/Test/index.jsx index 070020b74..794ad46a4 100644 --- a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/pages/Test/index.jsx +++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/pages/Test/index.jsx @@ -10,6 +10,16 @@ import { createFetchHandler as __$$createFetchRequestHandler } from '@alilc/lowc import { create as __$$createDataSourceEngine } from '@alilc/lowcode-datasource-engine/runtime'; +import '@alifd/next/lib/form/style'; + +import '@alifd/next/lib/input/style'; + +import '@alifd/next/lib/number-picker/style'; + +import '@alifd/next/lib/select/style'; + +import '@alifd/next/lib/button/style'; + import utils, { RefsManager } from '../../utils'; import * as __$$i18n from '../../i18n'; diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/pages/Test/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/pages/Test/index.jsx index 6cb430b1b..080c4245b 100644 --- a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/pages/Test/index.jsx +++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/pages/Test/index.jsx @@ -4,6 +4,16 @@ import React from 'react'; import { Form, Input, NumberPicker, Select, Button } from '@alifd/next'; +import '@alifd/next/lib/form/style'; + +import '@alifd/next/lib/input/style'; + +import '@alifd/next/lib/number-picker/style'; + +import '@alifd/next/lib/select/style'; + +import '@alifd/next/lib/button/style'; + import utils, { RefsManager } from '../../utils'; import * as __$$i18n from '../../i18n'; diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/pages/Test/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/pages/Test/index.jsx index 18c5e0a57..2f0a6efa9 100644 --- a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/pages/Test/index.jsx +++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/pages/Test/index.jsx @@ -13,6 +13,20 @@ import Super, { import SuperOther from '@alifd/next'; +import '@alifd/next/lib/super/style'; + +import '@alifd/next/lib/button/style'; + +import '@alifd/next/lib/input/style'; + +import '@alifd/next/lib/form/style'; + +import '@alifd/next/lib/number-picker/style'; + +import '@alifd/next/lib/select/style'; + +import '@alifd/next/lib/search-table/style'; + import utils from '../../utils'; import * as __$$i18n from '../../i18n'; diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/pages/Test/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/pages/Test/index.jsx index c27cce153..515940c33 100644 --- a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/pages/Test/index.jsx +++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/pages/Test/index.jsx @@ -10,6 +10,16 @@ import { createFetchHandler as __$$createFetchRequestHandler } from '@alilc/lowc import { create as __$$createDataSourceEngine } from '@alilc/lowcode-datasource-engine/runtime'; +import '@alifd/next/lib/form/style'; + +import '@alifd/next/lib/input/style'; + +import '@alifd/next/lib/number-picker/style'; + +import '@alifd/next/lib/select/style'; + +import '@alifd/next/lib/button/style'; + import utils, { RefsManager } from '../../utils'; import * as __$$i18n from '../../i18n'; diff --git a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo9-datasource-engine/expected/demo-project/src/pages/$/index.jsx b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo9-datasource-engine/expected/demo-project/src/pages/$/index.jsx index 1f2bf9041..799ca0d28 100644 --- a/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo9-datasource-engine/expected/demo-project/src/pages/$/index.jsx +++ b/modules/code-generator/tests/fixtures/test-cases/icejs3-app/demo9-datasource-engine/expected/demo-project/src/pages/$/index.jsx @@ -8,6 +8,8 @@ import { createJsonpHandler as __$$createJsonpRequestHandler } from '@alilc/lowc import { create as __$$createDataSourceEngine } from '@alilc/lowcode-datasource-engine/runtime'; +import '@alifd/next/lib/switch/style'; + import utils from '../../utils'; import * as __$$i18n from '../../i18n'; diff --git a/modules/code-generator/tests/fixtures/test-cases/react-app/demo1/expected/demo-project/src/pages/Test/index.jsx b/modules/code-generator/tests/fixtures/test-cases/react-app/demo1/expected/demo-project/src/pages/Test/index.jsx index 070020b74..794ad46a4 100644 --- a/modules/code-generator/tests/fixtures/test-cases/react-app/demo1/expected/demo-project/src/pages/Test/index.jsx +++ b/modules/code-generator/tests/fixtures/test-cases/react-app/demo1/expected/demo-project/src/pages/Test/index.jsx @@ -10,6 +10,16 @@ import { createFetchHandler as __$$createFetchRequestHandler } from '@alilc/lowc import { create as __$$createDataSourceEngine } from '@alilc/lowcode-datasource-engine/runtime'; +import '@alifd/next/lib/form/style'; + +import '@alifd/next/lib/input/style'; + +import '@alifd/next/lib/number-picker/style'; + +import '@alifd/next/lib/select/style'; + +import '@alifd/next/lib/button/style'; + import utils, { RefsManager } from '../../utils'; import * as __$$i18n from '../../i18n'; diff --git a/modules/code-generator/tests/fixtures/test-cases/react-app/demo2/expected/demo-project/src/pages/Test/index.jsx b/modules/code-generator/tests/fixtures/test-cases/react-app/demo2/expected/demo-project/src/pages/Test/index.jsx index 6cb430b1b..080c4245b 100644 --- a/modules/code-generator/tests/fixtures/test-cases/react-app/demo2/expected/demo-project/src/pages/Test/index.jsx +++ b/modules/code-generator/tests/fixtures/test-cases/react-app/demo2/expected/demo-project/src/pages/Test/index.jsx @@ -4,6 +4,16 @@ import React from 'react'; import { Form, Input, NumberPicker, Select, Button } from '@alifd/next'; +import '@alifd/next/lib/form/style'; + +import '@alifd/next/lib/input/style'; + +import '@alifd/next/lib/number-picker/style'; + +import '@alifd/next/lib/select/style'; + +import '@alifd/next/lib/button/style'; + import utils, { RefsManager } from '../../utils'; import * as __$$i18n from '../../i18n'; diff --git a/modules/code-generator/tests/fixtures/test-cases/react-app/demo3/expected/demo-project/src/pages/Test/index.jsx b/modules/code-generator/tests/fixtures/test-cases/react-app/demo3/expected/demo-project/src/pages/Test/index.jsx index 18c5e0a57..2f0a6efa9 100644 --- a/modules/code-generator/tests/fixtures/test-cases/react-app/demo3/expected/demo-project/src/pages/Test/index.jsx +++ b/modules/code-generator/tests/fixtures/test-cases/react-app/demo3/expected/demo-project/src/pages/Test/index.jsx @@ -13,6 +13,20 @@ import Super, { import SuperOther from '@alifd/next'; +import '@alifd/next/lib/super/style'; + +import '@alifd/next/lib/button/style'; + +import '@alifd/next/lib/input/style'; + +import '@alifd/next/lib/form/style'; + +import '@alifd/next/lib/number-picker/style'; + +import '@alifd/next/lib/select/style'; + +import '@alifd/next/lib/search-table/style'; + import utils from '../../utils'; import * as __$$i18n from '../../i18n'; diff --git a/modules/code-generator/tests/fixtures/test-cases/react-app/demo6-literal-condition/expected/demo-project/src/pages/Test/index.jsx b/modules/code-generator/tests/fixtures/test-cases/react-app/demo6-literal-condition/expected/demo-project/src/pages/Test/index.jsx index c27cce153..515940c33 100644 --- a/modules/code-generator/tests/fixtures/test-cases/react-app/demo6-literal-condition/expected/demo-project/src/pages/Test/index.jsx +++ b/modules/code-generator/tests/fixtures/test-cases/react-app/demo6-literal-condition/expected/demo-project/src/pages/Test/index.jsx @@ -10,6 +10,16 @@ import { createFetchHandler as __$$createFetchRequestHandler } from '@alilc/lowc import { create as __$$createDataSourceEngine } from '@alilc/lowcode-datasource-engine/runtime'; +import '@alifd/next/lib/form/style'; + +import '@alifd/next/lib/input/style'; + +import '@alifd/next/lib/number-picker/style'; + +import '@alifd/next/lib/select/style'; + +import '@alifd/next/lib/button/style'; + import utils, { RefsManager } from '../../utils'; import * as __$$i18n from '../../i18n'; diff --git a/modules/code-generator/tests/fixtures/test-cases/react-app/demo9-datasource-engine/expected/demo-project/src/pages/$/index.jsx b/modules/code-generator/tests/fixtures/test-cases/react-app/demo9-datasource-engine/expected/demo-project/src/pages/$/index.jsx index 1f2bf9041..799ca0d28 100644 --- a/modules/code-generator/tests/fixtures/test-cases/react-app/demo9-datasource-engine/expected/demo-project/src/pages/$/index.jsx +++ b/modules/code-generator/tests/fixtures/test-cases/react-app/demo9-datasource-engine/expected/demo-project/src/pages/$/index.jsx @@ -8,6 +8,8 @@ import { createJsonpHandler as __$$createJsonpRequestHandler } from '@alilc/lowc import { create as __$$createDataSourceEngine } from '@alilc/lowcode-datasource-engine/runtime'; +import '@alifd/next/lib/switch/style'; + import utils from '../../utils'; import * as __$$i18n from '../../i18n';