optimized bundle size, changed hover color

.eslintignore

@@ -1 +1 @@
-dist/index.js
+dist

d3.bundle.js

@@ -0,0 +1,11 @@
+export {
+  forceCollide,
+  forceLink,
+  forceManyBody,
+  forceSimulation,
+  select,
+  drag,
+  event,
+  nest,
+  zoom,
+} from 'd3';

package.json

@@ -22,7 +22,7 @@
   "scripts": {
     "parse": "node src/parser/index.js",
     "lint": "eslint .; sass-lint sass/* -v",
-    "build": "webpack -p",
+    "prepublish": "rollup -c && uglifyjs dist/d3.js -c -m -o dist/d3.min.js && webpack -p && rm dist/d3.min.js dist/d3.js",
     "test": "start-storybook -p 3000 -c .storybook"
   },
   "dependencies": {
@@ -48,6 +48,8 @@
     "http-server": "^0.9.0",
     "node-sass": "^4.5.0",
     "postcss-loader": "^2.0.5",
+    "rollup": "^0.43.0",
+    "rollup-plugin-node-resolve": "^3.0.0",
     "sass-lint": "^1.10.2",
     "sass-loader": "^6.0.5",
     "style-loader": "^0.17.0",

rollup.config.js

@@ -0,0 +1,9 @@
+import npm from 'rollup-plugin-node-resolve';
+
+export default {
+  entry: './d3.bundle.js',
+  format: 'umd',
+  moduleName: 'd3',
+  plugins: [npm({ jsnext: true })],
+  dest: './dist/d3.js',
+};

sass/main.sass

@@ -2,6 +2,8 @@ $grey100: #f5f5f5
 $grey500: #9e9e9e
 $grey800: #424242
 $grey900: #212121
+$orange700: #f57c00
+$white: #fff
 $shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)
 
 
@@ -28,11 +30,12 @@ body
   padding: 15px
   text-align: center
   text-decoration: none
-  transition: background-color .2s ease-out
+  transition: background-color .2s, color .2s ease-out
 
   &[href]
     &:hover
-      background-color: $grey500
+      background-color: $orange700
+      color: $white
       cursor: pointer
 
 .mindmap-node--editable

src/MindMap.jsx

@@ -1,4 +1,4 @@
-import React, { Component, PropTypes } from 'react';
+import { Component, PropTypes } from 'react';
 import {
   forceCollide,
   forceLink,

src/utils/d3.js

@@ -28,7 +28,7 @@ export const d3Connections = (svg, connections) => (
 export const d3Nodes = (svg, nodes) => (
   bindData(svg, nodes, 'foreignObject')
     .attr('class', 'mindmap-node')
-    .attr('id', node => node.text.replace(/^[ ./~\-:+]*\d*|[ ./~\-:+]/g, ''))
+    .attr('id', node => node.text.replace(/^[ ./~\-:+#]*\d*|[ ./~\-:+#]/g, ''))
     .attr('width', node => node.width + 4)
     .attr('height', node => node.height)
     .html(node => node.html)
@@ -42,7 +42,7 @@ export const d3Nodes = (svg, nodes) => (
 export const d3Subnodes = (svg, subnodes) => {
   // Nest subnodes by parent.
   const nestedSubs = nest()
-    .key(sub => sub.parent.replace(/^[ ./~\-:+]*\d*|[ ./~\-:+]/g, '')).entries(subnodes);
+    .key(sub => sub.parent.replace(/^[ ./~\-:+#]*\d*|[ ./~\-:+#]/g, '')).entries(subnodes);
 
   // Generate HTML and dimensions for each subnode group.
   nestedSubs.forEach((subGroup) => {

webpack.config.js

@@ -1,3 +1,5 @@
+const path = require('path');
+
 module.exports = {
   entry: './src/index.jsx',
 
@@ -28,6 +30,10 @@ module.exports = {
     ],
   },
 
+  resolve: {
+    alias: { 'd3': path.resolve(__dirname, 'dist/d3.min.js') },
+  },
+
   externals: {
     react: {
       root: 'React',
@@ -41,11 +47,5 @@ module.exports = {
       commonjs: 'react-dom',
       amd: 'react-dom',
     },
-    /*d3: {
-      root: 'd3',
-      commonjs2: 'd3',
-      commonjs: 'd3',
-      amd: 'd3',
-    },*/
   },
 };