Skip to content

Commit 06451ba

Browse files
Rich-HarrisRich-Harris
authored
Merge pull request #1574 from sveltejs/gh-1571
use template.content in place of template where appropriate
2 parents 2bb62c3 + 5ff7cb5 commit 06451ba

File tree

3 files changed

+44
-22
lines changed

3 files changed

+44
-22
lines changed

‎src/compile/nodes/Element.ts

+18-22
Original file line numberDiff line numberDiff line change
@@ -252,68 +252,64 @@ export default class Element extends Node {
252252

253253
if (this.name === 'noscript') return;
254254

255-
const childState = {
256-
parentNode: this.var,
257-
parentNodes: parentNodes && block.getUniqueName(`${this.var}_nodes`) // if we're in unclaimable territory, i.e. <head>, parentNodes is null
258-
};
259-
260-
const name = this.var;
255+
const node = this.var;
256+
const nodes = parentNodes && block.getUniqueName(`${this.var}_nodes`) // if we're in unclaimable territory, i.e. <head>, parentNodes is null
261257

262258
const slot = this.attributes.find((attribute: Node) => attribute.name === 'slot');
263259
const prop = slot && quotePropIfNecessary(slot.chunks[0].data);
264260
const initialMountNode = this.slotted ?
265261
`${this.findNearest(/^Component/).var}._slotted${prop}` : // TODO this looks bonkers
266262
parentNode;
267263

268-
block.addVariable(name);
264+
block.addVariable(node);
269265
const renderStatement = getRenderStatement(this.namespace, this.name);
270266
block.builders.create.addLine(
271-
`${name} = ${renderStatement};`
267+
`${node} = ${renderStatement};`
272268
);
273269

274270
if (this.compiler.options.hydratable) {
275271
if (parentNodes) {
276272
block.builders.claim.addBlock(deindent`
277-
${name} = ${getClaimStatement(compiler, this.namespace, parentNodes, this)};
278-
var ${childState.parentNodes} = @children(${name});
273+
${node} = ${getClaimStatement(compiler, this.namespace, parentNodes, this)};
274+
var ${nodes} = @children(${this.name === 'template' ? `${node}.content` : node});
279275
`);
280276
} else {
281277
block.builders.claim.addLine(
282-
`${name} = ${renderStatement};`
278+
`${node} = ${renderStatement};`
283279
);
284280
}
285281
}
286282

287283
if (initialMountNode) {
288284
block.builders.mount.addLine(
289-
`@appendNode(${name}, ${initialMountNode});`
285+
`@appendNode(${node}, ${initialMountNode});`
290286
);
291287

292288
if (initialMountNode === 'document.head') {
293-
block.builders.destroy.addLine(`@detachNode(${name});`);
289+
block.builders.destroy.addLine(`@detachNode(${node});`);
294290
}
295291
} else {
296-
block.builders.mount.addLine(`@insertNode(${name}, #target, anchor);`);
292+
block.builders.mount.addLine(`@insertNode(${node}, #target, anchor);`);
297293

298294
// TODO we eventually need to consider what happens to elements
299295
// that belong to the same outgroup as an outroing element...
300-
block.builders.destroy.addConditional('detach', `@detachNode(${name});`);
296+
block.builders.destroy.addConditional('detach', `@detachNode(${node});`);
301297
}
302298

303299
// insert static children with textContent or innerHTML
304300
if (!this.namespace && this.canUseInnerHTML && this.children.length > 0) {
305301
if (this.children.length === 1 && this.children[0].type === 'Text') {
306302
block.builders.create.addLine(
307-
`${name}.textContent = ${stringify(this.children[0].data)};`
303+
`${node}.textContent = ${stringify(this.children[0].data)};`
308304
);
309305
} else {
310306
block.builders.create.addLine(
311-
`${name}.innerHTML = ${stringify(this.children.map(toHTML).join(''))};`
307+
`${node}.innerHTML = ${stringify(this.children.map(toHTML).join(''))};`
312308
);
313309
}
314310
} else {
315311
this.children.forEach((child: Node) => {
316-
child.build(block, childState.parentNode, childState.parentNodes);
312+
child.build(block, this.name === 'template' ? `${node}.content` : node, nodes);
317313
});
318314
}
319315

@@ -342,12 +338,12 @@ export default class Element extends Node {
342338

343339
if (eventHandlerOrBindingUsesContext) {
344340
initialProps.push(`ctx`);
345-
block.builders.update.addLine(`${name}._svelte.ctx = ctx;`);
341+
block.builders.update.addLine(`${node}._svelte.ctx = ctx;`);
346342
}
347343

348344
if (initialProps.length) {
349345
block.builders.hydrate.addBlock(deindent`
350-
${name}._svelte = { ${initialProps.join(', ')} };
346+
${node}._svelte = { ${initialProps.join(', ')} };
351347
`);
352348
}
353349
} else {
@@ -368,9 +364,9 @@ export default class Element extends Node {
368364
block.builders.mount.addBlock(this.initialUpdate);
369365
}
370366

371-
if (childState.parentNodes) {
367+
if (nodes) {
372368
block.builders.claim.addLine(
373-
`${childState.parentNodes}.forEach(@detachNode);`
369+
`${nodes}.forEach(@detachNode);`
374370
);
375371
}
376372

‎test/runtime/samples/template/_config.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
export default {
2+
// solo: 1,
3+
4+
html: `
5+
<template>
6+
<div>foo</div>
7+
</template>
8+
`,
9+
10+
test(assert, component, target) {
11+
const template = target.querySelector('template');
12+
13+
assert.htmlEqual(template.innerHTML, `
14+
<div>foo</div>
15+
`);
16+
17+
const content = template.content.cloneNode(true);
18+
const div = content.children[0];
19+
assert.htmlEqual(div.outerHTML, `
20+
<div>foo</div>
21+
`);
22+
}
23+
};

‎test/runtime/samples/template/main.html

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<template>
2+
<div>foo</div>
3+
</template>

0 commit comments

Comments
 (0)