@shuvi/toolpack 1.0.0-rc.8 → 1.0.0

package/lib/utils/{bundle-require.js → bundleRequire.js}

@@ -130,7 +130,7 @@ function bundleRequire(filepath, options = {}) {
             }
             return mod;
         });
-        const result = yield (0, esbuild_1.build)(Object.assign(Object.assign({}, options.esbuildOptions), { entryPoints: [filepath], absWorkingDir: cwd, outfile, format: 'cjs', platform: 'node', sourcemap: 'inline', bundle: true, metafile: true, write: true, watch: false, plugins: [
+        const result = yield (0, esbuild_1.build)(Object.assign(Object.assign({}, options.esbuildOptions), { entryPoints: [filepath], absWorkingDir: cwd, outfile, format: 'cjs', target: 'es6', platform: 'node', sourcemap: 'inline', bundle: true, metafile: true, write: true, watch: false, plugins: [
                 ...(((_b = options.esbuildOptions) === null || _b === void 0 ? void 0 : _b.plugins) || []),
                 (0, exports.externalPlugin)({
                     external: options.external

package/lib/webpack/config/base.d.ts

@@ -1,13 +1,13 @@
 import WebpackChain from 'webpack-chain';
+import { CompilerOptions } from '../loaders/shuvi-swc-loader';
 declare type TsCompilerOptions = import('typescript').CompilerOptions;
 export interface BaseOptions {
     dev: boolean;
-    parcelCss: boolean;
     name: string;
     projectRoot: string;
     outputDir: string;
     cacheDir: string;
-    include: string[];
+    include: (string | RegExp)[];
     typescript?: {
         useTypeScript: boolean;
         typeScriptPath?: string;
@@ -15,14 +15,18 @@ export interface BaseOptions {
         tsCompilerOptions?: TsCompilerOptions;
         resolvedBaseUrl?: string;
     };
-    buildManifestFilename: string;
     target?: string;
     publicPath?: string;
     env?: {
         [x: string]: string | undefined;
     };
-    experimental?: Record<string, any>;
-    compiler?: Record<string, any>;
+    lightningCss?: boolean;
+    compiler?: CompilerOptions;
 }
 export { WebpackChain };
-export declare function baseWebpackChain({ dev, outputDir, parcelCss, experimental, compiler, projectRoot, include, typescript, name, buildManifestFilename, publicPath, env, cacheDir }: BaseOptions): WebpackChain;
+export declare function getDefineEnv(env: {
+    [x: string]: string | undefined;
+}): {
+    [x: string]: string;
+};
+export declare function baseWebpackChain({ dev, outputDir, lightningCss, compiler, projectRoot, include, typescript, name, publicPath, env, cacheDir }: BaseOptions): WebpackChain;

package/lib/webpack/config/base.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.baseWebpackChain = exports.WebpackChain = void 0;
+exports.baseWebpackChain = exports.getDefineEnv = exports.WebpackChain = void 0;
 const webpack_chain_1 = __importDefault(require("webpack-chain"));
 exports.WebpackChain = webpack_chain_1.default;
 const terser_webpack_plugin_1 = __importDefault(require("terser-webpack-plugin"));
@@ -34,13 +34,11 @@ const css_minimizer_webpack_plugin_1 = __importDefault(require("css-minimizer-we
 const webpack_1 = __importDefault(require("webpack"));
 const path = __importStar(require("path"));
 const constants_1 = require("@shuvi/shared/lib/constants");
-const build_manifest_plugin_1 = __importDefault(require("../plugins/build-manifest-plugin"));
-const chunk_names_plugin_1 = __importDefault(require("../plugins/chunk-names-plugin"));
 const fix_watching_plugin_1 = __importDefault(require("../plugins/fix-watching-plugin"));
-const constants_2 = require("../../constants");
 const crypto = __importStar(require("crypto"));
 const jsconfig_paths_plugin_1 = __importDefault(require("../plugins/jsconfig-paths-plugin"));
 const support_ts_extension_resolver_plugin_1 = __importDefault(require("../plugins/support-ts-extension-resolver-plugin"));
+const helpers_1 = require("./parts/helpers");
 const resolveLocalLoader = (name) => path.join(__dirname, `../loaders/${name}`);
 const terserOptions = {
     parse: {
@@ -61,23 +59,68 @@ const terserOptions = {
         ascii_only: true
     }
 };
-function baseWebpackChain({ dev, outputDir, parcelCss, experimental, compiler, projectRoot, include, typescript, name, buildManifestFilename, publicPath = '/', env = {}, cacheDir }) {
+function getDefineEnv(env) {
+    return Object.assign(Object.assign({}, Object.keys(process.env).reduce((prev, key) => {
+        if (key.startsWith(constants_1.PUBLIC_ENV_PREFIX)) {
+            prev[`process.env.${key}`] = JSON.stringify(process.env[key]);
+        }
+        return prev;
+    }, {})), Object.keys(env).reduce((acc, key) => {
+        if (/^(?:NODE_.+)|^(?:__.+)$/i.test(key)) {
+            throw new Error(`The key "${key}" under "env" is not allowed.`);
+        }
+        return Object.assign(Object.assign({}, acc), { [`process.env.${key}`]: JSON.stringify(env[key]) });
+    }, {}));
+}
+exports.getDefineEnv = getDefineEnv;
+function baseWebpackChain({ dev, outputDir, lightningCss, compiler, projectRoot, include, typescript, name, publicPath = '/', env = {}, cacheDir }) {
     var _a;
     const config = new webpack_chain_1.default();
     config.mode(dev ? 'development' : 'production');
     config.bail(!dev);
     config.performance.hints(false);
     config.context(projectRoot);
+    config.output.path(outputDir);
+    config.output.merge({
+        publicPath,
+        filename: `${dev ? '[name]' : '[name].[contenthash:8]'}.js`,
+        // This saves chunks with the name given via `import()`
+        chunkFilename: `static/chunks/${dev ? '[name]' : '[name].[contenthash:8]'}.js`,
+        hotUpdateChunkFilename: 'static/webpack/[id].[fullhash].hot-update.js',
+        hotUpdateMainFilename: 'static/webpack/[runtime].[fullhash].hot-update.json',
+        strictModuleExceptionHandling: true,
+        // crossOriginLoading: crossOrigin,
+        webassemblyModuleFilename: 'static/wasm/[modulehash:8].wasm',
+        hashFunction: 'xxhash64',
+        hashDigestLength: 16
+    });
     config.optimization.merge({
         emitOnErrors: !dev,
         checkWasmTypes: false,
         nodeEnv: false,
-        splitChunks: false,
         runtimeChunk: undefined,
         minimize: !dev,
         realContentHash: false
     });
-    if (!dev) {
+    if (dev) {
+        config.optimization.usedExports(false);
+        config.optimization.splitChunks({
+            chunks: helpers_1.splitChunksFilter,
+            cacheGroups: {
+                defaultVendors: false,
+                default: false,
+                vendors: {
+                    name: 'vendors',
+                    filename: (0, helpers_1.commonChunkFilename)({ dev: true }),
+                    test: /[\\/]node_modules[\\/]/,
+                    // Don't let webpack eliminate this chunk (prevents this chunk from
+                    // becoming a part of the commons chunk)
+                    enforce: true
+                }
+            }
+        });
+    }
+    else {
         // @ts-ignore
         config.optimization.minimizer('terser').use(terser_webpack_plugin_1.default, [
             {
@@ -89,26 +132,12 @@ function baseWebpackChain({ dev, outputDir, parcelCss, experimental, compiler, p
         config.optimization.minimizer('cssMinimizer').use(css_minimizer_webpack_plugin_1.default, [
             {
                 // @ts-ignore
-                minify: parcelCss
-                    ? css_minimizer_webpack_plugin_1.default.parcelCssMinify
+                minify: lightningCss
+                    ? css_minimizer_webpack_plugin_1.default.lightningCssMinify
                     : css_minimizer_webpack_plugin_1.default.cssnanoMinify
             }
         ]);
     }
-    config.output.path(outputDir);
-    config.output.merge({
-        publicPath,
-        filename: `${dev ? '[name]' : '[name].[contenthash:8]'}.js`,
-        // This saves chunks with the name given via `import()`
-        chunkFilename: `static/chunks/${dev ? '[name]' : '[name].[contenthash:8]'}.js`,
-        hotUpdateChunkFilename: 'static/webpack/[id].[fullhash].hot-update.js',
-        hotUpdateMainFilename: 'static/webpack/[fullhash].hot-update.json',
-        strictModuleExceptionHandling: true,
-        // crossOriginLoading: crossOrigin,
-        webassemblyModuleFilename: 'static/wasm/[modulehash:8].wasm',
-        hashFunction: 'xxhash64',
-        hashDigestLength: 16
-    });
     // Support for NODE_PATH
     const nodePathList = (process.env.NODE_PATH || '')
         .split(process.platform === 'win32' ? ';' : ':')
@@ -117,14 +146,14 @@ function baseWebpackChain({ dev, outputDir, parcelCss, experimental, compiler, p
         modules: [
             'node_modules',
             ...nodePathList // Support for NODE_PATH environment variable
-        ],
-        alias: {}
+        ]
     });
+    config.resolve.alias.set('@swc/helpers', path.dirname(require.resolve(`@swc/helpers/package.json`)));
     config.resolveLoader.merge({
         alias: [
+            'lightningcss-loader',
             'shuvi-swc-loader',
-            'route-component-loader',
-            'parcel-css-loader'
+            'route-component-loader'
         ].reduce((alias, loader) => {
             alias[`@shuvi/${loader}`] = resolveLocalLoader(loader);
             return alias;
@@ -141,18 +170,16 @@ function baseWebpackChain({ dev, outputDir, parcelCss, experimental, compiler, p
     mainRule
         .oneOf('js')
         .test(/\.(tsx|ts|js|cjs|mjs|jsx)$/)
-        .include.merge([...include, ...constants_2.AppSourceRegexs])
+        .include.merge([...include])
         .end()
         .use('shuvi-swc-loader')
         .loader('@shuvi/shuvi-swc-loader')
         .options({
         isServer: false,
-        experimental,
         compiler,
         supportedBrowsers: false,
         swcCacheDir: path.join(cacheDir, 'swc')
     });
-    config.resolve.alias.set('@swc/helpers', path.dirname(require.resolve(`@swc/helpers/package.json`)));
     mainRule
         .oneOf('media')
         .exclude.merge([/\.(tsx|ts|js|cjs|mjs|jsx)$/, /\.html$/, /\.json$/])
@@ -162,39 +189,28 @@ function baseWebpackChain({ dev, outputDir, parcelCss, experimental, compiler, p
         .options({
         name: 'static/media/[name].[hash:8].[ext]'
     });
-    config.plugin('chunk-names').use(chunk_names_plugin_1.default);
     config.plugin('private/ignore-plugin').use(webpack_1.default.IgnorePlugin, [
         {
             resourceRegExp: /^\.\/locale$/,
             contextRegExp: /moment$/
         }
     ]);
-    const shuviPublicEnv = Object.keys(process.env).reduce((prev, key) => {
-        if (key.startsWith(constants_1.PUBLIC_ENV_PREFIX)) {
-            prev[`process.env.${key}`] = JSON.stringify(process.env[key]);
-        }
-        return prev;
-    }, {});
-    const shuviConfigEnv = Object.keys(env).reduce((acc, key) => {
-        if (/^(?:NODE_.+)|^(?:__.+)$/i.test(key)) {
-            throw new Error(`The key "${key}" under "env" is not allowed.`);
-        }
-        return Object.assign(Object.assign({}, acc), { [`process.env.${key}`]: JSON.stringify(env[key]) });
-    }, {});
-    config.plugin('define').use(webpack_1.default.DefinePlugin, [
-        Object.assign(Object.assign(Object.assign({}, shuviPublicEnv), shuviConfigEnv), { 'process.env.NODE_ENV': JSON.stringify(dev ? 'development' : 'production') })
+    config.plugin('private/define').use(webpack_1.default.DefinePlugin, [
+        Object.assign({ 
+            // internal field to identify the plugin config
+            __SHUVI_DEFINE_ENV: 'true' }, getDefineEnv(env))
     ]);
-    config
-        .plugin('private/build-manifest')
-        .use(build_manifest_plugin_1.default, [
-        { filename: buildManifestFilename, chunkRequest: dev }
+    config.plugin('define').use(webpack_1.default.DefinePlugin, [
+        {
+            'process.env.NODE_ENV': JSON.stringify(dev ? 'development' : 'production')
+        }
     ]);
     const getCacheConfig = () => {
         const projectHash = crypto
             .createHash('md5')
             .update(projectRoot)
             .digest('hex');
-        const stringifiedEnvs = Object.entries(Object.assign(Object.assign({}, shuviConfigEnv), shuviPublicEnv)).reduce((prev, [key, value]) => {
+        const stringifiedEnvs = Object.entries(Object.assign({}, getDefineEnv(env))).reduce((prev, [key, value]) => {
             return `${prev}|${key}=${value}`;
         }, '');
         const PACKAGE_JSON = path.resolve(__dirname, '../../../package.json');
@@ -232,7 +248,6 @@ function baseWebpackChain({ dev, outputDir, parcelCss, experimental, compiler, p
             level: 'none'
         });
         config.plugin('private/fix-watching-plugin').use(fix_watching_plugin_1.default);
-        config.optimization.usedExports(false);
     }
     else {
         config

package/lib/webpack/config/browser.js

@@ -32,10 +32,23 @@ const webpack_1 = __importDefault(require("webpack"));
 const path = __importStar(require("path"));
 const webpack_bundle_analyzer_1 = require("webpack-bundle-analyzer");
 const resolve_1 = require("@shuvi/utils/lib/resolve");
-const dynamic_public_path_plugin_1 = __importDefault(require("../plugins/dynamic-public-path-plugin"));
 const base_1 = require("./base");
 const style_1 = require("./parts/style");
+const helpers_1 = require("./parts/helpers");
 const BIG_LIBRARY_THRESHOLD = 160000; // byte
+const SHUVI_PKGS_REGEX = /[\\/]node_modules[\\/]@shuvi[\\/]/;
+const FRAMEWORK_REACT_MODULES = [
+    {
+        test: /[/\\]node_modules[/\\]react[/\\]/
+    },
+    {
+        test: /[/\\]node_modules[/\\]react-dom[/\\]/
+    },
+    {
+        test: /[/\\]node_modules[/\\]scheduler[/\\]/,
+        issuers: [/[/\\]node_modules[/\\]react-dom[/\\]/]
+    }
+];
 function createBrowserWebpackChain(options) {
     const { cacheDir, typescript, dev, publicPath, analyze } = options;
     const chain = (0, base_1.baseWebpackChain)(options);
@@ -79,27 +92,50 @@ function createBrowserWebpackChain(options) {
             }
         ]);
     }
-    // if (options.target) {
-    //   chain.resolve
-    //     .plugin('private/prefer-resolver-plugin')
-    //     .use(PreferResolverPlugin, [{ suffix: options.target }]);
-    // }
     if (dev) {
         chain.plugin('private/hmr-plugin').use(webpack_1.default.HotModuleReplacementPlugin);
     }
     else {
         chain.optimization.splitChunks({
-            chunks: 'all',
+            chunks: helpers_1.splitChunksFilter,
             cacheGroups: {
                 default: false,
                 defaultVendors: false,
                 framework: {
                     chunks: 'all',
                     name: 'framework',
-                    // This regex ignores nested copies of framework libraries so they're
-                    // bundled with their issuer.
-                    // https://github.com/zeit/next.js/pull/9012
-                    test: /(?<!node_modules.*)[\\/]node_modules[\\/](react|react-dom|@shuvi\/router|@shuvi\/router-react|scheduler|prop-types|use-sync-external-store|history)[\\/]/,
+                    filename: (0, helpers_1.commonChunkFilename)({ dev: false }),
+                    test(module, { moduleGraph }) {
+                        const resource = module.nameForCondition();
+                        if (!resource) {
+                            return false;
+                        }
+                        if (SHUVI_PKGS_REGEX.test(resource)) {
+                            return true;
+                        }
+                        return FRAMEWORK_REACT_MODULES.some(frameworkModule => {
+                            if (!frameworkModule.test.test(resource)) {
+                                return false;
+                            }
+                            // Check issuer to ignore nested copies of framework libraries so they're
+                            // bundled with their issuer.
+                            // https://github.com/zeit/next.js/pull/9012
+                            if (frameworkModule.issuers) {
+                                for (const issuerTest of frameworkModule.issuers) {
+                                    // fix:  DeprecationWarning: Module.issuer: Use new ModuleGraph API
+                                    const issuer = moduleGraph.getIssuer(module);
+                                    const issuerResource = issuer
+                                        ? issuer.nameForCondition()
+                                        : null;
+                                    if (!issuerResource || !issuerTest.test(issuerResource)) {
+                                        return false;
+                                    }
+                                }
+                            }
+                            return true;
+                        });
+                    },
+                    // test: /(?<!node_modules.*)[\\/]node_modules[\\/](react|react-dom|@shuvi[\\/]router|@shuvi[\\/]router-react|scheduler|prop-types|use-sync-external-store|history)[\\/]/,
                     priority: 40,
                     // Don't let webpack eliminate this chunk (prevents this chunk from
                     // becoming a part of the commons chunk)
@@ -108,7 +144,7 @@ function createBrowserWebpackChain(options) {
                 lib: {
                     test(module) {
                         return (module.size() > BIG_LIBRARY_THRESHOLD &&
-                            /node_modules[/\\]/.test(module.identifier()));
+                            /[/\\]node_modules[/\\]/.test(module.nameForCondition() || ''));
                     },
                     name(module) {
                         const hash = crypto.createHash('sha1');
@@ -123,27 +159,10 @@ function createBrowserWebpackChain(options) {
                         }
                         return hash.digest('hex').substring(0, 8);
                     },
+                    filename: (0, helpers_1.commonChunkFilename)({ dev: false }),
                     priority: 30,
                     minChunks: 1,
                     reuseExistingChunk: true
-                },
-                commons: {
-                    name: 'commons',
-                    minChunks: 2,
-                    priority: 20
-                },
-                shared: {
-                    name(module, chunks) {
-                        return crypto
-                            .createHash('sha1')
-                            .update(chunks.reduce((acc, chunk) => {
-                            return acc + chunk.name;
-                        }, ''))
-                            .digest('hex');
-                    },
-                    priority: 10,
-                    minChunks: 2,
-                    reuseExistingChunk: true
                 }
             },
             maxInitialRequests: 25,
@@ -185,14 +204,10 @@ function createBrowserWebpackChain(options) {
             // prevent errof of destructing process.env
             'process.env': JSON.stringify('{}') })
     ]);
-    chain.plugin('dynamic-public-path-plugin').use(dynamic_public_path_plugin_1.default);
-    chain.plugin('private/build-manifest').tap(([options]) => [
-        Object.assign(Object.assign({}, options), { modules: true })
-    ]);
     return (0, style_1.withStyle)(chain, {
         extractCss: !dev,
         publicPath,
-        parcelCss: options.parcelCss,
+        lightningCss: options.lightningCss,
         filename: 'static/css/[contenthash:8].css',
         chunkFilename: 'static/css/[contenthash:8].chunk.css'
     });

package/lib/webpack/config/node.js

@@ -32,15 +32,12 @@ function createNodeWebpackChain(options) {
         .oneOf('js')
         .use('shuvi-swc-loader')
         .tap(options => (Object.assign(Object.assign({}, options), { isServer: true })));
-    chain.plugin('private/build-manifest').tap(([options]) => [
-        Object.assign(Object.assign({}, options), { modules: false })
-    ]);
     chain.plugin('define').tap(([options]) => [
         Object.assign(Object.assign({}, options), { __BROWSER__: false })
     ]);
     return (0, style_1.withStyle)(chain, {
         ssr: true,
-        parcelCss: options.parcelCss,
+        lightningCss: options.lightningCss,
         filename: 'static/css/[contenthash:8].css',
         chunkFilename: 'static/css/[contenthash:8].chunk.css'
     });

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

@@ -1,5 +1,5 @@
 import { ExternalsFunction } from '../../types';
 export declare function nodeExternals({ projectRoot, include }: {
-    include: string[];
+    include: (string | RegExp)[];
     projectRoot: string;
 }): ExternalsFunction;

package/lib/webpack/config/parts/external.js

@@ -1,8 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.nodeExternals = void 0;
-// import resolve from "resolve";
-const constants_1 = require("../../../constants");
 function match(value, tests) {
     let matched = false;
     for (let index = 0; index < tests.length; index++) {
@@ -31,17 +29,12 @@ function nodeExternals({ projectRoot, include }) {
             return next(null, `commonjs ${request}`);
         }
         const notExternalModules = [];
-        const externalModules = [
-            /platform-shared[/\\](esm|lib)[/\\]shared[/\\]shuvi-singleton-runtimeConfig/
-        ];
+        const externalModules = [];
         // make sure we don't externalize anything that is
         // supposed to be transpiled
         if (match(request, include)) {
             return transpiled();
         }
-        if (match(request, constants_1.AppSourceRegexs)) {
-            return transpiled();
-        }
         if (match(request, notExternalModules)) {
             return transpiled();
         }

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

@@ -1,3 +1,7 @@
 import { IWebpackHelpers } from '../../types';
 export declare const webpackHelpers: () => IWebpackHelpers;
 export declare function shouldUseRelativeAssetPaths(publicPath: string): boolean;
+export declare function splitChunksFilter(chunk: any): boolean;
+export declare const commonChunkFilename: ({ dev }: {
+    dev: boolean;
+}) => string;

package/lib/webpack/config/parts/helpers.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.shouldUseRelativeAssetPaths = exports.webpackHelpers = void 0;
+exports.commonChunkFilename = exports.splitChunksFilter = exports.shouldUseRelativeAssetPaths = exports.webpackHelpers = void 0;
 const webpackHelpers = () => {
     const externalFns = [];
     const defaultExternalsFn = ({ context, request }, callback) => {
@@ -48,3 +48,14 @@ function shouldUseRelativeAssetPaths(publicPath) {
     return publicPath === './';
 }
 exports.shouldUseRelativeAssetPaths = shouldUseRelativeAssetPaths;
+function splitChunksFilter(chunk) {
+    const excludes = {
+    // 'static/polyfill': true
+    };
+    return excludes[chunk.name] !== true;
+}
+exports.splitChunksFilter = splitChunksFilter;
+const commonChunkFilename = ({ dev }) => {
+    return `static/common/${dev ? '[name]' : '[name].[contenthash:8]'}.js`;
+};
+exports.commonChunkFilename = commonChunkFilename;

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

@@ -6,7 +6,7 @@ interface StyleOptions {
     extractCss?: boolean;
     sourceMap?: boolean;
     ssr?: boolean;
-    parcelCss?: boolean;
+    lightningCss?: boolean;
 }
-export declare function withStyle(chain: Config, { extractCss, sourceMap, ssr, publicPath, parcelCss, filename, chunkFilename }: StyleOptions): Config;
+export declare function withStyle(chain: Config, { extractCss, sourceMap, ssr, publicPath, lightningCss, filename, chunkFilename }: StyleOptions): Config;
 export {};