diff --git a/src/compiler/compile/render_dom/wrappers/EachBlock.ts b/src/compiler/compile/render_dom/wrappers/EachBlock.ts index cc6b3b9e81..1bb62ff7f0 100644 --- a/src/compiler/compile/render_dom/wrappers/EachBlock.ts +++ b/src/compiler/compile/render_dom/wrappers/EachBlock.ts @@ -248,7 +248,7 @@ export default class EachBlockWrapper extends Wrapper { } if (this.else) { - const each_block_else = component.get_unique_name(`${this.var}_else`); + const each_block_else = component.get_unique_name(`${this.var.name}_else`); block.chunks.init.push(b`let ${each_block_else} = null;`); diff --git a/src/compiler/compile/render_dom/wrappers/Element/Binding.ts b/src/compiler/compile/render_dom/wrappers/Element/Binding.ts index 4ad6ae1a0d..19b6475aa5 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/Binding.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/Binding.ts @@ -142,7 +142,7 @@ export default class BindingWrapper { case 'paused': { // this is necessary to prevent audio restarting by itself - const last = block.get_unique_name(`${parent.var}_is_paused`); + const last = block.get_unique_name(`${parent.var.name}_is_paused`); block.add_variable(last, x`true`); update_conditions.push(x`${last} !== (${last} = ${this.snippet})`); diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts index 4ea74abd5f..365d92977b 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/index.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts @@ -250,7 +250,7 @@ export default class ElementWrapper extends Wrapper { } const node = this.var; - const nodes = parent_nodes && block.get_unique_name(`${this.var}_nodes`); // if we're in unclaimable territory, i.e. , parent_nodes is null + const nodes = parent_nodes && block.get_unique_name(`${this.var.name}_nodes`); // if we're in unclaimable territory, i.e. , parent_nodes is null block.add_variable(node); const render_statement = this.get_render_statement(); @@ -399,7 +399,7 @@ export default class ElementWrapper extends Wrapper { renderer.component.has_reactive_assignments = true; const lock = this.bindings.some(binding => binding.needs_lock) ? - block.get_unique_name(`${this.var}_updating`) : + block.get_unique_name(`${this.var.name}_updating`) : null; if (lock) block.add_variable(lock, x`false`); @@ -442,7 +442,7 @@ export default class ElementWrapper extends Wrapper { // own hands let animation_frame; if (group.events[0] === 'timeupdate') { - animation_frame = block.get_unique_name(`${this.var}_animationframe`); + animation_frame = block.get_unique_name(`${this.var.name}_animationframe`); block.add_variable(animation_frame); } @@ -461,14 +461,14 @@ export default class ElementWrapper extends Wrapper { ${animation_frame} = @raf(${handler}); ${needs_lock && `${lock} = true;`} } - #ctx.${handler}.call(${this.var}${contextual_dependencies.size > 0 ? ', #ctx' : ''}); + #ctx.${handler}.call(${this.var}, ${contextual_dependencies.size > 0 ? '#ctx' : null}); } `); } else { block.chunks.init.push(b` function ${handler}() { ${needs_lock && `${lock} = true;`} - #ctx.${handler}.call(${this.var}${contextual_dependencies.size > 0 ? ', #ctx' : ''}); + #ctx.${handler}.call(${this.var}, ${contextual_dependencies.size > 0 ? '#ctx' : null}); } `); } @@ -488,7 +488,7 @@ export default class ElementWrapper extends Wrapper { group.events.forEach(name => { if (name === 'resize') { // special case - const resize_listener = block.get_unique_name(`${this.var}_resize_listener`); + const resize_listener = block.get_unique_name(`${this.var.name}_resize_listener`); block.add_variable(resize_listener); block.chunks.mount.push( @@ -673,8 +673,8 @@ export default class ElementWrapper extends Wrapper { } else { - const intro_name = intro && block.get_unique_name(`${this.var}_intro`); - const outro_name = outro && block.get_unique_name(`${this.var}_outro`); + const intro_name = intro && block.get_unique_name(`${this.var.name}_intro`); + const outro_name = outro && block.get_unique_name(`${this.var.name}_outro`); if (intro) { block.add_variable(intro_name); diff --git a/src/compiler/compile/render_dom/wrappers/IfBlock.ts b/src/compiler/compile/render_dom/wrappers/IfBlock.ts index 817e1461a4..10cc0c5dd9 100644 --- a/src/compiler/compile/render_dom/wrappers/IfBlock.ts +++ b/src/compiler/compile/render_dom/wrappers/IfBlock.ts @@ -393,6 +393,7 @@ export default class IfBlockWrapper extends Wrapper { const initial_mount_node = parent_node || '#target'; const anchor_node = parent_node ? 'null' : 'anchor'; + throw new Error(`womp womp`); block.chunks.mount.push( b`${if_current_block_type_index}${if_blocks}[${current_block_type_index}].m(${initial_mount_node}, ${anchor_node});` ); @@ -508,7 +509,9 @@ export default class IfBlockWrapper extends Wrapper { ${name}.c(); ${has_transitions && b`@transition_in(${name}, 1);`} ${name}.m(${update_mount_node}, ${anchor}); - } ${has_transitions && b`else @transition_in(${name}, 1);`} + } else { + ${has_transitions && b`@transition_in(${name}, 1);`} + } `; if (branch.snippet) { diff --git a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts index 6d02d4210c..8df1faf436 100644 --- a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts +++ b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts @@ -124,20 +124,26 @@ 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]) => `${quote_name_if_necessary(name)}: [${slot.block.name}${slot.fn ? `, ${slot.fn}` : ''}]`); - let attribute_object; - if (this.node.attributes.length > 0 || this.node.bindings.length > 0 || slot_props.length > 0) { + if (this.node.attributes.length > 0 || this.node.bindings.length > 0 || this.slots.size > 0) { if (!uses_spread && this.node.bindings.length === 0) { const initial_props: any = x`{}`; - if (slot_props.length > 0) { + if (this.slots.size > 0) { initial_props.properties.push({ type: 'Property', kind: 'init', key: { type: 'Identifier', name: '$$slots' }, - value: slot_props + value: { + type: 'ObjectExpression', + properties: Array.from(this.slots).map(([name, slot]) => ({ + type: 'Property', + kind: 'init', + key: { type: 'Identifier', name }, + value: x`[${slot.block.name}, ${slot.fn}]` + })) + } }, { type: 'Property', kind: 'init', @@ -220,7 +226,7 @@ export default class InlineComponentWrapper extends Wrapper { if (this.node.attributes.length) { if (uses_spread) { - const levels = block.get_unique_name(`${this.var}_spread_levels`); + const levels = block.get_unique_name(`${this.var.name}_spread_levels`); const initial_props = []; const changes = []; diff --git a/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts b/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts index 3a05a3c1d3..609e57e0d1 100644 --- a/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts +++ b/src/compiler/compile/render_dom/wrappers/RawMustacheTag.ts @@ -52,7 +52,7 @@ export default class RawMustacheTagWrapper extends Tag { const update_anchor = in_head ? 'null' : needs_anchor ? html_anchor : this.next ? this.next.var : 'null'; block.chunks.hydrate.push(b`${html_tag} = new @HtmlTag(${init}, ${update_anchor});`); - block.chunks.mount.push(b`${html_tag}.m(${parent_node || '#target'}${parent_node ? '' : ', anchor'});`); + block.chunks.mount.push(b`${html_tag}.m(${parent_node || '#target'}, ${parent_node ? null : 'anchor'});`); if (needs_anchor) { block.add_element(html_anchor, x`@empty()`, x`@empty()`, parent_node); diff --git a/src/compiler/compile/render_dom/wrappers/Slot.ts b/src/compiler/compile/render_dom/wrappers/Slot.ts index aa05bd7fb9..40ef5b2626 100644 --- a/src/compiler/compile/render_dom/wrappers/Slot.ts +++ b/src/compiler/compile/render_dom/wrappers/Slot.ts @@ -4,7 +4,7 @@ import Block from '../Block'; import Slot from '../../nodes/Slot'; import FragmentWrapper from './Fragment'; import { b } from 'code-red'; -import { sanitize, quote_prop_if_necessary } from '../../../utils/names'; +import { sanitize } 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'; @@ -110,12 +110,10 @@ export default class SlotWrapper extends Wrapper { const slot_definition = block.get_unique_name(`${sanitize(slot_name)}_slot_template`); block.chunks.init.push(b` - const ${slot_definition} = #ctx.$$slots${quote_prop_if_necessary(slot_name)}; + const ${slot_definition} = #ctx.$$slots.${slot_name}; const ${slot} = @create_slot(${slot_definition}, #ctx, ${get_slot_context}); `); - const mount_before = block.chunks.mount.slice(); - // block.builders.create.push_condition(`!${slot}`); // block.builders.claim.push_condition(`!${slot}`); // block.builders.hydrate.push_condition(`!${slot}`); @@ -144,12 +142,8 @@ export default class SlotWrapper extends Wrapper { b`if (${slot}) ${slot}.l(${parent_nodes});` ); - const mount_leadin = block.chunks.mount.length !== mount_before.length - ? `else` - : `if (${slot})`; - block.chunks.mount.push(b` - ${mount_leadin} { + if (${slot}) { ${slot}.m(${parent_node || '#target'}, ${parent_node ? 'null' : 'anchor'}); } `);