mirror of https://github.com/sveltejs/svelte
Rich Harris
7 years ago
parent
3696e0865a
commit
a690ba0b8f
@ -1,296 +0,0 @@
|
|||||||
import Node from './shared/Node';
|
|
||||||
import Element from './Element';
|
|
||||||
import getObject from '../../utils/getObject';
|
|
||||||
import getTailSnippet from '../../utils/getTailSnippet';
|
|
||||||
import flattenReference from '../../utils/flattenReference';
|
|
||||||
import Block from '../dom/Block';
|
|
||||||
import Expression from './shared/Expression';
|
|
||||||
import Compiler from '../../compile/Compiler';
|
|
||||||
|
|
||||||
const readOnlyMediaAttributes = new Set([
|
|
||||||
'duration',
|
|
||||||
'buffered',
|
|
||||||
'seekable',
|
|
||||||
'played'
|
|
||||||
]);
|
|
||||||
|
|
||||||
export default class Binding extends Node {
|
|
||||||
name: string;
|
|
||||||
value: Expression;
|
|
||||||
isContextual: boolean;
|
|
||||||
usesContext: boolean;
|
|
||||||
obj: string;
|
|
||||||
prop: string;
|
|
||||||
|
|
||||||
constructor(compiler, parent, scope, info) {
|
|
||||||
super(compiler, parent, scope, info);
|
|
||||||
|
|
||||||
this.name = info.name;
|
|
||||||
this.value = new Expression(compiler, this, scope, info.value);
|
|
||||||
|
|
||||||
let obj;
|
|
||||||
let prop;
|
|
||||||
|
|
||||||
const { name } = getObject(this.value.node);
|
|
||||||
this.isContextual = scope.names.has(name);
|
|
||||||
|
|
||||||
if (this.value.node.type === 'MemberExpression') {
|
|
||||||
prop = `[✂${this.value.node.property.start}-${this.value.node.property.end}✂]`;
|
|
||||||
if (!this.value.node.computed) prop = `'${prop}'`;
|
|
||||||
obj = `[✂${this.value.node.object.start}-${this.value.node.object.end}✂]`;
|
|
||||||
|
|
||||||
this.usesContext = true;
|
|
||||||
} else {
|
|
||||||
obj = 'ctx';
|
|
||||||
prop = `'${name}'`;
|
|
||||||
|
|
||||||
this.usesContext = scope.names.has(name);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.obj = obj;
|
|
||||||
this.prop = prop;
|
|
||||||
}
|
|
||||||
|
|
||||||
munge(
|
|
||||||
block: Block
|
|
||||||
) {
|
|
||||||
const node: Element = this.parent;
|
|
||||||
|
|
||||||
const needsLock = node.name !== 'input' || !/radio|checkbox|range|color/.test(node.getStaticAttributeValue('type'));
|
|
||||||
const isReadOnly = node.isMediaNode() && readOnlyMediaAttributes.has(this.name);
|
|
||||||
|
|
||||||
let updateCondition: string;
|
|
||||||
|
|
||||||
const { name } = getObject(this.value.node);
|
|
||||||
const { snippet } = this.value;
|
|
||||||
|
|
||||||
// special case: if you have e.g. `<input type=checkbox bind:checked=selected.done>`
|
|
||||||
// and `selected` is an object chosen with a <select>, then when `checked` changes,
|
|
||||||
// we need to tell the component to update all the values `selected` might be
|
|
||||||
// pointing to
|
|
||||||
// TODO should this happen in preprocess?
|
|
||||||
const dependencies = new Set(this.value.dependencies);
|
|
||||||
this.value.dependencies.forEach((prop: string) => {
|
|
||||||
const indirectDependencies = this.compiler.indirectDependencies.get(prop);
|
|
||||||
if (indirectDependencies) {
|
|
||||||
indirectDependencies.forEach(indirectDependency => {
|
|
||||||
dependencies.add(indirectDependency);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// view to model
|
|
||||||
const valueFromDom = getValueFromDom(this.compiler, node, this);
|
|
||||||
const handler = getEventHandler(this, this.compiler, block, name, snippet, dependencies, valueFromDom);
|
|
||||||
|
|
||||||
// model to view
|
|
||||||
let updateDom = getDomUpdater(node, this, snippet);
|
|
||||||
let initialUpdate = updateDom;
|
|
||||||
|
|
||||||
// special cases
|
|
||||||
if (this.name === 'group') {
|
|
||||||
const bindingGroup = getBindingGroup(this.compiler, this.value.node);
|
|
||||||
|
|
||||||
block.builders.hydrate.addLine(
|
|
||||||
`#component._bindingGroups[${bindingGroup}].push(${node.var});`
|
|
||||||
);
|
|
||||||
|
|
||||||
block.builders.destroy.addLine(
|
|
||||||
`#component._bindingGroups[${bindingGroup}].splice(#component._bindingGroups[${bindingGroup}].indexOf(${node.var}), 1);`
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.name === 'currentTime' || this.name === 'volume') {
|
|
||||||
updateCondition = `!isNaN(${snippet})`;
|
|
||||||
|
|
||||||
if (this.name === 'currentTime')
|
|
||||||
initialUpdate = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.name === 'paused') {
|
|
||||||
// this is necessary to prevent audio restarting by itself
|
|
||||||
const last = block.getUniqueName(`${node.var}_is_paused`);
|
|
||||||
block.addVariable(last, 'true');
|
|
||||||
|
|
||||||
updateCondition = `${last} !== (${last} = ${snippet})`;
|
|
||||||
updateDom = `${node.var}[${last} ? "pause" : "play"]();`;
|
|
||||||
initialUpdate = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
name: this.name,
|
|
||||||
object: name,
|
|
||||||
handler,
|
|
||||||
updateDom,
|
|
||||||
initialUpdate,
|
|
||||||
needsLock: !isReadOnly && needsLock,
|
|
||||||
updateCondition,
|
|
||||||
isReadOnlyMediaAttribute: this.isReadOnlyMediaAttribute()
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
isReadOnlyMediaAttribute() {
|
|
||||||
return readOnlyMediaAttributes.has(this.name);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function getDomUpdater(
|
|
||||||
node: Element,
|
|
||||||
binding: Binding,
|
|
||||||
snippet: string
|
|
||||||
) {
|
|
||||||
if (binding.isReadOnlyMediaAttribute()) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (node.name === 'select') {
|
|
||||||
return node.getStaticAttributeValue('multiple') === true ?
|
|
||||||
`@selectOptions(${node.var}, ${snippet})` :
|
|
||||||
`@selectOption(${node.var}, ${snippet})`;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (binding.name === 'group') {
|
|
||||||
const type = node.getStaticAttributeValue('type');
|
|
||||||
|
|
||||||
const condition = type === 'checkbox'
|
|
||||||
? `~${snippet}.indexOf(${node.var}.__value)`
|
|
||||||
: `${node.var}.__value === ${snippet}`;
|
|
||||||
|
|
||||||
return `${node.var}.checked = ${condition};`
|
|
||||||
}
|
|
||||||
|
|
||||||
return `${node.var}.${binding.name} = ${snippet};`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getBindingGroup(compiler: Compiler, value: Node) {
|
|
||||||
const { parts } = flattenReference(value); // TODO handle cases involving computed member expressions
|
|
||||||
const keypath = parts.join('.');
|
|
||||||
|
|
||||||
// TODO handle contextual bindings — `keypath` should include unique ID of
|
|
||||||
// each block that provides context
|
|
||||||
let index = compiler.bindingGroups.indexOf(keypath);
|
|
||||||
if (index === -1) {
|
|
||||||
index = compiler.bindingGroups.length;
|
|
||||||
compiler.bindingGroups.push(keypath);
|
|
||||||
}
|
|
||||||
|
|
||||||
return index;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getEventHandler(
|
|
||||||
binding: Binding,
|
|
||||||
compiler: Compiler,
|
|
||||||
block: Block,
|
|
||||||
name: string,
|
|
||||||
snippet: string,
|
|
||||||
dependencies: string[],
|
|
||||||
value: string,
|
|
||||||
isContextual: boolean
|
|
||||||
) {
|
|
||||||
const storeDependencies = [...dependencies].filter(prop => prop[0] === '$').map(prop => prop.slice(1));
|
|
||||||
dependencies = [...dependencies].filter(prop => prop[0] !== '$');
|
|
||||||
|
|
||||||
if (binding.isContextual) {
|
|
||||||
const tail = binding.value.node.type === 'MemberExpression'
|
|
||||||
? getTailSnippet(binding.value.node)
|
|
||||||
: '';
|
|
||||||
|
|
||||||
const list = `ctx.${block.listNames.get(name)}`;
|
|
||||||
const index = `ctx.${block.indexNames.get(name)}`;
|
|
||||||
|
|
||||||
return {
|
|
||||||
usesContext: true,
|
|
||||||
usesState: true,
|
|
||||||
usesStore: storeDependencies.length > 0,
|
|
||||||
mutation: `${list}[${index}]${tail} = ${value};`,
|
|
||||||
props: dependencies.map(prop => `${prop}: ctx.${prop}`),
|
|
||||||
storeProps: storeDependencies.map(prop => `${prop}: $.${prop}`)
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
if (binding.value.node.type === 'MemberExpression') {
|
|
||||||
// This is a little confusing, and should probably be tidied up
|
|
||||||
// at some point. It addresses a tricky bug (#893), wherein
|
|
||||||
// Svelte tries to `set()` a computed property, which throws an
|
|
||||||
// error in dev mode. a) it's possible that we should be
|
|
||||||
// replacing computations with *their* dependencies, and b)
|
|
||||||
// we should probably populate `compiler.target.readonly` sooner so
|
|
||||||
// that we don't have to do the `.some()` here
|
|
||||||
dependencies = dependencies.filter(prop => !compiler.computations.some(computation => computation.key === prop));
|
|
||||||
|
|
||||||
return {
|
|
||||||
usesContext: false,
|
|
||||||
usesState: true,
|
|
||||||
usesStore: storeDependencies.length > 0,
|
|
||||||
mutation: `${snippet} = ${value}`,
|
|
||||||
props: dependencies.map((prop: string) => `${prop}: ctx.${prop}`),
|
|
||||||
storeProps: storeDependencies.map(prop => `${prop}: $.${prop}`)
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
let props;
|
|
||||||
let storeProps;
|
|
||||||
|
|
||||||
if (name[0] === '$') {
|
|
||||||
props = [];
|
|
||||||
storeProps = [`${name.slice(1)}: ${value}`];
|
|
||||||
} else {
|
|
||||||
props = [`${name}: ${value}`];
|
|
||||||
storeProps = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
usesContext: false,
|
|
||||||
usesState: false,
|
|
||||||
usesStore: false,
|
|
||||||
mutation: null,
|
|
||||||
props,
|
|
||||||
storeProps
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function getValueFromDom(
|
|
||||||
compiler: Compiler,
|
|
||||||
node: Element,
|
|
||||||
binding: Node
|
|
||||||
) {
|
|
||||||
// <select bind:value='selected>
|
|
||||||
if (node.name === 'select') {
|
|
||||||
return node.getStaticAttributeValue('multiple') === true ?
|
|
||||||
`@selectMultipleValue(${node.var})` :
|
|
||||||
`@selectValue(${node.var})`;
|
|
||||||
}
|
|
||||||
|
|
||||||
const type = node.getStaticAttributeValue('type');
|
|
||||||
|
|
||||||
// <input type='checkbox' bind:group='foo'>
|
|
||||||
if (binding.name === 'group') {
|
|
||||||
const bindingGroup = getBindingGroup(compiler, binding.value.node);
|
|
||||||
if (type === 'checkbox') {
|
|
||||||
return `@getBindingGroupValue(#component._bindingGroups[${bindingGroup}])`;
|
|
||||||
}
|
|
||||||
|
|
||||||
return `${node.var}.__value`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// <input type='range|number' bind:value>
|
|
||||||
if (type === 'range' || type === 'number') {
|
|
||||||
return `@toNumber(${node.var}.${binding.name})`;
|
|
||||||
}
|
|
||||||
|
|
||||||
if ((binding.name === 'buffered' || binding.name === 'seekable' || binding.name === 'played')) {
|
|
||||||
return `@timeRangesToArray(${node.var}.${binding.name})`
|
|
||||||
}
|
|
||||||
|
|
||||||
// everything else
|
|
||||||
return `${node.var}.${binding.name}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function isComputed(node: Node) {
|
|
||||||
while (node.type === 'MemberExpression') {
|
|
||||||
if (node.computed) return true;
|
|
||||||
node = node.object;
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
@ -1,45 +0,0 @@
|
|||||||
import Node from './shared/Node';
|
|
||||||
import Compiler from '../Compiler';
|
|
||||||
import mapChildren from './shared/mapChildren';
|
|
||||||
import Block from '../dom/Block';
|
|
||||||
import TemplateScope from './shared/TemplateScope';
|
|
||||||
|
|
||||||
export default class Fragment extends Node {
|
|
||||||
block: Block;
|
|
||||||
children: Node[];
|
|
||||||
scope: TemplateScope;
|
|
||||||
|
|
||||||
constructor(compiler: Compiler, info: any) {
|
|
||||||
const scope = new TemplateScope();
|
|
||||||
super(compiler, null, scope, info);
|
|
||||||
|
|
||||||
this.scope = scope;
|
|
||||||
this.children = mapChildren(compiler, this, scope, info.children);
|
|
||||||
}
|
|
||||||
|
|
||||||
init() {
|
|
||||||
this.block = new Block({
|
|
||||||
compiler: this.compiler,
|
|
||||||
name: '@create_main_fragment',
|
|
||||||
key: null,
|
|
||||||
|
|
||||||
indexNames: new Map(),
|
|
||||||
listNames: new Map(),
|
|
||||||
|
|
||||||
dependencies: new Set(),
|
|
||||||
});
|
|
||||||
|
|
||||||
this.compiler.target.blocks.push(this.block);
|
|
||||||
this.initChildren(this.block, true, null);
|
|
||||||
|
|
||||||
this.block.hasUpdateMethod = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
build() {
|
|
||||||
this.init();
|
|
||||||
|
|
||||||
this.children.forEach(child => {
|
|
||||||
child.build(this.block, null, 'nodes');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,504 +0,0 @@
|
|||||||
import deindent from '../../utils/deindent';
|
|
||||||
import Node from './shared/Node';
|
|
||||||
import ElseBlock from './ElseBlock';
|
|
||||||
import Block from '../dom/Block';
|
|
||||||
import createDebuggingComment from '../../utils/createDebuggingComment';
|
|
||||||
import Expression from './shared/Expression';
|
|
||||||
import mapChildren from './shared/mapChildren';
|
|
||||||
|
|
||||||
function isElseIf(node: ElseBlock) {
|
|
||||||
return (
|
|
||||||
node && node.children.length === 1 && node.children[0].type === 'IfBlock'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function isElseBranch(branch) {
|
|
||||||
return branch.block && !branch.condition;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class IfBlock extends Node {
|
|
||||||
type: 'IfBlock';
|
|
||||||
expression: Expression;
|
|
||||||
children: any[];
|
|
||||||
else: ElseBlock;
|
|
||||||
|
|
||||||
block: Block;
|
|
||||||
|
|
||||||
constructor(compiler, parent, scope, info) {
|
|
||||||
super(compiler, parent, scope, info);
|
|
||||||
|
|
||||||
this.expression = new Expression(compiler, this, scope, info.expression);
|
|
||||||
this.children = mapChildren(compiler, this, scope, info.children);
|
|
||||||
|
|
||||||
this.else = info.else
|
|
||||||
? new ElseBlock(compiler, this, scope, info.else)
|
|
||||||
: null;
|
|
||||||
}
|
|
||||||
|
|
||||||
init(
|
|
||||||
block: Block,
|
|
||||||
stripWhitespace: boolean,
|
|
||||||
nextSibling: Node
|
|
||||||
) {
|
|
||||||
const { compiler } = this;
|
|
||||||
|
|
||||||
this.cannotUseInnerHTML();
|
|
||||||
|
|
||||||
const blocks: Block[] = [];
|
|
||||||
let dynamic = false;
|
|
||||||
let hasIntros = false;
|
|
||||||
let hasOutros = false;
|
|
||||||
|
|
||||||
function attachBlocks(node: IfBlock) {
|
|
||||||
node.var = block.getUniqueName(`if_block`);
|
|
||||||
|
|
||||||
block.addDependencies(node.expression.dependencies);
|
|
||||||
|
|
||||||
node.block = block.child({
|
|
||||||
comment: createDebuggingComment(node, compiler),
|
|
||||||
name: compiler.getUniqueName(`create_if_block`),
|
|
||||||
});
|
|
||||||
|
|
||||||
blocks.push(node.block);
|
|
||||||
node.initChildren(node.block, stripWhitespace, nextSibling);
|
|
||||||
|
|
||||||
if (node.block.dependencies.size > 0) {
|
|
||||||
dynamic = true;
|
|
||||||
block.addDependencies(node.block.dependencies);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (node.block.hasIntroMethod) hasIntros = true;
|
|
||||||
if (node.block.hasOutroMethod) hasOutros = true;
|
|
||||||
|
|
||||||
if (isElseIf(node.else)) {
|
|
||||||
attachBlocks(node.else.children[0]);
|
|
||||||
} else if (node.else) {
|
|
||||||
node.else.block = block.child({
|
|
||||||
comment: createDebuggingComment(node.else, compiler),
|
|
||||||
name: compiler.getUniqueName(`create_if_block`),
|
|
||||||
});
|
|
||||||
|
|
||||||
blocks.push(node.else.block);
|
|
||||||
node.else.initChildren(
|
|
||||||
node.else.block,
|
|
||||||
stripWhitespace,
|
|
||||||
nextSibling
|
|
||||||
);
|
|
||||||
|
|
||||||
if (node.else.block.dependencies.size > 0) {
|
|
||||||
dynamic = true;
|
|
||||||
block.addDependencies(node.else.block.dependencies);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
attachBlocks(this);
|
|
||||||
|
|
||||||
blocks.forEach(block => {
|
|
||||||
block.hasUpdateMethod = dynamic;
|
|
||||||
block.hasIntroMethod = hasIntros;
|
|
||||||
block.hasOutroMethod = hasOutros;
|
|
||||||
});
|
|
||||||
|
|
||||||
compiler.target.blocks.push(...blocks);
|
|
||||||
}
|
|
||||||
|
|
||||||
build(
|
|
||||||
block: Block,
|
|
||||||
parentNode: string,
|
|
||||||
parentNodes: string
|
|
||||||
) {
|
|
||||||
const name = this.var;
|
|
||||||
|
|
||||||
const needsAnchor = this.next ? !this.next.isDomNode() : !parentNode || !this.parent.isDomNode();
|
|
||||||
const anchor = needsAnchor
|
|
||||||
? block.getUniqueName(`${name}_anchor`)
|
|
||||||
: (this.next && this.next.var) || 'null';
|
|
||||||
|
|
||||||
const branches = this.getBranches(block, parentNode, parentNodes, this);
|
|
||||||
|
|
||||||
const hasElse = isElseBranch(branches[branches.length - 1]);
|
|
||||||
const if_name = hasElse ? '' : `if (${name}) `;
|
|
||||||
|
|
||||||
const dynamic = branches[0].hasUpdateMethod; // can use [0] as proxy for all, since they necessarily have the same value
|
|
||||||
const hasOutros = branches[0].hasOutroMethod;
|
|
||||||
|
|
||||||
const vars = { name, anchor, if_name, hasElse };
|
|
||||||
|
|
||||||
if (this.else) {
|
|
||||||
if (hasOutros) {
|
|
||||||
this.buildCompoundWithOutros(block, parentNode, parentNodes, branches, dynamic, vars);
|
|
||||||
} else {
|
|
||||||
this.buildCompound(block, parentNode, parentNodes, branches, dynamic, vars);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
this.buildSimple(block, parentNode, parentNodes, branches[0], dynamic, vars);
|
|
||||||
}
|
|
||||||
|
|
||||||
block.builders.create.addLine(`${if_name}${name}.c();`);
|
|
||||||
|
|
||||||
if (parentNodes) {
|
|
||||||
block.builders.claim.addLine(
|
|
||||||
`${if_name}${name}.l(${parentNodes});`
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (needsAnchor) {
|
|
||||||
block.addElement(
|
|
||||||
anchor,
|
|
||||||
`@createComment()`,
|
|
||||||
parentNodes && `@createComment()`,
|
|
||||||
parentNode
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
buildCompound(
|
|
||||||
block: Block,
|
|
||||||
parentNode: string,
|
|
||||||
parentNodes: string,
|
|
||||||
branches,
|
|
||||||
dynamic,
|
|
||||||
{ name, anchor, hasElse, if_name }
|
|
||||||
) {
|
|
||||||
const select_block_type = this.compiler.getUniqueName(`select_block_type`);
|
|
||||||
const current_block_type = block.getUniqueName(`current_block_type`);
|
|
||||||
const current_block_type_and = hasElse ? '' : `${current_block_type} && `;
|
|
||||||
|
|
||||||
block.builders.init.addBlock(deindent`
|
|
||||||
function ${select_block_type}(ctx) {
|
|
||||||
${branches
|
|
||||||
.map(({ condition, block }) => `${condition ? `if (${condition}) ` : ''}return ${block};`)
|
|
||||||
.join('\n')}
|
|
||||||
}
|
|
||||||
`);
|
|
||||||
|
|
||||||
block.builders.init.addBlock(deindent`
|
|
||||||
var ${current_block_type} = ${select_block_type}(ctx);
|
|
||||||
var ${name} = ${current_block_type_and}${current_block_type}(#component, ctx);
|
|
||||||
`);
|
|
||||||
|
|
||||||
const mountOrIntro = branches[0].hasIntroMethod ? 'i' : 'm';
|
|
||||||
|
|
||||||
const initialMountNode = parentNode || '#target';
|
|
||||||
const anchorNode = parentNode ? 'null' : 'anchor';
|
|
||||||
block.builders.mount.addLine(
|
|
||||||
`${if_name}${name}.${mountOrIntro}(${initialMountNode}, ${anchorNode});`
|
|
||||||
);
|
|
||||||
|
|
||||||
const updateMountNode = this.getUpdateMountNode(anchor);
|
|
||||||
|
|
||||||
const changeBlock = deindent`
|
|
||||||
${hasElse
|
|
||||||
? deindent`
|
|
||||||
${name}.u();
|
|
||||||
${name}.d();
|
|
||||||
`
|
|
||||||
: deindent`
|
|
||||||
if (${name}) {
|
|
||||||
${name}.u();
|
|
||||||
${name}.d();
|
|
||||||
}`}
|
|
||||||
${name} = ${current_block_type_and}${current_block_type}(#component, ctx);
|
|
||||||
${if_name}${name}.c();
|
|
||||||
${if_name}${name}.${mountOrIntro}(${updateMountNode}, ${anchor});
|
|
||||||
`;
|
|
||||||
|
|
||||||
if (dynamic) {
|
|
||||||
block.builders.update.addBlock(deindent`
|
|
||||||
if (${current_block_type} === (${current_block_type} = ${select_block_type}(ctx)) && ${name}) {
|
|
||||||
${name}.p(changed, ctx);
|
|
||||||
} else {
|
|
||||||
${changeBlock}
|
|
||||||
}
|
|
||||||
`);
|
|
||||||
} else {
|
|
||||||
block.builders.update.addBlock(deindent`
|
|
||||||
if (${current_block_type} !== (${current_block_type} = ${select_block_type}(ctx))) {
|
|
||||||
${changeBlock}
|
|
||||||
}
|
|
||||||
`);
|
|
||||||
}
|
|
||||||
|
|
||||||
block.builders.unmount.addLine(`${if_name}${name}.u();`);
|
|
||||||
|
|
||||||
block.builders.destroy.addLine(`${if_name}${name}.d();`);
|
|
||||||
}
|
|
||||||
|
|
||||||
// if any of the siblings have outros, we need to keep references to the blocks
|
|
||||||
// (TODO does this only apply to bidi transitions?)
|
|
||||||
buildCompoundWithOutros(
|
|
||||||
block: Block,
|
|
||||||
parentNode: string,
|
|
||||||
parentNodes: string,
|
|
||||||
branches,
|
|
||||||
dynamic,
|
|
||||||
{ name, anchor, hasElse }
|
|
||||||
) {
|
|
||||||
const select_block_type = block.getUniqueName(`select_block_type`);
|
|
||||||
const current_block_type_index = block.getUniqueName(`current_block_type_index`);
|
|
||||||
const previous_block_index = block.getUniqueName(`previous_block_index`);
|
|
||||||
const if_block_creators = block.getUniqueName(`if_block_creators`);
|
|
||||||
const if_blocks = block.getUniqueName(`if_blocks`);
|
|
||||||
|
|
||||||
const if_current_block_type_index = hasElse
|
|
||||||
? ''
|
|
||||||
: `if (~${current_block_type_index}) `;
|
|
||||||
|
|
||||||
block.addVariable(current_block_type_index);
|
|
||||||
block.addVariable(name);
|
|
||||||
|
|
||||||
block.builders.init.addBlock(deindent`
|
|
||||||
var ${if_block_creators} = [
|
|
||||||
${branches.map(branch => branch.block).join(',\n')}
|
|
||||||
];
|
|
||||||
|
|
||||||
var ${if_blocks} = [];
|
|
||||||
|
|
||||||
function ${select_block_type}(ctx) {
|
|
||||||
${branches
|
|
||||||
.map(({ condition, block }, i) => `${condition ? `if (${condition}) ` : ''}return ${block ? i : -1};`)
|
|
||||||
.join('\n')}
|
|
||||||
}
|
|
||||||
`);
|
|
||||||
|
|
||||||
if (hasElse) {
|
|
||||||
block.builders.init.addBlock(deindent`
|
|
||||||
${current_block_type_index} = ${select_block_type}(ctx);
|
|
||||||
${name} = ${if_blocks}[${current_block_type_index}] = ${if_block_creators}[${current_block_type_index}](#component, ctx);
|
|
||||||
`);
|
|
||||||
} else {
|
|
||||||
block.builders.init.addBlock(deindent`
|
|
||||||
if (~(${current_block_type_index} = ${select_block_type}(ctx))) {
|
|
||||||
${name} = ${if_blocks}[${current_block_type_index}] = ${if_block_creators}[${current_block_type_index}](#component, ctx);
|
|
||||||
}
|
|
||||||
`);
|
|
||||||
}
|
|
||||||
|
|
||||||
const mountOrIntro = branches[0].hasIntroMethod ? 'i' : 'm';
|
|
||||||
const initialMountNode = parentNode || '#target';
|
|
||||||
const anchorNode = parentNode ? 'null' : 'anchor';
|
|
||||||
|
|
||||||
block.builders.mount.addLine(
|
|
||||||
`${if_current_block_type_index}${if_blocks}[${current_block_type_index}].${mountOrIntro}(${initialMountNode}, ${anchorNode});`
|
|
||||||
);
|
|
||||||
|
|
||||||
const updateMountNode = this.getUpdateMountNode(anchor);
|
|
||||||
|
|
||||||
const destroyOldBlock = deindent`
|
|
||||||
${name}.o(function() {
|
|
||||||
${if_blocks}[ ${previous_block_index} ].u();
|
|
||||||
${if_blocks}[ ${previous_block_index} ].d();
|
|
||||||
${if_blocks}[ ${previous_block_index} ] = null;
|
|
||||||
});
|
|
||||||
`;
|
|
||||||
|
|
||||||
const createNewBlock = deindent`
|
|
||||||
${name} = ${if_blocks}[${current_block_type_index}];
|
|
||||||
if (!${name}) {
|
|
||||||
${name} = ${if_blocks}[${current_block_type_index}] = ${if_block_creators}[${current_block_type_index}](#component, ctx);
|
|
||||||
${name}.c();
|
|
||||||
}
|
|
||||||
${name}.${mountOrIntro}(${updateMountNode}, ${anchor});
|
|
||||||
`;
|
|
||||||
|
|
||||||
const changeBlock = hasElse
|
|
||||||
? deindent`
|
|
||||||
${destroyOldBlock}
|
|
||||||
|
|
||||||
${createNewBlock}
|
|
||||||
`
|
|
||||||
: deindent`
|
|
||||||
if (${name}) {
|
|
||||||
${destroyOldBlock}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (~${current_block_type_index}) {
|
|
||||||
${createNewBlock}
|
|
||||||
} else {
|
|
||||||
${name} = null;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
if (dynamic) {
|
|
||||||
block.builders.update.addBlock(deindent`
|
|
||||||
var ${previous_block_index} = ${current_block_type_index};
|
|
||||||
${current_block_type_index} = ${select_block_type}(ctx);
|
|
||||||
if (${current_block_type_index} === ${previous_block_index}) {
|
|
||||||
${if_current_block_type_index}${if_blocks}[${current_block_type_index}].p(changed, ctx);
|
|
||||||
} else {
|
|
||||||
${changeBlock}
|
|
||||||
}
|
|
||||||
`);
|
|
||||||
} else {
|
|
||||||
block.builders.update.addBlock(deindent`
|
|
||||||
var ${previous_block_index} = ${current_block_type_index};
|
|
||||||
${current_block_type_index} = ${select_block_type}(ctx);
|
|
||||||
if (${current_block_type_index} !== ${previous_block_index}) {
|
|
||||||
${changeBlock}
|
|
||||||
}
|
|
||||||
`);
|
|
||||||
}
|
|
||||||
|
|
||||||
block.builders.destroy.addLine(deindent`
|
|
||||||
${if_current_block_type_index}{
|
|
||||||
${if_blocks}[${current_block_type_index}].u();
|
|
||||||
${if_blocks}[${current_block_type_index}].d();
|
|
||||||
}
|
|
||||||
`);
|
|
||||||
}
|
|
||||||
|
|
||||||
buildSimple(
|
|
||||||
block: Block,
|
|
||||||
parentNode: string,
|
|
||||||
parentNodes: string,
|
|
||||||
branch,
|
|
||||||
dynamic,
|
|
||||||
{ name, anchor, if_name }
|
|
||||||
) {
|
|
||||||
block.builders.init.addBlock(deindent`
|
|
||||||
var ${name} = (${branch.condition}) && ${branch.block}(#component, ctx);
|
|
||||||
`);
|
|
||||||
|
|
||||||
const mountOrIntro = branch.hasIntroMethod ? 'i' : 'm';
|
|
||||||
const initialMountNode = parentNode || '#target';
|
|
||||||
const anchorNode = parentNode ? 'null' : 'anchor';
|
|
||||||
|
|
||||||
block.builders.mount.addLine(
|
|
||||||
`if (${name}) ${name}.${mountOrIntro}(${initialMountNode}, ${anchorNode});`
|
|
||||||
);
|
|
||||||
|
|
||||||
const updateMountNode = this.getUpdateMountNode(anchor);
|
|
||||||
|
|
||||||
const enter = dynamic
|
|
||||||
? branch.hasIntroMethod
|
|
||||||
? deindent`
|
|
||||||
if (${name}) {
|
|
||||||
${name}.p(changed, ctx);
|
|
||||||
} else {
|
|
||||||
${name} = ${branch.block}(#component, ctx);
|
|
||||||
if (${name}) ${name}.c();
|
|
||||||
}
|
|
||||||
|
|
||||||
${name}.i(${updateMountNode}, ${anchor});
|
|
||||||
`
|
|
||||||
: deindent`
|
|
||||||
if (${name}) {
|
|
||||||
${name}.p(changed, ctx);
|
|
||||||
} else {
|
|
||||||
${name} = ${branch.block}(#component, ctx);
|
|
||||||
${name}.c();
|
|
||||||
${name}.m(${updateMountNode}, ${anchor});
|
|
||||||
}
|
|
||||||
`
|
|
||||||
: branch.hasIntroMethod
|
|
||||||
? deindent`
|
|
||||||
if (!${name}) {
|
|
||||||
${name} = ${branch.block}(#component, ctx);
|
|
||||||
${name}.c();
|
|
||||||
}
|
|
||||||
${name}.i(${updateMountNode}, ${anchor});
|
|
||||||
`
|
|
||||||
: deindent`
|
|
||||||
if (!${name}) {
|
|
||||||
${name} = ${branch.block}(#component, ctx);
|
|
||||||
${name}.c();
|
|
||||||
${name}.m(${updateMountNode}, ${anchor});
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
// no `p()` here — we don't want to update outroing nodes,
|
|
||||||
// as that will typically result in glitching
|
|
||||||
const exit = branch.hasOutroMethod
|
|
||||||
? deindent`
|
|
||||||
${name}.o(function() {
|
|
||||||
${name}.u();
|
|
||||||
${name}.d();
|
|
||||||
${name} = null;
|
|
||||||
});
|
|
||||||
`
|
|
||||||
: deindent`
|
|
||||||
${name}.u();
|
|
||||||
${name}.d();
|
|
||||||
${name} = null;
|
|
||||||
`;
|
|
||||||
|
|
||||||
block.builders.update.addBlock(deindent`
|
|
||||||
if (${branch.condition}) {
|
|
||||||
${enter}
|
|
||||||
} else if (${name}) {
|
|
||||||
${exit}
|
|
||||||
}
|
|
||||||
`);
|
|
||||||
|
|
||||||
block.builders.unmount.addLine(`${if_name}${name}.u();`);
|
|
||||||
|
|
||||||
block.builders.destroy.addLine(`${if_name}${name}.d();`);
|
|
||||||
}
|
|
||||||
|
|
||||||
getBranches(
|
|
||||||
block: Block,
|
|
||||||
parentNode: string,
|
|
||||||
parentNodes: string,
|
|
||||||
node: IfBlock
|
|
||||||
) {
|
|
||||||
const branches = [
|
|
||||||
{
|
|
||||||
condition: node.expression.snippet,
|
|
||||||
block: node.block.name,
|
|
||||||
hasUpdateMethod: node.block.hasUpdateMethod,
|
|
||||||
hasIntroMethod: node.block.hasIntroMethod,
|
|
||||||
hasOutroMethod: node.block.hasOutroMethod,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
this.visitChildren(block, node);
|
|
||||||
|
|
||||||
if (isElseIf(node.else)) {
|
|
||||||
branches.push(
|
|
||||||
...this.getBranches(block, parentNode, parentNodes, node.else.children[0])
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
branches.push({
|
|
||||||
condition: null,
|
|
||||||
block: node.else ? node.else.block.name : null,
|
|
||||||
hasUpdateMethod: node.else ? node.else.block.hasUpdateMethod : false,
|
|
||||||
hasIntroMethod: node.else ? node.else.block.hasIntroMethod : false,
|
|
||||||
hasOutroMethod: node.else ? node.else.block.hasOutroMethod : false,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (node.else) {
|
|
||||||
this.visitChildren(block, node.else);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return branches;
|
|
||||||
}
|
|
||||||
|
|
||||||
ssr() {
|
|
||||||
const { compiler } = this;
|
|
||||||
const { snippet } = this.expression;
|
|
||||||
|
|
||||||
compiler.target.append('${ ' + snippet + ' ? `');
|
|
||||||
|
|
||||||
this.children.forEach((child: Node) => {
|
|
||||||
child.ssr();
|
|
||||||
});
|
|
||||||
|
|
||||||
compiler.target.append('` : `');
|
|
||||||
|
|
||||||
if (this.else) {
|
|
||||||
this.else.children.forEach((child: Node) => {
|
|
||||||
child.ssr();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
compiler.target.append('` }');
|
|
||||||
}
|
|
||||||
|
|
||||||
visitChildren(block: Block, node: Node) {
|
|
||||||
node.children.forEach((child: Node) => {
|
|
||||||
child.build(node.block, null, 'nodes');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,172 +0,0 @@
|
|||||||
import Compiler from './../../Compiler';
|
|
||||||
import Block from '../../dom/Block';
|
|
||||||
import { trimStart, trimEnd } from '../../../utils/trim';
|
|
||||||
|
|
||||||
export default class Node {
|
|
||||||
readonly start: number;
|
|
||||||
readonly end: number;
|
|
||||||
readonly compiler: Compiler;
|
|
||||||
readonly parent: Node;
|
|
||||||
readonly type: string;
|
|
||||||
|
|
||||||
prev?: Node;
|
|
||||||
next?: Node;
|
|
||||||
|
|
||||||
canUseInnerHTML: boolean;
|
|
||||||
var: string;
|
|
||||||
|
|
||||||
constructor(compiler: Compiler, parent, scope, info: any) {
|
|
||||||
this.start = info.start;
|
|
||||||
this.end = info.end;
|
|
||||||
this.type = info.type;
|
|
||||||
|
|
||||||
// this makes properties non-enumerable, which makes logging
|
|
||||||
// bearable. might have a performance cost. TODO remove in prod?
|
|
||||||
Object.defineProperties(this, {
|
|
||||||
compiler: {
|
|
||||||
value: compiler
|
|
||||||
},
|
|
||||||
parent: {
|
|
||||||
value: parent
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
cannotUseInnerHTML() {
|
|
||||||
if (this.canUseInnerHTML !== false) {
|
|
||||||
this.canUseInnerHTML = false;
|
|
||||||
if (this.parent) this.parent.cannotUseInnerHTML();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
init(
|
|
||||||
block: Block,
|
|
||||||
stripWhitespace: boolean,
|
|
||||||
nextSibling: Node
|
|
||||||
) {
|
|
||||||
// implemented by subclasses
|
|
||||||
}
|
|
||||||
|
|
||||||
initChildren(
|
|
||||||
block: Block,
|
|
||||||
stripWhitespace: boolean,
|
|
||||||
nextSibling: Node
|
|
||||||
) {
|
|
||||||
// glue text nodes together
|
|
||||||
const cleaned: Node[] = [];
|
|
||||||
let lastChild: Node;
|
|
||||||
|
|
||||||
let windowComponent;
|
|
||||||
|
|
||||||
this.children.forEach((child: Node) => {
|
|
||||||
if (child.type === 'Comment') return;
|
|
||||||
|
|
||||||
// special case — this is an easy way to remove whitespace surrounding
|
|
||||||
// <svelte:window/>. lil hacky but it works
|
|
||||||
if (child.type === 'Window') {
|
|
||||||
windowComponent = child;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (child.type === 'Text' && lastChild && lastChild.type === 'Text') {
|
|
||||||
lastChild.data += child.data;
|
|
||||||
lastChild.end = child.end;
|
|
||||||
} else {
|
|
||||||
if (child.type === 'Text' && stripWhitespace && cleaned.length === 0) {
|
|
||||||
child.data = trimStart(child.data);
|
|
||||||
if (child.data) cleaned.push(child);
|
|
||||||
} else {
|
|
||||||
cleaned.push(child);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
lastChild = child;
|
|
||||||
});
|
|
||||||
|
|
||||||
lastChild = null;
|
|
||||||
|
|
||||||
cleaned.forEach((child: Node, i: number) => {
|
|
||||||
child.canUseInnerHTML = !this.compiler.options.hydratable;
|
|
||||||
|
|
||||||
child.init(block, stripWhitespace, cleaned[i + 1] || nextSibling);
|
|
||||||
|
|
||||||
if (child.shouldSkip) return;
|
|
||||||
|
|
||||||
if (lastChild) lastChild.next = child;
|
|
||||||
child.prev = lastChild;
|
|
||||||
|
|
||||||
lastChild = child;
|
|
||||||
});
|
|
||||||
|
|
||||||
// We want to remove trailing whitespace inside an element/component/block,
|
|
||||||
// *unless* there is no whitespace between this node and its next sibling
|
|
||||||
if (stripWhitespace && lastChild && lastChild.type === 'Text') {
|
|
||||||
const shouldTrim = (
|
|
||||||
nextSibling ? (nextSibling.type === 'Text' && /^\s/.test(nextSibling.data)) : !this.hasAncestor('EachBlock')
|
|
||||||
);
|
|
||||||
|
|
||||||
if (shouldTrim) {
|
|
||||||
lastChild.data = trimEnd(lastChild.data);
|
|
||||||
if (!lastChild.data) {
|
|
||||||
cleaned.pop();
|
|
||||||
lastChild = cleaned[cleaned.length - 1];
|
|
||||||
lastChild.next = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.children = cleaned;
|
|
||||||
if (windowComponent) cleaned.unshift(windowComponent);
|
|
||||||
}
|
|
||||||
|
|
||||||
build(
|
|
||||||
block: Block,
|
|
||||||
parentNode: string,
|
|
||||||
parentNodes: string
|
|
||||||
) {
|
|
||||||
// implemented by subclasses
|
|
||||||
}
|
|
||||||
|
|
||||||
isDomNode() {
|
|
||||||
return this.type === 'Element' || this.type === 'Text' || this.type === 'MustacheTag';
|
|
||||||
}
|
|
||||||
|
|
||||||
hasAncestor(type: string) {
|
|
||||||
return this.parent ?
|
|
||||||
this.parent.type === type || this.parent.hasAncestor(type) :
|
|
||||||
false;
|
|
||||||
}
|
|
||||||
|
|
||||||
findNearest(selector: RegExp) {
|
|
||||||
if (selector.test(this.type)) return this;
|
|
||||||
if (this.parent) return this.parent.findNearest(selector);
|
|
||||||
}
|
|
||||||
|
|
||||||
getOrCreateAnchor(block: Block, parentNode: string, parentNodes: string) {
|
|
||||||
// TODO use this in EachBlock and IfBlock — tricky because
|
|
||||||
// children need to be created first
|
|
||||||
const needsAnchor = this.next ? !this.next.isDomNode() : !parentNode || !this.parent.isDomNode();
|
|
||||||
const anchor = needsAnchor
|
|
||||||
? block.getUniqueName(`${this.var}_anchor`)
|
|
||||||
: (this.next && this.next.var) || 'null';
|
|
||||||
|
|
||||||
if (needsAnchor) {
|
|
||||||
block.addElement(
|
|
||||||
anchor,
|
|
||||||
`@createComment()`,
|
|
||||||
parentNodes && `@createComment()`,
|
|
||||||
parentNode
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return anchor;
|
|
||||||
}
|
|
||||||
|
|
||||||
getUpdateMountNode(anchor: string) {
|
|
||||||
return this.parent.isDomNode() ? this.parent.var : `${anchor}.parentNode`;
|
|
||||||
}
|
|
||||||
|
|
||||||
remount(name: string) {
|
|
||||||
return `${this.var}.m(${name}._slotted.default, null);`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,175 +0,0 @@
|
|||||||
import deindent from '../../utils/deindent';
|
|
||||||
import Compiler from '../Compiler';
|
|
||||||
import Stats from '../../Stats';
|
|
||||||
import Stylesheet from '../../css/Stylesheet';
|
|
||||||
import { removeNode, removeObjectKey } from '../../utils/removeNode';
|
|
||||||
import getName from '../../utils/getName';
|
|
||||||
import globalWhitelist from '../../utils/globalWhitelist';
|
|
||||||
import { Ast, Node, CompileOptions } from '../../interfaces';
|
|
||||||
import { AppendTarget } from '../../interfaces';
|
|
||||||
import { stringify } from '../../utils/stringify';
|
|
||||||
|
|
||||||
export class SsrTarget {
|
|
||||||
bindings: string[];
|
|
||||||
renderCode: string;
|
|
||||||
appendTargets: AppendTarget[];
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
this.bindings = [];
|
|
||||||
this.renderCode = '';
|
|
||||||
this.appendTargets = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
append(code: string) {
|
|
||||||
if (this.appendTargets.length) {
|
|
||||||
const appendTarget = this.appendTargets[this.appendTargets.length - 1];
|
|
||||||
const slotName = appendTarget.slotStack[appendTarget.slotStack.length - 1];
|
|
||||||
appendTarget.slots[slotName] += code;
|
|
||||||
} else {
|
|
||||||
this.renderCode += code;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function ssr(
|
|
||||||
ast: Ast,
|
|
||||||
source: string,
|
|
||||||
stylesheet: Stylesheet,
|
|
||||||
options: CompileOptions,
|
|
||||||
stats: Stats
|
|
||||||
) {
|
|
||||||
const format = options.format || 'cjs';
|
|
||||||
|
|
||||||
const target = new SsrTarget();
|
|
||||||
const compiler = new Compiler(ast, source, options.name || 'SvelteComponent', stylesheet, options, stats, false, target);
|
|
||||||
|
|
||||||
const { computations, name, templateProperties } = compiler;
|
|
||||||
|
|
||||||
// create main render() function
|
|
||||||
trim(compiler.fragment.children).forEach((node: Node) => {
|
|
||||||
node.ssr();
|
|
||||||
});
|
|
||||||
|
|
||||||
const css = compiler.customElement ?
|
|
||||||
{ code: null, map: null } :
|
|
||||||
compiler.stylesheet.render(options.filename, true);
|
|
||||||
|
|
||||||
// generate initial state object
|
|
||||||
const expectedProperties = Array.from(compiler.expectedProperties);
|
|
||||||
const globals = expectedProperties.filter(prop => globalWhitelist.has(prop));
|
|
||||||
const storeProps = expectedProperties.filter(prop => prop[0] === '$');
|
|
||||||
|
|
||||||
const initialState = [];
|
|
||||||
if (globals.length > 0) {
|
|
||||||
initialState.push(`{ ${globals.map(prop => `${prop} : ${prop}`).join(', ')} }`);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (storeProps.length > 0) {
|
|
||||||
const initialize = `_init([${storeProps.map(prop => `"${prop.slice(1)}"`)}])`
|
|
||||||
initialState.push(`options.store.${initialize}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (templateProperties.data) {
|
|
||||||
initialState.push(`%data()`);
|
|
||||||
} else if (globals.length === 0 && storeProps.length === 0) {
|
|
||||||
initialState.push('{}');
|
|
||||||
}
|
|
||||||
|
|
||||||
initialState.push('ctx');
|
|
||||||
|
|
||||||
const helpers = new Set();
|
|
||||||
|
|
||||||
// TODO concatenate CSS maps
|
|
||||||
const result = deindent`
|
|
||||||
${compiler.javascript}
|
|
||||||
|
|
||||||
var ${name} = {};
|
|
||||||
|
|
||||||
${options.filename && `${name}.filename = ${stringify(options.filename)}`};
|
|
||||||
|
|
||||||
${name}.data = function() {
|
|
||||||
return ${templateProperties.data ? `%data()` : `{}`};
|
|
||||||
};
|
|
||||||
|
|
||||||
${name}.render = function(state, options = {}) {
|
|
||||||
var components = new Set();
|
|
||||||
|
|
||||||
function addComponent(component) {
|
|
||||||
components.add(component);
|
|
||||||
}
|
|
||||||
|
|
||||||
var result = { head: '', addComponent };
|
|
||||||
var html = ${name}._render(result, state, options);
|
|
||||||
|
|
||||||
var cssCode = Array.from(components).map(c => c.css && c.css.code).filter(Boolean).join('\\n');
|
|
||||||
|
|
||||||
return {
|
|
||||||
html,
|
|
||||||
head: result.head,
|
|
||||||
css: { code: cssCode, map: null },
|
|
||||||
toString() {
|
|
||||||
return html;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
${name}._render = function(__result, ctx, options) {
|
|
||||||
${templateProperties.store && `options.store = %store();`}
|
|
||||||
__result.addComponent(${name});
|
|
||||||
|
|
||||||
ctx = Object.assign(${initialState.join(', ')});
|
|
||||||
|
|
||||||
${computations.map(
|
|
||||||
({ key, deps }) =>
|
|
||||||
`ctx.${key} = %computed-${key}(ctx);`
|
|
||||||
)}
|
|
||||||
|
|
||||||
${target.bindings.length &&
|
|
||||||
deindent`
|
|
||||||
var settled = false;
|
|
||||||
var tmp;
|
|
||||||
|
|
||||||
while (!settled) {
|
|
||||||
settled = true;
|
|
||||||
|
|
||||||
${target.bindings.join('\n\n')}
|
|
||||||
}
|
|
||||||
`}
|
|
||||||
|
|
||||||
return \`${target.renderCode}\`;
|
|
||||||
};
|
|
||||||
|
|
||||||
${name}.css = {
|
|
||||||
code: ${css.code ? stringify(css.code) : `''`},
|
|
||||||
map: ${css.map ? stringify(css.map.toString()) : 'null'}
|
|
||||||
};
|
|
||||||
|
|
||||||
var warned = false;
|
|
||||||
|
|
||||||
${templateProperties.preload && `${name}.preload = %preload;`}
|
|
||||||
`;
|
|
||||||
|
|
||||||
return compiler.generate(result, options, { name, format });
|
|
||||||
}
|
|
||||||
|
|
||||||
function trim(nodes) {
|
|
||||||
let start = 0;
|
|
||||||
for (; start < nodes.length; start += 1) {
|
|
||||||
const node = nodes[start];
|
|
||||||
if (node.type !== 'Text') break;
|
|
||||||
|
|
||||||
node.data = node.data.replace(/^\s+/, '');
|
|
||||||
if (node.data) break;
|
|
||||||
}
|
|
||||||
|
|
||||||
let end = nodes.length;
|
|
||||||
for (; end > start; end -= 1) {
|
|
||||||
const node = nodes[end - 1];
|
|
||||||
if (node.type !== 'Text') break;
|
|
||||||
|
|
||||||
node.data = node.data.replace(/\s+$/, '');
|
|
||||||
if (node.data) break;
|
|
||||||
}
|
|
||||||
|
|
||||||
return nodes.slice(start, end);
|
|
||||||
}
|
|
||||||
Loading…
Reference in new issue