use builders everywhere

pull/183/head
Rich-Harris 9 years ago
parent 08f51b23dd
commit 5fa2cd24c4

@ -29,18 +29,19 @@ export default function generate ( parsed, source, options, names ) {
`${generator.current.target}.appendChild( ${renderStatement} );` `${generator.current.target}.appendChild( ${renderStatement} );`
); );
} }
if ( isToplevel ) { if ( isToplevel ) {
generator.current.detachStatements.push( deindent` generator.current.builders.detach.addLine(
${name}.parentNode.removeChild( ${name} ); `${name}.parentNode.removeChild( ${name} );`
` ); );
} }
}, },
createMountStatement ( name ) { createMountStatement ( name ) {
if ( generator.current.target === 'target' ) { if ( generator.current.target === 'target' ) {
generator.current.mountStatements.push( deindent` generator.current.builders.mount.addLine(
target.insertBefore( ${name}, anchor ); `target.insertBefore( ${name}, anchor );`
` ); );
} else { } else {
generator.current.builders.init.addLine( generator.current.builders.init.addLine(
`${generator.current.target}.appendChild( ${name} );` ); `${generator.current.target}.appendChild( ${name} );` );
@ -59,12 +60,6 @@ export default function generate ( parsed, source, options, names ) {
name, name,
target: 'target', target: 'target',
localElementDepth: 0, localElementDepth: 0,
mountStatements: [],
updateStatements: [],
detachStatements: [],
teardownStatements: [],
builders: generator.getBuilders(), builders: generator.getBuilders(),
getUniqueName: generator.getUniqueNameMaker() getUniqueName: generator.getUniqueNameMaker()
}); });
@ -81,18 +76,13 @@ export default function generate ( parsed, source, options, names ) {
fragment.builders.init.addLine( `${fragment.autofocus}.focus();` ); fragment.builders.init.addLine( `${fragment.autofocus}.focus();` );
} }
const detachStatements = fragment.detachStatements.join( '\n\n' ); if ( !fragment.builders.detach.isEmpty() ) {
const teardownStatements = fragment.teardownStatements.join( '\n\n' ); fragment.builders.teardown.addBlock( deindent`
if ( detach ) {
const detachBlock = deindent` ${fragment.builders.detach}
if ( detach ) { }
${detachStatements} ` );
} }
`;
const teardownBlock = deindent`
${teardownStatements}${detachStatements ? `\n\n${detachBlock}` : ``}
`;
renderers.push( deindent` renderers.push( deindent`
function ${fragment.name} ( ${fragment.params}, component ) { function ${fragment.name} ( ${fragment.params}, component ) {
@ -100,15 +90,15 @@ export default function generate ( parsed, source, options, names ) {
return { return {
mount: function ( target, anchor ) { mount: function ( target, anchor ) {
${fragment.mountStatements.join( '\n\n' )} ${fragment.builders.mount}
}, },
update: function ( changed, ${fragment.params} ) { update: function ( changed, ${fragment.params} ) {
${fragment.updateStatements.join( '\n\n' )} ${fragment.builders.update}
}, },
teardown: function ( detach ) { teardown: function ( detach ) {
${teardownBlock} ${fragment.builders.teardown}
} }
}; };
} }
@ -303,12 +293,7 @@ export default function generate ( parsed, source, options, names ) {
target: 'target', target: 'target',
elementDepth: 0, elementDepth: 0,
localElementDepth: 0, localElementDepth: 0,
mountStatements: [],
updateStatements: [],
detachStatements: [],
teardownStatements: [],
contexts: {}, contexts: {},
indexes: {}, indexes: {},

@ -41,7 +41,9 @@ export default {
`var ${name}_yieldFragment = ${yieldName}( root, component );` `var ${name}_yieldFragment = ${yieldName}( root, component );`
); );
generator.current.updateStatements.push(`${name}_yieldFragment.update ( changed, root );`); generator.current.builders.update.addLine(
`${name}_yieldFragment.update( changed, root );`
);
componentInitProperties.push(`yield: ${name}_yieldFragment`); componentInitProperties.push(`yield: ${name}_yieldFragment`);
} }
@ -111,10 +113,10 @@ export default {
local.teardown.push( `${name}.teardown( ${isToplevel ? 'detach' : 'false'} );` ); local.teardown.push( `${name}.teardown( ${isToplevel ? 'detach' : 'false'} );` );
generator.current.builders.init.addBlock( local.init.join( '\n' ) ); generator.current.builders.init.addBlock( local.init.join( '\n' ) );
if ( local.update.length ) generator.current.updateStatements.push( local.update.join( '\n' ) ); if ( local.update.length ) generator.current.builders.update.addBlock( local.update.join( '\n' ) );
if ( local.mount.length ) generator.current.mountStatements.push( local.mount.join( '\n' ) ); if ( local.mount.length ) generator.current.builders.mount.addBlock( local.mount.join( '\n' ) );
if ( local.detach.length ) generator.current.detachStatements.push( local.detach.join( '\n' ) ); if ( local.detach.length ) generator.current.builders.detach.addBlock( local.detach.join( '\n' ) );
generator.current.teardownStatements.push( local.teardown.join( '\n' ) ); generator.current.builders.teardown.addBlock( local.teardown.join( '\n' ) );
generator.push({ generator.push({
namespace: local.namespace, namespace: local.namespace,

@ -40,13 +40,13 @@ export default {
} }
if ( isToplevel ) { if ( isToplevel ) {
generator.current.mountStatements.push( deindent` generator.current.builders.mount.addBlock( deindent`
for ( var ${i} = 0; ${i} < ${iterations}.length; ${i} += 1 ) { for ( var ${i} = 0; ${i} < ${iterations}.length; ${i} += 1 ) {
${iterations}[${i}].mount( ${anchor}.parentNode, ${anchor} ); ${iterations}[${i}].mount( ${anchor}.parentNode, ${anchor} );
} }
` ); ` );
if ( node.else ) { if ( node.else ) {
generator.current.mountStatements.push( deindent` generator.current.builders.mount.addBlock( deindent`
if ( ${elseName} ) { if ( ${elseName} ) {
${elseName}.mount( ${anchor}.parentNode, ${anchor} ); ${elseName}.mount( ${anchor}.parentNode, ${anchor} );
} }
@ -54,7 +54,7 @@ export default {
} }
} }
generator.current.updateStatements.push( deindent` generator.current.builders.update.addBlock( deindent`
var ${name}_value = ${snippet}; var ${name}_value = ${snippet};
for ( var ${i} = 0; ${i} < ${name}_value.length; ${i} += 1 ) { for ( var ${i} = 0; ${i} < ${name}_value.length; ${i} += 1 ) {
@ -74,7 +74,7 @@ export default {
` ); ` );
if ( node.else ) { if ( node.else ) {
generator.current.updateStatements.push( deindent` generator.current.builders.update.addBlock( deindent`
if ( !${name}_value.length && ${elseName} ) { if ( !${name}_value.length && ${elseName} ) {
${elseName}.update( changed, ${params} ); ${elseName}.update( changed, ${params} );
} else if ( !${name}_value.length ) { } else if ( !${name}_value.length ) {
@ -86,14 +86,14 @@ export default {
` ); ` );
} }
generator.current.teardownStatements.push( deindent` generator.current.builders.teardown.addBlock( deindent`
for ( var ${i} = 0; ${i} < ${iterations}.length; ${i} += 1 ) { for ( var ${i} = 0; ${i} < ${iterations}.length; ${i} += 1 ) {
${iterations}[${i}].teardown( ${isToplevel ? 'detach' : 'false'} ); ${iterations}[${i}].teardown( ${isToplevel ? 'detach' : 'false'} );
} }
` ); ` );
if ( node.else ) { if ( node.else ) {
generator.current.teardownStatements.push( deindent` generator.current.builders.teardown.addBlock( deindent`
if ( ${elseName} ) { if ( ${elseName} ) {
${elseName}.teardown( ${isToplevel ? 'detach' : 'false'} ); ${elseName}.teardown( ${isToplevel ? 'detach' : 'false'} );
} }
@ -136,19 +136,18 @@ export default {
listNames, listNames,
params: blockParams, params: blockParams,
mountStatements: [],
updateStatements: [ Object.keys( contexts ).map( contextName => {
const listName = listNames[ contextName ];
const indexName = indexNames[ contextName ];
return `var ${contextName} = ${listName}[${indexName}];`;
}).join( '\n' ) ],
detachStatements: [],
teardownStatements: [],
builders: generator.getBuilders(), builders: generator.getBuilders(),
getUniqueName: generator.getUniqueNameMaker() getUniqueName: generator.getUniqueNameMaker()
}); });
Object.keys( contexts ).forEach( contextName => {
const listName = listNames[ contextName ];
const indexName = indexNames[ contextName ];
generator.current.builders.update.addLine(
`var ${contextName} = ${listName}[${indexName}];`
);
});
}, },
leave ( generator ) { leave ( generator ) {

@ -80,10 +80,10 @@ export default {
} }
generator.current.builders.init.addBlock( local.init.join( '\n' ) ); generator.current.builders.init.addBlock( local.init.join( '\n' ) );
if ( local.update.length ) generator.current.updateStatements.push( local.update.join( '\n' ) ); if ( local.update.length ) generator.current.builders.update.addBlock( local.update.join( '\n' ) );
if ( local.mount.length ) generator.current.mountStatements.push( local.mount.join( '\n' ) ); if ( local.mount.length ) generator.current.builders.mount.addBlock( local.mount.join( '\n' ) );
if ( local.detach.length ) generator.current.detachStatements.push( local.detach.join( '\n' ) ); if ( local.detach.length ) generator.current.builders.detach.addBlock( local.detach.join( '\n' ) );
generator.current.teardownStatements.push( local.teardown.join( '\n' ) ); generator.current.builders.teardown.addBlock( local.teardown.join( '\n' ) );
generator.createMountStatement( name ); generator.createMountStatement( name );

@ -52,12 +52,12 @@ export default {
const mountStatement = `if ( ${name} ) ${name}.mount( ${anchor}.parentNode, ${anchor} );`; const mountStatement = `if ( ${name} ) ${name}.mount( ${anchor}.parentNode, ${anchor} );`;
if ( isToplevel ) { if ( isToplevel ) {
generator.current.mountStatements.push( mountStatement ); generator.current.builders.mount.addLine( mountStatement );
} else { } else {
generator.current.builders.init.addLine( mountStatement ); generator.current.builders.init.addLine( mountStatement );
} }
generator.current.updateStatements.push( deindent` generator.current.builders.update.addBlock( deindent`
var _${currentBlock} = ${currentBlock}; var _${currentBlock} = ${currentBlock};
${currentBlock} = ${getBlock}( ${params} ); ${currentBlock} = ${getBlock}( ${params} );
if ( _${currentBlock} === ${currentBlock} && ${name}) { if ( _${currentBlock} === ${currentBlock} && ${name}) {
@ -69,8 +69,8 @@ export default {
} }
` ); ` );
generator.current.teardownStatements.push( deindent` generator.current.builders.teardown.addLine(
if ( ${name} ) ${name}.teardown( ${isToplevel ? 'detach' : 'false'} ); `if ( ${name} ) ${name}.teardown( ${isToplevel ? 'detach' : 'false'} );`
` ); );
} }
}; };

@ -9,7 +9,7 @@ export default {
generator.addElement( name, `document.createTextNode( ${snippet} )`, true ); generator.addElement( name, `document.createTextNode( ${snippet} )`, true );
generator.current.updateStatements.push( deindent` generator.current.builders.update.addBlock( deindent`
${name}.data = ${snippet}; ${name}.data = ${snippet};
` ); ` );
} }

@ -24,22 +24,20 @@ export default {
`; `;
if ( isToplevel ) { if ( isToplevel ) {
generator.current.mountStatements.push(mountStatement); generator.current.builders.mount.addLine( mountStatement );
} else { } else {
generator.current.builders.init.addLine( mountStatement ); generator.current.builders.init.addLine( mountStatement );
} }
generator.current.updateStatements.push( deindent` generator.current.builders.update.addBlock( detachStatement );
${detachStatement} generator.current.builders.update.addBlock( mountStatement );
${mountStatement}
` );
if ( isToplevel ) { // if ( isToplevel ) {
const { detachStatements } = generator.current; // const { detachStatements } = generator.current;
// we need `before` and `after` to still be in the DOM when running the // // we need `before` and `after` to still be in the DOM when running the
// detach code, so splice in the detach code *before* detaching // // detach code, so splice in the detach code *before* detaching
// `before`/`after`. // // `before`/`after`.
detachStatements.splice( detachStatements.length - 2, 0, detachStatement); // detachStatements.splice( detachStatements.length - 2, 0, detachStatement);
} // }
} }
}; };

@ -1,7 +1,13 @@
export default { export default {
enter ( generator ) { enter ( generator ) {
const anchor = generator.createAnchor( 'yield', 'yield' ); const anchor = generator.createAnchor( 'yield', 'yield' );
generator.current.mountStatements.push(`component.yield && component.yield.mount( ${generator.current.target}, ${anchor} );`);
generator.current.teardownStatements.push(`component.yield && component.yield.teardown( detach );`); generator.current.builders.mount.addLine(
`component.yield && component.yield.mount( ${generator.current.target}, ${anchor} );`
);
generator.current.builders.teardown.addLine(
`component.yield && component.yield.teardown( detach );`
);
} }
}; };

@ -23,6 +23,10 @@ export default class CodeBuilder {
this.last = BLOCK; this.last = BLOCK;
} }
isEmpty () {
return this.result === '';
}
toString () { toString () {
return this.result.trim(); return this.result.trim();
} }

@ -2,12 +2,14 @@ export default {
data: { data: {
name: 'world' name: 'world'
}, },
html: '<h1>Hello world!</h1>', html: '<h1>Hello world!</h1>',
test ( assert, component, target ) { test ( assert, component, target ) {
component.set({ name: 'everybody' }); component.set({ name: 'everybody' });
assert.equal( target.innerHTML, '<h1>Hello everybody!</h1>' ); assert.htmlEqual( target.innerHTML, '<h1>Hello everybody!</h1>' );
component.teardown(); component.teardown();
assert.equal( target.innerHTML, '' ); assert.htmlEqual( target.innerHTML, '' );
} }
}; };

@ -1,3 +1,3 @@
export default { export default {
html: '<p>two is greater than one</p><!--#if 2 > 1-->' html: '<p>two is greater than one</p>'
}; };

Loading…
Cancel
Save