@nx/webpack 17.1.0-beta.4 → 17.1.0-beta.5

package/src/plugins/nx-webpack-plugin/lib/apply-web-config.js

@@ -0,0 +1,355 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyWebConfig = void 0;
+const path = require("path");
+const webpack_subresource_integrity_1 = require("webpack-subresource-integrity");
+const webpack_1 = require("webpack");
+const write_index_html_plugin_1 = require("../../write-index-html-plugin");
+const hash_format_1 = require("../../../utils/hash-format");
+const get_client_environment_1 = require("../../../utils/get-client-environment");
+const normalize_entry_1 = require("../../../utils/webpack/normalize-entry");
+const stylesheet_loaders_1 = require("./stylesheet-loaders");
+const instantiate_script_plugins_1 = require("./instantiate-script-plugins");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+function applyWebConfig(options, config = {}) {
+    const plugins = [];
+    const stylesOptimization = typeof options.optimization === 'object'
+        ? options.optimization.styles
+        : options.optimization;
+    if (Array.isArray(options.scripts)) {
+        plugins.push(...(0, instantiate_script_plugins_1.instantiateScriptPlugins)(options));
+    }
+    if (options.index && options.generateIndexHtml) {
+        plugins.push(new write_index_html_plugin_1.WriteIndexHtmlPlugin({
+            crossOrigin: options.crossOrigin,
+            sri: options.subresourceIntegrity,
+            outputPath: path.basename(options.index),
+            indexPath: path.join(options.root, options.index),
+            baseHref: options.baseHref,
+            deployUrl: options.deployUrl,
+            scripts: options.scripts,
+            styles: options.styles,
+        }));
+    }
+    if (options.subresourceIntegrity) {
+        plugins.push(new webpack_subresource_integrity_1.SubresourceIntegrityPlugin());
+    }
+    const minimizer = [new webpack_1.ids.HashedModuleIdsPlugin()];
+    if (stylesOptimization) {
+        minimizer.push(new CssMinimizerPlugin({
+            test: /\.(?:css|scss|sass|less|styl)$/,
+        }));
+    }
+    if (!options.ssr) {
+        plugins.push(new webpack_1.DefinePlugin((0, get_client_environment_1.getClientEnvironment)(process.env.NODE_ENV).stringified));
+    }
+    const entry = {};
+    const globalStylePaths = [];
+    // Determine hashing format.
+    const hashFormat = (0, hash_format_1.getOutputHashFormat)(options.outputHashing);
+    const includePaths = [];
+    if (options?.stylePreprocessorOptions?.includePaths?.length > 0) {
+        options.stylePreprocessorOptions.includePaths.forEach((includePath) => includePaths.push(path.resolve(options.root, includePath)));
+    }
+    let lessPathOptions = {};
+    if (includePaths.length > 0) {
+        lessPathOptions = {
+            paths: includePaths,
+        };
+    }
+    // Process global styles.
+    if (options.styles.length > 0) {
+        (0, normalize_entry_1.normalizeExtraEntryPoints)(options.styles, 'styles').forEach((style) => {
+            const resolvedPath = path.resolve(options.root, style.input);
+            // Add style entry points.
+            if (entry[style.bundleName]) {
+                entry[style.bundleName].import.push(resolvedPath);
+            }
+            else {
+                entry[style.bundleName] = { import: [resolvedPath] };
+            }
+            // Add global css paths.
+            globalStylePaths.push(resolvedPath);
+        });
+    }
+    const cssModuleRules = [
+        {
+            test: /\.module\.css$/,
+            exclude: globalStylePaths,
+            use: (0, stylesheet_loaders_1.getCommonLoadersForCssModules)(options, includePaths),
+        },
+        {
+            test: /\.module\.(scss|sass)$/,
+            exclude: globalStylePaths,
+            use: [
+                ...(0, stylesheet_loaders_1.getCommonLoadersForCssModules)(options, includePaths),
+                {
+                    loader: require.resolve('sass-loader'),
+                    options: {
+                        implementation: require('sass'),
+                        sassOptions: {
+                            fiber: false,
+                            precision: 8,
+                            includePaths,
+                        },
+                    },
+                },
+            ],
+        },
+        {
+            test: /\.module\.less$/,
+            exclude: globalStylePaths,
+            use: [
+                ...(0, stylesheet_loaders_1.getCommonLoadersForCssModules)(options, includePaths),
+                {
+                    loader: require.resolve('less-loader'),
+                    options: {
+                        lessOptions: {
+                            paths: includePaths,
+                        },
+                    },
+                },
+            ],
+        },
+        {
+            test: /\.module\.styl$/,
+            exclude: globalStylePaths,
+            use: [
+                ...(0, stylesheet_loaders_1.getCommonLoadersForCssModules)(options, includePaths),
+                {
+                    loader: path.join(__dirname, 'webpack/deprecated-stylus-loader.js'),
+                    options: {
+                        stylusOptions: {
+                            include: includePaths,
+                        },
+                    },
+                },
+            ],
+        },
+    ];
+    const globalCssRules = [
+        {
+            test: /\.css$/,
+            exclude: globalStylePaths,
+            use: (0, stylesheet_loaders_1.getCommonLoadersForGlobalCss)(options, includePaths),
+        },
+        {
+            test: /\.scss$|\.sass$/,
+            exclude: globalStylePaths,
+            use: [
+                ...(0, stylesheet_loaders_1.getCommonLoadersForGlobalCss)(options, includePaths),
+                {
+                    loader: require.resolve('sass-loader'),
+                    options: {
+                        implementation: require('sass'),
+                        sourceMap: !!options.sourceMap,
+                        sassOptions: {
+                            fiber: false,
+                            // bootstrap-sass requires a minimum precision of 8
+                            precision: 8,
+                            includePaths,
+                        },
+                    },
+                },
+            ],
+        },
+        {
+            test: /\.less$/,
+            exclude: globalStylePaths,
+            use: [
+                ...(0, stylesheet_loaders_1.getCommonLoadersForGlobalCss)(options, includePaths),
+                {
+                    loader: require.resolve('less-loader'),
+                    options: {
+                        sourceMap: !!options.sourceMap,
+                        lessOptions: {
+                            javascriptEnabled: true,
+                            ...lessPathOptions,
+                        },
+                    },
+                },
+            ],
+        },
+        {
+            test: /\.styl$/,
+            exclude: globalStylePaths,
+            use: [
+                ...(0, stylesheet_loaders_1.getCommonLoadersForGlobalCss)(options, includePaths),
+                {
+                    loader: path.join(__dirname, 'webpack/deprecated-stylus-loader.js'),
+                    options: {
+                        sourceMap: !!options.sourceMap,
+                        stylusOptions: {
+                            include: includePaths,
+                        },
+                    },
+                },
+            ],
+        },
+    ];
+    const globalStyleRules = [
+        {
+            test: /\.css$/,
+            include: globalStylePaths,
+            use: (0, stylesheet_loaders_1.getCommonLoadersForGlobalStyle)(options, includePaths),
+        },
+        {
+            test: /\.scss$|\.sass$/,
+            include: globalStylePaths,
+            use: [
+                ...(0, stylesheet_loaders_1.getCommonLoadersForGlobalStyle)(options, includePaths),
+                {
+                    loader: require.resolve('sass-loader'),
+                    options: {
+                        implementation: require('sass'),
+                        sourceMap: !!options.sourceMap,
+                        sassOptions: {
+                            fiber: false,
+                            // bootstrap-sass requires a minimum precision of 8
+                            precision: 8,
+                            includePaths,
+                        },
+                    },
+                },
+            ],
+        },
+        {
+            test: /\.less$/,
+            include: globalStylePaths,
+            use: [
+                ...(0, stylesheet_loaders_1.getCommonLoadersForGlobalStyle)(options, includePaths),
+                {
+                    loader: require.resolve('less-loader'),
+                    options: {
+                        sourceMap: !!options.sourceMap,
+                        lessOptions: {
+                            javascriptEnabled: true,
+                            ...lessPathOptions,
+                        },
+                    },
+                },
+            ],
+        },
+        {
+            test: /\.styl$/,
+            include: globalStylePaths,
+            use: [
+                ...(0, stylesheet_loaders_1.getCommonLoadersForGlobalStyle)(options, includePaths),
+                {
+                    loader: require.resolve('stylus-loader'),
+                    options: {
+                        sourceMap: !!options.sourceMap,
+                        stylusOptions: {
+                            include: includePaths,
+                        },
+                    },
+                },
+            ],
+        },
+    ];
+    const rules = [
+        {
+            test: /\.css$|\.scss$|\.sass$|\.less$|\.styl$/,
+            oneOf: [...cssModuleRules, ...globalCssRules, ...globalStyleRules],
+        },
+    ];
+    plugins.push(
+    // extract global css from js files into own css file
+    new MiniCssExtractPlugin({
+        filename: `[name]${hashFormat.extract}.css`,
+    }));
+    config.output = {
+        ...config.output,
+        crossOriginLoading: options.subresourceIntegrity
+            ? 'anonymous'
+            : false,
+    };
+    // In case users customize their webpack config with unsupported entry.
+    if (typeof config.entry === 'function')
+        throw new Error('Entry function is not supported. Use an object.');
+    if (typeof config.entry === 'string')
+        throw new Error('Entry string is not supported. Use an object.');
+    if (Array.isArray(config.entry))
+        throw new Error('Entry array is not supported. Use an object.');
+    config.entry = { ...config.entry, ...entry };
+    config.optimization = {
+        ...config.optimization,
+        minimizer: [...config.optimization.minimizer, ...minimizer],
+        emitOnErrors: false,
+        moduleIds: 'deterministic',
+        runtimeChunk: options.runtimeChunk ? { name: 'runtime' } : false,
+        splitChunks: {
+            defaultSizeTypes: config.optimization.splitChunks !== false
+                ? config.optimization.splitChunks?.defaultSizeTypes
+                : ['...'],
+            maxAsyncRequests: Infinity,
+            cacheGroups: {
+                default: !!options.commonChunk && {
+                    chunks: 'async',
+                    minChunks: 2,
+                    priority: 10,
+                },
+                common: !!options.commonChunk && {
+                    name: 'common',
+                    chunks: 'async',
+                    minChunks: 2,
+                    enforce: true,
+                    priority: 5,
+                },
+                vendors: false,
+                vendor: !!options.vendorChunk && {
+                    name: 'vendor',
+                    chunks: (chunk) => chunk.name === 'main',
+                    enforce: true,
+                    test: /[\\/]node_modules[\\/]/,
+                },
+            },
+        },
+    };
+    config.resolve.mainFields = ['browser', 'module', 'main'];
+    config.module = {
+        ...config.module,
+        rules: [
+            ...(config.module.rules ?? []),
+            // Images: Inline small images, and emit a separate file otherwise.
+            {
+                test: /\.(avif|bmp|gif|ico|jpe?g|png|webp)$/,
+                type: 'asset',
+                parser: {
+                    dataUrlCondition: {
+                        maxSize: 10000, // 10 kB
+                    },
+                },
+                generator: {
+                    filename: `[name]${hashFormat.file}[ext]`,
+                },
+            },
+            // SVG: same as image but we need to separate it so it can be swapped for SVGR in the React plugin.
+            {
+                test: /\.svg$/,
+                type: 'asset',
+                parser: {
+                    dataUrlCondition: {
+                        maxSize: 10000, // 10 kB
+                    },
+                },
+                generator: {
+                    filename: `[name]${hashFormat.file}[ext]`,
+                },
+            },
+            // Fonts: Emit separate file and export the URL.
+            {
+                test: /\.(eot|otf|ttf|woff|woff2)$/,
+                type: 'asset/resource',
+                generator: {
+                    filename: `[name]${hashFormat.file}[ext]`,
+                },
+            },
+            ...rules,
+        ],
+    };
+    config.plugins ??= [];
+    config.plugins.push(...plugins);
+}
+exports.applyWebConfig = applyWebConfig;

