Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[hot reload] Hot reload broken for children after components #3191

Open
omani opened this issue Nov 4, 2024 · 3 comments
Open

[hot reload] Hot reload broken for children after components #3191

omani opened this issue Nov 4, 2024 · 3 comments
Labels
bug Something isn't working

Comments

@omani
Copy link

omani commented Nov 4, 2024

Describe the bug
To reproduce clone this repo, which is a fresh starter axum-0.7 template with additionally tailwind included.
https://github.com/omani/lep7

as mentioned in discussion #2919:
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.

this video shows the weird behavour: https://github.com/user-attachments/assets/cb71fe4c-bba6-478e-816a-9f25cf58d851

out_1.mp4

Leptos Dependencies

Please copy and paste the Leptos dependencies and features from your Cargo.toml.

For example:

axum = { version = "0.7", optional = true }
console_error_panic_hook = "0.1"
leptos = { version = "0.7.0-rc0", features = ["nightly"] }
leptos_axum = { version = "0.7.0-rc0", optional = true }
leptos_meta = { version = "0.7.0-rc0" }
leptos_router = { version = "0.7.0-rc0", features = ["nightly"] }
tokio = { version = "1", features = ["rt-multi-thread"], optional = true }
tower = { version = "0.4", optional = true }
tower-http = { version = "0.5", features = ["fs"], optional = true }
wasm-bindgen = "=0.2.93"
thiserror = "1"
tracing = { version = "0.1", optional = true }
http = "1"

To Reproduce
Steps to reproduce the behavior:

  1. Clone the repo
  2. execute cargo leptos watch --hot-reload
  3. change something in the App component's view (add a `

    ' or something else)

Expected behavior
I expect it to insert/update the correct child/children when changing something in the HTML view

Screenshots
see link to discussion video above

Additional context
this wasn't the case 3 months ago. this is new to me.

@gbj
Copy link
Collaborator

gbj commented Nov 4, 2024

Thanks. This is much better than the version in the discussion, because 1) it includes the app you're using and 2) it has a specific "do this and this breaks."

Specifically, the issue here seems to be "Hot reloading doesn't work after components that return ()". In this case, those are the meta components in the App. This makes sense to me intuitively -- hot-reloading works by saying things like "Hey, modify the 4th child" or "Move the 4th child to be 5th instead". Components like this used to have a DOM representation, but no longer do — which is good, but messes with hot-reloading!

Playing around with your example I notice also that it doesn't work with raw text nodes (as opposed to quoted string nodes). Like I said I haven't really touched any of the hot reloading code in about a year and a half... it's possible we didn't even support unquoted text nodes when I wrote it.

Thanks for the example, will list this as a nice-to-have thing to fix in 0.7 but not a blocker for releasing that.

@gbj gbj added the bug Something isn't working label Nov 4, 2024
@gbj gbj changed the title hot-reload functionality does not work well [hot reload] Hot reload broken for children after components Nov 4, 2024
@omani
Copy link
Author

omani commented Nov 4, 2024

so is there something I can do until this is fixed? Im asking because it is a huge disadvantage not having this hot-readling feature since it is a nice DX. especially when you are on a slow machine and compiling the WASM is very slow (like in my case).

@gbj
Copy link
Collaborator

gbj commented Nov 4, 2024

Here are some options:

  1. Help fix it — It's an open-source project, not a commercial product.
  2. Pull some part of the view out into a separate view macro. Hot-reloading works on a per-view basis, so if the problem is "Hot reloading is broken after components XYZ," then pulling some content out separately and editing it can work.

For example, to test out this hypothesis I opened up your app, and started editing a separate let content = view! { /* ... that I added to the App. Like I said, the issue is not that hot-reload doesn't work, it's that there are a handful of edge cases it doesn't work on.

example.mov

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants