diff --git a/src/compiler/compile/Component.ts b/src/compiler/compile/Component.ts index 9f4507f88e..9a34e7127a 100644 --- a/src/compiler/compile/Component.ts +++ b/src/compiler/compile/Component.ts @@ -122,7 +122,9 @@ export default class Component { this.file = compile_options.filename && (typeof process !== 'undefined' - ? compile_options.filename.replace(process.cwd(), '').replace(/^[/\\]/, '') + ? compile_options.filename + .replace(process.cwd(), '') + .replace(/^[/\\]/, '') : compile_options.filename); this.locate = getLocator(this.source, { offsetLine: 1 }); @@ -316,9 +318,7 @@ export default class Component { }); js.map.sources = [ - compile_options.filename - ? get_relative_path(compile_options.outputFilename || '', compile_options.filename) - : null, + compile_options.filename ? get_relative_path(compile_options.outputFilename || '', compile_options.filename) : null ]; js.map.sourcesContent = [ @@ -860,8 +860,8 @@ export default class Component { loop_protect(node, scope: Scope, timeout: number): Node | null { if (node.type === 'WhileStatement' || - node.type === 'ForStatement' || - node.type === 'DoWhileStatement') { + node.type === 'ForStatement' || + node.type === 'DoWhileStatement') { const guard = this.get_unique_name('guard', scope); this.used_names.add(guard.name); @@ -1162,7 +1162,7 @@ export default class Component { const unsorted_reactive_declarations = []; - this.ast.instance.content.body.forEach((node) => { + this.ast.instance.content.body.forEach(node => { if (node.type === 'LabeledStatement' && node.label.name === '$') { this.reactive_declaration_nodes.add(node); diff --git a/src/compiler/compile/create_module.ts b/src/compiler/compile/create_module.ts index 1ea7bb0d9a..077e2392aa 100644 --- a/src/compiler/compile/create_module.ts +++ b/src/compiler/compile/create_module.ts @@ -99,7 +99,7 @@ function esm( type: 'Specifier', local: { type: 'Identifier', name: x.name }, exported: { type: 'Identifier', name: x.as } - })), + })) }; program.body = b` diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts index d094613018..3a6179b64f 100644 --- a/src/compiler/compile/nodes/Element.ts +++ b/src/compiler/compile/nodes/Element.ts @@ -260,7 +260,7 @@ export default class Element extends Node { } if (this.name === 'figure') { - const children = this.children.filter((node) => { + const children = this.children.filter(node => { if (node.type === 'Comment') return false; if (node.type === 'Text') return /\S/.test(node.data); return true; @@ -384,10 +384,11 @@ export default class Element extends Node { } } + if (/(^[0-9-.])|[\^$@%&#?!|()[\]{}^*+~;]/.test(name)) { component.error(attribute, { code: `illegal-attribute`, - message: `'${name}' is not a valid attribute name` + message: `'${name}' is not a valid attribute name`, }); } @@ -395,7 +396,7 @@ export default class Element extends Node { if (!attribute.is_static) { component.error(attribute, { code: `invalid-slot-attribute`, - message: `slot attribute cannot have a dynamic value`, + message: `slot attribute cannot have a dynamic value` }); } @@ -621,6 +622,7 @@ export default class Element extends Node { message: `'files' binding can only be used with ` }); } + } else if (name === 'open') { if (this.name !== 'details') { component.error(binding, { @@ -661,7 +663,7 @@ export default class Element extends Node { if (this.name === 'svg' && (name === 'offsetWidth' || name === 'offsetHeight')) { component.error(binding, { code: 'invalid-binding', - message: `'${binding.name}' is not a valid binding on . Use '${name.replace('offset', 'client')}' instead`, + message: `'${binding.name}' is not a valid binding on . Use '${name.replace('offset', 'client')}' instead` }); } else if (svg.test(this.name)) { component.error(binding, { @@ -778,7 +780,7 @@ export default class Element extends Node { new Text(this.component, this, this.scope, { type: 'Text', data: ` ${id}`, - synthetic: true, + synthetic: true }) ); } diff --git a/src/compiler/compile/nodes/shared/Expression.ts b/src/compiler/compile/nodes/shared/Expression.ts index 6a03c006ff..2f2541c720 100644 --- a/src/compiler/compile/nodes/shared/Expression.ts +++ b/src/compiler/compile/nodes/shared/Expression.ts @@ -275,7 +275,7 @@ export default class Expression { ...(node as FunctionExpression).params ]; - const context_args = deps.map((name) => block.renderer.reference(name)); + const context_args = deps.map(name => block.renderer.reference(name)); component.partly_hoisted.push(declaration); diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts index 3b9b246df7..af28209f8e 100644 --- a/src/compiler/compile/render_dom/index.ts +++ b/src/compiler/compile/render_dom/index.ts @@ -1,19 +1,12 @@ -import { b, x, p } from "code-red"; -import Component from "../Component"; -import Renderer from "./Renderer"; -import { CompileOptions, CssResult } from "../../interfaces"; -import { walk } from "estree-walker"; -import { extract_names, Scope } from "../utils/scope"; -import { invalidate } from "./invalidate"; -import Block from "./Block"; -import { - ClassDeclaration, - FunctionExpression, - Node, - Statement, - ObjectExpression, - Expression, -} from "estree"; +import { b, x, p } from 'code-red'; +import Component from '../Component'; +import Renderer from './Renderer'; +import { CompileOptions, CssResult } from '../../interfaces'; +import { walk } from 'estree-walker'; +import { extract_names, Scope } from '../utils/scope'; +import { invalidate } from './invalidate'; +import Block from './Block'; +import { ClassDeclaration, FunctionExpression, Node, Statement, ObjectExpression, Expression } from 'estree'; export default function dom( component: Component, @@ -36,19 +29,18 @@ export default function dom( body.push(b`const ${renderer.file_var} = ${file};`); } - const css = component.stylesheet.render( - options.filename, - !options.customElement - ); - const styles = - component.stylesheet.has_styles && options.dev - ? `${css.code}\n/*# sourceMappingURL=${css.map.toUrl()} */` - : css.code; + const css = component.stylesheet.render(options.filename, !options.customElement); + const styles = component.stylesheet.has_styles && options.dev + ? `${css.code}\n/*# sourceMappingURL=${css.map.toUrl()} */` + : css.code; - const add_css = component.get_unique_name("add_css"); + const add_css = component.get_unique_name('add_css'); - const should_add_css = - !options.customElement && !!styles && options.css !== false; + const should_add_css = ( + !options.customElement && + !!styles && + options.css !== false + ); if (should_add_css) { body.push(b` @@ -65,14 +57,12 @@ export default function dom( // TODO the deconflicted names of blocks are reversed... should set them here const blocks = renderer.blocks.slice().reverse(); - body.push( - ...blocks.map((block) => { - // TODO this is a horrible mess — renderer.blocks - // contains a mixture of Blocks and Nodes - if ((block as Block).render) return (block as Block).render(); - return block; - }) - ); + body.push(...blocks.map(block => { + // TODO this is a horrible mess — renderer.blocks + // contains a mixture of Blocks and Nodes + if ((block as Block).render) return (block as Block).render(); + return block; + })); if (options.dev && !options.hydratable) { block.chunks.claim.push( @@ -155,119 +145,91 @@ export default function dom( let capture_state: Expression; let props_inject: Node[] | Node; - props.forEach((prop) => { + props.forEach(prop => { const variable = component.var_lookup.get(prop.name); if (!variable.writable || component.component_options.accessors) { accessors.push({ - type: "MethodDefinition", - kind: "get", - key: { type: "Identifier", name: prop.export_name }, + type: 'MethodDefinition', + kind: 'get', + key: { type: 'Identifier', name: prop.export_name }, value: x`function() { - return ${ - prop.hoistable - ? prop.name - : x`this.$$.ctx[${renderer.context_lookup.get(prop.name).index}]` - } + return ${prop.hoistable ? prop.name : x`this.$$.ctx[${renderer.context_lookup.get(prop.name).index}]`} }`, }); } else if (component.compile_options.dev) { accessors.push({ - type: "MethodDefinition", - kind: "get", - key: { type: "Identifier", name: prop.export_name }, + type: 'MethodDefinition', + kind: 'get', + key: { type: 'Identifier', name: prop.export_name }, value: x`function() { throw new @_Error("<${component.tag}>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); - }`, + }` }); } if (component.component_options.accessors) { if (variable.writable && !renderer.readonly.has(prop.name)) { accessors.push({ - type: "MethodDefinition", - kind: "set", - key: { type: "Identifier", name: prop.export_name }, + type: 'MethodDefinition', + kind: 'set', + key: { type: 'Identifier', name: prop.export_name }, value: x`function(${prop.name}) { this.$set({ ${prop.export_name}: ${prop.name} }); @flush(); - }`, + }` }); } else if (component.compile_options.dev) { accessors.push({ - type: "MethodDefinition", - kind: "set", - key: { type: "Identifier", name: prop.export_name }, + type: 'MethodDefinition', + kind: 'set', + key: { type: 'Identifier', name: prop.export_name }, value: x`function(value) { throw new @_Error("<${component.tag}>: Cannot set read-only property '${prop.export_name}'"); - }`, + }` }); } } else if (component.compile_options.dev) { accessors.push({ - type: "MethodDefinition", - kind: "set", - key: { type: "Identifier", name: prop.export_name }, + type: 'MethodDefinition', + kind: 'set', + key: { type: 'Identifier', name: prop.export_name }, value: x`function(value) { throw new @_Error("<${component.tag}>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); - }`, + }` }); } }); if (component.compile_options.dev) { // checking that expected ones were passed - const expected = props.filter((prop) => prop.writable && !prop.initialised); + const expected = props.filter(prop => prop.writable && !prop.initialised); if (expected.length) { dev_props_check = b` const { ctx: #ctx } = this.$$; - const props = ${ - options.customElement ? x`this.attributes` : x`options.props || {}` - }; - ${expected.map( - (prop) => b` - if (${renderer.reference(prop.name)} === undefined && !('${ - prop.export_name - }' in props)) { - @_console.warn("<${component.tag}> was created without expected prop '${ - prop.export_name - }'"); - }` - )} + const props = ${options.customElement ? x`this.attributes` : x`options.props || {}`}; + ${expected.map(prop => b` + if (${renderer.reference(prop.name)} === undefined && !('${prop.export_name}' in props)) { + @_console.warn("<${component.tag}> was created without expected prop '${prop.export_name}'"); + }`)} `; } - const capturable_vars = component.vars.filter( - (v) => !v.internal && !v.global && !v.name.startsWith("$$") - ); + const capturable_vars = component.vars.filter(v => !v.internal && !v.global && !v.name.startsWith('$$')); if (capturable_vars.length > 0) { - capture_state = x`() => ({ ${capturable_vars.map( - (prop) => p`${prop.name}` - )} })`; + capture_state = x`() => ({ ${capturable_vars.map(prop => p`${prop.name}`)} })`; } - const injectable_vars = capturable_vars.filter( - (v) => !v.module && v.writable && v.name[0] !== "$" - ); + const injectable_vars = capturable_vars.filter(v => !v.module && v.writable && v.name[0] !== '$'); if (uses_props || injectable_vars.length > 0) { inject_state = x` ${$$props} => { - ${ - uses_props && - renderer.invalidate( - "$$props", - x`$$props = { ...$$props, ...$$new_props }` - ) - } + ${uses_props && renderer.invalidate('$$props', x`$$props = { ...$$props, ...$$new_props }`)} ${injectable_vars.map( - (v) => - b`if ('${v.name}' in $$props) ${renderer.invalidate( - v.name, - x`${v.name} = ${$$props}.${v.name}` - )};` + v => b`if ('${v.name}' in $$props) ${renderer.invalidate(v.name, x`${v.name} = ${$$props}.${v.name}`)};` )} } `; @@ -294,11 +256,7 @@ export default function dom( if (!execution_context && !scope.block) { execution_context = node; } - } else if ( - !execution_context && - node.type === "LabeledStatement" && - node.label.name === "$" - ) { + } else if (!execution_context && node.type === 'LabeledStatement' && node.label.name === '$') { execution_context = node; } }, @@ -312,12 +270,8 @@ export default function dom( execution_context = null; } - if ( - node.type === "AssignmentExpression" || - node.type === "UpdateExpression" - ) { - const assignee = - node.type === "AssignmentExpression" ? node.left : node.argument; + if (node.type === 'AssignmentExpression' || node.type === 'UpdateExpression') { + const assignee = node.type === 'AssignmentExpression' ? node.left : node.argument; // normally (`a = 1`, `b.c = 2`), there'll be a single name // (a or b). In destructuring cases (`[d, e] = [e, d]`) there @@ -325,21 +279,18 @@ export default function dom( // onto the initial function call const names = new Set(extract_names(assignee)); - this.replace( - invalidate(renderer, scope, node, names, execution_context === null) - ); + this.replace(invalidate(renderer, scope, node, names, execution_context === null)); } - }, + } }); component.rewrite_props(({ name, reassigned, export_name }) => { const value = `$${name}`; const i = renderer.context_lookup.get(`$${name}`).index; - const insert = - reassigned || export_name - ? b`${`$$subscribe_${name}`}()` - : b`@component_subscribe($$self, ${name}, #value => $$invalidate(${i}, ${value} = #value))`; + const insert = (reassigned || export_name) + ? b`${`$$subscribe_${name}`}()` + : b`$$self.$$.on_destroy.push(@subscribe(${name}, #value => $$invalidate(${i}, ${value} = #value))`; if (component.compile_options.dev) { return b`@validate_store_dev(${name}, '${name}'); ${insert}`; @@ -350,8 +301,7 @@ export default function dom( } const args = [x`$$self`]; - const has_invalidate = - props.length > 0 || + const has_invalidate = props.length > 0 || component.has_reactive_assignments || component.slots.size > 0 || capture_state || @@ -363,8 +313,7 @@ export default function dom( args.push(x`$$props`); } - const has_create_fragment = - component.compile_options.dev || block.has_content(); + const has_create_fragment = component.compile_options.dev || block.has_content(); if (has_create_fragment) { body.push(b` function create_fragment(#ctx) { @@ -379,21 +328,17 @@ export default function dom( ${component.fully_hoisted} `); - const filtered_props = props.filter((prop) => { + const filtered_props = props.filter(prop => { const variable = component.var_lookup.get(prop.name); if (variable.hoistable) return false; - if (prop.name[0] === "$") return false; + if (prop.name[0] === '$') return false; return true; }); - const reactive_stores = component.vars.filter( - (variable) => variable.name[0] === "$" && variable.name[1] !== "$" - ); + const reactive_stores = component.vars.filter((variable) => variable.name[0] === '$' && variable.name[1] !=='$'); - const instance_javascript = component.extract_javascript( - component.ast.instance - ); + const instance_javascript = component.extract_javascript(component.ast.instance); let i = renderer.context.length; while (i--) { @@ -406,7 +351,7 @@ export default function dom( } const initial_context = renderer.context.slice(0, i + 1); - const has_definition = + const has_definition = ( component.compile_options.dev || (instance_javascript && instance_javascript.length > 0) || filtered_props.length > 0 || @@ -415,23 +360,21 @@ export default function dom( initial_context.length > 0 || component.reactive_declarations.length > 0 || capture_state || - inject_state; + inject_state + ); const definition = has_definition - ? component.alias("instance") - : { type: "Literal", value: null }; + ? component.alias('instance') + : { type: 'Literal', value: null }; const reactive_store_subscriptions = reactive_stores - .filter((store) => { + .filter(store => { const variable = component.var_lookup.get(store.name.slice(1)); return !variable || variable.hoistable; }) .map( ({ name }) => b` - ${ - component.compile_options.dev && - b`@validate_store_dev(${name.slice(1)}, '${name.slice(1)}');` - } + ${component.compile_options.dev && b`@validate_store_dev(${name.slice(1)}, '${name.slice(1)}');`} $$self.$$.on_destroy.push(@subscribe(${name.slice(1)}, #value => { $$invalidate(${renderer.context_lookup.get(name).index}, ${name} = #value); })); @@ -439,44 +382,30 @@ export default function dom( ); const resubscribable_reactive_store_unsubscribers = reactive_stores - .filter((store) => { + .filter(store => { const variable = component.var_lookup.get(store.name.slice(1)); return variable && (variable.reassigned || variable.export_name); }) - .map( - ({ name }) => - b`$$self.$$.on_destroy.push(() => ${`$$unsubscribe_${name.slice( - 1 - )}`}());` - ); + .map(({ name }) => b`$$self.$$.on_destroy.push(() => ${`$$unsubscribe_${name.slice(1)}`}());`); if (has_definition) { - const reactive_declarations: Node | Node[] = []; + const reactive_declarations: (Node | Node[]) = []; const fixed_reactive_declarations = []; // not really 'reactive' but whatever - component.reactive_declarations.forEach((d) => { + component.reactive_declarations.forEach(d => { const dependencies = Array.from(d.dependencies); - const uses_rest_or_props = !!dependencies.find( - (n) => n === "$$props" || n === "$$restProps" - ); + const uses_rest_or_props = !!dependencies.find(n => n === '$$props' || n === '$$restProps'); - const writable = dependencies.filter((n) => { + const writable = dependencies.filter(n => { const variable = component.var_lookup.get(n); - return ( - variable && - (variable.export_name || variable.mutated || variable.reassigned) - ); + return variable && (variable.export_name || variable.mutated || variable.reassigned); }); - const condition = - !uses_rest_or_props && - writable.length > 0 && - renderer.dirty(writable, true); + const condition = !uses_rest_or_props && writable.length > 0 && renderer.dirty(writable, true); let statement = d.node; // TODO remove label (use d.node.body) if it's not referenced - if (condition) - statement = b`if (${condition}) { ${statement} }`[0] as Statement; + if (condition) statement = b`if (${condition}) { ${statement} }`[0] as Statement; if (condition || uses_rest_or_props) { reactive_declarations.push(statement); @@ -485,14 +414,12 @@ export default function dom( } }); - const injected = Array.from( - component.injected_reactive_declaration_vars - ).filter((name) => { + const injected = Array.from(component.injected_reactive_declaration_vars).filter(name => { const variable = component.var_lookup.get(name); - return variable.injected && variable.name[0] !== "$"; + return variable.injected && variable.name[0] !== '$'; }); - const reactive_store_declarations = reactive_stores.map((variable) => { + const reactive_store_declarations = reactive_stores.map(variable => { const $name = variable.name; const name = $name.slice(1); @@ -517,26 +444,19 @@ export default function dom( let unknown_props_check; if (component.compile_options.dev && !(uses_props || uses_rest)) { unknown_props_check = b` - const writable_props = [${writable_props.map( - (prop) => x`'${prop.export_name}'` - )}]; + const writable_props = [${writable_props.map(prop => x`'${prop.export_name}'`)}]; @_Object.keys($$props).forEach(key => { - if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$') @_console.warn(\`<${ - component.tag - }> was created with unknown prop '\${key}'\`); + if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$') @_console.warn(\`<${component.tag}> was created with unknown prop '\${key}'\`); }); `; } const return_value = { - type: "ArrayExpression", - elements: initial_context.map( - (member) => - ({ - type: "Identifier", - name: member.name, - } as Expression) - ), + type: 'ArrayExpression', + elements: initial_context.map(member => ({ + type: 'Identifier', + name: member.name + }) as Expression) }; body.push(b` @@ -553,19 +473,8 @@ export default function dom( ${unknown_props_check} - ${ - component.slots.size || component.compile_options.dev - ? b`let { $$slots = {}, $$scope } = $$props;` - : null - } - ${ - component.compile_options.dev && - b`@validate_slots_dev('${component.tag}', $$slots, [${[ - ...component.slots.keys(), - ] - .map((key) => `'${key}'`) - .join(",")}]);` - } + ${component.slots.size || component.compile_options.dev ? b`let { $$slots = {}, $$scope } = $$props;` : null} + ${component.compile_options.dev && b`@validate_slots_dev('${component.tag}', $$slots, [${[...component.slots.keys()].map(key => `'${key}'`).join(',')}]);`} ${ renderer.binding_groups.length @@ -583,18 +492,15 @@ export default function dom( ${inject_state && b`$$self.$inject_state = ${inject_state};`} - ${injected.map((name) => b`let ${name};`)} + ${injected.map(name => b`let ${name};`)} ${/* before reactive declarations */ props_inject} - ${ - reactive_declarations.length > 0 && - b` + ${reactive_declarations.length > 0 && b` $$self.$$.update = () => { ${reactive_declarations} }; - ` - } + `} ${fixed_reactive_declarations} @@ -611,11 +517,7 @@ export default function dom( } const prop_indexes = x`{ - ${props - .filter((v) => v.export_name && !v.module) - .map( - (v) => p`${v.export_name}: ${renderer.context_lookup.get(v.name).index}` - )} + ${props.filter(v => v.export_name && !v.module).map(v => p`${v.export_name}: ${renderer.context_lookup.get(v.name).index}`)} }` as ObjectExpression; let dirty; @@ -632,19 +534,9 @@ export default function dom( constructor(options) { super(); - ${ - css.code && - b`this.shadowRoot.innerHTML = \`\`;` - } + ${css.code && b`this.shadowRoot.innerHTML = \`\`;`} - @init(this, { target: this.shadowRoot }, ${definition}, ${ - has_create_fragment ? "create_fragment" : "null" - }, ${not_equal}, ${prop_indexes}, ${dirty}); + @init(this, { target: this.shadowRoot }, ${definition}, ${has_create_fragment ? 'create_fragment': 'null'}, ${not_equal}, ${prop_indexes}, ${dirty}); ${dev_props_check} @@ -665,11 +557,11 @@ export default function dom( if (props.length > 0) { declaration.body.body.push({ - type: "MethodDefinition", - kind: "get", + type: 'MethodDefinition', + kind: 'get', static: true, computed: false, - key: { type: "Identifier", name: "observedAttributes" }, + key: { type: 'Identifier', name: 'observedAttributes' }, value: x`function() { return [${props.map(prop => x`"${prop.export_name}"`)}]; }` as FunctionExpression @@ -687,8 +579,8 @@ export default function dom( } } else { const superclass = { - type: "Identifier", - name: options.dev ? "@SvelteComponentDev" : "@SvelteComponent" + type: 'Identifier', + name: options.dev ? '@SvelteComponentDev' : '@SvelteComponent' }; const declaration = b` diff --git a/src/compiler/compile/render_dom/invalidate.ts b/src/compiler/compile/render_dom/invalidate.ts index a553360513..28e4f37e3f 100644 --- a/src/compiler/compile/render_dom/invalidate.ts +++ b/src/compiler/compile/render_dom/invalidate.ts @@ -19,7 +19,8 @@ export function invalidate(renderer: Renderer, scope: Scope, node: Node, names: !variable.hoistable && !variable.global && !variable.module && - (variable.referenced || + ( + variable.referenced || variable.subscribable || variable.is_reactive_dependency || variable.export_name || @@ -74,4 +75,4 @@ export function invalidate(renderer: Renderer, scope: Scope, node: Node, names: } return node; -} +} \ No newline at end of file diff --git a/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts b/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts index 7fe8b0cb38..249d5d08f6 100644 --- a/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts +++ b/src/compiler/compile/render_dom/wrappers/AwaitBlock.ts @@ -237,7 +237,9 @@ export default class AwaitBlockWrapper extends Wrapper { ${promise} !== (${promise} = ${snippet}) && @handle_promise(${promise}, ${info})`; - block.chunks.update.push(b`${info}.ctx = #ctx;`); + block.chunks.update.push( + b`${info}.ctx = #ctx;` + ); if (this.pending.block.has_update_method) { block.chunks.update.push(b` diff --git a/src/compiler/compile/render_dom/wrappers/EachBlock.ts b/src/compiler/compile/render_dom/wrappers/EachBlock.ts index ec8a065f7d..a1bd8e00c7 100644 --- a/src/compiler/compile/render_dom/wrappers/EachBlock.ts +++ b/src/compiler/compile/render_dom/wrappers/EachBlock.ts @@ -90,7 +90,7 @@ export default class EachBlockWrapper extends Wrapper { // @ts-ignore todo: probably error key: node.key as string, - bindings: new Map(block.bindings), + bindings: new Map(block.bindings) }); // TODO this seems messy diff --git a/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts b/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts index fa4136c82b..d0ea70a4ff 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/Attribute.ts @@ -43,12 +43,12 @@ export default class AttributeWrapper { const element = this.parent; const name = fix_attribute_casing(this.node.name); return name === 'value' && - (element.node.name === 'option' || // TODO check it's actually bound - (element.node.name === 'input' && - element.node.bindings.some( - (binding) => - /checked|group/.test(binding.name) - ))); + (element.node.name === 'option' || // TODO check it's actually bound + (element.node.name === 'input' && + element.node.bindings.some( + (binding) => + /checked|group/.test(binding.name) + ))); } render(block: Block) { @@ -69,7 +69,7 @@ export default class AttributeWrapper { const method = /-/.test(element.node.name) ? '@set_custom_element_data' : name.slice(0, 6) === 'xlink:' - ? '@xlink_attr' + ? '@xlink_attr' : '@attr'; const dependencies = this.node.get_dependencies(); diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts index 871ee0727e..d0a0d284a9 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/index.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts @@ -440,7 +440,7 @@ export default class ElementWrapper extends Wrapper { const name = this.node.namespace ? this.node.name : this.node.name.toUpperCase(); - + const svg = this.node.namespace === namespaces.svg || this.node.namespace === 'svg' ? 1 : null; return x`@claim_element(${nodes}, "${name}", { ${attributes} }, ${svg})`; @@ -508,7 +508,6 @@ export default class ElementWrapper extends Wrapper { const lock = bindingGroup.bindings.some(binding => binding.needs_lock) ? block.get_unique_name(`${this.var.name}_updating`) : null; - if (lock) block.add_variable(lock, x`false`); [bindingGroup].forEach(group => { @@ -571,7 +570,7 @@ export default class ElementWrapper extends Wrapper { callee = handler; } - const params = Array.from(contextual_dependencies).map((name) => ({ + const params = Array.from(contextual_dependencies).map(name => ({ type: 'Identifier', name })); @@ -610,7 +609,7 @@ export default class ElementWrapper extends Wrapper { .map(binding => x`${binding.snippet} === void 0`) .reduce((lhs, rhs) => x`${lhs} || ${rhs}`); - const should_initialise = + const should_initialise = ( this.node.name === 'select' || group.bindings.find(binding => { return ( @@ -619,7 +618,8 @@ export default class ElementWrapper extends Wrapper { binding.node.name === 'innerHTML' || binding.is_readonly_media_attribute() ); - }); + }) + ); if (should_initialise) { const callback = has_local_function ? handler : x`() => ${callee}.call(${this.var})`; @@ -651,7 +651,7 @@ export default class ElementWrapper extends Wrapper { add_attributes(block: Block) { // Get all the class dependencies first - this.attributes.forEach(attribute => { + this.attributes.forEach((attribute) => { if (attribute.node.name === 'class') { const dependencies = attribute.node.get_dependencies(); this.class_dependencies.push(...dependencies); @@ -663,7 +663,7 @@ export default class ElementWrapper extends Wrapper { return; } - this.attributes.forEach(attribute => { + this.attributes.forEach((attribute) => { attribute.render(block); }); } @@ -681,23 +681,23 @@ export default class ElementWrapper extends Wrapper { ? block.renderer.dirty(Array.from(attr.node.dependencies)) : null; - if (attr.node.is_spread) { - const snippet = attr.node.expression.manipulate(block); + if (attr.node.is_spread) { + const snippet = attr.node.expression.manipulate(block); - initial_props.push(snippet); + initial_props.push(snippet); - updates.push(condition ? x`${condition} && ${snippet}` : snippet); - } else { - const metadata = attr.get_metadata(); - const name = attr.is_indirectly_bound_value() - ? '__value' - : (metadata && metadata.property_name) || fix_attribute_casing(attr.node.name); - const snippet = x`{ ${name}: ${attr.get_value(block)} }`; - initial_props.push(snippet); - - updates.push(condition ? x`${condition} && ${snippet}` : snippet); - } - }); + updates.push(condition ? x`${condition} && ${snippet}` : snippet); + } else { + const metadata = attr.get_metadata(); + const name = attr.is_indirectly_bound_value() + ? '__value' + : (metadata && metadata.property_name) || fix_attribute_casing(attr.node.name); + const snippet = x`{ ${name}: ${attr.get_value(block)} }`; + initial_props.push(snippet); + + updates.push(condition ? x`${condition} && ${snippet}` : snippet); + } + }); block.chunks.init.push(b` const ${levels} = [${initial_props}]; diff --git a/src/compiler/compile/render_dom/wrappers/IfBlock.ts b/src/compiler/compile/render_dom/wrappers/IfBlock.ts index 6b8e98ad00..63fffec093 100644 --- a/src/compiler/compile/render_dom/wrappers/IfBlock.ts +++ b/src/compiler/compile/render_dom/wrappers/IfBlock.ts @@ -245,7 +245,7 @@ export default class IfBlockWrapper extends Wrapper { } this.branches.forEach(branch => { - branch.fragment.render(branch.block, null, (x`#nodes` as unknown) as Identifier); + branch.fragment.render(branch.block, null, x`#nodes` as unknown as Identifier); }); } @@ -399,7 +399,7 @@ export default class IfBlockWrapper extends Wrapper { ${!has_else && b`return -1;`} } ` - : b` + : b` function ${select_block_type}(#ctx, #dirty) { ${this.branches.map(({ condition, snippet }, i) => condition ? b`if (${snippet || condition}) return ${i};` diff --git a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts index 972262af50..47e9b21d20 100644 --- a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts +++ b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts @@ -94,7 +94,7 @@ export default class InlineComponentWrapper extends Wrapper { const dependencies: Set = new Set(); // TODO is this filtering necessary? (I *think* so) - default_slot.dependencies.forEach((name) => { + default_slot.dependencies.forEach(name => { if (!this.node.scope.is_let(name)) { dependencies.add(name); } @@ -169,7 +169,7 @@ export default class InlineComponentWrapper extends Wrapper { }`, p`$$scope: { ctx: #ctx - }`, + }` ] : []; diff --git a/src/compiler/compile/render_dom/wrappers/Slot.ts b/src/compiler/compile/render_dom/wrappers/Slot.ts index fb4cf00991..7011c863bb 100644 --- a/src/compiler/compile/render_dom/wrappers/Slot.ts +++ b/src/compiler/compile/render_dom/wrappers/Slot.ts @@ -121,7 +121,7 @@ export default class SlotWrapper extends Wrapper { if (!has_fallback) { renderer.remove_block(this.fallback); } - } + } const slot = block.get_unique_name(`${sanitize(slot_name)}_slot`); const slot_definition = block.get_unique_name(`${sanitize(slot_name)}_slot_template`); @@ -181,14 +181,11 @@ export default class SlotWrapper extends Wrapper { if (#changes) ${slot}.p(${context}, #changes); } `; - const fallback_update = - has_fallback && - fallback_dynamic_dependencies.length > 0 && - b` + const fallback_update = has_fallback && fallback_dynamic_dependencies.length > 0 && b` if (${slot_or_fallback} && ${slot_or_fallback}.p && ${renderer.dirty(fallback_dynamic_dependencies)}) { ${slot_or_fallback}.p(#ctx, #dirty); } - `; + `; if (fallback_update) { block.chunks.update.push(b` diff --git a/src/compiler/compile/render_ssr/handlers/Element.ts b/src/compiler/compile/render_ssr/handlers/Element.ts index bec765f51c..a67e42b98c 100644 --- a/src/compiler/compile/render_ssr/handlers/Element.ts +++ b/src/compiler/compile/render_ssr/handlers/Element.ts @@ -20,7 +20,7 @@ export default function(node: Element, renderer: Renderer, options: RenderOption const contenteditable = ( node.name !== 'textarea' && node.name !== 'input' && - node.attributes.some((attribute) => attribute.name === 'contenteditable') + node.attributes.some(attribute => attribute.name === 'contenteditable') ); const slot = node.get_static_attribute_value('slot'); diff --git a/src/compiler/compile/render_ssr/handlers/InlineComponent.ts b/src/compiler/compile/render_ssr/handlers/InlineComponent.ts index 70dab13a59..3f8ca9d9d9 100644 --- a/src/compiler/compile/render_ssr/handlers/InlineComponent.ts +++ b/src/compiler/compile/render_ssr/handlers/InlineComponent.ts @@ -62,8 +62,8 @@ export default function(node: InlineComponent, renderer: Renderer, options: Rend node.name === 'svelte:self' ? renderer.name : node.name === 'svelte:component' - ? x`(${node.expression.node}) || @missing_component` - : node.name.split('.').reduce(((lhs, rhs) => x`${lhs}.${rhs}`) as any) + ? x`(${node.expression.node}) || @missing_component` + : node.name.split('.').reduce(((lhs, rhs) => x`${lhs}.${rhs}`) as any) ); const slot_fns = []; @@ -105,4 +105,4 @@ function is_empty_template_literal(template_literal) { template_literal.quasis.length === 1 && template_literal.quasis[0].value.raw === "" ); -} +} \ No newline at end of file diff --git a/src/compiler/compile/utils/get_slot_data.ts b/src/compiler/compile/utils/get_slot_data.ts index 02f2f81652..15886adb8d 100644 --- a/src/compiler/compile/utils/get_slot_data.ts +++ b/src/compiler/compile/utils/get_slot_data.ts @@ -11,7 +11,7 @@ export default function get_slot_data(values: Map, block: Blo .map(attribute => { const value = get_value(block, attribute); return p`${attribute.name}: ${value}`; - }), + }) }; } @@ -20,7 +20,7 @@ function get_value(block: Block, attribute: Attribute) { if (attribute.chunks.length === 0) return x`""`; let value = attribute.chunks - .map((chunk) => (chunk.type === 'Text' ? string_literal(chunk.data) : block ? chunk.manipulate(block) : chunk.node)) + .map(chunk => (chunk.type === 'Text' ? string_literal(chunk.data) : block ? chunk.manipulate(block) : chunk.node)) .reduce((lhs, rhs) => x`${lhs} + ${rhs}`); if (attribute.chunks.length > 1 && attribute.chunks[0].type !== 'Text') { diff --git a/src/compiler/parse/state/mustache.ts b/src/compiler/parse/state/mustache.ts index ee4736fcef..4e1d5c5fd4 100644 --- a/src/compiler/parse/state/mustache.ts +++ b/src/compiler/parse/state/mustache.ts @@ -233,42 +233,42 @@ export default function mustache(parser: Parser) { const expression = read_expression(parser); const block: TemplateNode = type === 'AwaitBlock' ? - { - start, - end: null, - type, - expression, - value: null, - error: null, - pending: { - start: null, + { + start, end: null, - type: 'PendingBlock', - children: [], - skip: true - }, - then: { - start: null, - end: null, - type: 'ThenBlock', - children: [], - skip: true - }, - catch: { - start: null, + type, + expression, + value: null, + error: null, + pending: { + start: null, + end: null, + type: 'PendingBlock', + children: [], + skip: true + }, + then: { + start: null, + end: null, + type: 'ThenBlock', + children: [], + skip: true + }, + catch: { + start: null, + end: null, + type: 'CatchBlock', + children: [], + skip: true + }, + } : + { + start, end: null, - type: 'CatchBlock', + type, + expression, children: [], - skip: true - }, - } : - { - start, - end: null, - type, - expression, - children: [], - }; + }; parser.allow_whitespace(); diff --git a/src/compiler/utils/link.ts b/src/compiler/utils/link.ts index c54f5f2688..7cdef75d94 100644 --- a/src/compiler/utils/link.ts +++ b/src/compiler/utils/link.ts @@ -1,4 +1,4 @@ export function link(next: T, prev: T) { prev.next = next; if (next) next.prev = prev; -} \ No newline at end of file +} diff --git a/src/runtime/animate/index.ts b/src/runtime/animate/index.ts index d25117b02c..8715ef97c0 100644 --- a/src/runtime/animate/index.ts +++ b/src/runtime/animate/index.ts @@ -24,6 +24,6 @@ export function flip( delay, duration: run_duration(duration, Math.sqrt(dx * dx + dy * dy)), easing, - css: (_t, u) => `transform: ${transform} translate(${u * dx}px, ${u * dy}px);`, + css: (_t, u) => `transform: ${transform} translate(${u * dx}px, ${u * dy}px);` }; } diff --git a/src/runtime/index.ts b/src/runtime/index.ts index 2d17e308be..0222d21336 100644 --- a/src/runtime/index.ts +++ b/src/runtime/index.ts @@ -10,5 +10,5 @@ export { getContext, tick, createEventDispatcher, - SvelteComponentDev as SvelteComponent, + SvelteComponentDev as SvelteComponent } from 'svelte/internal'; diff --git a/src/runtime/internal/Component.ts b/src/runtime/internal/Component.ts index 7f6682a0c2..07212d5c11 100644 --- a/src/runtime/internal/Component.ts +++ b/src/runtime/internal/Component.ts @@ -3,21 +3,20 @@ import { current_component, set_current_component } from './lifecycle'; import { children, detach } from './dom'; import { transition_in } from './transitions'; import { noop } from './environment'; -type binary = 0 | 1; export interface Fragment { key: string | null; first: null; /* create */ c: () => void; /* claim */ l: (nodes: any) => void; /* hydrate */ h: () => void; - /* mount */ m: (target: HTMLElement, anchor: any, is_remount: binary) => void; + /* mount */ m: (target: HTMLElement, anchor: any) => void; /* update */ p: (ctx: any, dirty: any) => void; /* measure */ r: () => void; /* fix */ f: () => void; /* animate */ a: () => void; - /* intro */ i: (local: binary) => void; - /* outro */ o: (local: binary) => void; - /* destroy */ d: (detaching: binary) => void; + /* intro */ i: (local: any) => void; + /* outro */ o: (local: any) => void; + /* destroy */ d: (detaching: 0|1) => void; } // eslint-disable-next-line @typescript-eslint/class-name-casing export interface T$$ { @@ -106,7 +105,7 @@ export function init( if ($$.ctx && not_equal($$.ctx[i], ($$.ctx[i] = 0 in rest ? rest[0] : res))) { if (i in $$.bound) $$.bound[i]($$.ctx[i]); if (ready) { - if (!~$$.dirty[0]) { + if (-1 === $$.dirty[0]) { schedule_update(component); $$.dirty.fill(0); } @@ -181,12 +180,13 @@ export const SvelteElement = callbacks.push(callback); return () => { const index = callbacks.indexOf(callback); - if (~index) callbacks.splice(index, 1); + if (index !== -1) callbacks.splice(index, 1); }; } - // overridden by instance, if it has props - $set() {} + $set() { + // overridden by instance, if it has props + } }; export class SvelteComponent { @@ -200,9 +200,10 @@ export class SvelteComponent { callbacks.push(callback); return () => { const index = callbacks.indexOf(callback); - if (~index) callbacks.splice(index, 1); + if (index !== -1) callbacks.splice(index, 1); }; } - // overridden by instance, if it has props - $set() {} + $set() { + // overridden by instance, if it has props + } } diff --git a/src/runtime/internal/await_block.ts b/src/runtime/internal/await_block.ts index 640c9f6d3d..1631cc92af 100644 --- a/src/runtime/internal/await_block.ts +++ b/src/runtime/internal/await_block.ts @@ -53,18 +53,15 @@ export function handle_promise(promise, info) { if (promise && typeof promise === 'object' && typeof promise.then === 'function') { const current_component = get_current_component(); - promise.then( - (value) => { - set_current_component(current_component); - update(info.then, 1, info.value, value); - set_current_component(null); - }, - (error) => { - set_current_component(current_component); - update(info.catch, 2, info.error, error); - set_current_component(null); - } - ); + promise.then(value => { + set_current_component(current_component); + update(info.then, 1, info.value, value); + set_current_component(null); + }, error => { + set_current_component(current_component); + update(info.catch, 2, info.error, error); + set_current_component(null); + }); // if we previously had a then/catch block, destroy it if (info.current !== info.pending) { diff --git a/src/runtime/internal/dev.ts b/src/runtime/internal/dev.ts index c24fc3717c..10b668f67d 100644 --- a/src/runtime/internal/dev.ts +++ b/src/runtime/internal/dev.ts @@ -2,14 +2,14 @@ import { custom_event, append, insert, detach, listen, attr } from './dom'; import { has_Symbol } from './environment'; import { SvelteComponent } from './Component'; +export function dispatch_dev(type: string, detail?: T) { + document.dispatchEvent(custom_event(type, { version: __VERSION__, ...detail })); +} export function add_location_dev(element, file, line, column, char) { element.__svelte_meta = { loc: { file, line, column, char }, }; } -export function dispatch_dev(type: string, detail?: T) { - document.dispatchEvent(custom_event(type, { version: __VERSION__, ...detail })); -} export function append_dev(target: Node, node: Node) { dispatch_dev('SvelteDOMInsert', { target, node }); diff --git a/src/runtime/internal/lifecycle.ts b/src/runtime/internal/lifecycle.ts index 591eea5119..7ff266c37e 100644 --- a/src/runtime/internal/lifecycle.ts +++ b/src/runtime/internal/lifecycle.ts @@ -12,29 +12,29 @@ const on_init_only = (name: string) => { }; export function get_current_component() { - return current_component; + current_component; } export function beforeUpdate(fn) { on_init_only(`beforeUpdate`); - return current_component.$$.before_update.push(fn); + current_component.$$.before_update.push(fn); } export function onMount(fn) { on_init_only(`onMount`); - return current_component.$$.on_mount.push(fn); + current_component.$$.on_mount.push(fn); } export function afterUpdate(fn) { on_init_only(`afterUpdate`); - return current_component.$$.after_update.push(fn); + current_component.$$.after_update.push(fn); } export function onDestroy(fn) { on_init_only(`onDestroy`); - return current_component.$$.on_destroy.push(fn); + current_component.$$.on_destroy.push(fn); } -// todo : deprecate + export function createEventDispatcher() { on_init_only(`createEventDispatcher`); const component = current_component; diff --git a/src/runtime/internal/ssr.ts b/src/runtime/internal/ssr.ts index f55073ae72..553b82a9fe 100644 --- a/src/runtime/internal/ssr.ts +++ b/src/runtime/internal/ssr.ts @@ -16,13 +16,13 @@ export function spread(args, classes_to_add) { } let str = ''; - Object.keys(attributes).forEach((name) => { + Object.keys(attributes).forEach(name => { if (invalid_attribute_name_character.test(name)) return; const value = attributes[name]; - if (value === true) str += ' ' + name; + if (value === true) str += " " + name; else if (boolean_attributes.has(name.toLowerCase())) { - if (value) str += ' ' + name; + if (value) str += " " + name; } else if (value != null) { str += ` ${name}="${String(value).replace(/"/g, '"').replace(/'/g, ''')}"`; } @@ -36,11 +36,11 @@ export const escaped = { "'": ''', '&': '&', '<': '<', - '>': '>', + '>': '>' }; export function escape(html) { - return String(html).replace(/["'&<>]/g, (match) => escaped[match]); + return String(html).replace(/["'&<>]/g, match => escaped[match]); } export function each(items, fn) { @@ -52,15 +52,13 @@ export function each(items, fn) { } export const missing_component = { - $$render: () => '', + $$render: () => '' }; export function validate_component(component, name) { if (!component || !component.$$render) { if (name === 'svelte:component') name += ' this={...}'; - throw new Error( - `<${name}> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules` - ); + throw new Error(`<${name}> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules`); } return component; @@ -117,26 +115,22 @@ export function create_ssr_component(fn) { return { html, css: { - code: Array.from(result.css) - .map((css) => css.code) - .join('\n'), - map: null, // TODO + code: Array.from(result.css).map(css => css.code).join('\n'), + map: null // TODO }, - head: result.title + result.head, + head: result.title + result.head }; }, - $$render, + $$render }; } export function add_attribute(name, value, boolean) { if (value == null || (boolean && !value)) return ''; - return ` ${name}${ - value === true ? '' : `=${typeof value === 'string' ? JSON.stringify(escape(value)) : `"${value}"`}` - }`; + return ` ${name}${value === true ? '' : `=${typeof value === 'string' ? JSON.stringify(escape(value)) : `"${value}"`}`}`; } export function add_classes(classes) { return classes ? ` class="${classes}"` : ``; -} +} \ No newline at end of file