@flatjs/evolve 2.1.0-next.4 → 2.1.0-next.5

package/dist/constants.js

@@ -1 +1,26 @@
-export const moduleName="@flatjs/evolve";export const configFileName="flatjs-evolve";export const viewportScripts='(function(d){var j;var b=1;var i=1;var h=750;var c=100;function e(s,o){var q=d.document;var l=q.documentElement;var k=navigator.userAgent;var m=k.toLowerCase().indexOf("android")>-1;i=d.devicePixelRatio||1;if(i>3){i=3}if(m){i=1}console.log("current devicePixelRatio:",i);l.setAttribute("data-dpr",i.toString());var p=q.querySelector(\'meta[name="viewport"]\');if(!p){b=1/i;p=q.createElement("meta");p.setAttribute("name","viewport");q.head.appendChild(p);p.setAttribute(["content","width=device-width,user-scalable=no,initial-scale=",b,",maximum-scale=",b,",minimum-scale=",b].join(""))}function n(){var t=document.documentElement.clientWidth;j=t/o*(s/i)*i;q.documentElement.style.fontSize=String(j)+"px"}var r;d.addEventListener("resize",function(){clearTimeout(r);r=setTimeout(n,300)},false);d.addEventListener("onload",n,false);n()}e(c,h);window.fabricViewport={currRem:j,currDpr:i,currScale:b,dpiPX2px:function f(k){return parseFloat(k.toString())/j*100+"px"},px2DPIpx:function a(k){return parseFloat(k.toString())/100*j+"px"},px2rem:function g(k){return parseFloat(k.toString())/100+"rem"}}})(window);';export const polyfill=["https://polyfill.io/v3/polyfill.min.js?features=Array.from%2CArray.isArray%2CArray.of%2CArray.prototype.entries%2CArray.prototype.every%2CArray.prototype.fill%2CArray.prototype.filter%2CArray.prototype.find%2CArray.prototype.findIndex%2CArray.prototype.flat%2CArray.prototype.forEach%2CArray.prototype.flatMap%2CArray.prototype.keys%2CArray.prototype.indexOf%2CArray.prototype.includes%2CArray.prototype.lastIndexOf%2CArray.prototype.map%2CArray.prototype.reduce%2CArray.prototype.reduceRight%2CArray.prototype.some%2CArray.prototype.sort%2CArray.prototype.values%2CArrayBuffer%2CBlob%2CDataView%2CDate.now%2CObject.assign%2CObject.create%2CObject.defineProperties%2CObject.defineProperty%2CObject.entries%2CObject.freeze%2CObject.fromEntries%2CObject.getOwnPropertySymbols%2CObject.getOwnPropertyNames%2CObject.getOwnPropertyDescriptors%2CObject.getOwnPropertyDescriptor%2CObject.getPrototypeOf%2CObject.is%2CObject.isExtensible%2CObject.isFrozen%2CObject.isSealed%2CObject.keys%2CObject.values%2CObject.setPrototypeOf%2CPromise%2CPromise.prototype.finally%2CReflect%2CReflect.apply%2CReflect.construct%2CReflect.defineProperty%2CReflect.deleteProperty%2CReflect.getPrototypeOf%2CReflect.getOwnPropertyDescriptor%2CReflect.get%2CReflect.ownKeys%2CReflect.isExtensible%2CReflect.has%2CReflect.preventExtensions%2CReflect.set%2CReflect.setPrototypeOf%2CSet%2CString.prototype.trimStart%2CString.prototype.trimEnd%2CString.prototype.trim%2CString.prototype.startsWith%2CString.prototype.repeat%2CString.prototype.replaceAll%2CString.prototype.padStart%2CString.prototype.padEnd%2CMap%2CObject.seal%2Cconsole.groupEnd%2Cconsole.group"];export const devReactFastRefresh={runtime:"reactRefreshRuntime",reactRefreshSetup:"reactRefreshSetup"};
+export const moduleName = `@flatjs/evolve`;
+/**
+ * the configuration file of `flat-evolve`
+ * flatjs-evolve.config.ts,.mjs,.mts
+ */
+export const configFileName = `flatjs-evolve`;
+/**
+ * `viewport.js`, Used to support the mobile `rem` adaptive solution.
+ *  The viewport code is dynamically inserted to `html` file via `html-plugin`
+ */
+export const viewportScripts = `(function(d){var j;var b=1;var i=1;var h=750;var c=100;function e(s,o){var q=d.document;var l=q.documentElement;var k=navigator.userAgent;var m=k.toLowerCase().indexOf("android")>-1;i=d.devicePixelRatio||1;if(i>3){i=3}if(m){i=1}console.log("current devicePixelRatio:",i);l.setAttribute("data-dpr",i.toString());var p=q.querySelector('meta[name="viewport"]');if(!p){b=1/i;p=q.createElement("meta");p.setAttribute("name","viewport");q.head.appendChild(p);p.setAttribute(["content","width=device-width,user-scalable=no,initial-scale=",b,",maximum-scale=",b,",minimum-scale=",b].join(""))}function n(){var t=document.documentElement.clientWidth;j=t/o*(s/i)*i;q.documentElement.style.fontSize=String(j)+"px"}var r;d.addEventListener("resize",function(){clearTimeout(r);r=setTimeout(n,300)},false);d.addEventListener("onload",n,false);n()}e(c,h);window.fabricViewport={currRem:j,currDpr:i,currScale:b,dpiPX2px:function f(k){return parseFloat(k.toString())/j*100+"px"},px2DPIpx:function a(k){return parseFloat(k.toString())/100*j+"px"},px2rem:function g(k){return parseFloat(k.toString())/100+"rem"}}})(window);`;
+/**
+ * https://polyfill.io
+ */
+export const polyfill = [
+    `https://polyfill.io/v3/polyfill.min.js?features=Array.from%2CArray.isArray%2CArray.of%2CArray.prototype.entries%2CArray.prototype.every%2CArray.prototype.fill%2CArray.prototype.filter%2CArray.prototype.find%2CArray.prototype.findIndex%2CArray.prototype.flat%2CArray.prototype.forEach%2CArray.prototype.flatMap%2CArray.prototype.keys%2CArray.prototype.indexOf%2CArray.prototype.includes%2CArray.prototype.lastIndexOf%2CArray.prototype.map%2CArray.prototype.reduce%2CArray.prototype.reduceRight%2CArray.prototype.some%2CArray.prototype.sort%2CArray.prototype.values%2CArrayBuffer%2CBlob%2CDataView%2CDate.now%2CObject.assign%2CObject.create%2CObject.defineProperties%2CObject.defineProperty%2CObject.entries%2CObject.freeze%2CObject.fromEntries%2CObject.getOwnPropertySymbols%2CObject.getOwnPropertyNames%2CObject.getOwnPropertyDescriptors%2CObject.getOwnPropertyDescriptor%2CObject.getPrototypeOf%2CObject.is%2CObject.isExtensible%2CObject.isFrozen%2CObject.isSealed%2CObject.keys%2CObject.values%2CObject.setPrototypeOf%2CPromise%2CPromise.prototype.finally%2CReflect%2CReflect.apply%2CReflect.construct%2CReflect.defineProperty%2CReflect.deleteProperty%2CReflect.getPrototypeOf%2CReflect.getOwnPropertyDescriptor%2CReflect.get%2CReflect.ownKeys%2CReflect.isExtensible%2CReflect.has%2CReflect.preventExtensions%2CReflect.set%2CReflect.setPrototypeOf%2CSet%2CString.prototype.trimStart%2CString.prototype.trimEnd%2CString.prototype.trim%2CString.prototype.startsWith%2CString.prototype.repeat%2CString.prototype.replaceAll%2CString.prototype.padStart%2CString.prototype.padEnd%2CMap%2CObject.seal%2Cconsole.groupEnd%2Cconsole.group`,
+];
+/**
+ * Applies the react-refresh Babel plugin on non-production modes only
+ * Ensure `react-refresh/runtime` is hoisted and shared
+ * https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/docs/TROUBLESHOOTING.md#externalising-react
+ */
+export const devReactFastRefresh = {
+    runtime: `reactRefreshRuntime`,
+    reactRefreshSetup: `reactRefreshSetup`,
+};

