@nx/react 16.0.0-beta.1

package/src/generators/component-test/schema.json

@@ -0,0 +1,31 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "cli": "nx",
+  "$id": "NxReactCypressComponentTest",
+  "title": "Add Cypress component test",
+  "description": "Add a Cypress component test for a component.",
+  "type": "object",
+  "examples": [
+    {
+      "command": "nx g @nrwl/react:component-test --project=my-react-project --component-path=src/lib/fancy-component.tsx",
+      "description": "Create a cypress component test for FancyComponent"
+    }
+  ],
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The name of the project the component is apart of",
+      "x-dropdown": "projects",
+      "x-prompt": "What project is this component apart of?",
+      "x-priority": "important"
+    },
+    "componentPath": {
+      "type": "string",
+      "description": "Path to component, from the project source root",
+      "x-prompt": "What is the path to the component?",
+      "x-priority": "important"
+    }
+  },
+  "required": ["project", "componentPath"],
+  "examplesFile": "../../../docs/component-test-examples.md"
+}

package/src/generators/cypress-component-configuration/cypress-component-configuration.d.ts

@@ -0,0 +1,9 @@
+import { Tree } from '@nx/devkit';
+import { CypressComponentConfigurationSchema } from './schema.d';
+/**
+ * This is for using cypresses own Component testing, if you want to use test
+ * storybook components then use componentCypressGenerator instead.
+ *
+ */
+export declare function cypressComponentConfigGenerator(tree: Tree, options: CypressComponentConfigurationSchema): Promise<() => void>;
+export default cypressComponentConfigGenerator;

package/src/generators/cypress-component-configuration/cypress-component-configuration.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cypressComponentConfigGenerator = void 0;
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
+const versions_1 = require("../../utils/versions");
+const add_files_1 = require("./lib/add-files");
+const update_configs_1 = require("./lib/update-configs");
+/**
+ * This is for using cypresses own Component testing, if you want to use test
+ * storybook components then use componentCypressGenerator instead.
+ *
+ */
+function cypressComponentConfigGenerator(tree, options) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const { cypressComponentProject } = (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
+        const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.project);
+        const installTask = yield cypressComponentProject(tree, {
+            project: options.project,
+            skipFormat: true,
+        });
+        const found = yield (0, update_configs_1.updateProjectConfig)(tree, options);
+        yield (0, add_files_1.addFiles)(tree, projectConfig, options, found);
+        if (options.skipFormat) {
+            yield (0, devkit_1.formatFiles)(tree);
+        }
+        return () => {
+            installTask();
+        };
+    });
+}
+exports.cypressComponentConfigGenerator = cypressComponentConfigGenerator;
+exports.default = cypressComponentConfigGenerator;
+//# sourceMappingURL=cypress-component-configuration.js.map

package/src/generators/cypress-component-configuration/cypress-component-configuration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cypress-component-configuration.js","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/cypress-component-configuration/cypress-component-configuration.ts"],"names":[],"mappings":";;;;AAAA,uCAKoB;AACpB,mDAAiD;AACjD,+CAA2C;AAC3C,yDAAwE;AAGxE;;;;GAIG;AACH,SAAsB,+BAA+B,CACnD,IAAU,EACV,OAA4C;;QAE5C,MAAM,EAAE,uBAAuB,EAAE,GAAG,IAAA,sBAAa,EAAC,aAAa,EAAE,oBAAS,CAAC,CAAC;QAC5E,MAAM,aAAa,GAAG,IAAA,iCAAwB,EAAC,IAAI,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;QACtE,MAAM,WAAW,GAAG,MAAM,uBAAuB,CAAC,IAAI,EAAE;YACtD,OAAO,EAAE,OAAO,CAAC,OAAO;YACxB,UAAU,EAAE,IAAI;SACjB,CAAC,CAAC;QAEH,MAAM,KAAK,GAAgB,MAAM,IAAA,oCAAmB,EAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACpE,MAAM,IAAA,oBAAQ,EAAC,IAAI,EAAE,aAAa,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;QACpD,IAAI,OAAO,CAAC,UAAU,EAAE;YACtB,MAAM,IAAA,oBAAW,EAAC,IAAI,CAAC,CAAC;SACzB;QAED,OAAO,GAAG,EAAE;YACV,WAAW,EAAE,CAAC;QAChB,CAAC,CAAC;IACJ,CAAC;CAAA;AApBD,0EAoBC;AAED,kBAAe,+BAA+B,CAAC"}

