Too Slow / Development Flow

[omani]

hi guys,
Im checking out the tailwind_axum example from the leptos repo and I noticed that everytime I make a change I have to wait approx. 30 seconds to recompile the wasm (cargo leptos watch).

this is unacceptable imo. how do you guys deal with this? what does your workflow look like?

[gbj]

There are going to be a variety of different answers to this question, any or all of which might be helpful in your situation:

1. Use cargo leptos watch --hot-reload, which sends patches directly to the browser in many cases without needing to recompile. This is probably more reliable with 0.6 than with 0.7-beta (the main branch). I am not sure hot-reload works directly with the Tailwind that's built into cargo-leptos, YMMV.
2. Use another styling option that doesn't require recompiling your application; for example, if you use CSS or SASS and edit the styles the stylesheet can be reloaded directly in the browser without needing changes in your Rust code; stylance is a Rust library that allows scoped styles + CSS reloading, etc.
3. This may be a hardware limitation you have with compiling Rust; if I make changes in the tailwind_axum example I see ~3-4s incremental builds without other changes. See some suggestions for speeding up Rust compile times here.

Ultimately it's a compiled language and you're compiling for two separate targets (native binary and WASM), so you will never see the kind of immediate reload loop you can get with any JS library.

[omani]

the --hot-reloadflag does not work somehow:

Error: expected identifier, found keyword where is what I get when I run cargo leptos watch --hot-reload. Im on nightly.

[gbj]

Like I said above, "This is probably more reliable with 0.6 than with 0.7-beta (the main branch)." Are you testing it with 0.7/the main branch, or with 0.6 (and the example from the leptos_0.6 branch)?

[omani]

ah that worked. the flag is being recognized now. but it still throws an error:
Reload internal error: sending css reload but no css file is set.

and continues to compile WASM.
do I have to change something in the example for this to work?

[gbj]

Hm let's see...

Looks like for hot-reloading to work you need to edit Cargo.toml to:

1. add the nightly feature to leptos
2. add style-file = "style/tailwind.css" underneath tailwind-input-file = "style/tailwind.css"

(And make sure you remove or edit the rust-toolchain.toml file so it uses nightly)

With those changes I can see this sort of responsiveness, where it will both update the class in the HTML and reload the Tailwind file while it is still recompiling Rust in the background

Screen.Recording.2024-09-03.at.4.06.02.PM.mov

[omani]

With those changes I can see this sort of responsiveness, where it will both update the class in the HTML and reload the Tailwind file while it is still recompiling Rust in the background

I did the changes and it does exactly that but the first hot-reload of the css file makes my background white (even though I changed it to a lighter blue in the example file from-blue-400 to-blue-500). only after the WASM compilation completes, I get the correct version of the css. something seems to be wrong on my end.

I see the change in devtools (/pkg/tailwind.css?version=120) when hot reloading. the file does seem to look correct.

[omani]

unfortunately I dont know how to fix this. any color change pushed to the browser (css) becomes white in color first, then after the WASM compiled, I get the correct color. I dont know if this is a bug or something on my side.

thanks for your help.

[gbj]

Not sure. I definitely don't see that behavior. (See video above)

[omani]

Ive set up https://github.com/leptos-rs/start-axum-0.7 with tailwind and now everything works. also since Im new to leptos I decided I should start with the new syntax (breaking changes since 0.7.0-alpha), so this is a good way for me.

Im happy. thank you.

[omani]

hey @gbj. has something changed recently? I again started with the axum-0.7 template and hot-reloading works, but totally wrong children are being replaced in my browser. Im adding a <p> for example, and a weird button is added to the DOM. also removing children does not work properly. this is a very weird behavour I hadnt seen 2 months ago (back then when I had set up the axum template with tailwind, etc.).

there is a button below the <p>. I remove the <p> and the button is removed in the DOM (all of this while using --hot-reload ofc). very strange.

tested with firefox and chromium.

[gbj]

Opening an issue with a reproducible example would be welcome. Nothing in any of the hot-reloading code has been touched in a very long time.

[omani]

well like I said I just generated a new project from the axum-0.7 template and only added the neccesarry tailwind parts to it. that is basically how you could reproduce it on your side. I could make a video to show the bug.

[omani]

out_1.mp4

what you see in the video:

• first Im repeating the string "Hey Sun :D" and hit save in neovim. the hot reload does work but replaces a completely different child element in the DOM. as you can see with the weird button that pops up.
• after that a successful build (compiling of the wasm) the page refreshes and everything is ok. now we have two strings.
• then I remove the duplicate string, hit save in neovim. and the hot reload now removes the whole line below (two buttons where the counter was)
• then again after compiling of wasm ends, the page refreshes and everything is back to normal

[gbj]

Let me explain more what I mean, and why I'm asking it the way I'm asking it.

Opening an issue means "I would like to address this problem, but doing it in the context of a back-and-forth in the comments of a discussion is hard." If you open an issue, that will mean it's tracked as an issue, which is much easier for me to work with than trying to keep track of individual notifications about your comments somewhere in my email or GitHub notifications.

with a minimal reproduction A minimal reproduction, here or anywhere else, means something like 10-20 lines of code I can copy and paste into an editor, and some steps to reproduce the issue. "Just add the necessary tailwind parts" is too vague to be reproducible. "Here's a video of my application" is helpful in some cases, but I don't have access to an application. What's going wrong is probably not "hot reloading is broken" but more something like "if I have this view macro, and I paste another element in, it adds an element of the incorrect type" (as you show in the video.) Pasting code rather than screenshotting or screen capturing is really important here; it is not possible to reproduce something from a partial screen capture, and not a good use of time to try to re-type everything from a screenshot.

So when I say "Opening an issue with a reproducible example would be welcome," that's what I mean -- and generally speaking that is the most helpful thing to do for any open source project.

Thanks!

[omani]

gotcha. here is the issue #3191