Migrate to vite

.env.example

@@ -1,13 +1,13 @@
 # Base URL for DICOMWeb request. 
 # If no variable found, DICOMWeb panel in data tab is hidden unless set in settings.
-VUE_APP_DICOM_WEB_URL=http://localhost:5173/dicom-web
+VITE_DICOM_WEB_URL=http://localhost:5173/dicom-web
 
 # Display name of DICOMWeb host.
-VUE_APP_DICOM_WEB_NAME=ACME Hospital
+VITE_DICOM_WEB_NAME=ACME Hospital
 
 # Error reporting URL for sentry.io.
-VUE_APP_SENTRY_DSN=
+VITE_SENTRY_DSN=
 
 # If this env var exists and is true and there is a `save` URL parameter,
 # clicking the save button POSTS the session.volview.zip file to the specifed URL. 
-VUE_APP_ENABLE_REMOTE_SAVE=true
+VITE_ENABLE_REMOTE_SAVE=true

.eslintrc.js

@@ -70,6 +70,12 @@ module.exports = {
   },
 
   overrides: [
+    {
+      files: ['vite.config.ts'],
+      rules: {
+        'import/no-extraneous-dependencies': 'off',
+      },
+    },
     {
       files: [
         '**/__tests__/*.{j,t}s?(x)',

.gitignore

@@ -23,3 +23,5 @@ yarn-error.log*
 
 __pycache__
 venv
+
+bundle-analysis.html

documentation/content/doc/loading_data.md

@@ -16,7 +16,7 @@ VolView lists and downloads DICOM files served by a DICOMWeb service. The host a
 
 - VolView settings menu
 - `dicomweb` URL parameter. Example: `https://volview.netlify.com/?dicomweb=https://dicomweb-server.com`
-- At VolView build time with the `VUE_APP_DICOM_WEB_URL` environment variable.
+- At VolView build time with the `VITE_DICOM_WEB_URL` environment variable.
 
 The DICOMWeb address can point to a specific series in a study, and VolView will
 automatically load the whole series. Example URL:

package.json

@@ -2,16 +2,18 @@
   "name": "volview",
   "version": "4.1.0",
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "test:unit": "vue-cli-service test:unit -- ./src/**/__tests__/*.spec.[jt]s",
-    "lint": "vue-cli-service lint",
+    "dev": "vite",
+    "preview": "vite preview",
+    "serve": "npm run dev",
+    "build": "vue-tsc --noEmit && vite build",
+    "build:analyze": "ANALYZE_BUNDLE=1 npm run build",
+    "lint": "eslint",
     "build:all": "npm run build:dicom && npm run build:resample && npm run build",
     "build:dicom": "itk-wasm -s src/io/itk-dicom/ build ",
     "build:dicom:debug": "itk-wasm -s src/io/itk-dicom/ build -- -DCMAKE_BUILD_TYPE=Debug",
     "build:resample": "itk-wasm -s src/io/resample/ build ",
     "build:resample:debug": "itk-wasm -s src/io/resample/ build -- -DCMAKE_BUILD_TYPE=Debug",
-    "build:watch": "vue-cli-service build --watch",
+    "build:watch": "npm run build -- --watch",
     "postinstall": "patch-package",
     "prettify": "prettier --write src tests",
     "doc": "kw-doc -c ./documentation/config.js",
@@ -55,12 +57,7 @@
     "@types/whatwg-url": "^11.0.0",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
-    "@vue/cli-plugin-babel": "~5.0.4",
-    "@vue/cli-plugin-eslint": "~5.0.4",
-    "@vue/cli-plugin-typescript": "~5.0.4",
-    "@vue/cli-plugin-unit-mocha": "~5.0.4",
-    "@vue/cli-plugin-vuex": "~5.0.4",
-    "@vue/cli-service": "~5.0.4",
+    "@vitejs/plugin-vue": "^4.2.3",
     "@vue/eslint-config-airbnb": "^6.0.0",
     "@vue/eslint-config-typescript": "^9.1.0",
     "babel-eslint": "10.1.0",
@@ -77,25 +74,26 @@
     "eslint-plugin-vuejs-accessibility": "^1.1.0",
     "kw-doc": "3.1.2",
     "lint-staged": "10.5.4",
-    "null-loader": "4.0.1",
     "patch-package": "^6.4.7",
     "prettier": "2.6.2",
+    "rollup-plugin-visualizer": "^5.9.2",
     "sass": "^1.62.0",
-    "sass-loader": "^13.2.2",
-    "shader-loader": "1.3.1",
     "sinon": "14.0.0",
     "sinon-chai": "3.7.0",
     "typescript": "~4.6.4",
-    "vue-cli-plugin-vuetify": "2.5.8",
-    "webpack-plugin-vuetify": "^2.0.1"
+    "vite": "^4.3.9",
+    "vite-plugin-html": "^3.2.0",
+    "vite-plugin-static-copy": "^0.16.0",
+    "vite-plugin-vuetify": "^1.0.2",
+    "vue-tsc": "^1.6.5",
+    "yorkie": "^2.0.0"
   },
   "gitHooks": {
     "pre-commit": "lint-staged"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx,vue}": [
-      "vue-cli-service lint",
-      "git add"
+      "eslint"
     ]
   }
 }

