WIP towards 0.7 compatibility

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/manifest/client.js

@@ -0,0 +1,15 @@
+// This file is generated by Sapper — do not edit it!
+export const routes = [
+	{ pattern: /^\/?$/, params: () => ({}), load: () => import(/* webpackChunkName: "_" */ '../../routes/index.html') },
+	{ pattern: /^\/4xx\/?$/, params: () => ({}), load: () => import(/* webpackChunkName: "_4xx" */ '../../routes/4xx.html') },
+	{ pattern: /^\/5xx\/?$/, params: () => ({}), load: () => import(/* webpackChunkName: "_5xx" */ '../../routes/5xx.html') },
+	{ pattern: /^\/about\/?$/, params: () => ({}), load: () => import(/* webpackChunkName: "about" */ '../../routes/about.html') },
+	{ pattern: /^\/blog\/?$/, params: () => ({}), load: () => import(/* webpackChunkName: "blog" */ '../../routes/blog/index.html') },
+	{ pattern: /^\/blog(?:\/([^\/]+))?\/?$/, params: match => ({ slug: match[1] }), load: () => import(/* webpackChunkName: "blog_$slug$" */ '../../routes/blog/[slug].html') }
+];
+
+if (module.hot) {
+	import('/Users/208311/Development/SVELTE/sapper/src/hmr-client.js').then(client => {
+		client.connect(23456);
+	});
+}

app/manifest/server.js

@@ -0,0 +1,20 @@
+// This file is generated by Sapper — do not edit it!
+import _ from '../../routes/index.html';
+import _4xx from '../../routes/4xx.html';
+import _5xx from '../../routes/5xx.html';
+import about from '../../routes/about.html';
+import blog from '../../routes/blog/index.html';
+import * as api_blog_posts from '../../routes/api/blog-posts.js';
+import * as api_blog_$slug$ from '../../routes/api/blog/[slug].js';
+import blog_$slug$ from '../../routes/blog/[slug].html';
+
+export const routes = [
+	{ id: '_', type: 'page', pattern: /^\/?$/, params: () => ({}), module: _ },
+	{ id: '_4xx', type: 'page', pattern: /^\/4xx\/?$/, params: () => ({}), module: _4xx },
+	{ id: '_5xx', type: 'page', pattern: /^\/5xx\/?$/, params: () => ({}), module: _5xx },
+	{ id: 'about', type: 'page', pattern: /^\/about\/?$/, params: () => ({}), module: about },
+	{ id: 'blog', type: 'page', pattern: /^\/blog\/?$/, params: () => ({}), module: blog },
+	{ id: 'api_blog_posts', type: 'route', pattern: /^\/api\/blog-posts\/?$/, params: () => ({}), module: api_blog_posts },
+	{ id: 'api_blog_$slug$', type: 'route', pattern: /^\/api\/blog(?:\/([^\/]+))?\/?$/, params: match => ({ slug: match[1] }), module: api_blog_$slug$ },
+	{ id: 'blog_$slug$', type: 'page', pattern: /^\/blog(?:\/([^\/]+))?\/?$/, params: match => ({ slug: match[1] }), module: blog_$slug$ }
+];

app/manifest/service-worker.js

@@ -0,0 +1,33 @@
+// This file is generated by Sapper — do not edit it!
+export const timestamp = 1518906946124;
+
+export const assets = [
+	"favicon.png",
+	"global.css",
+	"great-success.png",
+	"manifest.json",
+	"svelte-logo-192.png",
+	"svelte-logo-512.png"
+];
+
+export const shell = [
+	"/client/_.0.15d69aa40f5cf2c235b5.js",
+	"/client/blog.1.15d69aa40f5cf2c235b5.js",
+	"/client/blog_$slug$.2.15d69aa40f5cf2c235b5.js",
+	"/client/about.3.15d69aa40f5cf2c235b5.js",
+	"/client/_5xx.4.15d69aa40f5cf2c235b5.js",
+	"/client/_4xx.5.15d69aa40f5cf2c235b5.js",
+	"/client/6.6.15d69aa40f5cf2c235b5.js",
+	"/client/main.15d69aa40f5cf2c235b5.js",
+	"/client/0.b91f3b4b0888fc3dc282.hot-update.js",
+	"/client/b91f3b4b0888fc3dc282.hot-update.json"
+];
+
+export const routes = [
+	{ pattern: /^\/?$/ },
+	{ pattern: /^\/4xx\/?$/ },
+	{ pattern: /^\/5xx\/?$/ },
+	{ pattern: /^\/about\/?$/ },
+	{ pattern: /^\/blog\/?$/ },
+	{ pattern: /^\/blog(?:\/([^\/]+))?\/?$/ }
+];

app/server.js

@@ -1,8 +1,11 @@
-const fs = require('fs');
+import fs from 'fs';
-const app = require('express')();
+import express from 'express';
-const compression = require('compression');
+import compression from 'compression';
-const sapper = require('sapper');
+import sapper from 'sapper';
-const static = require('serve-static');
+import serve from 'serve-static';
+import { routes } from './manifest/server.js';
+
+const app = express();
 
 const { PORT = 3000 } = process.env;
 
@@ -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) {
+		// if ('serviceWorker' in navigator) {
-			navigator.serviceWorker.register('/service-worker.js');
+		// 	navigator.serviceWorker.register('/service-worker.js');
-		}
+		// }
 	</script>
 
 	<!-- Sapper generates a <style> tag containing critical CSS

package.json

@@ -3,7 +3,7 @@
   "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",
     "cy:run": "cypress run",
@@ -19,7 +19,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 @@
+TODO 4xx

routes/5xx.html

@@ -0,0 +1 @@
+TODO 5xx

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__);