docs(bundling): fix the vite overview page (#13196)

docs/generated/packages/vite.json

@@ -11,7 +11,7 @@
       "id": "overview",
       "path": "/packages/vite",
       "file": "shared/vite-plugin",
-      "content": "The Nx plugin for [Vite](https://vitejs.dev/) and [Vitest](https://vitest.dev/).\n\n{% callout type=\"warning\" title=\"Early release plugin\" %}\nThis Nx plugin is in active development and may not be ready for real-world use. The planned release date for the stable plugin is December, 2022.\n{% /callout %}\n\n[Vite.js](https://vitejs.dev/) is a build tool that aims to provide a faster and leaner development experience for modern web projects.\n\nWhy should you use this plugin?\n\n- Instant dev server start\n- Lightning fast Hot-Module Reloading\n- _Fast_ builds using Vite.\n- Vite-powered tests with smart and instant watch mode\n\nRead more about Vite and Vitest in the [Vite documentation](https://vitejs.dev/).\n\n## Setting up Vite\n\nTo create a new workspace, run `npx create-nx-workspace@latest --preset=vite`.\n\n### Add Vite to an existing workspace\n\nTo add the Vite plugin to an existing workspace, run the following:\n\n{% tabs %}\n{% tab label=\"npm\" %}\n\n```shell\nnpm install -D @nrwl/vite\n```\n\n{% /tab %}\n{% tab label=\"yarn\" %}\n\n```shell\nyarn add -D @nrwl/vite\n```\n\n{% /tab %}\n{% tab label=\"pnpm\" %}\n\n```shell\npnpm install -D @nrwl/vite\n```\n\n{% /tab %}\n{% /tabs %}\n\n### Initialize Vite.js\n\nAfter you install the plugin, you need to initialize Vite.js. You can do this by running the `init` executor. This executor will make sure to install all the necessary dependencies.\n\n```bash\nnx g @nrwl/vite:init\n```\n\n{% callout type=\"note\" title=\"Choosing a framework\" %}\nYou will notice that the executor will ask you of the framework you are planning to use. This is just to make sure that the right dependencies are installed. You can always install manually any other dependencies you need.\n{% /callout %}\n\n## Using Vite.js in a React application\n\nYou can use the `@nrwl/vite:dev-server` and the `@nrwl/vite:build` executors to serve and build your React applications using Vite.js. To do this, you need to make a few adjustments to your application.\n\n{% github-repository url=\"https://github.com/mandarini/nx-recipes/tree/feat/react-vite-recipe/react-vite\" /%}\n\n### 1. Change the executors in your `project.json`\n\n#### The `serve` target\n\nIn your app's `project.json` file, change the executor of your `serve` target to use `@nrwl/vite:dev-server` and set it up with the following options:\n\n```json\n//...\n\"my-app\": {\n    \"targets\": {\n        //...\n        \"serve\": {\n            \"executor\": \"@nrwl/vite:dev-server\",\n            \"defaultConfiguration\": \"development\",\n            \"options\": {\n                \"buildTarget\": \"my-app:build\",\n                \"port\": 4200,\n            },\n            \"configurations\": {\n                ...\n            }\n        },\n    }\n}\n```\n\n{% callout type=\"note\" title=\"Other options\" %}\nYou do not have to set the `port` here, necessarily. You can also specify the port in the `vite.config.ts` file (see **Step 2** below).\nThe same goes for all other Vite.js options that you can find the [Vite.js documentation](https://vitejs.dev/config/). All these can be added in your `vite.config.ts` file.\n{% /callout %}\n\n#### The `build` target\n\nIn your app's `project.json` file, change the executor of your `build` target to use `@nrwl/vite:build` and set it up with the following options:\n\n```json\n//...\n\"my-app\": {\n    \"targets\": {\n        //...\n        \"build\": {\n        \"executor\": \"@nrwl/vite:build\",\n        ...\n        \"options\": {\n            \"outputPath\": \"dist/apps/my-app\"\n        },\n        \"configurations\": {\n                ...\n            }\n        },\n    }\n}\n```\n\n{% callout type=\"note\" title=\"Other options\" %}\nYou can specify more options in the `vite.config.ts` file (see **Step 2** below).\n{% /callout %}\n\n### 2. Configure Vite.js\n\nAdd a `vite.config.ts` file to the root of your app, and add the `'@vitejs/plugin-react'` plugin to it:\n\n```ts\n// eg. apps/my-app/vite.config.ts\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport ViteTsConfigPathsPlugin from 'vite-tsconfig-paths';\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    ViteTsConfigPathsPlugin({\n      root: '../../',\n      projects: ['tsconfig.base.json'],\n    }),\n  ],\n});\n```\n\n{% callout type=\"note\" title=\"The `root` path\" %}\nMake sure the `root` path in the `ViteTsConfigPathsPlugin` options is correct. It should be the path to the root of your workspace.\n{% /callout %}\n\nIn that config file, you can configure Vite.js as you would normally do. For more information, see the [Vite.js documentation](https://vitejs.dev/config/).\n\n### 3. Move `index.html` and point it to your app's entrypoint\n\nFirst of all, move your `index.html` file to the root of your app (eg. from `apps/my-app/src/index.html` to `apps/my-app/index.html`).\n\nThen, add a module `script` tag pointing to the `main.tsx` file of your app:\n\n```html\n...\n  <body>\n    <div id=\"root\"></div>\n    <script type=\"module\" src=\"src/main.tsx\"></script>\n  </body>\n</html>\n```\n\n### 4. Add a `public` folder\n\nYou can add a `public` folder to the root of your app. You can read more about the public folder in the [Vite.js documentation](https://vitejs.dev/guide/assets.html#the-public-directory). Use that folder as you would normally do.\n\n```treeview\nmyorg/\n├── apps/\n│   ├── my-app/\n│   │   ├── src/\n│   │   │   ├── app/\n│   │   │   ├── assets/\n│   │   │   ├── ...\n│   │   │   └── main.tsx\n│   │   ├── index.html\n│   │   ├── public/\n│   │   │   └── my-page.md\n│   │   ├── project.json\n│   │   ├── ...\n│   │   ├── tsconfig.app.json\n│   │   ├── tsconfig.json\n│   │   └── tsconfig.spec.json\n```\n\n### 5. Adjust your app's tsconfig.json\n\nChange your app's `tsconfig.json` (eg. `apps/my-app/tsconfig.json`) `compilerOptions` to the following:\n\n```json\n...\n  \"compilerOptions\": {\n    \"jsx\": \"react-jsx\",\n    \"allowJs\": false,\n    \"esModuleInterop\": false,\n    \"allowSyntheticDefaultImports\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"isolatedModules\": true,\n    \"lib\": [\"DOM\", \"DOM.Iterable\", \"ESNext\"],\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"Node\",\n    \"noEmit\": true,\n    \"resolveJsonModule\": true,\n    \"skipLibCheck\": true,\n    \"strict\": true,\n    \"target\": \"ESNext\",\n    \"types\": [\"vite/client\"],\n    \"useDefineForClassFields\": true\n  },\n...\n```\n\nYou can read more about the TypeScript compiler options in the [Vite.js documentation](https://vitejs.dev/guide/features.html#typescript-compiler-options).\n\n### 6. Use Vite.js!\n\nNow you can finally serve and build your app using Vite.js:\n\n#### Serve the app\n\n```\nnx serve my-app\n```\n\nor\n\n```\nnx run my-app:serve\n```\n\nNow, visit [http://localhost:4200](http://localhost:4200) to see your app running!\n\n#### Build the app\n\n```\nnx build my-app\n```\n\nor\n\n```\nnx run my-app:build\n```\n"
+      "content": "The Nx plugin for [Vite](https://vitejs.dev/) and [Vitest](https://vitest.dev/).\n\n{% callout type=\"warning\" title=\"Early release plugin\" %}\nThis Nx plugin is in active development and may not be ready for real-world use. The planned release date for the stable plugin is December, 2022.\n{% /callout %}\n\n[Vite.js](https://vitejs.dev/) is a build tool that aims to provide a faster and leaner development experience for modern web projects.\n\nWhy should you use this plugin?\n\n- Instant dev server start\n- Lightning fast Hot-Module Reloading\n- _Fast_ builds using Vite.\n- Vite-powered tests with smart and instant watch mode\n\nRead more about Vite and Vitest in the [Vite documentation](https://vitejs.dev/).\n\n## Setting up Vite\n\nTo create a new workspace, run `npx create-nx-workspace@latest --preset=vite`.\n\n### Add Vite to an existing workspace\n\nTo add the Vite plugin to an existing workspace, run the following:\n\n{% tabs %}\n{% tab label=\"npm\" %}\n\n```shell\nnpm install -D @nrwl/vite\n```\n\n{% /tab %}\n{% tab label=\"yarn\" %}\n\n```shell\nyarn add -D @nrwl/vite\n```\n\n{% /tab %}\n{% tab label=\"pnpm\" %}\n\n```shell\npnpm install -D @nrwl/vite\n```\n\n{% /tab %}\n{% /tabs %}\n\n### Initialize Vite.js\n\nAfter you install the plugin, you need to initialize Vite.js. You can do this by running the `init` executor. This executor will make sure to install all the necessary dependencies.\n\n```bash\nnx g @nrwl/vite:init\n```\n\n{% callout type=\"note\" title=\"Choosing a framework\" %}\nYou will notice that the executor will ask you of the framework you are planning to use. This is just to make sure that the right dependencies are installed. You can always install manually any other dependencies you need.\n{% /callout %}\n\n## Using Vite.js in your applications\n\nYou can use the `@nrwl/vite:dev-server` and the `@nrwl/vite:build` executors to serve and build your applications using Vite.js. To do this, you need to make a few adjustments to your application.\n\n{% github-repository url=\"https://github.com/mandarini/nx-recipes/tree/feat/react-vite-recipe/vite-example\" /%}\n\n### 1. Change the executors in your `project.json`\n\n#### The `serve` target\n\nIn your app's `project.json` file, change the executor of your `serve` target to use `@nrwl/vite:dev-server` and set it up with the following options:\n\n```json\n//...\n\"my-app\": {\n    \"targets\": {\n        //...\n        \"serve\": {\n            \"executor\": \"@nrwl/vite:dev-server\",\n            \"defaultConfiguration\": \"development\",\n            \"options\": {\n                \"buildTarget\": \"my-app:build\",\n                \"port\": 4200,\n            },\n            \"configurations\": {\n                ...\n            }\n        },\n    }\n}\n```\n\n{% callout type=\"note\" title=\"Other options\" %}\nYou do not have to set the `port` here, necessarily. You can also specify the port in the `vite.config.ts` file (see **Step 2** below).\nThe same goes for all other Vite.js options that you can find the [Vite.js documentation](https://vitejs.dev/config/). All these can be added in your `vite.config.ts` file.\n{% /callout %}\n\n#### The `build` target\n\nIn your app's `project.json` file, change the executor of your `build` target to use `@nrwl/vite:build` and set it up with the following options:\n\n```json\n//...\n\"my-app\": {\n    \"targets\": {\n        //...\n        \"build\": {\n        \"executor\": \"@nrwl/vite:build\",\n        ...\n        \"options\": {\n            \"outputPath\": \"dist/apps/my-app\"\n        },\n        \"configurations\": {\n                ...\n            }\n        },\n    }\n}\n```\n\n{% callout type=\"note\" title=\"Other options\" %}\nYou can specify more options in the `vite.config.ts` file (see **Step 2** below).\n{% /callout %}\n\n### 2. Configure Vite.js\n\n#### TypeScript paths\n\nYou need to use the [`vite-tsconfig-paths` plugin](https://www.npmjs.com/package/vite-tsconfig-paths) to make sure that your TypeScript paths are resolved correctly in your monorepo.\n\n#### React plugin\n\nIf you are using React, you need to use the [`@vitejs/plugin-react` plugin](https://www.npmjs.com/package/@vitejs/plugin-react).\n\n#### How your `vite.config.ts` looks like\n\nAdd a `vite.config.ts` file to the root of your app. If you are not using React, you can skip adding the `react` plugin, of course.\n\n```ts\n// eg. apps/my-app/vite.config.ts\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport ViteTsConfigPathsPlugin from 'vite-tsconfig-paths';\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    ViteTsConfigPathsPlugin({\n      root: '../../',\n      projects: ['tsconfig.base.json'],\n    }),\n  ],\n});\n```\n\n{% callout type=\"note\" title=\"The `root` path\" %}\nMake sure the `root` path in the `ViteTsConfigPathsPlugin` options is correct. It should be the path to the root of your workspace.\n{% /callout %}\n\nIn that config file, you can configure Vite.js as you would normally do. For more information, see the [Vite.js documentation](https://vitejs.dev/config/).\n\n#### Creating a root `vite.config.ts` file\n\nYou can create a `vite.config.ts` file to the root of your workspace, as well as at the root of each of your applications. This file is used to configure Vite. You can read more about the configuration options in the [Vite documentation](https://vitejs.dev/config/).\n\nThe root `vite.config.ts` file can be used for all applications, and you can place in there general configurations that would apply for all your apps using Vite in your workspace. The application-specific `vite.config.ts` files can be used to override the root configuration, or, for example, import framework-specific plugins (eg. the `'@vitejs/plugin-react'` for React apps). The application-specific configuration files extend (using [`mergeConfig`](https://vitejs.dev/guide/api-javascript.html#mergeconfig)) the root configuration file. You can adjust this behavior to your needs.\n\nSo, if you are using a root `vite.config.ts` file, you should adjust your code as follows:\n\n```ts\n// <workspace-root>vite.config.ts\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n  plugins: [],\n});\n```\n\nand then in your app's `vite.config.ts` file:\n\n```ts\n// eg. apps/my-app/vite.config.ts\nimport { mergeConfig } from 'vite';\nimport baseConfig from '../../vite.config';\nimport react from '@vitejs/plugin-react';\nimport ViteTsConfigPathsPlugin from 'vite-tsconfig-paths';\n\nexport default mergeConfig(baseConfig, {\n  plugins: [\n    react(),\n    ViteTsConfigPathsPlugin({\n      root: '../../',\n      projects: ['tsconfig.base.json'],\n    }),\n  ],\n});\n```\n\n### 3. Move `index.html` and point it to your app's entrypoint\n\nFirst of all, move your `index.html` file to the root of your app (eg. from `apps/my-app/src/index.html` to `apps/my-app/index.html`).\n\nThen, add a module `script` tag pointing to the `main.tsx` (or `main.ts`) file of your app:\n\n```html\n...\n  <body>\n    <div id=\"root\"></div>\n    <script type=\"module\" src=\"src/main.tsx\"></script>\n  </body>\n</html>\n```\n\n### 4. Add a `public` folder\n\nYou can add a `public` folder to the root of your app. You can read more about the public folder in the [Vite.js documentation](https://vitejs.dev/guide/assets.html#the-public-directory). Use that folder as you would normally do.\n\n```treeview\nmyorg/\n├── apps/\n│   ├── my-app/\n│   │   ├── src/\n│   │   │   ├── app/\n│   │   │   ├── assets/\n│   │   │   ├── ...\n│   │   │   └── main.tsx\n│   │   ├── index.html\n│   │   ├── public/\n│   │   │   └── my-page.md\n│   │   ├── project.json\n│   │   ├── ...\n│   │   ├── tsconfig.app.json\n│   │   ├── tsconfig.json\n│   │   └── tsconfig.spec.json\n```\n\n### 5. Adjust your app's tsconfig.json\n\nChange your app's `tsconfig.json` (eg. `apps/my-app/tsconfig.json`) `compilerOptions` to the following:\n\n#### For React apps\n\n```json\n...\n  \"compilerOptions\": {\n    \"jsx\": \"react-jsx\",\n    \"allowJs\": false,\n    \"esModuleInterop\": false,\n    \"allowSyntheticDefaultImports\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"isolatedModules\": true,\n    \"lib\": [\"DOM\", \"DOM.Iterable\", \"ESNext\"],\n    \"module\": \"ESNext\",\n    \"moduleResolution\": \"Node\",\n    \"noEmit\": true,\n    \"resolveJsonModule\": true,\n    \"skipLibCheck\": true,\n    \"strict\": true,\n    \"target\": \"ESNext\",\n    \"types\": [\"vite/client\"],\n    \"useDefineForClassFields\": true\n  },\n...\n```\n\n#### For Web apps\n\n```json\n...\n  \"compilerOptions\": {\n    \"target\": \"ESNext\",\n    \"useDefineForClassFields\": true,\n    \"module\": \"ESNext\",\n    \"lib\": [\"ESNext\", \"DOM\"],\n    \"moduleResolution\": \"Node\",\n    \"strict\": true,\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"esModuleInterop\": true,\n    \"noEmit\": true,\n    \"noUnusedLocals\": true,\n    \"noUnusedParameters\": true,\n    \"noImplicitReturns\": true,\n    \"skipLibCheck\": true,\n    \"types\": [\"vite/client\"]\n  },\n  \"include\": [\"src\"],\n...\n```\n\nYou can read more about the TypeScript compiler options in the [Vite.js documentation](https://vitejs.dev/guide/features.html#typescript-compiler-options).\n\n### 6. Use Vite.js!\n\nNow you can finally serve and build your app using Vite.js:\n\n#### Serve the app\n\n```\nnx serve my-app\n```\n\nor\n\n```\nnx run my-app:serve\n```\n\nNow, visit [http://localhost:4200](http://localhost:4200) to see your app running!\n\n#### Build the app\n\n```\nnx build my-app\n```\n\nor\n\n```\nnx run my-app:build\n```\n"
     }
   ],
   "generators": [