visjs · yotamberk · Jan 31, 2020 · Jan 27, 2020 · Jan 28, 2020 · Jan 28, 2020
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -50,6 +50,10 @@ jobs:
           root: .
           paths:
             - 'dist'
+            - 'esnext'
+            - 'peer'
+            - 'standalone'
+            - 'styles'
 
   examples:
     executor: node
@@ -113,7 +117,7 @@ jobs:
       - run:
           name: Publish GitHub Pages
           command: |
-            npx gh-pages --dist . --message "chore: update to $(git rev-parse HEAD) [ci skip]" --repo "$(node -e 'process.stdout.write(require("./package.json").repository.url)')" --src '{{coverage,dist,docs,examples}/**/*,LICENSE*,*.{html,md}}'
+            npx gh-pages --dist . --message "chore: update to $(git rev-parse HEAD) [ci skip]" --repo "$(node -e 'process.stdout.write(require("./package.json").repository.url)')" --src '{{coverage,dist,docs,esnext,examples,peer,standalone,styles,types}/**/*,LICENSE*,*.{html,md}}'
 
   release:
     executor: node

diff --git a/.gitignore b/.gitignore
@@ -14,12 +14,16 @@ npm-debug.log
 .*.sw[op]
 .commits.tmp
 .nyc_output/
+/coverage/
+/dist/
+/esnext/
 /examples/graph2d-generated/
 /examples/graph2d/examples.css
 /examples/graph2d/index.html
 /examples/timeline-generated/
 /examples/timeline/examples.css
 /examples/timeline/index.html
-coverage/
-dist/
-gen/
+/gen/
+/peer/
+/standalone/
+/styles/
diff --git a/README.md b/README.md
@@ -27,11 +27,11 @@ of the project.
 <!doctype html>
 <html>
 <head>
-  <title>Network</title>
-  <script type="text/javascript" src="//unpkg.com/vis-timeline@latest/dist/vis-timeline-graph2d.min.js"></script>
-  <link href="//unpkg.com/vis-timeline@latest/dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+  <title>Timeline</title>
+  <script type="text/javascript" src="//unpkg.com/vis-timeline@latest/standalone/umd/vis-timeline-graph2d.min.js"></script>
+  <link href="//unpkg.com/vis-timeline@latest/styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
   <style type="text/css">
-    #mynetwork {
+    #visualization {
       width: 600px;
       height: 400px;
       border: 1px solid lightgray;
