@shuvi/toolpack 1.0.63 → 2.0.0-dev.6

package/lib/webpack/config/parts/style.rspack.js

@@ -0,0 +1,294 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withStyle = withStyle;
+const constants_1 = require("@shuvi/shared/constants");
+const Rule_1 = __importDefault(require("rspack-chain/src/Rule"));
+const core_1 = require("@rspack/core");
+const loaderUtils = __importStar(require("loader-utils"));
+const path = __importStar(require("path"));
+const helpers_rspack_1 = require("./helpers.rspack");
+const regexLikeIndexModule = /(?<!pages[\\/])index\.(scss|sass|css)$/;
+function getCSSModuleLocalIdent(context, _, exportName, options) {
+    const relativePath = path
+        .relative(context.rootContext, context.resourcePath)
+        .replace(/\\+/g, '/');
+    // Generate a more meaningful name (parent folder) when the user names the
+    // file `index.css`.
+    const fileNameOrFolder = regexLikeIndexModule.test(relativePath)
+        ? '[folder]'
+        : '[name]';
+    // Generate a hash to make the class name unique.
+    const hash = loaderUtils.getHashDigest(Buffer.from(`filePath:${relativePath}#className:${exportName}`), 'md5', 'base64', 5);
+    // Have webpack interpolate the `[folder]` or `[name]` to its real value.
+    return (loaderUtils
+        .interpolateName(context, fileNameOrFolder + '_' + exportName + '__' + hash, options)
+        // Replace invalid symbols with underscores instead of escaping
+        // https://mathiasbynens.be/notes/css-escapes#identifiers-strings
+        .replace(/[^a-zA-Z0-9-_]/g, '_')
+        // "they cannot start with a digit, two hyphens, or a hyphen followed by a digit [sic]"
+        // https://www.w3.org/TR/CSS21/syndata.html#characters
+        .replace(/^(\d|--|-\d)/, '__$1'));
+}
+// style files regexes
+const cssRegex = /\.css$/;
+const cssModuleQueryRegex = /cssmodules/;
+const sassRegex = /\.(scss|sass)$/;
+function ssrCssRule({ test, resourceQuery, scss, lightningCss }) {
+    const rule = new Rule_1.default();
+    rule.test(test);
+    if (resourceQuery) {
+        rule.resourceQuery(resourceQuery);
+    }
+    if (lightningCss) {
+        rule
+            .use('lightningcss-loader')
+            .loader('@shuvi/lightningcss-loader')
+            .options({
+            sourceMap: false,
+            importLoaders: scss ? 1 : 0,
+            esModule: true,
+            modules: {
+                getLocalIdent: () => '[name]_[local]__[hash]',
+                exportOnlyLocals: true
+            }
+        });
+    }
+    else {
+        rule
+            .use('css-loader')
+            .loader(require.resolve('css-loader'))
+            .options({
+            sourceMap: false,
+            importLoaders: scss ? 1 : 0,
+            esModule: true,
+            modules: {
+                getLocalIdent: getCSSModuleLocalIdent,
+                exportOnlyLocals: true
+            }
+        });
+    }
+    if (scss) {
+        rule
+            .use('sass-loader')
+            .loader(require.resolve('sass-loader'))
+            .options({
+            sourceMap: false,
+            sassOptions: {
+                outputStyle: 'expanded'
+            }
+        });
+    }
+    return rule;
+}
+function cssRule({ publicPath, test, resourceQuery, cssModule, lightningCss, extractCss, sourceMap, scss }) {
+    const rule = new Rule_1.default();
+    rule.test(test);
+    if (resourceQuery) {
+        rule.resourceQuery(resourceQuery);
+    }
+    // A global CSS import always has side effects. Webpack will tree
+    // shake the CSS without this option if the issuer claims to have
+    // no side-effects.
+    // See https://github.com/webpack/webpack/issues/6571
+    rule.set('sideEffects', true);
+    if (extractCss) {
+        rule
+            .use('extract-loader')
+            .loader(core_1.rspack.CssExtractRspackPlugin.loader)
+            .options(Object.assign({}, (publicPath && (0, helpers_rspack_1.shouldUseRelativeAssetPaths)(publicPath)
+            ? {
+                // path relative to outdir from the generated css file
+                publicPath: '../../'
+            }
+            : {})));
+    }
+    else {
+        /**
+         * @unsupported Rspack does not support style-loader (inserts styles into DOM) in the same way as Webpack.
+         * TODO: Replace with Rspack's recommended approach for injecting styles in development.
+         */
+        rule
+            .use('style-loader')
+            .loader(require.resolve('style-loader'))
+            .options({
+            insert: new Function('element', `
+          // These elements should always exist. If they do not,
+          // this code should fail.
+          var anchorElement = document.querySelector("#${constants_1.DEV_STYLE_ANCHOR_ID}");
+          var parentNode = anchorElement.parentNode; // Normally <head>
+
+          // Each style tag should be placed right before our
+          // anchor. By inserting before and not after, we do not
+          // need to track the last inserted element.
+          parentNode.insertBefore(element, anchorElement);
+        `),
+            esModule: true
+        });
+    }
+    if (lightningCss) {
+        rule
+            .use('lightningcss-loader')
+            .loader('@shuvi/lightningcss-loader')
+            .options(Object.assign({ sourceMap, importLoaders: scss ? 2 : 1, esModule: true }, (cssModule && {
+            modules: {
+                getLocalIdent: () => '[name]_[local]__[hash]',
+                exportOnlyLocals: false
+            }
+        })));
+    }
+    else {
+        rule
+            .use('css-loader')
+            .loader(require.resolve('css-loader'))
+            .options(Object.assign({ sourceMap, importLoaders: scss ? 2 : 1, esModule: true }, (cssModule && {
+            modules: {
+                getLocalIdent: getCSSModuleLocalIdent,
+                exportOnlyLocals: false
+            }
+        })));
+        rule
+            .use('postcss-loader')
+            .loader(require.resolve('postcss-loader'))
+            .options({
+            sourceMap,
+            postcssOptions: {
+                plugins: [
+                    // Make Flexbox behave like the spec cross-browser.
+                    require('postcss-flexbugs-fixes'),
+                    // Run Autoprefixer and compile new CSS features.
+                    require('postcss-preset-env')({
+                        autoprefixer: {
+                            flexbox: 'no-2009'
+                        },
+                        stage: 3
+                    })
+                ]
+            }
+        });
+    }
+    if (scss) {
+        rule
+            .use('sass-loader')
+            .loader(require.resolve('sass-loader'))
+            .options({
+            sourceMap,
+            sassOptions: {
+                outputStyle: 'expanded'
+            }
+        });
+    }
+    return rule;
+}
+function withStyle(chain, { extractCss, sourceMap, ssr, publicPath, lightningCss, filename, chunkFilename }) {
+    const oneOfs = chain.module.rule('main').oneOfs;
+    if (ssr) {
+        oneOfs.set('css-module', 
+        // @ts-ignore
+        ssrCssRule({
+            test: cssRegex,
+            resourceQuery: cssModuleQueryRegex,
+            scss: false,
+            lightningCss
+        }).after('js'));
+        oneOfs.set('scss-module', 
+        // @ts-ignore
+        ssrCssRule({
+            test: sassRegex,
+            resourceQuery: cssModuleQueryRegex,
+            scss: true,
+            lightningCss
+        }).after('css-module'));
+        // ignore noraml css module
+        const ignoreRule = new Rule_1.default();
+        ignoreRule
+            .test([cssRegex, sassRegex])
+            .use('ignore-loader')
+            .loader(require.resolve('ignore-loader'))
+            .end()
+            .after('scss-module');
+        // @ts-ignore
+        oneOfs.set('ignore', ignoreRule);
+        return chain;
+    }
+    if (extractCss) {
+        chain.plugin('mini-css-extract-plugin').use(core_1.rspack.CssExtractRspackPlugin, [
+            {
+                filename,
+                chunkFilename
+            }
+        ]);
+    }
+    oneOfs.set('css-module', 
+    // @ts-ignore
+    cssRule({
+        test: cssRegex,
+        resourceQuery: cssModuleQueryRegex,
+        cssModule: true,
+        lightningCss,
+        scss: false,
+        extractCss,
+        sourceMap,
+        publicPath
+    }).after('js'));
+    oneOfs.set('css', 
+    // @ts-ignore
+    cssRule({
+        test: cssRegex,
+        cssModule: false,
+        lightningCss,
+        scss: false,
+        extractCss,
+        sourceMap,
+        publicPath
+    }).after('css-module'));
+    oneOfs.set('scss-module', 
+    // @ts-ignore
+    cssRule({
+        test: sassRegex,
+        resourceQuery: cssModuleQueryRegex,
+        cssModule: true,
+        lightningCss,
+        scss: true,
+        extractCss,
+        sourceMap,
+        publicPath
+    }).after('css'));
+    oneOfs.set('scss', 
+    // @ts-ignore
+    cssRule({
+        test: sassRegex,
+        cssModule: false,
+        lightningCss,
+        scss: true,
+        extractCss,
+        sourceMap,
+        publicPath
+    }).after('scss-module'));
+    return chain;
+}

