Require templates with require() in components

Include Angular component templates as strings in the app bundle using
the stringify Browserify transform and use them from directives using
'template' instead of 'templateUrl'.

This is faster, because it avoids going through the async $http
machinery to load templates, but it is also synchronous, which generally
means fewer surprises due to async template loading and specifically in
the context of the <excerpt> directive will be useful as it will make it
possible for the <excerpt> directive to measure the height of its
content in the link function, because all components inside the
exercept's content will have been fully resolved at that point.

h/static/scripts/app.js

@@ -60,25 +60,27 @@ function configureLocation($locationProvider) {
 }
 
 // @ngInject
+var VIEWER_TEMPLATE = require('../../templates/client/viewer.html');
+
 function configureRoutes($routeProvider) {
   $routeProvider.when('/a/:id',
     {
       controller: 'AnnotationViewerController',
-      templateUrl: 'viewer.html',
+      template: VIEWER_TEMPLATE,
       reloadOnSearch: false,
       resolve: resolve
     });
   $routeProvider.when('/viewer',
     {
       controller: 'WidgetController',
-      templateUrl: 'viewer.html',
+      template: VIEWER_TEMPLATE,
       reloadOnSearch: false,
       resolve: resolve
     });
   $routeProvider.when('/stream',
     {
       controller: 'StreamController',
-      templateUrl: 'viewer.html',
+      template: VIEWER_TEMPLATE,
       reloadOnSearch: false,
       resolve: resolve
     });
@@ -112,6 +114,15 @@ function processAppOpts() {
   }
 }
 
+// @ngInject
+function setupTemplateCache($templateCache) {
+  // 'thread.html' is used via ng-include so it needs to be added
+  // to the template cache. Other components just require() templates
+  // directly as strings.
+  $templateCache.put('thread.html',
+    require('../../templates/client/thread.html'));
+}
+
 module.exports = angular.module('h', [
   // Angular addons which export the Angular module name
   // via module.exports
@@ -202,6 +213,7 @@ module.exports = angular.module('h', [
   .config(configureRoutes)
 
   .run(setupCrossFrame)
-  .run(setupHttp);
+  .run(setupHttp)
+  .run(setupTemplateCache);
 
 processAppOpts();

h/static/scripts/directive/annotation.js

@@ -784,7 +784,7 @@ function annotation($document) {
       onReplyCountClick: '&',
       replyCount: '<',
     },
-    templateUrl: 'annotation.html'
+    template: require('../../../templates/client/annotation.html'),
   };
 }
 

h/static/scripts/directive/dropdown-menu-btn.js

@@ -26,6 +26,6 @@ module.exports = function () {
       onClick: '&',
       onToggleDropdown: '&',
     },
-    templateUrl: 'dropdown_menu_btn.html'
+    template: require('../../../templates/client/dropdown_menu_btn.html'),
   };
 };

h/static/scripts/directive/excerpt.js

@@ -145,7 +145,7 @@ function excerpt() {
     },
     restrict: 'E',
     transclude: true,
-    templateUrl: 'excerpt.html',
+    template: require('../../../templates/client/excerpt.html'),
   };
 }
 

h/static/scripts/directive/group-list.js

@@ -39,7 +39,7 @@ function groupList( $window, groups, settings) {
     scope: {
       auth: '<'
     },
-    templateUrl: 'group_list.html'
+    template: require('../../../templates/client/group_list.html'),
   };
 };
 

h/static/scripts/directive/loggedout-message.js

@@ -15,6 +15,6 @@ module.exports = function () {
        */
       onLogin: '&',
     },
-    templateUrl: 'loggedout_message.html',
+    template: require('../../../templates/client/loggedout_message.html'),
   };
 };

h/static/scripts/directive/login-form.js

@@ -102,7 +102,7 @@ module.exports = {
       scope: {
         onClose: '&',
       },
-      templateUrl: 'login_form.html',
+      template: require('../../../templates/client/login_form.html'),
     };
   },
   Controller: Controller,

h/static/scripts/directive/markdown.js

@@ -262,6 +262,6 @@ module.exports = function($filter, $sanitize, $sce) {
       readOnly: '<',
       required: '@'
     },
-    templateUrl: 'markdown.html'
+    template: require('../../../templates/client/markdown.html'),
   };
 };

