mirror of https://github.com/sveltejs/svelte
Rich Harris
7 years ago
parent
dfa3d7fa74
commit
69804ecaf8
@ -1,27 +1,3 @@
|
|||||||
import Node from './shared/Node';
|
|
||||||
import Tag from './shared/Tag';
|
import Tag from './shared/Tag';
|
||||||
import Block from '../render-dom/Block';
|
|
||||||
|
|
||||||
export default class MustacheTag extends Tag {
|
export default class MustacheTag extends Tag {}
|
||||||
build(
|
|
||||||
block: Block,
|
|
||||||
parentNode: string,
|
|
||||||
parentNodes: string
|
|
||||||
) {
|
|
||||||
const { init } = this.renameThisMethod(
|
|
||||||
block,
|
|
||||||
value => `@setData(${this.var}, ${value});`
|
|
||||||
);
|
|
||||||
|
|
||||||
block.addElement(
|
|
||||||
this.var,
|
|
||||||
`@createText(${init})`,
|
|
||||||
parentNodes && `@claimText(${parentNodes}, ${init})`,
|
|
||||||
parentNode
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
remount(name: string) {
|
|
||||||
return `@append(${name}._slotted.default, ${this.var});`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,96 +1,3 @@
|
|||||||
import deindent from '../../utils/deindent';
|
|
||||||
import Node from './shared/Node';
|
|
||||||
import Tag from './shared/Tag';
|
import Tag from './shared/Tag';
|
||||||
import Block from '../render-dom/Block';
|
|
||||||
|
|
||||||
export default class RawMustacheTag extends Tag {
|
export default class RawMustacheTag extends Tag {}
|
||||||
build(
|
|
||||||
block: Block,
|
|
||||||
parentNode: string,
|
|
||||||
parentNodes: string
|
|
||||||
) {
|
|
||||||
const name = this.var;
|
|
||||||
|
|
||||||
const needsAnchorBefore = this.prev ? this.prev.type !== 'Element' : !parentNode;
|
|
||||||
const needsAnchorAfter = this.next ? this.next.type !== 'Element' : !parentNode;
|
|
||||||
|
|
||||||
const anchorBefore = needsAnchorBefore
|
|
||||||
? block.getUniqueName(`${name}_before`)
|
|
||||||
: (this.prev && this.prev.var) || 'null';
|
|
||||||
|
|
||||||
const anchorAfter = needsAnchorAfter
|
|
||||||
? block.getUniqueName(`${name}_after`)
|
|
||||||
: (this.next && this.next.var) || 'null';
|
|
||||||
|
|
||||||
let detach: string;
|
|
||||||
let insert: (content: string) => string;
|
|
||||||
let useInnerHTML = false;
|
|
||||||
|
|
||||||
if (anchorBefore === 'null' && anchorAfter === 'null') {
|
|
||||||
useInnerHTML = true;
|
|
||||||
detach = `${parentNode}.innerHTML = '';`;
|
|
||||||
insert = content => `${parentNode}.innerHTML = ${content};`;
|
|
||||||
} else if (anchorBefore === 'null') {
|
|
||||||
detach = `@detachBefore(${anchorAfter});`;
|
|
||||||
insert = content => `${anchorAfter}.insertAdjacentHTML("beforebegin", ${content});`;
|
|
||||||
} else if (anchorAfter === 'null') {
|
|
||||||
detach = `@detachAfter(${anchorBefore});`;
|
|
||||||
insert = content => `${anchorBefore}.insertAdjacentHTML("afterend", ${content});`;
|
|
||||||
} else {
|
|
||||||
detach = `@detachBetween(${anchorBefore}, ${anchorAfter});`;
|
|
||||||
insert = content => `${anchorBefore}.insertAdjacentHTML("afterend", ${content});`;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { init } = this.renameThisMethod(
|
|
||||||
block,
|
|
||||||
content => deindent`
|
|
||||||
${!useInnerHTML && detach}
|
|
||||||
${insert(content)}
|
|
||||||
`
|
|
||||||
);
|
|
||||||
|
|
||||||
// we would have used comments here, but the `insertAdjacentHTML` api only
|
|
||||||
// exists for `Element`s.
|
|
||||||
if (needsAnchorBefore) {
|
|
||||||
block.addElement(
|
|
||||||
anchorBefore,
|
|
||||||
`@createElement('noscript')`,
|
|
||||||
parentNodes && `@createElement('noscript')`,
|
|
||||||
parentNode,
|
|
||||||
true
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function addAnchorAfter() {
|
|
||||||
block.addElement(
|
|
||||||
anchorAfter,
|
|
||||||
`@createElement('noscript')`,
|
|
||||||
parentNodes && `@createElement('noscript')`,
|
|
||||||
parentNode
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (needsAnchorAfter && anchorBefore === 'null') {
|
|
||||||
// anchorAfter needs to be in the DOM before we
|
|
||||||
// insert the HTML...
|
|
||||||
addAnchorAfter();
|
|
||||||
}
|
|
||||||
|
|
||||||
block.builders.mount.addLine(insert(init));
|
|
||||||
|
|
||||||
if (!parentNode) {
|
|
||||||
block.builders.destroy.addConditional('detach', needsAnchorBefore
|
|
||||||
? `${detach}\n@detachNode(${anchorBefore});`
|
|
||||||
: detach);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (needsAnchorAfter && anchorBefore !== 'null') {
|
|
||||||
// ...otherwise it should go afterwards
|
|
||||||
addAnchorAfter();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
remount(name: string) {
|
|
||||||
return `@append(${name}._slotted.default, ${this.var});`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -0,0 +1,56 @@
|
|||||||
|
import Binding from '../../../../nodes/Binding';
|
||||||
|
import Element from '../../../../nodes/Element';
|
||||||
|
import ElementWrapper from '..';
|
||||||
|
import Block from '../../../Block';
|
||||||
|
import Renderer from '../../../Renderer';
|
||||||
|
import flattenReference from '../../../../../utils/flattenReference';
|
||||||
|
import { Node } from '../../../../../interfaces';
|
||||||
|
import BindingWrapper from './Binding';
|
||||||
|
|
||||||
|
export default class SelectBinding extends BindingWrapper {
|
||||||
|
element: ElementWrapper;
|
||||||
|
node: Binding;
|
||||||
|
|
||||||
|
static filter(
|
||||||
|
node: Element,
|
||||||
|
binding_lookup: Record<string, Binding>,
|
||||||
|
type: string
|
||||||
|
) {
|
||||||
|
return node.name === 'select' && binding_lookup.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
element: ElementWrapper,
|
||||||
|
binding_lookup: Record<string, Binding>
|
||||||
|
) {
|
||||||
|
super(element, binding_lookup.value);
|
||||||
|
this.events = ['change'];
|
||||||
|
|
||||||
|
element.renderer.hasComplexBindings = true;
|
||||||
|
|
||||||
|
// TODO does this also apply to e.g. `<input type='checkbox' bind:group='foo'>`?
|
||||||
|
const dependencies = this.binding.value.dependencies;
|
||||||
|
this.element.selectBindingDependencies = dependencies;
|
||||||
|
dependencies.forEach((prop: string) => {
|
||||||
|
element.renderer.component.indirectDependencies.set(prop, new Set());
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
fromDom() {
|
||||||
|
return this.element.node.getStaticAttributeValue('multiple') === true ?
|
||||||
|
`@selectMultipleValue(${this.element.var})` :
|
||||||
|
`@selectValue(${this.element.var})`;
|
||||||
|
}
|
||||||
|
|
||||||
|
toDom() {
|
||||||
|
return this.element.getStaticAttributeValue('multiple') === true ?
|
||||||
|
`@selectOptions(${this.element.var}, ${this.binding.value.snippet});` :
|
||||||
|
`@selectOption(${this.element.var}, ${this.binding.value.snippet});`;
|
||||||
|
}
|
||||||
|
|
||||||
|
render(block: Block) {
|
||||||
|
|
||||||
|
|
||||||
|
super.render(block);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,101 @@
|
|||||||
|
import Renderer from '../Renderer';
|
||||||
|
import Block from '../Block';
|
||||||
|
import Node from '../../nodes/shared/Node';
|
||||||
|
import Tag from './shared/Tag';
|
||||||
|
import Wrapper from './shared/wrapper';
|
||||||
|
import deindent from '../../../utils/deindent';
|
||||||
|
|
||||||
|
export default class RawMustacheTagWrapper extends Tag {
|
||||||
|
constructor(
|
||||||
|
renderer: Renderer,
|
||||||
|
block: Block,
|
||||||
|
parent: Wrapper,
|
||||||
|
node: Node
|
||||||
|
) {
|
||||||
|
super(renderer, block, parent, node);
|
||||||
|
this.cannotUseInnerHTML();
|
||||||
|
}
|
||||||
|
|
||||||
|
render(block: Block, parentNode: string, parentNodes: string) {
|
||||||
|
const name = this.var;
|
||||||
|
|
||||||
|
// TODO use isDomNode instead of type === 'Element'?
|
||||||
|
const needsAnchorBefore = this.prev ? this.prev.node.type !== 'Element' : !parentNode;
|
||||||
|
const needsAnchorAfter = this.next ? this.next.node.type !== 'Element' : !parentNode;
|
||||||
|
|
||||||
|
const anchorBefore = needsAnchorBefore
|
||||||
|
? block.getUniqueName(`${name}_before`)
|
||||||
|
: (this.prev && this.prev.var) || 'null';
|
||||||
|
|
||||||
|
const anchorAfter = needsAnchorAfter
|
||||||
|
? block.getUniqueName(`${name}_after`)
|
||||||
|
: (this.next && this.next.var) || 'null';
|
||||||
|
|
||||||
|
let detach: string;
|
||||||
|
let insert: (content: string) => string;
|
||||||
|
let useInnerHTML = false;
|
||||||
|
|
||||||
|
if (anchorBefore === 'null' && anchorAfter === 'null') {
|
||||||
|
useInnerHTML = true;
|
||||||
|
detach = `${parentNode}.innerHTML = '';`;
|
||||||
|
insert = content => `${parentNode}.innerHTML = ${content};`;
|
||||||
|
} else if (anchorBefore === 'null') {
|
||||||
|
detach = `@detachBefore(${anchorAfter});`;
|
||||||
|
insert = content => `${anchorAfter}.insertAdjacentHTML("beforebegin", ${content});`;
|
||||||
|
} else if (anchorAfter === 'null') {
|
||||||
|
detach = `@detachAfter(${anchorBefore});`;
|
||||||
|
insert = content => `${anchorBefore}.insertAdjacentHTML("afterend", ${content});`;
|
||||||
|
} else {
|
||||||
|
detach = `@detachBetween(${anchorBefore}, ${anchorAfter});`;
|
||||||
|
insert = content => `${anchorBefore}.insertAdjacentHTML("afterend", ${content});`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { init } = this.renameThisMethod(
|
||||||
|
block,
|
||||||
|
content => deindent`
|
||||||
|
${!useInnerHTML && detach}
|
||||||
|
${insert(content)}
|
||||||
|
`
|
||||||
|
);
|
||||||
|
|
||||||
|
// we would have used comments here, but the `insertAdjacentHTML` api only
|
||||||
|
// exists for `Element`s.
|
||||||
|
if (needsAnchorBefore) {
|
||||||
|
block.addElement(
|
||||||
|
anchorBefore,
|
||||||
|
`@createElement('noscript')`,
|
||||||
|
parentNodes && `@createElement('noscript')`,
|
||||||
|
parentNode,
|
||||||
|
true
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function addAnchorAfter() {
|
||||||
|
block.addElement(
|
||||||
|
anchorAfter,
|
||||||
|
`@createElement('noscript')`,
|
||||||
|
parentNodes && `@createElement('noscript')`,
|
||||||
|
parentNode
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (needsAnchorAfter && anchorBefore === 'null') {
|
||||||
|
// anchorAfter needs to be in the DOM before we
|
||||||
|
// insert the HTML...
|
||||||
|
addAnchorAfter();
|
||||||
|
}
|
||||||
|
|
||||||
|
block.builders.mount.addLine(insert(init));
|
||||||
|
|
||||||
|
if (!parentNode) {
|
||||||
|
block.builders.destroy.addConditional('detach', needsAnchorBefore
|
||||||
|
? `${detach}\n@detachNode(${anchorBefore});`
|
||||||
|
: detach);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (needsAnchorAfter && anchorBefore !== 'null') {
|
||||||
|
// ...otherwise it should go afterwards
|
||||||
|
addAnchorAfter();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in new issue