refactor(bundle): create separate plugins bundle closes #15

dist/plugins/index.css

@@ -0,0 +1,189 @@
+.react-flow {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.react-flow__renderer {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+.react-flow__zoompane {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+.react-flow__selectionpane {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+}
+
+.react-flow__selection {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: rgba(0, 89, 220, 0.08);
+  border: 1px dotted rgba(0, 89, 220, 0.8);
+}
+
+.react-flow__edges {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  z-index: 2;
+}
+
+.react-flow__edge {
+  fill: none;
+  stroke: #bbb;
+  stroke-width: 2;
+  pointer-events: all;
+}
+
+.react-flow__edge.selected {
+    stroke: #555;
+  }
+
+.react-flow__edge.animated {
+    stroke-dasharray: 5;
+    -webkit-animation: dashdraw 0.5s linear infinite;
+            animation: dashdraw 0.5s linear infinite;
+  }
+
+.react-flow__edge.connection {
+    stroke: '#ddd';
+    pointer-events: none;
+  }
+
+@-webkit-keyframes dashdraw {
+  from {stroke-dashoffset: 10}
+}
+
+@keyframes dashdraw {
+  from {stroke-dashoffset: 10}
+}
+
+.react-flow__nodes {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 3;
+  pointer-events: none;
+  transform-origin: 0 0;
+}
+
+.react-flow__node {
+  position: absolute;
+  color: #222;
+  font-family: sans-serif;
+  font-size: 12px;
+  text-align: center;
+  cursor: -webkit-grab;
+  cursor: grab;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  pointer-events: all;
+  transform-origin: 0 0;
+}
+
+.react-flow__node:hover > * {
+    box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);
+  }
+
+.react-flow__node.selected > * {
+    box-shadow: 0 0 0 2px #555;
+  }
+
+.react-flow__handle {
+  position: absolute;
+  width: 10px;
+  height: 8px;
+  background: rgba(255, 255, 255, 0.4);
+  cursor: crosshair;
+}
+
+.react-flow__handle.bottom {
+    top: auto;
+    left: 50%;
+    bottom: 0;
+    transform: translate(-50%, 0);
+  }
+
+.react-flow__handle.top {
+    left: 50%;
+    top: 0;
+    transform: translate(-50%, 0);
+  }
+
+.react-flow__handle.left {
+    top: 50%;
+    left: 0;
+    transform: translate(0, -50%);
+
+  }
+
+.react-flow__handle.right {
+    right: 0;
+    top: 50%;
+    transform: translate(0, -50%);
+  }
+
+.react-flow__nodesselection {
+  z-index: 3;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  transform-origin: left top;
+  pointer-events: none;
+}
+
+.react-flow__nodesselection-rect {
+    position: absolute;
+    background: rgba(0, 89, 220, 0.08);
+    border: 1px dotted rgba(0, 89, 220, 0.8);
+    pointer-events: all;
+  }
+
+.react-flow__controls {
+  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
+}
+
+.react-flow__controls-button {
+    background: #fefefe;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+    padding: 5px;
+  }
+
+.react-flow__controls-button img {
+      width: 100%;
+    }
+
+.react-flow__controls-button:hover {
+      background: #f4f4f4;
+    }

examples/advanced/scripts/ExampleGraph.js

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 
-import Graph, { isEdge, removeElements, addEdge, getOutgoers, MiniMap, Controls } from '../../../src';
+import Graph, { isEdge, removeElements, addEdge, getOutgoers } from '../../../src';
+import { MiniMap, Controls } from '../../../src/plugins';
 
 import SpecialNode from './SpecialNode';
 import InputNode from './InputNode';

package.json

@@ -1,7 +1,6 @@
 {
   "name": "react-flow",
   "version": "1.0.0",
-  "module": "dist/ReactFlow.esm.js",
   "browser": "dist/ReactFlow.min.js",
   "main": "dist/ReactFlow.min.js",
   "private": true,

rollup.config.js

@@ -10,15 +10,33 @@ import svg from 'rollup-plugin-svg';
 import pkg from './package.json';
 
 const isProd = process.env.NODE_ENV === 'production';
+const external = ['react', 'react-dom', 'prop-types'];
+const onwarn = (warning, rollupWarn) => {
+	if (warning.code !== 'CIRCULAR_DEPENDENCY') {
+		rollupWarn(warning);
+	}
+};
+const plugins = [
+	bundleSize(),
+	postcss({
+		extract: isProd
+	}),
+	resolve(),
+	babel({
+		exclude: 'node_modules/**'
+	}),
+	commonjs({
+		include: /node_modules/
+	}),
+	svg(),
+	visualizer(),
+	isProd && terser()
+];
 
 export default [{
 	input: 'src/index.js',
-	external: ['react', 'react-dom', 'prop-types'],
+	external: external,
-	onwarn(warning, rollupWarn) {
+	onwarn,
-		if (warning.code !== 'CIRCULAR_DEPENDENCY') {
-			rollupWarn(warning);
-		}
-	},
 	output: {
 		name: 'ReactFlow',
 		file: pkg.browser,
@@ -30,20 +48,21 @@ export default [{
 			'prop-types': 'PropTypes'
 		}
 	},
-	plugins: [
+	plugins
-		bundleSize(),
+}, {
-		postcss({
+	input: 'src/plugins/index.js',
-			extract: isProd
+	external: external,
-		}),
+	onwarn,
-		resolve(),
+	output: {
-		babel({
+		name: 'ReactFlow Plugins',
-			exclude: 'node_modules/**'
+		file: 'dist/plugins/index.js',
-		}),
+		format: 'umd',
-		commonjs({
+		sourcemap: isProd,
-			include: /node_modules/
+		globals: {
-		}),
+			react: 'React',
-		svg(),
+			'react-dom': 'ReactDOM',
-		visualizer(),
+			'prop-types': 'PropTypes'
-		isProd && terser()
+		}
-	]}
+	},
-];
+	plugins
+}];

src/index.js

@@ -3,7 +3,6 @@ import ReactFlow from './container/ReactFlow';
 export default ReactFlow;
 
 export { default as Handle } from './components/Handle';
-export { MiniMap, Controls } from './plugins';
 
 export {
   isNode,

src/utils/graph.js

@@ -182,14 +182,3 @@ export const zoomOut = () => {
   const state = store.getState();
   state.d3Zoom.scaleTo(state.d3Selection, state.transform[2] - 0.2);
 };
-
-export default {
-  isEdge,
-  getBoundingBox,
-  graphPosToZoomedPos,
-  getConnectedEdges,
-  parseElement,
-  fitView,
-  zoomIn,
-  zoomOut
-};