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

package/src/generators/federate-module/schema.json

@@ -0,0 +1,83 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "cli": "nx",
+  "$id": "NxReactFederateModule",
+  "title": "Federate Module",
+  "description": "Create a federated module, which can be loaded by a remote host.",
+  "examples": [
+    {
+      "command": "nx g federate-module MyModule --path=./src/component/my-cmp.ts --remote=my-remote-app --remoteDirectory=apps/my-remote-app",
+      "description": "Create a federated module from my-remote-app, that exposes my-cmp from ./src/component/my-cmp.ts as MyModule."
+    }
+  ],
+  "type": "object",
+  "properties": {
+    "path": {
+      "type": "string",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "description": "The path to locate the federated module. This path should be relative to the workspace root and the file should exist.",
+      "x-prompt": "What is the path to the module to be federated?"
+    },
+    "name": {
+      "description": "The name of the module.",
+      "type": "string",
+      "x-prompt": "What name would you like to use for the module?",
+      "pattern": "^[a-zA-Z][^:]*$",
+      "x-priority": "important"
+    },
+    "remote": {
+      "type": "string",
+      "description": "The name of the remote.",
+      "x-prompt": "What is/should the remote be named?"
+    },
+    "remoteDirectory": {
+      "description": "The directory of the new remote application if one needs to be created.",
+      "type": "string"
+    },
+    "projectNameAndRootFormat": {
+      "description": "Whether to generate the project name and root directory as provided (`as-provided`) or generate them composing their values and taking the configured layout into account (`derived`).",
+      "type": "string",
+      "enum": ["as-provided", "derived"]
+    },
+    "style": {
+      "description": "The file extension to be used for style files.",
+      "type": "string",
+      "default": "none",
+      "alias": "s"
+    },
+    "linter": {
+      "description": "The tool to use for running lint checks.",
+      "type": "string",
+      "enum": ["eslint"],
+      "default": "eslint"
+    },
+    "skipFormat": {
+      "description": "Skip formatting files.",
+      "type": "boolean",
+      "default": false,
+      "x-priority": "internal"
+    },
+    "unitTestRunner": {
+      "type": "string",
+      "enum": ["jest", "none"],
+      "description": "Test runner to use for unit tests.",
+      "default": "jest"
+    },
+    "e2eTestRunner": {
+      "type": "string",
+      "enum": ["cypress", "playwright", "none"],
+      "description": "Test runner to use for end to end (E2E) tests.",
+      "x-prompt": "Which E2E test runner would you like to use?",
+      "default": "cypress"
+    },
+    "host": {
+      "type": "string",
+      "description": "The host / shell application for this remote."
+    }
+  },
+  "required": ["name", "path", "remote"],
+  "additionalProperties": false
+}

package/src/generators/hook/files/__fileName__.spec.tsx__tmpl__

@@ -0,0 +1,18 @@
+import { act, renderHook } from '@testing-library/react';
+import * as React from 'react';
+
+import <%= hookName %> from './<%= fileName %>';
+
+describe('<%= hookName %>', () => {
+  it('should render successfully', () => {
+    const { result } = renderHook(() => <%= hookName %>());
+
+    expect(result.current.count).toBe(0);
+
+    act(() => {
+      result.current.increment()
+    });
+
+    expect(result.current.count).toBe(1);
+  });
+});

package/src/generators/hook/files/__fileName__.ts__tmpl__

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

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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,131 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hookGeneratorInternal = exports.hookGenerator = void 0;
+// 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 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");
+async function hookGenerator(host, schema) {
+    return hookGeneratorInternal(host, {
+        nameAndDirectoryFormat: 'derived',
+        ...schema,
+    });
+}
+exports.hookGenerator = hookGenerator;
+async function hookGeneratorInternal(host, schema) {
+    const options = await normalizeOptions(host, schema);
+    createFiles(host, options);
+    addExportsToBarrel(host, options);
+    return await (0, devkit_1.formatFiles)(host);
+}
+exports.hookGeneratorInternal = hookGeneratorInternal;
+function createFiles(host, options) {
+    (0, devkit_1.generateFiles)(host, (0, path_1.join)(__dirname, './files'), options.directory, {
+        ...options,
+        tmpl: '',
+    });
+    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);
+    }
+}
+let tsModule;
+function addExportsToBarrel(host, options) {
+    if (!tsModule) {
+        tsModule = (0, ensure_typescript_1.ensureTypescript)();
+    }
+    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);
+        }
+    }
+}
+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',
+        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,
+    });
+    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 project = (0, devkit_1.getProjects)(host).get(projectName);
+    const { sourceRoot: projectSourceRoot, projectType } = project;
+    if (options.export && 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,
+        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

@@ -0,0 +1,24 @@
+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 v19.
+   */
+  project: 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.
+   */
+  flat?: boolean;
+  js?: boolean;
+  nameAndDirectoryFormat?: 'as-provided' | 'derived';
+}