package/src/generators/cypress-component-configuration/files/cypress/support/commands.ts__tpl__

@@ -0,0 +1,42 @@
+/// <reference types="cypress" />
+import { mount } from 'cypress/react18'
+
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+
+declare global {
+// eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace Cypress {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    interface Chainable<Subject> {
+      login(email: string, password: string): void;
+      mount: typeof mount;
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount)
+
+//
+// -- This is a parent command --
+Cypress.Commands.add('login', (email, password) => {
+  console.log('Custom command example: Login', email, password);
+});
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

package/src/generators/cypress-component-configuration/files/cypress.config.ts__tpl__

@@ -0,0 +1,8 @@
+import { defineConfig } from 'cypress';
+import { nxComponentTestingPreset } from '@nrwl/react/plugins/component-testing';
+
+export default defineConfig({
+  component: nxComponentTestingPreset(__filename, {
+    bundler: '<%= bundler %>'
+  }),
+});

package/src/generators/cypress-component-configuration/lib/add-files.d.ts

@@ -0,0 +1,4 @@
+import { ProjectConfiguration, Tree } from '@nx/devkit';
+import { CypressComponentConfigurationSchema } from '../schema';
+import { FoundTarget } from './update-configs';
+export declare function addFiles(tree: Tree, projectConfig: ProjectConfiguration, options: CypressComponentConfigurationSchema, found: FoundTarget): Promise<void>;

package/src/generators/cypress-component-configuration/lib/add-files.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addFiles = void 0;
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
+const versions_1 = require("nx/src/utils/versions");
+const ast_utils_1 = require("../../../utils/ast-utils");
+const component_test_1 = require("../../component-test/component-test");
+const ensure_typescript_1 = require("@nx/js/src/utils/typescript/ensure-typescript");
+let tsModule;
+const allowedFileExt = new RegExp(/\.[jt]sx?/g);
+const isSpecFile = new RegExp(/(spec|test)\./g);
+function addFiles(tree, projectConfig, options, found) {
+    var _a;
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const cypressConfigPath = (0, devkit_1.joinPathFragments)(projectConfig.root, 'cypress.config.ts');
+        if (tree.exists(cypressConfigPath)) {
+            tree.delete(cypressConfigPath);
+        }
+        const actualBundler = yield getBundler(found, tree);
+        if (options.bundler && options.bundler !== actualBundler) {
+            devkit_1.logger.warn(`You have specified ${options.bundler} as the bundler but this project is configured to use ${actualBundler}.
+      This may cause errors. If you are seeing errors, try removing the --bundler option.`);
+        }
+        (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, '..', 'files'), projectConfig.root, {
+            tpl: '',
+            bundler: (_a = options.bundler) !== null && _a !== void 0 ? _a : actualBundler,
+        });
+        if (options.bundler === 'webpack' ||
+            (!options.bundler && actualBundler === 'webpack')) {
+            (0, devkit_1.addDependenciesToPackageJson)(tree, {}, { '@nrwl/webpack': versions_1.nxVersion });
+        }
+        if (options.generateTests) {
+            const filePaths = [];
+            (0, devkit_1.visitNotIgnoredFiles)(tree, projectConfig.sourceRoot, (filePath) => {
+                if (isComponent(tree, filePath)) {
+                    filePaths.push(filePath);
+                }
+            });
+            for (const filePath of filePaths) {
+                yield (0, component_test_1.componentTestGenerator)(tree, {
+                    project: options.project,
+                    componentPath: filePath,
+                });
+            }
+        }
+    });
+}
+exports.addFiles = addFiles;
+function getBundler(found, tree) {
+    var _a, _b, _c;
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        if (found.target && ((_a = found.config) === null || _a === void 0 ? void 0 : _a.executor)) {
+            return found.config.executor === '@nrwl/vite:build' ? 'vite' : 'webpack';
+        }
+        const { target, project } = (0, devkit_1.parseTargetString)(found.target, yield (0, devkit_1.createProjectGraphAsync)());
+        const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, project);
+        return ((_c = (_b = projectConfig === null || projectConfig === void 0 ? void 0 : projectConfig.targets) === null || _b === void 0 ? void 0 : _b[target]) === null || _c === void 0 ? void 0 : _c.executor) === '@nrwl/vite:build'
+            ? 'vite'
+            : 'webpack';
+    });
+}
+function isComponent(tree, filePath) {
+    if (!tsModule) {
+        tsModule = (0, ensure_typescript_1.ensureTypescript)();
+    }
+    if (isSpecFile.test(filePath) || !allowedFileExt.test(filePath)) {
+        return false;
+    }
+    const content = tree.read(filePath, 'utf-8');
+    const sourceFile = tsModule.createSourceFile(filePath, content, tsModule.ScriptTarget.Latest, true);
+    const cmpDeclaration = (0, ast_utils_1.getComponentNode)(sourceFile);
+    return !!cmpDeclaration;
+}
+//# sourceMappingURL=add-files.js.map