package/dist/create-webpack/create-externals.js

@@ -1 +1,6 @@
-import{mergeOptions}from"@flatjs/common";export const createExternals=(t={},e)=>{const o=e[1],r=o.options?.externals||{};return mergeOptions(t,r)};
+import { mergeOptions } from '@flatjs/common';
+export const createExternals = (externals = {}, entryItem) => {
+    const entryItemContent = entryItem[1];
+    const entryItemExternals = entryItemContent.options?.externals || {};
+    return mergeOptions(externals, entryItemExternals);
+};

package/dist/create-webpack/create-optimization.js

@@ -1 +1,41 @@
-import{join}from"node:path";import{devReactFastRefresh}from"../constants.js";import{shouldEnableReactFastRefresh}from"../helpers/should-enable-react-fast-refresh.js";import{createMinimizers}from"../minimizer/index.js";export const createOptimization=(e,i,n)=>({nodeEnv:e?"development":"production",chunkIds:"named",moduleIds:"named",runtimeChunk:!!shouldEnableReactFastRefresh(e,n,i)&&{name:()=>join(n[0],devReactFastRefresh.runtime)},minimize:!1!==i.webpack?.minimizer&&!e,minimizer:createMinimizers(e,i.webpack),splitChunks:{name:!1,chunks:"all",minSize:25e5,cacheGroups:{default:!1,defaultVendors:!1}}});
+import { join } from 'node:path';
+import { devReactFastRefresh } from '../constants.js';
+import { shouldEnableReactFastRefresh } from '../helpers/should-enable-react-fast-refresh.js';
+import { createMinimizers } from '../minimizer/index.js';
+export const createOptimization = (serveMode, evolveOptions, entryItem) => {
+    // Indicates current we use `hot` mode for `webpack-dev-server` hot reload true.
+    const enabledHmr = shouldEnableReactFastRefresh(serveMode, entryItem, evolveOptions);
+    const webpackOptimization = {
+        nodeEnv: serveMode ? 'development' : 'production',
+        chunkIds: 'named',
+        moduleIds: 'named',
+        // Ensure `react-refresh/runtime` is hoisted and shared, Could be replicated via a vendors chunk
+        // NOTE: This is only for `HMR` mode, if we have no `HMR` mode, we should not use this! it always be `false`
+        runtimeChunk: enabledHmr
+            ? {
+                name: () => join(entryItem[0], devReactFastRefresh.runtime),
+            }
+            : false,
+        // This is true in production mode. Tell webpack to minimize the bundle using the TerserPlugin
+        minimize: evolveOptions.webpack?.minimizer !== false && !serveMode,
+        // Note: the `minimizer` will executed must be wait until `minimize` is `true`
+        minimizer: createMinimizers(serveMode, evolveOptions.webpack),
+        // Disabled WARNING in webpack while chunk exceed the recommended size limit for `serve`
+        splitChunks: {
+            // It is recommended to set splitChunks.name to false for production builds
+            // so that it doesn't change names unnecessarily.
+            name: false,
+            // include all types of chunks
+            // chunks: 'async',
+            chunks: 'all',
+            // 2.3841858(MB)
+            minSize: 2500000,
+            // disable vendors~loadsh.js...
+            cacheGroups: {
+                default: false,
+                defaultVendors: false,
+            },
+        },
+    };
+    return webpackOptimization;
+};

package/dist/create-webpack/create-output.js