public/index.html

@@ -1,28 +1,28 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <% if (htmlWebpackPlugin.options.ga) { %>
-      <script async src="https://www.googletagmanager.com/gtag/js?id=<%= htmlWebpackPlugin.options.ga %>"></script>
+    <% if (gaId) { %>
+      <script async src="https://www.googletagmanager.com/gtag/js?id=<%= gaId %>"></script>
       <script>
         window.dataLayer = window.dataLayer || [];
         function gtag(){dataLayer.push(arguments);}
         gtag('js', new Date());
-        gtag('config', '<%= htmlWebpackPlugin.options.ga %>');
+        gtag('config', '<%= gaId %>');
       </script>
     <% } %>
     <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>
+    <link rel="icon" href="/favicon.ico">
+    <title>VolView</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>VolView requires JavaScript to be enabled.</strong>
     </noscript>
     <div id="app"></div>
-    <!-- built files will be auto injected -->
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

src/components/AboutBox.vue

@@ -196,9 +196,10 @@
 </style>
 
 <script>
+/* global __VERSIONS__ */
+
 import { defineComponent } from 'vue';
 import { useDisplay } from 'vuetify';
-import pkgLock from '@/package-lock.json';
 import VolViewFullLogo from './icons/VolViewFullLogo.vue';
 
 export default defineComponent({
@@ -212,9 +213,9 @@ export default defineComponent({
     return {
       mobile: display.xs,
       versions: {
-        volview: pkgLock.version,
-        'vtk.js': pkgLock.dependencies['@kitware/vtk.js'].version,
-        'itk-wasm': pkgLock.dependencies['itk-wasm'].version,
+        volview: __VERSIONS__.volview,
+        'vtk.js': __VERSIONS__['vtk.js'],
+        'itk-wasm': __VERSIONS__['itk-wasm'],
       },
     };
   },

src/components/App.vue

@@ -430,7 +430,7 @@ export default defineComponent({
 
     const saveDialog = ref(false);
     const saveUrl =
-      process.env.VUE_APP_ENABLE_REMOTE_SAVE && (urlParams.save as string);
+      import.meta.env.VITE_ENABLE_REMOTE_SAVE && (urlParams.save as string);
     const saveHappening = ref(false);
 
     const handleSave = async () => {

src/components/MessageNotifications.vue

@@ -2,7 +2,7 @@
 import { defineComponent, watch } from 'vue';
 import { useToast } from '@/src/composables/useToast';
 import { storeToRefs } from 'pinia';
-import { ToastID } from 'vue-toastification/dist/types/types';
+import type { ToastID } from 'vue-toastification/dist/types/types';
 import { Message, MessageType, useMessageStore } from '../store/messages';
 import MessageNotificationContent from './MessageNotificationContent.vue';
 

src/components/PatientStudyVolumeBrowser.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { computed, defineComponent, reactive, toRefs, watch } from 'vue';
-import Image from 'itk-wasm/dist/core/Image';
+import { Image } from 'itk-wasm';
 import type { PropType } from 'vue';
 import GroupableItem from '@/src/components/GroupableItem.vue';
 import { useDICOMStore } from '../store/datasets-dicom';

src/components/VolumeRendering.vue

@@ -9,7 +9,7 @@ import {
 } from 'vue';
 import { PresetNameList } from '@/src/vtk/ColorMaps';
 import vtkPiecewiseWidget from '@/src/vtk/PiecewiseWidget';
-import { vtkSubscription } from '@kitware/vtk.js/interfaces';
+import type { vtkSubscription } from '@kitware/vtk.js/interfaces';
 import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps';
 import vtkPiecewiseFunctionProxy from '@kitware/vtk.js/Proxy/Core/PiecewiseFunctionProxy';
 import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';

src/components/VtkThreeView.vue

@@ -69,7 +69,7 @@ import vtkPiecewiseFunctionProxy from '@kitware/vtk.js/Proxy/Core/PiecewiseFunct
 import vtkVolumeMapper from '@kitware/vtk.js/Rendering/Core/VolumeMapper';
 import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
 import { getDiagonalLength } from '@kitware/vtk.js/Common/DataModel/BoundingBox';
-import { Vector3 } from '@kitware/vtk.js/types';
+import type { Vector3 } from '@kitware/vtk.js/types';
 
 import { useProxyManager } from '@/src/composables/proxyManager';
 import ViewOverlayGrid from '@src/components/ViewOverlayGrid.vue';

src/components/tools/RectangleTool.vue

@@ -52,7 +52,7 @@ import { Tools } from '@/src/store/tools/types';
 import { getLPSAxisFromDir } from '@/src/utils/lps';
 import RectangleWidget2D from '@/src/components/tools/rectangle/RectangleWidget2D.vue';
 import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
-import { Vector2, Vector3 } from '@kitware/vtk.js/types';
+import type { Vector2, Vector3 } from '@kitware/vtk.js/types';
 import { LPSAxisDir } from '@/src/types/lps';
 import {
   FrameOfReference,

src/components/tools/RulerTool.vue

@@ -51,7 +51,7 @@ import { useRulerStore } from '@/src/store/tools/rulers';
 import { getLPSAxisFromDir } from '@/src/utils/lps';
 import RulerWidget2D from '@/src/components/tools/ruler/RulerWidget2D.vue';
 import vtkWidgetManager from '@kitware/vtk.js/Widgets/Core/WidgetManager';
-import { Vector2, Vector3 } from '@kitware/vtk.js/types';
+import type { Vector2, Vector3 } from '@kitware/vtk.js/types';
 import { LPSAxisDir } from '@/src/types/lps';
 import { storeToRefs } from 'pinia';
 import {

src/components/tools/crop/Crop2D.vue

@@ -10,7 +10,7 @@ import { createLPSBounds, createLPSPoint, LPSAxes } from '@/src/utils/lps';
 import { intersectMouseEventWithPlane } from '@/src/utils/vtk-helpers';
 import vtkLPSView2DProxy from '@/src/vtk/LPSView2DProxy';
 import vtkRenderer from '@kitware/vtk.js/Rendering/Core/Renderer';
-import { Vector2, Vector3 } from '@kitware/vtk.js/types';
+import type { Vector2, Vector3 } from '@kitware/vtk.js/types';
 import {
   computed,
   ComputedRef,

src/components/tools/crop/Crop3D.vue

@@ -8,7 +8,7 @@ import { useViewStore } from '@/src/store/views';
 import { arrayEquals } from '@/src/utils';
 import { getAxisBounds, LPSAxes } from '@/src/utils/lps';
 import vtkLPSView3DProxy from '@/src/vtk/LPSView3DProxy';
-import { Bounds } from '@kitware/vtk.js/types';
+import type { Bounds } from '@kitware/vtk.js/types';
 import vtkImageCroppingWidget, {
   ImageCroppingWidgetState,
   vtkImageCroppingViewWidget,

src/components/tools/crosshairs/CrosshairSVG2D.vue

@@ -46,7 +46,7 @@ import { ToolContainer } from '@/src/constants';
 import { useViewStore } from '@/src/store/views';
 import { worldToSVG } from '@/src/utils/vtk-helpers';
 import vtkLPSView2DProxy from '@/src/vtk/LPSView2DProxy';
-import { Vector3 } from '@kitware/vtk.js/types';
+import type { Vector3 } from '@kitware/vtk.js/types';
 import {
   PropType,
   defineComponent,

src/components/tools/paint/PaintWidget2D.vue

@@ -15,7 +15,7 @@ import vtkPlaneManipulator from '@kitware/vtk.js/Widgets/Manipulators/PlaneManip
 import { getLPSAxisFromDir } from '@/src/utils/lps';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { updatePlaneManipulatorFor2DView } from '@/src/utils/manipulators';
-import { vtkSubscription } from '@kitware/vtk.js/interfaces';
+import type { vtkSubscription } from '@kitware/vtk.js/interfaces';
 import { usePaintToolStore } from '@/src/store/tools/paint';
 import { vtkPaintViewWidget } from '@/src/vtk/PaintWidget';
 import { useViewStore } from '@/src/store/views';

src/components/tools/rectangle/RectangleSVG2D.vue

@@ -38,7 +38,7 @@ import { ToolContainer } from '@/src/constants';
 import { useViewStore } from '@/src/store/views';
 import { worldToSVG } from '@/src/utils/vtk-helpers';
 import vtkLPSView2DProxy from '@/src/vtk/LPSView2DProxy';
-import { Vector3 } from '@kitware/vtk.js/types';
+import type { Vector3 } from '@kitware/vtk.js/types';
 import {
   PropType,
   computed,

src/components/tools/rectangle/RectangleWidget2D.vue

@@ -16,7 +16,7 @@ import {
 import vtkPlaneManipulator from '@kitware/vtk.js/Widgets/Manipulators/PlaneManipulator';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { updatePlaneManipulatorFor2DView } from '@/src/utils/manipulators';
-import { vtkSubscription } from '@kitware/vtk.js/interfaces';
+import type { vtkSubscription } from '@kitware/vtk.js/interfaces';
 import { getCSSCoordinatesFromEvent } from '@/src/utils/vtk-helpers';
 import { LPSAxisDir } from '@/src/types/lps';
 import { useVTKCallback } from '@/src/composables/useVTKCallback';

src/components/tools/ruler/RulerSVG2D.vue

@@ -54,7 +54,7 @@ import { ToolContainer } from '@/src/constants';
 import { useViewStore } from '@/src/store/views';
 import { worldToSVG } from '@/src/utils/vtk-helpers';
 import vtkLPSView2DProxy from '@/src/vtk/LPSView2DProxy';
-import { Vector3 } from '@kitware/vtk.js/types';
+import type { Vector3 } from '@kitware/vtk.js/types';
 import {
   PropType,
   computed,

src/components/tools/ruler/RulerWidget2D.vue

@@ -21,7 +21,7 @@ import {
 import vtkPlaneManipulator from '@kitware/vtk.js/Widgets/Manipulators/PlaneManipulator';
 import { useCurrentImage } from '@/src/composables/useCurrentImage';
 import { updatePlaneManipulatorFor2DView } from '@/src/utils/manipulators';
-import { vtkSubscription } from '@kitware/vtk.js/interfaces';
+import type { vtkSubscription } from '@kitware/vtk.js/interfaces';
 import { getCSSCoordinatesFromEvent } from '@/src/utils/vtk-helpers';
 import { LPSAxisDir } from '@/src/types/lps';
 import { useRulerStore } from '@/src/store/tools/rulers';

src/composables/manageVTKSubscription.ts

@@ -1,5 +1,5 @@
 import { onUnmounted } from 'vue';
-import { vtkSubscription } from '@kitware/vtk.js/interfaces';
+import type { vtkSubscription } from '@kitware/vtk.js/interfaces';
 
 export function manageVTKSubscription(subscription: vtkSubscription) {
   onUnmounted(() => subscription.unsubscribe());

src/composables/onProxyManagerEvent.ts

@@ -1,4 +1,4 @@
-import { vtkSubscription } from '@kitware/vtk.js/interfaces';
+import type { vtkSubscription } from '@kitware/vtk.js/interfaces';
 import { VtkProxy } from '@kitware/vtk.js/macros';
 import { onBeforeUnmount } from 'vue';
 import { withProxyManager } from './proxyManager';

src/composables/useCurrentSlice.ts

@@ -1,4 +1,4 @@
-import { Vector3 } from '@kitware/vtk.js/types';
+import type { Vector3 } from '@kitware/vtk.js/types';
 import { computed, unref } from 'vue';
 import { MaybeRef } from '@vueuse/core';
 import { getLPSAxisFromDir } from '../utils/lps';

src/composables/useOrientationLabels.ts

@@ -1,6 +1,6 @@
 import { computed, Ref, ref } from 'vue';
 import { vec3 } from 'gl-matrix';
-import { Vector3 } from '@kitware/vtk.js/types';
+import type { Vector3 } from '@kitware/vtk.js/types';
 import vtkViewProxy from '@kitware/vtk.js/Proxy/Core/ViewProxy';
 import { EPSILON } from '../constants';
 import { useVTKCallback } from './useVTKCallback';

src/composables/useVTKCallback.ts

@@ -1,4 +1,4 @@
-import { vtkSubscription } from '@kitware/vtk.js/interfaces';
+import type { vtkSubscription } from '@kitware/vtk.js/interfaces';
 import { isRef, onUnmounted, watchEffect } from 'vue';
 import { MaybeRef } from '@vueuse/core';
 

src/composables/useVTKWorldToDisplay.ts

@@ -1,6 +1,6 @@
 import vtkOpenGLRenderWindow from '@kitware/vtk.js/Rendering/OpenGL/RenderWindow';
 import vtkRenderer from '@kitware/vtk.js/Rendering/Core/Renderer';
-import { Vector2, Vector3 } from '@kitware/vtk.js/types';
+import type { Vector2, Vector3 } from '@kitware/vtk.js/types';
 import { computed, ref, unref, watchEffect } from 'vue';
 import { MaybeRef, useResizeObserver } from '@vueuse/core';
 import { vec3 } from 'gl-matrix';

src/composables/useVolumeThumbnailing.ts

@@ -3,7 +3,7 @@ import { Mode as LookupTableProxyMode } from '@kitware/vtk.js/Proxy/Core/LookupT
 import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
 import vtkPiecewiseFunctionProxy from '@kitware/vtk.js/Proxy/Core/PiecewiseFunctionProxy';
 import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps';
-import { Vector3 } from '@kitware/vtk.js/types';
+import type { Vector3 } from '@kitware/vtk.js/types';
 import { createVolumeThumbnailer } from '../core/thumbnailers/volume-thumbnailer';
 import { useCameraOrientation } from './useCameraOrientation';
 import { useImageStore } from '../store/datasets-images';

src/core/proxies.ts

@@ -1,4 +1,4 @@
-import { vtkObject } from '@kitware/vtk.js/interfaces';
+import type { vtkObject } from '@kitware/vtk.js/interfaces';
 import { VtkProxy } from '@kitware/vtk.js/macros';
 import vtkAbstractRepresentationProxy from '@kitware/vtk.js/Proxy/Core/AbstractRepresentationProxy';
 import vtkProxyManager from '@kitware/vtk.js/Proxy/Core/ProxyManager';

src/core/thumbnailers/volume-thumbnailer.ts

@@ -7,7 +7,7 @@ import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
 import vtkPiecewiseFunctionProxy from '@kitware/vtk.js/Proxy/Core/PiecewiseFunctionProxy';
 import vtkLookupTableProxy from '@kitware/vtk.js/Proxy/Core/LookupTableProxy';
 import { vec3 } from 'gl-matrix';
-import { Vector3 } from '@kitware/vtk.js/types';
+import type { Vector3 } from '@kitware/vtk.js/types';
 import vtkVolumeProperty from '@kitware/vtk.js/Rendering/Core/VolumeProperty';
 import { getDiagonalLength } from '@kitware/vtk.js/Common/DataModel/BoundingBox';
 

src/core/thumbnailers/vtk-image.ts

@@ -1,5 +1,5 @@
 import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
-import { TypedArray } from '@kitware/vtk.js/types';
+import type { TypedArray } from '@kitware/vtk.js/types';
 import { ThumbnailSlice } from '.';
 
 function scalarImageToImageData(