feat: add styleImport plugin which handles style import of some funda…

…mental materials
alibaba · Mar 31, 2023 · d0c3c0f · d0c3c0f
1 parent 48bc8d7
commit d0c3c0f
Show file tree

Hide file tree

Showing 16 changed files with 172 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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<unknown> = () => {
+  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<string, boolean> = {};
+      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
@@ -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
@@ -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/...tests/fixtures/test-cases/icejs3-app/demo1/expected/demo-project/src/pages/Test/index.jsx b/...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/...tests/fixtures/test-cases/icejs3-app/demo2/expected/demo-project/src/pages/Test/index.jsx b/...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/...tests/fixtures/test-cases/icejs3-app/demo3/expected/demo-project/src/pages/Test/index.jsx b/...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/...t-cases/icejs3-app/demo6-literal-condition/expected/demo-project/src/pages/Test/index.jsx b/...t-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/...test-cases/icejs3-app/demo9-datasource-engine/expected/demo-project/src/pages/$/index.jsx b/...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/.../tests/fixtures/test-cases/react-app/demo1/expected/demo-project/src/pages/Test/index.jsx b/.../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/.../tests/fixtures/test-cases/react-app/demo2/expected/demo-project/src/pages/Test/index.jsx b/.../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/.../tests/fixtures/test-cases/react-app/demo3/expected/demo-project/src/pages/Test/index.jsx b/.../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/...st-cases/react-app/demo6-literal-condition/expected/demo-project/src/pages/Test/index.jsx b/...st-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/.../test-cases/react-app/demo9-datasource-engine/expected/demo-project/src/pages/$/index.jsx b/.../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';