Explore morphdom for dev-mode DOM patching · modernweb-dev rocket · Discussion #483 · GitHub

daKmoR
Mar 7, 2022
Maintainer

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

Replies: 0 comments

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment