docs(cli): add generate task to cli documentation

docs/components/styling.md

@@ -32,7 +32,7 @@ export class ShadowComponent {}
 
 If you'd like to learn more about enabling and configuring the shadow DOM, see the [shadow field of the component api](./component.md#component-options).
 
-By default, components created with the [`stencil generate` command](../config/cli.md#stencil-generate-sub-folder) use the shadow DOM.
+By default, components created with the [`stencil generate` command](../config/cli.md#stencil-generate) use the shadow DOM.
 
 ### Styling with the Shadow DOM
 

docs/config/cli.md

@@ -40,6 +40,48 @@ Builds a Stencil project. The flags below are the available options for the `bui
 Performs a one-time generation of documentation for your project.
 For more information on documentation generation, please see the [Documentation Generation section](../documentation-generation/01-overview.md).
 
+## `stencil generate`
+
+Alias: `stencil g`
+
+Starts the interactive generator for a new Stencil component.
+The generator will ask you for a name for your component, and whether any stylesheets or testing files should be generated.
+
+If you wish to skip the interactive generator, a component tag name may be provided on the command line:
+```shell
+stencil generate my-new-component
+```
+
+All components will be generated within the `src/components` folder.
+Within `src/components`, a directory will be created with the same name as the component tag name you provided containing the generated files.
+For example, if you specify `page-home` as the component tag name, the files will be generated in `src/components/page-home`:
+```plain
+src
+└── components
+    └── page-home
+        ├── page-home.css
+        ├── page-home.e2e.ts
+        ├── page-home.spec.ts
+        └── page-home.tsx
+```
+
+It is also possible to specify one or more sub-folders to generate the component in.
+For example, if you specify `pages/page-home` as the component tag name, the files will be generated in `src/components/pages/page-home`:
+```shell
+stencil generate pages/page-home
+```
+The command above will result in the following directory structure:
+```plain
+src
+└── components
+    └── pages
+        └── page-home
+            ├── page-home.css
+            ├── page-home.e2e.ts
+            ├── page-home.spec.ts
+            └── page-home.tsx
+```
+
 ## `stencil test`
 
 Tests a Stencil project. The flags below are the available options for the `test` command.
@@ -59,8 +101,3 @@ Tests a Stencil project. The flags below are the available options for the `test
 |------|-------------|
 | `--help` | Display the help output explaining the different flags. | `-h` |
 | `--version` | Prints the current Stencil version. | `-v` |
-
-
-## `stencil generate <sub-folder>`
-
-Starts the interactive component generator. You can specify one or more sub-folders to generate the component in.

docs/introduction/03-getting-started.md

@@ -213,63 +213,6 @@ Declaring private functions like `getText` helps pull logic out of the `render()
 Any property decorated with `@Prop()` is also automatically watched for changes.
 If a user of our component were to change the element's `first`, `middle`, or `last` properties, our component would fire its `render()` function again, updating the displayed content.
 
-## Component Generator
-
-The `create-stencil` CLI can generate new components for you.
-If you used one of the starters, you can simply run the `generate` npm script in your project, which will start the interactive generator.
-
-```shell npm2yarn
-npm run generate
-```
-
-You can invoke the Stencil CLI directly with the `generate` command (`g` for short).
-
-```shell
-stencil generate
-# or
-stencil g
-```
-
-If you would like to run `stencil generate` outside of a Stencil project, it can be installed globally.
-To do so, prefix the command above with [`npx`](https://docs.npmjs.com/cli/v9/commands/npx), like so:
-```shell
-npx stencil generate
-```
-Running a command prefixed with `npx` will fetch the package for you automatically and prompt you to install it.
-Once installed, Stencil will run the task to scaffold a new component.
-
-You can optionally pass the component tag name directly to the command.
-The component tag name needs to be lowercase and contain at least one dash ('-').
-
-```sh npm2yarn
-stencil generate my-new-component
-```
-
-The generator will ask you which files to generate. 
-This allows you to bootstrap a stylesheet as well as spec and e2e tests along with the component file.
-
-All components will be generated within the `src/components` folder.
-Within that directory, a folder will be created with the same name as the component tag name you provided, and within that folder the files will be generated.
-It is also possible to specify one or multiple sub-folders to generate the component in.
-
-For example, if you specify `pages/page-home` as the component tag name, the files will be generated in `src/components/pages/page-home`.
-
-```shell
-stencil generate pages/page-home
-```
-
-```plain
-src
-└── components
-    └── pages
-        └── page-home
-            ├── page-home.css
-            ├── page-home.e2e.ts
-            ├── page-home.spec.ts
-            └── page-home.tsx
-```
-
-
 ## Updating Stencil
 
 To get the latest version of @stencil/core you can run:

versioned_docs/version-v4.0/components/styling.md

@@ -32,7 +32,7 @@ export class ShadowComponent {}
 
 If you'd like to learn more about enabling and configuring the shadow DOM, see the [shadow field of the component api](./component.md#component-options).
 
-By default, components created with the [`stencil generate` command](../config/cli.md#stencil-generate-sub-folder) use the shadow DOM.
+By default, components created with the [`stencil generate` command](../config/cli.md#stencil-generate) use the shadow DOM.
 
 ### Styling with the Shadow DOM
 

versioned_docs/version-v4.0/config/cli.md

@@ -40,6 +40,48 @@ Builds a Stencil project. The flags below are the available options for the `bui
 Performs a one-time generation of documentation for your project.
 For more information on documentation generation, please see the [Documentation Generation section](../documentation-generation/01-overview.md).
 
+## `stencil generate`
+
+Alias: `stencil g`
+
+Starts the interactive generator for a new Stencil component.
+The generator will ask you for a name for your component, and whether any stylesheets or testing files should be generated.
+
+If you wish to skip the interactive generator, a component tag name may be provided on the command line:
+```shell
+stencil generate my-new-component
+```
+
+All components will be generated within the `src/components` folder.
+Within `src/components`, a directory will be created with the same name as the component tag name you provided containing the generated files.
+For example, if you specify `page-home` as the component tag name, the files will be generated in `src/components/page-home`:
+```plain
+src
+└── components
+    └── page-home
+        ├── page-home.css
+        ├── page-home.e2e.ts
+        ├── page-home.spec.ts
+        └── page-home.tsx
+```
+
+It is also possible to specify one or more sub-folders to generate the component in.
+For example, if you specify `pages/page-home` as the component tag name, the files will be generated in `src/components/pages/page-home`:
+```shell
+stencil generate pages/page-home
+```
+The command above will result in the following directory structure:
+```plain
+src
+└── components
+    └── pages
+        └── page-home
+            ├── page-home.css
+            ├── page-home.e2e.ts
+            ├── page-home.spec.ts
+            └── page-home.tsx
+```
+
 ## `stencil test`
 
 Tests a Stencil project. The flags below are the available options for the `test` command.
@@ -59,8 +101,3 @@ Tests a Stencil project. The flags below are the available options for the `test
 |------|-------------|
 | `--help` | Display the help output explaining the different flags. | `-h` |
 | `--version` | Prints the current Stencil version. | `-v` |
-
-
-## `stencil generate <sub-folder>`
-
-Starts the interactive component generator. You can specify one or more sub-folders to generate the component in.

versioned_docs/version-v4.0/introduction/03-getting-started.md

@@ -213,63 +213,6 @@ Declaring private functions like `getText` helps pull logic out of the `render()
 Any property decorated with `@Prop()` is also automatically watched for changes.
 If a user of our component were to change the element's `first`, `middle`, or `last` properties, our component would fire its `render()` function again, updating the displayed content.
 
-## Component Generator
-
-The `create-stencil` CLI can generate new components for you.
-If you used one of the starters, you can simply run the `generate` npm script in your project, which will start the interactive generator.
-
-```shell npm2yarn
-npm run generate
-```
-
-You can invoke the Stencil CLI directly with the `generate` command (`g` for short).
-
-```shell
-stencil generate
-# or
-stencil g
-```
-
-If you would like to run `stencil generate` outside of a Stencil project, it can be installed globally.
-To do so, prefix the command above with [`npx`](https://docs.npmjs.com/cli/v9/commands/npx), like so:
-```shell
-npx stencil generate
-```
-Running a command prefixed with `npx` will fetch the package for you automatically and prompt you to install it.
-Once installed, Stencil will run the task to scaffold a new component.
-
-You can optionally pass the component tag name directly to the command.
-The component tag name needs to be lowercase and contain at least one dash ('-').
-
-```sh npm2yarn
-stencil generate my-new-component
-```
-
-The generator will ask you which files to generate. 
-This allows you to bootstrap a stylesheet as well as spec and e2e tests along with the component file.
-
-All components will be generated within the `src/components` folder.
-Within that directory, a folder will be created with the same name as the component tag name you provided, and within that folder the files will be generated.
-It is also possible to specify one or multiple sub-folders to generate the component in.
-
-For example, if you specify `pages/page-home` as the component tag name, the files will be generated in `src/components/pages/page-home`.
-
-```shell
-stencil generate pages/page-home
-```
-
-```plain
-src
-└── components
-    └── pages
-        └── page-home
-            ├── page-home.css
-            ├── page-home.e2e.ts
-            ├── page-home.spec.ts
-            └── page-home.tsx
-```
-
-
 ## Updating Stencil
 
 To get the latest version of @stencil/core you can run:

versioned_docs/version-v4.1/components/styling.md

@@ -32,7 +32,7 @@ export class ShadowComponent {}
 
 If you'd like to learn more about enabling and configuring the shadow DOM, see the [shadow field of the component api](./component.md#component-options).
 
-By default, components created with the [`stencil generate` command](../config/cli.md#stencil-generate-sub-folder) use the shadow DOM.
+By default, components created with the [`stencil generate` command](../config/cli.md#stencil-generate) use the shadow DOM.
 
 ### Styling with the Shadow DOM
 

versioned_docs/version-v4.1/config/cli.md

@@ -40,6 +40,48 @@ Builds a Stencil project. The flags below are the available options for the `bui
 Performs a one-time generation of documentation for your project.
 For more information on documentation generation, please see the [Documentation Generation section](../documentation-generation/01-overview.md).
 
+## `stencil generate`
+
+Alias: `stencil g`
+
+Starts the interactive generator for a new Stencil component.
+The generator will ask you for a name for your component, and whether any stylesheets or testing files should be generated.
+
+If you wish to skip the interactive generator, a component tag name may be provided on the command line:
+```shell
+stencil generate my-new-component
+```
+
+All components will be generated within the `src/components` folder.
+Within `src/components`, a directory will be created with the same name as the component tag name you provided containing the generated files.
+For example, if you specify `page-home` as the component tag name, the files will be generated in `src/components/page-home`:
+```plain
+src
+└── components
+    └── page-home
+        ├── page-home.css
+        ├── page-home.e2e.ts
+        ├── page-home.spec.ts
+        └── page-home.tsx
+```
+
+It is also possible to specify one or more sub-folders to generate the component in.
+For example, if you specify `pages/page-home` as the component tag name, the files will be generated in `src/components/pages/page-home`:
+```shell
+stencil generate pages/page-home
+```
+The command above will result in the following directory structure:
+```plain
+src
+└── components
+    └── pages
+        └── page-home
+            ├── page-home.css
+            ├── page-home.e2e.ts
+            ├── page-home.spec.ts
+            └── page-home.tsx
+```
+
 ## `stencil test`
 
 Tests a Stencil project. The flags below are the available options for the `test` command.
@@ -59,8 +101,3 @@ Tests a Stencil project. The flags below are the available options for the `test
 |------|-------------|
 | `--help` | Display the help output explaining the different flags. | `-h` |
 | `--version` | Prints the current Stencil version. | `-v` |
-
-
-## `stencil generate <sub-folder>`
-
-Starts the interactive component generator. You can specify one or more sub-folders to generate the component in.

versioned_docs/version-v4.1/introduction/03-getting-started.md

@@ -213,63 +213,6 @@ Declaring private functions like `getText` helps pull logic out of the `render()
 Any property decorated with `@Prop()` is also automatically watched for changes.
 If a user of our component were to change the element's `first`, `middle`, or `last` properties, our component would fire its `render()` function again, updating the displayed content.
 
-## Component Generator
-
-The `create-stencil` CLI can generate new components for you.
-If you used one of the starters, you can simply run the `generate` npm script in your project, which will start the interactive generator.
-
-```shell npm2yarn
-npm run generate
-```
-
-You can invoke the Stencil CLI directly with the `generate` command (`g` for short).
-
-```shell
-stencil generate
-# or
-stencil g
-```
-
-If you would like to run `stencil generate` outside of a Stencil project, it can be installed globally.
-To do so, prefix the command above with [`npx`](https://docs.npmjs.com/cli/v9/commands/npx), like so:
-```shell
-npx stencil generate
-```
-Running a command prefixed with `npx` will fetch the package for you automatically and prompt you to install it.
-Once installed, Stencil will run the task to scaffold a new component.
-
-You can optionally pass the component tag name directly to the command.
-The component tag name needs to be lowercase and contain at least one dash ('-').
-
-```sh npm2yarn
-stencil generate my-new-component
-```
-
-The generator will ask you which files to generate. 
-This allows you to bootstrap a stylesheet as well as spec and e2e tests along with the component file.
-
-All components will be generated within the `src/components` folder.
-Within that directory, a folder will be created with the same name as the component tag name you provided, and within that folder the files will be generated.
-It is also possible to specify one or multiple sub-folders to generate the component in.
-
-For example, if you specify `pages/page-home` as the component tag name, the files will be generated in `src/components/pages/page-home`.
-
-```shell
-stencil generate pages/page-home
-```
-
-```plain
-src
-└── components
-    └── pages
-        └── page-home
-            ├── page-home.css
-            ├── page-home.e2e.ts
-            ├── page-home.spec.ts
-            └── page-home.tsx
-```
-
-
 ## Updating Stencil
 
 To get the latest version of @stencil/core you can run: