subvisual · paulacarneiro · Jul 14, 2022 · Jul 14, 2022 · Jul 15, 2022 · Jul 15, 2022
diff --git a/.tool-versions b/.tool-versions
@@ -1,4 +1,4 @@
-nodejs 16.14.0
+nodejs 18.6.0
 elixir 1.13.3
 erlang 24.3.4
 ruby 2.6.6
diff --git a/frontend/.node-version b/frontend/.node-version
@@ -1 +1 @@
-16.2.0
+18.6.0
diff --git a/frontend/package.json b/frontend/package.json
@@ -2,31 +2,33 @@
   "name": "secrets-frontend",
   "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",
     "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",
+    "@sveltejs/adapter-netlify": "1.0.0-next.68",
+    "@sveltejs/kit": "1.0.0-next.372",
+    "@typescript-eslint/eslint-plugin": "^5.30.6",
+    "@typescript-eslint/parser": "^5.30.6",
     "autoprefixer": "^10.4.7",
-    "cssnano": "^5.1.11",
-    "eslint": "^8.17.0",
+    "cssnano": "^5.1.12",
+    "eslint": "^8.19.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",
-    "svelte": "^3.48.0",
+    "prettier-plugin-tailwindcss": "^0.1.12",
+    "svelte": "^3.49.0",
     "svelte-preprocess": "^4.10.7",
-    "tailwindcss": "^3.1.3",
+    "tailwindcss": "^3.1.6",
     "tslib": "^2.4.0",
