Implement breaking svelte-kit changes (#50)

Implement the breaking changes necessary to upgrade svelte-kit. Main focus is the new routes structure. Check https://kit.svelte.dev/docs/introduction for info. Also, `svelte-kit` now requires `vite` as a separate dependency. This fixes that. Moved the API_URL building logic to `vite.config.ts` also. I also noticed that the LICENSE file was not matching to the license in `frontend`. AFAIK we should be using MPL license, which saves us from people copying the design but still gives us zero responsibility in terms of warranty and zero liability.
subvisual · Sep 2, 2022 · 2a2ecab · 2a2ecab
1 parent 7f3e302
commit 2a2ecab
Show file tree

Hide file tree

Showing 21 changed files with 1,087 additions and 575 deletions.
diff --git a/.tool-versions b/.tool-versions
@@ -1,4 +1,4 @@
-nodejs 16.14.0
+nodejs 16.17.0
 elixir 1.13.3
 erlang 24.3.4
 ruby 2.6.6
diff --git a/LICENSE.md b/LICENSE.md
diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -3,3 +3,4 @@ node_modules
 /.svelte-kit
 /build
 /functions
+.netlify
diff --git a/frontend/.node-version b/frontend/.node-version
@@ -1 +1 @@
-16.2.0
+16.17.0
diff --git a/frontend/.npmrc b/frontend/.npmrc
@@ -1 +0,0 @@
-engine-strict=true

diff --git a/frontend/netlify.toml b/frontend/netlify.toml
@@ -1,7 +1,6 @@
 [build]
-  ignore = "/bin/false"
   command = "yarn build"
   publish = "build/"
-  functions = "functions/"
+
 [functions]
   node_bundler = "esbuild"
diff --git a/frontend/package.json b/frontend/package.json
@@ -1,36 +1,35 @@
 {
   "name": "secrets-frontend",
-  "license": "MPL 2.0",
+  "license": "MPL-2.0",
   "scripts": {
-    "dev": "svelte-kit dev",
-    "build": "svelte-kit build",
-    "preview": "svelte-kit preview",
+    "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",
     "lint": "prettier --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
     "format": "prettier --write --plugin-search-dir=. ."
   },
   "devDependencies": {
-    "@sveltejs/adapter-netlify": "next",
-    "@sveltejs/kit": "next",
-    "@typescript-eslint/eslint-plugin": "^5.28.0",
-    "@typescript-eslint/parser": "^5.28.0",
-    "autoprefixer": "^10.4.7",
-    "cssnano": "^5.1.11",
-    "eslint": "^8.17.0",
+    "@sveltejs/adapter-netlify": "1.0.0-next.75",
+    "@sveltejs/kit": "^1.0.0-next.455",
+    "@typescript-eslint/eslint-plugin": "^5.36.1",
+    "@typescript-eslint/parser": "^5.36.1",
+    "autoprefixer": "^10.4.8",
+    "cssnano": "^5.1.13",
+    "eslint": "^8.23.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-svelte3": "^4.0.0",
-    "postcss": "^8.4.14",
-    "postcss-load-config": "^4.0.1",
     "prettier": "~2.7.1",
     "prettier-plugin-svelte": "^2.7.0",
-    "prettier-plugin-tailwindcss": "^0.1.12",
+    "prettier-plugin-tailwindcss": "^0.1.13",
     "svelte": "^3.49.0",
     "svelte-preprocess": "^4.10.7",
-    "tailwindcss": "^3.1.3",
+    "tailwindcss": "^3.1.8",
     "tslib": "^2.4.0",
-    "typescript": "^4.7.3"
+    "typescript": "^4.8.2",
+    "vite": "^3.0.0"
   },
   "type": "module",
-  "dependencies": {
-    "uuid": "^8.3.2"
-  }
+  "dependencies": {}
 }
diff --git a/frontend/postcss.config.cjs b/frontend/postcss.config.cjs
@@ -7,11 +7,8 @@ const dev = mode === 'development';
 
 module.exports = {
   plugins: [
-    // Some plugins, like postcss-nested, need to run before Tailwind
     tailwindcss,
-    // But others, like autoprefixer, need to run after
     autoprefixer,
-
     !dev &&
       cssnano({
         preset: 'default'

diff --git a/frontend/src/app.html b/frontend/src/app.html
@@ -2,10 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    %svelte.head%
+    <meta name="viewport" content="width=device-width" />
+
+    %sveltekit.head%
   </head>
   <body>
-    <div id="svelte">%svelte.body%</div>
+    <div>%sveltekit.body%</div>
   </body>
 </html>
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
@@ -1,12 +1,17 @@
 const API_URL = import.meta.env.VITE_API_URL;
 
-export async function createSecret({
-  secret,
-  expiry
-}: {
-  secret: string;
-  expiry: number;
-}): Promise<string> {
+export type fetchType = (info: RequestInfo, init?: RequestInit) => Promise<Response>;
+
+export async function createSecret(
+  {
+    secret,
+    expiry
+  }: {
+    secret: string;
+    expiry: number;
+  },
+  fetch = globalThis.fetch
+): Promise<string> {
   const response = await fetch(`${API_URL}/api/secrets`, {
     method: 'POST',
     body: JSON.stringify({ secret, expiry }),
@@ -21,13 +26,13 @@ export async function createSecret({
   return body.room_id;
 }
 
-export async function checkIfRoomExists(room: string): Promise<boolean> {
+export async function checkIfRoomExists(room: string, fetch = globalThis.fetch): Promise<boolean> {
   const response = await fetch(`${API_URL}/api/secrets/${room}`, { method: 'HEAD' });
 
   return response.status === 200;
 }
 
-export async function getRoomSecret(room: string): Promise<string> {
+export async function getRoomSecret(room: string, fetch = globalThis.fetch): Promise<string> {
   let response, body;
 
   try {
@@ -43,15 +48,15 @@ export async function getRoomSecret(room: string): Promise<string> {
   return body.secret;
 }
 
-export async function deleteSecret(room: string): Promise<void> {
+export async function deleteSecret(room: string, fetch = globalThis.fetch): Promise<void> {
   try {
     await fetch(`${API_URL}/api/secrets/${room}`, { method: 'DELETE' });
   } catch (error) {
     throw 'Something exploded!';
   }
 }
 
-export async function getStats(): Promise<{ secretsCounter: string }> {
+export async function getStats(fetch = globalThis.fetch): Promise<{ secretsCounter: string }> {
   try {
     const response = await fetch(`${API_URL}/api/stats`);
     const json = await response.json();

diff --git a/frontend/src/routes/__layout.svelte → frontend/src/routes/+layout.svelte b/frontend/src/routes/__layout.svelte → frontend/src/routes/+layout.svelte
@@ -1,22 +1,12 @@
-<script context="module" lang="ts">
-  import type { Load } from '@sveltejs/kit';
-  import { getStats } from '$lib/api';
-  export const load: Load = async () => {
-    const stats = await getStats();
-
-    return {
-      props: stats
-    };
-  };
-</script>
-
 <script lang="ts">
+  import type { LayoutData } from './$types';
   import SecretsLogo from '$lib/components/SecretsLogo.svelte';
   import FiniamI from '$lib/components/FiniamI.svelte';
   import FiniamM from '$lib/components/FiniamM.svelte';
   import '../app.css';
 
-  export let secretsCounter: number;
+  export let data: LayoutData;
+  let { secretsCounter } = data;
 </script>
 
 <svelte:head>

diff --git a/frontend/src/routes/+layout.ts b/frontend/src/routes/+layout.ts
@@ -0,0 +1,8 @@
+import { getStats } from '$lib/api';
+import type { LayoutLoad } from './$types';
+
+export const load: LayoutLoad = async ({ fetch }) => {
+  const stats = await getStats(fetch);
+
+  return stats;
+};
diff --git a/frontend/src/routes/index.svelte → frontend/src/routes/+page.svelte b/frontend/src/routes/index.svelte → frontend/src/routes/+page.svelte
@@ -99,9 +99,9 @@
             bind:value={expiry}
           >
             <!-- Disable for now, while we use a non-persistent redis
-            <option value="86400">1 day</option>
-            <option value="604800">7 days</option>
-          -->
+              <option value="86400">1 day</option>
+              <option value="604800">7 days</option>
+            -->
             <option value="21600">6 hours </option>
             <option value="3600">1 hour</option>
             <option value="1800">30 min</option>

diff --git a/frontend/src/routes/[room].svelte → frontend/src/routes/[room]/+page.svelte b/frontend/src/routes/[room].svelte → frontend/src/routes/[room]/+page.svelte
@@ -1,24 +1,14 @@
-<script context="module" lang="ts">
-  import type { Load } from '@sveltejs/kit';
-
-  export const load: Load = async ({ page }) => {
-    return {
-      props: { room: page.params.room, roomExists: await checkIfRoomExists(page.params.room) }
-    };
-  };
-</script>
-
 <script lang="ts">
-  // @hmr:keep-all
+  import type { PageData } from './$types';
   import SEO from '$lib/components/SEO.svelte';
   import Button from '$lib/components/Button.svelte';
   import CopyButton from '$lib/components/CopyButton.svelte';
   import { decryptData } from '$lib/crypto';
-  import { getRoomSecret, checkIfRoomExists } from '$lib/api';
+  import { getRoomSecret } from '$lib/api';
   import { goto } from '$app/navigation';
 
-  export let room: string;
-  export let roomExists: boolean;
+  export let data: PageData;
+  let { room, roomExists } = data;
   let loading = false;
   let decryptedSecret: string;
 

diff --git a/frontend/src/routes/[room]/+page.ts b/frontend/src/routes/[room]/+page.ts
@@ -0,0 +1,6 @@
+import { checkIfRoomExists } from '$lib/api';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, fetch }) => {
+  return { room: params.room, roomExists: await checkIfRoomExists(params.room, fetch) };
+};
diff --git a/frontend/src/routes/error.svelte → frontend/src/routes/error/+page.svelte b/frontend/src/routes/error.svelte → frontend/src/routes/error/+page.svelte
diff --git a/frontend/svelte.config.js b/frontend/svelte.config.js
@@ -1,24 +1,6 @@
 import preprocess from 'svelte-preprocess';
 import adapter from '@sveltejs/adapter-netlify';
 
-function buildApiUrl() {
-  if (process.env.NODE_ENV === 'development') {
-    return 'http://localhost:4000';
-  }
-
-  const prNumber = process.env['REVIEW_ID'];
-
-  if (prNumber) return `https://finiam-secrets-pr-${prNumber}.herokuapp.com`;
-
-  return `https://finiam-secrets.herokuapp.com`;
-}
-
-const API_URL = buildApiUrl();
-
-console.log('RUNNING WITH THE FOLLOWING API_URL', API_URL);
-
-process.env.VITE_API_URL = API_URL;
-
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
   // Consult https://github.com/sveltejs/svelte-preprocess
@@ -30,7 +12,6 @@ const config = {
   ],
 
   kit: {
-    target: '#svelte',
     adapter: adapter()
   }
 };

diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
@@ -1,6 +1,5 @@
 module.exports = {
-  mode: 'jit',
-  purge: ['./src/**/*.{html,js,svelte,ts}'],
+  content: ['./src/**/*.{html,js,svelte,ts}'],
   theme: {
     extend: {
       colors: {

diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
@@ -1,30 +1,3 @@
 {
-  "compilerOptions": {
-    "moduleResolution": "node",
-    "module": "es2020",
-    "lib": ["es2020"],
-    "target": "es2019",
-    /**
-			svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
-			to enforce using \`import type\` instead of \`import\` for Types.
-			*/
-    "importsNotUsedAsValues": "error",
-    "isolatedModules": true,
-    "resolveJsonModule": true,
-    /**
-			To have warnings/errors of the Svelte compiler at the correct position,
-			enable source maps by default.
-			*/
-    "sourceMap": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "baseUrl": ".",
-    "allowJs": true,
-    "checkJs": true,
-    "paths": {
-      "$lib/*": ["src/lib/*"]
-    }
-  },
-  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
+  "extends": "./.svelte-kit/tsconfig.json"
 }
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
@@ -0,0 +1,26 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig, type UserConfig } from 'vite';
+
+export default defineConfig(({ mode }) => {
+  function buildApiUrl() {
+    if (mode === 'development') {
+      return 'http://localhost:4000';
+    }
+
+    const prNumber = process.env['REVIEW_ID'];
+
+    if (prNumber) return `https://finiam-secrets-pr-${prNumber}.herokuapp.com`;
+
+    return `https://finiam-secrets.herokuapp.com`;
+  }
+
+  const apiUrl = buildApiUrl();
+  console.log('RUNNING WITH THE FOLLOWING API_URL', apiUrl);
+  process.env.VITE_API_URL = apiUrl;
+
+  const config: UserConfig = {
+    plugins: [...sveltekit()]
+  };
+
+  return config;
+});