msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

rename fragment to block everywhere

Browse Source
pull/453/head
Rich-Harris 9 years ago
parent 0050871197
commit f88788cc29
13 changed files with 132 additions and 132 deletions
Show Stats Download Patch File Download Diff File

4
src/generators/dom/visit.js
Unescape View File

@ -1,6 +1,6 @@
import visitors from './visitors/index.js';
export default function visit ( generator, fragment, state, node ) {
export default function visit ( generator, block, state, node ) {
const visitor = visitors[ node.type ];
visitor( generator, fragment, state, node );
visitor( generator, block, state, node );
}

32
src/generators/dom/visitors/Element.js
Unescape View File

@ -9,16 +9,16 @@ const meta = {
':Window': visitWindow
};
export default function visitElement ( generator, fragment, state, node ) {
export default function visitElement ( generator, block, state, node ) {
if ( node.name in meta ) {
return meta[ node.name ]( generator, fragment, node );
return meta[ node.name ]( generator, block, node );
}
if ( generator.components.has( node.name ) || node.name === ':Self' ) {
return visitComponent( generator, fragment, state, node );
return visitComponent( generator, block, state, node );
}
const name = fragment.getUniqueName( node.name );
const name = block.getUniqueName( node.name );
const local = {
name,
@ -34,14 +34,14 @@ export default function visitElement ( generator, fragment, state, node ) {
const isToplevel = !state.parentNode;
addElementAttributes( generator, fragment, node, local );
addElementAttributes( generator, block, node, local );
if ( local.allUsedContexts.length ) {
const initialProps = local.allUsedContexts.map( contextName => {
if ( contextName === 'root' ) return `root: root`;
const listName = fragment.listNames.get( contextName );
const indexName = fragment.indexNames.get( contextName );
const listName = block.listNames.get( contextName );
const indexName = block.indexNames.get( contextName );
return `${listName}: ${listName},\n${indexName}: ${indexName}`;
}).join( ',\n' );
@ -49,8 +49,8 @@ export default function visitElement ( generator, fragment, state, node ) {
const updates = local.allUsedContexts.map( contextName => {
if ( contextName === 'root' ) return `${name}.__svelte.root = root;`;
const listName = fragment.listNames.get( contextName );
const indexName = fragment.indexNames.get( contextName );
const listName = block.listNames.get( contextName );
const indexName = block.indexNames.get( contextName );
return `${name}.__svelte.${listName} = ${listName};\n${name}.__svelte.${indexName} = ${indexName};`;
}).join( '\n' );
@ -82,7 +82,7 @@ export default function visitElement ( generator, fragment, state, node ) {
local.create.addLineAtStart( render );
if ( isToplevel ) {
fragment.builders.detach.addLine( `${generator.helper( 'detachNode' )}( ${name} );` );
block.builders.detach.addLine( `${generator.helper( 'detachNode' )}( ${name} );` );
}
// special case – bound <option> without a value attribute
@ -92,11 +92,11 @@ export default function visitElement ( generator, fragment, state, node ) {
node.initialUpdate = statement;
}
fragment.builders.create.addBlock( local.create );
if ( !local.update.isEmpty() ) fragment.builders.update.addBlock( local.update );
if ( !local.destroy.isEmpty() ) fragment.builders.destroy.addBlock( local.destroy );
block.builders.create.addBlock( local.create );
if ( !local.update.isEmpty() ) block.builders.update.addBlock( local.update );
if ( !local.destroy.isEmpty() ) block.builders.destroy.addBlock( local.destroy );
fragment.createMountStatement( name, state.parentNode );
block.createMountStatement( name, state.parentNode );
const childState = Object.assign( {}, state, {
isTopLevel: false,
@ -105,10 +105,10 @@ export default function visitElement ( generator, fragment, state, node ) {
});
node.children.forEach( child => {
visit( generator, fragment, childState, child );
visit( generator, block, childState, child );
});
if ( node.initialUpdate ) {
fragment.builders.create.addBlock( node.initialUpdate );
block.builders.create.addBlock( node.initialUpdate );
}
}

28
src/generators/dom/visitors/IfBlock.js
Unescape View File

@ -46,20 +46,20 @@ function generateBlock ( generator, block, state, node, name ) {
generator.addBlock( childBlock );
}
export default function visitIfBlock ( generator, fragment, state, node ) {
const params = fragment.params.join( ', ' );
export default function visitIfBlock ( generator, block, state, node ) {
const params = block.params.join( ', ' );
const name = generator.getUniqueName( `if_block` );
const getBlock = fragment.getUniqueName( `get_block` );
const currentBlock = fragment.getUniqueName( `current_block` );
const _currentBlock = fragment.getUniqueName( `_current_block` );
const getBlock = block.getUniqueName( `get_block` );
const currentBlock = block.getUniqueName( `current_block` );
const _currentBlock = block.getUniqueName( `_current_block` );
const isToplevel = !state.parentNode;
const conditionsAndBlocks = getConditionsAndBlocks( generator, fragment, state, node, generator.getUniqueName( `create_if_block` ) );
const conditionsAndBlocks = getConditionsAndBlocks( generator, block, state, node, generator.getUniqueName( `create_if_block` ) );
const anchor = `${name}_anchor`;
fragment.createAnchor( anchor, state.parentNode );
block.createAnchor( anchor, state.parentNode );
fragment.builders.create.addBlock( deindent`
block.builders.create.addBlock( deindent`
function ${getBlock} ( ${params} ) {
${conditionsAndBlocks.map( ({ condition, block }) => {
return `${condition ? `if ( ${condition} ) ` : ''}return ${block};`;
@ -67,29 +67,29 @@ export default function visitIfBlock ( generator, fragment, state, node ) {
}
var ${currentBlock} = ${getBlock}( ${params} );
var ${name} = ${currentBlock} && ${currentBlock}( ${params}, ${fragment.component} );
var ${name} = ${currentBlock} && ${currentBlock}( ${params}, ${block.component} );
` );
const mountStatement = `if ( ${name} ) ${name}.mount( ${anchor}.parentNode, ${anchor} );`;
if ( isToplevel ) {
fragment.builders.mount.addLine( mountStatement );
block.builders.mount.addLine( mountStatement );
} else {
fragment.builders.create.addLine( mountStatement );
block.builders.create.addLine( mountStatement );
}
fragment.builders.update.addBlock( deindent`
block.builders.update.addBlock( deindent`
var ${_currentBlock} = ${currentBlock};
${currentBlock} = ${getBlock}( ${params} );
if ( ${_currentBlock} === ${currentBlock} && ${name}) {
${name}.update( changed, ${params} );
} else {
if ( ${name} ) ${name}.destroy( true );
${name} = ${currentBlock} && ${currentBlock}( ${params}, ${fragment.component} );
${name} = ${currentBlock} && ${currentBlock}( ${params}, ${block.component} );
if ( ${name} ) ${name}.mount( ${anchor}.parentNode, ${anchor} );
}
` );
fragment.builders.destroy.addLine(
block.builders.destroy.addLine(
`if ( ${name} ) ${name}.destroy( ${isToplevel ? 'detach' : 'false'} );`
);
}

18
src/generators/dom/visitors/MustacheTag.js
Unescape View File

@ -1,18 +1,18 @@
import deindent from '../../../utils/deindent.js';
export default function visitMustacheTag ( generator, fragment, state, node ) {
const name = fragment.getUniqueName( 'text' );
export default function visitMustacheTag ( generator, block, state, node ) {
const name = block.getUniqueName( 'text' );
const { snippet } = generator.contextualise( fragment, node.expression );
const { snippet } = generator.contextualise( block, node.expression );
fragment.builders.create.addLine( `var last_${name} = ${snippet};` );
fragment.addElement( name, `${generator.helper( 'createText' )}( last_${name} )`, state.parentNode, true );
block.builders.create.addLine( `var last_${name} = ${snippet};` );
block.addElement( name, `${generator.helper( 'createText' )}( last_${name} )`, state.parentNode, true );
if ( !fragment.tmp ) fragment.tmp = fragment.getUniqueName( 'tmp' );
if ( !block.tmp ) block.tmp = block.getUniqueName( 'tmp' );
fragment.builders.update.addBlock( deindent`
if ( ( ${fragment.tmp} = ${snippet} ) !== last_${name} ) {
${name}.data = last_${name} = ${fragment.tmp};
block.builders.update.addBlock( deindent`
if ( ( ${block.tmp} = ${snippet} ) !== last_${name} ) {
${name}.data = last_${name} = ${block.tmp};
}
` );
}

26
src/generators/dom/visitors/RawMustacheTag.js
Unescape View File

@ -1,39 +1,39 @@
import deindent from '../../../utils/deindent.js';
export default function visitRawMustacheTag ( generator, fragment, state, node ) {
const name = fragment.getUniqueName( 'raw' );
export default function visitRawMustacheTag ( generator, block, state, node ) {
const name = block.getUniqueName( 'raw' );
const { snippet } = generator.contextualise( fragment, node.expression );
const { snippet } = generator.contextualise( block, node.expression );
// we would have used comments here, but the `insertAdjacentHTML` api only
// exists for `Element`s.
const before = `${name}_before`;
fragment.addElement( before, `${generator.helper( 'createElement' )}( 'noscript' )`, state.parentNode, true );
block.addElement( before, `${generator.helper( 'createElement' )}( 'noscript' )`, state.parentNode, true );
const after = `${name}_after`;
fragment.addElement( after, `${generator.helper( 'createElement' )}( 'noscript' )`, state.parentNode, true );
block.addElement( after, `${generator.helper( 'createElement' )}( 'noscript' )`, state.parentNode, true );
const isToplevel = !state.parentNode;
fragment.builders.create.addLine( `var last_${name} = ${snippet};` );
block.builders.create.addLine( `var last_${name} = ${snippet};` );
const mountStatement = `${before}.insertAdjacentHTML( 'afterend', last_${name} );`;
const detachStatement = `${generator.helper( 'detachBetween' )}( ${before}, ${after} );`;
if ( isToplevel ) {
fragment.builders.mount.addLine( mountStatement );
block.builders.mount.addLine( mountStatement );
} else {
fragment.builders.create.addLine( mountStatement );
block.builders.create.addLine( mountStatement );
}
if ( !fragment.tmp ) fragment.tmp = fragment.getUniqueName( 'tmp' );
if ( !block.tmp ) block.tmp = block.getUniqueName( 'tmp' );
fragment.builders.update.addBlock( deindent`
if ( ( ${fragment.tmp} = ${snippet} ) !== last_${name} ) {
last_${name} = ${fragment.tmp};
block.builders.update.addBlock( deindent`
if ( ( ${block.tmp} = ${snippet} ) !== last_${name} ) {
last_${name} = ${block.tmp};
${detachStatement}
${mountStatement}
}
` );
fragment.builders.detachRaw.addBlock( detachStatement );
block.builders.detachRaw.addBlock( detachStatement );
}

6
src/generators/dom/visitors/Text.js
Unescape View File

@ -1,8 +1,8 @@
export default function visitText ( generator, fragment, state, node ) {
export default function visitText ( generator, block, state, node ) {
if ( state.namespace && !/\S/.test( node.data ) ) {
return;
}
const name = fragment.getUniqueName( `text` );
fragment.addElement( name, `${generator.helper( 'createText' )}( ${JSON.stringify( node.data )} )`, state.parentNode, false );
const name = block.getUniqueName( `text` );
block.addElement( name, `${generator.helper( 'createText' )}( ${JSON.stringify( node.data )} )`, state.parentNode, false );
}

12
src/generators/dom/visitors/YieldTag.js
Unescape View File

@ -1,12 +1,12 @@
export default function visitYieldTag ( generator, fragment, state ) {
export default function visitYieldTag ( generator, block, state ) {
const anchor = `yield_anchor`;
fragment.createAnchor( anchor, state.parentNode );
block.createAnchor( anchor, state.parentNode );
fragment.builders.mount.addLine(
`${fragment.component}._yield && ${fragment.component}._yield.mount( ${state.parentNode || 'target'}, ${anchor} );`
block.builders.mount.addLine(
`${block.component}._yield && ${block.component}._yield.mount( ${state.parentNode || 'target'}, ${anchor} );`
);
fragment.builders.destroy.addLine(
`${fragment.component}._yield && ${fragment.component}._yield.destroy( detach );`
block.builders.destroy.addLine(
`${block.component}._yield && ${block.component}._yield.destroy( detach );`
);
}

22
src/generators/dom/visitors/attributes/addComponentAttributes.js
Unescape View File

@ -1,7 +1,7 @@
import addComponentBinding from './addComponentBinding.js';
import deindent from '../../../../utils/deindent.js';
export default function addComponentAttributes ( generator, fragment, node, local ) {
export default function addComponentAttributes ( generator, block, node, local ) {
local.staticAttributes = [];
local.dynamicAttributes = [];
local.bindings = [];
@ -37,7 +37,7 @@ export default function addComponentAttributes ( generator, fragment, node, loca
else {
// simple dynamic attributes
const { dependencies, string } = generator.contextualise( fragment, value.expression );
const { dependencies, string } = generator.contextualise( block, value.expression );
// TODO only update attributes that have changed
local.dynamicAttributes.push({
@ -57,7 +57,7 @@ export default function addComponentAttributes ( generator, fragment, node, loca
if ( chunk.type === 'Text' ) {
return JSON.stringify( chunk.data );
} else {
const { dependencies, string } = generator.contextualise( fragment, chunk.expression );
const { dependencies, string } = generator.contextualise( block, chunk.expression );
dependencies.forEach( dependency => {
if ( !~allDependencies.indexOf( dependency ) ) allDependencies.push( dependency );
});
@ -78,11 +78,11 @@ export default function addComponentAttributes ( generator, fragment, node, loca
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.prependRight( attribute.expression.start, `${fragment.component}.` );
generator.code.prependRight( attribute.expression.start, `${block.component}.` );
const usedContexts = [];
attribute.expression.arguments.forEach( arg => {
const { contexts } = generator.contextualise( fragment, arg, true );
const { contexts } = generator.contextualise( block, arg, true );
contexts.forEach( context => {
if ( !~usedContexts.indexOf( context ) ) usedContexts.push( context );
@ -94,8 +94,8 @@ export default function addComponentAttributes ( generator, fragment, node, loca
const declarations = usedContexts.map( name => {
if ( name === 'root' ) return 'var root = this._context.root;';
const listName = fragment.listNames.get( name );
const indexName = fragment.indexNames.get( name );
const listName = block.listNames.get( name );
const indexName = block.indexNames.get( name );
return `var ${listName} = this._context.${listName}, ${indexName} = this._context.${indexName}, ${name} = ${listName}[${indexName}]`;
});
@ -110,18 +110,18 @@ export default function addComponentAttributes ( generator, fragment, node, loca
}
else if ( attribute.type === 'Binding' ) {
addComponentBinding( generator, node, attribute, fragment, local );
addComponentBinding( generator, node, attribute, block, local );
}
else if ( attribute.type === 'Ref' ) {
generator.usesRefs = true;
local.create.addLine(
`${fragment.component}.refs.${attribute.name} = ${local.name};`
`${block.component}.refs.${attribute.name} = ${local.name};`
);
fragment.builders.destroy.addLine( deindent`
if ( ${fragment.component}.refs.${attribute.name} === ${local.name} ) ${fragment.component}.refs.${attribute.name} = null;
block.builders.destroy.addLine( deindent`
if ( ${block.component}.refs.${attribute.name} === ${local.name} ) ${block.component}.refs.${attribute.name} = null;
` );
}

16
src/generators/dom/visitors/attributes/addComponentBinding.js
Unescape View File

@ -2,9 +2,9 @@ import deindent from '../../../../utils/deindent.js';
import flattenReference from '../../../../utils/flattenReference.js';
import getSetter from './binding/getSetter.js';
export default function addComponentBinding ( generator, node, attribute, fragment, local ) {
export default function addComponentBinding ( generator, node, attribute, block, local ) {
const { name, keypath } = flattenReference( attribute.value );
const { snippet, contexts, dependencies } = generator.contextualise( fragment, attribute.value );
const { snippet, contexts, dependencies } = generator.contextualise( block, attribute.value );
if ( dependencies.length > 1 ) throw new Error( 'An unexpected situation arose. Please raise an issue at https://github.com/sveltejs/svelte/issues — thanks!' );
@ -12,14 +12,14 @@ export default function addComponentBinding ( generator, node, attribute, fragme
if ( !~local.allUsedContexts.indexOf( context ) ) local.allUsedContexts.push( context );
});
const contextual = fragment.contexts.has( name );
const contextual = block.contexts.has( name );
let obj;
let prop;
if ( contextual ) {
obj = fragment.listNames.get( name );
prop = fragment.indexNames.get( name );
obj = block.listNames.get( name );
prop = block.indexNames.get( name );
} else if ( attribute.value.type === 'MemberExpression' ) {
prop = `'[✂${attribute.value.property.start}-${attribute.value.property.end}✂]'`;
obj = `[✂${attribute.value.object.start}-${attribute.value.object.end}✂]`;
@ -35,16 +35,16 @@ export default function addComponentBinding ( generator, node, attribute, fragme
prop
});
const setter = getSetter({ fragment, name, keypath, context: '_context', attribute, dependencies, value: 'value' });
const setter = getSetter({ block, name, keypath, context: '_context', attribute, dependencies, value: 'value' });
generator.hasComplexBindings = true;
const updating = fragment.getUniqueName( `${local.name}_updating` );
const updating = block.getUniqueName( `${local.name}_updating` );
local.create.addBlock( deindent`
var ${updating} = false;
${fragment.component}._bindings.push( function () {
${block.component}._bindings.push( function () {
if ( ${local.name}._torndown ) return;
${local.name}.observe( '${attribute.name}', function ( value ) {
if ( ${updating} ) return;

38
src/generators/dom/visitors/attributes/addElementAttributes.js
Unescape View File

@ -4,7 +4,7 @@ import deindent from '../../../../utils/deindent.js';
import flattenReference from '../../../../utils/flattenReference.js';
import getStaticAttributeValue from './binding/getStaticAttributeValue.js';
export default function addElementAttributes ( generator, fragment, node, local ) {
export default function addElementAttributes ( generator, block, node, local ) {
node.attributes.forEach( attribute => {
const name = attribute.name;
@ -42,7 +42,7 @@ export default function addElementAttributes ( generator, fragment, node, local
// special case – autofocus. has to be handled in a bit of a weird way
if ( name === 'autofocus' ) {
fragment.autofocus = local.name;
block.autofocus = local.name;
}
}
@ -92,7 +92,7 @@ export default function addElementAttributes ( generator, fragment, node, local
dynamic = true;
// dynamic – but potentially non-string – attributes
const { snippet } = generator.contextualise( fragment, value.expression );
const { snippet } = generator.contextualise( block, value.expression );
const last = `last_${local.name}_${name.replace( /-/g, '_')}`;
local.create.addLine( `var ${last} = ${snippet};` );
@ -106,11 +106,11 @@ export default function addElementAttributes ( generator, fragment, node, local
local.create.addLine( updater );
if ( !fragment.tmp ) fragment.tmp = fragment.getUniqueName( 'tmp' );
if ( !block.tmp ) block.tmp = block.getUniqueName( 'tmp' );
local.update.addBlock( deindent`
if ( ( ${fragment.tmp} = ${snippet} ) !== ${last} ) {
${last} = ${fragment.tmp};
if ( ( ${block.tmp} = ${snippet} ) !== ${last} ) {
${last} = ${block.tmp};
${updater}
}
` );
@ -125,7 +125,7 @@ export default function addElementAttributes ( generator, fragment, node, local
if ( chunk.type === 'Text' ) {
return JSON.stringify( chunk.data );
} else {
const { snippet } = generator.contextualise( fragment, chunk.expression );
const { snippet } = generator.contextualise( block, chunk.expression );
return `( ${snippet} )`;
}
}).join( ' + ' )
@ -157,12 +157,12 @@ export default function addElementAttributes ( generator, fragment, node, local
const flattened = flattenReference( attribute.expression.callee );
if ( flattened.name !== 'event' && flattened.name !== 'this' ) {
// allow event.stopPropagation(), this.select() etc
generator.code.prependRight( attribute.expression.start, `${fragment.component}.` );
generator.code.prependRight( attribute.expression.start, `${block.component}.` );
}
const usedContexts = [];
attribute.expression.arguments.forEach( arg => {
const { contexts } = generator.contextualise( fragment, arg, true );
const { contexts } = generator.contextualise( block, arg, true );
contexts.forEach( context => {
if ( !~usedContexts.indexOf( context ) ) usedContexts.push( context );
@ -174,23 +174,23 @@ export default function addElementAttributes ( generator, fragment, node, local
const declarations = usedContexts.map( name => {
if ( name === 'root' ) return 'var root = this.__svelte.root;';
const listName = fragment.listNames.get( name );
const indexName = fragment.indexNames.get( name );
const listName = block.listNames.get( name );
const indexName = block.indexNames.get( name );
return `var ${listName} = this.__svelte.${listName}, ${indexName} = this.__svelte.${indexName}, ${name} = ${listName}[${indexName}]`;
});
const handlerName = fragment.getUniqueName( `${name}_handler` );
const handlerName = block.getUniqueName( `${name}_handler` );
const handlerBody = ( declarations.length ? declarations.join( '\n' ) + '\n\n' : '' ) + `[✂${attribute.expression.start}-${attribute.expression.end}✂];`;
if ( generator.events.has( name ) ) {
local.create.addBlock( deindent`
var ${handlerName} = ${generator.alias( 'template' )}.events.${name}.call( ${fragment.component}, ${local.name}, function ( event ) {
var ${handlerName} = ${generator.alias( 'template' )}.events.${name}.call( ${block.component}, ${local.name}, function ( event ) {
${handlerBody}
}.bind( ${local.name} ) );
` );
fragment.builders.destroy.addLine( deindent`
block.builders.destroy.addLine( deindent`
${handlerName}.teardown();
` );
} else {
@ -202,25 +202,25 @@ export default function addElementAttributes ( generator, fragment, node, local
${generator.helper( 'addEventListener' )}( ${local.name}, '${name}', ${handlerName} );
` );
fragment.builders.destroy.addLine( deindent`
block.builders.destroy.addLine( deindent`
${generator.helper( 'removeEventListener' )}( ${local.name}, '${name}', ${handlerName} );
` );
}
}
else if ( attribute.type === 'Binding' ) {
addElementBinding( generator, node, attribute, fragment, local );
addElementBinding( generator, node, attribute, block, local );
}
else if ( attribute.type === 'Ref' ) {
generator.usesRefs = true;
local.create.addLine(
`${fragment.component}.refs.${name} = ${local.name};`
`${block.component}.refs.${name} = ${local.name};`
);
fragment.builders.destroy.addLine( deindent`
if ( ${fragment.component}.refs.${name} === ${local.name} ) ${fragment.component}.refs.${name} = null;
block.builders.destroy.addLine( deindent`
if ( ${block.component}.refs.${name} === ${local.name} ) ${block.component}.refs.${name} = null;
` );
}

32
src/generators/dom/visitors/attributes/addElementBinding.js
Unescape View File

@ -3,9 +3,9 @@ import flattenReference from '../../../../utils/flattenReference.js';
import getSetter from './binding/getSetter.js';
import getStaticAttributeValue from './binding/getStaticAttributeValue.js';
export default function addElementBinding ( generator, node, attribute, fragment, local ) {
export default function addElementBinding ( generator, node, attribute, block, local ) {
const { name, keypath } = flattenReference( attribute.value );
const { snippet, contexts, dependencies } = generator.contextualise( fragment, attribute.value );
const { snippet, contexts, dependencies } = generator.contextualise( block, attribute.value );
if ( dependencies.length > 1 ) throw new Error( 'An unexpected situation arose. Please raise an issue at https://github.com/sveltejs/svelte/issues — thanks!' );
@ -13,15 +13,15 @@ export default function addElementBinding ( generator, node, attribute, fragment
if ( !~local.allUsedContexts.indexOf( context ) ) local.allUsedContexts.push( context );
});
const handler = fragment.getUniqueName( `${local.name}_change_handler` );
const handler = block.getUniqueName( `${local.name}_change_handler` );
const isMultipleSelect = node.name === 'select' && node.attributes.find( attr => attr.name.toLowerCase() === 'multiple' ); // TODO use getStaticAttributeValue
const type = getStaticAttributeValue( node, 'type' );
const bindingGroup = attribute.name === 'group' ? getBindingGroup( generator, fragment, attribute, keypath ) : null;
const value = getBindingValue( generator, fragment, local, node, attribute, isMultipleSelect, bindingGroup, type );
const bindingGroup = attribute.name === 'group' ? getBindingGroup( generator, keypath ) : null;
const value = getBindingValue( generator, block, local, node, attribute, isMultipleSelect, bindingGroup, type );
const eventName = getBindingEventName( node );
let setter = getSetter({ fragment, name, keypath, context: '__svelte', attribute, dependencies, value });
let setter = getSetter({ block, name, keypath, context: '__svelte', attribute, dependencies, value });
let updateElement;
// <select> special case
@ -30,9 +30,9 @@ export default function addElementBinding ( generator, node, attribute, fragment
setter = `var selectedOption = ${local.name}.selectedOptions[0] || ${local.name}.options[0];\n${setter}`;
}
const value = fragment.getUniqueName( 'value' );
const i = fragment.getUniqueName( 'i' );
const option = fragment.getUniqueName( 'option' );
const value = block.getUniqueName( 'value' );
const i = block.getUniqueName( 'i' );
const option = block.getUniqueName( 'option' );
const ifStatement = isMultipleSelect ?
deindent`
@ -67,11 +67,11 @@ export default function addElementBinding ( generator, node, attribute, fragment
`${local.name}.__value === ${snippet}`;
local.create.addLine(
`${fragment.component}._bindingGroups[${bindingGroup}].push( ${local.name} );`
`${block.component}._bindingGroups[${bindingGroup}].push( ${local.name} );`
);
local.destroy.addBlock(
`${fragment.component}._bindingGroups[${bindingGroup}].splice( ${fragment.component}._bindingGroups[${bindingGroup}].indexOf( ${local.name} ), 1 );`
`${block.component}._bindingGroups[${bindingGroup}].splice( ${block.component}._bindingGroups[${bindingGroup}].indexOf( ${local.name} ), 1 );`
);
updateElement = `${local.name}.checked = ${condition};`;
@ -82,7 +82,7 @@ export default function addElementBinding ( generator, node, attribute, fragment
updateElement = `${local.name}.${attribute.name} = ${snippet};`;
}
const updating = fragment.getUniqueName( `${local.name}_updating` );
const updating = block.getUniqueName( `${local.name}_updating` );
local.create.addBlock( deindent`
var ${updating} = false;
@ -104,7 +104,7 @@ export default function addElementBinding ( generator, node, attribute, fragment
}
` );
fragment.builders.destroy.addLine( deindent`
block.builders.destroy.addLine( deindent`
${generator.helper( 'removeEventListener' )}( ${local.name}, '${eventName}', ${handler} );
` );
}
@ -124,7 +124,7 @@ function getBindingEventName ( node ) {
return 'change';
}
function getBindingValue ( generator, fragment, local, node, attribute, isMultipleSelect, bindingGroup, type ) {
function getBindingValue ( generator, block, local, node, attribute, isMultipleSelect, bindingGroup, type ) {
// <select multiple bind:value='selected>
if ( isMultipleSelect ) {
return `[].map.call( ${local.name}.selectedOptions, function ( option ) { return option.__value; })`;
@ -138,7 +138,7 @@ function getBindingValue ( generator, fragment, local, node, attribute, isMultip
// <input type='checkbox' bind:group='foo'>
if ( attribute.name === 'group' ) {
if ( type === 'checkbox' ) {
return `${generator.helper( 'getBindingGroupValue' )}( ${fragment.component}._bindingGroups[${bindingGroup}] )`;
return `${generator.helper( 'getBindingGroupValue' )}( ${block.component}._bindingGroups[${bindingGroup}] )`;
}
return `${local.name}.__value`;
@ -153,7 +153,7 @@ function getBindingValue ( generator, fragment, local, node, attribute, isMultip
return `${local.name}.${attribute.name}`;
}
function getBindingGroup ( generator, fragment, attribute, keypath ) {
function getBindingGroup ( generator, keypath ) {
// TODO handle contextual bindings — `keypath` should include unique ID of
// each block that provides context
let index = generator.bindingGroups.indexOf( keypath );

16
src/generators/dom/visitors/attributes/binding/getSetter.js
Unescape View File

@ -1,28 +1,28 @@
import deindent from '../../../../../utils/deindent.js';
export default function getSetter ({ fragment, name, keypath, context, attribute, dependencies, value }) {
if ( fragment.contexts.has( name ) ) {
export default function getSetter ({ block, name, keypath, context, attribute, dependencies, value }) {
if ( block.contexts.has( name ) ) {
const prop = dependencies[0];
const tail = attribute.value.type === 'MemberExpression' ? getTailSnippet( attribute.value ) : '';
return deindent`
var list = this.${context}.${fragment.listNames.get( name )};
var index = this.${context}.${fragment.indexNames.get( name )};
var list = this.${context}.${block.listNames.get( name )};
var index = this.${context}.${block.indexNames.get( name )};
list[index]${tail} = ${value};
${fragment.component}._set({ ${prop}: ${fragment.component}.get( '${prop}' ) });
${block.component}._set({ ${prop}: ${block.component}.get( '${prop}' ) });
`;
}
if ( attribute.value.type === 'MemberExpression' ) {
return deindent`
var ${name} = ${fragment.component}.get( '${name}' );
var ${name} = ${block.component}.get( '${name}' );
${keypath} = ${value};
${fragment.component}._set({ ${name}: ${name} });
${block.component}._set({ ${name}: ${name} });
`;
}
return `${fragment.component}._set({ ${name}: ${value} });`;
return `${block.component}._set({ ${name}: ${value} });`;
}
function getTailSnippet ( node ) {

14
src/generators/dom/visitors/meta/Window.js
Unescape View File

@ -11,7 +11,7 @@ const associatedEvents = {
scrollY: 'scroll'
};
export default function visitWindow ( generator, fragment, node ) {
export default function visitWindow ( generator, block, node ) {
const events = {};
node.attributes.forEach( attribute => {
@ -25,16 +25,16 @@ export default function visitWindow ( generator, fragment, node ) {
generator.code.prependRight( attribute.expression.start, 'component.' );
}
const handlerName = fragment.getUniqueName( `onwindow${attribute.name}` );
const handlerName = block.getUniqueName( `onwindow${attribute.name}` );
fragment.builders.create.addBlock( deindent`
block.builders.create.addBlock( deindent`
var ${handlerName} = function ( event ) {
[✂${attribute.expression.start}-${attribute.expression.end}✂];
};
window.addEventListener( '${attribute.name}', ${handlerName} );
` );
fragment.builders.destroy.addBlock( deindent`
block.builders.destroy.addBlock( deindent`
window.removeEventListener( '${attribute.name}', ${handlerName} );
` );
}
@ -62,11 +62,11 @@ export default function visitWindow ( generator, fragment, node ) {
});
Object.keys( events ).forEach( event => {
const handlerName = fragment.getUniqueName( `onwindow${event}` );
const handlerName = block.getUniqueName( `onwindow${event}` );
const props = events[ event ].join( ',\n' );
fragment.builders.create.addBlock( deindent`
block.builders.create.addBlock( deindent`
var ${handlerName} = function ( event ) {
component.set({
${props}
@ -75,7 +75,7 @@ export default function visitWindow ( generator, fragment, node ) {
window.addEventListener( '${event}', ${handlerName} );
` );
fragment.builders.destroy.addBlock( deindent`
block.builders.destroy.addBlock( deindent`
window.removeEventListener( '${event}', ${handlerName} );
` );
});

Write Preview
Loading…
Cancel
Save