write generated types to __types directories (#4705)

* import generated types from .d.ts file - fixes #4701 * write types to __types directory * update test fixtures * update template * update docs * changesets * Update .changeset/soft-months-fail.md * fix tests * remove incorrect files
sveltejs · May 19, 2022 · 0cabe77 · 0cabe77
1 parent e9216a5
commit 0cabe77
Show file tree

Hide file tree

Showing 21 changed files with 69 additions and 53 deletions.
diff --git a/.changeset/smart-nails-work.md b/.changeset/smart-nails-work.md
@@ -0,0 +1,5 @@
+---
+'create-svelte': patch
+---
+
+import generated types from `__types/index.d.ts` file
diff --git a/.changeset/soft-months-fail.md b/.changeset/soft-months-fail.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+[breaking] write generated types to `__types` directories
diff --git a/documentation/docs/15-types.md b/documentation/docs/15-types.md
@@ -26,7 +26,7 @@ Needless to say, this is cumbersome to write out, and less portable (if you were
 To solve this problem, SvelteKit generates `.d.ts` files for each of your endpoints and pages:
 
 ```ts
-/// file: .svelte-kit/types/src/routes/[foo]/[bar]/[baz].d.ts
+/// file: .svelte-kit/types/src/routes/[foo]/[bar]/__types/[baz].d.ts
 /// link: false
 import type { RequestHandler as GenericRequestHandler, Load as GenericLoad } from '@sveltejs/kit';
 
@@ -45,7 +45,7 @@ These files can be imported into your endpoints and pages as siblings, thanks to
 
 ```js
 /// file: src/routes/[foo]/[bar]/[baz].js
-// @filename: [baz].d.ts
+// @filename: __types/[baz].d.ts
 import type { RequestHandler as GenericRequestHandler, Load as GenericLoad } from '@sveltejs/kit';
 
 export type RequestHandler<Body = any> = GenericRequestHandler<
@@ -56,15 +56,15 @@ export type RequestHandler<Body = any> = GenericRequestHandler<
 // @filename: index.js
 // @errors: 2355
 // ---cut---
-/** @type {import('./[baz]').RequestHandler} */
+/** @type {import('./__types/[baz]').RequestHandler} */
 export async function get({ params }) {
 	// ...
 }
 ```
 
 ```svelte
 <script context="module">
-	/** @type {import('./[baz]').Load} */
+	/** @type {import('./__types/[baz]').Load} */
 	export async function load({ params, fetch, session, stuff }) {
 		// ...
 	}

diff --git a/packages/create-svelte/templates/default/src/routes/todos/index.ts b/packages/create-svelte/templates/default/src/routes/todos/index.ts
@@ -1,7 +1,7 @@
 import { api } from './_api';
-import type { RequestHandler } from './index';
+import type { RequestHandler } from './__types';
 
-/** @type {import('./index').RequestHandler} */
+/** @type {import('./__types').RequestHandler} */
 export const get: RequestHandler = async ({ locals }) => {
 	// locals.userid comes from src/hooks.js
 	const response = await api('get', `todos/${locals.userid}`);

diff --git a/packages/kit/src/core/sync/write_types.js b/packages/kit/src/core/sync/write_types.js
@@ -1,3 +1,4 @@
+import { rimraf } from '../../utils/filesystem.js';
 import { parse_route_id } from '../../utils/routing.js';
 import { write_if_changed } from './utils.js';
 
@@ -22,6 +23,8 @@ export type Load<
  * @param {import('types').ManifestData} manifest_data
  */
 export function write_types(config, manifest_data) {
+	rimraf(`${config.kit.outDir}/types`);
+
 	/** @type {Map<string, { params: string[], type: 'page' | 'endpoint' | 'both' }>} */
 	const shadow_types = new Map();
 
@@ -70,8 +73,11 @@ export function write_types(config, manifest_data) {
 
 		content.unshift(header(imports.join(', ')));
 
+		const parts = (key || 'index').split('/');
+		parts.push('__types', /** @type {string} */ (parts.pop()));
+
 		write_if_changed(
-			`${config.kit.outDir}/types/${key || 'index'}.d.ts`,
+			`${config.kit.outDir}/types/${parts.join('/')}.d.ts`,
 			content.join('\n').trim()
 		);
 	});

diff --git a/packages/kit/src/packaging/test/fixtures/emitTypes-false/expected/Test2.svelte b/packages/kit/src/packaging/test/fixtures/emitTypes-false/expected/Test2.svelte
@@ -1,6 +1,6 @@
 <script>
-    /**
-     * @type {import('./foo').Foo}
-     */
-    export let foo;
+	/**
+	 * @type {import('./foo').Foo}
+	 */
+	export let foo;
 </script>
diff --git a/packages/kit/src/packaging/test/fixtures/emitTypes-false/src/lib/Test2.svelte b/packages/kit/src/packaging/test/fixtures/emitTypes-false/src/lib/Test2.svelte
@@ -1,6 +1,6 @@
 <script>
-    /**
-     * @type {import('./foo').Foo}
-     */
-    export let foo;
+	/**
+	 * @type {import('./foo').Foo}
+	 */
+	export let foo;
 </script>
diff --git a/packages/kit/src/packaging/test/fixtures/exports-merge/expected/internal/Test.svelte b/packages/kit/src/packaging/test/fixtures/exports-merge/expected/internal/Test.svelte
@@ -1,6 +1,6 @@
 <script>
-    /**
-     * @type {import('./foo').Foo}
-     */
-    export let foo;
+	/**
+	 * @type {import('./foo').Foo}
+	 */
+	export let foo;
 </script>
diff --git a/packages/kit/src/packaging/test/fixtures/exports-merge/src/lib/internal/Test.svelte b/packages/kit/src/packaging/test/fixtures/exports-merge/src/lib/internal/Test.svelte
@@ -1,6 +1,6 @@
 <script>
-    /**
-     * @type {import('./foo').Foo}
-     */
-    export let foo;
+	/**
+	 * @type {import('./foo').Foo}
+	 */
+	export let foo;
 </script>
diff --git a/packages/kit/src/packaging/test/fixtures/exports-replace/expected/internal/Test.svelte b/packages/kit/src/packaging/test/fixtures/exports-replace/expected/internal/Test.svelte
@@ -1,6 +1,6 @@
 <script>
-    /**
-     * @type {import('./foo').Foo}
-     */
-    export let foo;
+	/**
+	 * @type {import('./foo').Foo}
+	 */
+	export let foo;
 </script>
diff --git a/packages/kit/src/packaging/test/fixtures/exports-replace/src/lib/internal/Test.svelte b/packages/kit/src/packaging/test/fixtures/exports-replace/src/lib/internal/Test.svelte
@@ -1,6 +1,6 @@
 <script>
-    /**
-     * @type {import('./foo').Foo}
-     */
-    export let foo;
+	/**
+	 * @type {import('./foo').Foo}
+	 */
+	export let foo;
 </script>
diff --git a/packages/kit/src/packaging/test/fixtures/javascript/expected/Test2.svelte b/packages/kit/src/packaging/test/fixtures/javascript/expected/Test2.svelte
@@ -1,6 +1,6 @@
 <script>
-    /**
-     * @type {import('./foo').Foo}
-     */
-    export let foo;
+	/**
+	 * @type {import('./foo').Foo}
+	 */
+	export let foo;
 </script>
diff --git a/packages/kit/src/packaging/test/fixtures/javascript/expected/internal/Test.svelte b/packages/kit/src/packaging/test/fixtures/javascript/expected/internal/Test.svelte
@@ -1,6 +1,6 @@
 <script>
-    /**
-     * @type {import('./foo').Foo}
-     */
-    export let foo;
+	/**
+	 * @type {import('./foo').Foo}
+	 */
+	export let foo;
 </script>
diff --git a/packages/kit/src/packaging/test/fixtures/javascript/src/lib/Test2.svelte b/packages/kit/src/packaging/test/fixtures/javascript/src/lib/Test2.svelte
@@ -1,6 +1,6 @@
 <script>
-    /**
-     * @type {import('./foo').Foo}
-     */
-    export let foo;
+	/**
+	 * @type {import('./foo').Foo}
+	 */
+	export let foo;
 </script>
diff --git a/packages/kit/src/packaging/test/fixtures/javascript/src/lib/internal/Test.svelte b/packages/kit/src/packaging/test/fixtures/javascript/src/lib/internal/Test.svelte
@@ -1,6 +1,6 @@
 <script>
-    /**
-     * @type {import('./foo').Foo}
-     */
-    export let foo;
+	/**
+	 * @type {import('./foo').Foo}
+	 */
+	export let foo;
 </script>
diff --git a/packages/kit/test/apps/basics/src/routes/encoded/[slug].svelte b/packages/kit/test/apps/basics/src/routes/encoded/[slug].svelte
@@ -1,5 +1,5 @@
 <script context="module">
-	/** @type {import('./[slug]').Load} */
+	/** @type {import('./__types/[slug]').Load} */
 	export function load({ url, params }) {
 		return {
 			props: {

diff --git a/packages/kit/test/apps/basics/src/routes/load/set-cookie-fetch/a.json.js b/packages/kit/test/apps/basics/src/routes/load/set-cookie-fetch/a.json.js
@@ -1,4 +1,4 @@
-/** @type {import('./a.json').RequestHandler} */
+/** @type {import('./__types/a.json').RequestHandler} */
 export function get({ url }) {
 	const answer = url.searchParams.get('answer') || '42';
 

diff --git a/packages/kit/test/apps/basics/src/routes/load/set-cookie-fetch/b.json.js b/packages/kit/test/apps/basics/src/routes/load/set-cookie-fetch/b.json.js
@@ -1,4 +1,4 @@
-/** @type {import('./b.json').RequestHandler} */
+/** @type {import('./__types/b.json').RequestHandler} */
 export function get({ request }) {
 	const cookie = request.headers.get('cookie');
 

diff --git a/packages/kit/test/apps/basics/src/routes/routing/params-in-handle/[x].js b/packages/kit/test/apps/basics/src/routes/routing/params-in-handle/[x].js
@@ -1,4 +1,4 @@
-/** @type {import('./[x]').RequestHandler} */
+/** @type {import('./__types/[x]').RequestHandler} */
 export function get({ locals }) {
 	return {
 		body: {

diff --git a/packages/kit/test/apps/basics/src/routes/routing/route-id/[x].svelte b/packages/kit/test/apps/basics/src/routes/routing/route-id/[x].svelte
@@ -1,5 +1,5 @@
 <script context="module">
-	/** @type {import('./[x]').Load} */
+	/** @type {import('./__types/[x]').Load} */
 	export function load({ routeId }) {
 		return {
 			props: { routeId }

diff --git a/packages/kit/test/prerendering/basics/src/routes/fetch-404.svelte b/packages/kit/test/prerendering/basics/src/routes/fetch-404.svelte
@@ -1,5 +1,5 @@
 <script context="module">
-	/** @type {import('./fetch-404').Load} */
+	/** @type {import('./__types/fetch-404').Load} */
 	export async function load({ fetch }) {
 		const { status } = await fetch('/missing.json');