From 80d7415807b9834b72293928c86d1b87c1bafe9c Mon Sep 17 00:00:00 2001
From: Rahul Sharma <31248807+devsmitra@users.noreply.github.com>
Date: Tue, 27 Jul 2021 18:26:46 +0530
Subject: [PATCH] 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
---
examples/framework-react/src/components/Counter.jsx | 4 ++--
examples/framework-react/src/pages/index.astro | 6 ++++--
packages/astro/src/compiler/transform/head.ts | 2 +-
.../react-component/src/components/PropsSpread.jsx | 5 +++++
.../test/fixtures/react-component/src/pages/index.astro | 7 ++++++-
packages/astro/test/react-component.test.js | 2 ++
6 files changed, 20 insertions(+), 6 deletions(-)
create mode 100644 packages/astro/test/fixtures/react-component/src/components/PropsSpread.jsx
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'
-
+
Hello React!
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 {props.text}
;
+}
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!',
+};
---
@@ -13,7 +18,7 @@ import {Research2} from '../components/Research.jsx';
-
+
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 () => {