diff options
5 files changed, 23 insertions, 2 deletions
diff --git a/.changeset/silly-kids-collect.md b/.changeset/silly-kids-collect.md new file mode 100644 index 000000000..747b0ca30 --- /dev/null +++ b/.changeset/silly-kids-collect.md @@ -0,0 +1,5 @@ +--- +'@astrojs/renderer-react': patch +--- + +Fixes detect to allow rendering React.PureComponents diff --git a/packages/astro/test/fixtures/react-component/src/components/Pure.jsx b/packages/astro/test/fixtures/react-component/src/components/Pure.jsx new file mode 100644 index 000000000..6fae8613b --- /dev/null +++ b/packages/astro/test/fixtures/react-component/src/components/Pure.jsx @@ -0,0 +1,13 @@ +import React from 'react'; + +export default class StaticComponent extends React.PureComponent { + + render() { + return ( + <div id="pure"> + <h1>Static component</h1> + </div> + ) + } + +}
\ No newline at end of file diff --git a/packages/astro/test/fixtures/react-component/src/pages/index.astro b/packages/astro/test/fixtures/react-component/src/pages/index.astro index 3c0240296..5ebbd6e60 100644 --- a/packages/astro/test/fixtures/react-component/src/pages/index.astro +++ b/packages/astro/test/fixtures/react-component/src/pages/index.astro @@ -4,6 +4,7 @@ import Later from '../components/Goodbye.vue'; // use different specifier import ArrowFunction from '../components/ArrowFunction.jsx'; import PropsSpread from '../components/PropsSpread.jsx'; import {Research2} from '../components/Research.jsx'; +import Pure from '../components/Pure.jsx'; import TypeScriptComponent from '../components/TypeScriptComponent'; const someProps = { @@ -22,5 +23,6 @@ const someProps = { <PropsSpread {...someProps}/> <Research2 client:idle /> <TypeScriptComponent client:load /> + <Pure /> </body> </html> diff --git a/packages/astro/test/react-component.test.js b/packages/astro/test/react-component.test.js index 6bfde0d25..390573bbb 100644 --- a/packages/astro/test/react-component.test.js +++ b/packages/astro/test/react-component.test.js @@ -44,6 +44,7 @@ React('Can load React', async () => { assert.equal($('#component-spread-props').length, 1, 'Can use spread for components'); assert.equal($('#component-spread-props').text(), 'Hello world!'); assert.equal($('.ts-component').length, 1, 'Can use TS components'); + assert.equal($('#pure').length, 1, 'Can use Pure components'); }); React('Includes reactroot on hydrating components', async () => { diff --git a/packages/renderers/renderer-react/server.js b/packages/renderers/renderer-react/server.js index 5eded5afa..f97569616 100644 --- a/packages/renderers/renderer-react/server.js +++ b/packages/renderers/renderer-react/server.js @@ -1,4 +1,4 @@ -import { Component as BaseComponent, createElement as h } from 'react'; +import { Component as BaseComponent, createElement as h, PureComponent } from 'react'; import { renderToStaticMarkup as reactRenderToStaticMarkup, renderToString } from 'react-dom/server.js'; import StaticHtml from './static-html.js'; @@ -8,7 +8,7 @@ function check(Component, props, children) { if (typeof Component !== 'function') return false; if (Component.prototype != null && typeof Component.prototype.render === 'function') { - return BaseComponent.isPrototypeOf(Component); + return BaseComponent.isPrototypeOf(Component) || PureComponent.isPrototypeOf(Component); } let error = null; |