From 41e7002e14d84c359c573835503ebd07dbce33e5 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 15 Apr 2022 09:41:52 -0400 Subject: [PATCH 1/6] document generated tsconfig.json --- documentation/docs/15-types.md | 67 +++++++++++++++++++++++++++++++++- 1 file changed, 65 insertions(+), 2 deletions(-) diff --git a/documentation/docs/15-types.md b/documentation/docs/15-types.md index cdb341bedfdf..030a7aaac219 100644 --- a/documentation/docs/15-types.md +++ b/documentation/docs/15-types.md @@ -6,7 +6,7 @@ title: Types ### Generated types -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: +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: ```js /// file: src/routes/[foo]/[bar]/[baz].js @@ -38,7 +38,7 @@ export type RequestHandler = GenericRequestHandler< export type Load< InputProps extends Record = Record, OutputProps extends Record = InputProps -> = GenericLoad<{ foo: string; bar: string; baz: string }, InputProps, OutputProps> +> = GenericLoad<{ foo: string; bar: string; baz: string }, InputProps, OutputProps>; ``` 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,66 @@ export async function get({ params }) { > 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)): > > { "extends": "./.svelte-kit/tsconfig.json" } + +#### Default tsconfig.json + +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: + +```json +/// file: .svelte-kit/tsconfig.json +{ + "compilerOptions": { + "baseUrl": "..", + "paths": { + "$lib": "src/lib", + "$lib/*": "src/lib/*" + }, + "rootDirs": ["..", "./types"] + }, + "include": ["../src/**/*.js", "../src/**/*.ts", "../src/**/*.svelte"], + "exclude": ["../node_modules/**", "./**"] +} +``` + +Others are required for SvelteKit to work properly, and should also be left untouched unless you know what you're doing: + +```json +/// file: .svelte-kit/tsconfig.json +{ + "compilerOptions": { + // you must use `import type` to + // import types, rather than `import`, + // for svelte-preprocess to work + "importsNotUsedAsValues": "error", + + // Vite compiles one TypeScript module + // at a time, rather than compiling + // the entire module graph + "isolatedModules": true, + + // TypeScript cannot 'see' when you + // use an imported value in your + // markup, so we need this + "preserveValueImports": true + } +} +``` + +The remaining options are simply recommended defaults, included because they will make life easier. You can freely override these: + +```json +/// file: .svelte-kit/tsconfig.json +{ + "compilerOptions": { + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "lib": ["es2020", "DOM"], + "moduleResolution": "node", + "module": "es2020", + "resolveJsonModule": true, + "skipLibCheck": true, + "sourceMap": true, + "target": "es2020" + } +} +``` From 64478c1442ba93626c1a47debff339446a13f2df Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 15 Apr 2022 11:36:35 -0400 Subject: [PATCH 2/6] remove non-essential stuff, tweak description of importsNotUsedAsValues --- documentation/docs/15-types.md | 26 ++++---------------------- 1 file changed, 4 insertions(+), 22 deletions(-) diff --git a/documentation/docs/15-types.md b/documentation/docs/15-types.md index 030a7aaac219..fc5744348719 100644 --- a/documentation/docs/15-types.md +++ b/documentation/docs/15-types.md @@ -101,9 +101,10 @@ Others are required for SvelteKit to work properly, and should also be left unto /// file: .svelte-kit/tsconfig.json { "compilerOptions": { - // you must use `import type` to - // import types, rather than `import`, - // for svelte-preprocess to work + // this ensures that types are explicitly + // imported with `import type`, which is + // necessary as svelte-preprocess cannot + // otherwise compile components correctly "importsNotUsedAsValues": "error", // Vite compiles one TypeScript module @@ -118,22 +119,3 @@ Others are required for SvelteKit to work properly, and should also be left unto } } ``` - -The remaining options are simply recommended defaults, included because they will make life easier. You can freely override these: - -```json -/// file: .svelte-kit/tsconfig.json -{ - "compilerOptions": { - "esModuleInterop": true, - "forceConsistentCasingInFileNames": true, - "lib": ["es2020", "DOM"], - "moduleResolution": "node", - "module": "es2020", - "resolveJsonModule": true, - "skipLibCheck": true, - "sourceMap": true, - "target": "es2020" - } -} -``` From 49d3c085c72cd7a7129f1ec8196e7c0741e9e6f5 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 15 Apr 2022 11:37:01 -0400 Subject: [PATCH 3/6] add user config --- .../shared/+typescript/tsconfig.json | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/create-svelte/shared/+typescript/tsconfig.json b/packages/create-svelte/shared/+typescript/tsconfig.json index 81ff9770cd8a..b342f7630812 100644 --- a/packages/create-svelte/shared/+typescript/tsconfig.json +++ b/packages/create-svelte/shared/+typescript/tsconfig.json @@ -1,3 +1,16 @@ { - "extends": "./.svelte-kit/tsconfig.json" + "extends": "./.svelte-kit/tsconfig.json", + "compilerOptions": { + "allowJs": true, + "checkJs": true, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "lib": ["es2020", "DOM"], + "moduleResolution": "node", + "module": "es2020", + "resolveJsonModule": true, + "skipLibCheck": true, + "sourceMap": true, + "target": "es2020" + } } From 7a3f3aaebec1c720f3341a30d230233b4eed4366 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 15 Apr 2022 11:37:57 -0400 Subject: [PATCH 4/6] update default jsconfig --- .../create-svelte/shared/+checkjs/jsconfig.json | 13 ++++++++++++- .../create-svelte/shared/+typescript/tsconfig.json | 1 + 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/create-svelte/shared/+checkjs/jsconfig.json b/packages/create-svelte/shared/+checkjs/jsconfig.json index df77605d0d91..232d64722032 100644 --- a/packages/create-svelte/shared/+checkjs/jsconfig.json +++ b/packages/create-svelte/shared/+checkjs/jsconfig.json @@ -1,6 +1,17 @@ { "extends": "./.svelte-kit/tsconfig.json", "compilerOptions": { - "checkJs": true + "allowJs": true, + "checkJs": true, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "lib": ["es2020", "DOM"], + "moduleResolution": "node", + "module": "es2020", + "resolveJsonModule": true, + "skipLibCheck": true, + "sourceMap": true, + "strict": true, + "target": "es2020" } } diff --git a/packages/create-svelte/shared/+typescript/tsconfig.json b/packages/create-svelte/shared/+typescript/tsconfig.json index b342f7630812..232d64722032 100644 --- a/packages/create-svelte/shared/+typescript/tsconfig.json +++ b/packages/create-svelte/shared/+typescript/tsconfig.json @@ -11,6 +11,7 @@ "resolveJsonModule": true, "skipLibCheck": true, "sourceMap": true, + "strict": true, "target": "es2020" } } From 9777c7a1a266f83e50df955e6e4cb5323ab49a43 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 15 Apr 2022 11:42:17 -0400 Subject: [PATCH 5/6] simplify generated tsconfig --- packages/kit/src/core/sync/write_tsconfig.js | 33 +++++++------------- 1 file changed, 12 insertions(+), 21 deletions(-) diff --git a/packages/kit/src/core/sync/write_tsconfig.js b/packages/kit/src/core/sync/write_tsconfig.js index 8d3880131543..aa3fa7bae918 100644 --- a/packages/kit/src/core/sync/write_tsconfig.js +++ b/packages/kit/src/core/sync/write_tsconfig.js @@ -38,32 +38,23 @@ export function write_tsconfig(config) { JSON.stringify( { compilerOptions: { - moduleResolution: 'node', - module: 'es2020', - lib: ['es2020', 'DOM'], - target: 'es2020', - // svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript - // to enforce using \`import type\` instead of \`import\` for Types. - importsNotUsedAsValues: 'error', - // TypeScript doesn't know about import usages in the template because it only sees the - // script of a Svelte file. Therefore preserve all value imports. Requires TS 4.5 or higher. - preserveValueImports: true, - isolatedModules: true, - resolveJsonModule: true, - // To have warnings/errors of the Svelte compiler at the correct position, - // enable source maps by default. - sourceMap: true, - esModuleInterop: true, - skipLibCheck: true, - forceConsistentCasingInFileNames: true, + // generated options baseUrl: config_relative('.'), - allowJs: true, - checkJs: true, paths: { $lib: [project_relative(config.kit.files.lib)], '$lib/*': [project_relative(config.kit.files.lib + '/*')] }, - rootDirs: [config_relative('.'), './types'] + rootDirs: [config_relative('.'), './types'], + + // essential options + // svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript + // to enforce using \`import type\` instead of \`import\` for Types. + importsNotUsedAsValues: 'error', + // Vite compiles modules one at a time + isolatedModules: true, + // TypeScript doesn't know about import usages in the template because it only sees the + // script of a Svelte file. Therefore preserve all value imports. Requires TS 4.5 or higher. + preserveValueImports: true }, include, exclude: [config_relative('node_modules/**'), './**'] From 2bf82695bbb06c5183613ecf392bac4b760615c7 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 15 Apr 2022 11:42:58 -0400 Subject: [PATCH 6/6] changeset --- .changeset/sixty-seas-report.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/sixty-seas-report.md diff --git a/.changeset/sixty-seas-report.md b/.changeset/sixty-seas-report.md new file mode 100644 index 000000000000..ee94de00c64a --- /dev/null +++ b/.changeset/sixty-seas-report.md @@ -0,0 +1,5 @@ +--- +'create-svelte': patch +--- + +[breaking] move non-essential TypeScript compilerOptions into user-editable config