This should work pretty much like the button that collapses the workspace.

After build, Rust project not running.

main.js file

fetch(getFileURL('out/main.wasm')).then(response =>
  response.arrayBuffer()
).then(bytes => WebAssembly.instantiate(bytes)).then(results => {
  instance = results.instance;
  document.getElementById("container").innerText = instance.exports.add_one(41); //Error
});

Error: Uncaught (in promise) TypeError: instance.exports.add_one is not a function.

main.rs file

fn main() {
    println!("Test");
}

Currently, the only way to inspect a wasm file is to see its disassembled output. It would be great if we could also let users look at the binary file directly: https://wasdk.github.io/wasmcodeexplorer/

It's difficult to see when a file has been updated, or re-generated. It would be nice if the UI somehow highlighted changed files.

Something we might want to explore on the Rust side is to run the RLS in the browser. This would let them get all the same IDE support they'd have locally in the browser experience (like autocompletes, live error reporting, etc).

At the moment, we rely on keyboard shortcuts to save file buffers, which is a problem for mobile devices. Once possible place to add such a button is next to the split pane button.

The button can be disabled when there's nothing to be saved.

Probably relevant for WebAssembly Studio as well, see: dcodeIO/long.js#53

Currently, user don't get any feedback on clicking the build or run button, while we are making a request to the service in the background, the user has no way of telling if something actually happened until we get the response.

• We should add a spinner to communicate that the request is processing

File icons in the File Tree are from seti.woff and defined in theme.css. Icons in tabs are loaded from the svg/ directory, other icons are defined in Icons.tsx, and others are defined in octicons so it's a bit of a mess.

If it's build.ts, then there'll also be warnings in the output window that the file hasn't been saved yet, even though it isn't opened anymore. As an indicator, the file also keeps showing the new "M" symbol.

I expected a prompt asking whether I'd like to discard the changes or save, when closing.

The project website has been shared more broadly and users may be disappointed wen they encounter bugs, we should make the site as beta and also put a link to this repo so issues can be filed.

STR:

1. open not-tall (~200px in height) browser window
2. navigate to https://http://webassembly.studio/
3. increase height on the window
4. create a project from a template
5. scroll directory tree up and down

Notice that the tree is not extended all the way to the bottom.

It's expected that tree on the left takes all available space.

When debugging with pause on all exception is perform, the exception is thrown when the application is loading. It is about unexpected token/character in JSON:

It is expected that application will not throw any exception (even caught one) during startup.

(There is another one that is coming from json3 module when npm run dev-server is used. Let us fix one in production environment first)

Currently only preview mode is supported. We need to work out a way to switch between preview/edit modes, and preferably make it possible to open edit / preview files in different tabs.

We use couple of external services. It's recommended to move the endpoints addressed (e.g. //wasmexplorer-service.herokuapp.com/service.php) into some configuration file and don't include it into the bundle.

As a person who knows basic C or C++,
I want the ability to quickly write a simple application, compile it to WebAssembly, and run the code,
So that I may see if I can create a code that will run as WebAssembly in a browser.

Expected:

• to view example C/C++ code (.c, .cpp, .h, .hpp)
• to edit C/C++ code
• to build .wasm file from C/C++ code
• to view the HTML and/or JS that runs the wasm
• to edit the HTML and/or JS
• to execute the HTML/JS and compiled .wasm

Font Face doesn't match the rest of the UI.

As a person who does not know WebAssembly,
I want the ability to quickly see a simple application code,
So that I may run it and also make a simple modification to experiment with the example.

Expected:

• to view wasm in text format (.wat)
• to edit .wat
• to build .wasm file from .wat
• to view the HTML and/or JS that runs the wasm
• to edit the HTML and/or JS
• to execute the HTML/JS and compiled .wasm

The "Update" functionality does not fit into the "teach" requirement. The created and shared to the public code must be immutable. Do we want to remove "Update" and rely only on "Fork" functionality?

The current Toast placement is hard to see:

Could we put this at the bottom? Somewhere more obvious?

As a person that curios about Rust,
I want to see some example in Rust, compile it to WebAssembly, and run the code,
So that I may enter my own Rust code and see it run as WebAssembly in a browser.

Expected:

• to view example Rust code (.rs)
• to edit Rust code
• to build .wasm file from Rust code
• to view the HTML and/or JS that runs the wasm
• to edit the HTML and/or JS
• to execute the HTML/JS and compiled .wasm

It throws this error after running npm run build

ERROR in [at-loader] ./node_modules/wasmparser/dist/WasmParser.d.ts:553:36 
    TS7006: Parameter 'Uint8Array' implicitly has an 'any' type.

ERROR in [at-loader] ./src/components/Test.tsx:203:17 
    TS2322: Type '{ label: "Force Update"; onClick: () => void; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Button> & Readonly<{ children?: ReactNode; }> & Re...'.
  Type '{ label: "Force Update"; onClick: () => void; }' is not assignable to type 'Readonly<{ icon: Element; label?: string; title?: string; isDisabled?: boolean; onClick?: Functio...'.
    Property 'icon' is missing in type '{ label: "Force Update"; onClick: () => void; }'.

ERROR in [at-loader] ./src/util.ts:81:19 
    TS2304: Cannot find name 'TextEncoder'.

