@nx/react 16.9.0-beta.1 → 16.9.0-beta.3

package/babel.d.ts

@@ -1,4 +1,5 @@
 interface NxReactBabelOptions {
+    development?: boolean;
     runtime?: string;
     importSource?: string;
     useBuiltIns?: boolean | string;
@@ -10,7 +11,7 @@ interface NxReactBabelOptions {
         loose?: boolean;
     };
 }
-declare function getReactPresetOptions({ presetOptions, env }: {
-    presetOptions: any;
-    env: any;
+declare function getReactPresetOptions({ presetOptions, env, }: {
+    env: string;
+    presetOptions: NxReactBabelOptions;
 }): Record<string, string | boolean>;

package/babel.js

@@ -33,10 +33,10 @@ module.exports = function (api, options) {
         presets,
     };
 };
-function getReactPresetOptions({ presetOptions, env }) {
+function getReactPresetOptions({ presetOptions, env, }) {
     const reactPresetOptions = {
         runtime: presetOptions.runtime ?? 'automatic',
-        development: env !== 'production',
+        development: presetOptions.development ?? env !== 'production',
     };
     // JSX spread is transformed into object spread in `@babel/plugin-transform-react-jsx`
     // `useBuiltIns` will be removed in Babel 8.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/react",
-  "version": "16.9.0-beta.1",
+  "version": "16.9.0-beta.3",
   "private": false,
   "description": "The React plugin for Nx contains executors and generators for managing React applications and libraries within an Nx workspace. It provides:\n\n\n- Integration with libraries such as Jest, Cypress, and Storybook.\n\n- Generators for applications, libraries, components, hooks, and more.\n\n- Library build support for publishing packages to npm or other registries.\n\n- Utilities for automatic workspace refactoring.",
   "repository": {
@@ -31,11 +31,11 @@
     "migrations": "./migrations.json"
   },
   "dependencies": {
-    "@nrwl/react": "16.9.0-beta.1",
-    "@nx/devkit": "16.9.0-beta.1",
-    "@nx/js": "16.9.0-beta.1",
-    "@nx/linter": "16.9.0-beta.1",
-    "@nx/web": "16.9.0-beta.1",
+    "@nrwl/react": "16.9.0-beta.3",
+    "@nx/devkit": "16.9.0-beta.3",
+    "@nx/js": "16.9.0-beta.3",
+    "@nx/linter": "16.9.0-beta.3",
+    "@nx/web": "16.9.0-beta.3",
     "@phenomnomnominal/tsquery": "~5.0.1",
     "@svgr/webpack": "^8.0.1",
     "chalk": "^4.1.0",
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "type": "commonjs",
-  "gitHead": "5056d6cefb2949ba865019e8b71e633fba28c091"
+  "gitHead": "d5692528c089a75c76b21d2d1235d8cc5dbb1d26"
 }

package/plugins/component-testing/index.js

@@ -75,7 +75,7 @@ function nxComponentTestingPreset(pathToConfig, options) {
         if (!buildTarget) {
             throw new Error(`Unable to find the 'devServerTarget' executor option in the '${ctTargetName}' target of the '${ctProjectName}' project`);
         }
-        webpackConfig = buildTargetWebpack(graph, buildTarget, ctProjectName);
+        webpackConfig = buildTargetWebpack(ctExecutorContext, buildTarget, ctProjectName);
     }
     catch (e) {
         devkit_1.logger.warn((0, devkit_1.stripIndents) `Unable to build a webpack config with the project graph. 
@@ -126,7 +126,8 @@ function withSchemaDefaults(target, context) {
     options.generateIndexHtml ??= true;
     return options;
 }
-function buildTargetWebpack(graph, buildTarget, componentTestingProjectName) {
+function buildTargetWebpack(ctx, buildTarget, componentTestingProjectName) {
+    const graph = ctx.projectGraph;
     const parsed = (0, devkit_1.parseTargetString)(buildTarget, graph);
     const buildableProjectConfig = graph.nodes[parsed.project]?.data;
     const ctProjectConfig = graph.nodes[componentTestingProjectName]?.data;

package/src/executors/module-federation-dev-server/module-federation-dev-server.impl.js

@@ -11,7 +11,7 @@ const child_process_1 = require("child_process");
 const fs_1 = require("fs");
 const tsnode_register_1 = require("@nx/js/src/utils/typescript/tsnode-register");
 function getBuildOptions(buildTarget, context) {
-    const target = (0, devkit_1.parseTargetString)(buildTarget, context.projectGraph);
+    const target = (0, devkit_1.parseTargetString)(buildTarget, context);
     const buildOptions = (0, devkit_1.readTargetOptions)(target, context);
     return {
         ...buildOptions,

package/src/generators/application/application.js

@@ -74,7 +74,7 @@ async function applicationGeneratorInternal(host, schema) {
     (0, create_application_files_1.createApplicationFiles)(host, options);
     (0, add_project_1.addProject)(host, options);
     if (options.bundler === 'vite') {
-        const { viteConfigurationGenerator } = (0, devkit_1.ensurePackage)('@nx/vite', versions_1.nxVersion);
+        const { createOrEditViteConfig, viteConfigurationGenerator } = (0, devkit_1.ensurePackage)('@nx/vite', versions_1.nxVersion);
         // We recommend users use `import.meta.env.MODE` and other variables in their code to differentiate between production and development.
         // See: https://vitejs.dev/guide/env-and-mode.html
         if (host.exists((0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src/environments'))) {
@@ -90,6 +90,24 @@ async function applicationGeneratorInternal(host, schema) {
             skipFormat: true,
         });
         tasks.push(viteTask);
+        createOrEditViteConfig(host, {
+            project: options.projectName,
+            includeLib: false,
+            includeVitest: options.unitTestRunner === 'vitest',
+            inSourceTests: options.inSourceTests,
+            rollupOptionsExternal: [
+                `'react'`,
+                `'react-dom'`,
+                `'react/jsx-runtime'`,
+            ],
+            rollupOptionsExternalString: `"'react', 'react-dom', 'react/jsx-runtime'"`,
+            imports: [
+                options.compiler === 'swc'
+                    ? `import react from '@vitejs/plugin-react-swc'`
+                    : `import react from '@vitejs/plugin-react'`,
+            ],
+            plugins: ['react()'],
+        }, false);
     }
     else if (options.bundler === 'webpack') {
         const { webpackInitGenerator } = (0, devkit_1.ensurePackage)('@nx/webpack', versions_1.nxVersion);
@@ -112,7 +130,7 @@ async function applicationGeneratorInternal(host, schema) {
         tasks.push(rspackTask);
     }
     if (options.bundler !== 'vite' && options.unitTestRunner === 'vitest') {
-        const { vitestGenerator } = (0, devkit_1.ensurePackage)('@nx/vite', versions_1.nxVersion);
+        const { createOrEditViteConfig, vitestGenerator } = (0, devkit_1.ensurePackage)('@nx/vite', versions_1.nxVersion);
         const vitestTask = await vitestGenerator(host, {
             uiFramework: 'react',
             coverageProvider: 'c8',
@@ -121,6 +139,24 @@ async function applicationGeneratorInternal(host, schema) {
             skipFormat: true,
         });
         tasks.push(vitestTask);
+        createOrEditViteConfig(host, {
+            project: options.projectName,
+            includeLib: false,
+            includeVitest: true,
+            inSourceTests: options.inSourceTests,
+            rollupOptionsExternal: [
+                `'react'`,
+                `'react-dom'`,
+                `'react/jsx-runtime'`,
+            ],
+            rollupOptionsExternalString: `"'react', 'react-dom', 'react/jsx-runtime'"`,
+            imports: [
+                options.compiler === 'swc'
+                    ? `import react from '@vitejs/plugin-react-swc'`
+                    : `import react from '@vitejs/plugin-react'`,
+            ],
+            plugins: ['react()'],
+        }, true);
     }
     if ((options.bundler === 'vite' || options.unitTestRunner === 'vitest') &&
         options.inSourceTests) {

package/src/generators/host/files/module-federation-ssr-ts/module-federation.server.config.ts__tmpl__

@@ -0,0 +1,10 @@
+import { ModuleFederationConfig } from '@nx/webpack';
+
+const config: ModuleFederationConfig = {
+    name: '<%= projectName %>',
+    remotes: [
+    <% remotes.forEach(function(r) {%> "<%= r.fileName %>", <% }); %>
+    ],
+};
+
+export default config;

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

@@ -0,0 +1,28 @@
+import * as path from 'path';
+import express from 'express';
+import cors from 'cors';
+
+import { handleRequest } from './src/main.server';
+
+const port = process.env['PORT'] || 4200;
+const app = express();
+
+const browserDist = path.join(process.cwd(), '<%= browserBuildOutputPath %>');
+const indexPath = path.join(browserDist, 'index.html');
+
+app.use(cors());
+
+app.get(
+  '*.*',
+  express.static(browserDist, {
+    maxAge: '1y',
+  })
+);
+
+app.use('*', handleRequest(indexPath));
+
+const server = app.listen(port, () => {
+  console.log(`Express server listening on http://localhost:${port}`);
+});
+
+server.on('error', console.error);

package/src/generators/host/files/module-federation-ssr-ts/tsconfig.server.json__tmpl__

@@ -0,0 +1,15 @@
+{
+  "extends": "./tsconfig.app.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/server",
+    "target": "es2019",
+    "types": [
+      "node"
+    ]
+  },
+  "include": [
+    "src/remotes.d.ts",
+    "src/main.server.tsx",
+    "server.ts"
+  ]
+}

package/src/generators/host/files/module-federation-ssr-ts/webpack.server.config.ts__tmpl__

@@ -0,0 +1,12 @@
+import {composePlugins, withNx} from '@nx/webpack';
+import {withReact} from '@nx/react';
+import {withModuleFederationForSSR} from '@nx/react/module-federation';
+
+import baseConfig from './module-federation.config';
+
+const defaultConfig = {
+    ...baseConfig
+};
+
+// Nx plugins for webpack to build config object from Nx options and context.
+export default composePlugins(withNx(), withReact({ssr: true}), withModuleFederationForSSR(defaultConfig));

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

@@ -0,0 +1,10 @@
+import { ModuleFederationConfig } from '@nx/webpack';
+
+const config: ModuleFederationConfig = {
+    name: '<%= projectName %>',
+    remotes: [
+        <% remotes.forEach(function(r) {%> "<%= r.fileName %>", <% }); %>
+],
+};
+
+export default config;

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

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

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

@@ -0,0 +1,4 @@
+ // Declare your remote Modules here
+ // Example declare module 'about/Module';
+
+ <% remotes.forEach(function(r) { %>declare module '<%= r.fileName %>/Module';<% }); %>

package/src/generators/host/files/module-federation-ts/webpack.config.prod.ts__tmpl__

@@ -0,0 +1,32 @@
+import { composePlugins, withNx } from '@nx/webpack';
+import { withReact } from '@nx/react';
+import { withModuleFederation } from '@nx/react/module-federation';
+
+import baseConfig from './module-federation.config';
+
+const prodConfig = {
+    ...baseConfig,
+    /*
+     * Remote overrides for production.
+     * Each entry is a pair of a unique name and the URL where it is deployed.
+     *
+     * e.g.
+     * remotes: [
+     *   ['app1', 'http://app1.example.com'],
+     *   ['app2', 'http://app2.example.com'],
+     * ]
+     *
+     * You can also use a full path to the remoteEntry.js file if desired.
+     *
+     * remotes: [
+     *   ['app1', 'http://example.com/path/to/app1/remoteEntry.js'],
+     *   ['app2', 'http://example.com/path/to/app2/remoteEntry.js'],
+     * ]
+     */
+    remotes: [
+        <% remotes.forEach(function(r) {%>['<%= r.fileName %>', 'http://localhost:<%= r.port %>/'],<% }); %>
+],
+};
+
+// Nx plugins for webpack to build config object from Nx options and context.
+export default composePlugins(withNx(), withReact(), withModuleFederation(prodConfig));

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

@@ -0,0 +1,12 @@
+import {composePlugins, withNx} from '@nx/webpack';
+import {withReact} from '@nx/react';
+import {withModuleFederation} from '@nx/react/module-federation';
+
+import baseConfig from './module-federation.config';
+
+const config = {
+    ...baseConfig,
+};
+
+// Nx plugins for webpack to build config object from Nx options and context.
+export default composePlugins(withNx(), withReact(), withModuleFederation(config));

package/src/generators/host/host.js

@@ -20,7 +20,10 @@ async function hostGenerator(host, schema) {
 exports.hostGenerator = hostGenerator;
 async function hostGeneratorInternal(host, schema) {
     const tasks = [];
-    const options = await (0, normalize_options_1.normalizeOptions)(host, schema, '@nx/react:host');
+    const options = {
+        ...(await (0, normalize_options_1.normalizeOptions)(host, schema, '@nx/react:host')),
+        typescriptConfiguration: schema.typescriptConfiguration ?? true,
+    };
     const initTask = await (0, application_1.default)(host, {
         ...options,
         // The target use-case is loading remotes as child routes, thus always enable routing.
@@ -47,6 +50,7 @@ async function hostGeneratorInternal(host, schema) {
                 ssr: options.ssr,
                 skipFormat: true,
                 projectNameAndRootFormat: options.projectNameAndRootFormat,
+                typescriptConfiguration: options.typescriptConfiguration,
             });
             remotePort++;
         }
@@ -64,7 +68,7 @@ async function hostGeneratorInternal(host, schema) {
         const setupSsrForHostTask = await (0, setup_ssr_for_host_1.setupSsrForHost)(host, options, options.projectName, remotesWithPorts);
         tasks.push(setupSsrForHostTask);
         const projectConfig = (0, devkit_1.readProjectConfiguration)(host, options.projectName);
-        projectConfig.targets.server.options.webpackConfig = (0, devkit_1.joinPathFragments)(projectConfig.root, 'webpack.server.config.js');
+        projectConfig.targets.server.options.webpackConfig = (0, devkit_1.joinPathFragments)(projectConfig.root, `webpack.server.config.${options.typescriptConfiguration ? 'ts' : 'js'}`);
         (0, devkit_1.updateProjectConfiguration)(host, options.projectName, projectConfig);
     }
     if (!options.skipFormat) {

package/src/generators/host/lib/add-module-federation-files.js

@@ -20,7 +20,20 @@ function addModuleFederationFiles(host, options, defaultRemoteManifest) {
     // new entry file.
     host.rename((0, path_1.join)(options.appProjectRoot, 'src/main.tsx'), (0, path_1.join)(options.appProjectRoot, 'src/bootstrap.tsx'));
     (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, `../files/common`), options.appProjectRoot, templateVariables);
+    const pathToModuleFederationFiles = options.typescriptConfiguration
+        ? 'module-federation-ts'
+        : 'module-federation';
     // New entry file is created here.
-    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, `../files/module-federation`), options.appProjectRoot, templateVariables);
+    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, `../files/${pathToModuleFederationFiles}`), options.appProjectRoot, templateVariables);
+    if (options.typescriptConfiguration) {
+        const pathToWebpackConfig = (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'webpack.config.js');
+        const pathToWebpackProdConfig = (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'webpack.config.prod.js');
+        if (host.exists(pathToWebpackConfig)) {
+            host.delete(pathToWebpackConfig);
+        }
+        if (host.exists(pathToWebpackProdConfig)) {
+            host.delete(pathToWebpackProdConfig);
+        }
+    }
 }
 exports.addModuleFederationFiles = addModuleFederationFiles;