package/src/generators/cypress-component-configuration/lib/add-files.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-files.js","sourceRoot":"","sources":["../../../../../../../packages/react/src/generators/cypress-component-configuration/lib/add-files.ts"],"names":[],"mappings":"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"}

package/src/generators/cypress-component-configuration/lib/update-configs.d.ts

@@ -0,0 +1,7 @@
+import { TargetConfiguration, Tree } from '@nx/devkit';
+import { CypressComponentConfigurationSchema } from '../schema';
+export interface FoundTarget {
+    config?: TargetConfiguration;
+    target: string;
+}
+export declare function updateProjectConfig(tree: Tree, options: CypressComponentConfigurationSchema): Promise<FoundTarget>;

package/src/generators/cypress-component-configuration/lib/update-configs.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateProjectConfig = void 0;
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
+function updateProjectConfig(tree, options) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const { findBuildConfig } = yield Promise.resolve().then(() => require('@nx/cypress/src/utils/find-target-options'));
+        const found = yield findBuildConfig(tree, {
+            project: options.project,
+            buildTarget: options.buildTarget,
+            validExecutorNames: new Set([
+                '@nrwl/webpack:webpack',
+                '@nrwl/vite:build',
+            ]),
+        });
+        assetValidConfig(found === null || found === void 0 ? void 0 : found.config);
+        const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.project);
+        projectConfig.targets['component-test'].options = Object.assign(Object.assign({}, projectConfig.targets['component-test'].options), { devServerTarget: found.target, skipServe: true });
+        (0, devkit_1.updateProjectConfiguration)(tree, options.project, projectConfig);
+        return found;
+    });
+}
+exports.updateProjectConfig = updateProjectConfig;
+function assetValidConfig(config) {
+    if (!config) {
+        throw new Error('Unable to find a valid build configuration. Try passing in a target for a React app. --build-target=<project>:<target>[:<configuration>]');
+    }
+}
+//# sourceMappingURL=update-configs.js.map

