Skip to content

Commit

Permalink
Merge pull request #525 from sveltejs/gh-7
Browse files Browse the repository at this point in the history 
Transitions
  • Loading branch information
@Rich-Harris
Rich-Harris authored May 3, 2017
2 parents 8ff66f3 + 90adb3b commit 1078bae
Show file tree
Hide file tree
Showing 54 changed files with 4,318 additions and 155 deletions.
7 changes: 5 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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"
},
Expand Down
3 changes: 2 additions & 1 deletion src/generators/Generator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [];
Expand Down Expand Up @@ -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 );
Expand Down
64 changes: 64 additions & 0 deletions src/generators/dom/Block.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down Expand Up @@ -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 => {
Expand Down Expand Up @@ -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 {
Expand Down
40 changes: 24 additions & 16 deletions src/generators/dom/index.js
View file
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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`;
}

Expand Down Expand Up @@ -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 = [];` );
}

Expand All @@ -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 );
Expand All @@ -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 );
}
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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 );
Expand All @@ -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() );
}
});
}

Expand Down
15 changes: 15 additions & 0 deletions src/generators/dom/preprocess.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand All @@ -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 ) {
Expand All @@ -101,6 +106,8 @@ const preprocessors = {

blocks.forEach( block => {
block.hasUpdateMethod = dynamic;
block.hasIntroMethod = hasIntros;
block.hasOutroMethod = hasOutros;
});

generator.blocks.push( ...blocks );
Expand Down Expand Up @@ -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 ) {
Expand Down
12 changes: 0 additions & 12 deletions src/generators/dom/sharedNames.js
View file

This file was deleted.

2 changes: 1 addition & 1 deletion src/generators/dom/visitors/Component/Component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading

0 comments on commit 1078bae

Please sign in to comment.