typecheck svelte files in tests (#1319)

* typecheck svelte files in tests

* run svelte-check inside check script

* typecheck components

* leverage vite types

* reference vite/svelte types inside kit

* fix tests

* changeset

.changeset/large-lies-reply.md

@@ -0,0 +1,6 @@
+---
+'create-svelte': patch
+'@sveltejs/kit': patch
+---
+
+Reference Vite/Svelte types inside Kit types

packages/adapter-static/test/apps/prerendered/src/global.d.ts

@@ -1,3 +1 @@
 /// <reference types="@sveltejs/kit" />
-/// <reference types="svelte" />
-/// <reference types="vite/client" />

packages/adapter-static/test/apps/spa/src/global.d.ts

@@ -1,3 +1 @@
 /// <reference types="@sveltejs/kit" />
-/// <reference types="svelte" />
-/// <reference types="vite/client" />

packages/create-svelte/templates/default/src/global.d.ts

@@ -1,3 +1 @@
 /// <reference types="@sveltejs/kit" />
-/// <reference types="svelte" />
-/// <reference types="vite/client" />

packages/create-svelte/templates/skeleton/src/global.d.ts

@@ -1,3 +1 @@
 /// <reference types="@sveltejs/kit" />
-/// <reference types="svelte" />
-/// <reference types="vite/client" />

packages/kit/assets/components/error.svelte

@@ -1,4 +1,5 @@
 <script context="module">
+	/** @type {import('@sveltejs/kit').ErrorLoad} */
 	export function load({ error, status }) {
 		return {
 			props: { error, status }
@@ -7,7 +8,10 @@
 </script>
 
 <script>
+	/** @type {number} */
 	export let status;
+
+	/** @type {Error} */
 	export let error;
 </script>
 

packages/kit/package.json

@@ -12,6 +12,7 @@
 		"@sveltejs/kit": "workspace:*",
 		"@types/amphtml-validator": "^1.0.1",
 		"@types/cookie": "^0.4.0",
+		"@types/marked": "^2.0.2",
 		"@types/mime": "^2.0.3",
 		"@types/node": "^14.14.43",
 		"@types/rimraf": "^3.0.0",
@@ -29,6 +30,7 @@
 		"selfsigned": "^1.10.11",
 		"sirv": "^1.0.11",
 		"svelte": "^3.38.2",
+		"svelte-check": "^1.5.2",
 		"tiny-glob": "^0.2.8",
 		"typescript": "^4.2.4",
 		"uvu": "^0.5.1",
@@ -51,7 +53,7 @@
 		"dev": "rm -rf assets/runtime && rollup -cw",
 		"build": "rm -rf assets/runtime && rollup -c",
 		"lint": "eslint --ignore-path .gitignore \"src/**/*.{ts,mjs,js,svelte}\" && npm run check-format",
-		"check": "npx tsc",
+		"check": "tsc && svelte-check",
 		"format": "prettier --write . --config ../../.prettierrc --ignore-path .gitignore",
 		"check-format": "prettier --check . --config ../../.prettierrc --ignore-path .gitignore",
 		"prepublishOnly": "npm run build",

packages/kit/src/runtime/client/start.js

@@ -57,6 +57,8 @@ export async function start({ paths, target, session, host, route, spa, hydrate
 
 if (import.meta.env.VITE_SVELTEKIT_SERVICE_WORKER) {
 	if ('serviceWorker' in navigator) {
-		navigator.serviceWorker.register(import.meta.env.VITE_SVELTEKIT_SERVICE_WORKER);
+		navigator.serviceWorker.register(
+			/** @type {string} */ (import.meta.env.VITE_SVELTEKIT_SERVICE_WORKER)
+		);
 	}
 }

packages/kit/src/runtime/client/types.d.ts

@@ -1,5 +1,5 @@
-import { Page, LoadOutput } from '../../../types/page';
-import { CSRComponent, CSRRoute } from '../../../types/internal';
+import { Page } from '../../../types/page';
+import { CSRComponent, CSRRoute, NormalizedLoadOutput } from '../../../types/internal';
 
 export type NavigationInfo = {
 	id: string;
@@ -23,7 +23,7 @@ export type NavigationResult = {
 
 export type BranchNode = {
 	module: CSRComponent;
-	loaded: LoadOutput;
+	loaded: NormalizedLoadOutput;
 	uses: {
 		params: Set<string>;
 		path: boolean;

packages/kit/src/runtime/load.js

@@ -1,6 +1,6 @@
 /**
  * @param {import('types/page').LoadOutput} loaded
- * @returns {import('types/page').LoadOutput}
+ * @returns {import('types/internal').NormalizedLoadOutput}
  */
 export function normalize(loaded) {
 	// TODO should this behaviour be dev-only?
@@ -44,5 +44,5 @@ export function normalize(loaded) {
 		}
 	}
 
-	return loaded;
+	return /** @type {import('types/internal').NormalizedLoadOutput} */ (loaded);
 }

packages/kit/src/runtime/server/page/types.d.ts

@@ -1,9 +1,8 @@
-import { LoadOutput } from '../../../../types/page';
-import { SSRNode } from '../../../../types/internal';
+import { NormalizedLoadOutput, SSRNode } from '../../../../types/internal';
 
 export type Loaded = {
 	node: SSRNode;
-	loaded: LoadOutput;
+	loaded: NormalizedLoadOutput;
 	context: Record<string, any>;
 	fetched: Array<{ url: string; json: string }>;
 	uses_credentials: boolean;

packages/kit/test/ambient.d.ts

@@ -2,6 +2,10 @@ declare global {
 	interface Window {
 		navigated: Promise<void>;
 		started: boolean;
+
+		// used in tests
+		oops: string;
+		pageContext: any;
 	}
 
 	const goto: (

packages/kit/test/apps/amp/src/routes/host/index.svelte

@@ -1,4 +1,5 @@
 <script context="module">
+	/** @type {import('@sveltejs/kit').Load} */
 	export async function load({ page, fetch }) {
 		const res = await fetch('/host.json');
 		const data = await res.json();
@@ -15,10 +16,13 @@
 <script>
 	import { page } from '$app/stores';
 
+	/** @type {string} */
 	export let host;
+
+	/** @type {any} */
 	export let data;
 </script>
 
 <p data-source="load">{host}</p>
 <p data-source="store">{$page.host}</p>
-<p data-source="endpoint">{data.host}</p>
+<p data-source="endpoint">{data.host}</p>

packages/kit/test/apps/amp/src/routes/invalid/__tests__.js

@@ -8,9 +8,9 @@ export default function (test, is_dev) {
 			assert.equal(await page.textContent('h1'), 'AMP validation failed');
 
 			assert.ok(body.includes("The tag 'img' may only appear as a descendant of tag 'noscript'"));
-			assert.ok(body.includes('<img src="potato.jpg">'));
+			assert.ok(body.includes('<img alt="A potato." src="potato.jpg">'));
 		} else {
-			assert.ok(body.includes('<img src="potato.jpg">'));
+			assert.ok(body.includes('<img alt="A potato." src="potato.jpg">'));
 		}
 	});
 }

packages/kit/test/apps/amp/src/routes/invalid/index.svelte

@@ -1 +1 @@
-<img src="potato.jpg">
+<img alt="A potato." src="potato.jpg">

packages/kit/test/apps/amp/src/routes/valid/index.svelte

@@ -1,4 +1,5 @@
 <script context="module">
+	/** @type {import('@sveltejs/kit').Load} */
 	export async function load({ fetch }) {
 		const res = await fetch('/valid.json');
 		return {
@@ -9,6 +10,8 @@
 
 <script>
 	import { browser, dev, amp } from '$app/env';
+
+	/** @type {number} */
 	export let answer;
 </script>
 
@@ -20,4 +23,4 @@
 	p {
 		color: red;
 	}
-</style>
+</style>

packages/kit/test/apps/basics/src/routes/$error.svelte

@@ -10,6 +10,7 @@
 <script>
 	/** @type {number} */
 	export let status;
+
 	/** @type {Error} */
 	export let error;
 </script>

packages/kit/test/apps/basics/src/routes/$layout.svelte

@@ -18,6 +18,7 @@
 		Object.assign(window, { goto, invalidate, prefetch, prefetchRoutes });
 	}
 
+	/** @type {{ bar: string }} */
 	export let foo;
 </script>
 

packages/kit/test/apps/basics/src/routes/asset-import/index.svelte

@@ -4,4 +4,4 @@
 </script>
 
 <img alt="svelte" src={small}>
-<img alt="potatoes" src={large}>
+<img alt="potatoes" src={large}>

packages/kit/test/apps/basics/src/routes/caching/index.svelte

@@ -1,9 +1,10 @@
 <script context="module">
+	/** @type {import('@sveltejs/kit').Load} */
 	export async function load() {
 		return {
 			maxage: 30
 		};
 	}
 </script>
 
-<h1>this page will be cached for 30 seconds</h1>
+<h1>this page will be cached for 30 seconds</h1>

packages/kit/test/apps/basics/src/routes/caching/private/uses-fetch.svelte

@@ -1,6 +1,8 @@
 <script context="module">
+	/** @type {import('@sveltejs/kit').Load} */
 	export async function load({ page, fetch }) {
 		const res = await fetch('/caching/private/uses-fetch.json', {
+			// @ts-ignore
 			credentials: page.query.get('credentials')
 		});
 
@@ -11,4 +13,4 @@
 	}
 </script>
 
-<h1>this page will be cached for 30 seconds</h1>
+<h1>this page will be cached for 30 seconds</h1>

packages/kit/test/apps/basics/src/routes/caching/private/uses-session.svelte

@@ -1,11 +1,15 @@
 <script context="module">
+	/** @type {import('@sveltejs/kit').Load} */
 	export async function load({ session }) {
 		const session_exists = !!session;
 
 		return {
+			props: {
+				session_exists
+			},
 			maxage: 30
 		};
 	}
 </script>
 
-<h1>this page will be cached for 30 seconds</h1>
+<h1>this page will be cached for 30 seconds</h1>

packages/kit/test/apps/basics/src/routes/delete-route/index.svelte

@@ -1,4 +1,5 @@
 <script>
+	/** @type {string} */
 	let status;
 
 	function del() {

packages/kit/test/apps/basics/src/routes/errors/__tests__.js

@@ -202,7 +202,7 @@ export default function (test, is_dev) {
 		assert.equal(await page.textContent('#message'), 'This is your custom error page saying: ""');
 
 		const contents = await page.textContent('#stack');
-		const location = 'endpoint.svelte:11:15';
+		const location = 'endpoint.svelte:12:15';
 		const has_stack_trace = contents.includes(location);
 
 		if (is_dev) {

packages/kit/test/apps/basics/src/routes/errors/endpoint.svelte

@@ -1,4 +1,5 @@
 <script context="module">
+	/** @type {import('@sveltejs/kit').Load} */
 	export async function load({ fetch }) {
 		const res = await fetch('/errors/endpoint.json');
 		if (res.ok) {
@@ -8,7 +9,7 @@
 		} else {
 			return {
 				status: res.status,
-				error: new Error(await res.statusText)
+				error: new Error(res.statusText)
 			};
 		}
 	}

packages/kit/test/apps/basics/src/routes/errors/load-client.svelte

@@ -1,6 +1,7 @@
 <script context="module">
 	import { browser } from '$app/env';
 
+	/** @type {import('@sveltejs/kit').Load} */
 	export async function load() {
 		if (browser) {
 			throw new Error('Crashing now');

packages/kit/test/apps/basics/src/routes/errors/load-error-client.svelte

@@ -1,4 +1,5 @@
 <script context="module">
+	/** @type {import('@sveltejs/kit').Load} */
 	export async function load() {
 		if (typeof window !== 'undefined') {
 			return { status: 555, error: new Error('Not found') };

packages/kit/test/apps/basics/src/routes/errors/load-error-malformed-client.svelte

@@ -1,6 +1,8 @@
 <script context="module">
+	/** @type {import('@sveltejs/kit').Load} */
 	export async function load() {
 		if (typeof window !== 'undefined') {
+			// @ts-ignore
 			return { status: 555, error: {} };
 		}
 

packages/kit/test/apps/basics/src/routes/errors/load-error-malformed-server.svelte

@@ -1,5 +1,7 @@
 <script context="module">
+	/** @type {import('@sveltejs/kit').Load} */
 	export async function load() {
+		// @ts-ignore
 		return { status: 555, error: {} };
 	}
 </script>

packages/kit/test/apps/basics/src/routes/errors/load-error-server.svelte

@@ -1,4 +1,5 @@
 <script context="module">
+	/** @type {import('@sveltejs/kit').Load} */
 	export async function load() {
 		return { status: 555, error: new Error('Not found') };
 	}

packages/kit/test/apps/basics/src/routes/errors/load-error-string-server.svelte

@@ -1,4 +1,5 @@
 <script context="module">
+	/** @type {import('@sveltejs/kit').Load} */
 	export async function load() {
 		return { status: 555, error: 'Not found' };
 	}

packages/kit/test/apps/basics/src/routes/errors/load-server.svelte

@@ -1,4 +1,5 @@
 <script context="module">
+	/** @type {import('@sveltejs/kit').Load} */
 	export async function load() {
 		throw new Error('Crashing now');
 	}

packages/kit/test/apps/basics/src/routes/errors/nested-error-page/$error.svelte

@@ -1,4 +1,5 @@
 <script context="module">
+	/** @type {import('@sveltejs/kit').ErrorLoad} */
 	export async function load({ status, error }) {
 		return {
 			props: {
@@ -30,4 +31,4 @@
 	h1 {
 		color: blue;
 	}
-</style>
+</style>

packages/kit/test/apps/basics/src/routes/imports/markdown.svelte

@@ -2,4 +2,4 @@
 	import marked from 'marked';
 </script>
 
-<main>{@html marked('this is some **markdown**')}</main>
+<main>{@html marked('this is some **markdown**')}</main>

packages/kit/test/apps/basics/src/routes/load/[dynamic].svelte

@@ -1,4 +1,5 @@
 <script context="module">
+	/** @type {import('@sveltejs/kit').Load} */
 	export async function load({ page, fetch }) {
 		const res = await fetch(`/load/${page.params.dynamic}.json`);
 		return {
@@ -8,6 +9,7 @@
 </script>
 
 <script>
+	/** @type {string} */
 	export let name;
 </script>
 

packages/kit/test/apps/basics/src/routes/load/context/$layout.svelte

@@ -1,4 +1,5 @@
 <script context="module">
+	/** @type {import('@sveltejs/kit').Load} */
 	export async function load() {
 		return {
 			context: {
@@ -8,4 +9,4 @@
 	}
 </script>
 
-<slot></slot>
+<slot></slot>

packages/kit/test/apps/basics/src/routes/load/context/[x]/$layout.svelte

@@ -1,4 +1,5 @@
 <script context="module">
+	/** @type {import('@sveltejs/kit').Load} */
 	export async function load({ page, context }) {
 		return {
 			context: {
@@ -9,4 +10,4 @@
 	}
 </script>
 
-<slot></slot>
+<slot></slot>