Preserve Vite nodes and explicitly ignored elements during domdiff - #157
Open
teddybradford wants to merge 1 commit into
Open
teddybradford wants to merge 1 commit into
teddybradford wants to merge 1 commit into
Conversation
Author
|
Here's an example of how I'm using this in practice to have 11ty's domdiff and Vite's hmr work simultaneously: <main>
<h1>Hello world!</h1>
<is-land type="svelte" data-component="MyComponent" data-domdiff-ignore></is-land>
/* islands.ts is a utility that loads Svelte components dynamically */
<script type="module" src="/src/assets/islands.ts" data-domdiff-ignore></script>
</main> |
Author
|
Possible enhancement: remove any Or maybe make the selector a dev server config rather than |
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.
This PR updates the reload client's domdiff behavior to preserve Vite elements and explicitly ignored elements during live reloads.
i.e., this opens up the ability to have domdiff for 11ty template changes while also having Vite HMR for isolated island architecture (
is-land) components on the same page. It avoids conflicts with embedded client-side, Vite-managed code so that the page doesn't need to fully reload, and state can be preserved while making template changes.Changes I made
isViteNode()to identify:data-vite-dev-id(injected by Vite)isDomdiffIgnored()for elements marked withdata-domdiff-ignoreSummary
11ty template changes can now be applied through dom diffing while Vite continues to manage HMR for isolated client-side components independently.
Note: This PR is intended to work in tandem with a PR for
eleventy-vite-pluginthat defaults to ignoring output and temp folders in Vite watcher to prevent full page reloads when domdiff is enabled.See 11ty/eleventy-plugin-vite#198