@modern-js/builder 2.5.0 → 2.7.0

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @modern-js/builder
 
+## 2.7.0
+
+### Minor Changes
+
+- dfece9dc1c: fix(builder): vendor library chunks include sources
+  fix(builder): 用户源码被划分到第三方库所在 Chunk
+
+### Patch Changes
+
+- Updated dependencies [206c806efa]
+- Updated dependencies [0f15fc597c]
+- Updated dependencies [5f899af53a]
+- Updated dependencies [dcad887024]
+- Updated dependencies [a4672f7c16]
+- Updated dependencies [ebe0d2dd6e]
+- Updated dependencies [7fff9020e1]
+- Updated dependencies [84bfb439b8]
+  - @modern-js/builder-shared@2.7.0
+  - @modern-js/utils@2.7.0
+
+## 2.6.0
+
+### Patch Changes
+
+- 107f674: feat(builder): add dev.beforeStartUrl config
+
+  feat(builder): 新增 dev.beforeStartUrl 配置项
+
+- 0fe658a: feat(builder): support passing URL to html.favicon
+
+  feat(builder): 支持在 html.favicon 中直接传入 URL
+
+- Updated dependencies [b92d6db]
+- Updated dependencies [e1f799e]
+- Updated dependencies [107f674]
+- Updated dependencies [7915ab3]
+- Updated dependencies [03d7f7d]
+- Updated dependencies [fae9d1b]
+- Updated dependencies [0fe658a]
+- Updated dependencies [62930b9]
+  - @modern-js/builder-shared@2.6.0
+  - @modern-js/utils@2.6.0
+
 ## 2.5.0
 
 ### Patch Changes

package/dist/plugins/html.d.ts

@@ -0,0 +1,3 @@
+import type { DefaultBuilderPlugin, SharedBuilderPluginAPI } from '@modern-js/builder-shared';
+export declare const applyInjectTags: (api: SharedBuilderPluginAPI) => void;
+export declare const builderPluginHtml: () => DefaultBuilderPlugin;

package/dist/plugins/html.js

