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

Merge pull request #1574 from sveltejs/gh-1571

Browse Source 
use template.content in place of template where appropriate
pull/1582/head
Rich Harris 6 years ago committed by GitHub
parent 2bb62c3436 5ff7cb51dc
commit 06451bafd0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 44 additions and 22 deletions
Show Stats Download Patch File Download Diff File

40
src/compile/nodes/Element.ts
Unescape View File

@ -252,12 +252,8 @@ export default class Element extends Node {
if (this.name === 'noscript') return; if (this.name === 'noscript') return;
const childState = { const node = this.var;
parentNode: this.var, const nodes = parentNodes && block.getUniqueName(`${this.var}_nodes`) // if we're in unclaimable territory, i.e. <head>, parentNodes is null
parentNodes: parentNodes && block.getUniqueName(`${this.var}_nodes`) // if we're in unclaimable territory, i.e. <head>, parentNodes is null
};
const name = this.var;
const slot = this.attributes.find((attribute: Node) => attribute.name === 'slot'); const slot = this.attributes.find((attribute: Node) => attribute.name === 'slot');
const prop = slot && quotePropIfNecessary(slot.chunks[0].data); const prop = slot && quotePropIfNecessary(slot.chunks[0].data);
@ -265,55 +261,55 @@ export default class Element extends Node {
`${this.findNearest(/^Component/).var}._slotted${prop}` : // TODO this looks bonkers `${this.findNearest(/^Component/).var}._slotted${prop}` : // TODO this looks bonkers
parentNode; parentNode;
block.addVariable(name); block.addVariable(node);
const renderStatement = getRenderStatement(this.namespace, this.name); const renderStatement = getRenderStatement(this.namespace, this.name);
block.builders.create.addLine( block.builders.create.addLine(
`${name} = ${renderStatement};` `${node} = ${renderStatement};`
); );
if (this.compiler.options.hydratable) { if (this.compiler.options.hydratable) {
if (parentNodes) { if (parentNodes) {
block.builders.claim.addBlock(deindent` block.builders.claim.addBlock(deindent`
${name} = ${getClaimStatement(compiler, this.namespace, parentNodes, this)}; ${node} = ${getClaimStatement(compiler, this.namespace, parentNodes, this)};
var ${childState.parentNodes} = @children(${name}); var ${nodes} = @children(${this.name === 'template' ? `${node}.content` : node});
`); `);
} else { } else {
block.builders.claim.addLine( block.builders.claim.addLine(
`${name} = ${renderStatement};` `${node} = ${renderStatement};`
); );
} }
} }
if (initialMountNode) { if (initialMountNode) {
block.builders.mount.addLine( block.builders.mount.addLine(
`@appendNode(${name}, ${initialMountNode});` `@appendNode(${node}, ${initialMountNode});`
); );
if (initialMountNode === 'document.head') { if (initialMountNode === 'document.head') {
block.builders.destroy.addLine(`@detachNode(${name});`); block.builders.destroy.addLine(`@detachNode(${node});`);
} }
} else { } else {
block.builders.mount.addLine(`@insertNode(${name}, #target, anchor);`); block.builders.mount.addLine(`@insertNode(${node}, #target, anchor);`);
// TODO we eventually need to consider what happens to elements // TODO we eventually need to consider what happens to elements
// that belong to the same outgroup as an outroing element... // that belong to the same outgroup as an outroing element...
block.builders.destroy.addConditional('detach', `@detachNode(${name});`); block.builders.destroy.addConditional('detach', `@detachNode(${node});`);
} }
// insert static children with textContent or innerHTML // insert static children with textContent or innerHTML
if (!this.namespace && this.canUseInnerHTML && this.children.length > 0) { if (!this.namespace && this.canUseInnerHTML && this.children.length > 0) {
if (this.children.length === 1 && this.children[0].type === 'Text') { if (this.children.length === 1 && this.children[0].type === 'Text') {
block.builders.create.addLine( block.builders.create.addLine(
`${name}.textContent = ${stringify(this.children[0].data)};` `${node}.textContent = ${stringify(this.children[0].data)};`
); );
} else { } else {
block.builders.create.addLine( block.builders.create.addLine(
`${name}.innerHTML = ${stringify(this.children.map(toHTML).join(''))};` `${node}.innerHTML = ${stringify(this.children.map(toHTML).join(''))};`
); );
} }
} else { } else {
this.children.forEach((child: Node) => { this.children.forEach((child: Node) => {
child.build(block, childState.parentNode, childState.parentNodes); child.build(block, this.name === 'template' ? `${node}.content` : node, nodes);
}); });
} }
@ -342,12 +338,12 @@ export default class Element extends Node {
if (eventHandlerOrBindingUsesContext) { if (eventHandlerOrBindingUsesContext) {
initialProps.push(`ctx`); initialProps.push(`ctx`);
block.builders.update.addLine(`${name}._svelte.ctx = ctx;`); block.builders.update.addLine(`${node}._svelte.ctx = ctx;`);
} }
if (initialProps.length) { if (initialProps.length) {
block.builders.hydrate.addBlock(deindent` block.builders.hydrate.addBlock(deindent`
${name}._svelte = { ${initialProps.join(', ')} }; ${node}._svelte = { ${initialProps.join(', ')} };
`); `);
} }
} else { } else {
@ -368,9 +364,9 @@ export default class Element extends Node {
block.builders.mount.addBlock(this.initialUpdate); block.builders.mount.addBlock(this.initialUpdate);
} }
if (childState.parentNodes) { if (nodes) {
block.builders.claim.addLine( block.builders.claim.addLine(
`${childState.parentNodes}.forEach(@detachNode);` `${nodes}.forEach(@detachNode);`
); );
} }

23
test/runtime/samples/template/_config.js
Unescape View File

@ -0,0 +1,23 @@
export default {
// solo: 1,
html: `
<template>
<div>foo</div>
</template>
`,
test(assert, component, target) {
const template = target.querySelector('template');
assert.htmlEqual(template.innerHTML, `
<div>foo</div>
`);
const content = template.content.cloneNode(true);
const div = content.children[0];
assert.htmlEqual(div.outerHTML, `
<div>foo</div>
`);
}
};

3
test/runtime/samples/template/main.html
Unescape View File

@ -0,0 +1,3 @@
<template>
<div>foo</div>
</template>
Write Preview
Loading…
Cancel
Save