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

@@ -0,0 +1,29 @@
+import fs from 'fs';
+import express from 'express';
+import compression from 'compression';
+import sapper from 'sapper';
+import serve from 'serve-static';
+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);
+};
+
+app.use(compression({ threshold: 0 }));
+
+app.use(serve('assets'));
+
+app.use(sapper({
+	routes
+}));
+
+app.listen(PORT, () => {
+	console.log(`listening on port ${PORT}`);
+});

app/service-worker.js

@@ -0,0 +1,75 @@
+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 cached = new Set(to_cache);
+
+self.addEventListener('install', event => {
+	event.waitUntil(
+		caches
+			.open(ASSETS)
+			.then(cache => cache.addAll(to_cache))
+			.then(() => {
+				self.skipWaiting();
+			})
+	);
+});
+
+self.addEventListener('activate', event => {
+	event.waitUntil(
+		caches.keys().then(async keys => {
+			// delete old caches
+			for (const key of keys) {
+				if (key !== ASSETS) await caches.delete(key);
+			}
+
+			await self.clients.claim();
+		})
+	);
+});
+
+self.addEventListener('fetch', event => {
+	const url = new URL(event.request.url);
+
+	// don't try to handle e.g. data: URIs
+	if (!url.protocol.startsWith('http')) return;
+
+	// always serve assets and webpack-generated files from cache
+	if (cached.has(url.pathname)) {
+		event.respondWith(caches.match(event.request));
+		return;
+	}
+
+	// for pages, you might want to serve a shell `index.html` file,
+	// which Sapper has generated for you. It's not right for every
+	// app, but if it's right for yours then uncomment this section
+	/*
+	if (url.origin === self.origin && routes.find(route => route.pattern.test(url.pathname))) {
+		event.respondWith(caches.match('/index.html'));
+		return;
+	}
+	*/
+
+	// for everything else, try the network first, falling back to
+	// cache if the user is offline. (If the pages never change, you
+	// might prefer a cache-first approach to a network-first one.)
+	event.respondWith(
+		caches
+			.open(`offline${timestamp}`)
+			.then(async cache => {
+				try {
+					const response = await fetch(event.request);
+					cache.put(event.request, response.clone());
+					return response;
+				} catch(err) {
+					const response = await cache.match(event.request);
+					if (response) return response;
+
+					throw err;
+				}
+			})
+	);
+});

app/template.html

@@ -0,0 +1,37 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset='utf-8'>
+	<meta name='viewport' content='width=device-width'>
+	<meta name='theme-color' content='#aa1e1e'>
+
+	<link rel='stylesheet' href='/global.css'>
+	<link rel='manifest' href='/manifest.json'>
+	<link rel='icon' type='image/png' href='/favicon.png'>
+
+	<script>
+		// if ('serviceWorker' in navigator) {
+		// 	navigator.serviceWorker.register('/service-worker.js');
+		// }
+	</script>
+
+	<!-- Sapper generates a <style> tag containing critical CSS
+	     for the current page. CSS for the rest of the app is
+	     lazily loaded when it precaches secondary pages -->
+	%sapper.styles%
+
+	<!-- This contains the contents of the <:Head> component, if
+	     the current page has one -->
+	%sapper.head%
+</head>
+<body>
+	<!-- The application will be rendered inside this element,
+	     because `templates/main.js` references it -->
+	<div id='sapper'>%sapper.html%</div>
+
+	<!-- Sapper creates a <script> tag containing `templates/main.js`
+	     and anything else it needs to hydrate the app and
+	     initialise the router -->
+	%sapper.scripts%
+</body>
+</html>