@modern-js/builder 2.22.0 → 2.23.0

package/CHANGELOG.md

@@ -1,5 +1,67 @@
 # @modern-js/builder
 
+## 2.23.0
+
+### Patch Changes
+
+- 9b270b6: feat(builder): extend rules of splitByExperience
+  feat(builder): 拓展 splitByExperience 内部规则
+- 7e6fb5f: chore: publishConfig add provenance config
+
+  chore: publishConfig 增加 provenance 配置
+
+- 692cc0e: fix(builder): assetsRetry.crossOrigin default to html.crossorigin
+
+  fix(builder): assetsRetry.crossOrigin 默认值与 html.crossorigin 保持一致
+
+- a82d6f7: fix(builder): single-vendor chunkSplit not work as expected
+
+  fix(builder): single-vendor 拆包规则未按照预期生效
+
+- Updated dependencies [15eac36]
+- Updated dependencies [d4e85c1]
+- Updated dependencies [7e6fb5f]
+- Updated dependencies [a7a7ad7]
+- Updated dependencies [6dec7c2]
+- Updated dependencies [c3216b5]
+- Updated dependencies [f14f920]
+- Updated dependencies [692cc0e]
+- Updated dependencies [38eccef]
+- Updated dependencies [f91c557]
+- Updated dependencies [a82d6f7]
+  - @modern-js/builder-shared@2.23.0
+  - @modern-js/utils@2.23.0
+
+## 2.22.1
+
+### Patch Changes
+
+- a470c04: chore(builder): reuse rem plugin between rspack and webpack provider
+
+  chore(builder): 在 rspack 和 webpack provider 间复用 rem 插件
+
+- bd4b150: feat(builder): add builder.serve method
+
+  feat(builder): 新增 builder.serve 方法
+
+- d4045ed: fix(builder): print https URLs when devServer.https is true
+
+  fix(builder): 当 devServer.https 为 true 时，输出 https 的 URLs
+
+- Updated dependencies [e2848a2]
+- Updated dependencies [a470c04]
+- Updated dependencies [95ffa6b]
+- Updated dependencies [12d54ae]
+- Updated dependencies [bd4b150]
+- Updated dependencies [dd36311]
+- Updated dependencies [d4045ed]
+- Updated dependencies [8bd9981]
+- Updated dependencies [1f02cd2]
+- Updated dependencies [cfcf003]
+- Updated dependencies [15181be]
+  - @modern-js/utils@2.22.1
+  - @modern-js/builder-shared@2.22.1
+
 ## 2.22.0
 
 ### Patch Changes

package/dist/createBuilder.js

