googlechromelabs/wasi-fs-access

This is a demo shell powered by WebAssembly, WASI, Asyncify and File System Access API.

wasi-fs-access

What

This is a demo shell powered by WebAssembly, WASI, Asyncify and File System Access API.

You can access the live version here: https://wasi.rreverser.com/

Or watch a video showing some of the features:

How

It provides WASI bindings implementation that proxies any filesystem requests to a real, host filesystem. This allows apps built in languages like C, C++, Rust and others to be compiled to WebAssembly and work as usual within a browser sandbox, accessing and manipulating files in a "real world".

Since WASI APIs are synchronous by nature, but Web APIs are traditionally asynchronous to avoid blocking the main thread, Asyncify is used to bridge the two types of APIs together. Asyncify is a feature created as part of Emscripten and later extended to work with arbitrary WebAssembly files with the help of a custom JavaScript wrapper.

A Rust port of coreutils with some patches was chosen for the demo purposes, but it should be possible to extract and reuse same bindings for any applications compiled for the WebAssembly + WASI target.

Note that some commands in the demo might not work due to either limitations of the WASI itself, limitations of the File System Access API (such as an absent support for symlinks), or simply due to hardcoded assumptions about the target system in the used coreutils codebase itself. Most of those limitations can be easily worked around or will be naturally fixed as both APIs develop over time.

Want to learn more?

Read up a blog post about Asyncify: https://web.dev/asyncify/

Or check out my presentation from the WebAssembly Live! here: https://www.slideshare.net/RReverser/asyncifying-webassembly-for-the-modern-web

And / or the talk: https://youtu.be/pzIJYAbcbf8?t=82

wasi-fs-access's Issues

Feature request: integrate new working directory functionality

The working directory error message points to a solved upstream issue https://github.com/WebAssembly/WASI/issues/303

miserable unbuffered write performance

I liked the idea of the project. So I compiled may program for wasi.

cargo wasi build --release
./wasm-opt --asyncify -O3 rdm4-bin.wasi.wasm -o rdm4.wasm

The problem is my program runs for about 120s (Windows 450ms and Linux 50 ms). On https://webassembly.sh/ it takes about 4s.
The problematic code was serde_json::to_writer_pretty (109KB output file). Using BufWriter made it comparable to the webassembly.sh runtime at least when using navigator.storage.getDirectory(). Writing to a real folder each new file write_all call takes additional ~1s.

---

So I tested on wasi.rreverser.com:

dd if=/dev/urandom of=sample.data bs=1M count=10

mount /tmp
mount /dst

• On Windows Chrome the cp command can not copy files larger than 3MB (Chromium on Linux works fine, but is super slow for an m.2 ssd ~2MB/s

• cat can copy a 20MB file even on Windows (cat /tmp/sample.data > /dst/sample.test34)

• Errors on Windows include:

  • An attempt was made to write to a file or directory which could not be modified due to the state of the underlying filesystem.
  • Cannot close a ERRORED writable stream

ls: error: '.': No such file or directory

/sandbox$ mount /mount/point
Successfully mounted (...host path...)/opt at /mount/point.
/sandbox$ df -a
Filesystem          1k-blocks         Used    Available  Use% Mounted on       
wasi                        0            0            0     - /sandbox        
wasi                        0            0            0     - /mount/point    
/sandbox$ cd /mount/point
/mount/point$ ls
ls: error: '.': No such file or directory
Exit code: 1

Property 'getSystemDirectory' does not exist on type

When i can get build i get this error

src/browser.ts:28:31 - error TS2339: Property 'getSystemDirectory' does not exist on type '{ new (): FileSystemDirectoryHandle; prototype: FileSystemDirectoryHandle; }'.

28 FileSystemDirectoryHandle.getSystemDirectory({
~~~~~~~~~~~~~~~~~~

src/browser.ts:46:36 - error TS2552: Cannot find name 'FileSystemHandleKind'. Did you mean 'FileSystemHandleUnion'?

46 get(this: FileSystemHandle): FileSystemHandleKind {
~~~~~~~~~~~~~~~~~~~~

How get mount point in docker ?

Hi.
I took a docker container from emscripten.

Launched the container.
Made a server for this project.

Gave access to the directory of its file system.

How can I use find this open directory from my filesystem? I want to build an application using the docker environment.

Fetch Emscripten docker image

docker pull emscripten/emsdk:2.0.25

Create the container and mount ~/wasm to /src in the container

docker run -it -d -p 80:80 -p 7319:7319 --name wasm --volume ~/wasm:/src  emscripten/emsdk:2.0.25

Go into your container

docker exec -it wasm bash

git clone https://github.com/ZababurinSergei/wasi-fs-access

cd wasi-fs-access

npm install && npm run start

I get console there i get my file system

But how get my file system in docker ?

Merge with webassembly.sh?

There is a similar project webassembly.sh. This project has great file system support and That project has couple of packages from WAPI (python, grep, jq, ...) Maybe contribute this project features to that or pull WAPI from that project is a good idea?

error build project with error Object is of type 'unknown'.

I want build this project.

1. yarn install
2. yarn build

And i getting this error

src/browser.ts:307:20 - error TS2571: Object is of type 'unknown'.

307       term.writeln(err.message);
                       ~~~

src/fileSystem.ts:171:15 - error TS2571: Object is of type 'unknown'.

171           if (err.name === 'TypeMismatchError') {
                  ~~~

src/fileSystem.ts:184:13 - error TS2571: Object is of type 'unknown'.

184         if (err.name === 'TypeMismatchError') {
                ~~~

src/test.ts:134:25 - error TS2571: Object is of type 'unknown'.

134               message = err.message;
                            ~~~


Found 4 errors.

Howe can i resolve this error ?