Investigate using morphdom for Rocket dev mode / live preview.
https://github.com/patrick-steele-idem/morphdom
Goal: avoid full page reloads during content/template edits by morphing the current DOM to the newly generated HTML.
Potential benefits:
- preserve scroll position
- preserve focused elements where possible
- reduce visual flicker
- make docs/content editing feel smoother
- avoid introducing a framework/runtime
Non-goals:
- not a production router
- not default client-side navigation
- not a replacement for native MPA navigation
- not required for static output
Initial idea:
- fetch current page HTML after rebuild
- parse with
DOMParser
- morph
document.body
- update selected
<head> elements carefully
- preserve important elements with
onBeforeElUpdated
- fall back to full reload on errors
Open questions:
- How to handle scripts?
- How to update stylesheets safely?
- How to preserve custom element state?
- Should this patch only
<main>?
- How to handle focus and scroll restoration?
- Should users be able to opt out per page/component?
Initial stance:
Use morphdom only for dev/live-preview DX.
Keep production navigation native MPA + Speculation Rules + View Transitions.
PS: comes from 11ty https://www.youtube.com/watch?v=wWs38M38vr8
Investigate using
morphdomfor Rocket dev mode / live preview.https://github.com/patrick-steele-idem/morphdom
Goal: avoid full page reloads during content/template edits by morphing the current DOM to the newly generated HTML.
Potential benefits:
Non-goals:
Initial idea:
DOMParserdocument.body<head>elements carefullyonBeforeElUpdatedOpen questions:
<main>?Initial stance:
Use
morphdomonly for dev/live-preview DX.Keep production navigation native MPA + Speculation Rules + View Transitions.
PS: comes from 11ty https://www.youtube.com/watch?v=wWs38M38vr8