fix: Vite: faster builds & fewer dependencies

Use Vite instead of Webpack!

package.json

@@ -2,6 +2,12 @@
   "name": "simwrapper",
   "version": "1.1.0",
   "private": true,
+  "license": "GPL-3.0-or-later",
+  "author": "Billy Charlton <charlton@tu-berlin.de>",
+  "contributors": [
+    "Friedrich Voelkers <friedrich.k.voelkers@tu-berlin.de>",
+    "Janek Laudan <laudan@vsp.tu-berlin.de>"
+  ],
   "scripts": {
     "serve": "vite",
     "build": "vite build",

src/components/RunFinderPanel.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 .run-finder-panel
-  router-link.logo(:to="'/'")
+  router-link.logo(:to="baseURL")
     img(src="@/assets/simwrapper-logo/SW_logo_icon_white.png")
     h3 {{globalState.app }}
 
@@ -64,6 +64,8 @@ class MyComponent extends Vue {
 
   private rootNodes: any[] = []
 
+  private baseURL = import.meta.env.BASE_URL
+
   private mounted() {
     // start the run finder process
     runFinder.findRuns()

src/js/DashboardDataManager.ts

@@ -108,7 +108,13 @@ export default class DashboardDataManager {
   }
 
   public removeFilterListener(config: { dataset: string }, listener: any) {
-    this.datasets[config.dataset].filterListeners.delete(listener)
+    try {
+      if (this.datasets[config.dataset].filterListeners) {
+        this.datasets[config.dataset].filterListeners.delete(listener)
+      }
+    } catch (e) {
+      // doesn't matter
+    }
   }
 
   public clearCache() {

src/router.ts

@@ -5,22 +5,24 @@ import globalStore from '@/store'
 
 Vue.use(VueRouter)
 
+const BASE = import.meta.env.BASE_URL
+
 const routes = [
   {
-    path: '/gist/:id',
+    path: BASE + 'gist/:id',
     component: () => import(/* webpackChunkName: "gist" */ '@/views/GistView.vue'),
     props: (route: Route) => ({
       id: route.params.id,
     }),
   },
   {
-    path: '/*',
+    path: BASE + '*',
     component: () => import(/* webpackChunkName: "split" */ '@/views/ScreenSplitter.vue'),
   },
   {
     // catch-all back to home page
     path: '*',
-    redirect: '/',
+    redirect: BASE,
   },
 ]
 
@@ -29,7 +31,7 @@ function vizPlugins(): any[] {
   const plugins = []
   for (const plugin of globalStore.state.visualizationTypes.values()) {
     plugins.push({
-      path: '/v/' + plugin.kebabName + '/:slug/*',
+      path: BASE + 'v/' + plugin.kebabName + '/:slug/*',
       name: plugin.kebabName,
       component: plugin.component,
       props: (route: Route) => {
@@ -51,7 +53,7 @@ function vizPlugins(): any[] {
 
 const router = new VueRouter({
   mode: 'history',
-  base: process.env.BASE_URL,
+  base: '/',
   routes: vizPlugins().concat(routes),
   // native-like back/forward and top-of-page routing
   scrollBehavior(to, from, savedPosition) {
@@ -63,4 +65,9 @@ const router = new VueRouter({
   },
 })
 
+// router.beforeEach((to, from, next) => {
+//   console.log(to.path)
+//   next()
+// })
+
 export default router

src/store.ts

@@ -158,7 +158,6 @@ export default new Vuex.Store({
     setLocale(state: GlobalState, value: string) {
       state.locale = value.toLocaleLowerCase()
       localStorage.setItem('locale', state.locale)
-      console.log('NEW LOCALE:', state.locale)
     },
   },
 

src/templates/BlankDeckFrame.vue

@@ -31,7 +31,6 @@ de:
 <script lang="ts">
 import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
 import YAML from 'yaml'
-import { spawn, Worker, Thread, ModuleThread } from 'threads'
 
 import util from '@/js/util'
 import globalStore from '@/store'

src/views/ScreenSplitter.vue

@@ -45,6 +45,8 @@ import SplashPage from '@/views/SplashPage.vue'
 class MyComponent extends Vue {
   // the calls to $forceUpdate() below are because Vue does not watch deep array contents.
 
+  private baseURL = import.meta.env.BASE_URL
+
   private panels = [
     {
       component: 'SplashPage',
@@ -64,7 +66,7 @@ class MyComponent extends Vue {
   }
 
   @Watch('$route') routeChanged(to: Route, from: Route) {
-    if (to.path === '/') {
+    if (to.path === this.baseURL) {
       // root node is not a normal splitpane, so we instead replace
       // with a brand new clean startpage.
       this.panels = [
@@ -162,20 +164,22 @@ class MyComponent extends Vue {
 
   private updateURL() {
     // console.log(this.panels)
+    const BASE = import.meta.env.BASE_URL
+
     if (this.panels.length === 1) {
       const root = this.panels[0].props.root || ''
       const xsubfolder = this.panels[0].props.xsubfolder || ''
       const yaml = this.panels[0].props.yamlConfig || ''
 
       if (yaml) {
         const base64 = btoa(JSON.stringify(this.panels))
-        this.$router.push(`/split/${base64}`)
+        this.$router.push(`${BASE}split/${base64}`)
       } else {
-        this.$router.push(`/${root}/${xsubfolder}`)
+        this.$router.push(`${BASE}${root}/${xsubfolder}`)
       }
     } else {
       const base64 = btoa(JSON.stringify(this.panels))
-      this.$router.push(`/split/${base64}`)
+      this.$router.push(`${BASE}split/${base64}`)
     }
   }
 }

vite.config.ts

@@ -3,14 +3,13 @@ import { createVuePlugin } from 'vite-plugin-vue2'
 import markdownPlugin from 'vite-plugin-md'
 
 export default defineConfig({
-  // base: '/',
-  // publicDir: '/simwrapper/',
+  base: '/simwrapper/',
+  build: { sourcemap: true },
   plugins: [
     // vue
     createVuePlugin({ include: [/\.vue$/, /\.md$/] }),
     markdownPlugin(),
   ],
-  build: { sourcemap: true },
   resolve: {
     alias: {
       '@': '/src',
@@ -25,4 +24,5 @@ export default defineConfig({
     // requireFromFile: null,
     // requireFromString: null,
   },
+  // optimizeDeps: { exclude: ['@deck.gl/layers'] },
 })