Skip to content

more consistent style for generated code #813

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 3, 2017
Merged

more consistent style for generated code #813

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions src/generators/Generator.ts
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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