Add compile step that bundles and compresses JS files (#684)

* Add compile step that bundles and compresses JS files

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

* Compile JS from TypeScript

* Enable 'noImplicitAny' in TypeScript

* QuickJump: use JSX syntax

* Generate source maps from TypeScript for easier debugging

* TypeScript: more accurate type

* Separate quick jump css file from ocean theme

Author: timjb

.gitignore

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

haddock-api/haddock-api.cabal

@@ -20,11 +20,10 @@ 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/quick-jump.css
   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/Ocean.std-theme/ocean.css

@@ -614,152 +614,3 @@ div#style-menu-holder {
 }
 
 /* @end */
-
-/* @group Search box */
-
-#search {
-  position: fixed;
-  top: 3.2em;
-  bottom: 0;
-  left: calc(50% - 22em);
-  width: 44em;
-  z-index: 1000;
-  pointer-events: none;
-}
-
-#search.hidden {
-  display: none;
-}
-
-#search-form, #search-results {
-  box-shadow: 2px 2px 6px rgb(199, 204, 208);
-  pointer-events: all;
-}
-
-#search-form input {
-  font-size: 1.25em; line-height: 2.3em; height: 2.4em;
-  display: block;
-  box-sizing: border-box;
-  width: 100%;
-  padding: 0 0.75em;
-  border: 0.05em solid rgb(151, 179, 202);
-}
-
-#search input:focus {
-  outline: none;
-}
-
-#search-results {
-  top: 3em;
-  max-height: calc(100% - 3em);
-  box-sizing: border-box;
-  border-width: 0 0.05em 0.05em;
-  border-style: solid;
-  border-color: #b2d5fb;
-  background: #e8f3ff;
-  overflow-y: auto;
-}
-
-#search-results > ul {
-  margin: 0;
-  list-style: none;
-}
-
-#search-results > ul > li,
-#search-results > p,
-#search-results > table {
-  padding: 0.5em 1em;
-  margin: 0;
-}
-
-#search-results > ul > li {
-  border-bottom: 1px solid #b2d5fb;
-}
-
-#search-results > ul > li > ul {
-  list-style: none;
-}
-
-.search-module h4 {
-  margin: 0;
-}
-
-.search-module > ul {
-  margin: 0.5em 0 0.5em 2em;
-}
-
-.search-module > ul > li > a[href] {
-  display: block;
-  color: inherit;
-  padding: 0.25em 0.5em;
-}
-
-.search-module > ul > li > a[href].active-link {
-  background: #faf9dc;
-}
-
-.search-module a[href]:hover {
-  text-decoration: none;
-}
-
-.search-result a a {
-  pointer-events: none;
-}
-
-.search-result ul.subs {
-  display: inline-block;
-  margin: 0; padding: 0;
-}
-
-.search-result ul.subs li {
-  display: none;
-}
-
-.search-result ul.subs::after {
-  display: inline-block;
-  content: "...";
-  color: rgb(78,98,114);
-  margin: 0 0.25em;
-}
-
-.more-results {
-  color: rgb(99, 141, 173);
-  position: relative;
-}
-
-.more-results::before {
-  content: "+";
-  display: inline-block;
-  color: #b2d5fb;
-  font-weight: bold;
-  font-size: 1.25em; line-height: inherit;
-  position: absolute;
-  left: -1em;
-}
-
-.keyboard-shortcuts {
-  line-height: 1.6em;
-}
-
-.keyboard-shortcuts th {
-  color: rgb(78,98,114);
-}
-
-.keyboard-shortcuts td:first-child,
-.keyboard-shortcuts th:first-child {
-  text-align: right;
-  padding-right: 0.6em;
-}
-
-.key {
-  display: inline-block;
-  font-size: 0.9em;
-  min-width: 0.8em; line-height: 1.2em;
-  text-align: center;
-  background: #b2d5fb;
-  border: 1px solid #74a3d6;
-  padding: 0 0.2em;
-  margin: 0 0.1em;
-}
-
-/* @end */

haddock-api/resources/html/README.md

@@ -0,0 +1,16 @@
+# 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.
+
+# Development and manual testing
+
+Generate Haddock docs for some Haskell project. Start an HTTP server in the Haddock docs directory.
+(The `file://` protocol doesn't work since it doesn't allow AJAX requests.)
+
+After each change to the TypeScript sources, compile and copy the generated files (JS and sourcemaps for better debugging) to the Haddock directory:
+
+```
+gulp && cp *.min.js path-to/generated-haddock-docs && cp *.js.map path-to/generated-haddock-docs
+```

haddock-api/resources/html/fuse.js

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