Merge pull request #3146 from sveltejs/gh-2135

handle circular values when rendering bindings

Author: Rich-Harris

src/runtime/internal/ssr.ts

@@ -122,7 +122,7 @@ export function get_store_value<T>(store: Readable<T>): T | undefined {
 
 export function add_attribute(name, value) {
 	if (!value) return '';
-	return ` ${name}${value === true ? '' : `=${JSON.stringify(value)}`}`;
+	return ` ${name}${value === true ? '' : `=${typeof value === 'string' ? JSON.stringify(value) : `"${value}"`}`}`;
 }
 
 export function add_classes(classes) {

test/runtime/samples/binding-circular/_config.js

@@ -0,0 +1,13 @@
+export default {
+	html: `
+		<select>
+			<option value="[object Object]">wheeee</option>
+		</select>
+	`,
+
+	ssrHtml: `
+		<select value="[object Object]">
+			<option value="[object Object]">wheeee</option>
+		</select>
+	`
+};

test/runtime/samples/binding-circular/main.svelte

@@ -0,0 +1,10 @@
+<script>
+	let obj = {};
+	obj.self = obj;
+
+	let selected = obj;
+</script>
+
+<select bind:value={selected}>
+	<option value={obj}>wheeee</option>
+</select>