Repository navigation
Patch changed pages in place (opt-in morph) - #51
Merged
Merged
Conversation
A page whose HTML changed still reloaded. The client already has the new HTML at that point, from revalidating the page, so with :morph it patches the body with idiomorph instead: only nodes that differ change, and scroll position, focus and JavaScript state survive an edit to text or classes. Patching cannot re-run scripts or reload stylesheets, so the client falls back to a reload when the scripts the page runs or its stylesheets differ, or when the server answers with an error. morph: [preserve: selector] names elements owned by client code, such as mounted components. They are never touched, and the page reloads if what the server renders for them changes. The client dispatches volt:document-updated after a patch. Only the body's contents and the title are patched. Opt-in, because a server has to vouch that its pages tolerate patching. Neither Vite nor Astro does this.
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Stacked on #50. After #50, a page whose server-rendered HTML changed still does a full reload. This adds an opt-in mode where the dev client patches the page instead, so scroll position, focus and JavaScript state survive edits to text and classes.
Configuration
false(default)true[preserve: selector]The setting is emitted as
data-volt-morphon the client<script>, which is what the client reads, so a framework can also set it per page.How it works
The client already has the new HTML at this point, from the revalidation request added in #50. With
morphit parses that HTML and patches<body>with idiomorph, vendored into the dev client the same waylit-htmlis. It then stores the new entity tag and dispatchesvolt:document-updatedondocument.It falls back to a reload when patching would not be safe:
application/jsonare patched);<style>elements differ;Verification
mix test: 755 passed.mix lintpasses in full locally.Browser tests (
--include integration, not run in CI): 30 passed, with seven new tests for the patching rules and an end-to-end test where a page is patched twice and keeps its state.Tried in a real browser on a copy of an Astral site (unmodified Astral 0.5.1, one config line added), on a page with a Vue island:
Limits
<body>and the title are patched. Attributes on<html>and<body>and the rest of<head>stay as they were until the next reload.volt:document-updated.