diff --git a/src/compile/render-dom/index.ts b/src/compile/render-dom/index.ts index aef29a194b..6151373d25 100644 --- a/src/compile/render-dom/index.ts +++ b/src/compile/render-dom/index.ts @@ -10,7 +10,7 @@ import add_to_set from '../utils/add_to_set'; import get_object from '../utils/get_object'; import { extract_names } from '../utils/scope'; import { nodes_match } from '../../utils/nodes_match'; -import { sanitize } from '../../utils/names'; +import { sanitize, quote_prop_if_necessary, quote_name_if_necessary } from '../../utils/names'; export default function dom( component: Component, @@ -305,8 +305,7 @@ export default function dom( const reactive_stores = component.vars.filter(variable => variable.name[0] === '$' && variable.name[1] !== '$'); if (renderer.slots.size > 0) { - const arr = Array.from(renderer.slots); - filtered_declarations.push(...arr.map(name => `$$slot_${sanitize(name)}`), '$$scope'); + filtered_declarations.push('$$slots', '$$scope'); } if (renderer.binding_groups.length > 0) { @@ -399,7 +398,7 @@ export default function dom( ${component.javascript} - ${renderer.slots.size && `let { ${[...renderer.slots].map(name => `$$slot_${sanitize(name)}`).join(', ')}, $$scope } = $$props;`} + ${renderer.slots.size && `let { $$slots = {}, $$scope } = $$props;`} ${renderer.binding_groups.length > 0 && `const $$binding_groups = [${renderer.binding_groups.map(_ => `[]`).join(', ')}];`} diff --git a/src/compile/render-dom/wrappers/InlineComponent/index.ts b/src/compile/render-dom/wrappers/InlineComponent/index.ts index 958a98bcb5..bc13014a29 100644 --- a/src/compile/render-dom/wrappers/InlineComponent/index.ts +++ b/src/compile/render-dom/wrappers/InlineComponent/index.ts @@ -119,16 +119,19 @@ export default class InlineComponentWrapper extends Wrapper { const uses_spread = !!this.node.attributes.find(a => a.is_spread); - const slot_props = Array.from(this.slots).map(([name, slot]) => `$$slot_${sanitize(name)}: [${slot.block.name}${slot.fn ? `, ${slot.fn}` : ''}]`); - if (slot_props.length > 0) slot_props.push(`$$scope: { ctx }`); + const slot_props = Array.from(this.slots).map(([name, slot]) => `${quote_name_if_necessary(name)}: [${slot.block.name}${slot.fn ? `, ${slot.fn}` : ''}]`); + + const initial_props = slot_props.length > 0 + ? [`$$slots: ${stringify_props(slot_props)}`, `$$scope: { ctx }`] + : []; const attribute_object = uses_spread - ? stringify_props(slot_props) + ? stringify_props(initial_props) : stringify_props( - this.node.attributes.map(attr => `${quote_name_if_necessary(attr.name)}: ${attr.get_value(block)}`).concat(slot_props) + this.node.attributes.map(attr => `${quote_name_if_necessary(attr.name)}: ${attr.get_value(block)}`).concat(initial_props) ); - if (this.node.attributes.length || this.node.bindings.length || slot_props.length) { + if (this.node.attributes.length || this.node.bindings.length || initial_props.length) { if (!uses_spread && this.node.bindings.length === 0) { component_opts.push(`props: ${attribute_object}`); } else { diff --git a/src/compile/render-dom/wrappers/Slot.ts b/src/compile/render-dom/wrappers/Slot.ts index 0374587c24..38896b4546 100644 --- a/src/compile/render-dom/wrappers/Slot.ts +++ b/src/compile/render-dom/wrappers/Slot.ts @@ -4,7 +4,7 @@ import Block from '../Block'; import Slot from '../../nodes/Slot'; import FragmentWrapper from './Fragment'; import deindent from '../../utils/deindent'; -import { sanitize } from '../../../utils/names'; +import { sanitize, quote_prop_if_necessary } from '../../../utils/names'; import add_to_set from '../../utils/add_to_set'; import get_slot_data from '../../utils/get_slot_data'; import { stringify_props } from '../../utils/stringify_props'; @@ -99,7 +99,7 @@ export default class SlotWrapper extends Wrapper { const slot_definition = block.get_unique_name(`${sanitize(slot_name)}_slot`); block.builders.init.add_block(deindent` - const ${slot_definition} = ctx.$$slot_${sanitize(slot_name)}; + const ${slot_definition} = ctx.$$slots${quote_prop_if_necessary(slot_name)}; const ${slot} = @create_slot(${slot_definition}, ctx, ${get_slot_context}); `);