run prettier

pull/673/head
Rich Harris 8 years ago
parent 8402ae9c24
commit ebae9f9c28

@ -128,14 +128,12 @@ export default class Block {
this.addVariable(name); this.addVariable(name);
this.builders.create.addLine(`${name} = ${renderStatement};`); this.builders.create.addLine(`${name} = ${renderStatement};`);
this.builders.claim.addLine(`${name} = ${claimStatement};`) this.builders.claim.addLine(`${name} = ${claimStatement};`);
this.mount(name, parentNode); this.mount(name, parentNode);
if (isToplevel) { if (isToplevel) {
this.builders.unmount.addLine( this.builders.unmount.addLine(`@detachNode( ${name} );`);
`@detachNode( ${name} );`
);
} }
} }
@ -180,13 +178,9 @@ export default class Block {
mount(name: string, parentNode: string) { mount(name: string, parentNode: string) {
if (parentNode) { if (parentNode) {
this.builders.mount.addLine( this.builders.mount.addLine(`@appendNode( ${name}, ${parentNode} );`);
`@appendNode( ${name}, ${parentNode} );`
);
} else { } else {
this.builders.mount.addLine( this.builders.mount.addLine(`@insertNode( ${name}, #target, anchor );`);
`@insertNode( ${name}, #target, anchor );`
);
} }
} }
@ -347,11 +341,13 @@ export default class Block {
function ${this.name} ( ${this.params.join(', ')}, #component${this.key function ${this.name} ( ${this.params.join(', ')}, #component${this.key
? `, ${localKey}` ? `, ${localKey}`
: ''} ) { : ''} ) {
${this.variables.size > 0 && ( ${this.variables.size > 0 &&
`var ${Array.from(this.variables.keys()).map(key => { `var ${Array.from(this.variables.keys())
.map(key => {
const init = this.variables.get(key); const init = this.variables.get(key);
return init !== undefined ? `${key} = ${init}` : key; return init !== undefined ? `${key} = ${init}` : key;
}).join(', ')};`)} })
.join(', ')};`}
${!this.builders.init.isEmpty() && this.builders.init} ${!this.builders.init.isEmpty() && this.builders.init}

@ -86,7 +86,9 @@ export default function dom(
`( '${dep}' in newState && @differs( state.${dep}, oldState.${dep} ) )` `( '${dep}' in newState && @differs( state.${dep}, oldState.${dep} ) )`
) )
.join(' || ')}`; .join(' || ')}`;
const statement = `state.${key} = newState.${key} = @template.computed.${key}( ${deps.map(dep => `state.${dep}`).join(', ')} );`; const statement = `state.${key} = newState.${key} = @template.computed.${key}( ${deps
.map(dep => `state.${dep}`)
.join(', ')} );`;
computationBuilder.addConditionalLine(condition, statement); computationBuilder.addConditionalLine(condition, statement);
}); });
@ -113,7 +115,8 @@ export default function dom(
var oldState = this._state; var oldState = this._state;
this._state = @assign( {}, oldState, newState ); this._state = @assign( {}, oldState, newState );
${computations.length && `@recompute( this._state, newState, oldState, false )`} ${computations.length &&
`@recompute( this._state, newState, oldState, false )`}
@dispatchObservers( this, this._observers.pre, newState, oldState ); @dispatchObservers( this, this._observers.pre, newState, oldState );
${block.hasUpdateMethod && `this._fragment.update( newState, this._state );`} ${block.hasUpdateMethod && `this._fragment.update( newState, this._state );`}
@dispatchObservers( this, this._observers.post, newState, oldState ); @dispatchObservers( this, this._observers.post, newState, oldState );
@ -124,9 +127,7 @@ export default function dom(
`; `;
if (hasJs) { if (hasJs) {
builder.addBlock( builder.addBlock(`[✂${parsed.js.content.start}-${parsed.js.content.end}✂]`);
`[✂${parsed.js.content.start}-${parsed.js.content.end}✂]`
);
} }
if (generator.css && options.css !== false) { if (generator.css && options.css !== false) {
@ -150,9 +151,7 @@ export default function dom(
const prototypeBase = const prototypeBase =
`${name}.prototype` + `${name}.prototype` +
(templateProperties.methods (templateProperties.methods ? `, @template.methods` : '');
? `, @template.methods`
: '');
const proto = sharedPath const proto = sharedPath
? `@proto ` ? `@proto `
: deindent` : deindent`
@ -173,8 +172,7 @@ export default function dom(
? `@assign( @template.data(), options.data )` ? `@assign( @template.data(), options.data )`
: `options.data || {}`}; : `options.data || {}`};
${generator.metaBindings} ${generator.metaBindings}
${computations.length && ${computations.length && `@recompute( this._state, this._state, {}, true );`}
`@recompute( this._state, this._state, {}, true );`}
${options.dev && ${options.dev &&
Array.from(generator.expectedProperties).map( Array.from(generator.expectedProperties).map(
prop => prop =>
@ -206,13 +204,13 @@ export default function dom(
this._fragment = @create_main_fragment( this._state, this ); this._fragment = @create_main_fragment( this._state, this );
if ( options.target ) { if ( options.target ) {
${generator.hydratable ? ${generator.hydratable
deindent` ? deindent`
var nodes = @children( options.target ); var nodes = @children( options.target );
options.hydrate ? this._fragment.claim( nodes ) : this._fragment.create(); options.hydrate ? this._fragment.claim( nodes ) : this._fragment.create();
nodes.forEach( @detachNode ); nodes.forEach( @detachNode );
` : `
deindent` : deindent`
this._fragment.create(); this._fragment.create();
`} `}
this._fragment.mount( options.target, null ); this._fragment.mount( options.target, null );
@ -241,8 +239,7 @@ export default function dom(
${name}.prototype.teardown = ${name}.prototype.destroy = function destroy ( detach ) { ${name}.prototype.teardown = ${name}.prototype.destroy = function destroy ( detach ) {
this.fire( 'destroy' ); this.fire( 'destroy' );
${templateProperties.ondestroy && ${templateProperties.ondestroy && `@template.ondestroy.call( this );`}
`@template.ondestroy.call( this );`}
if ( detach !== false ) this._fragment.unmount(); if ( detach !== false ) this._fragment.unmount();
this._fragment.destroy(); this._fragment.destroy();
@ -255,7 +252,8 @@ export default function dom(
const usedHelpers = new Set(); const usedHelpers = new Set();
let result = builder.toString() let result = builder
.toString()
.replace(/@(\w+)\b/g, (match: string, name: string) => { .replace(/@(\w+)\b/g, (match: string, name: string) => {
if (name in shared) { if (name in shared) {
if (options.dev && `${name}Dev` in shared) name = `${name}Dev`; if (options.dev && `${name}Dev` in shared) name = `${name}Dev`;
@ -277,7 +275,9 @@ export default function dom(
: name; : name;
}); });
result = `import { ${names.join(', ')} } from ${stringify(sharedPath)};\n\n` + result; result =
`import { ${names.join(', ')} } from ${stringify(sharedPath)};\n\n` +
result;
} else { } else {
usedHelpers.forEach(key => { usedHelpers.forEach(key => {
const str = shared[key]; const str = shared[key];

@ -12,7 +12,12 @@ function isElseIf(node: Node) {
} }
function getChildState(parent: State, child = {}) { function getChildState(parent: State, child = {}) {
return assign({}, parent, { name: null, parentNode: null, parentNodes: 'nodes' }, child || {}); return assign(
{},
parent,
{ name: null, parentNode: null, parentNodes: 'nodes' },
child || {}
);
} }
// Whitespace inside one of these elements will not result in // Whitespace inside one of these elements will not result in
@ -225,7 +230,11 @@ const preprocessors = {
block.addDependencies(dependencies); block.addDependencies(dependencies);
// special case — <option value='{{foo}}'> — see below // special case — <option value='{{foo}}'> — see below
if (node.name === 'option' && attribute.name === 'value' && state.selectBindingDependencies) { if (
node.name === 'option' &&
attribute.name === 'value' &&
state.selectBindingDependencies
) {
state.selectBindingDependencies.forEach(prop => { state.selectBindingDependencies.forEach(prop => {
dependencies.forEach((dependency: string) => { dependencies.forEach((dependency: string) => {
generator.indirectDependencies.get(prop).add(dependency); generator.indirectDependencies.get(prop).add(dependency);
@ -258,7 +267,9 @@ const preprocessors = {
// so that if `foo.qux` changes, we know that we need to // so that if `foo.qux` changes, we know that we need to
// mark `bar` and `baz` as dirty too // mark `bar` and `baz` as dirty too
if (node.name === 'select') { if (node.name === 'select') {
const value = node.attributes.find((attribute: Node) => attribute.name === 'value'); const value = node.attributes.find(
(attribute: Node) => attribute.name === 'value'
);
if (value) { if (value) {
// TODO does this also apply to e.g. `<input type='checkbox' bind:group='foo'>`? // TODO does this also apply to e.g. `<input type='checkbox' bind:group='foo'>`?
const dependencies = block.findDependencies(value.value); const dependencies = block.findDependencies(value.value);

@ -28,9 +28,7 @@ export default function visitAttribute(
if (value.type === 'Text') { if (value.type === 'Text') {
// static attributes // static attributes
const result = isNaN(value.data) const result = isNaN(value.data) ? stringify(value.data) : value.data;
? stringify(value.data)
: value.data;
local.staticAttributes.push({ local.staticAttributes.push({
name: attribute.name, name: attribute.name,
value: result, value: result,

@ -112,9 +112,7 @@ export default function visitComponent(
local.update.addBlock(updates); local.update.addBlock(updates);
} }
const componentInitProperties = [ const componentInitProperties = [`_root: #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
if (hasChildren) { if (hasChildren) {
@ -132,9 +130,7 @@ export default function visitComponent(
`var ${yieldFragment} = ${childBlock.name}( ${params}, #component );` `var ${yieldFragment} = ${childBlock.name}( ${params}, #component );`
); );
block.builders.create.addLine( block.builders.create.addLine(`${yieldFragment}.create();`);
`${yieldFragment}.create();`
);
block.builders.claim.addLine( block.builders.claim.addLine(
`${yieldFragment}.claim( ${state.parentNodes} );` `${yieldFragment}.claim( ${state.parentNodes} );`
@ -229,8 +225,12 @@ export default function visitComponent(
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();`);
block.builders.claim.addLine(`${name}._fragment.claim( ${state.parentNodes} );`); block.builders.claim.addLine(
block.builders.mount.addLine(`${name}._fragment.mount( ${targetNode}, ${anchorNode} );` ); `${name}._fragment.claim( ${state.parentNodes} );`
);
block.builders.mount.addLine(
`${name}._fragment.mount( ${targetNode}, ${anchorNode} );`
);
if (!local.update.isEmpty()) block.builders.update.addBlock(local.update); if (!local.update.isEmpty()) block.builders.update.addBlock(local.update);
} }

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

@ -70,7 +70,8 @@ export default function visitEachBlock(
block.builders.mount.addBlock(deindent` block.builders.mount.addBlock(deindent`
if ( ${each_block_else} ) { if ( ${each_block_else} ) {
${each_block_else}.${mountOrIntro}( ${state.parentNode || '#target'}, null ); ${each_block_else}.${mountOrIntro}( ${state.parentNode ||
'#target'}, null );
} }
`); `);
@ -474,7 +475,5 @@ function unkeyed(
} }
`); `);
block.builders.destroy.addBlock( block.builders.destroy.addBlock(`@destroyEach( ${iterations}, false, 0 );`);
`@destroyEach( ${iterations}, false, 0 );`
);
} }

@ -81,7 +81,9 @@ export default function visitAttribute(
// annoying special case // annoying special case
const isMultipleSelect = const isMultipleSelect =
node.name === 'select' && node.name === 'select' &&
node.attributes.find((attr: Node) => attr.name.toLowerCase() === 'multiple'); // TODO use getStaticAttributeValue node.attributes.find(
(attr: Node) => attr.name.toLowerCase() === 'multiple'
); // TODO use getStaticAttributeValue
const i = block.getUniqueName('i'); const i = block.getUniqueName('i');
const option = block.getUniqueName('option'); const option = block.getUniqueName('option');

@ -16,7 +16,9 @@ export default function visitBinding(
attribute: Node attribute: Node
) { ) {
const { name } = getObject(attribute.value); const { name } = getObject(attribute.value);
const { snippet, contexts, dependencies } = block.contextualise(attribute.value); const { snippet, contexts, dependencies } = block.contextualise(
attribute.value
);
contexts.forEach(context => { contexts.forEach(context => {
if (!~state.allUsedContexts.indexOf(context)) if (!~state.allUsedContexts.indexOf(context))
@ -117,9 +119,7 @@ export default function visitBinding(
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(`#component._bindings.push( ${handler} );`);
`#component._bindings.push( ${handler} );`
);
if (attribute.name === 'currentTime') { if (attribute.name === 'currentTime') {
const frame = block.getUniqueName(`${state.parentNode}_animationframe`); const frame = block.getUniqueName(`${state.parentNode}_animationframe`);
@ -168,7 +168,8 @@ export default function visitBinding(
} }
block.builders.destroy.addLine( block.builders.destroy.addLine(
`@removeListener( ${state.parentNode}, '${eventName}', ${handler} );`); `@removeListener( ${state.parentNode}, '${eventName}', ${handler} );`
);
if (attribute.name === 'paused') { if (attribute.name === 'paused') {
block.builders.create.addLine( block.builders.create.addLine(

@ -51,17 +51,30 @@ export default function visitElement(
const isToplevel = !state.parentNode; const isToplevel = !state.parentNode;
block.addVariable(name); block.addVariable(name);
block.builders.create.addLine(`${name} = ${getRenderStatement(generator, childState.namespace, node.name)};`); block.builders.create.addLine(
`${name} = ${getRenderStatement(
generator,
childState.namespace,
node.name
)};`
);
if (generator.hydratable) { if (generator.hydratable) {
block.builders.claim.addBlock(deindent` block.builders.claim.addBlock(deindent`
${name} = ${getClaimStatement(generator, childState.namespace, state.parentNodes, node)}; ${name} = ${getClaimStatement(
generator,
childState.namespace,
state.parentNodes,
node
)};
var ${childState.parentNodes} = @children( ${name} ); var ${childState.parentNodes} = @children( ${name} );
`); `);
} }
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}, #target, anchor );`); block.builders.mount.addLine(`@insertNode( ${name}, #target, anchor );`);
} }
@ -131,9 +144,7 @@ export default function visitElement(
if (isToplevel) { if (isToplevel) {
// TODO we eventually need to consider what happens to elements // TODO we eventually need to consider what happens to elements
// that belong to the same outgroup as an outroing element... // that belong to the same outgroup as an outroing element...
block.builders.unmount.addLine( block.builders.unmount.addLine(`@detachNode( ${name} );`);
`@detachNode( ${name} );`
);
} }
if (node.name !== 'select') { if (node.name !== 'select') {
@ -219,7 +230,9 @@ function getClaimStatement(
const name = namespace ? node.name : node.name.toUpperCase(); const name = namespace ? node.name : node.name.toUpperCase();
return `@claimElement( ${nodes}, '${name}', ${attributes ? `{ ${attributes} }` : `{}`}, ${namespace === namespaces.svg ? true : false} )`; return `@claimElement( ${nodes}, '${name}', ${attributes
? `{ ${attributes} }`
: `{}`}, ${namespace === namespaces.svg ? true : false} )`;
} }
function quoteProp(name: string) { function quoteProp(name: string) {

@ -63,7 +63,8 @@ export default function visitEventHandler(
// create the handler body // create the handler body
const handlerBody = deindent` const handlerBody = deindent`
${state.usesComponent && `var ${block.alias('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}];
`; `;

@ -105,9 +105,7 @@ export default function visitIfBlock(
simple(generator, block, state, node, branches[0], dynamic, vars); simple(generator, block, state, node, branches[0], dynamic, vars);
} }
block.builders.create.addLine( block.builders.create.addLine(`${if_name}${name}.create();`);
`${if_name}${name}.create();`
);
block.builders.claim.addLine( block.builders.claim.addLine(
`${if_name}${name}.claim( ${state.parentNodes} );` `${if_name}${name}.claim( ${state.parentNodes} );`
@ -254,12 +252,12 @@ function compound(
const parentNode = state.parentNode || `${anchor}.parentNode`; const parentNode = state.parentNode || `${anchor}.parentNode`;
const changeBlock = deindent` const changeBlock = deindent`
${hasElse ? ${hasElse
deindent` ? deindent`
${name}.unmount(); ${name}.unmount();
${name}.destroy(); ${name}.destroy();
` : `
deindent` : deindent`
if ( ${name} ) { if ( ${name} ) {
${name}.unmount(); ${name}.unmount();
${name}.destroy(); ${name}.destroy();
@ -285,13 +283,9 @@ function compound(
`); `);
} }
block.builders.unmount.addLine( block.builders.unmount.addLine(`${if_name}${name}.unmount();`);
`${if_name}${name}.unmount();`
);
block.builders.destroy.addLine( block.builders.destroy.addLine(`${if_name}${name}.destroy();`);
`${if_name}${name}.destroy();`
);
} }
// if any of the siblings have outros, we need to keep references to the blocks // if any of the siblings have outros, we need to keep references to the blocks

@ -19,7 +19,9 @@ export default function visitMustacheTag(
block.addElement( block.addElement(
name, name,
`@createText( ${value} = ${snippet} )`, `@createText( ${value} = ${snippet} )`,
generator.hydratable ? `@claimText( ${state.parentNodes}, ${value} = ${snippet} )` : '', generator.hydratable
? `@claimText( ${state.parentNodes}, ${value} = ${snippet} )`
: '',
state.parentNode, state.parentNode,
true true
); );

@ -14,7 +14,9 @@ export default function visitText(
block.addElement( block.addElement(
node._state.name, node._state.name,
`@createText( ${stringify(node.data)} )`, `@createText( ${stringify(node.data)} )`,
generator.hydratable ? `@claimText( ${state.parentNodes}, ${stringify(node.data)} )` : '', generator.hydratable
? `@claimText( ${state.parentNodes}, ${stringify(node.data)} )`
: '',
state.parentNode, state.parentNode,
node.usedAsAnchor node.usedAsAnchor
); );

@ -25,10 +25,13 @@ export default function getSetter({
${computed && `var state = #component.get();`} ${computed && `var state = #component.get();`}
list[index]${tail} = ${value}; list[index]${tail} = ${value};
${computed ? ${computed
`#component._set({ ${dependencies.map((prop: string) => `${prop}: state.${prop}`).join(', ')} });` : ? `#component._set({ ${dependencies
`#component._set({ ${dependencies.map((prop: string) => `${prop}: #component.get( '${prop}' )`).join(', ')} });` .map((prop: string) => `${prop}: state.${prop}`)
} .join(', ')} });`
: `#component._set({ ${dependencies
.map((prop: string) => `${prop}: #component.get( '${prop}' )`)
.join(', ')} });`}
`; `;
} }
@ -36,7 +39,9 @@ export default function getSetter({
return deindent` return deindent`
var state = #component.get(); var state = #component.get();
${snippet} = ${value}; ${snippet} = ${value};
#component._set({ ${dependencies.map((prop: string) => `${prop}: state.${prop}`).join(', ')} }); #component._set({ ${dependencies
.map((prop: string) => `${prop}: state.${prop}`)
.join(', ')} });
`; `;
} }

@ -59,9 +59,7 @@ export default function ssr(
${name}.filename = ${stringify(options.filename)}; ${name}.filename = ${stringify(options.filename)};
${name}.data = function () { ${name}.data = function () {
return ${templateProperties.data return ${templateProperties.data ? `@template.data()` : `{}`};
? `@template.data()`
: `{}`};
}; };
${name}.render = function ( state, options ) { ${name}.render = function ( state, options ) {
@ -71,7 +69,9 @@ export default function ssr(
${computations.map( ${computations.map(
({ key, deps }) => ({ key, deps }) =>
`state.${key} = @template.computed.${key}( ${deps.map(dep => `state.${dep}`).join(', ')} );` `state.${key} = @template.computed.${key}( ${deps
.map(dep => `state.${dep}`)
.join(', ')} );`
)} )}
${generator.bindings.length && ${generator.bindings.length &&

@ -60,7 +60,9 @@ export default function visitComponent(
? getTailSnippet(binding.value) ? getTailSnippet(binding.value)
: ''; : '';
const keypath = block.contexts.has(name) ? `${name}${tail}` : `state.${name}${tail}`; const keypath = block.contexts.has(name)
? `${name}${tail}`
: `state.${name}${tail}`;
return `${binding.name}: ${keypath}`; return `${binding.name}: ${keypath}`;
}) })
) )

@ -10,7 +10,9 @@ export default function visitEachBlock(
) { ) {
const { dependencies, snippet } = block.contextualise(node.expression); const { dependencies, snippet } = block.contextualise(node.expression);
const open = `\${ ${node.else ? `${snippet}.length ? ` : ''}${snippet}.map( ${node.index const open = `\${ ${node.else
? `${snippet}.length ? `
: ''}${snippet}.map( ${node.index
? `( ${node.context}, ${node.index} )` ? `( ${node.context}, ${node.index} )`
: node.context} => \``; : node.context} => \``;
generator.append(open); generator.append(open);

@ -85,9 +85,7 @@ export default function processCss(
} }
shouldTransform = false; shouldTransform = false;
} } else if (child.type === 'PseudoElementSelector') {
else if (child.type === 'PseudoElementSelector') {
code.prependRight(c, attr); code.prependRight(c, attr);
shouldTransform = false; shouldTransform = false;
} }

@ -1,6 +1,9 @@
const start = /\n(\t+)/; const start = /\n(\t+)/;
export default function deindent(strings: TemplateStringsArray, ...values: any[]) { export default function deindent(
strings: TemplateStringsArray,
...values: any[]
) {
const indentation = start.exec(strings[0])[1]; const indentation = start.exec(strings[0])[1];
const pattern = new RegExp(`^${indentation}`, 'gm'); const pattern = new RegExp(`^${indentation}`, 'gm');

@ -146,7 +146,10 @@ function checkTypeAttribute(validator: Validator, node: Node) {
} }
if (attribute.value.length > 1 || attribute.value[0].type !== 'Text') { if (attribute.value.length > 1 || attribute.value[0].type !== 'Text') {
validator.error(`'type' attribute cannot be dynamic if input uses two-way binding`, attribute.start); validator.error(
`'type' attribute cannot be dynamic if input uses two-way binding`,
attribute.start
);
} }
return attribute.value[0].data; return attribute.value[0].data;

Loading…
Cancel
Save