fix: explicitly check for null props in serializeSignals (#11930)

* fix: explicitly check for null props in `serializeSignals`

* chore: add changeset

.changeset/long-lemons-add.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/preact': patch
+---
+
+Preact components no longer throw an error if a property is null.

packages/astro/test/fixtures/preact-component/src/components/ComponentWithNullProp.jsx

@@ -0,0 +1,7 @@
+import { h } from 'preact';
+
+export default ({ nullProp }) => {
+  return <div id="preact-component-with-null-prop">
+		<p>I have a null prop: {nullProp}</p>
+	</div>
+}

packages/astro/test/fixtures/preact-component/src/pages/signals.astro

@@ -3,6 +3,7 @@ import { signal } from '@preact/signals';
 import Signals from '../components/Signals';
 import SignalsInArray from '../components/SignalsInArray';
 import SignalsInObject from '../components/SignalsInObject';
+import ComponentWithNullProp from '../components/ComponentWithNullProp';
 const count = signal(1);
 const secondCount = signal(2);
 ---
@@ -14,6 +15,7 @@ const secondCount = signal(2);
 		<Signals client:load count={count} />
 		<Signals client:load count={count} />
 		<SignalsInArray client:load signalsArray={["I'm not a signal", count, count, 12345, secondCount]} />
-		<SignalsInObject client:load signalsObject={{title:'I am a title', counter: count}} />
+		<SignalsInObject client:load signalsObject={{title:'I am a title', counter: count}}, />
+		<ComponentWithNullProp client:load nullProp={null} />
 	</body>
 </html>

packages/astro/test/preact-component.test.js

@@ -140,4 +140,11 @@ describe('Preact component', () => {
 		assert.equal(element.find('h1').text(), 'I am a title');
 		assert.equal(element.find('p').text(), '1');
 	});
+
+	it('Can use null props', async () => {
+		const html = await fixture.readFile('/signals/index.html');
+		const $ = cheerio.load(html);
+
+		assert.equal($('#preact-component-with-null-prop').length, 1);
+	});
 });

packages/integrations/preact/src/signals.ts

@@ -38,7 +38,8 @@ export function serializeSignals(
 	const signals: Signals = {};
 	for (const [key, value] of Object.entries(props)) {
 		const isPropArray = Array.isArray(value);
-		const isPropObject = !isSignal(value) && typeof props[key] === 'object' && !isPropArray;
+		// `typeof null` is 'object' in JS, so we need to check for `null` specifically
+		const isPropObject = !isSignal(value) && typeof props[key] === 'object' && props[key] !== null && !isPropArray; 
 
 		if (isPropObject || isPropArray) {
 			const values = isPropObject ? Object.keys(props[key]) : value;