@@ -1 +1,35 @@
-import{join}from"node:path";import{getBundleFileName}from"../helpers/get-bundle-file-name.js";import{resolvePublicPath}from"./resolve-public-path.js";export const createOutput=async(e,t,o)=>{const{projectCwd:n,webpack:a}=t,i=o[1],p=resolvePublicPath(t),u="function"==typeof a?.outputDir?await a.outputDir():a?.outputDir||"public";return{devtoolModuleFilenameTemplate:({namespace:e,resourcePath:t})=>`webpack:///${join(e,t)}`,environment:{},pathinfo:!1,path:join(n,u),publicPath:p,filename:`[name]/${getBundleFileName("js",e,a?.enableBundleHashName)}`,chunkFilename:"[id].[contenthash].js",...i.options?.output}};
+import { join } from 'node:path';
+import { getBundleFileName } from '../helpers/get-bundle-file-name.js';
+import { resolvePublicPath } from './resolve-public-path.js';
+export const createOutput = async (serveMode, evolveOptions, entryItem) => {
+    const { projectCwd, webpack } = evolveOptions;
+    const entryItemOption = entryItem[1];
+    // If we have customized publicPath, should be converted to `https://cdn.example.com/assets/`, `/assets/`
+    const publicPath = resolvePublicPath(evolveOptions);
+    // Allow us dynamic return `outputDir`, e.g dev_xxxx, we can create built directory via `branchName`
+    const outputDir = typeof webpack?.outputDir === 'function'
+        ? await webpack.outputDir()
+        : webpack?.outputDir || 'public';
+    const webpackOutput = {
+        // Formatting devtool sourcemap template file.
+        devtoolModuleFilenameTemplate: ({ namespace, resourcePath }) => {
+            return `webpack:///${join(namespace, resourcePath)}`;
+        },
+        // Replace output.ecmaVersion with output.environment and more detailed
+        environment: {},
+        // Include comments with information about the modules, Disable it can improved performance.
+        pathinfo: false,
+        // The output directory as an absolute path.
+        path: join(projectCwd, outputDir),
+        // The publicPath specifies the public URL address of the output files when referenced in a browser.
+        publicPath,
+        // Specifies the name of each output file on disk. You must not specify an absolute path here!
+        filename: `[name]/${getBundleFileName('js', serveMode, webpack?.enableBundleHashName)}`,
+        // hotUpdateMainFilename: '[runtime].[fullhash].hot-update.json',
+        // The filename of non-entry chunks as relative path inside the output.path directory.
+        chunkFilename: `[id].[contenthash].js`,
+        // Extends / overrides the default output configuration
+        ...entryItemOption.options?.output,
+    };
+    return webpackOutput;
+};

package/dist/create-webpack/create-performance.js

@@ -1 +1,7 @@
-export const createPerformance=(n,e={})=>{const r={hints:!n&&"warning"};return Object.assign(r,e)};
+export const createPerformance = (serveMode, performanceOptions = {}) => {
+    const basePerformance = {
+        // Disable entry size exceeds recommands warning for `serve` mode
+        hints: serveMode ? false : 'warning',
+    };
+    return Object.assign(basePerformance, performanceOptions);
+};

package/dist/create-webpack/create-plugins.js

