@douyinfe/semi-rspack-plugin 2.59.0-alpha.0 → 2.59.0

package/lib/componentDependentTree.d.ts

@@ -0,0 +1,69 @@
+declare const dependentTree: {
+    Anchor: string[];
+    AutoComplete: string[];
+    Avatar: any;
+    AvatarGroup: any;
+    BackTop: string[];
+    Badge: any;
+    Banner: string[];
+    Breadcrumb: string[];
+    Button: string[];
+    Calendar: string[];
+    Card: string[];
+    Carousel: string[];
+    Cascader: string[];
+    Checkbox: string[];
+    CheckboxGroup: string[];
+    Collapse: string[];
+    Collapsible: any;
+    DatePicker: string[];
+    Descriptions: any;
+    Divider: any;
+    Dropdown: string[];
+    Empty: string[];
+    Form: string[];
+    Row: any;
+    Col: any;
+    Highlight: any;
+    IconButton: string[];
+    Image: string[];
+    Input: string[];
+    InputGroup: string[];
+    TextArea: string[];
+    InputNumber: string[];
+    Layout: any;
+    Modal: string[];
+    Navigation: string[];
+    Notification: string[];
+    OverflowList: any;
+    Pagination: string[];
+    Popconfirm: string[];
+    Popover: string[];
+    Portal: any;
+    Progress: any;
+    Radio: string[];
+    Rating: string[];
+    ScrollList: any;
+    Select: string[];
+    SideSheet: string[];
+    Skeleton: any;
+    Slider: string[];
+    Space: any;
+    Spin: any;
+    Steps: string[];
+    Switch: string[];
+    Table: string[];
+    Tabs: string[];
+    Tag: string[];
+    TagGroup: string[];
+    TagInput: string[];
+    Timeline: any;
+    Toast: string[];
+    Tooltip: string[];
+    Transfer: string[];
+    Tree: string[];
+    TreeSelect: string[];
+    Typography: string[];
+    Upload: string[];
+};
+export default dependentTree;

package/lib/componentDependentTree.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const dependentTree = {
+    "Anchor": ["Typography"],
+    "AutoComplete": ["Spin", "Popover", "Input", "Icon"],
+    "Avatar": [],
+    "AvatarGroup": [],
+    "BackTop": ["Icon"],
+    "Badge": [],
+    "Banner": ["IconButton", "Typography", "Icon"],
+    "Breadcrumb": ["Popover", "Typography", "Icon"],
+    "Button": ["Icon"],
+    "Calendar": ["Popover", "Button", "Icon"],
+    "Card": ["Space", "Skeleton", "Typography"],
+    "Carousel": ["Icon"],
+    "Cascader": ["Input", "Popover", "Tag", "TagInput", "Spin", "Checkbox", "Icon"],
+    "Checkbox": ["Icon"],
+    "CheckboxGroup": ["Icon"],
+    "Collapse": ["Collapsible", "Icon"],
+    "Collapsible": [],
+    "DatePicker": ["Button", "Input", "IconButton", "Icon", "Typography", "ScrollList", "Icon"],
+    "Descriptions": [],
+    "Divider": [],
+    "Dropdown": ["Tooltip", "Icon"],
+    "Empty": ["Typography"],
+    "Form": ["Row", "Col", "Icon"],
+    "Row": [],
+    "Col": [],
+    "Highlight": [],
+    "IconButton": ["Button", "Spin", "Icon"],
+    "Image": ["Skeleton", "Divider", "Tooltip", "Slider", "Spin", "Portal", "Icon"],
+    "Input": ["Icon"],
+    "InputGroup": ["Form"],
+    "TextArea": ["Icon"],
+    "InputNumber": ["Input", "Icon"],
+    "Layout": [],
+    "Modal": ["Button", "Portal", "Typography", "Icon"],
+    "Navigation": ["Button", "Tooltip", "Dropdown", "Collapsible", "Icon"],
+    "Notification": ["Button", "Icon"],
+    "OverflowList": [],
+    "Pagination": ["Select", "InputNumber", "Popover", "Icon"],
+    "Popconfirm": ["Popover", "Button", "Icon"],
+    "Popover": ["Tooltip"],
+    "Portal": [],
+    "Progress": [],
+    "Radio": ["Icon"],
+    "Rating": ["Icon", "Tooltip"],
+    "ScrollList": [],
+    "Select": ["Tag", "OverflowList", "Space", "Typography", "Spin", "Popover", "Icon"],
+    "SideSheet": ["[Portal", "Button", "Icon"],
+    "Skeleton": [],
+    "Slider": ["Tooltip"],
+    "Space": [],
+    "Spin": [],
+    "Steps": ["Row", "Col", "Icon"],
+    "Switch": ["Spin"],
+    "Table": ["Radio", "Checkbox", "Dropdown", "Spin", "Pagination", "Icon"],
+    "Tabs": ["OverflowList", "Dropdown", "Button", "Icon"],
+    "Tag": ["Icon", "Popover", "Avatar"],
+    "TagGroup": ["Icon", "Popover", "Avatar"],
+    "TagInput": ["Tag", "Input", "Popover", "Icon"],
+    "Timeline": [],
+    "Toast": ["Button", "Icon"],
+    "Tooltip": ["Portal"],
+    "Transfer": ["Input", "Checkbox", "Tree", "Button", "Spin", "Icon"],
+    "Tree": ["Input", "Checkbox", "Spin", "Collapsible", "Icon"],
+    "TreeSelect": ["Tag", "TagInput", "Checkbox", "Popover", "Input", "Icon"],
+    "Typography": ["Popover", "Tooltip", "Icon"],
+    "Upload": ["Button", "Progress", "Tooltip", "Spin", "Icon"]
+};
+exports.default = dependentTree;

