build: add wasm-pack to build webassembly & update readme (#579)

* chore: use wasm to handle datasets

* style: ts ignore wasm

* build: fix travis-ci

* build: fix travis-ci

* build: disable prompt during rustup install

* build: add rustc to path after install

* build: cache cargo

.travis.yml

@@ -62,12 +62,16 @@ jobs:
       cache:
         - npm
         - yarn
+        - cargo
       env:
         - PUBLIC_PATH="/app"
         - API_URL="/api"
       before_install:
         - cd frontend
       install:
+        - curl https://sh.rustup.rs -sSf | sh -s -- --default-toolchain nightly -y
+        - source $HOME/.cargo/env
+        - curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
         - yarn
       script:
         - yarn lint

frontend/README.md

@@ -50,6 +50,22 @@ You can change the port with `PORT` environment variable:
 PORT=3000 yarn dev
 ```
 
+### WebAssembly
+
+WebAssembly is **DISABLED** by default under development environment.
+
+If you want to develop wasm features, you must have [Rust](https://www.rust-lang.org/) and [Cargo](https://doc.rust-lang.org/cargo/) installed.
+
+Using [rustup](https://rustup.rs/) to install them.
+
+Then install [wasm-pack](https://rustwasm.github.io/wasm-pack/installer/) to build rust code to wasm binaries.
+
+When environment is ready, start the development server with following command:
+
+```bash
+yarn dev:wasm
+```
+
 ## Build & Deploy
 
 ```bash
@@ -71,6 +87,7 @@ This project is based on following projects:
 - [Next.js](https://nextjs.org/)
 - [React](https://reactjs.org/)
 - [ECharts](https://echarts.apache.org/)
+- [wasm-pack](https://rustwasm.github.io/wasm-pack/)
 
 ## Author
 <table><tr><td align="center"><a href="https://github.com/PeterPanZH"><img src="https://avatars0.githubusercontent.com/u/3366499?s=460&v=4" width="120px;" alt="PeterPanZH"/><br /><sub><b>PeterPanZH</b></sub></a></td><td align="center"><a href="https://github.com/Niandalu"><img src="https://avatars1.githubusercontent.com/u/6406875?s=460&v=4" width="120px;" alt="Niandalu"/><br /><sub><b>Niandalu</b></sub></a></td></tr></table>

frontend/README_cn.md

@@ -50,6 +50,22 @@ yarn dev
 PORT=3000 yarn dev
 ```
 
+### WebAssembly
+
+在开发环境中，WebAssembly 默认是**禁用**的。
+
+如果你希望开发 wasm 功能，你必须安装 [Rust](https://www.rust-lang.org/) 和 [Cargo](https://doc.rust-lang.org/cargo/)。
+
+使用 [rustup](https://rustup.rs/) 来安装它们。
+
+然后安装 [wasm-pack](https://rustwasm.github.io/wasm-pack/installer/) 来将 rust 代码编译成 wasm 可执行文件。
+
+当环境准备好后，使用下面的命令启动开发环境：
+
+```bash
+yarn dev:wasm
+```
+
 ## 编译和部署
 
 ```bash

frontend/components/HighDimensionalPage/HighDimensionalChart.tsx

@@ -10,6 +10,8 @@ import ScatterChart from '~/components/ScatterChart';
 const height = rem(600);
 
 const divideWasm = () =>
+    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+    // @ts-ignore
     import('~/wasm/pkg').then(({divide}) => (params: DivideParams) =>
         (divide(params.points, params.labels, !!params.visibility, params.keyword ?? '') as unknown) as [
             Point[],

frontend/components/ScalarsPage/ScalarChart.tsx

@@ -25,10 +25,14 @@ const width = em(430);
 const height = em(320);
 
 const smoothWasm = () =>
+    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+    // @ts-ignore
     import('~/wasm/pkg').then(({transform}) => (params: TransformParams) =>
         (transform(params.datasets, params.smoothing) as unknown) as Dataset[]
     );
 const rangeWasm = () =>
+    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+    // @ts-ignore
     import('~/wasm/pkg').then(({range}) => (params: RangeParams) =>
         (range(params.datasets, params.outlier) as unknown) as Range
     );