Another VSCode extension for working with Yew html macro, with love. 💞

78 points techtheawesome

GitHub: https://github.com/TechTheAwesome/code-yew-server

Humble beginnings.

  • Huge thanks for this prior post. Which gave me some necessary guidance to dive into vscode extension-making. This project might not even be started without it!

Where's the gold? (Features)

  • Highlights html! {} macros. And rust inside {} nested brackets. (Similar to Alexandre's extension)
  • HTML hover.

​

https://preview.redd.it/rqdynaucpxw91.png?width=1276&format=png&auto=webp&s=637846a13ec9e8b14abe78bd4d3949a331dc38d0

  • HTML completion.

​

https://preview.redd.it/vnoam1wapxw91.png?width=1276&format=png&auto=webp&s=fa791da7398d267df3f50c70e85d83d60fee19e8

https://preview.redd.it/ddu5za4apxw91.png?width=1276&format=png&auto=webp&s=9a996cc05e19e5bfd9b34f2f86dc1fa55d7256a9

  • VSCode auto indentation on Enter (not document formatting).
  • Partial document symbol support (known bug).

​

https://preview.redd.it/3s1q00y5pxw91.png?width=1117&format=png&auto=webp&s=0f6e0350dc684c039e913fb953f6f6d516a120c7

Operation plan (Approach)

A detailed explanation is here. But in brief, I've extracted the HTML only code into a virtual document. From this:

pub fn _index() -> Html {

let test = true;

html! {

<main class={classes!("bg-slate-100","flex", "flex-col", "bg-gradient-to-br", "from-slate-100", "to-slate-400")}>
{

\tif test {
\t
\t\thtml! {
\t\t
\t\t<div>{"Testing"}</div>
\t\t
\t\t}
\t
\t} else {
\t
\t\thtml! {
\t\t
\t\t<div>{"Production"}</div>
\t\t
\t\t}
\t
\t}

}
</main>

To this:

<main class=                                                          
                                        >



\t

\t\t
\t\t<div>           </div>
\t\t

\t
\t
\t

\t\t
\t\t<div>              </div>
\t\t
\t\t
\t
\t


</main>

Then pass it to the HTML Language Server to get a response for each feature.

Side quests unlocked. (Assistance required)

There is still at least two features that should be straight forward. But I've run into issues that right now I have no idea how to diagnose and/or fix:

  • Providing rename edits (F2) on HTML tag names:
    • rust-analyzer seems to have a priority in the rename call, thus it returned early without a chance for my middleman to work.
    • Even when rust-analyzer is disabled, rename calls seems to exit with a type error on the HTML Language Server end. And since this extension only provide request forwarding, I have no idea how to fix
  • Providing full document symbols support:
    • Document support seems to sometimes work, and other times just returns undefined.
    • And when it works, the symbols array returned is incomplete.

If these problems interest you, please come to the repository's issue tab where I'll add in-depth details and what I've tried to solve the issue. 🔥

Thank you all for reaching this far, love you all, and happy rusting!

TechTheAwesome