package/lib/constants.d.ts

@@ -2,3 +2,5 @@ export declare const SOURCE_SUFFIX_LOADER: string;
 export declare const THEME_LOADER: string;
 export declare const OMIT_CSS_LOADER: string;
 export declare const PREFIX_LOADER: string;
+export declare const EXTRACT_CSS_LOADER: string;
+export declare const WEB_COMPONENT_LOADER: string;

package/lib/constants.js

@@ -3,9 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PREFIX_LOADER = exports.OMIT_CSS_LOADER = exports.THEME_LOADER = exports.SOURCE_SUFFIX_LOADER = void 0;
+exports.WEB_COMPONENT_LOADER = exports.EXTRACT_CSS_LOADER = exports.PREFIX_LOADER = exports.OMIT_CSS_LOADER = exports.THEME_LOADER = exports.SOURCE_SUFFIX_LOADER = void 0;
 const path_1 = __importDefault(require("path"));
 exports.SOURCE_SUFFIX_LOADER = path_1.default.resolve(__dirname, './loaders/semi-source-suffix-loader');
 exports.THEME_LOADER = path_1.default.resolve(__dirname, './loaders/semi-theme-loader');
 exports.OMIT_CSS_LOADER = path_1.default.resolve(__dirname, './loaders/semi-omit-css-loader');
 exports.PREFIX_LOADER = path_1.default.resolve(__dirname, './loaders/semi-prefix-loader');
+exports.EXTRACT_CSS_LOADER = path_1.default.resolve(__dirname, './loaders/semi-extract-css-content-loader');
+exports.WEB_COMPONENT_LOADER = path_1.default.resolve(__dirname, './loaders/semi-web-component-loader');

package/lib/index.d.ts

@@ -5,3 +5,5 @@ export { default as semiThemeLoader } from './loaders/semi-theme-loader';
 export { default as semiPrefixLoader } from './loaders/semi-prefix-loader';
 export { default as semiSourceSuffixLoader } from './loaders/semi-source-suffix-loader';
 export { default as semiOmitCssLoader } from './loaders/semi-omit-css-loader';
