|
|
|
|
@ -10,12 +10,13 @@ import addToSet from '../../../../utils/addToSet';
|
|
|
|
|
import deindent from '../../../../utils/deindent';
|
|
|
|
|
import Attribute from '../../../nodes/Attribute';
|
|
|
|
|
import getObject from '../../../../utils/getObject';
|
|
|
|
|
import Binding from '../../../nodes/Binding';
|
|
|
|
|
import flattenReference from '../../../../utils/flattenReference';
|
|
|
|
|
import createDebuggingComment from '../../../../utils/createDebuggingComment';
|
|
|
|
|
import sanitize from '../../../../utils/sanitize';
|
|
|
|
|
|
|
|
|
|
export default class InlineComponentWrapper extends Wrapper {
|
|
|
|
|
var: string;
|
|
|
|
|
_slots: Set<string>; // TODO lose the underscore
|
|
|
|
|
slots: Map<string, Block> = new Map();
|
|
|
|
|
node: InlineComponent;
|
|
|
|
|
fragment: FragmentWrapper;
|
|
|
|
|
|
|
|
|
|
@ -65,8 +66,15 @@ export default class InlineComponentWrapper extends Wrapper {
|
|
|
|
|
).toLowerCase();
|
|
|
|
|
|
|
|
|
|
if (this.node.children.length) {
|
|
|
|
|
this._slots = new Set(['default']);
|
|
|
|
|
this.fragment = new FragmentWrapper(renderer, block, node.children, this, stripWhitespace, nextSibling);
|
|
|
|
|
const default_slot = block.child({
|
|
|
|
|
comment: createDebuggingComment(node, renderer.component),
|
|
|
|
|
name: renderer.component.getUniqueName(`create_default_slot`)
|
|
|
|
|
});
|
|
|
|
|
this.renderer.blocks.push(default_slot);
|
|
|
|
|
this.slots.set('default', default_slot);
|
|
|
|
|
this.fragment = new FragmentWrapper(renderer, default_slot, node.children, this, stripWhitespace, nextSibling);
|
|
|
|
|
|
|
|
|
|
block.addDependencies(default_slot.dependencies);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
block.addOutro();
|
|
|
|
|
@ -84,15 +92,6 @@ export default class InlineComponentWrapper extends Wrapper {
|
|
|
|
|
|
|
|
|
|
const component_opts = [];
|
|
|
|
|
|
|
|
|
|
if (this.fragment) {
|
|
|
|
|
const slots = Array.from(this._slots).map(name => `${quoteNameIfNecessary(name)}: @createFragment()`);
|
|
|
|
|
component_opts.push(`slots: { ${slots.join(', ')} }`);
|
|
|
|
|
|
|
|
|
|
this.fragment.nodes.forEach((child: Wrapper) => {
|
|
|
|
|
child.render(block, `${this.var}.$$.slotted.default`, 'nodes');
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const statements: string[] = [];
|
|
|
|
|
const updates: string[] = [];
|
|
|
|
|
const postupdates: string[] = [];
|
|
|
|
|
@ -102,13 +101,16 @@ export default class InlineComponentWrapper extends Wrapper {
|
|
|
|
|
|
|
|
|
|
const usesSpread = !!this.node.attributes.find(a => a.isSpread);
|
|
|
|
|
|
|
|
|
|
const slot_props = Array.from(this.slots).map(([name, block]) => `$$slot_${sanitize(name)}: ${block.name}`);
|
|
|
|
|
if (slot_props.length > 0) slot_props.push(`$$scope: { ctx }`);
|
|
|
|
|
|
|
|
|
|
const attributeObject = usesSpread
|
|
|
|
|
? '{}'
|
|
|
|
|
? stringifyProps(slot_props)
|
|
|
|
|
: stringifyProps(
|
|
|
|
|
this.node.attributes.map(attr => `${quoteNameIfNecessary(attr.name)}: ${attr.getValue()}`)
|
|
|
|
|
this.node.attributes.map(attr => `${quoteNameIfNecessary(attr.name)}: ${attr.getValue()}`).concat(slot_props)
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
if (this.node.attributes.length || this.node.bindings.length) {
|
|
|
|
|
if (this.node.attributes.length || this.node.bindings.length || slot_props.length) {
|
|
|
|
|
if (!usesSpread && this.node.bindings.length === 0) {
|
|
|
|
|
component_opts.push(`props: ${attributeObject}`);
|
|
|
|
|
} else {
|
|
|
|
|
@ -117,6 +119,14 @@ export default class InlineComponentWrapper extends Wrapper {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (this.fragment) {
|
|
|
|
|
const default_slot = this.slots.get('default');
|
|
|
|
|
|
|
|
|
|
this.fragment.nodes.forEach((child: Wrapper) => {
|
|
|
|
|
child.render(default_slot, null, 'nodes');
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (component.options.dev) {
|
|
|
|
|
// TODO this is a terrible hack, but without it the component
|
|
|
|
|
// will complain that options.target is missing. This would
|
|
|
|
|
@ -125,7 +135,16 @@ export default class InlineComponentWrapper extends Wrapper {
|
|
|
|
|
component_opts.push(`$$inline: true`);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!usesSpread && (this.node.attributes.filter(a => a.isDynamic).length || this.node.bindings.length)) {
|
|
|
|
|
const fragment_dependencies = new Set();
|
|
|
|
|
this.slots.forEach(block => {
|
|
|
|
|
block.dependencies.forEach(name => {
|
|
|
|
|
if (renderer.component.mutable_props.has(name)) {
|
|
|
|
|
fragment_dependencies.add(name);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (!usesSpread && (this.node.attributes.filter(a => a.isDynamic).length || this.node.bindings.length || fragment_dependencies.size > 0)) {
|
|
|
|
|
updates.push(`var ${name_changes} = {};`);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -196,6 +215,10 @@ export default class InlineComponentWrapper extends Wrapper {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (fragment_dependencies.size > 0) {
|
|
|
|
|
updates.push(`if (${[...fragment_dependencies].map(n => `changed.${n}`).join(' || ')}) ${name_changes}.$$scope = { changed, ctx };`);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const munged_bindings = this.node.bindings.map(binding => {
|
|
|
|
|
component.has_reactive_assignments = true;
|
|
|
|
|
|
|
|
|
|
@ -375,7 +398,6 @@ export default class InlineComponentWrapper extends Wrapper {
|
|
|
|
|
${munged_bindings}
|
|
|
|
|
${munged_handlers}
|
|
|
|
|
|
|
|
|
|
${this.fragment && this.fragment.nodes.map(child => child.remount(name))}
|
|
|
|
|
${name}.$$.fragment.c();
|
|
|
|
|
@mount_component(${name}, ${updateMountNode}, ${anchor});
|
|
|
|
|
${name}.$$.fragment.i();
|
|
|
|
|
@ -448,10 +470,6 @@ export default class InlineComponentWrapper extends Wrapper {
|
|
|
|
|
`if (${name}) ${name}.$$.fragment.o();`
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
remount(name: string) {
|
|
|
|
|
return `${this.var}.$$.fragment.m(${name}.$$.slotted.default, null);`;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function isComputed(node: Node) {
|
|
|
|
|
|
Richard Harris
7 years ago