Merge pull request #525 from sveltejs/gh-7

Transitions

Author: Rich-Harris

package.json

@@ -17,11 +17,13 @@
     "precodecov": "npm run coverage",
     "lint": "eslint src test/*.js",
     "build": "npm run build:main && npm run build:shared && npm run build:ssr",
-    "build:main": "rollup -c rollup/rollup.config.main.js",
+    "build:main": "node src/shared/_build.js && rollup -c rollup/rollup.config.main.js",
     "build:shared": "rollup -c rollup/rollup.config.shared.js",
     "build:ssr": "rollup -c rollup/rollup.config.ssr.js",
+    "dev": "node src/shared/_build.js && rollup -c rollup/rollup.config.main.js -w",
+    "dev:shared": "rollup -c rollup/rollup.config.shared.js -w",
     "pretest": "npm run build",
-    "prepublish": "npm run lint && npm run build"
+    "prepublish": "npm run build && npm run lint"
   },
   "repository": {
     "type": "git",
@@ -72,6 +74,7 @@
     "rollup-plugin-commonjs": "^7.0.0",
     "rollup-plugin-json": "^2.1.0",
     "rollup-plugin-node-resolve": "^2.0.0",
+    "rollup-watch": "^3.2.2",
     "source-map": "^0.5.6",
     "source-map-support": "^0.4.8"
   },

src/generators/Generator.js

@@ -24,6 +24,7 @@ export default class Generator {
 		this.helpers = new Set();
 		this.components = new Set();
 		this.events = new Set();
+		this.transitions = new Set();
 		this.importedComponents = new Map();
 
 		this.bindingGroups = [];
@@ -328,7 +329,7 @@ export default class Generator {
 				});
 			}
 
