build: fix rollup setup

alexcode · alexcode · commit 84189d997024 · 2020-04-13T14:36:05.000+02:00
Let Rollup do tree-shaking to minimize needed deps and reduce codesize.
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "serve:graph2d": "lerna run serve --stream --scope @vue2vis/graph2d",
     "serve:network": "lerna run serve --stream --scope @vue2vis/network",
     "serve:timeline": "lerna run serve --stream --scope @vue2vis/timeline",
-    "clean": "lerna exec -- rm -rf ./node_modules",
+    "clean": "lerna exec -- rm -rf ./node_modules ./dist && rm -R ./node_modules",
     "commit": "yarn git-cz",
     "prepare": "lerna run prepare",
     "lerna:publish": "lerna publish --conventional-commits",
@@ -68,6 +68,7 @@
     "eslint-plugin-vue": "^6.1.2",
     "husky": "^4.2.3",
     "lerna": "^3.20.2",
+    "moment": "^2.24.0",
     "prettier": "^1.19.1",
     "rollup": "^2.0.6",
     "rollup-plugin-vue": "^5.1.6",
diff --git a/packages/graph2d/README.md b/packages/graph2d/README.md
@@ -79,6 +79,8 @@ new Vue({
 });
 ```
 
+Additional info can be found on [Visjs Graph2d documentation](https://visjs.github.io/vis-timeline/docs/graph2d/)
+
 Here is a basic working demo with item generation:
 [JS Fiddle Basic Demo](https://jsfiddle.net/alexkodo/ejdut8fm/)
 
@@ -89,7 +91,7 @@ You can also create items or group labels as Vue Components:
 
 ### Component Events
 
-By default all Vis events are emitted by your component. You can subscribe to a subset by passing an array in the prop `events` [Visjs event](http://visjs.org/docs/graph2d/#Events).
+By default all Vis events are emitted by your component. You can subscribe to a subset by passing an array in the prop `events` [Visjs event](https://visjs.github.io/vis-timeline/docs/graph2d/#Events).
 
 ```html
 <body>
diff --git a/packages/graph2d/examples/App.vue b/packages/graph2d/examples/App.vue
@@ -35,6 +35,7 @@
 
 <script>
 import { Graph2d } from "@vue2vis/graph2d";
+import "vis-timeline/styles/vis-timeline-graph2d.css";
 
 export default {
   components: {
diff --git a/packages/graph2d/lib/Graph2d.vue b/packages/graph2d/lib/Graph2d.vue
@@ -6,7 +6,6 @@
 import { DataSet, DataView } from "vis-data/esnext";
 import { Graph2d } from "vis-timeline/esnext";
 import { mountVisData, translateEvent } from "@vue2vis/utils";
-import "vis-timeline/styles/vis-timeline-graph2d.css";
 
 export default {
   name: "graph2d",
diff --git a/packages/graph2d/package.json b/packages/graph2d/package.json
@@ -31,18 +31,22 @@
   },
   "dependencies": {
     "@vue2vis/utils": "^1.0.0",
-    "vis-timeline": "^7.2.1"
+    "vis-timeline": "^7.3.4"
   },
   "peerDependencies": {
     "moment": "^2.24.0",
-    "vis-data": "^6.3.0"
+    "vis-data": "^6.5.1"
   },
   "devDependencies": {
     "@egjs/hammerjs": "^2.0.0",
+    "@rollup/plugin-commonjs": "^11.0.2",
+    "@rollup/plugin-node-resolve": "^7.1.1",
     "component-emitter": "^1.3.0",
     "keycharm": "^0.3.0",
-    "moment": "^2.24.0",
     "propagating-hammerjs": "^1.4.0",
-    "uuid": "^3.4.0"
+    "rollup-plugin-node-externals": "^2.1.5",
+    "rollup-plugin-node-polyfills": "^0.2.1",
+    "uuid": "^7.0.0",
+    "vis-util": "^4.0.0"
   }
 }
diff --git a/packages/graph2d/rollup.config.js b/packages/graph2d/rollup.config.js
@@ -1,3 +1,7 @@
+import externals from "rollup-plugin-node-externals";
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import nodePolyfills from "rollup-plugin-node-polyfills";
 import vue from "rollup-plugin-vue";
 
 export default [
@@ -7,14 +11,34 @@ export default [
       format: "esm",
       file: "dist/graph2d.esm.js"
     },
-    plugins: [vue()]
+    plugins: [
+      externals(),
+      nodePolyfills(),
+      resolve({ browser: true }),
+      commonjs({
+        namedExports: {
+          uuid: ["v4"]
+        }
+      }),
+      vue()
+    ]
   },
   {
     input: "./lib/index.js",
     output: {
       format: "cjs",
       file: "dist/graph2d.cjs.js"
     },
-    plugins: [vue()]
+    plugins: [
+      externals(),
+      nodePolyfills(),
+      resolve({ browser: true }),
+      commonjs({
+        namedExports: {
+          uuid: ["v4"]
+        }
+      }),
+      vue()
+    ]
   }
 ];
