msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

use <template> to create html elements for {@html}

Browse Source
pull/4857/head
Tan Li Hau 5 years ago
parent c19542b634
commit ff6f6173ae
3 changed files with 101 additions and 44 deletions
Show Stats Download Patch File Download Diff File

113
src/runtime/internal/dom.ts
Unescape View File

@ -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);
};
}
@ -300,27 +324,30 @@ export function add_resize_listener(node: HTMLElement, fn: () => void) {
}
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) {

18
test/runtime/samples/raw-mustaches-td-tr/_config.js
Unescape View File

@ -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>
`,
};

12
test/runtime/samples/raw-mustaches-td-tr/main.svelte
Unescape View File

@ -0,0 +1,12 @@
<script>
export let raw;
</script>
<table>
<tbody>
<tr>
<td>5</td><td>7</td>
</tr>
{@html raw}
</tbody>
</table>
Write Preview
Loading…
Cancel
Save