migrate to svelte-kit (#21)

* start with some package.json work * use svelte.config.js * start on file changes * directory page now loads * getting closer * fix mount * get export working * fix query params sveltejs/kit#586 (comment) * switch to module * add .nvmrc * switch plugins/index.js to ts * more fixes, getting rid of sapper refs * last sapper ref
zhammer · Jun 14, 2021 · 4fa2087 · 4fa2087
1 parent 31b54d2
commit 4fa2087
Show file tree

Hide file tree

Showing 27 changed files with 1,391 additions and 1,754 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -27,7 +27,7 @@ jobs:
         with:
           record: true
           build: yarn export
-          start: yarn serve -l 3000 __sapper__/export/
+          start: yarn serve -l 3000 build/
           browser: electron
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}

diff --git a/.gitignore b/.gitignore
@@ -1,8 +1,10 @@
 .DS_Store
 /node_modules/
-/src/node_modules/@sapper/
 yarn-error.log
-/__sapper__/
 
 # Local Netlify folder
-.netlify
+.netlify
+
+.svelte-kit/
+build/
+cypress/videos/
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+v16.3.0
diff --git a/cypress.json b/cypress.json
@@ -2,4 +2,4 @@
   "testFiles": "**/*.feature",
   "baseUrl": "http://localhost:3000",
   "projectId": "uhomii"
-}
+}
diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js
diff --git a/cypress/plugins/index.ts b/cypress/plugins/index.ts
@@ -0,0 +1,9 @@
+/// <reference types="cypress" />
+import cucumber from "cypress-cucumber-preprocessor";
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+export default (on, config) => {
+    on("file:preprocessor", cucumber.default());
+};
diff --git a/package.json b/package.json
@@ -2,22 +2,19 @@
   "name": "writing",
   "description": "zach's writing",
   "version": "0.0.1",
+  "type": "module",
   "scripts": {
-    "dev": "sapper dev",
-    "build": "sapper build --legacy",
-    "export": "sapper export --legacy --concurrent 1",
-    "start": "node __sapper__/build",
-    "validate": "svelte-check --ignore src/node_modules/@sapper",
+    "dev": "svelte-kit dev",
+    "export": "svelte-kit build",
+    "start": "node build",
+    "validate": "svelte-check",
     "new": "node scripts/newPiece.js"
   },
   "cypress-cucumber-preprocessor": {
     "nonGlobalStepDefinitions": true
   },
   "dependencies": {
-    "compression": "^1.7.1",
     "directory-tree": "^2.2.5",
-    "polka": "next",
-    "sirv": "^1.0.0",
     "yaml": "^1.10.0"
   },
   "devDependencies": {
@@ -31,6 +28,8 @@
     "@rollup/plugin-node-resolve": "^8.0.0",
     "@rollup/plugin-replace": "^2.2.0",
     "@rollup/plugin-typescript": "^6.0.0",
+    "@sveltejs/adapter-static": "next",
+    "@sveltejs/kit": "next",
     "@tsconfig/svelte": "^1.0.10",
     "@types/compression": "^1.7.0",
     "@types/node": "^14.11.1",
@@ -40,12 +39,12 @@
     "rollup": "^2.3.4",
     "rollup-plugin-svelte": "^6.0.0",
     "rollup-plugin-terser": "^7.0.0",
-    "sapper": "^0.28.0",
     "serve": "^11.3.2",
-    "svelte": "^3.17.3",
+    "svelte": "^3.38.2",
     "svelte-check": "^1.0.46",
-    "svelte-preprocess": "^4.3.0",
+    "svelte-preprocess": "^4.7.3",
     "tslib": "^2.0.1",
-    "typescript": "^4.0.3"
+    "typescript": "^4.0.3",
+    "vite": "^2.3.7"
   }
 }
