diff options
| author |  Nate Moore <natemoo-re@users.noreply.github.com>
| 2022-06-23 10:10:54 -0500 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2022-06-23 10:10:54 -0500 |
| commit | 7373d61cdcaedd64bf5fd60521b157cfa4343558 (patch) | |
| tree | db7ba617722a58e4b1b6437f1fcabd7f894fd8b1 /packages/integrations/react/client.js | |
| parent | 19cd962d0b3433ee305d1d277ca4fc3b93593558 (diff) | |
| download | astro-7373d61cdcaedd64bf5fd60521b157cfa4343558.tar.gz astro-7373d61cdcaedd64bf5fd60521b157cfa4343558.tar.zst astro-7373d61cdcaedd64bf5fd60521b157cfa4343558.zip | |
Enable named slots in renderers (#3652)
* feat: pass all slots to renderers
* refactor: pass `slots` as top-level props
* test: add named slot test for frameworks
* fix: nested hydration, slots that are not initially rendered
* test: add nested-recursive e2e test
* fix: render unmatched custom element children
* chore: update lockfile
* fix: unrendered slots for client:only
* fix(lit): ensure lit integration uses new slots API
* chore: add changeset
* chore: add changesets
* fix: lit slots
* feat: convert dash-case or snake_case slots to camelCase for JSX
* feat: remove tmpl special logic
* test: add slot components-in-markdown test
* refactor: prefer Object.entries.map() to for/of loop
Co-authored-by: Nate Moore <nate@astro.build>
Diffstat (limited to 'packages/integrations/react/client.js')
| -rw-r--r-- | packages/integrations/react/client.js | 5 |
1 files changed, 4 insertions, 1 deletions
diff --git a/packages/integrations/react/client.js b/packages/integrations/react/client.js index 2828d2cbe..b41d7845a 100644 --- a/packages/integrations/react/client.js +++ b/packages/integrations/react/client.js @@ -11,8 +11,11 @@ function isAlreadyHydrated(element) { } export default (element) => - (Component, props, children, { client }) => { + (Component, props, { default: children, ...slotted }, { client }) => { if (!element.hasAttribute('ssr')) return; + for (const [key, value] of Object.entries(slotted)) { + props[key] = createElement(StaticHtml, { value, name: key }); + } const componentEl = createElement( Component, props, |