feat(react): switch default to typescript configuration for module fe…

…deration (#19031)

docs/generated/packages/react/generators/host.json

@@ -160,6 +160,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"],

docs/generated/packages/react/generators/remote.json

@@ -158,6 +158,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"],

e2e/react-core/src/react-module-federation.test.ts

@@ -39,10 +39,10 @@ describe('React Module Federation', () => {
       `generate @nx/react:remote ${remote3} --style=css --host=${shell} --no-interactive`
     );
 
-    checkFilesExist(`apps/${shell}/module-federation.config.js`);
-    checkFilesExist(`apps/${remote1}/module-federation.config.js`);
-    checkFilesExist(`apps/${remote2}/module-federation.config.js`);
-    checkFilesExist(`apps/${remote3}/module-federation.config.js`);
+    checkFilesExist(`apps/${shell}/module-federation.config.ts`);
+    checkFilesExist(`apps/${remote1}/module-federation.config.ts`);
+    checkFilesExist(`apps/${remote2}/module-federation.config.ts`);
+    checkFilesExist(`apps/${remote3}/module-federation.config.ts`);
 
     await expect(runCLIAsync(`test ${shell}`)).resolves.toMatchObject({
       combinedOutput: expect.stringContaining('Test Suites: 1 passed, 1 total'),
@@ -54,7 +54,7 @@ describe('React Module Federation', () => {
     expect(readPort(remote3)).toEqual(4203);
 
     updateFile(
-      `apps/${shell}/webpack.config.js`,
+      `apps/${shell}/webpack.config.ts`,
       stripIndents`
         import { composePlugins, withNx, ModuleFederationConfig } from '@nx/webpack';
         import { withReact } from '@nx/react';
@@ -135,8 +135,8 @@ describe('React Module Federation', () => {
 
     // check files are generated without the layout directory ("apps/") and
     // using the project name as the directory when no directory is provided
-    checkFilesExist(`${shell}/module-federation.config.js`);
-    checkFilesExist(`${remote}/module-federation.config.js`);
+    checkFilesExist(`${shell}/module-federation.config.ts`);
+    checkFilesExist(`${remote}/module-federation.config.ts`);
 
     // check default generated host is built successfully
     const buildOutput = runCLI(`run ${shell}:build:development`);

packages/react/src/generators/host/__snapshots__/host.spec.ts.snap

@@ -0,0 +1,128 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`hostGenerator should generate host files and configs 1`] = `
+"const { composePlugins, withNx } = require('@nx/webpack');
+const { withReact } = require('@nx/react');
+const { withModuleFederation } = require('@nx/react/module-federation');
+
+const baseConfig = require('./module-federation.config');
+
+const config = {
+  ...baseConfig,
+};
+
+// Nx plugins for webpack to build config object from Nx options and context.
+module.exports = composePlugins(
+  withNx(),
+  withReact(),
+  withModuleFederation(config)
+);
+"
+`;
+
+exports[`hostGenerator should generate host files and configs 2`] = `
+"module.exports = {
+  name: 'test',
+  remotes: [],
+};
+"
+`;
+
+exports[`hostGenerator should generate host files and configs for SSR 1`] = `
+"const { composePlugins, withNx } = require('@nx/webpack');
+const { withReact } = require('@nx/react');
+const { withModuleFederationForSSR } = require('@nx/react/module-federation');
+
+const baseConfig = require('./module-federation.config');
+
+const defaultConfig = {
+  ...baseConfig,
+};
+
+// Nx plugins for webpack to build config object from Nx options and context.
+module.exports = composePlugins(
+  withNx(),
+  withReact({ ssr: true }),
+  withModuleFederationForSSR(defaultConfig)
+);
+"
+`;
+
+exports[`hostGenerator should generate host files and configs for SSR 2`] = `
+"// @ts-check
+
+/**
+ * @type {import('@nx/webpack').ModuleFederationConfig}
+ **/
+const moduleFederationConfig = {
+  name: 'test',
+  remotes: [],
+};
+
+module.exports = moduleFederationConfig;
+"
+`;
+
+exports[`hostGenerator should generate host files and configs for SSR when --typescriptConfiguration=true 1`] = `
+"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)
+);
+"
+`;
+
+exports[`hostGenerator should generate host files and configs for SSR when --typescriptConfiguration=true 2`] = `
+"import { ModuleFederationConfig } from '@nx/webpack';
+
+const config: ModuleFederationConfig = {
+  name: 'test',
+  remotes: [],
+};
+
+export default config;
+"
+`;
+
+exports[`hostGenerator should generate host files and configs when --typescriptConfiguration=true 1`] = `
+"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)
+);
+"
+`;
+
+exports[`hostGenerator should generate host files and configs when --typescriptConfiguration=true 2`] = `
+"import { ModuleFederationConfig } from '@nx/webpack';
+
+const config: ModuleFederationConfig = {
+  name: 'test',
+  remotes: [],
+};
+
+export default config;
+"
+`;

packages/react/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;

packages/react/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);

packages/react/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"
+  ]
+}

packages/react/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));

packages/react/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;

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

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

packages/react/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';<% }); %>

packages/react/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));

packages/react/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));