summaryrefslogtreecommitdiff
path: root/packages/integrations/react
diff options
context:
space:
mode:
Diffstat (limited to 'packages/integrations/react')
-rw-r--r--packages/integrations/react/client-v17.js5
-rw-r--r--packages/integrations/react/client.js5
-rw-r--r--packages/integrations/react/server-v17.js15
-rw-r--r--packages/integrations/react/server.js15
-rw-r--r--packages/integrations/react/static-html.js5
5 files changed, 35 insertions, 10 deletions
diff --git a/packages/integrations/react/client-v17.js b/packages/integrations/react/client-v17.js
index 1dce34709..443109603 100644
--- a/packages/integrations/react/client-v17.js
+++ b/packages/integrations/react/client-v17.js
@@ -3,7 +3,10 @@ import { render, hydrate } from 'react-dom';
import StaticHtml from './static-html.js';
export default (element) =>
- (Component, props, children, { client }) => {
+ (Component, props, { default: children, ...slotted }, { client }) => {
+ for (const [key, value] of Object.entries(slotted)) {
+ props[key] = createElement(StaticHtml, { value, name: key });
+ }
const componentEl = createElement(
Component,
props,
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,
diff --git a/packages/integrations/react/server-v17.js b/packages/integrations/react/server-v17.js
index b48d7b6f4..5d747a832 100644
--- a/packages/integrations/react/server-v17.js
+++ b/packages/integrations/react/server-v17.js
@@ -2,6 +2,7 @@ import React from 'react';
import ReactDOM from 'react-dom/server.js';
import StaticHtml from './static-html.js';
+const slotName = str => str.trim().replace(/[-_]([a-z])/g, (_, w) => w.toUpperCase());
const reactTypeof = Symbol.for('react.element');
function errorIsComingFromPreactComponent(err) {
@@ -50,12 +51,20 @@ function check(Component, props, children) {
return isReactComponent;
}
-function renderToStaticMarkup(Component, props, children, metadata) {
+function renderToStaticMarkup(Component, props, { default: children, ...slotted }, metadata) {
delete props['class'];
- const vnode = React.createElement(Component, {
+ const slots = {};
+ for (const [key, value] of Object.entries(slotted)) {
+ const name = slotName(key);
+ slots[name] = React.createElement(StaticHtml, { value, name });
+ }
+ // Note: create newProps to avoid mutating `props` before they are serialized
+ const newProps = {
...props,
+ ...slots,
children: children != null ? React.createElement(StaticHtml, { value: children }) : undefined,
- });
+ }
+ const vnode = React.createElement(Component, newProps);
let html;
if (metadata && metadata.hydrate) {
html = ReactDOM.renderToString(vnode);
diff --git a/packages/integrations/react/server.js b/packages/integrations/react/server.js
index 776901563..cda839a1c 100644
--- a/packages/integrations/react/server.js
+++ b/packages/integrations/react/server.js
@@ -2,6 +2,7 @@ import React from 'react';
import ReactDOM from 'react-dom/server';
import StaticHtml from './static-html.js';
+const slotName = str => str.trim().replace(/[-_]([a-z])/g, (_, w) => w.toUpperCase());
const reactTypeof = Symbol.for('react.element');
function errorIsComingFromPreactComponent(err) {
@@ -56,12 +57,20 @@ async function getNodeWritable() {
return Writable;
}
-async function renderToStaticMarkup(Component, props, children, metadata) {
+async function renderToStaticMarkup(Component, props, { default: children, ...slotted }, metadata) {
delete props['class'];
- const vnode = React.createElement(Component, {
+ const slots = {};
+ for (const [key, value] of Object.entries(slotted)) {
+ const name = slotName(key);
+ slots[name] = React.createElement(StaticHtml, { value, name });
+ }
+ // Note: create newProps to avoid mutating `props` before they are serialized
+ const newProps = {
...props,
+ ...slots,
children: children != null ? React.createElement(StaticHtml, { value: children }) : undefined,
- });
+ }
+ const vnode = React.createElement(Component, newProps);
let html;
if (metadata && metadata.hydrate) {
html = ReactDOM.renderToString(vnode);
diff --git a/packages/integrations/react/static-html.js b/packages/integrations/react/static-html.js
index ecd76ae9b..9589aaed8 100644
--- a/packages/integrations/react/static-html.js
+++ b/packages/integrations/react/static-html.js
@@ -7,9 +7,10 @@ import { createElement as h } from 'react';
* As a bonus, we can signal to React that this subtree is
* entirely static and will never change via `shouldComponentUpdate`.
*/
-const StaticHtml = ({ value }) => {
+const StaticHtml = ({ value, name }) => {
if (!value) return null;
- return h('astro-fragment', {
+ return h('astro-slot', {
+ name,
suppressHydrationWarning: true,
dangerouslySetInnerHTML: { __html: value },
});