chrisbateman · magicmark · Dec 18, 2017
diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
     "url": "[email protected]:chrisbateman/webpack-visualizer.git"
   },
   "scripts": {
-    "build": "npm run buildsite && npm run buildplugin",
+    "build": "npm run buildsite && npm run buildplugin && npm run buildComponent",
     "prebuildplugin": "rm -rf lib && mkdir lib",
     "buildplugin": "webpack src/plugin/main.jsx lib/pluginmain.js --config webpack.prod.js",
     "postbuildplugin": "babel src/plugin/plugin.js --out-file lib/plugin.js && cp src/shared/style.css lib",
@@ -23,7 +23,8 @@
     "dev": "webpack-dev-server --config webpack.dev.js",
     "lint": "eslint src --ext .js,.jsx",
     "preversion": "npm run lint && npm run build",
-    "publishSite": "git checkout gh-pages && cp dist-site/* . && git add . && git commit -m 'release' && git push origin gh-pages && git checkout master"
+    "publishSite": "git checkout gh-pages && cp dist-site/* . && git add . && git commit -m 'release' && git push origin gh-pages && git checkout master",
+    "buildComponent": "webpack src/component/WebpackVisualizer.js lib/WebpackVisualizer.js --config webpack.prod.js --output-library library --output-library-target umd"
   },
   "dependencies": {
     "d3": "^3.5.6",

diff --git a/src/component/WebpackVisualizer.js b/src/component/WebpackVisualizer.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import ChartWithDetails from '../shared/components/chart-with-details';
+import formatSize from '../shared/util/formatSize';
+import {getAssetsData, getBundleDetails, ERROR_CHUNK_MODULES} from '../shared/util/stat-utils';
+import buildHierarchy from '../shared/buildHierarchy';
+
+
+export default React.createClass({
+    getInitialState() {
+        return {
+            assets: [],
+            chartData: null,
+            selectedAssetIndex: 0,
+            stats: null,
+        };
+    },
+
+    componentDidMount() {
+        const { stats } = this.props;
+        const assets = getAssetsData(stats.assets, stats.chunks);
+
+        this.setState({
+            assets,
+            chartData: buildHierarchy(stats.modules),
+            selectedAssetIndex: 0,
+            stats,
+        });
+    },
+
+    onAssetChange(ev) {
+        let selectedAssetIndex = Number(ev.target.value);
+        let modules, chartData, error;
+
+        if (selectedAssetIndex === 0) {
+            modules = this.state.stats.modules;
+        } else {
+            let asset = this.state.assets[selectedAssetIndex - 1];
+            modules = asset.chunk.modules;
+        }
+
+        if (modules) {
+            chartData = buildHierarchy(modules);
+        } else {
+            error = ERROR_CHUNK_MODULES;
+        }
+
+        this.setState({
+            chartData,
+            error,
+            selectedAssetIndex
+        });
+    },
+
+    render() {
+        const bundleDetails = (this.state.assets) ? getBundleDetails({
+            assets: this.state.assets,
+            selectedAssetIndex: this.state.selectedAssetIndex,
+        }) : null;
+
+        let assetList;
+        if (this.state.assets.length > 1) {
+            assetList = (
+                <div>
+                    <select onChange={this.onAssetChange} value={this.state.selectedAssetIndex}>
+                        <option value={0}>All Chunks</option>
+                        {this.state.assets.map((asset, i) => <option key={i} value={i + 1}>{asset.name} ({formatSize(asset.size)})</option>)}
+                    </select>
+                </div>
+            );
+        }
+
+        return (
+            <div>
+                {assetList}
+                {this.state.chartData && bundleDetails && <ChartWithDetails chartData={this.state.chartData} bundleDetails={bundleDetails} /> }
+                {this.state.error && <div className="errorMessage">{this.state.error}</div>}
+            </div>
+        );
+    }
+});
diff --git a/src/shared/components/chart.jsx b/src/shared/components/chart.jsx
@@ -24,7 +24,7 @@ export default React.createClass({
 
     createChart(root) {
         let details = createVisualization({
-            svgElement: this.refs.svg,
+            svgElement: this.svgRef,
             root,
             onHover: this.props.onHover,
             onUnhover: this.props.onUnhover
@@ -40,6 +40,6 @@ export default React.createClass({
             return null;
         }
 
-        return <svg ref="svg" />;
+        return <svg ref={(svg) => { this.svgRef = svg; }}  />;
     }
 });
diff --git a/src/site/app.jsx b/src/site/app.jsx
@@ -6,16 +6,14 @@ import readFile from '../shared/util/readFile';
 import formatSize from '../shared/util/formatSize';
 import {getAssetsData, getBundleDetails, ERROR_CHUNK_MODULES} from '../shared/util/stat-utils';
 import buildHierarchy from '../shared/buildHierarchy';
-
+import WebpackVisualizer from '../component/WebpackVisualizer';
 
 export default React.createClass({
     getInitialState() {
         return {
-            assets: [],
+            stats: null,
             needsUpload: true,
             dragging: false,
-            chartData: null,
-            selectedAssetIndex: 0
         };
     },
 
@@ -50,13 +48,9 @@ export default React.createClass({
 
     handleFileUpload(jsonText) {
         let stats = JSON.parse(jsonText);
-        let assets = getAssetsData(stats.assets, stats.chunks);
 
         this.setState({
-            assets,
-            chartData: buildHierarchy(stats.modules),
             needsUpload: false,
-            selectedAssetIndex: 0,
             stats
         });
     },
@@ -82,30 +76,6 @@ export default React.createClass({
         request.send();
     },
 
-    onAssetChange(ev) {
-        let selectedAssetIndex = Number(ev.target.value);
-        let modules, chartData, error;
-
-        if (selectedAssetIndex === 0) {
-            modules = this.state.stats.modules;
-        } else {
-            let asset = this.state.assets[selectedAssetIndex - 1];
-            modules = asset.chunk.modules;
-        }
-
-        if (modules) {
-            chartData = buildHierarchy(modules);
-        } else {
-            error = ERROR_CHUNK_MODULES;
-        }
-
-        this.setState({
-            chartData,
-            error,
-            selectedAssetIndex
-        });
-    },
-
     renderUploadArea(uploadAreaClass) {
         if (this.state.needsUpload) {
             return (
@@ -145,33 +115,14 @@ export default React.createClass({
             demoButton = <button onClick={this.loadDemo} className={demoClass} style={{marginTop: '0.5em'}}>Try a Demo</button>;
         }
 
-        if (this.state.stats){
-            bundleDetails = getBundleDetails({
-                assets: this.state.assets,
-                selectedAssetIndex: this.state.selectedAssetIndex
-            });
-        }
-
-        if (this.state.assets.length > 1) {
-            assetList = (
-                <div>
-                    <select onChange={this.onAssetChange} value={this.state.selectedAssetIndex}>
-                        <option value={0}>All Chunks</option>
-                        {this.state.assets.map((asset, i) => <option key={i} value={i + 1}>{asset.name} ({formatSize(asset.size)})</option>)}
-                    </select>
-                </div>
-            );
-        }
-
         return (
             <div>
                 <h1>Webpack Visualizer</h1>
 
-                {assetList}
-                {this.renderUploadArea(uploadAreaClass)}
-                {demoButton}
+                {this.state.needsUpload && this.renderUploadArea(uploadAreaClass)}
+                {this.state.needsUpload && demoButton}
 
-                <ChartWithDetails chartData={this.state.chartData} bundleDetails={bundleDetails} />
+                {this.state.stats && <WebpackVisualizer stats={this.state.stats} />}
 
                 {this.state.error && <div className="errorMessage">{this.state.error}</div>}