@flatjs/evolve 1.8.1-next.65 → 1.8.1-next.67

package/dist/plugins/clean-webpack/clean-webpack-plugin.js

@@ -1 +1,173 @@
-import{rmSync}from"node:fs";import{relative}from"node:path";import{fileWalkSync}from"@armit/file-utility";import{logger}from"@flatjs/common";import{moduleName}from"../../constants.js";export class CleanWebpackPlugin{constructor(e={}){this.verbose=!0===e.verbose||!1,this.projectCwd=e.projectCwd||process.cwd(),this.cleanStaleWebpackAssets=!0!==e.cleanStaleWebpackAssets&&!1!==e.cleanStaleWebpackAssets||e.cleanStaleWebpackAssets,this.protectWebpackAssets=!0!==e.protectWebpackAssets&&!1!==e.protectWebpackAssets||e.protectWebpackAssets,this.cleanAfterEveryBuildPatterns=Array.isArray(e.cleanAfterEveryBuildPatterns)?e.cleanAfterEveryBuildPatterns:[],this.cleanOnceBeforeBuildPatterns=Array.isArray(e.cleanOnceBeforeBuildPatterns)?e.cleanOnceBeforeBuildPatterns:["**/*"],this.currentAssets=[],this.initialClean=!1,this.outputPath="",this.apply=this.apply.bind(this),this.handleInitial=this.handleInitial.bind(this),this.handleDone=this.handleDone.bind(this),this.removeFiles=this.removeFiles.bind(this)}apply(e){if(!e.options.output||!e.options.output.path)return void logger.warn("clean-webpack-plugin: options.output.path not defined. Plugin disabled...",moduleName);this.outputPath=e.options.output.path;const t=e.hooks;0!==this.cleanOnceBeforeBuildPatterns.length&&t.emit.tap("clean-webpack-plugin",(e=>{this.handleInitial(e)})),t.done.tap("clean-webpack-plugin",(e=>{this.handleDone(e)}))}handleInitial(e){if(this.initialClean)return;e.getStats().hasErrors()||(this.initialClean=!0,this.removeFiles(this.cleanOnceBeforeBuildPatterns))}handleDone(e){if(e.hasErrors())return void(this.verbose&&logger.warn("clean-webpack-plugin: pausing due to webpack errors",moduleName));const t=(e.toJson({assets:!0}).assets||[]).map((e=>e.name)),s=this.currentAssets.filter((e=>!1===t.includes(e)));this.currentAssets=t.sort();const i=[];!0===this.cleanStaleWebpackAssets&&0!==s.length&&i.push(...s),0!==this.cleanAfterEveryBuildPatterns.length&&i.push(...this.cleanAfterEveryBuildPatterns),0!==i.length&&this.removeFiles(i)}removeFiles(e){try{const t=fileWalkSync(e,{absolute:!0,unique:!0,cwd:this.outputPath,dot:!0,ignore:this.protectWebpackAssets?this.currentAssets:[]});for(const e of t)rmSync(e,{force:!0,recursive:!0});this.verbose&&t.forEach((e=>{const t=relative(this.projectCwd,e);logger.debug(`clean-webpack-plugin: removed ${t}`,moduleName)}))}catch(e){if(/Cannot delete files\/folders outside the current working directory\./.test(e.message)){throw new Error("clean-webpack-plugin: Cannot delete files/folders outside the current working directory. Can be overridden with the `dangerouslyAllowCleanPatternsOutsideProject` option.")}throw e}}}
+import { rmSync } from 'node:fs';
+import { relative } from 'node:path';
+import { fileWalkSync } from '@armit/file-utility';
+import { logger } from '@flatjs/common';
+import { moduleName } from '../../constants.js';
+export class CleanWebpackPlugin {
+    constructor(options = {}) {
+        this.verbose = options.verbose === true || false;
+        this.projectCwd = options.projectCwd || process.cwd();
+        this.cleanStaleWebpackAssets =
+            options.cleanStaleWebpackAssets === true ||
+                options.cleanStaleWebpackAssets === false
+                ? options.cleanStaleWebpackAssets
+                : true;
+        this.protectWebpackAssets =
+            options.protectWebpackAssets === true ||
+                options.protectWebpackAssets === false
+                ? options.protectWebpackAssets
+                : true;
+        this.cleanAfterEveryBuildPatterns = Array.isArray(options.cleanAfterEveryBuildPatterns)
+            ? options.cleanAfterEveryBuildPatterns
+            : [];
+        this.cleanOnceBeforeBuildPatterns = Array.isArray(options.cleanOnceBeforeBuildPatterns)
+            ? options.cleanOnceBeforeBuildPatterns
+            : ['**/*'];
+        /**
+         * Store webpack build assets
+         */
+        this.currentAssets = [];
+        /**
+         * Only used with cleanOnceBeforeBuildPatterns
+         */
+        this.initialClean = false;
+        this.outputPath = '';
+        this.apply = this.apply.bind(this);
+        this.handleInitial = this.handleInitial.bind(this);
+        this.handleDone = this.handleDone.bind(this);
+        this.removeFiles = this.removeFiles.bind(this);
+    }
+    apply(compiler) {
+        if (!compiler.options.output || !compiler.options.output.path) {
+            logger.warn('clean-webpack-plugin: options.output.path not defined. Plugin disabled...', moduleName);
+            return;
+        }
+        this.outputPath = compiler.options.output.path;
+        /**
+         * webpack 4+ comes with a new plugin system.
+         *
+         * Check for hooks in-order to support old plugin system
+         */
+        const hooks = compiler.hooks;
+        if (this.cleanOnceBeforeBuildPatterns.length !== 0) {
+            hooks.emit.tap('clean-webpack-plugin', (compilation) => {
+                this.handleInitial(compilation);
+            });
+        }
+        hooks.done.tap('clean-webpack-plugin', (stats) => {
+            this.handleDone(stats);
+        });
+    }
+    /**
+     * Initially remove files from output directory prior to build.
+     *
+     * Only happens once.
+     *
+     * Warning: It is recommended to initially clean your build directory outside of webpack to minimize unexpected behavior.
+     */
+    handleInitial(compilation) {
+        if (this.initialClean) {
+            return;
+        }
+        /**
+         * Do not remove files if there are compilation errors
+         *
+         * Handle logging inside this.handleDone
+         */
+        const stats = compilation.getStats();
+        if (stats.hasErrors()) {
+            return;
+        }
+        this.initialClean = true;
+        this.removeFiles(this.cleanOnceBeforeBuildPatterns);
+    }
+    handleDone(stats) {
+        /**
+         * Do nothing if there is a webpack error
+         */
+        if (stats.hasErrors()) {
+            if (this.verbose) {
+                logger.warn('clean-webpack-plugin: pausing due to webpack errors', moduleName);
+            }
+            return;
+        }
+        /**
+         * Fetch Webpack's output asset files
+         */
+        const assets = stats.toJson({
+            assets: true,
+        }).assets || [];
+        const assetList = assets.map((asset) => {
+            return asset.name;
+        });
+        /**
+         * Get all files that were in the previous build but not the current
+         *
+         * (relies on del's cwd: outputPath option)
+         */
+        const staleFiles = this.currentAssets.filter((previousAsset) => {
+            return assetList.includes(previousAsset) === false;
+        });
+        /**
+         * Save assets for next compilation
+         */
+        this.currentAssets = assetList.sort();
+        const removePatterns = [];
+        /**
+         * Remove unused webpack assets
+         */
+        if (this.cleanStaleWebpackAssets === true && staleFiles.length !== 0) {
+            removePatterns.push(...staleFiles);
+        }
+        /**
+         * Remove cleanAfterEveryBuildPatterns
+         */
+        if (this.cleanAfterEveryBuildPatterns.length !== 0) {
+            removePatterns.push(...this.cleanAfterEveryBuildPatterns);
+        }
+        if (removePatterns.length !== 0) {
+            this.removeFiles(removePatterns);
+        }
+    }
+    removeFiles(patterns) {
+        try {
+            const deleted = fileWalkSync(patterns, {
+                absolute: true,
+                unique: true,
+                // Change context to build directory
+                cwd: this.outputPath,
+                dot: true,
+                ignore: this.protectWebpackAssets ? this.currentAssets : [],
+            });
+            for (const filepath of deleted) {
+                rmSync(filepath, {
+                    force: true,
+                    recursive: true,
+                });
+            }
+            /**
+             * Log if verbose is enabled
+             */
+            if (this.verbose) {
+                deleted.forEach((file) => {
+                    const filename = relative(this.projectCwd, file);
+                    const message = 'removed';
+                    /**
+                     * Use console.warn over .log
+                     * https://github.com/webpack/webpack/issues/1904
+                     * https://github.com/johnagan/clean-webpack-plugin/issues/11
+                     */
+                    logger.debug(`clean-webpack-plugin: ${message} ${filename}`, moduleName);
+                });
+            }
+        }
+        catch (error) {
+            const needsForce = /Cannot delete files\/folders outside the current working directory\./.test(error.message);
+            if (needsForce) {
+                const message = 'clean-webpack-plugin: Cannot delete files/folders outside the current working directory. Can be overridden with the `dangerouslyAllowCleanPatternsOutsideProject` option.';
+                throw new Error(message);
+            }
+            throw error;
+        }
+    }
+}

