wasmerio / webassembly.sh

Open-source and installable PWA terminal powered by WebAssembly, WAPM, and Wasmer-JS 🖥

WebAssembly.sh

Open-source and installable Progressive Web App (PWA) terminal fully powered by WebAssembly and Wasmer-JS, that uses the WebAssembly Package Manager (WAPM) and local files to run server-side Wasm WASI modules in a shell-like interface 🖥

Website - Announcement Article

Contributing

This project follows the all-contributors specification.

Also, please see our Code of Conduct.

This project is built using preact-cli. As such, follows the standard workflow from preact-cli.

Contributions of any kind are welcome! 👍

License

Licensed under MIT

webassembly.sh's Issues

Support Asian Scripts

When I type

echo Hello World

that is displayed perfectly. But Asian (Malayalam) text - which the browser supports - is not getting rendered properly.

echo ജയദേവൻ

This happens in both Firefox and Chrome.

Keep Line History in Indexed DB

relates to #26

Would be cool if command history was kept in indexed db between sessions

Cache lowering modules

This should be done here. Need to write modules to wasmfs for this

Improvements for @wasmer/wasm-terminal fetchCommand

#38 Introuduced some awesome changes for the wapm query. Would be great if we could have the following for fetchCommand:

fetchCommand('command-name', {
version: '0.1.0',
returnAllBinaries: true
})

"No such file or directory (os error 44)"

