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

more robust handling of html tags - fixes #3285

Browse Source
pull/3329/head
Richard Harris 5 years ago
parent 8a5ad34afb
commit 016158b692
5 changed files with 72 additions and 89 deletions
Show Stats Download Patch File Download Diff File

97
src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts
Unescape View File

@ -2,7 +2,6 @@ import Renderer from '../Renderer';
import Block from '../Block';
import Tag from './shared/Tag';
import Wrapper from './shared/Wrapper';
import deindent from '../../utils/deindent';
import MustacheTag from '../../nodes/MustacheTag';
import RawMustacheTag from '../../nodes/RawMustacheTag';
@ -19,95 +18,47 @@ export default class RawMustacheTagWrapper extends Tag {
this.cannot_use_innerhtml();
}
render(block: Block, parent_node: string, parent_nodes: string) {
const name = this.var;
render(block: Block, parent_node: string, _parent_nodes: string) {
const in_head = parent_node === '@_document.head';
const needs_anchors = !parent_node || in_head;
// if in head always needs anchors
if (in_head) {
this.prev = null;
this.next = null;
}
const can_use_innerhtml = !in_head && parent_node && !this.prev && !this.next;
// TODO use is_dom_node instead of type === 'Element'?
const needs_anchor_before = this.prev ? this.prev.node.type !== 'Element' : needs_anchors;
const needs_anchor_after = this.next ? this.next.node.type !== 'Element' : needs_anchors;
if (can_use_innerhtml) {
const insert = content => `${parent_node}.innerHTML = ${content};`;
const anchor_before = needs_anchor_before
? block.get_unique_name(`${name}_before`)
: (this.prev && this.prev.var) || 'null';
const { init } = this.rename_this_method(
block,
content => insert(content)
);
const anchor_after = needs_anchor_after
? block.get_unique_name(`${name}_after`)
: (this.next && this.next.var) || 'null';
block.builders.mount.add_line(insert(init));
}
let detach: string;
let insert: (content: string) => string;
let use_innerhtml = false;
else {
const needs_anchor = in_head || (this.next && !this.next.is_dom_node());
if (anchor_before === 'null' && anchor_after === 'null') {
use_innerhtml = true;
detach = `${parent_node}.innerHTML = '';`;
insert = content => `${parent_node}.innerHTML = ${content};`;
} else if (anchor_before === 'null') {
detach = `@detach_before(${anchor_after});`;
insert = content => `${anchor_after}.insertAdjacentHTML("beforebegin", ${content});`;
} else if (anchor_after === 'null') {
detach = `@detach_after(${anchor_before});`;
insert = content => `${anchor_before}.insertAdjacentHTML("afterend", ${content});`;
} else {
detach = `@detach_between(${anchor_before}, ${anchor_after});`;
insert = content => `${anchor_before}.insertAdjacentHTML("afterend", ${content});`;
}
const html_tag = block.get_unique_name('html_tag');
const html_anchor = needs_anchor && block.get_unique_name('html_anchor');
block.add_variable(html_tag);
const { init } = this.rename_this_method(
block,
content => deindent`
${!use_innerhtml && detach}
${insert(content)}
`
content => `${html_tag}.p(${content});`
);
// we would have used comments here, but the `insertAdjacentHTML` api only
// exists for `Element`s.
if (needs_anchor_before) {
block.add_element(
anchor_before,
`@element('noscript')`,
parent_nodes && `@element('noscript')`,
parent_node,
true
);
}
const anchor = in_head ? 'null' : needs_anchor ? html_anchor : this.next ? this.next.var : 'null';
function add_anchor_after() {
block.add_element(
anchor_after,
`@element('noscript')`,
parent_nodes && `@element('noscript')`,
parent_node
);
}
block.builders.hydrate.add_line(`${html_tag} = new @HtmlTag(${init}, ${anchor});`);
block.builders.mount.add_line(`${html_tag}.m(${parent_node || '#target'}, anchor);`);
if (needs_anchor_after && anchor_before === 'null') {
// anchor_after needs to be in the DOM before we
// insert the HTML...
add_anchor_after();
if (needs_anchor) {
block.add_element(html_anchor, '@empty()', '@empty()', parent_node);
}
block.builders.mount.add_line(insert(init));
if (needs_anchors) {
block.builders.destroy.add_conditional('detaching', needs_anchor_before
? `${detach}\n@detach(${anchor_before});`
: detach);
if (!parent_node || in_head) {
block.builders.destroy.add_conditional('detaching', `${html_tag}.d();`);
}
if (needs_anchor_after && anchor_before !== 'null') {
// ...otherwise it should go afterwards
add_anchor_after();
}
}
}

2
src/compiler/compile/render_dom/wrappers/shared/Tag.ts
Unescape View File

@ -34,7 +34,7 @@ export default class Tag extends Wrapper {
const update_cached_value = `${value} !== (${value} = ${snippet})`;
const condition =this.node.should_cache
const condition = this.node.should_cache
? `(${changed_check}) && ${update_cached_value}`
: changed_check;

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

@ -257,3 +257,39 @@ export function custom_event<T=any>(type: string, detail?: T) {
e.initCustomEvent(type, false, false, detail);
return e;
}
export class HtmlTag {
e: HTMLElement;
n: ChildNode[];
t: HTMLElement;
a: HTMLElement;
constructor(html: string, anchor: HTMLElement = null) {
this.e = element('div');
this.a = anchor;
this.u(html);
}
m(target: HTMLElement, anchor: HTMLElement) {
for (let i = 0; i < this.n.length; i += 1) {
insert(target, this.n[i], anchor);
}
this.t = target;
}
u(html: string) {
this.e.innerHTML = html;
this.n = Array.from(this.e.childNodes);
}
p(html: string) {
this.d();
this.u(html);
this.m(this.t, this.a);
}
d() {
this.n.forEach(detach);
}
}

12
test/js/samples/each-block-changed-check/expected.js
Unescape View File

@ -1,11 +1,11 @@
/* generated by Svelte vX.Y.Z */
import {
HtmlTag,
SvelteComponent,
append,
attr,
destroy_each,
detach,
detach_after,
element,
init,
insert,
@ -25,7 +25,7 @@ function get_each_context(ctx, list, i) {
// (8:0) {#each comments as comment, i}
function create_each_block(ctx) {
var div, strong, t0, t1, span, t2_value = ctx.comment.author, t2, t3, t4_value = ctx.elapsed(ctx.comment.time, ctx.time), t4, t5, t6, raw_value = ctx.comment.html, raw_before;
var div, strong, t0, t1, span, t2_value = ctx.comment.author, t2, t3, t4_value = ctx.elapsed(ctx.comment.time, ctx.time), t4, t5, t6, html_tag, raw_value = ctx.comment.html;
return {
c() {
@ -39,8 +39,8 @@ function create_each_block(ctx) {
t4 = text(t4_value);
t5 = text(" ago:");
t6 = space();
raw_before = element('noscript');
attr(span, "class", "meta");
html_tag = new HtmlTag(raw_value, null);
attr(div, "class", "comment");
},
@ -55,8 +55,7 @@ function create_each_block(ctx) {
append(span, t4);
append(span, t5);
append(div, t6);
append(div, raw_before);
raw_before.insertAdjacentHTML("afterend", raw_value);
html_tag.m(div, anchor);
},
p(changed, ctx) {
@ -69,8 +68,7 @@ function create_each_block(ctx) {
}
if ((changed.comments) && raw_value !== (raw_value = ctx.comment.html)) {
detach_after(raw_before);
raw_before.insertAdjacentHTML("afterend", raw_value);
html_tag.p(raw_value);
}
},

8
test/runtime/samples/raw-mustaches/_config.js
Unescape View File

@ -1,5 +1,3 @@
const ns = '<noscript></noscript>';
export default {
skip_if_ssr: true,
@ -7,13 +5,13 @@ export default {
raw: '<span><em>raw html!!!\\o/</span></em>'
},
html: `before${ns}<span><em>raw html!!!\\o/</span></em>${ns}after`,
html: `before<span><em>raw html!!!\\o/</span></em>after`,
test({ assert, component, target }) {
component.raw = '';
assert.equal(target.innerHTML, `before${ns}${ns}after`);
assert.equal(target.innerHTML, `beforeafter`);
component.raw = 'how about <strong>unclosed elements?';
assert.equal(target.innerHTML, `before${ns}how about <strong>unclosed elements?</strong>${ns}after`);
assert.equal(target.innerHTML, `beforehow about <strong>unclosed elements?</strong>after`);
component.$destroy();
assert.equal(target.innerHTML, '');
}

Write Preview
Loading…
Cancel
Save