mirror of https://github.com/sveltejs/svelte
Rich Harris
7 years ago
parent
54045f43c8
commit
cf5e039f91
@ -0,0 +1,290 @@
|
|||||||
|
import Binding from '../../../nodes/Binding';
|
||||||
|
import ElementWrapper from '.';
|
||||||
|
import { dimensions } from '../../../../utils/patterns';
|
||||||
|
import getObject from '../../../../utils/getObject';
|
||||||
|
import Block from '../../Block';
|
||||||
|
|
||||||
|
type Handler = {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const readOnlyMediaAttributes = new Set([
|
||||||
|
'duration',
|
||||||
|
'buffered',
|
||||||
|
'seekable',
|
||||||
|
'played'
|
||||||
|
]);
|
||||||
|
|
||||||
|
export default class BindingWrapper {
|
||||||
|
node: Binding;
|
||||||
|
parent: ElementWrapper;
|
||||||
|
|
||||||
|
object: string;
|
||||||
|
handler: Handler;
|
||||||
|
updateDom: string;
|
||||||
|
initialUpdate: string;
|
||||||
|
needsLock: boolean;
|
||||||
|
updateCondition: string;
|
||||||
|
isReadOnlyMediaAttribute: boolean;
|
||||||
|
|
||||||
|
constructor(node: Binding, parent: ElementWrapper) {
|
||||||
|
this.node = node;
|
||||||
|
this.parent = parent;
|
||||||
|
|
||||||
|
parent.cannotUseInnerHTML();
|
||||||
|
|
||||||
|
const needsLock = (
|
||||||
|
parent.node.name !== 'input' ||
|
||||||
|
!/radio|checkbox|range|color/.test(parent.getStaticAttributeValue('type'))
|
||||||
|
);
|
||||||
|
|
||||||
|
const isReadOnly = (
|
||||||
|
(parent.isMediaNode() && readOnlyMediaAttributes.has(this.node.name)) ||
|
||||||
|
dimensions.test(this.node.name)
|
||||||
|
);
|
||||||
|
|
||||||
|
let updateConditions: string[] = [];
|
||||||
|
|
||||||
|
const { name } = getObject(this.node.value.node);
|
||||||
|
const { snippet } = this.node.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.node.value.dependencies);
|
||||||
|
this.node.value.dependencies.forEach((prop: string) => {
|
||||||
|
const indirectDependencies = parent.renderer.component.indirectDependencies.get(prop);
|
||||||
|
if (indirectDependencies) {
|
||||||
|
indirectDependencies.forEach(indirectDependency => {
|
||||||
|
dependencies.add(indirectDependency);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// view to model
|
||||||
|
const valueFromDom = getValueFromDom(this.component, parent.node, this);
|
||||||
|
const handler = getEventHandler(this, this.component, block, name, snippet, dependencies, valueFromDom);
|
||||||
|
|
||||||
|
// model to view
|
||||||
|
let updateDom = getDomUpdater(node, this, snippet);
|
||||||
|
let initialUpdate = updateDom;
|
||||||
|
|
||||||
|
// special cases
|
||||||
|
if (this.node.name === 'group') {
|
||||||
|
const bindingGroup = getBindingGroup(this.component, 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.node.name === 'currentTime' || this.node.name === 'volume') {
|
||||||
|
updateConditions.push(`!isNaN(${snippet})`);
|
||||||
|
|
||||||
|
if (this.node.name === 'currentTime') initialUpdate = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.node.name === 'paused') {
|
||||||
|
// this is necessary to prevent audio restarting by itself
|
||||||
|
const last = block.getUniqueName(`${node.var}_is_paused`);
|
||||||
|
block.addVariable(last, 'true');
|
||||||
|
|
||||||
|
updateConditions.push(`${last} !== (${last} = ${snippet})`);
|
||||||
|
updateDom = `${node.var}[${last} ? "pause" : "play"]();`;
|
||||||
|
initialUpdate = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// bind:offsetWidth and bind:offsetHeight
|
||||||
|
if (dimensions.test(this.node.name)) {
|
||||||
|
initialUpdate = null;
|
||||||
|
updateDom = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const dependencyArray = [...this.value.dependencies]
|
||||||
|
|
||||||
|
if (dependencyArray.length === 1) {
|
||||||
|
updateConditions.push(`changed.${dependencyArray[0]}`)
|
||||||
|
} else if (dependencyArray.length > 1) {
|
||||||
|
updateConditions.push(
|
||||||
|
`(${dependencyArray.map(prop => `changed.${prop}`).join(' || ')})`
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
this.object = name;
|
||||||
|
this.handler = handler;
|
||||||
|
this.updateDom = updateDom;
|
||||||
|
this.initialUpdate = initialUpdate;
|
||||||
|
this.needsLock = !isReadOnly && needsLock;
|
||||||
|
this.updateCondition = updateConditions.length ? updateConditions.join(' && ') : undefined;
|
||||||
|
this.isReadOnlyMediaAttribute = readOnlyMediaAttributes.has(this.node.name);
|
||||||
|
}
|
||||||
|
|
||||||
|
render(block: Block) {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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(component: Component, 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 = component.bindingGroups.indexOf(keypath);
|
||||||
|
if (index === -1) {
|
||||||
|
index = component.bindingGroups.length;
|
||||||
|
component.bindingGroups.push(keypath);
|
||||||
|
}
|
||||||
|
|
||||||
|
return index;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getEventHandler(
|
||||||
|
binding: Binding,
|
||||||
|
component: Component,
|
||||||
|
block: Block,
|
||||||
|
name: string,
|
||||||
|
snippet: string,
|
||||||
|
dependencies: Set<string>,
|
||||||
|
value: string
|
||||||
|
) {
|
||||||
|
const storeDependencies = [...dependencies].filter(prop => prop[0] === '$').map(prop => prop.slice(1));
|
||||||
|
let dependenciesArray = [...dependencies].filter(prop => prop[0] !== '$');
|
||||||
|
|
||||||
|
if (binding.isContextual) {
|
||||||
|
const tail = binding.value.node.type === 'MemberExpression'
|
||||||
|
? getTailSnippet(binding.value.node)
|
||||||
|
: '';
|
||||||
|
|
||||||
|
const head = block.bindings.get(name);
|
||||||
|
|
||||||
|
return {
|
||||||
|
usesContext: true,
|
||||||
|
usesState: true,
|
||||||
|
usesStore: storeDependencies.length > 0,
|
||||||
|
mutation: `${head}${tail} = ${value};`,
|
||||||
|
props: dependenciesArray.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 `component.target.readonly` sooner so
|
||||||
|
// that we don't have to do the `.some()` here
|
||||||
|
dependenciesArray = dependenciesArray.filter(prop => !component.computations.some(computation => computation.key === prop));
|
||||||
|
|
||||||
|
return {
|
||||||
|
usesContext: false,
|
||||||
|
usesState: true,
|
||||||
|
usesStore: storeDependencies.length > 0,
|
||||||
|
mutation: `${snippet} = ${value}`,
|
||||||
|
props: dependenciesArray.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(
|
||||||
|
component: Component,
|
||||||
|
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(component, 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;
|
||||||
|
}
|
||||||
@ -0,0 +1,478 @@
|
|||||||
|
import Wrapper from '../shared/wrapper';
|
||||||
|
import Renderer from '../../Renderer';
|
||||||
|
import Block from '../../Block';
|
||||||
|
import Node from '../../../nodes/shared/Node';
|
||||||
|
import InlineComponent from '../../../nodes/InlineComponent';
|
||||||
|
import FragmentWrapper from '../Fragment';
|
||||||
|
import { quoteNameIfNecessary, quotePropIfNecessary } from '../../../../utils/quoteIfNecessary';
|
||||||
|
import stringifyProps from '../../../../utils/stringifyProps';
|
||||||
|
import addToSet from '../../../../utils/addToSet';
|
||||||
|
import deindent from '../../../../utils/deindent';
|
||||||
|
import Attribute from '../../../nodes/Attribute';
|
||||||
|
import CodeBuilder from '../../../../utils/CodeBuilder';
|
||||||
|
import getObject from '../../../../utils/getObject';
|
||||||
|
import Binding from '../../../nodes/Binding';
|
||||||
|
import getTailSnippet from '../../../../utils/getTailSnippet';
|
||||||
|
|
||||||
|
export default class InlineComponentWrapper extends Wrapper {
|
||||||
|
var: string;
|
||||||
|
_slots: Set<string>; // TODO lost the underscore
|
||||||
|
node: InlineComponent;
|
||||||
|
fragment: FragmentWrapper;
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
renderer: Renderer,
|
||||||
|
block: Block,
|
||||||
|
parent: Wrapper,
|
||||||
|
node: InlineComponent,
|
||||||
|
stripWhitespace: boolean,
|
||||||
|
nextSibling: Wrapper
|
||||||
|
) {
|
||||||
|
super(renderer, block, parent, node);
|
||||||
|
|
||||||
|
this.cannotUseInnerHTML();
|
||||||
|
|
||||||
|
if (this.node.expression) {
|
||||||
|
block.addDependencies(this.node.expression.dependencies);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.node.attributes.forEach(attr => {
|
||||||
|
block.addDependencies(attr.dependencies);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.node.bindings.forEach(binding => {
|
||||||
|
block.addDependencies(binding.value.dependencies);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.node.handlers.forEach(handler => {
|
||||||
|
block.addDependencies(handler.dependencies);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.var = (
|
||||||
|
this.node.name === 'svelte:self' ? renderer.component.name :
|
||||||
|
this.node.name === 'svelte:component' ? 'switch_instance' :
|
||||||
|
this.node.name
|
||||||
|
).toLowerCase();
|
||||||
|
|
||||||
|
if (this.node.children.length) {
|
||||||
|
this._slots = new Set(['default']);
|
||||||
|
this.fragment = new FragmentWrapper(renderer, block, node.children, this, stripWhitespace, nextSibling);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (renderer.component.options.nestedTransitions) {
|
||||||
|
block.addOutro();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render(
|
||||||
|
block: Block,
|
||||||
|
parentNode: string,
|
||||||
|
parentNodes: string
|
||||||
|
) {
|
||||||
|
const { renderer } = this;
|
||||||
|
const { component } = renderer;
|
||||||
|
|
||||||
|
const name = this.var;
|
||||||
|
|
||||||
|
const componentInitProperties = [
|
||||||
|
`root: #component.root`,
|
||||||
|
`store: #component.store`
|
||||||
|
];
|
||||||
|
|
||||||
|
if (this.fragment) {
|
||||||
|
const slots = Array.from(this._slots).map(name => `${quoteNameIfNecessary(name)}: @createFragment()`);
|
||||||
|
componentInitProperties.push(`slots: { ${slots.join(', ')} }`);
|
||||||
|
|
||||||
|
this.fragment.nodes.forEach((child: Wrapper) => {
|
||||||
|
child.render(block, `${this.var}._slotted.default`, 'nodes');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const statements: string[] = [];
|
||||||
|
|
||||||
|
const name_initial_data = block.getUniqueName(`${name}_initial_data`);
|
||||||
|
const name_changes = block.getUniqueName(`${name}_changes`);
|
||||||
|
let name_updating: string;
|
||||||
|
let beforecreate: string = null;
|
||||||
|
|
||||||
|
const updates: string[] = [];
|
||||||
|
|
||||||
|
const usesSpread = !!this.node.attributes.find(a => a.isSpread);
|
||||||
|
|
||||||
|
const attributeObject = usesSpread
|
||||||
|
? '{}'
|
||||||
|
: stringifyProps(
|
||||||
|
this.node.attributes.map(attr => `${quoteNameIfNecessary(attr.name)}: ${attr.getValue()}`)
|
||||||
|
);
|
||||||
|
|
||||||
|
if (this.node.attributes.length || this.node.bindings.length) {
|
||||||
|
componentInitProperties.push(`data: ${name_initial_data}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!usesSpread && (this.node.attributes.filter(a => a.isDynamic).length || this.node.bindings.length)) {
|
||||||
|
updates.push(`var ${name_changes} = {};`);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.node.attributes.length) {
|
||||||
|
if (usesSpread) {
|
||||||
|
const levels = block.getUniqueName(`${this.var}_spread_levels`);
|
||||||
|
|
||||||
|
const initialProps = [];
|
||||||
|
const changes = [];
|
||||||
|
|
||||||
|
const allDependencies = new Set();
|
||||||
|
|
||||||
|
this.node.attributes.forEach(attr => {
|
||||||
|
addToSet(allDependencies, attr.dependencies);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.node.attributes.forEach(attr => {
|
||||||
|
const { name, dependencies } = attr;
|
||||||
|
|
||||||
|
const condition = dependencies.size > 0 && (dependencies.size !== allDependencies.size)
|
||||||
|
? `(${[...dependencies].map(d => `changed.${d}`).join(' || ')})`
|
||||||
|
: null;
|
||||||
|
|
||||||
|
if (attr.isSpread) {
|
||||||
|
const value = attr.expression.snippet;
|
||||||
|
initialProps.push(value);
|
||||||
|
|
||||||
|
changes.push(condition ? `${condition} && ${value}` : value);
|
||||||
|
} else {
|
||||||
|
const obj = `{ ${quoteNameIfNecessary(name)}: ${attr.getValue()} }`;
|
||||||
|
initialProps.push(obj);
|
||||||
|
|
||||||
|
changes.push(condition ? `${condition} && ${obj}` : obj);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
block.builders.init.addBlock(deindent`
|
||||||
|
var ${levels} = [
|
||||||
|
${initialProps.join(',\n')}
|
||||||
|
];
|
||||||
|
`);
|
||||||
|
|
||||||
|
statements.push(deindent`
|
||||||
|
for (var #i = 0; #i < ${levels}.length; #i += 1) {
|
||||||
|
${name_initial_data} = @assign(${name_initial_data}, ${levels}[#i]);
|
||||||
|
}
|
||||||
|
`);
|
||||||
|
|
||||||
|
const conditions = [...allDependencies].map(dep => `changed.${dep}`).join(' || ');
|
||||||
|
|
||||||
|
updates.push(deindent`
|
||||||
|
var ${name_changes} = ${allDependencies.size === 1 ? `${conditions}` : `(${conditions})`} ? @getSpreadUpdate(${levels}, [
|
||||||
|
${changes.join(',\n')}
|
||||||
|
]) : {};
|
||||||
|
`);
|
||||||
|
} else {
|
||||||
|
this.node.attributes
|
||||||
|
.filter((attribute: Attribute) => attribute.isDynamic)
|
||||||
|
.forEach((attribute: Attribute) => {
|
||||||
|
if (attribute.dependencies.size > 0) {
|
||||||
|
updates.push(deindent`
|
||||||
|
if (${[...attribute.dependencies]
|
||||||
|
.map(dependency => `changed.${dependency}`)
|
||||||
|
.join(' || ')}) ${name_changes}${quotePropIfNecessary(attribute.name)} = ${attribute.getValue()};
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.node.bindings.length) {
|
||||||
|
renderer.hasComplexBindings = true;
|
||||||
|
|
||||||
|
name_updating = block.alias(`${name}_updating`);
|
||||||
|
block.addVariable(name_updating, '{}');
|
||||||
|
|
||||||
|
let hasLocalBindings = false;
|
||||||
|
let hasStoreBindings = false;
|
||||||
|
|
||||||
|
const builder = new CodeBuilder();
|
||||||
|
|
||||||
|
this.node.bindings.forEach((binding: Binding) => {
|
||||||
|
let { name: key } = getObject(binding.value.node);
|
||||||
|
|
||||||
|
let setFromChild;
|
||||||
|
|
||||||
|
if (binding.isContextual) {
|
||||||
|
const computed = isComputed(binding.value.node);
|
||||||
|
const tail = binding.value.node.type === 'MemberExpression' ? getTailSnippet(binding.value.node) : '';
|
||||||
|
|
||||||
|
const head = block.bindings.get(key);
|
||||||
|
|
||||||
|
const lhs = binding.value.node.type === 'MemberExpression'
|
||||||
|
? binding.value.snippet
|
||||||
|
: `${head}${tail} = childState${quotePropIfNecessary(binding.name)}`;
|
||||||
|
|
||||||
|
setFromChild = deindent`
|
||||||
|
${lhs} = childState${quotePropIfNecessary(binding.name)};
|
||||||
|
|
||||||
|
${[...binding.value.dependencies]
|
||||||
|
.map((name: string) => {
|
||||||
|
const isStoreProp = name[0] === '$';
|
||||||
|
const prop = isStoreProp ? name.slice(1) : name;
|
||||||
|
const newState = isStoreProp ? 'newStoreState' : 'newState';
|
||||||
|
|
||||||
|
if (isStoreProp) hasStoreBindings = true;
|
||||||
|
else hasLocalBindings = true;
|
||||||
|
|
||||||
|
return `${newState}${quotePropIfNecessary(prop)} = ctx${quotePropIfNecessary(name)};`;
|
||||||
|
})}
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
else {
|
||||||
|
const isStoreProp = key[0] === '$';
|
||||||
|
const prop = isStoreProp ? key.slice(1) : key;
|
||||||
|
const newState = isStoreProp ? 'newStoreState' : 'newState';
|
||||||
|
|
||||||
|
if (isStoreProp) hasStoreBindings = true;
|
||||||
|
else hasLocalBindings = true;
|
||||||
|
|
||||||
|
if (binding.value.node.type === 'MemberExpression') {
|
||||||
|
setFromChild = deindent`
|
||||||
|
${binding.value.snippet} = childState${quotePropIfNecessary(binding.name)};
|
||||||
|
${newState}${quotePropIfNecessary(prop)} = ctx${quotePropIfNecessary(key)};
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
else {
|
||||||
|
setFromChild = `${newState}${quotePropIfNecessary(prop)} = childState${quotePropIfNecessary(binding.name)};`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
statements.push(deindent`
|
||||||
|
if (${binding.value.snippet} !== void 0) {
|
||||||
|
${name_initial_data}${quotePropIfNecessary(binding.name)} = ${binding.value.snippet};
|
||||||
|
${name_updating}${quotePropIfNecessary(binding.name)} = true;
|
||||||
|
}`
|
||||||
|
);
|
||||||
|
|
||||||
|
builder.addConditional(
|
||||||
|
`!${name_updating}${quotePropIfNecessary(binding.name)} && changed${quotePropIfNecessary(binding.name)}`,
|
||||||
|
setFromChild
|
||||||
|
);
|
||||||
|
|
||||||
|
updates.push(deindent`
|
||||||
|
if (!${name_updating}${quotePropIfNecessary(binding.name)} && ${[...binding.value.dependencies].map((dependency: string) => `changed.${dependency}`).join(' || ')}) {
|
||||||
|
${name_changes}${quotePropIfNecessary(binding.name)} = ${binding.value.snippet};
|
||||||
|
${name_updating}${quotePropIfNecessary(binding.name)} = ${binding.value.snippet} !== void 0;
|
||||||
|
}
|
||||||
|
`);
|
||||||
|
});
|
||||||
|
|
||||||
|
block.maintainContext = true; // TODO put this somewhere more logical
|
||||||
|
|
||||||
|
const initialisers = [
|
||||||
|
hasLocalBindings && 'newState = {}',
|
||||||
|
hasStoreBindings && 'newStoreState = {}',
|
||||||
|
].filter(Boolean).join(', ');
|
||||||
|
|
||||||
|
// TODO use component.on('state', ...) instead of _bind
|
||||||
|
componentInitProperties.push(deindent`
|
||||||
|
_bind(changed, childState) {
|
||||||
|
var ${initialisers};
|
||||||
|
${builder}
|
||||||
|
${hasStoreBindings && `#component.store.set(newStoreState);`}
|
||||||
|
${hasLocalBindings && `#component._set(newState);`}
|
||||||
|
${name_updating} = {};
|
||||||
|
}
|
||||||
|
`);
|
||||||
|
|
||||||
|
beforecreate = deindent`
|
||||||
|
#component.root._beforecreate.push(() => {
|
||||||
|
${name}._bind({ ${this.node.bindings.map(b => `${quoteNameIfNecessary(b.name)}: 1`).join(', ')} }, ${name}.get());
|
||||||
|
});
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.node.handlers.forEach(handler => {
|
||||||
|
handler.var = block.getUniqueName(`${this.var}_${handler.name}`); // TODO this is hacky
|
||||||
|
handler.render(component, block, false); // TODO hoist when possible
|
||||||
|
if (handler.usesContext) block.maintainContext = true; // TODO is there a better place to put this?
|
||||||
|
});
|
||||||
|
|
||||||
|
if (this.node.name === 'svelte:component') {
|
||||||
|
const switch_value = block.getUniqueName('switch_value');
|
||||||
|
const switch_props = block.getUniqueName('switch_props');
|
||||||
|
|
||||||
|
const { snippet } = this.node.expression;
|
||||||
|
|
||||||
|
block.builders.init.addBlock(deindent`
|
||||||
|
var ${switch_value} = ${snippet};
|
||||||
|
|
||||||
|
function ${switch_props}(ctx) {
|
||||||
|
${(this.node.attributes.length || this.node.bindings.length) && deindent`
|
||||||
|
var ${name_initial_data} = ${attributeObject};`}
|
||||||
|
${statements}
|
||||||
|
return {
|
||||||
|
${componentInitProperties.join(',\n')}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (${switch_value}) {
|
||||||
|
var ${name} = new ${switch_value}(${switch_props}(ctx));
|
||||||
|
|
||||||
|
${beforecreate}
|
||||||
|
}
|
||||||
|
|
||||||
|
${this.node.handlers.map(handler => deindent`
|
||||||
|
function ${handler.var}(event) {
|
||||||
|
${handler.snippet || `#component.fire("${handler.name}", event);`}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (${name}) ${name}.on("${handler.name}", ${handler.var});
|
||||||
|
`)}
|
||||||
|
`);
|
||||||
|
|
||||||
|
block.builders.create.addLine(
|
||||||
|
`if (${name}) ${name}._fragment.c();`
|
||||||
|
);
|
||||||
|
|
||||||
|
if (parentNodes) {
|
||||||
|
block.builders.claim.addLine(
|
||||||
|
`if (${name}) ${name}._fragment.l(${parentNodes});`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
block.builders.mount.addBlock(deindent`
|
||||||
|
if (${name}) {
|
||||||
|
${name}._mount(${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'});
|
||||||
|
${this.node.ref && `#component.refs.${this.node.ref.name} = ${name};`}
|
||||||
|
}
|
||||||
|
`);
|
||||||
|
|
||||||
|
const anchor = this.getOrCreateAnchor(block, parentNode, parentNodes);
|
||||||
|
const updateMountNode = this.getUpdateMountNode(anchor);
|
||||||
|
|
||||||
|
if (updates.length) {
|
||||||
|
block.builders.update.addBlock(deindent`
|
||||||
|
${updates}
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
|
||||||
|
block.builders.update.addBlock(deindent`
|
||||||
|
if (${switch_value} !== (${switch_value} = ${snippet})) {
|
||||||
|
if (${name}) {
|
||||||
|
${component.options.nestedTransitions
|
||||||
|
? deindent`
|
||||||
|
@groupOutros();
|
||||||
|
const old_component = ${name};
|
||||||
|
old_component._fragment.o(() => {
|
||||||
|
old_component.destroy();
|
||||||
|
});`
|
||||||
|
: `${name}.destroy();`}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (${switch_value}) {
|
||||||
|
${name} = new ${switch_value}(${switch_props}(ctx));
|
||||||
|
|
||||||
|
${this.node.bindings.length > 0 && deindent`
|
||||||
|
#component.root._beforecreate.push(() => {
|
||||||
|
const changed = {};
|
||||||
|
${this.node.bindings.map(binding => deindent`
|
||||||
|
if (${binding.value.snippet} === void 0) changed.${binding.name} = 1;`)}
|
||||||
|
${name}._bind(changed, ${name}.get());
|
||||||
|
});`}
|
||||||
|
${name}._fragment.c();
|
||||||
|
|
||||||
|
${this.fragment.nodes.map(child => child.remount(name))}
|
||||||
|
${name}._mount(${updateMountNode}, ${anchor});
|
||||||
|
|
||||||
|
${this.node.handlers.map(handler => deindent`
|
||||||
|
${name}.on("${handler.name}", ${handler.var});
|
||||||
|
`)}
|
||||||
|
|
||||||
|
${this.node.ref && `#component.refs.${this.node.ref.name} = ${name};`}
|
||||||
|
} else {
|
||||||
|
${name} = null;
|
||||||
|
${this.node.ref && deindent`
|
||||||
|
if (#component.refs.${this.node.ref.name} === ${name}) {
|
||||||
|
#component.refs.${this.node.ref.name} = null;
|
||||||
|
}`}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`);
|
||||||
|
|
||||||
|
if (updates.length) {
|
||||||
|
block.builders.update.addBlock(deindent`
|
||||||
|
else if (${switch_value}) {
|
||||||
|
${name}._set(${name_changes});
|
||||||
|
${this.node.bindings.length && `${name_updating} = {};`}
|
||||||
|
}
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
|
||||||
|
block.builders.destroy.addLine(`if (${name}) ${name}.destroy(${parentNode ? '' : 'detach'});`);
|
||||||
|
} else {
|
||||||
|
const expression = this.node.name === 'svelte:self'
|
||||||
|
? component.name
|
||||||
|
: `%components-${this.node.name}`;
|
||||||
|
|
||||||
|
block.builders.init.addBlock(deindent`
|
||||||
|
${(this.node.attributes.length || this.node.bindings.length) && deindent`
|
||||||
|
var ${name_initial_data} = ${attributeObject};`}
|
||||||
|
${statements}
|
||||||
|
var ${name} = new ${expression}({
|
||||||
|
${componentInitProperties.join(',\n')}
|
||||||
|
});
|
||||||
|
|
||||||
|
${beforecreate}
|
||||||
|
|
||||||
|
${this.node.handlers.map(handler => deindent`
|
||||||
|
${name}.on("${handler.name}", function(event) {
|
||||||
|
${handler.snippet || `#component.fire("${handler.name}", event);`}
|
||||||
|
});
|
||||||
|
`)}
|
||||||
|
|
||||||
|
${this.node.ref && `#component.refs.${this.node.ref.name} = ${name};`}
|
||||||
|
`);
|
||||||
|
|
||||||
|
block.builders.create.addLine(`${name}._fragment.c();`);
|
||||||
|
|
||||||
|
if (parentNodes) {
|
||||||
|
block.builders.claim.addLine(
|
||||||
|
`${name}._fragment.l(${parentNodes});`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
block.builders.mount.addLine(
|
||||||
|
`${name}._mount(${parentNode || '#target'}, ${parentNode ? 'null' : 'anchor'});`
|
||||||
|
);
|
||||||
|
|
||||||
|
if (updates.length) {
|
||||||
|
block.builders.update.addBlock(deindent`
|
||||||
|
${updates}
|
||||||
|
${name}._set(${name_changes});
|
||||||
|
${this.node.bindings.length && `${name_updating} = {};`}
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
|
||||||
|
block.builders.destroy.addLine(deindent`
|
||||||
|
${name}.destroy(${parentNode ? '' : 'detach'});
|
||||||
|
${this.node.ref && `if (#component.refs.${this.node.ref.name} === ${name}) #component.refs.${this.node.ref.name} = null;`}
|
||||||
|
`);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (component.options.nestedTransitions) {
|
||||||
|
block.builders.outro.addLine(
|
||||||
|
`if (${name}) ${name}._fragment.o(#outrocallback);`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
remount(name: string) {
|
||||||
|
return `${this.var}._mount(${name}._slotted.default, null);`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function isComputed(node: Node) {
|
||||||
|
while (node.type === 'MemberExpression') {
|
||||||
|
if (node.computed) return true;
|
||||||
|
node = node.object;
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
Loading…
Reference in new issue