package/src/generators/cypress-component-configuration/lib/update-configs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"update-configs.js","sourceRoot":"","sources":["../../../../../../../packages/react/src/generators/cypress-component-configuration/lib/update-configs.ts"],"names":[],"mappings":";;;;AAAA,uCAKoB;AAQpB,SAAsB,mBAAmB,CACvC,IAAU,EACV,OAA4C;;QAE5C,MAAM,EAAE,eAAe,EAAE,GAAG,2CAC1B,2CAA2C,EAC5C,CAAC;QACF,MAAM,KAAK,GAAG,MAAM,eAAe,CAAC,IAAI,EAAE;YACxC,OAAO,EAAE,OAAO,CAAC,OAAO;YACxB,WAAW,EAAE,OAAO,CAAC,WAAW;YAChC,kBAAkB,EAAE,IAAI,GAAG,CAAS;gBAClC,uBAAuB;gBACvB,kBAAkB;aACnB,CAAC;SACH,CAAC,CAAC;QAEH,gBAAgB,CAAC,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAC,CAAC;QAEhC,MAAM,aAAa,GAAG,IAAA,iCAAwB,EAAC,IAAI,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;QACtE,aAAa,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,OAAO,mCAC1C,aAAa,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,OAAO,KAClD,eAAe,EAAE,KAAK,CAAC,MAAM,EAC7B,SAAS,EAAE,IAAI,GAChB,CAAC;QACF,IAAA,mCAA0B,EAAC,IAAI,EAAE,OAAO,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;QAEjE,OAAO,KAAK,CAAC;IACf,CAAC;CAAA;AA3BD,kDA2BC;AAED,SAAS,gBAAgB,CAAC,MAAe;IACvC,IAAI,CAAC,MAAM,EAAE;QACX,MAAM,IAAI,KAAK,CACb,0IAA0I,CAC3I,CAAC;KACH;AACH,CAAC"}

package/src/generators/cypress-component-configuration/schema.d.ts

@@ -0,0 +1,7 @@
+export interface CypressComponentConfigurationSchema {
+  project: string;
+  generateTests: boolean;
+  skipFormat?: boolean;
+  buildTarget?: string;
+  bundler?: 'webpack' | 'vite';
+}

package/src/generators/cypress-component-configuration/schema.json

@@ -0,0 +1,54 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "cli": "nx",
+  "$id": "NxReactCypressComponentTestConfiguration",
+  "title": "Add Cypress component testing",
+  "description": "Add a Cypress component testing configuration to an existing project.",
+  "type": "object",
+  "examples": [
+    {
+      "command": "nx g @nrwl/react:cypress-component-configuration --project=my-react-project",
+      "description": "Add component testing to your react project"
+    },
+    {
+      "command": "nx g @nrwl/react:cypress-component-configuration --project=my-react-project --generate-tests",
+      "description": "Add component testing to your react project and generate component tests for your existing components"
+    }
+  ],
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The name of the project to add cypress component testing configuration to",
+      "x-dropdown": "projects",
+      "x-prompt": "What project should we add Cypress component testing to?",
+      "x-priority": "important"
+    },
+    "generateTests": {
+      "type": "boolean",
+      "description": "Generate default component tests for existing components in the project",
+      "x-prompt": "Automatically generate tests for components declared in this project?",
+      "default": false,
+      "x-priority": "important"
+    },
+    "buildTarget": {
+      "type": "string",
+      "description": "A build target used to configure Cypress component testing in the format of `project:target[:configuration]`. The build target should be from a React app. If not provided we will try to infer it from your projects usage.",
+      "pattern": "^[^:\\s]+:[^:\\s]+(:\\S+)?$"
+    },
+    "skipFormat": {
+      "type": "boolean",
+      "description": "Skip formatting files",
+      "default": false,
+      "x-priority": "internal"
+    },
+    "bundler": {
+      "description": "The bundler to use for Cypress Component Testing.",
+      "type": "string",
+      "enum": ["vite", "webpack"],
+      "hidden": true,
+      "x-priority": "internal"
+    }
+  },
+  "required": ["project"],
+  "examplesFile": "../../../docs/cypress-component-configuration-examples.md"
+}

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 default hookGenerator;
+export declare const hookSchematic: (generatorOptions: Schema) => (tree: any, context: any) => Promise<any>;

package/src/generators/hook/hook.js