diff --git a/packages/graph2d/yarn.lock b/packages/graph2d/yarn.lock
diff --git a/packages/network/README.md b/packages/network/README.md
@@ -77,6 +77,8 @@ new Vue({
 });
 ```
 
+Additional info can be found on [Visjs Network documentation](https://visjs.github.io/vis-network/docs/network/)
+
 Here is a basic working demo with item generation:
 [JS Fiddle Basic Demo](https://jsfiddle.net/alexkodo/ejdut8fm/)
 
@@ -87,7 +89,7 @@ You can also create items or group labels as Vue Components:
 
 ### Component Events
 
-By default all Vis events are emitted by your component. You can subscribe to a subset by passing an array in the prop `events` [Visjs event](http://visjs.org/docs/network/#Events).
+By default all Vis events are emitted by your component. You can subscribe to a subset by passing an array in the prop `events` [Visjs event](https://visjs.github.io/vis-network/docs/timeline/#Events).
 
 ```html
 <body>
diff --git a/packages/network/lib/Network.vue b/packages/network/lib/Network.vue
@@ -6,7 +6,6 @@
 import { DataSet, DataView } from "vis-data/esnext";
 import { Network } from "vis-network/esnext";
 import { mountVisData, translateEvent } from "@vue2vis/utils";
-import "vis-network/styles/vis-network.css";
 
 export default {
   name: "network",
diff --git a/packages/network/package.json b/packages/network/package.json
@@ -35,14 +35,18 @@
   },
   "peerDependencies": {
     "moment": "^2.24.0",
-    "vis-data": "^6.5.0"
+    "vis-data": "^6.5.1"
   },
   "devDependencies": {
     "@egjs/hammerjs": "^2.0.0",
+    "@rollup/plugin-commonjs": "^11.0.2",
+    "@rollup/plugin-node-resolve": "^7.1.1",
     "component-emitter": "^1.3.0",
     "keycharm": "^0.3.0",
-    "moment": "^2.24.0",
+    "rollup-plugin-node-externals": "^2.1.5",
+    "rollup-plugin-node-polyfills": "^0.2.1",
     "timsort": "^0.3.0",
-    "uuid": "^7.0.0"
+    "uuid": "^7.0.0",
+    "vis-util": "^4.0.0"
   }
 }
diff --git a/packages/network/rollup.config.js b/packages/network/rollup.config.js
@@ -1,3 +1,7 @@
+import externals from "rollup-plugin-node-externals";
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import nodePolyfills from "rollup-plugin-node-polyfills";
 import vue from "rollup-plugin-vue";
 
 export default [
@@ -7,14 +11,34 @@ export default [
       format: "esm",
       file: "dist/network.esm.js"
     },
-    plugins: [vue()]
+    plugins: [
+      externals(),
+      nodePolyfills(),
+      resolve({ browser: true }),
+      commonjs({
+        namedExports: {
+          timsort: ["sort"]
+        }
+      }),
+      vue()
+    ]
   },
   {
     input: "./lib/index.js",
     output: {
       format: "cjs",
       file: "dist/network.cjs.js"
     },
-    plugins: [vue()]
+    plugins: [
+      externals(),
+      nodePolyfills(),
+      resolve({ browser: true }),
+      commonjs({
+        namedExports: {
+          timsort: ["sort"]
+        }
+      }),
+      vue()
+    ]
   }
 ];
