Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add data-elm attributes to prerendered HTML for virtualization #519

Merged
merged 1 commit into from
Feb 13, 2025

Conversation

lydell
Copy link
Contributor

@lydell lydell commented Feb 11, 2025

Followup on #512.

In the latest version of my fork of elm/virtual-dom, I add data-elm to all elements created by Elm, which means that elm-pages is going to render them as for example <div data-elm other-attribute="stuff">. I don’t render data-elm client-side, though, to avoid cluttering the browser dev tools.

Marking the elements created by Elm with data-elm is needed for better virtualization. Only text nodes, and elements with data-elm, are virtualized. This allows for example third-party scripts to insert extra elements in <body> while the Elm JS is loading, without having Elm blow those elements away when it initializes.

Two of the elements rendered by Elm via elm-pages (the data-url element, and the aria-live announcer) are hardcoded-ly rendered on the server, so there we need to add data-url manually. That’s what this PR does.

Without data-elm on those two elements, we end up with two data-url divs, and two aria-live announcers, on the page (the original ones from the HTML, that Elm then ignores, and new ones rendered by Elm client-side).

Copy link

netlify bot commented Feb 11, 2025

👷 Deploy request for elm-pages-todos pending review.

Visit the deploys page to approve it

Name Link
🔨 Latest commit ef954fc

@dillonkearns dillonkearns merged commit 68ec499 into dillonkearns:master Feb 13, 2025
1 check passed
@dillonkearns
Copy link
Owner

Sounds good, thank you for keeping me posted on this Simon!

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.

2 participants