@@ -0,0 +1,213 @@
+"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.builderPluginHtml = exports.applyInjectTags = void 0;
+const path_1 = __importDefault(require("path"));
+const builder_shared_1 = require("@modern-js/builder-shared");
+const lodash_1 = __importDefault(require("@modern-js/utils/lodash"));
+async function getTemplateParameters(entryName, config, assetPrefix) {
+    const { applyOptionsChain } = await Promise.resolve().then(() => __importStar(require('@modern-js/utils')));
+    const { mountId, templateParameters, templateParametersByEntries } = config.html;
+    const meta = await (0, builder_shared_1.getMetaTags)(entryName, config);
+    const title = (0, builder_shared_1.getTitle)(entryName, config);
+    const templateParams = (templateParametersByEntries === null || templateParametersByEntries === void 0 ? void 0 : templateParametersByEntries[entryName]) || templateParameters;
+    const baseParameters = {
+        meta,
+        title,
+        mountId,
+        entryName,
+        assetPrefix,
+    };
+    return (compilation, assets, assetTags, pluginOptions) => {
+        const defaultOptions = {
+            compilation,
+            webpackConfig: compilation.options,
+            htmlWebpackPlugin: {
+                tags: assetTags,
+                files: assets,
+                options: pluginOptions,
+            },
+            ...baseParameters,
+        };
+        return applyOptionsChain(defaultOptions, templateParams);
+    };
+}
+async function getChunks(entryName, entryValue) {
+    const { isPlainObject } = await Promise.resolve().then(() => __importStar(require('@modern-js/utils')));
+    const dependOn = [];
+    if (isPlainObject(entryValue)) {
+        // @ts-expect-error assume entry is an entry object
+        dependOn.push(...entryValue.dependOn);
+    }
+    return [...dependOn, entryName];
+}
+// Determine if the string is a favicon url
+const isFaviconUrl = (str) => str.startsWith('http');
+const applyInjectTags = (api) => {
+    api.modifyBundlerChain(async (chain, { HtmlPlugin, CHAIN_ID }) => {
+        const config = api.getNormalizedConfig();
+        const tags = lodash_1.default.castArray(config.html.tags).filter(Boolean);
+        const tagsByEntries = lodash_1.default.mapValues(config.html.tagsByEntries, tags => lodash_1.default.castArray(tags).filter(Boolean));
+        const shouldByEntries = lodash_1.default.some(tagsByEntries, 'length');
+        // skip if options is empty.
+        if (!tags.length && !shouldByEntries) {
+            return;
+        }
+        // dynamic import.
+        const { HtmlTagsPlugin } = await Promise.resolve().then(() => __importStar(require('@modern-js/builder-shared')));
+        // const { HtmlTagsPlugin } = await import('../webpackPlugins/HtmlTagsPlugin');
+        // create shared options used for entry without specified options.
+        const sharedOptions = {
+            HtmlPlugin,
+            append: true,
+            hash: false,
+            publicPath: true,
+            tags,
+        };
+        // apply only one webpack plugin if `html.tagsByEntries` is empty.
+        if (tags.length && !shouldByEntries) {
+            chain
+                .plugin(CHAIN_ID.PLUGIN.HTML_TAGS)
+                .use(HtmlTagsPlugin, [sharedOptions]);
+            return;
+        }
+        // apply webpack plugin for each entries.
+        for (const [entry, filename] of Object.entries(api.getHTMLPaths())) {
+            const opts = { ...sharedOptions, includes: [filename] };
+            entry in tagsByEntries && (opts.tags = tagsByEntries[entry]);
+            chain
+                .plugin(`${CHAIN_ID.PLUGIN.HTML_TAGS}#${entry}`)
+                .use(HtmlTagsPlugin, [opts]);
+        }
+    });
+};
+exports.applyInjectTags = applyInjectTags;
+const builderPluginHtml = () => ({
+    name: 'builder-plugin-html',
+    setup(api) {
+        const routesInfo = [];
+        api.modifyBundlerChain(async (chain, { HtmlPlugin, isProd, CHAIN_ID, target }) => {
+            const config = api.getNormalizedConfig();
+            // if html is disabled or target is server, skip html plugin
+            if ((0, builder_shared_1.isHtmlDisabled)(config, target)) {
+                return;
+            }
+            const { removeTailSlash, applyOptionsChain } = await Promise.resolve().then(() => __importStar(require('@modern-js/utils')));
+            const minify = (0, builder_shared_1.getMinify)(isProd, config);
+            const assetPrefix = removeTailSlash(chain.output.get('publicPath') || '');
+            const entries = chain.entryPoints.entries() || {};
+            const entryNames = Object.keys(entries);
+            const htmlPaths = api.getHTMLPaths();
+            const faviconUrls = [];
+            await Promise.all(entryNames.map(async (entryName, index) => {
+                const entryValue = entries[entryName].values();
+                const chunks = await getChunks(entryName, entryValue);
+                const inject = (0, builder_shared_1.getInject)(entryName, config);
+                const favicon = (0, builder_shared_1.getFavicon)(entryName, config);
+                const filename = htmlPaths[entryName];
+                const template = (0, builder_shared_1.getTemplatePath)(entryName, config);
+                const templateParameters = await getTemplateParameters(entryName, config, assetPrefix);
+                const pluginOptions = {
+                    chunks,
+                    inject,
+                    minify,
+                    filename,
+                    template,
+                    templateParameters,
+                };
+                if (favicon) {
+                    if (isFaviconUrl(favicon)) {
+                        faviconUrls.push({
+                            filename,
+                            url: favicon,
+                        });
+                    }
+                    else {
+                        // HTMLWebpackPlugin only support favicon file path
+                        pluginOptions.favicon = favicon;
+                    }
+                }
+                const finalOptions = applyOptionsChain(pluginOptions, config.tools.htmlPlugin, {
+                    entryName,
+                    entryValue,
+                });
+                routesInfo.push({
+                    urlPath: index === 0 ? '/' : `/${entryName}`,
+                    entryName,
+                    entryPath: filename,
+                    isSPA: true,
+                });
+                chain
+                    .plugin(`${CHAIN_ID.PLUGIN.HTML}-${entryName}`)
+                    .use(HtmlPlugin, [finalOptions]);
+            }));
+            if (config.html) {
+                const { appIcon, crossorigin } = config.html;
+                if (crossorigin) {
+                    const { HtmlCrossOriginPlugin } = await Promise.resolve().then(() => __importStar(require('@modern-js/builder-shared')));
+                    const formattedCrossorigin = crossorigin === true ? 'anonymous' : crossorigin;
+                    chain
+                        .plugin(CHAIN_ID.PLUGIN.HTML_CROSS_ORIGIN)
+                        .use(HtmlCrossOriginPlugin, [
+                        { crossOrigin: formattedCrossorigin, HtmlPlugin },
+                    ]);
+                    // todo: not support in rspack
+                    // @ts-expect-error
+                    chain.output.crossOriginLoading(formattedCrossorigin);
+                }
+                if (faviconUrls.length) {
+                    const { HtmlFaviconUrlPlugin } = await Promise.resolve().then(() => __importStar(require('@modern-js/builder-shared')));
+                    chain
+                        .plugin(CHAIN_ID.PLUGIN.FAVICON_URL)
+                        .use(HtmlFaviconUrlPlugin, [{ faviconUrls, HtmlPlugin }]);
+                }
+                if (appIcon) {
+                    const { HtmlAppIconPlugin } = await Promise.resolve().then(() => __importStar(require('@modern-js/builder-shared')));
+                    const distDir = (0, builder_shared_1.getDistPath)(config.output, 'image');
+                    const iconPath = path_1.default.isAbsolute(appIcon)
+                        ? appIcon
+                        : path_1.default.join(api.context.rootPath, appIcon);
+                    chain
+                        .plugin(CHAIN_ID.PLUGIN.APP_ICON)
+                        .use(HtmlAppIconPlugin, [{ iconPath, distDir, HtmlPlugin }]);
+                }
+            }
+        });
+        api.onBeforeStartDevServer(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
+            // 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));
+            }
+        });
+        (0, exports.applyInjectTags)(api);
+    },
+});
+exports.builderPluginHtml = builderPluginHtml;

