docs: adding do for updated development server run command

- `npm run dev`
fix: buffer typescript error in util.ts when parsing ArrayBuffer
22 changed files with 15468 additions and 21581 deletions
--- a/.env.production
+++ b/.env.production
@ -1,4 +1,4 @@
-# Only the variables that start with VUE_APP_ are seen in the application process.env in Vue.
-VUE_APP_BVC_MEETUPS_PROJECT_CLAIM_ID=https://endorser.ch/entity/01GXYPFF7FA03NXKPYY142PY4H
-VUE_APP_DEFAULT_ENDORSER_API_SERVER=https://api.endorser.ch
-VUE_APP_DEFAULT_IMAGE_API_SERVER=https://image-api.timesafari.app
+# Only the variables that start with VITE_ are seen in the application process.env in Vue.
+VITE_BVC_MEETUPS_PROJECT_CLAIM_ID=https://endorser.ch/entity/01GXYPFF7FA03NXKPYY142PY4H
+VITE_DEFAULT_ENDORSER_API_SERVER=https://api.endorser.ch
+VITE_DEFAULT_IMAGE_API_SERVER=https://image-api.timesafari.app
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -2,6 +2,7 @@ module.exports = {
  root: true,
  env: {
    node: true,
+    es2022: true,
  },
  extends: [
    "plugin:vue/vue3-essential",
@ -9,9 +10,9 @@ module.exports = {
    "@vue/typescript/recommended",
    "plugin:prettier/recommended",
  ],
-  parserOptions: {
-    ecmaVersion: 2020,
-  },
+  // parserOptions: {
+  //   ecmaVersion: 2020,
+  // },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
--- a/README.md
+++ b/README.md
@ -18,6 +18,11 @@ npm install

 ### Compiles and hot-reloads for development
 ```
+npm run dev
+```
+
+### Builds the production app
+```
 npm run serve
 ```

@ -42,7 +47,7 @@ npm run lint
 ```
 # (See .env.development for more details.)
 # The test BVC_MEETUPS_PROJECT_CLAIM_ID does not resolve as a URL because it's only in the test DB and the prod redirect won't redirect there.
-TIME_SAFARI_APP_TITLE="TimeSafari_Test" VUE_APP_BVC_MEETUPS_PROJECT_CLAIM_ID=https://endorser.ch/entity/01HNTZYJJXTGT0EZS3VEJGX7AK VUE_APP_DEFAULT_ENDORSER_API_SERVER=https://test-api.endorser.ch VUE_APP_DEFAULT_IMAGE_API_SERVER=https://test-image-api.timesafari.app npm run build
+TIME_SAFARI_APP_TITLE="TimeSafari_Test" VITE_BVC_MEETUPS_PROJECT_CLAIM_ID=https://endorser.ch/entity/01HNTZYJJXTGT0EZS3VEJGX7AK VITE_DEFAULT_ENDORSER_API_SERVER=https://test-api.endorser.ch VITE_DEFAULT_IMAGE_API_SERVER=https://test-image-api.timesafari.app npm run build
 ```

  * Production
--- a/babel.config.js
+++ b/babel.config.js
@ -1,3 +0,0 @@
-module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"],
-};
--- a/index.html
+++ b/index.html
@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="/favicon.ico">
+    <title>TimeSafari</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but TimeSafari doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -3,93 +3,87 @@
  "version": "0.3.4",
  "private": true,
  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "dev": "vite",
+    "serve": "vite preview",
+    "build": "vite build",
+    "lint": "eslint --ext .js,.ts,.vue --ignore-path .gitignore --fix src"
  },
  "dependencies": {
-    "@dicebear/collection": "^5.3.5",
-    "@dicebear/core": "^5.3.5",
+    "@dicebear/collection": "^5.4.1",
+    "@dicebear/core": "^5.4.1",
    "@ethersproject/hdnode": "^5.7.0",
-    "@fortawesome/fontawesome-svg-core": "^6.4.2",
-    "@fortawesome/free-solid-svg-icons": "^6.4.2",
-    "@fortawesome/vue-fontawesome": "^3.0.3",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/vue-fontawesome": "^3.0.6",
    "@pvermeer/dexie-encrypted-addon": "^3.0.0",
-    "@tweenjs/tween.js": "^21.0.0",
+    "@tweenjs/tween.js": "^21.1.1",
    "@types/js-yaml": "^4.0.9",
    "@types/luxon": "^3.4.2",
-    "@veramo/core": "^5.4.1",
-    "@veramo/credential-w3c": "^5.4.1",
-    "@veramo/data-store": "^5.4.1",
-    "@veramo/did-manager": "^5.4.1",
-    "@veramo/did-provider-ethr": "^5.4.1",
-    "@veramo/did-resolver": "^5.4.1",
-    "@veramo/key-manager": "^5.4.1",
-    "@vueuse/core": "^10.4.1",
+    "@veramo/core": "^5.6.0",
+    "@veramo/credential-w3c": "^5.6.0",
+    "@veramo/data-store": "^5.6.0",
+    "@veramo/did-manager": "^5.6.0",
+    "@veramo/did-provider-ethr": "^5.6.0",
+    "@veramo/did-resolver": "^5.6.0",
+    "@veramo/key-manager": "^5.6.0",
+    "@vueuse/core": "^10.9.0",
    "@zxing/text-encoding": "^0.9.0",
-    "axios": "^1.5.0",
-    "buffer": "^6.0.3",
+    "axios": "^1.6.8",
    "class-transformer": "^0.5.1",
-    "core-js": "^3.32.1",
-    "dexie": "^3.2.4",
-    "dexie-export-import": "^4.0.7",
-    "did-jwt": "^7.2.7",
-    "ethereum-cryptography": "^2.1.2",
+    "dexie": "^3.2.7",
+    "dexie-export-import": "^4.1.1",
+    "did-jwt": "^7.4.7",
+    "ethereum-cryptography": "^2.1.3",
    "ethereumjs-util": "^7.1.5",
    "ethr-did-resolver": "^8.1.2",
    "git-describe": "^4.1.1",
    "jdenticon": "^3.2.0",
    "js-generate-password": "^0.1.9",
    "js-yaml": "^4.1.0",
-    "localstorage-slim": "^2.5.0",
+    "localstorage-slim": "^2.7.0",
    "luxon": "^3.4.4",
    "merkletreejs": "^0.3.11",
-    "moment": "^2.29.4",
+    "moment": "^2.30.1",
    "notiwind": "^2.0.2",
    "papaparse": "^5.4.1",
    "pina": "^0.20.2204228",
-    "pinia-plugin-persistedstate": "^3.2.0",
+    "pinia-plugin-persistedstate": "^3.2.1",
    "qr-code-generator-vue3": "^1.4.21",
-    "ramda": "^0.29.0",
-    "readable-stream": "^4.4.2",
-    "reflect-metadata": "^0.1.13",
+    "ramda": "^0.29.1",
+    "readable-stream": "^4.5.2",
+    "reflect-metadata": "^0.1.14",
    "register-service-worker": "^1.7.2",
    "simple-vue-camera": "^1.1.3",
    "three": "^0.156.1",
    "ua-parser-js": "^1.0.37",
    "util": "^0.12.5",
-    "vue": "^3.3.4",
+    "vue": "^3.4.21",
    "vue-axios": "^3.5.2",
-    "vue-facing-decorator": "^3.0.2",
-    "vue-qrcode-reader": "^5.4.1",
-    "vue-router": "^4.2.4",
+    "vue-facing-decorator": "^3.0.4",
+    "vue-qrcode-reader": "^5.5.3",
+    "vue-router": "^4.3.0",
    "web-did-resolver": "^2.0.27"
  },
  "devDependencies": {
-    "@types/leaflet": "^1.9.4",
-    "@types/ramda": "^0.29.3",
+    "@types/leaflet": "^1.9.8",
+    "@types/ramda": "^0.29.11",
    "@types/three": "^0.155.1",
    "@types/ua-parser-js": "^0.7.39",
-    "@typescript-eslint/eslint-plugin": "^6.6.0",
-    "@typescript-eslint/parser": "^6.6.0",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "@vitejs/plugin-vue": "^5.0.4",
    "@vue-leaflet/vue-leaflet": "^0.10.1",
-    "@vue/cli-plugin-babel": "~5.0.8",
-    "@vue/cli-plugin-eslint": "~5.0.8",
-    "@vue/cli-plugin-pwa": "~5.0.8",
-    "@vue/cli-plugin-router": "~5.0.8",
-    "@vue/cli-plugin-typescript": "~5.0.8",
-    "@vue/cli-plugin-vuex": "~5.0.8",
-    "@vue/cli-service": "~5.0.8",
    "@vue/eslint-config-typescript": "^11.0.3",
-    "autoprefixer": "^10.4.15",
-    "eslint": "^8.53.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-vue": "^9.17.0",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-vue": "^9.23.0",
    "leaflet": "^1.9.4",
-    "postcss": "^8.4.29",
-    "prettier": "^3.1.0",
-    "tailwindcss": "^3.3.3",
-    "typescript": "~5.2.2"
+    "postcss": "^8.4.38",
+    "prettier": "^3.2.5",
+    "tailwindcss": "^3.4.1",
+    "typescript": "~5.2.2",
+    "vite": "^5.2.0"
  }
 }
