Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

document generated tsconfig.json, move compilerOptions into user config #4633

Merged
merged 7 commits into from
Apr 18, 2022
Merged

document generated tsconfig.json, move compilerOptions into user config #4633

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
41e7002
document generated tsconfig.json
Rich-Harris Apr 15, 2022
64478c1
remove non-essential stuff, tweak description of importsNotUsedAsValues
Rich-Harris Apr 15, 2022
49d3c08
add user config
Rich-Harris Apr 15, 2022
d8a7dad
Merge branch 'master' into document-tsconfig
Rich-Harris Apr 15, 2022
7a3f3aa
update default jsconfig
Rich-Harris Apr 15, 2022
9777c7a
simplify generated tsconfig
Rich-Harris Apr 15, 2022
2bf8269
changeset
Rich-Harris Apr 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/sixty-seas-report.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'create-svelte': patch
---

[breaking] move non-essential TypeScript compilerOptions into user-editable config
49 changes: 47 additions & 2 deletions documentation/docs/15-types.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -38,7 +38,7 @@ export type RequestHandler<Body = any> = GenericRequestHandler<
export type Load<
InputProps extends Record<string, any> = Record<string, any>,
OutputProps extends Record<string, any> = 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:
Expand Down Expand Up @@ -74,3 +74,48 @@ 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": {
// 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
// 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
}
}
```
13 changes: 12 additions & 1 deletion packages/create-svelte/shared/+checkjs/jsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
}
16 changes: 15 additions & 1 deletion packages/create-svelte/shared/+typescript/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,17 @@
{
"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,
"strict": true,
"target": "es2020"
}
}
33 changes: 12 additions & 21 deletions packages/kit/src/core/sync/write_tsconfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/**'), './**']
Expand Down