From 0cf7851cb35bf28674e4b155ddaad7d805bc9c2a Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Thu, 12 Jan 2023 12:02:17 +0100 Subject: [PATCH 1/3] fix: adjust `app.d.ts` to diminish confusion about imports closes #8276 --- .changeset/selfish-tools-prove.md | 5 +++ .../templates/default/src/app.d.ts | 16 ++++--- .../templates/skeleton/src/app.d.ts | 16 ++++--- .../templates/skeletonlib/src/app.d.ts | 18 +++++--- packages/kit/types/ambient.d.ts | 43 ++++++------------- 5 files changed, 52 insertions(+), 46 deletions(-) create mode 100644 .changeset/selfish-tools-prove.md diff --git a/.changeset/selfish-tools-prove.md b/.changeset/selfish-tools-prove.md new file mode 100644 index 000000000000..b2f05672fe83 --- /dev/null +++ b/.changeset/selfish-tools-prove.md @@ -0,0 +1,5 @@ +--- +'create-svelte': minor +--- + +fix: adjust `app.d.ts` to diminish confusion about imports diff --git a/packages/create-svelte/templates/default/src/app.d.ts b/packages/create-svelte/templates/default/src/app.d.ts index 26a9569bc40a..33ed87657a46 100644 --- a/packages/create-svelte/templates/default/src/app.d.ts +++ b/packages/create-svelte/templates/default/src/app.d.ts @@ -1,9 +1,15 @@ // See https://kit.svelte.dev/docs/types#app // for information about these interfaces // and what to do when importing types -declare namespace App { - // interface Error {} - // interface Locals {} - // interface PageData {} - // interface Platform {} +declare global { + namespace App { + // interface Error {} + // interface Locals {} + // interface PageData {} + // interface Platform {} + } } + +// This line ensures this file is treated as a module. +// It can be removed if you add an import to this file. +export default undefined; diff --git a/packages/create-svelte/templates/skeleton/src/app.d.ts b/packages/create-svelte/templates/skeleton/src/app.d.ts index 26a9569bc40a..33ed87657a46 100644 --- a/packages/create-svelte/templates/skeleton/src/app.d.ts +++ b/packages/create-svelte/templates/skeleton/src/app.d.ts @@ -1,9 +1,15 @@ // See https://kit.svelte.dev/docs/types#app // for information about these interfaces // and what to do when importing types -declare namespace App { - // interface Error {} - // interface Locals {} - // interface PageData {} - // interface Platform {} +declare global { + namespace App { + // interface Error {} + // interface Locals {} + // interface PageData {} + // interface Platform {} + } } + +// This line ensures this file is treated as a module. +// It can be removed if you add an import to this file. +export default undefined; diff --git a/packages/create-svelte/templates/skeletonlib/src/app.d.ts b/packages/create-svelte/templates/skeletonlib/src/app.d.ts index b9091cd1c51d..33ed87657a46 100644 --- a/packages/create-svelte/templates/skeletonlib/src/app.d.ts +++ b/packages/create-svelte/templates/skeletonlib/src/app.d.ts @@ -1,11 +1,15 @@ -/// - // See https://kit.svelte.dev/docs/types#app // for information about these interfaces // and what to do when importing types -declare namespace App { - // interface Error {} - // interface Locals {} - // interface PageData {} - // interface Platform {} +declare global { + namespace App { + // interface Error {} + // interface Locals {} + // interface PageData {} + // interface Platform {} + } } + +// This line ensures this file is treated as a module. +// It can be removed if you add an import to this file. +export default undefined; diff --git a/packages/kit/types/ambient.d.ts b/packages/kit/types/ambient.d.ts index a8bd4cf9fc06..98fdede92b39 100644 --- a/packages/kit/types/ambient.d.ts +++ b/packages/kit/types/ambient.d.ts @@ -2,41 +2,26 @@ * It's possible to tell SvelteKit how to type objects inside your app by declaring the `App` namespace. By default, a new project will have a file called `src/app.d.ts` containing the following: * * ```ts - * /// - * - * declare namespace App { - * interface Error {} - * interface Locals {} - * interface PageData {} - * interface Platform {} - * } - * ``` - * - * By populating these interfaces, you will gain type safety when using `event.locals`, `event.platform`, and `data` from `load` functions. - * - * Note that since it's an ambient declaration file, you have to be careful when using `import` statements. Once you add an `import` - * at the top level, the declaration file is no longer considered ambient and you lose access to these typings in other files. - * To avoid this, either use the `import(...)` function: - * - * ```ts - * interface Locals { - * user: import('$lib/types').User; - * } - * ``` - * Or wrap the namespace with `declare global`: - * ```ts - * import { User } from '$lib/types'; - * * declare global { * namespace App { - * interface Locals { - * user: User; - * } - * // ... + * // interface Error {} + * // interface Locals {} + * // interface PageData {} + * // interface Platform {} * } * } + * + * export default undefined; * ``` * + * By populating these interfaces, you will gain type safety when using `event.locals`, `event.platform`, and `data` from `load` functions. + * + * Note that since it's a declaration file, you have to be careful when using `import` statements. Once you add an `import` + * at the top level, the declaration file is no longer considered ambient, at which point you need to wrap `App` inside `declare global` + * to still be available throughout the app. Opposite to that is the behavior when there's no `import`, at which point having `declare global` + * _prevents_ the `App` types from being available. + * To safe you the headache of converting between the two this we provide a dummy `export` to force the file being a module. + * Do not remove it unless you have an `import` statement at the top level. */ declare namespace App { /** From 4dd8c73fde7b733986be61d7cbab3276ba30dfdc Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 13 Jan 2023 14:16:10 -0500 Subject: [PATCH 2/3] Apply suggestions from code review --- packages/create-svelte/templates/default/src/app.d.ts | 4 +--- packages/create-svelte/templates/skeleton/src/app.d.ts | 4 +--- packages/create-svelte/templates/skeletonlib/src/app.d.ts | 4 +--- 3 files changed, 3 insertions(+), 9 deletions(-) diff --git a/packages/create-svelte/templates/default/src/app.d.ts b/packages/create-svelte/templates/default/src/app.d.ts index 33ed87657a46..c760990a89d6 100644 --- a/packages/create-svelte/templates/default/src/app.d.ts +++ b/packages/create-svelte/templates/default/src/app.d.ts @@ -10,6 +10,4 @@ declare global { } } -// This line ensures this file is treated as a module. -// It can be removed if you add an import to this file. -export default undefined; +export {}; diff --git a/packages/create-svelte/templates/skeleton/src/app.d.ts b/packages/create-svelte/templates/skeleton/src/app.d.ts index 33ed87657a46..c760990a89d6 100644 --- a/packages/create-svelte/templates/skeleton/src/app.d.ts +++ b/packages/create-svelte/templates/skeleton/src/app.d.ts @@ -10,6 +10,4 @@ declare global { } } -// This line ensures this file is treated as a module. -// It can be removed if you add an import to this file. -export default undefined; +export {}; diff --git a/packages/create-svelte/templates/skeletonlib/src/app.d.ts b/packages/create-svelte/templates/skeletonlib/src/app.d.ts index 33ed87657a46..c760990a89d6 100644 --- a/packages/create-svelte/templates/skeletonlib/src/app.d.ts +++ b/packages/create-svelte/templates/skeletonlib/src/app.d.ts @@ -10,6 +10,4 @@ declare global { } } -// This line ensures this file is treated as a module. -// It can be removed if you add an import to this file. -export default undefined; +export {}; From 5c55377e4d2a680787590c1255fc9094ca733196 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 13 Jan 2023 14:18:59 -0500 Subject: [PATCH 3/3] Update packages/kit/types/ambient.d.ts --- packages/kit/types/ambient.d.ts | 7 ------- 1 file changed, 7 deletions(-) diff --git a/packages/kit/types/ambient.d.ts b/packages/kit/types/ambient.d.ts index 98fdede92b39..f781c274dcaa 100644 --- a/packages/kit/types/ambient.d.ts +++ b/packages/kit/types/ambient.d.ts @@ -15,13 +15,6 @@ * ``` * * By populating these interfaces, you will gain type safety when using `event.locals`, `event.platform`, and `data` from `load` functions. - * - * Note that since it's a declaration file, you have to be careful when using `import` statements. Once you add an `import` - * at the top level, the declaration file is no longer considered ambient, at which point you need to wrap `App` inside `declare global` - * to still be available throughout the app. Opposite to that is the behavior when there's no `import`, at which point having `declare global` - * _prevents_ the `App` types from being available. - * To safe you the headache of converting between the two this we provide a dummy `export` to force the file being a module. - * Do not remove it unless you have an `import` statement at the top level. */ declare namespace App { /**