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

package/plugins/component-testing/webpack-fallback.d.ts

@@ -0,0 +1,5 @@
+import { Configuration } from 'webpack';
+export declare function buildBaseWebpackConfig({ tsConfigPath, compiler, }: {
+    tsConfigPath: string;
+    compiler: 'swc' | 'babel';
+}): Configuration;

package/plugins/component-testing/webpack-fallback.js

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildBaseWebpackConfig = void 0;
+const tsconfig_paths_webpack_plugin_1 = require("tsconfig-paths-webpack-plugin");
+const webpack_1 = require("@nx/webpack");
+function buildBaseWebpackConfig({ tsConfigPath = 'tsconfig.cy.json', compiler = 'babel', }) {
+    const extensions = ['.ts', '.tsx', '.mjs', '.js', '.jsx'];
+    const config = {
+        target: 'web',
+        resolve: {
+            extensions,
+            plugins: [
+                new tsconfig_paths_webpack_plugin_1.TsconfigPathsPlugin({
+                    configFile: tsConfigPath,
+                    extensions,
+                }),
+            ],
+        },
+        mode: 'development',
+        devtool: false,
+        output: {
+            publicPath: '/',
+            chunkFilename: '[name].bundle.js',
+        },
+        module: {
+            rules: [
+                {
+                    test: /\.(bmp|png|jpe?g|gif|webp|avif)$/,
+                    type: 'asset',
+                    parser: {
+                        dataUrlCondition: {
+                            maxSize: 10000, // 10 kB
+                        },
+                    },
+                },
+                CSS_MODULES_LOADER,
+            ],
+        },
+    };
+    if (compiler === 'swc') {
+        config.module.rules.push({
+            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,
+                },
+            },
+        });
+    }
+    if (compiler === 'babel') {
+        config.module.rules.push({
+            test: /\.(js|jsx|mjs|ts|tsx)$/,
+            loader: require.resolve('babel-loader'),
+            options: {
+                presets: [`@nx/react/babel`],
+                rootMode: 'upward',
+                babelrc: true,
+            },
+        });
+    }
+    return config;
+}
+exports.buildBaseWebpackConfig = buildBaseWebpackConfig;
+const loaderModulesOptions = {
+    modules: {
+        mode: 'local',
+        getLocalIdent: webpack_1.getCSSModuleLocalIdent,
+    },
+    importLoaders: 1,
+};
+const commonLoaders = [
+    {
+        loader: require.resolve('style-loader'),
+    },
+    {
+        loader: require.resolve('css-loader'),
+        options: loaderModulesOptions,
+    },
+];
+const CSS_MODULES_LOADER = {
+    test: /\.css$|\.scss$|\.sass$|\.less$/,
+    oneOf: [
+        {
+            test: /\.module\.css$/,
+            use: commonLoaders,
+        },
+        {
+            test: /\.module\.(scss|sass)$/,
+            use: [
+                ...commonLoaders,
+                {
+                    loader: require.resolve('sass-loader'),
+                    options: {
+                        implementation: require('sass'),
+                        sassOptions: {
+                            fiber: false,
+                            precision: 8,
+                        },
+                    },
+                },
+            ],
+        },
+        {
+            test: /\.module\.less$/,
+            use: [
+                ...commonLoaders,
+                {
+                    loader: require.resolve('less-loader'),
+                },
+            ],
+        },
+    ],
+};

package/plugins/jest.d.ts

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

