Skip to content

Commit

Permalink
Improve README documentation for electron & web bindings
Browse files Browse the repository at this point in the history
  • Loading branch information
touilleMan committed Oct 3, 2024
1 parent c438b49 commit 752cd81
Show file tree
Hide file tree
Showing 3 changed files with 111 additions and 49 deletions.
32 changes: 32 additions & 0 deletions bindings/electron/README.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,41 @@
# libparsec-electron-bindings

## Build

tl;dr: `../../make.py er`

```shell
# First run (to install dependencies)
../../make.py electron-dev-install
# or just
../../make.py ei
# Subsequent runs
../../make.py electron-dev-rebuild
# Or just
../../make.py er
```

Basically `make.py` wraps the following commands:

```shell
npm install
# (re)generate index.node
npm run build:dev
# Or for release
npm run build:release
```

## Testing (the simple way)

Start node shell

```shell
node
```

Then import libparsec package and you're good !

```javascript
libparsec = require("./bindings/electron/dist/libparsec");
await libparsec.listAvailableDevices("/foo")
```
84 changes: 35 additions & 49 deletions bindings/web/README.md
Original file line number Diff line number Diff line change
@@ -1,67 +1,53 @@
<div align="center">
# libparsec-electron-bindings

<h1><code>wasm-pack-template</code></h1>
Remember to have [`wasm-pack`](https://github.com/rustwasm/wasm-pack) installed !

<strong>A template for kick starting a Rust and WebAssembly project using <a href="https://github.com/rustwasm/wasm-pack">wasm-pack</a>.</strong>

<p>
<a href="https://travis-ci.org/rustwasm/wasm-pack-template"><img src="https://img.shields.io/travis/rustwasm/wasm-pack-template.svg?style=flat-square" alt="Build Status" /></a>
</p>

<h3>
<a href="https://rustwasm.github.io/docs/wasm-pack/tutorials/npm-browser-packages/index.html">Tutorial</a>
<span> | </span>
<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>
</div>
```shell
curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
```

## About
## Build

[**📚 Read this template tutorial! 📚**][template-docs]
tl;dr: `../../make.py wr`

This template is designed for compiling Rust libraries into WebAssembly and
publishing the resulting package to NPM.
```shell
# First run (to install dependencies)
../../make.py web-dev-install
# or just
../../make.py wi
# Subsequent runs
../../make.py web-dev-rebuild
# Or just
../../make.py wr
```

Be sure to check out [other `wasm-pack` tutorials online][tutorials] for other
templates and usages of `wasm-pack`.
Basically `make.py` wraps the following commands:

[tutorials]: https://rustwasm.github.io/docs/wasm-pack/tutorials/index.html
[template-docs]: https://rustwasm.github.io/docs/wasm-pack/tutorials/npm-browser-packages/index.html
```shell
npm install
# (re)generate index.node
npm run build:dev
# Or for release
npm run build:release
```

## 🚴 Usage
The internal build command itself relies on [`wasm-pack`](https://github.com/rustwasm/wasm-pack).

### 🐑 Use `cargo generate` to Clone this Template
## Interactive testing

[Learn more about `cargo generate` here.](https://github.com/ashleygwilliams/cargo-generate)
To easily play with the bindings:

```
cargo generate --git https://github.com/rustwasm/wasm-pack-template.git --name my-project
cd my-project
```shell
python ./scripts/liveplay.py

Check warning on line 41 in bindings/web/README.md

View workflow job for this annotation

GitHub Actions / spelling / cspell

Unknown word (liveplay)
```

### 🛠️ Build with `wasm-pack build`
This starts a server exposing a web page with the bindings, from there you
can open your browser console and start playing with `libparsec`.

```
wasm-pack build
```
## Testing

### 🔬 Test in Headless Browsers with `wasm-pack test`
There is not much tests for now, but you can use them with:

```
```shell
wasm-pack test --headless --firefox
```

### 🎁 Publish to NPM with `wasm-pack publish`

```
wasm-pack publish
```

## 🔋 Batteries Included

* [`wasm-bindgen`](https://github.com/rustwasm/wasm-bindgen) for communicating
between WebAssembly and JavaScript.
* [`console_error_panic_hook`](https://github.com/rustwasm/console_error_panic_hook)
for logging panic messages to the developer console.
44 changes: 44 additions & 0 deletions bindings/web/scripts/liveplay.py
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
#! /usr/bin/env python
# Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS


import sys
import subprocess
from pathlib import Path


BASEDIR = Path(__file__).parent
PKG_DIR = BASEDIR / "../pkg"


INDEX_HTML_SRC = """<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
</head>
<body>
<script src="libparsec_bindings_web.js" type="module"></script>
<script type="module">
console.log("loading libparsec...");
import initModule, * as libparsec from './libparsec_bindings_web.js';
await initModule();
libparsec.initLogger();
window.libparsec = libparsec;
console.log("libparsec is loaded !");
</script>
<p>Open you browser console and start with e.g.
<code>libparsec.listAvailableDevices(&quot;/foo&quot;)</code></p>
</body>
</html>
"""


if __name__ == "__main__":
if not PKG_DIR.exists():
raise SystemExit(
f"{PKG_DIR} doesn't exist, you should build the bindings with `make.py` first !"
)
print(f"Creating {PKG_DIR}/index.html...")
(PKG_DIR / "index.html").write_text(INDEX_HTML_SRC)

subprocess.check_call([sys.executable, "-m", "http.server", "8000"], cwd=PKG_DIR)

0 comments on commit 752cd81

Please sign in to comment.