Bug 1336556 - Cache angular partials with webpack

Load the contents of the various angular partials into the template
cache at build time so that they don't need to be built separately.

neutrino-custom/base.js

@@ -91,6 +91,20 @@ module.exports = neutrino => {
         .add([USERGUIDE_TEMPLATE, PERF_TEMPLATE, LOGVIEWER_TEMPLATE,
             INDEX_TEMPLATE, ADMIN_TEMPLATE, FAILUREVIEWER_TEMPLATE]);
 
+    // Don't use file loader for html...
+    neutrino.config
+        .module
+        .rule('html')
+        .loaders.delete('file');
+    // Instead, use the raw loader, which will allow us to get the contents
+    // of the templates and load them into the templateCache automatically;
+    // See ui/js/cache-templates.js.
+    neutrino.config
+        .module
+        .rule('html')
+        .test(/\.(html|tmpl)$/)
+        .loader('raw', require.resolve('raw-loader'));
+
     // Set up templates for each entry point:
     neutrino.config.plugins.delete('html');
     neutrino.config

neutrino-custom/production.js

@@ -37,8 +37,8 @@ module.exports = neutrino => {
             from: './contribute.json',
             to: 'contribute.json'
         }], {
-            ignore: ['*.js', '*.jsx', '*.css', '*.eot',
-                '*.otf', '*.svg', '*.ttf', '*.woff', '*.woff2']
+            ignore: ['*.js', '*.jsx', '*.css', '*.html', '*.tmpl',
+                '*.eot', '*.otf', '*.ttf', '*.woff', '*.woff2']
         });
 
     // Likewise for this clean plugin:

package.json

@@ -42,6 +42,7 @@
     "neutrino-preset-karma": "4.2.0",
     "neutrino-preset-react": "4.2.3",
     "ngreact": "0.3.0",
+    "raw-loader": "0.5.1",
     "react": "15.3.1",
     "react-addons-test-utils": "15.3.1",
     "react-dom": "15.3.1",

ui/js/admin.js

@@ -37,6 +37,6 @@ admin.config(['$compileProvider', '$httpProvider', '$stateProvider', '$urlRouter
             });
 
         $urlRouterProvider.otherwise('/profiles');
-    }]);
+    }]).run(require('./cache-templates'));
 
 module.exports = admin;

ui/js/cache-templates.js

@@ -0,0 +1,23 @@
+'use strict';
+// This is a run block which, when used on an angular module, loads all
+// of the partials in /ui/partials and /ui/plugins into the Angular
+// template cache. This means that ng-includes and templateUrls will not
+// actually need to request a partial file at any point.
+module.exports = ['$templateCache', ($templateCache) => {
+    const partialsReq = require.context('../partials', true, /\.(tmpl|html)$/);
+    partialsReq.keys().forEach(template => {
+        const keyPath = `partials${template.substring(1)}`;
+        $templateCache.put(
+            keyPath,
+            partialsReq(template)
+        );
+    });
+    const pluginsReq = require.context('../plugins', true, /\.(tmpl|html)$/);
+    pluginsReq.keys().forEach(template => {
+        const keyPath = `plugins${template.substring(1)}`;
+        $templateCache.put(
+            keyPath,
+            pluginsReq(template)
+        );
+    });
+}];

ui/js/failureviewer.js

@@ -5,6 +5,6 @@ var failureViewerApp = angular.module('failureviewer', ['treeherder']);
 failureViewerApp.config(['$compileProvider', function($compileProvider) {
     // Disable debug data, as recommended by https://docs.angularjs.org/guide/production
     $compileProvider.debugInfoEnabled(false);
-}]);
+}]).run(require('./cache-templates'));
 
 module.exports = failureViewerApp;

ui/js/logviewer.js

@@ -12,6 +12,6 @@ logViewerApp.config(['$compileProvider', '$resourceProvider',
 
         // All queries should be cancellable by default (why is this configurable??)
         $resourceProvider.defaults.cancellable = true;
-    }]);
+    }]).run(require('./cache-templates'));
 
 module.exports = logViewerApp;

ui/js/perfapp.js

@@ -67,6 +67,6 @@ perf.config(['$compileProvider', '$httpProvider', '$stateProvider', '$urlRouterP
                 window.document.title = $state.current.title;
             }
         });
-    }]);
+    }]).run(require('./cache-templates'));
 
 module.exports = perf;

ui/js/treeherder_app.js

@@ -44,6 +44,6 @@ treeherderApp.config(['$compileProvider', '$routeProvider', '$httpProvider',
             template: '<login-callback/>'
         }).
         otherwise({redirectTo: '/jobs'});
-    }]);
+    }]).run(require('./cache-templates'));
 
 module.exports = treeherderApp;

ui/js/userguide.js

@@ -5,6 +5,13 @@ var userguideApp = angular.module('userguide', []);
 userguideApp.config(['$compileProvider', function ($compileProvider) {
     // Disable debug data, as recommended by https://docs.angularjs.org/guide/production
     $compileProvider.debugInfoEnabled(false);
+}]).run(['$templateCache', ($templateCache) => {
+    // The user guide only requires a single partial - just include it instead
+    // of requiring the full set of templates
+    $templateCache.put(
+        'partials/main/thShortcutTable.html',
+        require('../partials/main/thShortcutTable.html')
+    );
 }]);
 
 module.exports = userguideApp;

yarn.lock

@@ -5302,6 +5302,10 @@ raw-body@~2.2.0:
     iconv-lite "0.4.15"
     unpipe "1.0.0"
 
+raw-loader@0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-0.5.1.tgz#0c3d0beaed8a01c966d9787bf778281252a979aa"
+
 rc@~1.1.6:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.1.7.tgz#c5ea564bb07aff9fd3a5b32e906c1d3a65940fea"