[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]>

.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,29 +15,26 @@ 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.js
-└ svelte.config.js
+├ svelte.config.cjs
+└ vite.config.js
 ```
 
 ### package.json
 
 Your package.json contains your app's dependencies and defines a number of scripts:
 
-* `npm run dev` — start the app in development mode, and watch source files for changes
-* `npm run build` — build the app in production mode
-* `npm start` — start the app in production mode after you've built it
-
+- `npm run dev` — start the app in development mode, and watch source files for changes
+- `npm run build` — build the app in production mode
+- `npm start` — start the app in production mode after you've built it
 
 ### src
 
-This contains the *home page* for your app — `src/index.svelte` and (optionally) `src/service-worker.js` — along with a `src/app.html` file.
-
+This contains the _home page_ for your app — `src/index.svelte` and (optionally) `src/service-worker.js` — along with a `src/app.html` file.
 
 #### src/routes/index.svelte
 
 This is the home page for your application and is just like any other Svelte component.
 
-
 #### src/service-worker.js
 
 Service workers act as proxy servers that give you fine-grained control over how to respond to network requests. For example, when the browser requests `/goats.jpg`, the service worker can respond with a file it previously cached, or it can pass the request on to the server, or it could even respond with something completely different, such as a picture of llamas.
@@ -46,29 +43,26 @@ Among other things, this makes it possible to build applications that work offli
 
 Because every app needs a slightly different service worker (sometimes it's appropriate to always serve from the cache, sometimes that should only be a last resort in case of no connectivity), Sapper doesn't attempt to control the service worker. Instead, you write the logic in `service-worker.js`. You can import any of the following from `@sapper/service-worker`:
 
-* `files` — an array of files found in the `static` directory
-* `shell` — the client-side JavaScript generated by the bundler (Rollup or webpack)
-* `routes` — an array of `{ pattern: RegExp }` objects you can use to determine whether a Sapper-controlled page is being requested
-* `timestamp` — the time the service worker was generated (useful for generating unique cache names)
-
+- `files` — an array of files found in the `static` directory
+- `shell` — the client-side JavaScript generated by the bundler (Rollup or webpack)
+- `routes` — an array of `{ pattern: RegExp }` objects you can use to determine whether a Sapper-controlled page is being requested
+- `timestamp` — the time the service worker was generated (useful for generating unique cache names)
 
 #### src/app.html
 
 This file is a template for responses from the server. Sapper will inject content that replaces the following tags:
 
-* `%svelte.base%` — a `<base>` element (see [base URLs](docs#Base_URLs))
-* `%svelte.styles%` — critical CSS for the page being requested
-* `%svelte.head%` — HTML representing page-specific `<head>` contents, like `<title>`
-* `%svelte.html%` — HTML representing the body of the page being rendered
-* `%svelte.scripts%` — script tags for the client-side app
-* `%svelte.cspnonce%` — CSP nonce taken from `res.locals.nonce` (see [Content Security Policy (CSP)](docs#Content_Security_Policy_CSP))
-
+- `%svelte.base%` — a `<base>` element (see [base URLs](docs#Base_URLs))
+- `%svelte.styles%` — critical CSS for the page being requested
+- `%svelte.head%` — HTML representing page-specific `<head>` contents, like `<title>`
+- `%svelte.html%` — HTML representing the body of the page being rendered
+- `%svelte.scripts%` — script tags for the client-side app
+- `%svelte.cspnonce%` — CSP nonce taken from `res.locals.nonce` (see [Content Security Policy (CSP)](docs#Content_Security_Policy_CSP))
 
 ### src/routes
 
 This is the meat of your app — the pages and server routes. See the section on [routing](docs#Routing) for the juicy details.
 
-
 ### static
 
 This is a place to put any files that your app uses — fonts, images and so on. For example `static/favicon.png` will be served as `/favicon.png`.
@@ -77,10 +71,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.js
+### svelte.config.cjs
 
-This is the [Snowpack configuration file](https://www.snowpack.dev/reference/configuration) for your project.
+This file contains SvelteKit options as well as options for `svelte-preprocess`.
 
-### svelte.config.js
+### vite.config.js
 
-This file contains SvelteKit options as well as options for `svelte-preprocess`.
+This is the [Vite configuration file](https://vitejs.dev/config/) for your project.

examples/hn.svelte.dev/package.json

@@ -11,8 +11,6 @@
 	"devDependencies": {
 		"@sveltejs/adapter-netlify": "workspace:*",
 		"@sveltejs/kit": "workspace:*",
-		"@sveltejs/snowpack-config": "workspace:*",
-		"svelte": "^3.32.1",
-		"vite-plugin-svelte": "github:benmccann/vite-plugin-svelte"
+		"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

@@ -1,23 +1,9 @@
-import { dirname, resolve } from 'path';
-import { fileURLToPath } from 'url';
-import svelte from 'vite-plugin-svelte';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const production = (process.env.NODE_ENV === 'production')
+import { resolve } from 'path';
 
 export default {
-	alias: {
-		'$app': resolve(__dirname, '.svelte/assets/runtime/app'),
-		'$components': resolve(__dirname, 'src/components')
-	},
-	plugins: [
-		svelte({
-			emitCss: false,
-			compilerOptions: {
-				dev: !production,
-				hydratable: true
-			},
-			hot: true
-		})
-	]
-}
+	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/src/routes/index.svelte

@@ -9,7 +9,8 @@
 </script>
 
 <script>
-	import Counter from '$components/Counter.svelte';
+	// import Counter from '$components/Counter.svelte';
+	import Counter from '../components/Counter.svelte';
 
 	export let answer;
 

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