+export { default as semiExtractCssContentLoader } from './loaders/semi-extract-css-content-loader';
+export { default as semiWebComponentLoader } from './loaders/semi-web-component-loader';

package/lib/index.js

@@ -17,7 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.semiOmitCssLoader = exports.semiSourceSuffixLoader = exports.semiPrefixLoader = exports.semiThemeLoader = void 0;
+exports.semiWebComponentLoader = exports.semiExtractCssContentLoader = exports.semiOmitCssLoader = exports.semiSourceSuffixLoader = exports.semiPrefixLoader = exports.semiThemeLoader = void 0;
 __exportStar(require("./types"), exports);
 __exportStar(require("./plugin"), exports);
 __exportStar(require("./rule"), exports);
@@ -29,3 +29,7 @@ var semi_source_suffix_loader_1 = require("./loaders/semi-source-suffix-loader")
 Object.defineProperty(exports, "semiSourceSuffixLoader", { enumerable: true, get: function () { return __importDefault(semi_source_suffix_loader_1).default; } });
 var semi_omit_css_loader_1 = require("./loaders/semi-omit-css-loader");
 Object.defineProperty(exports, "semiOmitCssLoader", { enumerable: true, get: function () { return __importDefault(semi_omit_css_loader_1).default; } });
+var semi_extract_css_content_loader_1 = require("./loaders/semi-extract-css-content-loader");
+Object.defineProperty(exports, "semiExtractCssContentLoader", { enumerable: true, get: function () { return __importDefault(semi_extract_css_content_loader_1).default; } });
+var semi_web_component_loader_1 = require("./loaders/semi-web-component-loader");
+Object.defineProperty(exports, "semiWebComponentLoader", { enumerable: true, get: function () { return __importDefault(semi_web_component_loader_1).default; } });

package/lib/loaders/semi-extract-css-content-loader.d.ts

@@ -0,0 +1,12 @@
+import { LoaderContext } from 'webpack';
+/**
+ *
+ * @param {*} source
+ * @returns string
+ * @description
+ * 此 loader 用于从 css-loader 处理后的 js 代码中获取纯 css 样式字符串
+ * source 是经过 css-loader 处理后的 js 代码。要获取其中的  css 样式字符串，需经过如下操作：
+ * 1. 通过识别module.id, "做为开头，", ""]);作为结尾拿到中间的 css 代码
+ * 2. 将 文本中的 \n 替换为空字符串
+ */
+export default function semiExtractCssContentLoader(this: LoaderContext<void>, source: string): string;

package/lib/loaders/semi-extract-css-content-loader.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ *
+ * @param {*} source
+ * @returns string
+ * @description
+ * 此 loader 用于从 css-loader 处理后的 js 代码中获取纯 css 样式字符串
+ * source 是经过 css-loader 处理后的 js 代码。要获取其中的  css 样式字符串，需经过如下操作：
+ * 1. 通过识别module.id, "做为开头，", ""]);作为结尾拿到中间的 css 代码
+ * 2. 将 文本中的 \n 替换为空字符串
+ */
+function semiExtractCssContentLoader(source) {
+    const beginContent = 'module.id, "';
+    const endContent = '", ""]);';
+    let begInIndex = source.indexOf(beginContent);
+    let endIndex = source.length;
+    let result = source;
+    if (begInIndex !== -1) {
+        endIndex = source.lastIndexOf(endContent);
+        if (endIndex !== -1) {
+            result = source.slice(begInIndex + beginContent.length, endIndex);
+            result = result.replace(/\\n/g, "");
+        }
+    }
+    return result;
+}
+exports.default = semiExtractCssContentLoader;

package/lib/loaders/semi-theme-loader.d.ts

@@ -4,5 +4,6 @@ export interface SemiThemeLoaderOptions {
     variables: string;
     include: string;
     name?: string;
+    cssLayer?: boolean;
 }
 export default function SemiThemeLoader(this: LoaderContext<SemiThemeLoaderOptions>, source: string): string;

package/lib/loaders/semi-theme-loader.js