package/dist/plugins/clean-webpack/index.js

@@ -1 +1,22 @@
-import{join}from"node:path";import{ensureSlash}from"@flatjs/common";import{CleanWebpackPlugin}from"./clean-webpack-plugin.js";export const createCleanWebpackPlugin=(e,n,o)=>e?[]:[new CleanWebpackPlugin({verbose:!0,projectCwd:o.projectCwd,cleanOnceBeforeBuildPatterns:[`${join(ensureSlash(n[0],!0),"**/*")}`]})];
+import { join } from 'node:path';
+import { ensureSlash } from '@flatjs/common';
+import { CleanWebpackPlugin } from './clean-webpack-plugin.js';
+/**
+ * Cleaning up the /dist folder for `production` build
+ * @param singleEntryItem
+ * @returns
+ */
+export const createCleanWebpackPlugin = (serveMode, entryMapItem, evolveOptions) => {
+    if (serveMode) {
+        return [];
+    }
+    return [
+        new CleanWebpackPlugin({
+            verbose: true,
+            projectCwd: evolveOptions.projectCwd,
+            cleanOnceBeforeBuildPatterns: [
+                `${join(ensureSlash(entryMapItem[0], true), '**/*')}`,
+            ],
+        }),
+    ];
+};

package/dist/plugins/define-variable/define-variable-plugin.js

