Sapper

src/ambient.d.ts

@@ -0,0 +1,39 @@
+/**
+ * These declarations tell TypeScript that we allow import of images, e.g.
+ * ```
+		<script lang='ts'>
+			import successkid from 'images/successkid.jpg';
+		</script>
+
+		<img src="{successkid}">
+	 ```
+ */
+declare module "*.gif" {
+	const value: string;
+	export default value;
+}
+
+declare module "*.jpg" {
+	const value: string;
+	export default value;
+}
+
+declare module "*.jpeg" {
+	const value: string;
+	export default value;
+}
+
+declare module "*.png" {
+	const value: string;
+	export default value;
+}
+
+declare module "*.svg" {
+	const value: string;
+	export default value;
+}
+
+declare module "*.webp" {
+	const value: string;
+	export default value;
+}

src/client.ts

@@ -0,0 +1,5 @@
+import * as sapper from "@sapper/app";
+
+sapper.start({
+	target: document.querySelector("#sapper")
+});

src/routes/_error.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	export let status: number;
+	export let error: Error;
+
+	const dev = process.env.NODE_ENV === 'development';
+</script>
+
+<style>
+	h1, p {
+		margin: 0 auto;
+	}
+
+	h1 {
+		font-size: 2.8em;
+		font-weight: 700;
+		margin: 0 0 0.5em 0;
+	}
+
+	p {
+		margin: 1em auto;
+	}
+
+	@media (min-width: 480px) {
+		h1 {
+			font-size: 4em;
+		}
+	}
+</style>
+
+<svelte:head>
+	<title>{status}</title>
+</svelte:head>
+
+<h1>{status}</h1>
+
+<p>{error.message}</p>
+
+{#if dev && error.stack}
+	<pre>{error.stack}</pre>
+{/if}

src/routes/_layout.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	export let segment: string;
+</script>
+
+<main>
+	<slot></slot>
+</main>

src/server.ts

@@ -0,0 +1,19 @@
+import sirv from "sirv";
+import polka from "polka";
+import compression from "compression";
+import * as sapper from "@sapper/server";
+
+const { PORT, NODE_ENV } = process.env;
+const dev = NODE_ENV === "development";
+
+polka({
+	onError: err => {
+		if (err) console.log("Error", err);
+	}
+})
+	.use(
+		compression({ threshold: 0 }),
+		sirv("static", { dev }),
+		sapper.middleware()
+	)
+	.listen(PORT);

src/service-worker.ts

@@ -0,0 +1,89 @@
+import { timestamp, files, shell } from "@sapper/service-worker";
+
+const ASSETS = `cache${timestamp}`;
+
+// `shell` is an array of all the files generated by the bundler,
+// `files` is an array of everything in the `static` directory
+const to_cache = (shell as string[]).concat(files as string[]);
+const staticAssets = new Set(to_cache);
+
+// @ts-expect-error
+self.addEventListener("install", (event: ExtendableEvent) => {
+	event.waitUntil(
+		caches
+			.open(ASSETS)
+			.then(cache => cache.addAll(to_cache))
+			.then(() => {
+				(self as any as ServiceWorkerGlobalScope).skipWaiting();
+			})
+	);
+});
+
+// @ts-expect-error
+self.addEventListener("activate", (event: ExtendableEvent) => {
+	event.waitUntil(
+		caches.keys().then(async keys => {
+			// delete old caches
+			for (const key of keys) {
+				if (key !== ASSETS) await caches.delete(key);
+			}
+
+			(self as any as ServiceWorkerGlobalScope).clients.claim();
+		})
+	);
+});
+
+/**
+ * Fetch the asset from the network and store it in the cache.
+ * Fall back to the cache if the user is offline.
+ */
+async function fetchAndCache(request: Request) {
+	const cache = await caches.open(`offline${timestamp}`);
+
+	try {
+		const response = await fetch(request);
+		cache.put(request, response.clone());
+		return response;
+	} catch (err) {
+		const response = await cache.match(request);
+		if (response) return response;
+
+		throw err;
+	}
+}
+
+// @ts-expect-error
+self.addEventListener("fetch", (event: FetchEvent) => {
+	if (event.request.method !== "GET" || event.request.headers.has("range")) return;
+
+	const url = new URL(event.request.url);
+
+	// don't try to handle e.g. data: URIs
+	const isHttp = url.protocol.startsWith("http");
+	const isDevServerRequest =
+		url.hostname === self.location.hostname && url.port !== self.location.port;
+	const isStaticAsset = url.host === self.location.host && staticAssets.has(url.pathname);
+	const skipBecauseUncached = event.request.cache === "only-if-cached" && !isStaticAsset;
+
+	if (isHttp && !isDevServerRequest && !skipBecauseUncached) {
+		event.respondWith(
+			(async () => {
+				// always serve static files and bundler-generated assets from cache.
+				// if your application has other URLs with data that will never change,
+				// set this variable to true for them and they will only be fetched once.
+				const cachedAsset = isStaticAsset && (await caches.match(event.request));
+
+				// for pages, you might want to serve a shell `service-worker-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 (!cachedAsset && url.origin === self.origin && routes.find(route => route.pattern.test(url.pathname))) {
+					return caches.match('/service-worker-index.html');
+				}
+				*/
+
+				return cachedAsset || fetchAndCache(event.request);
+			})()
+		);
+	}
+});

src/template.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
+
+		%sapper.base% %sapper.scripts% %sapper.styles% %sapper.head%
+	</head>
+	<body>
+		<div id="sapper">%sapper.html%</div>
+	</body>
+</html>