-			[ 'helpers', 'events', 'components' ].forEach( key => {
+			[ 'helpers', 'events', 'components', 'transitions' ].forEach( key => {
 				if ( templateProperties[ key ] ) {
 					templateProperties[ key ].value.properties.forEach( prop => {
 						this[ key ].add( prop.key.name );

src/generators/dom/Block.js

@@ -24,11 +24,17 @@ export default class Block {
 			create: new CodeBuilder(),
 			mount: new CodeBuilder(),
 			update: new CodeBuilder(),
+			intro: new CodeBuilder(),
+			outro: new CodeBuilder(),
 			detach: new CodeBuilder(),
 			detachRaw: new CodeBuilder(),
 			destroy: new CodeBuilder()
 		};
 
+		this.hasIntroMethod = false; // a block could have an intro method but not intro transitions, e.g. if a sibling block has intros
+		this.hasOutroMethod = false;
+		this.outros = 0;
+
 		this.aliases = new Map();
 		this.variables = new Map();
 		this.getUniqueName = this.generator.getUniqueNameMaker( options.params );
@@ -100,6 +106,20 @@ export default class Block {
 	}
 
 	render () {
+		let introing;
+		const hasIntros = !this.builders.intro.isEmpty();
+		if ( hasIntros ) {
+			introing = this.getUniqueName( 'introing' );
+			this.addVariable( introing );
+		}
+
+		let outroing;
+		const hasOutros = !this.builders.outro.isEmpty();
+		if ( hasOutros ) {
+			outroing = this.getUniqueName( 'outroing' );
+			this.addVariable( outroing );
+		}
+
 		if ( this.variables.size ) {
 			const variables = Array.from( this.variables.keys() )
 				.map( key => {
@@ -157,6 +177,50 @@ export default class Block {
 			}
 		}
 
+		if ( this.hasIntroMethod ) {
+			if ( hasIntros ) {
+				properties.addBlock( deindent`
+					intro: function ( ${this.target}, anchor ) {
+						if ( ${introing} ) return;
+						${introing} = true;
+						${hasOutros && `${outroing} = false;`}
+
+						${this.builders.intro}
+
+						this.mount( ${this.target}, anchor );
+					},
+				` );
+			} else {
+				properties.addBlock( deindent`
+					intro: function ( ${this.target}, anchor ) {
+						this.mount( ${this.target}, anchor );
+					},
+				` );
+			}
+		}
+
+		if ( this.hasOutroMethod ) {
+			if ( hasOutros ) {
+				properties.addBlock( deindent`
+					outro: function ( ${this.alias( 'outrocallback' )} ) {
+						if ( ${outroing} ) return;
+						${outroing} = true;
+						${hasIntros && `${introing} = false;`}
+
+						var ${this.alias( 'outros' )} = ${this.outros};
+
+						${this.builders.outro}
+					},
+				` );
+			} else {
+				properties.addBlock( deindent`
+					outro: function ( outrocallback ) {
+						outrocallback();
+					},
+				` );
+			}
+		}
+
 		if ( this.builders.destroy.isEmpty() ) {
 			properties.addBlock( `destroy: ${this.generator.helper( 'noop' )}` );
 		} else {

src/generators/dom/index.js

@@ -1,12 +1,12 @@
 import MagicString from 'magic-string';
-import { parse } from 'acorn';
+import { parseExpressionAt } from 'acorn';
 import annotateWithScopes from '../../utils/annotateWithScopes.js';
 import isReference from '../../utils/isReference.js';
 import { walk } from 'estree-walker';
 import deindent from '../../utils/deindent.js';
 import CodeBuilder from '../../utils/CodeBuilder.js';
 import visit from './visit.js';
-import { nameMap, sharedMap } from './sharedNames.js';
+import shared from './shared.js';
 import Generator from '../Generator.js';
 import preprocess from './preprocess.js';
 
@@ -25,7 +25,7 @@ class DomGenerator extends Generator {
 	}
 
 	helper ( name ) {
-		if ( this.options.dev && sharedMap.has( `${name}Dev` ) ) {
+		if ( this.options.dev && `${name}Dev` in shared ) {
 			name = `${name}Dev`;
 		}
 
@@ -138,7 +138,7 @@ export default function dom ( parsed, source, options ) {
 		builders.init.addLine( `if ( !${generator.alias( 'added_css' )} ) ${generator.alias( 'add_css' )}();` );
 	}
 
-	if ( generator.hasComponents ) {
+	if ( generator.hasComponents || generator.hasIntroTransitions ) {
 		builders.init.addLine( `this._renderHooks = [];` );
 	}
 
@@ -158,7 +158,7 @@ export default function dom ( parsed, source, options ) {
 		` );
 	}
 
-	if ( generator.hasComponents ) {
+	if ( generator.hasComponents || generator.hasIntroTransitions ) {
 		const statement = `this._flush();`;
 
 		builders.init.addBlock( statement );
@@ -168,7 +168,7 @@ export default function dom ( parsed, source, options ) {
 	if ( templateProperties.oncreate ) {
 		builders.init.addBlock( deindent`
 			if ( options._root ) {
-				options._root._renderHooks.push({ fn: ${generator.alias( 'template' )}.oncreate, context: this });
+				options._root._renderHooks.push( ${generator.alias( 'template' )}.oncreate.bind( this ) );
 			} else {
 				${generator.alias( 'template' )}.oncreate.call( this );
 			}
@@ -218,7 +218,7 @@ export default function dom ( parsed, source, options ) {
 
 		this._handlers = Object.create( null );
 
-		this._root = options._root;
+		this._root = options._root || this;
 		this._yield = options._yield;
 
 		${builders.init}
@@ -275,20 +275,20 @@ export default function dom ( parsed, source, options ) {
 		);
 	} else {
 		generator.uses.forEach( key => {
-			const str = sharedMap.get( key );
+			const str = shared[ key ];
 			const code = new MagicString( str );
-			const fn = parse( str ).body[0];
+			const expression = parseExpressionAt( str, 0 );
 
-			let scope = annotateWithScopes( fn );
+			let scope = annotateWithScopes( expression );
 
-			walk( fn, {
+			walk( expression, {
 				enter ( node, parent ) {
 					if ( node._scope ) scope = node._scope;
 
 					if ( node.type === 'Identifier' && isReference( node, parent ) && !scope.has( node.name ) ) {
-						if ( nameMap.has( node.name ) ) {
+						if ( node.name in shared ) {
 							// this helper function depends on another one
-							const dependency = nameMap.get( node.name );
+							const dependency = node.name;
 							generator.uses.add( dependency );
 
 							const alias = generator.alias( dependency );
@@ -302,10 +302,18 @@ export default function dom ( parsed, source, options ) {
 				}
 			});
 
-			const alias = generator.alias( key );
-			if ( alias !== fn.id.name ) code.overwrite( fn.id.start, fn.id.end, alias );
+			if ( key === 'transitionManager' ) { // special case
+				const global = `_svelteTransitionManager`;
 
-			builders.main.addBlock( code.toString() );
+				builders.main.addBlock(
+					`var ${generator.alias( 'transitionManager' )} = window.${global} || ( window.${global} = ${code});`
+				);
+			} else {
+				const alias = generator.alias( expression.id.name );
+				if ( alias !== expression.id.name ) code.overwrite( expression.id.start, expression.id.end, alias );
+
+				builders.main.addBlock( code.toString() );
+			}
 		});
 	}
 

src/generators/dom/preprocess.js

@@ -59,6 +59,8 @@ const preprocessors = {
 	IfBlock: ( generator, block, state, node ) => {
 		const blocks = [];
 		let dynamic = false;
+		let hasIntros = false;
+		let hasOutros = false;
 
 		function attachBlocks ( node ) {
 			const dependencies = block.findDependencies( node.expression );
@@ -78,6 +80,9 @@ const preprocessors = {
 				block.addDependencies( node._block.dependencies );
 			}
 
+			if ( node._block.hasIntroMethod ) hasIntros = true;
+			if ( node._block.hasOutroMethod ) hasOutros = true;
+
 			if ( isElseIf( node.else ) ) {
 				attachBlocks( node.else.children[0] );
 			} else if ( node.else ) {
@@ -101,6 +106,8 @@ const preprocessors = {
 
 		blocks.forEach( block => {
 			block.hasUpdateMethod = dynamic;
+			block.hasIntroMethod = hasIntros;
+			block.hasOutroMethod = hasOutros;
 		});
 
 		generator.blocks.push( ...blocks );
@@ -200,6 +207,14 @@ const preprocessors = {
 				const dependencies = block.findDependencies( attribute.value );
 				block.addDependencies( dependencies );
 			}
+
+			else if ( attribute.type === 'Transition' ) {
+				if ( attribute.intro ) generator.hasIntroTransitions = block.hasIntroMethod = true;
+				if ( attribute.outro ) {
+					generator.hasOutroTransitions = block.hasOutroMethod = true;
+					block.outros += 1;
+				}
+			}
 		});
 
 		if ( node.children.length ) {

src/generators/dom/sharedNames.js

@@ -92,7 +92,7 @@ export default function visitComponent ( generator, block, state, node ) {
 
 	const componentInitProperties = [
 		`target: ${!isToplevel ? state.parentNode: 'null'}`,
-		`_root: ${block.component}._root || ${block.component}`
+		`_root: ${block.component}._root`
 	];
 
 	// Component has children, put them in a separate {{yield}} block