Migrate to Vue3

tupilabs · Jan 14, 2024 · d5ac1b0 · d5ac1b0
1 parent 6b7fe91
commit d5ac1b0
Show file tree

Hide file tree

Showing 17 changed files with 3,066 additions and 11,310 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -17,18 +17,20 @@
 module.exports = {
   root: true,
   env: {
-    node: true
+    node: true,
+    es2021: true,
   },
   extends: [
-    'plugin:vue/essential',
+    'plugin:vue/vue3-recommended',
     'eslint:recommended'
   ],
+  parserOptions: {
+    requireConfigFile: false
+  },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'vue/custom-event-name-casing': 0
-  },
-  parserOptions: {
-    parser: 'babel-eslint'
+    'vue/custom-event-name-casing': 0,
+    'vue/multi-word-component-names': 0
   }
 }
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -14,7 +14,7 @@ jobs:
     - uses: actions/checkout@v4
     - uses: actions/setup-node@v3
       with:
-        node-version: 14
+        node-version: 20
     - name: Cache node modules
       uses: actions/cache@v3
       with:

diff --git a/babel.config.js b/babel.config.js
diff --git a/index.html b/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!--
+   Licensed to the Apache Software Foundation (ASF) under one or more
+   contributor license agreements.  See the NOTICE file distributed with
+   this work for additional information regarding copyright ownership.
+   The ASF licenses this file to You under the Apache License, Version 2.0
+   (the "License"); you may not use this file except in compliance with
+   the License.  You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+-->
+<html lang="en">
+<head>
+  <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="/favicon.ico">
+  <title>Vue Lumino</title>
+</head>
+<body>
+<noscript>
+  <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to
+    continue.</strong></noscript>
+<div id="app"></div>
+<!-- built files will be auto injected -->
+</body>
+<script type="module" src="/src/main.js"></script>
+</html>
diff --git a/package.json b/package.json
@@ -18,40 +18,43 @@
     "url": "https://github.com/kinow/vue-lumino/issues"
   },
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "build:bundle": "vue-cli-service build --target lib --name vue-lumino ./src/index.js && rm dist/demo.html",
-    "lint": "vue-cli-service lint",
-    "test:unit": "vue-cli-service test:unit",
-    "test:e2e": "vue-cli-service test:e2e"
+    "dev": "vite",
+    "serve": "vite preview",
+    "build": "vite build",
+    "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
+    "test:unit": "vitest run ./tests/unit",
+    "test:e2e": "cypress run $@",
+    "coverage:unit": "vitest run --coverage"
   },
   "dependencies": {
     "@lumino/datagrid": "^0.34.0",
     "@lumino/default-theme": "^0.20.1",
     "@lumino/widgets": "^1.30.0",
-    "core-js": "^3.19.2",
-    "vue": "^2.6.14"
+    "vue": "^3.3.6"
   },
   "devDependencies": {
-    "@cypress/code-coverage": "^3.9.12",
-    "@vue/cli-plugin-babel": "^4.5.15",
-    "@vue/cli-plugin-e2e-cypress": "^4.5.15",
-    "@vue/cli-plugin-eslint": "^4.5.15",
-    "@vue/cli-plugin-unit-jest": "^4.5.15",
-    "@vue/cli-service": "^4.5.15",
-    "@vue/test-utils": "^1.3.0",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.6.1",
-    "babel-loader": "^8.2.3",
-    "babel-plugin-istanbul": "^6.1.1",
+    "@cypress/code-coverage": "^3.12.4",
+    "@cypress/vue": "^6.0.0",
+    "@vitejs/plugin-vue": "^4.4.0",
+    "@vitest/coverage-c8": "^0.33.0",
+    "@vue/compiler-sfc": "^3.3.6",
+    "@vue/eslint-config-standard": "^8.0.1",
+    "@vue/test-utils": "^2.4.1",
+    "cypress": "^13.3.2",
+    "cypress-vite": "^1.4.2",
     "eslint": "^7.12.0",
-    "eslint-plugin-vue": "^7.1.0",
-    "sass": "^1.27.0",
-    "sass-loader": "^10.0.4",
-    "vue-jest": "^3.0.7",
-    "vue-template-compiler": "^2.6.14",
-    "webpack": "^5.64.4"
+    "eslint-plugin-cypress": "^2.15.1",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-standard": "^5.0.0",
+    "eslint-plugin-vue": "^9.17.0",
+    "jsdom": "^23.2.0",
+    "sass": "^1.69.4",
+    "sinon": "^17.0.0",
+    "vite": "^4.5.1",
+    "vite-plugin-istanbul": "^5.0.0",
+    "vitest": "^0.34.6"
   },
   "keywords": [
     "component",

diff --git a/public/index.html b/public/index.html
diff --git a/src/App.vue b/src/App.vue
@@ -23,17 +23,23 @@ NOTE: Used for example/documentation only. Not intended to be used by users of t
 <template>
   <div id="app">
     <button
-      @click="onAddHelloWorldButtonClicked"
       id="add-hello-world-widget-button"
-    >Add Hello World</button>
+      @click="onAddHelloWorldButtonClicked"
+    >
+      Add Hello World
+    </button>
     <button
-      @click="onAddColoredCircleButtonClicked"
       id="add-colored-circle-widget-button"
-    >Add Colored Circle</button>
-    <Lumino ref="lumino"
-            v-on:lumino:deleted="onWidgetDeletedEvent"
-            v-on:lumino:activated="onWidgetActivatedEvent"
-            tab-title-prop="tab-title"
+      @click="onAddColoredCircleButtonClicked"
+    >
+      Add Colored Circle
+    </button>
+    <Lumino
+      ref="lumino"
+      :widgets="Object.keys(widgets)"
+      tab-title-prop="tab-title"
+      @lumino:deleted="onWidgetDeletedEvent"
+      @lumino:activated="onWidgetActivatedEvent"
     >
       <!-- In this example we are adding two types of elements as tabs. The code
       of this view is using the component name plus a random number for the component
@@ -45,30 +51,27 @@ NOTE: Used for example/documentation only. Not intended to be used by users of t
       events tries to keep everything in-sync (fingers-crossed).
       -->
       <HelloWorld
-        v-for="id of this.helloWorldWidgets"
-        :key="id"
+        v-for="id of helloWorldWidgets"
         :id="id"
-      >
-      </HelloWorld>
-      <ColoredCircle
-        v-for="id of this.coloredCircleWidgets"
         :key="id"
+      />
+      <ColoredCircle
+        v-for="id of coloredCircleWidgets"
         :id="id"
+        :key="id"
         :color="'red'"
         :tab-title="`${id}`"
-      ></ColoredCircle>
+      />
     </Lumino>
   </div>
 </template>
 
 <script>
 // this should be your only import for this component
-import Lumino from '@/components/Lumino'
+import Lumino from '@/components/Lumino.vue'
 // importing the components we want to display within the Lumino component
-import HelloWorld from '@/components/example/HelloWorld'
-import ColoredCircle from '@/components/example/ColoredCircle'
-// to set reactive value
-import Vue from 'vue'
+import HelloWorld from '@/components/example/HelloWorld.vue'
+import ColoredCircle from '@/components/example/ColoredCircle.vue'
 
 import '@lumino/default-theme/style/index.css';
 
@@ -140,14 +143,14 @@ export default {
     onAddHelloWorldButtonClicked () {
       const id = `${new Date().getTime()}`
       // eslint-disable-next-line no-console
-      console.log(`Adding new widget ${ColoredCircle.name}, ID ${id}`)
-      Vue.set(this.widgets, id, HelloWorld.name)
+      console.log(`Adding new widget ${HelloWorld.name}, ID ${id}`)
+      this.widgets[id] = HelloWorld.name
     },
     onAddColoredCircleButtonClicked () {
       const id = `${new Date().getTime()}`
       // eslint-disable-next-line no-console
       console.log(`Adding new widget ${ColoredCircle.name}, ID ${id}`)
-      Vue.set(this.widgets, id, ColoredCircle.name)
+      this.widgets[id] = ColoredCircle.name
     },
     onWidgetActivatedEvent (event) {
       // eslint-disable-next-line no-console
@@ -156,7 +159,7 @@ export default {
     onWidgetDeletedEvent (event) {
       // eslint-disable-next-line no-console
       console.log(`Deleted widget ${event.id}`)
-      Vue.delete(this.widgets, event.id)
+      delete this.widgets[event.id]
     }
   }
 }