Skip to content

Preserve Vite nodes and explicitly ignored elements during domdiff - #157

Open
teddybradford wants to merge 1 commit into
11ty:mainfrom
teddybradford:main
Open

teddybradford wants to merge 1 commit into
11ty:mainfrom
teddybradford:main

Conversation

@teddybradford

@teddybradford teddybradford commented Sep 13, 2026

Copy link
Copy Markdown

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

  • Added isViteNode() to identify:
    • Vite client script
    • Elements with data-vite-dev-id (injected by Vite)
  • Prevented Vite nodes from being discarded or updated during morphdom operations
  • Added isDomdiffIgnored() for elements marked with data-domdiff-ignore
  • Prevented ignored elements from being discarded, updated, or triggering script reloads when added

Summary

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-plugin that 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

@teddybradford

Copy link
Copy Markdown
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>

@teddybradford

teddybradford commented Sep 13, 2026

Copy link
Copy Markdown
Author

Possible enhancement: remove any data-domdiff-ignore attributes during non-dev (i.e., production) 11ty builds. Not sure if this should be automatic or handled manually.

Or maybe make the selector a dev server config rather than data-domdiff-ignore?

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant