mirrors/svelte
mirrors/svelte
0
0
Fork 0
mirror of https://github.com/sveltejs/svelte.git synced 2024-12-01 17:30:59 +01:00
Code Issues Releases Wiki Activity

simple component

Browse Source
This commit is contained in:
Rich-Harris 2016-11-21 15:06:35 -05:00
parent 5b397b781b
commit 49ac172bef
6 changed files with 360 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
compiler/generate/index.js
View File

@ -83,6 +83,7 @@ export default function generate ( parsed, template, options = {} ) {
helpers: {},
events: {},
components: {},
getName: counter(),
@ -112,7 +113,7 @@ export default function generate ( parsed, template, options = {} ) {
});
}
[ 'helpers', 'events' ].forEach( key => {
[ 'helpers', 'events', 'components' ].forEach( key => {
if ( templateProperties[ key ] ) {
templateProperties[ key ].properties.forEach( prop => {
generator[ key ][ prop.key.name ] = prop.value;

249
compiler/generate/visitors/Element.js
View File

@ -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 isComponent = node.name in generator.components;
const name = generator.current.counter( isComponent ? `${node.name[0].toLowerCase()}${node.name.slice( 1 )}` : node.name );
const initStatements = [];
const local = {
name,
namespace: name === 'svg' ? 'http://www.w3.org/2000/svg' : generator.current.namespace,
allUsedContexts: new Set(),
const updateStatements = [];
const teardownStatements = [];
init: [],
update: [],
teardown: []
};
const allUsedContexts = new Set();
if ( isComponent ) {
addComponentAttributes( generator, node, local );
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 );
});
local.init.unshift( deindent`
var ${name} = new template.components.${node.name}({
target: ${generator.current.target}
});
// 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}✂];`;
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 );
}
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 );
local.teardown.push( `${name}.teardown();` );
}
initStatements.unshift(
namespace ?
`var ${name} = document.createElementNS( '${namespace}', '${node.name}' );` :
`var ${name} = document.createElement( '${node.name}' );`
);
else {
addElementAttributes( generator, node, local );
teardownStatements.push( `${name}.parentNode.removeChild( ${name} );` );
if ( local.allUsedContexts.size ) {
local.init.push( deindent`
${name}.__svelte = {};
` );
generator.current.initStatements.push( initStatements.join( '\n' ) );
if ( updateStatements.length ) generator.current.updateStatements.push( updateStatements.join( '\n' ) );
generator.current.teardownStatements.push( teardownStatements.join( '\n' ) );
const declarations = [...local.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' );
local.update.push( declarations );
}
local.init.unshift(
local.namespace ?
`var ${name} = document.createElementNS( '${local.namespace}', '${node.name}' );` :
`var ${name} = document.createElement( '${node.name}' );`
);
local.teardown.push( `${name}.parentNode.removeChild( ${name} );` );
}
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 );

131
compiler/generate/visitors/attributes/addComponentAttributes.js Normal file
View File

@ -0,0 +1,131 @@
import deindent from '../../utils/deindent.js';
export default function addComponentAttributes ( generator, node, local ) {
node.attributes.forEach( attribute => {
if ( attribute.type === 'Attribute' ) {
if ( attribute.value === true ) {
// attributes without values, e.g. <textarea readonly>
local.init.push( deindent`
${local.name}.setAttribute( '${attribute.name}', true );
` );
}
else if ( attribute.value.length === 1 ) {
const value = attribute.value[0];
let result = '';
if ( value.type === 'Text' ) {
// static attributes
result = JSON.stringify( value.data );
local.init.push( deindent`
${local.name}.setAttribute( '${attribute.name}', ${result} );
` );
}
else {
// dynamic – but potentially non-string – attributes
generator.contextualise( value.expression );
result = `[✂${value.expression.start}-${value.expression.end}✂]`;
local.update.push( deindent`
${local.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( ' + ' )
);
local.update.push( deindent`
${local.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 );
local.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}✂];`;
if ( attribute.name in generator.events ) {
local.init.push( deindent`
const ${handlerName} = template.events.${attribute.name}( ${local.name}, function ( event ) {
${handlerBody}
});
` );
local.teardown.push( deindent`
${handlerName}.teardown();
` );
} else {
local.init.push( deindent`
function ${handlerName} ( event ) {
${handlerBody}
}
${local.name}.addEventListener( '${attribute.name}', ${handlerName}, false );
` );
local.teardown.push( deindent`
${local.name}.removeEventListener( '${attribute.name}', ${handlerName}, false );
` );
}
}
else if ( attribute.type === 'Binding' ) {
throw new Error( 'TODO component bindings' );
}
else if ( attribute.type === 'Ref' ) {
generator.usesRefs = true;
local.init.push( deindent`
component.refs.${attribute.name} = ${local.name};
` );
local.teardown.push( deindent`
component.refs.${attribute.name} = null;
` );
}
else {
throw new Error( `Not implemented: ${attribute.type}` );
}
});
}

171
compiler/generate/visitors/attributes/addElementAttributes.js Normal file
View File

@ -0,0 +1,171 @@
import attributeLookup from './lookup.js';
import createBinding from './binding/index.js';
import deindent from '../../utils/deindent.js';
export default function addElementAttributes ( generator, node, local ) {
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 ) {
local.init.push( deindent`
${local.name}.${metadata.propertyName} = true;
` );
} else {
local.init.push( deindent`
${local.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 = local.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 ) {
local.init.push( deindent`
${local.name}.${metadata.propertyName} = ${result};
` );
} else {
local.init.push( deindent`
${local.name}.setAttribute( '${attribute.name}', ${result} );
` );
}
// special case
// TODO this attribute must be static – enforce at compile time
if ( attribute.name === 'xmlns' ) {
local.namespace = value;
}
}
else {
// dynamic – but potentially non-string – attributes
generator.contextualise( value.expression );
result = `[✂${value.expression.start}-${value.expression.end}✂]`;
if ( metadata ) {
local.update.push( deindent`
${local.name}.${metadata.propertyName} = ${result};
` );
} else {
local.update.push( deindent`
${local.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 ) {
local.update.push( deindent`
${local.name}.${metadata.propertyName} = ${value};
` );
} else {
local.update.push( deindent`
${local.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 );
local.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}✂];`;
if ( attribute.name in generator.events ) {
local.init.push( deindent`
const ${handlerName} = template.events.${attribute.name}( ${local.name}, function ( event ) {
${handlerBody}
});
` );
local.teardown.push( deindent`
${handlerName}.teardown();
` );
} else {
local.init.push( deindent`
function ${handlerName} ( event ) {
${handlerBody}
}
${local.name}.addEventListener( '${attribute.name}', ${handlerName}, false );
` );
local.teardown.push( deindent`
${local.name}.removeEventListener( '${attribute.name}', ${handlerName}, false );
` );
}
}
else if ( attribute.type === 'Binding' ) {
createBinding( node, local.name, attribute, generator.current, local.init, local.update, local.teardown, local.allUsedContexts );
}
else if ( attribute.type === 'Ref' ) {
generator.usesRefs = true;
local.init.push( deindent`
component.refs.${attribute.name} = ${local.name};
` );
local.teardown.push( deindent`
component.refs.${attribute.name} = null;
` );
}
else {
throw new Error( `Not implemented: ${attribute.type}` );
}
});
}

6
compiler/generate/binding/index.js → compiler/generate/visitors/attributes/binding/index.js
View File

@ -1,6 +1,6 @@
import deindent from '../utils/deindent.js';
import isReference from '../utils/isReference.js';
import flattenReference from '../utils/flattenReference.js';
import deindent from '../../../utils/deindent.js';
import isReference from '../../../utils/isReference.js';
import flattenReference from '../../../utils/flattenReference.js';
export default function createBinding ( node, name, attribute, current, initStatements, updateStatements, teardownStatements, allUsedContexts ) {
const parts = attribute.value.split( '.' );

0
compiler/generate/attributes/lookup.js → compiler/generate/visitors/attributes/lookup.js
View File