WIP towards nested transitions

src/compile/dom/Block.ts

@@ -5,6 +5,7 @@ import Compiler from '../Compiler';
 import { Node } from '../../interfaces';
 
 export interface BlockOptions {
+	parent?: Block;
 	name: string;
 	compiler?: Compiler;
 	comment?: string;
@@ -14,6 +15,7 @@ export interface BlockOptions {
 }
 
 export default class Block {
+	parent?: Block;
 	compiler: Compiler;
 	name: string;
 	comment?: string;
@@ -50,6 +52,7 @@ export default class Block {
 	autofocus: string;
 
 	constructor(options: BlockOptions) {
+		this.parent = options.parent;
 		this.compiler = options.compiler;
 		this.name = options.name;
 		this.comment = options.comment;
@@ -115,6 +118,15 @@ export default class Block {
 		}
 	}
 
+	addIntro() {
+		this.hasIntroMethod = true;
+	}
+
+	addOutro() {
+		this.hasOutroMethod = true;
+		this.outros += 1;
+	}
+
 	addVariable(name: string, init?: string) {
 		if (this.variables.has(name) && this.variables.get(name) !== init) {
 			throw new Error(

src/compile/nodes/Element.ts

@@ -182,13 +182,14 @@ export default class Element extends Node {
 
 		if (this.intro) {
 			this.parent.cannotUseInnerHTML();
-			this.compiler.target.hasIntroTransitions = block.hasIntroMethod = true;
+			this.compiler.target.hasIntroTransitions = true;
+			block.addIntro();
 		}
 
 		if (this.outro) {
 			this.parent.cannotUseInnerHTML();
-			this.compiler.target.hasOutroTransitions = block.hasOutroMethod = true;
-			block.outros += 1;
+			this.compiler.target.hasOutroTransitions = true;
+			block.addOutro();
 		}
 
 		if (this.ref) {

src/compile/nodes/IfBlock.ts

@@ -95,6 +95,11 @@ export default class IfBlock extends Node {
 
 		attachBlocks(this);
 
+		if (compiler.options.nestedTransitions) {
+			if (hasIntros) block.addIntro();
+			if (hasOutros) block.addOutro();
+		}
+
 		blocks.forEach(block => {
 			block.hasUpdateMethod = dynamic;
 			block.hasIntroMethod = hasIntros;
@@ -129,11 +134,23 @@ export default class IfBlock extends Node {
 		if (this.else) {
 			if (hasOutros) {
 				this.buildCompoundWithOutros(block, parentNode, parentNodes, branches, dynamic, vars);
+
+				if (this.compiler.options.nestedTransitions) {
+					block.builders.outro.addLine(
+						`${name}.o(#outrocallback);`
+					);
+				}
 			} else {
 				this.buildCompound(block, parentNode, parentNodes, branches, dynamic, vars);
 			}
 		} else {
 			this.buildSimple(block, parentNode, parentNodes, branches[0], dynamic, vars);
+
+			if (hasOutros && this.compiler.options.nestedTransitions) {
+				block.builders.outro.addLine(
+					`if (${name}) ${name}.o(#outrocallback);`
+				);
+			}
 		}
 
 		block.builders.create.addLine(`${if_name}${name}.c();`);

src/interfaces.ts

@@ -67,6 +67,7 @@ export interface CompileOptions {
 
 	// to remove in v3
 	skipIntroByDefault?: boolean;
+	nestedTransitions: boolean;
 }
 
 export interface GenerateOptions {

test/runtime/index.js

@@ -73,6 +73,7 @@ describe("runtime", () => {
 			compileOptions.store = !!config.store;
 			compileOptions.immutable = config.immutable;
 			compileOptions.skipIntroByDefault = config.skipIntroByDefault;
+			compileOptions.nestedTransitions = config.nestedTransitions;
 
 			Object.keys(require.cache)
 				.filter(x => x.endsWith(".html"))

test/runtime/samples/transition-js-nested-if/_config.js

@@ -0,0 +1,28 @@
+export default {
+	skipIntroByDefault: true,
+	nestedTransitions: true,
+
+	data: {
+		x: false,
+		y: true
+	},
+
+	test(assert, component, target, window, raf) {
+		component.set({ x: true });
+
+		const div = target.querySelector('div');
+		assert.equal(div.foo, 0);
+
+		raf.tick(100);
+		assert.equal(div.foo, 1);
+
+		component.set({ x: false });
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+
+		raf.tick(150);
+		assert.equal(div.foo, 0.5);
+
+		raf.tick(200);
+		assert.htmlEqual(target.innerHTML, '');
+	},
+};

test/runtime/samples/transition-js-nested-if/main.html

@@ -0,0 +1,20 @@
+{#if x}
+	{#if y}
+		<div transition:foo></div>
+	{/if}
+{/if}
+
+<script>
+	export default {
+		transitions: {
+			foo(node, params) {
+				return {
+					duration: 100,
+					tick: t => {
+						node.foo = t;
+					}
+				};
+			}
+		}
+	};
+</script>