a test input
(Thanks for the gif at #58 . )
I have tried with Chrome at https://webassembly.sh/ :

(drag and drop a file, e.g. icon_16.png)
ls /tmp
viu /tmp/icon_16.png

and the result is

$ 
File uploaded successfully to /tmp
→ /tmp/icon_16.png
$ ls /tmp
/tmp
$ viu /tmp/icon_16.png
No such file or directory (os error 44)

Deprecation warning in Chrome

Whenever I pipe output from one program to another, I would get this warning:

[Deprecation] SharedArrayBuffer will require cross-origin isolation as of M91, around May 2021

Steps to reproduce the issue:

1. Go to https://webassembly.sh/ and type echo hello | lolcat.
2. check chrome dev tools and you should see the mentioned deprecation warning.

Make the browser compatibility note more noticable

Since we autofocus on the terminal, I recently didn't realize a command would not work, because I didn't notice mobile chrome doesn't have full compatibility.

We should possibly bold message, or somehow make it more apparent, especially when the mobile keyboard is open

cowsay --random -> thread main panicked ... unreachable code ... rand-0.4.6

$ RUST_BACKTRACE=1 cowsay --random ....
thread 'main' panicked at 'internal error: entered unreachable code', /Users/syrusakbary/.cargo/registry/src/github.com-1ecc6299db9ec823/rand-0.4.6/src/jitter.rs:703:9
stack backtrace:

I was playing around, found this glitch and I though of signaling it.

Feel free to close this.

Why stdin is implemented via alert-like prompt?

I think xterm has the ability to be a complete terminal. Is there a specific reason for this? Or just for simplicity of implementation?

Emoji rendering in Safari / Firefox on OSX

Both Safari and Firefox on OSX render half a heart! This is in the about message.

This is a minor bug

edit: this happens on Firefox on Android too

Set up Infrastructure for the project

We should have some infrastrucutre to build and test. And Netlify should be set up to serve the app 😄

Write a command editor command

• to open a file picker that only allows uploading a wasm file, and assigning a command name to it
• overwrite a wasm file that is already uploaded
• delete a an uploaded wasm file

Make uploading wasm (and other) files more convenient

When working on https://wapm.io/package/vshymanskyy/wasm3 , I found that drag'n'dropping wasm files will just install the wasm file to wapm, but it seems that the file is not accessible through filesystem.

If I rename the file to .bin, the shell says it's available through /tmp/, but I don't see it there using ls. This is probably a bug.

The only way to do it (for me), was using curl command as described in the Readme.
But in this case the file has to be hosted somewhere.

"Error: undefined is not a function" when trying to run wasm binary

I tried running a wasm binary built with the Go compiler. I am able to run it locally with wasmer:

> wasmer run hello-go.wasm
Hello world!

However, I get an error when trying to run it with WebAssembly.sh:

$ hello-go
Error: undefined is not a function

Am I doing something wrong?

Fix version listed on Welcome

It's displaying the wrong version on the welcome. Would also be nice to bump the package version as well :)

Write some tests

Would be good to have some visual diff / golden tests that way we make sure nothing is breaking 😄

Write an about command

A command wtih an in-depth description of the shell, with links to the soruce and wasmer 😄

Other ABI

It would be great if we could run other ABI modules in webassembly.sh.

Have you planned to do it ?

Similar issue : #74

Add @wasmer/wasm-terminal version as well in welcome

Just so people can reason about what version is what 😄

Keep Downloaded / Uploaded Commands in IndexedDB

Would be super convienient!

Can't run a simple WASI executable?

Steps to reproduce

(1) Create a WASI executable by rustc.

wasi-hello.rs:

fn main() {
    println!("hello, world!");
}

rustc -O --target wasm32-wasi ./wasi-hello.rs

(2) Upload the WASI executable onto https://webassembly.sh/.

(3) Then run wasi-hello on webassembly.sh.

Expected result

Should print hello, world! on webassembly.sh.

Actual result

Nothing is printed.
And the devloper console of Chrome reports two errors:

TypeError: WebAssembly.instantiate(): Import #0 module="wasi_snapshot_preview1" error: module is not an object or function
    at b.<anonymous> (blob:https://webassembly.sh/ee16f055-1530-4ea8-b7ae-c2184a77ce81:412)
    at d (blob:https://webassembly.sh/ee16f055-1530-4ea8-b7ae-c2184a77ce81:18)
    at Object.next (blob:https://webassembly.sh/ee16f055-1530-4ea8-b7ae-c2184a77ce81:16)
    at blob:https://webassembly.sh/ee16f055-1530-4ea8-b7ae-c2184a77ce81:16
    at new Promise (<anonymous>)
    at Db (blob:https://webassembly.sh/ee16f055-1530-4ea8-b7ae-c2184a77ce81:16)
    at b.run (blob:https://webassembly.sh/ee16f055-1530-4ea8-b7ae-c2184a77ce81:411)
    at a.<anonymous> (blob:https://webassembly.sh/ee16f055-1530-4ea8-b7ae-c2184a77ce81:416)
    at d (blob:https://webassembly.sh/ee16f055-1530-4ea8-b7ae-c2184a77ce81:18)
    at Object.next (blob:https://webassembly.sh/ee16f055-1530-4ea8-b7ae-c2184a77ce81:16)
(anonymous) @ blob:https://webassembly.sh/ee16f055-1530-4ea8-b7ae-c2184a77ce81:417
d @ blob:https://webassembly.sh/ee16f055-1530-4ea8-b7ae-c2184a77ce81:18
(anonymous) @ blob:https://webassembly.sh/ee16f055-1530-4ea8-b7ae-c2184a77ce81:16
h @ blob:https://webassembly.sh/ee16f055-1530-4ea8-b7ae-c2184a77ce81:16
Promise.then (async)
k @ blob:https://webassembly.sh/ee16f055-1530-4ea8-b7ae-c2184a77ce81:16
(anonymous) @ blob:https://webassembly.sh/ee16f055-1530-4ea8-b7ae-c2184a77ce81:16
Db @ blob:https://webassembly.sh/ee16f055-1530-4ea8-b7ae-c2184a77ce81:16
a.start @ blob:https://webassembly.sh/ee16f055-1530-4ea8-b7ae-c2184a77ce81:416
e @ blob:https://webassembly.sh/ee16f055-1530-4ea8-b7ae-c2184a77ce81:20

wasm-terminal.esm.js:1093 wasi-hello: Unknown Error
e._processErrorCallback @ wasm-terminal.esm.js:1093
r @ wasm-terminal.esm.js:846

My environment

> rustc --version
rustc 1.41.0-nightly (99b89533d 2019-12-16)

• Browser: Google Chrome 79.0.3945.130
• OS: Windows 10 Pro ver. 1809

NOTE

I made sure wasi-hello.wasm works successfully by wasmer 0.13.1.

Write a list commands command

Shouldn't conflict with an eventual ls though 🤔

CLI history for stdin based apps

When using tools like the python repl it would be useful for the cli history (up and down arrows) to include stdin buffers entered interactively. For example:

1. Navigate to Webassembly.sh and run python
2. Enter a line, for example 2+2, and press enter
3. Push the up arrow. Notice that 2+2 is not shown, instead the previously entered python command is shown

Fix Livereload Wasmer-JS

Wrong repo I know 😂 Helps me think about launch

Write filesystem/modules to indexedb

That way it can persist between sessions

Double scrollbars

there is overflow-y: scroll on both body and .xterm .xterm-viewport. This means we get two sets of scrollbars on the right side

There is also a horizontal scrollbar due to content being slightly wider than 100%. I think that one is because of padding + 100% width on elements, and box-sizing: border-box will fix.

Write a help command

With more in depth help and usage 😄

Allow sharing a filesystem between Wasm modules

In Wasmer JS

Add linking in stdout of xterm

May need to be solved in wasm-terminal. But Should use https://github.com/xtermjs/xterm.js/tree/master/addons/xterm-addon-web-links

Brainstorm some ideas to make this a tool

Add some features that could really help this be a tool for the communitty, more than just a demo 😄

Write Launch Article

Need to write a launch article talking about what makes webassembly.sh so cool!

Mention Browser Compatibility in Welcome message

It's an import thing we need to mention 😄

Write Launch Social Media

Such as Tweets and things 😄

0.1.0 Launch Checklist

Checklist

• Merge: #38
• Publish Wasmer-js 0.2.0
• Implement Drag and drop with 0.2.0
• Implement Query Params with 0.2.0
• Implement IndexedDB (If we can fit it in, Haven't looked at how commands are stored in the cache yet )
• Update article with all the changes
• Create an Icon for the PWA / Decide PWA Color Maybe use this tool, here is the tools license on generated output (Just add link int README) License
• Make a cool README
• Add Gifs to the Article

Notes

• Wasm FileSystem will be done post-launch, in a new Copy-Pasted branch from master

npm run build throws ELIFECYCLE error

I was cloning the repo, running npm install and npm run dev which worked fine. However, when I run npm run build, I get an ELIFECYCLE error thrown because of _Can't find self._WB_MANIFEST in your SW source.

Unfortunately, I have not been able to debug more, but I included the terminal output and error log file.

I would appreciate any help.

Can't run lua installed with wapm install lua

Neither lua nor wapm run lua do anything?

Issues on mobile Firefox for Android

I just tested this on my phone and ran into a few issues:

• my keyboard didn't open until I locked my phone and unlocked it, there seems to be no way to open the keyboard manually
• the input buffer isn't cleared when a command is submitted, so if I type help press submit and then type help again, I get helphelp. The text is kind of invisible, it appears once you start typing or backspacing.

Fix Lowering for rsign, viu

In WasmerJS, should be done in the wasm transformer

Allow Drag and Drop of Files

relates to #4

Wasm Modules in cache can't be replaced by a new version without clearing the cache

relates to pingcap/tidb#13236 (comment)

The issue is explained there 😄

Write a wapm management command

Would be handy for managing the command cache. Or perhaps, wapm commands should just be added to bin. But then how are they versioned? 🤔

Add Source Link in Html

#1 (comment)

Write a welcome command

Simply prints the welcome message

Allow loading custom wasm files

Would be dope to have a command that you can just enter that opens a file opener to load a wasm file 😄

Allow File Redirection in WasmerJS

Should be done in wasmer js

https://unix.stackexchange.com/questions/122977/what-is-the-correct-name-for-the-command

E.g echo "a" > x.txt

Write Design doc for Webassembly.sh File System

For Example:

• where are commands stored from wapm? @syrusakbary Suggests /bin.
• Where are files uploaded? @syrusakbary suggests current directory
• How are custom modules run? @syrusakbary suggests ./modulename.wasm
• How are files downloaded back to the host?
• What is the command resolution?
• How are commands versioned?
• Are files overwritten? If not, how are are they renamed?
• And much more!

Run command from Query Param on Open

Discussed with @syrusakbary Would be super cool for developers to demo their app!

Set cross-origin security headers to work with SharedArrayBuffers in FF 79

Firefox 79 recently released with support for SharedArrayBuffers, but you need to set certain headers in order to use them (docs). I'm not sure exactly how webassembly.sh is hosted, but I assume this wouldn't be too hard to implement?

Closing mobile keyboard scrolls back to the top of the terminal

Should keep you at the bottom, whenever the keyboard opens or closes

Investigate / Implement FileSystem the shell exists in

relates to #4 #12

Such as where do uploaded modules live? And what if we want to upload custom files?