feat(): upd rollup config, remove vue2 version, release vue3-vis package

alexdeia · Feb 5, 2023 · 69a79df · 69a79df
1 parent b421cd0
commit 69a79df
Show file tree

Hide file tree

Showing 45 changed files with 4,623 additions and 68,747 deletions.
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+legacy-peer-deps=true
diff --git a/.travis.yml b/.travis.yml
diff --git a/README.md b/README.md
@@ -1,51 +1,49 @@
-# vue-visjs
+# vue3-visjs
 
-> Vue2 component that helps with <a href="http://visjs.org/">Visjs</a> interaction.
-> This is a fork of the [vis2vue](https://github.com/alexcode/vue2vis) project to update to the latest split component Visjs structure.
+> Vue3 component that helps with <a href="http://visjs.org/">Visjs</a> interaction.
+> Originally this is fork of the [vis2vue](https://github.com/alexcode/vue2vis) project to update to the latest split component Visjs structure and a fork of [vue3-visjs](https://github.com/sjmallon/vue3-visjs) project to upgrade to Vue 3 compatibility.
+
+> Also, my colleagues and me were starting to support vanilla visjs (a bit)
 
 <p align="center">
-  <a href="https://travis-ci.org/sjmallon/vue-visjs">
-    <img src="https://travis-ci.com/sjmallon/vue-visjs.svg?branch=master" alt="Build Status" />
-  </a>
   <a href="LICENSE">
-    <img src="https://img.shields.io/github/license/sjmallon/vue-visjs" alt="Software License" />
+    <img src="https://img.shields.io/github/license/sjmallon/vue3-visjs" alt="Software License" />
   </a>
-  <a href="https://github.com/sjmallon/vue-visjs/releases">
-    <img src="https://img.shields.io/github/v/release/sjmallon/vue-visjs?sort=semver" alt="Latest Version" />
+  <a href="https://github.com/sjmallon/vue3-visjs/releases">
+    <img src="https://img.shields.io/github/v/release/sjmallon/vue3-visjs?sort=semver" alt="Latest Version" />
   </a>
 
   <a href="https://github.com/alexcode/vue2vis/issues">
-    <img src="https://img.shields.io/github/issues/sjmallon/vue-visjs" alt="Issues" />
+    <img src="https://img.shields.io/github/issues/sjmallon/vue3-visjs" alt="Issues" />
   </a>
 </p>
 
 ### Installation
 
 ```
-npm install --save vue-visjs
+npm install --save vue3-visjs
 ```
 
 or
 
 ```
-yarn add vue-visjs
+yarn add vue3-visjs
 ```
 
 ## Usage
 
 Declare the component
 
 ```javascript
-import { Timeline } from 'vue-visjs'
-Vue.component('timeline', Timeline)
+import { Timeline } from 'vue3-visjs'
 ```
 
 Add the component in the template.
 
 ```html
 <body>
   <div id="app">
-    <timeline ref="timeline" :items="items" :groups="groups" :options="options"> </timeline>
+    <Timeline ref="timeline" :items="items" :groups="groups" :options="options" />
   </div>
 </body>
 ```
@@ -88,16 +86,15 @@ By default all Vis events are emitted by your component. You can subscribe to a
 ```html
 <body>
   <div id="app">
-    <timeline
+    <Timeline
       ref="timeline"
       :items="items"
       :groups="groups"
       :options="options"
       :events="['drop', 'changed']"
       @drop="myDropCallback"
       @changed="myChangedCallback"
-    >
-    </timeline>
+    />
   </div>
 </body>
 ```
@@ -124,7 +121,7 @@ All the [Visjs DataSet event](http://visjs.org/docs/data/dataset.html#Events) wi
 You can also manage your own data bindings by passing your own DataSet or DataView instead of an Array.
 
 ```javascript
-import { DataSet } from 'vue2vis'
+import { DataSet } from 'vue3-visjs'
 
 new Vue({
   el: '#app',
@@ -185,6 +182,8 @@ $ npm install
 
 # build for development and production with minification
 $ npm run build
+# or only esm
+$ npm run build:es
 
 ```
 
@@ -193,31 +192,29 @@ $ npm run build
 ```bash
 # Run demo at localhost:8080
 $ npm link
-$ cd examples
+$ cd examples/vue3
 $ npm install
-$ npm link vue-visjs
+$ npm link vue3-visjs # or npm link ../..
 # serve with hot reload at localhost:8080
-$ npm run serve
+$ npm run dev
 ```
 
-Go to <http://localhost:8080/> to see running examples
+Go to <http://localhost:5173/> to see running examples
 
 NOTE: If you make changes to the library you should run 'npm run build' again in the root folder.
 The dev server should detect modification and reload the demo
 
-## Security
-
-If you discover any security related issues, please email [email protected] instead of using the issue tracker.
-
 ## Credits
 
-- [Steve Malllon][link-author]
+- [Aleksei Klykov][link-author]
+
+- [Steve Malllon](https://github.com/sjmallon)
 
 - [vue2vis contributors](https://github.com/alexcode/vue2vis/graphs/contributors)
 
 ## License
 
 The MIT License (MIT). Please see [License File](LICENSE.md) for more information.
 
-[link-author]: https://github.com/sjmallon
+[link-author]: https://github.com/alexdeia
 [link-contributors]: ../../contributors
diff --git a/build/rollup.config.js b/build/rollup.config.js
@@ -16,11 +16,11 @@ const esbrowserslist = fs
   .readFileSync('./.browserslistrc')
   .toString()
   .split('\n')
-  .filter(entry => entry && entry.substring(0, 2) !== 'ie')
+  .filter((entry) => entry && entry.substring(0, 2) !== 'ie')
 
 // Extract babel preset-env config, to combine with esbrowserslist
 const babelPresetEnvConfig = require('../babel.config').presets.filter(
-  entry => entry[0] === '@babel/preset-env'
+  (entry) => entry[0] === '@babel/preset-env'
 )[0][1]
 
 const argv = minimist(process.argv.slice(2))
@@ -29,56 +29,62 @@ const projectRoot = path.resolve(__dirname, '..')
 
 const baseConfig = {
   input: 'src/main.js',
+  output: {
+    exports: 'named',
+    globals: {
+      vue: 'Vue',
+    },
+  },
   plugins: {
     preVue: [
       alias({
         entries: [
           {
             find: '@',
-            replacement: `${path.resolve(projectRoot, 'src')}`
-          }
-        ]
-      })
+            replacement: `${path.resolve(projectRoot, 'src')}`,
+          },
+        ],
+      }),
     ],
     replace: {
       'process.env.NODE_ENV': JSON.stringify('production'),
-      preventAssignment: true
+      preventAssignment: true,
     },
     vue: {
       css: true,
       template: {
-        isProduction: true
-      }
+        isProduction: true,
+      },
     },
     postVue: [
       resolve({
-        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue']
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
       }),
       commonjs(),
-      postcss()
+      postcss({ plugins: [] }),
     ],
     babel: {
       exclude: 'node_modules/**',
       extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
-      babelHelpers: 'bundled'
-    }
-  }
+      babelHelpers: 'bundled',
+    },
+  },
 }
 
 // ESM/UMD/IIFE shared settings: externals
 // Refer to https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
 const external = [
   // list external dependencies, exactly the way it is written in the import statement.
   // eg. 'jquery'
-  'vue'
+  'vue',
 ]
 
 // UMD/IIFE shared settings: output.globals
 // Refer to https://rollupjs.org/guide/en#output-globals for details
 const globals = {
   // Provide global variable names to replace your external imports
   // eg. jquery: '$'
-  vue: 'Vue'
+  vue: 'Vue',
 }
 
 // Customize configs for individual targets
