@nx/react 0.0.0-pr-31222-862e973 → 0.0.0-pr-31313-387cdca

package/src/generators/hook/files/{__fileName__.ts__tmpl__ → __fileName__.__ext__}

@@ -1,12 +1,14 @@
 import { useState, useCallback } from 'react'
 
+<%_ if (isTs) { _%>
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface <%= hookTypeName %> {
   count: number;
   increment: () => void;
 }
+<%_ } _%>
 
-export function <%= hookName %>(): <%= hookTypeName %> {
+export function <%= hookName %>()<% if (isTs) { %>: <%= hookTypeName %><% } %> {
   const [count, setCount] = useState(0)
   const increment = useCallback(() => setCount((x) => x + 1), [])
   return { count, increment }

package/src/generators/hook/hook.d.ts

@@ -1,5 +1,4 @@
 import { Tree } from '@nx/devkit';
 import { Schema } from './schema';
 export declare function hookGenerator(host: Tree, schema: Schema): Promise<void>;
-export declare function hookGeneratorInternal(host: Tree, schema: Schema): Promise<void>;
 export default hookGenerator;

package/src/generators/hook/hook.js

@@ -1,41 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.hookGenerator = hookGenerator;
-exports.hookGeneratorInternal = hookGeneratorInternal;
 // TODO(jack): Remove inline renderHook function when RTL releases with its own version
 const devkit_1 = require("@nx/devkit");
-const ast_utils_1 = require("../../utils/ast-utils");
+const artifact_name_and_directory_utils_1 = require("@nx/devkit/src/generators/artifact-name-and-directory-utils");
 const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
 const path_1 = require("path");
-const artifact_name_and_directory_utils_1 = require("@nx/devkit/src/generators/artifact-name-and-directory-utils");
+const ast_utils_1 = require("../../utils/ast-utils");
+const ts_solution_setup_1 = require("@nx/js/src/utils/typescript/ts-solution-setup");
 async function hookGenerator(host, schema) {
-    return hookGeneratorInternal(host, {
-        nameAndDirectoryFormat: 'derived',
-        ...schema,
-    });
-}
-async function hookGeneratorInternal(host, schema) {
     const options = await normalizeOptions(host, schema);
     createFiles(host, options);
     addExportsToBarrel(host, options);
     return await (0, devkit_1.formatFiles)(host);
 }
 function createFiles(host, options) {
+    const specExt = options.fileExtensionType === 'ts' ? 'tsx' : 'js';
     (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, './files'), options.directory, {
         ...options,
-        tmpl: '',
+        ext: options.fileExtension,
+        specExt,
+        isTs: options.fileExtensionType === 'ts',
     });
-    for (const c of host.listChanges()) {
-        let deleteFile = false;
-        if (options.skipTests && /.*spec.ts/.test(c.path)) {
-            deleteFile = true;
-        }
-        if (deleteFile) {
-            host.delete(c.path);
-        }
-    }
-    if (options.js) {
-        (0, devkit_1.toJS)(host);
+    if (options.skipTests) {
+        host.delete((0, devkit_1.joinPathFragments)(options.directory, `${options.fileName}.spec.${specExt}`));
     }
 }
 let tsModule;
@@ -46,85 +34,49 @@ function addExportsToBarrel(host, options) {
     const workspace = (0, devkit_1.getProjects)(host);
     const isApp = workspace.get(options.projectName).projectType === 'application';
     if (options.export && !isApp) {
-        const indexFilePath = (0, devkit_1.joinPathFragments)(options.projectSourceRoot, options.js ? 'index.js' : 'index.ts');
-        const indexSource = host.read(indexFilePath, 'utf-8');
-        if (indexSource !== null) {
-            const indexSourceFile = tsModule.createSourceFile(indexFilePath, indexSource, tsModule.ScriptTarget.Latest, true);
-            const changes = (0, devkit_1.applyChangesToString)(indexSource, (0, ast_utils_1.addImport)(indexSourceFile, `export * from './${options.directory}/${options.fileName}';`));
-            host.write(indexFilePath, changes);
+        const indexFilePath = (0, devkit_1.joinPathFragments)(options.projectSourceRoot, options.fileExtensionType === 'js' ? 'index.js' : 'index.ts');
+        if (!host.exists(indexFilePath)) {
+            return;
         }
+        const indexSource = host.read(indexFilePath, 'utf-8');
+        const indexSourceFile = tsModule.createSourceFile(indexFilePath, indexSource, tsModule.ScriptTarget.Latest, true);
+        const changes = (0, devkit_1.applyChangesToString)(indexSource, (0, ast_utils_1.addImport)(indexSourceFile, `export * from './${options.directory}/${options.fileName}';`));
+        host.write(indexFilePath, changes);
     }
 }
 async function normalizeOptions(host, options) {
-    assertValidOptions(options);
-    const { artifactName: name, directory: _directory, fileName: _fileName, nameAndDirectoryFormat, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(host, {
-        artifactType: 'hook',
-        callingGenerator: '@nx/react:hook',
+    const { artifactName, directory, fileName: hookFilename, fileExtension, fileExtensionType, project: projectName, } = await (0, artifact_name_and_directory_utils_1.determineArtifactNameAndDirectoryOptions)(host, {
+        path: options.path,
         name: options.name,
-        directory: options.directory,
-        derivedDirectory: options.directory,
-        flat: options.flat,
-        nameAndDirectoryFormat: options.nameAndDirectoryFormat,
-        project: options.project,
-        fileExtension: 'tsx',
-        pascalCaseFile: options.pascalCaseFiles,
-        pascalCaseDirectory: options.pascalCaseDirectory,
+        allowedFileExtensions: ['js', 'ts'],
+        fileExtension: options.js ? 'js' : 'ts',
+        js: options.js,
     });
-    let base = _fileName;
-    if (base.startsWith('use-')) {
-        base = base.substring(4);
-    }
-    else if (base.startsWith('use')) {
-        base = base.substring(3);
-    }
-    const { className, fileName } = (0, devkit_1.names)(base);
-    // If using `as-provided` file and directory, then don't normalize.
-    // Otherwise, support legacy behavior of prefixing filename with `use-`.
-    const hookFilename = nameAndDirectoryFormat === 'as-provided'
-        ? fileName
-        : options.pascalCaseFiles
-            ? 'use'.concat(className)
-            : 'use-'.concat(fileName);
-    const hookName = 'use'.concat(className);
-    const hookTypeName = 'Use'.concat(className);
+    const { className } = (0, devkit_1.names)(hookFilename);
+    // if name is provided, use it as is for the hook name, otherwise prepend
+    // `use` to the pascal-cased file name if it doesn't already start with `use`
+    const hookName = options.name
+        ? artifactName
+        : className.toLocaleLowerCase().startsWith('use')
+            ? className
+            : `use${className}`;
+    const hookTypeName = (0, devkit_1.names)(hookName).className;
     const project = (0, devkit_1.getProjects)(host).get(projectName);
-    const { sourceRoot: projectSourceRoot, projectType } = project;
-    if (options.export && projectType === 'application') {
+    const { root, sourceRoot: projectSourceRoot, projectType } = project;
+    if (options.export &&
+        (0, ts_solution_setup_1.getProjectType)(host, root, projectType) === 'application') {
         devkit_1.logger.warn(`The "--export" option should not be used with applications and will do nothing.`);
     }
-    // Support legacy behavior of derived directory to prefix with `use-`.
-    let directory = _directory;
-    if (nameAndDirectoryFormat === 'derived') {
-        const parts = directory.split('/');
-        parts.pop();
-        if (!options.flat) {
-            parts.push(options.pascalCaseDirectory
-                ? 'use'.concat(className)
-                : 'use-'.concat(fileName));
-        }
-        directory = parts.join('/');
-    }
     return {
         ...options,
         directory,
         hookName,
         hookTypeName,
         fileName: hookFilename,
+        fileExtension,
+        fileExtensionType,
         projectSourceRoot,
         projectName,
     };
 }
-function assertValidOptions(options) {
-    const slashes = ['/', '\\'];
-    slashes.forEach((s) => {
-        if (options.name.indexOf(s) !== -1) {
-            const [name, ...rest] = options.name.split(s).reverse();
-            let suggestion = rest.map((x) => x.toLowerCase()).join(s);
-            if (options.directory) {
-                suggestion = `${options.directory}${s}${suggestion}`;
-            }
-            throw new Error(`Found "${s}" in the hook name. Did you mean to use the --directory option (e.g. \`nx g c ${name} --directory ${suggestion}\`)?`);
-        }
-    });
-}
 exports.default = hookGenerator;

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

@@ -1,24 +1,11 @@
 export interface Schema {
-  name: string;
-  /**
-   * @deprecated Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v20.
-   */
-  project: string;
+  path: string;
+  name?: string;
   skipTests?: boolean;
-  directory?: string;
   export?: boolean;
+
   /**
-   * @deprecated Provide the `name` option instead and use the `as-provided` format. This option will be removed in Nx v19.
-   */
-  pascalCaseFiles?: boolean;
-  /**
-   * @deprecated Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v19.
-   */
-  pascalCaseDirectory?: boolean;
-  /**
-   * @deprecated Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v19.
+   * @deprecated Provide the full file path including the file extension in the `path` option. This option will be removed in Nx v21.
    */
-  flat?: boolean;
   js?: boolean;
-  nameAndDirectoryFormat?: 'as-provided' | 'derived';
 }

package/src/generators/hook/schema.json

@@ -7,34 +7,37 @@
   "type": "object",
   "examples": [
     {
-      "command": "nx g hook my-hook --project=mylib",
-      "description": "Generate a hook in the `mylib` library"
+      "description": "Generate a hook with the exported symbol matching the file name. It results in the hook `useFoo` at `mylib/src/lib/foo.ts`",
+      "command": "nx g @nx/react:hook mylib/src/lib/foo.ts"
+    },
+    {
+      "description": "Generate a hook with the exported symbol different from the file name. It results in the hook `useCustom` at `mylib/src/lib/foo.ts`",
+      "command": "nx g @nx/react:hook mylib/src/lib/foo.ts --name=useCustom"
+    },
+    {
+      "description": "Generate a hook without providing the file extension. It results in the hook `useFoo` at `mylib/src/lib/foo.ts`",
+      "command": "nx g @nx/react:hook mylib/src/lib/foo"
     }
   ],
   "properties": {
-    "project": {
+    "path": {
       "type": "string",
-      "description": "The name of the project.",
-      "alias": "p",
-      "$default": {
-        "$source": "projectName"
-      },
-      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v20."
-    },
-    "name": {
-      "type": "string",
-      "description": "The name of the hook.",
+      "description": "The file path to the hook. Relative to the current working directory.",
       "$default": {
         "$source": "argv",
         "index": 0
       },
-      "x-prompt": "What name would you like to use for the hook?",
+      "x-prompt": "What is the hook file path?",
       "x-priority": "important"
     },
+    "name": {
+      "type": "string",
+      "description": "The hook symbol name. Defaults to the last segment of the file path."
+    },
     "js": {
       "type": "boolean",
       "description": "Generate JavaScript files rather than TypeScript files.",
-      "default": false
+      "x-deprecated": "Provide the full file path including the file extension in the `path` option. This option will be removed in Nx v21."
     },
     "skipTests": {
       "type": "boolean",
@@ -42,43 +45,13 @@
       "default": false,
       "x-priority": "internal"
     },
-    "directory": {
-      "type": "string",
-      "description": "The directory at which to create the hook file. When `--nameAndDirectoryFormat=as-provided`, it will be relative to the current working directory. Otherwise, it will be relative to the project root.",
-      "x-priority": "important"
-    },
-    "nameAndDirectoryFormat": {
-      "description": "Whether to generate the component in the directory as provided, relative to the current working directory and ignoring the project (`as-provided`) or generate it using the project and directory relative to the workspace root (`derived`).",
-      "type": "string",
-      "enum": ["as-provided", "derived"]
-    },
-    "flat": {
-      "type": "boolean",
-      "description": "Create hook at the source root rather than its own directory.",
-      "default": false,
-      "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. It will be removed in Nx v20."
-    },
     "export": {
       "type": "boolean",
       "description": "When true, the hook is exported from the project `index.ts` (if it exists).",
       "alias": "e",
       "default": false,
       "x-prompt": "Should this hook be exported in the project?"
-    },
-    "pascalCaseFiles": {
-      "type": "boolean",
-      "description": "Use pascal case hook file name (e.g. `useHook.ts`).",
-      "alias": "P",
-      "default": false,
-      "x-deprecated": "Provide the `name` in pascal-case and use the `as-provided` format. This option will be removed in Nx v19."
-    },
-    "pascalCaseDirectory": {
-      "type": "boolean",
-      "description": "Use pascal case directory name (e.g. `useHook/useHook.ts`).",
-      "alias": "R",
-      "default": false,
-      "x-deprecated": "Provide the `directory` in pascal-case and use the `as-provided` format. This option will be removed in Nx v19."
     }
   },
-  "required": ["name"]
+  "required": ["path"]
 }

package/src/generators/host/files/common/src/app/__fileName__.js__tmpl__

@@ -1,31 +1,38 @@
 import * as React from 'react';
-<% if (!minimal) { %>
+<%_ if (!minimal) { _%>
 import NxWelcome from "./nx-welcome";
-<% } %>
+<%_ } _%>
 import { Link, Route, Routes } from 'react-router-dom';
+<%_ if (dynamic) { _%>
+import { loadRemote } from '@module-federation/enhanced/runtime';
+<%_ } _%>
 
-<% if (remotes.length > 0) { %>
-<% remotes.forEach(function(r) { %>
- const <%= r.className %> = React.lazy(() => import('<%= r.fileName %>/Module'));
- <% }); %>
-<% } %>
+<%_ if (remotes.length > 0) {
+ remotes.forEach(function(r) { _%>
+<%_ if (dynamic) { _%>
+const <%= r.className %> = React.lazy(() => loadRemote('<%= r.fileName %>/Module') as any)
+<%_ } else  { _%>
+const <%= r.className %> = React.lazy(() => import('<%= r.fileName %>/Module'));
+<%_ } _%>
+ <%_ }); _%>
+<%_ } _%>
 export function App() {
   return (
     <React.Suspense fallback={null}>
-     <ul>
-       <li><Link to="/">Home</Link></li>
-       <% remotes.forEach(function(r) { %>
-         <li><Link to="/<%=r.fileName%>"><%=r.className%></Link></li>
-       <% }); %>
-     </ul>
-     <Routes>
-       <% if (!minimal) { %>
-       <Route path="/" element={<NxWelcome title="<%= projectName %>"/>} />
-       <% } %>
-       <% remotes.forEach(function(r) { %>
-         <Route path="/<%=r.fileName%>" element={<<%= r.className %>/>} />
-       <% }); %>
-     </Routes>
+      <ul>
+        <li><Link to="/">Home</Link></li>
+       <%_ remotes.forEach(function(r) { _%>
+        <li><Link to="/<%=r.fileName%>"><%=r.className%></Link></li>
+       <%_ }); _%>
+      </ul>
+      <Routes>
+       <%_ if (!minimal) { _%>
+        <Route path="/" element={<NxWelcome title="<%= projectName %>"/>} />
+       <%_ } _%>
+       <%_ remotes.forEach(function(r) { _%>
+        <Route path="/<%=r.fileName%>" element={<<%= r.className %>/>} />
+       <%_ }); _%>
+      </Routes>
     </React.Suspense>
   );
 }

package/src/generators/host/files/common/src/main.js__tmpl__

@@ -1,10 +1,13 @@
-<% if (dynamic) { %>
-    import { setRemoteDefinitions } from '@nx/react/mf';
+<%_ if (dynamic) { _%>
+import { init } from '@module-federation/enhanced/runtime';
 
-    fetch('/assets/module-federation.manifest.json')
-    .then((res) => res.json())
-    .then(definitions => setRemoteDefinitions(definitions))
-    .then(() =>  import('./bootstrap').catch(err => console.error(err)));
-<% } else { %>
-    import('./bootstrap').catch(err => console.error(err));
-<% } %>
+fetch('/assets/module-federation.manifest.json')
+.then((res) => res.json())
+.then((remotes: Record<string, string>) =>
+    Object.entries(remotes).map(([name, entry]) => ({ name, entry }))
+)
+.then((remotes) => init({ name: '<%= projectName %>', remotes }))
+.then(() =>  import('./bootstrap').catch(err => console.error(err)));
+<%_ } else { _%>
+import('./bootstrap').catch(err => console.error(err));
+<%_ } _%>

package/src/generators/host/files/common-ts/src/app/__fileName__.tsx__tmpl__

@@ -1,39 +1,39 @@
 import * as React from 'react';
-<% if (!minimal) { %>
+<%_ if (!minimal) { _%>
 import NxWelcome from "./nx-welcome";
-<% } %>
+<%_ } _%>
 import { Link, Route, Routes } from 'react-router-dom';
-<% if (dynamic) { %>
-import { loadRemoteModule } from '@nx/react/mf';
-<% } %>
+<%_ if (dynamic) { _%>
+import { loadRemote } from '@module-federation/enhanced/runtime';
+<%_ } _%>
 
-<% if (remotes.length > 0) { %>
-<% remotes.forEach(function(r) { %>
-<% if (dynamic) { %>
- const <%= r.className %> = React.lazy(() => loadRemoteModule('<%= r.fileName %>', './Module'))
-<% } else  { %>
- const <%= r.className %> = React.lazy(() => import('<%= r.fileName %>/Module'));
-<% } %>
- <% }); %>
-<% } %>
+<%_ if (remotes.length > 0) {
+ remotes.forEach(function(r) { _%>
+<%_ if (dynamic) { _%>
+const <%= r.className %> = React.lazy(() => loadRemote('<%= r.fileName %>/Module') as any)
+<%_ } else  { _%>
+const <%= r.className %> = React.lazy(() => import('<%= r.fileName %>/Module'));
+<%_ } _%>
+ <%_ }); _%>
+<%_ } _%>
 
 export function App() {
   return (
     <React.Suspense fallback={null}>
-     <ul>
-       <li><Link to="/">Home</Link></li>
-       <% remotes.forEach(function(r) { %>
-         <li><Link to="/<%=r.fileName%>"><%=r.className%></Link></li>
-       <% }); %>
-     </ul>
-     <Routes>
-       <% if (!minimal) { %>
-       <Route path="/" element={<NxWelcome title="<%= projectName %>"/>} />
-       <% } %>
-       <% remotes.forEach(function(r) { %>
-         <Route path="/<%=r.fileName%>" element={<<%= r.className %>/>} />
-       <% }); %>
-     </Routes>
+      <ul>
+        <li><Link to="/">Home</Link></li>
+       <%_ remotes.forEach(function(r) { _%>
+        <li><Link to="/<%=r.fileName%>"><%=r.className%></Link></li>
+       <%_ }); _%>
+      </ul>
+      <Routes>
+       <%_ if (!minimal) { _%>
+        <Route path="/" element={<NxWelcome title="<%= projectName %>"/>} />
+       <%_ } _%>
+       <%_ remotes.forEach(function(r) { _%>
+        <Route path="/<%=r.fileName%>" element={<<%= r.className %>/>} />
+       <%_ }); _%>
+      </Routes>
     </React.Suspense>
   );
 }

package/src/generators/host/files/common-ts/src/main.ts__tmpl__

@@ -1,10 +1,13 @@
-<% if (dynamic) { %>
-    import { setRemoteDefinitions } from '@nx/react/mf';
+<%_ if (dynamic) { _%>
+import { init } from '@module-federation/enhanced/runtime';
 
-    fetch('/assets/module-federation.manifest.json')
-    .then((res) => res.json())
-    .then(definitions => setRemoteDefinitions(definitions))
-    .then(() =>  import('./bootstrap').catch(err => console.error(err)));
-<% } else { %>
-    import('./bootstrap').catch(err => console.error(err));
-<% } %>
+fetch('/assets/module-federation.manifest.json')
+.then((res) => res.json())
+.then((remotes: Record<string, string>) =>
+    Object.entries(remotes).map(([name, entry]) => ({ name, entry }))
+)
+.then((remotes) => init({ name: '<%= projectName %>', remotes }))
+.then(() =>  import('./bootstrap').catch(err => console.error(err)));
+<%_ } else { _%>
+import('./bootstrap').catch(err => console.error(err));
+<%_ } _%>

package/src/generators/host/files/rspack-common/src/app/__fileName__.jsx__tmpl__

@@ -1,30 +1,39 @@
 import * as React from 'react';
-<% if (!minimal) { %>
+<%_ if (!minimal) { _%>
 import NxWelcome from "./nx-welcome";
-<% } %>
+<%_ } _%>
 import { Link, Route, Routes } from 'react-router-dom';
 
-<% if (remotes.length > 0) { %>
-<% remotes.forEach(function(r) { %>
- const <%= r.className %> = React.lazy(() => import('<%= r.fileName %>/Module'));
- <% }); %>
-<% } %>
+<%_ if (dynamic) { _%>
+import { loadRemote } from '@module-federation/enhanced/runtime';
+<%_ } _%>
+
+<%_ if (remotes.length > 0) {
+ remotes.forEach(function(r) { _%>
+<%_ if (dynamic) { _%>
+const <%= r.className %> = React.lazy(() => loadRemote('<%= r.fileName %>/Module') as any)
+<%_ } else  { _%>
+const <%= r.className %> = React.lazy(() => import('<%= r.fileName %>/Module'));
+<%_ } _%>
+ <%_ }); _%>
+<%_ } _%>
+
 export function App() {
   return (
     <React.Suspense fallback={null}>
      <ul>
        <li><Link to="/">Home</Link></li>
-       <% remotes.forEach(function(r) { %>
+       <%_ remotes.forEach(function(r) { _%>
          <li><Link to="/<%=r.fileName%>"><%=r.className%></Link></li>
-       <% }); %>
+       <%_ }); _%>
      </ul>
      <Routes>
-       <% if (!minimal) { %>
+       <%_ if (!minimal) { _%>
        <Route path="/" element={<NxWelcome title="<%= projectName %>"/>} />
-       <% } %>
-       <% remotes.forEach(function(r) { %>
+       <%_ } _%>
+       <%_ remotes.forEach(function(r) { _%>
          <Route path="/<%=r.fileName%>" element={<<%= r.className %>/>} />
-       <% }); %>
+       <%_ }); _%>
      </Routes>
     </React.Suspense>
   );

package/src/generators/host/files/rspack-common/src/main.jsx__tmpl__

@@ -1,10 +1,13 @@
-<% if (dynamic) { %>
-    import { setRemoteDefinitions } from '@nx/react/mf';
+<%_ if (dynamic) { _%>
+import { init } from '@module-federation/enhanced/runtime';
 
-    fetch('/assets/module-federation.manifest.json')
-    .then((res) => res.json())
-    .then(definitions => setRemoteDefinitions(definitions))
-    .then(() =>  import('./bootstrap').catch(err => console.error(err)));
-<% } else { %>
-    import('./bootstrap').catch(err => console.error(err));
-<% } %>
+fetch('/assets/module-federation.manifest.json')
+.then((res) => res.json())
+.then((remotes: Record<string, string>) =>
+    Object.entries(remotes).map(([name, entry]) => ({ name, entry }))
+)
+.then((remotes) => init({ name: '<%= projectName %>', remotes }))
+.then(() =>  import('./bootstrap').catch(err => console.error(err)));
+<%_ } else { _%>
+import('./bootstrap').catch(err => console.error(err));
+<%_ } _%>

package/src/generators/host/files/rspack-module-federation/module-federation.config.js__tmpl__

@@ -1,3 +1,6 @@
+/**
+* Nx requires a default export of the config to allow correct resolution of the module federation graph.
+**/
 module.exports = {
   name: '<%= projectName %>',
   /**
@@ -13,9 +16,9 @@ module.exports = {
    *
    */
   remotes: [
-    <% if (static) { 
-         remotes.forEach(function(r) { %> "<%= r.fileName %>", <% }); 
-       }
-    %>
+    <%_ if (static) { 
+      remotes.forEach(function(r) { %> 
+    "<%= r.fileName %>", 
+      <%_ }); } _%>
   ],
-};
+};

package/src/generators/host/files/rspack-module-federation/rspack.config.js__tmpl__

@@ -1,16 +1,40 @@
-const { composePlugins, withNx, withReact } = require('@nx/rspack');
-const { withModuleFederation } = require('@nx/rspack/module-federation');
+const { NxAppRspackPlugin } = require('@nx/rspack/app-plugin');
+const { NxReactRspackPlugin } = require('@nx/rspack/react-plugin');
+const { NxModuleFederationPlugin, NxModuleFederationDevServerPlugin } = require('@nx/module-federation/rspack');
+const { join } = require('path');
 
-const baseConfig = require('./module-federation.config');
+const config = require('./module-federation.config');
 
-const config = {
-  ...baseConfig,
+module.exports = {
+  output: {
+    path: join(__dirname, '<%= rspackPluginOptions.outputPath %>'),
+    publicPath: 'auto'
+  },
+  devServer: {
+    port: <%= devServerPort %>,
+    historyApiFallback: {
+      index: '/index.html',
+      disableDotRule: true,
+      htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'],
+    },
+  },
+  plugins: [
+    new NxAppRspackPlugin({
+      tsConfig: '<%= rspackPluginOptions.tsConfig %>',
+      main: '<%= rspackPluginOptions.main %>',
+      index: '<%= rspackPluginOptions.index %>',
+      baseHref: '<%= rspackPluginOptions.baseHref %>',
+      assets: <%- JSON.stringify(rspackPluginOptions.assets) %>,
+      styles: <%- JSON.stringify(rspackPluginOptions.styles) %>,
+      outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none',
+      optimization: process.env['NODE_ENV'] === 'production',
+    }),
+    new NxReactRspackPlugin({
+      // Uncomment this line if you don't want to use SVGR
+      // See: https://react-svgr.com/
+      // svgr: false
+    }),
+    new NxModuleFederationPlugin({ config }, { dts: false }),
+    new NxModuleFederationDevServerPlugin({ config }),
+  ],
 };
-
-// Nx plugins for rspack to build config object from Nx options and context.
-/**
- * DTS Plugin is disabled in Nx Workspaces as Nx already provides Typing support for Module Federation
- * The DTS Plugin can be enabled by setting dts: true
- * Learn more about the DTS Plugin here: https://module-federation.io/configure/dts.html
- */
-module.exports = composePlugins(withNx(), withReact(), withModuleFederation(config, { dts: false }));