@@ -6,7 +6,7 @@ const plugins_1 = require("./plugins");
 async function createBuilder(provider, options) {
     const builderOptions = (0, builder_shared_1.applyDefaultBuilderOptions)(options);
     const pluginStore = (0, builder_shared_1.createPluginStore)();
-    const { build, pluginAPI, publicContext, initConfigs, inspectConfig, createCompiler, startDevServer, applyDefaultPlugins, } = await provider({
+    const { build, serve, pluginAPI, publicContext, initConfigs, inspectConfig, createCompiler, startDevServer, applyDefaultPlugins, } = await provider({
         pluginStore,
         builderOptions,
         plugins: plugins_1.plugins,
@@ -29,6 +29,7 @@ async function createBuilder(provider, options) {
             'getBuilderConfig',
             'getNormalizedConfig',
         ]),
+        serve,
         build,
         createCompiler,
         initConfigs,

package/dist/plugins/assetsRetry.js

@@ -36,9 +36,14 @@ function builderPluginAssetsRetry() {
                 }
                 const { AssetsRetryPlugin } = await Promise.resolve().then(() => __importStar(require('@modern-js/builder-shared')));
                 const distDir = (0, builder_shared_1.getDistPath)(config.output, 'js');
+                const { assetsRetry = {} } = config.output;
+                // assetsRetry.crossOrigin should be same as html.crossorigin by default
+                if (assetsRetry.crossOrigin === undefined) {
+                    assetsRetry.crossOrigin = config.html.crossorigin;
+                }
                 chain.plugin(CHAIN_ID.PLUGIN.ASSETS_RETRY).use(AssetsRetryPlugin, [
                     {
-                        ...(config.output.assetsRetry || {}),
+                        ...assetsRetry,
                         distDir,
                         HtmlPlugin,
                     },

package/dist/plugins/html.js

@@ -206,15 +206,17 @@ const builderPluginHtml = () => ({
                 }
             }
         });
-        api.onBeforeStartDevServer(async () => {
+        const emitRouteJson = async () => {
             const { fs, ROUTE_SPEC_FILE } = await Promise.resolve().then(() => __importStar(require('@modern-js/utils')));
             const routeFilePath = path_1.default.join(api.context.distPath, ROUTE_SPEC_FILE);
-            // generate a basic route.json for modern.js dev server
+            // generate a basic route.json for modern.js server
             // if the framework has already generate a route.json, do nothing
             if (!(await (0, builder_shared_1.isFileExists)(routeFilePath)) && routesInfo.length) {
                 await fs.outputFile(routeFilePath, JSON.stringify({ routes: routesInfo }, null, 2));
             }
-        });
+        };
+        api.onBeforeBuild(emitRouteJson);
+        api.onBeforeStartDevServer(emitRouteJson);
         (0, exports.applyInjectTags)(api);
     },
 });

package/dist/plugins/index.js

@@ -48,4 +48,5 @@ exports.plugins = {
     arco: () => Promise.resolve().then(() => __importStar(require('./arco'))).then(m => m.builderPluginArco()),
     tsChecker: () => Promise.resolve().then(() => __importStar(require('./tsChecker'))).then(m => m.builderPluginTsChecker()),
     checkSyntax: () => Promise.resolve().then(() => __importStar(require('./checkSyntax'))).then(m => m.builderPluginCheckSyntax()),
+    rem: () => Promise.resolve().then(() => __importStar(require('./rem'))).then(m => m.builderPluginRem()),
 };

package/dist/plugins/rem.d.ts

@@ -0,0 +1,2 @@
+import { type DefaultBuilderPlugin } from '@modern-js/builder-shared';
+export declare const builderPluginRem: () => DefaultBuilderPlugin;

package/dist/plugins/rem.js

@@ -0,0 +1,106 @@
+"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.builderPluginRem = void 0;
+const lodash_1 = __importDefault(require("@modern-js/utils/lodash"));
+const builder_shared_1 = require("@modern-js/builder-shared");
+const defaultOptions = {
+    enableRuntime: true,
+    rootFontSize: 50,
+};
+const builderPluginRem = () => ({
+    name: 'builder-plugin-rem',
+    pre: [
+        'builder-plugin-css',
+        'builder-plugin-less',
+        'builder-plugin-sass',
+        'builder-plugin-stylus',
+    ],
+    setup(api) {
+        api.modifyBundlerChain(async (chain, { CHAIN_ID, isServer, isWebWorker, HtmlPlugin }) => {
+            const config = api.getNormalizedConfig();
+            const { output: { convertToRem }, } = config;
+            if (!convertToRem || isServer || isWebWorker) {
+                return;
+            }
+            const userOptions = {
+                ...defaultOptions,
+                ...(typeof convertToRem === 'boolean' ? {} : convertToRem),
+            };
+            // handle css
+            const { default: PxToRemPlugin } = (await Promise.resolve(`${(0, builder_shared_1.getSharedPkgCompiledPath)('postcss-pxtorem')}`).then(s => __importStar(require(s))));
+            const applyRules = [
+                CHAIN_ID.RULE.CSS,
+                CHAIN_ID.RULE.LESS,
+                CHAIN_ID.RULE.SASS,
+                CHAIN_ID.RULE.STYLUS,
+            ];
+            const getPxToRemPlugin = () => PxToRemPlugin({
+                rootValue: userOptions.rootFontSize,
+                unitPrecision: 5,
+                propList: ['*'],
+                ...lodash_1.default.cloneDeep(userOptions.pxtorem || {}),
+            });
+            // Deep copy options to prevent unexpected behavior.
+            applyRules.forEach(name => {
+                chain.module.rules.has(name) &&
+                    chain.module
+                        .rule(name)
+                        .use(CHAIN_ID.USE.POSTCSS)
+                        .tap((options = {}) => {
+                        var _a;
+                        return ({
+                            ...options,
+                            postcssOptions: {
+                                ...(options.postcssOptions || {}),
+                                plugins: [
+                                    ...(((_a = options.postcssOptions) === null || _a === void 0 ? void 0 : _a.plugins) || []),
+                                    getPxToRemPlugin(),
+                                ],
+                            },
+                        });
+                    });
+            });
+            // handle runtime (html)
+            if (!userOptions.enableRuntime) {
+                return;
+            }
+            const entries = Object.keys(chain.entryPoints.entries() || {});
+            const distDir = (0, builder_shared_1.getDistPath)(config.output, 'js');
+            chain
+                .plugin(CHAIN_ID.PLUGIN.AUTO_SET_ROOT_SIZE)
+                .use(builder_shared_1.AutoSetRootFontSizePlugin, [
+                userOptions,
+                entries,
+                HtmlPlugin,
+                distDir,
+            ]);
+        });
+    },
+});
+exports.builderPluginRem = builderPluginRem;

package/dist/plugins/splitChunks.js

@@ -61,6 +61,7 @@ async function splitByExperience(ctx) {
         react: (0, exports.createDependenciesRegExp)('react', 'react-dom'),
         router: (0, exports.createDependenciesRegExp)('react-router', 'react-router-dom', '@remix-run/router', 'history'),
         lodash: (0, exports.createDependenciesRegExp)('lodash', 'lodash-es'),
+        axios: (0, exports.createDependenciesRegExp)('axios', /axios-.+/),
     };
     // Detect if the package is installed in current project
     // If installed, add the package to cache group
@@ -113,7 +114,7 @@ function splitByModule(ctx) {
             // Core group
             vendors: {
                 priority: -10,
-                test: /[\\/]node_modules[\\/]/,
+                test: builder_shared_1.NODE_MODULES_REGEX,
                 // todo: not support in rspack
                 name(module) {
                     return (0, builder_shared_1.getPackageNameFromModulePath)(module.context);
@@ -161,14 +162,26 @@ function allInOne(_ctx) {
 }
 // Ignore user defined cache group to get single vendor chunk.
 function singleVendor(ctx) {
-    const { override, defaultConfig } = ctx;
+    const { override, defaultConfig, userDefinedCacheGroups } = ctx;
     (0, assert_1.default)(defaultConfig !== false);
     (0, assert_1.default)(override !== false);
+    const singleVendorCacheGroup = {
+        singleVendor: {
+            test: builder_shared_1.NODE_MODULES_REGEX,
+            priority: 0,
+            chunks: 'all',
+            name: 'vendor',
+            enforce: true,
+            reuseExistingChunk: true,
+        },
+    };
     return {
         ...defaultConfig,
         ...override,
         cacheGroups: {
             ...defaultConfig.cacheGroups,
+            ...singleVendorCacheGroup,
+            ...userDefinedCacheGroups,
             ...override.cacheGroups,
         },
     };

package/dist/plugins/startUrl.js

@@ -44,7 +44,8 @@ function builderPluginStartUrl() {
                     return;
                 }
                 const config = api.getNormalizedConfig();
-                const { https, startUrl, beforeStartUrl } = config.dev;
+                const { startUrl, beforeStartUrl } = config.dev;
+                const { https } = api.context.devServer || {};
                 if (!startUrl) {
                     return;
                 }

package/package.json

@@ -18,7 +18,7 @@
   "engines": {
     "node": ">=14.0.0"
   },
-  "version": "2.22.0",
+  "version": "2.23.0",
   "jsnext:source": "./src/index.ts",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
@@ -31,18 +31,19 @@
   },
   "dependencies": {
     "@svgr/webpack": "8.0.1",
-    "@modern-js/builder-shared": "2.22.0",
-    "@modern-js/utils": "2.22.0"
+    "@modern-js/builder-shared": "2.23.0",
+    "@modern-js/utils": "2.23.0"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.0",
     "@types/node": "^14",
     "typescript": "^5",
-    "@scripts/vitest-config": "2.22.0"
+    "@scripts/vitest-config": "2.23.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
-    "access": "public"
+    "access": "public",
+    "provenance": true
   },
   "scripts": {
     "new": "modern new",