Add compile step that bundles and compresses JS files

Also, manage dependencies on third-party JS libraries using NPM.

Author: timjb

.gitignore

@@ -19,7 +19,10 @@
 tags
 TAGS
 
+/haddock-api/resources/html/node_modules
+
 .cabal-sandbox
+.ghc.environment.*
 cabal.sandbox.config
 
 .stack-work/

haddock-api/haddock-api.cabal

@@ -20,11 +20,9 @@ extra-source-files:
 data-dir:
   resources
 data-files:
-  html/index.js
-  html/fuse.js
-  html/preact.js
+  html/quick-jump.min.js
+  html/haddock-bundle.min.js
   html/solarized.css
-  html/haddock-util.js
   html/highlight.js
   html/Classic.theme/haskell_icon.gif
   html/Classic.theme/minus.gif

haddock-api/resources/html/README.md

@@ -0,0 +1,13 @@
+# Compiling
+
+* Install [node](https://nodejs.org/) and [npm](https://www.npmjs.com)
+* Run `npm install` and `npm install gulp-cli -g` in this directory.
+* Run `gulp` in this directory. This rebuilds the minified JS files.
+
+# Manual Testing
+
+Generate haddock docs for some Haskell project and replace the generated JS files:
+
+```
+gulp && cp *.min.js path-to/generated-haddock-docs
+```

haddock-api/resources/html/fuse.js

@@ -0,0 +1,22 @@
+const gulp = require('gulp');
+const uglify = require('gulp-uglify');
+const browserify = require('browserify');
+const source = require('vinyl-source-stream');
+const buffer = require('vinyl-buffer');
+
+function buildJS(targetFileName, files) {
+  var b = browserify({ entries: files });
+  return b
+    .bundle()
+    .pipe(source(targetFileName))
+    .pipe(buffer())
+    .pipe(uglify().on('error', function(e) { console.log(e); }))
+    .pipe(gulp.dest('.'));
+}
+
+gulp.task('build-js', function() {
+  buildJS('quick-jump.min.js', ['./js-src/quick-jump.js']);
+  buildJS('haddock-bundle.min.js', ['./js-src/init.js']);
+});
+
+gulp.task('default', ['build-js']);

haddock-api/resources/html/gulpfile.js

@@ -56,6 +56,9 @@ function toggleSection(id)
   return b;
 }
 
+// TODO: get rid of global variables
+if (typeof window !== 'undefined') { window.toggleSection = toggleSection; }
+
 var collapsed = {};
 function rememberCollapsed(id)
 {
@@ -88,6 +91,8 @@ function restoreCollapsed()
   }
 }
 
+exports.restoreCollapsed = restoreCollapsed;
+
 function setCookie(name, value) {
   document.cookie = name + "=" + escape(value) + ";path=/;";
 }
@@ -145,6 +150,8 @@ function addStyleMenu() {
   }
 }
 
+exports.addStyleMenu = addStyleMenu;
+
 function setActiveStyleSheet(title) {
   var as = styles();
   var i, a, found;
@@ -171,16 +178,9 @@ function resetStyle() {
   if (s) setActiveStyleSheet(s);
 }
 
+exports.resetStyle = resetStyle;
 
 function styleMenu(show) {
   var m = document.getElementById('style-menu');
   if (m) toggleShow(m, show);
-}
-
-
-function pageLoad() {
-  addStyleMenu();
-  resetStyle();
-  restoreCollapsed();
-}
-
+}

haddock-api/resources/html/haddock-bundle.min.js

@@ -0,0 +1,21 @@
+var util = require('./haddock-util');
+var quickJump = require('./quick-jump');
+
+function onDomReady(callback) {
+  if (document.readyState === 'interactive') {
+    callback();
+  } else {
+    document.addEventListener('readystatechange', function () {
+      if (document.readyState === 'interactive') {
+        callback();
+      }
+    });
+  }
+}
+
+onDomReady(function() {
+  util.addStyleMenu();
+  util.resetStyle();
+  util.restoreCollapsed();
+  quickJump.init();
+});

haddock-api/resources/html/haddock-util.js renamed to haddock-api/resources/html/js-src/haddock-util.js

@@ -1,3 +1,6 @@
+var Fuse = require('fuse.js');
+var preact = require('preact');
+
 quickNav = (function() {
 
 var baseUrl;
@@ -230,7 +233,7 @@ var App = createClass({
             onFocus: this.show.bind(this),
             onClick: this.show.bind(this),
             onInput: this.updateResults.bind(this)
-          }),
+          })
         ),
         h('div', {
           id: 'search-results',
@@ -276,8 +279,8 @@ var App = createClass({
           : h('li', { class: 'more-results' },
               this.actionLink(expand, {}, "show " + (items.length - visibleItems.length) + " more results from this module")
             )
-      ),
-    )
+      )
+    );
   },
 
   navigationLink: function(href, attrs) {
@@ -355,13 +358,13 @@ var KeyboardShortcuts = function() {
     h('tr', null,
       h('td', null, h('span', { class: 'key' }, "↵")),
       h('td', null, "Go to active search result")
-    ),
+    )
   );
 };
 
 var IntroMsg = function() {
   return h('p', null,
-    "You can find any exported type, constructor, class, function or pattern defined in this package by (approximate) name.",
+    "You can find any exported type, constructor, class, function or pattern defined in this package by (approximate) name."
   );
 };
 
@@ -374,10 +377,10 @@ var NoResultsMsg = function(props) {
     ),
     h('p', null,
       h('code', null, 'Nothing'),
-      " matches your query for '" + props.searchString + "'.",
+      " matches your query for '" + props.searchString + "'."
     ),
     h('p', null,
-      h('code', null, 'Left "no matches for \'' + props.searchString + '\'" :: Either String (NonEmpty SearchResult)'),
+      h('code', null, 'Left "no matches for \'' + props.searchString + '\'" :: Either String (NonEmpty SearchResult)')
     )
   ];
 
@@ -392,3 +395,5 @@ return {
   }
 }
 })();
+
+if (typeof exports === 'object') { exports.init = quickNav.init; }