1585 lines
75 KiB
JSON
1585 lines
75 KiB
JSON
{
|
|
"githubRoot": "https://github.com/nrwl/nx/blob/master",
|
|
"name": "react",
|
|
"packageName": "@nrwl/react",
|
|
"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.",
|
|
"root": "/packages/react",
|
|
"source": "/packages/react/src",
|
|
"documentation": [
|
|
{
|
|
"name": "Overview",
|
|
"id": "overview",
|
|
"path": "/packages/react",
|
|
"file": "shared/react-plugin",
|
|
"content": "The React plugin contains executors and generators for managing React applications and libraries within an Nx workspace.\nIt provides:\n\n- Integration with libraries such as Jest, Cypress, and Storybook.\n- Generators for applications, libraries, components, hooks, and more.\n- Library build support for publishing packages to npm or other registries.\n- Utilities for automatic workspace refactoring.\n\n## Setting Up React\n\nTo create a new workspace with React, run `npx create-nx-workspace@latest --preset=react`.\n\nTo add the React plugin to an existing workspace, run one of the following:\n\n```shell\n# For npm users\nnpm install -D @nrwl/react\n\n# For yarn users\nyarn add -D @nrwl/react\n```\n\n### Creating Applications and Libraries\n\nYou can add a new application with the following:\n\n```shell\nnx g @nrwl/react:app my-new-app\n```\n\nTo start the application in development mode, run `nx serve my-new-app`.\n\nAnd add a new library as follows:\n\n```shell\nnx g @nrwl/react:lib my-new-lib\n\n# If you want the library to be buildable or publishable to npm\nnx g @nrwl/react:lib my-new-lib --buildable\nnx g @nrwl/react:lib my-new-lib \\\n--publishable \\\n--importPath=@myorg/my-new-lib\n```\n\nRead more about [building and publishing libraries here](/more-concepts/buildable-and-publishable-libraries).\n\n### Creating Components\n\nAdding a component to an existing project can be done with:\n\n```shell\nnx g @nrwl/react:component my-new-component \\\n--project=my-new-app\n\n# Note: If you want to export the component\n# from the library use --export\nnx g @nrwl/react:component my-new-component \\\n--project=my-new-lib \\\n--export\n```\n\nReplace `my-new-app` and `my-new-lib` with the name of your projects.\n\n### Creating Hooks\n\nIf you want to add a new hook, run the following\n\n```shell\nnx g @nrwl/react:hook my-new-hook --project=my-new-lib\n```\n\nReplace `my-new-lib` with the name of your project.\n\n## Using React\n\n### Testing Projects\n\nYou can run unit tests with:\n\n```shell\nnx test my-new-app\nnx test my-new-lib\n```\n\nReplace `my-new-app` with the name or your project. This command works for both applications and libraries.\n\nYou can also run E2E tests for applications:\n\n```shell\nnx e2e my-new-app-e2e\n```\n\nReplace `my-new-app-e2e` with the name or your project with `-e2e` appended.\n\n### Building Projects\n\nReact applications can be build with:\n\n```shell\nnx build my-new-app\n```\n\nAnd if you generated a library with `--buildable`, then you can build a library as well:\n\n```shell\nnx build my-new-lib\n```\n\nThe output is in the `dist` folder. You can customize the output folder by setting `outputPath` in the\nproject's `project.json` file.\n\nThe application in `dist` is deployable, and you can try it out locally with:\n\n```shell\nnpx http-server dist/apps/my-new-app\n```\n\nThe library in `dist` is publishable to npm or a private registry.\n\n## More Documentation\n\n- [Using Cypress](/packages/cypress)\n- [Using Jest](/packages/jest)\n- [Using Storybook](/storybook/overview-react)\n"
|
|
}
|
|
],
|
|
"generators": [
|
|
{
|
|
"name": "init",
|
|
"factory": "./src/generators/init/init#reactInitGenerator",
|
|
"schema": {
|
|
"$schema": "http://json-schema.org/schema",
|
|
"$id": "NxReactNgInit",
|
|
"title": "Init React Plugin",
|
|
"description": "Initialize a React Plugin.",
|
|
"cli": "nx",
|
|
"type": "object",
|
|
"properties": {
|
|
"unitTestRunner": {
|
|
"description": "Adds the specified unit test runner.",
|
|
"type": "string",
|
|
"enum": ["jest", "none"],
|
|
"default": "jest"
|
|
},
|
|
"e2eTestRunner": {
|
|
"description": "Adds the specified E2E test runner.",
|
|
"type": "string",
|
|
"enum": ["cypress", "none"],
|
|
"default": "cypress"
|
|
},
|
|
"skipFormat": {
|
|
"description": "Skip formatting files.",
|
|
"type": "boolean",
|
|
"default": false
|
|
},
|
|
"skipPackageJson": {
|
|
"description": "Do not add dependencies to `package.json`.",
|
|
"type": "boolean",
|
|
"default": false
|
|
},
|
|
"skipBabelConfig": {
|
|
"description": "Do not generate a root babel.config.json (if babel is not needed).",
|
|
"type": "boolean",
|
|
"default": false
|
|
},
|
|
"skipHelperLibs": {
|
|
"description": "Do not install helpers libs (tslib, core-js, regenerator-runtime).",
|
|
"type": "boolean",
|
|
"default": false,
|
|
"hidden": true
|
|
},
|
|
"js": {
|
|
"type": "boolean",
|
|
"default": false,
|
|
"description": "Use JavaScript instead of TypeScript"
|
|
}
|
|
},
|
|
"required": [],
|
|
"presets": []
|
|
},
|
|
"description": "Initialize the `@nrwl/react` plugin.",
|
|
"aliases": ["ng-add"],
|
|
"hidden": true,
|
|
"implementation": "/packages/react/src/generators/init/init#reactInitGenerator.ts",
|
|
"path": "/packages/react/src/generators/init/schema.json"
|
|
},
|
|
{
|
|
"name": "application",
|
|
"factory": "./src/generators/application/application#applicationGenerator",
|
|
"schema": {
|
|
"$schema": "http://json-schema.org/schema",
|
|
"cli": "nx",
|
|
"$id": "NxReactApp",
|
|
"title": "Create a React Application",
|
|
"description": "Create a React application for Nx.",
|
|
"examples": [
|
|
{
|
|
"command": "nx g app myapp --directory=myorg",
|
|
"description": "Generate `apps/myorg/myapp` and `apps/myorg/myapp-e2e`"
|
|
},
|
|
{
|
|
"command": "nx g app myapp --classComponent",
|
|
"description": "Use class components instead of functional components"
|
|
},
|
|
{
|
|
"command": "nx g app myapp --routing",
|
|
"description": "Set up React Router"
|
|
}
|
|
],
|
|
"type": "object",
|
|
"properties": {
|
|
"name": {
|
|
"description": "The name of the application.",
|
|
"type": "string",
|
|
"$default": { "$source": "argv", "index": 0 },
|
|
"x-prompt": "What name would you like to use for the application?",
|
|
"pattern": "^[a-zA-Z].*$"
|
|
},
|
|
"directory": {
|
|
"description": "The directory of the new application.",
|
|
"type": "string",
|
|
"alias": "dir"
|
|
},
|
|
"style": {
|
|
"description": "The file extension to be used for style files.",
|
|
"type": "string",
|
|
"default": "css",
|
|
"alias": "s",
|
|
"x-prompt": {
|
|
"message": "Which stylesheet format would you like to use?",
|
|
"type": "list",
|
|
"items": [
|
|
{ "value": "css", "label": "CSS" },
|
|
{
|
|
"value": "scss",
|
|
"label": "SASS(.scss) [ http://sass-lang.com ]"
|
|
},
|
|
{
|
|
"value": "styl",
|
|
"label": "Stylus(.styl) [ http://stylus-lang.com ]"
|
|
},
|
|
{
|
|
"value": "less",
|
|
"label": "LESS [ http://lesscss.org ]"
|
|
},
|
|
{
|
|
"value": "styled-components",
|
|
"label": "styled-components [ https://styled-components.com ]"
|
|
},
|
|
{
|
|
"value": "@emotion/styled",
|
|
"label": "emotion [ https://emotion.sh ]"
|
|
},
|
|
{
|
|
"value": "styled-jsx",
|
|
"label": "styled-jsx [ https://www.npmjs.com/package/styled-jsx ]"
|
|
},
|
|
{ "value": "none", "label": "None" }
|
|
]
|
|
}
|
|
},
|
|
"linter": {
|
|
"description": "The tool to use for running lint checks.",
|
|
"type": "string",
|
|
"enum": ["eslint", "none"],
|
|
"default": "eslint"
|
|
},
|
|
"routing": {
|
|
"type": "boolean",
|
|
"description": "Generate application with routes.",
|
|
"x-prompt": "Would you like to add React Router to this application?",
|
|
"default": false
|
|
},
|
|
"skipFormat": {
|
|
"description": "Skip formatting files.",
|
|
"type": "boolean",
|
|
"default": false
|
|
},
|
|
"skipWorkspaceJson": {
|
|
"description": "Skip updating `workspace.json` with default options based on values provided to this app (e.g. babel, style).",
|
|
"type": "boolean",
|
|
"default": false
|
|
},
|
|
"unitTestRunner": {
|
|
"type": "string",
|
|
"enum": ["jest", "vitest", "none"],
|
|
"description": "Test runner to use for unit tests.",
|
|
"default": "jest"
|
|
},
|
|
"inSourceTests": {
|
|
"type": "boolean",
|
|
"default": false,
|
|
"description": "When using Vitest, separate spec files will not be generated and instead will be included within the source files. Read more on the Vitest docs site: https://vitest.dev/guide/in-source.html"
|
|
},
|
|
"e2eTestRunner": {
|
|
"type": "string",
|
|
"enum": ["cypress", "none"],
|
|
"description": "Test runner to use for end to end (E2E) tests.",
|
|
"default": "cypress"
|
|
},
|
|
"tags": {
|
|
"type": "string",
|
|
"description": "Add tags to the application (used for linting).",
|
|
"alias": "t"
|
|
},
|
|
"pascalCaseFiles": {
|
|
"type": "boolean",
|
|
"description": "Use pascal case component file name (e.g. `App.tsx`).",
|
|
"alias": "P",
|
|
"default": false
|
|
},
|
|
"classComponent": {
|
|
"type": "boolean",
|
|
"description": "Use class components instead of functional component.",
|
|
"alias": "C",
|
|
"default": false
|
|
},
|
|
"js": {
|
|
"type": "boolean",
|
|
"description": "Generate JavaScript files rather than TypeScript files.",
|
|
"default": false
|
|
},
|
|
"globalCss": {
|
|
"type": "boolean",
|
|
"description": "Default is `false`. When `true`, the component is generated with `*.css`/`*.scss` instead of `*.module.css`/`*.module.scss`.",
|
|
"default": false
|
|
},
|
|
"strict": {
|
|
"type": "boolean",
|
|
"description": "Creates an application with strict mode and strict type checking.",
|
|
"default": true
|
|
},
|
|
"setParserOptionsProject": {
|
|
"type": "boolean",
|
|
"description": "Whether or not to configure the ESLint `parserOptions.project` option. We do not do this by default for lint performance reasons.",
|
|
"default": false
|
|
},
|
|
"standaloneConfig": {
|
|
"description": "Split the project configuration into `<projectRoot>/project.json` rather than including it inside `workspace.json`.",
|
|
"type": "boolean"
|
|
},
|
|
"compiler": {
|
|
"type": "string",
|
|
"description": "The compiler to use.",
|
|
"enum": ["babel", "swc"],
|
|
"default": "babel"
|
|
},
|
|
"skipDefaultProject": {
|
|
"description": "Skip setting the project as the default project. When `false` (the default), the project is set as the default project only if there is no default project already set.",
|
|
"type": "boolean",
|
|
"default": false
|
|
},
|
|
"skipPackageJson": {
|
|
"description": "Do not add dependencies to `package.json`.",
|
|
"type": "boolean",
|
|
"default": false
|
|
},
|
|
"rootProject": {
|
|
"description": "Create a application at the root of the workspace",
|
|
"type": "boolean",
|
|
"default": false,
|
|
"hidden": true
|
|
},
|
|
"bundler": {
|
|
"description": "The bundler to use.",
|
|
"type": "string",
|
|
"enum": ["vite", "webpack"],
|
|
"x-prompt": "Which bundler do you want to use to build the application?",
|
|
"default": "webpack"
|
|
},
|
|
"minimal": {
|
|
"description": "Generate a React app with a minimal setup, no separate test files.",
|
|
"type": "boolean",
|
|
"default": false
|
|
}
|
|
},
|
|
"required": [],
|
|
"examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Application\" %}\n\nCreate an application named `my-app`:\n\n```bash\nnx g @nrwl/react:application my-app\n```\n\n{% /tab %}\n\n{% tab label=\"Application using Vite as bundler\" %}\n\nCreate an application named `my-app`:\n\n```bash\nnx g @nrwl/react:app my-app --bundler=vite\n```\n\n{% /tab %}\n\n{% tab label=\"Specify directory and style extension\" %}\n\nCreate an application named `my-app` in the `my-dir` directory and use `scss` for styles:\n\n```bash\nnx g @nrwl/react:app my-app --directory=my-dir --style=scss\n```\n\n{% /tab %}\n\n{% tab label=\"Add tags\" %}\n\nAdd tags to the application (used for linting).\n\n```bash\nnx g @nrwl/react:app my-app --tags=scope:admin,type:ui\n```\n\n{% /tab %}\n{% /tabs %}\n",
|
|
"presets": []
|
|
},
|
|
"aliases": ["app"],
|
|
"x-type": "application",
|
|
"description": "Create a React application.",
|
|
"implementation": "/packages/react/src/generators/application/application#applicationGenerator.ts",
|
|
"hidden": false,
|
|
"path": "/packages/react/src/generators/application/schema.json"
|
|
},
|
|
{
|
|
"name": "library",
|
|
"factory": "./src/generators/library/library#libraryGenerator",
|
|
"schema": {
|
|
"$schema": "http://json-schema.org/schema",
|
|
"cli": "nx",
|
|
"$id": "NxReactLibrary",
|
|
"title": "Create a React Library",
|
|
"description": "Create a React Library for an Nx workspace.",
|
|
"type": "object",
|
|
"examples": [
|
|
{
|
|
"command": "nx g lib mylib --directory=myapp",
|
|
"description": "Generate `libs/myapp/mylib`"
|
|
},
|
|
{
|
|
"command": "nx g lib mylib --appProject=myapp",
|
|
"description": "Generate a library with routes and add them to `myapp`"
|
|
}
|
|
],
|
|
"properties": {
|
|
"name": {
|
|
"type": "string",
|
|
"description": "Library name",
|
|
"$default": { "$source": "argv", "index": 0 },
|
|
"x-prompt": "What name would you like to use for the library?",
|
|
"pattern": "^[a-zA-Z].*$"
|
|
},
|
|
"directory": {
|
|
"type": "string",
|
|
"description": "A directory where the lib is placed.",
|
|
"alias": "dir"
|
|
},
|
|
"style": {
|
|
"description": "The file extension to be used for style files.",
|
|
"type": "string",
|
|
"default": "css",
|
|
"alias": "s",
|
|
"x-prompt": {
|
|
"message": "Which stylesheet format would you like to use?",
|
|
"type": "list",
|
|
"items": [
|
|
{ "value": "css", "label": "CSS" },
|
|
{
|
|
"value": "scss",
|
|
"label": "SASS(.scss) [ http://sass-lang.com ]"
|
|
},
|
|
{
|
|
"value": "styl",
|
|
"label": "Stylus(.styl) [ http://stylus-lang.com ]"
|
|
},
|
|
{
|
|
"value": "less",
|
|
"label": "LESS [ http://lesscss.org ]"
|
|
},
|
|
{
|
|
"value": "styled-components",
|
|
"label": "styled-components [ https://styled-components.com ]"
|
|
},
|
|
{
|
|
"value": "@emotion/styled",
|
|
"label": "emotion [ https://emotion.sh ]"
|
|
},
|
|
{
|
|
"value": "styled-jsx",
|
|
"label": "styled-jsx [ https://www.npmjs.com/package/styled-jsx ]"
|
|
},
|
|
{ "value": "none", "label": "None" }
|
|
]
|
|
}
|
|
},
|
|
"linter": {
|
|
"description": "The tool to use for running lint checks.",
|
|
"type": "string",
|
|
"enum": ["eslint", "none"],
|
|
"default": "eslint"
|
|
},
|
|
"unitTestRunner": {
|
|
"type": "string",
|
|
"enum": ["jest", "vitest", "none"],
|
|
"description": "Test runner to use for unit tests."
|
|
},
|
|
"inSourceTests": {
|
|
"type": "boolean",
|
|
"default": false,
|
|
"description": "When using Vitest, separate spec files will not be generated and instead will be included within the source files."
|
|
},
|
|
"tags": {
|
|
"type": "string",
|
|
"description": "Add tags to the library (used for linting).",
|
|
"alias": "t"
|
|
},
|
|
"skipFormat": {
|
|
"description": "Skip formatting files.",
|
|
"type": "boolean",
|
|
"default": false
|
|
},
|
|
"skipTsConfig": {
|
|
"type": "boolean",
|
|
"default": false,
|
|
"description": "Do not update `tsconfig.json` for development experience."
|
|
},
|
|
"pascalCaseFiles": {
|
|
"type": "boolean",
|
|
"description": "Use pascal case component file name (e.g. `App.tsx`).",
|
|
"alias": "P",
|
|
"default": false
|
|
},
|
|
"routing": {
|
|
"type": "boolean",
|
|
"description": "Generate library with routes."
|
|
},
|
|
"appProject": {
|
|
"type": "string",
|
|
"description": "The application project to add the library route to.",
|
|
"alias": "a"
|
|
},
|
|
"publishable": {
|
|
"type": "boolean",
|
|
"description": "Create a publishable library."
|
|
},
|
|
"buildable": {
|
|
"type": "boolean",
|
|
"default": false,
|
|
"description": "Generate a buildable library that uses rollup to bundle. Use 'bundler' option instead for greater control (none, vite, rollup).",
|
|
"x-deprecated": true
|
|
},
|
|
"importPath": {
|
|
"type": "string",
|
|
"description": "The library name used to import it, like `@myorg/my-awesome-lib`."
|
|
},
|
|
"component": {
|
|
"type": "boolean",
|
|
"description": "Generate a default component.",
|
|
"default": true
|
|
},
|
|
"js": {
|
|
"type": "boolean",
|
|
"description": "Generate JavaScript files rather than TypeScript files.",
|
|
"default": false
|
|
},
|
|
"globalCss": {
|
|
"type": "boolean",
|
|
"description": "When `true`, the stylesheet is generated using global CSS instead of CSS modules (e.g. file is `*.css` rather than `*.module.css`).",
|
|
"default": false
|
|
},
|
|
"strict": {
|
|
"type": "boolean",
|
|
"description": "Whether to enable tsconfig strict mode or not.",
|
|
"default": true
|
|
},
|
|
"setParserOptionsProject": {
|
|
"type": "boolean",
|
|
"description": "Whether or not to configure the ESLint `parserOptions.project` option. We do not do this by default for lint performance reasons.",
|
|
"default": false
|
|
},
|
|
"standaloneConfig": {
|
|
"description": "Split the project configuration into `<projectRoot>/project.json` rather than including it inside `workspace.json`.",
|
|
"type": "boolean"
|
|
},
|
|
"bundler": {
|
|
"type": "string",
|
|
"description": "The bundler to use. Choosing 'none' means this library is not buildable.",
|
|
"enum": ["none", "vite", "rollup"],
|
|
"default": "none",
|
|
"x-prompt": "Which bundler would you like to use to build the library? Choose 'none' to skip build setup."
|
|
},
|
|
"compiler": {
|
|
"type": "string",
|
|
"enum": ["babel", "swc"],
|
|
"default": "babel",
|
|
"description": "Which compiler to use. Only applies to `bundler: 'rollup'`."
|
|
},
|
|
"skipPackageJson": {
|
|
"description": "Do not add dependencies to `package.json`.",
|
|
"type": "boolean",
|
|
"default": false
|
|
},
|
|
"minimal": {
|
|
"description": "Create a React library with a minimal setup, no separate test files.",
|
|
"type": "boolean",
|
|
"default": false
|
|
}
|
|
},
|
|
"required": ["name"],
|
|
"presets": []
|
|
},
|
|
"aliases": ["lib"],
|
|
"x-type": "library",
|
|
"description": "Create a React library.",
|
|
"implementation": "/packages/react/src/generators/library/library#libraryGenerator.ts",
|
|
"hidden": false,
|
|
"path": "/packages/react/src/generators/library/schema.json"
|
|
},
|
|
{
|
|
"name": "component",
|
|
"factory": "./src/generators/component/component#componentGenerator",
|
|
"schema": {
|
|
"$schema": "http://json-schema.org/schema",
|
|
"cli": "nx",
|
|
"$id": "NxReactComponent",
|
|
"title": "Create a React Component",
|
|
"description": "Create a React Component for Nx.",
|
|
"type": "object",
|
|
"examples": [
|
|
{
|
|
"command": "nx g component my-component --project=mylib",
|
|
"description": "Generate a component in the `mylib` library"
|
|
},
|
|
{
|
|
"command": "nx g component my-component --project=mylib --classComponent",
|
|
"description": "Generate a class component 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 component?"
|
|
},
|
|
"name": {
|
|
"type": "string",
|
|
"description": "The name of the component.",
|
|
"$default": { "$source": "argv", "index": 0 },
|
|
"x-prompt": "What name would you like to use for the component?"
|
|
},
|
|
"style": {
|
|
"description": "The file extension to be used for style files.",
|
|
"type": "string",
|
|
"alias": "s",
|
|
"default": "css",
|
|
"x-prompt": {
|
|
"message": "Which stylesheet format would you like to use?",
|
|
"type": "list",
|
|
"items": [
|
|
{ "value": "css", "label": "CSS" },
|
|
{
|
|
"value": "scss",
|
|
"label": "SASS(.scss) [ http://sass-lang.com ]"
|
|
},
|
|
{
|
|
"value": "styl",
|
|
"label": "Stylus(.styl) [ http://stylus-lang.com ]"
|
|
},
|
|
{
|
|
"value": "less",
|
|
"label": "LESS [ http://lesscss.org ]"
|
|
},
|
|
{
|
|
"value": "styled-components",
|
|
"label": "styled-components [ https://styled-components.com ]"
|
|
},
|
|
{
|
|
"value": "@emotion/styled",
|
|
"label": "emotion [ https://emotion.sh ]"
|
|
},
|
|
{
|
|
"value": "styled-jsx",
|
|
"label": "styled-jsx [ https://www.npmjs.com/package/styled-jsx ]"
|
|
},
|
|
{ "value": "none", "label": "None" }
|
|
]
|
|
}
|
|
},
|
|
"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 component.",
|
|
"default": false
|
|
},
|
|
"directory": {
|
|
"type": "string",
|
|
"description": "Create the component under this directory (can be nested).",
|
|
"alias": "dir"
|
|
},
|
|
"flat": {
|
|
"type": "boolean",
|
|
"description": "Create component at the source root rather than its own directory.",
|
|
"default": false
|
|
},
|
|
"export": {
|
|
"type": "boolean",
|
|
"description": "When true, the component is exported from the project `index.ts` (if it exists).",
|
|
"alias": "e",
|
|
"default": false,
|
|
"x-prompt": "Should this component be exported in the project?"
|
|
},
|
|
"pascalCaseFiles": {
|
|
"type": "boolean",
|
|
"description": "Use pascal case component file name (e.g. `App.tsx`).",
|
|
"alias": "P",
|
|
"default": false
|
|
},
|
|
"pascalCaseDirectory": {
|
|
"type": "boolean",
|
|
"description": "Use pascal case directory name (e.g. `App/App.tsx`).",
|
|
"alias": "R",
|
|
"default": false
|
|
},
|
|
"classComponent": {
|
|
"type": "boolean",
|
|
"alias": "C",
|
|
"description": "Use class components instead of functional component.",
|
|
"default": false
|
|
},
|
|
"routing": {
|
|
"type": "boolean",
|
|
"description": "Generate a library with routes."
|
|
},
|
|
"globalCss": {
|
|
"type": "boolean",
|
|
"description": "Default is `false`. When `true`, the component is generated with `*.css`/`*.scss` instead of `*.module.css`/`*.module.scss`.",
|
|
"default": false
|
|
},
|
|
"fileName": {
|
|
"type": "string",
|
|
"description": "Create a component with this file name."
|
|
}
|
|
},
|
|
"required": ["name", "project"],
|
|
"presets": []
|
|
},
|
|
"description": "Create a React component.",
|
|
"aliases": ["c"],
|
|
"implementation": "/packages/react/src/generators/component/component#componentGenerator.ts",
|
|
"hidden": false,
|
|
"path": "/packages/react/src/generators/component/schema.json"
|
|
},
|
|
{
|
|
"name": "redux",
|
|
"factory": "./src/generators/redux/redux#reduxGenerator",
|
|
"schema": {
|
|
"$schema": "http://json-schema.org/schema",
|
|
"cli": "nx",
|
|
"$id": "redux",
|
|
"title": "Create Redux state",
|
|
"description": "Create a Redux state slice for a React project.",
|
|
"type": "object",
|
|
"properties": {
|
|
"name": {
|
|
"type": "string",
|
|
"description": "Redux slice name.",
|
|
"$default": { "$source": "argv", "index": 0 }
|
|
},
|
|
"project": {
|
|
"type": "string",
|
|
"description": "The name of the project to add the slice to. If it is an application, then the store configuration will be updated too.",
|
|
"alias": "p",
|
|
"$default": { "$source": "projectName" },
|
|
"x-prompt": "What is the name of the project for this slice?"
|
|
},
|
|
"directory": {
|
|
"type": "string",
|
|
"alias": "dir",
|
|
"default": "",
|
|
"description": "The name of the folder used to contain/group the generated Redux files."
|
|
},
|
|
"appProject": {
|
|
"type": "string",
|
|
"description": "The application project to add the slice to.",
|
|
"alias": "a"
|
|
},
|
|
"js": {
|
|
"type": "boolean",
|
|
"description": "Generate JavaScript files rather than TypeScript files.",
|
|
"default": false
|
|
}
|
|
},
|
|
"required": ["name"],
|
|
"presets": []
|
|
},
|
|
"description": "Create a Redux slice for a project.",
|
|
"aliases": ["slice"],
|
|
"implementation": "/packages/react/src/generators/redux/redux#reduxGenerator.ts",
|
|
"hidden": false,
|
|
"path": "/packages/react/src/generators/redux/schema.json"
|
|
},
|
|
{
|
|
"name": "storybook-configuration",
|
|
"factory": "./src/generators/storybook-configuration/configuration#storybookConfigurationGenerator",
|
|
"schema": {
|
|
"$schema": "http://json-schema.org/schema",
|
|
"cli": "nx",
|
|
"$id": "NxReactStorybookConfigure",
|
|
"title": "React Storybook Configure",
|
|
"description": "Set up Storybook for a React app or library.",
|
|
"type": "object",
|
|
"properties": {
|
|
"name": {
|
|
"type": "string",
|
|
"aliases": ["project", "projectName"],
|
|
"description": "Project for which to generate Storybook configuration.",
|
|
"$default": { "$source": "argv", "index": 0 },
|
|
"x-prompt": "For which project do you want to generate Storybook configuration?",
|
|
"x-dropdown": "projects"
|
|
},
|
|
"configureCypress": {
|
|
"type": "boolean",
|
|
"description": "Run the cypress-configure generator.",
|
|
"x-prompt": "Configure a cypress e2e app to run against the storybook instance?",
|
|
"default": true
|
|
},
|
|
"generateStories": {
|
|
"type": "boolean",
|
|
"description": "Automatically generate `*.stories.ts` files for components declared in this project?",
|
|
"x-prompt": "Automatically generate *.stories.ts files for components declared in this project?",
|
|
"default": true
|
|
},
|
|
"generateCypressSpecs": {
|
|
"type": "boolean",
|
|
"description": "Automatically generate test files in the Cypress E2E app generated by the `cypress-configure` generator.",
|
|
"x-prompt": "Automatically generate test files in the Cypress E2E app generated by the cypress-configure generator?",
|
|
"default": true
|
|
},
|
|
"cypressDirectory": {
|
|
"type": "string",
|
|
"description": "A directory where the Cypress project will be placed. Placed at the root by default."
|
|
},
|
|
"js": {
|
|
"type": "boolean",
|
|
"description": "Generate JavaScript story files rather than TypeScript story files.",
|
|
"default": false
|
|
},
|
|
"tsConfiguration": {
|
|
"type": "boolean",
|
|
"description": "Configure your project with TypeScript. Generate main.ts and preview.ts files, instead of main.js and preview.js.",
|
|
"default": false
|
|
},
|
|
"linter": {
|
|
"description": "The tool to use for running lint checks.",
|
|
"type": "string",
|
|
"enum": ["eslint"],
|
|
"default": "eslint"
|
|
},
|
|
"standaloneConfig": {
|
|
"description": "Split the project configuration into `<projectRoot>/project.json` rather than including it inside `workspace.json`.",
|
|
"type": "boolean"
|
|
},
|
|
"ignorePaths": {
|
|
"type": "array",
|
|
"description": "Paths to ignore when looking for components.",
|
|
"items": { "type": "string", "description": "Path to ignore." },
|
|
"examples": [
|
|
"apps/my-app/src/not-stories/**",
|
|
"**/**/src/**/not-stories/**",
|
|
"libs/my-lib/**/*.something.ts",
|
|
"**/**/src/**/*.other.*",
|
|
"libs/my-lib/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts"
|
|
]
|
|
},
|
|
"configureTestRunner": {
|
|
"type": "boolean",
|
|
"description": "Add a Storybook Test-Runner target."
|
|
},
|
|
"bundler": {
|
|
"description": "The Storybook builder to use.",
|
|
"enum": ["vite", "webpack"]
|
|
}
|
|
},
|
|
"required": ["name"],
|
|
"examplesFile": "This generator will set up Storybook for your Angular project.\n\n```bash\nnx g @nrwl/react:storybook-configuration project-name\n```\n\nYou can read more about how this generator works, in the [Storybook for React overview page](/storybook/overview-react#generate-storybook-configuration-for-an-react-project).\n\nWhen running this generator, you will be prompted to provide the following:\n\n- The `name` of the project you want to generate the configuration for.\n- Whether you want to `configureCypress`. If you choose `yes`, a Cypress e2e app will be created (or configured) to run against the project's Storybook instance. You can read more about this in the [Storybook for React - Cypress section](/storybook/overview-react#cypress-tests-for-stories).\n- Whether you want to `generateStories` for the components in your project. If you choose `yes`, a `.stories.ts` file will be generated next to each of your components in your project.\n- Whether you want to `generateCypressSpecs`. If you choose `yes`, a test file is going to be generated in the project's Cypress e2e app for each of your components.\n- Whether you want to `configureTestRunner`. If you choose `yes`, a `test-storybook` target will be generated in your project's `project.json`, with a command to invoke the [Storybook `test-runner`](https://storybook.js.org/docs/react/writing-tests/test-runner).\n\nYou must provide a `name` for the generator to work.\n\nThere are a number of other options available. Let's take a look at some examples.\n\n## Examples\n\n### Generate Storybook configuration using TypeScript\n\n```bash\nnx g @nrwl/react:storybook-configuration ui --tsConfiguration=true\n```\n\nThis will generate a Storybook configuration for the `ui` project using TypeScript for the Storybook configuration files (the files inside the `.storybook` directory).\n\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nrwl/react:storybook-configuration ui --generateStories=true --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts\n```\n\nThis will generate a Storybook configuration for the `ui` project and generate stories for all components in the `libs/ui/src/lib` directory, except for the ones in the `libs/ui/src/not-stories` directory, and the ones in the `apps/my-app` directory that end with `.something.ts`, and also for components that their file name is of the pattern `*.other.*`.\n\nThis is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.\n\n### Generate stories using JavaScript instead of TypeScript\n\n```bash\nnx g @nrwl/react:storybook-configuration ui --generateStories=true --js=true\n```\n\nThis will generate stories for all the components in the `ui` project using JavaScript instead of TypeScript. So, you will have `.stories.js` files next to your components.\n",
|
|
"presets": []
|
|
},
|
|
"description": "Set up storybook for a React app or library.",
|
|
"hidden": false,
|
|
"implementation": "/packages/react/src/generators/storybook-configuration/configuration#storybookConfigurationGenerator.ts",
|
|
"aliases": [],
|
|
"path": "/packages/react/src/generators/storybook-configuration/schema.json"
|
|
},
|
|
{
|
|
"name": "component-story",
|
|
"factory": "./src/generators/component-story/component-story#componentStoryGenerator",
|
|
"schema": {
|
|
"$schema": "http://json-schema.org/schema",
|
|
"cli": "nx",
|
|
"$id": "NxReactComponentStory",
|
|
"title": "Create component story",
|
|
"description": "Generate storybook story for a react component.",
|
|
"type": "object",
|
|
"properties": {
|
|
"project": {
|
|
"type": "string",
|
|
"aliases": ["name", "projectName"],
|
|
"description": "The project where to add the components.",
|
|
"examples": ["shared-ui-component"],
|
|
"$default": { "$source": "projectName", "index": 0 },
|
|
"x-prompt": "What's name of the project where the component lives?"
|
|
},
|
|
"componentPath": {
|
|
"type": "string",
|
|
"description": "Relative path to the component file from the library root.",
|
|
"examples": ["lib/components"],
|
|
"x-prompt": "What's path of the component relative to the project's lib root?"
|
|
}
|
|
},
|
|
"required": ["project", "componentPath"],
|
|
"presets": []
|
|
},
|
|
"description": "Generate storybook story for a React component",
|
|
"hidden": false,
|
|
"implementation": "/packages/react/src/generators/component-story/component-story#componentStoryGenerator.ts",
|
|
"aliases": [],
|
|
"path": "/packages/react/src/generators/component-story/schema.json"
|
|
},
|
|
{
|
|
"name": "stories",
|
|
"factory": "./src/generators/stories/stories#storiesGenerator",
|
|
"schema": {
|
|
"$schema": "http://json-schema.org/schema",
|
|
"cli": "nx",
|
|
"$id": "NxReactStorybookStories",
|
|
"title": "Generate React Storybook stories",
|
|
"description": "Generate stories/specs for all components declared in a project.",
|
|
"type": "object",
|
|
"properties": {
|
|
"project": {
|
|
"type": "string",
|
|
"aliases": ["name", "projectName"],
|
|
"description": "Project for which to generate stories.",
|
|
"$default": { "$source": "projectName", "index": 0 },
|
|
"x-prompt": "For which project do you want to generate stories?"
|
|
},
|
|
"generateCypressSpecs": {
|
|
"type": "boolean",
|
|
"description": "Automatically generate `*.spec.ts` files in the cypress e2e app generated by the cypress-configure generator.",
|
|
"x-prompt": "Do you want to generate Cypress specs as well?"
|
|
},
|
|
"cypressProject": {
|
|
"type": "string",
|
|
"description": "The Cypress project to generate the stories under. This is inferred from `project` by default."
|
|
},
|
|
"js": {
|
|
"type": "boolean",
|
|
"description": "Generate JavaScript files rather than TypeScript files.",
|
|
"default": false
|
|
},
|
|
"ignorePaths": {
|
|
"type": "array",
|
|
"description": "Paths to ignore when looking for components.",
|
|
"items": { "type": "string", "description": "Path to ignore." },
|
|
"examples": [
|
|
"apps/my-app/src/not-stories/**",
|
|
"**/**/src/**/not-stories/**",
|
|
"libs/my-lib/**/*.something.ts",
|
|
"**/**/src/**/*.other.*",
|
|
"libs/my-lib/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts"
|
|
]
|
|
}
|
|
},
|
|
"required": ["project"],
|
|
"examplesFile": "This generator will generate stories for all your components in your project.\n\n```bash\nnx g @nrwl/react:stories project-name\n```\n\nYou can read more about how this generator works, in the [Storybook for React overview page](/storybook/overview-react#auto-generate-stories).\n\nWhen running this generator, you will be prompted to provide the following:\n\n- The `name` of the project you want to generate the configuration for.\n- Whether you want to `generateCypressSpecs`. If you choose `yes`, a test file is going to be generated in the project's Cypress e2e app for each of your components.\n\nYou must provide a `name` for the generator to work.\n\nThere are a number of other options available. Let's take a look at some examples.\n\n## Examples\n\n### Ignore certain paths when generating stories\n\n```bash\nnx g @nrwl/react:stories --name=ui --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*\n```\n\nThis will generate stories for all the components in the `ui` project, except for the ones in the `libs/ui/src/not-stories` directory, and also for components that their file name is of the pattern `*.other.*`.\n\nThis is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.\n\n### Generate stories using JavaScript instead of TypeScript\n\n```bash\nnx g @nrwl/react:stories --name=ui --js=true\n```\n\nThis will generate stories for all the components in the `ui` project using JavaScript instead of TypeScript. So, you will have `.stories.js` files next to your components.\n",
|
|
"presets": []
|
|
},
|
|
"description": "Create stories/specs for all components declared in an app or library.",
|
|
"hidden": false,
|
|
"implementation": "/packages/react/src/generators/stories/stories#storiesGenerator.ts",
|
|
"aliases": [],
|
|
"path": "/packages/react/src/generators/stories/schema.json"
|
|
},
|
|
{
|
|
"name": "component-cypress-spec",
|
|
"factory": "./src/generators/component-cypress-spec/component-cypress-spec#componentCypressGenerator",
|
|
"schema": {
|
|
"$schema": "http://json-schema.org/schema",
|
|
"cli": "nx",
|
|
"$id": "NxReactComponentCypressSpec",
|
|
"title": "Create component Cypress spec",
|
|
"description": "Create a Cypress spec for a UI component that has a story.",
|
|
"type": "object",
|
|
"properties": {
|
|
"project": {
|
|
"type": "string",
|
|
"description": "The project name for which to generate tests.",
|
|
"examples": ["shared-ui-component"],
|
|
"$default": { "$source": "projectName", "index": 0 },
|
|
"x-prompt": "What's name of the project for which to generate tests?"
|
|
},
|
|
"componentPath": {
|
|
"type": "string",
|
|
"description": "Relative path to the component file from the library root?",
|
|
"examples": ["lib/components"],
|
|
"x-prompt": "What's path of the component relative to the project's lib root for which to generate a test?"
|
|
},
|
|
"js": {
|
|
"type": "boolean",
|
|
"description": "Generate JavaScript files rather than TypeScript files.",
|
|
"default": false
|
|
},
|
|
"cypressProject": {
|
|
"type": "string",
|
|
"description": "The Cypress project to generate the stories under. By default, inferred from `project`."
|
|
}
|
|
},
|
|
"required": ["project", "componentPath"],
|
|
"presets": []
|
|
},
|
|
"description": "Create a Cypress spec for a UI component that has a story.",
|
|
"hidden": false,
|
|
"implementation": "/packages/react/src/generators/component-cypress-spec/component-cypress-spec#componentCypressGenerator.ts",
|
|
"aliases": [],
|
|
"path": "/packages/react/src/generators/component-cypress-spec/schema.json"
|
|
},
|
|
{
|
|
"name": "hook",
|
|
"factory": "./src/generators/hook/hook#hookGenerator",
|
|
"schema": {
|
|
"$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?"
|
|
},
|
|
"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?"
|
|
},
|
|
"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
|
|
},
|
|
"directory": {
|
|
"type": "string",
|
|
"description": "Create the hook under this directory (can be nested)."
|
|
},
|
|
"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"],
|
|
"presets": []
|
|
},
|
|
"description": "Create a hook.",
|
|
"aliases": ["c"],
|
|
"implementation": "/packages/react/src/generators/hook/hook#hookGenerator.ts",
|
|
"hidden": false,
|
|
"path": "/packages/react/src/generators/hook/schema.json"
|
|
},
|
|
{
|
|
"name": "host",
|
|
"factory": "./src/generators/host/host#hostGenerator",
|
|
"schema": {
|
|
"$schema": "http://json-schema.org/schema",
|
|
"$id": "GeneratorReactHost",
|
|
"cli": "nx",
|
|
"title": "Generate Module Federation Setup for React Host App",
|
|
"description": "Create Module Federation configuration files for given React Host Application.",
|
|
"type": "object",
|
|
"properties": {
|
|
"name": {
|
|
"type": "string",
|
|
"description": "The name of the host application to generate the Module Federation configuration",
|
|
"$default": { "$source": "argv", "index": 0 },
|
|
"x-prompt": "What name would you like to use as the host application?",
|
|
"pattern": "^[a-zA-Z].*$"
|
|
},
|
|
"directory": {
|
|
"description": "The directory of the new application.",
|
|
"type": "string",
|
|
"alias": "dir"
|
|
},
|
|
"style": {
|
|
"description": "The file extension to be used for style files.",
|
|
"type": "string",
|
|
"default": "css",
|
|
"alias": "s",
|
|
"x-prompt": {
|
|
"message": "Which stylesheet format would you like to use?",
|
|
"type": "list",
|
|
"items": [
|
|
{ "value": "css", "label": "CSS" },
|
|
{
|
|
"value": "scss",
|
|
"label": "SASS(.scss) [ http://sass-lang.com ]"
|
|
},
|
|
{
|
|
"value": "styl",
|
|
"label": "Stylus(.styl) [ http://stylus-lang.com ]"
|
|
},
|
|
{
|
|
"value": "less",
|
|
"label": "LESS [ http://lesscss.org ]"
|
|
},
|
|
{
|
|
"value": "styled-components",
|
|
"label": "styled-components [ https://styled-components.com ]"
|
|
},
|
|
{
|
|
"value": "@emotion/styled",
|
|
"label": "emotion [ https://emotion.sh ]"
|
|
},
|
|
{
|
|
"value": "styled-jsx",
|
|
"label": "styled-jsx [ https://www.npmjs.com/package/styled-jsx ]"
|
|
},
|
|
{ "value": "none", "label": "None" }
|
|
]
|
|
}
|
|
},
|
|
"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
|
|
},
|
|
"skipWorkspaceJson": {
|
|
"description": "Skip updating workspace.json with default options based on values provided to this app (e.g. babel, style).",
|
|
"type": "boolean",
|
|
"default": false
|
|
},
|
|
"unitTestRunner": {
|
|
"type": "string",
|
|
"enum": ["jest", "none"],
|
|
"description": "Test runner to use for unit tests.",
|
|
"default": "jest"
|
|
},
|
|
"e2eTestRunner": {
|
|
"type": "string",
|
|
"enum": ["cypress", "none"],
|
|
"description": "Test runner to use for end to end (e2e) tests.",
|
|
"default": "cypress"
|
|
},
|
|
"tags": {
|
|
"type": "string",
|
|
"description": "Add tags to the application (used for linting).",
|
|
"alias": "t"
|
|
},
|
|
"pascalCaseFiles": {
|
|
"type": "boolean",
|
|
"description": "Use pascal case component file name (e.g. App.tsx).",
|
|
"alias": "P",
|
|
"default": false
|
|
},
|
|
"classComponent": {
|
|
"type": "boolean",
|
|
"description": "Use class components instead of functional component.",
|
|
"alias": "C",
|
|
"default": false
|
|
},
|
|
"js": {
|
|
"type": "boolean",
|
|
"description": "Generate JavaScript files rather than TypeScript files.",
|
|
"default": false
|
|
},
|
|
"globalCss": {
|
|
"type": "boolean",
|
|
"description": "Default is false. When true, the component is generated with *.css/*.scss instead of *.module.css/*.module.scss",
|
|
"default": false
|
|
},
|
|
"strict": {
|
|
"type": "boolean",
|
|
"description": "Creates an application with strict mode and strict type checking",
|
|
"default": true
|
|
},
|
|
"setParserOptionsProject": {
|
|
"type": "boolean",
|
|
"description": "Whether or not to configure the ESLint \"parserOptions.project\" option. We do not do this by default for lint performance reasons.",
|
|
"default": false
|
|
},
|
|
"standaloneConfig": {
|
|
"description": "Split the project configuration into <projectRoot>/project.json rather than including it inside workspace.json",
|
|
"type": "boolean"
|
|
},
|
|
"compiler": {
|
|
"type": "string",
|
|
"description": "The compiler to use",
|
|
"enum": ["babel", "swc"],
|
|
"default": "babel"
|
|
},
|
|
"remotes": {
|
|
"type": "array",
|
|
"description": "A list of remote application names that the host application should consume.",
|
|
"default": []
|
|
},
|
|
"devServerPort": {
|
|
"type": "number",
|
|
"description": "The port for the dev server of the remote app."
|
|
},
|
|
"ssr": {
|
|
"description": "Whether to configure SSR for the host application",
|
|
"type": "boolean",
|
|
"default": false
|
|
}
|
|
},
|
|
"required": ["name"],
|
|
"additionalProperties": false,
|
|
"presets": []
|
|
},
|
|
"x-type": "application",
|
|
"description": "Generate a host react application",
|
|
"implementation": "/packages/react/src/generators/host/host#hostGenerator.ts",
|
|
"aliases": [],
|
|
"hidden": false,
|
|
"path": "/packages/react/src/generators/host/schema.json"
|
|
},
|
|
{
|
|
"name": "remote",
|
|
"factory": "./src/generators/remote/remote#remoteGenerator",
|
|
"schema": {
|
|
"$schema": "http://json-schema.org/schema",
|
|
"$id": "GeneratorReactRemote",
|
|
"cli": "nx",
|
|
"title": "Generate Module Federation Setup for React Remote App",
|
|
"description": "Create Module Federation configuration files for given React Remote Application.",
|
|
"type": "object",
|
|
"properties": {
|
|
"name": {
|
|
"type": "string",
|
|
"description": "The name of the remote application to generate the Module Federation configuration",
|
|
"$default": { "$source": "argv", "index": 0 },
|
|
"x-prompt": "What name would you like to use as the remote application?",
|
|
"pattern": "^[a-zA-Z].*$"
|
|
},
|
|
"directory": {
|
|
"description": "The directory of the new application.",
|
|
"type": "string",
|
|
"alias": "dir"
|
|
},
|
|
"style": {
|
|
"description": "The file extension to be used for style files.",
|
|
"type": "string",
|
|
"default": "css",
|
|
"alias": "s",
|
|
"x-prompt": {
|
|
"message": "Which stylesheet format would you like to use?",
|
|
"type": "list",
|
|
"items": [
|
|
{ "value": "css", "label": "CSS" },
|
|
{
|
|
"value": "scss",
|
|
"label": "SASS(.scss) [ http://sass-lang.com ]"
|
|
},
|
|
{
|
|
"value": "styl",
|
|
"label": "Stylus(.styl) [ http://stylus-lang.com ]"
|
|
},
|
|
{
|
|
"value": "less",
|
|
"label": "LESS [ http://lesscss.org ]"
|
|
},
|
|
{
|
|
"value": "styled-components",
|
|
"label": "styled-components [ https://styled-components.com ]"
|
|
},
|
|
{
|
|
"value": "@emotion/styled",
|
|
"label": "emotion [ https://emotion.sh ]"
|
|
},
|
|
{
|
|
"value": "styled-jsx",
|
|
"label": "styled-jsx [ https://www.npmjs.com/package/styled-jsx ]"
|
|
},
|
|
{ "value": "none", "label": "None" }
|
|
]
|
|
}
|
|
},
|
|
"linter": {
|
|
"description": "The tool to use for running lint checks.",
|
|
"type": "string",
|
|
"enum": ["eslint"],
|
|
"default": "eslint"
|
|
},
|
|
"routing": {
|
|
"type": "boolean",
|
|
"description": "Generate application with routes.",
|
|
"default": false
|
|
},
|
|
"skipFormat": {
|
|
"description": "Skip formatting files.",
|
|
"type": "boolean",
|
|
"default": false
|
|
},
|
|
"skipWorkspaceJson": {
|
|
"description": "Skip updating workspace.json with default options based on values provided to this app (e.g. babel, style).",
|
|
"type": "boolean",
|
|
"default": false
|
|
},
|
|
"unitTestRunner": {
|
|
"type": "string",
|
|
"enum": ["jest", "none"],
|
|
"description": "Test runner to use for unit tests.",
|
|
"default": "jest"
|
|
},
|
|
"e2eTestRunner": {
|
|
"type": "string",
|
|
"enum": ["cypress", "none"],
|
|
"description": "Test runner to use for end to end (e2e) tests.",
|
|
"default": "cypress"
|
|
},
|
|
"tags": {
|
|
"type": "string",
|
|
"description": "Add tags to the application (used for linting).",
|
|
"alias": "t"
|
|
},
|
|
"pascalCaseFiles": {
|
|
"type": "boolean",
|
|
"description": "Use pascal case component file name (e.g. App.tsx).",
|
|
"alias": "P",
|
|
"default": false
|
|
},
|
|
"classComponent": {
|
|
"type": "boolean",
|
|
"description": "Use class components instead of functional component.",
|
|
"alias": "C",
|
|
"default": false
|
|
},
|
|
"js": {
|
|
"type": "boolean",
|
|
"description": "Generate JavaScript files rather than TypeScript files.",
|
|
"default": false
|
|
},
|
|
"globalCss": {
|
|
"type": "boolean",
|
|
"description": "Default is false. When true, the component is generated with *.css/*.scss instead of *.module.css/*.module.scss.",
|
|
"default": false
|
|
},
|
|
"strict": {
|
|
"type": "boolean",
|
|
"description": "Creates an application with strict mode and strict type checking.",
|
|
"default": true
|
|
},
|
|
"setParserOptionsProject": {
|
|
"type": "boolean",
|
|
"description": "Whether or not to configure the ESLint \"parserOptions.project\" option. We do not do this by default for lint performance reasons.",
|
|
"default": false
|
|
},
|
|
"standaloneConfig": {
|
|
"description": "Split the project configuration into <projectRoot>/project.json rather than including it inside workspace.json",
|
|
"type": "boolean"
|
|
},
|
|
"compiler": {
|
|
"type": "string",
|
|
"description": "The compiler to use.",
|
|
"enum": ["babel", "swc"],
|
|
"default": "babel"
|
|
},
|
|
"host": {
|
|
"type": "string",
|
|
"description": "The host / shell application for this remote."
|
|
},
|
|
"devServerPort": {
|
|
"type": "number",
|
|
"description": "The port for the dev server of the remote app."
|
|
},
|
|
"ssr": {
|
|
"description": "Whether to configure SSR for the host application",
|
|
"type": "boolean",
|
|
"default": false
|
|
}
|
|
},
|
|
"required": ["name"],
|
|
"additionalProperties": false,
|
|
"presets": []
|
|
},
|
|
"x-type": "application",
|
|
"description": "Generate a remote react application",
|
|
"implementation": "/packages/react/src/generators/remote/remote#remoteGenerator.ts",
|
|
"aliases": [],
|
|
"hidden": false,
|
|
"path": "/packages/react/src/generators/remote/schema.json"
|
|
},
|
|
{
|
|
"name": "cypress-component-configuration",
|
|
"factory": "./src/generators/cypress-component-configuration/cypress-component-configuration#cypressComponentConfigGenerator",
|
|
"schema": {
|
|
"$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?"
|
|
},
|
|
"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
|
|
},
|
|
"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
|
|
}
|
|
},
|
|
"required": ["project"],
|
|
"examplesFile": "{% callout type=\"caution\" title=\"Can I use component testing?\" %}\nReact component testing with Nx requires **Cypress version 10.7.0** and up.\n\nYou can migrate with to v10 via the [migrate-to-cypress-10 generator](/packages/cypress/generators/migrate-to-cypress-10).\n\nThis generator is for Cypress based component testing.\n\nIf you want to test components via Storybook with Cypress, then check out the [storybook-configuration generator docs](/packages/react/generators/storybook-configuration)\n{% /callout %}\n\nThis generator is designed to get your React project up and running with Cypress Component Testing.\n\n```shell\nnx g @nrwl/react:cypress-component-project --project=my-cool-react-project\n```\n\nRunning this generator, adds the required files to the specified project with a preconfigured `cypress.config.ts` designed for Nx workspaces.\n\n```ts {% fileName=\"cypress.config.ts\" %}\nimport { defineConfig } from 'cypress';\nimport { nxComponentTestingPreset } from '@nrwl/react/plugins/component-testing';\n\nexport default defineConfig({\n component: nxComponentTestingPreset(__filename),\n});\n```\n\nHere is an example on how to add custom options to the configuration\n\n```ts {% fileName=\"cypress.config.ts\" %}\nimport { defineConfig } from 'cypress';\nimport { nxComponentTestingPreset } from '@nrwl/react/plugins/component-testing';\n\nexport default defineConfig({\n component: {\n ...nxComponentTestingPreset(__filename),\n // extra options here\n },\n});\n```\n\n## Specifying a Build Target\n\nComponent testing requires a _build target_ to correctly run the component test dev server. This option can be manually specified with `--build-target=some-react-app:build`, but Nx will infer this usage from the [project graph](/concepts/mental-model#the-project-graph) if one isn't provided.\n\nFor React projects, the build target needs to be using the `@nrwl/webpack:webpack` executor.\nThe generator will throw an error if a build target can't be found and suggest passing one in manually.\n\nLetting Nx infer the build target by default\n\n```shell\nnx g @nrwl/react:cypress-component-project --project=my-cool-react-project\n```\n\nManually specifying the build target\n\n```shell\nnx g @nrwl/react:cypress-component-project --project=my-cool-react-project --build-target:some-react-app:build --generate-tests\n```\n\n{% callout type=\"note\" title=\"Build Target with Configuration\" %}\nIf you're wanting to use a build target with a specific configuration. i.e. `my-app:build:production`,\nthen manually providing `--build-target=my-app:build:production` is the best way to do that.\n{% /callout %}\n\n## Auto Generating Tests\n\nYou can optionally use the `--generate-tests` flag to generate a test file for each component in your project.\n\n```shell\nnx g @nrwl/react:cypress-component-project --project=my-cool-react-project --generate-tests\n```\n\n## Running Component Tests\n\nA new `component-test` target will be added to the specified project to run your component tests.\n\n```shell\nnx g component-test my-cool-react-project\n```\n\nHere is an example of the project configuration that is generated. The `--build-target` option is added as the `devServerTarget` which can be changed as needed.\n\n```json {% fileName=\"project.json\" %}\n{\n \"targets\" {\n \"component-test\": {\n \"executor\": \"@nrwl/cypress:cypress\",\n \"options\": {\n \"cypressConfig\": \"<path-to-project-root>/cypress.config.ts\",\n \"testingType\": \"component\",\n \"devServerTarget\": \"some-react-app:build\",\n \"skipServe\": true\n }\n }\n }\n}\n```\n\nNx also supports [Angular component testing](/packages/angular/generators/cypress-component-configuration).\n",
|
|
"presets": []
|
|
},
|
|
"description": "Setup Cypress component testing for a React project",
|
|
"hidden": false,
|
|
"implementation": "/packages/react/src/generators/cypress-component-configuration/cypress-component-configuration#cypressComponentConfigGenerator.ts",
|
|
"aliases": [],
|
|
"path": "/packages/react/src/generators/cypress-component-configuration/schema.json"
|
|
},
|
|
{
|
|
"name": "component-test",
|
|
"factory": "./src/generators/component-test/component-test#componentTestGenerator",
|
|
"schema": {
|
|
"$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?"
|
|
},
|
|
"componentPath": {
|
|
"type": "string",
|
|
"description": "Path to component, from the project source root",
|
|
"x-prompt": "What is the path to the component?"
|
|
}
|
|
},
|
|
"required": ["project", "componentPath"],
|
|
"examplesFile": "{% callout type=\"caution\" title=\"Can I use component testing?\" %}\nReact component testing with Nx requires **Cypress version 10** and up.\n\nYou can migrate with to v10 via the [migrate-to-cypress-10 generator](/packages/cypress/generators/migrate-to-cypress-10).\n\nThis generator is for Cypress based component testing.\n\nIf you're wanting to create Cypress tests for a Storybook story, then check out the [component-cypress-spec generator docs](/packages/react/generators/component-cypress-spec)\n\nIf you're wanting to create Storybook stories for a component, then check out the [stories generator docs](/packages/react/generators/stories) or [component-story generator docs](/packages/react/generators/component-cypress-spec)\n\n{% /callout %}\n\nThis generator is used to create a Cypress component test file for a given React component.\n\n```shell\nnx g @nrwl/react:component-test --project=my-cool-react-project --componentPath=src/my-fancy-button.tsx\n```\n\nTest file are generated with the `.cy.` suffix. this is to prevent colliding with any existing `.spec.` files contained in the project.\n\nIt's currently expected the generated `.cy.` file will live side by side with the component. It is also assumed the project is already setup for component testing. If it isn't, then you can run the [cypress-component-project generator](/packages/react/generators/cypress-component-configuration) to set up the project for component testing.\n",
|
|
"presets": []
|
|
},
|
|
"description": "Generate a Cypress component test for a React component",
|
|
"hidden": false,
|
|
"implementation": "/packages/react/src/generators/component-test/component-test#componentTestGenerator.ts",
|
|
"aliases": [],
|
|
"path": "/packages/react/src/generators/component-test/schema.json"
|
|
},
|
|
{
|
|
"name": "setup-tailwind",
|
|
"factory": "./src/generators/setup-tailwind/setup-tailwind#setupTailwindGenerator",
|
|
"schema": {
|
|
"$schema": "http://json-schema.org/schema",
|
|
"cli": "nx",
|
|
"$id": "NxReactTailwindSetupGenerator",
|
|
"title": "Configures Tailwind CSS for an application or a buildable/publishable library.",
|
|
"description": "Adds the Tailwind CSS configuration files for a given React project and installs, if needed, the packages required for Tailwind CSS to work.",
|
|
"type": "object",
|
|
"examples": [
|
|
{
|
|
"command": "nx g setup-tailwind --project=my-app",
|
|
"description": "Initialize Tailwind configuration for the `my-app` project."
|
|
}
|
|
],
|
|
"properties": {
|
|
"project": {
|
|
"type": "string",
|
|
"description": "The name of the project to add the Tailwind CSS setup for.",
|
|
"alias": "p",
|
|
"$default": { "$source": "argv", "index": 0 },
|
|
"x-dropdown": "projects",
|
|
"x-prompt": "What project would you like to add the Tailwind CSS setup?"
|
|
},
|
|
"buildTarget": {
|
|
"type": "string",
|
|
"description": "The name of the target used to build the project. This option is not needed in most cases.",
|
|
"default": "build"
|
|
},
|
|
"skipFormat": {
|
|
"type": "boolean",
|
|
"description": "Skips formatting the workspace after the generator completes."
|
|
},
|
|
"skipPackageJson": {
|
|
"type": "boolean",
|
|
"default": false,
|
|
"description": "Do not add dependencies to `package.json`."
|
|
}
|
|
},
|
|
"additionalProperties": false,
|
|
"required": ["project"],
|
|
"presets": []
|
|
},
|
|
"description": "Set up Tailwind configuration for a project.",
|
|
"hidden": false,
|
|
"implementation": "/packages/react/src/generators/setup-tailwind/setup-tailwind#setupTailwindGenerator.ts",
|
|
"aliases": [],
|
|
"path": "/packages/react/src/generators/setup-tailwind/schema.json"
|
|
},
|
|
{
|
|
"name": "setup-ssr",
|
|
"factory": "./src/generators/setup-ssr/setup-ssr#setupSsrGenerator",
|
|
"schema": {
|
|
"$schema": "http://json-schema.org/schema",
|
|
"$id": "GeneratorAngularUniversalSetup",
|
|
"cli": "nx",
|
|
"title": "Generate Angular Universal (SSR) setup for an Angular App",
|
|
"description": "Create the additional configuration required to enable SSR via Angular Universal for an Angular application.",
|
|
"type": "object",
|
|
"properties": {
|
|
"project": {
|
|
"type": "string",
|
|
"description": "The name of the application to add SSR support to.",
|
|
"$default": { "$source": "argv", "index": 0 },
|
|
"x-prompt": "What app would you like to add SSR support to?",
|
|
"x-dropdown": "projects"
|
|
},
|
|
"appComponentImportPath": {
|
|
"type": "string",
|
|
"description": "The import path of the <App/> component, relative to project sourceRoot.",
|
|
"default": "app/app"
|
|
},
|
|
"serverPort": {
|
|
"type": "number",
|
|
"default": 4200,
|
|
"description": "The port for the Express server."
|
|
},
|
|
"skipFormat": {
|
|
"type": "boolean",
|
|
"description": "Skip formatting the workspace after the generator completes."
|
|
},
|
|
"extraInclude": {
|
|
"type": "array",
|
|
"items": { "type": "string" },
|
|
"hidden": true,
|
|
"description": "Extra include entries in tsconfig.",
|
|
"default": []
|
|
}
|
|
},
|
|
"required": ["project"],
|
|
"additionalProperties": false,
|
|
"presets": []
|
|
},
|
|
"description": "Set up SSR configuration for a project.",
|
|
"hidden": false,
|
|
"implementation": "/packages/react/src/generators/setup-ssr/setup-ssr#setupSsrGenerator.ts",
|
|
"aliases": [],
|
|
"path": "/packages/react/src/generators/setup-ssr/schema.json"
|
|
}
|
|
],
|
|
"executors": [
|
|
{
|
|
"name": "module-federation-dev-server",
|
|
"implementation": "/packages/react/src/executors/module-federation-dev-server/module-federation-dev-server.impl.ts",
|
|
"schema": {
|
|
"version": 2,
|
|
"outputCapture": "direct-nodejs",
|
|
"title": "Module Federation Dev Server",
|
|
"description": "Serve a web application.",
|
|
"cli": "nx",
|
|
"type": "object",
|
|
"properties": {
|
|
"devRemotes": {
|
|
"type": "array",
|
|
"items": { "type": "string" },
|
|
"description": "List of remote applications to run in development mode (i.e. using serve target)."
|
|
},
|
|
"skipRemotes": {
|
|
"type": "array",
|
|
"items": { "type": "string" },
|
|
"description": "List of remote applications to not automatically serve, either statically or in development mode. This can be useful for multi-repository module federation setups where the host application uses a remote application from an external repository."
|
|
},
|
|
"buildTarget": {
|
|
"type": "string",
|
|
"description": "Target which builds the application."
|
|
},
|
|
"port": {
|
|
"type": "number",
|
|
"description": "Port to listen on.",
|
|
"default": 4200
|
|
},
|
|
"host": {
|
|
"type": "string",
|
|
"description": "Host to listen on.",
|
|
"default": "localhost"
|
|
},
|
|
"ssl": {
|
|
"type": "boolean",
|
|
"description": "Serve using `HTTPS`.",
|
|
"default": false
|
|
},
|
|
"sslKey": {
|
|
"type": "string",
|
|
"description": "SSL key to use for serving `HTTPS`."
|
|
},
|
|
"sslCert": {
|
|
"type": "string",
|
|
"description": "SSL certificate to use for serving `HTTPS`."
|
|
},
|
|
"watch": {
|
|
"type": "boolean",
|
|
"description": "Watches for changes and rebuilds application.",
|
|
"default": true
|
|
},
|
|
"liveReload": {
|
|
"type": "boolean",
|
|
"description": "Whether to reload the page on change, using live-reload.",
|
|
"default": true
|
|
},
|
|
"hmr": {
|
|
"type": "boolean",
|
|
"description": "Enable hot module replacement.",
|
|
"default": false
|
|
},
|
|
"publicHost": {
|
|
"type": "string",
|
|
"description": "Public URL where the application will be served."
|
|
},
|
|
"open": {
|
|
"type": "boolean",
|
|
"description": "Open the application in the browser.",
|
|
"default": false
|
|
},
|
|
"allowedHosts": {
|
|
"type": "string",
|
|
"description": "This option allows you to whitelist services that are allowed to access the dev server."
|
|
},
|
|
"memoryLimit": {
|
|
"type": "number",
|
|
"description": "Memory limit for type checking service process in `MB`."
|
|
},
|
|
"maxWorkers": {
|
|
"type": "number",
|
|
"description": "Number of workers to use for type checking."
|
|
},
|
|
"baseHref": {
|
|
"type": "string",
|
|
"description": "Base url for the application being built."
|
|
}
|
|
},
|
|
"presets": []
|
|
},
|
|
"description": "Serve a host or remote application.",
|
|
"aliases": [],
|
|
"hidden": false,
|
|
"path": "/packages/react/src/executors/module-federation-dev-server/schema.json"
|
|
}
|
|
]
|
|
}
|