|
|
|
@ -1,216 +1,70 @@
|
|
|
|
|
import deindent from '../utils/deindent.js';
|
|
|
|
|
import attributeLookup from '../attributes/lookup.js';
|
|
|
|
|
import createBinding from '../binding/index.js';
|
|
|
|
|
import addComponentAttributes from './attributes/addComponentAttributes.js';
|
|
|
|
|
import addElementAttributes from './attributes/addElementAttributes.js';
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
enter ( generator, 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 isComponent = node.name in generator.components;
|
|
|
|
|
const name = generator.current.counter( isComponent ? `${node.name[0].toLowerCase()}${node.name.slice( 1 )}` : node.name );
|
|
|
|
|
|
|
|
|
|
const usedContexts = new Set();
|
|
|
|
|
attribute.expression.arguments.forEach( arg => {
|
|
|
|
|
const contexts = generator.contextualise( arg, true );
|
|
|
|
|
const local = {
|
|
|
|
|
name,
|
|
|
|
|
namespace: name === 'svg' ? 'http://www.w3.org/2000/svg' : generator.current.namespace,
|
|
|
|
|
allUsedContexts: new Set(),
|
|
|
|
|
|
|
|
|
|
contexts.forEach( context => {
|
|
|
|
|
usedContexts.add( context );
|
|
|
|
|
allUsedContexts.add( context );
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
init: [],
|
|
|
|
|
update: [],
|
|
|
|
|
teardown: []
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// TODO hoist event handlers? can do `this.__component.method(...)`
|
|
|
|
|
const declarations = [...usedContexts].map( name => {
|
|
|
|
|
if ( name === 'root' ) return 'var root = this.__svelte.root;';
|
|
|
|
|
if ( isComponent ) {
|
|
|
|
|
addComponentAttributes( generator, node, local );
|
|
|
|
|
|
|
|
|
|
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}]`;
|
|
|
|
|
local.init.unshift( deindent`
|
|
|
|
|
var ${name} = new template.components.${node.name}({
|
|
|
|
|
target: ${generator.current.target}
|
|
|
|
|
});
|
|
|
|
|
` );
|
|
|
|
|
|
|
|
|
|
const handlerName = generator.current.counter( `${attribute.name}Handler` );
|
|
|
|
|
const handlerBody = ( declarations.length ? declarations.join( '\n' ) + '\n\n' : '' ) + `[✂${attribute.expression.start}-${attribute.expression.end}✂];`;
|
|
|
|
|
|
|
|
|
|
if ( attribute.name in generator.events ) {
|
|
|
|
|
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 );
|
|
|
|
|
}
|
|
|
|
|
local.teardown.push( `${name}.teardown();` );
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
else if ( attribute.type === 'Ref' ) {
|
|
|
|
|
generator.usesRefs = true;
|
|
|
|
|
else {
|
|
|
|
|
addElementAttributes( generator, node, local );
|
|
|
|
|
|
|
|
|
|
initStatements.push( deindent`
|
|
|
|
|
component.refs.${attribute.name} = ${name};
|
|
|
|
|
if ( local.allUsedContexts.size ) {
|
|
|
|
|
local.init.push( deindent`
|
|
|
|
|
${name}.__svelte = {};
|
|
|
|
|
` );
|
|
|
|
|
|
|
|
|
|
teardownStatements.push( deindent`
|
|
|
|
|
component.refs.${attribute.name} = null;
|
|
|
|
|
` );
|
|
|
|
|
}
|
|
|
|
|
const declarations = [...local.allUsedContexts].map( contextName => {
|
|
|
|
|
if ( contextName === 'root' ) return `${name}.__svelte.root = root;`;
|
|
|
|
|
|
|
|
|
|
else {
|
|
|
|
|
throw new Error( `Not implemented: ${attribute.type}` );
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if ( allUsedContexts.size ) {
|
|
|
|
|
initStatements.push( deindent`
|
|
|
|
|
${name}.__svelte = {};
|
|
|
|
|
` );
|
|
|
|
|
const listName = generator.current.listNames[ contextName ];
|
|
|
|
|
const indexName = generator.current.indexNames[ contextName ];
|
|
|
|
|
|
|
|
|
|
const declarations = [...allUsedContexts].map( contextName => {
|
|
|
|
|
if ( contextName === 'root' ) return `${name}.__svelte.root = root;`;
|
|
|
|
|
return `${name}.__svelte.${listName} = ${listName};\n${name}.__svelte.${indexName} = ${indexName};`;
|
|
|
|
|
}).join( '\n' );
|
|
|
|
|
|
|
|
|
|
const listName = generator.current.listNames[ contextName ];
|
|
|
|
|
const indexName = generator.current.indexNames[ contextName ];
|
|
|
|
|
local.update.push( declarations );
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return `${name}.__svelte.${listName} = ${listName};\n${name}.__svelte.${indexName} = ${indexName};`;
|
|
|
|
|
}).join( '\n' );
|
|
|
|
|
local.init.unshift(
|
|
|
|
|
local.namespace ?
|
|
|
|
|
`var ${name} = document.createElementNS( '${local.namespace}', '${node.name}' );` :
|
|
|
|
|
`var ${name} = document.createElement( '${node.name}' );`
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
updateStatements.push( declarations );
|
|
|
|
|
local.teardown.push( `${name}.parentNode.removeChild( ${name} );` );
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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.initStatements.push( local.init.join( '\n' ) );
|
|
|
|
|
if ( local.update.length ) generator.current.updateStatements.push( local.update.join( '\n' ) );
|
|
|
|
|
generator.current.teardownStatements.push( local.teardown.join( '\n' ) );
|
|
|
|
|
|
|
|
|
|
generator.current = Object.assign( {}, generator.current, {
|
|
|
|
|
namespace,
|
|
|
|
|
isComponent,
|
|
|
|
|
namespace: local.namespace,
|
|
|
|
|
target: name,
|
|
|
|
|
parent: generator.current
|
|
|
|
|
});
|
|
|
|
@ -218,9 +72,12 @@ export default {
|
|
|
|
|
|
|
|
|
|
leave ( generator ) {
|
|
|
|
|
const name = generator.current.target;
|
|
|
|
|
const isComponent = generator.current.isComponent;
|
|
|
|
|
|
|
|
|
|
generator.current = generator.current.parent;
|
|
|
|
|
|
|
|
|
|
if ( isComponent ) return;
|
|
|
|
|
|
|
|
|
|
if ( generator.current.useAnchor && generator.current.target === 'target' ) {
|
|
|
|
|
generator.current.initStatements.push( deindent`
|
|
|
|
|
anchor.parentNode.insertBefore( ${name}, anchor );
|
|
|
|
|