Support PureComponent in the react renderer (#1467)

* Support PureComponent in the react renderer

* Adds a changeset

.changeset/silly-kids-collect.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/renderer-react': patch
+---
+
+Fixes detect to allow rendering React.PureComponents

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>
+        )
+    }
+
+}

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>

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 () => {

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;