mirror of https://github.com/sveltejs/svelte
Rich Harris
8 years ago
parent
1636f1733b
commit
2e56d10b39
@ -0,0 +1,34 @@
|
|||||||
|
import { assign } from '../../shared/index.js';
|
||||||
|
|
||||||
|
interface StateData {
|
||||||
|
namespace?: string;
|
||||||
|
parentNode?: string;
|
||||||
|
parentNodes?: string;
|
||||||
|
parentNodeName?: string;
|
||||||
|
inEachBlock?: boolean;
|
||||||
|
allUsedContexts?: string[];
|
||||||
|
usesComponent?: boolean;
|
||||||
|
selectBindingDependencies?: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class State {
|
||||||
|
namespace?: string;
|
||||||
|
parentNode?: string;
|
||||||
|
parentNodes?: string;
|
||||||
|
parentNodeName?: string;
|
||||||
|
inEachBlock?: boolean;
|
||||||
|
allUsedContexts?: string[];
|
||||||
|
usesComponent?: boolean;
|
||||||
|
selectBindingDependencies?: string[];
|
||||||
|
|
||||||
|
constructor(data: StateData = {}) {
|
||||||
|
assign(this, data)
|
||||||
|
}
|
||||||
|
|
||||||
|
child(data: StateData) {
|
||||||
|
return new State(assign({}, this, {
|
||||||
|
parentNode: null,
|
||||||
|
parentNodes: 'nodes'
|
||||||
|
}, data));
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,68 @@
|
|||||||
|
import Node from './shared/Node';
|
||||||
|
import { DomGenerator } from '../dom/index';
|
||||||
|
import Block from '../dom/Block';
|
||||||
|
import PendingBlock from './PendingBlock';
|
||||||
|
import ThenBlock from './ThenBlock';
|
||||||
|
import CatchBlock from './CatchBlock';
|
||||||
|
import { State } from '../dom/interfaces';
|
||||||
|
import createDebuggingComment from '../../utils/createDebuggingComment';
|
||||||
|
|
||||||
|
export default class AwaitBlock extends Node {
|
||||||
|
value: string;
|
||||||
|
error: string;
|
||||||
|
|
||||||
|
pending: PendingBlock;
|
||||||
|
then: ThenBlock;
|
||||||
|
catch: CatchBlock;
|
||||||
|
|
||||||
|
init(
|
||||||
|
block: Block,
|
||||||
|
state: State,
|
||||||
|
inEachBlock: boolean,
|
||||||
|
elementStack: Node[],
|
||||||
|
componentStack: Node[],
|
||||||
|
stripWhitespace: boolean,
|
||||||
|
nextSibling: Node
|
||||||
|
) {
|
||||||
|
this.cannotUseInnerHTML();
|
||||||
|
|
||||||
|
this.var = block.getUniqueName('await_block');
|
||||||
|
block.addDependencies(this.metadata.dependencies);
|
||||||
|
|
||||||
|
let dynamic = false;
|
||||||
|
|
||||||
|
[
|
||||||
|
['pending', null],
|
||||||
|
['then', this.value],
|
||||||
|
['catch', this.error]
|
||||||
|
].forEach(([status, arg]) => {
|
||||||
|
const child = this[status];
|
||||||
|
|
||||||
|
const context = block.getUniqueName(arg || '_');
|
||||||
|
const contexts = new Map(block.contexts);
|
||||||
|
contexts.set(arg, context);
|
||||||
|
|
||||||
|
child._block = block.child({
|
||||||
|
comment: createDebuggingComment(child, this.generator),
|
||||||
|
name: this.generator.getUniqueName(`create_${status}_block`),
|
||||||
|
params: block.params.concat(context),
|
||||||
|
context,
|
||||||
|
contexts
|
||||||
|
});
|
||||||
|
|
||||||
|
child._state = state.child();
|
||||||
|
|
||||||
|
child.initChildren(child._block, child._state, inEachBlock, elementStack, componentStack, stripWhitespace, nextSibling);
|
||||||
|
this.generator.blocks.push(child._block);
|
||||||
|
|
||||||
|
if (child._block.dependencies.size > 0) {
|
||||||
|
dynamic = true;
|
||||||
|
block.addDependencies(child._block.dependencies);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.pending._block.hasUpdateMethod = dynamic;
|
||||||
|
this.then._block.hasUpdateMethod = dynamic;
|
||||||
|
this.catch._block.hasUpdateMethod = dynamic;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
import Node from './shared/Node';
|
||||||
|
import Block from '../dom/Block';
|
||||||
|
|
||||||
|
export default class CatchBlock extends Node {
|
||||||
|
_block: Block;
|
||||||
|
}
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
import Node from './shared/Node';
|
||||||
|
|
||||||
|
export default class Comment extends Node {
|
||||||
|
type: 'Comment'
|
||||||
|
}
|
||||||
@ -0,0 +1,61 @@
|
|||||||
|
import Node from './shared/Node';
|
||||||
|
import Block from '../dom/Block';
|
||||||
|
import State from '../dom/State';
|
||||||
|
|
||||||
|
export default class Component extends Node {
|
||||||
|
type: 'Component'; // TODO fix this?
|
||||||
|
name: string;
|
||||||
|
attributes: Node[]; // TODO have more specific Attribute type
|
||||||
|
children: Node[];
|
||||||
|
|
||||||
|
init(
|
||||||
|
block: Block,
|
||||||
|
state: State,
|
||||||
|
inEachBlock: boolean,
|
||||||
|
elementStack: Node[],
|
||||||
|
componentStack: Node[],
|
||||||
|
stripWhitespace: boolean,
|
||||||
|
nextSibling: Node
|
||||||
|
) {
|
||||||
|
this.cannotUseInnerHTML();
|
||||||
|
|
||||||
|
this.attributes.forEach((attribute: Node) => {
|
||||||
|
if (attribute.type === 'Attribute' && attribute.value !== true) {
|
||||||
|
attribute.value.forEach((chunk: Node) => {
|
||||||
|
if (chunk.type !== 'Text') {
|
||||||
|
const dependencies = chunk.metadata.dependencies;
|
||||||
|
block.addDependencies(dependencies);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
if (attribute.type === 'EventHandler' && attribute.expression) {
|
||||||
|
attribute.expression.arguments.forEach((arg: Node) => {
|
||||||
|
block.addDependencies(arg.metadata.dependencies);
|
||||||
|
});
|
||||||
|
} else if (attribute.type === 'Binding') {
|
||||||
|
block.addDependencies(attribute.metadata.dependencies);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.var = block.getUniqueName(
|
||||||
|
(
|
||||||
|
this.name === ':Self' ? this.generator.name :
|
||||||
|
this.name === ':Component' ? 'switch_instance' :
|
||||||
|
this.name
|
||||||
|
).toLowerCase()
|
||||||
|
);
|
||||||
|
|
||||||
|
this._state = state.child({
|
||||||
|
parentNode: `${this.var}._slotted.default`
|
||||||
|
});
|
||||||
|
|
||||||
|
if (this.children.length) {
|
||||||
|
this._slots = new Set(['default']);
|
||||||
|
|
||||||
|
this.children.forEach(child => {
|
||||||
|
child.init(block, state, inEachBlock, elementStack, componentStack.concat(this), stripWhitespace, nextSibling);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,115 @@
|
|||||||
|
import Node from './shared/Node';
|
||||||
|
import ElseBlock from './ElseBlock';
|
||||||
|
import { DomGenerator } from '../dom/index';
|
||||||
|
import Block from '../dom/Block';
|
||||||
|
import State from '../dom/State';
|
||||||
|
import createDebuggingComment from '../../utils/createDebuggingComment';
|
||||||
|
|
||||||
|
export default class EachBlock extends Node {
|
||||||
|
_block: Block;
|
||||||
|
_state: State;
|
||||||
|
expression: Node;
|
||||||
|
|
||||||
|
iterations: string;
|
||||||
|
index: string;
|
||||||
|
context: string;
|
||||||
|
key: string;
|
||||||
|
destructuredContexts: string[];
|
||||||
|
|
||||||
|
else?: ElseBlock;
|
||||||
|
|
||||||
|
init(
|
||||||
|
block: Block,
|
||||||
|
state: State,
|
||||||
|
inEachBlock: boolean,
|
||||||
|
elementStack: Node[],
|
||||||
|
componentStack: Node[],
|
||||||
|
stripWhitespace: boolean,
|
||||||
|
nextSibling: Node
|
||||||
|
) {
|
||||||
|
this.cannotUseInnerHTML();
|
||||||
|
|
||||||
|
this.var = block.getUniqueName(`each`);
|
||||||
|
this.iterations = block.getUniqueName(`${this.var}_blocks`);
|
||||||
|
|
||||||
|
const { dependencies } = this.metadata;
|
||||||
|
block.addDependencies(dependencies);
|
||||||
|
|
||||||
|
const indexNames = new Map(block.indexNames);
|
||||||
|
const indexName =
|
||||||
|
this.index || block.getUniqueName(`${this.context}_index`);
|
||||||
|
indexNames.set(this.context, indexName);
|
||||||
|
|
||||||
|
const listNames = new Map(block.listNames);
|
||||||
|
const listName = block.getUniqueName(
|
||||||
|
(this.expression.type === 'MemberExpression' && !this.expression.computed) ? this.expression.property.name :
|
||||||
|
this.expression.type === 'Identifier' ? this.expression.name :
|
||||||
|
`each_value`
|
||||||
|
);
|
||||||
|
listNames.set(this.context, listName);
|
||||||
|
|
||||||
|
const context = block.getUniqueName(this.context);
|
||||||
|
const contexts = new Map(block.contexts);
|
||||||
|
contexts.set(this.context, context);
|
||||||
|
|
||||||
|
const indexes = new Map(block.indexes);
|
||||||
|
if (this.index) indexes.set(this.index, this.context);
|
||||||
|
|
||||||
|
const changeableIndexes = new Map(block.changeableIndexes);
|
||||||
|
if (this.index) changeableIndexes.set(this.index, this.key);
|
||||||
|
|
||||||
|
if (this.destructuredContexts) {
|
||||||
|
for (let i = 0; i < this.destructuredContexts.length; i += 1) {
|
||||||
|
contexts.set(this.destructuredContexts[i], `${context}[${i}]`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this._block = block.child({
|
||||||
|
comment: createDebuggingComment(this, this.generator),
|
||||||
|
name: this.generator.getUniqueName('create_each_block'),
|
||||||
|
context: this.context,
|
||||||
|
key: this.key,
|
||||||
|
|
||||||
|
contexts,
|
||||||
|
indexes,
|
||||||
|
changeableIndexes,
|
||||||
|
|
||||||
|
listName,
|
||||||
|
indexName,
|
||||||
|
|
||||||
|
indexNames,
|
||||||
|
listNames,
|
||||||
|
params: block.params.concat(listName, context, indexName),
|
||||||
|
});
|
||||||
|
|
||||||
|
this._state = state.child({
|
||||||
|
inEachBlock: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
this.generator.blocks.push(this._block);
|
||||||
|
this.initChildren(this._block, this._state, true, elementStack, componentStack, stripWhitespace, nextSibling);
|
||||||
|
block.addDependencies(this._block.dependencies);
|
||||||
|
this._block.hasUpdateMethod = this._block.dependencies.size > 0;
|
||||||
|
|
||||||
|
if (this.else) {
|
||||||
|
this.else._block = block.child({
|
||||||
|
comment: '// TODO', // createDebuggingComment(this.else, generator),
|
||||||
|
name: this.generator.getUniqueName(`${this._block.name}_else`),
|
||||||
|
});
|
||||||
|
|
||||||
|
this.else._state = state.child();
|
||||||
|
|
||||||
|
this.generator.blocks.push(this.else._block);
|
||||||
|
this.else.initChildren(
|
||||||
|
this.else._block,
|
||||||
|
this.else._state,
|
||||||
|
inEachBlock,
|
||||||
|
elementStack,
|
||||||
|
componentStack,
|
||||||
|
stripWhitespace,
|
||||||
|
nextSibling
|
||||||
|
);
|
||||||
|
this.else._block.hasUpdateMethod = this.else._block.dependencies.size > 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,151 @@
|
|||||||
|
import Node from './shared/Node';
|
||||||
|
import Block from '../dom/Block';
|
||||||
|
import State from '../dom/State';
|
||||||
|
|
||||||
|
export default class Element extends Node {
|
||||||
|
type: 'Element';
|
||||||
|
name: string;
|
||||||
|
attributes: Node[]; // TODO have more specific Attribute type
|
||||||
|
children: Node[];
|
||||||
|
|
||||||
|
init(
|
||||||
|
block: Block,
|
||||||
|
state: State,
|
||||||
|
inEachBlock: boolean,
|
||||||
|
elementStack: Node[],
|
||||||
|
componentStack: Node[],
|
||||||
|
stripWhitespace: boolean,
|
||||||
|
nextSibling: Node
|
||||||
|
) {
|
||||||
|
if (this.name === 'slot' || this.name === 'option') {
|
||||||
|
this.cannotUseInnerHTML();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.attributes.forEach((attribute: Node) => {
|
||||||
|
if (attribute.type === 'Attribute' && attribute.value !== true) {
|
||||||
|
attribute.value.forEach((chunk: Node) => {
|
||||||
|
if (chunk.type !== 'Text') {
|
||||||
|
if (this.parent) this.parent.cannotUseInnerHTML();
|
||||||
|
|
||||||
|
const dependencies = chunk.metadata.dependencies;
|
||||||
|
block.addDependencies(dependencies);
|
||||||
|
|
||||||
|
// special case — <option value='{{foo}}'> — see below
|
||||||
|
if (
|
||||||
|
this.name === 'option' &&
|
||||||
|
attribute.name === 'value' &&
|
||||||
|
state.selectBindingDependencies
|
||||||
|
) {
|
||||||
|
state.selectBindingDependencies.forEach(prop => {
|
||||||
|
dependencies.forEach((dependency: string) => {
|
||||||
|
this.generator.indirectDependencies.get(prop).add(dependency);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
if (this.parent) this.parent.cannotUseInnerHTML();
|
||||||
|
|
||||||
|
if (attribute.type === 'EventHandler' && attribute.expression) {
|
||||||
|
attribute.expression.arguments.forEach((arg: Node) => {
|
||||||
|
block.addDependencies(arg.metadata.dependencies);
|
||||||
|
});
|
||||||
|
} else if (attribute.type === 'Binding') {
|
||||||
|
block.addDependencies(attribute.metadata.dependencies);
|
||||||
|
} else if (attribute.type === 'Transition') {
|
||||||
|
if (attribute.intro)
|
||||||
|
this.generator.hasIntroTransitions = block.hasIntroMethod = true;
|
||||||
|
if (attribute.outro) {
|
||||||
|
this.generator.hasOutroTransitions = block.hasOutroMethod = true;
|
||||||
|
block.outros += 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const valueAttribute = this.attributes.find((attribute: Node) => attribute.name === 'value');
|
||||||
|
|
||||||
|
// Treat these the same way:
|
||||||
|
// <option>{{foo}}</option>
|
||||||
|
// <option value='{{foo}}'>{{foo}}</option>
|
||||||
|
if (this.name === 'option' && !valueAttribute) {
|
||||||
|
this.attributes.push({
|
||||||
|
type: 'Attribute',
|
||||||
|
name: 'value',
|
||||||
|
value: this.children
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// special case — in a case like this...
|
||||||
|
//
|
||||||
|
// <select bind:value='foo'>
|
||||||
|
// <option value='{{bar}}'>bar</option>
|
||||||
|
// <option value='{{baz}}'>baz</option>
|
||||||
|
// </option>
|
||||||
|
//
|
||||||
|
// ...we need to know that `foo` depends on `bar` and `baz`,
|
||||||
|
// so that if `foo.qux` changes, we know that we need to
|
||||||
|
// mark `bar` and `baz` as dirty too
|
||||||
|
if (this.name === 'select') {
|
||||||
|
const binding = this.attributes.find((node: Node) => node.type === 'Binding' && node.name === 'value');
|
||||||
|
if (binding) {
|
||||||
|
// TODO does this also apply to e.g. `<input type='checkbox' bind:group='foo'>`?
|
||||||
|
const dependencies = binding.metadata.dependencies;
|
||||||
|
state.selectBindingDependencies = dependencies;
|
||||||
|
dependencies.forEach((prop: string) => {
|
||||||
|
this.generator.indirectDependencies.set(prop, new Set());
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
state.selectBindingDependencies = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const slot = this.getStaticAttributeValue('slot');
|
||||||
|
if (slot && this.isChildOfComponent()) {
|
||||||
|
this.cannotUseInnerHTML();
|
||||||
|
this.slotted = true;
|
||||||
|
// TODO validate slots — no nesting, no dynamic names...
|
||||||
|
const component = componentStack[componentStack.length - 1];
|
||||||
|
component._slots.add(slot);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.var = block.getUniqueName(
|
||||||
|
this.name.replace(/[^a-zA-Z0-9_$]/g, '_')
|
||||||
|
);
|
||||||
|
|
||||||
|
this._state = state.child({
|
||||||
|
parentNode: this.var,
|
||||||
|
parentNodes: block.getUniqueName(`${this.var}_nodes`),
|
||||||
|
parentNodeName: this.name,
|
||||||
|
namespace: this.name === 'svg'
|
||||||
|
? 'http://www.w3.org/2000/svg'
|
||||||
|
: state.namespace,
|
||||||
|
allUsedContexts: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
this.generator.stylesheet.apply(this, elementStack);
|
||||||
|
|
||||||
|
if (this.children.length) {
|
||||||
|
if (this.name === 'pre' || this.name === 'textarea') stripWhitespace = false;
|
||||||
|
this.initChildren(block, this._state, inEachBlock, elementStack.concat(this), componentStack, stripWhitespace, nextSibling);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getStaticAttributeValue(name: string) {
|
||||||
|
const attribute = this.attributes.find(
|
||||||
|
(attr: Node) => attr.name.toLowerCase() === name
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!attribute) return null;
|
||||||
|
|
||||||
|
if (attribute.value === true) return true;
|
||||||
|
if (attribute.value.length === 0) return '';
|
||||||
|
|
||||||
|
if (attribute.value.length === 1 && attribute.value[0].type === 'Text') {
|
||||||
|
return attribute.value[0].data;
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
import Node from './shared/Node';
|
||||||
|
|
||||||
|
export default class ElseBlock extends Node {
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
import Node from './shared/Node';
|
||||||
|
import { DomGenerator } from '../dom/index';
|
||||||
|
import Block from '../dom/Block';
|
||||||
|
import State from '../dom/State';
|
||||||
|
|
||||||
|
export default class Fragment extends Node {
|
||||||
|
block: Block;
|
||||||
|
state: State;
|
||||||
|
children: Node[];
|
||||||
|
|
||||||
|
init(
|
||||||
|
namespace: string
|
||||||
|
) {
|
||||||
|
this.block = new Block({
|
||||||
|
generator: this.generator,
|
||||||
|
name: '@create_main_fragment',
|
||||||
|
key: null,
|
||||||
|
|
||||||
|
contexts: new Map(),
|
||||||
|
indexes: new Map(),
|
||||||
|
changeableIndexes: new Map(),
|
||||||
|
|
||||||
|
params: ['state'],
|
||||||
|
indexNames: new Map(),
|
||||||
|
listNames: new Map(),
|
||||||
|
|
||||||
|
dependencies: new Set(),
|
||||||
|
});
|
||||||
|
|
||||||
|
this.state = new State({
|
||||||
|
namespace,
|
||||||
|
parentNode: null,
|
||||||
|
parentNodes: 'nodes'
|
||||||
|
});
|
||||||
|
|
||||||
|
this.generator.blocks.push(this.block);
|
||||||
|
this.initChildren(this.block, this.state, false, [], [], true, null);
|
||||||
|
|
||||||
|
this.block.hasUpdateMethod = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,93 @@
|
|||||||
|
import Node from './shared/Node';
|
||||||
|
import { DomGenerator } from '../dom/index';
|
||||||
|
import Block from '../dom/Block';
|
||||||
|
import { State } from '../dom/interfaces';
|
||||||
|
import createDebuggingComment from '../../utils/createDebuggingComment';
|
||||||
|
|
||||||
|
function isElseIf(node: Node) {
|
||||||
|
return (
|
||||||
|
node && node.children.length === 1 && node.children[0].type === 'IfBlock'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class IfBlock extends Node {
|
||||||
|
init(
|
||||||
|
block: Block,
|
||||||
|
state: State,
|
||||||
|
inEachBlock: boolean,
|
||||||
|
elementStack: Node[],
|
||||||
|
componentStack: Node[],
|
||||||
|
stripWhitespace: boolean,
|
||||||
|
nextSibling: Node
|
||||||
|
) {
|
||||||
|
const { generator } = this;
|
||||||
|
|
||||||
|
this.cannotUseInnerHTML();
|
||||||
|
|
||||||
|
const blocks: Block[] = [];
|
||||||
|
let dynamic = false;
|
||||||
|
let hasIntros = false;
|
||||||
|
let hasOutros = false;
|
||||||
|
|
||||||
|
function attachBlocks(node: Node) {
|
||||||
|
node.var = block.getUniqueName(`if_block`);
|
||||||
|
|
||||||
|
block.addDependencies(node.metadata.dependencies);
|
||||||
|
|
||||||
|
node._block = block.child({
|
||||||
|
comment: createDebuggingComment(node, generator),
|
||||||
|
name: generator.getUniqueName(`create_if_block`),
|
||||||
|
});
|
||||||
|
|
||||||
|
node._state = state.child();
|
||||||
|
|
||||||
|
blocks.push(node._block);
|
||||||
|
node.initChildren(node._block, node._state, inEachBlock, elementStack, componentStack, 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, generator),
|
||||||
|
name: generator.getUniqueName(`create_if_block`),
|
||||||
|
});
|
||||||
|
|
||||||
|
node.else._state = state.child();
|
||||||
|
|
||||||
|
blocks.push(node.else._block);
|
||||||
|
node.else.initChildren(
|
||||||
|
node.else._block,
|
||||||
|
node.else._state,
|
||||||
|
inEachBlock,
|
||||||
|
elementStack,
|
||||||
|
componentStack,
|
||||||
|
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;
|
||||||
|
});
|
||||||
|
|
||||||
|
generator.blocks.push(...blocks);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
import Node from './shared/Node';
|
||||||
|
import Block from '../dom/Block';
|
||||||
|
|
||||||
|
export default class MustacheTag extends Node {
|
||||||
|
init(block: Block) {
|
||||||
|
this.cannotUseInnerHTML();
|
||||||
|
this.var = block.getUniqueName('text');
|
||||||
|
block.addDependencies(this.metadata.dependencies);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
import Node from './shared/Node';
|
||||||
|
import Block from '../dom/Block';
|
||||||
|
|
||||||
|
export default class PendingBlock extends Node {
|
||||||
|
_block: Block;
|
||||||
|
}
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
import Node from './shared/Node';
|
||||||
|
import Block from '../dom/Block';
|
||||||
|
|
||||||
|
export default class RawMustacheTag extends Node {
|
||||||
|
init(block: Block) {
|
||||||
|
this.cannotUseInnerHTML();
|
||||||
|
this.var = block.getUniqueName('raw');
|
||||||
|
block.addDependencies(this.metadata.dependencies);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
import Node from './shared/Node';
|
||||||
|
|
||||||
|
export default class Slot extends Node {
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
import Node from './shared/Node';
|
||||||
|
import Block from '../dom/Block';
|
||||||
|
import { State } from '../dom/interfaces';
|
||||||
|
|
||||||
|
// Whitespace inside one of these elements will not result in
|
||||||
|
// a whitespace node being created in any circumstances. (This
|
||||||
|
// list is almost certainly very incomplete)
|
||||||
|
const elementsWithoutText = new Set([
|
||||||
|
'audio',
|
||||||
|
'datalist',
|
||||||
|
'dl',
|
||||||
|
'ol',
|
||||||
|
'optgroup',
|
||||||
|
'select',
|
||||||
|
'ul',
|
||||||
|
'video',
|
||||||
|
]);
|
||||||
|
|
||||||
|
export default class Text extends Node {
|
||||||
|
data: string;
|
||||||
|
shouldSkip: boolean;
|
||||||
|
|
||||||
|
init(block: Block, state: State) {
|
||||||
|
if (!/\S/.test(this.data) && (state.namespace || elementsWithoutText.has(state.parentNodeName))) {
|
||||||
|
this.shouldSkip = true;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.var = block.getUniqueName(`text`);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
import Node from './shared/Node';
|
||||||
|
import Block from '../dom/Block';
|
||||||
|
|
||||||
|
export default class ThenBlock extends Node {
|
||||||
|
_block: Block;
|
||||||
|
}
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
import Node from './shared/Node';
|
||||||
|
import AwaitBlock from './AwaitBlock';
|
||||||
|
import CatchBlock from './CatchBlock';
|
||||||
|
import Comment from './Comment';
|
||||||
|
import Component from './Component';
|
||||||
|
import EachBlock from './EachBlock';
|
||||||
|
import Element from './Element';
|
||||||
|
import ElseBlock from './ElseBlock';
|
||||||
|
import Fragment from './Fragment';
|
||||||
|
import IfBlock from './IfBlock';
|
||||||
|
import MustacheTag from './MustacheTag';
|
||||||
|
import PendingBlock from './PendingBlock';
|
||||||
|
import RawMustacheTag from './RawMustacheTag';
|
||||||
|
import Slot from './Slot';
|
||||||
|
import Text from './Text';
|
||||||
|
import ThenBlock from './ThenBlock';
|
||||||
|
|
||||||
|
const nodes: Record<string, any> = {
|
||||||
|
AwaitBlock,
|
||||||
|
CatchBlock,
|
||||||
|
Comment,
|
||||||
|
Component,
|
||||||
|
EachBlock,
|
||||||
|
Element,
|
||||||
|
ElseBlock,
|
||||||
|
Fragment,
|
||||||
|
IfBlock,
|
||||||
|
MustacheTag,
|
||||||
|
PendingBlock,
|
||||||
|
RawMustacheTag,
|
||||||
|
Slot,
|
||||||
|
Text,
|
||||||
|
ThenBlock
|
||||||
|
};
|
||||||
|
|
||||||
|
export default nodes;
|
||||||
@ -0,0 +1,121 @@
|
|||||||
|
import { DomGenerator } from '../../dom/index';
|
||||||
|
import Block from '../../dom/Block';
|
||||||
|
import State from '../../dom/State';
|
||||||
|
import { trimStart, trimEnd } from '../../../utils/trim';
|
||||||
|
|
||||||
|
export default class Node {
|
||||||
|
metadata: {
|
||||||
|
dependencies: string[];
|
||||||
|
};
|
||||||
|
|
||||||
|
type: string;
|
||||||
|
parent: Node;
|
||||||
|
generator: DomGenerator;
|
||||||
|
|
||||||
|
canUseInnerHTML: boolean;
|
||||||
|
var: string;
|
||||||
|
|
||||||
|
cannotUseInnerHTML() {
|
||||||
|
if (this.canUseInnerHTML !== false) {
|
||||||
|
this.canUseInnerHTML = false;
|
||||||
|
if (this.parent) {
|
||||||
|
if (!this.parent.cannotUseInnerHTML) console.log(this.parent.type, this.type);
|
||||||
|
this.parent.cannotUseInnerHTML();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
init(
|
||||||
|
block: Block,
|
||||||
|
state: State,
|
||||||
|
inEachBlock: boolean,
|
||||||
|
elementStack: Node[],
|
||||||
|
componentStack: Node[],
|
||||||
|
stripWhitespace: boolean,
|
||||||
|
nextSibling: Node
|
||||||
|
) {
|
||||||
|
// implemented by subclasses
|
||||||
|
}
|
||||||
|
|
||||||
|
initChildren(
|
||||||
|
block: Block,
|
||||||
|
state: State,
|
||||||
|
inEachBlock: boolean,
|
||||||
|
elementStack: Node[],
|
||||||
|
componentStack: Node[],
|
||||||
|
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
|
||||||
|
// <:Window/>. lil hacky but it works
|
||||||
|
if (child.type === 'Element' && child.name === ':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.generator.hydratable;
|
||||||
|
|
||||||
|
child.init(block, state, inEachBlock, elementStack, componentStack, 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)) : !inEachBlock
|
||||||
|
);
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
isChildOfComponent() {
|
||||||
|
return this.parent ?
|
||||||
|
this.parent.type === 'Component' || this.parent.isChildOfComponent() :
|
||||||
|
false;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
import { DomGenerator } from '../generators/dom/index';
|
||||||
|
import { Node } from '../interfaces';
|
||||||
|
|
||||||
|
export default function createDebuggingComment(node: Node, generator: DomGenerator) {
|
||||||
|
const { locate, source } = generator;
|
||||||
|
|
||||||
|
let c = node.start;
|
||||||
|
if (node.type === 'ElseBlock') {
|
||||||
|
while (source[c] !== '{') c -= 1;
|
||||||
|
c -= 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
let d = node.expression ? node.expression.end : c;
|
||||||
|
while (source[d] !== '}') d += 1;
|
||||||
|
d += 2;
|
||||||
|
|
||||||
|
const start = locate(c);
|
||||||
|
const loc = `(${start.line + 1}:${start.column})`;
|
||||||
|
|
||||||
|
return `${loc} ${source.slice(c, d)}`.replace(/\n/g, ' ');
|
||||||
|
}
|
||||||
Loading…
Reference in new issue