Merge pull request #38 from sveltejs/0.7

Update to 0.7

.gitignore

@@ -4,4 +4,5 @@ node_modules
 yarn.lock
 cypress/screenshots
 templates/.*
-dist
+dist
+app/manifest

app/client.js

@@ -0,0 +1,7 @@
+import { init } from 'sapper/runtime.js';
+import { routes } from './manifest/client.js';
+
+// `routes` is an array of route objects injected by Sapper
+init(document.querySelector('#sapper'), routes);
+
+if (module.hot) module.hot.accept();

app/server.js

@@ -1,13 +1,16 @@
-const fs = require('fs');
-const app = require('express')();
-const compression = require('compression');
-const sapper = require('sapper');
-const static = require('serve-static');
+import fs from 'fs';
+import express from 'express';
+import compression from 'compression';
+import sapper from 'sapper';
+import serve from 'serve-static';
+import fetch from 'node-fetch';
+import { routes } from './manifest/server.js';
+
+const app = express();
 
 const { PORT = 3000 } = process.env;
 
 // this allows us to do e.g. `fetch('/api/blog-posts')` on the server
-const fetch = require('node-fetch');
 global.fetch = (url, opts) => {
 	if (url[0] === '/') url = `http://localhost:${PORT}${url}`;
 	return fetch(url, opts);
@@ -15,9 +18,11 @@ global.fetch = (url, opts) => {
 
 app.use(compression({ threshold: 0 }));
 
-app.use(static('assets'));
+app.use(serve('assets'));
 
-app.use(sapper());
+app.use(sapper({
+	routes
+}));
 
 app.listen(PORT, () => {
 	console.log(`listening on port ${PORT}`);

app/service-worker.js

@@ -1,15 +1,12 @@
-const timestamp = '__timestamp__';
+import { timestamp, assets, shell, routes } from './manifest/service-worker.js';
+
 const ASSETS = `cache${timestamp}`;
 
 // `shell` is an array of all the files generated by webpack,
 // `assets` is an array of everything in the `assets` directory
-const to_cache = __shell__.concat(__assets__);
+const to_cache = shell.concat(assets);
 const cached = new Set(to_cache);
 
-// `routes` is an array of `{ pattern: RegExp }` objects that
-// match the pages in your app
-const routes = __routes__;
-
 self.addEventListener('install', event => {
 	event.waitUntil(
 		caches

app/template.html

@@ -10,9 +10,9 @@
 	<link rel='icon' type='image/png' href='/favicon.png'>
 
 	<script>
-		if ('serviceWorker' in navigator) {
-			navigator.serviceWorker.register('/service-worker.js');
-		}
+		// if ('serviceWorker' in navigator) {
+		// 	navigator.serviceWorker.register('/service-worker.js');
+		// }
 	</script>
 
 	<!-- Sapper generates a <style> tag containing critical CSS

package.json

@@ -3,9 +3,10 @@
   "description": "TODO",
   "version": "0.0.1",
   "scripts": {
-    "dev": "node server.js",
+    "dev": "sapper dev",
     "build": "sapper build",
-    "start": "cross-env NODE_ENV=production node server.js",
+    "export": "sapper export",
+    "start": "cross-env NODE_ENV=production node .sapper/server.js",
     "cy:run": "cypress run",
     "cy:open": "cypress open",
     "test": "run-p --race dev cy:run"
@@ -19,7 +20,7 @@
     "glob": "^7.1.2",
     "node-fetch": "^2.0.0",
     "npm-run-all": "^4.1.2",
-    "sapper": "^0.6.3",
+    "sapper": "^0.6.4",
     "serve-static": "^1.13.1",
     "style-loader": "^0.20.1",
     "svelte": "^1.51.1",

routes/4xx.html

@@ -0,0 +1,43 @@
+<:Head>
+	<title>Not found</title>
+</:Head>
+
+<Layout page='home'>
+	<h1>Not found</h1>
+
+	<p>Please check the URL</p>
+</Layout>
+
+<style>
+	h1, p {
+		text-align: center;
+		margin: 0 auto;
+	}
+
+	h1 {
+		font-size: 2.8em;
+		text-transform: uppercase;
+		font-weight: 700;
+		margin: 0 0 0.5em 0;
+	}
+
+	p {
+		margin: 1em auto;
+	}
+
+	@media (min-width: 480px) {
+		h1 {
+			font-size: 4em;
+		}
+	}
+</style>
+
+<script>
+	import Layout from './_components/Layout.html';
+
+	export default {
+		components: {
+			Layout
+		}
+	};
+</script>

routes/5xx.html

@@ -0,0 +1,41 @@
+<:Head>
+	<title>Internal server error</title>
+</:Head>
+
+<Layout page='home'>
+	<h1>Internal server error</h1>
+</Layout>
+
+<style>
+	h1, p {
+		text-align: center;
+		margin: 0 auto;
+	}
+
+	h1 {
+		font-size: 2.8em;
+		text-transform: uppercase;
+		font-weight: 700;
+		margin: 0 0 0.5em 0;
+	}
+
+	p {
+		margin: 1em auto;
+	}
+
+	@media (min-width: 480px) {
+		h1 {
+			font-size: 4em;
+		}
+	}
+</style>
+
+<script>
+	import Layout from './_components/Layout.html';
+
+	export default {
+		components: {
+			Layout
+		}
+	};
+</script>

templates/4xx.html

@@ -1,46 +0,0 @@
-<!doctype html>
-<html>
-<head>
-	<meta charset='utf-8'>
-	<meta name='viewport' content='width=device-width'>
-	<meta name='theme-color' content='#aa1e1e'>
-
-	<link rel='manifest' href='/manifest.json'>
-	<link rel='icon' type='image/png' href='/favicon.png'>
-
-	<!-- %sapper.status% is the HTTP status code, e.g. 404 -->
-	<title>%sapper.status%</title>
-
-	<style>
-		body {
-			max-width: 800px;
-			padding: 1em;
-			margin: 0 auto;
-			font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-			background-color: #f4f4f4;
-			box-sizing: border-box;
-		}
-
-		h1 {
-			color: rgb(170,30,30);
-			border-bottom: 1px solid #aaa;
-			padding: 0 0 0.5em 0;
-			margin: 1em 0;
-		}
-
-		pre {
-			font-family: Menlo, monospace;
-			font-size: 14px;
-			line-height: 1.2;
-			overflow-x: auto;
-			white-space: pre-wrap;
-		}
-	</style>
-</head>
-<body>
-	<h1>%sapper.title%</h1>
-	<p>Could not %sapper.method% %sapper.url%</p>
-
-	%sapper.scripts%
-</body>
-</html>

templates/5xx.html

@@ -1,47 +0,0 @@
-<!doctype html>
-<html>
-<head>
-	<meta charset='utf-8'>
-	<meta name='viewport' content='width=device-width'>
-	<meta name='theme-color' content='#aa1e1e'>
-
-	<link rel='manifest' href='/manifest.json'>
-	<link rel='icon' type='image/png' href='/favicon.png'>
-
-	<title>%sapper.status%</title>
-
-	<style>
-		body {
-			max-width: 800px;
-			padding: 1em;
-			margin: 0 auto;
-			box-sizing: border-box;
-		}
-
-		h1 {
-			color: rgb(170,30,30);
-			border-bottom: 1px solid #aaa;
-			padding: 0 0 0.5em 0;
-			margin: 1em 0;
-		}
-
-		pre {
-			font-family: Menlo, monospace;
-			font-size: 14px;
-			line-height: 1.2;
-			overflow-x: auto;
-			white-space: pre-wrap;
-		}
-
-		.stack {
-			font-size: 12px;
-			color: #999;
-		}
-	</style>
-</head>
-<body>
-	<h1>%sapper.title%</h1>
-	<pre>%sapper.error%</pre>
-	<pre class='stack'>%sapper.stack%</pre>
-</body>
-</html>

templates/main.js

@@ -1,4 +0,0 @@
-import { init } from 'sapper/runtime.js';
-
-// `routes` is an array of route objects injected by Sapper
-init(document.querySelector('#sapper'), __routes__);

webpack/service-worker.config.js

@@ -0,0 +1,17 @@
+const path = require('path');
+const config = require('sapper/webpack/config.js');
+const webpack = require('webpack');
+
+module.exports = {
+	entry: {
+		'service-worker': './app/service-worker.js'
+	},
+	output: {
+		path: path.resolve(`.sapper`),
+		filename: '[name].js',
+		chunkFilename: '[name].[id].[hash].js'
+	},
+	plugins: [
+		!config.dev && new webpack.optimize.ModuleConcatenationPlugin()
+	].filter(Boolean)
+};