package/src/plugins/nx-webpack-plugin/lib/compiler-loaders.d.ts

@@ -0,0 +1,53 @@
+import { NormalizedNxWebpackPluginOptions } from '../nx-webpack-plugin-options';
+export declare function createLoaderFromCompiler(options: NormalizedNxWebpackPluginOptions): {
+    test: RegExp;
+    loader: string;
+    exclude: RegExp;
+    options: {
+        cwd: string;
+        emitDecoratorMetadata: boolean;
+        isModern: boolean;
+        isTest: boolean;
+        envName: string;
+        cacheDirectory: boolean;
+        cacheCompression: boolean;
+    };
+} | {
+    test: RegExp;
+    loader: string;
+    exclude: RegExp;
+    options: {
+        jsc: {
+            parser: {
+                syntax: string;
+                decorators: boolean;
+                tsx: boolean;
+            };
+            transform: {
+                react: {
+                    runtime: string;
+                };
+            };
+            loose: boolean;
+        };
+        configFile?: undefined;
+        transpileOnly?: undefined;
+        experimentalWatchApi?: undefined;
+        getCustomTransformers?: undefined;
+    };
+} | {
+    test: RegExp;
+    loader: string;
+    exclude: RegExp;
+    options: {
+        configFile: string;
+        transpileOnly: boolean;
+        experimentalWatchApi: boolean;
+        getCustomTransformers: (program: any) => {
+            before: any;
+            after: any;
+            afterDeclarations: any;
+        };
+        jsc?: undefined;
+    };
+};

