From d6c636f0cb5808b41cec55a02dc2a14a7aeedd61 Mon Sep 17 00:00:00 2001 From: Antonio Anaya Date: Mon, 19 Jan 2026 21:27:31 -0600 Subject: [PATCH 01/16] ui_migration feat(deps): install vue3 migration build @vue_compat --- webapp/package.json | 45 ++++++++++++++++++++------------------------- 1 file changed, 20 insertions(+), 25 deletions(-) diff --git a/webapp/package.json b/webapp/package.json index 45c8f29e..4f32bc79 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -1,46 +1,41 @@ { "name": "openflexure-microscope-jsclient", - "version": "3.0.0-alpha4", + "version": "3.0.0-alpha4_vue3_dryrun", "private": true, "description": "User client for the OpenFlexure Microscope Server", "author": "OpenFlexure (https://www.openflexure.org)", "scripts": { "gv": "genversion src/version.js", - "serve": "vue-cli-service serve --mode development", - "build": "vue-cli-service build --mode production", - "lint": "vue-cli-service lint --no-fix --max-warnings 0", - "lint:fix": "vue-cli-service lint --fix" + "serve": "vite serve --mode development", + "build": "vite build --mode production", + "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --ignore-path .gitignore", + "lint:fix": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore" }, "dependencies": { + "vue": "^3.4.0", + "vue-router": "4.0.0", + "@vue/compat": "^3.2.0", + "vuejs-paginate-next": "1.0.2", "material-design-icons": "^3.0", "mousetrap": "^1.6.5", "openseadragon": "^5.0.0", - "vue-observe-visibility": "^0.4" + "vue-observe-visibility": "^0.4", + "vite": "^5.0.0", + "uikit": "^3.24.2", + "vuex": "^4.0.0", + "axios": "^1.7.7" }, "devDependencies": { "@babel/eslint-parser": "^7.28.5", - "@vue/cli-plugin-babel": "^5.0.9", - "@vue/cli-plugin-eslint": "^5.0.9", - "@vue/cli-plugin-router": "^5.0.9", - "@vue/cli-plugin-vuex": "^5.0.9", - "@vue/cli-service": "^5.0.9", - "@vue/eslint-config-prettier": "^7.1.0", - "axios": "^1.13.1", + "@vue/eslint-config-prettier": "9.0.0", "core-js": "^3.46.0", "css-loader": "^3.6", - "eslint": "^7.32.0", - "eslint-config-prettier": "^8.10.2", - "eslint-plugin-prettier": "^3.4.1", - "eslint-plugin-vue": "^7.20.0", - "less": "^4.4.2", - "less-loader": "^11.1.4", + "eslint": "^9.0.0", + "eslint-plugin-prettier": "^5.1.0", + "eslint-plugin-vue": "^9.20.0", + "less": "^4.5.1", "material-symbols": "^0.39.1", - "prettier": "^2.8.8", - "uikit": "^3.24.2", - "vue": "^2.7", - "vue-template-compiler": "^2.7", - "vuejs-paginate": "^2.1", - "vuex": "^3.6" + "prettier": "^3.2.8" }, "postcss": { "plugins": { From 3e528fdfa15aff43cc984f03e02fd1ea9889bee8 Mon Sep 17 00:00:00 2001 From: Antonio Anaya Date: Tue, 20 Jan 2026 17:59:16 -0600 Subject: [PATCH 02/16] ui_migration feat(deps): setup vite mjs and index.html --- webapp/index.html | 25 ++++++++++++++++ webapp/public/old.index.html | 17 +++++++++++ webapp/vite.config.mjs | 57 ++++++++++++++++++++++++++++++++++++ 3 files changed, 99 insertions(+) create mode 100644 webapp/index.html create mode 100644 webapp/public/old.index.html create mode 100644 webapp/vite.config.mjs diff --git a/webapp/index.html b/webapp/index.html new file mode 100644 index 00000000..d41b7ffe --- /dev/null +++ b/webapp/index.html @@ -0,0 +1,25 @@ +// index.html +// The main HTML file for the OpenFlexure Microscope web application. +// Vite will use this file as a template to build the final HTML served to users. +// It's at root directory to allow Vite to process it. +// The previous version was located at public/index.html. + + + + + + + + + OpenFlexure Microscope + + + + +
+ + + + \ No newline at end of file diff --git a/webapp/public/old.index.html b/webapp/public/old.index.html new file mode 100644 index 00000000..375edb52 --- /dev/null +++ b/webapp/public/old.index.html @@ -0,0 +1,17 @@ + + + + + + + + OpenFlexure Microscope + + + +
+ + + diff --git a/webapp/vite.config.mjs b/webapp/vite.config.mjs new file mode 100644 index 00000000..2407af07 --- /dev/null +++ b/webapp/vite.config.mjs @@ -0,0 +1,57 @@ +// vite.config.mjs +// Vite configuration file for a Vue 2 webapp using the Vue 2 compatibility build. +// Vite replaces Vue CLI as the build tool. As it is designed for Vue 3, we use the +// @vue/compat package to enable Vue 2 maintaining compatibility syntax and features. +// Important: This is a preliminary setup, for vue2 to vue3 migration purposes. +// Note: Comments are generated to explain relevant configuration options. + +import { fileURLToPath, URL } from 'node:url' +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue({ + template: { + compilerOptions: { + // Enable Vue 2 compatibility mode. + compatConfig: { + MODE: 2 + } + } + } + }), + ], + resolve: { + alias: { + // Use Vue 2 compatible build. + 'vue': '@vue/compat', + // Setup path alias for src directory. + // This allows importing modules using '@/path/to/module'. + '@': fileURLToPath(new URL('./src', import.meta.url)) + }, + // Recognize these file extensions for module resolution. + extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'], + }, + server: { + host: true, + // Set the development server port to 8080. + // OFM uses port 5000, so we avoid conflicts. run, and override by using the address: + // http://microscope.local:8080/?overrideOrigin=http://microscope.local:5000# + port: 8080, + strictPort: true, + }, + css: { + preprocessorOptions: { + less: { + // Always include math in Less files. + math: 'always', + // Enable relative URLs in Less files. + relativeUrls: true, + // Enable JavaScript in Less files + javascriptEnabled: true, + } + } + } +}) \ No newline at end of file From 70cdce3323e0ed22dc92291c7720bd707267fe5e Mon Sep 17 00:00:00 2001 From: Antonio Anaya Date: Tue, 20 Jan 2026 18:25:26 -0600 Subject: [PATCH 03/16] ui_migration fix(deps): Added missing vitejs-pluginvue eslit version downgrade for compatibility. --- webapp/package.json | 18 +++++++++--------- webapp/public/index.html | 17 ----------------- 2 files changed, 9 insertions(+), 26 deletions(-) delete mode 100644 webapp/public/index.html diff --git a/webapp/package.json b/webapp/package.json index 4f32bc79..667adb90 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -12,25 +12,25 @@ "lint:fix": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore" }, "dependencies": { - "vue": "^3.4.0", - "vue-router": "4.0.0", "@vue/compat": "^3.2.0", - "vuejs-paginate-next": "1.0.2", + "@vitejs/plugin-vue": "^5.0.0", + "axios": "^1.7.7", "material-design-icons": "^3.0", "mousetrap": "^1.6.5", "openseadragon": "^5.0.0", - "vue-observe-visibility": "^0.4", - "vite": "^5.0.0", "uikit": "^3.24.2", - "vuex": "^4.0.0", - "axios": "^1.7.7" + "vite": "^5.0.0", + "vue": "^3.4.0", + "vue-observe-visibility": "^0.4", + "vue-router": "4.0.0", + "vuejs-paginate-next": "1.0.2", + "vuex": "^4.0.0" }, "devDependencies": { "@babel/eslint-parser": "^7.28.5", "@vue/eslint-config-prettier": "9.0.0", "core-js": "^3.46.0", - "css-loader": "^3.6", - "eslint": "^9.0.0", + "eslint": "^8.57.0", "eslint-plugin-prettier": "^5.1.0", "eslint-plugin-vue": "^9.20.0", "less": "^4.5.1", diff --git a/webapp/public/index.html b/webapp/public/index.html deleted file mode 100644 index 375edb52..00000000 --- a/webapp/public/index.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - OpenFlexure Microscope - - - -
- - - From 8ced9f8b7579a19582ae7f18d032d86d677802fc Mon Sep 17 00:00:00 2001 From: Antonio Anaya Date: Tue, 20 Jan 2026 18:58:38 -0600 Subject: [PATCH 04/16] ui_migration feat(deps): Modified src/ main.js for vue3 compatibility --- webapp/src/App.vue | 8 +++----- webapp/src/main.js | 22 +++++++++++++--------- 2 files changed, 16 insertions(+), 14 deletions(-) diff --git a/webapp/src/App.vue b/webapp/src/App.vue index 91a61659..920c0017 100644 --- a/webapp/src/App.vue +++ b/webapp/src/App.vue @@ -1,4 +1,4 @@ -