Get Javascript building and working (#1)

* Add eslint to travis?

* do yarn

* clippy

* lockfile should be committed

* build the wasm js

* install install install

* Try slack notifications

* Work on serving the test site

* Rewrite JS to pass ESLint

* Clippy

.gitignore

@@ -9,5 +9,4 @@ node_modules
 scripts/execute_upload_federalist.sh
 test/federalist/*.txt
 test/*.st
-yarn.lock
 yarn-error.log

.travis.yml

@@ -1,14 +1,25 @@
 language: rust
 rust:
-  - stable
-  - beta
-  - nightly
+- stable
+- beta
+- nightly
 jobs:
   allow_failures:
-    - rust: nightly
+  - rust: nightly
   fast_finish: true
+notifications:
+  slack:
+    on_success: always
+    on_failure: always
+    secure: V1ohL6lW5aSpRnbOjV2PwFxjQMAwm0HNZkwhsowouYbiVIP2DiUJHkN74jdv5Tvn+c+NOQMVFT5eqFm3XejKqQKL0nf8NBlHs2v7PT9MeqsJaWVDlT5xihTtRfmfoD4sWxs50yVLG/gHdMjaO2yPXrwRWa9XcYrzGtUQorbd1PmEwarnCvS6NM4VWI+cUyXwuXBFWamD/mXFKzbrEt1MR6h4GXW/d+QqHE1QKPVlNV6ReDtLclicakFlE4EpqssMz/cZ3NKQi+o6kBNgDJGuoyw65HSpinxUtMdLTSQz0YqEkFryyEbVmxYZ09TZrR9zt6XrDE0ogMAFr8tCeVqgVQfxfByrD7/WIQZO3x02nY8LY9hAYSWRpeszKDFws4smpZ+hf+DS5CDerdG8Q0vtdie9i1Duf6Bn8Zj6Ac8bySDxZCBVaTgzzLK5mPjo09OOs7WIib/+eflGVvlTHTQ6lyfmhjuFvB2CSDwX9kWwFdYXtlMvheEWtDE9HgSnDBEQVNPsA6hS1lM5URnafUwTlm8QxfCzAxnwALwSHqnHiivoat7qk/nAnSRSHOThbmTS92t28d9YiniSN75yyDen3Ze2LCdzqJT+e4CJJS4FU0tHib0pKMvMc/Cozkh5Zu/ensQYuZfOQnFrIGwNtSqv4F75aBsw2/HsDyyzoW8CYCc=
+  email: false
+before_install:
+- cargo install wasm-pack
 before_script:
-  - rustup component add clippy
+- rustup component add clippy
+- yarn install
+- wasm-pack build --target web
 script:
-  - cargo clippy
-  - cargo test
+- cargo clippy -- -D warnings
+- cargo test
+- yarn eslint js/*

js/index.js

@@ -33,7 +33,7 @@ Handlebars.registerHelper(
 const prod = process.env.NODE_ENV === "production";
 const wasmUrl = prod
   ? "https://files.stork-search.net/stork.wasm"
-  : "http://localhost:8888/stork.wasm";
+  : "http://127.0.0.1:8080/stork.wasm";
 
 const wasmQueue = new WasmQueue();
 const entities = {};
@@ -50,9 +50,9 @@ const defaultConfig = {
     <li class="stork-result">
       <a href="{{entry.url}}">
           <p class="stork-title">{{entry.title}}</p>
-          {{#each result.excerpts}}
+          {{#each excerpts}}
             <p class="stork-excerpt">
-              ...{{ highlight value query_offset @queryLength}}...
+              ...{{ highlight text highlight_char_offset @queryLength}}...
             </p>
           {{/each}}
       </a>
@@ -64,16 +64,15 @@ function updateDom(name) {
     throw new Error("No name in updateDom call");
   }
 
-  const dom = new Dom();
   const entity = entities[name];
 
   if (entity.config.showProgress && entity.progress < 1) {
     if (!entity.elements.progress) {
-      entity.elements.progress = dom.create("div", {
+      entity.elements.progress = Dom.create("div", {
         classNames: ["stork-loader"]
       });
 
-      dom.add(entity.elements.progress, "afterend", entity.elements.input);
+      Dom.add(entity.elements.progress, "afterend", entity.elements.input);
     }
 
     entity.elements.progress.style.width = `${entity.progress * 100}%`;
@@ -89,7 +88,7 @@ function updateDom(name) {
   } else if (entity.query && entity.query.length < 3) {
     message = "...";
   } else if (entity.results) {
-    const l = entity.results.length;
+    const l = entity.hitCount;
     if (l === 0) {
       message = "No files found.";
     } else if (l === 1) {
@@ -100,24 +99,24 @@ function updateDom(name) {
   }
 
   if (!entity.elements.message) {
-    entity.elements.message = dom.create("div", {
+    entity.elements.message = Dom.create("div", {
       classNames: ["stork-message"]
     });
-    dom.add(entity.elements.message, "afterBegin", entity.elements.output);
+    Dom.add(entity.elements.message, "afterBegin", entity.elements.output);
   }
 
-  dom.setText(entity.elements.message, message);
+  Dom.setText(entity.elements.message, message);
 
   if (entity.results) {
     if (entity.results.length > 0) {
       if (!entity.elements.list) {
-        entity.elements.list = dom.create("ul", {
+        entity.elements.list = Dom.create("ul", {
           classNames: ["stork-results"]
         });
-        dom.add(entity.elements.list, "beforeEnd", entity.elements.output);
+        Dom.add(entity.elements.list, "beforeEnd", entity.elements.output);
       }
 
-      dom.clear(entity.elements.list);
+      Dom.clear(entity.elements.list);
 
       entity.results.forEach(result => {
         const listItem = entity.config.listItemTemplate(result, {
@@ -137,7 +136,7 @@ function updateDom(name) {
   if (!entity.query || entity.query.length === 0) {
     entity.elements.message = null;
     entity.elements.list = null;
-    dom.clear(entity.elements.output);
+    Dom.clear(entity.elements.output);
     entity.elements.output.classList.remove("stork-output-visible");
   } else {
     entity.elements.output.classList.add("stork-output-visible");
@@ -148,7 +147,7 @@ async function resolveSearch(index, query) {
   if (!wasmQueue.loaded) {
     return null;
   }
-  return Array.from(JSON.parse(search(index, query)));
+  return JSON.parse(search(index, query));
 }
 
 function handleInputEvent(event) {
@@ -177,7 +176,8 @@ function performSearch(name) {
   const { query } = entities[name];
   if (query && query.length >= 3) {
     resolveSearch(entities[name].index, query).then(results => {
-      entities[name].results = results;
+      entities[name].results = results.results;
+      entities[name].hitCount = results.total_hit_count;
       updateDom(name);
     });
   } else {
@@ -247,7 +247,7 @@ function calculateOverriddenConfig(original, overrides) {
   return output;
 }
 
-export default function register(name, url, config = {}) {
+export function register(name, url, config = {}) {
   const configOverride = calculateOverriddenConfig(defaultConfig, config);
   entities[name] = { config: configOverride, elements: {} };
   entities[name].config.listItemTemplate = Handlebars.compile(
@@ -282,3 +282,7 @@ export default function register(name, url, config = {}) {
 
   entities[name].elements.input.addEventListener("input", handleInputEvent);
 }
+
+export default {
+  register
+};

package.json

@@ -22,17 +22,28 @@
     "@open-wc/webpack-import-meta-loader": "^0.4.1",
     "@wasm-tool/wasm-pack-plugin": "^0.4.2",
     "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^5.1.1",
     "eslint": "^6.1.0",
     "eslint-config-airbnb-base": "^14.0.0",
     "eslint-config-prettier": "^6.10.0",
     "eslint-loader": "^3.0.3",
     "eslint-plugin-import": "^2.20.1",
     "eslint-plugin-prettier": "^3.1.2",
+    "http-server": "^0.12.1",
     "prettier": "^1.19.1",
     "webpack": "^4.41.4",
     "webpack-cli": "^3.3.10"
   },
   "dependencies": {
     "handlebars": "^4.5.3"
+  },
+  "scripts": {
+    "build:wasm": "wasm-pack build --target web",
+    "build:test-index": "cargo run -- --build test/federalist.toml && cp test/federalist.st dist",
+    "build:js": "yarn webpack --mode=development",
+    "build": "yarn build:wasm && yarn build:test-index && yarn build:js",
+
+    "lint": "yarn eslint js/*",
+    "serve": "yarn http-server ./dist -o"
   }
 }

src/lib.rs

@@ -1,7 +1,7 @@
 pub mod config;
-pub mod searcher;
 pub mod index_analyzer;
 mod index_versions;
+pub mod searcher;
 
 use config::*;
 use console_error_panic_hook;
@@ -15,15 +15,22 @@ use LatestVersion::structs::Index;
 type IndexFromFile = [u8];
 type Fields = Option<HashMap<String, String>>;
 
+#[wasm_bindgen]
+extern "C" {
+    #[wasm_bindgen(js_namespace = console)]
+    fn log(s: &str);
+}
+
 #[wasm_bindgen]
 pub fn search(index: &IndexFromFile, query: String) -> String {
     console_error_panic_hook::set_once();
-    serde_json::to_string(&searcher::search(index, &query)).unwrap()
+    let search_output = searcher::search(index, &query);
+    serde_json::to_string(&search_output).unwrap_or_else(|_| "{}".to_string())
 }
 
 #[wasm_bindgen]
 pub fn get_index_version(index: &IndexFromFile) -> String {
-    return index_analyzer::get_index_version(index);
+    index_analyzer::get_index_version(index)
 }
 
 pub fn build(config: &Config) -> Index {

src/searcher/mod.rs

@@ -4,27 +4,27 @@ use crate::IndexFromFile;
 use serde::Serialize;
 use crate::index_analyzer::get_index_version;
 
-#[derive(Serialize)]
+#[derive(Serialize, Debug)]
 pub struct SearchOutput {
     pub results: Vec<OutputResult>,
     pub total_hit_count: usize,
 }
 
-#[derive(Serialize, Clone)]
+#[derive(Serialize, Clone, Debug)]
 pub struct OutputEntry {
     pub url: String,
     pub title: String,
     pub fields: Fields,
 }
 
-#[derive(Serialize, Clone)]
+#[derive(Serialize, Clone, Debug)]
 pub struct OutputResult {
     pub entry: OutputEntry,
     pub excerpts: Vec<Excerpt>,
     pub title_highlight_char_offset: Option<usize>,
 }
 
-#[derive(Serialize, Clone)]
+#[derive(Serialize, Clone, Debug)]
 pub struct Excerpt {
     pub text: String,
     pub highlight_char_offset: usize,

webpack.config.js

@@ -1,10 +1,10 @@
 const path = require("path");
+const CopyPlugin = require("copy-webpack-plugin");
 const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 
 const dist = path.resolve(__dirname, "dist");
 
 module.exports = {
-  mode: "production",
   entry: {
     index: "./js/index.js"
   },
@@ -14,7 +14,29 @@ module.exports = {
     library: "stork",
     chunkFilename: "storkmodule-[id].js"
   },
-  plugins: [new CleanWebpackPlugin()],
+  plugins: [
+    new CleanWebpackPlugin(),
+    new CopyPlugin(
+      [
+        path.resolve(__dirname, "dist"),
+        {
+          from: path.resolve(__dirname, "pkg", "stork_bg.wasm"),
+          to: "stork.wasm"
+        },
+        {
+          from: path.resolve(__dirname, "test/static", "*"),
+          to: ".",
+          flatten: true,
+        },
+        {
+          from: path.resolve(__dirname, "test", "federalist.st"),
+          to: ".",
+          flatten: true,
+        },
+      ],
+      { copyUnmodified: true }
+    )
+  ],
   module: {
     rules: [
       {