--- a/public/index.html
+++ b/public/index.html
@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>
--- a/src/assets/styles/tailwind.css
+++ b/src/assets/styles/tailwind.css
@ -1,9 +1,8 @@
+@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

-@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
-
@layer base {
    html {
        font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif !important;
--- a/src/constants/app.ts
+++ b/src/constants/app.ts
@ -20,11 +20,11 @@ export enum AppString {
 }

 export const DEFAULT_ENDORSER_API_SERVER =
-  process.env.VUE_APP_DEFAULT_ENDORSER_API_SERVER ||
+  import.meta.env.VITE_DEFAULT_ENDORSER_API_SERVER ||
  AppString.TEST_ENDORSER_API_SERVER;

 export const DEFAULT_IMAGE_API_SERVER =
-  process.env.VUE_APP_DEFAULT_IMAGE_API_SERVER ||
+  import.meta.env.VITE_DEFAULT_IMAGE_API_SERVER ||
  AppString.TEST_IMAGE_API_SERVER;

 export const DEFAULT_PUSH_SERVER =
--- a/src/libs/crypto/index.ts
+++ b/src/libs/crypto/index.ts
@ -113,7 +113,7 @@ export const sign = async (privateKeyHex: string) => {
 *  The SimpleSigner returns a configured function for signing data.
 *
 *  @example
- *  const signer = SimpleSigner(process.env.PRIVATE_KEY)
+ *  const signer = SimpleSigner(import.meta.env.PRIVATE_KEY)
 *  signer(data, (err, signature) => {
 *    ...
 *  })
--- a/src/libs/endorserServer.ts
+++ b/src/libs/endorserServer.ts
@ -794,7 +794,7 @@ export const claimSpecialDescription = (
 };

 export const BVC_MEETUPS_PROJECT_CLAIM_ID =
-  process.env.VUE_APP_BVC_MEETUPS_PROJECT_CLAIM_ID ||
+  import.meta.env.VITE_BVC_MEETUPS_PROJECT_CLAIM_ID ||
  "https://endorser.ch/entity/01HNTZYJJXTGT0EZS3VEJGX7AK"; // this won't resolve as a URL on production; it's a URN only found in the test system

 export const bvcMeetingJoinClaim = (did: string, startTime: string) => {
--- a/src/libs/util.ts
+++ b/src/libs/util.ts
@ -12,9 +12,6 @@ import { deriveAddress, generateSeed, newIdentifier } from "@/libs/crypto";
 import { GenericServerRecord, containsHiddenDid } from "@/libs/endorserServer";
 import * as serverUtil from "@/libs/endorserServer";

-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const Buffer = require("buffer/").Buffer;
-
 // If you edit this, check that the numbers still line up on the side in the alert (on mobile, too),
 // and make sure they can take all actions while the notification shows.
 export const ONBOARD_MESSAGE =
@ -238,6 +235,19 @@ export const generateSaveAndActivateIdentity = async (): Promise<string> => {
  return newId.did;
 };

+function getBase64(subscription: PushSubscription, key: PushEncryptionKeyName) {
+  const buffer = subscription.getKey(key);
+  if (!buffer) {
+    return null;
+  }
+  const value = Buffer.from(buffer);
+  return value
+    .toString("base64")
+    .replace(/\+/g, "-")
+    .replace(/\//g, "_")
+    .replace(/=+$/, "");
+}
+
 export const sendTestThroughPushServer = async (
  subscription: PushSubscription,
  skipFilter: boolean,
@ -254,18 +264,8 @@ export const sendTestThroughPushServer = async (
  // Use something other than "Daily Update" https://gitea.anomalistdesign.com/trent_larson/py-push-server/src/commit/3c0e196c11bc98060ec5934e99e7dbd591b5da4d/app.py#L213
  const DIRECT_PUSH_TITLE = "DIRECT_NOTIFICATION";

-  const auth = Buffer.from(subscription.getKey("auth"));
-  const authB64 = auth
-    .toString("base64")
-    .replace(/\+/g, "-")
-    .replace(/\//g, "_")
-    .replace(/=+$/, "");
-  const p256dh = Buffer.from(subscription.getKey("p256dh"));
-  const p256dhB64 = p256dh
-    .toString("base64")
-    .replace(/\+/g, "-")
-    .replace(/\//g, "_")
-    .replace(/=+$/, "");
+  const authB64 = getBase64(subscription, "auth");
+  const p256dhB64 = getBase64(subscription, "p256dh");
  const newPayload = {
    endpoint: subscription.endpoint,
    keys: {
--- a/src/registerServiceWorker.ts
+++ b/src/registerServiceWorker.ts
@ -2,7 +2,7 @@

 import { register } from "register-service-worker";

-if (process.env.NODE_ENV === "production") {
+if (import.meta.env.NODE_ENV === "production") {
  register("/sw_scripts-combined.js", {
    ready() {
      console.log(
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -31,221 +31,154 @@ const routes: Array<RouteRecordRaw> = [
  {
    path: "/account",
    name: "account",
-    component: () =>
-      import(/* webpackChunkName: "account" */ "../views/AccountViewView.vue"),
+    component: () => import("../views/AccountViewView.vue"),
  },
  {
    path: "/claim/:id?",
    name: "claim",
-    component: () =>
-      import(/* webpackChunkName: "claim" */ "../views/ClaimView.vue"),
+    component: () => import("../views/ClaimView.vue"),
  },
  {
    path: "/confirm-contact",
    name: "confirm-contact",
-    component: () =>
-      import(
-        /* webpackChunkName: "confirm-contact" */ "../views/ConfirmContactView.vue"
-      ),
+    component: () => import("../views/ConfirmContactView.vue"),
  },
  {
    path: "/contact-amounts",
    name: "contact-amounts",
-    component: () =>
-      import(
-        /* webpackChunkName: "contact-amounts" */ "../views/ContactAmountsView.vue"
-      ),
+    component: () => import("../views/ContactAmountsView.vue"),
  },
  {
    path: "/contact-gives",
    name: "contact-gives",
-    component: () =>
-      import(
-        /* webpackChunkName: "contact-gives" */ "../views/ContactGiftingView.vue"
-      ),
+    component: () => import("../views/ContactGiftingView.vue"),
  },
  {
    path: "/contact-qr",
    name: "contact-qr",
-    component: () =>
-      import(
-        /* webpackChunkName: "contact-qr" */ "../views/ContactQRScanShowView.vue"
-      ),
+    component: () => import("../views/ContactQRScanShowView.vue"),
  },
  {
    path: "/contacts",
    name: "contacts",
-    component: () =>
-      import(/* webpackChunkName: "contacts" */ "../views/ContactsView.vue"),
+    component: () => import("../views/ContactsView.vue"),
  },
  {
    path: "/discover",
    name: "discover",
-    component: () =>
-      import(/* webpackChunkName: "discover" */ "../views/DiscoverView.vue"),
+    component: () => import("../views/DiscoverView.vue"),
  },
  {
    path: "/gifted-details",
    name: "gifted-details",
-    component: () =>
-      import(
-        /* webpackChunkName: "gifted-details" */ "../views/GiftedDetails.vue"
-      ),
+    component: () => import("../views/GiftedDetails.vue"),
  },
  {
    path: "/help",
    name: "help",
-    component: () =>
-      import(/* webpackChunkName: "help" */ "../views/HelpView.vue"),
+    component: () => import("../views/HelpView.vue"),
  },
  {
    path: "/",
    name: "home",
-    component: () =>
-      import(/* webpackChunkName: "home" */ "../views/HomeView.vue"),
+    component: () => import("../views/HomeView.vue"),
  },
  {
    path: "/help-notifications",
    name: "help-notifications",
-    component: () =>
-      import(
-        /* webpackChunkName: "help-notifications" */ "../views/HelpNotificationsView.vue"
-      ),
+    component: () => import("../views/HelpNotificationsView.vue"),
  },
  {
    path: "/identity-switcher",
    name: "identity-switcher",
-    component: () =>
-      import(
-        /* webpackChunkName: "identity-switcher" */ "../views/IdentitySwitcherView.vue"
-      ),
+    component: () => import("../views/IdentitySwitcherView.vue"),
  },
  {
    path: "/import-account",
    name: "import-account",
-    component: () =>
-      import(
-        /* webpackChunkName: "import-account" */ "../views/ImportAccountView.vue"
-      ),
+    component: () => import("../views/ImportAccountView.vue"),
  },
  {
    path: "/import-derive",
    name: "import-derive",
-    component: () =>
-      import(
-        /* webpackChunkName: "import-derive" */ "../views/ImportDerivedAccountView.vue"
-      ),
+    component: () => import("../views/ImportDerivedAccountView.vue"),
  },
  {
    path: "/new-edit-account",
    name: "new-edit-account",
-    component: () =>
-      import(
-        /* webpackChunkName: "new-edit-account" */ "../views/NewEditAccountView.vue"
-      ),
+    component: () => import("../views/NewEditAccountView.vue"),
  },
  {
    path: "/new-edit-project",
    name: "new-edit-project",
-    component: () =>
-      import(
-        /* webpackChunkName: "new-edit-project" */ "../views/NewEditProjectView.vue"
-      ),
+    component: () => import("../views/NewEditProjectView.vue"),
  },
  {
    path: "/new-identifier",
    name: "new-identifier",
-    component: () =>
-      import(
-        /* webpackChunkName: "new-identifier" */ "../views/NewIdentifierView.vue"
-      ),
+    component: () => import("../views/NewIdentifierView.vue"),
  },
  {
    path: "/project/:id?",
    name: "project",
-    component: () =>
-      import(/* webpackChunkName: "project" */ "../views/ProjectViewView.vue"),
+    component: () => import("../views/ProjectViewView.vue"),
  },
  {
    path: "/projects",
    name: "projects",
-    component: () =>
-      import(/* webpackChunkName: "projects" */ "../views/ProjectsView.vue"),
+    component: () => import("../views/ProjectsView.vue"),
    beforeEnter: enterOrStart,
  },
  {
    path: "/quick-action-bvc",
    name: "quick-action-bvc",
-    component: () =>
-      import(
-        /* webpackChunkName: "quick-action-bvc" */ "../views/QuickActionBvcView.vue"
-      ),
+    component: () => import("../views/QuickActionBvcView.vue"),
  },
  {
    path: "/quick-action-bvc-begin",
    name: "quick-action-bvc-begin",
-    component: () =>
-      import(
-        /* webpackChunkName: "quick-action-bvc-begin" */ "../views/QuickActionBvcBeginView.vue"
-      ),
+    component: () => import("../views/QuickActionBvcBeginView.vue"),
  },
  {
    path: "/quick-action-bvc-end",
    name: "quick-action-bvc-end",
-    component: () =>
-      import(
-        /* webpackChunkName: "quick-action-bvc-end" */ "../views/QuickActionBvcEndView.vue"
-      ),
+    component: () => import("../views/QuickActionBvcEndView.vue"),
  },
  {
    path: "/scan-contact",
    name: "scan-contact",
-    component: () =>
-      import(
-        /* webpackChunkName: "scan-contact" */ "../views/ContactScanView.vue"
-      ),
+    component: () => import("../views/ContactScanView.vue"),
  },
  {
    path: "/search-area",
    name: "search-area",
-    component: () =>
-      import(
-        /* webpackChunkName: "search-area" */ "../views/SearchAreaView.vue"
-      ),
+    component: () => import("../views/SearchAreaView.vue"),
  },
  {
    path: "/seed-backup",
    name: "seed-backup",
-    component: () =>
-      import(
-        /* webpackChunkName: "seed-backup" */ "../views/SeedBackupView.vue"
-      ),
+    component: () => import("../views/SeedBackupView.vue"),
  },
  {
    path: "/start",
    name: "start",
-    component: () =>
-      import(/* webpackChunkName: "start" */ "../views/StartView.vue"),
+    component: () => import("../views/StartView.vue"),
  },
  {
    path: "/statistics",
    name: "statistics",
-    component: () =>
-      import(
-        /* webpackChunkName: "statistics" */ "../views/StatisticsView.vue"
-      ),
+    component: () => import("../views/StatisticsView.vue"),
  },
  {
    path: "/test",
    name: "test",
-    component: () =>
-      import(/* webpackChunkName: "test" */ "../views/TestView.vue"),
+    component: () => import("../views/TestView.vue"),
  },
 ];

 /** @type {*} */
 const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
+  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
 });

--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@ -516,7 +516,6 @@
 <script lang="ts">
 import { AxiosError, AxiosRequestConfig } from "axios";
 import Dexie from "dexie";
-import "dexie-export-import";
 import { ImportProgress } from "dexie-export-import/dist/import";
 import { ref } from "vue";
 import { Component, Vue } from "vue-facing-decorator";
@ -539,9 +538,7 @@ import {
  EndorserRateLimits,
  ImageRateLimits,
 } from "@/libs/endorserServer";
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const Buffer = require("buffer/").Buffer;
+import { Buffer } from "buffer/";

 interface IAccount {
  did: string;
--- a/src/views/ContactQRScanShowView.vue
+++ b/src/views/ContactQRScanShowView.vue
@ -88,9 +88,7 @@ import {
  CONTACT_URL_PREFIX,
  ENDORSER_JWT_URL_LOCATION,
 } from "@/libs/endorserServer";
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const Buffer = require("buffer/").Buffer;
+import { Buffer } from "buffer/";

@Component({
  components: {
--- a/src/views/ContactsView.vue
+++ b/src/views/ContactsView.vue
@ -313,8 +313,8 @@ import QuickNav from "@/components/QuickNav.vue";
 import EntityIcon from "@/components/EntityIcon.vue";
 import { Account } from "@/db/tables/accounts";

-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const Buffer = require("buffer/").Buffer;
+import { Buffer } from "buffer/";
+

@Component({
  components: { QuickNav, EntityIcon },
--- a/src/views/HelpView.vue
+++ b/src/views/HelpView.vue
@ -385,7 +385,7 @@ export default class Help extends Vue {
  $notify!: (notification: NotificationIface, timeout?: number) => void;

  package = Package;
-  commitHash = process.env.VUE_APP_GIT_HASH;
+  commitHash = import.meta.env.VITE_GIT_HASH;

  showOnboardInfo() {
    this.$notify(
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,38 +1,26 @@
 {
 	"compilerOptions": {
-	"allowJs": true,
-	"resolveJsonModule": true,
-	"target": "esnext",
-	"module": "esnext",
-	"strict": true,
-	"strictPropertyInitialization": false,
-	"jsx": "preserve",
-	"moduleResolution": "node",
+		"target": "ES2020", // Latest ECMAScript features that are widely supported by modern browsers
+		"module": "ESNext", // Use ES modules
+		"strict": true, // Enable all strict type checking options
+		"jsx": "preserve", // Preserves JSX to be transformed by Babel or another transpiler
+		"moduleResolution": "node", // Use Node.js style module resolution
 		"experimentalDecorators": true,
-	"skipLibCheck": true,
-	"esModuleInterop": true,
-	"allowSyntheticDefaultImports": true,
-	"forceConsistentCasingInFileNames": true,
+		"esModuleInterop": true, // Enables compatibility with CommonJS modules for default imports
+		"allowSyntheticDefaultImports": true, // Allow default imports from modules with no default export
+		"forceConsistentCasingInFileNames": true, // Disallow inconsistently-cased references to the same file
 		"useDefineForClassFields": true,
 		"sourceMap": true,
-	"baseUrl": "./src",
-	"types": [
-	    "webpack-env"
-	],
+		"baseUrl": "./src", // Base directory to resolve non-relative module names
 		"paths": {
 			"@/components/*": ["components/*"],
 			"@/views/*": ["views/*"],
 			"@/db/*": ["db/*"],
 			"@/libs/*": ["libs/*"],
 			"@/constants/*": ["constants/*"],
-	    "@/store/*": ["store/*"],
+			"@/store/*": ["store/*"]
 		},
-	"lib": [
-	    "esnext",
-	    "dom",
-	    "dom.iterable",
-	    "scripthost"
-	]
+		"lib": ["ES2020", "dom", "dom.iterable"], // Include typings for ES2020 and DOM APIs
 	},
 	"include": [
 		"src/**/*.ts",
--- a/vite.config.mjs
+++ b/vite.config.mjs
@ -0,0 +1,18 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import * as path from "path";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  server: {
+    port: 8080
+  },
+  plugins: [ vue() ],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+      buffer: path.resolve(__dirname, 'node_modules', 'buffer'),
+      'dexie-export-import/dist/import': 'dexie-export-import/dist/import/index.js',
+    },
+  },
+});
--- a/vue.config.js
+++ b/vue.config.js
@ -2,9 +2,9 @@ const { defineConfig } = require("@vue/cli-service");
 const { gitDescribeSync } = require("git-describe");
 const { exec } = require("child_process");

-process.env.VUE_APP_GIT_HASH = gitDescribeSync().hash;
+import.meta.env.VITE_GIT_HASH = gitDescribeSync().hash;
 const TIME_SAFARI_APP_TITLE =
-  process.env.TIME_SAFARI_APP_TITLE || require("./package.json").name;
+  import.meta.env.TIME_SAFARI_APP_TITLE || require("./package.json").name;

 module.exports = defineConfig({
  transpileDependencies: true,
Author	SHA1	Message	Date
Jason Buchanan	035f2a5b04	docs: adding do for updated development server run command - `npm run dev`	8 months ago
Jason Buchanan	09dccc34d6	fix: buffer typescript error in util.ts when parsing ArrayBuffer	8 months ago
Jason Buchanan	ca240ab795	fix: es modules syntax for buffer deps instead of commonjs require	8 months ago
Jason Buchanan	01b5ca6ec8	chore: update vitejs config to deploy on the same default port as the @vue/cli-service This port is 8080. This is done to not break existing tooling and devops code.	8 months ago
Jason Buchanan	6f49260c1e	fix: AccountViewView.vue template not resolving dep for dexie-export-import/dist/import Previous error: Error: The following dependencies are imported but could not be resolved: dexie-export-import/dist/import (imported by /Users/jason/dev/src/trent/crowd-funder-for-time-pwa/src/views/AccountViewView.vue?id=0) Are they installed? at file:///Users/jason/dev/src/trent/crowd-funder-for-time-pwa/node_modules/vite/dist/node/chunks/dep-DJaaTb_D.js:52506:23 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async file:///Users/jason/dev/src/trent/crowd-funder-for-time-pwa/node_modules/vite/dist/node/chunks/dep-DJaaTb_D.js:51972:38	8 months ago
Jason Buchanan	38f44771e9	Initial stab at vitejs update	8 months ago