@@ -1 +1,77 @@
-import{logger}from"@flatjs/common";import ReactRefreshWebpackPlugin from"@pmmmwh/react-refresh-webpack-plugin";import CaseSensitivePathsPlugin from"case-sensitive-paths-webpack-plugin";import ForkTsCheckerWebpackPlugin from"fork-ts-checker-webpack-plugin";import MiniCssExtractPlugin from"mini-css-extract-plugin";import webpack from"webpack";import{BundleAnalyzerPlugin}from"webpack-bundle-analyzer";import{enableBundleHashNameForModule}from"../helpers/enable-bundle-hashname-for-module.js";import{getBundleFileName}from"../helpers/get-bundle-file-name.js";import{shouldEnableReactFastRefresh}from"../helpers/should-enable-react-fast-refresh.js";import{createCircularDependencyPlugin}from"../plugins/circular-dependency/index.js";import{createCleanWebpackPlugin}from"../plugins/clean-webpack/index.js";import{createBuiltinDefineVariables}from"../plugins/define-variable/index.js";import{createModuleFederationPlugin}from"../plugins/module-federation/index.js";import{createHtmlPlugins}from"../plugins/multi-html/index.js";export const createPlugins=async(e,n,a)=>{const[r,i]=n,l=enableBundleHashNameForModule(a,i?.options),t=[new webpack.WatchIgnorePlugin({paths:[/\.d\.[cm]ts$/]}),new CaseSensitivePathsPlugin,...createCircularDependencyPlugin(e,a),new MiniCssExtractPlugin({filename:`[name]/${getBundleFileName("css",e,l)}`,chunkFilename:"[id].[contenthash].css"}),...await createBuiltinDefineVariables(e,a),...createCleanWebpackPlugin(e,n,a),...createModuleFederationPlugin(e,n,a),...createHtmlPlugins(e,n,a)],{analyzer:s,loaderOptions:o}=a,c=(n[1].entry||[]).find((e=>/.vue$/.test(e)));o.runTsChecker&&!c&&t.push(new ForkTsCheckerWebpackPlugin({async:e,typescript:{context:a.projectCwd,memoryLimit:8192}})),s&&t.push(new BundleAnalyzerPlugin({analyzerPort:"auto",analyzerMode:"server",...s}));const u=shouldEnableReactFastRefresh(e,n,a);u&&t.push(new ReactRefreshWebpackPlugin({overlay:!1})),!u&&e&&(a.devServer?.liveReload?logger.warn('The HMR disabled cause of "liveReload" specificed'):logger.warn(`The HMR disabled cause of \`"moduleFederation":"${r}"\``));const p=a.webpack?.plugins||[];return t.concat(p)};
+import { logger } from '@flatjs/common';
+import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
+import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import webpack from 'webpack';
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
+import { enableBundleHashNameForModule } from '../helpers/enable-bundle-hashname-for-module.js';
+import { getBundleFileName } from '../helpers/get-bundle-file-name.js';
+import { shouldEnableReactFastRefresh } from '../helpers/should-enable-react-fast-refresh.js';
+import { createCircularDependencyPlugin } from '../plugins/circular-dependency/index.js';
+import { createCleanWebpackPlugin } from '../plugins/clean-webpack/index.js';
+import { createBuiltinDefineVariables } from '../plugins/define-variable/index.js';
+import { createModuleFederationPlugin } from '../plugins/module-federation/index.js';
+import { createHtmlPlugins } from '../plugins/multi-html/index.js';
+import { createTsCheckerPlugins } from '../plugins/ts-checker/index.js';
+export const createPlugins = async (serveMode, entryMapItem, evolveOptions) => {
+    const [entryName, entryItemOption] = entryMapItem;
+    const bundleHashNameEnabled = enableBundleHashNameForModule(evolveOptions, entryItemOption?.options);
+    const builtInPlugins = [
+        // Because TS will may generate .js and .d.ts files, you should ignore these files,
+        // otherwise watchers may go into an infinite watch loop.
+        new webpack.WatchIgnorePlugin({
+            paths: [/\.d\.[cm]ts$/],
+        }),
+        // Case Sensitive Paths for OSX
+        new CaseSensitivePathsPlugin(),
+        // Detect modules with circular dependencies when bundling with webpack for `development` mode.
+        ...createCircularDependencyPlugin(serveMode, evolveOptions),
+        // For css minify extractor, Note `"sideEffects": false,` of `package.json` will not emits a file (writes a file to the filesystem)
+        new MiniCssExtractPlugin({
+            // Options similar to the same options in webpackOptions.output
+            // both options are optional
+            filename: `[name]/${getBundleFileName('css', serveMode, bundleHashNameEnabled)}`,
+            // the chunkFilename option can be a function for webpack@5
+            chunkFilename: '[id].[contenthash].css',
+        }),
+        // create builtin DefinePlugin
+        ...(await createBuiltinDefineVariables(serveMode, evolveOptions)),
+        // clean webpack plugin
+        ...createCleanWebpackPlugin(serveMode, entryMapItem, evolveOptions),
+        // Put ModuleFederationPlugin before html webpack plugin.
+        ...createModuleFederationPlugin(serveMode, entryMapItem, evolveOptions),
+        // Create all need html plugins
+        ...createHtmlPlugins(serveMode, entryMapItem, evolveOptions),
+        // Create all need ts-checker plugins
+        ...createTsCheckerPlugins(serveMode, entryMapItem, evolveOptions),
+    ];
+    // Analyze an existing bundle, if allowed.
+    if (evolveOptions.analyzer) {
+        builtInPlugins.push(new BundleAnalyzerPlugin({
+            analyzerPort: 'auto',
+            analyzerMode: 'server',
+            ...evolveOptions.analyzer,
+        }));
+    }
+    // Indicates current we use `hot` mode for `webpack-dev-server` hot reload true.
+    const enabledHmr = shouldEnableReactFastRefresh(serveMode, entryMapItem, evolveOptions);
+    if (enabledHmr) {
+        // Applies the react-refresh Babel plugin on non-production modes only
+        // Ensure `react-refresh/runtime` is hoisted and shared
+        // https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/docs/TROUBLESHOOTING.md#externalising-react
+        builtInPlugins.push(new ReactRefreshWebpackPlugin({
+            // Always use webpack-dev-server `client` overlay!
+            overlay: false,
+        }));
+    }
+    if (!enabledHmr && serveMode) {
+        if (evolveOptions.devServer?.liveReload) {
+            logger.warn(`The HMR disabled cause of "liveReload" specificed`);
+        }
+        else {
+            logger.warn(`The HMR disabled cause of \`"moduleFederation":"${entryName}"\``);
+        }
+    }
+    const extraPlugins = evolveOptions.webpack?.plugins || [];
+    return builtInPlugins.concat(extraPlugins);
+};

package/dist/create-webpack/create-resolve.js

@@ -1 +1,37 @@
-import{join}from"node:path";import{mergeOptions}from"@flatjs/common";import{TsconfigPathsPlugin}from"tsconfig-paths-webpack-plugin";export const createResolve=(s,o)=>{const n={mainFields:["browser","module","main"],extensions:[".ts",".tsx",".js",".json"],extensionAlias:{".js":[".js",".ts"],".cjs":[".cjs",".cts"],".mjs":[".mjs",".mts"],".jsx":[".jsx",".tsx"]},plugins:[new TsconfigPathsPlugin({configFile:join(s,"tsconfig.json"),extensions:[".ts",".tsx",".js",".jsx"]})]};return mergeOptions(n,o?.resolve||{})};
+/* eslint-disable @typescript-eslint/naming-convention */
+import { join } from 'node:path';
+import { mergeOptions } from '@flatjs/common';
+import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';
+export const createResolve = (projectCwd, webpackOptions) => {
+    const resolve = {
+        mainFields: ['browser', 'module', 'main'],
+        // Add `.ts` and `.tsx` as a resolvable extension.
+        extensions: ['.ts', '.tsx', '.js', '.json'],
+        // Add support for TypeScripts fully qualified ESM imports.
+        extensionAlias: {
+            '.js': ['.js', '.ts'],
+            '.cjs': ['.cjs', '.cts'],
+            '.mjs': ['.mjs', '.mts'],
+            '.jsx': ['.jsx', '.tsx'],
+        },
+        plugins: [
+            // Resolve modules according to baseUrl and paths in your tsconfig.json.
+            // https://www.npmjs.com/package/tsconfig-paths-webpack-plugin
+            // FIXME: Don't support `moduleResolution:nodenext`, for now support `moduleResolution:node`
+            // All alias import don't include suffix e.g. `.js`
+            // 1. correct `import { x } from '@/utils/str`
+            // 2. wrong `import { x } from '@/utils/str.js`
+            // 3. it will also help `less-loader` to support `@import` directly no additional `resolve.alias` setup
+            // @import '~@/utils/xxx.less'
+            // @import url('./child.less');
+            // @import url('~@/react/less/alias.less');
+            // @import '~@/react/less/alias2.less';
+            // @import '~@/utils/shared.less';
+            new TsconfigPathsPlugin({
+                configFile: join(projectCwd, 'tsconfig.json'),
+                extensions: ['.ts', '.tsx', '.js', '.jsx'],
+            }),
+        ],
+    };
+    return mergeOptions(resolve, webpackOptions?.resolve || {});
+};

