@modern-js/builder 2.21.1 → 2.22.1

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # @modern-js/builder
 
+## 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
+
+- 9c3c231: feat(deps): bump @svgr/webpack from v6 to v8
+
+  feat(deps): 将 @svgr/webpack 从 v6 升级到 v8
+
+- 850cde6: feat(builder): add arco config to transformImport by default
+
+  feat(builder): 默认增加 arco 的 transformImport 配置
+
+- ae3fcc2: fix(builder): failed to configure browserslist when target is web-worker
+
+  fix(builder): 修复 target 为 web-worker 时无法配置 browserslist 的问题
+
+- Updated dependencies [3d48836]
+- Updated dependencies [5050e8e]
+- Updated dependencies [850cde6]
+  - @modern-js/builder-shared@2.22.0
+  - @modern-js/utils@2.22.0
+
 ## 2.21.1
 
 ### 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/antd.d.ts

@@ -1,2 +1,3 @@
-import type { DefaultBuilderPlugin } from '@modern-js/builder-shared';
-export declare const builderAntdPlugin: () => DefaultBuilderPlugin;
+import type { BuilderTarget, DefaultBuilderPlugin } from '@modern-js/builder-shared';
+export declare const builderPluginAntd: () => DefaultBuilderPlugin;
+export declare function useSSR(target: BuilderTarget | BuilderTarget[]): boolean;

package/dist/plugins/antd.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.builderAntdPlugin = void 0;
+exports.useSSR = exports.builderPluginAntd = void 0;
 const utils_1 = require("@modern-js/utils");
-const builderAntdPlugin = () => ({
+const builderPluginAntd = () => ({
     name: `builder-plugin-antd`,
     setup(api) {
         api.modifyBuilderConfig(builderConfig => {
@@ -29,7 +29,8 @@ const builderAntdPlugin = () => ({
         });
     },
 });
-exports.builderAntdPlugin = builderAntdPlugin;
+exports.builderPluginAntd = builderPluginAntd;
 function useSSR(target) {
     return (Array.isArray(target) ? target : [target]).some(item => ['node', 'service-worker'].includes(item));
 }
+exports.useSSR = useSSR;

package/dist/plugins/arco.d.ts

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

package/dist/plugins/arco.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.builderPluginArco = void 0;
+const utils_1 = require("@modern-js/utils");
+const antd_1 = require("./antd");
+const builderPluginArco = () => ({
+    name: `builder-plugin-arco`,
+    setup(api) {
+        const ARCO_NAME = '@arco-design/web-react';
+        const ARCO_ICON = `${ARCO_NAME}/icon`;
+        api.modifyBuilderConfig(builderConfig => {
+            const { transformImport = [] } = builderConfig.source || {};
+            if (transformImport === false ||
+                !(0, utils_1.isPackageInstalled)(ARCO_NAME, api.context.rootPath)) {
+                return;
+            }
+            const isUseSSR = (0, antd_1.useSSR)(api.context.target);
+            if (!(transformImport === null || transformImport === void 0 ? void 0 : transformImport.some(item => item.libraryName === ARCO_NAME))) {
+                transformImport.push({
+                    libraryName: ARCO_NAME,
+                    libraryDirectory: isUseSSR ? 'lib' : 'es',
+                    camelToDashComponentName: false,
+                    style: true,
+                });
+            }
+            if (!(transformImport === null || transformImport === void 0 ? void 0 : transformImport.some(item => item.libraryName === ARCO_ICON))) {
+                transformImport.push({
+                    libraryName: ARCO_ICON,
+                    libraryDirectory: isUseSSR ? 'react-icon-cjs' : 'react-icon',
+                    camelToDashComponentName: false,
+                });
+            }
+            builderConfig.source || (builderConfig.source = {});
+            builderConfig.source.transformImport = transformImport;
+        });
+    },
+});
+exports.builderPluginArco = builderPluginArco;

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

@@ -44,7 +44,9 @@ exports.plugins = {
     image: () => Promise.resolve().then(() => __importStar(require('./asset'))).then(m => m.builderAssetPlugin('image', builder_shared_1.IMAGE_EXTENSIONS)),
     media: () => Promise.resolve().then(() => __importStar(require('./asset'))).then(m => m.builderAssetPlugin('media', builder_shared_1.MEDIA_EXTENSIONS)),
     assetsRetry: () => Promise.resolve().then(() => __importStar(require('./assetsRetry'))).then(m => m.builderPluginAssetsRetry()),
-    antd: () => Promise.resolve().then(() => __importStar(require('./antd'))).then(m => m.builderAntdPlugin()),
+    antd: () => Promise.resolve().then(() => __importStar(require('./antd'))).then(m => m.builderPluginAntd()),
+    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/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/dist/plugins/target.js

@@ -14,16 +14,20 @@ const builderPluginTarget = () => ({
                 chain.target('webworker');
                 return;
             }
+            // browserslist is not supported when target is web-worker
+            if (target === 'web-worker') {
+                chain.target(['webworker', 'es5']);
+                return;
+            }
             const browserslist = await (0, builder_shared_1.getBrowserslist)(api.context.rootPath);
-            const basicTarget = target === 'web-worker' ? 'webworker' : 'web';
             if (browserslist) {
-                chain.merge({ target: [basicTarget, 'browserslist'] });
+                chain.merge({ target: ['web', 'browserslist'] });
             }
             else if (target === 'modern-web') {
-                chain.merge({ target: [basicTarget, 'es2015'] });
+                chain.merge({ target: ['web', 'es2015'] });
             }
             else {
-                chain.merge({ target: [basicTarget, 'es5'] });
+                chain.merge({ target: ['web', 'es5'] });
             }
         });
     },

package/package.json

@@ -18,7 +18,7 @@
   "engines": {
     "node": ">=14.0.0"
   },
-  "version": "2.21.1",
+  "version": "2.22.1",
   "jsnext:source": "./src/index.ts",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
@@ -30,15 +30,15 @@
     }
   },
   "dependencies": {
-    "@svgr/webpack": "6.5.1",
-    "@modern-js/builder-shared": "2.21.1",
-    "@modern-js/utils": "2.21.1"
+    "@svgr/webpack": "8.0.1",
+    "@modern-js/builder-shared": "2.22.1",
+    "@modern-js/utils": "2.22.1"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.0",
     "@types/node": "^14",
     "typescript": "^5",
-    "@scripts/vitest-config": "2.21.1"
+    "@scripts/vitest-config": "2.22.1"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",