|
|
@ -1,9 +1,11 @@
|
|
|
|
import deindent from '../utils/deindent.js';
|
|
|
|
import deindent from '../utils/deindent.js';
|
|
|
|
import addComponentAttributes from './attributes/addComponentAttributes.js';
|
|
|
|
import addComponentAttributes from './attributes/addComponentAttributes.js';
|
|
|
|
import addElementAttributes from './attributes/addElementAttributes.js';
|
|
|
|
import addElementAttributes from './attributes/addElementAttributes.js';
|
|
|
|
|
|
|
|
import counter from '../utils/counter.js';
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
enter ( generator, node ) {
|
|
|
|
enter ( generator, node ) {
|
|
|
|
|
|
|
|
const hasChildren = node.children.length > 0;
|
|
|
|
const isComponent = node.name in generator.components;
|
|
|
|
const isComponent = node.name in generator.components;
|
|
|
|
const name = generator.current.counter( isComponent ? `${node.name[0].toLowerCase()}${node.name.slice( 1 )}` : node.name );
|
|
|
|
const name = generator.current.counter( isComponent ? `${node.name[0].toLowerCase()}${node.name.slice( 1 )}` : node.name );
|
|
|
|
|
|
|
|
|
|
|
@ -28,13 +30,49 @@ export default {
|
|
|
|
|
|
|
|
|
|
|
|
addComponentAttributes( generator, node, local );
|
|
|
|
addComponentAttributes( generator, node, local );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const componentInitProperties = [
|
|
|
|
|
|
|
|
`target: ${!isToplevel ? generator.current.target: 'null'}`,
|
|
|
|
|
|
|
|
'root: component.root || component'
|
|
|
|
|
|
|
|
];
|
|
|
|
|
|
|
|
// Component has children
|
|
|
|
|
|
|
|
if ( hasChildren ) {
|
|
|
|
|
|
|
|
const yieldName = `render${name}YieldFragment`;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// {{YIELD STUFF}}
|
|
|
|
|
|
|
|
generator.push({
|
|
|
|
|
|
|
|
useAnchor: true,
|
|
|
|
|
|
|
|
name: generator.current.counter(yieldName),
|
|
|
|
|
|
|
|
target: 'target',
|
|
|
|
|
|
|
|
localElementDepth: 0,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
initStatements: [],
|
|
|
|
|
|
|
|
mountStatements: [],
|
|
|
|
|
|
|
|
updateStatements: [],
|
|
|
|
|
|
|
|
teardownStatements: [],
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
counter: counter()
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
node.children.forEach( generator.visit );
|
|
|
|
|
|
|
|
generator.addRenderer( generator.current );
|
|
|
|
|
|
|
|
generator.pop();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Don't render children twice
|
|
|
|
|
|
|
|
node.children = [];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
generator.current.initStatements.push(`var ${name}_yieldFragment = ${yieldName}( root, component );`);
|
|
|
|
|
|
|
|
generator.current.updateStatements.push(`${name}_yieldFragment.update ( changed, root );`);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
componentInitProperties.push(`yield: ${name}_yieldFragment`);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const statements = [];
|
|
|
|
|
|
|
|
|
|
|
|
if ( local.staticAttributes.length || local.dynamicAttributes.length || local.bindings.length ) {
|
|
|
|
if ( local.staticAttributes.length || local.dynamicAttributes.length || local.bindings.length ) {
|
|
|
|
const initialProps = local.staticAttributes
|
|
|
|
const initialProps = local.staticAttributes
|
|
|
|
.concat( local.dynamicAttributes )
|
|
|
|
.concat( local.dynamicAttributes )
|
|
|
|
.map( attribute => `${attribute.name}: ${attribute.value}` );
|
|
|
|
.map( attribute => `${attribute.name}: ${attribute.value}` );
|
|
|
|
|
|
|
|
|
|
|
|
const statements = [];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if ( initialProps.length ) {
|
|
|
|
if ( initialProps.length ) {
|
|
|
|
statements.push( deindent`
|
|
|
|
statements.push( deindent`
|
|
|
|
var ${name}_initialData = {
|
|
|
|
var ${name}_initialData = {
|
|
|
@ -54,24 +92,17 @@ export default {
|
|
|
|
|
|
|
|
|
|
|
|
statements.push( bindings.join( '\n' ) );
|
|
|
|
statements.push( bindings.join( '\n' ) );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
componentInitProperties.push(`data: ${name}_initialData`);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
local.init.unshift( deindent`
|
|
|
|
local.init.unshift( deindent`
|
|
|
|
${statements.join( '\n\n' )}
|
|
|
|
${statements.join( '\n\n' )}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var ${name} = new template.components.${node.name}({
|
|
|
|
|
|
|
|
${componentInitProperties.join(',\n')}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
` );
|
|
|
|
|
|
|
|
|
|
|
|
var ${name} = new template.components.${node.name}({
|
|
|
|
|
|
|
|
target: ${!isToplevel ? generator.current.target: 'null'},
|
|
|
|
|
|
|
|
root: component.root || component,
|
|
|
|
|
|
|
|
data: ${name}_initialData
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
` );
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
local.init.unshift( deindent`
|
|
|
|
|
|
|
|
var ${name} = new template.components.${node.name}({
|
|
|
|
|
|
|
|
target: ${!isToplevel ? generator.current.target: 'null'},
|
|
|
|
|
|
|
|
root: component.root || component
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
` );
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if ( isToplevel ) {
|
|
|
|
if ( isToplevel ) {
|
|
|
|
local.mount.unshift( `${name}.mount( target, anchor );` );
|
|
|
|
local.mount.unshift( `${name}.mount( target, anchor );` );
|
|
|
|