Adds changeset

Support passing children as props in Preact as well
Adding a changeset
2021-07-14 08:34:09 -04:00 · 2021-07-14 08:32:52 -04:00 · 2021-07-13 17:06:19 -04:00 · 2021-07-13 17:04:11 -04:00
10 changed files with 91 additions and 8 deletions
--- a/.changeset/gorgeous-eyes-laugh.md
+++ b/.changeset/gorgeous-eyes-laugh.md
@ -0,0 +1,5 @@
+---
+'@astrojs/renderer-react': patch
+---
+
+Allows passing children to react components via props
--- a/.changeset/pretty-clocks-develop.md
+++ b/.changeset/pretty-clocks-develop.md
@ -0,0 +1,5 @@
+---
+'@astrojs/renderer-preact': patch
+---
+
+Allows passing children as props to Preact components
--- a/packages/astro/test/fixtures/preact-component/src/components/Child.jsx
+++ b/packages/astro/test/fixtures/preact-component/src/components/Child.jsx
@ -0,0 +1,7 @@
+import { h } from 'preact';
+
+export default ({ id, children }) => {
+  return (
+    <div id={id}>{children}</div>
+  );
+}
--- a/packages/astro/test/fixtures/preact-component/src/pages/child-prop.astro
+++ b/packages/astro/test/fixtures/preact-component/src/pages/child-prop.astro
@ -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>
--- a/packages/astro/test/fixtures/react-component/src/components/Child.jsx
+++ b/packages/astro/test/fixtures/react-component/src/components/Child.jsx
@ -0,0 +1,7 @@
+import React from 'react';
+
+export default ({ id, children }) => {
+  return (
+    <div id={id}>{children}</div>
+  );
+}
--- a/packages/astro/test/fixtures/react-component/src/pages/child-prop.astro
+++ b/packages/astro/test/fixtures/react-component/src/pages/child-prop.astro
@ -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>
--- a/packages/astro/test/preact-component.test.js
+++ b/packages/astro/test/preact-component.test.js
@ -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();
--- a/packages/astro/test/react-component.test.js
+++ b/packages/astro/test/react-component.test.js
@ -79,4 +79,14 @@ React('Get good error message when react import is forgotten', async () => {
  assert.equal(result.error.message, 'React is not defined');
 });

+React('Children passed as props', async () => {
+  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>');
+});
+
 React.run();
--- a/packages/renderers/renderer-preact/server.js
+++ b/packages/renderers/renderer-preact/server.js
@ -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 };
 }

--- a/packages/renderers/renderer-react/server.js
+++ b/packages/renderers/renderer-react/server.js
@ -4,7 +4,7 @@ import StaticHtml from './static-html.js';

 const reactTypeof = Symbol.for('react.element');

-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') {
@ -26,16 +26,24 @@ function check(Component, props, children) {
    return h('div');
  }

-  renderToStaticMarkup(Tester, props, children, {});
+  await renderToStaticMarkup(Tester, props, children, {});

  if (error) {
    throw error;
  }
+
  return isReactComponent;
 }

-function renderToStaticMarkup(Component, props, children, metadata) {
-  const vnode = h(Component, { ...props, children: h(StaticHtml, { value: children }), innerHTML: children });
+async function renderToStaticMarkup(Component, props, children, metadata) {
+  const childrenValue = children || (await props.children);
+  const vnode = h(Component, {
+    ...props,
+    children: h(StaticHtml, {
+      value: childrenValue
+    }),
+    innerHTML: children
+  });
  let html;
  if (metadata && metadata.hydrate) {
    html = renderToString(vnode);
Author	SHA1	Message	Date
Matthew Phillips	ecb0f0f939	Adds changeset	2021-07-14 08:34:09 -04:00
Matthew Phillips	2f61a8c745	Support passing children as props in Preact as well	2021-07-14 08:32:52 -04:00
Matthew Phillips	f177cb451e	Adding a changeset	2021-07-13 17:06:19 -04:00
Matthew Phillips	0de469d273	Allow children to be passed as props in React Closes #681	2021-07-13 17:04:11 -04:00