feat(build): add standalone and peer builds (#85)

* feat(build): add standalone and peer builds * chore(dist): update * style: reformat new files * fix(build): update to core-js 3 Also ditches rollup-plugin-babel-minify in favor of directly configuring babel plugin as the former doesn't work with core-js 3. * fix(build): make it actually work without errors * chore(dist): update * chore(package): fix clean script It missed all the new vis-network.* files. Now it deletes them. * fix(build): use folder structure instead of big mess * chore(types): remove useless d.ts file I have no idea why I put it there, it's not imported from anywhere. * fix(build): fix image copying and watch * chore(examples): use standalone build * chore(examples): add standalone/peer build examples * fix(build): get rid of default import from util Every UMD package overwrites the default and breaks everything. This will work as long as no two packages use the same name for one of their exports (seems to be the case right now). * fix(build): don't reexport data and util from peer DataSet, utils etc. can't be reexported because that would cause stack overflow in UMD builds. They all export vis namespace therefore reexporting leads to loading vis to load vis to load vis… * chore(dist): update * fix(build): update d.ts files for recent changes * chore(examples): fix script and style paths * style: reformat * chore(examples): add code examples to basic usage * chore(examples): add new builds examples to the index * chore(examples): add legacy build example * chore(examples): fix URL errors * docs: update how to * docs: fix typo * fix(build): don't capitalize nonconstructor objects * docs: update Gephi and DOT exports * chore(dist): update * chore(build): transpile dependencies This ensures that all dependencies match our browser list. * chore(dist): update * chore(build): don't ignore declarations * chore(dist): update * chore(build): use concat instead of flatMap This greatly increases compatibility as Array.prototype.flatMap is quite new and only recently supported by Node. * chore(build): add styles to files * chore(scripts): clean all generated files
visjs · Oct 27, 2019 · 4e0d998 · 4e0d998
1 parent 12b15e1
commit 4e0d998
Show file tree

Hide file tree

Showing 217 changed files with 4,520 additions and 25,536 deletions.
diff --git a/.babelrc b/.babelrc
@@ -3,16 +3,17 @@
  [
  "@babel/preset-env",
  {
- "targets": "> 0.1% or not dead"
+ "targets": "> 0.1% or not dead",
+ "useBuiltIns": "usage",
+ "corejs": 3
  }
  ],
  "@babel/preset-typescript"
  ],
  "plugins": [
  "css-modules-transform",
  "@babel/proposal-class-properties",
- "@babel/proposal-object-rest-spread",
- "@babel/plugin-transform-runtime"
+ "@babel/proposal-object-rest-spread"
  ],
  "env": {
  "test": {

diff --git a/.eslintrc.js b/.eslintrc.js
@@ -103,8 +103,6 @@ module.exports = {
  },
  {
  files: [
- "lib/index-bundle.ts",
- "lib/index.ts",
  "lib/network/gephiParser.ts",
  "test/NodesHandler.test.ts",
  "test/dot-parser/dot-parser.test.ts",

diff --git a/.gitignore b/.gitignore
@@ -17,5 +17,12 @@ gen/
 .nyc_output/
 coverage/
 .rpt2_cache
-vis-network-*.tgz
+
+# built files
+/declarations/
 /dist/
+/examples/index.html
+/examples/thumbnails/
+/peer/
+/standalone/
+vis-network-*.tgz
diff --git a/README.md b/README.md
@@ -18,7 +18,7 @@ Install via npm:
 
 ## Example
 
-A basic example on loading a Timeline is shown below. More examples can be
+A basic example on loading a Network is shown below. More examples can be
 found in the [examples directory](https://github.com/visjs/vis-network/tree/master/examples/)
 of the project.
 
@@ -27,8 +27,7 @@ of the project.
 <html>
 <head>
  <title>Network</title>
- <script type="text/javascript" src="https://unpkg.com/vis-network@latest/dist/vis-network.min.js"></script>
- <link href="https://unpkg.com/vis-network@latest/dist/vis-network.min.css" rel="stylesheet" type="text/css" />
+ <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
  <style type="text/css">
  #mynetwork {
  width: 600px;

diff --git a/dev-lib/bundle-peer.d.ts b/dev-lib/bundle-peer.d.ts
@@ -0,0 +1 @@
+export * from '../../declarations/index-peer'
diff --git a/dev-lib/bundle-standalone.d.ts b/dev-lib/bundle-standalone.d.ts
@@ -0,0 +1 @@
+export * from '../../declarations/index-standalone'
diff --git a/lib/header.js → dev-lib/header.js b/lib/header.js → dev-lib/header.js
diff --git a/docs/network/index.html b/docs/network/index.html
@@ -125,8 +125,14 @@ <h1>Network</h1>
  <h3>Creating a Network</h3>
 
  <p>
- Creating a vis network is easy. <a href="http://visjs.org/#download_install" target="_blank">It requires you to
- include the vis.js and css files which you can get here</a>. If you have these
+ Creating a Vis Network is easy. It requires you to include the
+ vis-network.js and vis-network.css files which you can download from
+ <a href="https://visjs.org/#download_install" target="_blank">visjs.org</a>,
+ link them from
+ <a href="https://unpkg.com/vis-network/" target="_blank">unpkg.com</a>
+ or require/import from
+ <a href="https://www.npmjs.com/package/vis-network" target="_blank">npm package</a>.
+ If you have these
  added to your application, you will need to specify your nodes and edges. You can use DOT language or export
  nodes and edges from Gephi if you'd like but we will do it without these for now.
  For more information on this click the tabs below. You can also use the vis.DataSets for dynamic data binding,
@@ -136,11 +142,63 @@ <h3>Creating a Network</h3>
  can use an options object to customize many aspects of the network. In code this
  looks like this:</p>
 
+ <p>
+ There are three ways how to import Vis Network:
+ <ul>
+ <li>
+ Standalone build:
+ <ul>
+ <li>simple to use (link/require/import a single file),</li>
+ <li>CSS included and automatically injected into the page,</li>
+ <li>JavaScript dependencies bundled,</li>
+ <li>doesn't work with other Vis family packages,</li>
+ <li>
+ <a href="../../examples/network/basic_usage/standalone.html" target="_blank">example usage</a>,
+ </li>
+ <li>
+ <a href="https://unpkg.com/vis-network/standalone/" target="_blank">linkable files on unpkg</a>.
+ </li>
+ </ul>
+ </li>
+ <li>
+ Peer build:
+ <ul>
+ <li>in case of UMD Vis Data nad Vis Util have to be loaded manually,</li>
+ <li>in case of ESM DataSets, DataViews etc. have to be loaded from Vis Data,</li>
+ <li>CSS has to be included sepparately,</li>
+ <li>works with other Vis family packages,</li>
+ <li>
+ <a href="../../examples/network/basic_usage/peer.html" target="_blank">example usage</a>,
+ </li>
+ <li>
+ <a href="https://unpkg.com/vis-network/peer/" target="_blank">linkable files on unpkg</a>.
+ </li>
+ </ul>
+ </li>
+ <li>
+ Legacy build:
+ <ul>
+ <li>kept only for backward compatibility, please <strong>don't</strong> use,</li>
+ <li>contains Moment which is not used by Vis Network (aka bloatware),</li>
+ <li>CSS has to be included sepparately,</li>
+ <li>JavaScript dependencies bundled,</li>
+ <li>doesn't play well with tree shaking,</li>
+ <li>doesn't work with other Vis family packages,</li>
+ <li>
+ <a href="../../examples/network/basic_usage/legacy.html" target="_blank">example usage</a>,
+ </li>
+ <li>
+ <a href="https://unpkg.com/vis-network/dist/" target="_blank">linkable files on unpkg</a>.
+ </li>
+ </ul>
+ </li>
+ </p>
+
+ <h4>Simplest example (using standalone build)</h4>
  <pre class="prettyprint lang-html options">
 &lt;html&gt;
 &lt;head&gt;
- &lt;script type="text/javascript" src="../../dist/vis.js"&gt;&lt;/script&gt;
- &lt;link href="../../dist/vis.css" rel="stylesheet" type="text/css" /&gt;
+ &lt;script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"&gt;&lt;/script&gt;
 
  &lt;style type="text/css"&gt;
  #mynetwork {
@@ -1597,7 +1655,7 @@ <h3 id="importGephi">Import data from Gephi</h3>
 
 // parse the gephi file to receive an object
 // containing nodes and edges in vis format.
-var parsed = vis.network.convertGephi(gephiJSON, parserOptions);
+var parsed = vis.parseGephiNetwork(gephiJSON, parserOptions);
 
 // provide data in the normal fashion
 var data = {
@@ -1650,7 +1708,7 @@ <h3 id="importDot">Import data in DOT language</h3>
  <p>
  Network supports data in the
  <a href="http://en.wikipedia.org/wiki/DOT_language" target="_blank">DOT language</a>.
- To use data in the DOT language, you can use the vis.network.convertDot converter to transform the DOT
+ To use data in the DOT language, you can use the vis.convertDOTNetwork converter to transform the DOT
  language
  into a vis.Network compatible nodes, edges and options objects. You can extend the options object with other
  options if you'd like.
@@ -1663,7 +1721,7 @@ <h3 id="importDot">Import data in DOT language</h3>
 <pre class="prettyprint lang-js">
 // provide data in the DOT language
 var DOTstring = 'dinetwork {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }';
-var parsedData = vis.network.convertDot(DOTstring);
+var parsedData = vis.convertDOTNetwork(DOTstring);
 
 var data = {
  nodes: parsedData.nodes,