@nx/webpack 0.0.0-pr-22179-271588f

package/src/utils/webpack/plugins/postcss-cli-resources.js

@@ -0,0 +1,165 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PostcssCliResources = void 0;
+const loader_utils_1 = require("loader-utils");
+const path = require("path");
+const url = require("node:url");
+function wrapUrl(url) {
+    let wrappedUrl;
+    const hasSingleQuotes = url.indexOf("'") >= 0;
+    if (hasSingleQuotes) {
+        wrappedUrl = `"${url}"`;
+    }
+    else {
+        wrappedUrl = `'${url}'`;
+    }
+    return `url(${wrappedUrl})`;
+}
+async function resolve(file, base, resolver) {
+    try {
+        return await resolver(`./${file}`, base);
+    }
+    catch {
+        return resolver(file, base);
+    }
+}
+module.exports.postcss = true;
+function PostcssCliResources(options) {
+    const { deployUrl = '', baseHref = '', resourcesOutputPath = '', rebaseRootRelative = false, filename, loader, } = options;
+    const dedupeSlashes = (url) => url.replace(/\/\/+/g, '/');
+    const process = async (inputUrl, context, resourceCache) => {
+        // If root-relative, absolute or protocol relative url, leave as is
+        if (/^((?:\w+:)?\/\/|data:|chrome:|#)/.test(inputUrl)) {
+            return inputUrl;
+        }
+        if (!rebaseRootRelative && /^\//.test(inputUrl)) {
+            return inputUrl;
+        }
+        // If starts with a caret, remove and return remainder
+        // this supports bypassing asset processing
+        if (inputUrl.startsWith('^')) {
+            return inputUrl.slice(1);
+        }
+        const cacheKey = path.resolve(context, inputUrl);
+        const cachedUrl = resourceCache.get(cacheKey);
+        if (cachedUrl) {
+            return cachedUrl;
+        }
+        if (inputUrl.startsWith('~')) {
+            inputUrl = inputUrl.slice(1);
+        }
+        if (inputUrl.startsWith('/')) {
+            let outputUrl = '';
+            if (deployUrl.match(/:\/\//) || deployUrl.startsWith('/')) {
+                // If deployUrl is absolute or root relative, ignore baseHref & use deployUrl as is.
+                outputUrl = `${deployUrl.replace(/\/$/, '')}${inputUrl}`;
+            }
+            else if (baseHref.match(/:\/\//)) {
+                // If baseHref contains a scheme, include it as is.
+                outputUrl =
+                    baseHref.replace(/\/$/, '') +
+                        dedupeSlashes(`/${deployUrl}/${inputUrl}`);
+            }
+            else {
+                // Join together base-href, deploy-url and the original URL.
+                outputUrl = dedupeSlashes(`/${baseHref}/${deployUrl}/${inputUrl}`);
+            }
+            resourceCache.set(cacheKey, outputUrl);
+            return outputUrl;
+        }
+        const { pathname, hash, search } = url.parse(inputUrl.replace(/\\/g, '/'));
+        const resolver = (file, base) => new Promise((resolve, reject) => {
+            loader.resolve(base, decodeURI(file), (err, result) => {
+                if (err) {
+                    reject(err);
+                    return;
+                }
+                resolve(result);
+            });
+        });
+        const result = await resolve(pathname, context, resolver);
+        return new Promise((resolve, reject) => {
+            loader.fs.readFile(result, (err, content) => {
+                if (err) {
+                    reject(err);
+                    return;
+                }
+                let outputPath = (0, loader_utils_1.interpolateName)({ resourcePath: result }, filename, { content });
+                if (resourcesOutputPath) {
+                    outputPath = path.posix.join(resourcesOutputPath, outputPath);
+                }
+                loader.addDependency(result);
+                loader.emitFile(outputPath, content, undefined);
+                let outputUrl = outputPath.replace(/\\/g, '/');
+                if (hash || search) {
+                    outputUrl = url.format({ pathname: outputUrl, hash, search });
+                }
+                const loaderOptions = loader.loaders[loader.loaderIndex].options;
+                if (deployUrl && loaderOptions.ident !== 'extracted') {
+                    outputUrl = url.resolve(deployUrl, outputUrl);
+                }
+                resourceCache.set(cacheKey, outputUrl);
+                resolve(outputUrl);
+            });
+        });
+    };
+    return {
+        postcssPlugin: 'postcss-cli-resources',
+        Once(root) {
+            const urlDeclarations = [];
+            /**
+             * TODO: Explore if this can be rewritten using the new `Declaration()`
+             * listener added in postcss v8
+             */
+            root.walkDecls((decl) => {
+                if (decl.value && decl.value.includes('url')) {
+                    urlDeclarations.push(decl);
+                }
+            });
+            if (urlDeclarations.length === 0) {
+                return;
+            }
+            const resourceCache = new Map();
+            return Promise.all(urlDeclarations.map(async (decl) => {
+                const value = decl.value;
+                const urlRegex = /url(?:\(\s*(['"]?))(.*?)(?:\1\s*\))/g;
+                const segments = [];
+                let match;
+                let lastIndex = 0;
+                let modified = false;
+                // We want to load it relative to the file that imports
+                const inputFile = decl.source && decl.source.input.file;
+                const context = (inputFile && path.dirname(inputFile)) || loader.context;
+                while ((match = urlRegex.exec(value))) {
+                    const originalUrl = match[2];
+                    let processedUrl;
+                    try {
+                        processedUrl = await process(originalUrl, context, resourceCache);
+                    }
+                    catch (err) {
+                        loader.emitError(decl.error(err.message, { word: originalUrl }));
+                        continue;
+                    }
+                    if (lastIndex < match.index) {
+                        segments.push(value.slice(lastIndex, match.index));
+                    }
+                    if (!processedUrl || originalUrl === processedUrl) {
+                        segments.push(match[0]);
+                    }
+                    else {
+                        segments.push(wrapUrl(processedUrl));
+                        modified = true;
+                    }
+                    lastIndex = match.index + match[0].length;
+                }
+                if (lastIndex < value.length) {
+                    segments.push(value.slice(lastIndex));
+                }
+                if (modified) {
+                    decl.value = segments.join('');
+                }
+            }));
+        },
+    };
+}
+exports.PostcssCliResources = PostcssCliResources;

package/src/utils/webpack/plugins/scripts-webpack-plugin.d.ts

@@ -0,0 +1,17 @@
+import * as webpack from 'webpack';
+export interface ScriptsWebpackPluginOptions {
+    name: string;
+    sourceMap: boolean;
+    scripts: string[];
+    filename: string;
+    basePath: string;
+}
+export declare class ScriptsWebpackPlugin {
+    private options;
+    private _lastBuildTime?;
+    private _cachedOutput?;
+    constructor(options?: Partial<ScriptsWebpackPluginOptions>);
+    shouldSkip(compilation: any, scripts: string[]): boolean;
+    private _insertOutput;
+    apply(compiler: webpack.Compiler): void;
+}

package/src/utils/webpack/plugins/scripts-webpack-plugin.js

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScriptsWebpackPlugin = void 0;
+const loader_utils_1 = require("loader-utils");
+const path = require("path");
+const webpack = require("webpack");
+const Chunk = require('webpack/lib/Chunk');
+const EntryPoint = require('webpack/lib/Entrypoint');
+function addDependencies(compilation, scripts) {
+    for (const script of scripts) {
+        compilation.fileDependencies.add(script);
+    }
+}
+function hook(compiler, action) {
+    compiler.hooks.thisCompilation.tap('scripts-webpack-plugin', (compilation) => {
+        compilation.hooks.additionalAssets.tapAsync('scripts-webpack-plugin', (callback) => action(compilation, callback));
+    });
+}
+class ScriptsWebpackPlugin {
+    constructor(options = {}) {
+        this.options = options;
+    }
+    shouldSkip(compilation, scripts) {
+        if (this._lastBuildTime == undefined) {
+            this._lastBuildTime = Date.now();
+            return false;
+        }
+        for (let i = 0; i < scripts.length; i++) {
+            const scriptTime = compilation.fileTimestamps?.get(scripts[i]);
+            if (!scriptTime || scriptTime > this._lastBuildTime) {
+                this._lastBuildTime = Date.now();
+                return false;
+            }
+        }
+        return true;
+    }
+    _insertOutput(compilation, { filename, source }, cached = false) {
+        const chunk = new Chunk(this.options.name);
+        chunk.rendered = !cached;
+        chunk.id = this.options.name;
+        chunk.ids = [chunk.id];
+        if (chunk.files instanceof Set) {
+            chunk.files.add(filename);
+        }
+        else if (chunk.files instanceof Array) {
+            chunk.files.push(filename);
+        }
+        const entrypoint = new EntryPoint(this.options.name);
+        entrypoint.pushChunk(chunk);
+        chunk.addGroup(entrypoint);
+        compilation.entrypoints.set(this.options.name, entrypoint);
+        if (compilation.chunks instanceof Set) {
+            compilation.chunks.add(chunk);
+        }
+        else if (compilation.chunks instanceof Array) {
+            compilation.chunks.push(chunk);
+        }
+        compilation.assets[filename] = source;
+    }
+    apply(compiler) {
+        if (!this.options.scripts || this.options.scripts.length === 0) {
+            return;
+        }
+        const scripts = this.options.scripts
+            .filter((script) => !!script)
+            .map((script) => path.resolve(this.options.basePath || '', script));
+        hook(compiler, (compilation, callback) => {
+            if (this.shouldSkip(compilation, scripts)) {
+                if (this._cachedOutput) {
+                    this._insertOutput(compilation, this._cachedOutput, true);
+                }
+                addDependencies(compilation, scripts);
+                callback();
+                return;
+            }
+            const sourceGetters = scripts.map((fullPath) => {
+                return new Promise((resolve, reject) => {
+                    compilation.inputFileSystem.readFile(fullPath, (err, data) => {
+                        if (err) {
+                            reject(err);
+                            return;
+                        }
+                        const content = data.toString();
+                        let source;
+                        if (this.options.sourceMap) {
+                            // TODO: Look for source map file (for '.min' scripts, etc.)
+                            let adjustedPath = fullPath;
+                            if (this.options.basePath) {
+                                adjustedPath = path.relative(this.options.basePath, fullPath);
+                            }
+                            source = new webpack.sources.OriginalSource(content, adjustedPath);
+                        }
+                        else {
+                            source = new webpack.sources.RawSource(content);
+                        }
+                        resolve(source);
+                    });
+                });
+            });
+            Promise.all(sourceGetters)
+                .then((sources) => {
+                const concatSource = new webpack.sources.ConcatSource();
+                sources.forEach((source) => {
+                    concatSource.add(source);
+                    concatSource.add('\n;');
+                });
+                const combinedSource = new webpack.sources.CachedSource(concatSource);
+                const filename = (0, loader_utils_1.interpolateName)({ resourcePath: 'scripts.js' }, this.options.filename, { content: combinedSource.source() });
+                const output = { filename, source: combinedSource };
+                this._insertOutput(compilation, output);
+                this._cachedOutput = output;
+                addDependencies(compilation, scripts);
+                callback();
+            })
+                .catch((err) => callback(err));
+        });
+    }
+}
+exports.ScriptsWebpackPlugin = ScriptsWebpackPlugin;

package/src/utils/webpack/read-webpack-options.d.ts

@@ -0,0 +1,10 @@
+import { Configuration } from 'webpack';
+/**
+ * Reads the webpack options from a give webpack configuration. The configuration can be:
+ * 1. A standard config object
+ * 2. A standard function that returns a config object (webpack.js.org/configuration/configuration-types/#exporting-a-function)
+ * 3. A Nx-specific composable function that takes Nx context, webpack config, and returns the config object.
+ *
+ * @param webpackConfig
+ */
+export declare function readWebpackOptions(webpackConfig: unknown): Promise<Configuration>;

package/src/utils/webpack/read-webpack-options.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.readWebpackOptions = void 0;
+const devkit_1 = require("@nx/devkit");
+const config_1 = require("../config");
+/**
+ * Reads the webpack options from a give webpack configuration. The configuration can be:
+ * 1. A standard config object
+ * 2. A standard function that returns a config object (webpack.js.org/configuration/configuration-types/#exporting-a-function)
+ * 3. A Nx-specific composable function that takes Nx context, webpack config, and returns the config object.
+ *
+ * @param webpackConfig
+ */
+async function readWebpackOptions(webpackConfig) {
+    let config;
+    if ((0, config_1.isNxWebpackComposablePlugin)(webpackConfig)) {
+        config = await webpackConfig({}, {
+            // These values are only used during build-time, so passing stubs here just to read out
+            // the returned config object.
+            options: {
+                root: devkit_1.workspaceRoot,
+                projectRoot: '',
+                sourceRoot: '',
+                outputFileName: undefined,
+                outputPath: undefined,
+                assets: undefined,
+            },
+            context: { root: devkit_1.workspaceRoot, cwd: undefined, isVerbose: false },
+        });
+    }
+    else if (typeof webpackConfig === 'function') {
+        config = await webpackConfig({
+            production: true, // we want the production build options
+        }, {});
+    }
+    else {
+        config = webpackConfig;
+    }
+    return config;
+}
+exports.readWebpackOptions = readWebpackOptions;

package/src/utils/webpack/resolve-user-defined-webpack-config.d.ts

@@ -0,0 +1,3 @@
+export declare function resolveUserDefinedWebpackConfig(path: string, tsConfig: string, 
+/** Skip require cache and return latest content */
+reload?: boolean): any;

package/src/utils/webpack/resolve-user-defined-webpack-config.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveUserDefinedWebpackConfig = void 0;
+const internal_1 = require("@nx/js/src/internal");
+function resolveUserDefinedWebpackConfig(path, tsConfig, 
+/** Skip require cache and return latest content */
+reload = false) {
+    if (reload) {
+        // Clear cache if the path is in the cache
+        if (require.cache[path]) {
+            // Clear all entries because config may import other modules
+            for (const k of Object.keys(require.cache)) {
+                delete require.cache[k];
+            }
+        }
+    }
+    // Don't transpile non-TS files. This prevents workspaces libs from being registered via tsconfig-paths.
+    // There's an issue here with Nx workspace where loading plugins from source (via tsconfig-paths) can lead to errors.
+    if (!/\.(ts|mts|cts)$/.test(path)) {
+        return require(path);
+    }
+    const cleanupTranspiler = (0, internal_1.registerTsProject)(tsConfig);
+    const maybeCustomWebpackConfig = require(path);
+    cleanupTranspiler();
+    // If the user provides a configuration in TS file
+    // then there are 3 cases for exporing an object. The first one is:
+    // `module.exports = { ... }`. And the second one is:
+    // `export default { ... }`. The ESM format is compiled into:
+    // `{ default: { ... } }`
+    // There is also a case of
+    // `{ default: { default: { ... } }`
+    const customWebpackConfig = 'default' in maybeCustomWebpackConfig
+        ? 'default' in maybeCustomWebpackConfig.default
+            ? maybeCustomWebpackConfig.default.default
+            : maybeCustomWebpackConfig.default
+        : maybeCustomWebpackConfig;
+    return customWebpackConfig;
+}
+exports.resolveUserDefinedWebpackConfig = resolveUserDefinedWebpackConfig;

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

@@ -0,0 +1,8 @@
+import { NxComposableWebpackPlugin } from './config';
+import { NxWebpackPluginOptions } from '../plugins/nx-webpack-plugin/nx-webpack-plugin-options';
+export type WithNxOptions = Partial<NxWebpackPluginOptions>;
+/**
+ * @param {WithNxOptions} pluginOptions
+ * @returns {NxWebpackPlugin}
+ */
+export declare function withNx(pluginOptions?: WithNxOptions): NxComposableWebpackPlugin;

package/src/utils/with-nx.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withNx = void 0;
+const apply_base_config_1 = require("../plugins/nx-webpack-plugin/lib/apply-base-config");
+const normalize_options_1 = require("../plugins/nx-webpack-plugin/lib/normalize-options");
+const processed = new Set();
+/**
+ * @param {WithNxOptions} pluginOptions
+ * @returns {NxWebpackPlugin}
+ */
+function withNx(pluginOptions = {}) {
+    return function configure(config, { options, context }) {
+        if (processed.has(config))
+            return config;
+        (0, apply_base_config_1.applyBaseConfig)({
+            ...options,
+            ...pluginOptions,
+            target: options.target ?? 'web',
+            assets: options.assets
+                ? options.assets
+                : pluginOptions.assets
+                    ? (0, normalize_options_1.normalizeAssets)(pluginOptions.assets, options.root, options.sourceRoot, options.projectRoot)
+                    : [],
+            root: context.root,
+            projectName: context.projectName,
+            targetName: context.targetName,
+            configurationName: context.configurationName,
+            projectGraph: context.projectGraph,
+        }, config);
+        processed.add(config);
+        return config;
+    };
+}
+exports.withNx = withNx;

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

@@ -0,0 +1,22 @@
+import { NxComposableWebpackPlugin } from './config';
+import { ExtraEntryPointClass, NormalizedWebpackExecutorOptions } from '../executors/webpack/schema';
+export interface WithWebOptions {
+    baseHref?: string;
+    crossOrigin?: 'none' | 'anonymous' | 'use-credentials';
+    deployUrl?: string;
+    extractCss?: boolean;
+    generateIndexHtml?: boolean;
+    index?: string;
+    postcssConfig?: string;
+    scripts?: Array<ExtraEntryPointClass | string>;
+    stylePreprocessorOptions?: any;
+    styles?: Array<ExtraEntryPointClass | string>;
+    subresourceIntegrity?: boolean;
+    ssr?: boolean;
+}
+export type MergedOptions = Omit<NormalizedWebpackExecutorOptions, keyof WithWebOptions> & WithWebOptions;
+/**
+ * @param {WithWebOptions} pluginOptions
+ * @returns {NxWebpackPlugin}
+ */
+export declare function withWeb(pluginOptions?: WithWebOptions): NxComposableWebpackPlugin;

package/src/utils/with-web.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withWeb = void 0;
+const apply_web_config_1 = require("../plugins/nx-webpack-plugin/lib/apply-web-config");
+const processed = new Set();
+/**
+ * @param {WithWebOptions} pluginOptions
+ * @returns {NxWebpackPlugin}
+ */
+function withWeb(pluginOptions = {}) {
+    return function configure(config, { options, context }) {
+        if (processed.has(config))
+            return config;
+        (0, apply_web_config_1.applyWebConfig)({
+            ...options,
+            ...pluginOptions,
+            projectName: context.projectName,
+            targetName: context.targetName,
+            configurationName: context.configurationName,
+            projectGraph: context.projectGraph,
+        }, config);
+        processed.add(config);
+        return config;
+    };
+}
+exports.withWeb = withWeb;