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(name: K) { return document.createElement(name); } -export function element_is(name: K, is: string) { +export function element_is( + name: K, + is: string +) { return document.createElement(name, { is }); } -export function object_without_properties(obj: T, exclude: K[]) { +export function object_without_properties( + obj: T, + exclude: K[] +) { const target = {} as Pick>; 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(obj: T, exclude: return target; } -export function svg_element(name: K): SVGElement { - return document.createElementNS('http://www.w3.org/2000/svg', name); +export function svg_element( + name: K +): SVGElement { + return document.createElementNS("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,`; - 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(type: string, detail?: T) { - const e: CustomEvent = document.createEvent('CustomEvent'); +export function custom_event(type: string, detail?: T) { + const e: CustomEvent = 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: "12", + }, + + html: ` + + + + + + + + + +
57
12
+ `, +}; 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 @@ + + + + + + + + {@html raw} + +
57
\ No newline at end of file