@@ -1 +1,21 @@
-import{getLastCommitHash,gitBranchName}from"@armit/git";import webpack from"webpack";export const createBuiltinDefineVariables=async(e,i)=>{const t=await getLastCommitHash(),n=await gitBranchName();return[new webpack.DefinePlugin({__SENTRY_DEBUG__:e,"process.env.FLAT_BUILD_DATE":JSON.stringify((new Date).toISOString()),"process.env.FLAT_COMMIT_HASH":JSON.stringify(t),"process.env.FLAT_BRANCH_NAME":JSON.stringify(n),...i.pluginOptions.definePlugin})]};
+/* eslint-disable @typescript-eslint/naming-convention */
+import { getLastCommitHash, gitBranchName } from '@armit/git';
+import webpack from 'webpack';
+/**
+ * The DefinePlugin replaces variables in your code with other values or expressions at compile time.
+ * `__SENTRY_DEBUG__`,`process.env.FLAT_BUILD_DATE`, `process.env.FLAT_COMMIT_HASH`, `process.env.FLAT_BRANCH_NAME`
+ * @returns
+ */
+export const createBuiltinDefineVariables = async (serveMode, evolveOptions) => {
+    const commitHash = await getLastCommitHash();
+    const branchName = await gitBranchName();
+    return [
+        new webpack.DefinePlugin({
+            __SENTRY_DEBUG__: serveMode,
+            'process.env.FLAT_BUILD_DATE': JSON.stringify(new Date().toISOString()),
+            'process.env.FLAT_COMMIT_HASH': JSON.stringify(commitHash),
+            'process.env.FLAT_BRANCH_NAME': JSON.stringify(branchName),
+            ...evolveOptions.pluginOptions.definePlugin,
+        }),
+    ];
+};

package/dist/plugins/define-variable/index.js

@@ -1 +1 @@
-export*from"./define-variable-plugin.js";
+export * from './define-variable-plugin.js';

package/dist/plugins/html-inject-scripts/plugin-html-inject-script.js

@@ -1 +1,27 @@
-import htmlWebpackPlugin from"html-webpack-plugin";const PLUGIN_PREFIX="HtmlInjectScriptPlugin";export class HtmlInjectScriptPlugin{constructor(t){this.scripts=t||[]}processScripts(){return this.scripts.filter(Boolean).map((t=>({tagName:"script",innerHTML:t,voidTag:!1,attributes:{},meta:{plugin:"html-inject-script-webpack-plugin"}})))}apply(t){t.hooks.compilation.tap(`${PLUGIN_PREFIX}_compilation`,(t=>{htmlWebpackPlugin.getHooks(t).alterAssetTags.tap(`${PLUGIN_PREFIX}_alterAssetTags`,(t=>(t.assetTags.scripts.unshift(...this.processScripts()),t)))}))}}
+import htmlWebpackPlugin from 'html-webpack-plugin';
+const PLUGIN_PREFIX = `HtmlInjectScriptPlugin`;
+export class HtmlInjectScriptPlugin {
+    constructor(scripts) {
+        this.scripts = scripts || [];
+    }
+    processScripts() {
+        return this.scripts.filter(Boolean).map((asset) => {
+            return {
+                tagName: 'script',
+                innerHTML: asset,
+                voidTag: false,
+                attributes: {},
+                meta: { plugin: 'html-inject-script-webpack-plugin' },
+            };
+        });
+    }
+    apply(compiler) {
+        compiler.hooks.compilation.tap(`${PLUGIN_PREFIX}_compilation`, (compilation) => {
+            const hooks = htmlWebpackPlugin.getHooks(compilation);
+            hooks.alterAssetTags.tap(`${PLUGIN_PREFIX}_alterAssetTags`, (data) => {
+                data.assetTags.scripts.unshift(...this.processScripts());
+                return data;
+            });
+        });
+    }
+}

package/dist/plugins/module-federation/external-template-remotes.js