@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hookSchematic = exports.hookGenerator = void 0;
+const tslib_1 = require("tslib");
+// 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");
+function hookGenerator(host, schema) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const options = yield normalizeOptions(host, schema);
+        createFiles(host, options);
+        addExportsToBarrel(host, options);
+        return yield (0, devkit_1.formatFiles)(host);
+    });
+}
+exports.hookGenerator = hookGenerator;
+function createFiles(host, options) {
+    const hookDir = (0, devkit_1.joinPathFragments)(options.projectSourceRoot, options.directory);
+    (0, devkit_1.generateFiles)(host, (0, devkit_1.joinPathFragments)(__dirname, './files'), hookDir, Object.assign(Object.assign({}, 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.project).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);
+        }
+    }
+}
+function normalizeOptions(host, options) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        assertValidOptions(options);
+        let base = options.name;
+        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);
+        const hookFilename = 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(options.project);
+        if (!project) {
+            devkit_1.logger.error(`Cannot find the ${options.project} project. Please double check the project name.`);
+            throw new Error();
+        }
+        const { sourceRoot: projectSourceRoot, projectType } = project;
+        const directory = yield getDirectory(host, options, base);
+        if (options.export && projectType === 'application') {
+            devkit_1.logger.warn(`The "--export" option should not be used with applications and will do nothing.`);
+        }
+        return Object.assign(Object.assign({}, options), { directory,
+            hookName,
+            hookTypeName, fileName: hookFilename, projectSourceRoot });
+    });
+}
+function getDirectory(host, options, baseHookName) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const { className, fileName } = (0, devkit_1.names)(baseHookName);
+        const hookFileName = options.pascalCaseDirectory === true
+            ? 'use'.concat(className)
+            : 'use-'.concat(fileName);
+        const workspace = (0, devkit_1.getProjects)(host);
+        let baseDir;
+        if (options.directory) {
+            baseDir = options.directory;
+        }
+        else {
+            baseDir =
+                workspace.get(options.project).projectType === 'application'
+                    ? 'app'
+                    : 'lib';
+        }
+        return options.flat ? baseDir : (0, devkit_1.joinPathFragments)(baseDir, hookFileName);
+    });
+}
+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;
+exports.hookSchematic = (0, devkit_1.convertNxGenerator)(hookGenerator);
+//# sourceMappingURL=hook.js.map

package/src/generators/hook/hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hook.js","sourceRoot":"","sources":["../../../../../../packages/react/src/generators/hook/hook.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,11 @@
+export interface Schema {
+  name: string;
+  project: string;
+  skipTests?: boolean;
+  directory?: string;
+  export?: boolean;
+  pascalCaseFiles?: boolean;
+  pascalCaseDirectory?: boolean;
+  flat?: boolean;
+  js?: boolean;
+}

package/src/generators/hook/schema.json

@@ -0,0 +1,77 @@
+{
+  "$schema": "http://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-prompt": "What is the name of the project for this hook?",
+      "x-priority": "important"
+    },
+    "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": "Create the hook under this directory (can be nested).",
+      "x-priority": "important"
+    },
+    "flat": {
+      "type": "boolean",
+      "description": "Create hook at the source root rather than its own directory.",
+      "default": false
+    },
+    "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
+    },
+    "pascalCaseDirectory": {
+      "type": "boolean",
+      "description": "Use pascal case directory name (e.g. `useHook/useHook.ts`).",
+      "alias": "R",
+      "default": false
+    }
+  },
+  "required": ["name", "project"]
+}

package/src/generators/host/files/common/src/app/__fileName__.tsx__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/module-federation/module-federation.config.js__tmpl__

@@ -0,0 +1,6 @@
+module.exports = {
+  name: '<%= projectName %>',
+  remotes: [
+  <% remotes.forEach(function(r) {%> "<%= r.fileName %>", <% }); %>
+  ],
+};

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

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

package/src/generators/host/files/module-federation/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';<% }); %>