mirror of https://github.com/sveltejs/svelte
So far this is only used in certain conditions, as the full feature set is not implemented yet.pull/3540/head
Arpad Borsos
6 years ago
parent
5d8ca9f07d
commit
4fea0d4383
@ -0,0 +1,189 @@
|
||||
import { destroy_each } from './dom';
|
||||
// import {
|
||||
// transition_in,
|
||||
// transition_out,
|
||||
// group_outros,
|
||||
// check_outros,
|
||||
// } from './transitions';
|
||||
|
||||
type ChangedContext<Context> = {
|
||||
[K in keyof Context]: boolean;
|
||||
};
|
||||
|
||||
interface Fragment<Context> {
|
||||
/** create */
|
||||
c: () => void;
|
||||
|
||||
/** claim */
|
||||
l?: (nodes: Array<Node>) => void;
|
||||
|
||||
/** hydrate */
|
||||
h?: () => void;
|
||||
|
||||
/** mount */
|
||||
m: (target: Node, anchor?: Node | null) => void;
|
||||
|
||||
/** update */
|
||||
p?: (changed: ChangedContext<Context>, context: Context) => void;
|
||||
|
||||
/** intro */
|
||||
i?: () => void;
|
||||
|
||||
/** outro */
|
||||
o?: () => void;
|
||||
|
||||
/** destroy */
|
||||
d: (detaching: boolean) => void;
|
||||
}
|
||||
|
||||
type GetEachValue = (context: unknown) => Array<unknown>;
|
||||
type CreateEachBlock = (context: unknown) => Fragment<unknown>;
|
||||
type CreateElseBlock = CreateEachBlock;
|
||||
type CreateChildContext = (
|
||||
context: unknown,
|
||||
each_value: unknown,
|
||||
i: number
|
||||
) => unknown;
|
||||
|
||||
export class EachBlock {
|
||||
/** each_blocks */
|
||||
private b: Array<Fragment<unknown>>;
|
||||
/** else_block */
|
||||
private eb: Fragment<unknown> | null = null;
|
||||
/** get_each_value */
|
||||
private ge: GetEachValue;
|
||||
/** create_each_block */
|
||||
private e: CreateEachBlock;
|
||||
/** create_else_block */
|
||||
private ce?: CreateElseBlock;
|
||||
/** get_each_context */
|
||||
private g: CreateChildContext;
|
||||
|
||||
constructor(
|
||||
context: unknown,
|
||||
get_each_value: GetEachValue,
|
||||
create_each_block: CreateEachBlock,
|
||||
get_each_context: CreateChildContext,
|
||||
create_else_block: CreateElseBlock
|
||||
) {
|
||||
this.ge = get_each_value;
|
||||
this.e = create_each_block;
|
||||
this.g = get_each_context;
|
||||
this.ce = create_else_block;
|
||||
|
||||
const each_value = get_each_value(context);
|
||||
this.b = [];
|
||||
for (let i = 0; i < each_value.length; i += 1) {
|
||||
this.b[i] = create_each_block(get_each_context(context, each_value, i));
|
||||
}
|
||||
|
||||
if (create_else_block && !each_value.length) {
|
||||
this.eb = create_else_block(context);
|
||||
// TODO: Why exactly is this here and not in the `create` hook below?
|
||||
this.eb.c();
|
||||
}
|
||||
}
|
||||
|
||||
/** create */
|
||||
c() {
|
||||
for (const block of this.b) {
|
||||
block.c();
|
||||
}
|
||||
// if (this.eb) {
|
||||
// this.eb.c();
|
||||
// }
|
||||
}
|
||||
|
||||
/** claim */
|
||||
l(nodes: Array<Node>) {
|
||||
for (const block of this.b) {
|
||||
if (block.l) {
|
||||
block.l(nodes);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** mount */
|
||||
m(target: Node, anchor?: Node | null) {
|
||||
for (const block of this.b) {
|
||||
block.m(target, anchor);
|
||||
}
|
||||
if (this.eb) {
|
||||
this.eb.m(target, anchor);
|
||||
}
|
||||
}
|
||||
|
||||
/** update */
|
||||
p(changed: unknown, context: unknown, target: Node, anchor?: Node | null) {
|
||||
const each_value = this.ge(context);
|
||||
const each_blocks = this.b;
|
||||
|
||||
for (let i = 0; i < each_value.length; i += 1) {
|
||||
const child_ctx = this.g(context, each_value, i);
|
||||
|
||||
let block = each_blocks[i];
|
||||
if (block) {
|
||||
if (block.p) {
|
||||
block.p(changed, child_ctx);
|
||||
}
|
||||
// transition_in(block, 1);
|
||||
} else {
|
||||
block = each_blocks[i] = this.e(child_ctx);
|
||||
block.c();
|
||||
// transition_in(block, 1);
|
||||
block.m(target, anchor);
|
||||
}
|
||||
}
|
||||
|
||||
// group_outros();
|
||||
for (let i = each_value.length; i < each_blocks.length; i += 1) {
|
||||
// TODO: make transitions work correctly…
|
||||
each_blocks[i].d(true);
|
||||
// transition_out(each_blocks[i], 1, 1, () => {
|
||||
// each_blocks[i] = null;
|
||||
// });
|
||||
}
|
||||
// check_outros();
|
||||
each_blocks.length = each_value.length;
|
||||
|
||||
if (this.ce) {
|
||||
let else_block = this.eb;
|
||||
if (!each_value.length && else_block) {
|
||||
if (else_block.p) {
|
||||
else_block.p(changed, context);
|
||||
}
|
||||
} else if (!each_value.length) {
|
||||
this.eb = else_block = this.ce(context);
|
||||
else_block.c();
|
||||
else_block.m(target, anchor);
|
||||
} else if (this.eb) {
|
||||
this.eb.d(true);
|
||||
this.eb = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** intro */
|
||||
i() {
|
||||
// for (const block of this.b) {
|
||||
// transition_in(block);
|
||||
// }
|
||||
}
|
||||
|
||||
/** outro */
|
||||
o() {
|
||||
// const blocks = this.b.filter(Boolean);
|
||||
// for (const block of blocks) {
|
||||
// transition_out(block, 0, 0, undefined);
|
||||
// }
|
||||
}
|
||||
|
||||
/** destroy */
|
||||
d(detaching: boolean) {
|
||||
destroy_each(this.b, detaching);
|
||||
|
||||
if (this.eb) {
|
||||
this.eb.d(detaching);
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue