Switch from WebPack to Vite

client/.env.production

@@ -1,3 +1,3 @@
-VUE_APP_STATIC_PATH=./static/viame/
-VUE_APP_GTAG=UA-6042509-43
-VUE_APP_SENTRY_DSN=https://0ec02775cc734df98134cecf5c91f782@o267860.ingest.sentry.io/5436001
+VITE_APP_STATIC_PATH=/static/viame/
+VITE_APP_GTAG=UA-6042509-43
+VITE_APP_SENTRY_DSN=https://0ec02775cc734df98134cecf5c91f782@o267860.ingest.sentry.io/5436001

client/.gitignore

@@ -8,7 +8,6 @@ node_modules
 # local env files
 .env.local
 .env.*.local
-
 # Log files
 npm-debug.log*
 yarn-debug.log*

client/vue.config.js → client/_vue.config.js

@@ -6,8 +6,8 @@ const SentryPlugin = require('@sentry/webpack-plugin');
 
 const keepAliveAgent = new http.Agent({ keepAlive: true });
 
-process.env.VUE_APP_GIT_HASH = gitDescribeSync().hash;
-process.env.VUE_APP_VERSION = packagejson.version;
+process.env.VITE_APP_GIT_HASH = gitDescribeSync().hash;
+process.env.VITE_APP_VERSION = packagejson.version;
 
 function chainWebpack(config) {
   config.output.strictModuleExceptionHandling(true);
@@ -30,7 +30,7 @@ function chainWebpack(config) {
         include: './dist',
         org: 'kitware-data',
         project: 'viame-web-client',
-        release: process.env.VUE_APP_GIT_HASH
+        release: process.env.VITE_APP_GIT_HASH
       }]);
   }
   config.module
@@ -57,7 +57,7 @@ module.exports = {
     },
   },
   productionSourceMap: true,