@@ -8,6 +8,7 @@ const componentName_1 = __importDefault(require("../componentName"));
 function SemiThemeLoader(source) {
     const query = this.getOptions();
     const theme = query.name || '@douyinfe/semi-theme-default';
+    const cssLayer = query.cssLayer ?? false;
     // always inject
     const scssVarStr = `@import "~${theme}/scss/index.scss";\n`;
     // inject once
@@ -50,6 +51,7 @@ function SemiThemeLoader(source) {
     // inject prefix
     const prefixCls = query.prefixCls || 'semi';
     const prefixClsStr = `$prefix: '${prefixCls}';\n`;
+    let finalCSS = "";
     if (shouldInject) {
         const customStr = (() => {
             let customStr = '';
@@ -73,10 +75,14 @@ function SemiThemeLoader(source) {
             }
             return `body:not(:not(body)){${customStr}};`;
         })();
-        return `${animationStr}${cssVarStr}${scssVarStr}${prefixClsStr}${fileStr}${customStr}`;
+        finalCSS = `${animationStr}${cssVarStr}${scssVarStr}${prefixClsStr}${fileStr}${customStr}`;
     }
     else {
-        return `${scssVarStr}${prefixClsStr}${fileStr}`;
+        finalCSS = `${scssVarStr}${prefixClsStr}${fileStr}`;
     }
+    if (cssLayer) {
+        finalCSS = `@layer semi{${finalCSS}}`;
+    }
+    return finalCSS;
 }
 exports.default = SemiThemeLoader;

package/lib/loaders/semi-web-component-loader.d.ts

@@ -0,0 +1,2 @@
+import { LoaderContext } from 'webpack';
+export default function semiWebComponentLoader(this: LoaderContext<void>, source: string): string;

package/lib/loaders/semi-web-component-loader.js

@@ -0,0 +1,122 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fs = require('fs');
+const componentDependentTree_1 = __importDefault(require("../componentDependentTree"));
+function getAllComponents(components) {
+    const originComponents = new Set(components);
+    const resultComponents = new Set();
+    // 对特殊组件做特殊处理，因为这些组件的样式文件名和组件名不一致，需要手动映射
+    const specialCaseBefore = {
+        'AvatarGroup': 'Avatar',
+        'CheckboxGroup': 'Checkbox',
+        'TagGroup': 'Tag'
+    };
+    /*
+    对特殊组件做特殊处理，因为这些组件的样式文件名和组件名不一致，需要手动映射
+    同时由于以下原因：
+    1. 组件所依赖组件和被映射的组件不同，因此应该在获取到依赖组件之后，再做映射
+      e.g InputGroup 依赖 Form 组件，其样式存储在 input.scss 中，
+      而 Input 不依赖 Form 组件，因此对于 InputGroup，需要拿到依赖组件，再做映射
+    2. 由于组件是其他组件的依赖组件，因此需要在获取到依赖组件之后，再做映射
+      e.g 比如 Row 是 Form 组件的依赖，因此需要在获取到依赖组件之后，再做映射
+  */
+    const specialCaseAfter = {
+        "InputGroup": "Input",
+        'Row': 'Grid',
+        'Col': 'Grid',
+    };
+    Object.keys(specialCaseBefore).map(keyComponent => {
+        if (originComponents.has(keyComponent)) {
+            originComponents.delete(keyComponent);
+            originComponents.add(specialCaseBefore[keyComponent]);
+        }
+    });
+    function getDependentComponents(components) {
+        components.forEach((component) => {
+            if (!resultComponents.has(component)) {
+                const dependents = componentDependentTree_1.default[component];
+                dependents?.forEach((element) => {
+                    getDependentComponents([element]);
+                });
+                resultComponents.add(component);
+            }
+        });
+    }
+    getDependentComponents(Array.from(originComponents));
+    Object.keys(specialCaseAfter).map(keyComponent => {
+        if (resultComponents.has(keyComponent)) {
+            resultComponents.delete(keyComponent);
+            resultComponents.add(specialCaseAfter[keyComponent]);
+        }
+    });
+    return Array.from(resultComponents);
+}
+function getScssImportPaths(components) {
+    const pathsObj = {
+        IconPath: '@douyinfe/semi-icons/lib/es/styles/icons.scss',
+        basePath: '@douyinfe/semi-ui/lib/es/_base/base.scss',
+        foundationPath: '@douyinfe/semi-foundation/lib/es/'
+    };
+    const specialCase = {
+        'Icon': pathsObj.IconPath,
+        'Base': pathsObj.basePath,
+        'Portal': `${pathsObj.foundationPath}_portal/portal.scss`,
+        "TextArea": `${pathsObj.foundationPath}input/textarea.scss`,
+        "IconButton": `${pathsObj.foundationPath}button/iconButton.scss`,
+    };
+    const cssPaths = ["Base", ...components].map(componentName => {
+        const lowFirstLetter = componentName.slice(0, 1).toLowerCase() + componentName.slice(1);
+        let pathName = '';
+        if (specialCase[componentName]) {
+            pathName = specialCase[componentName];
+        }
+        else {
+            pathName = `${pathsObj.foundationPath}${lowFirstLetter}/${lowFirstLetter}.scss`;
+        }
+        return pathName;
+    });
+    const importFuncName = `
+async function importSemiComponentStyle(componentsStr, root, cb){
+  const modules = await Promise.all([
+    ${cssPaths.map(path => `import("${path}")`).join(',')}
+  ]);
+  const styleStr = modules.map(module => {
+    const cssContent = module.default;
+    return cssContent;
+  });
+  styleStr.reverse().forEach(css => {
+    const style = document.createElement('style');
+    style.innerHTML = css;
+    root.prepend(style);
+  });
+  if(typeof cb === 'function') {
+    cb();
+  }
+}
+  `;
+    return importFuncName;
+}
+function semiWebComponentLoader(source) {
+    /*SEMI_INSERT_STYLE_BEGIN[需要插入样式的组件]SEMI_INSERT_STYLE_END*/
+    const beginContent = 'SEMI_INSERT_STYLE_BEGIN';
+    const beginIndex = source.indexOf(beginContent);
+    if (beginIndex !== -1) {
+        const endIndex = source.indexOf('SEMI_INSERT_STYLE_END');
+        if (endIndex === -1) {
+            throw new Error('SEMI_INSERT_STYLE_END not found');
+        }
+        const componentsStr = source.slice(beginIndex + beginContent.length, endIndex);
+        const componentsArr = JSON.parse(componentsStr);
+        const allComponents = getAllComponents(componentsArr);
+        // console.log('allComponents', allComponents);
+        const importFuncName = getScssImportPaths(allComponents);
+        const result = source + importFuncName;
+        // console.log('result', result);
+        return result;
+    }
+    return source;
+}
+exports.default = semiWebComponentLoader;

package/lib/rule.d.ts

@@ -14,6 +14,7 @@ export declare function createThemeLoaderRule(opts?: SemiWebpackPluginOptions):
             prefixCls: string;
             variables: string;
             include: string;
+            cssLayer: boolean;
             name?: string;
         };
     }[];
