|
|
|
@ -15,28 +15,34 @@ export default function generate ( parsed, source, options ) {
|
|
|
|
|
|
|
|
|
|
const generator = {
|
|
|
|
|
addElement ( name, renderStatement, needsIdentifier = false ) {
|
|
|
|
|
const needsTeardown = generator.current.localElementDepth === 0;
|
|
|
|
|
if ( needsIdentifier || needsTeardown ) {
|
|
|
|
|
const isToplevel = generator.current.localElementDepth === 0;
|
|
|
|
|
if ( needsIdentifier || isToplevel ) {
|
|
|
|
|
generator.current.initStatements.push( deindent`
|
|
|
|
|
var ${name} = ${renderStatement};
|
|
|
|
|
${generator.appendToTarget( name )};
|
|
|
|
|
` );
|
|
|
|
|
generator.createMountStatement( name );
|
|
|
|
|
} else {
|
|
|
|
|
generator.current.initStatements.push( deindent`
|
|
|
|
|
${generator.current.target}.appendChild( ${renderStatement} );
|
|
|
|
|
` );
|
|
|
|
|
}
|
|
|
|
|
if ( needsTeardown ) {
|
|
|
|
|
if ( isToplevel ) {
|
|
|
|
|
generator.current.teardownStatements.push( deindent`
|
|
|
|
|
if ( detach ) ${name}.parentNode.removeChild( ${name} );
|
|
|
|
|
` );
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
appendToTarget ( name ) {
|
|
|
|
|
if ( generator.current.useAnchor && generator.current.target === 'target' ) {
|
|
|
|
|
return `anchor.parentNode.insertBefore( ${name}, anchor )`;
|
|
|
|
|
|
|
|
|
|
createMountStatement ( name ) {
|
|
|
|
|
if ( generator.current.target === 'target' ) {
|
|
|
|
|
generator.current.mountStatements.push( deindent`
|
|
|
|
|
target.insertBefore( ${name}, anchor );
|
|
|
|
|
` );
|
|
|
|
|
} else {
|
|
|
|
|
generator.current.initStatements.push( deindent`
|
|
|
|
|
${generator.current.target}.appendChild( ${name} );
|
|
|
|
|
` );
|
|
|
|
|
}
|
|
|
|
|
return `${generator.current.target}.appendChild( ${name} )`;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
addRenderer ( fragment ) {
|
|
|
|
@ -45,10 +51,17 @@ export default function generate ( parsed, source, options ) {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
renderers.push( deindent`
|
|
|
|
|
function ${fragment.name} ( ${fragment.params}, component, target${fragment.useAnchor ? ', anchor' : ''} ) {
|
|
|
|
|
function ${fragment.name} ( ${fragment.params}, component ) {
|
|
|
|
|
var target, anchor;
|
|
|
|
|
${fragment.initStatements.join( '\n\n' )}
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
mount: function ( _target, _anchor ) {
|
|
|
|
|
target = _target;
|
|
|
|
|
anchor = _anchor;
|
|
|
|
|
${fragment.mountStatements.join( '\n\n' )}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
update: function ( changed, ${fragment.params} ) {
|
|
|
|
|
${fragment.updateStatements.join( '\n\n' )}
|
|
|
|
|
},
|
|
|
|
@ -236,6 +249,7 @@ export default function generate ( parsed, source, options ) {
|
|
|
|
|
localElementDepth: 0,
|
|
|
|
|
|
|
|
|
|
initStatements: [],
|
|
|
|
|
mountStatements: [],
|
|
|
|
|
updateStatements: [],
|
|
|
|
|
teardownStatements: [],
|
|
|
|
|
|
|
|
|
@ -364,13 +378,17 @@ export default function generate ( parsed, source, options ) {
|
|
|
|
|
if ( generator.hasComplexBindings ) {
|
|
|
|
|
initStatements.push( deindent`
|
|
|
|
|
this.__bindings = [];
|
|
|
|
|
var mainFragment = renderMainFragment( state, this, options.target );
|
|
|
|
|
var mainFragment = renderMainFragment( state, this );
|
|
|
|
|
if ( options.target ) this.mount( options.target );
|
|
|
|
|
while ( this.__bindings.length ) this.__bindings.pop()();
|
|
|
|
|
` );
|
|
|
|
|
|
|
|
|
|
setStatements.push( `while ( this.__bindings.length ) this.__bindings.pop()();` );
|
|
|
|
|
} else {
|
|
|
|
|
initStatements.push( `var mainFragment = renderMainFragment( state, this, options.target );` );
|
|
|
|
|
initStatements.push( deindent`
|
|
|
|
|
var mainFragment = renderMainFragment( state, this );
|
|
|
|
|
if ( options.target ) this.mount( options.target );
|
|
|
|
|
` );
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if ( generator.hasComponents ) {
|
|
|
|
@ -449,6 +467,10 @@ export default function generate ( parsed, source, options ) {
|
|
|
|
|
${setStatements.join( '\n\n' )}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
this.mount = function mount ( target, anchor ) {
|
|
|
|
|
mainFragment.mount( target, anchor );
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.observe = function ( key, callback, options ) {
|
|
|
|
|
var group = ( options && options.defer ) ? observers.deferred : observers.immediate;
|
|
|
|
|
|
|
|
|
|