package/plugins/jest.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const path = require("path");
+const devkit_1 = require("@nx/devkit");
+const JS_SOURCE_EXTENSIONS = ['.ts', '.tsx', '.js', '.jsx', '.mjs', '.cjs'];
+module.exports = {
+    process(src, filename, options) {
+        const assetFilename = JSON.stringify(path.basename(filename));
+        if (filename.match(/\.svg$/)) {
+            // Based on how SVGR generates a component name:
+            // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
+            const pascalCaseFilename = (0, devkit_1.names)(path.parse(filename).name).className;
+            const componentName = `Svg${pascalCaseFilename}`;
+            return {
+                code: `const React = require('react');
+      module.exports = {
+        __esModule: true,
+        default: ${assetFilename},
+        ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
+          return {
+            $$typeof: Symbol.for('react.element'),
+            type: 'svg',
+            ref: ref,
+            key: null,
+            props: Object.assign({}, props, {
+              children: ${assetFilename}
+            })
+          };
+        }),
+      };`,
+            };
+        }
+        if (JS_SOURCE_EXTENSIONS.includes(path.extname(filename))) {
+            const transformer = getJsTransform(options.config?.transform ?? []);
+            if (transformer)
+                return transformer.process(src, filename, options);
+        }
+        // Fallback for unknown extensions
+        return {
+            code: `module.exports = ${assetFilename};`,
+        };
+    },
+};
+function getJsTransform(transformers) {
+    try {
+        if (transformers?.[1]?.includes('@swc/jest')) {
+            return require('@swc/jest').createTransformer();
+        }
+    }
+    catch {
+        // ignored
+    }
+    try {
+        return require('babel-jest').default.createTransformer();
+    }
+    catch {
+        // ignored
+    }
+}

package/plugins/nx-react-webpack-plugin/lib/apply-react-config.d.ts

@@ -0,0 +1,4 @@
+import { Configuration, WebpackOptionsNormalized } from 'webpack';
+export declare function applyReactConfig(options: {
+    svgr?: boolean;
+}, config?: Partial<WebpackOptionsNormalized | Configuration>): void;

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

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyReactConfig = void 0;
+function applyReactConfig(options, config = {}) {
+    if (!process.env['NX_TASK_TARGET_PROJECT'])
+        return;
+    addHotReload(config);
+    if (options.svgr !== false) {
+        removeSvgLoaderIfPresent(config);
+        config.module.rules.push({
+            test: /\.svg$/,
+            issuer: /\.(js|ts|md)x?$/,
+            use: [
+                {
+                    loader: require.resolve('@svgr/webpack'),
+                    options: {
+                        svgo: false,
+                        titleProp: true,
+                        ref: true,
+                    },
+                },
+            ],
+        });
+    }
+    // enable webpack node api
+    config.node = {
+        __dirname: true,
+        __filename: true,
+    };
+}
+exports.applyReactConfig = applyReactConfig;
+function addHotReload(config) {
+    if (config.mode === 'development' && config['devServer']?.hot) {
+        // add `react-refresh/babel` to babel loader plugin
+        const babelLoader = config.module.rules.find((rule) => rule &&
+            typeof rule !== 'string' &&
+            rule.loader?.toString().includes('babel-loader'));
+        if (babelLoader && typeof babelLoader !== 'string') {
+            babelLoader.options['plugins'] = [
+                ...(babelLoader.options['plugins'] || []),
+                [
+                    require.resolve('react-refresh/babel'),
+                    {
+                        skipEnvCheck: true,
+                    },
+                ],
+            ];
+        }
+        const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+        config.plugins.push(new ReactRefreshPlugin());
+    }
+}
+// We remove potentially conflicting rules that target SVGs because we use @svgr/webpack loader
+// See https://github.com/nrwl/nx/issues/14383
+function removeSvgLoaderIfPresent(config) {
+    const svgLoaderIdx = config.module.rules.findIndex((rule) => typeof rule === 'object' && rule.test.toString().includes('svg'));
+    if (svgLoaderIdx === -1)
+        return;
+    config.module.rules.splice(svgLoaderIdx, 1);
+}

package/plugins/nx-react-webpack-plugin/nx-react-webpack-plugin.d.ts

@@ -0,0 +1,8 @@
+import { Compiler } from 'webpack';
+export declare class NxReactWebpackPlugin {
+    private options;
+    constructor(options?: {
+        svgr?: boolean;
+    });
+    apply(compiler: Compiler): void;
+}

package/plugins/nx-react-webpack-plugin/nx-react-webpack-plugin.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NxReactWebpackPlugin = void 0;
+const apply_react_config_1 = require("./lib/apply-react-config");
+class NxReactWebpackPlugin {
+    constructor(options = {}) {
+        this.options = options;
+    }
+    apply(compiler) {
+        (0, apply_react_config_1.applyReactConfig)(this.options, compiler.options);
+    }
+}
+exports.NxReactWebpackPlugin = NxReactWebpackPlugin;

