michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Support passing children as props in Preact as well

Browse source
This commit is contained in:
Matthew Phillips 2021-07-14 08:32:52 -04:00
parent f177cb451e
commit 2f61a8c745
4 changed files with 40 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
packages/astro/test/fixtures/preact-component/src/components/Child.jsx vendored Normal file
View file

@ -0,0 +1,7 @@
import { h } from 'preact';
export default ({ id, children }) => {
return (
<div id={id}>{children}</div>
);
}

12
packages/astro/test/fixtures/preact-component/src/pages/child-prop.astro vendored Normal file
View file

@ -0,0 +1,12 @@
---
import Child from '../components/Child.jsx';
---
<html>
<head><title>Children tests</title></head>
<body>
<Child id="content"><span>content</span></Child>
<Child id="prop" children={<span>prop</span>} />
<Child id="prop-and-content" children={<span>prop</span>}><span>content</span></Child>
</body>
</html>

10
packages/astro/test/preact-component.test.js
View file

@ -40,4 +40,14 @@ PreactComponent('Can export a Fragment', async ({ runtime }) => {
assert.equal($('body').children().length, 0, "nothing rendered but it didn't throw.");
});
PreactComponent('Children passed as props', async ({ runtime }) => {
const result = await runtime.load('/child-prop');
const html = result.contents;
const $ = doc(html);
assert.equal($('#content').html(), '<span>content</span>');
assert.equal($('#prop').html(), '<span>prop</span>');
assert.equal($('#prop-and-content').html(), '<span>content</span>');
});
PreactComponent.run();

15
packages/renderers/renderer-preact/server.js
View file

@ -2,19 +2,26 @@ import { h, Component as BaseComponent } from 'preact';
import { renderToString } from 'preact-render-to-string';
import StaticHtml from './static-html.js';
function check(Component, props, children) {
async function check(Component, props, children) {
if (typeof Component !== 'function') return false;
if (Component.prototype != null && typeof Component.prototype.render === 'function') {
return BaseComponent.isPrototypeOf(Component);
}
const { html } = renderToStaticMarkup(Component, props, children);
const { html } = await renderToStaticMarkup(Component, props, children);
return typeof html === 'string';
}
function renderToStaticMarkup(Component, props, children) {
const html = renderToString(h(Component, { ...props, children: h(StaticHtml, { value: children }), innerHTML: children }));
async function renderToStaticMarkup(Component, props, children) {
const childrenValue = children || (await props.children);
const html = renderToString(h(Component, {
...props,
children: h(StaticHtml, {
value: childrenValue
}),
innerHTML: children
}));
return { html };
}