Repository navigation
Let Volt render pages, and re-render islands on new props - #14
Merged
Merged
Conversation
Astral.DevServer passes Volt a function that renders the HTML a page request is answered with. With Volt's morph setting, Volt's websocket process for each open page renders the page again when sources change and tells the page what changed, instead of the page requesting itself. Volt 0.20.0 ignores the option. When the server rendered an island with new props, Volt sets them on the island's element and dispatches volt:element-update. The Vue adapter handles it by swapping its props, so the island re-renders in place and keeps its state. Other adapters do not handle it yet, so the page reloads for them.
Every adapter now handles volt:element-update through a shared onPropsUpdate helper. React renders the component again on the same root, and Solid reads props through a signal, so both keep the island's state, as Vue does. Props passed to Svelte's mount are not reactive outside a Svelte module, so a Svelte island is mounted again and its state resets.
Volt 0.21 has the :document option and the volt:element-update event that this branch uses, so the render function and island re-rendering take effect. The basic example's lockfile follows.
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.
Companion to elixir-volt/volt#54. It has no effect until a Volt release after 0.20.0; Volt 0.20.0 ignores the new option, and
mix cipasses against it.Changes
Render function for Volt.
Astral.DevServerpasses Voltdocument: {Astral.DevServer, :render_document, [config]}, which renders the HTML a page request is answered with. With Volt'smorphsetting, Volt's websocket process for each open page renders the page again when sources change and tells the page what changed, instead of the page requesting itself.Islands re-render on new props. When the server rendered an island with new props, Volt sets them on the island's element and dispatches
volt:element-update. Every adapter handles it through a sharedonPropsUpdatehelper:shallowRefProps passed to Svelte's
mountare not reactive outside a Svelte module, which is why Svelte remounts.Verification
mix cipasses: 257 tests, including four new browser tests, one per framework, that update an island's props and check its state.render_document/2produces the HTML whose entity tag the served page carries.Open points
morphon; sites opt in withconfig :volt, :server, morph: [preserve: "[data-astral-island]"].