stringify values before setting text data - fixes #1598

Rich-Harris · Rich-Harris · commit 9964a7756556 · 2018-08-04T09:31:24.000-04:00
diff --git a/src/compile/nodes/MustacheTag.ts b/src/compile/nodes/MustacheTag.ts
@@ -10,7 +10,7 @@ export default class MustacheTag extends Tag {
 	) {
 		const { init } = this.renameThisMethod(
 			block,
-			value => `${this.var}.data = ${value};`
+			value => `@setData(${this.var}, ${value});`
 		);
 
 		block.addElement(
diff --git a/src/shared/dom.js b/src/shared/dom.js
@@ -155,6 +155,10 @@ export function claimText (nodes, data) {
 	return createText(data);
 }
 
+export function setData(text, data) {
+	text.data = '' + data;
+}
+
 export function setInputType(input, type) {
 	try {
 		input.type = type;
diff --git a/test/js/samples/collapses-text-around-comments/expected-bundle.js b/test/js/samples/collapses-text-around-comments/expected-bundle.js
@@ -25,6 +25,10 @@ function createText(data) {
 	return document.createTextNode(data);
 }
 
+function setData(text, data) {
+	text.data = '' + data;
+}
+
 function blankObject() {
 	return Object.create(null);
 }
@@ -167,7 +171,7 @@ function create_main_fragment(component, ctx) {
 
 		p(changed, ctx) {
 			if (changed.foo) {
-				text.data = ctx.foo;
+				setData(text, ctx.foo);
 			}
 		},
 
diff --git a/test/js/samples/collapses-text-around-comments/expected.js b/test/js/samples/collapses-text-around-comments/expected.js
@@ -1,5 +1,5 @@
 /* generated by Svelte vX.Y.Z */
-import { appendNode, assign, createElement, createText, detachNode, init, insertNode, proto } from "svelte/shared.js";
+import { appendNode, assign, createElement, createText, detachNode, init, insertNode, proto, setData } from "svelte/shared.js";
 
 function data() {
 	return { foo: 42 }
@@ -29,7 +29,7 @@ function create_main_fragment(component, ctx) {
 
 		p(changed, ctx) {
 			if (changed.foo) {
-				text.data = ctx.foo;
+				setData(text, ctx.foo);
 			}
 		},
 
diff --git a/test/js/samples/deconflict-builtins/expected-bundle.js b/test/js/samples/deconflict-builtins/expected-bundle.js
@@ -35,6 +35,10 @@ function createComment() {
 	return document.createComment('');
 }
 
+function setData(text, data) {
+	text.data = '' + data;
+}
+
 function blankObject() {
 	return Object.create(null);
 }
@@ -228,7 +232,7 @@ function create_each_block(component, ctx) {
 
 		p(changed, ctx) {
 			if ((changed.createElement) && text_value !== (text_value = ctx.node)) {
-				text.data = text_value;
+				setData(text, text_value);
 			}
 		},
 
diff --git a/test/js/samples/deconflict-builtins/expected.js b/test/js/samples/deconflict-builtins/expected.js
@@ -1,5 +1,5 @@
 /* generated by Svelte vX.Y.Z */
-import { appendNode, assign, createComment, createElement, createText, destroyEach, detachNode, init, insertNode, proto } from "svelte/shared.js";
+import { appendNode, assign, createComment, createElement, createText, destroyEach, detachNode, init, insertNode, proto, setData } from "svelte/shared.js";
 
 function create_main_fragment(component, ctx) {
 	var each_anchor;
@@ -79,7 +79,7 @@ function create_each_block(component, ctx) {
 
 		p(changed, ctx) {
 			if ((changed.createElement) && text_value !== (text_value = ctx.node)) {
-				text.data = text_value;
+				setData(text, text_value);
 			}
 		},
 
diff --git a/test/js/samples/dev-warning-missing-data-computed/expected-bundle.js b/test/js/samples/dev-warning-missing-data-computed/expected-bundle.js
@@ -31,6 +31,10 @@ function createText(data) {
 	return document.createTextNode(data);
 }
 
+function setData(text, data) {
+	text.data = '' + data;
+}
+
 function blankObject() {
 	return Object.create(null);
 }
@@ -191,11 +195,11 @@ function create_main_fragment(component, ctx) {
 
 		p: function update(changed, ctx) {
 			if ((changed.Math || changed.foo) && text_value !== (text_value = ctx.Math.max(0, ctx.foo))) {
-				text.data = text_value;
+				setData(text, text_value);
 			}
 
 			if (changed.bar) {
-				text_2.data = ctx.bar;
+				setData(text_2, ctx.bar);
 			}
 		},
 
diff --git a/test/js/samples/dev-warning-missing-data-computed/expected.js b/test/js/samples/dev-warning-missing-data-computed/expected.js
@@ -1,5 +1,5 @@
 /* generated by Svelte vX.Y.Z */
-import { addLoc, appendNode, assign, createElement, createText, detachNode, init, insertNode, protoDev } from "svelte/shared.js";
+import { addLoc, appendNode, assign, createElement, createText, detachNode, init, insertNode, protoDev, setData } from "svelte/shared.js";
 
 function bar({ foo }) {
 	return foo * 2;
@@ -28,11 +28,11 @@ function create_main_fragment(component, ctx) {
 
 		p: function update(changed, ctx) {
 			if ((changed.Math || changed.foo) && text_value !== (text_value = ctx.Math.max(0, ctx.foo))) {
-				text.data = text_value;
+				setData(text, text_value);
 			}
 
 			if (changed.bar) {
-				text_2.data = ctx.bar;
+				setData(text_2, ctx.bar);
 			}
 		},
 
diff --git a/test/js/samples/each-block-changed-check/expected-bundle.js b/test/js/samples/each-block-changed-check/expected-bundle.js
@@ -37,6 +37,10 @@ function createText(data) {
 	return document.createTextNode(data);
 }
 
+function setData(text, data) {
+	text.data = '' + data;
+}
+
 function blankObject() {
 	return Object.create(null);
 }
@@ -207,7 +211,7 @@ function create_main_fragment(component, ctx) {
 			}
 
 			if (changed.foo) {
-				text_1.data = ctx.foo;
+				setData(text_1, ctx.foo);
 			}
 		},
 
@@ -260,11 +264,11 @@ function create_each_block(component, ctx) {
 
 		p(changed, ctx) {
 			if ((changed.comments) && text_2_value !== (text_2_value = ctx.comment.author)) {
-				text_2.data = text_2_value;
+				setData(text_2, text_2_value);
 			}
 
 			if ((changed.elapsed || changed.comments || changed.time) && text_4_value !== (text_4_value = ctx.elapsed(ctx.comment.time, ctx.time))) {
-				text_4.data = text_4_value;
+				setData(text_4, text_4_value);
 			}
 
 			if ((changed.comments) && raw_value !== (raw_value = ctx.comment.html)) {
diff --git a/test/js/samples/each-block-changed-check/expected.js b/test/js/samples/each-block-changed-check/expected.js
@@ -1,5 +1,5 @@
 /* generated by Svelte vX.Y.Z */
-import { appendNode, assign, createElement, createText, destroyEach, detachAfter, detachNode, init, insertNode, proto } from "svelte/shared.js";
+import { appendNode, assign, createElement, createText, destroyEach, detachAfter, detachNode, init, insertNode, proto, setData } from "svelte/shared.js";
 
 function create_main_fragment(component, ctx) {
 	var text, p, text_1;
@@ -56,7 +56,7 @@ function create_main_fragment(component, ctx) {
 			}
 
 			if (changed.foo) {
-				text_1.data = ctx.foo;
+				setData(text_1, ctx.foo);
 			}
 		},
 
@@ -109,11 +109,11 @@ function create_each_block(component, ctx) {
 
 		p(changed, ctx) {
 			if ((changed.comments) && text_2_value !== (text_2_value = ctx.comment.author)) {
-				text_2.data = text_2_value;
+				setData(text_2, text_2_value);
 			}
 
 			if ((changed.elapsed || changed.comments || changed.time) && text_4_value !== (text_4_value = ctx.elapsed(ctx.comment.time, ctx.time))) {
-				text_4.data = text_4_value;
+				setData(text_4, text_4_value);
 			}
 
 			if ((changed.comments) && raw_value !== (raw_value = ctx.comment.html)) {
diff --git a/test/js/samples/each-block-keyed-animated/expected-bundle.js b/test/js/samples/each-block-keyed-animated/expected-bundle.js
@@ -29,6 +29,10 @@ function createComment() {
 	return document.createComment('');
 }
 
+function setData(text, data) {
+	text.data = '' + data;
+}
+
 function linear(t) {
 	return t;
 }
@@ -533,7 +537,7 @@ function create_each_block(component, key_1, ctx) {
 
 		p(changed, ctx) {
 			if ((changed.things) && text_value !== (text_value = ctx.thing.name)) {
-				text.data = text_value;
+				setData(text, text_value);
 			}
 		},
 
diff --git a/test/js/samples/each-block-keyed-animated/expected.js b/test/js/samples/each-block-keyed-animated/expected.js
@@ -1,5 +1,5 @@
 /* generated by Svelte vX.Y.Z */
-import { appendNode, assign, blankObject, createComment, createElement, createText, detachNode, fixAndOutroAndDestroyBlock, fixPosition, init, insertNode, proto, updateKeyedEach, wrapAnimation } from "svelte/shared.js";
+import { appendNode, assign, blankObject, createComment, createElement, createText, detachNode, fixAndOutroAndDestroyBlock, fixPosition, init, insertNode, proto, setData, updateKeyedEach, wrapAnimation } from "svelte/shared.js";
 
 function foo(node, animation, params) {
 	const dx = animation.from.left - animation.to.left;
@@ -80,7 +80,7 @@ function create_each_block(component, key_1, ctx) {
 
 		p(changed, ctx) {
 			if ((changed.things) && text_value !== (text_value = ctx.thing.name)) {
-				text.data = text_value;
+				setData(text, text_value);
 			}
 		},
 
diff --git a/test/js/samples/each-block-keyed/expected-bundle.js b/test/js/samples/each-block-keyed/expected-bundle.js
@@ -29,6 +29,10 @@ function createComment() {
 	return document.createComment('');
 }
 
+function setData(text, data) {
+	text.data = '' + data;
+}
+
 function destroyBlock(block, lookup) {
 	block.d(1);
 	lookup[block.key] = null;
@@ -298,7 +302,7 @@ function create_each_block(component, key_1, ctx) {
 
 		p(changed, ctx) {
 			if ((changed.things) && text_value !== (text_value = ctx.thing.name)) {
-				text.data = text_value;
+				setData(text, text_value);
 			}
 		},
 
diff --git a/test/js/samples/each-block-keyed/expected.js b/test/js/samples/each-block-keyed/expected.js
@@ -1,5 +1,5 @@
 /* generated by Svelte vX.Y.Z */
-import { appendNode, assign, blankObject, createComment, createElement, createText, destroyBlock, detachNode, init, insertNode, proto, updateKeyedEach } from "svelte/shared.js";
+import { appendNode, assign, blankObject, createComment, createElement, createText, destroyBlock, detachNode, init, insertNode, proto, setData, updateKeyedEach } from "svelte/shared.js";
 
 function create_main_fragment(component, ctx) {
 	var each_blocks_1 = [], each_lookup = blankObject(), each_anchor;
@@ -64,7 +64,7 @@ function create_each_block(component, key_1, ctx) {
 
 		p(changed, ctx) {
 			if ((changed.things) && text_value !== (text_value = ctx.thing.name)) {
-				text.data = text_value;
+				setData(text, text_value);
 			}
 		},
 
diff --git a/test/js/samples/input-files/expected.js b/test/js/samples/input-files/expected.js
@@ -52,4 +52,4 @@ function SvelteComponent(options) {
 }
 
 assign(SvelteComponent.prototype, proto);
-export default SvelteComponent;
+export default SvelteComponent;
diff --git a/test/js/samples/window-binding-scroll/expected-bundle.js b/test/js/samples/window-binding-scroll/expected-bundle.js
@@ -25,6 +25,10 @@ function createText(data) {
 	return document.createTextNode(data);
 }
 
+function setData(text, data) {
+	text.data = '' + data;
+}
+
 function blankObject() {
 	return Object.create(null);
 }
@@ -178,7 +182,7 @@ function create_main_fragment(component, ctx) {
 
 		p(changed, ctx) {
 			if (changed.y) {
-				text_1.data = ctx.y;
+				setData(text_1, ctx.y);
 			}
 		},
 
diff --git a/test/js/samples/window-binding-scroll/expected.js b/test/js/samples/window-binding-scroll/expected.js
@@ -1,5 +1,5 @@
 /* generated by Svelte vX.Y.Z */
-import { appendNode, assign, createElement, createText, detachNode, init, insertNode, proto } from "svelte/shared.js";
+import { appendNode, assign, createElement, createText, detachNode, init, insertNode, proto, setData } from "svelte/shared.js";
 
 function create_main_fragment(component, ctx) {
 	var window_updating = false, clear_window_updating = function() { window_updating = false; }, window_updating_timeout, p, text, text_1;
@@ -39,7 +39,7 @@ function create_main_fragment(component, ctx) {
 
 		p(changed, ctx) {
 			if (changed.y) {
-				text_1.data = ctx.y;
+				setData(text_1, ctx.y);
 			}
 		},
 
diff --git a/test/runtime/samples/set-null-text-node/_config.js b/test/runtime/samples/set-null-text-node/_config.js
@@ -1,22 +1,13 @@
-const data = { foo: null };
-
 export default {
-	data,
+	data: { foo: null },
 
-	html: '',
+	html: 'foo is null',
 
 	test(assert, component, target) {
-		assert.htmlEqual(target.innerHTML, 'hi there');
-
-		data.foo = 'friend';
-		component.set(data);
-
-		assert.htmlEqual(target.innerHTML, 'hi there friend');
-
-		data.foo = null;
-		component.set(data);
-
-		assert.htmlEqual(target.innerHTML, 'hi there');
+		component.set({ foo: 42 });
+		assert.htmlEqual(target.innerHTML, 'foo is 42');
 
+		component.set({ foo: null });
+		assert.htmlEqual(target.innerHTML, 'foo is null');
 	}
 };
diff --git a/test/runtime/samples/set-null-text-node/main.html b/test/runtime/samples/set-null-text-node/main.html
@@ -1 +1 @@
-hi there {foo}
+foo is {foo}

Original file line number	Diff line number	Diff line change
`@@ -25,6 +25,10 @@ function createText(data) {`
`25`	`25`	`return document.createTextNode(data);`
`26`	`26`	`}`
`27`	`27`
	`28`	`+function setData(text, data) {`
	`29`	`+ text.data = '' + data;`
	`30`	`+}`
	`31`	`+`
`28`	`32`	`function blankObject() {`
`29`	`33`	`return Object.create(null);`
`30`	`34`	`}`
`@@ -167,7 +171,7 @@ function create_main_fragment(component, ctx) {`
`167`	`171`
`168`	`172`	`p(changed, ctx) {`
`169`	`173`	`if (changed.foo) {`
`170`		`- text.data = ctx.foo;`
	`174`	`+ setData(text, ctx.foo);`
`171`	`175`	`}`
`172`	`176`	`},`
`173`	`177`
Original file line number	Diff line number	Diff line change
`@@ -35,6 +35,10 @@ function createComment() {`
`35`	`35`	`return document.createComment('');`
`36`	`36`	`}`
`37`	`37`
	`38`	`+function setData(text, data) {`
	`39`	`+ text.data = '' + data;`
	`40`	`+}`
	`41`	`+`
`38`	`42`	`function blankObject() {`
`39`	`43`	`return Object.create(null);`
`40`	`44`	`}`
`@@ -228,7 +232,7 @@ function create_each_block(component, ctx) {`
`228`	`232`
`229`	`233`	`p(changed, ctx) {`
`230`	`234`	`if ((changed.createElement) && text_value !== (text_value = ctx.node)) {`
`231`		`- text.data = text_value;`
	`235`	`+ setData(text, text_value);`
`232`	`236`	`}`
`233`	`237`	`},`
`234`	`238`
Original file line number	Diff line number	Diff line change
`@@ -31,6 +31,10 @@ function createText(data) {`
`31`	`31`	`return document.createTextNode(data);`
`32`	`32`	`}`
`33`	`33`
	`34`	`+function setData(text, data) {`
	`35`	`+ text.data = '' + data;`
	`36`	`+}`
	`37`	`+`
`34`	`38`	`function blankObject() {`
`35`	`39`	`return Object.create(null);`
`36`	`40`	`}`
`@@ -191,11 +195,11 @@ function create_main_fragment(component, ctx) {`
`191`	`195`
`192`	`196`	`p: function update(changed, ctx) {`
`193`	`197`	`if ((changed.Math \|\| changed.foo) && text_value !== (text_value = ctx.Math.max(0, ctx.foo))) {`
`194`		`- text.data = text_value;`
	`198`	`+ setData(text, text_value);`
`195`	`199`	`}`
`196`	`200`
`197`	`201`	`if (changed.bar) {`
`198`		`- text_2.data = ctx.bar;`
	`202`	`+ setData(text_2, ctx.bar);`
`199`	`203`	`}`
`200`	`204`	`},`
`201`	`205`
Original file line number	Diff line number	Diff line change
`@@ -37,6 +37,10 @@ function createText(data) {`
`37`	`37`	`return document.createTextNode(data);`
`38`	`38`	`}`
`39`	`39`
	`40`	`+function setData(text, data) {`
	`41`	`+ text.data = '' + data;`
	`42`	`+}`
	`43`	`+`
`40`	`44`	`function blankObject() {`
`41`	`45`	`return Object.create(null);`
`42`	`46`	`}`
`@@ -207,7 +211,7 @@ function create_main_fragment(component, ctx) {`
`207`	`211`	`}`
`208`	`212`
`209`	`213`	`if (changed.foo) {`
`210`		`- text_1.data = ctx.foo;`
	`214`	`+ setData(text_1, ctx.foo);`
`211`	`215`	`}`
`212`	`216`	`},`
`213`	`217`
`@@ -260,11 +264,11 @@ function create_each_block(component, ctx) {`
`260`	`264`
`261`	`265`	`p(changed, ctx) {`
`262`	`266`	`if ((changed.comments) && text_2_value !== (text_2_value = ctx.comment.author)) {`
`263`		`- text_2.data = text_2_value;`
	`267`	`+ setData(text_2, text_2_value);`
`264`	`268`	`}`
`265`	`269`
`266`	`270`	`if ((changed.elapsed \|\| changed.comments \|\| changed.time) && text_4_value !== (text_4_value = ctx.elapsed(ctx.comment.time, ctx.time))) {`
`267`		`- text_4.data = text_4_value;`
	`271`	`+ setData(text_4, text_4_value);`
`268`	`272`	`}`
`269`	`273`
`270`	`274`	`if ((changed.comments) && raw_value !== (raw_value = ctx.comment.html)) {`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`/* generated by Svelte vX.Y.Z */`
`2`		`-import { appendNode, assign, createElement, createText, destroyEach, detachAfter, detachNode, init, insertNode, proto } from "svelte/shared.js";`
	`2`	`+import { appendNode, assign, createElement, createText, destroyEach, detachAfter, detachNode, init, insertNode, proto, setData } from "svelte/shared.js";`
`3`	`3`
`4`	`4`	`function create_main_fragment(component, ctx) {`
`5`	`5`	`var text, p, text_1;`
`@@ -56,7 +56,7 @@ function create_main_fragment(component, ctx) {`
`56`	`56`	`}`
`57`	`57`
`58`	`58`	`if (changed.foo) {`
`59`		`- text_1.data = ctx.foo;`
	`59`	`+ setData(text_1, ctx.foo);`
`60`	`60`	`}`
`61`	`61`	`},`
`62`	`62`
`@@ -109,11 +109,11 @@ function create_each_block(component, ctx) {`
`109`	`109`
`110`	`110`	`p(changed, ctx) {`
`111`	`111`	`if ((changed.comments) && text_2_value !== (text_2_value = ctx.comment.author)) {`
`112`		`- text_2.data = text_2_value;`
	`112`	`+ setData(text_2, text_2_value);`
`113`	`113`	`}`
`114`	`114`
`115`	`115`	`if ((changed.elapsed \|\| changed.comments \|\| changed.time) && text_4_value !== (text_4_value = ctx.elapsed(ctx.comment.time, ctx.time))) {`
`116`		`- text_4.data = text_4_value;`
	`116`	`+ setData(text_4, text_4_value);`
`117`	`117`	`}`
`118`	`118`
`119`	`119`	`if ((changed.comments) && raw_value !== (raw_value = ctx.comment.html)) {`
Original file line number	Diff line number	Diff line change
`@@ -29,6 +29,10 @@ function createComment() {`
`29`	`29`	`return document.createComment('');`
`30`	`30`	`}`
`31`	`31`
	`32`	`+function setData(text, data) {`
	`33`	`+ text.data = '' + data;`
	`34`	`+}`
	`35`	`+`
`32`	`36`	`function linear(t) {`
`33`	`37`	`return t;`
`34`	`38`	`}`
`@@ -533,7 +537,7 @@ function create_each_block(component, key_1, ctx) {`
`533`	`537`
`534`	`538`	`p(changed, ctx) {`
`535`	`539`	`if ((changed.things) && text_value !== (text_value = ctx.thing.name)) {`
`536`		`- text.data = text_value;`
	`540`	`+ setData(text, text_value);`
`537`	`541`	`}`
`538`	`542`	`},`
`539`	`543`
Original file line number	Diff line number	Diff line change
`@@ -52,4 +52,4 @@ function SvelteComponent(options) {`
`52`	`52`	`}`
`53`	`53`
`54`	`54`	`assign(SvelteComponent.prototype, proto);`
`55`		`-export default SvelteComponent;`
	`55`	`+export default SvelteComponent;`