@nx/rspack 20.8.1 → 20.8.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nx/rspack",
   "description": "The Nx Plugin for Rspack contains executors and generators that support building applications using Rspack.",
-  "version": "20.8.1",
+  "version": "20.8.2",
   "type": "commonjs",
   "repository": {
     "type": "git",
@@ -24,10 +24,10 @@
   "generators": "./generators.json",
   "executors": "./executors.json",
   "dependencies": {
-    "@nx/js": "20.8.1",
-    "@nx/devkit": "20.8.1",
-    "@nx/web": "20.8.1",
-    "@nx/module-federation": "20.8.1",
+    "@nx/js": "20.8.2",
+    "@nx/devkit": "20.8.2",
+    "@nx/web": "20.8.2",
+    "@nx/module-federation": "20.8.2",
     "@phenomnomnominal/tsquery": "~5.0.1",
     "@rspack/core": "^1.1.5",
     "@rspack/dev-server": "^1.0.9",
@@ -42,6 +42,7 @@
     "less-loader": "11.1.0",
     "license-webpack-plugin": "^4.0.2",
     "loader-utils": "^2.0.3",
+    "parse5": "4.0.0",
     "sass": "^1.85.0",
     "sass-embedded": "^1.83.4",
     "sass-loader": "^16.0.4",

package/src/generators/convert-webpack/lib/transform-cjs.js

@@ -12,6 +12,87 @@ function transformCjsConfigFile(tree, configPath) {
         transformWithModuleFederation(tree, configPath, scope);
         transformWithModuleFederationSSR(tree, configPath, scope);
     });
+    // Add useLegacyHtmlPlugin: true to withWeb() calls
+    transformWithWebCalls(tree, configPath);
+}
+function transformWithWebCalls(tree, configPath) {
+    const configContents = tree.read(configPath, 'utf-8');
+    const ast = tsquery_1.tsquery.ast(configContents);
+    // Find withWeb() calls
+    const withWebCallNodes = (0, tsquery_1.tsquery)(ast, 'CallExpression > Identifier[name=withWeb]');
+    // If there are withWeb calls, update them
+    if (withWebCallNodes.length > 0) {
+        let newContents = configContents;
+        for (const node of withWebCallNodes) {
+            const callExpr = node.parent;
+            if (!callExpr)
+                continue;
+            const startPos = callExpr.getStart();
+            const endPos = callExpr.getEnd();
+            const callText = configContents.substring(startPos, endPos);
+            // Skip if useLegacyHtmlPlugin is already present
+            if (callText.includes('useLegacyHtmlPlugin')) {
+                continue;
+            }
+            // If it's already withWeb({ ... }), add useLegacyHtmlPlugin: true to the options
+            if (callText.includes('{') && callText.includes('}')) {
+                const newCallText = callText.replace(/\{\s*/, '{ useLegacyHtmlPlugin: true,\n      ');
+                newContents =
+                    newContents.substring(0, startPos) +
+                        newCallText +
+                        newContents.substring(endPos);
+            }
+            else {
+                // If it's just withWeb(), replace with withWeb({ useLegacyHtmlPlugin: true })
+                const newCallText = 'withWeb({ useLegacyHtmlPlugin: true })';
+                newContents =
+                    newContents.substring(0, startPos) +
+                        newCallText +
+                        newContents.substring(endPos);
+            }
+        }
+        if (newContents !== configContents) {
+            tree.write(configPath, newContents);
+        }
+        return;
+    }
+    // If no withWeb calls, check for withReact calls
+    const withReactCallNodes = (0, tsquery_1.tsquery)(ast, 'CallExpression > Identifier[name=withReact]');
+    if (withReactCallNodes.length === 0) {
+        return;
+    }
+    let newContents = configContents;
+    for (const node of withReactCallNodes) {
+        const callExpr = node.parent;
+        if (!callExpr)
+            continue;
+        const startPos = callExpr.getStart();
+        const endPos = callExpr.getEnd();
+        const callText = configContents.substring(startPos, endPos);
+        // Skip if useLegacyHtmlPlugin is already present
+        if (callText.includes('useLegacyHtmlPlugin')) {
+            continue;
+        }
+        // If it's already withReact({ ... }), add useLegacyHtmlPlugin: true to the options
+        if (callText.includes('{') && callText.includes('}')) {
+            const newCallText = callText.replace(/\{\s*/, '{ useLegacyHtmlPlugin: true,\n      ');
+            newContents =
+                newContents.substring(0, startPos) +
+                    newCallText +
+                    newContents.substring(endPos);
+        }
+        else {
+            // If it's just withReact(), replace with withReact({ useLegacyHtmlPlugin: true })
+            const newCallText = 'withReact({ useLegacyHtmlPlugin: true })';
+            newContents =
+                newContents.substring(0, startPos) +
+                    newCallText +
+                    newContents.substring(endPos);
+        }
+    }
+    if (newContents !== configContents) {
+        tree.write(configPath, newContents);
+    }
 }
 function transformComposePlugins(tree, configPath, scope) {
     const configContents = tree.read(configPath, 'utf-8');

package/src/generators/convert-webpack/lib/transform-esm.js

@@ -12,6 +12,87 @@ function transformEsmConfigFile(tree, configPath) {
         transformWithModuleFederation(tree, configPath, scope);
         transformWithModuleFederationSSR(tree, configPath, scope);
     });
+    // Add useLegacyHtmlPlugin: true to withWeb() calls
+    transformWithWebCalls(tree, configPath);
+}
+function transformWithWebCalls(tree, configPath) {
+    const configContents = tree.read(configPath, 'utf-8');
+    const ast = tsquery_1.tsquery.ast(configContents);
+    // Find withWeb() calls
+    const withWebCallNodes = (0, tsquery_1.tsquery)(ast, 'CallExpression > Identifier[name=withWeb]');
+    // If there are withWeb calls, update them
+    if (withWebCallNodes.length > 0) {
+        let newContents = configContents;
+        for (const node of withWebCallNodes) {
+            const callExpr = node.parent;
+            if (!callExpr)
+                continue;
+            const startPos = callExpr.getStart();
+            const endPos = callExpr.getEnd();
+            const callText = configContents.substring(startPos, endPos);
+            // Skip if useLegacyHtmlPlugin is already present
+            if (callText.includes('useLegacyHtmlPlugin')) {
+                continue;
+            }
+            // If it's already withWeb({ ... }), add useLegacyHtmlPlugin: true to the options
+            if (callText.includes('{') && callText.includes('}')) {
+                const newCallText = callText.replace(/\{\s*/, '{ useLegacyHtmlPlugin: true,\n      ');
+                newContents =
+                    newContents.substring(0, startPos) +
+                        newCallText +
+                        newContents.substring(endPos);
+            }
+            else {
+                // If it's just withWeb(), replace with withWeb({ useLegacyHtmlPlugin: true })
+                const newCallText = 'withWeb({ useLegacyHtmlPlugin: true })';
+                newContents =
+                    newContents.substring(0, startPos) +
+                        newCallText +
+                        newContents.substring(endPos);
+            }
+        }
+        if (newContents !== configContents) {
+            tree.write(configPath, newContents);
+        }
+        return;
+    }
+    // If no withWeb calls, check for withReact calls
+    const withReactCallNodes = (0, tsquery_1.tsquery)(ast, 'CallExpression > Identifier[name=withReact]');
+    if (withReactCallNodes.length === 0) {
+        return;
+    }
+    let newContents = configContents;
+    for (const node of withReactCallNodes) {
+        const callExpr = node.parent;
+        if (!callExpr)
+            continue;
+        const startPos = callExpr.getStart();
+        const endPos = callExpr.getEnd();
+        const callText = configContents.substring(startPos, endPos);
+        // Skip if useLegacyHtmlPlugin is already present
+        if (callText.includes('useLegacyHtmlPlugin')) {
+            continue;
+        }
+        // If it's already withReact({ ... }), add useLegacyHtmlPlugin: true to the options
+        if (callText.includes('{') && callText.includes('}')) {
+            const newCallText = callText.replace(/\{\s*/, '{ useLegacyHtmlPlugin: true,\n      ');
+            newContents =
+                newContents.substring(0, startPos) +
+                    newCallText +
+                    newContents.substring(endPos);
+        }
+        else {
+            // If it's just withReact(), replace with withReact({ useLegacyHtmlPlugin: true })
+            const newCallText = 'withReact({ useLegacyHtmlPlugin: true })';
+            newContents =
+                newContents.substring(0, startPos) +
+                    newCallText +
+                    newContents.substring(endPos);
+        }
+    }
+    if (newContents !== configContents) {
+        tree.write(configPath, newContents);
+    }
 }
 function transformComposePlugins(tree, configPath, scope) {
     const configContents = tree.read(configPath, 'utf-8');

package/src/plugins/utils/apply-base-config.js

@@ -132,7 +132,6 @@ function applyNxIndependentConfig(options, config) {
                     },
                 }),
             ],
-            runtimeChunk: false,
             concatenateModules: true,
         };
     config.stats = {

package/src/plugins/utils/apply-web-config.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.applyWebConfig = applyWebConfig;
 const core_1 = require("@rspack/core");
+const write_index_html_plugin_1 = require("../write-index-html-plugin");
 const instantiate_script_plugins_1 = require("./instantiate-script-plugins");
 const path_1 = require("path");
 const hash_format_1 = require("./hash-format");
@@ -32,14 +33,27 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
         plugins.push(...(0, instantiate_script_plugins_1.instantiateScriptPlugins)(options));
     }
     if (options.index && options.generateIndexHtml) {
-        plugins.push(new core_1.HtmlRspackPlugin({
-            template: options.index,
-            sri: options.subresourceIntegrity ? 'sha256' : undefined,
-            ...(options.baseHref ? { base: { href: options.baseHref } } : {}),
-            ...(config.output?.scriptType === 'module'
-                ? { scriptLoading: 'module' }
-                : {}),
-        }));
+        if (options.useLegacyHtmlPlugin) {
+            plugins.push(new write_index_html_plugin_1.WriteIndexHtmlPlugin({
+                indexPath: options.index,
+                outputPath: 'index.html',
+                baseHref: typeof options.baseHref === 'string' ? options.baseHref : undefined,
+                sri: options.subresourceIntegrity,
+                scripts: options.scripts,
+                styles: options.styles,
+                crossOrigin: config.output?.scriptType === 'module' ? 'anonymous' : undefined,
+            }));
+        }
+        else {
+            plugins.push(new core_1.HtmlRspackPlugin({
+                template: options.index,
+                sri: options.subresourceIntegrity ? 'sha256' : undefined,
+                ...(options.baseHref ? { base: { href: options.baseHref } } : {}),
+                ...(config.output?.scriptType === 'module'
+                    ? { scriptLoading: 'module' }
+                    : {}),
+            }));
+        }
     }
     const minimizer = [];
     if (isProd && stylesOptimization) {

package/src/plugins/utils/models.d.ts

@@ -233,6 +233,10 @@ export interface NxAppRspackPluginOptions {
      * Whether to rebase absolute path for assets in postcss cli resources.
      */
     rebaseRootRelative?: boolean;
+    /**
+     * Use the legacy WriteIndexHtmlPlugin instead of the built-in HtmlRspackPlugin.
+     */
+    useLegacyHtmlPlugin?: boolean;
 }
 export interface NormalizedNxAppRspackPluginOptions extends NxAppRspackPluginOptions {
     projectName: string;
@@ -244,4 +248,5 @@ export interface NormalizedNxAppRspackPluginOptions extends NxAppRspackPluginOpt
     projectGraph: ProjectGraph;
     outputFileName: string;
     assets: AssetGlobPattern[];
+    useLegacyHtmlPlugin: boolean;
 }

package/src/plugins/utils/plugins/normalize-options.js

@@ -65,6 +65,7 @@ function normalizeOptions(options) {
         extractCss: combinedPluginAndMaybeExecutorOptions.extractCss ?? true,
         fileReplacements: normalizeFileReplacements(devkit_1.workspaceRoot, combinedPluginAndMaybeExecutorOptions.fileReplacements),
         generateIndexHtml: combinedPluginAndMaybeExecutorOptions.generateIndexHtml ?? true,
+        useLegacyHtmlPlugin: combinedPluginAndMaybeExecutorOptions.useLegacyHtmlPlugin ?? false,
         main: combinedPluginAndMaybeExecutorOptions.main,
         namedChunks: combinedPluginAndMaybeExecutorOptions.namedChunks ?? !isProd,
         optimization: combinedPluginAndMaybeExecutorOptions.optimization ?? isProd,

package/src/plugins/write-index-html-plugin.d.ts

@@ -0,0 +1,22 @@
+import { Compiler } from '@rspack/core';
+import { ExtraEntryPoint } from '../utils/model';
+export interface WriteIndexHtmlOptions {
+    indexPath: string;
+    outputPath: string;
+    baseHref?: string;
+    deployUrl?: string;
+    sri?: boolean;
+    scripts?: ExtraEntryPoint[];
+    styles?: ExtraEntryPoint[];
+    crossOrigin?: 'none' | 'anonymous' | 'use-credentials';
+}
+export declare class WriteIndexHtmlPlugin {
+    private readonly options;
+    constructor(options: WriteIndexHtmlOptions);
+    apply(compiler: Compiler): void;
+    private getEmittedFiles;
+    private stripBom;
+    private augmentIndexHtml;
+    private generateSriAttributes;
+    private filterAndMapBuildFiles;
+}

package/src/plugins/write-index-html-plugin.js

@@ -0,0 +1,250 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WriteIndexHtmlPlugin = void 0;
+const tslib_1 = require("tslib");
+const rspack = tslib_1.__importStar(require("@rspack/core"));
+const crypto_1 = require("crypto");
+const fs_1 = require("fs");
+const interpolate_env_variables_to_index_1 = require("../utils/webpack/interpolate-env-variables-to-index");
+const package_chunk_sort_1 = require("../utils/webpack/package-chunk-sort");
+const path_1 = require("path");
+const parse5 = require('parse5');
+class WriteIndexHtmlPlugin {
+    constructor(options) {
+        this.options = options;
+    }
+    apply(compiler) {
+        const { outputPath, indexPath, baseHref, deployUrl, sri = false, scripts = [], styles = [], crossOrigin, } = this.options;
+        compiler.hooks.thisCompilation.tap('WriteIndexHtmlPlugin', (compilation) => {
+            compilation.hooks.processAssets.tap({
+                name: 'WriteIndexHtmlPlugin',
+                // After minification and sourcemaps are done
+                stage: rspack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_INLINE,
+            }, () => {
+                const moduleFiles = this.getEmittedFiles(compilation);
+                const files = moduleFiles.filter((x) => x.extension === '.css');
+                let content = (0, fs_1.readFileSync)(indexPath).toString();
+                content = this.stripBom(content);
+                compilation.assets[outputPath] = this.augmentIndexHtml({
+                    input: outputPath,
+                    inputContent: (0, interpolate_env_variables_to_index_1.interpolateEnvironmentVariablesToIndex)(content, deployUrl),
+                    baseHref,
+                    deployUrl,
+                    crossOrigin,
+                    sri,
+                    entrypoints: (0, package_chunk_sort_1.generateEntryPoints)({ scripts, styles }),
+                    files: this.filterAndMapBuildFiles(files, ['.js', '.css']),
+                    moduleFiles: this.filterAndMapBuildFiles(moduleFiles, ['.js']),
+                    loadOutputFile: (filePath) => compilation.assets[filePath].source().toString(),
+                });
+            });
+        });
+    }
+    getEmittedFiles(compilation) {
+        const files = [];
+        // adds all chunks to the list of emitted files such as lazy loaded modules
+        for (const chunk of compilation.chunks) {
+            for (const file of chunk.files) {
+                files.push({
+                    // The id is guaranteed to exist at this point in the compilation process
+                    id: chunk.id.toString(),
+                    name: chunk.name,
+                    file,
+                    extension: (0, path_1.extname)(file),
+                    initial: chunk.isOnlyInitial(),
+                });
+            }
+        }
+        // other all files
+        for (const file of Object.keys(compilation.assets)) {
+            files.push({
+                file,
+                extension: (0, path_1.extname)(file),
+                initial: false,
+                asset: true,
+            });
+        }
+        // dedupe
+        return files.filter(({ file, name }, index) => files.findIndex((f) => f.file === file && (!name || name === f.name)) === index);
+    }
+    stripBom(data) {
+        return data.replace(/^\uFEFF/, '');
+    }
+    augmentIndexHtml(params) {
+        const { loadOutputFile, files, moduleFiles = [], entrypoints } = params;
+        let { crossOrigin = 'none' } = params;
+        if (params.sri && crossOrigin === 'none') {
+            crossOrigin = 'anonymous';
+        }
+        const stylesheets = new Set();
+        const scripts = new Set();
+        // Sort files in the order we want to insert them by entrypoint and dedupes duplicates
+        const mergedFiles = [...moduleFiles, ...files];
+        for (const entrypoint of entrypoints) {
+            for (const { extension, file, name } of mergedFiles) {
+                if (name !== entrypoint) {
+                    continue;
+                }
+                switch (extension) {
+                    case '.js':
+                        scripts.add(file);
+                        break;
+                    case '.css':
+                        stylesheets.add(file);
+                        break;
+                }
+            }
+        }
+        // Find the head and body elements
+        const treeAdapter = parse5.treeAdapters.default;
+        const document = parse5.parse(params.inputContent, {
+            treeAdapter,
+            locationInfo: true,
+        });
+        let headElement;
+        let bodyElement;
+        for (const docChild of document.childNodes) {
+            if (docChild.tagName === 'html') {
+                for (const htmlChild of docChild.childNodes) {
+                    if (htmlChild.tagName === 'head') {
+                        headElement = htmlChild;
+                    }
+                    else if (htmlChild.tagName === 'body') {
+                        bodyElement = htmlChild;
+                    }
+                }
+            }
+        }
+        if (!headElement || !bodyElement) {
+            throw new Error('Missing head and/or body elements');
+        }
+        // Determine script insertion point
+        let scriptInsertionPoint;
+        if (bodyElement.__location && bodyElement.__location.endTag) {
+            scriptInsertionPoint = bodyElement.__location.endTag.startOffset;
+        }
+        else {
+            // Less accurate fallback
+            // parse5 4.x does not provide locations if malformed html is present
+            scriptInsertionPoint = params.inputContent.indexOf('</body>');
+        }
+        let styleInsertionPoint;
+        if (headElement.__location && headElement.__location.endTag) {
+            styleInsertionPoint = headElement.__location.endTag.startOffset;
+        }
+        else {
+            // Less accurate fallback
+            // parse5 4.x does not provide locations if malformed html is present
+            styleInsertionPoint = params.inputContent.indexOf('</head>');
+        }
+        // Inject into the html
+        const indexSource = new rspack.sources.ReplaceSource(new rspack.sources.RawSource(params.inputContent), params.input);
+        let scriptElements = '';
+        for (const script of scripts) {
+            const attrs = [
+                { name: 'src', value: (params.deployUrl || '') + script },
+            ];
+            if (crossOrigin !== 'none') {
+                attrs.push({ name: 'crossorigin', value: crossOrigin });
+            }
+            // We want to include nomodule or module when a file is not common amongs all
+            // such as runtime.js
+            const scriptPredictor = ({ file, }) => file === script;
+            if (!files.some(scriptPredictor)) {
+                // in some cases for differential loading file with the same name is avialable in both
+                // nomodule and module such as scripts.js
+                // we shall not add these attributes if that's the case
+                const isModuleType = moduleFiles.some(scriptPredictor);
+                if (isModuleType) {
+                    attrs.push({ name: 'type', value: 'module' });
+                }
+                else {
+                    attrs.push({ name: 'defer', value: null });
+                }
+            }
+            else {
+                attrs.push({ name: 'type', value: 'module' });
+            }
+            if (params.sri) {
+                const content = loadOutputFile(script);
+                attrs.push(...this.generateSriAttributes(content));
+            }
+            const attributes = attrs
+                .map((attr) => attr.value === null ? attr.name : `${attr.name}="${attr.value}"`)
+                .join(' ');
+            scriptElements += `<script ${attributes}></script>`;
+        }
+        indexSource.insert(scriptInsertionPoint, scriptElements);
+        // Adjust base href if specified
+        if (typeof params.baseHref == 'string') {
+            let baseElement;
+            for (const headChild of headElement.childNodes) {
+                if (headChild.tagName === 'base') {
+                    baseElement = headChild;
+                }
+            }
+            const baseFragment = treeAdapter.createDocumentFragment();
+            if (!baseElement) {
+                baseElement = treeAdapter.createElement('base', undefined, [
+                    { name: 'href', value: params.baseHref },
+                ]);
+                treeAdapter.appendChild(baseFragment, baseElement);
+                indexSource.insert(headElement.__location.startTag.endOffset, parse5.serialize(baseFragment, { treeAdapter }));
+            }
+            else {
+                let hrefAttribute;
+                for (const attribute of baseElement.attrs) {
+                    if (attribute.name === 'href') {
+                        hrefAttribute = attribute;
+                    }
+                }
+                if (hrefAttribute) {
+                    hrefAttribute.value = params.baseHref;
+                }
+                else {
+                    baseElement.attrs.push({ name: 'href', value: params.baseHref });
+                }
+                treeAdapter.appendChild(baseFragment, baseElement);
+                indexSource.replace(baseElement.__location.startOffset, baseElement.__location.endOffset, parse5.serialize(baseFragment, { treeAdapter }));
+            }
+        }
+        const styleElements = treeAdapter.createDocumentFragment();
+        for (const stylesheet of stylesheets) {
+            const attrs = [
+                { name: 'rel', value: 'stylesheet' },
+                { name: 'href', value: (params.deployUrl || '') + stylesheet },
+            ];
+            if (crossOrigin !== 'none') {
+                attrs.push({ name: 'crossorigin', value: crossOrigin });
+            }
+            if (params.sri) {
+                const content = loadOutputFile(stylesheet);
+                attrs.push(...this.generateSriAttributes(content));
+            }
+            const element = treeAdapter.createElement('link', undefined, attrs);
+            treeAdapter.appendChild(styleElements, element);
+        }
+        indexSource.insert(styleInsertionPoint, parse5.serialize(styleElements, { treeAdapter }));
+        return indexSource;
+    }
+    generateSriAttributes(content) {
+        const algo = 'sha384';
+        const hash = (0, crypto_1.createHash)(algo).update(content, 'utf8').digest('base64');
+        return [{ name: 'integrity', value: `${algo}-${hash}` }];
+    }
+    filterAndMapBuildFiles(files, extensionFilter) {
+        const filteredFiles = [];
+        // This test excludes files generated by HMR (e.g. main.hot-update.js).
+        const hotUpdateAsset = /hot-update\.[cm]?js$/;
+        for (const { file, name, extension, initial } of files) {
+            if (name &&
+                initial &&
+                extensionFilter.includes(extension) &&
+                !hotUpdateAsset.test(file)) {
+                filteredFiles.push({ file, extension, name });
+            }
+        }
+        return filteredFiles;
+    }
+}
+exports.WriteIndexHtmlPlugin = WriteIndexHtmlPlugin;

package/src/utils/webpack/interpolate-env-variables-to-index.d.ts

@@ -0,0 +1 @@
+export declare function interpolateEnvironmentVariablesToIndex(contents: string, deployUrl?: string): string;

package/src/utils/webpack/interpolate-env-variables-to-index.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.interpolateEnvironmentVariablesToIndex = interpolateEnvironmentVariablesToIndex;
+function interpolateEnvironmentVariablesToIndex(contents, deployUrl) {
+    const environmentVariables = getClientEnvironment(deployUrl || '');
+    return interpolateEnvironmentVariables(contents, environmentVariables);
+}
+const NX_PREFIX = /^NX_PUBLIC_/i;
+function isNxEnvironmentKey(x) {
+    return NX_PREFIX.test(x);
+}
+function getClientEnvironment(deployUrl) {
+    return Object.keys(process.env)
+        .filter(isNxEnvironmentKey)
+        .reduce((env, key) => {
+        env[key] = process.env[key];
+        return env;
+    }, {
+        NODE_ENV: process.env.NODE_ENV || 'development',
+        DEPLOY_URL: deployUrl || process.env.DEPLOY_URL || '',
+    });
+}
+function interpolateEnvironmentVariables(documentContents, environmentVariables) {
+    let temp = documentContents;
+    for (const [key, value] of Object.entries(environmentVariables)) {
+        temp = temp.replace(new RegExp(`%${key}%`, 'g'), value);
+    }
+    return temp;
+}

package/src/utils/webpack/normalize-entry.d.ts

@@ -0,0 +1,2 @@
+import { ExtraEntryPoint, NormalizedEntryPoint } from '../model';
+export declare function normalizeExtraEntryPoints(extraEntryPoints: ExtraEntryPoint[], defaultBundleName: string): NormalizedEntryPoint[];

package/src/utils/webpack/normalize-entry.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.normalizeExtraEntryPoints = normalizeExtraEntryPoints;
+function normalizeExtraEntryPoints(extraEntryPoints, defaultBundleName) {
+    return extraEntryPoints.map((entry) => {
+        let normalizedEntry;
+        if (typeof entry === 'string') {
+            normalizedEntry = {
+                input: entry,
+                inject: true,
+                bundleName: defaultBundleName,
+            };
+        }
+        else {
+            const { inject = true, ...newEntry } = entry;
+            let bundleName;
+            if (entry.bundleName) {
+                bundleName = entry.bundleName;
+            }
+            else {
+                bundleName = defaultBundleName;
+            }
+            normalizedEntry = { ...newEntry, bundleName };
+        }
+        return normalizedEntry;
+    });
+}

package/src/utils/webpack/package-chunk-sort.d.ts

@@ -0,0 +1,5 @@
+import { ExtraEntryPoint } from '../model';
+export declare function generateEntryPoints(appConfig: {
+    styles: ExtraEntryPoint[];
+    scripts: ExtraEntryPoint[];
+}): string[];

package/src/utils/webpack/package-chunk-sort.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateEntryPoints = generateEntryPoints;
+const normalize_entry_1 = require("./normalize-entry");
+function generateEntryPoints(appConfig) {
+    // Add all styles/scripts, except lazy-loaded ones.
+    const extraEntryPoints = (extraEntryPoints, defaultBundleName) => {
+        const entryPoints = (0, normalize_entry_1.normalizeExtraEntryPoints)(extraEntryPoints, defaultBundleName).map((entry) => entry.bundleName);
+        // remove duplicates
+        return [...new Set(entryPoints)];
+    };
+    const styleEntryPoints = appConfig.styles.filter((style) => !(typeof style !== 'string' && !style.inject));
+    const scriptEntryPoints = appConfig.scripts.filter((script) => !(typeof script !== 'string' && !script.inject));
+    const entryPoints = [
+        'runtime',
+        'polyfills',
+        'sw-register',
+        ...extraEntryPoints(styleEntryPoints, 'styles'),
+        ...extraEntryPoints(scriptEntryPoints, 'scripts'),
+        'vendor',
+        'main',
+    ];
+    const duplicates = [
+        ...new Set(entryPoints.filter((x) => entryPoints.indexOf(x) !== entryPoints.lastIndexOf(x))),
+    ];
+    if (duplicates.length > 0) {
+        throw new Error(`Multiple bundles have been named the same: '${duplicates.join(`', '`)}'.`);
+    }
+    return entryPoints;
+}

package/src/utils/with-nx.js

@@ -26,6 +26,7 @@ function withNx(pluginOptions = {}) {
             targetName: context.targetName,
             configurationName: context.configurationName,
             projectGraph: context.projectGraph,
+            useLegacyHtmlPlugin: pluginOptions.useLegacyHtmlPlugin ?? false,
         }, config);
         processed.add(config);
         return config;

package/src/utils/with-web.d.ts

@@ -18,5 +18,9 @@ export interface WithWebOptions {
     };
     cssModules?: boolean;
     ssr?: boolean;
+    /**
+     * Use the legacy WriteIndexHtmlPlugin instead of the built-in HtmlRspackPlugin.
+     */
+    useLegacyHtmlPlugin?: boolean;
 }
 export declare function withWeb(pluginOptions?: WithWebOptions): (config: Configuration, { options, context }: NxRspackExecutionContext) => Configuration;

package/src/utils/with-web.js

@@ -16,6 +16,7 @@ function withWeb(pluginOptions = {}) {
             targetName: context.targetName,
             configurationName: context.configurationName,
             projectGraph: context.projectGraph,
+            useLegacyHtmlPlugin: pluginOptions.useLegacyHtmlPlugin ?? false,
         }, config);
         processed.add(config);
         return config;