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

Added undefined check for spread props (#832)

Browse source 
* husky setup added

* pre-commit script updated

* Revert "Feat/pre commit"

* spread issue fixed #522

* testcase added

* spread issue fixed #522

* testcase added
This commit is contained in:
Rahul Sharma 2021-07-27 18:26:46 +05:30 • committed by GitHub
parent e89a99f342
commit 80d7415807
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 20 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
examples/framework-react/src/components/Counter.jsx
View file

@ -1,7 +1,7 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
export default function Counter({ children }) { export default function Counter({ children, count: initialCount }) {
const [count, setCount] = useState(0); const [count, setCount] = useState(initialCount);
const add = () => setCount((i) => i + 1); const add = () => setCount((i) => i + 1);
const subtract = () => setCount((i) => i - 1); const subtract = () => setCount((i) => i - 1);

6
examples/framework-react/src/pages/index.astro
View file

@ -1,7 +1,9 @@
--- ---
// Component Imports // Component Imports
import Counter from '../components/Counter.jsx' import Counter from '../components/Counter.jsx'
const someProps = {
count: 0,
}
// Full Astro Component Syntax: // Full Astro Component Syntax:
// https://docs.astro.build/core-concepts/astro-components/ // https://docs.astro.build/core-concepts/astro-components/
@ -34,7 +36,7 @@ import Counter from '../components/Counter.jsx'
</head> </head>
<body> <body>
<main> <main>
<Counter client:visible> <Counter {...someProps} client:visible>
<h1>Hello React!</h1> <h1>Hello React!</h1>
</Counter> </Counter>
</main> </main>

2
packages/astro/src/compiler/transform/head.ts
View file

@ -26,7 +26,7 @@ export default function (opts: TransformOptions): Transformer {
} }
// Initialize eoh if there are no elements // Initialize eoh if there are no elements
eoh.enter(node); eoh.enter(node);
if (node.attributes && node.attributes.some(({ name }: any) => name.startsWith('client:'))) { if (node.attributes && node.attributes.some(({ name }: any) => name?.startsWith('client:'))) {
hasComponents = true; hasComponents = true;
return; return;
} }

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

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

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

@ -2,7 +2,12 @@
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'; import ArrowFunction from '../components/ArrowFunction.jsx';
import PropsSpread from '../components/PropsSpread.jsx';
import {Research2} from '../components/Research.jsx'; import {Research2} from '../components/Research.jsx';
const someProps = {
text: 'Hello world!',
};
--- ---
<html> <html>
@ -13,7 +18,7 @@ import {Research2} from '../components/Research.jsx';
<Hello name="world" /> <Hello name="world" />
<Later name="baby" /> <Later name="baby" />
<ArrowFunction /> <ArrowFunction />
<PropsSpread {...someProps}/>
<Research2 client:idle /> <Research2 client:idle />
</body> </body>
</html> </html>

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

@ -41,6 +41,8 @@ React('Can load React', async () => {
assert.equal($('#react-h2').text(), 'Hello world!'); assert.equal($('#react-h2').text(), 'Hello world!');
assert.equal($('#react-h2').attr('data-reactroot'), undefined, 'no reactroot'); assert.equal($('#react-h2').attr('data-reactroot'), undefined, 'no reactroot');
assert.equal($('#arrow-fn-component').length, 1, 'Can use function components'); assert.equal($('#arrow-fn-component').length, 1, 'Can use function components');
assert.equal($('#component-spread-props').length, 1, 'Can use spread for components');
assert.equal($('#component-spread-props').text(), 'Hello world!');
}); });
React('Includes reactroot on hydrating components', async () => { React('Includes reactroot on hydrating components', async () => {