SvelteKit rocks. At the very least, it doesn't segfault when building.

awaitlink · Oct 23, 2023 · 4cd085d · 4cd085d
1 parent b5ee7c8
commit 4cd085d
Show file tree

Hide file tree

Showing 22 changed files with 1,547 additions and 4,992 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,11 @@
 .DS_Store
-.parcel-cache
-coverage
-dist
 node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+yarn-error.log
diff --git a/.parcelrc b/.parcelrc
diff --git a/.svelterc.json b/.svelterc.json
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Artem Varaksa
+Copyright (c) 2021-2023 Artem Varaksa
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.
diff --git a/jest.config.js b/jest.config.js
@@ -1,5 +1,2 @@
-/** @type {import('@ts-jest/dist/types').InitialOptionsTsJest} */
-module.exports = {
-    preset: 'ts-jest',
-    testEnvironment: 'jsdom',
-};
+export const preset = 'ts-jest';
+export const testEnvironment = 'jsdom';
diff --git a/package.json b/package.json
@@ -1,32 +1,33 @@
 {
-    "private": "true",
-    "scripts": {
-        "clean": "rm -rf .parcel-cache coverage dist",
-        "test": "jest",
-        "serve": "parcel serve ./src/index.html",
-        "build": "parcel build ./src/index.html",
-        "generate-sw": "workbox generateSW workbox-config.js",
-        "ship": "yarn run clean && yarn run build && yarn run generate-sw"
-    },
-    "devDependencies": {
-        "@babel/core": "^7.13.15",
-        "@babel/polyfill": "^7.12.1",
-        "@fortawesome/fontawesome-free": "^6.2.1",
-        "@jest/reporters": "^29.3.1",
-        "@parcel/packager-ts": "^2.0.0-beta.2",
-        "@parcel/transformer-sass": "^2.0.0-beta.2",
-        "@types/jest": "^29.2.5",
-        "@types/lodash": "^4.14.172",
-        "bulma": "^0.9.2",
-        "jest": "^29.3.1",
-        "jest-environment-jsdom": "^29.3.1",
-        "lodash": "^4.17.21",
-        "parcel": "^2.0.0-beta.2",
-        "parcel-transformer-svelte": "^1.1.1",
-        "postcss": "^8.2.10",
-        "svelte": "^3.37.0",
-        "ts-jest": "^29.0.3",
-        "typescript": "^4.3.5",
-        "workbox-cli": "^6.1.5"
-    }
+	"name": "these-pages",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"test": "jest",
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+	},
+	"devDependencies": {
+		"@fortawesome/fontawesome-free": "^6.4.2",
+		"@jest/reporters": "^29.7.0",
+		"@sveltejs/adapter-static": "^2.0.3",
+		"@sveltejs/kit": "^1.20.4",
+		"@types/jest": "^29.5.6",
+		"@types/lodash": "^4.14.200",
+		"bulma": "^0.9.4",
+		"jest": "^29.7.0",
+		"jest-environment-jsdom": "^29.7.0",
+		"lodash": "^4.17.21",
+		"sass": "^1.69.4",
+		"svelte": "^4.0.5",
+		"svelte-check": "^3.4.3",
+		"ts-jest": "^29.1.1",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"vite": "^4.4.2"
+	},
+	"type": "module"
 }
diff --git a/src/components/InputField.svelte → src/InputField.svelte b/src/components/InputField.svelte → src/InputField.svelte
@@ -1,6 +1,6 @@
 <svelte:options tag="svelte-input-field" />
 
-<script>
+<script lang="ts">
     export let small;
     export let icon;
     export let content;

diff --git a/src/components/SiteCard.svelte → src/SiteCard.svelte b/src/components/SiteCard.svelte → src/SiteCard.svelte
@@ -1,6 +1,6 @@
 <svelte:options tag="svelte-site-card" />
 
-<script>
+<script lang="ts">
     export let site;
     export let globalEditMode;
 

diff --git a/src/app.d.ts b/src/app.d.ts
@@ -0,0 +1,12 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface Platform {}
+	}
+}
+
+export {};
diff --git a/src/app.html b/src/app.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	%sveltekit.head%
+</head>
+
+<body data-sveltekit-preload-data="hover">
+	<div style="display: contents">%sveltekit.body%</div>
+</body>
+
+</html>
diff --git a/src/index.html b/src/index.html
diff --git a/src/index.ts b/src/index.ts
diff --git a/src/storage.ts → src/lib/storage.ts b/src/storage.ts → src/lib/storage.ts
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
@@ -0,0 +1,5 @@
+export const prerender = true;
+export const ssr = false;
+
+import '../../node_modules/bulma/bulma.sass';
+import '../../node_modules/@fortawesome/fontawesome-free/css/all.css';
diff --git a/src/App.svelte → src/routes/+page.svelte b/src/App.svelte → src/routes/+page.svelte
@@ -1,10 +1,10 @@
 <svelte:options tag="svelte-app" />
 
-<script>
-    import SiteCard from "./components/SiteCard.svelte";
-    import InputField from "./components/InputField.svelte";
+<script lang="ts">
+    import SiteCard from "../SiteCard.svelte";
+    import InputField from "../InputField.svelte";
 
-    import { Data, Storage } from "./storage";
+    import { Data, Storage } from "$lib/storage";
 
     let globalEditMode = false;
     let data = Data.fromStorage();
@@ -54,6 +54,10 @@
     $: document.title = data.title;
 </script>
 
+<svelte:head>
+    <title>These Pages</title>
+</svelte:head>
+
 <div class="container is-fluid my-5">
     <div class="field is-grouped is-grouped-multiline is-grouped-right mb-5">
         {#if globalEditMode}

diff --git a/src/service-worker.ts b/src/service-worker.ts
@@ -0,0 +1,68 @@
+/// <reference types="@sveltejs/kit" />
+/// <reference no-default-lib="true"/>
+/// <reference lib="esnext" />
+/// <reference lib="webworker" />
+
+const sw = /** @type {ServiceWorkerGlobalScope} */ (/** @type {unknown} */ (self));
+
+import { build, files, version } from '$service-worker';
+
+// Create a unique cache name for this deployment
+const CACHE = `cache-${version}`;
+
+const ASSETS = [
+    ...build, // the app itself
+    ...files  // everything in `static`
+];
+
+self.addEventListener('install', (event) => {
+    // Create a new cache and add all files to it
+    async function addFilesToCache() {
+        const cache = await caches.open(CACHE);
+        await cache.addAll(ASSETS);
+    }
+
+    event.waitUntil(addFilesToCache());
+});
+
+self.addEventListener('activate', (event) => {
+    // Remove previous cached data from disk
+    async function deleteOldCaches() {
+        for (const key of await caches.keys()) {
+            if (key !== CACHE) await caches.delete(key);
+        }
+    }
+
+    event.waitUntil(deleteOldCaches());
+});
+
+self.addEventListener('fetch', (event) => {
+    // ignore POST requests etc
+    if (event.request.method !== 'GET') return;
+
+    async function respond() {
+        const url = new URL(event.request.url);
+        const cache = await caches.open(CACHE);
+
+        // `build`/`files` can always be served from the cache
+        if (ASSETS.includes(url.pathname)) {
+            return cache.match(url.pathname);
+        }
+
+        // for everything else, try the network first, but
+        // fall back to the cache if we're offline
+        try {
+            const response = await fetch(event.request);
+
+            if (response.status === 200) {
+                cache.put(event.request, response.clone());
+            }
+
+            return response;
+        } catch {
+            return cache.match(event.request);
+        }
+    }
+
+    event.respondWith(respond());
+});
diff --git a/svelte.config.js b/svelte.config.js
@@ -0,0 +1,17 @@
+import adapter from '@sveltejs/adapter-static';
+import { vitePreprocess } from '@sveltejs/kit/vite';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	preprocess: vitePreprocess(),
+
+	kit: {
+		adapter: adapter()
+	},
+
+	compilerOptions: {
+		customElement: true
+	}
+};
+
+export default config;
diff --git a/tests/storage.test.ts b/tests/storage.test.ts
@@ -1,5 +1,6 @@
 import _ from 'lodash';
-import { Storage, StorageKey, Site, CURRENT_SCHEMA_VERSION, SchemaVersion, Data } from "../src/storage";
+import { Storage, StorageKey, CURRENT_SCHEMA_VERSION, SchemaVersion, Data } from "../src/lib/storage";
+import type { Site } from "../src/lib/storage";
 
 describe("Data", () => {
     describe("performMigrationsUpTo", () => {

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,10 +1,17 @@
 {
-    "include": [
-        "src/**/*"
-    ],
-    "compilerOptions": {
-        "target": "es2021",
-        "strict": true,
-        "esModuleInterop": true
-    }
-}
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}
diff --git a/vite.config.ts b/vite.config.ts
@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()]
+});
diff --git a/workbox-config.js b/workbox-config.js