feat(react): support generating components using the path as provided (…

…#19608)
nrwl · Oct 16, 2023 · 513e234 · 513e234 · vercel · Oct 16, 2023
1 parent c727a22
commit 513e234
Show file tree

Hide file tree

Showing 40 changed files with 654 additions and 385 deletions.
diff --git a/docs/generated/packages/expo/generators/component.json b/docs/generated/packages/expo/generators/component.json
@@ -1,6 +1,6 @@
 {
   "name": "component",
-  "factory": "./src/generators/component/component#expoComponentGenerator",
+  "factory": "./src/generators/component/component#expoComponentGeneratorInternal",
   "schema": {
     "cli": "nx",
     "$id": "NxExpoComponent",
@@ -23,7 +23,7 @@
         "description": "The name of the project.",
         "alias": "p",
         "$default": { "$source": "projectName" },
-        "x-prompt": "What is the name of the project for this component?"
+        "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v18."
       },
       "name": {
         "type": "string",
@@ -49,13 +49,19 @@
       },
       "directory": {
         "type": "string",
-        "description": "Create the component under this directory (can be nested).",
+        "description": "The directory at which to create the component file. When `--nameAndDirectoryFormat=as-provided`, it will be relative to the current working directory. Otherwise, it will be relative to the project root.",
         "x-priority": "important"
       },
+      "nameAndDirectoryFormat": {
+        "description": "Whether to generate the component in the directory as provided, relative to the current working directory and ignoring the project (`as-provided`) or generate it using the project and directory relative to the workspace root (`derived`).",
+        "type": "string",
+        "enum": ["as-provided", "derived"]
+      },
       "flat": {
         "type": "boolean",
         "description": "Create component at the source root rather than its own directory.",
-        "default": false
+        "default": false,
+        "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v18."
       },
       "export": {
         "type": "boolean",
@@ -68,7 +74,8 @@
         "type": "boolean",
         "description": "Use pascal case component file name (e.g. App.tsx).",
         "alias": "P",
-        "default": false
+        "default": false,
+        "x-deprecated": "Provide the `name` in pascal-case and use the `as-provided` format. This option will be removed in Nx v18."
       },
       "classComponent": {
         "type": "boolean",
@@ -77,12 +84,12 @@
         "default": false
       }
     },
-    "required": ["name", "project"],
+    "required": ["name"],
     "presets": []
   },
   "description": "Create a component",
   "aliases": ["c"],
-  "implementation": "/packages/expo/src/generators/component/component#expoComponentGenerator.ts",
+  "implementation": "/packages/expo/src/generators/component/component#expoComponentGeneratorInternal.ts",
   "hidden": false,
   "path": "/packages/expo/src/generators/component/schema.json",
   "type": "generator"

diff --git a/docs/generated/packages/next/generators/component.json b/docs/generated/packages/next/generators/component.json
@@ -1,6 +1,6 @@
 {
   "name": "component",
-  "factory": "./src/generators/component/component#componentGenerator",
+  "factory": "./src/generators/component/component#componentGeneratorInternal",
   "schema": {
     "$schema": "http://json-schema.org/schema",
     "cli": "nx",
@@ -14,8 +14,7 @@
         "description": "The name of the project.",
         "alias": "p",
         "$default": { "$source": "projectName" },
-        "x-prompt": "What is the name of the project for this component?",
-        "x-priority": "important"
+        "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v18."
       },
       "name": {
         "type": "string",
@@ -66,10 +65,15 @@
       },
       "directory": {
         "type": "string",
-        "description": "Create the component under this directory (can be nested).",
+        "description": "The directory at which to create the component file. When `--nameAndDirectoryFormat=as-provided`, it will be relative to the current working directory. Otherwise, it will be relative to the project root.",
         "alias": "dir",
         "x-priority": "important"
       },
+      "nameAndDirectoryFormat": {
+        "description": "Whether to generate the component in the directory as provided, relative to the current working directory and ignoring the project (`as-provided`) or generate it using the project and directory relative to the workspace root (`derived`).",
+        "type": "string",
+        "enum": ["as-provided", "derived"]
+      },
       "export": {
         "type": "boolean",
         "description": "When true, the component is exported from the project index.ts (if it exists).",
@@ -84,19 +88,22 @@
       "flat": {
         "type": "boolean",
         "description": "Create component at the source root rather than its own directory.",
-        "default": false
+        "default": false,
+        "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v18."
       },
       "pascalCaseFiles": {
         "type": "boolean",
         "description": "Use pascal case component file name (e.g. `App.tsx`).",
         "alias": "P",
-        "default": false
+        "default": false,
+        "x-deprecated": "Provide the `name` in pascal-case and use the `as-provided` format. This option will be removed in Nx v18."
       },
       "pascalCaseDirectory": {
         "type": "boolean",
         "description": "Use pascal case directory name (e.g. `App/App.tsx`).",
         "alias": "R",
-        "default": false
+        "default": false,
+        "x-deprecated": "Provide the `directory` in pascal-case and use the `as-provided` format. This option will be removed in Nx v18."
       },
       "skipFormat": {
         "description": "Skip formatting files.",
@@ -105,12 +112,12 @@
         "x-priority": "internal"
       }
     },
-    "required": ["name", "project"],
+    "required": ["name"],
     "examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Create an app component\" %}\n\n```shell\nnx g component my-cmp --project=my-app\n```\n\n{% /tab %}\n{% tab label=\"Create a component without its own folder\" %}\n\nRunning the following will create a component under `apps/my-app/components/my-cmp.tsx` rather than `apps/my-app/components/my-cmp/my-cmp.tsx`.\n\n```shell\nnx g component my-cmp --flat --project=my-app\n```\n\n{% /tab %}\n{% tab label=\"Create component in a custom directory\" %}\n\nRunning the following will create a component under `apps/my-app/foo/my-cmp.tsx` rather than `apps/my-app/my-cmp/my-cmp.tsx`.\n\n```shell\nnx g component my-cmp --directory=foo --flat --project=my-app\n```\n\n{% /tab %}\n{% /tabs %}\n",
     "presets": []
   },
   "description": "Create a component.",