package/src/plugins/nx-webpack-plugin/lib/compiler-loaders.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createLoaderFromCompiler = void 0;
+const path = require("path");
+const js_1 = require("@nx/js");
+function createLoaderFromCompiler(options) {
+    switch (options.compiler) {
+        case 'swc':
+            return {
+                test: /\.([jt])sx?$/,
+                loader: require.resolve('swc-loader'),
+                exclude: /node_modules/,
+                options: {
+                    jsc: {
+                        parser: {
+                            syntax: 'typescript',
+                            decorators: true,
+                            tsx: true,
+                        },
+                        transform: {
+                            react: {
+                                runtime: 'automatic',
+                            },
+                        },
+                        loose: true,
+                    },
+                },
+            };
+        case 'tsc':
+            const { loadTsTransformers } = require('@nx/js');
+            const { compilerPluginHooks, hasPlugin } = loadTsTransformers(options.transformers);
+            return {
+                test: /\.([jt])sx?$/,
+                loader: require.resolve(`ts-loader`),
+                exclude: /node_modules/,
+                options: {
+                    configFile: options.tsConfig,
+                    transpileOnly: !hasPlugin,
+                    // https://github.com/TypeStrong/ts-loader/pull/685
+                    experimentalWatchApi: true,
+                    getCustomTransformers: (program) => ({
+                        before: compilerPluginHooks.beforeHooks.map((hook) => hook(program)),
+                        after: compilerPluginHooks.afterHooks.map((hook) => hook(program)),
+                        afterDeclarations: compilerPluginHooks.afterDeclarationsHooks.map((hook) => hook(program)),
+                    }),
+                },
+            };
+        case 'babel':
+            const tsConfig = (0, js_1.readTsConfig)(options.tsConfig);
+            const babelConfig = {
+                test: /\.([jt])sx?$/,
+                loader: path.join(__dirname, '../../../utils/web-babel-loader'),
+                exclude: /node_modules/,
+                options: {
+                    cwd: path.join(options.root, options.sourceRoot),
+                    emitDecoratorMetadata: tsConfig.options.emitDecoratorMetadata,
+                    isModern: true,
+                    isTest: process.env.NX_CYPRESS_COMPONENT_TEST === 'true',
+                    envName: process.env.BABEL_ENV ?? process.env.NODE_ENV,
+                    cacheDirectory: true,
+                    cacheCompression: false,
+                },
+            };
+            if (options.babelUpwardRootMode) {
+                babelConfig.options['rootMode'] = 'upward';
+                babelConfig.options['babelrc'] = true;
+            }
+            else {
+                babelConfig.options['configFile'] = options.babelConfig
+                    ? path.join(options.root, options.babelConfig)
+                    : path.join(options.root, options.projectRoot, '.babelrc');
+            }
+            return babelConfig;
+        default:
+            return null;
+    }
+}
+exports.createLoaderFromCompiler = createLoaderFromCompiler;

