From ff6f6173ae86e6ff8b03a37e6b5e2ce4a8d07151 Mon Sep 17 00:00:00 2001
From: Tan Li Hau <lhtan93@gmail.com>
Date: Mon, 18 May 2020 16:23:36 +0800
Subject: [PATCH] use <template> to create html elements for {@html}

---
 src/runtime/internal/dom.ts                   | 115 +++++++++++-------
 .../samples/raw-mustaches-td-tr/_config.js    |  18 +++
 .../samples/raw-mustaches-td-tr/main.svelte   |  12 ++
 3 files changed, 101 insertions(+), 44 deletions(-)
 create mode 100644 test/runtime/samples/raw-mustaches-td-tr/_config.js
 create mode 100644 test/runtime/samples/raw-mustaches-td-tr/main.svelte

diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts
index 02fd3dc23e..bc529cd508 100644
--- a/src/runtime/internal/dom.ts
+++ b/src/runtime/internal/dom.ts
@@ -22,17 +22,23 @@ export function element<K extends keyof HTMLElementTagNameMap>(name: K) {
 	return document.createElement<K>(name);
 }
 
-export function element_is<K extends keyof HTMLElementTagNameMap>(name: K, is: string) {
+export function element_is<K extends keyof HTMLElementTagNameMap>(
+	name: K,
+	is: string
+) {
 	return document.createElement<K>(name, { is });
 }
 
-export function object_without_properties<T, K extends keyof T>(obj: T, exclude: K[]) {
+export function object_without_properties<T, K extends keyof T>(
+	obj: T,
+	exclude: K[]
+) {
 	const target = {} as Pick<T, Exclude<keyof T, K>>;
 	for (const k in obj) {
 		if (
-			has_prop(obj, k)
+			has_prop(obj, k) &&
 			// @ts-ignore
-			&& exclude.indexOf(k) === -1
+			exclude.indexOf(k) === -1
 		) {
 			// @ts-ignore
 			target[k] = obj[k];
@@ -41,8 +47,10 @@ export function object_without_properties<T, K extends keyof T>(obj: T, exclude:
 	return target;
 }
 
-export function svg_element<K extends keyof SVGElementTagNameMap>(name: K): SVGElement {
-	return document.createElementNS<K>('http://www.w3.org/2000/svg', name);
+export function svg_element<K extends keyof SVGElementTagNameMap>(
+	name: K
+): SVGElement {
+	return document.createElementNS<K>("http://www.w3.org/2000/svg", name);
 }
 
 export function text(data: string) {
@@ -50,20 +58,25 @@ export function text(data: string) {
 }
 
 export function space() {
-	return text(' ');
+	return text(" ");
 }
 
 export function empty() {
-	return text('');
+	return text("");
 }
 
-export function listen(node: EventTarget, event: string, handler: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | EventListenerOptions) {
+export function listen(
+	node: EventTarget,
+	event: string,
+	handler: EventListenerOrEventListenerObject,
+	options?: boolean | AddEventListenerOptions | EventListenerOptions
+) {
 	node.addEventListener(event, handler, options);
 	return () => node.removeEventListener(event, handler, options);
 }
 
 export function prevent_default(fn) {
-	return function(event) {
+	return function (event) {
 		event.preventDefault();
 		// @ts-ignore
 		return fn.call(this, event);
@@ -71,7 +84,7 @@ export function prevent_default(fn) {
 }
 
 export function stop_propagation(fn) {
-	return function(event) {
+	return function (event) {
 		event.stopPropagation();
 		// @ts-ignore
 		return fn.call(this, event);
@@ -79,7 +92,7 @@ export function stop_propagation(fn) {
 }
 
 export function self(fn) {
-	return function(event) {
+	return function (event) {
 		// @ts-ignore
 		if (event.target === this) fn.call(this, event);
 	};
@@ -87,18 +100,22 @@ export function self(fn) {
 
 export function attr(node: Element, attribute: string, value?: string) {
 	if (value == null) node.removeAttribute(attribute);
-	else if (node.getAttribute(attribute) !== value) node.setAttribute(attribute, value);
+	else if (node.getAttribute(attribute) !== value)
+		node.setAttribute(attribute, value);
 }
 
-export function set_attributes(node: Element & ElementCSSInlineStyle, attributes: { [x: string]: string }) {
+export function set_attributes(
+	node: Element & ElementCSSInlineStyle,
+	attributes: { [x: string]: string }
+) {
 	// @ts-ignore
 	const descriptors = Object.getOwnPropertyDescriptors(node.__proto__);
 	for (const key in attributes) {
 		if (attributes[key] == null) {
 			node.removeAttribute(key);
-		} else if (key === 'style') {
+		} else if (key === "style") {
 			node.style.cssText = attributes[key];
-		} else if (key === '__value') {
+		} else if (key === "__value") {
 			(node as any).value = node[key] = attributes[key];
 		} else if (descriptors[key] && descriptors[key].set) {
 			node[key] = attributes[key];
@@ -108,7 +125,10 @@ export function set_attributes(node: Element & ElementCSSInlineStyle, attributes
 	}
 }
 
-export function set_svg_attributes(node: Element & ElementCSSInlineStyle, attributes: { [x: string]: string }) {
+export function set_svg_attributes(
+	node: Element & ElementCSSInlineStyle,
+	attributes: { [x: string]: string }
+) {
 	for (const key in attributes) {
 		attr(node, key, attributes[key]);
 	}
@@ -123,7 +143,7 @@ export function set_custom_element_data(node, prop, value) {
 }
 
 export function xlink_attr(node, attribute, value) {
-	node.setAttributeNS('http://www.w3.org/1999/xlink', attribute, value);
+	node.setAttributeNS("http://www.w3.org/1999/xlink", attribute, value);
 }
 
 export function get_binding_group_value(group) {
@@ -135,7 +155,7 @@ export function get_binding_group_value(group) {
 }
 
 export function to_number(value) {
-	return value === '' ? undefined : +value;
+	return value === "" ? undefined : +value;
 }
 
 export function time_ranges_to_array(ranges) {
@@ -174,7 +194,7 @@ export function claim_text(nodes, data) {
 	for (let i = 0; i < nodes.length; i += 1) {
 		const node = nodes[i];
 		if (node.nodeType === 3) {
-			node.data = '' + data;
+			node.data = "" + data;
 			return nodes.splice(i, 1)[0];
 		}
 	}
@@ -183,16 +203,16 @@ export function claim_text(nodes, data) {
 }
 
 export function claim_space(nodes) {
-	return claim_text(nodes, ' ');
+	return claim_text(nodes, " ");
 }
 
 export function set_data(text, data) {
-	data = '' + data;
+	data = "" + data;
 	if (text.data !== data) text.data = data;
 }
 
 export function set_input_value(input, value) {
-	input.value = value == null ? '' : value;
+	input.value = value == null ? "" : value;
 }
 
 export function set_input_type(input, type) {
@@ -204,7 +224,7 @@ export function set_input_type(input, type) {
 }
 
 export function set_style(node, key, value, important) {
-	node.style.setProperty(key, value, important ? 'important' : '');
+	node.style.setProperty(key, value, important ? "important" : "");
 }
 
 export function select_option(select, value) {
@@ -226,12 +246,15 @@ export function select_options(select, value) {
 }
 
 export function select_value(select) {
-	const selected_option = select.querySelector(':checked') || select.options[0];
+	const selected_option = select.querySelector(":checked") || select.options[0];
 	return selected_option && selected_option.__value;
 }
 
 export function select_multiple_value(select) {
-	return [].map.call(select.querySelectorAll(':checked'), option => option.__value);
+	return [].map.call(
+		select.querySelectorAll(":checked"),
+		(option) => option.__value
+	);
 }
 
 // unfortunately this can't be a constant as that wouldn't be tree-shakeable
@@ -243,7 +266,7 @@ export function is_crossorigin() {
 		crossorigin = false;
 
 		try {
-			if (typeof window !== 'undefined' && window.parent) {
+			if (typeof window !== "undefined" && window.parent) {
 				void window.parent.document;
 			}
 		} catch (error) {
@@ -258,16 +281,17 @@ export function add_resize_listener(node: HTMLElement, fn: () => void) {
 	const computed_style = getComputedStyle(node);
 	const z_index = (parseInt(computed_style.zIndex) || 0) - 1;
 
-	if (computed_style.position === 'static') {
-		node.style.position = 'relative';
+	if (computed_style.position === "static") {
+		node.style.position = "relative";
 	}
 
-	const iframe = element('iframe');
-	iframe.setAttribute('style',
+	const iframe = element("iframe");
+	iframe.setAttribute(
+		"style",
 		`display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; ` +
-		`overflow: hidden; border: 0; opacity: 0; pointer-events: none; z-index: ${z_index};`
+			`overflow: hidden; border: 0; opacity: 0; pointer-events: none; z-index: ${z_index};`
 	);
-	iframe.setAttribute('aria-hidden', 'true');
+	iframe.setAttribute("aria-hidden", "true");
 	iframe.tabIndex = -1;
 
 	const crossorigin = is_crossorigin();
@@ -276,13 +300,13 @@ export function add_resize_listener(node: HTMLElement, fn: () => void) {
 
 	if (crossorigin) {
 		iframe.src = `data:text/html,<script>onresize=function(){parent.postMessage(0,'*')}</script>`;
-		unsubscribe = listen(window, 'message', (event: MessageEvent) => {
+		unsubscribe = listen(window, "message", (event: MessageEvent) => {
 			if (event.source === iframe.contentWindow) fn();
 		});
 	} else {
-		iframe.src = 'about:blank';
+		iframe.src = "about:blank";
 		iframe.onload = () => {
-			unsubscribe = listen(iframe.contentWindow, 'resize', fn);
+			unsubscribe = listen(iframe.contentWindow, "resize", fn);
 		};
 	}
 
@@ -294,33 +318,36 @@ export function add_resize_listener(node: HTMLElement, fn: () => void) {
 		} else if (unsubscribe && iframe.contentWindow) {
 			unsubscribe();
 		}
-		
+
 		detach(iframe);
 	};
 }
 
 export function toggle_class(element, name, toggle) {
-	element.classList[toggle ? 'add' : 'remove'](name);
+	element.classList[toggle ? "add" : "remove"](name);
 }
 
-export function custom_event<T=any>(type: string, detail?: T) {
-	const e: CustomEvent<T> = document.createEvent('CustomEvent');
+export function custom_event<T = any>(type: string, detail?: T) {
+	const e: CustomEvent<T> = document.createEvent("CustomEvent");
 	e.initCustomEvent(type, false, false, detail);
 	return e;
 }
 
-export function query_selector_all(selector: string, parent: HTMLElement = document.body) {
+export function query_selector_all(
+	selector: string,
+	parent: HTMLElement = document.body
+) {
 	return Array.from(parent.querySelectorAll(selector));
 }
 
 export class HtmlTag {
-	e: HTMLElement;
+	e: HTMLTemplateElement;
 	n: ChildNode[];
 	t: HTMLElement;
 	a: HTMLElement;
 
 	constructor(html: string, anchor: HTMLElement = null) {
-		this.e = element('div');
+		this.e = element("template");
 		this.a = anchor;
 		this.u(html);
 	}
@@ -335,7 +362,7 @@ export class HtmlTag {
 
 	u(html: string) {
 		this.e.innerHTML = html;
-		this.n = Array.from(this.e.childNodes);
+		this.n = Array.from(this.e.content.cloneNode(true).childNodes);
 	}
 
 	p(html: string) {
diff --git a/test/runtime/samples/raw-mustaches-td-tr/_config.js b/test/runtime/samples/raw-mustaches-td-tr/_config.js
new file mode 100644
index 0000000000..dfcb1ce0f0
--- /dev/null
+++ b/test/runtime/samples/raw-mustaches-td-tr/_config.js
@@ -0,0 +1,18 @@
+export default {
+	props: {
+		raw: "<tr><td>1</td><td>2</td></tr>",
+	},
+
+	html: `
+		<table>
+			<tbody>
+				<tr>
+					<td>5</td><td>7</td>
+				</tr>
+				<tr>
+					<td>1</td><td>2</td>
+				</tr>
+			</tbody>
+		</table>
+	`,
+};
diff --git a/test/runtime/samples/raw-mustaches-td-tr/main.svelte b/test/runtime/samples/raw-mustaches-td-tr/main.svelte
new file mode 100644
index 0000000000..07d7299e43
--- /dev/null
+++ b/test/runtime/samples/raw-mustaches-td-tr/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	export let raw;
+</script>
+
+<table>
+	<tbody>
+		<tr>
+			<td>5</td><td>7</td>
+		</tr>
+		{@html raw}
+	</tbody>
+</table>
\ No newline at end of file