diff --git a/rollup.config.js b/rollup.config.js
diff --git a/scripts/newPiece.js b/scripts/newPiece.js
@@ -1,5 +1,5 @@
-const { writeFileSync } = require("fs");
-const { argv } = require("process");
+import { writeFileSync } from "fs";
+import { argv } from "process";
 
 function slugify(text) {
     return text.toString().toLowerCase()

diff --git a/src/app.html b/src/app.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="theme-color" content="#333333">
+
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: Courier, monospace;
+        }
+
+        * {
+            box-sizing: border-box;
+        }
+    </style>
+    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
+    <link rel="icon" type="image/gif" href="/text.gif">
+
+    <!-- This contains the contents of the <svelte:head> component, if
+	     the current page has one -->
+    %svelte.head%
+</head>
+
+<body>
+    <div id="svelte">
+        %svelte.body%
+    </div>
+</body>
+
+</html>
diff --git a/src/client.ts b/src/client.ts
diff --git a/src/components/Directory.svelte b/src/components/Directory.svelte
@@ -20,8 +20,8 @@
   export let query: any;
 
   $: sort = {
-    column: query.C || "N",
-    order: query.O || "A",
+    column: query.get('C') || "N",
+    order: query.get('O') || "A",
   };
 
   let isRoot = directory.slug === "";
@@ -111,7 +111,7 @@
       {#if !isRoot}
         <tr>
           <td><img src="/back.gif" alt="[PARENTDIR]" /></td>
-          <td><a rel="prefetch" href="/">Parent Directory</a></td>
+          <td><a sveltekit:prefetch href="/">Parent Directory</a></td>
         </tr>
       {/if}
       {#each listItems as entry}
@@ -123,7 +123,7 @@
           </td>
           <td>
             <a
-              rel="prefetch"
+              sveltekit:prefetch
               href="{directory.slug}/{entry.slug}">{entry.title}</a>
           </td>
           <td align="right">{entry.date}</td>
@@ -138,5 +138,5 @@
       </tr>
     </tbody>
   </table>
-  <address>{directory.meta.description || 'Sapper/0.28.9 Server'}</address>
+  <address>{directory.meta.description || 'SvelteKit/1.0.0-next.115 Server'}</address>
 </div>
diff --git a/src/components/SongPlayer/index.svelte b/src/components/SongPlayer/index.svelte
@@ -15,7 +15,7 @@
 
   // we can only check the userAgent from the browser in JS land
   // (once the component has mounted on the browser). referencing
-  // `navigator` outside of onMount would throw an error as sapper
+  // `navigator` outside of onMount would throw an error as svelte-kit
   // would try to reference the browser's narrator in ssr.
   //
   // (checking user-agent on the server would be fine, but since the

diff --git a/src/routes/[...slug].json.js b/src/routes/[...slug].json.js
diff --git a/src/routes/[...slug].svelte b/src/routes/[...slug].svelte
@@ -1,14 +1,17 @@
 <script context="module" lang="ts">
-  export async function preload({ params, query }) {
+  /**
+	 * @type {import('@sveltejs/kit').Load}
+	 */
+  export async function load({ page, fetch }) {
     // the `slug` parameter is available because
     // this file is called [slug].svelte
-    const res = await this.fetch(`${params.slug}.json`);
+    const res = await fetch(`/pieces_data/${page.params.slug}.json`);
     const data = await res.json();
 
     if (res.status === 200) {
-      return { item: data.item, query };
+      return { props: { item: data.item, query: page.query }};
     } else {
-      this.error(res.status, data.message);
+      return { status: res.status, error: data.message };
     }
   }
 </script>

diff --git a/src/routes/_error.svelte → src/routes/__error.svelte b/src/routes/_error.svelte → src/routes/__error.svelte
@@ -2,7 +2,7 @@
 	export let status: number;
 	export let error: Error;
 
-	const dev = process.env.NODE_ENV === 'development';
+	const dev = false;
 </script>
 
 <style>

diff --git a/src/routes/_layout.svelte → src/routes/__layout.svelte b/src/routes/_layout.svelte → src/routes/__layout.svelte