diff --git a/src/generators/Generator.ts b/src/generators/Generator.ts
index d912f151e67d..48a93cc7f79d 100644
--- a/src/generators/Generator.ts
+++ b/src/generators/Generator.ts
@@ -210,10 +210,10 @@ export default class Generator {
}
if (globalWhitelist.has(name)) {
- code.prependRight(node.start, `( '${name}' in state ? state.`);
+ code.prependRight(node.start, `('${name}' in state ? state.`);
code.appendLeft(
node.object ? node.object.end : node.end,
- ` : ${name} )`
+ ` : ${name})`
);
} else {
code.prependRight(node.start, `state.`);
@@ -337,7 +337,7 @@ export default class Generator {
if (defaultImport) {
statements.push(
- `${name} = ( ${name} && ${name}.__esModule ) ? ${name}['default'] : ${name};`
+ `${name} = (${name} && ${name}.__esModule) ? ${name}['default'] : ${name};`
);
}
});
@@ -629,8 +629,8 @@ export default class Generator {
// user code gets wrapped in an IIFE
if (js.content.body.length) {
const prefix = hasDefaultExport
- ? `var ${this.alias('template')} = (function () {`
- : `(function () {`;
+ ? `var ${this.alias('template')} = (function() {`
+ : `(function() {`;
this.code
.prependRight(js.content.start, prefix)
.appendLeft(js.content.end, '}());');
diff --git a/src/generators/dom/Block.ts b/src/generators/dom/Block.ts
index 0cfce0924abc..8acd99b2a8ec 100644
--- a/src/generators/dom/Block.ts
+++ b/src/generators/dom/Block.ts
@@ -135,7 +135,7 @@ export default class Block {
this.mount(name, parentNode);
if (isToplevel) {
- this.builders.unmount.addLine(`@detachNode( ${name} );`);
+ this.builders.unmount.addLine(`@detachNode(${name});`);
}
}
@@ -180,9 +180,9 @@ export default class Block {
mount(name: string, parentNode: string) {
if (parentNode) {
- this.builders.mount.addLine(`@appendNode( ${name}, ${parentNode} );`);
+ this.builders.mount.addLine(`@appendNode(${name}, ${parentNode});`);
} else {
- this.builders.mount.addLine(`@insertNode( ${name}, #target, anchor );`);
+ this.builders.mount.addLine(`@insertNode(${name}, #target, anchor);`);
}
}
@@ -225,7 +225,7 @@ export default class Block {
properties.addBlock(`create: @noop,`);
} else {
properties.addBlock(deindent`
- create: function () {
+ create: function() {
${this.builders.create}
${!this.builders.hydrate.isEmpty() && `this.hydrate();`}
},
@@ -237,7 +237,7 @@ export default class Block {
properties.addBlock(`claim: @noop,`);
} else {
properties.addBlock(deindent`
- claim: function ( nodes ) {
+ claim: function(nodes) {
${this.builders.claim}
${!this.builders.hydrate.isEmpty() && `this.hydrate();`}
},
@@ -247,7 +247,7 @@ export default class Block {
if (!this.builders.hydrate.isEmpty()) {
properties.addBlock(deindent`
- hydrate: function ( nodes ) {
+ hydrate: function(nodes) {
${this.builders.hydrate}
},
`);
@@ -257,7 +257,7 @@ export default class Block {
properties.addBlock(`mount: @noop,`);
} else {
properties.addBlock(deindent`
- mount: function ( #target, anchor ) {
+ mount: function(#target, anchor) {
${this.builders.mount}
},
`);
@@ -268,7 +268,7 @@ export default class Block {
properties.addBlock(`update: @noop,`);
} else {
properties.addBlock(deindent`
- update: function ( changed, ${this.params.join(', ')} ) {
+ update: function(changed, ${this.params.join(', ')}) {
${this.builders.update}
},
`);
@@ -278,20 +278,20 @@ export default class Block {
if (this.hasIntroMethod) {
if (hasIntros) {
properties.addBlock(deindent`
- intro: function ( #target, anchor ) {
- if ( ${introing} ) return;
+ intro: function(#target, anchor) {
+ if (${introing}) return;
${introing} = true;
${hasOutros && `${outroing} = false;`}
${this.builders.intro}
- this.mount( #target, anchor );
+ this.mount(#target, anchor);
},
`);
} else {
properties.addBlock(deindent`
- intro: function ( #target, anchor ) {
- this.mount( #target, anchor );
+ intro: function(#target, anchor) {
+ this.mount(#target, anchor);
},
`);
}
@@ -300,8 +300,8 @@ export default class Block {
if (this.hasOutroMethod) {
if (hasOutros) {
properties.addBlock(deindent`
- outro: function ( ${this.alias('outrocallback')} ) {
- if ( ${outroing} ) return;
+ outro: function(${this.alias('outrocallback')}) {
+ if (${outroing}) return;
${outroing} = true;
${hasIntros && `${introing} = false;`}
@@ -312,7 +312,7 @@ export default class Block {
`);
} else {
properties.addBlock(deindent`
- outro: function ( outrocallback ) {
+ outro: function(outrocallback) {
outrocallback();
},
`);
@@ -323,7 +323,7 @@ export default class Block {
properties.addBlock(`unmount: @noop,`);
} else {
properties.addBlock(deindent`
- unmount: function () {
+ unmount: function() {
${this.builders.unmount}
},
`);
@@ -333,16 +333,14 @@ export default class Block {
properties.addBlock(`destroy: @noop`);
} else {
properties.addBlock(deindent`
- destroy: function () {
+ destroy: function() {
${this.builders.destroy}
}
`);
}
return deindent`
- function ${this.name} ( ${this.params.join(', ')}, #component${this.key
- ? `, ${localKey}`
- : ''} ) {
+ function ${this.name}(${this.params.join(', ')}, #component${this.key ? `, ${localKey}` : ''}) {
${this.variables.size > 0 &&
`var ${Array.from(this.variables.keys())
.map(key => {
diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts
index 1c810ddeb7b3..482f56af28a7 100644
--- a/src/generators/dom/index.ts
+++ b/src/generators/dom/index.ts
@@ -91,9 +91,9 @@ export default function dom(
const condition = `isInitial || ${deps.map(dep => `changed.${dep}`).join(' || ')}`;
- const statement = `if ( @differs( ( state.${key} = @template.computed.${key}( ${deps
+ const statement = `if (@differs((state.${key} = @template.computed.${key}(${deps
.map(dep => `state.${dep}`)
- .join(', ')} ) ), oldState.${key} ) ) changed.${key} = true;`;
+ .join(', ')})), oldState.${key})) changed.${key} = true;`;
computationBuilder.addConditional(condition, statement);
});
@@ -105,8 +105,8 @@ export default function dom(
if (generator.needsEncapsulateHelper) {
builder.addBlock(deindent`
- function @encapsulateStyles ( node ) {
- @setAttribute( node, '${generator.stylesheet.id}', '' );
+ function @encapsulateStyles(node) {
+ @setAttribute(node, "${generator.stylesheet.id}", "");
}
`);
}
@@ -118,11 +118,11 @@ export default function dom(
if (styles && generator.options.css !== false && !generator.customElement) {
builder.addBlock(deindent`
- function @add_css () {
- var style = @createElement( 'style' );
+ function @add_css() {
+ var style = @createElement("style");
style.id = '${generator.stylesheet.id}-style';
style.textContent = ${styles};
- @appendNode( style, document.head );
+ @appendNode(style, document.head);
}
`);
}
@@ -149,30 +149,28 @@ export default function dom(
const constructorBody = deindent`
${options.dev && !generator.customElement &&
- `if ( !options || (!options.target && !options._root) ) throw new Error( "'target' is a required option" );`}
+ `if (!options || (!options.target && !options._root)) throw new Error("'target' is a required option");`}
this.options = options;
${generator.usesRefs && `this.refs = {};`}
this._state = ${templateProperties.data
- ? `@assign( @template.data(), options.data )`
+ ? `@assign(@template.data(), options.data)`
: `options.data || {}`};
${generator.metaBindings}
- ${computations.length && `this._recompute( {}, this._state, {}, true );`}
+ ${computations.length && `this._recompute({}, this._state, {}, true);`}
${options.dev &&
Array.from(generator.expectedProperties).map(
prop =>
- `if ( !( '${prop}' in this._state ) ) console.warn( "Component was created without expected data property '${prop}'" );`
+ `if (!('${prop}' in this._state)) console.warn("Component was created without expected data property '${prop}'");`
)}
${generator.bindingGroups.length &&
- `this._bindingGroups = [ ${Array(generator.bindingGroups.length)
- .fill('[]')
- .join(', ')} ];`}
+ `this._bindingGroups = [${Array(generator.bindingGroups.length).fill('[]').join(', ')}];`}
this._observers = {
- pre: Object.create( null ),
- post: Object.create( null )
+ pre: Object.create(null),
+ post: Object.create(null)
};
- this._handlers = Object.create( null );
+ this._handlers = Object.create(null);
${templateProperties.ondestroy && `this._handlers.destroy = [@template.ondestroy]`}
this._root = options._root || this;
@@ -186,13 +184,13 @@ export default function dom(
${css && `this.shadowRoot.innerHTML = \`\`;`}
` :
(generator.stylesheet.hasStyles && options.css !== false &&
- `if ( !document.getElementById( '${generator.stylesheet.id}-style' ) ) @add_css();`)
+ `if (!document.getElementById("${generator.stylesheet.id}-style")) @add_css();`)
}
- ${templateProperties.oncreate && `var oncreate = @template.oncreate.bind( this );`}
+ ${templateProperties.oncreate && `var oncreate = @template.oncreate.bind(this);`}
${(templateProperties.oncreate || generator.hasComponents || generator.hasComplexBindings || generator.hasIntroTransitions) && deindent`
- if ( !options._root ) {
+ if (!options._root) {
this._oncreate = [${templateProperties.oncreate && `oncreate`}];
${(generator.hasComponents || generator.hasComplexBindings) && `this._beforecreate = [];`}
${(generator.hasComponents || generator.hasIntroTransitions) && `this._aftercreate = [];`}
@@ -205,22 +203,22 @@ export default function dom(
${generator.slots.size && `this.slots = {};`}
- this._fragment = @create_main_fragment( this._state, this );
+ this._fragment = @create_main_fragment(this._state, this);
- if ( options.target ) {
+ if (options.target) {
${generator.hydratable
? deindent`
- var nodes = @children( options.target );
- options.hydrate ? this._fragment.claim( nodes ) : this._fragment.create();
- nodes.forEach( @detachNode );
+ var nodes = @children(options.target);
+ options.hydrate ? this._fragment.claim(nodes) : this._fragment.create();
+ nodes.forEach(@detachNode);
` :
deindent`
- ${options.dev && `if ( options.hydrate ) throw new Error( 'options.hydrate only works if the component was compiled with the \`hydratable: true\` option' );`}
+ ${options.dev && `if (options.hydrate) throw new Error("options.hydrate only works if the component was compiled with the \`hydratable: true\` option");`}
this._fragment.create();
`}
${generator.customElement ?
- `this._mount( options.target, options.anchor || null );` :
- `this._fragment.${block.hasIntroMethod ? 'intro' : 'mount'}( options.target, options.anchor || null );`}
+ `this._mount(options.target, options.anchor || null);` :
+ `this._fragment.${block.hasIntroMethod ? 'intro' : 'mount'}(options.target, options.anchor || null);`}
${(generator.hasComponents || generator.hasComplexBindings || templateProperties.oncreate || generator.hasIntroTransitions) && deindent`
${generator.hasComponents && `this._lock = true;`}
@@ -263,13 +261,13 @@ export default function dom(
});
}`}
- attributeChangedCallback ( attr, oldValue, newValue ) {
+ attributeChangedCallback(attr, oldValue, newValue) {
this.set({ [attr]: newValue });
}
}
- customElements.define('${generator.tag}', ${name});
- @assign( ${prototypeBase}, ${proto}, {
+ customElements.define("${generator.tag}", ${name});
+ @assign(${prototypeBase}, ${proto}, {
_mount(target, anchor) {
this._fragment.${block.hasIntroMethod ? 'intro' : 'mount'}(this.shadowRoot, null);
target.insertBefore(this, anchor);
@@ -282,32 +280,32 @@ export default function dom(
`);
} else {
builder.addBlock(deindent`
- function ${name} ( options ) {
+ function ${name}(options) {
${constructorBody}
}
- @assign( ${prototypeBase}, ${proto});
+ @assign(${prototypeBase}, ${proto});
`);
}
// TODO deprecate component.teardown()
builder.addBlock(deindent`
${options.dev && deindent`
- ${name}.prototype._checkReadOnly = function _checkReadOnly ( newState ) {
+ ${name}.prototype._checkReadOnly = function _checkReadOnly(newState) {
${Array.from(generator.readonly).map(
prop =>
- `if ( '${prop}' in newState && !this._updatingReadonlyProperty ) throw new Error( "Cannot set read-only property '${prop}'" );`
+ `if ('${prop}' in newState && !this._updatingReadonlyProperty) throw new Error("Cannot set read-only property '${prop}'");`
)}
};
`}
${computations.length ? deindent`
- ${name}.prototype._recompute = function _recompute ( changed, state, oldState, isInitial ) {
+ ${name}.prototype._recompute = function _recompute(changed, state, oldState, isInitial) {
${computationBuilder}
}
` : (!sharedPath && `${name}.prototype._recompute = @noop;`)}
- ${templateProperties.setup && `@template.setup( ${name} );`}
+ ${templateProperties.setup && `@template.setup(${name});`}
`);
const usedHelpers = new Set();
@@ -340,7 +338,7 @@ export default function dom(
else if (format === 'cjs') {
const SHARED = '__shared';
- let requires = `var ${SHARED} = require( ${JSON.stringify(sharedPath)} );`;
+ let requires = `var ${SHARED} = require(${JSON.stringify(sharedPath)});`;
used.forEach(name => {
const alias = generator.alias(name);
requires += `\nvar ${alias} = ${SHARED}.${name};`;
@@ -390,9 +388,7 @@ export default function dom(
// special case
const global = `_svelteTransitionManager`;
- result += `\n\nvar ${generator.alias(
- 'transitionManager'
- )} = window.${global} || ( window.${global} = ${code});`;
+ result += `\n\nvar ${generator.alias('transitionManager')} = window.${global} || (window.${global} = ${code});`;
} else {
const alias = generator.alias(expression.id.name);
if (alias !== expression.id.name)
diff --git a/src/generators/dom/visitors/Component.ts b/src/generators/dom/visitors/Component.ts
index 4c42a7884114..e2f368703b45 100644
--- a/src/generators/dom/visitors/Component.ts
+++ b/src/generators/dom/visitors/Component.ts
@@ -5,6 +5,7 @@ import { DomGenerator } from '../index';
import Block from '../Block';
import getTailSnippet from '../../../utils/getTailSnippet';
import getObject from '../../../utils/getObject';
+import getExpressionPrecedence from '../../../utils/getExpressionPrecedence';
import { stringify } from '../../../utils/stringify';
import { Node } from '../../../interfaces';
import { State } from '../interfaces';
@@ -90,9 +91,9 @@ export default function visitComponent(
.forEach((attribute: Attribute) => {
if (attribute.dependencies.length) {
updates.push(deindent`
- if ( ${attribute.dependencies
+ if (${attribute.dependencies
.map(dependency => `changed.${dependency}`)
- .join(' || ')} ) ${name}_changes.${attribute.name} = ${attribute.value};
+ .join(' || ')}) ${name}_changes.${attribute.name} = ${attribute.value};
`);
}
@@ -152,7 +153,7 @@ export default function visitComponent(
}
statements.push(deindent`
- if ( ${binding.prop} in ${binding.obj} ) {
+ if (${binding.prop} in ${binding.obj}) {
${name_initial_data}.${binding.name} = ${binding.snippet};
${name_updating}.${binding.name} = true;
}`
@@ -171,7 +172,7 @@ export default function visitComponent(
// TODO could binding.dependencies.length ever be 0?
if (binding.dependencies.length) {
updates.push(deindent`
- if ( !${name_updating}.${binding.name} && ${binding.dependencies.map((dependency: string) => `changed.${dependency}`).join(' || ')} ) {
+ if (!${name_updating}.${binding.name} && ${binding.dependencies.map((dependency: string) => `changed.${dependency}`).join(' || ')}) {
${name}_changes.${binding.name} = ${binding.snippet};
${name_updating}.${binding.name} = true;
}
@@ -234,12 +235,12 @@ export default function visitComponent(
);
block.builders.mount.addLine(
- `${name}._mount( ${state.parentNode || '#target'}, ${state.parentNode ? 'null' : 'anchor'} );`
+ `${name}._mount(${state.parentNode || '#target'}, ${state.parentNode ? 'null' : 'anchor'});`
);
if (!state.parentNode) block.builders.unmount.addLine(`${name}._unmount();`);
- block.builders.destroy.addLine(`${name}.destroy( false );`);
+ block.builders.destroy.addLine(`${name}.destroy(false);`);
// event handlers
node.attributes.filter((a: Node) => a.type === 'EventHandler').forEach((handler: Node) => {
@@ -279,7 +280,7 @@ export default function visitComponent(
`${block.alias('component')}.fire('${handler.name}', event);`);
block.builders.init.addBlock(deindent`
- ${name}.on( '${handler.name}', function ( event ) {
+ ${name}.on("${handler.name}", function(event) {
${handlerBody}
});
`);
@@ -292,7 +293,7 @@ export default function visitComponent(
block.builders.init.addLine(`#component.refs.${ref.name} = ${name};`);
block.builders.destroy.addLine(deindent`
- if ( #component.refs.${ref.name} === ${name} ) #component.refs.${ref.name} = null;
+ if (#component.refs.${ref.name} === ${name}) #component.refs.${ref.name} = null;
`);
});
@@ -392,7 +393,7 @@ function mungeAttribute(attribute: Node, block: Block): Attribute {
allDependencies.add(dependency);
});
- return `( ${snippet} )`; // TODO only parenthesize if necessary
+ return getExpressionPrecedence(chunk.expression) <= 13 ? `( ${snippet} )` : snippet;
}
})
.join(' + ');
diff --git a/src/generators/dom/visitors/EachBlock.ts b/src/generators/dom/visitors/EachBlock.ts
index 0c769f2e784e..333c29ce6bb9 100644
--- a/src/generators/dom/visitors/EachBlock.ts
+++ b/src/generators/dom/visitors/EachBlock.ts
@@ -73,16 +73,15 @@ export default function visitEachBlock(
// TODO neaten this up... will end up with an empty line in the block
block.builders.init.addBlock(deindent`
- if ( !${each_block_value}.${length} ) {
- ${each_block_else} = ${node.else._block.name}( ${params}, #component );
+ if (!${each_block_value}.${length}) {
+ ${each_block_else} = ${node.else._block.name}(${params}, #component);
${each_block_else}.create();
}
`);
block.builders.mount.addBlock(deindent`
- if ( ${each_block_else} ) {
- ${each_block_else}.${mountOrIntro}( ${state.parentNode ||
- '#target'}, null );
+ if (${each_block_else}) {
+ ${each_block_else}.${mountOrIntro}(${state.parentNode || '#target'}, null);
}
`);
@@ -90,13 +89,13 @@ export default function visitEachBlock(
if (node.else._block.hasUpdateMethod) {
block.builders.update.addBlock(deindent`
- if ( !${each_block_value}.${length} && ${each_block_else} ) {
+ if (!${each_block_value}.${length} && ${each_block_else}) {
${each_block_else}.update( changed, ${params} );
- } else if ( !${each_block_value}.${length} ) {
- ${each_block_else} = ${node.else._block.name}( ${params}, #component );
+ } else if (!${each_block_value}.${length}) {
+ ${each_block_else} = ${node.else._block.name}(${params}, #component);
${each_block_else}.create();
- ${each_block_else}.${mountOrIntro}( ${parentNode}, ${anchor} );
- } else if ( ${each_block_else} ) {
+ ${each_block_else}.${mountOrIntro}(${parentNode}, ${anchor});
+ } else if (${each_block_else}) {
${each_block_else}.unmount();
${each_block_else}.destroy();
${each_block_else} = null;
@@ -104,26 +103,26 @@ export default function visitEachBlock(
`);
} else {
block.builders.update.addBlock(deindent`
- if ( ${each_block_value}.${length} ) {
- if ( ${each_block_else} ) {
+ if (${each_block_value}.${length}) {
+ if (${each_block_else}) {
${each_block_else}.unmount();
${each_block_else}.destroy();
${each_block_else} = null;
}
- } else if ( !${each_block_else} ) {
- ${each_block_else} = ${node.else._block.name}( ${params}, #component );
+ } else if (!${each_block_else}) {
+ ${each_block_else} = ${node.else._block.name}(${params}, #component);
${each_block_else}.create();
- ${each_block_else}.${mountOrIntro}( ${parentNode}, ${anchor} );
+ ${each_block_else}.${mountOrIntro}(${parentNode}, ${anchor});
}
`);
}
block.builders.unmount.addLine(
- `if ( ${each_block_else} ) ${each_block_else}.unmount()`
+ `if (${each_block_else}) ${each_block_else}.unmount()`
);
block.builders.destroy.addBlock(deindent`
- if ( ${each_block_else} ) ${each_block_else}.destroy( false );
+ if (${each_block_else}) ${each_block_else}.destroy(false);
`);
}
@@ -161,7 +160,7 @@ function keyed(
const last = block.getUniqueName(`${each_block}_last`);
const expected = block.getUniqueName(`${each_block}_expected`);
- block.addVariable(lookup, `Object.create( null )`);
+ block.addVariable(lookup, `Object.create(null)`);
block.addVariable(head);
block.addVariable(last);
@@ -179,15 +178,15 @@ function keyed(
}
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 ${iteration} = ${lookup}[${key}] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, #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};
${last} = ${iteration};
- if ( #i === 0 ) ${head} = ${iteration};
+ if (#i === 0) ${head} = ${iteration};
}
`);
@@ -196,7 +195,7 @@ function keyed(
block.builders.create.addBlock(deindent`
var ${iteration} = ${head};
- while ( ${iteration} ) {
+ while (${iteration}) {
${iteration}.create();
${iteration} = ${iteration}.next;
}
@@ -204,16 +203,16 @@ function keyed(
block.builders.claim.addBlock(deindent`
var ${iteration} = ${head};
- while ( ${iteration} ) {
- ${iteration}.claim( ${state.parentNodes} );
+ while (${iteration}) {
+ ${iteration}.claim(${state.parentNodes});
${iteration} = ${iteration}.next;
}
`);
block.builders.mount.addBlock(deindent`
var ${iteration} = ${head};
- while ( ${iteration} ) {
- ${iteration}.${mountOrIntro}( ${targetNode}, ${anchorNode} );
+ while (${iteration}) {
+ ${iteration}.${mountOrIntro}(${targetNode}, ${anchorNode});
${iteration} = ${iteration}.next;
}
`);
@@ -225,8 +224,8 @@ function keyed(
if (node._block.hasOutroMethod) {
const fn = block.getUniqueName(`${each_block}_outro`);
block.builders.init.addBlock(deindent`
- function ${fn} ( iteration ) {
- iteration.outro( function () {
+ function ${fn}(iteration) {
+ iteration.outro(function() {
iteration.unmount();
iteration.destroy();
${lookup}[iteration.key] = null;
@@ -235,21 +234,21 @@ function keyed(
`);
destroy = deindent`
- while ( ${expected} ) {
- ${fn}( ${expected} );
+ while (${expected}) {
+ ${fn}(${expected});
${expected} = ${expected}.next;
}
- for ( #i = 0; #i < discard_pile.length; #i += 1 ) {
- if ( discard_pile[#i].discard ) {
- ${fn}( discard_pile[#i] );
+ for (#i = 0; #i < discard_pile.length; #i += 1) {
+ if (discard_pile[#i].discard) {
+ ${fn}(discard_pile[#i]);
}
}
`;
} else {
const fn = block.getUniqueName(`${each_block}_destroy`);
block.builders.init.addBlock(deindent`
- function ${fn} ( iteration ) {
+ function ${fn}(iteration) {
iteration.unmount();
iteration.destroy();
${lookup}[iteration.key] = null;
@@ -257,15 +256,15 @@ function keyed(
`);
destroy = deindent`
- while ( ${expected} ) {
- ${fn}( ${expected} );
+ while (${expected}) {
+ ${fn}(${expected});
${expected} = ${expected}.next;
}
- for ( #i = 0; #i < discard_pile.length; #i += 1 ) {
+ for (#i = 0; #i < discard_pile.length; #i += 1) {
var ${iteration} = discard_pile[#i];
- if ( ${iteration}.discard ) {
- ${fn}( ${iteration} );
+ if (${iteration}.discard) {
+ ${fn}(${iteration});
}
}
`;
@@ -279,22 +278,22 @@ function keyed(
var discard_pile = [];
- for ( #i = 0; #i < ${each_block_value}.${length}; #i += 1 ) {
+ for (#i = 0; #i < ${each_block_value}.${length}; #i += 1) {
var ${key} = ${each_block_value}[#i].${node.key};
var ${iteration} = ${lookup}[${key}];
${dynamic &&
- `if ( ${iteration} ) ${iteration}.update( changed, ${params}, ${each_block_value}, ${each_block_value}[#i], #i );`}
+ `if (${iteration}) ${iteration}.update(changed, ${params}, ${each_block_value}, ${each_block_value}[#i], #i);`}
- if ( ${expected} ) {
- if ( ${key} === ${expected}.key ) {
+ if (${expected}) {
+ if (${key} === ${expected}.key) {
${expected} = ${expected}.next;
} else {
- if ( ${iteration} ) {
+ if (${iteration}) {
// probably a deletion
- while ( ${expected} && ${expected}.key !== ${key} ) {
+ while (${expected} && ${expected}.key !== ${key}) {
${expected}.discard = true;
- discard_pile.push( ${expected} );
+ discard_pile.push(${expected});
${expected} = ${expected}.next;
};
@@ -302,12 +301,12 @@ function keyed(
${iteration}.discard = false;
${iteration}.last = ${last};
- if (!${expected}) ${iteration}.mount( ${parentNode}, ${anchor} );
+ if (!${expected}) ${iteration}.mount(${parentNode}, ${anchor});
} else {
// key is being inserted
- ${iteration} = ${lookup}[${key}] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component, ${key} );
+ ${iteration} = ${lookup}[${key}] = ${create_each_block}(${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component, ${key});
${iteration}.create();
- ${iteration}.${mountOrIntro}( ${parentNode}, ${expected}.first );
+ ${iteration}.${mountOrIntro}(${parentNode}, ${expected}.first);
${expected}.last = ${iteration};
${iteration}.next = ${expected};
@@ -315,25 +314,24 @@ function keyed(
}
} else {
// we're appending from this point forward
- if ( ${iteration} ) {
+ if (${iteration}) {
${iteration}.discard = false;
${iteration}.next = null;
- ${iteration}.mount( ${parentNode}, ${anchor} );
+ ${iteration}.mount(${parentNode}, ${anchor});
} else {
- ${iteration} = ${lookup}[${key}] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component, ${key} );
+ ${iteration} = ${lookup}[${key}] = ${create_each_block}(${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component, ${key});
${iteration}.create();
- ${iteration}.${mountOrIntro}( ${parentNode}, ${anchor} );
+ ${iteration}.${mountOrIntro}(${parentNode}, ${anchor});
}
}
- if ( ${last} ) ${last}.next = ${iteration};
+ if (${last}) ${last}.next = ${iteration};
${iteration}.last = ${last};
- ${node._block.hasIntroMethod &&
- `${iteration}.intro( ${parentNode}, ${anchor} );`}
+ ${node._block.hasIntroMethod && `${iteration}.intro(${parentNode}, ${anchor});`}
${last} = ${iteration};
}
- if ( ${last} ) ${last}.next = null;
+ if (${last}) ${last}.next = null;
${destroy}
@@ -343,7 +341,7 @@ function keyed(
if (!state.parentNode) {
block.builders.unmount.addBlock(deindent`
var ${iteration} = ${head};
- while ( ${iteration} ) {
+ while (${iteration}) {
${iteration}.unmount();
${iteration} = ${iteration}.next;
}
@@ -352,8 +350,8 @@ function keyed(
block.builders.destroy.addBlock(deindent`
var ${iteration} = ${head};
- while ( ${iteration} ) {
- ${iteration}.destroy( false );
+ while (${iteration}) {
+ ${iteration}.destroy(false);
${iteration} = ${iteration}.next;
}
`);
@@ -378,8 +376,8 @@ function unkeyed(
block.builders.init.addBlock(deindent`
var ${iterations} = [];
- 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, #component );
+ 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, #component);
}
`);
@@ -387,20 +385,20 @@ function unkeyed(
const anchorNode = state.parentNode ? 'null' : 'anchor';
block.builders.create.addBlock(deindent`
- for ( var #i = 0; #i < ${iterations}.length; #i += 1 ) {
+ for (var #i = 0; #i < ${iterations}.length; #i += 1) {
${iterations}[#i].create();
}
`);
block.builders.claim.addBlock(deindent`
- for ( var #i = 0; #i < ${iterations}.length; #i += 1 ) {
- ${iterations}[#i].claim( ${state.parentNodes} );
+ for (var #i = 0; #i < ${iterations}.length; #i += 1) {
+ ${iterations}[#i].claim(${state.parentNodes});
}
`);
block.builders.mount.addBlock(deindent`
- for ( var #i = 0; #i < ${iterations}.length; #i += 1 ) {
- ${iterations}[#i].${mountOrIntro}( ${targetNode}, ${anchorNode} );
+ for (var #i = 0; #i < ${iterations}.length; #i += 1) {
+ ${iterations}[#i].${mountOrIntro}(${targetNode}, ${anchorNode});
}
`);
@@ -421,27 +419,27 @@ function unkeyed(
const forLoopBody = node._block.hasUpdateMethod
? node._block.hasIntroMethod
? deindent`
- if ( ${iterations}[#i] ) {
- ${iterations}[#i].update( changed, ${params}, ${each_block_value}, ${each_block_value}[#i], #i );
+ if (${iterations}[#i]) {
+ ${iterations}[#i].update(changed, ${params}, ${each_block_value}, ${each_block_value}[#i], #i);
} else {
- ${iterations}[#i] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component );
+ ${iterations}[#i] = ${create_each_block}(${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component);
${iterations}[#i].create();
}
- ${iterations}[#i].intro( ${parentNode}, ${anchor} );
+ ${iterations}[#i].intro(${parentNode}, ${anchor});
`
: deindent`
- if ( ${iterations}[#i] ) {
- ${iterations}[#i].update( changed, ${params}, ${each_block_value}, ${each_block_value}[#i], #i );
+ if (${iterations}[#i]) {
+ ${iterations}[#i].update(changed, ${params}, ${each_block_value}, ${each_block_value}[#i], #i);
} else {
- ${iterations}[#i] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component );
+ ${iterations}[#i] = ${create_each_block}(${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component);
${iterations}[#i].create();
- ${iterations}[#i].mount( ${parentNode}, ${anchor} );
+ ${iterations}[#i].mount(${parentNode}, ${anchor});
}
`
: deindent`
- ${iterations}[#i] = ${create_each_block}( ${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component );
+ ${iterations}[#i] = ${create_each_block}(${params}, ${each_block_value}, ${each_block_value}[#i], #i, #component);
${iterations}[#i].create();
- ${iterations}[#i].${mountOrIntro}( ${parentNode}, ${anchor} );
+ ${iterations}[#i].${mountOrIntro}(${parentNode}, ${anchor});
`;
const start = node._block.hasUpdateMethod ? '0' : `${iterations}.length`;
@@ -449,9 +447,9 @@ function unkeyed(
const outro = block.getUniqueName('outro');
const destroy = node._block.hasOutroMethod
? deindent`
- function ${outro} ( i ) {
- if ( ${iterations}[i] ) {
- ${iterations}[i].outro( function () {
+ function ${outro}(i) {
+ if (${iterations}[i]) {
+ ${iterations}[i].outro(function() {
${iterations}[i].unmount();
${iterations}[i].destroy();
${iterations}[i] = null;
@@ -459,10 +457,10 @@ function unkeyed(
}
}
- for ( ; #i < ${iterations}.length; #i += 1 ) ${outro}( #i );
+ for (; #i < ${iterations}.length; #i += 1) ${outro}(#i);
`
: deindent`
- for ( ; #i < ${iterations}.length; #i += 1 ) {
+ for (; #i < ${iterations}.length; #i += 1) {
${iterations}[#i].unmount();
${iterations}[#i].destroy();
}
@@ -472,8 +470,8 @@ function unkeyed(
block.builders.update.addBlock(deindent`
var ${each_block_value} = ${snippet};
- if ( ${condition} ) {
- for ( var #i = ${start}; #i < ${each_block_value}.${length}; #i += 1 ) {
+ if (${condition}) {
+ for (var #i = ${start}; #i < ${each_block_value}.${length}; #i += 1) {
${forLoopBody}
}
@@ -483,10 +481,10 @@ function unkeyed(
}
block.builders.unmount.addBlock(deindent`
- for ( var #i = 0; #i < ${iterations}.length; #i += 1 ) {
+ for (var #i = 0; #i < ${iterations}.length; #i += 1) {
${iterations}[#i].unmount();
}
`);
- block.builders.destroy.addBlock(`@destroyEach( ${iterations}, false, 0 );`);
+ block.builders.destroy.addBlock(`@destroyEach(${iterations}, false, 0);`);
}
diff --git a/src/generators/dom/visitors/Element/Attribute.ts b/src/generators/dom/visitors/Element/Attribute.ts
index 47bbea808f3a..a994c6b58b04 100644
--- a/src/generators/dom/visitors/Element/Attribute.ts
+++ b/src/generators/dom/visitors/Element/Attribute.ts
@@ -2,6 +2,7 @@ import attributeLookup from './lookup';
import deindent from '../../../../utils/deindent';
import visitStyleAttribute, { optimizeStyle } from './StyleAttribute';
import { stringify } from '../../../../utils/stringify';
+import getExpressionPrecedence from '../../../../utils/getExpressionPrecedence';
import getStaticAttributeValue from '../../../shared/getStaticAttributeValue';
import { DomGenerator } from '../../index';
import Block from '../../Block';
@@ -99,7 +100,7 @@ export default function visitAttribute(
allDependencies.add(d);
});
- return `( ${snippet} )`;
+ return getExpressionPrecedence(chunk.expression) <= 13 ? `(${snippet})` : snippet;
}
})
.join(' + ');
@@ -121,9 +122,9 @@ export default function visitAttribute(
if (isLegacyInputType) {
block.builders.hydrate.addLine(
- `@setInputType( ${state.parentNode}, ${init} );`
+ `@setInputType(${state.parentNode}, ${init});`
);
- updater = `@setInputType( ${state.parentNode}, ${shouldCache ? last : value} );`;
+ updater = `@setInputType(${state.parentNode}, ${shouldCache ? last : value});`;
} else if (isSelectValueAttribute) {
// annoying special case
const isMultipleSelect =
@@ -136,15 +137,15 @@ export default function visitAttribute(
const ifStatement = isMultipleSelect
? deindent`
- ${option}.selected = ~${last}.indexOf( ${option}.__value );`
+ ${option}.selected = ~${last}.indexOf(${option}.__value);`
: deindent`
- if ( ${option}.__value === ${last} ) {
+ if (${option}.__value === ${last}) {
${option}.selected = true;
break;
}`;
updater = deindent`
- for ( var ${i} = 0; ${i} < ${state.parentNode}.options.length; ${i} += 1 ) {
+ for (var ${i} = 0; ${i} < ${state.parentNode}.options.length; ${i} += 1) {
var ${option} = ${state.parentNode}.options[${i}];
${ifStatement}
@@ -164,9 +165,9 @@ export default function visitAttribute(
updater = `${state.parentNode}.${propertyName} = ${shouldCache || isSelectValueAttribute ? last : value};`;
} else {
block.builders.hydrate.addLine(
- `${method}( ${state.parentNode}, '${name}', ${init} );`
+ `${method}(${state.parentNode}, "${name}", ${init});`
);
- updater = `${method}( ${state.parentNode}, '${name}', ${shouldCache || isSelectValueAttribute ? last : value} );`;
+ updater = `${method}(${state.parentNode}, "${name}", ${shouldCache || isSelectValueAttribute ? last : value});`;
}
if (allDependencies.size || hasChangeableIndex || isSelectValueAttribute) {
@@ -176,10 +177,10 @@ export default function visitAttribute(
dependencies.map(dependency => `changed.${dependency}`).join(' || ')
);
- const updateCachedValue = `${last} !== ( ${last} = ${value} )`;
+ const updateCachedValue = `${last} !== (${last} = ${value})`;
const condition = shouldCache ?
- ( dependencies.length ? `( ${changedCheck} ) && ${updateCachedValue}` : updateCachedValue ) :
+ ( dependencies.length ? `(${changedCheck}) && ${updateCachedValue}` : updateCachedValue ) :
changedCheck;
block.builders.update.addConditional(
@@ -195,9 +196,9 @@ export default function visitAttribute(
: stringify(attribute.value[0].data);
const statement = (
- isLegacyInputType ? `@setInputType( ${state.parentNode}, ${value} );` :
+ isLegacyInputType ? `@setInputType(${state.parentNode}, ${value});` :
propertyName ? `${state.parentNode}.${propertyName} = ${value};` :
- `${method}( ${state.parentNode}, '${name}', ${value} );`
+ `${method}(${state.parentNode}, "${name}", ${value});`
);
block.builders.hydrate.addLine(statement);
diff --git a/src/generators/dom/visitors/Element/Binding.ts b/src/generators/dom/visitors/Element/Binding.ts
index a99b028192a7..7f28184e802b 100644
--- a/src/generators/dom/visitors/Element/Binding.ts
+++ b/src/generators/dom/visitors/Element/Binding.ts
@@ -67,9 +67,9 @@ export default function visitBinding(
const ifStatement = isMultipleSelect
? deindent`
- ${option}.selected = ~${value}.indexOf( ${option}.__value );`
+ ${option}.selected = ~${value}.indexOf(${option}.__value);`
: deindent`
- if ( ${option}.__value === ${value} ) {
+ if (${option}.__value === ${value}) {
${option}.selected = true;
break;
}`;
@@ -79,7 +79,7 @@ export default function visitBinding(
updateElement = deindent`
var ${value} = ${snippet};
- for ( var #i = 0; #i < ${state.parentNode}.options.length; #i += 1 ) {
+ for (var #i = 0; #i < ${state.parentNode}.options.length; #i += 1) {
var ${option} = ${state.parentNode}.options[#i];
${ifStatement}
@@ -88,44 +88,44 @@ export default function visitBinding(
generator.hasComplexBindings = true;
block.builders.hydrate.addBlock(
- `if ( !('${name}' in state) ) #component._root._beforecreate.push( ${handler} );`
+ `if (!('${name}' in state)) #component._root._beforecreate.push(${handler});`
);
} else if (attribute.name === 'group') {
// special case
if (type === 'radio') {
setter = deindent`
- if ( !${state.parentNode}.checked ) return;
+ if (!${state.parentNode}.checked) return;
${setter}
`;
}
const condition = type === 'checkbox'
- ? `~${snippet}.indexOf( ${state.parentNode}.__value )`
+ ? `~${snippet}.indexOf(${state.parentNode}.__value)`
: `${state.parentNode}.__value === ${snippet}`;
block.builders.hydrate.addLine(
- `#component._bindingGroups[${bindingGroup}].push( ${state.parentNode} );`
+ `#component._bindingGroups[${bindingGroup}].push(${state.parentNode});`
);
block.builders.destroy.addBlock(
- `#component._bindingGroups[${bindingGroup}].splice( #component._bindingGroups[${bindingGroup}].indexOf( ${state.parentNode} ), 1 );`
+ `#component._bindingGroups[${bindingGroup}].splice(#component._bindingGroups[${bindingGroup}].indexOf(${state.parentNode}), 1);`
);
updateElement = `${state.parentNode}.checked = ${condition};`;
} else if (node.name === 'audio' || node.name === 'video') {
generator.hasComplexBindings = true;
- block.builders.hydrate.addBlock(`#component._root._beforecreate.push( ${handler} );`);
+ block.builders.hydrate.addBlock(`#component._root._beforecreate.push(${handler});`);
if (attribute.name === 'currentTime') {
const frame = block.getUniqueName(`${state.parentNode}_animationframe`);
block.addVariable(frame);
setter = deindent`
- cancelAnimationFrame( ${frame} );
- if ( !${state.parentNode}.paused ) ${frame} = requestAnimationFrame( ${handler} );
+ cancelAnimationFrame(${frame});
+ if (!${state.parentNode}.paused) ${frame} = requestAnimationFrame(${handler});
${setter}
`;
- updateCondition += ` && !isNaN( ${snippet} )`;
+ updateCondition += ` && !isNaN(${snippet})`;
} else if (attribute.name === 'duration') {
updateCondition = null;
} else if (attribute.name === 'paused') {
@@ -133,13 +133,13 @@ export default function visitBinding(
const last = block.getUniqueName(`${state.parentNode}_paused_value`);
block.addVariable(last, 'true');
- updateCondition = `${last} !== ( ${last} = ${snippet} )`;
- updateElement = `${state.parentNode}[ ${last} ? 'pause' : 'play' ]();`;
+ updateCondition = `${last} !== (${last} = ${snippet})`;
+ updateElement = `${state.parentNode}[${last} ? "pause" : "play"]();`;
}
}
block.builders.init.addBlock(deindent`
- function ${handler} () {
+ function ${handler}() {
${lock} = true;
${setter}
${lock} = false;
@@ -149,21 +149,21 @@ export default function visitBinding(
if (node.name === 'input' && type === 'range') {
// need to bind to `input` and `change`, for the benefit of IE
block.builders.hydrate.addBlock(deindent`
- @addListener( ${state.parentNode}, 'input', ${handler} );
- @addListener( ${state.parentNode}, 'change', ${handler} );
+ @addListener(${state.parentNode}, "input", ${handler});
+ @addListener(${state.parentNode}, "change", ${handler});
`);
block.builders.destroy.addBlock(deindent`
- @removeListener( ${state.parentNode}, 'input', ${handler} );
- @removeListener( ${state.parentNode}, 'change', ${handler} );
+ @removeListener(${state.parentNode}, "input", ${handler});
+ @removeListener(${state.parentNode}, "change", ${handler});
`);
} else {
block.builders.hydrate.addLine(
- `@addListener( ${state.parentNode}, '${eventName}', ${handler} );`
+ `@addListener(${state.parentNode}, "${eventName}", ${handler});`
);
block.builders.destroy.addLine(
- `@removeListener( ${state.parentNode}, '${eventName}', ${handler} );`
+ `@removeListener(${state.parentNode}, "${eventName}", ${handler});`
);
}
@@ -175,7 +175,7 @@ export default function visitBinding(
if (updateCondition !== null) {
// audio/video duration is read-only, it never updates
block.builders.update.addBlock(deindent`
- if ( ${updateCondition} ) {
+ if (${updateCondition}) {
${updateElement}
}
`);
@@ -183,10 +183,10 @@ export default function visitBinding(
if (attribute.name === 'paused') {
block.builders.create.addLine(
- `@addListener( ${state.parentNode}, 'play', ${handler} );`
+ `@addListener(${state.parentNode}, "play", ${handler});`
);
block.builders.destroy.addLine(
- `@removeListener( ${state.parentNode}, 'play', ${handler} );`
+ `@removeListener(${state.parentNode}, "play", ${handler});`
);
}
}
@@ -221,7 +221,7 @@ function getBindingValue(
) {
//