package/dist/create-webpack/create-rule-sets.js

@@ -1 +1,19 @@
-import{ruleAssets}from"./rule-sets/rule-assets.js";import{ruleCss}from"./rule-sets/rule-css.js";import{ruleLess}from"./rule-sets/rule-less.js";import{ruleScripts}from"./rule-sets/rule-scripts.js";import{ruleSvgIcon}from"./rule-sets/rule-svg-icon.js";export const createRuleSets=(s,e,r)=>{const l=[ruleSvgIcon(),ruleAssets(e,r),ruleCss(s,e,r,!1),ruleCss(s,e,r,!0),ruleLess(s,e,r),ruleScripts(s,e,r)],t=r.webpack?.ruleSets||[];return l.concat(t)};
+import { ruleAssets } from './rule-sets/rule-assets.js';
+import { ruleCss } from './rule-sets/rule-css.js';
+import { ruleLess } from './rule-sets/rule-less.js';
+import { ruleScripts } from './rule-sets/rule-scripts.js';
+import { ruleSvgIcon } from './rule-sets/rule-svg-icon.js';
+export const createRuleSets = (serveMode, entryMapItem, evolveOptions) => {
+    const rules = [
+        ruleSvgIcon(),
+        ruleAssets(entryMapItem, evolveOptions),
+        // normal css style.
+        ruleCss(serveMode, entryMapItem, evolveOptions, false),
+        // css module style. xxx.module.css
+        ruleCss(serveMode, entryMapItem, evolveOptions, true),
+        ruleLess(serveMode, entryMapItem, evolveOptions),
+        ruleScripts(serveMode, entryMapItem, evolveOptions),
+    ];
+    const extraRuleSets = evolveOptions.webpack?.ruleSets || [];
+    return rules.concat(extraRuleSets);
+};

package/dist/create-webpack/load-webpack-config.js

@@ -1 +1,56 @@
-import{assertOnlySingleEntryItem}from"../helpers/assert-only-single-entry-item.js";import{createExternals}from"./create-externals.js";import{createOptimization}from"./create-optimization.js";import{createOutput}from"./create-output.js";import{createPerformance}from"./create-performance.js";import{createPlugins}from"./create-plugins.js";import{createResolve}from"./create-resolve.js";import{createRuleSets}from"./create-rule-sets.js";export const loadWebpackConfig=async(e,t,r)=>{const a="development"===e,{projectCwd:o,webpack:s,devServer:n}=r,c=n?.watchOptions,i=assertOnlySingleEntryItem(t,r),m=createRuleSets(a,i,r);return{mode:e,plugins:await createPlugins(a,i,r),watchOptions:c,output:await createOutput(a,r,i),context:o,target:s?.target??["web","es5"],resolve:createResolve(o,s),module:{rules:m},devtool:a?"eval-source-map":s?.sourceMap||!1,externalsType:s?.externalsType,externals:createExternals(s?.externals,i),performance:createPerformance(a,s?.performance),optimization:createOptimization(a,r,i),infrastructureLogging:s?.infrastructureLogging??{level:"warn"},stats:s?.stats??{preset:"minimal"},cache:{type:"memory"}}};
+import { assertOnlySingleEntryItem } from '../helpers/assert-only-single-entry-item.js';
+import { createExternals } from './create-externals.js';
+import { createOptimization } from './create-optimization.js';
+import { createOutput } from './create-output.js';
+import { createPerformance } from './create-performance.js';
+import { createPlugins } from './create-plugins.js';
+import { createResolve } from './create-resolve.js';
+import { createRuleSets } from './create-rule-sets.js';
+/**
+ * Try to organization the configuraiton object of `webpack`
+ * @param mode Enable production optimizations or development hints.
+ * @param entryMap The only single one `servedEntry` or `toBuildEntry`
+ * @param overrideOptions The manually override configuration options for flatjsEvolve
+ */
+export const loadWebpackConfig = async (mode, entryMap, evolveOptions) => {
+    const serveMode = mode === 'development';
+    const { projectCwd, webpack, devServer } = evolveOptions;
+    const watchOptions = devServer?.watchOptions;
+    const singleEntryItem = assertOnlySingleEntryItem(entryMap, evolveOptions);
+    const moduleRules = createRuleSets(serveMode, singleEntryItem, evolveOptions);
+    const plugins = await createPlugins(serveMode, singleEntryItem, evolveOptions);
+    const output = await createOutput(serveMode, evolveOptions, singleEntryItem);
+    const webpackConfig = {
+        mode,
+        plugins,
+        watchOptions,
+        output,
+        // The base directory, an absolute path, for resolving entry points and loaders from configuration.
+        // The context is an absolute string to the directory that contains the entry files.
+        context: projectCwd,
+        target: webpack?.target ?? ['web', 'es5'],
+        resolve: createResolve(projectCwd, webpack),
+        module: { rules: moduleRules },
+        devtool: serveMode ? 'eval-source-map' : webpack?.sourceMap || false,
+        externalsType: webpack?.externalsType,
+        // It's globally external configurations for all entries, if we need to specificed externals for each entry.
+        // Simply move it into entry options.
+        externals: createExternals(webpack?.externals, singleEntryItem),
+        performance: createPerformance(serveMode, webpack?.performance),
+        optimization: createOptimization(serveMode, evolveOptions, singleEntryItem),
+        // Setup logging level for `infrastructure` like. `webpack-dev-server`
+        infrastructureLogging: webpack?.infrastructureLogging ?? {
+            level: 'warn',
+        },
+        stats: webpack?.stats ?? {
+            preset: 'minimal',
+        },
+        cache: {
+            // Use `filesystem` cache to improve performance for `production` build
+            // Default cache directory is `node_modules/.cache`
+            // type: serveMode ? 'memory' : 'filesystem',
+            type: 'memory',
+        },
+    };
+    return webpackConfig;
+};

