Wasm cairo integration

[cryptonerdcn]

Hey guys I am working on my project Wasm-Cairo. Basically, as its name, by compiling Cairo's rust implementation to Wasm, you can use Wasm-Cairo to complie&run the Cairo code in the browser.

I also find a way to use it in the mdbook and I did it. You can test it here.

Issues:

• It is still under development. Wasm-Cairo is based on Cairo 1.10. Will add Cairo 2.0 support after this.
• The WASM file is a little big (5mb~ when opt lv5). Now we still need to copy it into every language's HTML folder. We need to find a way to not duplicate it.
• Wasm-Cairo can only return a string(we can treat it as JSON) as running a Cairo problem result. So what log do we need and what format it should be?
• I add the run function to the window, but I don't think it is a good way to let book.js call this function. Can anyone help?
• Seems not working on the phone(mine is iPhone 14 pro).

Some examples:

Hello world example:

Another example:

Panic example:

[cryptonerdcn]

#243

[cryptonerdcn]

@enitrat @glihm Can you try this and give me some advice?

[enitrat]

Wow this is amazing @cryptonerdcn ! Thank you for this.

Wasm-Cairo can only return a string(we can treat it as JSON) as running a Cairo problem result. So what log do we need and what format it should be?

Can you show an example of the returned string in case of success / error ?|

I add the run function to the window, but I don't think it is a good way to let book.js call this function
Why do you think it's a bad idea? Isn't it done like this in Rust?

Even worse, now we need to copy it into every language's HTML folder.
Is there no way of invoking a function that would be defined at the root of the book, for all languages? Or given that there is one static build per language, we have to duplicate it?

[Th0rgal]

looks dope

[glihm]

Amazing work! I'll take a look and see if my knowledge in wasm allows me to add some comments and give feedbacks. 👍🏻

[cryptonerdcn]

Wow this is amazing @cryptonerdcn ! Thank you for this.

Wasm-Cairo can only return a string(we can treat it as JSON) as running a Cairo problem result. So what log do we need and what format it should be?

Can you show an example of the returned string in case of success / error ?|

This is still in progress. I will update it later.

I add the run function to the window, but I don't think it is a good way to let book.js call this function
Why do you think it's a bad idea? Isn't it done like this in Rust?

Maybe there is a more elegant way to do this? Well this code still works so we can keep it and do sth. more important.

Even worse, now we need to copy it into every language's HTML folder.
Is there no way of invoking a function that would be defined at the root of the book, for all languages? Or given that there is one static build per language, we have to duplicate it?

My bad. Yes I think we can use only one WASM file at the root of the book and don't need to duplicate it. I marked this one as a problem need to be solve.

[enitrat]

Also, I'm super curious to look at how you got Cairo1 WASMed. We can do wonders with that

[cryptonerdcn]

Also, I'm super curious to look at how you got Cairo1 WASMed. We can do wonders with that

This is part of what I did for the Pragma Hackathon & Starknet Shanghai workshop.
I will reveal it all after I finish.

[cryptonerdcn]

Rebase to main for review.

[cryptonerdcn]

@enitrat Just to make sure. I guess we don't need to do anything with Starknet's contract (Maybe need to add a tag looks like non-executable).

Also I found ignore_format tag will make a code block without playground. And does_not_compile means this code will cause a compiler error right?

See https://starknetastro.github.io/cairo-book.github.io/ch03-01-what-is-ownership.html

[enitrat]

Also I found ignore_format tag will make a code block without playground

If you wish to disable the play button for a code block, you can include the noplayground option on the code block like this:

```rust,noplayground
let mut name = String::new();
std::io::stdin().read_line(&mut name).expect("failed to read line");
println!("Hello {}!", name);
```

And does_not_compile means this code will cause a compiler error right?
yes

[cryptonerdcn]

https://taikai.network/pragma-oracle/hackathons/Cairo1hackathon/projects/clj5axhze03yuu601gir28kbr/idea
This is the whole project of WASM-Cairo, and "WASM-Cairo Toolkit for WASM-bindgen" is for Cairo-book. I am still working on it because still not all compile errors can be shown in the output log.

[cryptonerdcn]

It supports Cairo Compiler 2.0.1 and can show full debug info now! (Although it still cannot display exactly the same error information).
It is for the English Cairo book only now. We need to check it works as proposed before using it in other languages, so let's just review this PR for the English version.
@enitrat @glihm @shramee @Nadai2010 @0xEniotna

If you need to check this locally, you need to copy theme/pkg and theme/js to the book folder after building it.

Example:

[cryptonerdcn]

The repo for WASM-Cairo: https://github.com/cryptonerdcn/wasm-cairo

[enitrat]

@cryptonerdcn

use debug::PrintTrait;
fn main() {
    'Hello, world!'.print();
}

Wasm-Cairo Debug outputs: 
[DEBUG]	Hello, world!                  	(raw: 5735816763073854953388147237921)
Run completed successfully, returning []

Is it possible to remove the

Wasm-Cairo Debug outputs: 

line?

[enitrat]

Reading the deployed version I stumbled upon this:

#![allow(unused)]
fn main() {
    'Hello, world!'.print();
}```

What is this `#![allow(unused)]`? It's not in the source code. Is the deployment up to date with your last branch?

[cryptonerdcn]

Reading the deployed version I stumbled upon this:

#![allow(unused)]
fn main() {
    'Hello, world!'.print();
}```

What is this `#![allow(unused)]`? It's not in the source code. Is the deployment up to date with your last branch?

Do you mean https://starknetastro.github.io/cairo-book.github.io/ch01-02-hello-world.html this version? It is an old version that doesn't change since this PR was established. I will update it soon.

@cryptonerdcn

use debug::PrintTrait;
fn main() {
    'Hello, world!'.print();
}

Wasm-Cairo Debug outputs: 
[DEBUG]	Hello, world!                  	(raw: 5735816763073854953388147237921)
Run completed successfully, returning []

Is it possible to remove the

Wasm-Cairo Debug outputs: 

line?

Yes, it is possible.
I also will remove it soon.

[cryptonerdcn]

@enitrat I updated it.

[enitrat]

Amazing. TYVM, @cryptonerdcn

[enitrat]

@cryptonerdcn what's the process when updating compiler versions now?

[cryptonerdcn]

@cryptonerdcn what's the process when updating compiler versions now?

Because I have to make some manual changes to the official Cairo repo, there is still no easy way to update the compiler version automatically.
I'm working on this. Don't worry if I can't make it when 2.1 is released, I will do it manually.

[enitrat]

I don't think it will be a big deal anyway, just wanted to know it'd be possible!