@@ -64,6 +64,80 @@ of the project.
 </html>
 ```
 
+## Builds
+
+There are four builds provided at the moment.
+
+### Standalone build
+
+```html
+<script
+  type="text/javascript"
+  src="https://unpkg.com/vis-timeline@latest/standalone/umd/vis-timeline-graph2d.min.js"
+></script>
+```
+
+```javascript
+import { Timeline } from "vis-timeline/standalone";
+```
+
+This has no dependencies and therefore is great for things like MWEs but has
+more issues with interoperability and bundle bloat. For more information see the
+following (example)[https://visjs.github.io/vis-timeline/examples/timeline/standalone-build.html].
+
+### Peer build
+
+```html
+<script
+  type="text/javascript"
+  src="https://unpkg.com/vis-timeline@latest/peer/umd/vis-timeline-graph2d.min.js"
+></script>
+```
+
+```javascript
+import { Timeline } from "vis-timeline/peer";
+```
+
+For this build to work you have to load Vis Data and Moment (including locales
+except English) packages yourself. The advantage here is that it works well with
+other packages. For more information see the following
+(example)[https://visjs.github.io/vis-timeline/examples/timeline/peer-build.html].
+
+### ESNext build
+
+```html
+<script
+  type="text/javascript"
+  src="https://unpkg.com/vis-timeline@latest/esnext/umd/vis-timeline-graph2d.min.js"
+></script>
+```
+
+```javascript
+import { Timeline } from "vis-timeline/esnext";
+```
+
+This is the same as the peer build but without any bundled dependencies or
+pollyfills. It's indented to be used with bundlers like Rollup or Webpack which
+will fetch the dependencies, prevent duplicate dependencies in the bundle, use
+transpilers to add necessary polyfills etc.
+
+### Legacy build
+
+```html
+<script
+  type="text/javascript"
+  src="https://unpkg.com/vis-timeline@latest/dist/vis-timeline-graph2d.min.js"
+></script>
+```
+
+```javascript
+import { Timeline } from "vis-timeline";
+```
+
+This is solely kept for backwards compatibility. It is deprecated and will be
+removed in case of URLs and replaced by the peer build in case of
+Node.js/bundlers. Don't use this, please.
+
 ## Build
 
 To build the library from source, clone the project from github

diff --git a/dev-lib/bundle-esm.js b/dev-lib/bundle-esm.js
@@ -0,0 +1 @@
+export * from "./esm";
diff --git a/dev-lib/bundle-index.js b/dev-lib/bundle-index.js
@@ -0,0 +1 @@
+export * from "./vis-timeline-graph2d";
diff --git a/examples/graph2d/01_basic.html b/examples/graph2d/01_basic.html
@@ -12,8 +12,8 @@
     }
   </style>
 
-  <script src="../../dist/vis-timeline-graph2d.min.js"></script>
-  <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+  <script src="../../standalone/umd/vis-timeline-graph2d.min.js"></script>
+  <link href="../../styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <h2>Graph2d | Basic Example</h2>

diff --git a/examples/graph2d/02_bars.html b/examples/graph2d/02_bars.html
@@ -9,8 +9,8 @@
         }
     </style>
 
-    <script src="../../dist/vis-timeline-graph2d.min.js"></script>
-    <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+    <script src="../../standalone/umd/vis-timeline-graph2d.min.js"></script>
+    <link href="../../styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <h2>Graph2d | Bar Graph Example</h2>
@@ -54,4 +54,4 @@ <h2>Graph2d | Bar Graph Example</h2>
 
 </script>
 </body>
-</html>
+</html>
diff --git a/examples/graph2d/03_groups.html b/examples/graph2d/03_groups.html
@@ -10,8 +10,8 @@
     }
   </style>
 
-  <script src="../../dist/vis-timeline-graph2d.min.js"></script>
-  <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+  <script src="../../standalone/umd/vis-timeline-graph2d.min.js"></script>
+  <link href="../../styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <h2>Graph2d | Groups Example</h2>

diff --git a/examples/graph2d/04_rightAxis.html b/examples/graph2d/04_rightAxis.html
@@ -23,8 +23,8 @@
         }
     </style>
 
-    <script src="../../dist/vis-timeline-graph2d.min.js"></script>
-    <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+    <script src="../../standalone/umd/vis-timeline-graph2d.min.js"></script>
+    <link href="../../styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <h2>Graph2d | Right Axis Example</h2>
@@ -123,4 +123,4 @@ <h2>Graph2d | Right Axis Example</h2>
 
 </script>
 </body>
-</html>
+</html>
diff --git a/examples/graph2d/05_bothAxis.html b/examples/graph2d/05_bothAxis.html
@@ -2,8 +2,8 @@
 <html>
 <head>
     <title>Graph2d | Both Axis Example</title>
-    <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
-    <script src="../../dist/vis-timeline-graph2d.min.js"></script>
+    <link href="../../styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+    <script src="../../standalone/umd/vis-timeline-graph2d.min.js"></script>
 
     <style type="text/css">
         body, html {
@@ -134,4 +134,4 @@ <h2>Graph2d | Both Axis Example</h2>
 
 </script>
 </body>
-</html>
+</html>
diff --git a/examples/graph2d/06_interpolation.html b/examples/graph2d/06_interpolation.html
@@ -2,14 +2,14 @@
 <html>
 <head>
     <title>Graph2d | Interpolation</title>
-    <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+    <link href="../../styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
     <style type="text/css">
         body, html {
             font-family: sans-serif;
         }
     </style>
 
-    <script src="../../dist/vis-timeline-graph2d.min.js"></script>
+    <script src="../../standalone/umd/vis-timeline-graph2d.min.js"></script>
 
 </head>
 <body>
@@ -98,4 +98,4 @@ <h2>Graph2d | Interpolation</h2>
 
 </script>
 </body>
-</html>
+</html>
diff --git a/examples/graph2d/07_scrollingAndSorting.html b/examples/graph2d/07_scrollingAndSorting.html
@@ -9,8 +9,8 @@
     }
   </style>
 
-  <script src="../../dist/vis-timeline-graph2d.min.js"></script>
-  <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+  <script src="../../standalone/umd/vis-timeline-graph2d.min.js"></script>
+  <link href="../../styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <h2>Graph2d | Scrolling and Sorting</h2>
@@ -71,4 +71,4 @@ <h2>Graph2d | Scrolling and Sorting</h2>
 
 </script>
 </body>
-</html>
+</html>
diff --git a/examples/graph2d/08_performance.html b/examples/graph2d/08_performance.html
@@ -17,8 +17,8 @@
     <!-- note: moment.js must be loaded before vis-timeline-graph2d or the embedded version of moment.js is used -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
 
-    <script src="../../dist/vis-timeline-graph2d.min.js"></script>
-    <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+    <script src="../../standalone/umd/vis-timeline-graph2d.min.js"></script>
+    <link href="../../styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <h2>Graph2d | Performance</h2>

diff --git a/examples/graph2d/09_external_legend.html b/examples/graph2d/09_external_legend.html
@@ -2,7 +2,7 @@
 <html>
 <head>
   <title>Graph2d | External legend Example</title>
-  <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+  <link href="../../styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
   <style type="text/css">
     body, html {
       font-family: sans-serif;
@@ -188,7 +188,7 @@
     }
   </style>
 
-  <script src="../../dist/vis-timeline-graph2d.min.js"></script>
+  <script src="../../standalone/umd/vis-timeline-graph2d.min.js"></script>
 
   </head>
 <body>

diff --git a/examples/graph2d/10_barsSideBySide.html b/examples/graph2d/10_barsSideBySide.html
@@ -9,8 +9,8 @@
         }
     </style>
 
-    <script src="../../dist/vis-timeline-graph2d.min.js"></script>
-    <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+    <script src="../../standalone/umd/vis-timeline-graph2d.min.js"></script>
+    <link href="../../styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <h2>Graph2d | Bar Graphs Side by Side Example</h2>
@@ -72,4 +72,4 @@ <h2>Graph2d | Bar Graphs Side by Side Example</h2>
 
 </script>
 </body>
-</html>
+</html>
diff --git a/examples/graph2d/11_barsSideBySideGroups.html b/examples/graph2d/11_barsSideBySideGroups.html
@@ -9,8 +9,8 @@
         }
     </style>
 
-    <script src="../../dist/vis-timeline-graph2d.min.js"></script>
-    <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+    <script src="../../standalone/umd/vis-timeline-graph2d.min.js"></script>
+    <link href="../../styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <h2>Graph2d | Bar Graphs Side by Side Example with Groups</h2>
@@ -85,4 +85,4 @@ <h2>Graph2d | Bar Graphs Side by Side Example with Groups</h2>
 
 </script>
 </body>
-</html>
+</html>
diff --git a/examples/graph2d/12_customRange.html b/examples/graph2d/12_customRange.html
@@ -9,8 +9,8 @@
         }
     </style>
 
-    <script src="../../dist/vis-timeline-graph2d.min.js"></script>
-    <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+    <script src="../../standalone/umd/vis-timeline-graph2d.min.js"></script>
+    <link href="../../styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <h2>Graph2d | Custom axis range</h2>
@@ -89,4 +89,4 @@ <h2>Graph2d | Custom axis range</h2>
 
 </script>
 </body>
-</html>
+</html>
diff --git a/examples/graph2d/13_localization.html b/examples/graph2d/13_localization.html
@@ -13,8 +13,8 @@
     }
   </style>
 
-  <script src="../../dist/vis-timeline-graph2d.min.js"></script>
-  <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+  <script src="../../standalone/umd/vis-timeline-graph2d.min.js"></script>
+  <link href="../../styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <h2>Graph2d | Localization</h2>

diff --git a/examples/graph2d/14_toggleGroups.html b/examples/graph2d/14_toggleGroups.html
@@ -18,8 +18,8 @@
       }
   </style>
 
-  <script src="../../dist/vis-timeline-graph2d.min.js"></script>
-  <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+  <script src="../../standalone/umd/vis-timeline-graph2d.min.js"></script>
+  <link href="../../styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <h2>Graph2d | Groups Example</h2>

diff --git a/examples/graph2d/15_streaming_data.html b/examples/graph2d/15_streaming_data.html
@@ -12,8 +12,8 @@
     }
   </style>
 
-  <script src="../../dist/vis-timeline-graph2d.min.js"></script>
-  <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+  <script src="../../standalone/umd/vis-timeline-graph2d.min.js"></script>
+  <link href="../../styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <h2>Graph2d | Streaming data</h2>
@@ -119,4 +119,4 @@ <h2>Graph2d | Streaming data</h2>
   addDataPoint();
 </script>
 </body>
-</html>
+</html>
diff --git a/examples/graph2d/16_bothAxisTitles.html b/examples/graph2d/16_bothAxisTitles.html
@@ -2,8 +2,8 @@
 <html>
 <head>
     <title>Graph2d | Axis Titles and Styling</title>
-    <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
-    <script src="../../dist/vis-timeline-graph2d.min.js"></script>
+    <link href="../../styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+    <script src="../../standalone/umd/vis-timeline-graph2d.min.js"></script>
 
     <style type="text/css">
         body, html {
@@ -198,4 +198,4 @@ <h2>Graph2d | Axis Titles and Styling</h2>
 
 </script>
 </body>
-</html>
+</html>