package/dist/create-webpack/resolve-public-path.js

@@ -1 +1,15 @@
-import{ensureSlash}from"@flatjs/common";export const resolvePublicPath=t=>{const{webpack:a}=t;let e="auto";return a?.publicPath&&"auto"!==a.publicPath&&(e=ensureSlash(a.publicPath,!0)),e};
+import { ensureSlash } from '@flatjs/common';
+/**
+ * Try to normalize publicPath, if we have customized publicPath, should be converted to `https://cdn.example.com/assets/`, `/assets/`
+ * @param evolveOptions
+ * @returns `auto` or customizd publicPath
+ */
+export const resolvePublicPath = (evolveOptions) => {
+    const { webpack } = evolveOptions;
+    let publicPath = 'auto';
+    // If we have customized publicPath, should be converted to `https://cdn.example.com/assets/`, `/assets/`
+    if (webpack?.publicPath && webpack.publicPath !== 'auto') {
+        publicPath = ensureSlash(webpack.publicPath, true);
+    }
+    return publicPath;
+};

package/dist/create-webpack/rule-sets/constants.js

@@ -1 +1,3 @@
-export const ICON_PATH_REGEX=/svg-icons\//;export const IMAGE_PATH_REGEX=/\.(?:jpe?g|png|gif|svg)$/;export const FONT_PATH_REGEX=/\.(?:ttf|eot|woff|woff2)(?:\?.+)?$/;
+export const ICON_PATH_REGEX = /svg-icons\//;
+export const IMAGE_PATH_REGEX = /\.(?:jpe?g|png|gif|svg)$/;
+export const FONT_PATH_REGEX = /\.(?:ttf|eot|woff|woff2)(?:\?.+)?$/;

package/dist/create-webpack/rule-sets/rule-assets.js

@@ -1 +1,50 @@
-import{dirname,join,relative,resolve}from"node:path";import{resolvePublicPath}from"../resolve-public-path.js";import{FONT_PATH_REGEX,IMAGE_PATH_REGEX}from"./constants.js";import{isIconSvg}from"./rule-utils.js";const getEntryAssetFileName=(e,t,r)=>{const[s,o]=t,{projectCwd:a,projectVirtualPath:i}=r;let n=dirname(join(i,e.replace(/^src/,"")));const l=o.entry.map((e=>dirname(join(a,e)))),m=resolve(a,e),c=l.find((e=>m.startsWith(e)));return c&&(n=dirname(join(s,relative(c,m)))),`${n}/[name]-[contenthash:8][ext]`};export const ruleAssets=(e,t)=>{const r=resolvePublicPath(t);return{type:"asset",test:e=>FONT_PATH_REGEX.test(e)||IMAGE_PATH_REGEX.test(e)&&!isIconSvg(e),generator:{filename:({filename:r})=>getEntryAssetFileName(r,e,t),publicPath:"auto"===r?void 0:r},parser:{dataUrlCondition:{maxSize:t.loaderOptions.assetDataUrlMaxSize}}}};
+import { dirname, join, relative, resolve } from 'node:path';
+import { resolvePublicPath } from '../resolve-public-path.js';
+import { FONT_PATH_REGEX, IMAGE_PATH_REGEX } from './constants.js';
+import { isIconSvg } from './rule-utils.js';
+const getEntryAssetFileName = (filename, entryMapItem, evolveOptions) => {
+    const [entryName, entryConfig] = entryMapItem;
+    const { projectCwd, projectVirtualPath } = evolveOptions;
+    let assetBase = dirname(join(projectVirtualPath, filename.replace(/^src/, '')));
+    const entryDirs = entryConfig.entry.map((file) => dirname(join(projectCwd, file)));
+    const assetAbsName = resolve(projectCwd, filename);
+    const matchedEntryDir = entryDirs.find((s) => assetAbsName.startsWith(s));
+    if (matchedEntryDir) {
+        assetBase = dirname(join(entryName, relative(matchedEntryDir, assetAbsName)));
+    }
+    return `${assetBase}/[name]-[contenthash:8][ext]`;
+};
+/**
+ * Preparing image loader for normal pictures except stored in folder `icons`
+ * Webpack@5 don't need `file-loader`, `raw-loader`, `url-loader` provider us `asset-modules`
+ * https://webpack.js.org/guides/asset-modules/
+ * @param entryItem The available entries, `development` it contains multiple enties, `production` only one entry in once build.
+ */
+export const ruleAssets = (entryItem, evolveOptions) => {
+    // If we have customized publicPath, should be converted to `https://cdn.example.com/assets/`, `/assets/`
+    const publicPath = resolvePublicPath(evolveOptions);
+    const loader = {
+        type: 'asset',
+        test(resource) {
+            return (FONT_PATH_REGEX.test(resource) ||
+                (IMAGE_PATH_REGEX.test(resource) && !isIconSvg(resource)));
+        },
+        generator: {
+            // Rule.generator.filename is the same as output.assetModuleFilename and works only with asset and asset/resource module types.
+            filename({ filename }) {
+                return getEntryAssetFileName(filename, entryItem, evolveOptions);
+            },
+            // Make sure that we use production cdn for images avoid use `requireExtensions`
+            // NOTE: if `auto` we need to remove `publicPath` configuration leave it to undefined.
+            publicPath: publicPath === 'auto' ? undefined : publicPath,
+        },
+        parser: {
+            // Now webpack will automatically choose between resource and inline by following
+            // a default condition: a file with size less than 8kb will be treated as a inline module type and resource module type otherwise.
+            dataUrlCondition: {
+                maxSize: evolveOptions.loaderOptions.assetDataUrlMaxSize, // 4 * 1024, // 4kb
+            },
+        },
+    };
+    return loader;
+};