@@ -1 +1,92 @@
-import webpackSources from"webpack-sources";const PLUGIN_NAME="ExternalTemplateRemotesPlugin",isExternalModule=e=>"ExternalModule"===e.constructor.name;function extractUrlAndGlobal(e){const t=e.indexOf("@");if(t<=0||t===e.length-1)throw new Error(`Invalid request "${e}"`);return[e.substring(t+1),e.substring(0,t)]}export class ExternalTemplateRemotesPlugin{apply(e){e.hooks.make.tap(PLUGIN_NAME,(e=>{const t=[];e.hooks.buildModule.tap(PLUGIN_NAME,(e=>{isExternalModule(e)&&"script"===e.externalType&&t.push(e)})),e.hooks.afterCodeGeneration.tap(PLUGIN_NAME,(()=>{t.forEach((t=>{const o=extractUrlAndGlobal(t.request)[0],n=toExpression(o),r=e.codeGenerationResults.get(t,void 0).sources,s=r.get("javascript");if(s){const e=new webpackSources.RawSource(s.source().toString().replace(`"${o}"`,n));r.set("javascript",e)}}))}))}))}}function toExpression(e){const t=[],o=[];let n=!1,r=!1;for(const s of e)if("["===s){if(n){r=!0;break}n=!0,o.length&&(t.push(`"${o.join("")}"`),o.length=0)}else if("]"===s){if(!n){r=!0;break}n=!1,o.length&&(t.push(`${o.join("")}`),o.length=0),o.length=0}else o.push(s);if(n||r)throw new Error(`Invalid template URL "${e}"`);return o.length&&t.push(`"${o.join("")}"`),t.join(" + ")}
+import webpackSources from 'webpack-sources';
+const PLUGIN_NAME = 'ExternalTemplateRemotesPlugin';
+const isExternalModule = (module) => {
+    return module.constructor.name === 'ExternalModule';
+};
+/**
+ * @param {string} urlAndGlobal the script request
+ * @returns {string[]} script url and its global variable
+ */
+function extractUrlAndGlobal(urlAndGlobal) {
+    const index = urlAndGlobal.indexOf('@');
+    if (index <= 0 || index === urlAndGlobal.length - 1) {
+        throw new Error(`Invalid request "${urlAndGlobal}"`);
+    }
+    return [urlAndGlobal.substring(index + 1), urlAndGlobal.substring(0, index)];
+}
+export class ExternalTemplateRemotesPlugin {
+    apply(compiler) {
+        compiler.hooks.make.tap(PLUGIN_NAME, (compilation) => {
+            const scriptExternalModules = [];
+            compilation.hooks.buildModule.tap(PLUGIN_NAME, (module) => {
+                if (isExternalModule(module) && module.externalType === 'script') {
+                    scriptExternalModules.push(module);
+                }
+            });
+            compilation.hooks.afterCodeGeneration.tap(PLUGIN_NAME, () => {
+                scriptExternalModules.forEach((module) => {
+                    const urlTemplate = extractUrlAndGlobal(module.request)[0];
+                    const urlExpression = toExpression(urlTemplate);
+                    const sourceMap = compilation.codeGenerationResults.get(module, undefined).sources;
+                    const rawSource = sourceMap.get('javascript');
+                    if (rawSource) {
+                        const source = new webpackSources.RawSource(rawSource
+                            .source()
+                            .toString()
+                            .replace(`"${urlTemplate}"`, urlExpression));
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        sourceMap.set('javascript', source);
+                    }
+                });
+            });
+        });
+    }
+}
+/**
+ * app2@localhost/remoteEntry.js --> "\"app2@localhost/remoteEntry.js\""
+ * app2@[window.app2Url]/remoteEntry.js --> "\"app2@\" + window.app2Url + \"/remoteEntry.js\""
+ * @param templateUrl
+ * @returns
+ */
+// eslint-disable-next-line sonarjs/cognitive-complexity
+function toExpression(templateUrl) {
+    const result = [];
+    const current = [];
+    let isExpression = false;
+    let invalid = false;
+    for (const c of templateUrl) {
+        if (c === '[') {
+            if (isExpression) {
+                invalid = true;
+                break;
+            }
+            isExpression = true;
+            if (current.length) {
+                result.push(`"${current.join('')}"`);
+                current.length = 0;
+            }
+        }
+        else if (c === ']') {
+            if (!isExpression) {
+                invalid = true;
+                break;
+            }
+            isExpression = false;
+            if (current.length) {
+                result.push(`${current.join('')}`);
+                current.length = 0;
+            }
+            current.length = 0;
+        }
+        else {
+            current.push(c);
+        }
+    }
+    if (isExpression || invalid) {
+        throw new Error(`Invalid template URL "${templateUrl}"`);
+    }
+    if (current.length) {
+        result.push(`"${current.join('')}"`);
+    }
+    return result.join(' + ');
+}

package/dist/plugins/module-federation/index.js

@@ -1 +1 @@
-export*from"./module-federation.js";
+export * from './module-federation.js';

package/dist/plugins/module-federation/module-federation.js

