@nx/rspack 21.0.0-beta.0 → 21.0.0-beta.10

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/e2e-web-server-info-utils.d.ts

@@ -0,0 +1,2 @@
+import { type Tree } from '@nx/devkit';
+export declare function getRspackE2EWebServerInfo(tree: Tree, projectName: string, configFilePath: string, isPluginBeingAdded: boolean, e2ePortOverride?: number): Promise<import("@nx/devkit/src/generators/e2e-web-server-info-utils").E2EWebServerDetails>;

package/src/utils/e2e-web-server-info-utils.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRspackE2EWebServerInfo = getRspackE2EWebServerInfo;
+const devkit_1 = require("@nx/devkit");
+const e2e_web_server_info_utils_1 = require("@nx/devkit/src/generators/e2e-web-server-info-utils");
+async function getRspackE2EWebServerInfo(tree, projectName, configFilePath, isPluginBeingAdded, e2ePortOverride) {
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    let e2ePort = e2ePortOverride ?? 4200;
+    if (nxJson.targetDefaults?.['serve'] &&
+        nxJson.targetDefaults?.['serve'].options?.port) {
+        e2ePort = nxJson.targetDefaults?.['serve'].options?.port;
+    }
+    return (0, e2e_web_server_info_utils_1.getE2EWebServerInfo)(tree, projectName, {
+        plugin: '@nx/rspack/plugin',
+        serveTargetName: 'serveTargetName',
+        serveStaticTargetName: 'previewTargetName',
+        configFilePath,
+    }, {
+        defaultServeTargetName: 'serve',
+        defaultServeStaticTargetName: 'preview',
+        defaultE2EWebServerAddress: `http://localhost:${e2ePort}`,
+        defaultE2ECiBaseUrl: 'http://localhost:4200',
+        defaultE2EPort: e2ePort,
+    }, isPluginBeingAdded);
+}

package/src/utils/versions.d.ts

@@ -1,16 +1,16 @@
 export declare const nxVersion: any;
-export declare const rspackCoreVersion = "^1.1.5";
+export declare const rspackCoreVersion = "1.2.2";
 export declare const rspackDevServerVersion = "1.0.9";
-export declare const rspackPluginMinifyVersion = "^0.7.5";
 export declare const rspackPluginReactRefreshVersion = "^1.0.0";
 export declare const lessLoaderVersion = "~11.1.3";
+export declare const sassLoaderVersion = "^16.0.4";
+export declare const sassEmbeddedVersion = "^1.83.4";
 export declare const reactRefreshVersion = "~0.14.0";
 export declare const nestjsCommonVersion = "~9.0.0";
 export declare const nestjsCoreVersion = "~9.0.0";
 export declare const nestjsPlatformExpressVersion = "~9.0.0";
 export declare const nestjsMicroservicesVersion = "~9.0.0";
 export declare const lessVersion = "4.1.3";
-export declare const sassVersion = "^1.42.1";
 export declare const stylusVersion = "^0.55.0";
 export declare const eslintPluginImportVersion = "2.27.5";
 export declare const eslintPluginJsxA11yVersion = "6.7.1";

package/src/utils/versions.js

@@ -1,19 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.eslintPluginReactHooksVersion = exports.eslintPluginReactVersion = exports.eslintPluginJsxA11yVersion = exports.eslintPluginImportVersion = exports.stylusVersion = exports.sassVersion = exports.lessVersion = exports.nestjsMicroservicesVersion = exports.nestjsPlatformExpressVersion = exports.nestjsCoreVersion = exports.nestjsCommonVersion = exports.reactRefreshVersion = exports.lessLoaderVersion = exports.rspackPluginReactRefreshVersion = exports.rspackPluginMinifyVersion = exports.rspackDevServerVersion = exports.rspackCoreVersion = exports.nxVersion = void 0;
+exports.eslintPluginReactHooksVersion = exports.eslintPluginReactVersion = exports.eslintPluginJsxA11yVersion = exports.eslintPluginImportVersion = exports.stylusVersion = exports.lessVersion = exports.nestjsMicroservicesVersion = exports.nestjsPlatformExpressVersion = exports.nestjsCoreVersion = exports.nestjsCommonVersion = exports.reactRefreshVersion = exports.sassEmbeddedVersion = exports.sassLoaderVersion = exports.lessLoaderVersion = exports.rspackPluginReactRefreshVersion = exports.rspackDevServerVersion = exports.rspackCoreVersion = exports.nxVersion = void 0;
 exports.nxVersion = require('../../package.json').version;
-exports.rspackCoreVersion = '^1.1.5';
+exports.rspackCoreVersion = '1.2.2';
 exports.rspackDevServerVersion = '1.0.9';
-exports.rspackPluginMinifyVersion = '^0.7.5';
 exports.rspackPluginReactRefreshVersion = '^1.0.0';
 exports.lessLoaderVersion = '~11.1.3';
+exports.sassLoaderVersion = '^16.0.4';
+exports.sassEmbeddedVersion = '^1.83.4';
 exports.reactRefreshVersion = '~0.14.0';
 exports.nestjsCommonVersion = '~9.0.0';
 exports.nestjsCoreVersion = '~9.0.0';
 exports.nestjsPlatformExpressVersion = '~9.0.0';
 exports.nestjsMicroservicesVersion = '~9.0.0';
 exports.lessVersion = '4.1.3';
-exports.sassVersion = '^1.42.1';
 exports.stylusVersion = '^0.55.0';
 exports.eslintPluginImportVersion = '2.27.5';
 exports.eslintPluginJsxA11yVersion = '6.7.1';

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

@@ -8,12 +8,19 @@ export interface WithWebOptions {
     generateIndexHtml?: boolean;
     index?: string;
     postcssConfig?: string;
+    sassImplementation?: 'sass' | 'sass-embedded';
     scripts?: Array<ExtraEntryPointClass | string>;
     styles?: Array<ExtraEntryPointClass | string>;
     stylePreprocessorOptions?: {
         includePaths?: string[];
+        sassOptions?: Record<string, any>;
+        lessOptions?: Record<string, any>;
     };
     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;