🧰 ui: tooling update

- new devcontainer spec "18-bookworm" -> "20-trixie"
- fixed "vue serve"
- improved vscode settings.json
- improved typescript config
- minor formatting

ui/.devcontainer/devcontainer.json

@@ -2,15 +2,19 @@
 // https://github.com/microsoft/vscode-dev-containers/tree/v0.245.2/containers/javascript-node
 {
   "name": "Advent22 UI",
+
   // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
-  "image": "mcr.microsoft.com/vscode/devcontainers/javascript-node:1-18-bookworm",
+  "image": "mcr.microsoft.com/devcontainers/javascript-node:4-20-trixie",
+
   // Features to add to the dev container. More info: https://containers.dev/features.
   "features": {
+    "ghcr.io/devcontainers/features/git-lfs:1": {},
     "ghcr.io/devcontainers-extra/features/apt-get-packages:1": {
-      "packages": "git-flow, git-lfs"
+      "packages": "git-flow"
     },
     "ghcr.io/devcontainers-extra/features/vue-cli:2": {}
   },
+
   // Configure tool-specific properties.
   "customizations": {
     // Configure properties specific to VS Code.
@@ -29,11 +33,16 @@
       ]
     }
   },
-  // Use 'forwardPorts' to make a list of ports inside the container available locally.
-  // "forwardPorts": [],
+
   // Use 'postCreateCommand' to run commands after the container is created.
   // "postCreateCommand": "yarn install",
-  "postStartCommand": "yarn install --production false",
-  // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
-  "remoteUser": "node"
+
+  // Use 'postStartCommand' to run commands after the container is started.
+	"postStartCommand": "npx --yes update-browserslist-db@latest && yarn install --production false"
+
+  // Use 'forwardPorts' to make a list of ports inside the container available locally.
+  // "forwardPorts": [],
+
+  // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+  // "remoteUser": "root"
 }

ui/.vscode/settings.json

@@ -1,21 +1,23 @@
 {
-  "editor.formatOnSave": true,
-  "[vue]": {
+  "[scss][vue][typescript][javascript][json][jsonc][jsonl]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+
+  "[jsonc]": {
+    "editor.formatOnSave": false,
   },
+
   "editor.codeActionsOnSave": {
     "source.organizeImports": "explicit"
   },
+
   "git.closeDiffOnOperation": true,
+  "editor.formatOnSave": true,
   "editor.tabSize": 2,
+
   "sass.disableAutoIndent": true,
   "sass.format.convert": false,
   "sass.format.deleteWhitespace": true,
-  "volar.inlayHints.eventArgumentInInlineHandlers": false
+
+  "prettier.trailingComma": "all",
 }

ui/babel.config.json

@@ -1,3 +1,5 @@
 {
-  "presets": ["@vue/cli-plugin-babel/preset"]
-}
+  "presets": [
+    "@vue/cli-plugin-babel/preset"
+  ]
+}

ui/package.json

@@ -3,11 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve --host 0.0.0.0 --port 8080",
+    "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
     "test:unit-watch": "vue-cli-service test:unit --watch",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "ui": "vue ui --host 0.0.0.0 --headless"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.6.0",
@@ -25,6 +26,7 @@
     "@vue/cli-service": "~5.0.0",
     "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/test-utils": "^2.4.6",
+    "@vue/tsconfig": "^0.5.1",
     "animate.css": "^4.1.1",
     "axios": "^1.7.3",
     "bulma": "^1.0.2",
@@ -37,12 +39,8 @@
     "pinia": "^2.2.1",
     "sass": "^1.77.8",
     "sass-loader": "^16.0.0",
-    "typescript": "~5.5.4",
+    "typescript": ">=4.7.4 <5.5.0",
     "vue": "^3.5.25",
     "vue-class-component": "^8.0.0-0"
-  },
-  "dependencies": {},
-  "prettier": {
-    "trailingComma": "all"
   }
 }

ui/src/components/AdminButton.vue

@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
 import { APIError } from "@/lib/api_error";
-import { Credentials } from "@/lib/model";
+import type { Credentials } from "@/lib/model";
 import { advent22Store } from "@/lib/store";
 import { ref } from "vue";
 

ui/src/components/Calendar.vue

@@ -49,15 +49,15 @@
 <script setup lang="ts">
 import { API } from "@/lib/api";
 import { APIError } from "@/lib/api_error";
-import { VueLike, name_door, unwrap_loading } from "@/lib/helpers";
-import { ImageData } from "@/lib/model";
+import { type VueLike, name_door, unwrap_loading } from "@/lib/helpers";
+import type { ImageData } from "@/lib/model";
 import { Door } from "@/lib/rects/door";
 import { advent22Store } from "@/lib/store";
 
 import { onBeforeUnmount } from "vue";
-import MultiModal, { HMultiModal } from "./MultiModal.vue";
+import MultiModal, { type HMultiModal } from "./MultiModal.vue";
 import BulmaButton from "./bulma/Button.vue";