package/dist/create-webpack/rule-sets/rule-css.js

@@ -1 +1,101 @@
-import{requireResolve}from"@flatjs/common";import{forgePostcssPluginPixel}from"@flatjs/forge-postcss-plugin-pixel";import cssnano from"cssnano";import MiniCssExtractPlugin from"mini-css-extract-plugin";import{allowPx2remForModule}from"../../helpers/allow-px2rem-for-module.js";const getPostcssOptions=(s,o={},e={})=>{const r=[...e.plugins||[],cssnano({preset:["default",{discardComments:{removeAll:!s},reduceInitial:!1,normalizeWhitespace:!s,...e.cssnanoOptions}]})];return!1!==o&&r.push(forgePostcssPluginPixel(o)),{plugins:r}};export const ruleCss=(s,o,e,r=!1)=>{const{pixelOptions:t,cssLoaderOptions:i={},postcssOptions:l}=e.loaderOptions,n=r?{}:{modules:!1},p={test:/\.css$/i,use:[{loader:MiniCssExtractPlugin.loader,options:{esModule:!0}},{loader:requireResolve(import.meta.url,"css-loader"),options:{sourceMap:s,...i,...n}}]};r?p.include=/\.module\.css$/i:p.exclude=/\.module\.css$/i;const c=allowPx2remForModule(o,e);if(Array.isArray(p.use)){const o=getPostcssOptions(s,!!c&&t,l);p.use.push({loader:requireResolve(import.meta.url,"postcss-loader"),options:{postcssOptions:{...o,config:!1},sourceMap:s}})}return p};
+import { requireResolve } from '@flatjs/common';
+import { forgePostcssPluginPixel, } from '@flatjs/forge-postcss-plugin-pixel';
+import cssnano from 'cssnano';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import { allowPx2remForModule } from '../../helpers/allow-px2rem-for-module.js';
+/**
+ * Normalize postcss-loader options.
+ * @param serveMode The value indicates if we are in `built` or `serve` mode.
+ * @param pixelOptions The pixel options of `postcss` plugin
+ * @param cssnanoOptions The configuration rules for `cssnano`
+ */
+const getPostcssOptions = (serveMode, pixelOptions = {}, postcssOptions = {}) => {
+    // Use cssnano to minify css styles.
+    // https://cssnano.co/docs/config-file
+    const postCssPlugins = [
+        ...(postcssOptions.plugins || []),
+        cssnano({
+            // https://www.npmjs.com/package/cssnano-preset-default
+            // Note Advanced optimisations for cssnano; may or may not break your CSS!
+            // `Antd` was broken while use `advanced` preset.:(
+            preset: [
+                'default',
+                {
+                    discardComments: {
+                        removeAll: !serveMode,
+                    },
+                    // throw new error `Please provide a proper feature name. Cannot find css-initial-value`
+                    // disable this plugin `postcss-reduce-initial` via reduceInitial: false
+                    // disable this plugin `postcss-minify-font-values` via minifyFontValues:false
+                    reduceInitial: false,
+                    // minifyFontValues: false,
+                    normalizeWhitespace: !serveMode,
+                    // allow us override cssnano configuration rules.
+                    ...postcssOptions.cssnanoOptions,
+                },
+            ],
+        }),
+    ];
+    if (pixelOptions !== false) {
+        postCssPlugins.push(forgePostcssPluginPixel(pixelOptions));
+    }
+    return {
+        plugins: postCssPlugins,
+    };
+};
+/**
+ * Actually, style-loader is the one that is responsible for CSS HMR
+ * https://github.com/webpack-contrib/style-loader/blob/master/src/index.js#L31-L42
+ * @param serveMode
+ * @param entryMapItem
+ * @param evolveOptions `builtin` loaders
+ */
+export const ruleCss = (serveMode, entryMapItem, evolveOptions, useCssModule = false) => {
+    // The value indicates we will enable px2rem using `@flatjs/forge-postcss-plugin-pixel`
+    const { pixelOptions, cssLoaderOptions = {}, postcssOptions, } = evolveOptions.loaderOptions;
+    // automatically enable css modules for files with .module.css extension
+    const cssLoaderOfCssModules = !useCssModule ? { modules: false } : {};
+    const ruleSet = {
+        test: /\.css$/i,
+        use: [
+            {
+                loader: MiniCssExtractPlugin.loader,
+                options: {
+                    // https://github.com/webpack-contrib/mini-css-extract-plugin/releases/tag/v1.0.0
+                    // https://github.com/webpack-contrib/css-loader/blob/master/README.md#modules
+                    esModule: true,
+                },
+            },
+            {
+                loader: requireResolve(import.meta.url, 'css-loader'),
+                options: {
+                    sourceMap: serveMode,
+                    ...cssLoaderOptions,
+                    ...cssLoaderOfCssModules,
+                },
+            },
+        ],
+    };
+    if (useCssModule) {
+        ruleSet.include = /\.module\.css$/i;
+    }
+    else {
+        ruleSet.exclude = /\.module\.css$/i;
+    }
+    const isAllowPx2Rem = allowPx2remForModule(entryMapItem, evolveOptions);
+    if (Array.isArray(ruleSet.use)) {
+        const postCssOption = getPostcssOptions(serveMode, isAllowPx2Rem ? pixelOptions : false, postcssOptions);
+        ruleSet.use.push({
+            loader: requireResolve(import.meta.url, 'postcss-loader'),
+            options: {
+                postcssOptions: {
+                    ...postCssOption,
+                    // Removes the need to lookup and load external config files ( `postcss.config.cjs`...) multiple times during compilation.
+                    config: false,
+                },
+                sourceMap: serveMode,
+            },
+        });
+    }
+    return ruleSet;
+};

