diff --git a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts index 2132f8ca51..c818bdcf78 100644 --- a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts +++ b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts @@ -152,7 +152,7 @@ export default class InlineComponentWrapper extends Wrapper { const uses_spread = !!this.node.attributes.find(a => a.is_spread); - const uses_classes = this.node.classes.length > 0 + const uses_classes = this.node.classes.length > 0; const classNames: Identifier = { type: 'Identifier', @@ -182,7 +182,7 @@ export default class InlineComponentWrapper extends Wrapper { const attributes = uses_classes ? this.node.attributes.filter(a => a.name !== 'class') - : this.node.attributes + : this.node.attributes; const attribute_object = uses_spread ? x`{ ${initial_props} }` @@ -341,10 +341,10 @@ export default class InlineComponentWrapper extends Wrapper { if (attribute) { const dependencies = attribute.get_dependencies(); const condition = block.renderer.dirty(Array.from(dependencies)); - const value = attribute.get_value(block) + const value = attribute.get_value(block); updates.push(b`if (${condition}) { ${classNames}.$$class = ${value}; - }`) + }`); all_dependencies.push(...dependencies); initial_class_values.push(p`$$class: ${value}`); diff --git a/src/compiler/compile/render_ssr/handlers/InlineComponent.ts b/src/compiler/compile/render_ssr/handlers/InlineComponent.ts index 6fbf05ee8b..e37033ba40 100644 --- a/src/compiler/compile/render_ssr/handlers/InlineComponent.ts +++ b/src/compiler/compile/render_ssr/handlers/InlineComponent.ts @@ -35,12 +35,17 @@ export default function(node: InlineComponent, renderer: Renderer, options: Rend let props; - let attributes = node.attributes - let classProp + let attributes = node.attributes; + let classProp; if (node.classes.length > 0) { - const index = attributes.findIndex(a => a.name === 'class') - const attr = attributes[index] - attributes.splice(index, 1) + let attr; + attributes = attributes.filter(a => { + if (a.name === 'class') { + attr = a; + return false; + } + return true; + }); classProp = p` class: @component_classnames({ ${node.classes.map(class_directive => { @@ -50,7 +55,7 @@ export default function(node: InlineComponent, renderer: Renderer, options: Rend })}, ${attr ? p`$$class: ${get_prop_value(attr)}` : null} }) - ` + `; } if (uses_spread) { @@ -124,4 +129,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 +}