Handle dependencies that should be split from the main app

Using ES6’s System.import allows webpack to split up the dependency
into its own chunk and load it as necessary. When this is not possible
(ie. when a script expects itself to be dropped into the html), follow
the previous strategy of copying the dependency folder into the build
folder.

js/components/ascribe_media/media_player.js

@@ -7,10 +7,15 @@ import Panel from 'react-bootstrap/lib/Panel';
 
 import AppConstants from '../../constants/application_constants';
 
+import audiojs from '../../third_party/imports/audiojs';
+import shmui from '../../third_party/imports/shmui';
+import videojs from '../../third_party/imports/videojs';
+
 import { escapeHTML } from '../../utils/general_utils';
 import { extractFileExtensionFromUrl } from '../../utils/file_utils';
 import { InjectInHeadUtils } from '../../utils/inject_utils';
 
+
 /**
  * This is the component that implements display-specific functionality.
  *
@@ -57,12 +62,9 @@ let Image = React.createClass({
 
     componentDidMount() {
         if (this.props.url) {
-            InjectInHeadUtils.inject(AppConstants.jquery.sdkUrl)
+            shmui
-                .then(() =>
+                .importLib()
-                    Q.all([
+                .then(() => window.jQuery('.shmui-ascribe').shmui());
-                        InjectInHeadUtils.inject(AppConstants.shmui.cssUrl),
-                        InjectInHeadUtils.inject(AppConstants.shmui.sdkUrl)
-                    ]).then(() => { window.jQuery('.shmui-ascribe').shmui(); }));
         }
     },
 
@@ -89,13 +91,9 @@ let Audio = React.createClass({
     },
 
     componentDidMount() {
-        InjectInHeadUtils.inject(AppConstants.audiojs.sdkUrl).then(this.ready);
+        audiojs
-    },
+            .importLib()
-
+            .then(() => window.audiojs.events.ready(() => window.audiojs.createAll()));
-    ready() {
-        window.audiojs.events.ready(function() {
-            window.audiojs.createAll();
-        });
     },
 
     render() {
@@ -142,11 +140,10 @@ let Video = React.createClass({
     },
 
     componentDidMount() {
-        Q.all([
+        videojs
-            InjectInHeadUtils.inject(AppConstants.videojs.cssUrl),
+            .importLib()
-            InjectInHeadUtils.inject(AppConstants.videojs.sdkUrl)])
             .then(() => this.setState({ libraryLoaded: true }))
-        .fail(() => this.setState({libraryLoaded: false}));
+            .catch(() => this.setState({ libraryLoaded: false }));
     },
 
     shouldComponentUpdate(nextProps, nextState) {

js/constants/application_constants.js

@@ -98,12 +98,8 @@ const constants = {
     'jquery': {
         'sdkUrl': 'https://code.jquery.com/jquery-2.1.4.min.js'
     },
-    'shmui': {
-        'sdkUrl': baseUrl + 'static/thirdparty/shmui/jquery.shmui.js',
-        'cssUrl': baseUrl + 'static/thirdparty/shmui/shmui.css'
-    },
     'audiojs': {
-        'sdkUrl': baseUrl + 'static/thirdparty/audiojs/audiojs/audio.min.js'
+        'sdkUrl': baseUrl + '/static/third_party/audiojs/audio.min.js'
     },
     'videojs': {
         'sdkUrl': '//vjs.zencdn.net/4.12/video.js',

js/third_party/imports/audiojs.js

@@ -0,0 +1,18 @@
+import AppConstants from '../../constants/application_constants';
+
+import { InjectInHeadUtils } from '../../utils/inject_utils';
+
+
+/**
+ * Imports audiojs from the copied directory.
+ *
+ * Unfortunately, audiojs' package structure and the way it currently loads image assets prevents us
+ * from using System.import.
+ *
+ * @return {Promise} Promise that resolves with [audio.min.js] on success.
+ */
+function importLib() {
+    return InjectInHeadUtils.inject(AppConstants.audiojs.sdkUrl);
+}
+
+export default { importLib };

js/third_party/imports/shmui.js

@@ -0,0 +1,19 @@
+import AppConstants from '../../constants/application_constants';
+
+import { InjectInHeadUtils } from '../../utils/inject_utils';
+
+
+/**
+ * Imports shmui and its dependencies (jQuery)
+ *
+ * @return {Promise} Promise that resolves with [jquery.shmui.js, shmui.css] on success.
+ */
+function importLib() {
+    return InjectInHeadUtils.inject(AppConstants.jquery.sdkUrl)
+        .then(() => Promise.all([
+            System.import('shmui/jquery.shmui.js'),
+            System.import('shmui/shmui.css')
+        ]))
+}
+
+export default { importLib };

js/third_party/imports/videojs.js

@@ -0,0 +1,18 @@
+import AppConstants from '../../constants/application_constants';
+
+import { InjectInHeadUtils } from '../../utils/inject_utils';
+
+
+/**
+ * Imports videojs and its stylesheet.
+ *
+ * @return {Promise} Promise that resolves with [video.js, video-js.css] on success.
+ */
+function importLib() {
+    return Promise.all([
+        InjectInHeadUtils.inject(AppConstants.videojs.cssUrl),
+        InjectInHeadUtils.inject(AppConstants.videojs.sdkUrl)
+    ]);
+}
+
+export default { importLib };

package.json

@@ -73,6 +73,7 @@
     "classlist-polyfill": "^1.0.2",
     "classnames": "^1.2.2",
     "compression": "^1.6.2",
+    "copy-webpack-plugin": "^3.0.1",
     "core-js": "^2.4.0",
     "css-loader": "^0.23.1",
     "decamelize": "^1.1.1",

webpack.config.js

@@ -8,6 +8,7 @@ const removeTrailingSlash = require('remove-trailing-slash');
 const webpack = require('webpack');
 const autoPrefixer = require('autoprefixer');
 const combineLoaders = require('webpack-combine-loaders');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
@@ -51,6 +52,15 @@ const DEFINITIONS = {
 const PLUGINS = [
     new webpack.DefinePlugin(DEFINITIONS),
     new webpack.NoErrorsPlugin(),
+
+    // Handle any dependencies that don't play nicely with System.import resolution
+    new CopyWebpackPlugin([
+        {
+            from: path.resolve(PATHS.NODE_MODULES, 'audiojs/audiojs'),
+            to: 'third_party/audiojs'
+        },
+    ]),
+
     // Extract stylesheets out of bundle
     new ExtractTextPlugin(
         PRODUCTION ? 'css/styles.min.css' : 'css/styles.css', {
@@ -153,6 +163,14 @@ const LOADERS = [
         loader: ExtractTextPlugin.extract('style', SASS_LOADER),
     },
 
+    // Dependencies
+    // Shmui
+    {
+        test: /\.css$/,
+        include: [path.resolve(PATHS.NODE_MODULES, 'shmui')],
+        loader: `style!${CSS_LOADER}`,
+    },
+
     // Fonts
     // woffs and svgs are typically smaller should we can try to load them as a url
     {