@@ -1 +1,98 @@
-import{join}from"node:path";import{ensureSlash}from"@flatjs/common";import webpack from"webpack";import{normalizeEvolveEntryName}from"../../helpers/normalize-entry-map.js";import{injectFederationScripts}from"../../helpers/script-injects.js";import{HtmlInjectScriptPlugin}from"../html-inject-scripts/plugin-html-inject-script.js";import{ExternalTemplateRemotesPlugin}from"./external-template-remotes.js";const normalizeWidgetName=(e="")=>e.replace(/[/-]/g,"_").toLowerCase(),remoteFileName=e=>join(e,"micro-remote-module.js");export const createModuleFederationPlugin=(e,t,r)=>{const o=r.projectVirtualPath,[n,i]=t,m=r.multiHtmlCdn,a=r.multiHtmlCdnEnvResolver,l=i.options?.moduleFederation,s=[];if(l){const{remotes:t,exposes:r,...i}=l,p=remoteFileName(n),c=normalizeWidgetName(n),u=(r?Array.isArray(r)?r:[r]:[]).map((e=>{const t={};for(const[r,o]of Object.entries(e))t[r]={...o,name:join(n,o.name.replace(/^\//,""))};return t})),d=(t||[]).map((({name:e,endpoint:t})=>{const r=normalizeEvolveEntryName(e,o),n=normalizeWidgetName(r),i=remoteFileName(r);return{[n]:`${n}@${t?ensureSlash(t(e,r),!1):"[window.evolveFetchMicroWidgets()]"}/${i}`}}));s.push(new webpack.container.ModuleFederationPlugin({name:c,filename:p,remotes:d,exposes:u,...i}),new ExternalTemplateRemotesPlugin),e||s.unshift(new HtmlInjectScriptPlugin([injectFederationScripts(m,a)]))}return s};
+import { join } from 'node:path';
+import { ensureSlash } from '@flatjs/common';
+import webpack from 'webpack';
+import { normalizeEvolveEntryName } from '../../helpers/normalize-entry-map.js';
+import { injectFederationScripts } from '../../helpers/script-injects.js';
+import { HtmlInjectScriptPlugin } from '../html-inject-scripts/plugin-html-inject-script.js';
+import { ExternalTemplateRemotesPlugin } from './external-template-remotes.js';
+/**
+ * `${projectVirtualPath}/mine` --> evolve_demo_mine
+ * @param entryPath `${projectVirtualPath}/mine`
+ */
+const normalizeWidgetName = (entryPath = '') => {
+    return entryPath.replace(/[/-]/g, '_').toLowerCase();
+};
+const remoteFileName = (entryName) => {
+    return join(entryName, `micro-remote-module.js`);
+};
+export const createModuleFederationPlugin = (serveMode, entryMapItem, evolveOptions) => {
+    const projectVirtualPath = evolveOptions.projectVirtualPath;
+    const [entryName, entryConfig] = entryMapItem;
+    const multiCdnConfig = evolveOptions.multiHtmlCdn;
+    const multiHtmlCdnResolver = evolveOptions.multiHtmlCdnEnvResolver;
+    const moduleFederation = entryConfig.options?.moduleFederation;
+    const plugins = [];
+    if (moduleFederation) {
+        const { remotes, exposes, ...restFederationOptions } = moduleFederation;
+        // e.g. `flatjs/evolve/mine` => `flatjs/evolve/home/micro-remote-module.js`
+        const entryRemoteFileName = remoteFileName(entryName);
+        // e.g. `flatjs/evolve/mine` => `flatjs_evolve_mine`
+        const containerName = normalizeWidgetName(entryName);
+        const patchExposes = exposes
+            ? Array.isArray(exposes)
+                ? exposes
+                : [exposes]
+            : [];
+        const myExposes = patchExposes.map((s) => {
+            const exposeItem = {};
+            for (const [key, config] of Object.entries(s)) {
+                exposeItem[key] = {
+                    ...config,
+                    name: join(entryName, config.name.replace(/^\//, '')),
+                };
+            }
+            return exposeItem;
+        });
+        const myRemotes = (remotes || []).map(({ name, endpoint }) => {
+            // e.g. `flatjs/evolve/home`
+            const normalizedEntryName = normalizeEvolveEntryName(name, projectVirtualPath);
+            // e.g. `flatjs_evolve_home`
+            const remoteWidgetName = normalizeWidgetName(normalizedEntryName);
+            // e.g. `flatjs/evolve/home/micro-remote-module.js`
+            const refRemoteEntryFileName = remoteFileName(normalizedEntryName);
+            // construct endpoint for remote widget name.
+            const endpointPath = endpoint
+                ? ensureSlash(endpoint(name, normalizedEntryName), false)
+                : `[window.evolveFetchMicroWidgets()]`;
+            return {
+                [remoteWidgetName]: `${remoteWidgetName}@${endpointPath}/${refRemoteEntryFileName}`,
+            };
+        });
+        plugins.push(
+        // https://webpack.js.org/plugins/module-federation-plugin/
+        new webpack.container.ModuleFederationPlugin({
+            /**
+             * The name of the container
+             * `${projectName}-${moduleName}` e.g. `flatjs_evolve_home`
+             */
+            name: containerName,
+            /**
+             * The filename of the container as relative path inside the `output.path` directory.
+             * `${entryName}/micro-remote-module.js`, e.g. `flatjs/evolve/home/micro-remote-module.js`
+             */
+            filename: entryRemoteFileName,
+            /**
+             * Container locations and request scopes from which modules should be resolved and loaded at runtime.
+             * When provided, property name is used as request scope, otherwise request scope is automatically inferred from container location.
+             */
+            remotes: myRemotes,
+            /**
+             * Modules that should be exposed by this container.
+             * When provided, property name is used as public name, otherwise public name is automatically inferred from request.
+             */
+            exposes: myExposes,
+            /**
+             * Options for library.
+             * library: { type: 'var', name: containerName },
+             * other module federation configurations
+             */
+            ...restFederationOptions,
+        }), new ExternalTemplateRemotesPlugin());
+        if (!serveMode) {
+            plugins.unshift(new HtmlInjectScriptPlugin([
+                injectFederationScripts(multiCdnConfig, multiHtmlCdnResolver),
+            ]));
+        }
+    }
+    return plugins;
+};

package/dist/plugins/multi-html/index.js

@@ -1 +1,15 @@
-import{FlatEvolveMultiCdnPlugin}from"./multi-html-cdn-plugin.js";import{createMultiHtmlWebpackPlugin}from"./multi-html-plugin.js";export const createHtmlPlugins=(t,l,u)=>{const i=[];if(t)return i;const n=Object.keys(u.multiHtmlCdn);return i.push(...createMultiHtmlWebpackPlugin(t,u,l,n)),i.push(new FlatEvolveMultiCdnPlugin(u)),i};
+import { FlatEvolveMultiCdnPlugin } from './multi-html-cdn-plugin.js';
+import { createMultiHtmlWebpackPlugin } from './multi-html-plugin.js';
+export const createHtmlPlugins = (serveMode, entryMapItem, evolveOptions) => {
+    const plugins = [];
+    // Only for `production`
+    if (serveMode) {
+        return plugins;
+    }
+    // Attach `html-webpack-plugin` first
+    const allEnv = Object.keys(evolveOptions.multiHtmlCdn);
+    plugins.push(...createMultiHtmlWebpackPlugin(serveMode, evolveOptions, entryMapItem, allEnv));
+    // Attach `@flatjs/evolve-plugin-multi-html-cdn`
+    plugins.push(new FlatEvolveMultiCdnPlugin(evolveOptions));
+    return plugins;
+};

package/dist/plugins/multi-html/multi-html-cdn-plugin.js

@@ -1 +1,84 @@
-import{basename}from"node:path";import HtmlWebpackPlugin from"html-webpack-plugin";import webpack from"webpack";import{cdnFinder,findEnvCdn,httpUrlJoin}from"../../helpers/script-injects.js";export class FlatEvolveMultiCdnPlugin{constructor(e){if(this.pluginName="FlatEvolveMultiCdnPlugin",this.requireFn=webpack.RuntimeGlobals.publicPath,this.config=e.multiHtmlCdn,this.cdnResolver=e.multiHtmlCdnEnvResolver||function cdnResolver(){},!this.config?.prod)throw new Error("We must setup `prod` for each CDN config node!")}apply(e){e.hooks.thisCompilation.tap(this.pluginName,(e=>{e.mainTemplate.hooks.requireExtensions.tap(this.pluginName,((n,t)=>{const i=[];i.push("// Dynamic assets path override(`@flatjs/evolve`) plugin-multi-html-cdn`)");const s=e.chunkGraph?.getTreeRuntimeRequirements(t);return s&&s.has(webpack.RuntimeGlobals.requireScope)&&(i.push("(function () {"),i.push(webpack.Template.indent("var flatjsMultiCdn = {")),i.push(webpack.Template.indent(webpack.Template.indent([`cdnConfig: ${JSON.stringify(this.config||{})},`]))),i.push(webpack.Template.indent(webpack.Template.indent([`cdnResolver: ${this.cdnResolver.toString()},`]))),i.push(webpack.Template.indent(webpack.Template.indent([`cdnFinder: ${cdnFinder.toString()}`]))),i.push(webpack.Template.indent("};")),i.push(webpack.Template.indent(`${this.requireFn} = flatjsMultiCdn.cdnFinder(flatjsMultiCdn.cdnConfig, flatjsMultiCdn.cdnResolver) || ${this.requireFn};`)),i.push("})();")),webpack.Template.asString(i)}))})),e.hooks.compilation.tap(this.pluginName,(e=>{HtmlWebpackPlugin.getHooks(e).beforeAssetTagGeneration.tap(this.pluginName,(e=>{const{assets:n}=e,{userOptions:t}=e.plugin,i=t.multiCdn,s=n.publicPath,a=n.js.map((e=>{if(i.disabled)return basename(e);const n=findEnvCdn(this.config,i.env);return httpUrlJoin(n,e.replace(s,""))})),p=n.css.map((e=>{if(i.disabled)return basename(e);const n=findEnvCdn(this.config,i.env);return httpUrlJoin(n,e.replace(s,""))}));return e.assets.js=a,e.assets.css=p,e}))}))}}
+import { basename } from 'node:path';
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import webpack from 'webpack';
+import { cdnFinder, findEnvCdn, httpUrlJoin, } from '../../helpers/script-injects.js';
+export class FlatEvolveMultiCdnPlugin {
+    constructor(evolveOptions) {
+        this.pluginName = 'FlatEvolveMultiCdnPlugin';
+        // https://github.com/webpack/webpack/blob/3d653290fafe385277b48e5a36807124618b9561/lib/MainTemplate.js#L12
+        // the bundle public path RuntimeGlobals.publicPath: '__webpack_require__.p';
+        this.requireFn = webpack.RuntimeGlobals.publicPath;
+        this.config = evolveOptions.multiHtmlCdn;
+        this.cdnResolver =
+            evolveOptions.multiHtmlCdnEnvResolver ||
+                function cdnResolver() {
+                    return undefined;
+                };
+        // Make sure we have `prod` configuration for each cdn node at least.
+        if (!this.config?.prod) {
+            throw new Error('We must setup `prod` for each CDN config node!');
+        }
+    }
+    /**
+     * Apply the plugin to check if there are non initial chunks which need to be imported using `require-ensure` or `import`
+     * https://github.com/webpack/webpack/blob/3d653290fafe385277b48e5a36807124618b9561/lib/MainTemplate.js#L158
+     * https://www.npmjs.com/package/vscode-webpack-debugger
+     * https://www.cnblogs.com/Scar007/p/9166068.html
+     * https://www.cnblogs.com/pluslius/p/10271537.html
+     */
+    apply(compiler) {
+        // Handle chunk assets while  `Compilation:before-chunk-assets`
+        // https://github.com/webpack/webpack/blob/3d653290fafe385277b48e5a36807124618b9561/lib/MainTemplate.js#L58
+        compiler.hooks.thisCompilation.tap(this.pluginName, (compilation) => {
+            compilation.mainTemplate.hooks.requireExtensions.tap(this.pluginName, (_source, chunk) => {
+                const buf = [];
+                buf.push('// Dynamic assets path override(`@flatjs/evolve`) plugin-multi-html-cdn`)');
+                const runtimeRequirements = compilation.chunkGraph?.getTreeRuntimeRequirements(chunk);
+                if (runtimeRequirements &&
+                    runtimeRequirements.has(webpack.RuntimeGlobals.requireScope)) {
+                    buf.push('(function () {');
+                    buf.push(webpack.Template.indent(`var flatjsMultiCdn = {`));
+                    buf.push(webpack.Template.indent(webpack.Template.indent([
+                        `cdnConfig: ${JSON.stringify(this.config || {})},`,
+                    ])));
+                    buf.push(webpack.Template.indent(webpack.Template.indent([
+                        `cdnResolver: ${this.cdnResolver.toString()},`,
+                    ])));
+                    buf.push(webpack.Template.indent(webpack.Template.indent([`cdnFinder: ${cdnFinder.toString()}`])));
+                    buf.push(webpack.Template.indent(`};`));
+                    buf.push(webpack.Template.indent(`${this.requireFn} = flatjsMultiCdn.cdnFinder(flatjsMultiCdn.cdnConfig, flatjsMultiCdn.cdnResolver) || ${this.requireFn};`));
+                    buf.push('})();');
+                }
+                return webpack.Template.asString(buf);
+            });
+        });
+        // Using html webpack plugin hooks to replace `scripts` `styles` before inject to html temlate file.
+        compiler.hooks.compilation.tap(this.pluginName, (compilation) => {
+            HtmlWebpackPlugin.getHooks(compilation).beforeAssetTagGeneration.tap(this.pluginName, (data) => {
+                const { assets } = data;
+                const { userOptions } = data.plugin;
+                const multiCdn = userOptions.multiCdn;
+                const publicPath = assets.publicPath;
+                const scripts = assets.js.map((scriptItem) => {
+                    // Normally for `index-dev.html`  we need to use relative path.
+                    if (multiCdn.disabled) {
+                        return basename(scriptItem);
+                    }
+                    const randomCdn = findEnvCdn(this.config, multiCdn.env);
+                    return httpUrlJoin(randomCdn, scriptItem.replace(publicPath, ''));
+                });
+                const styles = assets.css.map((styleItem) => {
+                    // Normally for `index-dev.html`  we need to use relative path.
+                    if (multiCdn.disabled) {
+                        return basename(styleItem);
+                    }
+                    const randomCdn = findEnvCdn(this.config, multiCdn.env);
+                    return httpUrlJoin(randomCdn, styleItem.replace(publicPath, ''));
+                });
+                data.assets.js = scripts;
+                data.assets.css = styles;
+                return data;
+            });
+        });
+    }
+}

package/dist/plugins/multi-html/multi-html-plugin.js

@@ -1 +1,70 @@
-import HtmlWebpackPlugin from"html-webpack-plugin";import{allowPx2remForModule}from"../../helpers/allow-px2rem-for-module.js";import{getHtmlPluginConfig}from"../../helpers/get-html-plugin-config.js";const minifyOpts={minifyJS:!0,removeComments:!0,collapseWhitespace:!0,collapseBooleanAttributes:!1};export const createMultiHtmlWebpackPlugin=(e,t,i,l)=>{const[o,n]=i,r=[],{options:m}=n,g=e?"development":"production";for(const e of l)r.push(new HtmlWebpackPlugin({inject:"body",title:getHtmlPluginConfig("title",g,m?.title),chunks:[o],minify:!1!==m?.htmlMinify&&!["me","dev"].includes(e)&&minifyOpts,filename:`${o}/index${"prod"===e?"":`-${e}`}.html`,template:getHtmlPluginConfig("templatePath",g,m?.templatePath).replace("{0}",e),templateParameters:{title:getHtmlPluginConfig("title",g,m?.title),favicon:getHtmlPluginConfig("favicon",g,m?.favicon),headBeforeHtmlTags:getHtmlPluginConfig("headBeforeHtmlTags",g,m?.headBeforeHtmlTags),inlineScripts:getHtmlPluginConfig("inlineScripts",g,m?.inlineScripts),headBeforeStyles:getHtmlPluginConfig("headBeforeStyles",g,m?.headBeforeStyles),headBeforeScripts:getHtmlPluginConfig("headBeforeScripts",g,m?.headBeforeScripts),bodyAfterScripts:getHtmlPluginConfig("bodyAfterScripts",g,m?.bodyAfterScripts),viewport:allowPx2remForModule(i,t)?getHtmlPluginConfig("viewport",g,m?.viewport):""},multiCdn:{env:e,disabled:(m?.excludeCdnEnvs||["me","dev","ntv"]).includes(e)}}));return r};
+import HtmlWebpackPlugin from 'html-webpack-plugin';
+import { allowPx2remForModule } from '../../helpers/allow-px2rem-for-module.js';
+import { getHtmlPluginConfig, } from '../../helpers/get-html-plugin-config.js';
+import { findEnvCdn } from '../../helpers/script-injects.js';
+const minifyOpts = {
+    minifyJS: true,
+    removeComments: true,
+    collapseWhitespace: true,
+    collapseBooleanAttributes: false,
+};
+/**
+ * Create `html-webpack-plugin` for this build, refer to best practices
+ * We'd better pass only one entry for each `build` cycle
+ * @param buildEntryItem the entries for this `build`
+ * @param allEnv
+ */
+export const createMultiHtmlWebpackPlugin = (serveMode, evolveOptions, entryMapItem, allEnv) => {
+    const [entryKey, entryConfig] = entryMapItem;
+    const htmlPlugins = [];
+    const { options } = entryConfig;
+    const mode = serveMode ? 'development' : 'production';
+    for (const env of allEnv) {
+        const envCdn = findEnvCdn(evolveOptions.multiHtmlCdn, env);
+        const configData = {
+            mode,
+            envCdn,
+        };
+        htmlPlugins.push(new HtmlWebpackPlugin({
+            inject: 'body',
+            title: getHtmlPluginConfig('title', configData, options?.title),
+            chunks: [entryKey],
+            // `minify` is true, `dev` always don't minify.
+            minify: options?.htmlMinify === false || ['me', 'dev'].includes(env)
+                ? false
+                : minifyOpts,
+            // output file path
+            filename: `${entryKey}/index${env === 'prod' ? '' : `-${env}`}.html`,
+            // html template
+            template: getHtmlPluginConfig('templatePath', configData, options?.templatePath).replace(`{0}`, env),
+            // template parameters
+            templateParameters: {
+                // The page title
+                title: getHtmlPluginConfig('title', configData, options?.title),
+                // The page favicon
+                favicon: getHtmlPluginConfig('favicon', configData, options?.favicon),
+                // The customized inject head tags.
+                headBeforeHtmlTags: getHtmlPluginConfig('headBeforeHtmlTags', configData, options?.headBeforeHtmlTags),
+                // The customized inject inline scripts.
+                inlineScripts: getHtmlPluginConfig('inlineScripts', configData, options?.inlineScripts),
+                // The ordered styles will be injected start of html head.
+                headBeforeStyles: getHtmlPluginConfig('headBeforeStyles', configData, options?.headBeforeStyles),
+                // The ordered scripts will be injected before html head.
+                headBeforeScripts: getHtmlPluginConfig('headBeforeScripts', configData, options?.headBeforeScripts),
+                // The ordered scripts will be injected end of html body.
+                bodyAfterScripts: getHtmlPluginConfig('bodyAfterScripts', configData, options?.bodyAfterScripts),
+                // `allowPx2rem` default is true
+                viewport: allowPx2remForModule(entryMapItem, evolveOptions)
+                    ? getHtmlPluginConfig('viewport', configData, options?.viewport)
+                    : '',
+            },
+            // Some options for plugin used the `hook` of `html-webpack-plugin`
+            multiCdn: {
+                env,
+                // use relative path for `me`, `dev`, `ntv`
+                disabled: (options?.excludeCdnEnvs || ['me', 'dev', 'ntv']).includes(env),
+            },
+        }));
+    }
+    return htmlPlugins;
+};

package/dist/types/index.js

@@ -1 +1,8 @@
-export*from"./types-dev-server.js";export*from"./types-entry-map.js";export*from"./types-federation.js";export*from"./types-modular-import.js";export*from"./types-multi-html.js";export*from"./types-options.js";export*from"./types-loader-options.js";export*from"./types-webpack.js";
+export * from './types-dev-server.js';
+export * from './types-entry-map.js';
+export * from './types-federation.js';
+export * from './types-modular-import.js';
+export * from './types-multi-html.js';
+export * from './types-options.js';
+export * from './types-loader-options.js';
+export * from './types-webpack.js';

package/dist/types/types-ci.js

@@ -1 +1 @@
-export{};
+export {};