Recommended way to format html and rust code within the `html!` macro

[alun]

Question

What is the recommended way to format html and rust code within the html! macro invocation?

What I've tried (optional)

rustfmt 1.4.14 - doesn't (re)format anything within html! by default

[siku2]

Sadly Rust doesn't provide a way for macros to format the code they're given. The only option right now is to format the code by hand.

For the Rust code within the macro there's a trick you can use that might help. You can copy the code out of the macro to a normal function anywhere in your code and run cargo fmt. Of course you won't be able to compile this code but rustfmt can still format it.

In the future we might provide an IDE plugin to do this.

[alun]

I'm seeing some relevant discussion here https://github.com/rust-lang/rustfmt/issues/3434 I looks like people suggest to add

// Skip formatting everything whose name is `html`
#![rustfmt::skip(html)]
// Or make it explicit that you only want to skip macro calls
#![rustfmt::skip::macro(html)]

With my current rustfmt version skip looks to be a default behaviour. Maybe there is a way to enable it explicitly via config. Although I don't see anything related in the doc https://rust-lang.github.io/rustfmt/?version=master&search=macro

[teymour-aldridge]

The problem is that rustfmt can format Rust programs, but it has no idea as to how to format the contents of procedural macro invocations.

[alun]

One nice (more or less) workaround I've found : format selection as html msvsc plugin https://marketplace.visualstudio.com/items?itemName=adrianwilczynski.format-selection-as-html

[teymour-aldridge]

I've produced a crate called Malvolio (available on crates.io) which allows you to construct HTML trees using the builder pattern and use them inside Yew components. Because the API is macro-free it works with rustfmt.

It can be incrementally adopted but is currently lacking support for child components (which I intend to add in a future release) and listeners (support for those is also planned.)

[VersBinarii]

In vim i have following:

" Format selected block of HTML code
noremap <leader>f :'<,'>! prettier --parser html --stdin-filepath<cr>

This allows me to format the block in the html macro. This can be added to almost any other editor. The only thing is that it has to be run manually.

[g00nix]

In vim i have following:

" Format selected block of HTML code
noremap <leader>f :'<,'>! prettier --parser html --stdin-filepath<cr>

This allows me to format the block in the html macro. This can be added to almost any other editor. The only thing is that it has to be run manually.

lua version for neovim:

vim.api.nvim_set_keymap( 'n', '<F7>', 'vi{:! prettier --parser html --stdin-filepath<CR>vi{>', {noremap = true})

what this does:

• selects code block between curly brackets
• uses prettier to format it nice
• selects code block between curly brackets (again)
• indents once

advantages: touching F7 within the html macro will prettify html code disadvantages: touching F7 anywhere else will force you to press u problems: does not work with all code blocks; it gets confused oh yew-specific stuff

[kantum]

Here is a version that find the html! macro and format the following code block:

vim.cmd.nnoremap('<leader>h', ':vimgrep /\\Vhtml\\!/ % | normal jvi} <Esc>:!prettier --parser html --stdin-filepath<CR>vi}>')

I failed to make it work on any rust file we can use it with autocmd but I'm sure someone can :)

BTW switch to lua

[ttax00]

Here is a version that find the html! macro and format the following code block:

vim.cmd.nnoremap('<leader>h', ':vimgrep /\\Vhtml\\!/ % | normal jvi} <Esc>:!prettier --parser html --stdin-filepath<CR>vi}>')

Btw are you sure prettier html parser doesn't conflict with some of yew's syntaxes like dynamic tags? @kantum

[kantum]

@TechTheAwesome No idea, hopefully if someone finds out they will tell us here :)

[Grandkahuna43325]

@TechTheAwesome No idea, hopefully if someone finds out they will tell us here :)

Well about that.... @ttax00 your solution works only on the first html! macro(or I'm stupid, both could be correct)

prettier struggles with: input oninput={rust_function} => input oninput="{rust_function}" Can't process </> and gives errors Can't process nested tags like: <Link> gives errors Changes {false} to "false" (it causes errors in trunk) Changes Nav / to nav/ (when you have custom struct component called Nav it messes it up) messes up indentation relatively to other rust code(that one was pretty obvious and I don't mind it that much) and probably many others

for the <> MAYBE something like this would work: in lua

vim.api.nvim_set_keymap("n", "<leader>h=",    "<cmd> execute '%s/<>/<diamond_tag>/g' | execute '%s#</>#</diamond_tag>#g' <CR> | vi{:! prettier --parser html --stdin-filepath<CR>vi{>:%s/<diamond_tag>/<>/g | %s#</diamond_tag>#</>#g <CR>", { noremap = true, silent = true })

[ttax00]

@kantum there's feedback for your vim command