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

use #target and #component instead of block.target and block.component

Browse Source
pull/673/head
Rich Harris 8 years ago
parent b757444484
commit 8402ae9c24
15 changed files with 77 additions and 85 deletions
Show Stats Download Patch File Download Diff File

22
src/generators/dom/Block.ts
Unescape View File

@ -62,9 +62,6 @@ export default class Block {
variables: Map<string, string>; variables: Map<string, string>;
getUniqueName: (name: string) => string; getUniqueName: (name: string) => string;
component: string;
target: string;
hasUpdateMethod: boolean; hasUpdateMethod: boolean;
autofocus: string; autofocus: string;
@ -111,10 +108,6 @@ export default class Block {
this.variables = new Map(); this.variables = new Map();
this.getUniqueName = this.generator.getUniqueNameMaker(options.params); this.getUniqueName = this.generator.getUniqueNameMaker(options.params);
// unique names
this.component = this.getUniqueName('component');
this.target = this.getUniqueName('target');
this.hasUpdateMethod = false; // determined later this.hasUpdateMethod = false; // determined later
} }
@ -192,7 +185,7 @@ export default class Block {
); );
} else { } else {
this.builders.mount.addLine( this.builders.mount.addLine(
`@insertNode( ${name}, ${this.target}, anchor );` `@insertNode( ${name}, #target, anchor );`
); );
} }
} }
@ -268,7 +261,7 @@ export default class Block {
properties.addBlock(`mount: @noop,`); properties.addBlock(`mount: @noop,`);
} else { } else {
properties.addBlock(deindent` properties.addBlock(deindent`
mount: function ( ${this.target}, anchor ) { mount: function ( #target, anchor ) {
${this.builders.mount} ${this.builders.mount}
}, },
`); `);
@ -289,20 +282,20 @@ export default class Block {
if (this.hasIntroMethod) { if (this.hasIntroMethod) {
if (hasIntros) { if (hasIntros) {
properties.addBlock(deindent` properties.addBlock(deindent`
intro: function ( ${this.target}, anchor ) { intro: function ( #target, anchor ) {
if ( ${introing} ) return; if ( ${introing} ) return;
${introing} = true; ${introing} = true;
${hasOutros && `${outroing} = false;`} ${hasOutros && `${outroing} = false;`}
${this.builders.intro} ${this.builders.intro}
this.mount( ${this.target}, anchor ); this.mount( #target, anchor );
}, },
`); `);
} else { } else {
properties.addBlock(deindent` properties.addBlock(deindent`
intro: function ( ${this.target}, anchor ) { intro: function ( #target, anchor ) {
this.mount( ${this.target}, anchor ); this.mount( #target, anchor );
}, },
`); `);
} }
@ -351,8 +344,7 @@ export default class Block {
} }
return deindent` return deindent`
function ${this.name} ( ${this.params.join(', ')}, ${this.component}${this function ${this.name} ( ${this.params.join(', ')}, #component${this.key
.key
? `, ${localKey}` ? `, ${localKey}`
: ''} ) { : ''} ) {
${this.variables.size > 0 && ( ${this.variables.size > 0 && (

2
src/generators/dom/visitors/Component/Binding.ts
Unescape View File

@ -66,7 +66,7 @@ export default function visitBinding(
block.addVariable(updating, 'false'); block.addVariable(updating, 'false');
local.create.addBlock(deindent` local.create.addBlock(deindent`
${block.component}._bindings.push( function () { #component._bindings.push( function () {
if ( ${local.name}._torndown ) return; if ( ${local.name}._torndown ) return;
${local.name}.observe( '${attribute.name}', function ( value ) { ${local.name}.observe( '${attribute.name}', function ( value ) {
if ( ${updating} ) return; if ( ${updating} ) return;

6
src/generators/dom/visitors/Component/Component.ts
Unescape View File

@ -113,7 +113,7 @@ export default function visitComponent(
} }
const componentInitProperties = [ const componentInitProperties = [
`_root: ${block.component}._root`, `_root: #component._root`,
]; ];
// Component has children, put them in a separate {{yield}} block // Component has children, put them in a separate {{yield}} block
@ -129,7 +129,7 @@ export default function visitComponent(
const yieldFragment = block.getUniqueName(`${name}_yield_fragment`); const yieldFragment = block.getUniqueName(`${name}_yield_fragment`);
block.builders.init.addLine( block.builders.init.addLine(
`var ${yieldFragment} = ${childBlock.name}( ${params}, ${block.component} );` `var ${yieldFragment} = ${childBlock.name}( ${params}, #component );`
); );
block.builders.create.addLine( block.builders.create.addLine(
@ -225,7 +225,7 @@ export default function visitComponent(
block.builders.init.addBlock(local.create); block.builders.init.addBlock(local.create);
const targetNode = state.parentNode || block.target; const targetNode = state.parentNode || '#target';
const anchorNode = state.parentNode ? 'null' : 'anchor'; const anchorNode = state.parentNode ? 'null' : 'anchor';
block.builders.create.addLine(`${name}._fragment.create();`); block.builders.create.addLine(`${name}._fragment.create();`);

2
src/generators/dom/visitors/Component/EventHandler.ts
Unescape View File

@ -16,7 +16,7 @@ export default function visitEventHandler(
generator.addSourcemapLocations(attribute.expression); generator.addSourcemapLocations(attribute.expression);
generator.code.prependRight( generator.code.prependRight(
attribute.expression.start, attribute.expression.start,
`${block.component}.` `${block.alias('component')}.`
); );
const usedContexts: string[] = []; const usedContexts: string[] = [];

4
src/generators/dom/visitors/Component/Ref.ts
Unescape View File

@ -15,10 +15,10 @@ export default function visitRef(
generator.usesRefs = true; generator.usesRefs = true;
local.create.addLine( local.create.addLine(
`${block.component}.refs.${attribute.name} = ${local.name};` `#component.refs.${attribute.name} = ${local.name};`
); );
block.builders.destroy.addLine(deindent` block.builders.destroy.addLine(deindent`
if ( ${block.component}.refs.${attribute.name} === ${local.name} ) ${block.component}.refs.${attribute.name} = null; if ( #component.refs.${attribute.name} === ${local.name} ) #component.refs.${attribute.name} = null;
`); `);
} }

26
src/generators/dom/visitors/EachBlock.ts
Unescape View File

@ -63,14 +63,14 @@ export default function visitEachBlock(
// TODO neaten this up... will end up with an empty line in the block // TODO neaten this up... will end up with an empty line in the block
block.builders.init.addBlock(deindent` block.builders.init.addBlock(deindent`
if ( !${each_block_value}.length ) { if ( !${each_block_value}.length ) {
${each_block_else} = ${node.else._block.name}( ${params}, ${block.component} ); ${each_block_else} = ${node.else._block.name}( ${params}, #component );
${each_block_else}.create(); ${each_block_else}.create();
} }
`); `);
block.builders.mount.addBlock(deindent` block.builders.mount.addBlock(deindent`
if ( ${each_block_else} ) { if ( ${each_block_else} ) {
${each_block_else}.${mountOrIntro}( ${state.parentNode || block.target}, null ); ${each_block_else}.${mountOrIntro}( ${state.parentNode || '#target'}, null );
} }
`); `);
@ -81,7 +81,7 @@ export default function visitEachBlock(
if ( !${each_block_value}.length && ${each_block_else} ) { if ( !${each_block_value}.length && ${each_block_else} ) {
${each_block_else}.update( changed, ${params} ); ${each_block_else}.update( changed, ${params} );
} else if ( !${each_block_value}.length ) { } else if ( !${each_block_value}.length ) {
${each_block_else} = ${node.else._block.name}( ${params}, ${block.component} ); ${each_block_else} = ${node.else._block.name}( ${params}, #component );
${each_block_else}.create(); ${each_block_else}.create();
${each_block_else}.${mountOrIntro}( ${parentNode}, ${anchor} ); ${each_block_else}.${mountOrIntro}( ${parentNode}, ${anchor} );
} else if ( ${each_block_else} ) { } else if ( ${each_block_else} ) {
@ -99,7 +99,7 @@ export default function visitEachBlock(
${each_block_else} = null; ${each_block_else} = null;
} }
} else if ( !${each_block_else} ) { } else if ( !${each_block_else} ) {
${each_block_else} = ${node.else._block.name}( ${params}, ${block.component} ); ${each_block_else} = ${node.else._block.name}( ${params}, #component );
${each_block_else}.create(); ${each_block_else}.create();
${each_block_else}.${mountOrIntro}( ${parentNode}, ${anchor} ); ${each_block_else}.${mountOrIntro}( ${parentNode}, ${anchor} );
} }
@ -169,7 +169,7 @@ function keyed(
block.builders.init.addBlock(deindent` block.builders.init.addBlock(deindent`
for ( var #i = 0; #i < ${each_block_value}.length; #i += 1 ) { for ( var #i = 0; #i < ${each_block_value}.length; #i += 1 ) {
var ${key} = ${each_block_value}[#i].${node.key}; var ${key} = ${each_block_value}[#i].${node.key};
var ${iteration} = ${lookup}[${key}] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, ${block.component}, ${key} ); var ${iteration} = ${lookup}[${key}] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component, ${key} );
if ( ${last} ) ${last}.next = ${iteration}; if ( ${last} ) ${last}.next = ${iteration};
${iteration}.last = ${last}; ${iteration}.last = ${last};
@ -179,7 +179,7 @@ function keyed(
} }
`); `);
const targetNode = state.parentNode || block.target; const targetNode = state.parentNode || '#target';
const anchorNode = state.parentNode ? 'null' : 'anchor'; const anchorNode = state.parentNode ? 'null' : 'anchor';
block.builders.create.addBlock(deindent` block.builders.create.addBlock(deindent`
@ -293,7 +293,7 @@ function keyed(
if (!${expected}) ${iteration}.mount( ${parentNode}, ${anchor} ); if (!${expected}) ${iteration}.mount( ${parentNode}, ${anchor} );
} else { } else {
// key is being inserted // key is being inserted
${iteration} = ${lookup}[${key}] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, ${block.component}, ${key} ); ${iteration} = ${lookup}[${key}] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component, ${key} );
${iteration}.create(); ${iteration}.create();
${iteration}.${mountOrIntro}( ${parentNode}, ${expected}.first ); ${iteration}.${mountOrIntro}( ${parentNode}, ${expected}.first );
@ -308,7 +308,7 @@ function keyed(
${iteration}.next = null; ${iteration}.next = null;
${iteration}.mount( ${parentNode}, ${anchor} ); ${iteration}.mount( ${parentNode}, ${anchor} );
} else { } else {
${iteration} = ${lookup}[${key}] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, ${block.component}, ${key} ); ${iteration} = ${lookup}[${key}] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component, ${key} );
${iteration}.create(); ${iteration}.create();
${iteration}.${mountOrIntro}( ${parentNode}, ${anchor} ); ${iteration}.${mountOrIntro}( ${parentNode}, ${anchor} );
} }
@ -366,11 +366,11 @@ function unkeyed(
var ${iterations} = []; var ${iterations} = [];
for ( var #i = 0; #i < ${each_block_value}.length; #i += 1 ) { for ( var #i = 0; #i < ${each_block_value}.length; #i += 1 ) {
${iterations}[#i] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, ${block.component} ); ${iterations}[#i] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component );
} }
`); `);
const targetNode = state.parentNode || block.target; const targetNode = state.parentNode || '#target';
const anchorNode = state.parentNode ? 'null' : 'anchor'; const anchorNode = state.parentNode ? 'null' : 'anchor';
block.builders.create.addBlock(deindent` block.builders.create.addBlock(deindent`
@ -411,7 +411,7 @@ function unkeyed(
if ( ${iterations}[#i] ) { if ( ${iterations}[#i] ) {
${iterations}[#i].update( changed, ${params}, ${each_block_value}, ${each_block_value}[#i], #i ); ${iterations}[#i].update( changed, ${params}, ${each_block_value}, ${each_block_value}[#i], #i );
} else { } else {
${iterations}[#i] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, ${block.component} ); ${iterations}[#i] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component );
${iterations}[#i].create(); ${iterations}[#i].create();
} }
${iterations}[#i].intro( ${parentNode}, ${anchor} ); ${iterations}[#i].intro( ${parentNode}, ${anchor} );
@ -420,13 +420,13 @@ function unkeyed(
if ( ${iterations}[#i] ) { if ( ${iterations}[#i] ) {
${iterations}[#i].update( changed, ${params}, ${each_block_value}, ${each_block_value}[#i], #i ); ${iterations}[#i].update( changed, ${params}, ${each_block_value}, ${each_block_value}[#i], #i );
} else { } else {
${iterations}[#i] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, ${block.component} ); ${iterations}[#i] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component );
${iterations}[#i].create(); ${iterations}[#i].create();
${iterations}[#i].mount( ${parentNode}, ${anchor} ); ${iterations}[#i].mount( ${parentNode}, ${anchor} );
} }
` `
: deindent` : deindent`
${iterations}[#i] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, ${block.component} ); ${iterations}[#i] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component );
${iterations}[#i].${mountOrIntro}( ${parentNode}, ${anchor} ); ${iterations}[#i].${mountOrIntro}( ${parentNode}, ${anchor} );
`; `;

10
src/generators/dom/visitors/Element/Binding.ts
Unescape View File

@ -91,7 +91,7 @@ export default function visitBinding(
generator.hasComplexBindings = true; generator.hasComplexBindings = true;
block.builders.hydrate.addBlock( block.builders.hydrate.addBlock(
`if ( !('${name}' in state) ) ${block.component}._bindings.push( ${handler} );` `if ( !('${name}' in state) ) #component._bindings.push( ${handler} );`
); );
} else if (attribute.name === 'group') { } else if (attribute.name === 'group') {
// <input type='checkbox|radio' bind:group='selected'> special case // <input type='checkbox|radio' bind:group='selected'> special case
@ -107,18 +107,18 @@ export default function visitBinding(
: `${state.parentNode}.__value === ${snippet}`; : `${state.parentNode}.__value === ${snippet}`;
block.builders.hydrate.addLine( block.builders.hydrate.addLine(
`${block.component}._bindingGroups[${bindingGroup}].push( ${state.parentNode} );` `#component._bindingGroups[${bindingGroup}].push( ${state.parentNode} );`
); );
block.builders.destroy.addBlock( block.builders.destroy.addBlock(
`${block.component}._bindingGroups[${bindingGroup}].splice( ${block.component}._bindingGroups[${bindingGroup}].indexOf( ${state.parentNode} ), 1 );` `#component._bindingGroups[${bindingGroup}].splice( #component._bindingGroups[${bindingGroup}].indexOf( ${state.parentNode} ), 1 );`
); );
updateElement = `${state.parentNode}.checked = ${condition};`; updateElement = `${state.parentNode}.checked = ${condition};`;
} else if (node.name === 'audio' || node.name === 'video') { } else if (node.name === 'audio' || node.name === 'video') {
generator.hasComplexBindings = true; generator.hasComplexBindings = true;
block.builders.hydrate.addBlock( block.builders.hydrate.addBlock(
`${block.component}._bindings.push( ${handler} );` `#component._bindings.push( ${handler} );`
); );
if (attribute.name === 'currentTime') { if (attribute.name === 'currentTime') {
@ -221,7 +221,7 @@ function getBindingValue(
// <input type='checkbox' bind:group='foo'> // <input type='checkbox' bind:group='foo'>
if (attribute.name === 'group') { if (attribute.name === 'group') {
if (type === 'checkbox') { if (type === 'checkbox') {
return `@getBindingGroupValue( ${block.component}._bindingGroups[${bindingGroup}] )`; return `@getBindingGroupValue( #component._bindingGroups[${bindingGroup}] )`;
} }
return `${state.parentNode}.__value`; return `${state.parentNode}.__value`;

4
src/generators/dom/visitors/Element/Element.ts
Unescape View File

@ -63,7 +63,7 @@ export default function visitElement(
if (state.parentNode) { if (state.parentNode) {
block.builders.mount.addLine(`@appendNode( ${name}, ${state.parentNode} );`); block.builders.mount.addLine(`@appendNode( ${name}, ${state.parentNode} );`);
} else { } else {
block.builders.mount.addLine(`@insertNode( ${name}, ${block.target}, anchor );`); block.builders.mount.addLine(`@insertNode( ${name}, #target, anchor );`);
} }
// add CSS encapsulation attribute // add CSS encapsulation attribute
@ -97,7 +97,7 @@ export default function visitElement(
const updates: string[] = []; const updates: string[] = [];
if (childState.usesComponent) { if (childState.usesComponent) {
initialProps.push(`component: ${block.component}`); initialProps.push(`component: #component`);
} }
childState.allUsedContexts.forEach((contextName: string) => { childState.allUsedContexts.forEach((contextName: string) => {

8
src/generators/dom/visitors/Element/EventHandler.ts
Unescape View File

@ -24,7 +24,7 @@ export default function visitEventHandler(
// TODO verify that it's a valid callee (i.e. built-in or declared method) // TODO verify that it's a valid callee (i.e. built-in or declared method)
generator.code.prependRight( generator.code.prependRight(
attribute.expression.start, attribute.expression.start,
`${block.component}.` `${block.alias('component')}.`
); );
if (shouldHoist) state.usesComponent = true; // this feels a bit hacky but it works! if (shouldHoist) state.usesComponent = true; // this feels a bit hacky but it works!
} }
@ -45,7 +45,7 @@ export default function visitEventHandler(
const declarations = usedContexts.map(name => { const declarations = usedContexts.map(name => {
if (name === 'state') { if (name === 'state') {
if (shouldHoist) state.usesComponent = true; if (shouldHoist) state.usesComponent = true;
return `var state = ${block.component}.get();`; return `var state = #component.get();`;
} }
const listName = block.listNames.get(name); const listName = block.listNames.get(name);
@ -63,7 +63,7 @@ export default function visitEventHandler(
// create the handler body // create the handler body
const handlerBody = deindent` const handlerBody = deindent`
${state.usesComponent && `var ${block.component} = this._svelte.component;`} ${state.usesComponent && `var ${block.alias('component')} = this._svelte.component;`}
${declarations} ${declarations}
[✂${attribute.expression.start}-${attribute.expression.end}✂]; [✂${attribute.expression.start}-${attribute.expression.end}✂];
`; `;
@ -72,7 +72,7 @@ export default function visitEventHandler(
block.addVariable(handlerName); block.addVariable(handlerName);
block.builders.hydrate.addBlock(deindent` block.builders.hydrate.addBlock(deindent`
${handlerName} = @template.events.${name}.call( ${block.component}, ${state.parentNode}, function ( event ) { ${handlerName} = @template.events.${name}.call( #component, ${state.parentNode}, function ( event ) {
${handlerBody} ${handlerBody}
}); });
`); `);

4
src/generators/dom/visitors/Element/Ref.ts
Unescape View File

@ -14,11 +14,11 @@ export default function visitRef(
const name = attribute.name; const name = attribute.name;
block.builders.mount.addLine( block.builders.mount.addLine(
`${block.component}.refs.${name} = ${state.parentNode};` `#component.refs.${name} = ${state.parentNode};`
); );
block.builders.unmount.addLine(deindent` block.builders.unmount.addLine(deindent`
if ( ${block.component}.refs.${name} === ${state.parentNode} ) ${block.component}.refs.${name} = null; if ( #component.refs.${name} === ${state.parentNode} ) #component.refs.${name} = null;
`); `);
generator.usesRefs = true; // so this component.refs object is created generator.usesRefs = true; // so this component.refs object is created

12
src/generators/dom/visitors/Element/addTransitions.ts
Unescape View File

@ -23,17 +23,17 @@ export default function addTransitions(
const fn = `@template.transitions.${intro.name}`; const fn = `@template.transitions.${intro.name}`;
block.builders.intro.addBlock(deindent` block.builders.intro.addBlock(deindent`
${block.component}._renderHooks.push( function () { #component._renderHooks.push( function () {
if ( !${name} ) ${name} = @wrapTransition( ${state.name}, ${fn}, ${snippet}, true, null ); if ( !${name} ) ${name} = @wrapTransition( ${state.name}, ${fn}, ${snippet}, true, null );
${name}.run( true, function () { ${name}.run( true, function () {
${block.component}.fire( 'intro.end', { node: ${state.name} }); #component.fire( 'intro.end', { node: ${state.name} });
}); });
}); });
`); `);
block.builders.outro.addBlock(deindent` block.builders.outro.addBlock(deindent`
${name}.run( false, function () { ${name}.run( false, function () {
${block.component}.fire( 'outro.end', { node: ${state.name} }); #component.fire( 'outro.end', { node: ${state.name} });
if ( --#outros === 0 ) #outrocallback(); if ( --#outros === 0 ) #outrocallback();
${name} = null; ${name} = null;
}); });
@ -58,10 +58,10 @@ export default function addTransitions(
} }
block.builders.intro.addBlock(deindent` block.builders.intro.addBlock(deindent`
${block.component}._renderHooks.push( function () { #component._renderHooks.push( function () {
${introName} = @wrapTransition( ${state.name}, ${fn}, ${snippet}, true, null ); ${introName} = @wrapTransition( ${state.name}, ${fn}, ${snippet}, true, null );
${introName}.run( true, function () { ${introName}.run( true, function () {
${block.component}.fire( 'intro.end', { node: ${state.name} }); #component.fire( 'intro.end', { node: ${state.name} });
}); });
}); });
`); `);
@ -80,7 +80,7 @@ export default function addTransitions(
block.builders.outro.addBlock(deindent` block.builders.outro.addBlock(deindent`
${outroName} = @wrapTransition( ${state.name}, ${fn}, ${snippet}, false, null ); ${outroName} = @wrapTransition( ${state.name}, ${fn}, ${snippet}, false, null );
${outroName}.run( false, function () { ${outroName}.run( false, function () {
${block.component}.fire( 'outro.end', { node: ${state.name} }); #component.fire( 'outro.end', { node: ${state.name} });
if ( --#outros === 0 ) #outrocallback(); if ( --#outros === 0 ) #outrocallback();
}); });
`); `);

18
src/generators/dom/visitors/Element/meta/Window.ts
Unescape View File

@ -47,13 +47,13 @@ export default function visitWindow(
// allow event.stopPropagation(), this.select() etc // allow event.stopPropagation(), this.select() etc
generator.code.prependRight( generator.code.prependRight(
attribute.expression.start, attribute.expression.start,
`${block.component}.` `${block.alias('component')}.`
); );
} }
const handlerName = block.getUniqueName(`onwindow${attribute.name}`); const handlerName = block.getUniqueName(`onwindow${attribute.name}`);
const handlerBody = deindent` const handlerBody = deindent`
${usesState && `var state = ${block.component}.get();`} ${usesState && `var state = #component.get();`}
[✂${attribute.expression.start}-${attribute.expression.end}✂]; [✂${attribute.expression.start}-${attribute.expression.end}✂];
`; `;
@ -113,7 +113,7 @@ export default function visitWindow(
${event === 'scroll' && `${lock} = true;`} ${event === 'scroll' && `${lock} = true;`}
${generator.options.dev && `component._updatingReadonlyProperty = true;`} ${generator.options.dev && `component._updatingReadonlyProperty = true;`}
${block.component}.set({ #component.set({
${props} ${props}
}); });
@ -141,10 +141,10 @@ export default function visitWindow(
function ${observerCallback} () { function ${observerCallback} () {
if ( ${lock} ) return; if ( ${lock} ) return;
var x = ${bindings.scrollX var x = ${bindings.scrollX
? `${block.component}.get( '${bindings.scrollX}' )` ? `#component.get( '${bindings.scrollX}' )`
: `window.scrollX`}; : `window.scrollX`};
var y = ${bindings.scrollY var y = ${bindings.scrollY
? `${block.component}.get( '${bindings.scrollY}' )` ? `#component.get( '${bindings.scrollY}' )`
: `window.scrollY`}; : `window.scrollY`};
window.scrollTo( x, y ); window.scrollTo( x, y );
}; };
@ -152,17 +152,17 @@ export default function visitWindow(
if (bindings.scrollX) if (bindings.scrollX)
block.builders.init.addLine( block.builders.init.addLine(
`${block.component}.observe( '${bindings.scrollX}', ${observerCallback} );` `#component.observe( '${bindings.scrollX}', ${observerCallback} );`
); );
if (bindings.scrollY) if (bindings.scrollY)
block.builders.init.addLine( block.builders.init.addLine(
`${block.component}.observe( '${bindings.scrollY}', ${observerCallback} );` `#component.observe( '${bindings.scrollY}', ${observerCallback} );`
); );
} else if (bindings.scrollX || bindings.scrollY) { } else if (bindings.scrollX || bindings.scrollY) {
const isX = !!bindings.scrollX; const isX = !!bindings.scrollX;
block.builders.init.addBlock(deindent` block.builders.init.addBlock(deindent`
${block.component}.observe( '${bindings.scrollX || #component.observe( '${bindings.scrollX ||
bindings.scrollY}', function ( ${isX ? 'x' : 'y'} ) { bindings.scrollY}', function ( ${isX ? 'x' : 'y'} ) {
if ( ${lock} ) return; if ( ${lock} ) return;
window.scrollTo( ${isX ? 'x, window.scrollY' : 'window.scrollX, y'} ); window.scrollTo( ${isX ? 'x, window.scrollY' : 'window.scrollX, y'} );
@ -175,7 +175,7 @@ export default function visitWindow(
const handlerName = block.getUniqueName(`onlinestatuschanged`); const handlerName = block.getUniqueName(`onlinestatuschanged`);
block.builders.init.addBlock(deindent` block.builders.init.addBlock(deindent`
function ${handlerName} ( event ) { function ${handlerName} ( event ) {
${block.component}.set({ ${bindings.online}: navigator.onLine }); #component.set({ ${bindings.online}: navigator.onLine });
}; };
window.addEventListener( 'online', ${handlerName} ); window.addEventListener( 'online', ${handlerName} );
window.addEventListener( 'offline', ${handlerName} ); window.addEventListener( 'offline', ${handlerName} );

26
src/generators/dom/visitors/IfBlock.ts
Unescape View File

@ -136,12 +136,12 @@ function simple(
{ name, anchor, params, if_name } { name, anchor, params, if_name }
) { ) {
block.builders.init.addBlock(deindent` block.builders.init.addBlock(deindent`
var ${name} = (${branch.condition}) && ${branch.block}( ${params}, ${block.component} ); var ${name} = (${branch.condition}) && ${branch.block}( ${params}, #component );
`); `);
const isTopLevel = !state.parentNode; const isTopLevel = !state.parentNode;
const mountOrIntro = branch.hasIntroMethod ? 'intro' : 'mount'; const mountOrIntro = branch.hasIntroMethod ? 'intro' : 'mount';
const targetNode = state.parentNode || block.target; const targetNode = state.parentNode || '#target';
const anchorNode = state.parentNode ? 'null' : 'anchor'; const anchorNode = state.parentNode ? 'null' : 'anchor';
block.builders.mount.addLine( block.builders.mount.addLine(
@ -156,7 +156,7 @@ function simple(
if ( ${name} ) { if ( ${name} ) {
${name}.update( changed, ${params} ); ${name}.update( changed, ${params} );
} else { } else {
${name} = ${branch.block}( ${params}, ${block.component} ); ${name} = ${branch.block}( ${params}, #component );
if ( ${name} ) ${name}.create(); if ( ${name} ) ${name}.create();
} }
@ -166,7 +166,7 @@ function simple(
if ( ${name} ) { if ( ${name} ) {
${name}.update( changed, ${params} ); ${name}.update( changed, ${params} );
} else { } else {
${name} = ${branch.block}( ${params}, ${block.component} ); ${name} = ${branch.block}( ${params}, #component );
${name}.create(); ${name}.create();
${name}.mount( ${parentNode}, ${anchor} ); ${name}.mount( ${parentNode}, ${anchor} );
} }
@ -174,14 +174,14 @@ function simple(
: branch.hasIntroMethod : branch.hasIntroMethod
? deindent` ? deindent`
if ( !${name} ) { if ( !${name} ) {
${name} = ${branch.block}( ${params}, ${block.component} ); ${name} = ${branch.block}( ${params}, #component );
${name}.create(); ${name}.create();
} }
${name}.intro( ${parentNode}, ${anchor} ); ${name}.intro( ${parentNode}, ${anchor} );
` `
: deindent` : deindent`
if ( !${name} ) { if ( !${name} ) {
${name} = ${branch.block}( ${params}, ${block.component} ); ${name} = ${branch.block}( ${params}, #component );
${name}.create(); ${name}.create();
${name}.mount( ${parentNode}, ${anchor} ); ${name}.mount( ${parentNode}, ${anchor} );
} }
@ -239,13 +239,13 @@ function compound(
} }
var ${current_block} = ${get_block}( ${params} ); var ${current_block} = ${get_block}( ${params} );
var ${name} = ${current_block_and}${current_block}( ${params}, ${block.component} ); var ${name} = ${current_block_and}${current_block}( ${params}, #component );
`); `);
const isTopLevel = !state.parentNode; const isTopLevel = !state.parentNode;
const mountOrIntro = branches[0].hasIntroMethod ? 'intro' : 'mount'; const mountOrIntro = branches[0].hasIntroMethod ? 'intro' : 'mount';
const targetNode = state.parentNode || block.target; const targetNode = state.parentNode || '#target';
const anchorNode = state.parentNode ? 'null' : 'anchor'; const anchorNode = state.parentNode ? 'null' : 'anchor';
block.builders.mount.addLine( block.builders.mount.addLine(
`${if_name}${name}.${mountOrIntro}( ${targetNode}, ${anchorNode} );` `${if_name}${name}.${mountOrIntro}( ${targetNode}, ${anchorNode} );`
@ -264,7 +264,7 @@ function compound(
${name}.unmount(); ${name}.unmount();
${name}.destroy(); ${name}.destroy();
}`} }`}
${name} = ${current_block_and}${current_block}( ${params}, ${block.component} ); ${name} = ${current_block_and}${current_block}( ${params}, #component );
${if_name}${name}.create(); ${if_name}${name}.create();
${if_name}${name}.${mountOrIntro}( ${parentNode}, ${anchor} ); ${if_name}${name}.${mountOrIntro}( ${parentNode}, ${anchor} );
`; `;
@ -339,19 +339,19 @@ function compoundWithOutros(
if (hasElse) { if (hasElse) {
block.builders.init.addBlock(deindent` block.builders.init.addBlock(deindent`
${current_block_index} = ${get_block}( ${params} ); ${current_block_index} = ${get_block}( ${params} );
${name} = ${if_blocks}[ ${current_block_index} ] = ${if_block_creators}[ ${current_block_index} ]( ${params}, ${block.component} ); ${name} = ${if_blocks}[ ${current_block_index} ] = ${if_block_creators}[ ${current_block_index} ]( ${params}, #component );
`); `);
} else { } else {
block.builders.init.addBlock(deindent` block.builders.init.addBlock(deindent`
if ( ~( ${current_block_index} = ${get_block}( ${params} ) ) ) { if ( ~( ${current_block_index} = ${get_block}( ${params} ) ) ) {
${name} = ${if_blocks}[ ${current_block_index} ] = ${if_block_creators}[ ${current_block_index} ]( ${params}, ${block.component} ); ${name} = ${if_blocks}[ ${current_block_index} ] = ${if_block_creators}[ ${current_block_index} ]( ${params}, #component );
} }
`); `);
} }
const isTopLevel = !state.parentNode; const isTopLevel = !state.parentNode;
const mountOrIntro = branches[0].hasIntroMethod ? 'intro' : 'mount'; const mountOrIntro = branches[0].hasIntroMethod ? 'intro' : 'mount';
const targetNode = state.parentNode || block.target; const targetNode = state.parentNode || '#target';
const anchorNode = state.parentNode ? 'null' : 'anchor'; const anchorNode = state.parentNode ? 'null' : 'anchor';
block.builders.mount.addLine( block.builders.mount.addLine(
@ -371,7 +371,7 @@ function compoundWithOutros(
const createNewBlock = deindent` const createNewBlock = deindent`
${name} = ${if_blocks}[ ${current_block_index} ]; ${name} = ${if_blocks}[ ${current_block_index} ];
if ( !${name} ) { if ( !${name} ) {
${name} = ${if_blocks}[ ${current_block_index} ] = ${if_block_creators}[ ${current_block_index} ]( ${params}, ${block.component} ); ${name} = ${if_blocks}[ ${current_block_index} ] = ${if_block_creators}[ ${current_block_index} ]( ${params}, #component );
${name}.create(); ${name}.create();
} }
${name}.${mountOrIntro}( ${parentNode}, ${anchor} ); ${name}.${mountOrIntro}( ${parentNode}, ${anchor} );

6
src/generators/dom/visitors/YieldTag.ts
Unescape View File

@ -7,13 +7,13 @@ export default function visitYieldTag(
block: Block, block: Block,
state: State state: State
) { ) {
const parentNode = state.parentNode || block.target; const parentNode = state.parentNode || '#target';
block.builders.mount.addLine( block.builders.mount.addLine(
`if ( ${block.component}._yield ) ${block.component}._yield.mount( ${parentNode}, null );` `if ( #component._yield ) #component._yield.mount( ${parentNode}, null );`
); );
block.builders.unmount.addLine( block.builders.unmount.addLine(
`if ( ${block.component}._yield ) ${block.component}._yield.unmount();` `if ( #component._yield ) #component._yield.unmount();`
); );
} }

12
src/generators/dom/visitors/shared/binding/getSetter.ts
Unescape View File

@ -22,25 +22,25 @@ export default function getSetter({
return deindent` return deindent`
var list = this.${context}.${block.listNames.get(name)}; var list = this.${context}.${block.listNames.get(name)};
var index = this.${context}.${block.indexNames.get(name)}; var index = this.${context}.${block.indexNames.get(name)};
${computed && `var state = ${block.component}.get();`} ${computed && `var state = #component.get();`}
list[index]${tail} = ${value}; list[index]${tail} = ${value};
${computed ? ${computed ?
`${block.component}._set({ ${dependencies.map((prop: string) => `${prop}: state.${prop}`).join(', ')} });` : `#component._set({ ${dependencies.map((prop: string) => `${prop}: state.${prop}`).join(', ')} });` :
`${block.component}._set({ ${dependencies.map((prop: string) => `${prop}: ${block.component}.get( '${prop}' )`).join(', ')} });` `#component._set({ ${dependencies.map((prop: string) => `${prop}: #component.get( '${prop}' )`).join(', ')} });`
} }
`; `;
} }
if (attribute.value.type === 'MemberExpression') { if (attribute.value.type === 'MemberExpression') {
return deindent` return deindent`
var state = ${block.component}.get(); var state = #component.get();
${snippet} = ${value}; ${snippet} = ${value};
${block.component}._set({ ${dependencies.map((prop: string) => `${prop}: state.${prop}`).join(', ')} }); #component._set({ ${dependencies.map((prop: string) => `${prop}: state.${prop}`).join(', ')} });
`; `;
} }
return `${block.component}._set({ ${name}: ${value} });`; return `#component._set({ ${name}: ${value} });`;
} }
function isComputed(node: Node) { function isComputed(node: Node) {

Write Preview
Loading…
Cancel
Save