package/src/generators/hook/schema.json

@@ -0,0 +1,84 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "cli": "nx",
+  "$id": "NxReactHook",
+  "title": "Create a React Hook for Nx",
+  "description": "Create a React component using Hooks in a dedicated React project.",
+  "type": "object",
+  "examples": [
+    {
+      "command": "nx g hook my-hook --project=mylib",
+      "description": "Generate a hook in the `mylib` library"
+    }
+  ],
+  "properties": {
+    "project": {
+      "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 v19."
+    },
+    "name": {
+      "type": "string",
+      "description": "The name of the hook.",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "What name would you like to use for the hook?",
+      "x-priority": "important"
+    },
+    "js": {
+      "type": "boolean",
+      "description": "Generate JavaScript files rather than TypeScript files.",
+      "default": false
+    },
+    "skipTests": {
+      "type": "boolean",
+      "description": "When true, does not create `spec.ts` test files for the new hook.",
+      "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 v19."
+    },
+    "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"]
+}

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

@@ -0,0 +1,33 @@
+import * as React from 'react';
+<% 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'));
+ <% }); %>
+<% } %>
+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>
+    </React.Suspense>
+  );
+}
+
+export default App;

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

@@ -0,0 +1,10 @@
+<% if (dynamic) { %>
+    import { setRemoteDefinitions } from '@nx/react/mf';
+
+    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));
+<% } %>

package/src/generators/host/files/common/tsconfig.lint.json__tmpl__

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+        "node",
+        "@nx/react/typings/cssmodule.d.ts",
+        "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "include": [
+    "src/**/*.js",
+    "src/**/*.jsx",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "webpack.config.ts",
+    "webpack.prod.config.ts"
+  ]
+}

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

@@ -0,0 +1,41 @@
+import * as React from 'react';
+<% if (!minimal) { %>
+import NxWelcome from "./nx-welcome";
+<% } %>
+import { Link, Route, Routes } from 'react-router-dom';
+<% if (dynamic) { %>
+import { loadRemoteModule } from '@nx/react/mf';
+<% } %>
+
+<% 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'));
+<% } %>
+ <% }); %>
+<% } %>
+
+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>
+    </React.Suspense>
+  );
+}
+
+export default App;

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

@@ -0,0 +1,10 @@
+<% if (dynamic) { %>
+    import { setRemoteDefinitions } from '@nx/react/mf';
+
+    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));
+<% } %>

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

@@ -0,0 +1,21 @@
+module.exports = {
+  name: '<%= projectName %>',
+  /**
+   * To use a remote that does not exist in your current Nx Workspace
+   * You can use the tuple-syntax to define your remote
+   *
+   * remotes: [['my-external-remote', 'https://nx-angular-remote.netlify.app']]
+   *
+   * You _may_ need to add a `remotes.d.ts` file to your `src/` folder declaring the external remote for tsc, with the
+   * following content:
+   *
+   * declare module 'my-external-remote';
+   *
+   */
+  remotes: [
+    <% if (static) { 
+         remotes.forEach(function(r) { %> "<%= r.fileName %>", <% }); 
+       }
+    %>
+  ],
+};

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

@@ -0,0 +1,12 @@
+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));

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

@@ -0,0 +1,32 @@
+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 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.
+module.exports = composePlugins(withNx(), withReact(), withModuleFederation(prodConfig));

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

@@ -0,0 +1,16 @@
+// @ts-check
+
+/**
+ * @type {import('@nx/webpack').ModuleFederationConfig}
+ **/
+const moduleFederationConfig = {
+    name: '<%= projectName %>',
+    remotes: [
+       <% if (static) { 
+         remotes.forEach(function(r) { %> "<%= r.fileName %>", <% }); 
+       }
+    %>
+  ],
+};
+
+module.exports = moduleFederationConfig;

package/src/generators/host/files/module-federation-ssr/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/tsconfig.server.json__tmpl__

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

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

@@ -0,0 +1,12 @@
+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));

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

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