h/static/scripts/directive/publish-annotation-btn.js

@@ -36,6 +36,6 @@ module.exports = function () {
       onSave: '&',
       onSetPrivacy: '&'
     },
-    templateUrl: 'publish_annotation_btn.html'
+    template: require('../../../templates/client/publish_annotation_btn.html'),
   };
 }

h/static/scripts/directive/search-status-bar.js

@@ -12,6 +12,6 @@ module.exports = function () {
       selectionCount: '<',
       totalCount: '<',
     },
-    templateUrl: 'search_status_bar.html',
+    template: require('../../../templates/client/search_status_bar.html'),
   };
 };

h/static/scripts/directive/share-dialog.coffee

@@ -31,5 +31,5 @@ module.exports = ['crossframe', (crossframe) ->
         scope.viaPageLink = 'https://via.hypothes.is/' + frames[0].uri
 
   restrict: 'E'
-  templateUrl: 'share_dialog.html'
+  template: require('../../../templates/client/share_dialog.html')
 ]

h/static/scripts/directive/sidebar-tutorial.js

@@ -33,7 +33,7 @@ module.exports = {
       controllerAs: 'vm',
       restrict: 'E',
       scope: {},
-      templateUrl: 'sidebar_tutorial.html'
+      template: require('../../../templates/client/sidebar_tutorial.html'),
     };
   },
   Controller: SidebarTutorialController

h/static/scripts/directive/signin-control.js

@@ -29,6 +29,6 @@ module.exports = function () {
        */
       newStyle: '<',
     },
-    templateUrl: 'signin_control.html',
+    template: require('../../../templates/client/signin_control.html'),
   };
 };

h/static/scripts/directive/sort-dropdown.js

@@ -13,6 +13,6 @@ module.exports = function () {
       /** Called when the user changes the current sort criteria. */
       onChangeSortBy: '&',
     },
-    templateUrl: 'sort_dropdown.html',
+    template: require('../../../templates/client/sort_dropdown.html'),
   }
 }

h/static/scripts/directive/test/annotation-test.js

@@ -984,7 +984,6 @@ describe('annotation', function() {
         createDirective(annotation);
         $scope.$digest();
         $scope.$destroy();
-        $timeout.flush();
         $timeout.verifyNoPendingTasks();
       });
     });

h/static/scripts/directive/top-bar.js

@@ -15,6 +15,6 @@ module.exports = function () {
       sortOptions: '<',
       onChangeSortBy: '&',
     },
-    templateUrl: 'top_bar.html',
+    template: require('../../../templates/client/top_bar.html'),
   };
 };

h/static/scripts/karma.config.js

+'use strict';
+
 // Karma configuration
 var path = require('path');
+var stringify = require('stringify');
 
 module.exports = function(config) {
   config.set({
@@ -63,6 +66,11 @@ module.exports = function(config) {
       configure: function (bundle) {
         bundle
           .transform('coffeeify')
+          .transform(stringify, {
+            appliesTo: {
+              includeExtensions: ['.html'],
+            },
+          })
           .plugin('proxyquire-universal')
           // fix for Proxyquire in PhantomJS 1.x.
           // See https://github.com/bitwit/proxyquireify-phantom-menace

package.json

@@ -58,6 +58,7 @@
     "retry": "^0.8.0",
     "scroll-into-view": "^1.3.1",
     "showdown": "^1.2.1",
+    "stringify": "^5.1.0",
     "through2": "^2.0.1",
     "tiny-emitter": "^1.0.1",
     "uglifyify": "^3.0.1",

scripts/gulp/create-bundle.js

@@ -11,6 +11,7 @@ var coffeeify = require('coffeeify');
 var exorcist = require('exorcist');
 var gulpUtil = require('gulp-util');
 var mkdirp = require('mkdirp');
+var stringify = require('stringify');
 var uglifyify = require('uglifyify');
 var watchify = require('watchify');
 
@@ -117,6 +118,12 @@ module.exports = function createBundle(config, buildOpts) {
 
   var bundle = browserify([], bundleOpts);
 
+  bundle.transform(stringify, {
+    appliesTo: {
+      includeExtensions: ['.html'],
+    },
+  });
+
   (config.require || []).forEach(function (req) {
     // When another bundle uses 'bundle.external(<module path>)',
     // the module path is rewritten relative to the