package/plugins/storybook/index.d.ts

@@ -0,0 +1,3 @@
+import { Configuration } from 'webpack';
+export declare const core: (prev: any, options: any) => any;
+export declare const webpack: (storybookWebpackConfig: Configuration, options: any) => Promise<Configuration>;

package/plugins/storybook/index.js

@@ -0,0 +1,174 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.webpack = exports.core = void 0;
+const devkit_1 = require("@nx/devkit");
+const config_1 = require("@nx/webpack/src/utils/config");
+const path_1 = require("path");
+const webpack_1 = require("webpack");
+const merge_plugins_1 = require("./merge-plugins");
+const with_react_1 = require("../with-react");
+const fs_1 = require("fs");
+// This is shamelessly taken from CRA and modified for NX use
+// https://github.com/facebook/create-react-app/blob/4784997f0682e75eb32a897b4ffe34d735912e6c/packages/react-scripts/config/env.js#L71
+function getClientEnvironment(mode) {
+    // Grab NODE_ENV and NX_* and STORYBOOK_* environment variables and prepare them to be
+    // injected into the application via DefinePlugin in webpack configuration.
+    const NX_PREFIX = /^NX_/i;
+    const STORYBOOK_PREFIX = /^STORYBOOK_/i;
+    const raw = Object.keys(process.env)
+        .filter((key) => NX_PREFIX.test(key) || STORYBOOK_PREFIX.test(key))
+        .reduce((env, key) => {
+        env[key] = process.env[key];
+        return env;
+    }, {
+        // Useful for determining whether we’re running in production mode.
+        NODE_ENV: process.env.NODE_ENV || mode,
+        // Environment variables for Storybook
+        // https://github.com/storybookjs/storybook/blob/bdf9e5ed854b8d34e737eee1a4a05add88265e92/lib/core-common/src/utils/envs.ts#L12-L21
+        NODE_PATH: process.env.NODE_PATH || '',
+        STORYBOOK: process.env.STORYBOOK || 'true',
+        // This is to support CRA's public folder feature.
+        // In production we set this to dot(.) to allow the browser to access these assets
+        // even when deployed inside a subpath. (like in GitHub pages)
+        // In development this is just empty as we always serves from the root.
+        PUBLIC_URL: mode === 'production' ? '.' : '',
+    });
+    // Stringify all values so we can feed into webpack DefinePlugin
+    const stringified = {
+        'process.env': Object.keys(raw).reduce((env, key) => {
+            env[key] = JSON.stringify(raw[key]);
+            return env;
+        }, {}),
+    };
+    return { stringified };
+}
+const core = (prev, options) => ({
+    ...prev,
+    disableWebpackDefaults: true,
+});
+exports.core = core;
+const getProjectData = async (storybookOptions) => {
+    const fallbackData = {
+        workspaceRoot: storybookOptions.configDir,
+        projectRoot: '',
+        sourceRoot: '',
+    };
+    // Edge-case: not running from Nx
+    if (!process.env.NX_WORKSPACE_ROOT)
+        return fallbackData;
+    const projectGraph = await (0, devkit_1.createProjectGraphAsync)();
+    const projectNode = projectGraph.nodes[process.env.NX_TASK_TARGET_PROJECT];
+    return projectNode
+        ? {
+            workspaceRoot: process.env.NX_WORKSPACE_ROOT,
+            projectRoot: projectNode.data.root,
+            sourceRoot: projectNode.data.sourceRoot,
+            projectNode,
+        }
+        : // Edge-case: missing project node
+            fallbackData;
+};
+const fixBabelConfigurationIfNeeded = (webpackConfig, projectData) => {
+    if (!projectData.projectNode)
+        return;
+    const isUsingBabelUpwardRootMode = Object.keys(projectData.projectNode.data.targets).find((k) => {
+        const targetConfig = projectData.projectNode.data.targets[k];
+        return ((targetConfig.executor === '@nx/webpack:webpack' ||
+            targetConfig.executor === '@nrwl/webpack:webpack') &&
+            targetConfig.options?.babelUpwardRootMode);
+    });
+    if (isUsingBabelUpwardRootMode)
+        return;
+    let babelrcPath;
+    for (const ext of ['', '.json', '.js', '.cjs', '.mjs', '.cts']) {
+        const candidate = (0, path_1.join)(projectData.workspaceRoot, projectData.projectRoot, `.babelrc${ext}`);
+        if ((0, fs_1.existsSync)(candidate)) {
+            babelrcPath = candidate;
+            break;
+        }
+    }
+    // Unexpected setup, skip.
+    if (!babelrcPath)
+        return;
+    let babelRuleItem;
+    for (const rule of webpackConfig.module.rules) {
+        if (typeof rule === 'string')
+            continue;
+        if (!rule || !Array.isArray(rule.use))
+            continue;
+        for (const item of rule.use) {
+            if (typeof item !== 'string' && item['loader'].includes('babel-loader')) {
+                babelRuleItem = item;
+                break;
+            }
+        }
+    }
+    if (babelRuleItem) {
+        babelRuleItem.options.configFile = babelrcPath;
+    }
+};
+const webpack = async (storybookWebpackConfig = {}, options) => {
+    devkit_1.logger.info('=> Loading Nx React Storybook Addon from "@nx/react/plugins/storybook"');
+    // In case anyone is missing dep and did not run migrations.
+    // See: https://github.com/nrwl/nx/issues/14455
+    try {
+        require.resolve('@nx/webpack');
+    }
+    catch {
+        throw new Error(`'@nx/webpack' package is not installed. Install it and try again.`);
+    }
+    const { withNx, withWeb } = require('@nx/webpack');
+    const projectData = await getProjectData(options);
+    const tsconfigPath = (0, fs_1.existsSync)((0, path_1.join)(projectData.projectRoot, 'tsconfig.storybook.json'))
+        ? (0, path_1.join)(projectData.projectRoot, 'tsconfig.storybook.json')
+        : (0, path_1.join)(projectData.projectRoot, 'tsconfig.json');
+    // The 'tsconfig.json' is mainly for the cypress test to be able to run
+    // because it will look into the cypress project dir and it will not find tsconfig.storybook.json
+    fixBabelConfigurationIfNeeded(storybookWebpackConfig, projectData);
+    const builderOptions = {
+        ...options,
+        root: projectData.workspaceRoot,
+        projectRoot: projectData.projectRoot,
+        sourceRoot: projectData.sourceRoot,
+        fileReplacements: [],
+        sourceMap: true,
+        styles: options.styles ?? [],
+        optimization: {},
+        tsConfig: tsconfigPath,
+        extractCss: storybookWebpackConfig.mode === 'production',
+        target: 'web',
+    };
+    // ESM build for modern browsers.
+    let baseWebpackConfig = {};
+    const configure = (0, config_1.composePluginsSync)(withNx({ target: 'web', skipTypeChecking: true }), (0, with_react_1.withReact)());
+    const finalConfig = configure(baseWebpackConfig, {
+        options: builderOptions,
+        context: { root: devkit_1.workspaceRoot }, // The context is not used here.
+    });
+    return {
+        ...storybookWebpackConfig,
+        module: {
+            ...storybookWebpackConfig.module,
+            rules: [
+                ...storybookWebpackConfig.module.rules,
+                ...finalConfig.module.rules,
+            ],
+        },
+        resolve: {
+            ...storybookWebpackConfig.resolve,
+            fallback: {
+                ...storybookWebpackConfig.resolve?.fallback,
+                // Next.js and other React frameworks may have server-code that uses these modules.
+                // They are not meant for client-side components so skip the fallbacks.
+                assert: false,
+                path: false,
+                util: false,
+            },
+            plugins: (0, merge_plugins_1.mergePlugins)(...(storybookWebpackConfig.resolve.plugins ??
+                []), ...(finalConfig.resolve
+                .plugins ?? [])),
+        },
+        plugins: (0, merge_plugins_1.mergePlugins)(new webpack_1.DefinePlugin(getClientEnvironment(storybookWebpackConfig.mode).stringified), ...(storybookWebpackConfig.plugins ?? []), ...(finalConfig.plugins ?? [])),
+    };
+};
+exports.webpack = webpack;

