diff --git a/docs/generated/packages/vite/documents/set-up-vite-manually.md b/docs/generated/packages/vite/documents/set-up-vite-manually.md index e5474155a369d..c2b9482440b0b 100644 --- a/docs/generated/packages/vite/documents/set-up-vite-manually.md +++ b/docs/generated/packages/vite/documents/set-up-vite-manually.md @@ -83,8 +83,62 @@ You need to use the [`vite-tsconfig-paths` plugin](https://www.npmjs.com/package If you are using React, you need to use the [`@vitejs/plugin-react` plugin](https://www.npmjs.com/package/@vitejs/plugin-react). +### DTS plugin + +If you are building a library, you need to use the [`vite-plugin-dts` plugin](https://www.npmjs.com/package/vite-plugin-dts) to generate the `.d.ts` files for your library. + +#### Skip diagnostics + +If you are building a library, you can set the `skipDiagnostics` option to `true` to speed up the build. This means that type diagnostic will be skipped during the build process. However, if there are some files with type errors which interrupt the build process, these files will not be emitted and `.d.ts` declaration files will not be generated. + +If you choose to skip diagnostics, here is what your `'vite-plugin-dts'` plugin setup will look like: + +```ts {% fileName="libs/my-lib/vite.config.ts" %} +... +import dts from 'vite-plugin-dts'; +import { join } from 'path'; +... +... +export default defineConfig({ + plugins: [ + ..., + dts({ + entryRoot: 'src', + tsConfigFilePath: join(__dirname, 'tsconfig.lib.json'), + skipDiagnostics: true, + }), +``` + +#### Do not skip diagnostics + +If you are building a library, and you want to make sure that all the files are type checked, you can set the `skipDiagnostics` option to `false` to make sure that all the files are type checked. This means that type diagnostic will be run during the build process. + +If you choose to enable diagnostics, here is what your `'vite-plugin-dts'` plugin setup will look like: + +```ts {% fileName="libs/my-lib/vite.config.ts" %} +... +import dts from 'vite-plugin-dts'; +... +... +export default defineConfig({ + plugins: [ + ..., + dts({ + root: '../../', + entryRoot: 'packages/one/src', + tsConfigFilePath: 'packages/one/tsconfig.lib.json', + include: ['packages/one/src/**/*.ts'], + outputDir: 'dist/packages/one', + skipDiagnostics: false, + }), +``` + +You can read more about the configuration options in the [`vite-plugin-dts` plugin documentation](https://www.npmjs.com/package/vite-plugin-dts)). + ### How your `vite.config.ts` looks like +#### For applications + Add a `vite.config.ts` file to the root of your project. If you are not using React, you can skip adding the `react` plugin, of course. ```ts {% fileName="apps/my-app/vite.config.ts" %} @@ -102,7 +156,9 @@ export default defineConfig({ }); ``` -If you are converting a library (rather than an application) to use vite, your `vite.config.ts` file should look like this: +#### For libraries + +If you are setting up a library (rather than an application) to use vite, your `vite.config.ts` file should look like this: ```ts {% fileName="libs/my-lib/vite.config.ts" %} import { defineConfig } from 'vite'; @@ -114,13 +170,13 @@ import { join } from 'path'; export default defineConfig({ plugins: [ dts({ + entryRoot: 'src', tsConfigFilePath: join(__dirname, 'tsconfig.lib.json'), - // Faster builds by skipping tests. Set this to false to enable type checking. skipDiagnostics: true, }), react(), viteTsConfigPaths({ - root: '../../../', + root: '../../', }), ], diff --git a/docs/shared/packages/vite/set-up-vite-manually.md b/docs/shared/packages/vite/set-up-vite-manually.md index e5474155a369d..c2b9482440b0b 100644 --- a/docs/shared/packages/vite/set-up-vite-manually.md +++ b/docs/shared/packages/vite/set-up-vite-manually.md @@ -83,8 +83,62 @@ You need to use the [`vite-tsconfig-paths` plugin](https://www.npmjs.com/package If you are using React, you need to use the [`@vitejs/plugin-react` plugin](https://www.npmjs.com/package/@vitejs/plugin-react). +### DTS plugin + +If you are building a library, you need to use the [`vite-plugin-dts` plugin](https://www.npmjs.com/package/vite-plugin-dts) to generate the `.d.ts` files for your library. + +#### Skip diagnostics + +If you are building a library, you can set the `skipDiagnostics` option to `true` to speed up the build. This means that type diagnostic will be skipped during the build process. However, if there are some files with type errors which interrupt the build process, these files will not be emitted and `.d.ts` declaration files will not be generated. + +If you choose to skip diagnostics, here is what your `'vite-plugin-dts'` plugin setup will look like: + +```ts {% fileName="libs/my-lib/vite.config.ts" %} +... +import dts from 'vite-plugin-dts'; +import { join } from 'path'; +... +... +export default defineConfig({ + plugins: [ + ..., + dts({ + entryRoot: 'src', + tsConfigFilePath: join(__dirname, 'tsconfig.lib.json'), + skipDiagnostics: true, + }), +``` + +#### Do not skip diagnostics + +If you are building a library, and you want to make sure that all the files are type checked, you can set the `skipDiagnostics` option to `false` to make sure that all the files are type checked. This means that type diagnostic will be run during the build process. + +If you choose to enable diagnostics, here is what your `'vite-plugin-dts'` plugin setup will look like: + +```ts {% fileName="libs/my-lib/vite.config.ts" %} +... +import dts from 'vite-plugin-dts'; +... +... +export default defineConfig({ + plugins: [ + ..., + dts({ + root: '../../', + entryRoot: 'packages/one/src', + tsConfigFilePath: 'packages/one/tsconfig.lib.json', + include: ['packages/one/src/**/*.ts'], + outputDir: 'dist/packages/one', + skipDiagnostics: false, + }), +``` + +You can read more about the configuration options in the [`vite-plugin-dts` plugin documentation](https://www.npmjs.com/package/vite-plugin-dts)). + ### How your `vite.config.ts` looks like +#### For applications + Add a `vite.config.ts` file to the root of your project. If you are not using React, you can skip adding the `react` plugin, of course. ```ts {% fileName="apps/my-app/vite.config.ts" %} @@ -102,7 +156,9 @@ export default defineConfig({ }); ``` -If you are converting a library (rather than an application) to use vite, your `vite.config.ts` file should look like this: +#### For libraries + +If you are setting up a library (rather than an application) to use vite, your `vite.config.ts` file should look like this: ```ts {% fileName="libs/my-lib/vite.config.ts" %} import { defineConfig } from 'vite'; @@ -114,13 +170,13 @@ import { join } from 'path'; export default defineConfig({ plugins: [ dts({ + entryRoot: 'src', tsConfigFilePath: join(__dirname, 'tsconfig.lib.json'), - // Faster builds by skipping tests. Set this to false to enable type checking. skipDiagnostics: true, }), react(), viteTsConfigPaths({ - root: '../../../', + root: '../../', }), ], diff --git a/packages/vite/src/generators/configuration/__snapshots__/configuration.spec.ts.snap b/packages/vite/src/generators/configuration/__snapshots__/configuration.spec.ts.snap index 4bb18ee5ea6fb..50ffa9f24b421 100644 --- a/packages/vite/src/generators/configuration/__snapshots__/configuration.spec.ts.snap +++ b/packages/vite/src/generators/configuration/__snapshots__/configuration.spec.ts.snap @@ -16,8 +16,8 @@ import { join } from 'path'; plugins: [ dts({ + entryRoot: 'src', tsConfigFilePath: join(__dirname, 'tsconfig.lib.json'), - // Faster builds by skipping tests. Set this to false to enable type checking. skipDiagnostics: true, }), react(), @@ -74,8 +74,8 @@ import { join } from 'path'; plugins: [ dts({ + entryRoot: 'src', tsConfigFilePath: join(__dirname, 'tsconfig.lib.json'), - // Faster builds by skipping tests. Set this to false to enable type checking. skipDiagnostics: true, }), react(), @@ -197,8 +197,8 @@ import { defineConfig } from 'vite'; }), ], dts({ + entryRoot: 'src', tsConfigFilePath: join(__dirname, 'tsconfig.lib.json'), - // Faster builds by skipping tests. Set this to false to enable type checking. skipDiagnostics: true, }), ], diff --git a/packages/vite/src/utils/__snapshots__/vite-config-edit-utils.spec.ts.snap b/packages/vite/src/utils/__snapshots__/vite-config-edit-utils.spec.ts.snap index 918d06fd87eff..ed16e969d42df 100644 --- a/packages/vite/src/utils/__snapshots__/vite-config-edit-utils.spec.ts.snap +++ b/packages/vite/src/utils/__snapshots__/vite-config-edit-utils.spec.ts.snap @@ -29,8 +29,8 @@ import { join } from 'path'; } },plugins: [ dts({ + entryRoot: 'src', tsConfigFilePath: join(__dirname, 'tsconfig.lib.json'), - // Faster builds by skipping tests. Set this to false to enable type checking. skipDiagnostics: true, }), react(), @@ -82,14 +82,13 @@ import { defineConfig } from 'vite'; }), ], dts({ + entryRoot: 'src', tsConfigFilePath: join(__dirname, 'tsconfig.lib.json'), - // Faster builds by skipping tests. Set this to false to enable type checking. skipDiagnostics: true, }), ], test: { - ...{ globals: true, cache: { dir: '../../node_modules/.vitest', @@ -97,8 +96,6 @@ import { defineConfig } from 'vite'; environment: 'jsdom', include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], }, - ...{\\"globals\\":true,\\"cache\\":{\\"dir\\":\\"../node_modules/.vitest\\"},\\"environment\\":\\"jsdom\\",\\"include\\":[\\"src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}\\"]} - }, }); " @@ -137,14 +134,13 @@ import { defineConfig } from 'vite'; }), ], dts({ + entryRoot: 'src', tsConfigFilePath: join(__dirname, 'tsconfig.lib.json'), - // Faster builds by skipping tests. Set this to false to enable type checking. skipDiagnostics: true, }), ], test: { - ...{ globals: true, cache: { dir: '../../node_modules/.vitest', @@ -152,8 +148,6 @@ import { defineConfig } from 'vite'; environment: 'jsdom', include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], }, - ...{\\"globals\\":true,\\"cache\\":{\\"dir\\":\\"../node_modules/.vitest\\"},\\"environment\\":\\"jsdom\\",\\"include\\":[\\"src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}\\"]} - }, }); " @@ -199,8 +193,8 @@ import { defineConfig } from 'vite'; }), ], dts({ + entryRoot: 'src', tsConfigFilePath: join(__dirname, 'tsconfig.lib.json'), - // Faster builds by skipping tests. Set this to false to enable type checking. skipDiagnostics: true, }), ], @@ -247,14 +241,13 @@ import { defineConfig } from 'vite'; }), ], dts({ + entryRoot: 'src', tsConfigFilePath: join(__dirname, 'tsconfig.lib.json'), - // Faster builds by skipping tests. Set this to false to enable type checking. skipDiagnostics: true, }), ], test: { - ...{ globals: true, cache: { dir: '../../node_modules/.vitest', @@ -262,8 +255,6 @@ import { defineConfig } from 'vite'; environment: 'jsdom', include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], }, - ...{\\"globals\\":true,\\"cache\\":{\\"dir\\":\\"../node_modules/.vitest\\"},\\"environment\\":\\"jsdom\\",\\"include\\":[\\"src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}\\"]} - }, build: { ...{ @@ -279,18 +270,19 @@ import { defineConfig } from 'vite'; exports[`ensureViteConfigIsCorrect should not do anything if cannot understand syntax of vite config 1`] = `"console.log('Unknown syntax')"`; exports[`ensureViteConfigIsCorrect should not do anything if project has everything setup already 1`] = ` -"import dts from 'vite-plugin-dts'; -import { join } from 'path'; -import { defineConfig } from 'vite'; +" + /// + import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import viteTsConfigPaths from 'vite-tsconfig-paths'; + import dts from 'vite-plugin-dts'; + import { join } from 'path'; export default defineConfig({ plugins: [ - ...[ dts({ + entryRoot: 'src', tsConfigFilePath: join(__dirname, 'tsconfig.lib.json'), - // Faster builds by skipping tests. Set this to false to enable type checking. skipDiagnostics: true, }), react(), @@ -298,17 +290,10 @@ import { defineConfig } from 'vite'; root: '../../../', }), ], - dts({ - tsConfigFilePath: join(__dirname, 'tsconfig.lib.json'), - // Faster builds by skipping tests. Set this to false to enable type checking. - skipDiagnostics: true, - }), - ], // Configuration for building your library. // See: https://vitejs.dev/guide/build.html#library-mode build: { - ...{ lib: { // Could also be a dictionary or array of multiple entry points. entry: 'src/index.ts', @@ -323,11 +308,8 @@ import { defineConfig } from 'vite'; external: ['react', 'react-dom', 'react/jsx-runtime'], }, }, - ...{\\"lib\\":{\\"entry\\":\\"src/index.ts\\",\\"name\\":\\"my-app\\",\\"fileName\\":\\"index\\",\\"formats\\":[\\"es\\",\\"cjs\\"]},\\"rollupOptions\\":{\\"external\\":[\\"'react', 'react-dom', 'react/jsx-runtime'\\"]}} - }, test: { - ...{ globals: true, cache: { dir: '../../../node_modules/.vitest', @@ -335,8 +317,6 @@ import { defineConfig } from 'vite'; environment: 'jsdom', include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], }, - ...{\\"globals\\":true,\\"cache\\":{\\"dir\\":\\"../node_modules/.vitest\\"},\\"environment\\":\\"jsdom\\",\\"include\\":[\\"src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}\\"]} - }, }); " `; @@ -357,8 +337,8 @@ import { defineConfig } from 'vite'; }), ], dts({ + entryRoot: 'src', tsConfigFilePath: join(__dirname, 'tsconfig.lib.json'), - // Faster builds by skipping tests. Set this to false to enable type checking. skipDiagnostics: true, }), ], diff --git a/packages/vite/src/utils/generator-utils.ts b/packages/vite/src/utils/generator-utils.ts index 7a2c469893e0b..3d46c7be76f99 100644 --- a/packages/vite/src/utils/generator-utils.ts +++ b/packages/vite/src/utils/generator-utils.ts @@ -491,8 +491,8 @@ export function createOrEditViteConfig( ? '' : options.includeLib ? `dts({ + entryRoot: 'src', tsConfigFilePath: join(__dirname, 'tsconfig.lib.json'), - // Faster builds by skipping tests. Set this to false to enable type checking. skipDiagnostics: true, }),` : ''; diff --git a/packages/vite/src/utils/test-files/test-vite-configs.ts b/packages/vite/src/utils/test-files/test-vite-configs.ts index 195e248f026dc..3a6a5147ce7c1 100644 --- a/packages/vite/src/utils/test-files/test-vite-configs.ts +++ b/packages/vite/src/utils/test-files/test-vite-configs.ts @@ -153,12 +153,14 @@ export const hasEverything = ` import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import viteTsConfigPaths from 'vite-tsconfig-paths'; + import dts from 'vite-plugin-dts'; + import { join } from 'path'; export default defineConfig({ plugins: [ dts({ + entryRoot: 'src', tsConfigFilePath: join(__dirname, 'tsconfig.lib.json'), - // Faster builds by skipping tests. Set this to false to enable type checking. skipDiagnostics: true, }), react(), @@ -245,8 +247,8 @@ export const testOptionObject = { }; export const dtsPlugin = `dts({ + entryRoot: 'src', tsConfigFilePath: join(__dirname, 'tsconfig.lib.json'), - // Faster builds by skipping tests. Set this to false to enable type checking. skipDiagnostics: true, }),`; export const dtsImportLine = `import dts from 'vite-plugin-dts';\nimport { join } from 'path';`; diff --git a/packages/vite/src/utils/vite-config-edit-utils.spec.ts b/packages/vite/src/utils/vite-config-edit-utils.spec.ts index 950cd41c5a6c9..9b22a626a9ba1 100644 --- a/packages/vite/src/utils/vite-config-edit-utils.spec.ts +++ b/packages/vite/src/utils/vite-config-edit-utils.spec.ts @@ -39,6 +39,7 @@ describe('ensureViteConfigIsCorrect', () => { pluginOption, testOption, testOptionObject, + '', { build: false, test: true, serve: false } ); const appFileContent = tree.read('apps/my-app/vite.config.ts', 'utf-8'); @@ -63,6 +64,7 @@ describe('ensureViteConfigIsCorrect', () => { pluginOption, testOption, testOptionObject, + '', { build: false, test: true, serve: false } ); const appFileContent = tree.read('apps/my-app/vite.config.ts', 'utf-8'); @@ -87,6 +89,7 @@ describe('ensureViteConfigIsCorrect', () => { pluginOption, testOption, testOptionObject, + '', { build: false, test: false, serve: false } ); const appFileContent = tree.read('apps/my-app/vite.config.ts', 'utf-8'); @@ -111,6 +114,7 @@ describe('ensureViteConfigIsCorrect', () => { pluginOption, testOption, testOptionObject, + '', { build: false, test: false, serve: false } ); const appFileContent = tree.read('apps/my-app/vite.config.ts', 'utf-8'); @@ -135,6 +139,7 @@ describe('ensureViteConfigIsCorrect', () => { pluginOption, testOption, testOptionObject, + '', { build: false, test: false, serve: false } ); const appFileContent = tree.read('apps/my-app/vite.config.ts', 'utf-8'); @@ -159,6 +164,7 @@ describe('ensureViteConfigIsCorrect', () => { pluginOption, testOption, testOptionObject, + '', { build: false, test: false, serve: false } ); const appFileContent = tree.read('apps/my-app/vite.config.ts', 'utf-8'); @@ -177,6 +183,7 @@ describe('ensureViteConfigIsCorrect', () => { pluginOption, testOption, testOptionObject, + '', { build: true, test: true, serve: true } ); const appFileContent = tree.read('apps/my-app/vite.config.ts', 'utf-8'); @@ -195,6 +202,7 @@ describe('ensureViteConfigIsCorrect', () => { pluginOption, testOption, testOptionObject, + '', { build: false, test: true, serve: true } ); const appFileContent = tree.read('apps/my-app/vite.config.ts', 'utf-8'); @@ -213,6 +221,7 @@ describe('ensureViteConfigIsCorrect', () => { pluginOption, testOption, testOptionObject, + '', { build: false, test: false, serve: true } ); const appFileContent = tree.read('apps/my-app/vite.config.ts', 'utf-8');