Merge pull request #365 from canjs/363-web-worker

WIP: Move search into a web worker

Author: chasenlehara

make-example-search-worker.js

@@ -0,0 +1,45 @@
+var fs = require("fs");
+var path = require("path");
+var stealTools = require("steal-tools");
+
+var forceBuild = process.argv.indexOf("-f") !== -1;
+
+var siteConfig = {
+  debug: false,
+  dest: path.join(__dirname, 'doc', 'workers'),
+  minifyBuild: true
+};
+
+var dest = siteConfig.dest + '/static/search-worker.js';
+
+fs.mkdir(siteConfig.dest, function() {
+  stealTools.export({
+    system: {
+      config: __dirname + '/package.json!npm',
+      main: 'static/search-worker'
+    },
+    options: {
+      bundleAssets: true,
+      bundleSteal: true,
+      debug: siteConfig.debug ?  true : false,
+      minify: siteConfig.minifyBuild === false ? false : true,
+      quiet: siteConfig.debug ? false : true
+    },
+    outputs: {
+      "+standalone" : {
+        dest: dest
+      }
+    }
+  }).then(function(){
+    // Work around for https://github.com/stealjs/steal-tools/issues/775
+    console.info('Replacing "window" with "self"');
+    fs.readFile(dest, 'utf8', function(err, file){
+      if(err) return console.error(err);
+      file = file.replace(/window/gmi, 'self');
+      fs.writeFile(dest, file, function(err){
+        if(err) return console.error(err);
+        console.info('Done');
+      });
+    });
+  });
+});

package.json

@@ -4,7 +4,7 @@
   "description": "The plugins to produce the CanJS site",
   "main": "static/canjs",
   "scripts": {
-    "start": "node make-example.js -f",
+    "start": "node make-example-search-worker.js && node make-example.js -f",
     "styles": "rm -rf node_modules/bit-docs-generate-html/site/static && npm start",
     "test": "npm start && npm run testee",
     "testee": "testee test/browser.html --browsers firefox",
@@ -35,7 +35,7 @@
     "escape-html": "^1.0.3",
     "jquery": "^3.1.1",
     "lodash": "^4.17.4",
-    "lunr": "^2.1.0",
+    "lunr": "bit-docs/lunr.js#279-safari-exception",
     "steal-stache": "^3.0.1",
     "unescape-html": "^1.0.0"
   },

static/loading-bar.js

@@ -1,23 +1,27 @@
-function LoadingBar(c){
-    this.meter = $('<span>', {style: 'width:0%;'});
-    this.elem = $('<div>', {style: 'display:none', class: 'meter animate '+c}).append(
-      this.meter.append($('<span>'))
+function LoadingBar(color, parent) {
+  this.meter = $('<span>', {style: 'transition: width 1s ease; width:0%;'});
+  this.elem = $('<div>', {style: 'display:none', class: 'meter animate ' + color}).append(
+    this.meter.append($('<span>'))
   );
-  $('body').prepend(this.elem);
-    return this;
+
+  parent = parent || $('body');
+  parent.prepend(this.elem);
+
+  return this;
 }
 
-LoadingBar.prototype.start = function(){
-    this.meter.css('width', '1%');
-    this.elem.show();
+LoadingBar.prototype.start = function(percentage) {
+  percentage = percentage || 0;
+  this.meter.css('width', percentage + '%');
+  this.elem.show();
 };
 
-LoadingBar.prototype.end = function(){
-    this.elem.hide();
+LoadingBar.prototype.end = function() {
+  this.elem.hide();
 };
 
-LoadingBar.prototype.update = function(p){
-    this.meter.css('width', p+'%');
+LoadingBar.prototype.update = function(percentage) {
+  this.meter.css('width', percentage + '%');
 };
 
-module.exports = LoadingBar;
+module.exports = LoadingBar;

static/search-logic.js

@@ -0,0 +1,63 @@
+var lunr = require("lunr");
+var searchEngine;
+
+module.exports = {
+	indexData: function(items) {
+		searchEngine = lunr(function() {
+			lunr.tokenizer.separator = /[\s]+/;
+
+			this.pipeline.remove(lunr.stemmer);
+			this.pipeline.remove(lunr.stopWordFilter);
+			this.pipeline.remove(lunr.trimmer);
+			this.searchPipeline.remove(lunr.stemmer);
+
+			this.ref('name');
+			this.field('title');
+			this.field('description');
+			this.field('name');
+			this.field('url');
+
+			items.forEach(function(item) {
+				if (!item.title) {
+					item.title = item.name;
+				}
+				this.add(item);
+			}.bind(this));
+		});
+		return searchEngine;
+	},
+
+	loadIndex: function(index) {
+		return lunr.Index.load(index);
+	},
+
+	search: function(value) {
+		var searchTerm = value.toLowerCase();
+
+		//run the search
+		return searchEngine.query(function(q) {
+
+			if (searchTerm.indexOf('can-') > -1) {// If the search term includes “can-”
+
+				// look for an exact match and apply a large positive boost
+				q.term(searchTerm, { boost: 375 });
+
+			} else {
+				// add “can-”, look for an exact match in the title field, and apply a positive boost
+				q.term('can-' + searchTerm, { boost: 12 });
+
+				// look for terms that match the beginning or end of this query
+				// look in the title field specifically to boost matches in it
+				q.term(searchTerm, { fields: ['title'], wildcard: lunr.Query.wildcard.LEADING | lunr.Query.wildcard.TRAILING });
+				q.term(searchTerm, { wildcard: lunr.Query.wildcard.LEADING | lunr.Query.wildcard.TRAILING });
+			}
+
+			// look for matches in any of the fields and apply a medium positive boost
+			var split = searchTerm.split(lunr.tokenizer.separator);
+			split.forEach(function(term) {
+				q.term(term, { boost: 10, fields: q.allFields });
+				q.term(term, { fields: q.allFields, wildcard: lunr.Query.wildcard.TRAILING });
+			});
+		});
+	}
+};

static/search-worker.js

@@ -0,0 +1,33 @@
+var logic = require('static/search-logic');
+var searchEngine;
+
+self.addEventListener('message', function(message) {
+	var data = message.data;
+
+	switch (data.name) {
+		case 'index data':
+			self.postMessage({
+				name: 'search engine ready',
+				searchEngine: logic.indexData(data.items)
+			});
+			break;
+
+		case 'load index':
+			self.postMessage({
+				name: 'search engine ready',
+				searchEngine: logic(data.index)
+			});
+			break;
+
+		case 'search':
+			self.postMessage({
+				name: 'search results',
+				results: logic.search(data.query),
+				query: data.query
+			});
+			break;
+
+		default:
+			console.info('Worker received message:', message);
+	}
+}, false);