Add semantic release

.github/workflows/npm-semantic.yml

@@ -0,0 +1,37 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: npm publish
+
+on:
+  push:
+    branches:
+      - main
+      - beta
+      - alpha
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - run: npm clean-install
+      - run: npm run build
+
+  publish-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          registry-url: https://registry.npmjs.org/
+      - name: semantic
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: npx semantic-release

.gitignore

@@ -35,4 +35,7 @@ yarn-error.log*
 # dotenv
 .env
 
-/docs/.vuepress/dist
+/docs/.vitepress/dist
+/docs/.vitepress/cache
+
+

LICENCE → LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Van Oord
+Copyright (c) 2023-present Claudio Alarcon, forked project from Van Oord
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

README.md

@@ -1,82 +1,24 @@
-# vue3-plotly
+# @clalarco/vue3-plotly
 
-<h2>Thin vue wrapper for <a
-              href="https://plot.ly/javascript/"
-              target="_blank"
-            >plotly.js</a></h2>
-<span>It provides:</span>
-<ul>
-  <li>all plotly.js methods and events</li>
-  <li>data reactivity</li>
-  <li>Redraw on resizing</li>
-</ul>
+## Thin Vue 3 wrapper for [plotly.js](https://plot.ly/javascript/)
 
-## Usage
-```HTML
-<VuePlotly :data="data" :layout="layout" :display-mode-bar="false"></VuePlotly>
-```
-```javascript
-import { VuePlotly } from 'vue3-plotly'
+This is the umbrella folder for this project. Please check the README in the following sections for details:
 
-export default {
-  components: {
-    Plotly
-  },
-  data() {
-    return {
-      data:[{
-        x: [1,2,3,4],
-        y: [10,15,13,17],
-        type:"scatter"
-      }],
-      layout:{
-        title: "My graph"
-      }
-    }
-  }
-}
-```
-## API
+- (Library)[lib/README.md]. This README is also used by npm publish.
+- (Demo Page)[demo/README.md]
 
-#### Props
+## Code improvements
 
-- `data` ***Array*** (*optional*)
+I made a bunch of code organization and refactor, without losing backward compatibility:
 
-  [Data](https://plot.ly/javascript/reference/) to be displayed
+- Implementation of library in Typescript
+- Code is separated in lib, demo and docs, using npm workspaces
+- Migrating building process to [Vite](https://vitejs.dev/), using [this article as reference](https://medium.com/@blaster203/how-to-create-a-component-library-with-vue-3-vitejs-typescript-8eb41f799045)
+- Updating documentation, using [Vitepress](https://vitepress.dev/)
+- Publishing documentation and demo in GitHub Pages
 
-- `layout` ***Object*** (*optional*)
+## Future improvements:
 
-  Graphic [layout](https://plot.ly/javascript/reference/#layout)
-
-- `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/).
-
-## Installation
-```
-npm install vue3-plotly
-```
-
-## Project setup
-```
-npm install
-```
-
-### Compiles and hot-reloads for development
-```
-npm run serve
-```
-
-### Compiles and minifies for production
-```
-npm run build
-```
-
-### Lints and fixes files
-```
-npm run lint
-```
+- Add testing
+- Add semantic release
+- Add automatic deployment

demo/.gitignore

@@ -1,21 +1,21 @@
-.DS_Store
-node_modules
-/dist
-
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
 
 # Editor directories and files
+.vscode/*
 .idea
-.vscode
+.DS_Store
 *.suo
 *.ntvs*
 *.njsproj

demo/README.md

@@ -1,24 +1,14 @@
-# vueapp
+# @clalarco/vue3-plotly
 
-## Project setup
-```
-npm install
-```
+## Thin Vue 3 wrapper for [plotly.js](https://plot.ly/javascript/)
 
-### Compiles and hot-reloads for development
-```
-npm run serve
-```
+This is README for the demo page, which is published in GitHub Pages [in this link](https://clalarco.github.io/vue3-plotly/demo).
 
-### Compiles and minifies for production
-```
-npm run build
-```
 
-### Lints and fixes files
-```
-npm run lint
-```
+## Code improvements
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+The demo page has the following improvements respective to the [original demo](https://github.com/VanOord/vue3-plotly/tree/main/demo):
+
+- It uses `Vite` to build.
+- It uses Vue 3 `<script setup>` syntax, and also `onMounted`, `watchEffect` and `Ref`.
+- It uses spread syntax to create the data instead of `push()`

demo/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>