-  "implementation": "/packages/next/src/generators/component/component#componentGenerator.ts",
+  "implementation": "/packages/next/src/generators/component/component#componentGeneratorInternal.ts",
   "aliases": [],
   "hidden": false,
   "path": "/packages/next/src/generators/component/schema.json",

diff --git a/docs/generated/packages/next/generators/page.json b/docs/generated/packages/next/generators/page.json
@@ -1,6 +1,6 @@
 {
   "name": "page",
-  "factory": "./src/generators/page/page#pageGenerator",
+  "factory": "./src/generators/page/page#pageGeneratorInternal",
   "schema": {
     "$schema": "http://json-schema.org/schema",
     "cli": "nx",
@@ -14,8 +14,7 @@
         "description": "The name of the project.",
         "alias": "p",
         "$default": { "$source": "projectName" },
-        "x-prompt": "What is the name of the project for this component?",
-        "x-priority": "important"
+        "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v18."
       },
       "name": {
         "type": "string",
@@ -26,10 +25,15 @@
       },
       "directory": {
         "type": "string",
-        "description": "Create the page under this directory (can be nested). Will be created under `pages/`.",
+        "description": "The directory at which to create the page file. When `--nameAndDirectoryFormat=as-provided`, it will be relative to the current working directory. Otherwise, it will be relative to the project root.",
         "alias": "dir",
         "x-priority": "important"
       },
+      "nameAndDirectoryFormat": {
+        "description": "Whether to generate the component in the directory as provided, relative to the current working directory and ignoring the project (`as-provided`) or generate it using the project and directory relative to the workspace root (`derived`).",
+        "type": "string",
+        "enum": ["as-provided", "derived"]
+      },
       "style": {
         "description": "The file extension to be used for style files.",
         "type": "string",
@@ -84,7 +88,8 @@
       "flat": {
         "type": "boolean",
         "description": "Create component at the source root rather than its own directory.",
-        "default": false
+        "default": false,
+        "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. It will be removed in Nx v18."
       },
       "skipFormat": {
         "description": "Skip formatting files.",
@@ -93,12 +98,12 @@
         "x-priority": "internal"
       }
     },
-    "required": ["name", "project"],
+    "required": ["name"],
     "examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Create static page in an app\" %}\n\n```shell\nnx g page my-page --project=my-app\n```\n\n{% /tab %}\n{% tab label=\"Create dynamic page in an app\" %}\n\nThe following creates a page under `apps/my-app/pages/products/[id].tsx`.\n\n```shell\nnx g page \"[id]\" --project=my-app --directory=products\n```\n\n{% /tab %}\n\n{% /tabs %}\n",
     "presets": []
   },
   "description": "Create a page.",
-  "implementation": "/packages/next/src/generators/page/page#pageGenerator.ts",
+  "implementation": "/packages/next/src/generators/page/page#pageGeneratorInternal.ts",
   "aliases": [],
   "hidden": false,
   "path": "/packages/next/src/generators/page/schema.json",

