|
|
|
@ -541,131 +541,6 @@ export default class InlineComponent extends Node {
|
|
|
|
|
remount(name: string) {
|
|
|
|
|
return `${this.var}._mount(${name}._slotted.default, null);`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ssr() {
|
|
|
|
|
function stringifyAttribute(chunk: Node) {
|
|
|
|
|
if (chunk.type === 'Text') {
|
|
|
|
|
return escapeTemplate(escape(chunk.data));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return '${@escape( ' + chunk.snippet + ')}';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const bindingProps = this.bindings.map(binding => {
|
|
|
|
|
const { name } = getObject(binding.value.node);
|
|
|
|
|
const tail = binding.value.node.type === 'MemberExpression'
|
|
|
|
|
? getTailSnippet(binding.value.node)
|
|
|
|
|
: '';
|
|
|
|
|
|
|
|
|
|
return `${quoteNameIfNecessary(binding.name)}: ctx${quotePropIfNecessary(name)}${tail}`;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function getAttributeValue(attribute) {
|
|
|
|
|
if (attribute.isTrue) return `true`;
|
|
|
|
|
if (attribute.chunks.length === 0) return `''`;
|
|
|
|
|
|
|
|
|
|
if (attribute.chunks.length === 1) {
|
|
|
|
|
const chunk = attribute.chunks[0];
|
|
|
|
|
if (chunk.type === 'Text') {
|
|
|
|
|
return stringify(chunk.data);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return chunk.snippet;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return '`' + attribute.chunks.map(stringifyAttribute).join('') + '`';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const usesSpread = this.attributes.find(attr => attr.isSpread);
|
|
|
|
|
|
|
|
|
|
const props = usesSpread
|
|
|
|
|
? `Object.assign(${
|
|
|
|
|
this.attributes
|
|
|
|
|
.map(attribute => {
|
|
|
|
|
if (attribute.isSpread) {
|
|
|
|
|
return attribute.expression.snippet;
|
|
|
|
|
} else {
|
|
|
|
|
return `{ ${quoteNameIfNecessary(attribute.name)}: ${getAttributeValue(attribute)} }`;
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.concat(bindingProps.map(p => `{ ${p} }`))
|
|
|
|
|
.join(', ')
|
|
|
|
|
})`
|
|
|
|
|
: `{ ${this.attributes
|
|
|
|
|
.map(attribute => `${quoteNameIfNecessary(attribute.name)}: ${getAttributeValue(attribute)}`)
|
|
|
|
|
.concat(bindingProps)
|
|
|
|
|
.join(', ')} }`;
|
|
|
|
|
|
|
|
|
|
const expression = (
|
|
|
|
|
this.name === 'svelte:self'
|
|
|
|
|
? this.component.name
|
|
|
|
|
: this.name === 'svelte:component'
|
|
|
|
|
? `((${this.expression.snippet}) || @missingComponent)`
|
|
|
|
|
: `%components-${this.name}`
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
this.bindings.forEach(binding => {
|
|
|
|
|
const conditions = [];
|
|
|
|
|
|
|
|
|
|
let node = this;
|
|
|
|
|
while (node = node.parent) {
|
|
|
|
|
if (node.type === 'IfBlock') {
|
|
|
|
|
// TODO handle contextual bindings...
|
|
|
|
|
conditions.push(`(${node.expression.snippet})`);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
conditions.push(
|
|
|
|
|
`!('${binding.name}' in ctx)`,
|
|
|
|
|
`${expression}.data`
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const { name } = getObject(binding.value.node);
|
|
|
|
|
|
|
|
|
|
this.component.target.bindings.push(deindent`
|
|
|
|
|
if (${conditions.reverse().join('&&')}) {
|
|
|
|
|
tmp = ${expression}.data();
|
|
|
|
|
if ('${name}' in tmp) {
|
|
|
|
|
ctx${quotePropIfNecessary(binding.name)} = tmp.${name};
|
|
|
|
|
settled = false;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
`);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
let open = `\${@validateSsrComponent(${expression}, '${this.name}')._render(__result, ${props}`;
|
|
|
|
|
|
|
|
|
|
const options = [];
|
|
|
|
|
options.push(`store: options.store`);
|
|
|
|
|
|
|
|
|
|
if (this.children.length) {
|
|
|
|
|
const appendTarget: AppendTarget = {
|
|
|
|
|
slots: { default: '' },
|
|
|
|
|
slotStack: ['default']
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
this.component.target.appendTargets.push(appendTarget);
|
|
|
|
|
|
|
|
|
|
this.children.forEach((child: Node) => {
|
|
|
|
|
child.ssr();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const slotted = Object.keys(appendTarget.slots)
|
|
|
|
|
.map(name => `${quoteNameIfNecessary(name)}: () => \`${appendTarget.slots[name]}\``)
|
|
|
|
|
.join(', ');
|
|
|
|
|
|
|
|
|
|
options.push(`slotted: { ${slotted} }`);
|
|
|
|
|
|
|
|
|
|
this.component.target.appendTargets.pop();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (options.length) {
|
|
|
|
|
open += `, { ${options.join(', ')} }`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.component.target.append(open);
|
|
|
|
|
this.component.target.append(')}');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function isComputed(node: Node) {
|
|
|
|
|