package/dist/create-webpack/rule-sets/rule-less.js

@@ -1 +1,44 @@
-import{requireResolve}from"@flatjs/common";import{ruleCss}from"./rule-css.js";export const ruleLess=(s,e,r)=>{const o=ruleCss(s,e,r);o.test=/\.less$/i;const t=r.loaderOptions.lessOptions;return Array.isArray(o.use)&&o.use.push({loader:requireResolve(import.meta.url,"less-loader"),options:{sourceMap:s,lessOptions:{sourceMap:s,javascriptEnabled:!0,...t}}}),o};
+import { requireResolve } from '@flatjs/common';
+import { ruleCss } from './rule-css.js';
+/**
+ * Preparing configurations for `less-loader`
+ * @param serveMode The value indicates if we are in `built` or `serve` mode.
+ * @param pluginLoaderOptions `builtin` loaders
+ * @example
+ * ```ts
+ * `~` makes the url an module
+ * webpack: {
+ *   externals: {
+ *     antd: 'antd',
+ *     dayjs: 'dayjs',
+ *   },
+ *   resolve: {
+ *     alias: {
+ *       '@': resolve(projectCwd, './src'),
+ *     },
+ *   },
+ * },
+ * `@import '~@/theme/default.less';` at `src/theme/default.less`
+ *
+ * ```
+ */
+export const ruleLess = (serveMode, entryMapItem, evolveOptions) => {
+    const ruleSet = ruleCss(serveMode, entryMapItem, evolveOptions);
+    ruleSet.test = /\.less$/i;
+    // The Options for Less.
+    const lessOptions = evolveOptions.loaderOptions.lessOptions;
+    if (Array.isArray(ruleSet.use)) {
+        ruleSet.use.push({
+            loader: requireResolve(import.meta.url, 'less-loader'),
+            options: {
+                sourceMap: serveMode,
+                lessOptions: {
+                    sourceMap: serveMode,
+                    javascriptEnabled: true,
+                    ...lessOptions,
+                },
+            },
+        });
+    }
+    return ruleSet;
+};

package/dist/create-webpack/rule-sets/rule-scripts.js

@@ -1 +1,34 @@
-import{requireResolve}from"@flatjs/common";import{mergeBabelOption}from"../../helpers/merge-babel-options.js";import{shouldEnableReactFastRefresh}from"../../helpers/should-enable-react-fast-refresh.js";export const ruleScripts=(e,r,s)=>{const{babelOptions:o={},modularImports:t=[]}=s.loaderOptions,l=mergeBabelOption(t,o);shouldEnableReactFastRefresh(e,r,s)&&(l.plugins?l.plugins.push(requireResolve(import.meta.url,"react-refresh/babel")):l.plugins=[requireResolve(import.meta.url,"react-refresh/babel")]);return{test:/\.(tsx|ts|js|jsx)$/,use:[{loader:requireResolve(import.meta.url,"babel-loader"),options:l}]}};
+import { requireResolve } from '@flatjs/common';
+import { mergeBabelOption } from '../../helpers/merge-babel-options.js';
+import { shouldEnableReactFastRefresh } from '../../helpers/should-enable-react-fast-refresh.js';
+export const ruleScripts = (serveMode, entryMapItem, evolveOptions) => {
+    const { babelOptions = {}, modularImports = [] } = evolveOptions.loaderOptions;
+    const finnalBabelOptions = mergeBabelOption(modularImports, babelOptions);
+    // Indicates current we use `hot` mode for `webpack-dev-server` hot reload true.
+    const enabledHmr = shouldEnableReactFastRefresh(serveMode, entryMapItem, evolveOptions);
+    // 针对react 自动注入`react-refresh/babel`
+    if (enabledHmr) {
+        if (finnalBabelOptions.plugins) {
+            finnalBabelOptions.plugins.push(requireResolve(import.meta.url, 'react-refresh/babel'));
+        }
+        else {
+            finnalBabelOptions.plugins = [
+                requireResolve(import.meta.url, 'react-refresh/babel'),
+            ];
+        }
+    }
+    const loader = {
+        // use `vue-loader` to handle .vue here.
+        // test: /\.(tsx|ts|js|jsx|vue)$/,
+        test: /\.(tsx|ts|js|jsx)$/,
+        // Don't exclude anythings because of we need to import node_modules from `@flatjs`
+        // exclude: /(node_modules|bower_components)/,
+        use: [
+            {
+                loader: requireResolve(import.meta.url, 'babel-loader'),
+                options: finnalBabelOptions,
+            },
+        ],
+    };
+    return loader;
+};

package/dist/create-webpack/rule-sets/rule-svg-icon.js

@@ -1 +1,25 @@
-import{getDirname}from"@armit/file-utility";import{isIconSvg}from"./rule-utils.js";export const ruleSvgIcon=()=>({test:e=>isIconSvg(e),use:[{loader:getDirname(import.meta.url,"../../loaders/loader-icon.cjs"),options:{svgo:{plugins:[{name:"removeTitle"},{name:"removeDimensions"}]}}}]});
+import { getDirname } from '@armit/file-utility';
+import { isIconSvg } from './rule-utils.js';
+/**
+ * Preparing svg loader for `icons`
+ * Note we must be put all *.svg into folder `icons`
+ */
+export const ruleSvgIcon = () => {
+    const loader = {
+        test(resource) {
+            return isIconSvg(resource);
+        },
+        use: [
+            {
+                // FIXME: we need to always keep the directory structures here to make sure correct loader path resolve.
+                loader: getDirname(import.meta.url, '../../loaders/loader-icon.cjs'),
+                options: {
+                    svgo: {
+                        plugins: [{ name: 'removeTitle' }, { name: 'removeDimensions' }],
+                    },
+                },
+            },
+        ],
+    };
+    return loader;
+};