Skip to content

Commit

Permalink
fix(vite): set root and path on dts plugin (#14964)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mandarini
mandarini committed Feb 14, 2023
1 parent 3914575 commit bff7869
Show file tree
Hide file tree
Showing 7 changed files with 147 additions and 44 deletions.
62 changes: 59 additions & 3 deletions docs/generated/packages/vite/documents/set-up-vite-manually.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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" %}
Expand All @@ -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';
Expand All @@ -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: '../../',
}),
],

Expand Down
62 changes: 59 additions & 3 deletions docs/shared/packages/vite/set-up-vite-manually.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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" %}
Expand All @@ -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';
Expand All @@ -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: '../../',
}),
],

Expand Down
6 changes: 3 additions & 3 deletions packages/vite/src/generators/configuration/__snapshots__/configuration.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand Down Expand Up @@ -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(),
Expand Down Expand Up @@ -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,
}),
],
Expand Down
44 changes: 12 additions & 32 deletions packages/vite/src/utils/__snapshots__/vite-config-edit-utils.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand Down Expand Up @@ -82,23 +82,20 @@ 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',
},
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}\\"]}
},
});
"
Expand Down Expand Up @@ -137,23 +134,20 @@ 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',
},
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}\\"]}
},
});
"
Expand Down Expand Up @@ -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,
}),
],
Expand Down Expand Up @@ -247,23 +241,20 @@ 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',
},
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: {
...{
Expand All @@ -279,36 +270,30 @@ 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';
"
/// <reference types=\\"vitest\\" />
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(),
viteTsConfigPaths({
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',
Expand All @@ -323,20 +308,15 @@ 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',
},
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}\\"]}
},
});
"
`;
Expand All @@ -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,
}),
],
Expand Down
2 changes: 1 addition & 1 deletion packages/vite/src/utils/generator-utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}),`
: '';
Expand Down
Loading

1 comment on commit bff7869

@vercel
Copy link

@vercel vercel bot commented on bff7869 Feb 14, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

nx-dev – ./

nx.dev
nx-five.vercel.app
nx-dev-nrwl.vercel.app
nx-dev-git-master-nrwl.vercel.app

Please sign in to comment.