package/plugins/storybook/merge-plugins.d.ts

@@ -0,0 +1,3 @@
+import { ResolvePluginInstance, RuleSetRule, WebpackPluginInstance } from 'webpack';
+export declare const mergeRules: (...args: RuleSetRule[]) => (WebpackPluginInstance | RuleSetRule)[];
+export declare const mergePlugins: (...args: (WebpackPluginInstance | ResolvePluginInstance)[]) => (WebpackPluginInstance | ResolvePluginInstance)[];

package/plugins/storybook/merge-plugins.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mergePlugins = exports.mergeRules = void 0;
+const mergeRules = (...args) => args.reduce((rules, rule) => {
+    if (rules.some((includedPlugin) => includedPlugin.constructor.name === rule.constructor.name)) {
+        return rules;
+    }
+    return [...rules, rule];
+}, []);
+exports.mergeRules = mergeRules;
+const mergePlugins = (...args) => args.reduce((plugins, plugin) => {
+    if (plugins.some((includedPlugin) => includedPlugin.constructor.name === plugin.constructor.name)) {
+        return plugins;
+    }
+    return [...plugins, plugin];
+}, []);
+exports.mergePlugins = mergePlugins;

package/plugins/webpack.d.ts

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

package/plugins/webpack.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const webpack_1 = require("@nx/webpack");
+const with_react_1 = require("./with-react");
+const plugin = (0, webpack_1.composePlugins)((0, webpack_1.withNx)(), (0, with_react_1.withReact)());
+module.exports = plugin;

