@nx/react 17.0.3 → 17.0.4

package/src/module-federation/utils.js

@@ -5,9 +5,16 @@ const module_federation_1 = require("@nx/webpack/src/utils/module-federation");
 const devkit_1 = require("@nx/devkit");
 const project_graph_1 = require("nx/src/project-graph/project-graph");
 function getFunctionDeterminateRemoteUrl(isServer = false) {
-    const target = isServer ? 'serve-server' : 'serve';
+    const target = 'serve';
     const remoteEntry = isServer ? 'server/remoteEntry.js' : 'remoteEntry.js';
     return function (remote) {
+        const mappedStaticRemotesFromEnv = process.env
+            .NX_MF_DEV_SERVER_STATIC_REMOTES
+            ? JSON.parse(process.env.NX_MF_DEV_SERVER_STATIC_REMOTES)
+            : undefined;
+        if (mappedStaticRemotesFromEnv && mappedStaticRemotesFromEnv[remote]) {
+            return `${mappedStaticRemotesFromEnv[remote]}/${remoteEntry}`;
+        }
         let remoteConfiguration = null;
         try {
             remoteConfiguration = (0, project_graph_1.readCachedProjectConfiguration)(remote);

package/src/module-federation/with-module-federation-ssr.js

@@ -3,6 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.withModuleFederationForSSR = void 0;
 const utils_1 = require("./utils");
 async function withModuleFederationForSSR(options) {
+    if (global.NX_GRAPH_CREATION) {
+        return (config) => config;
+    }
     const { sharedLibraries, sharedDependencies, mappedRemotes } = await (0, utils_1.getModuleFederationConfig)(options, {
         isServer: true,
     });

package/src/module-federation/with-module-federation.d.ts

@@ -1,7 +1,7 @@
 import { ModuleFederationConfig } from '@nx/webpack/src/utils/module-federation';
-import type { AsyncNxWebpackPlugin } from '@nx/webpack';
+import type { AsyncNxComposableWebpackPlugin } from '@nx/webpack';
 /**
  * @param {ModuleFederationConfig} options
- * @return {Promise<AsyncNxWebpackPlugin>}
+ * @return {Promise<AsyncNxComposableWebpackPlugin>}
  */
-export declare function withModuleFederation(options: ModuleFederationConfig): Promise<AsyncNxWebpackPlugin>;
+export declare function withModuleFederation(options: ModuleFederationConfig): Promise<AsyncNxComposableWebpackPlugin>;

package/src/module-federation/with-module-federation.js

@@ -3,24 +3,34 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.withModuleFederation = void 0;
 const utils_1 = require("./utils");
 const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
+const isVarOrWindow = (libType) => libType === 'var' || libType === 'window';
 /**
  * @param {ModuleFederationConfig} options
- * @return {Promise<AsyncNxWebpackPlugin>}
+ * @return {Promise<AsyncNxComposableWebpackPlugin>}
  */
 async function withModuleFederation(options) {
+    if (global.NX_GRAPH_CREATION) {
+        return (config) => config;
+    }
     const { sharedDependencies, sharedLibraries, mappedRemotes } = await (0, utils_1.getModuleFederationConfig)(options);
+    const isGlobal = isVarOrWindow(options.library?.type);
     return (config, ctx) => {
         config.output.uniqueName = options.name;
         config.output.publicPath = 'auto';
-        if (options.library?.type === 'var') {
+        if (isGlobal) {
             config.output.scriptType = 'text/javascript';
         }
         config.optimization = {
             runtimeChunk: false,
         };
+        if (config.mode === 'development' &&
+            Object.keys(mappedRemotes).length > 1 &&
+            !options.exposes) {
+            config.optimization.runtimeChunk = 'single';
+        }
         config.experiments = {
             ...config.experiments,
-            outputModule: !(options.library?.type === 'var'),
+            outputModule: !isGlobal,
         };
         config.plugins.push(new ModuleFederationPlugin({
             name: options.name,
@@ -37,7 +47,7 @@ async function withModuleFederation(options) {
              *  { appX: 'appX@http://localhost:3001/remoteEntry.js' }
              *  { appY: 'appY@http://localhost:3002/remoteEntry.js' }
              */
-            ...(options.library?.type === 'var' ? { remoteType: 'script' } : {}),
+            ...(isGlobal ? { remoteType: 'script' } : {}),
         }), sharedLibraries.getReplacementPlugin());
         return config;
     };

package/src/rules/update-module-federation-project.d.ts

@@ -1,7 +1,9 @@
 import { GeneratorCallback, Tree } from '@nx/devkit';
 export declare function updateModuleFederationProject(host: Tree, options: {
+    js?: boolean;
     projectName: string;
     appProjectRoot: string;
     devServerPort?: number;
     typescriptConfiguration?: boolean;
+    dynamic?: boolean;
 }): GeneratorCallback;

package/src/rules/update-module-federation-project.js

@@ -3,17 +3,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateModuleFederationProject = void 0;
 const devkit_1 = require("@nx/devkit");
 const versions_1 = require("../utils/versions");
+const maybe_js_1 = require("../utils/maybe-js");
 function updateModuleFederationProject(host, options) {
     const projectConfig = (0, devkit_1.readProjectConfiguration)(host, options.projectName);
     projectConfig.targets.build.options = {
         ...projectConfig.targets.build.options,
-        main: `${options.appProjectRoot}/src/main.ts`,
-        webpackConfig: `${options.appProjectRoot}/webpack.config.${options.typescriptConfiguration ? 'ts' : 'js'}`,
+        main: (0, maybe_js_1.maybeJs)(options, `${options.appProjectRoot}/src/main.ts`),
+        webpackConfig: `${options.appProjectRoot}/webpack.config.${options.typescriptConfiguration && !options.js ? 'ts' : 'js'}`,
     };
     projectConfig.targets.build.configurations.production = {
         ...projectConfig.targets.build.configurations.production,
-        webpackConfig: `${options.appProjectRoot}/webpack.config.prod.${options.typescriptConfiguration ? 'ts' : 'js'}`,
+        webpackConfig: `${options.appProjectRoot}/webpack.config.prod.${options.typescriptConfiguration && !options.js ? 'ts' : 'js'}`,
     };
+    // If host should be configured to use dynamic federation
+    if (options.dynamic) {
+        const pathToProdWebpackConfig = (0, devkit_1.joinPathFragments)(projectConfig.root, `webpack.prod.config.${options.typescriptConfiguration && !options.js ? 'ts' : 'js'}`);
+        if (host.exists(pathToProdWebpackConfig)) {
+            host.delete(pathToProdWebpackConfig);
+        }
+        delete projectConfig.targets.build.configurations.production?.webpackConfig;
+    }
     projectConfig.targets.serve.executor =
         '@nx/react:module-federation-dev-server';
     projectConfig.targets.serve.options.port = options.devServerPort;

package/src/utils/add-mf-env-to-inputs.d.ts

@@ -0,0 +1,2 @@
+import { type Tree } from '@nx/devkit';
+export declare function addMfEnvToTargetDefaultInputs(tree: Tree): void;

package/src/utils/add-mf-env-to-inputs.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addMfEnvToTargetDefaultInputs = void 0;
+const devkit_1 = require("@nx/devkit");
+function addMfEnvToTargetDefaultInputs(tree) {
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    const webpackExecutor = '@nx/webpack:webpack';
+    const mfEnvVar = 'NX_MF_DEV_SERVER_STATIC_REMOTES';
+    nxJson.targetDefaults ??= {};
+    nxJson.targetDefaults[webpackExecutor] ??= {};
+    nxJson.targetDefaults[webpackExecutor].inputs ??= [
+        'production',
+        '^production',
+    ];
+    let mfEnvVarExists = false;
+    for (const input of nxJson.targetDefaults[webpackExecutor].inputs) {
+        if (typeof input === 'object' && input['env'] === mfEnvVar) {
+            mfEnvVarExists = true;
+            break;
+        }
+    }
+    if (!mfEnvVarExists) {
+        nxJson.targetDefaults[webpackExecutor].inputs.push({ env: mfEnvVar });
+        (0, devkit_1.updateNxJson)(tree, nxJson);
+    }
+}
+exports.addMfEnvToTargetDefaultInputs = addMfEnvToTargetDefaultInputs;

package/src/utils/assertion.js

@@ -5,6 +5,7 @@ const VALID_STYLES = [
     'css',
     'scss',
     'less',
+    'tailwind',
     'styled-components',
     '@emotion/styled',
     'styled-jsx',

package/src/utils/ct-utils.d.ts

@@ -1,9 +1,14 @@
 import { Tree } from '@nx/devkit';
 import { type FoundTarget } from '@nx/cypress/src/utils/find-target-options';
-export declare function addCTTargetWithBuildTarget(tree: Tree, options: {
+export declare function configureCypressCT(tree: Tree, options: {
     project: string;
     buildTarget: string;
+    bundler: 'vite' | 'webpack';
     validExecutorNames: Set<string>;
 }): Promise<FoundTarget>;
 export declare function getBundlerFromTarget(found: FoundTarget, tree: Tree): Promise<'vite' | 'webpack'>;
+export declare function getActualBundler(tree: Tree, options: {
+    buildTarget?: string;
+    bundler?: 'vite' | 'webpack';
+}, found: FoundTarget): Promise<"vite" | "webpack">;
 export declare function isComponent(tree: Tree, filePath: string): boolean;

package/src/utils/ct-utils.js

@@ -1,14 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isComponent = exports.getBundlerFromTarget = exports.addCTTargetWithBuildTarget = void 0;
+exports.isComponent = exports.getActualBundler = exports.getBundlerFromTarget = exports.configureCypressCT = void 0;
 const devkit_1 = require("@nx/devkit");
 const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
 const ast_utils_1 = require("./ast-utils");
 let tsModule;
 const allowedFileExt = new RegExp(/\.[jt]sx?/);
 const isSpecFile = new RegExp(/(spec|test)\./);
-async function addCTTargetWithBuildTarget(tree, options) {
+async function configureCypressCT(tree, options) {
     let found = { target: options.buildTarget, config: undefined };
+    const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.project);
     // Specifically undefined as a workaround for Remix to pass an empty string as the buildTarget
     if (options.buildTarget === undefined) {
         const { findBuildConfig } = await Promise.resolve().then(() => require('@nx/cypress/src/utils/find-target-options'));
@@ -19,16 +20,37 @@ async function addCTTargetWithBuildTarget(tree, options) {
         });
         assertValidConfig(found?.config);
     }
-    const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.project);
-    projectConfig.targets['component-test'].options = {
-        ...projectConfig.targets['component-test'].options,
-        devServerTarget: found.target,
-        skipServe: true,
+    else if (options.buildTarget) {
+        const projectGraph = await (0, devkit_1.createProjectGraphAsync)();
+        const { project, target } = (0, devkit_1.parseTargetString)(options.buildTarget, projectGraph);
+        const buildTargetProject = (0, devkit_1.readProjectConfiguration)(tree, project);
+        const executor = buildTargetProject.targets?.[target]?.executor;
+        if (!executor || !options.validExecutorNames.has(executor)) {
+            throw new Error(`Cypress Component Testing is not currently supported for this project. Please check https://github.com/nrwl/nx/issues/21546 for more information.`);
+        }
+    }
+    const { addDefaultCTConfig, getProjectCypressConfigPath } = await Promise.resolve().then(() => require('@nx/cypress/src/utils/config'));
+    const ctConfigOptions = {
+        bundler: options.bundler ?? (await getActualBundler(tree, options, found)),
     };
-    (0, devkit_1.updateProjectConfiguration)(tree, options.project, projectConfig);
+    if (projectConfig.targets?.['component-test']?.executor ===
+        '@nx/cypress:cypress') {
+        projectConfig.targets['component-test'].options = {
+            ...projectConfig.targets['component-test'].options,
+            devServerTarget: found.target,
+            skipServe: true,
+        };
+        (0, devkit_1.updateProjectConfiguration)(tree, options.project, projectConfig);
+    }
+    else {
+        ctConfigOptions.buildTarget = found.target;
+    }
+    const cypressConfigFilePath = getProjectCypressConfigPath(tree, projectConfig.root);
+    const updatedCyConfig = await addDefaultCTConfig(tree.read(cypressConfigFilePath, 'utf-8'), ctConfigOptions);
+    tree.write(cypressConfigFilePath, `import { nxComponentTestingPreset } from '@nx/react/plugins/component-testing';\n${updatedCyConfig}`);
     return found;
 }
-exports.addCTTargetWithBuildTarget = addCTTargetWithBuildTarget;
+exports.configureCypressCT = configureCypressCT;
 function assertValidConfig(config) {
     if (!config) {
         throw new Error('Unable to find a valid build configuration. Try passing in a target for an app. --build-target=<project>:<target>[:<configuration>]');
@@ -49,6 +71,14 @@ async function getBundlerFromTarget(found, tree) {
         : 'webpack';
 }
 exports.getBundlerFromTarget = getBundlerFromTarget;
+async function getActualBundler(tree, options, found) {
+    // Specifically undefined to allow Remix workaround of passing an empty string
+    const actualBundler = options.buildTarget !== undefined && options.bundler
+        ? options.bundler
+        : await getBundlerFromTarget(found, tree);
+    return actualBundler;
+}
+exports.getActualBundler = getActualBundler;
 function isComponent(tree, filePath) {
     if (!tsModule) {
         tsModule = (0, ensure_typescript_1.ensureTypescript)();

package/src/utils/get-in-source-vitest-tests-template.js

@@ -8,7 +8,7 @@ if (import.meta.vitest) {
   // For more information please visit the Vitest docs site here: https://vitest.dev/guide/in-source.html
   
   const { it, expect, beforeEach } = import.meta.vitest;
-  let render: any;
+  let render: typeof import('@testing-library/react').render;
 
   beforeEach(async () => {
     render = (await import('@testing-library/react')).render;

package/src/utils/has-vite-plugin.d.ts

@@ -0,0 +1,2 @@
+import { Tree } from '@nx/devkit';
+export declare function hasVitePlugin(tree: Tree): boolean;

package/src/utils/has-vite-plugin.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasVitePlugin = void 0;
+const devkit_1 = require("@nx/devkit");
+function hasVitePlugin(tree) {
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    return !!nxJson.plugins?.some((p) => typeof p === 'string'
+        ? p === '@nx/vite/plugin'
+        : p.plugin === '@nx/vite/plugin');
+}
+exports.hasVitePlugin = hasVitePlugin;

package/src/utils/has-webpack-plugin.d.ts

@@ -0,0 +1,2 @@
+import { Tree } from '@nx/devkit';
+export declare function hasWebpackPlugin(tree: Tree): boolean;

package/src/utils/has-webpack-plugin.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasWebpackPlugin = void 0;
+const devkit_1 = require("@nx/devkit");
+function hasWebpackPlugin(tree) {
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    return !!nxJson.plugins?.some((p) => typeof p === 'string'
+        ? p === '@nx/webpack/plugin'
+        : p.plugin === '@nx/webpack/plugin');
+}
+exports.hasWebpackPlugin = hasWebpackPlugin;

package/src/utils/maybe-js.d.ts

@@ -0,0 +1,3 @@
+export declare function maybeJs(options: {
+    js?: boolean;
+}, path: string): string;

package/src/utils/versions.d.ts

@@ -8,7 +8,7 @@ export declare const babelLoaderVersion = "^9.1.2";
 export declare const typesReactVersion = "18.2.33";
 export declare const typesReactDomVersion = "18.2.14";
 export declare const typesReactIsVersion = "18.2.2";
-export declare const typesNodeVersion = "18.14.2";
+export declare const typesNodeVersion = "18.16.9";
 export declare const babelPresetReactVersion = "^7.14.5";
 export declare const babelCoreVersion = "^7.14.5";
 export declare const styledComponentsVersion = "5.3.6";

package/src/utils/versions.js

@@ -12,7 +12,7 @@ exports.babelLoaderVersion = '^9.1.2';
 exports.typesReactVersion = '18.2.33';
 exports.typesReactDomVersion = '18.2.14';
 exports.typesReactIsVersion = '18.2.2';
-exports.typesNodeVersion = '18.14.2';
+exports.typesNodeVersion = '18.16.9';
 exports.babelPresetReactVersion = '^7.14.5';
 exports.babelCoreVersion = '^7.14.5';
 exports.styledComponentsVersion = '5.3.6';

package/typings/style.d.ts

@@ -2,6 +2,7 @@ export type SupportedStyles =
   | 'css'
   | 'scss'
   | 'less'
+  | 'tailwind'
   | 'styled-components'
   | '@emotion/styled'
   | 'styled-jsx'

package/src/generators/application/files/base-webpack/src/environments/environment.prod.ts__tmpl__

@@ -1,3 +0,0 @@
-export const environment = {
-  production: true
-};

package/src/generators/application/files/base-webpack/src/environments/environment.ts__tmpl__

@@ -1,6 +0,0 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// When building for production, this file is replaced with `environment.prod.ts`.
-
-export const environment = {
-  production: false
-};

package/src/generators/host/files/module-federation/src/main.ts__tmpl__

@@ -1 +0,0 @@
-import('./bootstrap');

package/src/generators/host/files/module-federation-ts/src/main.ts__tmpl__

@@ -1 +0,0 @@
-import('./bootstrap');

package/src/generators/library/lib/maybe-js.d.ts

@@ -1,2 +0,0 @@
-import { NormalizedSchema } from '../schema';
-export declare function maybeJs(options: NormalizedSchema, path: string): string;