chore(web-vis): install and configure prettier

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.{js}]
+max_line_length = 80
+indent_size = 2

.github/workflows/build.yml

@@ -2,14 +2,15 @@ name: build
 on:
   push:
     branches:
-    - master
+      - master
   pull_request:
 jobs:
-  build:
+  build_rust:
+    name: Build and validate Rust bits
     runs-on: macos-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - uses: dtolnay/rust-toolchain@stable
         with:
           toolchain: 1.68.1
@@ -25,3 +26,21 @@ jobs:
       - name: Running memory benchmarks as tests
         run: sh bench.sh
         working-directory: benches-mem
+
+  build_js:
+    name: Build and validate JS bits
+    runs-on: macos-latest
+
+    defaults:
+      run:
+        working-directory: web-vis/www/
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Installing dependencies
+        run: npm install
+      - name: Checking code style
+        run: npx prettier --check .

.gitignore

@@ -1,5 +1,4 @@
 .idea/
-.vscode/
 target/
 **/*.rs.bk
 bin/

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "tamasfe.even-better-toml",
+    "rust-lang.rust-analyzer"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.insertSpaces": true,
+  "editor.formatOnSave": true
+}

web-vis/www/.prettierignore

@@ -0,0 +1,2 @@
+node_modules
+dist

web-vis/www/.prettierrc.json

@@ -0,0 +1 @@
+{}

web-vis/www/README.md

@@ -2,7 +2,7 @@
 
   <h1><code>create-wasm-app</code></h1>
 
-  <strong>An <code>npm init</code> template for kick starting a project that uses NPM packages containing Rust-generated WebAssembly and bundles them with Webpack.</strong>
+<strong>An <code>npm init</code> template for kick starting a project that uses NPM packages containing Rust-generated WebAssembly and bundles them with Webpack.</strong>
 
   <p>
     <a href="https://travis-ci.org/rustwasm/create-wasm-app"><img src="https://img.shields.io/travis/rustwasm/create-wasm-app.svg?style=flat-square" alt="Build Status" /></a>
@@ -14,17 +14,18 @@
     <a href="https://discordapp.com/channels/442252698964721669/443151097398296587">Chat</a>
   </h3>
 
-  <sub>Built with 🦀🕸 by <a href="https://rustwasm.github.io/">The Rust and WebAssembly Working Group</a></sub>
+<sub>Built with 🦀🕸 by <a href="https://rustwasm.github.io/">The Rust and WebAssembly Working Group</a></sub>
+
 </div>
 
 ## About
 
 This template is designed for depending on NPM packages that contain
 Rust-generated WebAssembly and using them to create a Website.
 
-* Want to create an NPM package with Rust and WebAssembly? [Check out
+- Want to create an NPM package with Rust and WebAssembly? [Check out
   `wasm-pack-template`.](https://github.com/rustwasm/wasm-pack-template)
-* Want to make a monorepo-style Website without publishing to NPM? Check out
+- Want to make a monorepo-style Website without publishing to NPM? Check out
   [`rust-webpack-template`](https://github.com/rustwasm/rust-webpack-template)
   and/or
   [`rust-parcel-template`](https://github.com/rustwasm/rust-parcel-template).
@@ -44,18 +45,18 @@ npm init wasm-app
 - `index.js`: example js file with a comment showing how to import and use a wasm pkg
 - `package.json` and `package-lock.json`:
   - pulls in devDependencies for using webpack:
-      - [`webpack`](https://www.npmjs.com/package/webpack)
-      - [`webpack-cli`](https://www.npmjs.com/package/webpack-cli)
-      - [`webpack-dev-server`](https://www.npmjs.com/package/webpack-dev-server)
+    - [`webpack`](https://www.npmjs.com/package/webpack)
+    - [`webpack-cli`](https://www.npmjs.com/package/webpack-cli)
+    - [`webpack-dev-server`](https://www.npmjs.com/package/webpack-dev-server)
   - defines a `start` script to run `webpack-dev-server`
 - `webpack.config.js`: configuration file for bundling your js with webpack
 
 ## License
 
 Licensed under either of
 
-* Apache License, Version 2.0, ([LICENSE-APACHE](LICENSE-APACHE) or http://www.apache.org/licenses/LICENSE-2.0)
-* MIT license ([LICENSE-MIT](LICENSE-MIT) or http://opensource.org/licenses/MIT)
+- Apache License, Version 2.0, ([LICENSE-APACHE](LICENSE-APACHE) or http://www.apache.org/licenses/LICENSE-2.0)
+- MIT license ([LICENSE-MIT](LICENSE-MIT) or http://opensource.org/licenses/MIT)
 
 at your option.
 

web-vis/www/bootstrap.js

@@ -1,5 +1,6 @@
 // A dependency graph that contains any wasm must all be imported
 // asynchronously. This `bootstrap.js` file does the single async import, so
 // that no one else needs to worry about it again.
-import("./index.js")
-  .catch(e => console.error("Error importing `index.js`:", e));
+import("./index.js").catch((e) =>
+  console.error("Error importing `index.js`:", e)
+);

web-vis/www/index.html

@@ -1,15 +1,27 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>Hello wasm-pack!</title>
   </head>
   <body>
-    <noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
+    <noscript
+      >This page contains webassembly and javascript content, please enable
+      javascript in your browser.</noscript
+    >
     <div>
-      <input type="range" min="1" max="512" value="50" class="slider" id="vectorSize">
-      <button type="button" id="vectorSplitter">Split vector in the middle</button>
-    </div>  
+      <input
+        type="range"
+        min="1"
+        max="512"
+        value="50"
+        class="slider"
+        id="vectorSize"
+      />
+      <button type="button" id="vectorSplitter">
+        Split vector in the middle
+      </button>
+    </div>
     <!-- <svg id="branch" width="400" height="100"></svg> -->
     <div id="tree1"></div>
     <div id="tree2"></div>

web-vis/www/index.js

@@ -15,7 +15,7 @@ slider.addEventListener("change", function () {
   const vectors = wasm.get();
 
   const vecOne = JSON.parse(vectors[0]);
-  console.log(vecOne)
+  console.log(vecOne);
   // const vecTwo = JSON.parse(vectors[1]);
 
   rrbVecOne.set(vecOne);
@@ -24,7 +24,7 @@ slider.addEventListener("change", function () {
 
 const splitter = document.getElementById("vectorSplitter");
 splitter.addEventListener("click", () => {
-  wasm.split_off_vec(0, 167);  
+  wasm.split_off_vec(0, 167);
 
   const vectors = wasm.get();
 

web-vis/www/package.json

@@ -27,10 +27,11 @@
     "web-vis": "file:../pkg"
   },
   "devDependencies": {
+    "copy-webpack-plugin": "^11.0.0",
+    "prettier": "2.8.7",
     "webpack": "^5.76.3",
     "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.13.1",
-    "copy-webpack-plugin": "^11.0.0"
+    "webpack-dev-server": "^4.13.1"
   },
   "homepage": "https://github.com/rustwasm/create-wasm-app#readme"
 }

web-vis/www/rrbtree.js

@@ -102,7 +102,7 @@ export class RrbVec {
     this.updateTail(vec.tail);
   }
 
-  updateTree(source) {    
+  updateTree(source) {
     const nodes = this.root.descendants().reverse();
     const links = this.root.links();
 

web-vis/www/webpack.config.js

@@ -1,5 +1,5 @@
 const CopyWebpackPlugin = require("copy-webpack-plugin");
-const path = require('path');
+const path = require("path");
 
 module.exports = {
   entry: "./bootstrap.js",
@@ -13,9 +13,7 @@ module.exports = {
   },
   plugins: [
     new CopyWebpackPlugin({
-      patterns: [
-        { from: "index.html" }
-      ]
-    })
+      patterns: [{ from: "index.html" }],
+    }),
   ],
 };