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

neaten up hydration code - fixes #3882

Browse Source
pull/3884/head
Richard Harris 5 years ago
parent 1dfd42c3f4
commit 11b030b101
4 changed files with 83 additions and 4 deletions
Show Stats Download Patch File Download Diff File

17
src/compiler/compile/render_dom/wrappers/Element/index.ts
Unescape View File

@ -121,6 +121,7 @@ export default class ElementWrapper extends Wrapper {
select_binding_dependencies?: Set<string>; select_binding_dependencies?: Set<string>;
var: any; var: any;
void: boolean;
constructor( constructor(
renderer: Renderer, renderer: Renderer,
@ -136,6 +137,8 @@ export default class ElementWrapper extends Wrapper {
name: node.name.replace(/[^a-zA-Z0-9_$]/g, '_') name: node.name.replace(/[^a-zA-Z0-9_$]/g, '_')
}; };
this.void = is_void(node.name);
this.class_dependencies = []; this.class_dependencies = [];
this.attributes = this.node.attributes.map(attribute => { this.attributes = this.node.attributes.map(attribute => {
@ -258,6 +261,7 @@ export default class ElementWrapper extends Wrapper {
const node = this.var; const node = this.var;
const nodes = parent_nodes && block.get_unique_name(`${this.var.name}_nodes`); // if we're in unclaimable territory, i.e. <head>, parent_nodes is null const nodes = parent_nodes && block.get_unique_name(`${this.var.name}_nodes`); // if we're in unclaimable territory, i.e. <head>, parent_nodes is null
const children = x`@children(${this.node.name === 'template' ? x`${node}.content` : node})`;
block.add_variable(node); block.add_variable(node);
const render_statement = this.get_render_statement(); const render_statement = this.get_render_statement();
@ -269,8 +273,13 @@ export default class ElementWrapper extends Wrapper {
if (parent_nodes) { if (parent_nodes) {
block.chunks.claim.push(b` block.chunks.claim.push(b`
${node} = ${this.get_claim_statement(parent_nodes)}; ${node} = ${this.get_claim_statement(parent_nodes)};
var ${nodes} = @children(${this.node.name === 'template' ? x`${node}.content` : node});
`); `);
if (!this.void && this.node.children.length > 0) {
block.chunks.claim.push(b`
var ${nodes} = ${children};
`);
}
} else { } else {
block.chunks.claim.push( block.chunks.claim.push(
b`${node} = ${render_statement};` b`${node} = ${render_statement};`
@ -351,9 +360,9 @@ export default class ElementWrapper extends Wrapper {
this.add_classes(block); this.add_classes(block);
this.add_manual_style_scoping(block); this.add_manual_style_scoping(block);
if (nodes && this.renderer.options.hydratable) { if (nodes && this.renderer.options.hydratable && !this.void) {
block.chunks.claim.push( block.chunks.claim.push(
b`${nodes}.forEach(@detach);` b`${this.node.children.length > 0 ? nodes : children}.forEach(@detach);`
); );
} }
@ -915,7 +924,7 @@ function to_html(wrappers: Array<ElementWrapper | TextWrapper | TagWrapper>, blo
state.quasi.value.raw += '>'; state.quasi.value.raw += '>';
if (!is_void(wrapper.node.name)) { if (!(wrapper as ElementWrapper).void) {
to_html((wrapper as ElementWrapper).fragment.nodes as Array<ElementWrapper | TextWrapper>, block, literal, state); to_html((wrapper as ElementWrapper).fragment.nodes as Array<ElementWrapper | TextWrapper>, block, literal, state);
state.quasi.value.raw += `</${wrapper.node.name}>`; state.quasi.value.raw += `</${wrapper.node.name}>`;

5
test/js/samples/hydrated-void-element/_config.js
Unescape View File

@ -0,0 +1,5 @@
export default {
options: {
hydratable: true
}
};

63
test/js/samples/hydrated-void-element/expected.js
Unescape View File

@ -0,0 +1,63 @@
/* generated by Svelte vX.Y.Z */
import {
SvelteComponent,
attr,
children,
claim_element,
claim_space,
detach,
element,
init,
insert,
noop,
safe_not_equal,
space
} from "svelte/internal";
function create_fragment(ctx) {
let img;
let t;
let div;
return {
c() {
img = element("img");
t = space();
div = element("div");
this.h();
},
l(nodes) {
img = claim_element(nodes, "IMG", { src: true, alt: true });
t = claim_space(nodes);
div = claim_element(nodes, "DIV", {});
children(div).forEach(detach);
this.h();
},
h() {
attr(img, "src", "donuts.jpg");
attr(img, "alt", "donuts");
},
m(target, anchor) {
insert(target, img, anchor);
insert(target, t, anchor);
insert(target, div, anchor);
},
p: noop,
i: noop,
o: noop,
d(detaching) {
if (detaching) detach(img);
if (detaching) detach(t);
if (detaching) detach(div);
}
};
}
class Component extends SvelteComponent {
constructor(options) {
super();
init(this, options, null, create_fragment, safe_not_equal, {});
}
}
export default Component;

2
test/js/samples/hydrated-void-element/input.svelte
Unescape View File

@ -0,0 +1,2 @@
<img src="donuts.jpg" alt="donuts">
<div></div>
Write Preview
Loading…
Cancel
Save