@@ -35,4 +36,12 @@ export declare function createPrefixLoaderRule(opts?: SemiWebpackPluginOptions):
         };
     }[];
 };
+export declare function createWebComponentLoaderRule(opts?: SemiWebpackPluginOptions): {
+    test: RegExp;
+    type: string;
+    exclude: RegExp;
+    use: {
+        loader: string;
+    }[];
+};
 export declare function applySemiRules(opts?: SemiWebpackPluginOptions): RuleSetRule[];

package/lib/rule.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.applySemiRules = exports.createPrefixLoaderRule = exports.createOmitCssLoaderRule = exports.createThemeLoaderRule = exports.createSourceSuffixLoaderRule = void 0;
+exports.applySemiRules = exports.createWebComponentLoaderRule = exports.createPrefixLoaderRule = exports.createOmitCssLoaderRule = exports.createThemeLoaderRule = exports.createSourceSuffixLoaderRule = void 0;
 const constants_1 = require("./constants");
 const utils_1 = require("./utils");
 function createSourceSuffixLoaderRule(_opts) {
@@ -23,11 +23,28 @@ function createThemeLoaderRule(opts) {
         prefixCls: opts.prefixCls,
         variables: (0, utils_1.stringifyVariableRecord)(opts.variables),
         include: opts.include,
+        cssLayer: opts.cssLayer
     };
-    return {
+    const loaderInfo = {
         test: /@douyinfe\/semi-(ui|icons|foundation)\/lib\/.+\.scss$/,
         use: [{ loader: constants_1.THEME_LOADER, options }],
     };
+    if (opts.webComponentPath) {
+        const commonLoader = [
+            { loader: "raw-loader" },
+            { loader: constants_1.EXTRACT_CSS_LOADER },
+            {
+                loader: 'css-loader',
+                options: { sourceMap: false }
+            },
+            { loader: 'sass-loader' }
+        ];
+        loaderInfo.use = [
+            ...commonLoader,
+            ...loaderInfo.use
+        ];
+    }
+    return loaderInfo;
 }
 exports.createThemeLoaderRule = createThemeLoaderRule;
 function createOmitCssLoaderRule(_opts) {
@@ -47,17 +64,31 @@ function createPrefixLoaderRule(opts) {
     };
 }
 exports.createPrefixLoaderRule = createPrefixLoaderRule;
+function createWebComponentLoaderRule(opts) {
+    return {
+        test: opts.webComponentPath instanceof RegExp ? opts.webComponentPath : /src\/([^/]+\/)*[^/]+\.(ts|tsx|js|jsx)$/,
+        type: 'javascript/auto',
+        exclude: /node_modules/,
+        use: [{ loader: constants_1.WEB_COMPONENT_LOADER }],
+    };
+}
+exports.createWebComponentLoaderRule = createWebComponentLoaderRule;
 function applySemiRules(opts) {
     const rules = [];
     if (opts.omitCss) {
         rules.push(createOmitCssLoaderRule(opts));
-        return rules;
+        if (!opts.webComponentPath) {
+            return rules;
+        }
     }
     rules.push(createSourceSuffixLoaderRule(opts));
     rules.push(createThemeLoaderRule(opts));
     if (opts.prefixCls) {
         rules.push(createPrefixLoaderRule(opts));
     }
+    if (opts.webComponentPath) {
+        rules.push(createWebComponentLoaderRule(opts));
+    }
     return rules;
 }
 exports.applySemiRules = applySemiRules;

package/lib/types.d.ts

@@ -1,9 +1,11 @@
 export interface SemiWebpackPluginOptions {
     theme?: SemiThemeOptions | SemiThemeOptions['name'];
+    cssLayer?: boolean;
     prefixCls?: string;
     variables?: Record<string, string | number>;
     include?: string;
     omitCss?: boolean;
+    webComponentPath?: boolean | RegExp;
 }
 export interface SemiThemeOptions {
     name?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-rspack-plugin",
-    "version": "2.59.0-alpha.0",
+    "version": "2.59.0",
     "description": "",
     "homepage": "",
     "license": "MIT",
@@ -19,7 +19,10 @@
     },
     "dependencies": {
         "@babel/core": "^7.15.4",
-        "enhanced-resolve": "^5.8.3"
+        "css-loader": "4.3.0",
+        "enhanced-resolve": "^5.8.3",
+        "raw-loader": "^4.0.2",
+        "sass-loader": "^10.1.1"
     },
     "peerDependencies": {
         "webpack": "^5"
@@ -30,5 +33,5 @@
         "typescript": "^4",
         "webpack": "^5.77.0"
     },
-    "gitHead": "8937586f47d2a64dc394d5c0025d741f5b29bc9b"
+    "gitHead": "b9a08d8581277fdc6ae9c33cdfc78b39938e5de1"
 }