Reference: https://webassembly.github.io/spec/core/text/values.html#text-id

On mobile there's currently no way to bring up context menus. We should trigger these using a long press, or whatever makes sense.

Space or no space?

Currently, when we run the project, the output in right bottom seems to stick there forever.
https://webassembly.studio/?f=tqfv5
It'd be better if it can be closed or hidden.

The current language support for .wast files in Monaco is in very early stages. Getting better support for .wast files would not only help this project, but it would also benefit VSCode since the code could be upstreamed.

The monarch docs and the Monaco language services demo have more details on how this all works.

The current size is 1.18 MB, webpack-bundle-size-analyzer prints out:

pako: 213.83 KB (18.9%)
wasmparser: 160.01 KB (14.2%)
jszip: 140.69 KB (12.4%)
  core-js: 9.31 KB (6.62%)
  <self>: 131.38 KB (93.4%)
readable-stream: 66.22 KB (5.86%)
buffer: 47.47 KB (4.20%)
cassowary: 47.01 KB (4.16%)
react-modal: 33.15 KB (2.93%)
mousetrap: 32.28 KB (2.85%)
prop-types: 24.88 KB (2.20%)
minimatch: 24.75 KB (2.19%)
util: 16.05 KB (1.42%)
  inherits: 672 B (4.09%)
  <self>: 15.4 KB (95.9%)
events: 8.13 KB (0.719%)
string_decoder: 8.1 KB (0.717%)
setimmediate: 6.32 KB (0.559%)
path-browserify: 6.04 KB (0.534%)
lie: 5.79 KB (0.512%)
process: 5.29 KB (0.468%)
brace-expansion: 4.68 KB (0.414%)
fbjs: 4.26 KB (0.377%)
stream-browserify: 3.54 KB (0.313%)
base64-js: 3.39 KB (0.300%)
core-util-is: 2.95 KB (0.261%)
object-assign: 2.06 KB (0.182%)
ieee754: 2.01 KB (0.177%)
immediate: 1.84 KB (0.163%)
warning: 1.76 KB (0.156%)
util-deprecate: 1.58 KB (0.139%)
safe-buffer: 1.49 KB (0.132%)
timers-browserify: 1.33 KB (0.117%)
balanced-match: 1.15 KB (0.101%)
process-nextick-args: 1.02 KB (0.0898%)
webpack: 1 KB (0.0886%)
exenv: 863 B (0.0745%)
inherits: 672 B (0.0580%)
concat-map: 345 B (0.0298%)
isarray: 132 B (0.0114%)
<self>: 248.61 KB (22.0%)

Tabs should not hang on to deleted files.

We should work out a scheme where more toasts can be fired off and stacked up on top of each other.

The current version doesn't seem to do any highlighting for Rust.

We can get a more consistent UI if we use the DirectoryTree component in the UploadFileDialog instead of the ListView component. This should also give us file icon, ability to delete files that we don't want uploaded, etc. almost for free.

It will be good to configure unit and integration tests.
I would like to work on it.Needs babel configuration also

When closing the WebAssembly Studio tab, any unsaved changes are lost, which is correct, but closing the tab might be unintended by the user. Having a prompt here would prevent losing work by mistake.

We can add a gist option in the context menu when right clicking on a file, or folder. This would make it possible to just share individual files.

When WebAssemblyStudio is opened in the browser that does not support WebAssembly v1, we need to show a warning message that will inform that the application will not function normally/as expected.

Currently we are writing fetch(getFileURL('out/main.wasm')) in the examples. It is preferable if we will use just fetch('../out/main.wasm').

We can use/intercept this function on the "sandboxed" window, and extend request (URLs) with blob URLs.

Unfortunately, I haven't yet figured out a reliable way to trigger this, but this happens rather regulary on my end when switching between files. Did someone else notice this or is it my PC? :)

There are several components that use this.forceUpdate():

• App.tsx
• EditorPane.tsx
• StatusBar.tsx
• Binary.tsx
• ControlCenter.tsx
• Markdown.tsx
• UploadFileDialog.tsx
• Viz.tsx
• ViewTabs.tsx
• Workspace.tsx

It is not-recommended to use this method to trigger render. We need to:

a) document/comment a reason this method is called,
b) or, replace it with shouldComponentUpdate.

Currently we a choosing to set the project license to generic MIT open source license. See #25

@mbebenita is asking if "everyone that’s contributed ... to reply with I Agree to the license change?"

/cc @haxxorsid @nileshgulia1 @AnshulMalik @tschneidereit

Thank you.

When embedding in Medium, the default width of the embedding is quite small which leads our buttons to get all bunched up and overflow onto the next line. We should figure out a way to:

1. Hide or move the GitHub Issues button out of the way.
2. Reduce or hide button labels so thing fit.
3. Any other ideas?

Add an option for tutorial of how to use wasm fiddle for new users of wasm fiddle.

Currently we use a "Gulp" like task manager to run build commands, but it's not very flexible or familiar to C/C++/JavaScript developers. Instead, one idea would be to just use Make and emulate a shell environment. Some commands would run client side (in the browser), others would execute on a remote server. The advantage to this approach would be that users could download the project locally, and as long as they have the right tools installed, the project would just build and run just as it does in the browser environment.

@kripken is compiling Make and Bash to Wasm too crazy of an idea?