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

@ -41,7 +41,9 @@ export default {
`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`);
}
@ -111,10 +113,10 @@ export default {
local.teardown.push( `${name}.teardown( ${isToplevel ? 'detach' : 'false'} );` );
generator.current.builders.init.addBlock( local.init.join( '\n' ) );
if ( local.update.length ) generator.current.updateStatements.push( local.update.join( '\n' ) );
if ( local.mount.length ) generator.current.mountStatements.push( local.mount.join( '\n' ) );
if ( local.detach.length ) generator.current.detachStatements.push( local.detach.join( '\n' ) );
generator.current.teardownStatements.push( local.teardown.join( '\n' ) );
if ( local.update.length ) generator.current.builders.update.addBlock( local.update.join( '\n' ) );
if ( local.mount.length ) generator.current.builders.mount.addBlock( local.mount.join( '\n' ) );
if ( local.detach.length ) generator.current.builders.detach.addBlock( local.detach.join( '\n' ) );
generator.current.builders.teardown.addBlock( local.teardown.join( '\n' ) );
generator.push({
namespace: local.namespace,

@ -40,13 +40,13 @@ export default {
}
if ( isToplevel ) {
generator.current.mountStatements.push( deindent`
generator.current.builders.mount.addBlock( deindent`
for ( var ${i} = 0; ${i} < ${iterations}.length; ${i} += 1 ) {
${iterations}[${i}].mount( ${anchor}.parentNode, ${anchor} );
}
` );
if ( node.else ) {
generator.current.mountStatements.push( deindent`
generator.current.builders.mount.addBlock( deindent`
if ( ${elseName} ) {
${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};
for ( var ${i} = 0; ${i} < ${name}_value.length; ${i} += 1 ) {
@ -74,7 +74,7 @@ export default {
` );
if ( node.else ) {
generator.current.updateStatements.push( deindent`
generator.current.builders.update.addBlock( deindent`
if ( !${name}_value.length && ${elseName} ) {
${elseName}.update( changed, ${params} );
} 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 ) {
${iterations}[${i}].teardown( ${isToplevel ? 'detach' : 'false'} );
}
` );
if ( node.else ) {
generator.current.teardownStatements.push( deindent`
generator.current.builders.teardown.addBlock( deindent`
if ( ${elseName} ) {
${elseName}.teardown( ${isToplevel ? 'detach' : 'false'} );
}
@ -136,19 +136,18 @@ export default {
listNames,
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(),
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 ) {

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

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

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

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

@ -1,7 +1,13 @@
export default {
enter ( generator ) {
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 );`);
const anchor = generator.createAnchor( 'yield', 'yield' );
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;
}
isEmpty () {
return this.result === '';
}
toString () {
return this.result.trim();
}

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

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

Loading…
Cancel
Save