search

11ty / eleventy-dev-server

A minimal generic web-development web server.
103 stars 19 forks source link

Hot reload in 2.0.0-canary-10/11: elements inserted with JavaScript disappear on reload #32

Closed AleksandrHovhannisyan closed 2 years ago

AleksandrHovhannisyan commented 2 years ago

Describe the bug

I've been test running 2.0.0-canary-10 for a few weeks now on my blog. So far, I'm a BIG fan of the new reload behavior! It makes authoring a much more pleasant experience and is so much faster. That said, I did notice a bug where the hot reload breaks and elements inserted into the page with JavaScript disappear once the hot reload occurs.

Suppose you have this index.html in an absolute bare-minimum 11ty project with nothing else:

<p>I love <span id="test"></span></p>
<script>
document.getElementById('test').innerText = '11ty';
</script>

On an initial page load or a manual reload, it works as expected: The user sees I love 11ty.

If you later edit the file and save it to trigger a rebuild, though, the page reloads and the JavaScript breaks. Now, you only see I love.

To Reproduce Steps to reproduce the behavior:

  1. Clone https://github.com/AleksandrHovhannisyan/11ty-sandbox/tree/2.0.0-canary-11-js-hotreload.
  2. Run yarn to install dependencies.
  3. Run yarn serve to start the dev server.
  4. Navigate to localhost:8080. Observe the page reads: I love 11ty.
  5. Open, edit, and save src/index.html.
  6. Observe that the server hot-reloads the page.
  7. Observe that the paragraph now reads I love.

Expected behavior This is somewhat expected because the page didn't actually reload, so the JavaScript doesn't re-run. On the other hand, if the page isn't actually reloading, elements previously inserted by JavaScript should be preserved. It can be a little annoying if you're writing JavaScript and want to see the results since you need to reload the page manually on each refresh. However, so far this has only been a minor annoyance for me.

Screenshots

N/A

Environment:

zachleat commented 2 years ago

Yeah, we might need to think a little bigger here. Similar concerns were reported by @j-f1 at #7 too!

zachleat commented 2 years ago

Found this excellent helper which seems to work well to rerun scripts

https://github.com/patrick-steele-idem/morphdom/issues/178#issuecomment-652562769

zachleat commented 2 years ago

Shipping with 1.0.0-canary.10

AleksandrHovhannisyan commented 2 years ago

Wow, that was quick! Thanks @zachleat!