Sapper

.gitignore

@@ -0,0 +1,4 @@
+.DS_Store
+/node_modules/
+/src/node_modules/@sapper/
+/__sapper__/

.prettierrc

@@ -0,0 +1,11 @@
+{
+	"arrowParens": "avoid",
+	"bracketSpacing": true,
+	"embeddedLanguageFormatting": "auto",
+	"endOfLine": "lf",
+	"semi": true,
+	"singleQuote": false,
+	"tabWidth": 4,
+	"useTabs": true,
+	"trailingComma": "none"
+}

.vscode/extensions.json

@@ -0,0 +1 @@
+{"recommendations": ["svelte.svelte-vscode"]}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+	"editor.defaultFormatter": "esbenp.prettier-vscode"
+}

package.json

@@ -0,0 +1,43 @@
+{
+  "name": "sbdatatracker",
+  "description": "A Hypixel Skyblock data tracker",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "sapper dev",
+    "build": "sapper build --legacy",
+    "export": "sapper export --legacy",
+    "start": "node __sapper__/build",
+    "validate": "svelte-check --ignore src/node_modules/@sapper"
+  },
+  "dependencies": {
+    "compression": "^1.7.1",
+    "polka": "^0.5.2",
+    "sirv": "^1.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/runtime": "^7.0.0",
+    "@rollup/plugin-babel": "^5.0.0",
+    "@rollup/plugin-commonjs": "^14.0.0",
+    "@rollup/plugin-node-resolve": "^8.0.0",
+    "@rollup/plugin-replace": "^2.4.0",
+    "@rollup/plugin-typescript": "^6.0.0",
+    "@rollup/plugin-url": "^5.0.0",
+    "@tsconfig/svelte": "^1.0.10",
+    "@types/compression": "^1.7.0",
+    "@types/node": "^14.11.1",
+    "@types/polka": "^0.5.1",
+    "rollup": "^2.3.4",
+    "rollup-plugin-svelte": "^7.0.0",
+    "rollup-plugin-terser": "^7.0.0",
+    "sapper": "^0.28.0",
+    "svelte": "^3.17.3",
+    "svelte-check": "^1.0.46",
+    "svelte-preprocess": "^4.3.0",
+    "tslib": "^2.0.1",
+    "typescript": "^4.0.3"
+  }
+}

rollup.config.js

@@ -0,0 +1,135 @@
+import path from 'path';
+import resolve from '@rollup/plugin-node-resolve';
+import replace from '@rollup/plugin-replace';
+import commonjs from '@rollup/plugin-commonjs';
+import url from '@rollup/plugin-url';
+import svelte from 'rollup-plugin-svelte';
+import babel from '@rollup/plugin-babel';
+import { terser } from 'rollup-plugin-terser';
+import sveltePreprocess from 'svelte-preprocess';
+import typescript from '@rollup/plugin-typescript';
+import config from 'sapper/config/rollup.js';
+import pkg from './package.json';
+
+const mode = process.env.NODE_ENV;
+const dev = mode === 'development';
+const legacy = !!process.env.SAPPER_LEGACY_BUILD;
+
+const onwarn = (warning, onwarn) =>
+	(warning.code === 'MISSING_EXPORT' && /'preload'/.test(warning.message)) ||
+	(warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]@sapper[/\\]/.test(warning.message)) ||
+	(warning.code === 'THIS_IS_UNDEFINED') ||
+	onwarn(warning);
+
+export default {
+	client: {
+		input: config.client.input().replace(/\.js$/, '.ts'),
+		output: config.client.output(),
+		plugins: [
+			replace({
+				preventAssignment: true,
+				values:{
+					'process.browser': true,
+					'process.env.NODE_ENV': JSON.stringify(mode)
+				},
+			}),
+			svelte({
+				preprocess: sveltePreprocess({ sourceMap: dev }),
+				compilerOptions: {
+					dev,
+					hydratable: true
+				}
+			}),
+			url({
+				sourceDir: path.resolve(__dirname, 'src/node_modules/images'),
+				publicPath: '/client/'
+			}),
+			resolve({
+				browser: true,
+				dedupe: ['svelte']
+			}),
+			commonjs(),
+			typescript({ sourceMap: dev }),
+
+			legacy && babel({
+				extensions: ['.js', '.mjs', '.html', '.svelte'],
+				babelHelpers: 'runtime',
+				exclude: ['node_modules/@babel/**'],
+				presets: [
+					['@babel/preset-env', {
+						targets: '> 0.25%, not dead'
+					}]
+				],
+				plugins: [
+					'@babel/plugin-syntax-dynamic-import',
+					['@babel/plugin-transform-runtime', {
+						useESModules: true
+					}]
+				]
+			}),
+
+			!dev && terser({
+				module: true
+			})
+		],
+
+		preserveEntrySignatures: false,
+		onwarn,
+	},
+
+	server: {
+		input: { server: config.server.input().server.replace(/\.js$/, ".ts") },
+		output: config.server.output(),
+		plugins: [
+			replace({
+				preventAssignment: true,
+				values:{
+					'process.browser': false,
+					'process.env.NODE_ENV': JSON.stringify(mode)
+				},
+			}),
+			svelte({
+				preprocess: sveltePreprocess({ sourceMap: dev }),
+				compilerOptions: {
+					dev,
+					generate: 'ssr',
+					hydratable: true
+				},
+				emitCss: false
+			}),
+			url({
+				sourceDir: path.resolve(__dirname, 'src/node_modules/images'),
+				publicPath: '/client/',
+				emitFiles: false // already emitted by client build
+			}),
+			resolve({
+				dedupe: ['svelte']
+			}),
+			commonjs(),
+			typescript({ sourceMap: dev })
+		],
+		external: Object.keys(pkg.dependencies).concat(require('module').builtinModules),
+		preserveEntrySignatures: 'strict',
+		onwarn,
+	},
+
+	serviceworker: {
+		input: config.serviceworker.input().replace(/\.js$/, '.ts'),
+		output: config.serviceworker.output(),
+		plugins: [
+			resolve(),
+			replace({
+				preventAssignment: true,
+				values:{
+					'process.browser': true,
+					'process.env.NODE_ENV': JSON.stringify(mode)
+				},
+			}),
+			commonjs(),
+			typescript({ sourceMap: dev }),
+			!dev && terser()
+		],
+		preserveEntrySignatures: false,
+		onwarn,
+	}
+};

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>

tsconfig.json

@@ -0,0 +1,9 @@
+{
+	"extends": "@tsconfig/svelte/tsconfig.json",
+	"compilerOptions": {
+		"lib": ["DOM", "ES2017", "WebWorker"],
+		"strict": true
+	},
+	"include": ["src/**/*", "src/node_modules/**/*"],
+	"exclude": ["node_modules/*", "__sapper__/*", "static/*"]
+}