-    "typescript": "^4.7.3"
+    "typescript": "^4.7.4",
+    "vite": "^2.9.10"
   },
   "type": "module",
   "dependencies": {

diff --git a/frontend/src/app.html b/frontend/src/app.html
@@ -3,9 +3,9 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    %svelte.head%
+    %sveltekit.head%
   </head>
   <body>
-    <div id="svelte">%svelte.body%</div>
+    <div id="svelte">%sveltekit.body%</div>
   </body>
 </html>
diff --git a/frontend/src/lib/components/Button.svelte b/frontend/src/lib/components/Button.svelte
@@ -16,18 +16,18 @@
 
 <style>
   button {
-    @apply flex items-center p-3 rounded bg-brand text-white;
+    @apply flex items-center rounded bg-brand p-3 text-white;
   }
 
   button.secondary {
-    @apply bg-white text-brand border border-brand;
+    @apply border border-brand bg-white text-brand;
   }
 
   button:disabled {
-    @apply opacity-20 cursor-not-allowed;
+    @apply cursor-not-allowed opacity-20;
   }
 
   button.loading {
-    @apply opacity-20 cursor-wait;
+    @apply cursor-wait opacity-20;
   }
 </style>
diff --git a/frontend/src/routes/[room].svelte b/frontend/src/routes/[room].svelte
@@ -1,9 +1,9 @@
 <script context="module" lang="ts">
   import type { Load } from '@sveltejs/kit';
 
-  export const load: Load = async ({ page }) => {
+  export const load: Load = async ({ params }) => {
     return {
-      props: { room: page.params.room, roomExists: await checkIfRoomExists(page.params.room) }
+      props: { room: params.room, roomExists: await checkIfRoomExists(params.room) }
     };
   };
 </script>
@@ -46,31 +46,31 @@
   keywords="secrets,share,end-to-end,encryption,finiam"
 />
 
-<div class="w-full flex flex-col items-center">
+<div class="flex w-full flex-col items-center">
   {#if !roomExists}
-    <div class="w-full flex flex-col items-center space-y-10">
+    <div class="flex w-full flex-col items-center space-y-10">
       <p class="w-4/5 text-center">
         This secret was either already revealed or never existed in the first place!
       </p>
       <Button on:click={createNewSecret}>Create a new secret</Button>
     </div>
   {:else if !loading && !decryptedSecret}
-    <p class="w-4/5 text-center mb-10">The following secret can only be revealed once!</p>
+    <p class="mb-10 w-4/5 text-center">The following secret can only be revealed once!</p>
 
     <Button on:click={revealSecret}>Reveal the secret</Button>
   {:else if loading}
     Loading...
   {:else if decryptedSecret}
-    <p class="w-4/5 text-center mb-10">
+    <p class="mb-10 w-4/5 text-center">
       Your secret was revealed and permanently deleted from the system 🔥
     </p>
     <div
-      class="border border-gray-300 rounded-md p-4 w-4/5 cursor-not-allowed break-words whitespace-pre-wrap"
+      class="w-4/5 cursor-not-allowed whitespace-pre-wrap break-words rounded-md border border-gray-300 p-4"
     >
       {decryptedSecret}
     </div>
 
-    <div class="flex flex-row space-x-4 mt-10">
+    <div class="mt-10 flex flex-row space-x-4">
       <CopyButton value={decryptedSecret}>Copy information</CopyButton>
       <Button on:click={createNewSecret} secondary>Create a new secret</Button>
     </div>

diff --git a/frontend/src/routes/__layout.svelte b/frontend/src/routes/__layout.svelte
@@ -22,15 +22,15 @@
   <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 </svelte:head>
 
-<div class="flex flex-col max-w-2xl min-h-screen mx-auto">
-  <main class="w-full pt-16 pb-6 flex flex-col items-center">
+<div class="mx-auto flex min-h-screen max-w-2xl flex-col">
+  <main class="flex w-full flex-col items-center pt-16 pb-6">
     <FiniamLogo class="mb-20" />
 
     <slot />
   </main>
 
   <footer class="mt-auto">
-    <p class="block mt-20 mx-auto text-center">
+    <p class="mx-auto mt-20 block text-center">
       Open source project. <a
         class="underline"
         href="https://github.com/finiam/secrets.finiam.com"
@@ -40,7 +40,7 @@
       </a>
     </p>
 
-    <p class="block text-sm text-gray-500 mt-8 mb-20 mx-auto text-center">
+    <p class="mx-auto mt-8 mb-20 block text-center text-sm text-gray-500">
       Created secrets so far: {secretsCounter}
     </p>
   </footer>

diff --git a/frontend/src/routes/error.svelte b/frontend/src/routes/error.svelte
@@ -8,7 +8,7 @@
   keywords="secrets,share,end-to-end,encryption,finiam"
 />
 
-<main class="max-w-2xl mx-auto pt-24 pb-6 flex flex-col items-center">
+<main class="mx-auto flex max-w-2xl flex-col items-center pt-24 pb-6">
   <h1 class="mb-8">Finiam</h1>
 
   <p>Oops, fatal error!</p>

diff --git a/frontend/src/routes/index.svelte b/frontend/src/routes/index.svelte
@@ -50,16 +50,16 @@
 />
 
 {#if sharingUrl && !submitting}
-  <div class="flex flex-col items-center w-full">
-    <p class="max-w-lg w-4/5 text-center mb-10">
+  <div class="flex w-full flex-col items-center">
+    <p class="mb-10 w-4/5 max-w-lg text-center">
       As soon as someone opens the link, it will be destroyed automatically, ensuring full
       protection of your information.
     </p>
 
-    <div class="border-2 border-gray-300 rounded-md p-4 w-4/5 mb-10">
+    <div class="mb-10 w-4/5 rounded-md border-2 border-gray-300 p-4">
       <p class="w-full truncate">{sharingUrl}</p>
     </div>
-    <div class="flex flex-row items-center px-4 space-x-4">
+    <div class="flex flex-row items-center space-x-4 px-4">
       <CopyButton value={sharingUrl}>Copy link</CopyButton>
 
       <Button class="bg-gray-200" secondary on:click={handleReset} loading={deleting}
@@ -68,28 +68,28 @@
     </div>
   </div>
 {:else}
-  <div class="flex flex-col items-center w-full">
-    <p class="max-w-lg w-4/5 text-center mb-10">
+  <div class="flex w-full flex-col items-center">
+    <p class="mb-10 w-4/5 max-w-lg text-center">
       Finiam Secrets allows you to share information securely and ephemerally. The generated link
       will only work once and then it will disappear forever.
     </p>
-    <form class="flex flex-col items-center w-full">
+    <form class="flex w-full flex-col items-center">
       <textarea
-        class="border-2 border-gray-300 rounded-md p-4 w-4/5 h-64"
+        class="h-64 w-4/5 rounded-md border-2 border-gray-300 p-4"
         name="secret"
         placeholder="Your information..."
         bind:value={textToEncrypt}
       />
 
-      <div class="w-full mx-8 mt-8">
+      <div class="mx-8 mt-8 w-full">
         <p class="text-lg">Secret lifetime</p>
 
         <div class="flex">
           <p>
             This link is valid for
             <select
               name="expiry"
-              class="border-gray-400 border-2 p-2 rounded cursor-pointer"
+              class="cursor-pointer rounded border-2 border-gray-400 p-2"
               bind:value={expiry}
             >
               <!-- Disable for now, while we use a non-persistent redis

diff --git a/frontend/svelte.config.js b/frontend/svelte.config.js
@@ -30,7 +30,6 @@ const config = {
   ],
 
   kit: {
-    target: '#svelte',
     adapter: adapter()
   }
 };

diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
@@ -1,6 +1,6 @@
 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,4 +1,5 @@
 {
+  "extends": "./.svelte-kit/tsconfig.json",
   "compilerOptions": {
     "moduleResolution": "node",
     "module": "es2020",
@@ -23,7 +24,8 @@
     "allowJs": true,
     "checkJs": true,
     "paths": {
-      "$lib/*": ["src/lib/*"]
+      "$lib/*": ["src/lib/*"],
+      "$lib": ["src/lib"]
     }
   },
   "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]

diff --git a/frontend/vite.config.js b/frontend/vite.config.js
@@ -0,0 +1,8 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+
+/** @type {import('vite').UserConfig} */
+const config = {
+  plugins: [sveltekit()]
+};
+
+export default config;
-Original file line number
+Diff line change
@@ Expand Up / @@ -30,7 +30,6 @@ const config = { @@
       ],
       kit: {
-        target: '#svelte',
         adapter: adapter()
       }
     };
@@ Expand Down @@