package/plugins/with-react.d.ts

@@ -0,0 +1,10 @@
+import type { Configuration } from 'webpack';
+import type { NxWebpackExecutionContext, WithWebOptions } from '@nx/webpack';
+export interface WithReactOptions extends WithWebOptions {
+    svgr?: false;
+}
+/**
+ * @param {WithReactOptions} pluginOptions
+ * @returns {NxWebpackPlugin}
+ */
+export declare function withReact(pluginOptions?: WithReactOptions): (config: Configuration, context: NxWebpackExecutionContext) => Configuration;

package/plugins/with-react.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withReact = void 0;
+const apply_react_config_1 = require("./nx-react-webpack-plugin/lib/apply-react-config");
+const processed = new Set();
+/**
+ * @param {WithReactOptions} pluginOptions
+ * @returns {NxWebpackPlugin}
+ */
+function withReact(pluginOptions = {}) {
+    return function configure(config, context) {
+        const { withWeb } = require('@nx/webpack');
+        if (processed.has(config))
+            return config;
+        // Apply web config for CSS, JSX, index.html handling, etc.
+        config = withWeb(pluginOptions)(config, context);
+        (0, apply_react_config_1.applyReactConfig)(pluginOptions, config);
+        processed.add(config);
+        return config;
+    };
+}
+exports.withReact = withReact;

package/src/executors/module-federation-dev-server/module-federation-dev-server.impl.d.ts

@@ -0,0 +1,25 @@
+import { ExecutorContext } from '@nx/devkit';
+import { WebDevServerOptions } from '@nx/webpack/src/executors/dev-server/schema';
+type ModuleFederationDevServerOptions = WebDevServerOptions & {
+    devRemotes?: string[];
+    skipRemotes?: string[];
+    static?: boolean;
+    isInitialHost?: boolean;
+    parallel?: number;
+    staticRemotesPort?: number;
+};
+type StaticRemoteConfig = {
+    basePath: string;
+    outputPath: string;
+    urlSegment: string;
+};
+type StaticRemotesConfig = {
+    remotes: string[];
+    config: Record<string, StaticRemoteConfig> | undefined;
+};
+export declare function parseStaticRemotesConfig(staticRemotes: string[] | undefined, context: ExecutorContext): StaticRemotesConfig;
+export default function moduleFederationDevServer(options: ModuleFederationDevServerOptions, context: ExecutorContext): AsyncIterableIterator<{
+    success: boolean;
+    baseUrl?: string;
+}>;
+export {};