msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

conditionalise each-block updates

Browse Source
pull/489/head
Rich-Harris 9 years ago
parent ab19649dfa
commit b574c405eb
5 changed files with 92 additions and 113 deletions
Show Stats Download Patch File Download Diff File

53
src/generators/dom/Block.js
Unescape View File

@ -2,34 +2,23 @@ import CodeBuilder from '../../utils/CodeBuilder.js';
import deindent from '../../utils/deindent.js'; import deindent from '../../utils/deindent.js';
export default class Block { export default class Block {
constructor ({ constructor ( options ) {
generator, this.generator = options.generator;
name, this.name = options.name;
key, this.key = options.key;
expression, this.expression = options.expression;
context, this.context = options.context;
contextDependencies,
dependencies, this.contexts = options.contexts;
contexts, this.indexes = options.indexes;
indexes, this.contextDependencies = options.contextDependencies;
params, this.dependencies = new Set();
indexNames,
listNames this.params = options.params;
}) { this.indexNames = options.indexNames;
this.generator = generator; this.listNames = options.listNames;
this.name = name;
this.key = key; this.listName = options.listName;
this.expression = expression;
this.context = context;
this.contexts = contexts;
this.indexes = indexes;
this.contextDependencies = contextDependencies;
this.dependencies = dependencies;
this.params = params;
this.indexNames = indexNames;
this.listNames = listNames;
this.builders = { this.builders = {
create: new CodeBuilder(), create: new CodeBuilder(),
@ -40,13 +29,19 @@ export default class Block {
destroy: new CodeBuilder() destroy: new CodeBuilder()
}; };
this.getUniqueName = generator.getUniqueNameMaker( params ); this.getUniqueName = this.generator.getUniqueNameMaker( options.params );
// unique names // unique names
this.component = this.getUniqueName( 'component' ); this.component = this.getUniqueName( 'component' );
this.target = this.getUniqueName( 'target' ); this.target = this.getUniqueName( 'target' );
} }
addDependencies ( dependencies ) {
dependencies.forEach( dependency => {
this.dependencies.add( dependency );
});
}
addElement ( name, renderStatement, parentNode, needsIdentifier = false ) { addElement ( name, renderStatement, parentNode, needsIdentifier = false ) {
const isToplevel = !parentNode; const isToplevel = !parentNode;
if ( needsIdentifier || isToplevel ) { if ( needsIdentifier || isToplevel ) {

16
src/generators/dom/preprocess.js
Unescape View File

@ -7,37 +7,39 @@ function isElseIf ( node ) {
const preprocessors = { const preprocessors = {
MustacheTag: ( generator, block, node ) => { MustacheTag: ( generator, block, node ) => {
const { dependencies } = block.contextualise( node.expression ); const { dependencies } = block.contextualise( node.expression );
dependencies.forEach( dependency => { block.addDependencies( dependencies );
block.dependencies.add( dependency );
});
}, },
IfBlock: ( generator, block, node ) => { IfBlock: ( generator, block, node ) => {
function attachBlocks ( node ) { function attachBlocks ( node ) {
const { dependencies } = block.contextualise( node.expression ); const { dependencies } = block.contextualise( node.expression );
block.addDependencies( dependencies );
node._block = block.child({ node._block = block.child({
name: generator.getUniqueName( `create_if_block` ) name: generator.getUniqueName( `create_if_block` )
}); });
preprocessChildren( generator, node._block, node.children ); preprocessChildren( generator, node._block, node.children );
block.addDependencies( node._block.dependencies );
if ( isElseIf( node.else ) ) { if ( isElseIf( node.else ) ) {
attachBlocks( node.else ); attachBlocks( node.else.children[0] );
} else if ( node.else ) { } else if ( node.else ) {
node.else._block = block.child({ node.else._block = block.child({
name: generator.getUniqueName( `create_if_block` ) name: generator.getUniqueName( `create_if_block` )
}); });
preprocessChildren( generator, node.else._block, node.else.children ); preprocessChildren( generator, node.else._block, node.else.children );
block.addDependencies( node.else._block.dependencies );
} }
} }
attachBlocks ( node ); attachBlocks( node );
}, },
EachBlock: ( generator, block, node ) => { EachBlock: ( generator, block, node ) => {
const { dependencies } = block.contextualise( node.expression ); const { dependencies } = block.contextualise( node.expression );
block.addDependencies( dependencies );
const indexNames = new Map( block.indexNames ); const indexNames = new Map( block.indexNames );
const indexName = node.index || block.getUniqueName( `${node.context}_index` ); const indexName = node.index || block.getUniqueName( `${node.context}_index` );
@ -67,12 +69,16 @@ const preprocessors = {
contexts, contexts,
indexes, indexes,
listName,
indexName,
indexNames, indexNames,
listNames, listNames,
params: block.params.concat( listName, context, indexName ) params: block.params.concat( listName, context, indexName )
}); });
preprocessChildren( generator, node._block, node.children ); preprocessChildren( generator, node._block, node.children );
block.addDependencies( node._block.dependencies );
}, },
Element: ( generator, block, node ) => { Element: ( generator, block, node ) => {

109
src/generators/dom/visitors/EachBlock.js
Unescape View File

@ -7,18 +7,18 @@ export default function visitEachBlock ( generator, block, state, node ) {
const each_block_else = generator.getUniqueName( `${each_block}_else` ); const each_block_else = generator.getUniqueName( `${each_block}_else` );
const create_each_block = node._block.name; const create_each_block = node._block.name;
const create_each_block_else = generator.getUniqueName( `${create_each_block}_else` ); const create_each_block_else = generator.getUniqueName( `${create_each_block}_else` );
const listName = block.getUniqueName( `${each_block}_value` ); const each_block_value = node._block.listName;
const iterations = block.getUniqueName( `${each_block}_iterations` ); const iterations = block.getUniqueName( `${each_block}_iterations` );
const i = block.getUniqueName( `i` ); const i = block.getUniqueName( `i` );
const params = block.params.join( ', ' ); const params = block.params.join( ', ' );
const anchor = block.getUniqueName( `${each_block}_anchor` ); const anchor = block.getUniqueName( `${each_block}_anchor` );
const vars = { each_block, create_each_block, listName, iterations, i, params, anchor }; const vars = { each_block, create_each_block, each_block_value, iterations, i, params, anchor };
const { dependencies, snippet } = block.contextualise( node.expression ); const { snippet } = block.contextualise( node.expression );
block.createAnchor( anchor, state.parentNode ); block.createAnchor( anchor, state.parentNode );
block.builders.create.addLine( `var ${listName} = ${snippet};` ); block.builders.create.addLine( `var ${each_block_value} = ${snippet};` );
block.builders.create.addLine( `var ${iterations} = [];` ); block.builders.create.addLine( `var ${iterations} = [];` );
if ( node.key ) { if ( node.key ) {
@ -45,7 +45,7 @@ export default function visitEachBlock ( generator, block, state, node ) {
// TODO neaten this up... will end up with an empty line in the block // TODO neaten this up... will end up with an empty line in the block
block.builders.create.addBlock( deindent` block.builders.create.addBlock( deindent`
if ( !${listName}.length ) { if ( !${each_block_value}.length ) {
${each_block_else} = ${create_each_block_else}( ${params}, ${block.component} ); ${each_block_else} = ${create_each_block_else}( ${params}, ${block.component} );
${!isToplevel ? `${each_block_else}.mount( ${state.parentNode}, ${anchor} );` : ''} ${!isToplevel ? `${each_block_else}.mount( ${state.parentNode}, ${anchor} );` : ''}
} }
@ -58,9 +58,9 @@ export default function visitEachBlock ( generator, block, state, node ) {
` ); ` );
block.builders.update.addBlock( deindent` block.builders.update.addBlock( deindent`
if ( !${listName}.length && ${each_block_else} ) { if ( !${each_block_value}.length && ${each_block_else} ) {
${each_block_else}.update( changed, ${params} ); ${each_block_else}.update( changed, ${params} );
} else if ( !${listName}.length ) { } else if ( !${each_block_value}.length ) {
${each_block_else} = ${create_each_block_else}( ${params}, ${block.component} ); ${each_block_else} = ${create_each_block_else}( ${params}, ${block.component} );
${each_block_else}.mount( ${anchor}.parentNode, ${anchor} ); ${each_block_else}.mount( ${anchor}.parentNode, ${anchor} );
} else if ( ${each_block_else} ) { } else if ( ${each_block_else} ) {
@ -75,37 +75,6 @@ export default function visitEachBlock ( generator, block, state, node ) {
` ); ` );
} }
// const indexNames = new Map( block.indexNames );
// const indexName = node.index || block.getUniqueName( `${node.context}_index` );
// indexNames.set( node.context, indexName );
// const listNames = new Map( block.listNames );
// listNames.set( node.context, listName );
// const context = generator.getUniqueName( node.context );
// const contexts = new Map( block.contexts );
// contexts.set( node.context, context );
// const indexes = new Map( block.indexes );
// if ( node.index ) indexes.set( indexName, node.context );
// const contextDependencies = new Map( block.contextDependencies );
// contextDependencies.set( node.context, dependencies );
// const childBlock = block.child({
// name: vars.create_each_block,
// expression: node.expression,
// context: node.context,
// key: node.key,
// contextDependencies,
// contexts,
// indexes,
// indexNames,
// listNames,
// params: block.params.concat( listName, context, indexName )
// });
const childBlock = node._block; const childBlock = node._block;
const childState = Object.assign( {}, state, { const childState = Object.assign( {}, state, {
@ -132,7 +101,7 @@ export default function visitEachBlock ( generator, block, state, node ) {
} }
} }
function keyed ( generator, block, state, node, snippet, { each_block, create_each_block, listName, iterations, i, params, anchor } ) { function keyed ( generator, block, state, node, snippet, { each_block, create_each_block, each_block_value, iterations, i, params, anchor } ) {
const fragment = block.getUniqueName( 'fragment' ); const fragment = block.getUniqueName( 'fragment' );
const value = block.getUniqueName( 'value' ); const value = block.getUniqueName( 'value' );
const key = block.getUniqueName( 'key' ); const key = block.getUniqueName( 'key' );
@ -146,8 +115,8 @@ function keyed ( generator, block, state, node, snippet, { each_block, create_ea
const create = new CodeBuilder(); const create = new CodeBuilder();
create.addBlock( deindent` create.addBlock( deindent`
var ${key} = ${listName}[${i}].${node.key}; var ${key} = ${each_block_value}[${i}].${node.key};
${iterations}[${i}] = ${lookup}[ ${key} ] = ${create_each_block}( ${params}, ${listName}, ${listName}[${i}], ${i}, ${block.component}${node.key ? `, ${key}` : `` } ); ${iterations}[${i}] = ${lookup}[ ${key} ] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[${i}], ${i}, ${block.component}${node.key ? `, ${key}` : `` } );
` ); ` );
if ( state.parentNode ) { if ( state.parentNode ) {
@ -157,28 +126,28 @@ function keyed ( generator, block, state, node, snippet, { each_block, create_ea
} }
block.builders.create.addBlock( deindent` block.builders.create.addBlock( deindent`
for ( var ${i} = 0; ${i} < ${listName}.length; ${i} += 1 ) { for ( var ${i} = 0; ${i} < ${each_block_value}.length; ${i} += 1 ) {
${create} ${create}
} }
` ); ` );
block.builders.update.addBlock( deindent` block.builders.update.addBlock( deindent`
var ${listName} = ${snippet}; var ${each_block_value} = ${snippet};
var ${_iterations} = []; var ${_iterations} = [];
var ${_lookup} = Object.create( null ); var ${_lookup} = Object.create( null );
var ${fragment} = document.createDocumentFragment(); var ${fragment} = document.createDocumentFragment();
// create new iterations as necessary // create new iterations as necessary
for ( var ${i} = 0; ${i} < ${listName}.length; ${i} += 1 ) { for ( var ${i} = 0; ${i} < ${each_block_value}.length; ${i} += 1 ) {
var ${value} = ${listName}[${i}]; var ${value} = ${each_block_value}[${i}];
var ${key} = ${value}.${node.key}; var ${key} = ${value}.${node.key};
if ( ${lookup}[ ${key} ] ) { if ( ${lookup}[ ${key} ] ) {
${_iterations}[${i}] = ${_lookup}[ ${key} ] = ${lookup}[ ${key} ]; ${_iterations}[${i}] = ${_lookup}[ ${key} ] = ${lookup}[ ${key} ];
${_lookup}[ ${key} ].update( changed, ${params}, ${listName}, ${listName}[${i}], ${i} ); ${_lookup}[ ${key} ].update( changed, ${params}, ${each_block_value}, ${each_block_value}[${i}], ${i} );
} else { } else {
${_iterations}[${i}] = ${_lookup}[ ${key} ] = ${create_each_block}( ${params}, ${listName}, ${listName}[${i}], ${i}, ${block.component}${node.key ? `, ${key}` : `` } ); ${_iterations}[${i}] = ${_lookup}[ ${key} ] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[${i}], ${i}, ${block.component}${node.key ? `, ${key}` : `` } );
} }
${_iterations}[${i}].mount( ${fragment}, null ); ${_iterations}[${i}].mount( ${fragment}, null );
@ -199,11 +168,11 @@ function keyed ( generator, block, state, node, snippet, { each_block, create_ea
` ); ` );
} }
function unkeyed ( generator, block, state, node, snippet, { create_each_block, listName, iterations, i, params, anchor } ) { function unkeyed ( generator, block, state, node, snippet, { create_each_block, each_block_value, iterations, i, params, anchor } ) {
const create = new CodeBuilder(); const create = new CodeBuilder();
create.addLine( create.addLine(
`${iterations}[${i}] = ${create_each_block}( ${params}, ${listName}, ${listName}[${i}], ${i}, ${block.component} );` `${iterations}[${i}] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[${i}], ${i}, ${block.component} );`
); );
if ( state.parentNode ) { if ( state.parentNode ) {
@ -213,25 +182,39 @@ function unkeyed ( generator, block, state, node, snippet, { create_each_block,
} }
block.builders.create.addBlock( deindent` block.builders.create.addBlock( deindent`
for ( var ${i} = 0; ${i} < ${listName}.length; ${i} += 1 ) { for ( var ${i} = 0; ${i} < ${each_block_value}.length; ${i} += 1 ) {
${create} ${create}
} }
` ); ` );
block.builders.update.addBlock( deindent` const { dependencies } = block.contextualise( node.expression );
var ${listName} = ${snippet}; const allDependencies = new Set( block.dependencies );
dependencies.forEach( dependency => {
allDependencies.add( dependency );
});
for ( var ${i} = 0; ${i} < ${listName}.length; ${i} += 1 ) { const condition = Array.from( allDependencies )
if ( !${iterations}[${i}] ) { .map( dependency => `'${dependency}' in changed` )
${iterations}[${i}] = ${create_each_block}( ${params}, ${listName}, ${listName}[${i}], ${i}, ${block.component} ); .join( ' || ' );
${iterations}[${i}].mount( ${anchor}.parentNode, ${anchor} );
} else {
${iterations}[${i}].update( changed, ${params}, ${listName}, ${listName}[${i}], ${i} );
}
}
${generator.helper( 'destroyEach' )}( ${iterations}, true, ${listName}.length ); if ( condition !== '' ) {
block.builders.update.addBlock( deindent`
var ${each_block_value} = ${snippet};
${iterations}.length = ${listName}.length; if ( ${condition} ) {
` ); for ( var ${i} = 0; ${i} < ${each_block_value}.length; ${i} += 1 ) {
if ( !${iterations}[${i}] ) {
${iterations}[${i}] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[${i}], ${i}, ${block.component} );
${iterations}[${i}].mount( ${anchor}.parentNode, ${anchor} );
} else {
${iterations}[${i}].update( changed, ${params}, ${each_block_value}, ${each_block_value}[${i}], ${i} );
}
}
${generator.helper( 'destroyEach' )}( ${iterations}, true, ${each_block_value}.length );
${iterations}.length = ${each_block_value}.length;
}
` );
}
} }

21
src/generators/dom/visitors/IfBlock.js
Unescape View File

@ -5,39 +5,34 @@ function isElseIf ( node ) {
return node && node.children.length === 1 && node.children[0].type === 'IfBlock'; return node && node.children.length === 1 && node.children[0].type === 'IfBlock';
} }
function getConditionsAndBlocks ( generator, block, state, node, _name, i = 0 ) { function getConditionsAndBlocks ( generator, block, state, node ) {
const name = generator.getUniqueName( `${_name}_${i}` );
const conditionsAndBlocks = [{ const conditionsAndBlocks = [{
condition: block.contextualise( node.expression ).snippet, condition: block.contextualise( node.expression ).snippet,
block: name block: node._block.name
}]; }];
generateBlock( generator, block, state, node, name ); generateBlock( generator, block, state, node );
if ( isElseIf( node.else ) ) { if ( isElseIf( node.else ) ) {
conditionsAndBlocks.push( conditionsAndBlocks.push(
...getConditionsAndBlocks( generator, block, state, node.else.children[0], _name, i + 1 ) ...getConditionsAndBlocks( generator, block, state, node.else.children[0] )
); );
} else { } else {
const name = generator.getUniqueName( `${_name}_${i + 1}` );
conditionsAndBlocks.push({ conditionsAndBlocks.push({
condition: null, condition: null,
block: node.else ? name : null, block: node.else ? node.else._block.name : null,
}); });
if ( node.else ) { if ( node.else ) {
generateBlock( generator, block, state, node.else, name ); generateBlock( generator, block, state, node.else );
} }
} }
return conditionsAndBlocks; return conditionsAndBlocks;
} }
function generateBlock ( generator, block, state, node, name ) { function generateBlock ( generator, block, state, node ) {
const childBlock = block.child({ const childBlock = node._block;
name
});
const childState = Object.assign( {}, state, { const childState = Object.assign( {}, state, {
parentNode: null parentNode: null

6
test/js/samples/each-block-changed-check/expected.js
Unescape View File

@ -14,14 +14,14 @@ function create_main_fragment ( root, component ) {
insertNode( each_block_anchor, target, anchor ); insertNode( each_block_anchor, target, anchor );
for ( var i = 0; i < each_block_iterations.length; i += 1 ) { for ( var i = 0; i < each_block_iterations.length; i += 1 ) {
each_block_iterations[i].mount( each_block_anchor.parentNode, each_block_anchor ); each_block_iterations[i].mount( target, each_block_anchor );
} }
}, },
update: function ( changed, root ) { update: function ( changed, root ) {
if ( 'comments' in changed || 'time' in changed ) { var each_block_value = root.comments;
var each_block_value = root.comments;
if ( 'comments' in changed || 'elapsed' in changed || 'time' in changed ) {
for ( var i = 0; i < each_block_value.length; i += 1 ) { for ( var i = 0; i < each_block_value.length; i += 1 ) {
if ( !each_block_iterations[i] ) { if ( !each_block_iterations[i] ) {
each_block_iterations[i] = create_each_block( root, each_block_value, each_block_value[i], i, component ); each_block_iterations[i] = create_each_block( root, each_block_value, each_block_value[i], i, component );

Write Preview
Loading…
Cancel
Save