-import BulmaToast, { HBulmaToast } from "./bulma/Toast.vue";
+import BulmaToast, { type HBulmaToast } from "./bulma/Toast.vue";
 import CalendarDoor from "./calendar/CalendarDoor.vue";
 import ThouCanvas from "./calendar/ThouCanvas.vue";
 

ui/src/components/LoginModal.vue

@@ -49,7 +49,7 @@
 
 <script setup lang="ts">
 import { wait_for } from "@/lib/helpers";
-import { Credentials } from "@/lib/model";
+import type { Credentials } from "@/lib/model";
 import { onBeforeUnmount, onMounted, ref, useTemplateRef } from "vue";
 import BulmaButton from "./bulma/Button.vue";
 

ui/src/components/admin/CalendarAssistant.vue

@@ -48,10 +48,10 @@
 <script setup lang="ts">
 import { API } from "@/lib/api";
 import { name_door, objForEach } from "@/lib/helpers";
-import { ImageData, NumStrDict } from "@/lib/model";
+import type { ImageData, NumStrDict } from "@/lib/model";
 import { ref } from "vue";
 
-import MultiModal, { HMultiModal } from "../MultiModal.vue";
+import MultiModal, { type HMultiModal } from "../MultiModal.vue";
 import BulmaButton from "../bulma/Button.vue";
 import BulmaDrawer from "../bulma/Drawer.vue";
 

ui/src/components/admin/ConfigView.vue

@@ -191,7 +191,7 @@
 
 <script setup lang="ts">
 import { API } from "@/lib/api";
-import { AdminConfigModel, Credentials, DoorSaved } from "@/lib/model";
+import type { AdminConfigModel, Credentials, DoorSaved } from "@/lib/model";
 import { advent22Store } from "@/lib/store";
 import { DateTime } from "luxon";
 import { ref } from "vue";

ui/src/components/admin/DoorMapEditor.vue

@@ -71,11 +71,11 @@
 <script setup lang="ts">
 import { API } from "@/lib/api";
 import { APIError } from "@/lib/api_error";
-import { DoorSaved } from "@/lib/model";
+import type { DoorSaved } from "@/lib/model";
 import { Door } from "@/lib/rects/door";
 import { toast } from "bulma-toast";
 import { ref } from "vue";
-import { BCStep } from "../bulma/Breadcrumbs.vue";
+import type { BCStep } from "../bulma/Breadcrumbs.vue";
 
 import Calendar from "../Calendar.vue";
 import BulmaBreadcrumbs from "../bulma/Breadcrumbs.vue";

