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

[AleksandrHovhannisyan]

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:

• OS and Version: N/A (Windows 10 build 19044,1706, running 11ty in WSL 2)
• Eleventy Version: 2.0.0-canary-11 (also reproducible in 10)

[zachleat]

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

[zachleat]

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

patrick-steele-idem/morphdom#178 (comment)

[zachleat]

Shipping with 1.0.0-canary.10

[AleksandrHovhannisyan]

Wow, that was quick! Thanks @zachleat!