Migrate to Vue3

.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
   }
 }

.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:
@@ -25,10 +25,11 @@ jobs:
     - name: Lint
       run: |
         yarn run lint --no-fix
-        DEBUG="lockfile-lint,validate-host-manager" npx lockfile-lint --path yarn.lock --validate-https --allowed-hosts npm --allowed-hosts registry.yarnpkg.com
+        # --validate-https, fails with Yarn 4 due to protocol=npm
+        DEBUG="lockfile-lint,validate-host-manager" npx lockfile-lint --path yarn.lock --allowed-hosts npm --allowed-hosts registry.yarnpkg.com
     - name: Test
       run: |
-        NODE_ENV=test yarn run test:unit
+        NODE_ENV=test yarn run coverage:unit
     - name: Upload coverage to Codecov
       uses: codecov/codecov-action@v1
       with:
@@ -39,15 +40,15 @@ jobs:
     - name: Build
       run: yarn run build
     - name: Build Library
-      run: yarn run build:bundle
+      run: yarn run build
   e2e-tests:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
         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:
@@ -57,7 +58,7 @@ jobs:
         run: yarn install
       - name: e2e
         run: |
-          yarn run test:e2e --headless --mode development
+          VITE_COVERAGE=1 yarn run test:e2e --headless
       - name: Upload coverage to Codecov
         uses: codecov/codecov-action@v1
         with:

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.0.2.cjs

CHANGES.md

@@ -1,6 +1,13 @@
 ## 1.2.0 (202?-??-??)
 
-- Vue3... https://github.com/tupilabs/vue-lumino/issues/51...
+- Vue3 https://github.com/tupilabs/vue-lumino/pull/59
+  - Vue 3 removed `$children`, which was used in this library with Vue 2. To
+    work around that, and to support any kind of component without customization
+    required, now users **must** provide a `:ref="id"` for each component. The
+    `ref` value must match the `id` given to the component. This library uses
+    that `ref` value to match with the `id`, and locate the element via
+    `$parent.$refs`. This means, too, that the caller of `Lumino` must hold the
+    `$refs`. See the example code and the `README.md` for an example.
 - Bump webpack from 5.64.4 to 5.76.0 #52
 - Bump semver from 5.7.1 to 5.7.2 #54
 - Bump word-wrap from 1.2.3 to 1.2.4 #55

README.md

@@ -71,7 +71,7 @@ index 3943904..f04b13d 100644
 +// Import component.
 +import Lumino from '@tupilabs/vue-lumino'
 +// Re-use the component created by the vue create command.
-+import HelloWorld from './components/HelloWorld'
++import HelloWorld from './components/HelloWorld.vue'
 +
 +// Import styles, or customize as necessary.
 +import '@lumino/default-theme/style/index.css'
@@ -109,7 +109,8 @@ Alternatively, it is possible to define a `prop` in the `Lumino` component to be
 for the tab title. The default value of that prop is "name".
 
 ```vue
-<Lumino ref="lumino"
+<Lumino
+  ref="lumino"
   v-on:lumino:deleted="onWidgetDeletedEvent"
   v-on:lumino:activated="onWidgetActivatedEvent"
   tab-title-prop="displayName"
@@ -122,7 +123,8 @@ component does not define the `prop`, then the `Lumino` component will use the d
 value, i.e. the component name.
 
 ```vue
-<Lumino ref="lumino"
+<Lumino
+  ref="lumino"
   v-on:lumino:deleted="onWidgetDeletedEvent"
   v-on:lumino:activated="onWidgetActivatedEvent"
   tab-title-prop="displayName"
@@ -132,13 +134,15 @@ value, i.e. the component name.
     v-for="id of this.helloWorldWidgets"
     :key="id"
     :id="id"
+    :ref="id"
     :display-name="`TAB-HW-${id}`"
   ></HelloWorld>
   <!-- ColoredCircle tab titles will display ${ColoredCircle.name}, IOW, `ColoredCircle` -->
   <ColoredCircle
     v-for="id of this.coloredCircleWidgets"
     :key="id"
     :id="id"
+    :ref="id"
     :color="'red'"
   ></ColoredCircle>
 </Lumino>

cypress.config.js

@@ -0,0 +1,28 @@
+const {defineConfig} = require('cypress')
+const vitePreprocessor = require('cypress-vite')
+const path = require('path')
+
+module.exports = defineConfig({
+  fixturesFolder: 'tests/e2e/fixtures',
+  screenshotsFolder: 'tests/e2e/screenshots',
+  videosFolder: 'tests/e2e/videos',
+  video: false,
+  env: {
+    codeCoverage: {
+      exclude: 'cypress/**/*.*',
+    }
+  },
+  e2e: {
+    baseUrl: 'http://localhost:8080',
+    setupNodeEvents(on, config) {
+      on('file:preprocessor', vitePreprocessor({
+        configFile: path.resolve(__dirname, './vite.config.js'),
+        mode: 'development',
+      }))
+      require('@cypress/code-coverage/task')(on, config)
+      return config
+    },
+    specPattern: 'tests/e2e/specs/**/*.cy.{js,jsx,ts,tsx}',
+    supportFile: 'tests/e2e/support/index.js',
+  },
+})

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>

package.json

@@ -3,7 +3,6 @@
   "description": "A Vue component that integrates with Lumino",
   "author": "Bruno P. Kinoshita <[email protected]> (https://twitter.com/kinow)",
   "version": "1.2.0-SNAPSHOT",
-  "private": false,
   "license": "Apache-2.0",
   "homepage": "https://github.com/tupilabs/vue-lumino/",
   "main": "./dist/vue-lumino.common.js",
@@ -18,46 +17,53 @@
     "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": "concurrently --names 'SERVER,CLIENT' --prefix-colors 'yellow,blue' --success 'first' --kill-others 'yarn run dev' 'yarn wait-on http://localhost:8080/index.html && cypress run --e2e $@'",
+    "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.18",
+    "@cypress/vue": "^6.0.0",
+    "@vitejs/plugin-vue": "^4.4.0",
+    "@vitest/coverage-istanbul": "^1.2.0",
+    "@vitest/coverage-v8": "^1.0.2",
+    "@vue/compiler-sfc": "^3.3.6",
+    "@vue/eslint-config-standard": "^8.0.1",
+    "@vue/test-utils": "^2.4.1",
+    "concurrently": "^8.2.2",
+    "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": "^1.2.0",
+    "wait-on": "^7.0.1"
   },
   "keywords": [
     "component",
     "lumino",
     "tabs",
     "widgets",
     "vue"
-  ]
+  ],
+  "packageManager": "[email protected]"
 }