package/lib/webpack/config/parts/style.webpack.d.ts

@@ -0,0 +1,12 @@
+import { WebpackChain as Config } from '../base.webpack';
+interface StyleOptions {
+    filename: string;
+    chunkFilename: string;
+    publicPath?: string;
+    extractCss?: boolean;
+    sourceMap?: boolean;
+    ssr?: boolean;
+    lightningCss?: boolean;
+}
+export declare function withStyle(chain: Config, { extractCss, sourceMap, ssr, publicPath, lightningCss, filename, chunkFilename }: StyleOptions): Config;
+export {};

package/lib/webpack/config/parts/{style.js → style.webpack.js}

@@ -32,7 +32,7 @@ const Rule_1 = __importDefault(require("webpack-chain/src/Rule"));
 const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
 const loaderUtils = __importStar(require("loader-utils"));
 const path = __importStar(require("path"));
-const helpers_1 = require("./helpers");
+const helpers_webpack_1 = require("./helpers.webpack");
 const regexLikeIndexModule = /(?<!pages[\\/])index\.(scss|sass|css)$/;
 function getCSSModuleLocalIdent(context, _, exportName, options) {
     const relativePath = path
@@ -121,7 +121,7 @@ function cssRule({ publicPath, test, resourceQuery, cssModule, lightningCss, ext
         rule
             .use('extract-loader')
             .loader(mini_css_extract_plugin_1.default.loader)
-            .options(Object.assign({}, (publicPath && (0, helpers_1.shouldUseRelativeAssetPaths)(publicPath)
+            .options(Object.assign({}, (publicPath && (0, helpers_webpack_1.shouldUseRelativeAssetPaths)(publicPath)
             ? {
                 // path relative to outdir from the generated css file
                 publicPath: '../../'

package/lib/webpack/dynamic-dll/dep/getModuleExports.d.ts

@@ -2,6 +2,6 @@ export declare function getModuleExports({ content, libraryPath }: {
     libraryPath: string;
     content: string;
 }): Promise<{
-    exports: any;
+    exports: string[] | readonly import("es-module-lexer", { with: { "resolution-mode": "import" } }).ExportSpecifier[];
     isCJS: boolean;
 }>;

package/lib/webpack/index.d.ts

@@ -1,5 +1,7 @@
-export * from './webpack';
+export * from './rspack';
 /**
- * resolve webpack sub module from the same webpack module
+ * resolve rspack sub module from the same rspack module
+ * @unsupported Rspack does not support submodule resolution like Webpack.
+ * TODO: Remove or replace after Rspack support is available.
  */
-export declare function resolveWebpackModule(path: string): any;
+export declare function resolveRspackModule(path: string): any;

package/lib/webpack/index.js

@@ -14,16 +14,21 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.resolveWebpackModule = resolveWebpackModule;
+exports.resolveRspackModule = resolveRspackModule;
 const path_1 = require("path");
-const webpackResolveContext = (0, path_1.join)((0, path_1.dirname)(require.resolve('webpack/package.json')), '../');
-__exportStar(require("./webpack"), exports);
+const rspackResolveContext = (0, path_1.join)((0, path_1.dirname)(require.resolve('@rspack/core/package.json')), '../');
+__exportStar(require("./rspack"), exports);
 /**
- * resolve webpack sub module from the same webpack module
+ * resolve rspack sub module from the same rspack module
+ * @unsupported Rspack does not support submodule resolution like Webpack.
+ * TODO: Remove or replace after Rspack support is available.
  */
-function resolveWebpackModule(path) {
-    if (!path.startsWith('webpack/')) {
-        console.error('path need startWith "webpack/" to resolve webpack module');
+function resolveRspackModule(path) {
+    if (!path.startsWith('@rspack/core/')) {
+        console.error('path need startWith "@rspack/core/" to resolve rspack module');
     }
-    return require(`${webpackResolveContext}/${path}`);
+    const p = require(`${rspackResolveContext}/${path}`);
+    // debug
+    console.debug(`[rspack][resolveRspackModule] ${path} -> ${p}`);
+    return p;
 }

package/lib/webpack/index.webpack.d.ts

@@ -0,0 +1,5 @@
+export * from './webpack';
+/**
+ * resolve webpack sub module from the same webpack module
+ */
+export declare function resolveWebpackModule(path: string): any;

package/lib/webpack/index.webpack.js

@@ -0,0 +1,29 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveWebpackModule = resolveWebpackModule;
+const path_1 = require("path");
+const webpackResolveContext = (0, path_1.join)((0, path_1.dirname)(require.resolve('webpack/package.json')), '../');
+__exportStar(require("./webpack"), exports);
+/**
+ * resolve webpack sub module from the same webpack module
+ */
+function resolveWebpackModule(path) {
+    if (!path.startsWith('webpack/')) {
+        console.error('path need startWith "webpack/" to resolve webpack module');
+    }
+    return require(`${webpackResolveContext}/${path}`);
+}

package/lib/webpack/plugins/chunk-names-plugin.d.ts

@@ -1,3 +1,6 @@
+/**
+ * Unused
+ */
 import { Compiler } from 'webpack';
 export default class ChunkNamesPlugin {
     apply(compiler: Compiler): void;

package/lib/webpack/plugins/chunk-names-plugin.js

@@ -1,5 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Unused
+ */
 const webpack_1 = require("webpack");
 // This plugin mirrors webpack 3 `filename` and `chunkfilename` behavior
 // This fixes https://github.com/webpack/webpack/issues/6598

package/lib/webpack/plugins/copy-file-plugin.rspack.d.ts

@@ -0,0 +1,14 @@
+import * as Rspack from '../../webpack';
+export declare class CopyFilePlugin {
+    private filePath;
+    private name;
+    private cacheKey;
+    private info?;
+    constructor({ filePath, cacheKey, name, info }: {
+        filePath: string;
+        cacheKey: string;
+        name: string;
+        info?: object;
+    });
+    apply(compiler: Rspack.Compiler): void;
+}

package/lib/webpack/plugins/copy-file-plugin.rspack.js

@@ -0,0 +1,88 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CopyFilePlugin = void 0;
+const fs_1 = require("fs");
+const Rspack = __importStar(require("../../webpack"));
+const loaderUtils = __importStar(require("loader-utils"));
+const PLUGIN_NAME = 'CopyFilePlugin';
+class CopyFilePlugin {
+    constructor({ filePath, cacheKey, name, info }) {
+        this.filePath = filePath;
+        this.cacheKey = cacheKey;
+        this.name = name;
+        this.info = info;
+    }
+    apply(compiler) {
+        // compiler.options.output.filename
+        compiler.hooks.thisCompilation.tap(PLUGIN_NAME, (compilation) => {
+            const cache = compilation.getCache('CopyFilePlugin');
+            const hook = compilation.hooks.processAssets;
+            hook.tapPromise({
+                name: PLUGIN_NAME,
+                stage: Rspack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS
+            }, () => __awaiter(this, void 0, void 0, function* () {
+                var _a;
+                if (cache) {
+                    const cachedResult = yield cache.getPromise(this.filePath, this.cacheKey);
+                    if (cachedResult) {
+                        const { file, source } = cachedResult;
+                        compilation.emitAsset(file, source, Object.assign({}, this.info));
+                        return;
+                    }
+                }
+                const content = yield fs_1.promises.readFile(this.filePath, 'utf8');
+                const hash = loaderUtils.interpolateName({
+                    // we only care about hash, so use a fake path is ok
+                    resourcePath: '/fake/path'
+                }, '[hash:8]', {
+                    content
+                });
+                const file = compilation.getAssetPath(((_a = compiler.options.output.filename) === null || _a === void 0 ? void 0 : _a.toString()) || this.name, {
+                    contentHash: hash,
+                    chunk: { id: this.name, name: this.name }
+                });
+                const source = new Rspack.sources.RawSource(content);
+                if (cache) {
+                    yield cache.storePromise(this.filePath, this.cacheKey, {
+                        file,
+                        source
+                    });
+                }
+                compilation.emitAsset(file, source, Object.assign({}, this.info));
+            }));
+        });
+    }
+}
+exports.CopyFilePlugin = CopyFilePlugin;

package/lib/webpack/plugins/module-replace-plugin/dynamic-loader-options-hack.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    setData(key: string, val: any): void;
+    /**
+     * return the value and delete the key
+     */
+    pop(key: string): any;
+};
+export default _default;

package/lib/webpack/plugins/module-replace-plugin/dynamic-loader-options-hack.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const dataMap = new Map();
+exports.default = {
+    setData(key, val) {
+        dataMap.set(key, val);
+    },
+    /**
+     * return the value and delete the key
+     */
+    pop(key) {
+        const val = dataMap.get(key);
+        dataMap.delete(key);
+        return val;
+    }
+};

package/lib/webpack/plugins/module-replace-plugin/plugin.rspack.d.ts

@@ -0,0 +1,38 @@
+import * as Rspack from '../../webpack';
+/**
+ * Rspack plugin interface
+ */
+interface RspackPlugin {
+    apply(compiler: Rspack.Compiler): void;
+}
+export type ConfigItem = {
+    resourceQuery: Function | RegExp;
+    module: string;
+};
+export interface ModuleReplacePluginOptions {
+    modules: ConfigItem[];
+}
+export interface Loader {
+    loader: string;
+    options: Record<string, any>;
+}
+export interface ModuleInfo {
+    action: typeof ModuleAction[keyof typeof ModuleAction];
+    compiler: Rspack.Compiler;
+    replacedModule: string;
+    loaders: Loader[];
+}
+declare const ModuleAction: {
+    readonly REPLACE: "replace";
+    readonly RESTORE: "restore";
+};
+export default class ModuleReplacePlugin implements RspackPlugin {
+    private _options;
+    static restoreModule(id: string): false | Promise<any>;
+    static replaceModule(id: string): false | void;
+    constructor(options: Partial<ModuleReplacePluginOptions>);
+    apply(compiler: Rspack.Compiler): void;
+    private _handleBuildModule;
+    private _collectModules;
+}
+export {};