Support PureComponent in the react renderer (#1467)
* Support PureComponent in the react renderer * Adds a changeset
This commit is contained in:
parent
dd6442a686
commit
756e3769d3
5 changed files with 23 additions and 2 deletions
5
.changeset/silly-kids-collect.md
Normal file
5
.changeset/silly-kids-collect.md
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
'@astrojs/renderer-react': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Fixes detect to allow rendering React.PureComponents
|
13
packages/astro/test/fixtures/react-component/src/components/Pure.jsx
vendored
Normal file
13
packages/astro/test/fixtures/react-component/src/components/Pure.jsx
vendored
Normal file
|
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -4,6 +4,7 @@ import Later from '../components/Goodbye.vue'; // use different specifier
|
||||||
import ArrowFunction from '../components/ArrowFunction.jsx';
|
import ArrowFunction from '../components/ArrowFunction.jsx';
|
||||||
import PropsSpread from '../components/PropsSpread.jsx';
|
import PropsSpread from '../components/PropsSpread.jsx';
|
||||||
import {Research2} from '../components/Research.jsx';
|
import {Research2} from '../components/Research.jsx';
|
||||||
|
import Pure from '../components/Pure.jsx';
|
||||||
import TypeScriptComponent from '../components/TypeScriptComponent';
|
import TypeScriptComponent from '../components/TypeScriptComponent';
|
||||||
|
|
||||||
const someProps = {
|
const someProps = {
|
||||||
|
@ -22,5 +23,6 @@ const someProps = {
|
||||||
<PropsSpread {...someProps}/>
|
<PropsSpread {...someProps}/>
|
||||||
<Research2 client:idle />
|
<Research2 client:idle />
|
||||||
<TypeScriptComponent client:load />
|
<TypeScriptComponent client:load />
|
||||||
|
<Pure />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -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').length, 1, 'Can use spread for components');
|
||||||
assert.equal($('#component-spread-props').text(), 'Hello world!');
|
assert.equal($('#component-spread-props').text(), 'Hello world!');
|
||||||
assert.equal($('.ts-component').length, 1, 'Can use TS components');
|
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 () => {
|
React('Includes reactroot on hydrating components', async () => {
|
||||||
|
|
|
@ -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 { renderToStaticMarkup as reactRenderToStaticMarkup, renderToString } from 'react-dom/server.js';
|
||||||
import StaticHtml from './static-html.js';
|
import StaticHtml from './static-html.js';
|
||||||
|
|
||||||
|
@ -8,7 +8,7 @@ function check(Component, props, children) {
|
||||||
if (typeof Component !== 'function') return false;
|
if (typeof Component !== 'function') return false;
|
||||||
|
|
||||||
if (Component.prototype != null && typeof Component.prototype.render === 'function') {
|
if (Component.prototype != null && typeof Component.prototype.render === 'function') {
|
||||||
return BaseComponent.isPrototypeOf(Component);
|
return BaseComponent.isPrototypeOf(Component) || PureComponent.isPrototypeOf(Component);
|
||||||
}
|
}
|
||||||
|
|
||||||
let error = null;
|
let error = null;
|
||||||
|
|
Loading…
Add table
Reference in a new issue