feat: support client api to wasm (#426)

* feat: support client api to wasm

* fix: cargo fmt

* fix: delete github config

* fix: readme

* feat: add wasm ci

* fix: code review

* fix: add test

* fix: add sign in test

* fix: test error

---------

Co-authored-by: root <root@DESKTOP-RCFUF7L>
Co-authored-by: nathan <[email protected]>

.github/workflows/wasm_ci.yml

@@ -0,0 +1,40 @@
+name: WASM CI
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    types: [ opened, synchronize, reopened ]
+    branches: [ main ]
+
+env:
+  NODE_VERSION: '20.12.0'
+  RUST_TOOLCHAIN: "1.75"
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions-rs/toolchain@v1
+        with:
+          toolchain: ${{ env.RUST_TOOLCHAIN }}
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - uses: Swatinem/rust-cache@v2
+        with:
+          workspaces: |
+            AppFlowy-Cloud
+
+      - name: Install wasm-pack
+        run: npm install -g wasm-pack
+
+      - name: Build with wasm-pack
+        run: wasm-pack build
+        working-directory: ./libs/client-api-wasm

.github/workflows/wasm_publish.yml

@@ -0,0 +1,61 @@
+name: Manual NPM Package Publish
+
+on:
+  workflow_dispatch:
+    inputs:
+      working_directory:
+        description: 'Working directory (e.g., libs/client-api-wasm)'
+        required: true
+        default: 'libs/client-api-wasm'
+      package_name:
+        description: 'Package name'
+        required: true
+        default: '@appflowyinc/client-api-wasm'
+      package_version:
+        description: 'Package version'
+        required: true
+env:
+  NODE_VERSION: '20.12.0'
+  RUST_TOOLCHAIN: "1.75"
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions-rs/toolchain@v1
+        with:
+          toolchain: ${{ env.RUST_TOOLCHAIN }}
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - uses: Swatinem/rust-cache@v2
+        with:
+          workspaces: |
+            AppFlowy-Cloud
+
+      - name: Install wasm-pack
+        run: npm install -g wasm-pack
+
+      - name: Build with wasm-pack
+        run: wasm-pack build
+        working-directory: ${{ github.event.inputs.working_directory }}
+
+      - name: Update package.json
+        run: |
+          cd ${{ github.event.inputs.working_directory }}/pkg
+          jq '.name = "${{ github.event.inputs.package_name }}" | .version = "${{ github.event.inputs.package_version }}"' package.json > package.json.tmp
+          mv package.json.tmp package.json
+
+      - name: Configure npm for wasm-pack
+        run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > ${{ github.event.inputs.working_directory }}/pkg/.npmrc
+
+      - name: Publish package
+        run: |
+          npm config set access public
+          wasm-pack publish
+        working-directory: ${{ github.event.inputs.working_directory }}/pkg
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

Cargo.toml

@@ -144,6 +144,7 @@ members = [
     # services
     "services/collab-history",
     "services/realtime",
+    "libs/client-api-wasm"
 ]
 
 [workspace.dependencies]

libs/app-error/Cargo.toml

@@ -34,4 +34,6 @@ gotrue_error= []
 bincode_error = ["bincode"]
 
 [target.'cfg(target_arch = "wasm32")'.dependencies]
-getrandom = { version = "0.2", features = ["js"]}
+getrandom = { version = "0.2", features = ["js"]}
+tsify = "0.4.5"
+wasm-bindgen = "0.2.84"

libs/app-error/src/lib.rs

@@ -231,6 +231,7 @@ impl From<crate::gotrue::GoTrueError> for AppError {
   }
 }
 
+#[cfg_attr(target_arch = "wasm32", derive(tsify::Tsify))]
 #[derive(
   Eq,
   PartialEq,

libs/client-api-wasm/.gitignore

@@ -0,0 +1,6 @@
+/target
+**/*.rs.bk
+Cargo.lock
+bin/
+pkg/
+wasm-pack.log

libs/client-api-wasm/Cargo.toml

@@ -0,0 +1,40 @@
+[package]
+name = "client-api-wasm"
+version = "0.1.0"
+authors = ["Admin"]
+edition = "2018"
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+
+[features]
+default = []
+
+
+[dependencies]
+wasm-bindgen = "0.2.84"
+
+# The `console_error_panic_hook` crate provides better debugging of panics by
+# logging them with `console.error`. This is great for development, but requires
+# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
+# code size when deploying.
+console_error_panic_hook = { version = "0.1.7", optional = true }
+log = "0.4.20"
+serde = "1.0.197"
+serde_json = "1.0.64"
+client-api = { path = "../client-api" }
+lazy_static = "1.4.0"
+wasm-bindgen-futures = "0.4.20"
+tsify = "0.4.5"
+tracing.workspace = true
+tracing-core = { version = "0.1.32" }
+tracing-wasm = "0.2.1"
+uuid.workspace = true
+
+[dev-dependencies]
+wasm-bindgen-test = "0.3.34"
+
+[profile.release]
+# Tell `rustc` to optimize for small code size.
+opt-level = "s"

libs/client-api-wasm/README.md

@@ -0,0 +1,65 @@
+<div align="center">
+
+  <h1><code>Client API WASM</code></h1>
+
+  <strong>Client-API to WebAssembly Compiler</strong>
+
+</div>
+
+## 🚴 Usage
+
+### 🐑 Prepare
+
+```bash
+# Clone the repository (if you haven't already)
+git clone https://github.com/AppFlowy-IO/AppFlowy-Cloud.git
+
+# Navigate to the client-for-wasm directory
+cd libs/client-api-wasm
+
+# Install the dependencies (if you haven't already)
+cargo install wasm-pack
+```
+
+### 🛠️ Build with `wasm-pack build`
+
+```
+wasm-pack build
+```
+
+### 🔬 Test in Headless Browsers with `wasm-pack test`
+
+```bash
+# Ensure you have geckodriver installed
+wasm-pack test --headless --firefox
+
+# or
+# Ensure you have chromedriver installed
+# https://googlechromelabs.github.io/chrome-for-testing/
+# Example (Linux):
+# 1. wget https://storage.googleapis.com/chrome-for-testing-public/123.0.6312.86/linux64/chromedriver-linux64.zip
+# 2. unzip chromedriver-linux64.zip
+# 3. sudo mv chromedriver /usr/local/bin
+# 4. chromedriver -v
+# If you see the version, then you have successfully installed chromedriver
+# Note: the version of chromedriver should match the version of chrome installed on your system
+wasm-pack test --headless --chrome
+```
+
+### 🎁 Publish to NPM with ~~`wasm-pack publish`~~
+
+##### Don't publish in local development, only publish in github actions
+
+```
+wasm-pack publish
+```
+
+### 📦 Use your package as a dependency
+
+```
+npm install --save @appflowy/client-api-for-wasm
+```
+
+### 📝 How to use the package in development?
+
+See the [README.md](https://github.com/AppFlowy-IO/AppFlowy/tree/main/frontend/appflowy_web_app/README.md) in the AppFlowy Repository.