vercel · feugy · Dec 8, 2023 · Dec 8, 2023
diff --git a/apps/sveltekit/.gitignore b/apps/sveltekit/.gitignore
@@ -6,7 +6,6 @@ node_modules
 .env
 .env.*
 !.env.example
-.vercel
-.output
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+.vercel
diff --git a/apps/sveltekit/README.md b/apps/sveltekit/README.md
@@ -1,38 +1,17 @@
-# create-svelte
+# Sveltekit Demo application for Vercel Speed-insights
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+## Setup
 
-## Creating a project
+This application was created with the following commands:
 
-If you're seeing this, you've probably already done this step. Congrats!
+- `cd apps`
+- `pnpm create svelte@latest sveltekit` (answers: Skeleton project, JavaScript with JSDoc, no additional option)
+- `cd sveltekit`
+- add `src/+layout.js` to include `import { injectSpeedInsights } from '@vercel/speed-insights/sveltekit'; injectSpeedInsights();`
+- edit package.json to add `"@vercel/speed-insights": "workspace:*"` dependency and change `@sveltejs/adapter-auto` into `@sveltejs/adapter-vercel`
+- eddi `svelte.config.js` to change `@sveltejs/adapter-auto` into `@sveltejs/adapter-vercel`
+- `pnpm i`
 
-```bash
-# create a new project in the current directory
-npm create svelte@latest
+## Usage
 
-# create a new project in my-app
-npm create svelte@latest my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-## Building
-
-To create a production version of your app:
-
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+Start it with `cd apps/sveltekit` + `pnpm dev` and browse to [http://localhost:5173](http://localhost:5173)
diff --git a/apps/sveltekit/tsconfig.json → apps/sveltekit/jsconfig.json b/apps/sveltekit/tsconfig.json → apps/sveltekit/jsconfig.json
@@ -8,9 +8,10 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "sourceMap": true,
-    "strict": true
+    "strict": true,
+    "moduleResolution": "bundler"
   }
-  // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+  // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files
   //
   // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
   // from the referenced tsconfig.json - TypeScript does not merge them in

diff --git a/apps/sveltekit/package.json b/apps/sveltekit/package.json
@@ -1,26 +1,21 @@
 {
   "name": "svelte",
   "version": "0.0.1",
+  "private": true,
   "type": "module",
   "scripts": {
     "build": "vite build",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
     "dev": "vite dev",
     "preview": "vite preview"
   },
-  "dependencies": {
-    "@vercel/speed-insights": "workspace:*"
-  },
   "devDependencies": {
-    "@fontsource/fira-mono": "^4.5.10",
-    "@neoconfetti/svelte": "^1.0.0",
-    "@sveltejs/adapter-auto": "^2.0.0",
-    "@sveltejs/kit": "^1.20.4",
-    "@types/cookie": "^0.5.1",
-    "svelte": "^4.0.5",
-    "svelte-check": "^3.4.3",
-    "tslib": "^2.4.1",
+    "@sveltejs/adapter-vercel": "^3.1.0",
+    "@sveltejs/kit": "^1.27.4",
+    "@vercel/speed-insights": "workspace:*",
+    "svelte": "^4.2.7",
+    "svelte-check": "^3.6.0",
     "typescript": "^5.0.0",
     "vite": "^4.4.2"
   }

diff --git a/apps/sveltekit/src/app.html b/apps/sveltekit/src/app.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     %sveltekit.head%
   </head>
+
   <body data-sveltekit-preload-data="hover">
     <div style="display: contents">%sveltekit.body%</div>
   </body>

diff --git a/apps/sveltekit/src/lib/images/github.svg b/apps/sveltekit/src/lib/images/github.svg
diff --git a/apps/sveltekit/src/lib/images/svelte-logo.svg b/apps/sveltekit/src/lib/images/svelte-logo.svg
diff --git a/apps/sveltekit/src/lib/images/svelte-welcome.png b/apps/sveltekit/src/lib/images/svelte-welcome.png
diff --git a/apps/sveltekit/src/lib/images/svelte-welcome.webp b/apps/sveltekit/src/lib/images/svelte-welcome.webp
diff --git a/apps/sveltekit/src/routes/+layout.js b/apps/sveltekit/src/routes/+layout.js
@@ -0,0 +1,3 @@
+import { injectSpeedInsights } from '@vercel/speed-insights/sveltekit';
+
+injectSpeedInsights();
diff --git a/apps/sveltekit/src/routes/+layout.svelte b/apps/sveltekit/src/routes/+layout.svelte
diff --git a/apps/sveltekit/src/routes/+page.svelte b/apps/sveltekit/src/routes/+page.svelte
@@ -1,59 +1,2 @@
-<script>
-	import Counter from './Counter.svelte';
-	import welcome from '$lib/images/svelte-welcome.webp';
-	import welcome_fallback from '$lib/images/svelte-welcome.png';
-</script>
-
-<svelte:head>
-	<title>Home</title>
-	<meta name="description" content="Svelte demo app" />
-</svelte:head>
-
-<section>
-	<h1>
-		<span class="welcome">
-			<picture>
-				<source srcset={welcome} type="image/webp" />
-				<img src={welcome_fallback} alt="Welcome" />
-			</picture>
-		</span>
-
-		to your new<br />SvelteKit app
-	</h1>
-
-	<h2>
-		try editing <strong>src/routes/+page.svelte</strong>
-	</h2>
-
-	<Counter />
-</section>
-
-<style>
-	section {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		flex: 0.6;
-	}
-
-	h1 {
-		width: 100%;
-	}
-
-	.welcome {
-		display: block;
-		position: relative;
-		width: 100%;
-		height: 0;
-		padding: 0 0 calc(100% * 495 / 2048) 0;
-	}
-
-	.welcome img {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		top: 0;
-		display: block;
-	}
-</style>
+<h1>Welcome to SvelteKit</h1>
+<p>Visit <a href="/bruno">this page</a> to know more...</p>
diff --git a/apps/sveltekit/src/routes/+page.ts b/apps/sveltekit/src/routes/+page.ts
diff --git a/apps/sveltekit/src/routes/Counter.svelte b/apps/sveltekit/src/routes/Counter.svelte