renderToHtmlParts: expose granular css/js/tags - #38
Merged
Conversation
Non-breaking: head and body are unchanged; the pieces the assembled head is built from are now also returned, for pipelines that need them separately (CSS inlining, injecting into an existing style pipeline, dropping scripts for email sends). No fonts field — Elements has no font registry, and an always-empty array would misrepresent parity with editor chunk exports. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
This PR extends the React package’s renderToHtmlParts API to expose granular head contributions (css, js, tags) alongside the existing assembled head/body strings, enabling downstream pipelines (e.g. CSS inlining) to consume the raw pieces directly while preserving the prior output.
Changes:
- Extend the
HtmlPartsreturn shape to includecss,js, andtagsin addition toheadandbody. - Add a test asserting presence/shape of the new fields and that
headis exactly the composition of the granular pieces. - Update package README to document the new granular fields and example usage.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/react/src/utils/render-to-html.tsx | Extends HtmlParts and renderToHtmlParts to return granular css/js/tags alongside head/body. |
| packages/react/src/utils/extract-head.test.tsx | Adds coverage for the new granular return fields and validates head composition. |
| packages/react/README.md | Documents the expanded renderToHtmlParts return shape and provides an example for CSS inlining use cases. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
The editor's documented chunks are body/css/js/fonts. Elements exposes tags additionally because component head functions can contribute them — reassembling from css + js alone would silently drop tags — and omits fonts (no font registry; renderToHtml's fonts option covers font links). Both deviations are now stated in the types and README. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
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.
What
Non-breaking addition:
renderToHtmlPartsnow returns the granular pieces alongside the pre-assembled strings:Restores symmetry with the chunk mental model from editor exports for anyone composing their own document shell. Deliberately no
fontsfield: Elements has no font registry, and an always-empty array would misrepresent parity — callers pass font stylesheet URLs explicitly viarenderToHtml'sfontsoption instead.Tests
New test asserts the granular fields exist, css has no wrapper, and the assembled
headis byte-exactly the granular pieces composed. Full suite 412 green.🤖 Generated with Claude Code
📖 Storybook Preview: https://unlayer.github.io/elements/pr/38/