Changes necessary simply to update SvelteKit.

package.json

@@ -2,11 +2,11 @@
     "name": "helth",
     "version": "0.0.3",
     "scripts": {
-        "dev": "svelte-kit dev --https --host",
-        "build": "svelte-kit build",
-        "package": "svelte-kit package",
-        "preview": "svelte-kit preview --host --port=3001",
-        "prepare": "svelte-kit sync",
+        "dev": "vite dev --host",
+        "build": "vite build",
+        "package": "vite package",
+        "preview": "vite preview --host --port=3001",
+        "prepare": "vite sync",
         "test": "playwright test",
         "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
         "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
@@ -15,12 +15,14 @@
         "@playwright/test": "^1.20.0",
         "@sveltejs/adapter-auto": "next",
         "@sveltejs/kit": "next",
+        "@vitejs/plugin-basic-ssl": "^0.1.2",
         "eslint": "^7.32.0",
         "eslint-config-prettier": "^8.3.0",
         "eslint-plugin-svelte3": "^3.2.1",
         "prettier": "^2.5.1",
         "prettier-plugin-svelte": "^2.5.0",
-        "svelte": "^3.44.0"
+        "svelte": "^3.44.0",
+        "vite": "^3.1.0"
     },
     "type": "module",
     "dependencies": {

src/components/Barcode.svelte

@@ -5,7 +5,6 @@
 
   // scanner
   let selected;
-  let code = '';
   let open = false;
 
   const codeReader = new BrowserMultiFormatReader();
@@ -17,12 +16,13 @@
           .then(result => fetch(`/upc?barcode=${result.getText()}`))
           .then(response => response.json())
           .then(val => {
-              $todayStore.calories = $todayStore.calories + val.calories.quantity;
-              $todayStore.salt = $todayStore.salt + val.sodium.quantity;
-              $todayStore.protein = $todayStore.protein + val.protein.quantity;
-              open = false;
-            })
-          .catch(error => console.error(error))
+            $todayStore.calories = $todayStore.calories + val.calories.quantity;
+            $todayStore.salt = $todayStore.salt + val.sodium.quantity;
+            $todayStore.protein = $todayStore.protein + val.protein.quantity;
+            open = false;
+          })
+      // JSON.parse error
+          .catch(error => console.log(error))
           .finally(() => codeReader.reset());
   }
 

src/components/Helth.svelte

@@ -1,6 +1,5 @@
 <script>
-  // dynamically import the image src
-  import helth from '$static/helth.jpg';
+  import helth from '/src/static/helth.jpg';
 </script>
 
 <a href="/">

src/components/Modal.svelte

@@ -18,7 +18,7 @@
   }
   .modal {
       display: none;
-      position: absolute;
+      position: fixed;
       max-width: 100%;
       height: 95%;
       z-index: 95;

src/components/charts/Chart.svelte

@@ -73,5 +73,6 @@
     width: 90vw;
     height: auto;
     max-width: 1000px;
+    z-index: -1;
   }
 </style>

src/routes/+layout.js

@@ -0,0 +1 @@
+export const prerender = true;

src/routes/upc.js → src/routes/upc/+server.js

@@ -1,19 +1,18 @@
 import { facts } from '$utils/nutrients';
 
-export async function get({ url }) {
+export async function GET({ url }) {
   const code = url.searchParams.get('barcode');
 
   const res = await fetch(`https://redsky.target.com/redsky_aggregations/v1/apps/product_from_barcode_v1?barcode=${code}&pricing_store_id=530&key=5d546952f5059b16db4aa90913e56d09d3ff2aa4`)
-  .then(res => res.json())
+  .then(response => response.json())
   .then(json => facts(json.data.product_by_barcode.tcin));
 
+  // SvelteKit server endpoints must return a Response object
+  // https://kit.svelte.dev/docs/routing#server
   if(res) {
-    return {
-      body: res
-    };
+    return new Response(JSON.stringify(res));
   }
 
-  return {
-      status: 404
-  };
+  const error = new Response(new String(), {status: 404, statusText: 'UPC not found'});
+  return error;
 }

src/stores/local.js

@@ -1,4 +1,4 @@
-import { browser } from '$app/env';
+import { browser } from '$app/environment';
 import { writable, readable } from 'svelte/store';
 import { thePast } from '$utils/dates';
 

svelte.config.js

@@ -1,39 +1,13 @@
 import adapter from '@sveltejs/adapter-node';
-import path from 'path';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-    kit: {
-        adapter: adapter({
-            fallback: '200.html'
-        }),
-        prerender: {
-            default: true
-        },
-        trailingSlash: 'always',
-        vite: {
-          server: {
-              fs: {
-                  allow: ['static']
-              }
-          },
-          preview: {
-            port: 3001
-          },
-          resolve: {
-              alias: {
-                  // set an alias so images can be dynamically imported
-                  $static: path.resolve('./static'),
-                  $components: path.resolve('./src/components'),
-                  $utils: path.resolve('./src/utils'),
-                  $stores: path.resolve('./src/stores')
-              }
-          },
-          ssr: {
-            noExternal: ['chart.js']
-          }
-        }
-    }
+  kit: {
+    adapter: adapter({
+        fallback: '200.html'
+    }),
+    trailingSlash: 'always',
+  }
 };
 
 export default config;

vite.config.js

@@ -0,0 +1,29 @@
+import path from 'path';
+import { sveltekit } from '@sveltejs/kit/vite';
+import basicSsl from '@vitejs/plugin-basic-ssl';
+
+/** @type {import('vite').UserConfig} */
+const config = {
+  plugins: [sveltekit(), basicSsl()],
+  server: {
+    fs: {
+      allow: ['static']
+    },
+    https: true,
+    port: 3000,
+    strictPort: true
+  },
+  resolve: {
+    alias: {
+      // set an alias so images can be dynamically imported
+      $static: path.resolve('./static'),
+      $components: path.resolve('./src/components'),
+      $utils: path.resolve('./src/utils'),
+      $stores: path.resolve('./src/stores')
+    }
+  },
+  ssr: {
+    noExternal: ['chart.js']
+  }
+};
+export default config;