@@ -91,7 +97,7 @@ if (!argv.format || argv.format === 'es') {
     output: {
       file: 'dist/vue-visjs.esm.js',
       format: 'esm',
-      exports: 'named'
+      exports: 'named',
     },
     plugins: [
       replace(baseConfig.plugins.replace),
@@ -106,12 +112,12 @@ if (!argv.format || argv.format === 'es') {
             '@babel/preset-env',
             {
               ...babelPresetEnvConfig,
-              targets: esbrowserslist
-            }
-          ]
-        ]
-      })
-    ]
+              targets: esbrowserslist,
+            },
+          ],
+        ],
+      }),
+    ],
   }
   buildFormats.push(esConfig)
 }
@@ -126,7 +132,7 @@ if (!argv.format || argv.format === 'cjs') {
       format: 'cjs',
       name: 'VueVisjs',
       exports: 'auto',
-      globals
+      globals,
     },
     plugins: [
       replace(baseConfig.plugins.replace),
@@ -135,12 +141,12 @@ if (!argv.format || argv.format === 'cjs') {
         ...baseConfig.plugins.vue,
         template: {
           ...baseConfig.plugins.vue.template,
-          optimizeSSR: true
-        }
+          optimizeSSR: true,
+        },
       }),
       ...baseConfig.plugins.postVue,
-      babel(baseConfig.plugins.babel)
-    ]
+      babel(baseConfig.plugins.babel),
+    ],
   }
   buildFormats.push(umdConfig)
 }
@@ -155,7 +161,7 @@ if (!argv.format || argv.format === 'iife') {
       format: 'iife',
       name: 'VueVisjs',
       exports: 'auto',
-      globals
+      globals,
     },
     plugins: [
       replace(baseConfig.plugins.replace),
@@ -165,10 +171,10 @@ if (!argv.format || argv.format === 'iife') {
       babel(baseConfig.plugins.babel),
       terser({
         output: {
-          ecma: 5
-        }
-      })
-    ]
+          ecma: 5,
+        },
+      }),
+    ],
   }
   buildFormats.push(unpkgConfig)
 }

diff --git a/examples/.editorconfig b/examples/.editorconfig
diff --git a/examples/.eslintignore b/examples/.eslintignore
diff --git a/examples/.eslintrc.js b/examples/.eslintrc.js
diff --git a/examples/.prettierignore b/examples/.prettierignore
diff --git a/examples/README.md b/examples/README.md
diff --git a/examples/babel.config.js b/examples/babel.config.js