Cairo code formatter

[mazurroman]

Let's add a code-format button next to the permalink button. Clicking the button should reformat the Cairo code so that users don't need to manually set indentation.

For the icon, I suggest to use one of these three icons from https://remixicon.com/ : code-line, code-s-line, code-s-slash-line but we're open to hear other icon suggestions

[remybar]

Hi @mazurroman 👋

Do you already have an idea of how to format Cairo code from the front-end ?

I've investigated a bit to see how to do that but I didn't find any quick solution:

• I found that prettier is useable directly in the browser but with some limitations (https://prettier.io/docs/en/browser). There is no parser for Cairo or similar languages like Rust.
• There is also the possibility to add an API endpoint handled by NextJs on the server side which would execute a command to format like scarb fmt but, for the moment, there is no server side/back-end in your NextJs app so it wouldn't be a good idea to add one just for that,
• There is a cairo-lang-formatter crate provided by StarkWare (https://docs.rs/crate/cairo-lang-formatter/latest). I'm a pure newbie in Rust but it should be possible to use this formatter in your back-end in Rust and so handle code formatting through a dedicated API endpoint.

Then, if you have an idea about how this code formatting should be implemented, I'm available to do it ;-)

[mazurroman]

Hi @remybar thank you for listing all available options, it's very clear and helpful. Let's wait for @barabanovro to suggest which option is the best.

[barabanovro]

@mazurroman I would suggest using the cairo-lang-formatter crate that Rémy mentioned and compiling it to WASM so that it can be used on the frontend. It is going to require some work to make the crate compilable to WASM and probably will require forking it.

[mazurroman]

@barabanovro I am not a fan of forks and we should avoid them wherever possible. Everything in Starknet is under heavy development. Forking cairo-lang-formatter means we would need to manage our fork which will create new responsibilities and commitments on us.

I like the idea to use WASM here. @barabanovro can you create an issue on the cairo-lang-formatter project to make it WASM compatible and link the issue here as a blocker. Once that issue is done we can resume the work.

[barabanovro]

This issue is blocked by cryptonerdcn/wasm-cairo#15

[mazurroman]

Note: cryptonerdcn (owner of the wasm-cairo repository) confirmed that the https://github.com/cryptonerdcn/wasm-cairo/issues/15 issue is eligible for rewards on OnlyDust