|
|
@ -1,19 +1,23 @@
|
|
|
|
import MagicString from 'magic-string';
|
|
|
|
import MagicString from 'magic-string';
|
|
|
|
import { walk } from 'estree-walker';
|
|
|
|
import { walk } from 'estree-walker';
|
|
|
|
import deindent from './utils/deindent.js';
|
|
|
|
import deindent from './utils/deindent.js';
|
|
|
|
import walkHtml from './utils/walkHtml.js';
|
|
|
|
|
|
|
|
import isReference from './utils/isReference.js';
|
|
|
|
import isReference from './utils/isReference.js';
|
|
|
|
import counter from './utils/counter.js';
|
|
|
|
import counter from './utils/counter.js';
|
|
|
|
import attributeLookup from './attributes/lookup.js';
|
|
|
|
|
|
|
|
import createBinding from './binding/index.js';
|
|
|
|
|
|
|
|
import flattenReference from './utils/flattenReference.js';
|
|
|
|
import flattenReference from './utils/flattenReference.js';
|
|
|
|
|
|
|
|
import visitors from './visitors/index.js';
|
|
|
|
|
|
|
|
|
|
|
|
function createRenderer ( fragment ) {
|
|
|
|
export default function generate ( parsed, template, options = {} ) {
|
|
|
|
|
|
|
|
const renderers = [];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const generator = {
|
|
|
|
|
|
|
|
code: new MagicString( template ),
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
addRenderer ( fragment ) {
|
|
|
|
if ( fragment.autofocus ) {
|
|
|
|
if ( fragment.autofocus ) {
|
|
|
|
fragment.initStatements.push( `${fragment.autofocus}.focus();` );
|
|
|
|
fragment.initStatements.push( `${fragment.autofocus}.focus();` );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
return deindent`
|
|
|
|
renderers.push( deindent`
|
|
|
|
function ${fragment.name} ( component, target${fragment.useAnchor ? ', anchor' : ''} ) {
|
|
|
|
function ${fragment.name} ( component, target${fragment.useAnchor ? ', anchor' : ''} ) {
|
|
|
|
${fragment.initStatements.join( '\n\n' )}
|
|
|
|
${fragment.initStatements.join( '\n\n' )}
|
|
|
|
|
|
|
|
|
|
|
@ -27,12 +31,8 @@ function createRenderer ( fragment ) {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
` );
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
export default function generate ( parsed, template, options = {} ) {
|
|
|
|
|
|
|
|
const generator = {
|
|
|
|
|
|
|
|
code: new MagicString( template ),
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
addSourcemapLocations ( node ) {
|
|
|
|
addSourcemapLocations ( node ) {
|
|
|
|
walk( node, {
|
|
|
|
walk( node, {
|
|
|
@ -55,7 +55,7 @@ export default function generate ( parsed, template, options = {} ) {
|
|
|
|
const { name } = flattenReference( node );
|
|
|
|
const { name } = flattenReference( node );
|
|
|
|
|
|
|
|
|
|
|
|
if ( parent && parent.type === 'CallExpression' && node === parent.callee ) {
|
|
|
|
if ( parent && parent.type === 'CallExpression' && node === parent.callee ) {
|
|
|
|
if ( helpers[ name ] ) generator.code.insertRight( node.start, `template.helpers.` );
|
|
|
|
if ( generator.helpers[ name ] ) generator.code.insertRight( node.start, `template.helpers.` );
|
|
|
|
return;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
@ -81,7 +81,8 @@ export default function generate ( parsed, template, options = {} ) {
|
|
|
|
return usedContexts;
|
|
|
|
return usedContexts;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
renderers: [],
|
|
|
|
helpers: {},
|
|
|
|
|
|
|
|
events: {},
|
|
|
|
|
|
|
|
|
|
|
|
getName: counter(),
|
|
|
|
getName: counter(),
|
|
|
|
|
|
|
|
|
|
|
@ -91,12 +92,12 @@ export default function generate ( parsed, template, options = {} ) {
|
|
|
|
each: 0
|
|
|
|
each: 0
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
usesRefs: false
|
|
|
|
usesRefs: false,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
template
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const templateProperties = {};
|
|
|
|
const templateProperties = {};
|
|
|
|
const helpers = {};
|
|
|
|
|
|
|
|
const components = {};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if ( parsed.js ) {
|
|
|
|
if ( parsed.js ) {
|
|
|
|
generator.addSourcemapLocations( parsed.js.content );
|
|
|
|
generator.addSourcemapLocations( parsed.js.content );
|
|
|
@ -111,11 +112,13 @@ export default function generate ( parsed, template, options = {} ) {
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if ( templateProperties.helpers ) {
|
|
|
|
[ 'helpers', 'events' ].forEach( key => {
|
|
|
|
templateProperties.helpers.properties.forEach( prop => {
|
|
|
|
if ( templateProperties[ key ] ) {
|
|
|
|
helpers[ prop.key.name ] = prop.value;
|
|
|
|
templateProperties[ key ].properties.forEach( prop => {
|
|
|
|
|
|
|
|
generator[ key ][ prop.key.name ] = prop.value;
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
generator.current = {
|
|
|
|
generator.current = {
|
|
|
@ -140,470 +143,22 @@ export default function generate ( parsed, template, options = {} ) {
|
|
|
|
parent: null
|
|
|
|
parent: null
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
parsed.html.children.forEach( child => {
|
|
|
|
parsed.html.children.forEach( function visit ( node ) {
|
|
|
|
walkHtml( child, {
|
|
|
|
const visitor = visitors[ node.type ];
|
|
|
|
Comment: {
|
|
|
|
if ( !visitor ) throw new Error( `Not implemented: ${node.type}` );
|
|
|
|
// do nothing
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Element: {
|
|
|
|
|
|
|
|
enter ( node ) {
|
|
|
|
|
|
|
|
const name = generator.current.counter( node.name );
|
|
|
|
|
|
|
|
let namespace = name === 'svg' ? 'http://www.w3.org/2000/svg' : generator.current.namespace;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const initStatements = [];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const updateStatements = [];
|
|
|
|
|
|
|
|
const teardownStatements = [];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const allUsedContexts = new Set();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
node.attributes.forEach( attribute => {
|
|
|
|
|
|
|
|
if ( attribute.type === 'Attribute' ) {
|
|
|
|
|
|
|
|
let metadata = attributeLookup[ attribute.name ];
|
|
|
|
|
|
|
|
if ( metadata && metadata.appliesTo && !~metadata.appliesTo.indexOf( node.name ) ) metadata = null;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if ( attribute.value === true ) {
|
|
|
|
|
|
|
|
// attributes without values, e.g. <textarea readonly>
|
|
|
|
|
|
|
|
if ( metadata ) {
|
|
|
|
|
|
|
|
initStatements.push( deindent`
|
|
|
|
|
|
|
|
${name}.${metadata.propertyName} = true;
|
|
|
|
|
|
|
|
` );
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
initStatements.push( deindent`
|
|
|
|
|
|
|
|
${name}.setAttribute( '${attribute.name}', true );
|
|
|
|
|
|
|
|
` );
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// special case – autofocus. has to be handled in a bit of a weird way
|
|
|
|
|
|
|
|
if ( attribute.name === 'autofocus' ) {
|
|
|
|
|
|
|
|
generator.current.autofocus = name;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
else if ( attribute.value.length === 1 ) {
|
|
|
|
|
|
|
|
const value = attribute.value[0];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let result = '';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if ( value.type === 'Text' ) {
|
|
|
|
|
|
|
|
// static attributes
|
|
|
|
|
|
|
|
result = JSON.stringify( value.data );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if ( metadata ) {
|
|
|
|
|
|
|
|
initStatements.push( deindent`
|
|
|
|
|
|
|
|
${name}.${metadata.propertyName} = ${result};
|
|
|
|
|
|
|
|
` );
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
initStatements.push( deindent`
|
|
|
|
|
|
|
|
${name}.setAttribute( '${attribute.name}', ${result} );
|
|
|
|
|
|
|
|
` );
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// special case
|
|
|
|
|
|
|
|
// TODO this attribute must be static – enforce at compile time
|
|
|
|
|
|
|
|
if ( attribute.name === 'xmlns' ) {
|
|
|
|
|
|
|
|
namespace = value;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
else {
|
|
|
|
|
|
|
|
// dynamic – but potentially non-string – attributes
|
|
|
|
|
|
|
|
generator.contextualise( value.expression );
|
|
|
|
|
|
|
|
result = `[✂${value.expression.start}-${value.expression.end}✂]`;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if ( metadata ) {
|
|
|
|
|
|
|
|
updateStatements.push( deindent`
|
|
|
|
|
|
|
|
${name}.${metadata.propertyName} = ${result};
|
|
|
|
|
|
|
|
` );
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
updateStatements.push( deindent`
|
|
|
|
|
|
|
|
${name}.setAttribute( '${attribute.name}', ${result} );
|
|
|
|
|
|
|
|
` );
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
else {
|
|
|
|
|
|
|
|
const value = ( attribute.value[0].type === 'Text' ? '' : `"" + ` ) + (
|
|
|
|
|
|
|
|
attribute.value.map( chunk => {
|
|
|
|
|
|
|
|
if ( chunk.type === 'Text' ) {
|
|
|
|
|
|
|
|
return JSON.stringify( chunk.data );
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
generator.addSourcemapLocations( chunk.expression );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
generator.contextualise( chunk.expression );
|
|
|
|
|
|
|
|
return `( [✂${chunk.expression.start}-${chunk.expression.end}✂] )`;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}).join( ' + ' )
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if ( metadata ) {
|
|
|
|
|
|
|
|
updateStatements.push( deindent`
|
|
|
|
|
|
|
|
${name}.${metadata.propertyName} = ${value};
|
|
|
|
|
|
|
|
` );
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
updateStatements.push( deindent`
|
|
|
|
|
|
|
|
${name}.setAttribute( '${attribute.name}', ${value} );
|
|
|
|
|
|
|
|
` );
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
else if ( attribute.type === 'EventHandler' ) {
|
|
|
|
|
|
|
|
// TODO verify that it's a valid callee (i.e. built-in or declared method)
|
|
|
|
|
|
|
|
generator.addSourcemapLocations( attribute.expression );
|
|
|
|
|
|
|
|
generator.code.insertRight( attribute.expression.start, 'component.' );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const usedContexts = new Set();
|
|
|
|
|
|
|
|
attribute.expression.arguments.forEach( arg => {
|
|
|
|
|
|
|
|
const contexts = generator.contextualise( arg, true );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
contexts.forEach( context => {
|
|
|
|
|
|
|
|
usedContexts.add( context );
|
|
|
|
|
|
|
|
allUsedContexts.add( context );
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// TODO hoist event handlers? can do `this.__component.method(...)`
|
|
|
|
|
|
|
|
const declarations = [...usedContexts].map( name => {
|
|
|
|
|
|
|
|
if ( name === 'root' ) return 'var root = this.__svelte.root;';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const listName = generator.current.listNames[ name ];
|
|
|
|
|
|
|
|
const indexName = generator.current.indexNames[ name ];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return `var ${listName} = this.__svelte.${listName}, ${indexName} = this.__svelte.${indexName}, ${name} = ${listName}[${indexName}]`;
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handlerName = generator.current.counter( `${attribute.name}Handler` );
|
|
|
|
|
|
|
|
const handlerBody = ( declarations.length ? declarations.join( '\n' ) + '\n\n' : '' ) + `[✂${attribute.expression.start}-${attribute.expression.end}✂];`;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const customEvent = templateProperties.events && templateProperties.events.properties.find( prop => prop.key.name === attribute.name );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if ( customEvent ) {
|
|
|
|
|
|
|
|
initStatements.push( deindent`
|
|
|
|
|
|
|
|
const ${handlerName} = template.events.${attribute.name}( ${name}, function ( event ) {
|
|
|
|
|
|
|
|
${handlerBody}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
` );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
teardownStatements.push( deindent`
|
|
|
|
|
|
|
|
${handlerName}.teardown();
|
|
|
|
|
|
|
|
` );
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
initStatements.push( deindent`
|
|
|
|
|
|
|
|
function ${handlerName} ( event ) {
|
|
|
|
|
|
|
|
${handlerBody}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
${name}.addEventListener( '${attribute.name}', ${handlerName}, false );
|
|
|
|
|
|
|
|
` );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
teardownStatements.push( deindent`
|
|
|
|
|
|
|
|
${name}.removeEventListener( '${attribute.name}', ${handlerName}, false );
|
|
|
|
|
|
|
|
` );
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
else if ( attribute.type === 'Binding' ) {
|
|
|
|
|
|
|
|
createBinding( node, name, attribute, generator.current, initStatements, updateStatements, teardownStatements, allUsedContexts );
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
else if ( attribute.type === 'Ref' ) {
|
|
|
|
|
|
|
|
generator.usesRefs = true;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
initStatements.push( deindent`
|
|
|
|
|
|
|
|
component.refs.${attribute.name} = ${name};
|
|
|
|
|
|
|
|
` );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
teardownStatements.push( deindent`
|
|
|
|
|
|
|
|
component.refs.${attribute.name} = null;
|
|
|
|
|
|
|
|
` );
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
else {
|
|
|
|
|
|
|
|
throw new Error( `Not implemented: ${attribute.type}` );
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if ( allUsedContexts.size ) {
|
|
|
|
|
|
|
|
initStatements.push( deindent`
|
|
|
|
|
|
|
|
${name}.__svelte = {};
|
|
|
|
|
|
|
|
` );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const declarations = [...allUsedContexts].map( contextName => {
|
|
|
|
|
|
|
|
if ( contextName === 'root' ) return `${name}.__svelte.root = root;`;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const listName = generator.current.listNames[ contextName ];
|
|
|
|
|
|
|
|
const indexName = generator.current.indexNames[ contextName ];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return `${name}.__svelte.${listName} = ${listName};\n${name}.__svelte.${indexName} = ${indexName};`;
|
|
|
|
|
|
|
|
}).join( '\n' );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
updateStatements.push( declarations );
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
initStatements.unshift(
|
|
|
|
|
|
|
|
namespace ?
|
|
|
|
|
|
|
|
`var ${name} = document.createElementNS( '${namespace}', '${node.name}' );` :
|
|
|
|
|
|
|
|
`var ${name} = document.createElement( '${node.name}' );`
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
teardownStatements.push( `${name}.parentNode.removeChild( ${name} );` );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
generator.current.initStatements.push( initStatements.join( '\n' ) );
|
|
|
|
|
|
|
|
if ( updateStatements.length ) generator.current.updateStatements.push( updateStatements.join( '\n' ) );
|
|
|
|
|
|
|
|
generator.current.teardownStatements.push( teardownStatements.join( '\n' ) );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
generator.current = Object.assign( {}, generator.current, {
|
|
|
|
|
|
|
|
namespace,
|
|
|
|
|
|
|
|
target: name,
|
|
|
|
|
|
|
|
parent: generator.current
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
leave () {
|
|
|
|
|
|
|
|
const name = generator.current.target;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
generator.current = generator.current.parent;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if ( generator.current.useAnchor && generator.current.target === 'target' ) {
|
|
|
|
|
|
|
|
generator.current.initStatements.push( deindent`
|
|
|
|
|
|
|
|
anchor.parentNode.insertBefore( ${name}, anchor );
|
|
|
|
|
|
|
|
` );
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
generator.current.initStatements.push( deindent`
|
|
|
|
|
|
|
|
${generator.current.target}.appendChild( ${name} );
|
|
|
|
|
|
|
|
` );
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Text: {
|
|
|
|
|
|
|
|
enter ( node ) {
|
|
|
|
|
|
|
|
generator.current.initStatements.push( deindent`
|
|
|
|
|
|
|
|
${generator.current.target}.appendChild( document.createTextNode( ${JSON.stringify( node.data )} ) );
|
|
|
|
|
|
|
|
` );
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
MustacheTag: {
|
|
|
|
|
|
|
|
enter ( node ) {
|
|
|
|
|
|
|
|
const name = generator.current.counter( 'text' );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
generator.current.initStatements.push( deindent`
|
|
|
|
|
|
|
|
var ${name} = document.createTextNode( '' );
|
|
|
|
|
|
|
|
var ${name}_value = '';
|
|
|
|
|
|
|
|
${generator.current.target}.appendChild( ${name} );
|
|
|
|
|
|
|
|
` );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
generator.addSourcemapLocations( node.expression );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const usedContexts = generator.contextualise( node.expression );
|
|
|
|
|
|
|
|
const snippet = `[✂${node.expression.start}-${node.expression.end}✂]`;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if ( isReference( node.expression ) ) {
|
|
|
|
|
|
|
|
const reference = `${template.slice( node.expression.start, node.expression.end )}`;
|
|
|
|
|
|
|
|
const qualified = usedContexts[0] === 'root' ? `root.${reference}` : reference;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
generator.current.updateStatements.push( deindent`
|
|
|
|
|
|
|
|
if ( ${snippet} !== ${name}_value ) {
|
|
|
|
|
|
|
|
${name}_value = ${qualified};
|
|
|
|
|
|
|
|
${name}.data = ${name}_value;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
` );
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
const temp = generator.getName( 'temp' );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
generator.current.updateStatements.push( deindent`
|
|
|
|
|
|
|
|
var ${temp} = ${snippet};
|
|
|
|
|
|
|
|
if ( ${temp} !== ${name}_value ) {
|
|
|
|
|
|
|
|
${name}_value = ${temp};
|
|
|
|
|
|
|
|
${name}.data = ${name}_value;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
` );
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
IfBlock: {
|
|
|
|
|
|
|
|
enter ( node ) {
|
|
|
|
|
|
|
|
const i = generator.counters.if++;
|
|
|
|
|
|
|
|
const name = `ifBlock_${i}`;
|
|
|
|
|
|
|
|
const renderer = `renderIfBlock_${i}`;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
generator.current.initStatements.push( deindent`
|
|
|
|
|
|
|
|
var ${name}_anchor = document.createComment( ${JSON.stringify( `#if ${template.slice( node.expression.start, node.expression.end )}` )} );
|
|
|
|
|
|
|
|
${generator.current.target}.appendChild( ${name}_anchor );
|
|
|
|
|
|
|
|
var ${name} = null;
|
|
|
|
|
|
|
|
` );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
generator.addSourcemapLocations( node.expression );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const usedContexts = generator.contextualise( node.expression );
|
|
|
|
|
|
|
|
const snippet = `[✂${node.expression.start}-${node.expression.end}✂]`;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let expression;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if ( isReference( node.expression ) ) {
|
|
|
|
|
|
|
|
const reference = `${template.slice( node.expression.start, node.expression.end )}`;
|
|
|
|
|
|
|
|
expression = usedContexts[0] === 'root' ? `root.${reference}` : reference;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
generator.current.updateStatements.push( deindent`
|
|
|
|
|
|
|
|
if ( ${snippet} && !${name} ) {
|
|
|
|
|
|
|
|
${name} = ${renderer}( component, ${generator.current.target}, ${name}_anchor );
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
` );
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
expression = `${name}_value`;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
generator.current.updateStatements.push( deindent`
|
|
|
|
|
|
|
|
var ${expression} = ${snippet};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if ( ${expression} && !${name} ) {
|
|
|
|
|
|
|
|
${name} = ${renderer}( component, ${generator.current.target}, ${name}_anchor );
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
` );
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
generator.current.updateStatements.push( deindent`
|
|
|
|
|
|
|
|
else if ( !${expression} && ${name} ) {
|
|
|
|
|
|
|
|
${name}.teardown();
|
|
|
|
|
|
|
|
${name} = null;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if ( ${name} ) {
|
|
|
|
|
|
|
|
${name}.update( ${generator.current.contextChain.join( ', ' )} );
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
` );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
generator.current.teardownStatements.push( deindent`
|
|
|
|
|
|
|
|
if ( ${name} ) ${name}.teardown();
|
|
|
|
|
|
|
|
${name}_anchor.parentNode.removeChild( ${name}_anchor );
|
|
|
|
|
|
|
|
` );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
generator.current = Object.assign( {}, generator.current, {
|
|
|
|
|
|
|
|
useAnchor: true,
|
|
|
|
|
|
|
|
name: renderer,
|
|
|
|
|
|
|
|
target: 'target',
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
initStatements: [],
|
|
|
|
if ( visitor.enter ) visitor.enter( generator, node );
|
|
|
|
updateStatements: [],
|
|
|
|
|
|
|
|
teardownStatements: [],
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
counter: counter(),
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
parent: generator.current
|
|
|
|
if ( node.children ) {
|
|
|
|
|
|
|
|
node.children.forEach( child => {
|
|
|
|
|
|
|
|
visit( child );
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
leave () {
|
|
|
|
|
|
|
|
generator.renderers.push( createRenderer( generator.current ) );
|
|
|
|
|
|
|
|
generator.current = generator.current.parent;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
EachBlock: {
|
|
|
|
|
|
|
|
enter ( node ) {
|
|
|
|
|
|
|
|
const i = generator.counters.each++;
|
|
|
|
|
|
|
|
const name = `eachBlock_${i}`;
|
|
|
|
|
|
|
|
const renderer = `renderEachBlock_${i}`;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const listName = `${name}_value`;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
generator.current.initStatements.push( deindent`
|
|
|
|
|
|
|
|
var ${name}_anchor = document.createComment( ${JSON.stringify( `#each ${template.slice( node.expression.start, node.expression.end )}` )} );
|
|
|
|
|
|
|
|
${generator.current.target}.appendChild( ${name}_anchor );
|
|
|
|
|
|
|
|
var ${name}_iterations = [];
|
|
|
|
|
|
|
|
const ${name}_fragment = document.createDocumentFragment();
|
|
|
|
|
|
|
|
` );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
generator.addSourcemapLocations( node.expression );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
generator.contextualise( node.expression );
|
|
|
|
|
|
|
|
const snippet = `[✂${node.expression.start}-${node.expression.end}✂]`;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
generator.current.updateStatements.push( deindent`
|
|
|
|
|
|
|
|
var ${name}_value = ${snippet};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
for ( var i = 0; i < ${name}_value.length; i += 1 ) {
|
|
|
|
|
|
|
|
if ( !${name}_iterations[i] ) {
|
|
|
|
|
|
|
|
${name}_iterations[i] = ${renderer}( component, ${name}_fragment );
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const iteration = ${name}_iterations[i];
|
|
|
|
|
|
|
|
${name}_iterations[i].update( ${generator.current.contextChain.join( ', ' )}, ${listName}, ${listName}[i], i );
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
for ( var i = ${name}_value.length; i < ${name}_iterations.length; i += 1 ) {
|
|
|
|
|
|
|
|
${name}_iterations[i].teardown();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
${name}_anchor.parentNode.insertBefore( ${name}_fragment, ${name}_anchor );
|
|
|
|
|
|
|
|
${name}_iterations.length = ${listName}.length;
|
|
|
|
|
|
|
|
` );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
generator.current.teardownStatements.push( deindent`
|
|
|
|
|
|
|
|
for ( let i = 0; i < ${name}_iterations.length; i += 1 ) {
|
|
|
|
|
|
|
|
${name}_iterations[i].teardown();
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
${name}_anchor.parentNode.removeChild( ${name}_anchor );
|
|
|
|
if ( visitor.leave ) visitor.leave( generator, node );
|
|
|
|
` );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const indexNames = Object.assign( {}, generator.current.indexNames );
|
|
|
|
|
|
|
|
const indexName = indexNames[ node.context ] = ( node.index || `${node.context}__index` );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const listNames = Object.assign( {}, generator.current.listNames );
|
|
|
|
|
|
|
|
listNames[ node.context ] = listName;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const contexts = Object.assign( {}, generator.current.contexts );
|
|
|
|
|
|
|
|
contexts[ node.context ] = true;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const indexes = Object.assign( {}, generator.current.indexes );
|
|
|
|
|
|
|
|
if ( node.index ) indexes[ indexName ] = node.context;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const contextChain = generator.current.contextChain.concat( listName, node.context, indexName );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
generator.current = {
|
|
|
|
|
|
|
|
useAnchor: false,
|
|
|
|
|
|
|
|
name: renderer,
|
|
|
|
|
|
|
|
target: 'target',
|
|
|
|
|
|
|
|
expression: node.expression,
|
|
|
|
|
|
|
|
context: node.context,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
contexts,
|
|
|
|
|
|
|
|
indexes,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
indexNames,
|
|
|
|
|
|
|
|
listNames,
|
|
|
|
|
|
|
|
contextChain,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
initStatements: [],
|
|
|
|
|
|
|
|
updateStatements: [ Object.keys( contexts ).map( contextName => {
|
|
|
|
|
|
|
|
const listName = listNames[ contextName ];
|
|
|
|
|
|
|
|
const indexName = indexNames[ contextName ];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return `var ${contextName} = ${listName}[${indexName}];`;
|
|
|
|
|
|
|
|
}).join( '\n' ) ],
|
|
|
|
|
|
|
|
teardownStatements: [],
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
counter: counter(),
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
parent: generator.current
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
leave () {
|
|
|
|
|
|
|
|
generator.renderers.push( createRenderer( generator.current ) );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
generator.current = generator.current.parent;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
generator.renderers.push( createRenderer( generator.current ) );
|
|
|
|
generator.addRenderer( generator.current );
|
|
|
|
|
|
|
|
|
|
|
|
const setStatements = [ deindent`
|
|
|
|
const setStatements = [ deindent`
|
|
|
|
const oldState = state;
|
|
|
|
const oldState = state;
|
|
|
@ -653,7 +208,7 @@ export default function generate ( parsed, template, options = {} ) {
|
|
|
|
const result = deindent`
|
|
|
|
const result = deindent`
|
|
|
|
${parsed.js ? `[✂${parsed.js.content.start}-${parsed.js.content.end}✂]` : ``}
|
|
|
|
${parsed.js ? `[✂${parsed.js.content.start}-${parsed.js.content.end}✂]` : ``}
|
|
|
|
|
|
|
|
|
|
|
|
${generator.renderers.reverse().join( '\n\n' )}
|
|
|
|
${renderers.reverse().join( '\n\n' )}
|
|
|
|
|
|
|
|
|
|
|
|
export default function ${constructorName} ( options ) {
|
|
|
|
export default function ${constructorName} ( options ) {
|
|
|
|
var component = this;${generator.usesRefs ? `\nthis.refs = {}` : ``}
|
|
|
|
var component = this;${generator.usesRefs ? `\nthis.refs = {}` : ``}
|
|
|
|