Upgrade vue-plotly to Vue3 + Vite + TS

.circleci/config.yml

@@ -7,8 +7,8 @@ jobs:
   build:
     docker:
       # specify the version you desire here
-      - image: circleci/node:10-browsers
-      
+      - image: circleci/node:18-browsers
+
       # Specify service dependencies here if necessary
       # CircleCI maintains a library of pre-built images
       # documented at https://circleci.com/docs/2.0/circleci-images/
@@ -32,8 +32,6 @@ jobs:
           paths:
             - node_modules
           key: v1-dependencies-{{ checksum "package.json" }}
-        
+
       # run tests!
       - run: yarn test:coverage
-
-

.eslintrc.js

@@ -1,14 +1,28 @@
 module.exports = {
-  root: true,
   env: {
-    node: true
+    "browser": true,
+    "es2021": true
   },
-  extends: ["plugin:vue/essential", "@vue/prettier"],
+  extends: [
+    "eslint:recommended",
+    "plugin:vue/vue3-essential",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  overrides: [
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  plugins: [
+    "vue",
+    "@typescript-eslint"
+  ],
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
-  },
-  parserOptions: {
-    parser: "babel-eslint"
+    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
+    "vue/multi-word-component-names": "off",
+    "@typescript-eslint/no-explicit-any": "off"
   }
-};
+}

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+/docs
 
 .history
 

README.md

@@ -8,7 +8,7 @@
 [![Npm version](https://img.shields.io/npm/v/vue-plotly.svg)](https://www.npmjs.com/package/vue-plotly)
 [![MIT License](https://img.shields.io/github/license/David-Desmaisons/vue-plotly.svg)](https://github.com/David-Desmaisons/vue-plotly/blob/master/LICENSE)
 
-<h2>Thin vue wrapper for <a
+<h2>Thin Vue3 wrapper for <a
               href="https://plot.ly/javascript/"
               target="_blank"
             >plotly.js</a></h2>
@@ -19,17 +19,17 @@
   <li>Redraw on resizing</li>
 </ul>
 
-![example](./example/assets/demo.gif)
+![example](https://github.com/David-Desmaisons/vue-plotly/raw/master/example/assets/demo.gif)
 
 ## Live example
 https://david-desmaisons.github.io/vue-plotly/
 
 ## Usage
 ```HTML
-<Plotly :data="data" :layout="layout" :display-mode-bar="false"></Plotly>
+<plotly :data="data" :layout="layout" :display-mode-bar="false"/>
 ```
 ```javascript
-import { Plotly } from 'vue-plotly'
+import Plotly from 'vue-plotly'
 
 export default {
   components: {
@@ -51,59 +51,70 @@ export default {
 ```
 ## API
 
-#### Props 
+### Props
 
-- `data` ***Array*** (*optional*) 
+- `data` ***Array*** (*optional*)
 
   [Data](https://plot.ly/javascript/reference/) to be displayed
 
-- `layout` ***Object*** (*optional*) 
+- `layout` ***Object*** (*optional*)
 
   Graphic [layout](https://plot.ly/javascript/reference/#layout)
 
-- `id` ***String*** (*optional*) 
+- `id` ***String*** (*optional*)
 
   Id of the root HTML element of the component.
 
 - Others:
 
   Plotly component implements the [transparent wrapper pattern](https://zendev.com/2018/05/31/transparent-wrapper-components-in-vue.html):<br>All other props will be passed as plotly graphic [option](https://plot.ly/javascript/configuration-options/).
 
+### Exposed methods
+
+All [Plotly.js instance methods](https://plotly.com/javascript/plotlyjs-function-reference) are exposed by the component instance with "`plotly`" prefix, plus the simplifyed `toImage()` and `downloadImage()`, that preset some options.
+See the usage example at [`graphpicker.vue`](./example/components/graphpicker.vue).
+
+### Events
+
+All [Plotly.js events](https://plotly.com/javascript/plotlyjs-events) are re-emited by the component instance and you can listen with the `v-on` directive.
+See the usage example at [`graphpicker.vue`](./example/components/graphpicker.vue).
+
+If you need, all event names are exported by this package:
+```javascript
+import { eventNames } from 'vue-plotly'
+```
+
 ## Installation
 ```
-npm install vue-plotly
+yarn add vue-plotly
 ```
 
 ## Project setup
 ```
-npm install
+yarn
 ```
 
 ### Compiles and hot-reloads for development
 ```
-npm run serve
+yarn dev
 ```
 
 ### Compiles and minifies for production
 ```
-npm run build
+yarn build
 ```
 
 ### Run your tests
+One time:
 ```
-npm run test
+yarn test
 ```
-
-### Lints and fixes files
+Hacking:
 ```
-npm run lint
+yarn test:watch --open
 ```
 
-### Run your unit tests
+### Lints and fixes files
 ```
-npm run test:unit
+yarn lint
 ```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
-