Skip to content

Commit 2bb2ab0

Browse files
Rich-HarrisRich-Harris
authored
document generated tsconfig.json, move compilerOptions into user config (#4633)
* document generated tsconfig.json * remove non-essential stuff, tweak description of importsNotUsedAsValues * add user config * update default jsconfig * simplify generated tsconfig * changeset
1 parent d3d837b commit 2bb2ab0

File tree

5 files changed

+91
-25
lines changed

5 files changed

+91
-25
lines changed

‎.changeset/sixty-seas-report.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'create-svelte': patch
3+
---
4+
5+
[breaking] move non-essential TypeScript compilerOptions into user-editable config

‎documentation/docs/15-types.md‎

Lines changed: 47 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ title: Types
66

77
### Generated types
88

9-
The [`RequestHandler`](#sveltejs-kit-requesthandler) and [`Load`](#sveltejs-kit-load) types both accept a `Params` argument allowing you to type the `params` object. For example this endpoint expects `foo`, `bar` and `baz` params:
9+
The `RequestHandler` and `Load` types both accept a `Params` argument allowing you to type the `params` object. For example this endpoint expects `foo`, `bar` and `baz` params:
1010

1111
```js
1212
/// file: src/routes/[foo]/[bar]/[baz].js
@@ -38,7 +38,7 @@ export type RequestHandler<Body = any> = GenericRequestHandler<
3838
export type Load<
3939
InputProps extends Record<string, any> = Record<string, any>,
4040
OutputProps extends Record<string, any> = InputProps
41-
> = GenericLoad<{ foo: string; bar: string; baz: string }, InputProps, OutputProps>
41+
> = GenericLoad<{ foo: string; bar: string; baz: string }, InputProps, OutputProps>;
4242
```
4343

4444
These files can be imported into your endpoints and pages as siblings, thanks to the [`rootDirs`](https://www.typescriptlang.org/tsconfig#rootDirs) option in your TypeScript configuration:
@@ -74,3 +74,48 @@ export async function get({ params }) {
7474
> For this to work, your own `tsconfig.json` or `jsconfig.json` should extend from the generated `.svelte-kit/tsconfig.json` (where `.svelte-kit` is your [`outDir`](/docs/configuration#outdir)):
7575
>
7676
> { "extends": "./.svelte-kit/tsconfig.json" }
77+
78+
#### Default tsconfig.json
79+
80+
The generated `.svelte-kit/tsconfig.json` file contains a mixture of options. Some are generated programmatically based on your project configuration, and should generally not be overridden without good reason:
81+
82+
```json
83+
/// file: .svelte-kit/tsconfig.json
84+
{
85+
"compilerOptions": {
86+
"baseUrl": "..",
87+
"paths": {
88+
"$lib": "src/lib",
89+
"$lib/*": "src/lib/*"
90+
},
91+
"rootDirs": ["..", "./types"]
92+
},
93+
"include": ["../src/**/*.js", "../src/**/*.ts", "../src/**/*.svelte"],
94+
"exclude": ["../node_modules/**", "./**"]
95+
}
96+
```
97+
98+
Others are required for SvelteKit to work properly, and should also be left untouched unless you know what you're doing:
99+
100+
```json
101+
/// file: .svelte-kit/tsconfig.json
102+
{
103+
"compilerOptions": {
104+
// this ensures that types are explicitly
105+
// imported with `import type`, which is
106+
// necessary as svelte-preprocess cannot
107+
// otherwise compile components correctly
108+
"importsNotUsedAsValues": "error",
109+
110+
// Vite compiles one TypeScript module
111+
// at a time, rather than compiling
112+
// the entire module graph
113+
"isolatedModules": true,
114+
115+
// TypeScript cannot 'see' when you
116+
// use an imported value in your
117+
// markup, so we need this
118+
"preserveValueImports": true
119+
}
120+
}
121+
```

‎packages/create-svelte/shared/+checkjs/jsconfig.json‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,17 @@
11
{
22
"extends": "./.svelte-kit/tsconfig.json",
33
"compilerOptions": {
4-
"checkJs": true
4+
"allowJs": true,
5+
"checkJs": true,
6+
"esModuleInterop": true,
7+
"forceConsistentCasingInFileNames": true,
8+
"lib": ["es2020", "DOM"],
9+
"moduleResolution": "node",
10+
"module": "es2020",
11+
"resolveJsonModule": true,
12+
"skipLibCheck": true,
13+
"sourceMap": true,
14+
"strict": true,
15+
"target": "es2020"
516
}
617
}

‎packages/create-svelte/shared/+typescript/tsconfig.json‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,17 @@
11
{
2-
"extends": "./.svelte-kit/tsconfig.json"
2+
"extends": "./.svelte-kit/tsconfig.json",
3+
"compilerOptions": {
4+
"allowJs": true,
5+
"checkJs": true,
6+
"esModuleInterop": true,
7+
"forceConsistentCasingInFileNames": true,
8+
"lib": ["es2020", "DOM"],
9+
"moduleResolution": "node",
10+
"module": "es2020",
11+
"resolveJsonModule": true,
12+
"skipLibCheck": true,
13+
"sourceMap": true,
14+
"strict": true,
15+
"target": "es2020"
16+
}
317
}

‎packages/kit/src/core/sync/write_tsconfig.js‎

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -38,32 +38,23 @@ export function write_tsconfig(config) {
3838
JSON.stringify(
3939
{
4040
compilerOptions: {
41-
moduleResolution: 'node',
42-
module: 'es2020',
43-
lib: ['es2020', 'DOM'],
44-
target: 'es2020',
45-
// svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
46-
// to enforce using \`import type\` instead of \`import\` for Types.
47-
importsNotUsedAsValues: 'error',
48-
// TypeScript doesn't know about import usages in the template because it only sees the
49-
// script of a Svelte file. Therefore preserve all value imports. Requires TS 4.5 or higher.
50-
preserveValueImports: true,
51-
isolatedModules: true,
52-
resolveJsonModule: true,
53-
// To have warnings/errors of the Svelte compiler at the correct position,
54-
// enable source maps by default.
55-
sourceMap: true,
56-
esModuleInterop: true,
57-
skipLibCheck: true,
58-
forceConsistentCasingInFileNames: true,
41+
// generated options
5942
baseUrl: config_relative('.'),
60-
allowJs: true,
61-
checkJs: true,
6243
paths: {
6344
$lib: [project_relative(config.kit.files.lib)],
6445
'$lib/*': [project_relative(config.kit.files.lib + '/*')]
6546
},
66-
rootDirs: [config_relative('.'), './types']
47+
rootDirs: [config_relative('.'), './types'],
48+
49+
// essential options
50+
// svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
51+
// to enforce using \`import type\` instead of \`import\` for Types.
52+
importsNotUsedAsValues: 'error',
53+
// Vite compiles modules one at a time
54+
isolatedModules: true,
55+
// TypeScript doesn't know about import usages in the template because it only sees the
56+
// script of a Svelte file. Therefore preserve all value imports. Requires TS 4.5 or higher.
57+
preserveValueImports: true
6758
},
6859
include,
6960
exclude: [config_relative('node_modules/**'), './**']

0 commit comments

Comments
 (0)