Fix non-object spread

src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts

@@ -195,8 +195,11 @@ export default class InlineComponentWrapper extends Wrapper {
 					if (attr.is_spread) {
 						const value = attr.expression.render(block);
 						initial_props.push(value);
-
-						changes.push(condition ? `${condition} && ${value}` : value);
+						let value_object_check = value
+						if (attr.expression.node.type !== 'ObjectExpression') {
+							value_object_check = `typeof ${value} === 'object' && ${value} !== null ? ${value} : {}`;
+						}
+						changes.push(condition ? `${condition} && (${value_object_check})` : value_object_check);
 					} else {
 						const obj = `{ ${quote_name_if_necessary(name)}: ${attr.get_value(block)} }`;
 						initial_props.push(obj);

test/runtime/samples/spread-component-dynamic-non-object-boolean/Widget.svelte

@@ -0,0 +1,9 @@
+<script>
+	export let foo;
+	export let baz;
+	export let qux;
+</script>
+
+<p>foo: {foo}</p>
+<p>baz: {baz}</p>
+<p>qux: {qux}</p>

test/runtime/samples/spread-component-dynamic-non-object-boolean/_config.js

@@ -0,0 +1,24 @@
+export default {
+	props: {
+		props: {
+			foo: 'lol',
+			baz: 40 + 2,
+		}
+	},
+
+	html: `
+		<div><p>foo: lol</p>
+		<p>baz: 42</p>
+		<p>qux: named</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.props = true;
+
+		assert.htmlEqual(target.innerHTML, `
+			<div><p>foo: undefined</p>
+			<p>baz: undefined</p>
+			<p>qux: named</p>
+		`);
+	}
+};

test/runtime/samples/spread-component-dynamic-non-object-boolean/main.svelte

@@ -0,0 +1,9 @@
+<script>
+	import Widget from './Widget.svelte';
+
+	export let props;
+</script>
+
+<div>
+	<Widget {...props} qux="named"/>
+</div>

test/runtime/samples/spread-component-dynamic-non-object-multiple-dependencies/Widget.svelte

@@ -0,0 +1,6 @@
+<script>
+	export let foo;
+	export let baz;
+</script>
+
+{foo} {baz}

test/runtime/samples/spread-component-dynamic-non-object-multiple-dependencies/_config.js

@@ -0,0 +1,10 @@
+export default {
+	html: `b baz`,
+	test({ assert, component, target }) {
+		component.bar = undefined;
+		assert.htmlEqual(
+			target.innerHTML,
+			`b undefined`
+		);
+	},
+};

test/runtime/samples/spread-component-dynamic-non-object-multiple-dependencies/main.svelte

@@ -0,0 +1,10 @@
+<script>
+	export let foo = false;
+	export let a = 'a';
+	export let b = 'b';
+	export let bar = { baz: 'baz' };
+
+	import Widget from './Widget.svelte';
+</script>
+
+<Widget foo={foo ? a : b} {...bar}/>

test/runtime/samples/spread-component-dynamic-non-object-null/Widget.svelte

@@ -0,0 +1,9 @@
+<script>
+	export let foo;
+	export let baz;
+	export let qux;
+</script>
+
+<p>foo: {foo}</p>
+<p>baz: {baz}</p>
+<p>qux: {qux}</p>

test/runtime/samples/spread-component-dynamic-non-object-null/_config.js

@@ -0,0 +1,24 @@
+export default {
+	props: {
+		props: {
+			foo: 'lol',
+			baz: 40 + 2,
+		}
+	},
+
+	html: `
+		<div><p>foo: lol</p>
+		<p>baz: 42</p>
+		<p>qux: named</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.props = null;
+
+		assert.htmlEqual(target.innerHTML, `
+			<div><p>foo: undefined</p>
+			<p>baz: undefined</p>
+			<p>qux: named</p>
+		`);
+	}
+};

test/runtime/samples/spread-component-dynamic-non-object-null/main.svelte

@@ -0,0 +1,9 @@
+<script>
+	import Widget from './Widget.svelte';
+
+	export let props;
+</script>
+
+<div>
+	<Widget {...props} qux="named"/>
+</div>

test/runtime/samples/spread-component-dynamic-non-object-number/Widget.svelte

@@ -0,0 +1,9 @@
+<script>
+	export let foo;
+	export let baz;
+	export let qux;
+</script>
+
+<p>foo: {foo}</p>
+<p>baz: {baz}</p>
+<p>qux: {qux}</p>

test/runtime/samples/spread-component-dynamic-non-object-number/_config.js

@@ -0,0 +1,24 @@
+export default {
+	props: {
+		props: {
+			foo: 'lol',
+			baz: 40 + 2,
+		}
+	},
+
+	html: `
+		<div><p>foo: lol</p>
+		<p>baz: 42</p>
+		<p>qux: named</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.props = 1337;
+
+		assert.htmlEqual(target.innerHTML, `
+			<div><p>foo: undefined</p>
+			<p>baz: undefined</p>
+			<p>qux: named</p>
+		`);
+	}
+};

test/runtime/samples/spread-component-dynamic-non-object-number/main.svelte

@@ -0,0 +1,9 @@
+<script>
+	import Widget from './Widget.svelte';
+
+	export let props;
+</script>
+
+<div>
+	<Widget {...props} qux="named"/>
+</div>

test/runtime/samples/spread-component-dynamic-non-object-undefined/Widget.svelte

@@ -0,0 +1,9 @@
+<script>
+	export let foo;
+	export let baz;
+	export let qux;
+</script>
+
+<p>foo: {foo}</p>
+<p>baz: {baz}</p>
+<p>qux: {qux}</p>

test/runtime/samples/spread-component-dynamic-non-object-undefined/_config.js

@@ -0,0 +1,24 @@
+export default {
+	props: {
+		props: {
+			foo: 'lol',
+			baz: 40 + 2,
+		}
+	},
+
+	html: `
+		<div><p>foo: lol</p>
+		<p>baz: 42</p>
+		<p>qux: named</p>
+	`,
+
+	test({ assert, component, target }) {
+		component.props = undefined;
+
+		assert.htmlEqual(target.innerHTML, `
+			<div><p>foo: undefined</p>
+			<p>baz: undefined</p>
+			<p>qux: named</p>
+		`);
+	}
+};

test/runtime/samples/spread-component-dynamic-non-object-undefined/main.svelte

@@ -0,0 +1,9 @@
+<script>
+	import Widget from './Widget.svelte';
+
+	export let props;
+</script>
+
+<div>
+	<Widget {...props} qux="named"/>
+</div>