Skip to content

Conversation

metalix2
Copy link

@metalix2 metalix2 commented May 8, 2025

Description

This PR is to solve issue #309

This provides support for the global attributes which could be attached the Script tag.

I've included all of them but happy to remove uncommon ones.

I've left inline comments in to explain the types and code. I've removed id as it's a global attribute and included it with the rest of optional global attributes which will be spread on to the React script tag or set with setAttribute on hydrate.

Let me know your thoughts. Open to suggestions.

Though typescript will complain it will still let invalid attributes through as folks can choose to ignore the unsupported attributes.

Screenshots

Type Assertion working
Screenshot 2025-05-08 at 16 42 00

Render Examples
Screenshot 2025-05-08 at 16 45 58
Screenshot 2025-05-08 at 16 45 19

let startsHydrated = React.useRef(isHydrated);

// biome-ignore lint/correctness/useExhaustiveDependencies: for small objects using JSON.stringify shouldn't impact performance. We also can't explicitly declare each possible global attribute especially data-* attributes.
const memoizedGlobal = React.useMemo(
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@metalix2
Copy link
Author

Any thoughts on this proposal? I could reduce it down to support just the id and data-* global attributes.

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