Vite (#409)

* Powered by Vite. Issues remain

* Fix esbuild version conflict in HN example by removing snowpack config

* Enable hot reload option

* Add layout css

* Get layout to show up in SSR

* More path fixes. CSR works now!

* Bump snowpack to reduce esbuild version conflicts

* get a few tests passing

* Fix

* [WIP] Vite prod builds (#1)

* WIP vite prod builds

* prettier

* HN example working, at least

* fix some stuff

* update config files

* various

* simplify

* simplify

* oops

* fix find_layout

* remove logging

* fix vite base path

* make vite a peer dependency

* let vite serve static assets

* get SSR CSS working

* remove unused code

* rename CLI

* simplify configs

* tweak relationship between different packages

* simplify app-utils

* update tests to remove app startup crashes in prod

* fix lockfile

* tweak some file locations etc, get some more tests passing

* get tests passing

* update lockfile

* update lockfile

* get all tests passing, locally at least

* remove snowpack-related stuff

* add vite-plugin-svelte to monorepo

* lint

* dont remove styles, it breaks stuff. TODO investigate

* Upgrade vite

* fix some sourcemap stuff

* remove vite-plugin-svelte from workspace until things settle down more

* fix lockfile

* gloss over import.meta transform bug for now

* hack around vite bugs until 2.0.4

* only lint src files

* remove source-map-support, it was causing weird stuff to happen

* ensure renderer waits for layout/error styles

* i really dont understand this lockfile bollocks

* Upgrade to vite 2.0.4

* add fork of @svitejs/vite-plugin-svelte back to monorepo

* lint

* make run in node 12

* ffffuuuuuuu

* Fix file path

* specify vite 2.0.4 everywhere

* add some logging to try and diagnose CI test failures

* fix output directories

* remove logging

Co-authored-by: Ben McCann <[email protected]>

* update lockfile

* remove merge conflict artifact

* fix unrelated typo

* restore alias

* remove some obsolete deps

Co-authored-by: Ben McCann <[email protected]>

Author: Rich Harris

.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/snowpack.config.cjs

@@ -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/components/Nav.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/$error.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/[list]/_ItemSummary.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/src/routes/item/_Comment.svelte

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

examples/hn.svelte.dev/static/icons/fold.svg renamed to examples/hn.svelte.dev/src/routes/item/_icons/fold.svg

@@ -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/hn.svelte.dev/static/icons/unfold.svg renamed to examples/hn.svelte.dev/src/routes/item/_icons/unfold.svg

@@ -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/hn.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/realworld.svelte.dev/package.json

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

examples/realworld.svelte.dev/snowpack.config.cjs

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

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

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

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

@@ -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/sandbox/package.json

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

examples/sandbox/snowpack.config.cjs

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

examples/sandbox/vite.config.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 [];
 

examples/svelte-kit-demo/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"
 	]
 }

examples/svelte-kit-demo/snowpack.config.cjs

@@ -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(