package/src/plugins/nx-webpack-plugin/lib/get-terser-ecma-version.d.ts

@@ -0,0 +1 @@
+export declare function getTerserEcmaVersion(projectRoot: string): 2020 | 5;

package/src/plugins/nx-webpack-plugin/lib/get-terser-ecma-version.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTerserEcmaVersion = void 0;
+const path = require("path");
+const fs = require("fs");
+const browserslist = require("browserslist");
+const VALID_BROWSERSLIST_FILES = ['.browserslistrc', 'browserslist'];
+const ES5_BROWSERS = [
+    'ie 10',
+    'ie 11',
+    'safari 11',
+    'safari 11.1',
+    'safari 12',
+    'safari 12.1',
+    'safari 13',
+    'ios_saf 13.0',
+    'ios_saf 13.3',
+];
+function getTerserEcmaVersion(projectRoot) {
+    let pathToBrowserslistFile = '';
+    for (const browserslistFile of VALID_BROWSERSLIST_FILES) {
+        const fullPathToFile = path.join(projectRoot, browserslistFile);
+        if (fs.existsSync(fullPathToFile)) {
+            pathToBrowserslistFile = fullPathToFile;
+            break;
+        }
+    }
+    if (!pathToBrowserslistFile) {
+        return 2020;
+    }
+    const env = browserslist.loadConfig({ path: pathToBrowserslistFile });
+    const browsers = browserslist(env);
+    return browsers.some((b) => ES5_BROWSERS.includes(b)) ? 5 : 2020;
+}
+exports.getTerserEcmaVersion = getTerserEcmaVersion;