diff --git a/packages/network/yarn.lock b/packages/network/yarn.lock
diff --git a/packages/timeline/README.md b/packages/timeline/README.md
@@ -80,6 +80,8 @@ new Vue({
 });
 ```
 
+Additional info can be found on [Visjs Timeline documentation](https://visjs.github.io/vis-timeline/docs/timeline/)
+
 Here is a basic working demo with item generation:
 [JS Fiddle Basic Demo](https://jsfiddle.net/alexkodo/ejdut8fm/)
 
@@ -90,7 +92,7 @@ You can also create items or group labels as Vue Components:
 
 ### Component Events
 
-By default all Vis events are emitted by your component. You can subscribe to a subset by passing an array in the prop `events` [Visjs event](http://visjs.org/docs/timeline/#Events).
+By default all Vis events are emitted by your component. You can subscribe to a subset by passing an array in the prop `events` [Visjs event](https://visjs.github.io/vis-timeline/docs/timeline/#Events).
 
 ```html
 <body>
diff --git a/packages/timeline/examples/App.vue b/packages/timeline/examples/App.vue
@@ -83,6 +83,7 @@
 
 <script>
 import { Timeline } from "@vue2vis/timeline";
+import "vis-timeline/styles/vis-timeline-graph2d.css";
 
 export default {
   components: {
diff --git a/packages/timeline/lib/Timeline.vue b/packages/timeline/lib/Timeline.vue
@@ -6,7 +6,6 @@
 import { DataSet, DataView } from "vis-data/esnext";
 import { Timeline } from "vis-timeline/esnext";
 import { mountVisData, translateEvent } from "@vue2vis/utils";
-import "vis-timeline/styles/vis-timeline-graph2d.css";
 
 export default {
   name: "timeline",
diff --git a/packages/timeline/package.json b/packages/timeline/package.json
@@ -38,18 +38,22 @@
   ],
   "dependencies": {
     "@vue2vis/utils": "^1.0.0",
-    "vis-timeline": "^7.2.1"
+    "vis-timeline": "^7.3.4"
   },
   "peerDependencies": {
     "moment": "^2.24.0",
-    "vis-data": "^6.5.0"
+    "vis-data": "^6.5.1"
   },
   "devDependencies": {
     "@egjs/hammerjs": "^2.0.0",
+    "@rollup/plugin-commonjs": "^11.0.2",
+    "@rollup/plugin-node-resolve": "^7.1.1",
     "component-emitter": "^1.3.0",
     "keycharm": "^0.3.0",
-    "moment": "^2.24.0",
     "propagating-hammerjs": "^1.4.0",
-    "uuid": "^3.4.0"
+    "rollup-plugin-node-externals": "^2.1.5",
+    "rollup-plugin-node-polyfills": "^0.2.1",
+    "uuid": "^7.0.0",
+    "vis-util": "^4.0.0"
   }
 }
diff --git a/packages/timeline/rollup.config.js b/packages/timeline/rollup.config.js
@@ -1,3 +1,7 @@
+import externals from "rollup-plugin-node-externals";
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import nodePolyfills from "rollup-plugin-node-polyfills";
 import vue from "rollup-plugin-vue";
 
 export default [
@@ -7,14 +11,34 @@ export default [
       format: "esm",
       file: "dist/timeline.esm.js"
     },
-    plugins: [vue()]
+    plugins: [
+      externals(),
+      nodePolyfills(),
+      resolve({ browser: true }),
+      commonjs({
+        namedExports: {
+          uuid: ["v4"]
+        }
+      }),
+      vue()
+    ]
   },
   {
     input: "./lib/index.js",
     output: {
       format: "cjs",
       file: "dist/timeline.cjs.js"
     },
-    plugins: [vue()]
+    plugins: [
+      externals(),
+      nodePolyfills(),
+      resolve({ browser: true }),
+      commonjs({
+        namedExports: {
+          uuid: ["v4"]
+        }
+      }),
+      vue()
+    ]
   }
 ];
diff --git a/packages/timeline/yarn.lock b/packages/timeline/yarn.lock
diff --git a/packages/utils/package.json b/packages/utils/package.json
diff --git a/packages/utils/rollup.config.js b/packages/utils/rollup.config.js
diff --git a/packages/utils/yarn.lock b/packages/utils/yarn.lock
diff --git a/yarn.lock b/yarn.lock
