@modern-js/builder 2.0.0-beta.3 → 2.0.0-beta.6

package/dist/createBuilder.d.ts

@@ -1,2 +1,2 @@
 import { type BuilderInstance, type BuilderProvider, type CreateBuilderOptions } from '@modern-js/builder-shared';
-export declare function createBuilder(provider: BuilderProvider, options: CreateBuilderOptions): Promise<BuilderInstance>;
+export declare function createBuilder<P extends BuilderProvider = BuilderProvider>(provider: P, options: CreateBuilderOptions): Promise<BuilderInstance<P>>;

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, publicContext, inspectConfig, createCompiler, startDevServer, applyDefaultPlugins, } = await provider({
+    const { build, pluginAPI, publicContext, initConfigs, inspectConfig, createCompiler, startDevServer, applyDefaultPlugins, } = await provider({
         pluginStore,
         builderOptions,
         plugins: plugins_1.plugins,
@@ -16,8 +16,22 @@ async function createBuilder(provider, options) {
     (0, builder_shared_1.debug)('add default plugins done');
     return {
         ...(0, builder_shared_1.pick)(pluginStore, ['addPlugins', 'removePlugins', 'isPluginExists']),
+        ...(0, builder_shared_1.pick)(pluginAPI, [
+            'onBeforeBuild',
+            'onBeforeCreateCompiler',
+            'onBeforeStartDevServer',
+            'onAfterBuild',
+            'onAfterCreateCompiler',
+            'onAfterStartDevServer',
+            'onDevCompileDone',
+            'onExit',
+            'getHTMLPaths',
+            'getBuilderConfig',
+            'getNormalizedConfig',
+        ]),
         build,
         createCompiler,
+        initConfigs,
         inspectConfig,
         startDevServer,
         context: publicContext,

package/dist/index.d.ts

@@ -1,3 +1,3 @@
 export { createBuilder } from './createBuilder';
 export { mergeBuilderConfig } from '@modern-js/builder-shared';
-export type { BuilderMode, BuilderEntry, BuilderTarget, BuilderPlugin, BuilderContext, BuilderInstance, CreateBuilderOptions, InspectConfigOptions, } from '@modern-js/builder-shared';
+export type { BuilderMode, BuilderEntry, BuilderTarget, BuilderPlugin, BuilderContext, BuilderInstance, CreateBuilderOptions, InspectConfigOptions, OnExitFn, OnAfterBuildFn, OnAfterCreateCompilerFn, OnAfterStartDevServerFn, OnBeforeBuildFn, OnBeforeStartDevServerFn, OnBeforeCreateCompilerFn, OnDevCompileDoneFn, ModifyBuilderConfigFn, } from '@modern-js/builder-shared';

package/dist/plugins/devtool.d.ts

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

package/dist/plugins/devtool.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PluginDevtool = void 0;
+const builder_shared_1 = require("@modern-js/builder-shared");
+const PluginDevtool = () => ({
+    name: 'builder-plugin-devtool',
+    setup(api) {
+        api.modifyBundlerChain((chain, { isProd }) => {
+            const config = api.getNormalizedConfig();
+            if (!(0, builder_shared_1.isUseJsSourceMap)(config)) {
+                chain.devtool(false);
+            }
+            else {
+                const devtool = isProd
+                    ? // hide the source map URL in production to avoid Chrome warning
+                        'hidden-source-map'
+                    : 'cheap-module-source-map';
+                chain.devtool(devtool);
+            }
+        });
+    },
+});
+exports.PluginDevtool = PluginDevtool;

package/dist/plugins/fileSize.d.ts

@@ -0,0 +1,4 @@
+import type { DefaultBuilderPlugin } from '@modern-js/builder-shared';
+/** Filter source map files */
+export declare const filterAsset: (asset: string) => boolean;
+export declare const PluginFileSize: () => DefaultBuilderPlugin;

package/dist/plugins/fileSize.js

@@ -0,0 +1,130 @@
+"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.PluginFileSize = exports.filterAsset = void 0;
+/**
+ * modified from https://github.com/facebook/create-react-app
+ * license at https://github.com/facebook/create-react-app/blob/master/LICENSE
+ */
+const path_1 = __importDefault(require("path"));
+const chalk_1 = __importDefault(require("@modern-js/utils/chalk"));
+const builder_shared_1 = require("@modern-js/builder-shared");
+/** Filter source map files */
+const filterAsset = (asset) => !/\.map$/.test(asset);
+exports.filterAsset = filterAsset;
+const getAssetColor = (size) => {
+    if (size > 300 * 1000) {
+        return chalk_1.default.bold.red;
+    }
+    if (size > 100 * 1000) {
+        return chalk_1.default.yellow;
+    }
+    return chalk_1.default.green;
+};
+async function printHeader(longestFileLength, longestLabelLength) {
+    const longestLengths = [longestFileLength, longestLabelLength];
+    const headerRow = ['File', 'Size', 'Gzipped'].reduce((prev, cur, index) => {
+        const length = longestLengths[index];
+        let curLabel = cur;
+        if (length) {
+            curLabel =
+                cur.length < length ? cur + ' '.repeat(length - cur.length) : cur;
+        }
+        return `${prev + curLabel}    `;
+    }, '  ');
+    builder_shared_1.logger.log(chalk_1.default.bold(chalk_1.default.blue(headerRow)));
+}
+async function printFileSizes(stats, distPath) {
+    const { fs, filesize, gzipSize, stripAnsi } = await Promise.resolve().then(() => __importStar(require('@modern-js/utils')));
+    const formatAsset = (asset) => {
+        const contents = fs.readFileSync(path_1.default.join(distPath, asset.name));
+        const size = contents.length;
+        const gzippedSize = gzipSize.sync(contents);
+        return {
+            size,
+            folder: path_1.default.join(path_1.default.basename(distPath), path_1.default.dirname(asset.name)),
+            name: path_1.default.basename(asset.name),
+            gzippedSize,
+            sizeLabel: filesize(size),
+            gzipSizeLabel: getAssetColor(gzippedSize)(filesize(gzippedSize)),
+        };
+    };
+    const multiStats = 'stats' in stats ? stats.stats : [stats];
+    const assets = multiStats
+        .map(stats => {
+        const origin = stats.toJson({
+            all: true,
+            assets: true,
+            groupAssetsByInfo: false,
+            groupAssetsByPath: false,
+            groupAssetsByChunk: false,
+            groupAssetsByExtension: false,
+            groupAssetsByEmitStatus: false,
+        });
+        const filteredAssets = origin.assets.filter(asset => (0, exports.filterAsset)(asset.name));
+        return filteredAssets.map(formatAsset);
+    })
+        .reduce((single, all) => all.concat(single), []);
+    if (assets.length === 0) {
+        return;
+    }
+    assets.sort((a, b) => b.size - a.size);
+    const longestLabelLength = Math.max(...assets.map(a => stripAnsi(a.sizeLabel).length));
+    const longestFileLength = Math.max(...assets.map(a => stripAnsi(a.folder + path_1.default.sep + a.name).length));
+    builder_shared_1.logger.info(`File sizes after production build:\n`);
+    printHeader(longestFileLength, longestLabelLength);
+    assets.forEach(asset => {
+        let { sizeLabel } = asset;
+        const { name, folder, gzipSizeLabel } = asset;
+        const fileNameLength = stripAnsi(folder + path_1.default.sep + name).length;
+        const sizeLength = stripAnsi(sizeLabel).length;
+        if (sizeLength < longestLabelLength) {
+            const rightPadding = ' '.repeat(longestLabelLength - sizeLength);
+            sizeLabel += rightPadding;
+        }
+        let fileNameLabel = chalk_1.default.dim(asset.folder + path_1.default.sep) + chalk_1.default.cyan(asset.name);
+        if (fileNameLength < longestFileLength) {
+            const rightPadding = ' '.repeat(longestFileLength - fileNameLength);
+            fileNameLabel += rightPadding;
+        }
+        builder_shared_1.logger.log(`  ${fileNameLabel}    ${sizeLabel}    ${gzipSizeLabel}`);
+    });
+    builder_shared_1.logger.log('');
+}
+const PluginFileSize = () => ({
+    name: 'builder-plugin-file-size',
+    setup(api) {
+        api.onAfterBuild(async ({ stats }) => {
+            const config = api.getNormalizedConfig();
+            if (config.performance.printFileSize && stats) {
+                await printFileSizes(stats, api.context.distPath);
+            }
+        });
+    },
+});
+exports.PluginFileSize = PluginFileSize;

package/dist/plugins/index.d.ts

@@ -1,4 +1,7 @@
 export declare const plugins: {
     cleanOutput: () => Promise<import("@modern-js/builder-shared").DefaultBuilderPlugin>;
     startUrl: () => Promise<import("@modern-js/builder-shared").DefaultBuilderPlugin>;
+    fileSize: () => Promise<import("@modern-js/builder-shared").DefaultBuilderPlugin>;
+    devtool: () => Promise<import("@modern-js/builder-shared").DefaultBuilderPlugin>;
+    target: () => Promise<import("@modern-js/builder-shared").DefaultBuilderPlugin>;
 };

package/dist/plugins/index.js

@@ -27,4 +27,7 @@ exports.plugins = void 0;
 exports.plugins = {
     cleanOutput: () => Promise.resolve().then(() => __importStar(require('./cleanOutput'))).then(m => m.PluginCleanOutput()),
     startUrl: () => Promise.resolve().then(() => __importStar(require('./startUrl'))).then(m => m.PluginStartUrl()),
+    fileSize: () => Promise.resolve().then(() => __importStar(require('./fileSize'))).then(m => m.PluginFileSize()),
+    devtool: () => Promise.resolve().then(() => __importStar(require('./devtool'))).then(m => m.PluginDevtool()),
+    target: () => Promise.resolve().then(() => __importStar(require('./target'))).then(m => m.PluginTarget()),
 };

package/dist/plugins/target.d.ts

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

package/dist/plugins/target.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PluginTarget = void 0;
+const builder_shared_1 = require("@modern-js/builder-shared");
+const PluginTarget = () => ({
+    name: 'builder-plugin-target',
+    setup(api) {
+        api.modifyBundlerChain(async (chain, { target }) => {
+            if (target === 'node') {
+                chain.target('node');
+                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'] });
+            }
+            else if (target === 'modern-web') {
+                chain.merge({ target: [basicTarget, 'es2015'] });
+            }
+            else {
+                chain.merge({ target: [basicTarget, 'es5'] });
+            }
+        });
+    },
+});
+exports.PluginTarget = PluginTarget;

package/package.json

@@ -14,7 +14,7 @@
   "engines": {
     "node": ">=14.0.0"
   },
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta.6",
   "jsnext:source": "./src/index.ts",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
@@ -27,8 +27,8 @@
     }
   },
   "dependencies": {
-    "@modern-js/builder-shared": "2.0.0-beta.3",
-    "@modern-js/utils": "2.0.0-beta.3"
+    "@modern-js/builder-shared": "2.0.0-beta.6",
+    "@modern-js/utils": "2.0.0-beta.6"
   },
   "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.0.0-beta.3"
+    "@scripts/vitest-config": "2.0.0-beta.6"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

package/vitest.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vitest/config';
+import { withTestPreset } from '@scripts/vitest-config';
+import path from 'path';
+
+const config = defineConfig({
+  resolve: {
+    alias: {
+      '~': path.resolve(__dirname),
+      '@': path.resolve(__dirname, 'src'),
+    }
+  },
+  test: {
+    root: __dirname,
+    environment: 'node',
+  },
+});
+
+export default withTestPreset(config);