Repository: sveltejs/svelte (JavaScript)
Date: 2018-05-17 01:37:15+00:00
Task type: Bug Fix

Issue:
Nested components play intros when they shouldn't
Components should inherit the `intro` status of their parents. Currently, [they don't](https://svelte.technology/repl?version=2.6.1&gist=bc219a76f492f6f0ae8a545a863f8e95).


Issue discussion:

Solution patch:
diff --git a/src/compile/dom/index.ts b/src/compile/dom/index.ts
--- a/src/compile/dom/index.ts
+++ b/src/compile/dom/index.ts
@@ -182,7 +182,7 @@ export default function dom(
 			})}
 		${compiler.bindingGroups.length &&
 			`this._bindingGroups = [${Array(compiler.bindingGroups.length).fill('[]').join(', ')}];`}
-		this._intro = ${compiler.options.skipIntroByDefault ? 'options.intro' : 'true'};
+		this._intro = ${compiler.options.skipIntroByDefault ? '!!options.intro' : 'true'};
 
 		${templateProperties.onstate && `this._handlers.state = [%onstate];`}
 		${templateProperties.onupdate && `this._handlers.update = [%onupdate];`}
diff --git a/src/compile/nodes/Element.ts b/src/compile/nodes/Element.ts
--- a/src/compile/nodes/Element.ts
+++ b/src/compile/nodes/Element.ts
@@ -700,7 +700,7 @@ export default class Element extends Node {
 
 			const fn = `%transitions-${intro.name}`;
 
-			block.builders.intro.addConditional(`#component._intro`, deindent`
+			block.builders.intro.addConditional(`#component.root._intro`, deindent`
 				if (${name}) ${name}.invalidate();
 
 				#component.root._aftercreate.push(() => {
@@ -735,7 +735,7 @@ export default class Element extends Node {
 					`);
 				}
 
-				block.builders.intro.addConditional(`#component._intro`, deindent`
+				block.builders.intro.addConditional(`#component.root._intro`, deindent`
 					#component.root._aftercreate.push(() => {
 						${introName} = @wrapTransition(#component, ${this.var}, ${fn}, ${snippet}, true);
 						${introName}.run(1);


Test patch:
diff --git a/test/runtime/samples/transition-js-intro-skipped-by-default-nested/Widget.html b/test/runtime/samples/transition-js-intro-skipped-by-default-nested/Widget.html
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/transition-js-intro-skipped-by-default-nested/Widget.html
@@ -0,0 +1,16 @@
+<div transition:foo></div>
+
+<script>
+	export default {
+		transitions: {
+			foo(node, params) {
+				return {
+					duration: 100,
+					tick: t => {
+						node.foo = t;
+					}
+				};
+			}
+		}
+	};
+</script>
\ No newline at end of file
diff --git a/test/runtime/samples/transition-js-intro-skipped-by-default-nested/_config.js b/test/runtime/samples/transition-js-intro-skipped-by-default-nested/_config.js
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/transition-js-intro-skipped-by-default-nested/_config.js
@@ -0,0 +1,11 @@
+export default {
+	skipIntroByDefault: true,
+
+	test(assert, component, target, window, raf) {
+		const div = target.querySelector('div');
+		assert.equal(div.foo, undefined);
+
+		raf.tick(50);
+		assert.equal(div.foo, undefined);
+	},
+};
diff --git a/test/runtime/samples/transition-js-intro-skipped-by-default-nested/main.html b/test/runtime/samples/transition-js-intro-skipped-by-default-nested/main.html
new file mode 100644
--- /dev/null
+++ b/test/runtime/samples/transition-js-intro-skipped-by-default-nested/main.html
@@ -0,0 +1,9 @@
+<Widget/>
+
+<script>
+	export default {
+		components: {
+			Widget: './Widget.html'
+		}
+	};
+</script>
\ No newline at end of file