infra: major version package upgrades (#203)

- upgrade all packages (except prettify) to newest versions
    -vite upgraded and migrated away from cjs https://vitejs.dev/guide/troubleshooting#vite-cjs-node-api-deprecated
- simplify feature usage in SiteMap.vue

.github/workflows/preview.yml

@@ -17,13 +17,13 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v3
 
-      - name: Install and Build
+      - name: Verify and deploy preview version
         if: github.event.action != 'closed' # You might want to skip the build if the PR has been closed
         run: |
           npm ci
-          npm install
           npm run test
-          npm run build-preview
+          npm run build -- --mode preview
+          npm run lint-no-fix
 
       - name: Deploy preview
         uses: rossjrw/pr-preview-action@v1

package.json

@@ -1,6 +1,7 @@
 {
   "name": "mtp_ui",
   "version": "0.1.0",
+  "type": "module",
   "private": true,
   "scripts": {
     "dev": "vite",
@@ -15,34 +16,34 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/vue-fontawesome": "^3.0.6",
-    "@types/proj4": "^2.5.5",
-    "@types/sinon": "^10.0.20",
-    "@vitejs/plugin-vue": "^4.6.2",
+    "@vitejs/plugin-vue": "^5.0.4",
     "core-js": "^3.36.0",
-    "ol": "^9.0.0",
     "pinia": "^2.1.7",
     "proj4": "^2.10.0",
-    "sinon": "^15.2.0",
-    "vite": "^4.5.2",
-    "vue": "^3.4.20",
+    "vite": "^5.0.4",
     "vue-i18n": "^9.9.1",
-    "vue3-openlayers": "=0.1.70"
+    "vue3-openlayers": "^4.0.2"
   },
   "devDependencies": {
+    "@types/proj4": "^2.5.5",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
-    "@vue/compiler-sfc": "^3.4.20",
+    "@types/sinon": "^17.0.3",
     "@vue/eslint-config-typescript": "^11.0.3",
     "@vue/test-utils": "^2.4.4",
     "eslint": "^8.57.0",
+    "sinon": "^17.0.1",
     "eslint-config-prettier": "^8.10.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^9.22.0",
-    "jsdom": "^21.1.2",
+    "jsdom": "^24.0.0",
     "prettier": "^2.8.8",
     "sass": "^1.71.1",
     "typescript": "^5.3.3",
-    "vitest": "^0.30.1"
+    "vitest": "^0.30.1",
+    "vue": "=3.3.10",
+    "@vue/compiler-sfc": "=3.3.10",
+    "@vue/compiler-dom": "=3.3.10"
   },
   "browserslist": [
     "> 1%",

src/components/siteSelection/SiteMap.vue

@@ -13,10 +13,7 @@
     <ol-tile-layer ref="cityNamesLayer" />
 
     <ol-vector-layer>
-      <ol-source-vector
-        :features="availableFeatures"
-        ref="vectorSource"
-      ></ol-source-vector>
+      <ol-source-vector :features="availableFeatures"></ol-source-vector>
     </ol-vector-layer>
 
     <ol-interaction-select
@@ -51,9 +48,7 @@ import { useSearchParameterStore } from '@/stores/searchParameterStore'
 import { useMapStore } from '@/stores/mapStore'
 import { Options } from 'ol/source/WMTS'
 import Feature from 'ol/Feature'
-import { Geometry } from 'ol/geom'
 import Collection from 'ol/Collection'
-import { GeoJSON } from 'ol/format'
 import Map from 'ol/Map'
 import { SelectEvent } from 'ol/interaction/Select'
 
@@ -72,35 +67,25 @@ export default defineComponent({
       new WMTS(mapStore.cityNameLayerOptions! as Options)
     )
   },
+
   setup() {
     const searchParameterStore = useSearchParameterStore()
 
-    const map = ref(null as Map | null)
+    const map = ref<{ map: Map }>(null!)
     const center = ref([2466417.9856569725, 8788780.630851416])
     const zoom = ref(5.5)
     const currentHoverFeature = ref(null as IHoverData | null)
     const selectedFeatures = ref(new Collection())
-    const availableFeatures = ref([] as Feature<Geometry>[])
+
+    const availableFeatures = searchParameterStore.availableSites.map((s) =>
+      s.createFeature()
+    )
+
     const mapCursor = ref('default')
-    const vectorSource = ref(null as any)
 
     const selectConditions = inject('ol-selectconditions')
     const mouseClick = selectConditions.click
 
-    const features = searchParameterStore.availableSites.map((s) => ({
-      type: 'Feature',
-      id: s.id,
-      geometry: { type: 'Point', coordinates: s.mapCoordinates },
-      properties: { name: s.displayName },
-    }))
-
-    const geoJsonObject = {
-      type: 'FeatureCollection',
-      features,
-    }
-
-    availableFeatures.value = new GeoJSON().readFeatures(geoJsonObject)
-
     const featureSelected = (event: SelectEvent) => {
       const newFeatures = event.target.getFeatures() as Collection<Feature>
       selectedFeatures.value = newFeatures
@@ -114,7 +99,7 @@ export default defineComponent({
     }
 
     const addSelection = (id: number) => {
-      const feature = availableFeatures.value.find((f) => f.getId() === id)
+      const feature = availableFeatures.find((f) => f.getId() === id)
       selectedFeatures.value.push(feature)
       searchParameterStore.selectSite(id)
     }
@@ -142,7 +127,7 @@ export default defineComponent({
       dragBox.on('boxend', function () {
         // features that intersect the box are selected
         const extent = dragBox.getGeometry().getExtent()
-        const boxFeatures: Feature[] = vectorSource.value.features.filter(
+        const boxFeatures: Feature[] = availableFeatures.filter(
           (feature: Feature) => feature.getGeometry()?.intersectsExtent(extent)
         )
 
@@ -166,7 +151,7 @@ export default defineComponent({
       if (!e.pixel || e.dragging) {
         return
       }
-      const hitFeature = map.value?.forEachFeatureAtPixel(
+      const hitFeature = map.value?.map.forEachFeatureAtPixel(
         e.pixel,
         (feat: any) => feat
       )
@@ -184,7 +169,6 @@ export default defineComponent({
 
     return {
       map,
-      vectorSource,
       mapCenter: center,
       mapZoom: zoom,
       mapCursor,

src/queries/site.ts

@@ -1,5 +1,7 @@
 import { fromLonLat } from 'ol/proj'
 import { Coordinate } from 'ol/coordinate'
+import Feature from 'ol/Feature'
+import { Point } from 'ol/geom'
 
 export enum SiteTypes {
   Vesla,
@@ -23,6 +25,15 @@ export class Site {
     return `${this.name} (${this.depth} m)`
   }
 
+  createFeature() {
+    const feat = new Feature({
+      geometry: new Point(this.mapCoordinates),
+      name: this.displayName,
+    })
+    feat.setId(this.id)
+    return feat
+  }
+
   constructor(
     id: number,
     name: string,

vite.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig } from "vite"
+import vue from "@vitejs/plugin-vue"
+import path from 'path'
+
+
+export default defineConfig(({ command, mode }) => {
+  return {
+    base: '',
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, './src')
+      },
+    },
+    server: {
+      port: 8080,
+    },
+    plugins: [vue()],
+    build: {
+      sourcemap: mode !== 'production',
+    }
+  }
+})

vitest.config.js

@@ -1,13 +1,11 @@
-/// <reference types="vitest" />
 import { defineConfig, mergeConfig } from 'vitest/config'
 import viteConfig from './vite.config'
 
 export default defineConfig(configEnv => mergeConfig(
   viteConfig(configEnv),
   defineConfig({
-    // extending app vite config
     test: {
-      environment: 'jsdom',
+      environment: 'jsdom'
     },
   })
-))
+))