mirror of
https://github.com/withastro/astro.git
synced 2024-12-23 21:53:55 -05:00
7373d61cdc
* 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>
80 lines
2.2 KiB
JavaScript
80 lines
2.2 KiB
JavaScript
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) {
|
|
return (
|
|
err.message &&
|
|
(err.message.startsWith("Cannot read property '__H'") ||
|
|
err.message.includes("(reading '__H')"))
|
|
);
|
|
}
|
|
|
|
function check(Component, props, children) {
|
|
// Note: there are packages that do some unholy things to create "components".
|
|
// Checking the $$typeof property catches most of these patterns.
|
|
if (typeof Component === 'object') {
|
|
const $$typeof = Component['$$typeof'];
|
|
return $$typeof && $$typeof.toString().slice('Symbol('.length).startsWith('react');
|
|
}
|
|
if (typeof Component !== 'function') return false;
|
|
|
|
if (Component.prototype != null && typeof Component.prototype.render === 'function') {
|
|
return React.Component.isPrototypeOf(Component) || React.PureComponent.isPrototypeOf(Component);
|
|
}
|
|
|
|
let error = null;
|
|
let isReactComponent = false;
|
|
function Tester(...args) {
|
|
try {
|
|
const vnode = Component(...args);
|
|
if (vnode && vnode['$$typeof'] === reactTypeof) {
|
|
isReactComponent = true;
|
|
}
|
|
} catch (err) {
|
|
if (!errorIsComingFromPreactComponent(err)) {
|
|
error = err;
|
|
}
|
|
}
|
|
|
|
return React.createElement('div');
|
|
}
|
|
|
|
renderToStaticMarkup(Tester, props, children, {});
|
|
|
|
if (error) {
|
|
throw error;
|
|
}
|
|
return isReactComponent;
|
|
}
|
|
|
|
function renderToStaticMarkup(Component, props, { default: children, ...slotted }, metadata) {
|
|
delete props['class'];
|
|
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);
|
|
} else {
|
|
html = ReactDOM.renderToStaticMarkup(vnode);
|
|
}
|
|
return { html };
|
|
}
|
|
|
|
export default {
|
|
check,
|
|
renderToStaticMarkup,
|
|
};
|