From e9a6f297ba8d9950dc9ea2402b5fd084f37aedfa Mon Sep 17 00:00:00 2001
From: Peter Pan <littlepanzh@gmail.com>
Date: Sun, 8 Mar 2020 23:28:06 +0800
Subject: [PATCH] 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                                     |  4 ++++
 frontend/README.md                              | 17 +++++++++++++++++
 frontend/README_cn.md                           | 16 ++++++++++++++++
 .../HighDimensionalChart.tsx                    |  2 ++
 frontend/components/ScalarsPage/ScalarChart.tsx |  4 ++++
 5 files changed, 43 insertions(+)

diff --git a/.travis.yml b/.travis.yml
index d88e48b5..08f58170 100644
--- a/.travis.yml
+++ b/.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
diff --git a/frontend/README.md b/frontend/README.md
index 57b2b08e..734d934a 100644
--- a/frontend/README.md
+++ b/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>
diff --git a/frontend/README_cn.md b/frontend/README_cn.md
index e666d76e..99fd3e65 100644
--- a/frontend/README_cn.md
+++ b/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
diff --git a/frontend/components/HighDimensionalPage/HighDimensionalChart.tsx b/frontend/components/HighDimensionalPage/HighDimensionalChart.tsx
index 8acf5b60..1d049dd0 100644
--- a/frontend/components/HighDimensionalPage/HighDimensionalChart.tsx
+++ b/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[],
diff --git a/frontend/components/ScalarsPage/ScalarChart.tsx b/frontend/components/ScalarsPage/ScalarChart.tsx
index 7c916656..96653b62 100644
--- a/frontend/components/ScalarsPage/ScalarChart.tsx
+++ b/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
     );
-- 
GitLab