package/src/plugins/nx-webpack-plugin/lib/instantiate-script-plugins.d.ts

@@ -0,0 +1,3 @@
+import { WebpackPluginInstance } from 'webpack';
+import { NormalizedNxWebpackPluginOptions } from '../nx-webpack-plugin-options';
+export declare function instantiateScriptPlugins(options: NormalizedNxWebpackPluginOptions): WebpackPluginInstance[];

package/src/plugins/nx-webpack-plugin/lib/instantiate-script-plugins.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.instantiateScriptPlugins = void 0;
+const path = require("path");
+const hash_format_1 = require("../../../utils/hash-format");
+const scripts_webpack_plugin_1 = require("../../../utils/webpack/plugins/scripts-webpack-plugin");
+const normalize_entry_1 = require("../../../utils/webpack/normalize-entry");
+function instantiateScriptPlugins(options) {
+    // process global scripts
+    const globalScriptsByBundleName = (0, normalize_entry_1.normalizeExtraEntryPoints)(options.scripts || [], 'scripts').reduce((prev, curr) => {
+        const bundleName = curr.bundleName;
+        const resolvedPath = path.resolve(options.root, curr.input);
+        const existingEntry = prev.find((el) => el.bundleName === bundleName);
+        if (existingEntry) {
+            existingEntry.paths.push(resolvedPath);
+        }
+        else {
+            prev.push({
+                inject: curr.inject,
+                bundleName,
+                paths: [resolvedPath],
+            });
+        }
+        return prev;
+    }, []);
+    const hashFormat = (0, hash_format_1.getOutputHashFormat)(options.outputHashing);
+    const plugins = [];
+    // Add a new asset for each entry.
+    globalScriptsByBundleName.forEach((script) => {
+        const hash = script.inject ? hashFormat.script : '';
+        const bundleName = script.bundleName;
+        plugins.push(new scripts_webpack_plugin_1.ScriptsWebpackPlugin({
+            name: bundleName,
+            sourceMap: !!options.sourceMap,
+            filename: `${path.basename(bundleName)}${hash}.js`,
+            scripts: script.paths,
+            basePath: options.sourceRoot,
+        }));
+    });
+    return plugins;
+}
+exports.instantiateScriptPlugins = instantiateScriptPlugins;

package/src/plugins/nx-webpack-plugin/lib/normalize-options.d.ts

@@ -0,0 +1,3 @@
+import { AssetGlobPattern, NormalizedNxWebpackPluginOptions, NxWebpackPluginOptions } from '../nx-webpack-plugin-options';
+export declare function normalizeOptions(options: NxWebpackPluginOptions): NormalizedNxWebpackPluginOptions;
+export declare function normalizeAssets(assets: any[], root: string, sourceRoot: string): AssetGlobPattern[];