package/src/generators/host/lib/setup-ssr-for-host.js

@@ -8,7 +8,10 @@ async function setupSsrForHost(tree, options, appName, defaultRemoteManifest) {
     let project = (0, devkit_1.readProjectConfiguration)(tree, appName);
     project.targets.serve.executor = '@nx/react:module-federation-ssr-dev-server';
     (0, devkit_1.updateProjectConfiguration)(tree, appName, project);
-    (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, '../files/module-federation-ssr'), project.root, {
+    const pathToModuleFederationSsrFiles = options.typescriptConfiguration
+        ? 'module-federation-ssr-ts'
+        : 'module-federation-ssr';
+    (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, `../files/${pathToModuleFederationSsrFiles}`), project.root, {
         ...options,
         remotes: defaultRemoteManifest.map(({ name, port }) => {
             return {

package/src/generators/host/schema.d.ts

@@ -24,6 +24,7 @@ export interface Schema {
   tags?: string;
   unitTestRunner: 'jest' | 'vitest' | 'none';
   minimal?: boolean;
+  typescriptConfiguration?: boolean;
 }
 
 export interface NormalizedSchema extends Schema {

package/src/generators/host/schema.json

@@ -166,6 +166,11 @@
       "description": "Generate a React app with a minimal setup. No nx starter template.",
       "type": "boolean",
       "default": false
+    },
+    "typescriptConfiguration": {
+      "type": "boolean",
+      "description": "Whether the module federation configuration and webpack configuration files should use TS.",
+      "default": true
     }
   },
   "required": ["name"],

package/src/generators/library/library.js

@@ -50,7 +50,7 @@ async function libraryGeneratorInternal(host, schema) {
     (0, create_files_1.createFiles)(host, options);
     // Set up build target
     if (options.buildable && options.bundler === 'vite') {
-        const { viteConfigurationGenerator } = (0, devkit_1.ensurePackage)('@nx/vite', versions_1.nxVersion);
+        const { viteConfigurationGenerator, createOrEditViteConfig } = (0, devkit_1.ensurePackage)('@nx/vite', versions_1.nxVersion);
         const viteTask = await viteConfigurationGenerator(host, {
             uiFramework: 'react',
             project: options.name,
@@ -63,6 +63,24 @@ async function libraryGeneratorInternal(host, schema) {
             testEnvironment: 'jsdom',
         });
         tasks.push(viteTask);
+        createOrEditViteConfig(host, {
+            project: options.name,
+            includeLib: true,
+            includeVitest: options.unitTestRunner === 'vitest',
+            inSourceTests: options.inSourceTests,
+            rollupOptionsExternal: [
+                `'react'`,
+                `'react-dom'`,
+                `'react/jsx-runtime'`,
+            ],
+            rollupOptionsExternalString: `"'react', 'react-dom', 'react/jsx-runtime'"`,
+            imports: [
+                options.compiler === 'swc'
+                    ? `import react from '@vitejs/plugin-react-swc'`
+                    : `import react from '@vitejs/plugin-react'`,
+            ],
+            plugins: ['react()'],
+        }, false);
     }
     else if (options.buildable && options.bundler === 'rollup') {
         const rollupTask = await (0, add_rollup_build_target_1.addRollupBuildTarget)(host, options);
@@ -90,7 +108,7 @@ async function libraryGeneratorInternal(host, schema) {
     else if (options.unitTestRunner === 'vitest' &&
         options.bundler !== 'vite' // tests are already configured if bundler is vite
     ) {
-        const { vitestGenerator } = (0, devkit_1.ensurePackage)('@nx/vite', versions_1.nxVersion);
+        const { vitestGenerator, createOrEditViteConfig } = (0, devkit_1.ensurePackage)('@nx/vite', versions_1.nxVersion);
         const vitestTask = await vitestGenerator(host, {
             uiFramework: 'react',
             project: options.name,
@@ -100,6 +118,20 @@ async function libraryGeneratorInternal(host, schema) {
             testEnvironment: 'jsdom',
         });
         tasks.push(vitestTask);
+        createOrEditViteConfig(host, {
+            project: options.name,
+            includeLib: true,
+            includeVitest: true,
+            inSourceTests: options.inSourceTests,
+            rollupOptionsExternal: [
+                `'react'`,
+                `'react-dom'`,
+                `'react/jsx-runtime'`,
+            ],
+            rollupOptionsExternalString: `"'react', 'react-dom', 'react/jsx-runtime'"`,
+            imports: [`import react from '@vitejs/plugin-react'`],
+            plugins: ['react()'],
+        }, true);
     }
     if (options.component) {
         const componentTask = await (0, component_1.default)(host, {

package/src/generators/remote/files/module-federation-ssr-ts/module-federation.server.config.ts__tmpl__

@@ -0,0 +1,10 @@
+import {ModuleFederationConfig} from '@nx/webpack';
+
+const config: ModuleFederationConfig = {
+    name: '<%= projectName %>',
+    exposes: {
+        './Module': '<%= appProjectRoot %>/src/remote-entry.ts',
+    },
+};
+
+export default config;

package/src/generators/remote/files/module-federation-ssr-ts/server.ts__tmpl__

@@ -0,0 +1,45 @@
+import * as path from 'path';
+import express from 'express';
+import cors from 'cors';
+
+import { handleRequest } from './src/main.server';
+
+const port = process.env['PORT'] || 4200;
+const app = express();
+
+const browserDist = path.join(process.cwd(), '<%= browserBuildOutputPath %>');
+const serverDist = path.join(process.cwd(), '<%= serverBuildOutputPath %>');
+const indexPath = path.join(browserDist, 'index.html');
+
+app.use(cors());
+
+// Client-side static bundles
+app.get(
+  '*.*',
+  express.static(browserDist, {
+    maxAge: '1y',
+  })
+);
+
+// Static bundles for server-side module federation
+app.use('/server',
+  express.static(serverDist, {
+    maxAge: '1y'
+  })
+);
+
+app.use('*', handleRequest(indexPath));
+
+const server = app.listen(port, () => {
+  console.log(`Express server listening on http://localhost:${port}`);
+
+  /**
+   * DO NOT REMOVE IF USING @nx/react:module-federation-dev-ssr executor
+   * to serve your Host application with this Remote application.
+   * This message allows Nx to determine when the Remote is ready to be
+   * consumed by the Host.
+   */
+  process.send?.('nx.server.ready');
+});
+
+server.on('error', console.error);

package/src/generators/remote/files/module-federation-ssr-ts/webpack.server.config.ts__tmpl__

@@ -0,0 +1,12 @@
+import {composePlugins, withNx} from '@nx/webpack';
+import {withReact} from '@nx/react';
+import {withModuleFederationForSSR} from '@nx/react/module-federation';
+
+import baseConfig from "./module-federation.server.config";
+
+const defaultConfig = {
+    ...baseConfig,
+};
+
+// Nx plugins for webpack to build config object from Nx options and context.
+export default composePlugins(withNx(), withReact({ssr: true}), withModuleFederationForSSR(defaultConfig));

package/src/generators/remote/files/module-federation-ts/module-federation.config.ts__tmpl__

@@ -0,0 +1,10 @@
+import {ModuleFederationConfig} from '@nx/webpack';
+
+const config: ModuleFederationConfig = {
+    name: '<%= projectName %>',
+    exposes: {
+        './Module': './src/remote-entry.ts',
+    },
+};
+
+export default config;

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

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

package/src/generators/remote/files/module-federation-ts/src/remote-entry.ts__tmpl__

@@ -0,0 +1 @@
+export { default } from './app/app';

package/src/generators/remote/files/module-federation-ts/webpack.config.prod.ts__tmpl__

@@ -0,0 +1 @@
+export default require('./webpack.config');

package/src/generators/remote/files/module-federation-ts/webpack.config.ts__tmpl__

@@ -0,0 +1,12 @@
+import {composePlugins, withNx} from '@nx/webpack';
+import {withReact} from '@nx/react';
+import {withModuleFederation} from '@nx/react/module-federation';
+
+import baseConfig from './module-federation.config';
+
+const config = {
+    ...baseConfig,
+};
+
+// Nx plugins for webpack to build config object from Nx options and context.
+export default composePlugins(withNx(), withReact(), withModuleFederation(config));

package/src/generators/remote/lib/setup-ssr-for-remote.js

@@ -6,7 +6,10 @@ const versions_1 = require("../../../utils/versions");
 async function setupSsrForRemote(tree, options, appName) {
     const tasks = [];
     const project = (0, devkit_1.readProjectConfiguration)(tree, appName);
-    (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, '../files/module-federation-ssr'), project.root, {
+    const pathToModuleFederationSsrFiles = options.typescriptConfiguration
+        ? 'module-federation-ssr-ts'
+        : 'module-federation-ssr';
+    (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, `../files/${pathToModuleFederationSsrFiles}`), project.root, {
         ...options,
         appName,
         tmpl: '',

package/src/generators/remote/lib/update-host-with-remote.js

@@ -10,7 +10,10 @@ function updateHostWithRemote(host, hostName, remoteName) {
         tsModule = (0, ensure_typescript_1.ensureTypescript)();
     }
     const hostConfig = (0, devkit_1.readProjectConfiguration)(host, hostName);
-    const moduleFederationConfigPath = (0, devkit_1.joinPathFragments)(hostConfig.root, 'module-federation.config.js');
+    let moduleFederationConfigPath = (0, devkit_1.joinPathFragments)(hostConfig.root, 'module-federation.config.js');
+    if (!host.exists(moduleFederationConfigPath)) {
+        moduleFederationConfigPath = (0, devkit_1.joinPathFragments)(hostConfig.root, 'module-federation.config.ts');
+    }
     const remoteDefsPath = (0, devkit_1.joinPathFragments)(hostConfig.sourceRoot, 'remotes.d.ts');
     const appComponentPath = findAppComponentPath(host, hostConfig.sourceRoot);
     if (host.exists(moduleFederationConfigPath)) {

package/src/generators/remote/remote.d.ts

@@ -1,7 +1,7 @@
 import { GeneratorCallback, Tree } from '@nx/devkit';
 import { NormalizedSchema } from '../application/schema';
 import { Schema } from './schema';
-export declare function addModuleFederationFiles(host: Tree, options: NormalizedSchema): void;
+export declare function addModuleFederationFiles(host: Tree, options: NormalizedSchema<Schema>): void;
 export declare function remoteGenerator(host: Tree, schema: Schema): Promise<GeneratorCallback>;
 export declare function remoteGeneratorInternal(host: Tree, schema: Schema): Promise<GeneratorCallback>;
 export default remoteGenerator;

package/src/generators/remote/remote.js

@@ -15,7 +15,20 @@ function addModuleFederationFiles(host, options) {
         ...options,
         tmpl: '',
     };
-    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, `./files/module-federation`), options.appProjectRoot, templateVariables);
+    const pathToModuleFederationFiles = options.typescriptConfiguration
+        ? 'module-federation-ts'
+        : 'module-federation';
+    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, `./files/${pathToModuleFederationFiles}`), options.appProjectRoot, templateVariables);
+    if (options.typescriptConfiguration) {
+        const pathToWebpackConfig = (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'webpack.config.js');
+        const pathToWebpackProdConfig = (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'webpack.config.prod.js');
+        if (host.exists(pathToWebpackConfig)) {
+            host.delete(pathToWebpackConfig);
+        }
+        if (host.exists(pathToWebpackProdConfig)) {
+            host.delete(pathToWebpackProdConfig);
+        }
+    }
 }
 exports.addModuleFederationFiles = addModuleFederationFiles;
 async function remoteGenerator(host, schema) {
@@ -27,7 +40,10 @@ async function remoteGenerator(host, schema) {
 exports.remoteGenerator = remoteGenerator;
 async function remoteGeneratorInternal(host, schema) {
     const tasks = [];
-    const options = await (0, normalize_options_1.normalizeOptions)(host, schema, '@nx/react:remote');
+    const options = {
+        ...(await (0, normalize_options_1.normalizeOptions)(host, schema, '@nx/react:remote')),
+        typescriptConfiguration: schema.typescriptConfiguration ?? true,
+    };
     const initAppTask = await (0, application_1.default)(host, {
         ...options,
         // Only webpack works with module federation for now.
@@ -54,7 +70,7 @@ async function remoteGeneratorInternal(host, schema) {
         const setupSsrForRemoteTask = await (0, setup_ssr_for_remote_1.setupSsrForRemote)(host, options, options.projectName);
         tasks.push(setupSsrForRemoteTask);
         const projectConfig = (0, devkit_1.readProjectConfiguration)(host, options.projectName);
-        projectConfig.targets.server.options.webpackConfig = (0, devkit_1.joinPathFragments)(projectConfig.root, 'webpack.server.config.js');
+        projectConfig.targets.server.options.webpackConfig = (0, devkit_1.joinPathFragments)(projectConfig.root, `webpack.server.config.${options.typescriptConfiguration ? 'ts' : 'js'}`);
         (0, devkit_1.updateProjectConfiguration)(host, options.projectName, projectConfig);
     }
     if (!options.skipFormat) {

package/src/generators/remote/schema.d.ts

@@ -1,6 +1,7 @@
 import type { ProjectNameAndRootFormat } from '@nx/devkit/src/generators/project-name-and-root-utils';
 import type { Linter } from '@nx/linter';
 import type { SupportedStyles } from '../../../typings';
+import type { NormalizedSchema as ApplicationNormalizedSchema } from '../application/schema';
 
 export interface Schema {
   classComponent?: boolean;
@@ -24,4 +25,9 @@ export interface Schema {
   style: SupportedStyles;
   tags?: string;
   unitTestRunner: 'jest' | 'vitest' | 'none';
+  typescriptConfiguration?: boolean;
+}
+
+export interface NormalizedSchema extends ApplicationNormalizedSchema {
+  typescriptConfiguration: boolean;
 }

package/src/generators/remote/schema.json

@@ -164,6 +164,11 @@
       "description": "Whether to configure SSR for the host application",
       "type": "boolean",
       "default": false
+    },
+    "typescriptConfiguration": {
+      "type": "boolean",
+      "description": "Whether the module federation configuration and webpack configuration files should use TS.",
+      "default": true
     }
   },
   "required": ["name"],

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

@@ -8,5 +8,5 @@ export declare function getModuleFederationConfig(mfConfig: ModuleFederationConf
     sharedDependencies: {
         [x: string]: import("@nx/webpack/src/utils/module-federation").SharedLibraryConfig;
     };
-    mappedRemotes: Record<string, string>;
+    mappedRemotes: {};
 }>;

package/src/module-federation/utils.js

@@ -41,17 +41,23 @@ async function getModuleFederationConfig(mfConfig, options = { isServer: false }
     const sharedLibraries = (0, module_federation_1.shareWorkspaceLibraries)(dependencies.workspaceLibraries);
     const npmPackages = (0, module_federation_1.sharePackages)(dependencies.npmPackages);
     const sharedDependencies = {
-        ...sharedLibraries.getLibraries(),
+        ...sharedLibraries.getLibraries(project.root),
         ...npmPackages,
     };
     (0, module_federation_1.applySharedFunction)(sharedDependencies, mfConfig.shared);
     (0, module_federation_1.applyAdditionalShared)(sharedDependencies, mfConfig.additionalShared, projectGraph);
+    // Choose the correct mapRemotes function based on the server state.
     const mapRemotesFunction = options.isServer ? module_federation_1.mapRemotesForSSR : module_federation_1.mapRemotes;
-    const determineRemoteUrlFn = options.determineRemoteUrl ||
-        getFunctionDeterminateRemoteUrl(options.isServer);
-    const mappedRemotes = !mfConfig.remotes || mfConfig.remotes.length === 0
-        ? {}
-        : mapRemotesFunction(mfConfig.remotes, 'js', determineRemoteUrlFn);
+    // Determine the URL function, either from provided options or by using a default.
+    const determineRemoteUrlFunction = options.determineRemoteUrl
+        ? options.determineRemoteUrl
+        : getFunctionDeterminateRemoteUrl(options.isServer);
+    // Map the remotes if they exist, otherwise default to an empty object.
+    let mappedRemotes = {};
+    if (mfConfig.remotes && mfConfig.remotes.length > 0) {
+        const isLibraryTypeVar = mfConfig.library?.type === 'var';
+        mappedRemotes = mapRemotesFunction(mfConfig.remotes, 'js', determineRemoteUrlFunction, isLibraryTypeVar);
+    }
     return { sharedLibraries, sharedDependencies, mappedRemotes };
 }
 exports.getModuleFederationConfig = getModuleFederationConfig;

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

@@ -12,6 +12,10 @@ async function withModuleFederation(options) {
     return (config, ctx) => {
         config.output.uniqueName = options.name;
         config.output.publicPath = 'auto';
+        if (options.library?.type === 'var') {
+            config.output.scriptType = 'text/javascript';
+            config.experiments.outputModule = false;
+        }
         config.optimization = {
             runtimeChunk: false,
         };
@@ -28,6 +32,13 @@ async function withModuleFederation(options) {
             shared: {
                 ...sharedDependencies,
             },
+            /**
+             * remoteType: 'script' is required for the remote to be loaded as a script tag.
+             * remotes will need to be defined as:
+             *  { appX: 'appX@http://localhost:3001/remoteEntry.js' }
+             *  { appY: 'appY@http://localhost:3002/remoteEntry.js' }
+             */
+            ...(options.library?.type === 'var' ? { remoteType: 'script' } : {}),
         }), sharedLibraries.getReplacementPlugin());
         return config;
     };

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

@@ -3,4 +3,5 @@ export declare function updateModuleFederationProject(host: Tree, options: {
     projectName: string;
     appProjectRoot: string;
     devServerPort?: number;
+    typescriptConfiguration?: boolean;
 }): GeneratorCallback;

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

@@ -8,11 +8,11 @@ function updateModuleFederationProject(host, options) {
     projectConfig.targets.build.options = {
         ...projectConfig.targets.build.options,
         main: `${options.appProjectRoot}/src/main.ts`,
-        webpackConfig: `${options.appProjectRoot}/webpack.config.js`,
+        webpackConfig: `${options.appProjectRoot}/webpack.config.${options.typescriptConfiguration ? 'ts' : 'js'}`,
     };
     projectConfig.targets.build.configurations.production = {
         ...projectConfig.targets.build.configurations.production,
-        webpackConfig: `${options.appProjectRoot}/webpack.config.prod.js`,
+        webpackConfig: `${options.appProjectRoot}/webpack.config.prod.${options.typescriptConfiguration ? 'ts' : 'js'}`,
     };
     projectConfig.targets.serve.executor =
         '@nx/react:module-federation-dev-server';