diff --git a/docs/generated/packages/react-native/generators/component.json b/docs/generated/packages/react-native/generators/component.json
@@ -1,6 +1,6 @@
 {
   "name": "component",
-  "factory": "./src/generators/component/component#reactNativeComponentGenerator",
+  "factory": "./src/generators/component/component#reactNativeComponentGeneratorInternal",
   "schema": {
     "cli": "nx",
     "$id": "NxReactNativeApplication",
@@ -24,7 +24,7 @@
         "description": "The name of the project.",
         "alias": "p",
         "$default": { "$source": "projectName" },
-        "x-prompt": "What is the name of the project for this component?"
+        "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v18."
       },
       "name": {
         "type": "string",
@@ -44,13 +44,19 @@
       },
       "directory": {
         "type": "string",
-        "description": "Create the component under this directory (can be nested).",
+        "description": "The directory at which to create the component file. When `--nameAndDirectoryFormat=as-provided`, it will be relative to the current working directory. Otherwise, it will be relative to the project root.",
         "x-priority": "important"
       },
+      "nameAndDirectoryFormat": {
+        "description": "Whether to generate the component in the directory as provided, relative to the current working directory and ignoring the project (`as-provided`) or generate it using the project and directory relative to the workspace root (`derived`).",
+        "type": "string",
+        "enum": ["as-provided", "derived"]
+      },
       "flat": {
         "type": "boolean",
         "description": "Create component at the source root rather than its own directory.",
-        "default": false
+        "default": false,
+        "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v18."
       },
       "export": {
         "type": "boolean",
@@ -63,7 +69,8 @@
         "type": "boolean",
         "description": "Use pascal case component file name (e.g. `App.tsx`).",
         "alias": "P",
-        "default": false
+        "default": false,
+        "x-deprecated": "Provide the `name` in pascal-case and use the `as-provided` format. This option will be removed in Nx v18."
       },
       "classComponent": {
         "type": "boolean",
@@ -72,12 +79,12 @@
         "default": false
       }
     },
-    "required": ["name", "project"],
+    "required": ["name"],
     "presets": []
   },
   "description": "Create a React Native component.",
   "aliases": ["c"],
-  "implementation": "/packages/react-native/src/generators/component/component#reactNativeComponentGenerator.ts",
+  "implementation": "/packages/react-native/src/generators/component/component#reactNativeComponentGeneratorInternal.ts",
   "hidden": false,
   "path": "/packages/react-native/src/generators/component/schema.json",
   "type": "generator"

diff --git a/docs/generated/packages/react/generators/component.json b/docs/generated/packages/react/generators/component.json
@@ -1,31 +1,20 @@
 {
   "name": "component",
-  "factory": "./src/generators/component/component#componentGenerator",
+  "factory": "./src/generators/component/component#componentGeneratorInternal",
   "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?",
-        "x-priority": "important"
+        "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v18."
       },
       "name": {
         "type": "string",
@@ -81,14 +70,20 @@
       },
       "directory": {
         "type": "string",
-        "description": "Create the component under this directory (can be nested).",
+        "description": "The directory at which to create the component file. When `--nameAndDirectoryFormat=as-provided`, it will be relative to the current working directory. Otherwise, it will be relative to the project root.",
         "alias": "dir",
         "x-priority": "important"
       },
+      "nameAndDirectoryFormat": {
+        "description": "Whether to generate the component in the directory as provided, relative to the current working directory and ignoring the project (`as-provided`) or generate it using the project and directory relative to the workspace root (`derived`).",
+        "type": "string",
+        "enum": ["as-provided", "derived"]
+      },
       "flat": {
         "type": "boolean",
         "description": "Create component at the source root rather than its own directory.",
-        "default": false
+        "default": false,
+        "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v18."
       },
       "export": {
         "type": "boolean",
@@ -101,13 +96,15 @@
         "type": "boolean",
         "description": "Use pascal case component file name (e.g. `App.tsx`).",
         "alias": "P",
-        "default": false
+        "default": false,
+        "x-deprecated": "Provide the `name` in pascal-case and use the `as-provided` format. This option will be removed in Nx v18."
       },
       "pascalCaseDirectory": {
         "type": "boolean",
         "description": "Use pascal case directory name (e.g. `App/App.tsx`).",
         "alias": "R",
-        "default": false
+        "default": false,
+        "x-deprecated": "Provide the `directory` in pascal-case and use the `as-provided` format. This option will be removed in Nx v18."
       },
       "classComponent": {
         "type": "boolean",
@@ -140,12 +137,13 @@
         "x-priority": "internal"
       }
     },
-    "required": ["name", "project"],
+    "required": ["name"],
+    "examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Component\" %}\n\nCreate a component named `my-component` under the `libs/ui` project:\n\n```shell\nnx g @nx/react:component libs/ui/src/my-component\n```\n\n{% /tab %}\n\n{% tab label=\"Standalone Component\" %}\n\nCreate a class component named `my-component` under the `libs/ui` project:\n\n```shell\nnx g @nx/react:component libs/ui/src/my-component --classComponent\n```\n\n{% /tab %}\n",
     "presets": []
   },
   "description": "Create a React component.",
   "aliases": ["c"],
-  "implementation": "/packages/react/src/generators/component/component#componentGenerator.ts",
+  "implementation": "/packages/react/src/generators/component/component#componentGeneratorInternal.ts",
   "hidden": false,
   "path": "/packages/react/src/generators/component/schema.json",
   "type": "generator"