ui/src/components/bulma/Toast.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script setup lang="ts">
-import { Options as ToastOptions, toast } from "bulma-toast";
+import { type Options as ToastOptions, toast } from "bulma-toast";
 import { onMounted, useTemplateRef } from "vue";
 
 export type HBulmaToast = {

ui/src/components/calendar/CalendarDoor.vue

@@ -17,7 +17,7 @@
 import { Door } from "@/lib/rects/door";
 import { advent22Store } from "@/lib/store";
 
-import { VueLike } from "@/lib/helpers";
+import type { VueLike } from "@/lib/helpers";
 import SVGRect from "./SVGRect.vue";
 
 const store = advent22Store();

ui/src/components/calendar/SVGRect.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { VueLike, unwrap_loading } from "@/lib/helpers";
+import { type VueLike, unwrap_loading } from "@/lib/helpers";
 import { Rectangle } from "@/lib/rects/rectangle";
 import { advent22Store } from "@/lib/store";
 import { computed } from "vue";

ui/src/components/editor/DoorCanvas.vue

@@ -29,7 +29,7 @@ import { Rectangle } from "@/lib/rects/rectangle";
 import { Vector2D } from "@/lib/rects/vector2d";
 import { computed, ref } from "vue";
 
-import { VueLike } from "@/lib/helpers";
+import type { VueLike } from "@/lib/helpers";
 import CalendarDoor from "../calendar/CalendarDoor.vue";
 import SVGRect from "../calendar/SVGRect.vue";
 import ThouCanvas from "../calendar/ThouCanvas.vue";

ui/src/components/editor/DoorChooser.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import { VueLike, unwrap_loading } from "@/lib/helpers";
+import { type VueLike, unwrap_loading } from "@/lib/helpers";
 import { Door } from "@/lib/rects/door";
 import { advent22Store } from "@/lib/store";
 

ui/src/components/editor/DoorPlacer.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script setup lang="ts">
-import { VueLike, unwrap_loading } from "@/lib/helpers";
+import { type VueLike, unwrap_loading } from "@/lib/helpers";
 import { Door } from "@/lib/rects/door";
 import { advent22Store } from "@/lib/store";
 

ui/src/components/editor/PreviewDoor.vue

@@ -26,7 +26,7 @@
 import { Door } from "@/lib/rects/door";
 import { ref, useTemplateRef } from "vue";
 
-import { VueLike, unwrap_vuelike, wait_for } from "@/lib/helpers";
+import { type VueLike, unwrap_vuelike, wait_for } from "@/lib/helpers";
 import SVGRect from "../calendar/SVGRect.vue";
 
 const model = defineModel<VueLike<Door>>({ required: true });

ui/src/lib/api.ts

@@ -1,5 +1,5 @@
 import axios, {
-  AxiosBasicCredentials,
+  type AxiosBasicCredentials,
   type AxiosRequestConfig,
   type Method,
   type RawAxiosRequestHeaders,

ui/src/lib/helpers.ts

@@ -1,4 +1,4 @@
-import { nextTick, UnwrapRef } from "vue";
+import { nextTick, type UnwrapRef } from "vue";
 import { APIError } from "./api_error";
 
 export function objForEach<T>(

ui/src/lib/rects/door.ts

@@ -1,5 +1,5 @@
-import { VueLike, unwrap_vuelike } from "../helpers";
-import { DoorSaved } from "../model";
+import { type VueLike, unwrap_vuelike } from "../helpers";
+import type { DoorSaved } from "../model";
 import { Rectangle } from "./rectangle";
 import { Vector2D } from "./vector2d";
 

ui/src/lib/store.ts

@@ -1,7 +1,7 @@
 import { acceptHMRUpdate, defineStore } from "pinia";
 import { API } from "./api";
-import { Loading } from "./helpers";
-import { Credentials, DoorSaved, ImageData, SiteConfigModel } from "./model";
+import type { Loading } from "./helpers";
+import type { Credentials, DoorSaved, ImageData, SiteConfigModel } from "./model";
 import { Door } from "./rects/door";
 
 declare global {
@@ -65,7 +65,7 @@ export const advent22Store = defineStore({
 
         if (link.parentElement === null)
           document.getElementsByTagName("head")[0].appendChild(link);
-      } catch {}
+      } catch { }
 
       try {
         const [is_admin, site_config, background_image, user_doors, next_door] =

ui/tsconfig.json

@@ -1,30 +1,33 @@
 {
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
   "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "strict": true,
-    "jsx": "preserve",
-    "moduleResolution": "node",
     "experimentalDecorators": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "forceConsistentCasingInFileNames": true,
-    "useDefineForClassFields": true,
-    "sourceMap": true,
+    "lib": [
+      "es2020",
+      "dom",
+      "dom.iterable",
+      "es2022.object",
+      "es2023.array",
+    ],
+    // "moduleResolution": "node",
+    // "sourceMap": true,
     "baseUrl": ".",
-    "types": ["webpack-env", "mocha", "chai"],
+    "types": [
+      "webpack-env",
+      "mocha",
+      "chai",
+    ],
     "paths": {
-      "@/*": ["src/*"]
+      "@/*": [
+        "src/*",
+      ]
     },
-    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
   },
   "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx",
     "src/**/*.vue",
+    "src/**/*.ts",
+    // "src/**/*.tsx",
     "tests/**/*.ts",
-    "tests/**/*.tsx"
+    // "tests/**/*.tsx",
   ],
-  "exclude": ["node_modules"]
-}
+}

ui/vue.config.js

@@ -4,7 +4,7 @@ const webpack = require("webpack");
 module.exports = defineConfig({
   transpileDependencies: true,
   devServer: {
-    host: "localhost",
+    host: "127.0.0.1",
   },
   pages: {
     index: {

ui/yarn.lock

@@ -1977,6 +1977,11 @@
     js-beautify "^1.14.9"
     vue-component-type-helpers "^2.0.0"
 
+"@vue/tsconfig@^0.5.1":
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/@vue/tsconfig/-/tsconfig-0.5.1.tgz#3124ec16cc0c7e04165b88dc091e6b97782fffa9"
+  integrity sha512-VcZK7MvpjuTPx2w6blwnwZAu5/LgBUtejFOi3pPGQFXQN5Ela03FUtd2Qtg4yWGGissVL0dr6Ro1LfOFh+PCuQ==
+
 "@vue/vue-loader-v15@npm:vue-loader@^15.9.7":
   version "15.11.1"
   resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.11.1.tgz#dee91169211276ed43c5715caef88a56b1f497b0"
@@ -2602,9 +2607,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001538, caniuse-lite@^1.0.30001541:
-  version "1.0.30001760"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001760.tgz"
-  integrity sha512-7AAMPcueWELt1p3mi13HR/LHH0TJLT11cnwDJEs3xA4+CK/PLKeO9Kl1oru24htkyUKtkGCvAx4ohB0Ttry8Dw==
+  version "1.0.30001769"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001769.tgz"
+  integrity sha512-BCfFL1sHijQlBGWBMuJyhZUhzo7wer5sVj9hqekB/7xn0Ypy+pER/edCYQm4exbXj4WiySGp40P8UuTh6w1srg==
 
 case-sensitive-paths-webpack-plugin@^2.3.0:
   version "2.4.0"
@@ -6946,10 +6951,10 @@ type-is@~1.6.18:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
-typescript@~5.5.4:
-  version "5.5.4"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.5.4.tgz#d9852d6c82bad2d2eda4fd74a5762a8f5909e9ba"
-  integrity sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==
+"typescript@>=4.7.4 <5.5.0":
+  version "5.4.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.5.tgz#42ccef2c571fdbd0f6718b1d1f5e6e5ef006f611"
+  integrity sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==
 
 undici-types@~5.26.4:
   version "5.26.5"