package/dist/plugins/index.d.ts

@@ -1,4 +1,5 @@
 export declare const plugins: {
+    html: () => Promise<import("@modern-js/builder-shared").DefaultBuilderPlugin>;
     cleanOutput: () => Promise<import("@modern-js/builder-shared").DefaultBuilderPlugin>;
     startUrl: () => Promise<import("@modern-js/builder-shared").DefaultBuilderPlugin>;
     fileSize: () => Promise<import("@modern-js/builder-shared").DefaultBuilderPlugin>;
@@ -10,6 +11,7 @@ export declare const plugins: {
     toml: () => Promise<import("@modern-js/builder-shared").DefaultBuilderPlugin>;
     svg: () => Promise<import("@modern-js/builder-shared").DefaultBuilderPlugin>;
     splitChunks: () => Promise<import("@modern-js/builder-shared").DefaultBuilderPlugin>;
+    inlineChunk: () => Promise<import("@modern-js/builder-shared").DefaultBuilderPlugin>;
     bundleAnalyzer: () => Promise<import("@modern-js/builder-shared").DefaultBuilderPlugin>;
     font: () => Promise<import("@modern-js/builder-shared").DefaultBuilderPlugin>;
     image: () => Promise<import("@modern-js/builder-shared").DefaultBuilderPlugin>;

package/dist/plugins/index.js

@@ -26,6 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.plugins = void 0;
 const builder_shared_1 = require("@modern-js/builder-shared");
 exports.plugins = {
+    html: () => Promise.resolve().then(() => __importStar(require('./html'))).then(m => m.builderPluginHtml()),
     cleanOutput: () => Promise.resolve().then(() => __importStar(require('./cleanOutput'))).then(m => m.builderPluginCleanOutput()),
     startUrl: () => Promise.resolve().then(() => __importStar(require('./startUrl'))).then(m => m.builderPluginStartUrl()),
     fileSize: () => Promise.resolve().then(() => __importStar(require('./fileSize'))).then(m => m.builderPluginFileSize()),
@@ -37,6 +38,7 @@ exports.plugins = {
     toml: () => Promise.resolve().then(() => __importStar(require('./toml'))).then(m => m.builderPluginToml()),
     svg: () => Promise.resolve().then(() => __importStar(require('./svg'))).then(m => m.builderPluginSvg()),
     splitChunks: () => Promise.resolve().then(() => __importStar(require('./splitChunks'))).then(m => m.builderPluginSplitChunks()),
+    inlineChunk: () => Promise.resolve().then(() => __importStar(require('./inlineChunk'))).then(m => m.builderPluginInlineChunk()),
     bundleAnalyzer: () => Promise.resolve().then(() => __importStar(require('./bundleAnalyzer'))).then(m => m.builderPluginBundleAnalyzer()),
     font: () => Promise.resolve().then(() => __importStar(require('./asset'))).then(m => m.builderAssetPlugin('font', builder_shared_1.FONT_EXTENSIONS)),
     image: () => Promise.resolve().then(() => __importStar(require('./asset'))).then(m => m.builderAssetPlugin('image', builder_shared_1.IMAGE_EXTENSIONS)),

package/dist/plugins/inlineChunk.d.ts

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

package/dist/plugins/inlineChunk.js

@@ -0,0 +1,57 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.builderPluginInlineChunk = void 0;
+const builder_shared_1 = require("@modern-js/builder-shared");
+const builderPluginInlineChunk = () => ({
+    name: 'builder-plugin-inline-chunk',
+    setup(api) {
+        api.modifyBundlerChain(async (chain, { target, CHAIN_ID, isProd, HtmlPlugin }) => {
+            const config = api.getNormalizedConfig();
+            if ((0, builder_shared_1.isHtmlDisabled)(config, target) || !isProd) {
+                return;
+            }
+            const { InlineChunkHtmlPlugin } = await Promise.resolve().then(() => __importStar(require('@modern-js/builder-shared')));
+            const { disableInlineRuntimeChunk, enableInlineStyles, 
+            // todo: not support enableInlineScripts in rspack yet, which will take unknown build error
+            enableInlineScripts, } = config.output;
+            chain.plugin(CHAIN_ID.PLUGIN.INLINE_HTML).use(InlineChunkHtmlPlugin, [
+                HtmlPlugin,
+                {
+                    tests: [
+                        enableInlineScripts && /\.js$/,
+                        enableInlineStyles && /\.css$/,
+                        !disableInlineRuntimeChunk &&
+                            // RegExp like /builder-runtime([.].+)?\.js$/
+                            // matches builder-runtime.js and builder-runtime.123456.js
+                            new RegExp(`${builder_shared_1.RUNTIME_CHUNK_NAME}([.].+)?\\.js$`),
+                    ].filter(Boolean),
+                    distPath: (0, builder_shared_1.pick)(config.output.distPath, ['js', 'css']),
+                },
+            ]);
+        });
+    },
+});
+exports.builderPluginInlineChunk = builderPluginInlineChunk;

package/dist/plugins/splitChunks.d.ts

@@ -1,2 +1,4 @@
 import { DefaultBuilderPlugin } from '@modern-js/builder-shared';
+/** Expect to match path just like "./node_modules/react-router/" */
+export declare const createDependenciesRegExp: (...dependencies: string[]) => RegExp;
 export declare function builderPluginSplitChunks(): DefaultBuilderPlugin;

package/dist/plugins/splitChunks.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.builderPluginSplitChunks = void 0;
+exports.builderPluginSplitChunks = exports.createDependenciesRegExp = void 0;
 const assert_1 = __importDefault(require("assert"));
 const builder_shared_1 = require("@modern-js/builder-shared");
 function getUserDefinedCacheGroups(forceSplitting) {
@@ -43,28 +43,31 @@ function getUserDefinedCacheGroups(forceSplitting) {
     });
     return cacheGroups;
 }
+/** Expect to match path just like "./node_modules/react-router/" */
+const createDependenciesRegExp = (...dependencies) => new RegExp(`[\\\\/]node_modules[\\\\/](${dependencies.join('|')})[\\\\/]`);
+exports.createDependenciesRegExp = createDependenciesRegExp;
 async function splitByExperience(ctx) {
     const { isPackageInstalled } = await Promise.resolve().then(() => __importStar(require('@modern-js/utils')));
     const { override, polyfill, rootPath, defaultConfig, userDefinedCacheGroups, } = ctx;
     const experienceCacheGroup = {};
     const packageRegExps = {
-        react: /[\\/]react|react-dom[\\/]/,
-        router: /[\\/]react-router|react-router-dom|history[\\/]/,
-        lodash: /[\\/]lodash|lodash-es[\\/]/,
+        react: (0, exports.createDependenciesRegExp)('react', 'react-dom'),
+        router: (0, exports.createDependenciesRegExp)('react-router', 'react-router-dom', 'history'),
+        lodash: (0, exports.createDependenciesRegExp)('lodash', 'lodash-es'),
     };
     // Detect if the package is installed in current project
     // If installed, add the package to cache group
     if (isPackageInstalled('antd', rootPath)) {
-        packageRegExps.antd = /[\\/]antd[\\/]/;
+        packageRegExps.antd = (0, exports.createDependenciesRegExp)('antd');
     }
     if (isPackageInstalled('@arco-design/web-react', rootPath)) {
-        packageRegExps.arco = /[\\/]arco-design[\\/]/;
+        packageRegExps.arco = (0, exports.createDependenciesRegExp)('arco-design');
     }
     if (isPackageInstalled('@douyinfe/semi-ui', rootPath)) {
-        packageRegExps.semi = /[\\/]semi-ui[\\/]/;
+        packageRegExps.semi = (0, exports.createDependenciesRegExp)('semi-ui');
     }
     if (polyfill === 'entry' || polyfill === 'usage') {
-        packageRegExps.polyfill = /[\\/]core-js|@babel\/runtime[\\/]/;
+        packageRegExps.polyfill = (0, exports.createDependenciesRegExp)('core-js', '@babel/runtime');
     }
     Object.entries(packageRegExps).forEach(([name, test]) => {
         const key = `lib-${name}`;

package/dist/plugins/startUrl.js

@@ -44,7 +44,7 @@ function builderPluginStartUrl() {
                     return;
                 }
                 const config = api.getNormalizedConfig();
-                const { https, startUrl } = config.dev;
+                const { https, startUrl, beforeStartUrl } = config.dev;
                 if (!startUrl) {
                     return;
                 }
@@ -56,16 +56,25 @@ function builderPluginStartUrl() {
                 else {
                     urls.push(...lodash_1.default.castArray(startUrl).map(item => (0, exports.replacePlaceholder)(item, port)));
                 }
+                const { ensureArray } = await Promise.resolve().then(() => __importStar(require('@modern-js/utils')));
                 const { openBrowser } = await Promise.resolve().then(() => __importStar(require('@modern-js/builder-shared')));
-                for (const url of urls) {
-                    /**
-                     * If a URL has been opened in current process, we will not open it again.
-                     * It can prevent opening the same URL multiple times.
-                     */
-                    if (!openedURLs.includes(url)) {
-                        await openBrowser(url);
-                        openedURLs.push(url);
+                const openUrls = () => {
+                    for (const url of urls) {
+                        /**
+                         * If a URL has been opened in current process, we will not open it again.
+                         * It can prevent opening the same URL multiple times.
+                         */
+                        if (!openedURLs.includes(url)) {
+                            openBrowser(url);
+                            openedURLs.push(url);
+                        }
                     }
+                };
+                if (beforeStartUrl) {
+                    Promise.all(ensureArray(beforeStartUrl).map(fn => fn())).then(openUrls);
+                }
+                else {
+                    openUrls();
                 }
             });
         },

package/package.json

@@ -14,7 +14,7 @@
   "engines": {
     "node": ">=14.0.0"
   },
-  "version": "2.5.0",
+  "version": "2.7.0",
   "jsnext:source": "./src/index.ts",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
@@ -27,8 +27,8 @@
   },
   "dependencies": {
     "@svgr/webpack": "6.5.1",
-    "@modern-js/builder-shared": "2.5.0",
-    "@modern-js/utils": "2.5.0"
+    "@modern-js/builder-shared": "2.7.0",
+    "@modern-js/utils": "2.7.0"
   },
   "devDependencies": {
     "@babel/core": "7.18.0",
@@ -36,7 +36,7 @@
     "@types/babel__preset-env": "^7.9.2",
     "@types/node": "^14",
     "typescript": "^4",
-    "@scripts/vitest-config": "2.5.0"
+    "@scripts/vitest-config": "2.7.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",