-  publicPath: process.env.VUE_APP_STATIC_PATH,
+  publicPath: process.env.VITE_APP_STATIC_PATH,
   chainWebpack,
   pluginOptions: {
     electronBuilder: {

client/components.d.ts

@@ -0,0 +1,113 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    AttributeFilters: typeof import('./src/components/AttributeFilters.vue')['default']
+    AttributeKeyFilter: typeof import('./src/components/AttributeFilter/AttributeKeyFilter.vue')['default']
+    AttributeKeyFilterSettings: typeof import('./src/components/AttributeFilter/AttributeKeyFilterSettings.vue')['default']
+    AttributeNumberFilter: typeof import('./src/components/AttributeFilter/AttributeNumberFilter.vue')['default']
+    AttributeNumberFilterSettings: typeof import('./src/components/AttributeFilter/AttributeNumberFilterSettings.vue')['default']
+    AttributeStringFilter: typeof import('./src/components/AttributeFilter/AttributeStringFilter.vue')['default']
+    AttributeStringFilterSettings: typeof import('./src/components/AttributeFilter/AttributeStringFilterSettings.vue')['default']
+    AttributeTimeline: typeof import('./src/components/AttributeTimeline.vue')['default']
+    AttributeTrackFilters: typeof import('./src/components/AttributeTrackFilters.vue')['default']
+    Controls: typeof import('./src/components/controls/Controls.vue')['default']
+    EventChart: typeof import('./src/components/controls/EventChart.vue')['default']
+    FileNameTimeDisplay: typeof import('./src/components/controls/FileNameTimeDisplay.vue')['default']
+    FilterList: typeof import('./src/components/FilterList.vue')['default']
+    GroupEditor: typeof import('./src/components/GroupEditor.vue')['default']
+    GroupItem: typeof import('./src/components/GroupItem.vue')['default']
+    GroupList: typeof import('./src/components/GroupList.vue')['default']
+    ImageAnnotator: typeof import('./src/components/annotators/ImageAnnotator.vue')['default']
+    ImageEnhancements: typeof import('./src/components/ImageEnhancements.vue')['default']
+    LargeImageAnnotator: typeof import('./src/components/annotators/LargeImageAnnotator.vue')['default']
+    LayerManager: typeof import('./src/components/LayerManager.vue')['default']
+    LineChart: typeof import('./src/components/controls/LineChart.vue')['default']
+    RangeEditor: typeof import('./src/components/RangeEditor.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    Timeline: typeof import('./src/components/controls/Timeline.vue')['default']
+    TooltipButton: typeof import('./src/components/TooltipButton.vue')['default']
+    TrackItem: typeof import('./src/components/TrackItem.vue')['default']
+    TrackList: typeof import('./src/components/TrackList.vue')['default']
+    TypeEditor: typeof import('./src/components/TypeEditor.vue')['default']
+    TypeItem: typeof import('./src/components/TypeItem.vue')['default']
+    TypePicker: typeof import('./src/components/TypePicker.vue')['default']
+    VAlert: typeof import('vuetify/lib')['VAlert']
+    VApp: typeof import('vuetify/lib')['VApp']
+    VAppBar: typeof import('vuetify/lib')['VAppBar']
+    VBadge: typeof import('vuetify/lib')['VBadge']
+    VBanner: typeof import('vuetify/lib')['VBanner']
+    VBreadcrumbs: typeof import('vuetify/lib')['VBreadcrumbs']
+    VBreadcrumbsItem: typeof import('vuetify/lib')['VBreadcrumbsItem']
+    VBtn: typeof import('vuetify/lib')['VBtn']
+    VCard: typeof import('vuetify/lib')['VCard']
+    VCardActions: typeof import('vuetify/lib')['VCardActions']
+    VCardSubtitle: typeof import('vuetify/lib')['VCardSubtitle']
+    VCardText: typeof import('vuetify/lib')['VCardText']
+    VCardTitle: typeof import('vuetify/lib')['VCardTitle']
+    VCheckbox: typeof import('vuetify/lib')['VCheckbox']
+    VChip: typeof import('vuetify/lib')['VChip']
+    VCol: typeof import('vuetify/lib')['VCol']
+    VColorPicker: typeof import('vuetify/lib')['VColorPicker']
+    VCombobox: typeof import('vuetify/lib')['VCombobox']
+    VContainer: typeof import('vuetify/lib')['VContainer']
+    VDataTable: typeof import('vuetify/lib')['VDataTable']
+    VDialog: typeof import('vuetify/lib')['VDialog']
+    VDivider: typeof import('vuetify/lib')['VDivider']
+    VExpansionPanel: typeof import('vuetify/lib')['VExpansionPanel']
+    VExpansionPanelContent: typeof import('vuetify/lib')['VExpansionPanelContent']
+    VExpansionPanelHeader: typeof import('vuetify/lib')['VExpansionPanelHeader']
+    VExpansionPanels: typeof import('vuetify/lib')['VExpansionPanels']
+    VFileInput: typeof import('vuetify/lib')['VFileInput']
+    VForm: typeof import('vuetify/lib')['VForm']
+    VIcon: typeof import('vuetify/lib')['VIcon']
+    VideoAnnotator: typeof import('./src/components/annotators/VideoAnnotator.vue')['default']
+    VList: typeof import('vuetify/lib')['VList']
+    VListItem: typeof import('vuetify/lib')['VListItem']
+    VListItemAction: typeof import('vuetify/lib')['VListItemAction']
+    VListItemActionText: typeof import('vuetify/lib')['VListItemActionText']
+    VListItemContent: typeof import('vuetify/lib')['VListItemContent']
+    VListItemIcon: typeof import('vuetify/lib')['VListItemIcon']
+    VListItemSubtitle: typeof import('vuetify/lib')['VListItemSubtitle']
+    VListItemTitle: typeof import('vuetify/lib')['VListItemTitle']
+    VMain: typeof import('vuetify/lib')['VMain']
+    VMenu: typeof import('vuetify/lib')['VMenu']
+    VProgressCircular: typeof import('vuetify/lib')['VProgressCircular']
+    VProgressLinear: typeof import('vuetify/lib')['VProgressLinear']
+    VRadio: typeof import('vuetify/lib')['VRadio']
+    VRadioGroup: typeof import('vuetify/lib')['VRadioGroup']
+    VRangeSlider: typeof import('vuetify/lib')['VRangeSlider']
+    VRow: typeof import('vuetify/lib')['VRow']
+    VSelect: typeof import('vuetify/lib')['VSelect']
+    VSlider: typeof import('vuetify/lib')['VSlider']
+    VSlideXTransition: typeof import('vuetify/lib')['VSlideXTransition']
+    VSlideYReverseTransition: typeof import('vuetify/lib')['VSlideYReverseTransition']
+    VSlideYTransition: typeof import('vuetify/lib')['VSlideYTransition']
+    VSpacer: typeof import('vuetify/lib')['VSpacer']
+    VStepper: typeof import('vuetify/lib')['VStepper']
+    VStepperContent: typeof import('vuetify/lib')['VStepperContent']
+    VStepperHeader: typeof import('vuetify/lib')['VStepperHeader']
+    VStepperItems: typeof import('vuetify/lib')['VStepperItems']
+    VStepperStep: typeof import('vuetify/lib')['VStepperStep']
+    VSubheader: typeof import('vuetify/lib')['VSubheader']
+    VSwitch: typeof import('vuetify/lib')['VSwitch']
+    VTab: typeof import('vuetify/lib')['VTab']
+    VTabItem: typeof import('vuetify/lib')['VTabItem']
+    VTabs: typeof import('vuetify/lib')['VTabs']
+    VTabsItems: typeof import('vuetify/lib')['VTabsItems']
+    VTabsSlider: typeof import('vuetify/lib')['VTabsSlider']
+    VTextarea: typeof import('vuetify/lib')['VTextarea']
+    VTextField: typeof import('vuetify/lib')['VTextField']
+    VToolbar: typeof import('vuetify/lib')['VToolbar']
+    VToolbarItems: typeof import('vuetify/lib')['VToolbarItems']
+    VToolbarTitle: typeof import('vuetify/lib')['VToolbarTitle']
+    VTooltip: typeof import('vuetify/lib')['VTooltip']
+    VVirtualScroll: typeof import('vuetify/lib')['VVirtualScroll']
+  }
+}

client/dive-common/components/NavigationTitle.vue

@@ -9,7 +9,7 @@ export default {
   },
   computed: {
     version() {
-      return process.env.VUE_APP_GIT_HASH;
+      return process.env.VITE_APP_GIT_HASH;
     },
   },
 };

client/electron-builder.json

@@ -0,0 +1,18 @@
+{
+    "appId": "com.example.yourapp",
+    "files": [
+      "dist/**/*",
+      "node_modules/**/*",
+      "package.json"
+    ],
+    "mac": {
+      "category": "public.app-category.utilities"
+    },
+    "win": {
+      "target": "nsis"
+    },
+    "linux": {
+      "target": "AppImage"
+    }
+  }
+

client/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" style="overflow-y:hidden">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="./favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DIVE</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/platform/desktop/main.ts"></script>
+  </body>
+</html>

client/index.web.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" style="overflow-y:hidden">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="./favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DIVE</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/platform/web-girder/main.ts"></script>
+  </body>
+</html>