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

Fix usage of arrow functions as components (#426)

Browse source 
* Fix usage of arrow functions as components

This fixes the React and Preact component as arrow function use-case by checking for the prototype property (arrow functions don't)

* Check the prototype
This commit is contained in:
Matthew Phillips 2021-06-14 13:24:37 -04:00 committed by GitHub
parent 5602aabfe0
commit af03c90c2b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 18 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,5 @@
import { h, Component } from 'preact';
export default () => {
return <div id="arrow-fn-component"></div>;
}

2
packages/astro/test/fixtures/preact-component/src/pages/fn.astro vendored
View file

@ -1,5 +1,6 @@
--- ---
import FunctionComponent from '../components/Function.jsx'; import FunctionComponent from '../components/Function.jsx';
import ArrowFunctionComponent from '../components/ArrowFunction.jsx';
--- ---
<html> <html>
@ -8,5 +9,6 @@ import FunctionComponent from '../components/Function.jsx';
</head> </head>
<body> <body>
<FunctionComponent /> <FunctionComponent />
<ArrowFunctionComponent />
</body> </body>
</html> </html>

5
packages/astro/test/fixtures/react-component/src/components/ArrowFunction.jsx vendored Normal file
View file

@ -0,0 +1,5 @@
import React from 'react';
export default () => {
return <div id="arrow-fn-component"></div>;
}

2
packages/astro/test/fixtures/react-component/src/pages/index.astro vendored
View file

@ -1,6 +1,7 @@
--- ---
import Hello from '../components/Hello.jsx'; import Hello from '../components/Hello.jsx';
import Later from '../components/Goodbye.vue'; // use different specifier import Later from '../components/Goodbye.vue'; // use different specifier
import ArrowFunction from '../components/ArrowFunction.jsx';
--- ---
<html> <html>
@ -10,5 +11,6 @@ import Later from '../components/Goodbye.vue'; // use different specifier
<body> <body>
<Hello name="world" /> <Hello name="world" />
<Later name="baby" /> <Later name="baby" />
<ArrowFunction />
</body> </body>
</html> </html>

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

@ -21,6 +21,7 @@ PreactComponent('Can load function component', async ({ runtime }) => {
const $ = doc(result.contents); const $ = doc(result.contents);
assert.equal($('#fn-component').length, 1, 'Can use function components'); assert.equal($('#fn-component').length, 1, 'Can use function components');
assert.equal($('#arrow-fn-component').length, 1, 'Can use function components');
}); });
PreactComponent('Can use hooks', async ({ runtime }) => { PreactComponent('Can use hooks', async ({ runtime }) => {

1
packages/astro/test/react-component.test.js
View file

@ -39,6 +39,7 @@ React('Can load React', async () => {
const $ = doc(result.contents); const $ = doc(result.contents);
assert.equal($('#react-h2').text(), 'Hello world!'); assert.equal($('#react-h2').text(), 'Hello world!');
assert.equal($('#arrow-fn-component').length, 1, 'Can use function components');
}); });
React('Can load Vue', async () => { React('Can load Vue', async () => {

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

@ -5,7 +5,7 @@ import StaticHtml from './static-html.js';
function check(Component, props, children) { function check(Component, props, children) {
if (typeof Component !== 'function') return false; if (typeof Component !== 'function') return false;
if (typeof Component.prototype.render === 'function') { if (Component.prototype != null && typeof Component.prototype.render === 'function') {
return BaseComponent.isPrototypeOf(Component); return BaseComponent.isPrototypeOf(Component);
} }

2
packages/renderers/renderer-react/server.js
View file

@ -7,7 +7,7 @@ const reactTypeof = Symbol.for('react.element');
function check(Component, props, children) { function check(Component, props, children) {
if (typeof Component !== 'function') return false; if (typeof Component !== 'function') return false;
if (typeof Component.prototype.render === 'function') { if (Component.prototype != null && typeof Component.prototype.render === 'function') {
return BaseComponent.isPrototypeOf(Component); return BaseComponent.isPrototypeOf(Component);
} }