Split JSX dependencies for more modular loading

app/static/app/js/Console.jsx

@@ -148,4 +148,14 @@ class Console extends React.Component {
   }
 }
 
+$(function(){
+    $("[data-console]").each(function(){
+        window.ReactDOM.render(<Console 
+                lang={$(this).data("console-lang")}
+                height={$(this).data("console-height")}
+                autoscroll={typeof $(this).attr("autoscroll") !== 'undefined' && $(this).attr("autoscroll") !== false}
+            >{$(this).text()}</Console>, $(this).get(0));
+    });
+});
+
 export default Console;

app/static/app/js/Dashboard.jsx

@@ -72,4 +72,28 @@ class Dashboard extends React.Component {
   }
 }
 
+$(function(){
+    $("[data-dashboard]").each(function(){
+        window.ReactDOM.render(<Dashboard/>, $(this).get(0));
+    });
+
+
+    // Warn users if there's any sort of work in progress before
+    // they press the back button on the browser
+    // Yes it's a hack. No we're not going to track state in React just
+    // for this.
+    window.onbeforeunload = function() {
+        let found = false; 
+        $(".progress-bar:visible").each(function(){ 
+            try{
+                let value = parseFloat($(this).text());
+                if (!isNaN(value) && value > 0 && value < 100) found = true;
+            }catch(e){
+                // Do nothing
+            }
+        });
+        return found ? "Your changes will be lost. Are you sure you want to leave?" : undefined; 
+    };
+});
+
 export default Dashboard;

app/static/app/js/MapView.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import './css/MapView.scss';
 import Map from './components/Map';
+import $ from 'jquery';
 
 class MapView extends React.Component {
   static defaultProps = {
@@ -39,4 +40,12 @@ class MapView extends React.Component {
   }
 }
 
+$(function(){
+    $("[data-mapview]").each(function(){
+        let props = $(this).data();
+        delete(props.mapview);
+        window.ReactDOM.render(<MapView {...props}/>, $(this).get(0));
+    });
+});
+
 export default MapView;

app/static/app/js/ModelView.jsx

@@ -446,5 +446,13 @@ class ModelView extends React.Component {
   }
 }
 
+$(function(){
+    $("[data-modelview]").each(function(){
+        let props = $(this).data();
+        delete(props.modelview);
+        window.ReactDOM.render(<ModelView {...props}/>, $(this).get(0));
+    });
+});
+
 export default ModelView;
     

app/static/app/js/main.jsx

@@ -1,53 +1,9 @@
 import '../css/main.scss';
 import './django/csrf';
-import React from 'react';
 import ReactDOM from 'react-dom';
-import Dashboard from './Dashboard';
-import MapView from './MapView';
-import ModelView from './ModelView';
-import Console from './Console';
-import $ from 'jquery';
 
-$(function(){
-    $("[data-dashboard]").each(function(){
-        ReactDOM.render(<Dashboard/>, $(this).get(0));
-    });
+// Main is always executed first in the page
 
-    $("[data-mapview]").each(function(){
-        let props = $(this).data();
-        delete(props.mapview);
-        ReactDOM.render(<MapView {...props}/>, $(this).get(0));
-    });
-
-    $("[data-modelview]").each(function(){
-        let props = $(this).data();
-        delete(props.modelview);
-        ReactDOM.render(<ModelView {...props}/>, $(this).get(0));
-    });
-
-    $("[data-console]").each(function(){
-        ReactDOM.render(<Console 
-                lang={$(this).data("console-lang")}
-                height={$(this).data("console-height")}
-                autoscroll={typeof $(this).attr("autoscroll") !== 'undefined' && $(this).attr("autoscroll") !== false}
-            >{$(this).text()}</Console>, $(this).get(0));
-    });
-
-    // Warn users if there's any sort of work in progress before
-    // they press the back button on the browser
-    // Yes it's a hack. No we're not going to track state in React just
-    // for this.
-    window.onbeforeunload = function() {
-        let found = false; 
-        $(".progress-bar:visible").each(function(){ 
-            try{
-                let value = parseFloat($(this).text());
-                if (!isNaN(value) && value > 0 && value < 100) found = true;
-            }catch(e){
-                // Do nothing
-            }
-        });
-        return found ? "Your changes will be lost. Are you sure you want to leave?" : undefined; 
-    };
-    
-});
+// We share the ReactDOM object to avoid having to include it
+// as a dependency in each component (adds too much space overhead)
+window.ReactDOM = ReactDOM;

app/templates/app/3d_model_display.html

@@ -2,6 +2,9 @@
 {% load i18n %}
 
 {% block content %}
+	{% load render_bundle from webpack_loader %}
+	{% render_bundle 'ModelView' attrs='async' %}
+
 	<h3><i class="fa fa-cube"></i> {{title}}</h3>
 	
 	<div data-modelview

app/templates/app/dashboard.html

@@ -1,8 +1,10 @@
 {% extends "app/logged_in_base.html" %}
 {% load i18n %}
-{% load render_bundle from webpack_loader %}
 
 {% block content %}
+	{% load render_bundle from webpack_loader %}
+	{% render_bundle 'Dashboard' attrs='async' %}
+
 	{% if no_processingnodes %}
 		<h3>{% trans 'Welcome! ☺' %}</h3>
 		{% trans 'Add a Processing Node' as add_processing_node %}

app/templates/app/map.html

@@ -2,6 +2,9 @@
 {% load i18n %}
 
 {% block content %}
+	{% load render_bundle from webpack_loader %}
+	{% render_bundle 'MapView' attrs='async' %}
+
 	<h3><i class="fa fa-globe"></i> {{title}}</h3>
 	
 	<div data-mapview 

app/templates/app/processing_node.html

@@ -3,6 +3,9 @@
 
 {% block content %}
 
+{% load render_bundle from webpack_loader %}
+{% render_bundle 'Console' attrs='async' %}
+
 <table class="table table-bordered table-striped table-first-col-bold processing-node-info">
 	<tr>
 		<td>{% trans "Hostname" %}</td>

webpack.config.js

@@ -7,11 +7,15 @@ let LiveReloadPlugin = require('webpack-livereload-plugin');
 module.exports = {
   context: __dirname,
 
-  entry: [
+  entry: {
     // 'webpack-dev-server/client?http://localhost:3000',
     // 'webpack/hot/only-dev-server',
-    './app/static/app/js/main.jsx',
-  ],
+    main: ['./app/static/app/js/main.jsx'],
+    Console: ['./app/static/app/js/Console.jsx'],
+    Dashboard: ['./app/static/app/js/Dashboard.jsx'],
+    MapView: ['./app/static/app/js/MapView.jsx'],
+    ModelView: ['./app/static/app/js/ModelView.jsx']
+  },
 
   output: {
       path: path.join(__dirname, './app/static/app/bundles/'),
@@ -24,7 +28,7 @@ module.exports = {
     // new webpack.NoErrorsPlugin(), // don't reload if there is an error
     new LiveReloadPlugin(),
     new BundleTracker({filename: './webpack-stats.json'}),
-    new ExtractTextPlugin('css/main.css', {
+    new ExtractTextPlugin('css/[name]-[hash].css', {
         allChunks: true
     })
   ],