build: Migrate from webpack to Vite & upgrade Tauri to V2 (#122)

* Migrate from webpack to vite
* refactor: upgrade dependencies
  - Remove webpack config
  - Install the latest quasar library with vite plugin
  - Update the SaSS imports
  - Add APPLICATION_VERSION to the vite config
  - update Github Actions to recent versions with Ubuntu 22 for Linux
  build and Node Version 21.
* feat: migrate tauri to version 2

---------

Co-authored-by: Arunmozhi <[email protected]>

Author: kurt-mueller-osumc

.github/workflows/build-and-publish.yml

@@ -9,32 +9,32 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        platform: [ubuntu-20.04, windows-latest]
+        platform: [ubuntu-22.04, windows-latest]
 
     runs-on: ${{ matrix.platform }}
     steps:
-    - uses: actions/checkout@v2
-    - name: setup node
-      uses: actions/setup-node@v1
-      with:
-        node-version: 14
-    - name: install Rust stable
-      uses: actions-rs/toolchain@v1
-      with:
-        toolchain: stable
-    - name: install dependencies (ubuntu only)
-      if: matrix.platform == 'ubuntu-20.04'
-      run: |
-        sudo apt-get update
-        sudo apt-get install -y libgtk-3-dev webkit2gtk-4.0 libappindicator3-dev librsvg2-dev patchelf
-    - name: install app dependencies and build it
-      run: yarn --network-timeout 600000 && yarn tauri:build
-    - uses: tauri-apps/tauri-action@v0.2
-      env:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      with:
-        tagName: app-v__VERSION__ # the action automatically replaces \_\_VERSION\_\_ with the app version
-        releaseName: "Version __VERSION__"
-        releaseBody: "See the assets to download this version and install."
-        releaseDraft: true
-        prerelease: false
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 21
+      - name: install Rust stable
+        uses: dtolnay/rust-toolchain@stable
+
+      - name: install dependencies (ubuntu only)
+        if: matrix.platform == 'ubuntu-22.04'
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf
+
+      - name: install app dependencies and build it
+        run: yarn --network-timeout 600000 && yarn tauri build
+
+      - uses: tauri-apps/tauri-action@v0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tagName: app-v__VERSION__ # the action automatically replaces \_\_VERSION\_\_ with the app version
+          releaseName: "Version __VERSION__"
+          releaseBody: "See the assets to download this version and install."
+          releaseDraft: true
+          prerelease: false

.github/workflows/test-build.yml

@@ -1,13 +1,13 @@
 name: Run UI Build
 on: [push]
 jobs:
-    build:
-        runs-on: ubuntu-latest
-        steps:
-            - uses: actions/checkout@v2
-            - uses: actions/setup-node@v2
-              with:
-                  node-version: '14'
-                  cache: 'yarn'
-                  cache-dependency-path: yarn.lock
-            - run: yarn && yarn build
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "21"
+          cache: "yarn"
+          cache-dependency-path: yarn.lock
+      - run: yarn && yarn build

.github/workflows/test-prs.yml

@@ -6,26 +6,46 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        platform: [ubuntu-20.04, windows-latest]
+        platform: [ubuntu-22.04, windows-latest]
 
     runs-on: ${{ matrix.platform }}
     steps:
-    - uses: actions/checkout@v2
-    - name: setup node
-      uses: actions/setup-node@v1
-      with:
-        node-version: 14
-    - name: install Rust stable
-      uses: actions-rs/toolchain@v1
-      with:
-        toolchain: stable
-    - name: install dependencies (ubuntu only)
-      if: matrix.platform == 'ubuntu-20.04'
-      run: |
-        sudo apt-get update
-        sudo apt-get install -y libgtk-3-dev webkit2gtk-4.0 libappindicator3-dev librsvg2-dev patchelf
-    - name: install app dependencies and build it
-      run: yarn --network-timeout 600000 && yarn tauri:build
-    - uses: tauri-apps/[email protected]
-      env:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 21
+
+      - name: Install Rust stable
+        uses: dtolnay/rust-toolchain@stable
+
+      - name: Install system dependencies (ubuntu only)
+        if: matrix.platform == 'ubuntu-22.04'
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf
+
+      - name: Install JS dependencies
+        run: yarn install
+
+      - name: Build Desktop app - Tauri Build
+        id: tauri_build
+        uses: tauri-apps/tauri-action@v0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Upload Linux build artifacts
+        uses: actions/upload-artifact@v4
+        if: matrix.platform == 'ubuntu-22.04'
+        with:
+          path: |
+            ${{ github.workspace }}/src-tauri/target/release/bundle/**/*.deb
+            ${{ github.workspace }}/src-tauri/target/release/bundle/**/*.rpm
+            ${{ github.workspace }}/src-tauri/target/release/bundle/**/*.AppImage
+
+      - name: Upload Windows build artifacts
+        uses: actions/upload-artifact@v4
+        if: matrix.platform == 'windows-latest'
+        with:
+          path: |
+            ${{ github.workspace }}\src-tauri\target\release\bundle\**\*.exe
+            ${{ github.workspace }}\src-tauri\target\release\bundle\**\*.nsis

.gitignore

@@ -24,3 +24,37 @@ node_modules/
 *.njsproj
 *.sln
 *.sw?
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
+
+test-results/
+playwright-report/

public/index.html index.htmlpublic/index.html renamed to index.html

@@ -4,14 +4,11 @@
     <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>NER Annotator for SpaCy</title>
   </head>
   <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
     <div id="app"></div>
+    <script type="module" src="./src/main.js" type="text/javascript"></script>
     <!-- built files will be auto injected -->
   </body>
 </html>

jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}

package.json

@@ -1,49 +1,67 @@
 {
   "name": "ner-annotator",
-  "version": "1.5.0",
+  "version": "2.0.0-alpha",
   "private": true,
+  "type": "module",
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
     "tauri": "tauri",
-    "tauri:build": "vue-cli-service tauri:build",
-    "tauri:serve": "vue-cli-service tauri:serve",
-    "tauri:build-win": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service tauri:build",
-    "tauri:serve-win": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service tauri:serve",
-    "test": "jest"
+    "test": "jest",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test:unit": "vitest",
+    "test:e2e": "playwright test",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
+    "format": "prettier --write src/"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/vue-fontawesome": "^3.0.3",
-    "@quasar/extras": "^1.16.2",
-    "@tauri-apps/api": "^1.0.0-beta.8",
+    "@quasar/extras": "^1.16.13",
+    "@tauri-apps/api": "^2.0.0",
+    "@tauri-apps/plugin-clipboard-manager": "^2.0.0",
+    "@tauri-apps/plugin-dialog": "~2",
+    "@tauri-apps/plugin-fs": "~2",
+    "@tauri-apps/plugin-global-shortcut": "~2",
+    "@tauri-apps/plugin-http": "~2",
+    "@tauri-apps/plugin-notification": "~2",
+    "@tauri-apps/plugin-os": "~2",
+    "@tauri-apps/plugin-process": "~2",
+    "@tauri-apps/plugin-shell": "~2",
     "core-js": "^3.30.1",
     "es6-promise": "^4.2.8",
-    "quasar": "^2.11.10",
+    "quasar": "^2.17.4",
     "treebank-tokenizer": "^0.0.1",
-    "vue": "^3.2.47",
+    "vue": "^3.4.29",
     "vuex": "^4.1.0"
   },
   "devDependencies": {
-    "@tauri-apps/cli": "^1.0.0-beta.10",
-    "@vue/cli-plugin-babel": "~5.0.8",
-    "@vue/cli-plugin-eslint": "~5.0.8",
-    "@vue/cli-service": "~5.0.8",
-    "@vue/compiler-sfc": "^3.2.47",
     "@babel/eslint-parser": "^7.21.3",
-    "eslint": "^8.38.0",
+    "@playwright/test": "^1.44.1",
+    "@quasar/vite-plugin": "^1.8.1",
+    "@rushstack/eslint-patch": "^1.8.0",
+    "@tauri-apps/cli": "^2.1.0",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "@vitejs/plugin-vue-jsx": "^4.0.0",
+    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vue/test-utils": "^2.4.6",
+    "bulma": "^1.0.2",
+    "eslint": "^9.9.1",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-playwright": "^1.6.2",
     "eslint-plugin-prettier": "^5.0.1",
-    "eslint-plugin-vue": "^9.11.0",
+    "eslint-plugin-vue": "^9.23.0",
     "jest": "^29.5.0",
-    "node-sass": "^8.0.0",
-    "prettier": "^3.1.1",
-    "sass": "^1.62.0",
-    "sass-loader": "^13.2.2",
+    "jsdom": "^25.0.0",
+    "prettier": "^3.2.5",
+    "sass": "^1.78.0",
+    "sass-embedded": "^1.80.2",
+    "vite": "^5.3.1",
+    "vite-plugin-vue-devtools": "^7.3.1",
+    "vitest": "^2.0.5",
     "vue-cli-plugin-quasar": "^5.0.2",
-    "vue-cli-plugin-tauri": "~1.0.0-beta.6"
+    "vue-cli-plugin-tauri": "^1.0.0"
   },
   "browserslist": [
     "> 1%",