Vite

.github/ISSUE_TEMPLATE.md

@@ -1,29 +1,32 @@
-------
+---
+
 Before filing an issue we'd appreciate it if you could take a moment to ensure
 there isn't already an open issue or pull-request.
------
+
+---
 
 If there's an existing issue, please add a :+1: reaction to the description of
 the issue. One way we prioritize issues is by the number of :+1: reactions on
 their descriptions. Please DO NOT add `+1` or :+1: comments.
 
 ### Feature requests and proposals
+
 We're excited to hear how we can make SvelteKit better. Please add as much detail
 as you can on your use case. To propose an implementation of a large feature or
 change, please create an [RFC](https://github.com/sveltejs/rfcs).
 
 ### Bugs
+
 If you're filing an issue about a bug please include as much information
 as you can, including the following.
 
-- The output of `npx envinfo --system --npmPackages svelte,@sveltejs/kit,@sveltejs/snowpack-config --binaries --browsers`
+- The output of `npx envinfo --system --npmPackages svelte,@sveltejs/kit --binaries --browsers`
 - Your browser
 - Your adapter (e.g. Node, static, Vercel, Begin, etc...)
 
-- *Repeatable steps to reproduce the issue*
+- _Repeatable steps to reproduce the issue_
 
 * We recommend creating a small repo that illustrates the problem.
 * Reproductions should be small, self-contained, correct examples – http://sscce.org.
 
-Thanks for being part of SvelteKit!
--------
+## Thanks for being part of SvelteKit!

documentation/docs/01-structure.md

@@ -15,8 +15,8 @@ If you take a look inside a new SvelteKit project, you'll see some files that Sv
 │ └ app.html
 ├ static
 │ ├ # your files here
-├ snowpack.config.cjs
-└ svelte.config.cjs
+├ svelte.config.cjs
+└ vite.config.js
 ```
 
 ### package.json
@@ -73,10 +73,10 @@ Sapper doesn't serve these files — you'd typically use [sirv](https://github.c
 
 > Note that the default behaviour of the service worker is to cache all assets from the static directory, so if you have more than 50mb of files here, you will start to exceed the cache limit for service-workers in some browsers, which can cause the service worker to stop loading. In this instance, it is advisable to customise what files are cached by editing the service-worker yourself.
 
-### snowpack.config.cjs
-
-This is the [Snowpack configuration file](https://www.snowpack.dev/reference/configuration) for your project.
-
 ### svelte.config.cjs
 
 This file contains SvelteKit options as well as options for `svelte-preprocess`.
+
+### vite.config.js
+
+This is the [Vite configuration file](https://vitejs.dev/config/) for your project.

examples/hn.svelte.dev/package.json

@@ -11,7 +11,6 @@
 	"devDependencies": {
 		"@sveltejs/adapter-netlify": "workspace:*",
 		"@sveltejs/kit": "workspace:*",
-		"@sveltejs/snowpack-config": "workspace:*",
 		"svelte": "^3.32.1"
 	}
 }

examples/hn.svelte.dev/src/components/Nav.svelte

@@ -6,13 +6,13 @@
 	<img alt="Svelte Hacker News logo" class="icon" src="/favicon.png">
 
 	<ul>
-		<li><a rel="prefetch" href="/top/1" class:selected={section === "top"}>top</a></li>
-		<li><a rel="prefetch" href="/new/1" class:selected={section === "new"}>new</a></li>
-		<li><a rel="prefetch" href="/show/1" class:selected={section === "show"}>show</a></li>
-		<li><a rel="prefetch" href="/ask/1" class:selected={section === "ask"}>ask</a></li>
-		<li><a rel="prefetch" href="/jobs/1" class:selected={section === "jobs"}>jobs</a></li>
+		<li><a sveltekit:prefetch href="/top/1" class:selected={section === "top"}>top</a></li>
+		<li><a sveltekit:prefetch href="/new/1" class:selected={section === "new"}>new</a></li>
+		<li><a sveltekit:prefetch href="/show/1" class:selected={section === "show"}>show</a></li>
+		<li><a sveltekit:prefetch href="/ask/1" class:selected={section === "ask"}>ask</a></li>
+		<li><a sveltekit:prefetch href="/jobs/1" class:selected={section === "jobs"}>jobs</a></li>
 
-		<li class="about"><a rel="prefetch" href="/about" class:selected={section === "about"}>about</a></li>
+		<li class="about"><a sveltekit:prefetch href="/about" class:selected={section === "about"}>about</a></li>
 	</ul>
 </nav>
 

examples/hn.svelte.dev/src/routes/$error.svelte

@@ -1,8 +1,9 @@
 <script>
+	import { dev } from '$app/env';
+
 	export let status;
 	export let error;
 
-	const dev = process.env.NODE_ENV === 'development';
 	const offline = typeof navigator !== 'undefined' && navigator.onLine === false;
 
 	const title = offline ? 'Offline' : status;

examples/hn.svelte.dev/src/routes/[list]/_ItemSummary.svelte

@@ -13,8 +13,8 @@
 	{:else}
 		<p>
 			{item.points} points by
-			<a rel="prefetch" href="/user/{item.user}">{item.user}</a> {item.time_ago}
-			 | <a rel="prefetch" href="/item/{item.id}">{item.comments_count} {item.comments_count === 1 ? 'comment' : 'comments'}</a>
+			<a sveltekit:prefetch href="/user/{item.user}">{item.user}</a> {item.time_ago}
+			 | <a sveltekit:prefetch href="/item/{item.id}">{item.comments_count} {item.comments_count === 1 ? 'comment' : 'comments'}</a>
 		</p>
 	{/if}
 

examples/hn.svelte.dev/src/routes/item/_Comment.svelte

@@ -7,7 +7,7 @@
 {#if !comment.deleted}
 	<article class="comment" class:hidden>
 		<div class="meta-bar" on:click="{() => hidden = !hidden}">
-			<span class="meta"><a rel="prefetch" href="/user/{comment.user}">{comment.user}</a> {comment.time_ago}</span>
+			<span class="meta"><a sveltekit:prefetch href="/user/{comment.user}">{comment.user}</a> {comment.time_ago}</span>
 		</div>
 
 		<div class="body">
@@ -36,12 +36,12 @@
 	.meta-bar {
 		padding: 1em 0;
 		cursor: pointer;
-		background: 100% 50% no-repeat url(/icons/fold.svg);
+		background: 100% 50% no-repeat url(./_icons/fold.svg);
 		background-size: 1em 1em;
 	}
 
 	.hidden .meta-bar {
-		background-image: url(/icons/unfold.svg);
+		background-image: url(./_icons/unfold.svg);
 	}
 
 	.comment .children {

examples/hn.svelte.dev/vite.config.js

@@ -0,0 +1,9 @@
+import { resolve } from 'path';
+
+export default {
+	resolve: {
+		alias: {
+			$components: resolve('src/components')
+		}
+	}
+};

examples/realworld.svelte.dev/package.json

@@ -11,7 +11,6 @@
 	"devDependencies": {
 		"@sveltejs/adapter-node": "workspace:*",
 		"@sveltejs/kit": "workspace:*",
-		"@sveltejs/snowpack-config": "workspace:*",
 		"marked": "^1.2.8",
 		"svelte": "^3.32.1"
 	},

examples/realworld.svelte.dev/src/routes/$error.svelte

@@ -1,9 +1,8 @@
 <script>
+	import { dev } from '$app/env';
 	import Layout from './$layout.svelte';
 
 	export let error, status;
-
-	let dev = import.meta.env.MODE === 'development';
 </script>
 
 <svelte:head>

examples/realworld.svelte.dev/vite.config.js

@@ -0,0 +1,10 @@
+import { resolve } from 'path';
+
+export default {
+	resolve: {
+		alias: {
+			$common: resolve('src/common'),
+			$components: resolve('src/components')
+		}
+	}
+};

examples/sandbox/package.json

@@ -11,7 +11,6 @@
 	"devDependencies": {
 		"@sveltejs/adapter-node": "workspace:*",
 		"@sveltejs/kit": "workspace:*",
-		"@sveltejs/snowpack-config": "workspace:*",
 		"svelte": "^3.32.1"
 	}
 }

examples/sandbox/vite.config.js

@@ -0,0 +1,9 @@
+import { resolve } from 'path';
+
+export default {
+	resolve: {
+		alias: {
+			$components: resolve('src/components')
+		}
+	}
+};

examples/svelte-kit-demo/package.json

@@ -12,7 +12,6 @@
 		"@sveltejs/adapter-node": "workspace:*",
 		"@sveltejs/adapter-static": "workspace:*",
 		"@sveltejs/kit": "workspace:*",
-		"@sveltejs/snowpack-config": "workspace:*",
 		"svelte": "^3.32.1"
 	}
 }

examples/svelte-kit-demo/src/components/Nav.svelte

@@ -3,9 +3,9 @@
 </script>
 
 <nav>
-	<a href="/" rel="prefetch" class:active={path === '/'}>home</a>
-	<a href="/about" rel="prefetch" class:active={path === '/about'}>about</a>
-	<a href="/blog" rel="prefetch" class:active={path === '/blog'}>blog</a>
+	<a href="/" sveltekit:prefetch class:active={path === '/'}>home</a>
+	<a href="/about" sveltekit:prefetch class:active={path === '/about'}>about</a>
+	<a href="/blog" sveltekit:prefetch class:active={path === '/blog'}>blog</a>
 </nav>
 
 <style>

examples/svelte-kit-demo/vite.config.js

@@ -0,0 +1,9 @@
+import { resolve } from 'path';
+
+export default {
+	resolve: {
+		alias: {
+			$components: resolve('src/components')
+		}
+	}
+};

packages/app-utils/.gitignore

@@ -1,6 +1,2 @@
 .DS_Store
 node_modules
-
-/files
-/http
-/renderer

packages/app-utils/src/files/index.js → packages/app-utils/files/index.js

@@ -1,5 +1,5 @@
-import * as fs from 'fs';
-import * as path from 'path';
+import fs from 'fs';
+import path from 'path';
 
 export function mkdirp(dir) {
 	try {
@@ -10,6 +10,10 @@ export function mkdirp(dir) {
 	}
 }
 
+export function rimraf(path) {
+	(fs.rmSync || fs.rmdirSync)(path, { recursive: true, force: true });
+}
+
 export function copy(from, to, filter = () => true) {
 	if (!filter(path.basename(from))) return [];
 

packages/app-utils/package.json

@@ -2,13 +2,9 @@
 	"name": "@sveltejs/app-utils",
 	"version": "1.0.0-next.1",
 	"scripts": {
-		"clean": "node rimraf.js files http renderer",
-		"dev": "npm run clean && rollup -cw",
-		"build": "npm run clean && rollup -c",
 		"lint": "eslint --ignore-path .gitignore \"**/*.{ts,js,svelte}\" && npm run check-format",
 		"format": "prettier --write . --config ../../.prettierrc --ignore-path .gitignore",
 		"check-format": "prettier --check . --config ../../.prettierrc --ignore-path .gitignore",
-		"prepublishOnly": "npm run build",
 		"test": "uvu"
 	},
 	"dependencies": {
@@ -34,7 +30,6 @@
 	},
 	"files": [
 		"files",
-		"http",
-		"renderer"
+		"http"
 	]
 }

packages/create-svelte/cli/modifications/add_css.js

@@ -1,5 +1,5 @@
 import { bold, green } from 'kleur/colors';
-import { add_svelte_prepocess_to_config, update_component, update_package_json } from './utils';
+import { add_svelte_preprocess_to_config, update_component, update_package_json } from './utils';
 
 export default async function add_css(cwd, which) {
 	if (which === 'css') {
@@ -11,7 +11,7 @@ export default async function add_css(cwd, which) {
 		});
 		update_component(cwd, 'src/components/Counter.svelte', [['<style>', '<style lang="less">']]);
 		update_component(cwd, 'src/routes/index.svelte', [['<style>', '<style lang="less">']]);
-		add_svelte_prepocess_to_config(cwd);
+		add_svelte_preprocess_to_config(cwd);
 		console.log(
 			bold(
 				green(
@@ -27,7 +27,7 @@ export default async function add_css(cwd, which) {
 		});
 		update_component(cwd, 'src/components/Counter.svelte', [['<style>', '<style lang="scss">']]);
 		update_component(cwd, 'src/routes/index.svelte', [['<style>', '<style lang="scss">']]);
-		add_svelte_prepocess_to_config(cwd);
+		add_svelte_preprocess_to_config(cwd);
 		console.log(
 			bold(
 				green(