Skip to content

Commit

Permalink
Merge pull request #813 from sveltejs/tidy-up
Browse files Browse the repository at this point in the history 
more consistent style for generated code
  • Loading branch information
@Rich-Harris
Rich-Harris authored Sep 3, 2017
2 parents 0e80248 + e993ae0 commit dc48ae6
Show file tree
Hide file tree
Showing 62 changed files with 1,357 additions and 1,388 deletions.
10 changes: 5 additions & 5 deletions src/generators/Generator.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.`);
Expand Down Expand Up @@ -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};`
);
}
});
Expand Down Expand Up @@ -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, '}());');
Expand Down
40 changes: 19 additions & 21 deletions src/generators/dom/Block.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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});`);
}
}

Expand Down Expand Up @@ -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);`);
}
}

Expand Down Expand Up @@ -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();`}
},
Expand All @@ -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();`}
},
Expand All @@ -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}
},
`);
Expand All @@ -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}
},
`);
Expand All @@ -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}
},
`);
Expand All @@ -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);
},
`);
}
Expand All @@ -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;`}
Expand All @@ -312,7 +312,7 @@ export default class Block {
`);
} else {
properties.addBlock(deindent`
outro: function ( outrocallback ) {
outro: function(outrocallback) {
outrocallback();
},
`);
Expand All @@ -323,7 +323,7 @@ export default class Block {
properties.addBlock(`unmount: @noop,`);
} else {
properties.addBlock(deindent`
unmount: function () {
unmount: function() {
${this.builders.unmount}
},
`);
Expand All @@ -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 => {
Expand Down
78 changes: 37 additions & 41 deletions src/generators/dom/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
Expand All @@ -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}", "");
}
`);
}
Expand All @@ -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);
}
`);
}
Expand All @@ -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;
Expand All @@ -186,13 +184,13 @@ export default function dom(
${css && `this.shadowRoot.innerHTML = \`<style>${options.dev ? `${css}\n/*# sourceMappingURL=${cssMap.toUrl()} */` : css}</style>\`;`}
` :
(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 = [];`}
Expand All @@ -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;`}
Expand Down Expand Up @@ -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);
Expand All @@ -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();
Expand Down Expand Up @@ -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};`;
Expand Down Expand Up @@ -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)
Expand Down
Loading

0 comments on commit dc48ae6

Please sign in to comment.