Skip to content

Commit

Permalink
use anchors for slotted content - fixes #822
Browse files Browse the repository at this point in the history
  • Loading branch information
Rich-Harris committed Sep 10, 2017
1 parent 5255957 commit 975a974
Show file tree
Hide file tree
Showing 7 changed files with 51 additions and 11 deletions.
2 changes: 2 additions & 0 deletions src/generators/dom/preprocess.ts
Original file line number Diff line number Diff line change
Expand Up @@ -412,6 +412,8 @@ function preprocessChildren(
lastChild = null;

cleaned.forEach((child: Node, i: number) => {
child.parent = node;

const preprocessor = preprocessors[child.type];
if (preprocessor) preprocessor(generator, block, state, child, inEachBlock, elementStack, componentStack, stripWhitespace, cleaned[i + 1] || nextSibling);

Expand Down
2 changes: 1 addition & 1 deletion src/generators/dom/visitors/EachBlock.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default function visitEachBlock(
const iterations = block.getUniqueName(`${each_block}_iterations`);
const params = block.params.join(', ');

const needsAnchor = node.next ? !isDomNode(node.next) : !state.parentNode;
const needsAnchor = node.next ? !isDomNode(node.next, generator) : !state.parentNode;
const anchor = needsAnchor
? block.getUniqueName(`${each_block}_anchor`)
: (node.next && node.next.var) || 'null';
Expand Down
16 changes: 8 additions & 8 deletions src/generators/dom/visitors/IfBlock.ts
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export default function visitIfBlock(
) {
const name = node.var;

const needsAnchor = node.next ? !isDomNode(node.next) : !state.parentNode;
const needsAnchor = node.next ? !isDomNode(node.next, generator) : !state.parentNode || !isDomNode(node.parent, generator);
const anchor = needsAnchor
? block.getUniqueName(`${name}_anchor`)
: (node.next && node.next.var) || 'null';
Expand All @@ -94,7 +94,7 @@ export default function visitIfBlock(
const dynamic = branches[0].hasUpdateMethod; // can use [0] as proxy for all, since they necessarily have the same value
const hasOutros = branches[0].hasOutroMethod;

const vars = { name, anchor, params, if_name, hasElse };
const vars = { name, needsAnchor, anchor, params, if_name, hasElse };

if (node.else) {
if (hasOutros) {
Expand Down Expand Up @@ -137,7 +137,7 @@ function simple(
node: Node,
branch,
dynamic,
{ name, anchor, params, if_name }
{ name, needsAnchor, anchor, params, if_name }
) {
block.builders.init.addBlock(deindent`
var ${name} = (${branch.condition}) && ${branch.block}(${params}, #component);
Expand All @@ -152,7 +152,7 @@ function simple(
`if (${name}) ${name}.${mountOrIntro}(${targetNode}, ${anchorNode});`
);

const parentNode = state.parentNode || `${anchor}.parentNode`;
const parentNode = (state.parentNode && !needsAnchor) ? state.parentNode : `${anchor}.parentNode`;

const enter = dynamic
? branch.hasIntroMethod
Expand Down Expand Up @@ -227,7 +227,7 @@ function compound(
node: Node,
branches,
dynamic,
{ name, anchor, params, hasElse, if_name }
{ name, needsAnchor, anchor, params, hasElse, if_name }
) {
const select_block_type = generator.getUniqueName(`select_block_type`);
const current_block_type = block.getUniqueName(`current_block_type`);
Expand Down Expand Up @@ -255,7 +255,7 @@ function compound(
`${if_name}${name}.${mountOrIntro}(${targetNode}, ${anchorNode});`
);

const parentNode = state.parentNode || `${anchor}.parentNode`;
const parentNode = (state.parentNode && !needsAnchor) ? state.parentNode : `${anchor}.parentNode`;

const changeBlock = deindent`
${hasElse
Expand Down Expand Up @@ -303,7 +303,7 @@ function compoundWithOutros(
node: Node,
branches,
dynamic,
{ name, anchor, params, hasElse }
{ name, needsAnchor, anchor, params, hasElse }
) {
const select_block_type = block.getUniqueName(`select_block_type`);
const current_block_type_index = block.getUniqueName(`current_block_type_index`);
Expand Down Expand Up @@ -354,7 +354,7 @@ function compoundWithOutros(
`${if_current_block_type_index}${if_blocks}[${current_block_type_index}].${mountOrIntro}(${targetNode}, ${anchorNode});`
);

const parentNode = state.parentNode || `${anchor}.parentNode`;
const parentNode = (state.parentNode && !needsAnchor) ? state.parentNode : `${anchor}.parentNode`;

const destroyOldBlock = deindent`
${name}.outro(function() {
Expand Down
6 changes: 4 additions & 2 deletions src/generators/dom/visitors/shared/isDomNode.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { DomGenerator } from '../../index';
import { Node } from '../../../../interfaces';

export default function isDomNode(node: Node) {
return node.type === 'Element' || node.type === 'Text' || node.type === 'MustacheTag';
export default function isDomNode(node: Node, generator: DomGenerator) {
if (node.type === 'Element') return !generator.components.has(node.name);
return node.type === 'Text' || node.type === 'MustacheTag';
}
3 changes: 3 additions & 0 deletions test/runtime/samples/component-slot-if-block/Nested.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<div>
<slot/>
</div>
16 changes: 16 additions & 0 deletions test/runtime/samples/component-slot-if-block/_config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
export default {
html: `
<div>
<p>unconditional</p>
</div>`,

test(assert, component, target) {
component.set({ foo: true });
assert.htmlEqual(target.innerHTML, `
<div>
<p>unconditional</p>
<p>conditional</p>
</div>
`);
}
};
17 changes: 17 additions & 0 deletions test/runtime/samples/component-slot-if-block/main.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<Nested>
<p>unconditional</p>

{{#if foo}}
<p>conditional</p>
{{/if}}
</Nested>

<script>
import Nested from './Nested.html';

export default {
components: {
Nested
}
};
</script>

0 comments on commit 975a974

Please sign in to comment.