diff options
| author |  Rahul Sharma <31248807+devsmitra@users.noreply.github.com>
| 2021-07-27 18:26:46 +0530 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2021-07-27 08:56:46 -0400 |
| commit | 80d7415807b9834b72293928c86d1b87c1bafe9c (patch) | |
| tree | f1b2b7e00f7fe8e6accc34d5f8cf5b7b271a0cfb | |
| parent | e89a99f342912f5d382e1e23fcb66bfc2a33e0b8 (diff) | |
| download | astro-80d7415807b9834b72293928c86d1b87c1bafe9c.tar.gz astro-80d7415807b9834b72293928c86d1b87c1bafe9c.tar.zst astro-80d7415807b9834b72293928c86d1b87c1bafe9c.zip | |
Added undefined check for spread props (#832)
* husky setup added
* pre-commit script updated
* Revert "Feat/pre commit"
* spread issue fixed #522
* testcase added
* spread issue fixed #522
* testcase added
6 files changed, 20 insertions, 6 deletions
diff --git a/examples/framework-react/src/components/Counter.jsx b/examples/framework-react/src/components/Counter.jsx index 3ab6728e7..b7b219aae 100644 --- a/examples/framework-react/src/components/Counter.jsx +++ b/examples/framework-react/src/components/Counter.jsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; -export default function Counter({ children }) { - const [count, setCount] = useState(0); +export default function Counter({ children, count: initialCount }) { + const [count, setCount] = useState(initialCount); const add = () => setCount((i) => i + 1); const subtract = () => setCount((i) => i - 1); diff --git a/examples/framework-react/src/pages/index.astro b/examples/framework-react/src/pages/index.astro index 851eb6e78..79f2ddf74 100644 --- a/examples/framework-react/src/pages/index.astro +++ b/examples/framework-react/src/pages/index.astro @@ -1,7 +1,9 @@ --- // Component Imports import Counter from '../components/Counter.jsx' - +const someProps = { + count: 0, +} // Full Astro Component Syntax: // https://docs.astro.build/core-concepts/astro-components/ @@ -34,7 +36,7 @@ import Counter from '../components/Counter.jsx' </head> <body> <main> - <Counter client:visible> + <Counter {...someProps} client:visible> <h1>Hello React!</h1> </Counter> </main> diff --git a/packages/astro/src/compiler/transform/head.ts b/packages/astro/src/compiler/transform/head.ts index 99ba47c87..e608f8135 100644 --- a/packages/astro/src/compiler/transform/head.ts +++ b/packages/astro/src/compiler/transform/head.ts @@ -26,7 +26,7 @@ export default function (opts: TransformOptions): Transformer { } // Initialize eoh if there are no elements 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; return; } diff --git a/packages/astro/test/fixtures/react-component/src/components/PropsSpread.jsx b/packages/astro/test/fixtures/react-component/src/components/PropsSpread.jsx new file mode 100644 index 000000000..044c2a019 --- /dev/null +++ b/packages/astro/test/fixtures/react-component/src/components/PropsSpread.jsx @@ -0,0 +1,5 @@ +import React from 'react'; + +export default (props) => { + return <div id="component-spread-props">{props.text}</div>; +} 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 6ec7004f6..a64e076ce 100644 --- a/packages/astro/test/fixtures/react-component/src/pages/index.astro +++ b/packages/astro/test/fixtures/react-component/src/pages/index.astro @@ -2,7 +2,12 @@ import Hello from '../components/Hello.jsx'; 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'; + +const someProps = { + text: 'Hello world!', +}; --- <html> @@ -13,7 +18,7 @@ import {Research2} from '../components/Research.jsx'; <Hello name="world" /> <Later name="baby" /> <ArrowFunction /> - + <PropsSpread {...someProps}/> <Research2 client:idle /> </body> </html> diff --git a/packages/astro/test/react-component.test.js b/packages/astro/test/react-component.test.js index c0f7d383a..6f10b2914 100644 --- a/packages/astro/test/react-component.test.js +++ b/packages/astro/test/react-component.test.js @@ -41,6 +41,8 @@ React('Can load React', async () => { assert.equal($('#react-h2').text(), 'Hello world!'); assert.equal($('#react-h2').attr('data-reactroot'), undefined, 'no reactroot'); 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 () => { |