From 58cbe7bbde377cbe34a68b98e21f62492c67f234 Mon Sep 17 00:00:00 2001 From: Arpad Borsos Date: Tue, 10 Sep 2019 17:44:21 +0200 Subject: [PATCH] Factor out each-block code into helper functions --- package-lock.json | 2 +- src/compiler/compile/render_dom/Block.ts | 2 +- .../compile/render_dom/wrappers/EachBlock.ts | 204 ++++++------------ src/runtime/internal/dom.ts | 6 - src/runtime/internal/each_block.ts | 126 +++++++++++ src/runtime/internal/index.ts | 1 + src/runtime/internal/keyed_each.ts | 15 +- .../debug-foo-bar-baz-things/expected.js | 44 ++-- test/js/samples/debug-foo/expected.js | 44 ++-- .../samples/deconflict-builtins/expected.js | 44 ++-- .../each-block-array-literal/expected.js | 40 ++-- .../each-block-changed-check/expected.js | 44 ++-- .../each-block-keyed-animated/expected.js | 49 +++-- test/js/samples/each-block-keyed/expected.js | 45 ++-- 14 files changed, 375 insertions(+), 291 deletions(-) create mode 100644 src/runtime/internal/each_block.ts diff --git a/package-lock.json b/package-lock.json index bd36702370..e09c459f4a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "svelte", - "version": "3.11.0", + "version": "3.12.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/src/compiler/compile/render_dom/Block.ts b/src/compiler/compile/render_dom/Block.ts index 4f6a51e120..c24dc6e34f 100644 --- a/src/compiler/compile/render_dom/Block.ts +++ b/src/compiler/compile/render_dom/Block.ts @@ -422,7 +422,7 @@ export default class Block { return deindent` ${this.comment && `// ${escape(this.comment, { only_escape_at_symbol: true })}`} - function ${this.name}(${this.key ? `${local_key}, ` : ''}ctx) { + function ${this.name}(ctx${this.key ? `, ${local_key}` : ''}) { ${this.get_contents(local_key)} } `; diff --git a/src/compiler/compile/render_dom/wrappers/EachBlock.ts b/src/compiler/compile/render_dom/wrappers/EachBlock.ts index fe56ac0fa4..56f2559a38 100644 --- a/src/compiler/compile/render_dom/wrappers/EachBlock.ts +++ b/src/compiler/compile/render_dom/wrappers/EachBlock.ts @@ -120,7 +120,7 @@ export default class EachBlockWrapper extends Wrapper { // optimisation for array literal fixed_length, data_length: fixed_length === null ? `${each_block_value}.[✂${c}-${c+4}✂]` : fixed_length, - view_length: fixed_length === null ? `${iterations}.[✂${c}-${c+4}✂]` : fixed_length + view_length: fixed_length === null ? `${iterations}.b.[✂${c}-${c+4}✂]` : fixed_length }; const store = @@ -175,7 +175,6 @@ export default class EachBlockWrapper extends Wrapper { if (this.fragment.nodes.length === 0) return; const { renderer } = this; - const { component } = renderer; const needs_anchor = this.next ? !this.next.is_dom_node() : @@ -188,8 +187,6 @@ export default class EachBlockWrapper extends Wrapper { const snippet = this.node.expression.render(block); - block.builders.init.add_line(`let ${this.vars.each_block_value} = ${snippet};`); - renderer.blocks.push(deindent` function ${this.vars.get_each_context}(ctx, list, i) { const child_ctx = @_Object.create(ctx); @@ -205,13 +202,25 @@ export default class EachBlockWrapper extends Wrapper { : (this.next && this.next.var) || 'null'; const update_mount_node = this.get_update_mount_node(update_anchor_node); + block.builders.init.add_line(`let ${this.vars.each_block_value} = ${snippet};`); + + const { iterations } = this.vars + block.builders.init.add_block(deindent` + let ${iterations} = @init_each_block( + ctx, + ${this.vars.get_each_context}, + ctx => ${snippet}, + ${this.node.key ? `ctx => ${this.node.key.render()}` : 'null'}, + ${this.vars.create_each_block}, + ${this.else ? this.else.block.name : 'null'} + ); + `) + const args = { block, parent_node, parent_nodes, snippet, - initial_anchor_node, - initial_mount_node, update_anchor_node, update_mount_node }; @@ -222,10 +231,24 @@ export default class EachBlockWrapper extends Wrapper { this.render_unkeyed(args); } + block.builders.create.add_block(deindent` + @create_each_blocks(${iterations}); + `); + + if (parent_nodes && this.renderer.options.hydratable) { + block.builders.claim.add_block(deindent` + @claim_each_blocks(${iterations}, ${parent_nodes}); + `); + } + + block.builders.mount.add_block(deindent` + @mount_each_blocks(${iterations}, ${initial_mount_node}, ${initial_anchor_node}); + `); + if (this.block.has_intro_method || this.block.has_outro_method) { block.builders.intro.add_block(deindent` for (let #i = 0; #i < ${this.vars.data_length}; #i += 1) { - @transition_in(${this.vars.iterations}[#i]); + @transition_in(${iterations}.b[#i]); } `); } @@ -240,23 +263,7 @@ export default class EachBlockWrapper extends Wrapper { } if (this.else) { - const each_block_else = component.get_unique_name(`${this.var}_else`); - - block.builders.init.add_line(`let ${each_block_else} = null;`); - - // TODO neaten this up... will end up with an empty line in the block - block.builders.init.add_block(deindent` - if (!${this.vars.data_length}) { - ${each_block_else} = ${this.else.block.name}(ctx); - ${each_block_else}.c(); - } - `); - - block.builders.mount.add_block(deindent` - if (${each_block_else}) { - ${each_block_else}.m(${initial_mount_node}, ${initial_anchor_node}); - } - `); + const each_block_else = `${iterations}.e`; if (this.else.block.has_update_method) { block.builders.update.add_block(deindent` @@ -285,10 +292,6 @@ export default class EachBlockWrapper extends Wrapper { } `); } - - block.builders.destroy.add_block(deindent` - if (${each_block_else}) ${each_block_else}.d(${parent_node ? '' : 'detaching'}); - `); } this.fragment.render(this.block, null, 'nodes'); @@ -303,8 +306,6 @@ export default class EachBlockWrapper extends Wrapper { parent_node, parent_nodes, snippet, - initial_anchor_node, - initial_mount_node, update_anchor_node, update_mount_node }: { @@ -312,24 +313,14 @@ export default class EachBlockWrapper extends Wrapper { parent_node: string; parent_nodes: string; snippet: string; - initial_anchor_node: string; - initial_mount_node: string; update_anchor_node: string; update_mount_node: string; }) { const { - create_each_block, - length, iterations, view_length } = this.vars; - const get_key = block.get_unique_name('get_key'); - const lookup = block.get_unique_name(`${this.var}_lookup`); - - block.add_variable(iterations, '[]'); - block.add_variable(lookup, `new @_Map()`); - if (this.fragment.nodes[0].is_dom_node()) { this.block.first = this.fragment.nodes[0].var; } else { @@ -342,38 +333,6 @@ export default class EachBlockWrapper extends Wrapper { ); } - block.builders.init.add_block(deindent` - const ${get_key} = ctx => ${ - // @ts-ignore todo: probably error - this.node.key.render()}; - - for (let #i = 0; #i < ${this.vars.each_block_value}.${length}; #i += 1) { - let child_ctx = ${this.vars.get_each_context}(ctx, ${this.vars.each_block_value}, #i); - let key = ${get_key}(child_ctx); - ${lookup}.set(key, ${iterations}[#i] = ${create_each_block}(key, child_ctx)); - } - `); - - block.builders.create.add_block(deindent` - for (let #i = 0; #i < ${view_length}; #i += 1) { - ${iterations}[#i].c(); - } - `); - - if (parent_nodes && this.renderer.options.hydratable) { - block.builders.claim.add_block(deindent` - for (let #i = 0; #i < ${view_length}; #i += 1) { - ${iterations}[#i].l(${parent_nodes}); - } - `); - } - - block.builders.mount.add_block(deindent` - for (let #i = 0; #i < ${view_length}; #i += 1) { - ${iterations}[#i].m(${initial_mount_node}, ${initial_anchor_node}); - } - `); - const dynamic = this.block.has_update_method; const destroy = this.node.has_animation @@ -388,41 +347,41 @@ export default class EachBlockWrapper extends Wrapper { const ${this.vars.each_block_value} = ${snippet}; ${this.block.has_outros && `@group_outros();`} - ${this.node.has_animation && `for (let #i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].r();`} - ${iterations} = @update_keyed_each(${iterations}, changed, ${get_key}, ${dynamic ? '1' : '0'}, ctx, ${this.vars.each_block_value}, ${lookup}, ${update_mount_node}, ${destroy}, ${create_each_block}, ${update_anchor_node}, ${this.vars.get_each_context}); - ${this.node.has_animation && `for (let #i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].a();`} + ${this.node.has_animation && `for (let #i = 0; #i < ${view_length}; #i += 1) ${iterations}.b[#i].r();`} + @update_keyed_each( + ${iterations}, + changed, + ${dynamic ? '1' : '0'}, + ctx, + ${update_mount_node}, + ${destroy}, + ${update_anchor_node} + ); + ${this.node.has_animation && `for (let #i = 0; #i < ${view_length}; #i += 1) ${iterations}.b[#i].a();`} ${this.block.has_outros && `@check_outros();`} `); if (this.block.has_outros) { block.builders.outro.add_block(deindent` for (let #i = 0; #i < ${view_length}; #i += 1) { - @transition_out(${iterations}[#i]); + @transition_out(${iterations}.b[#i]); } `); } block.builders.destroy.add_block(deindent` - for (let #i = 0; #i < ${view_length}; #i += 1) { - ${iterations}[#i].d(${parent_node ? '' : 'detaching'}); - } + @destroy_each_blocks(${iterations}, ${parent_node ? '' : 'detaching'}); `); } render_unkeyed({ block, - parent_nodes, snippet, - initial_anchor_node, - initial_mount_node, update_anchor_node, update_mount_node }: { block: Block; - parent_nodes: string; snippet: string; - initial_anchor_node: string; - initial_mount_node: string; update_anchor_node: string; update_mount_node: string; }) { @@ -431,38 +390,9 @@ export default class EachBlockWrapper extends Wrapper { length, iterations, fixed_length, - data_length, view_length } = this.vars; - block.builders.init.add_block(deindent` - let ${iterations} = []; - - for (let #i = 0; #i < ${data_length}; #i += 1) { - ${iterations}[#i] = ${create_each_block}(${this.vars.get_each_context}(ctx, ${this.vars.each_block_value}, #i)); - } - `); - - block.builders.create.add_block(deindent` - for (let #i = 0; #i < ${view_length}; #i += 1) { - ${iterations}[#i].c(); - } - `); - - if (parent_nodes && this.renderer.options.hydratable) { - block.builders.claim.add_block(deindent` - for (let #i = 0; #i < ${view_length}; #i += 1) { - ${iterations}[#i].l(${parent_nodes}); - } - `); - } - - block.builders.mount.add_block(deindent` - for (let #i = 0; #i < ${view_length}; #i += 1) { - ${iterations}[#i].m(${initial_mount_node}, ${initial_anchor_node}); - } - `); - const all_dependencies = new Set(this.block.dependencies); const { dependencies } = this.node.expression; dependencies.forEach((dependency: string) => { @@ -478,32 +408,32 @@ export default class EachBlockWrapper extends Wrapper { if (condition !== '') { const for_loop_body = this.block.has_update_method ? deindent` - if (${iterations}[#i]) { - ${iterations}[#i].p(changed, child_ctx); - ${has_transitions && `@transition_in(${this.vars.iterations}[#i], 1);`} + if (${iterations}.b[#i]) { + ${iterations}.b[#i].p(changed, child_ctx); + ${has_transitions && `@transition_in(${this.vars.iterations}.b[#i], 1);`} } else { - ${iterations}[#i] = ${create_each_block}(child_ctx); - ${iterations}[#i].c(); - ${has_transitions && `@transition_in(${this.vars.iterations}[#i], 1);`} - ${iterations}[#i].m(${update_mount_node}, ${update_anchor_node}); + ${iterations}.b[#i] = ${create_each_block}(child_ctx); + ${iterations}.b[#i].c(); + ${has_transitions && `@transition_in(${this.vars.iterations}.b[#i], 1);`} + ${iterations}.b[#i].m(${update_mount_node}, ${update_anchor_node}); } ` : has_transitions ? deindent` - if (${iterations}[#i]) { - @transition_in(${this.vars.iterations}[#i], 1); + if (${iterations}.b[#i]) { + @transition_in(${this.vars.iterations}.b[#i], 1); } else { - ${iterations}[#i] = ${create_each_block}(child_ctx); - ${iterations}[#i].c(); - @transition_in(${this.vars.iterations}[#i], 1); - ${iterations}[#i].m(${update_mount_node}, ${update_anchor_node}); + ${iterations}.b[#i] = ${create_each_block}(child_ctx); + ${iterations}.b[#i].c(); + @transition_in(${this.vars.iterations}.b[#i], 1); + ${iterations}.b[#i].m(${update_mount_node}, ${update_anchor_node}); } ` : deindent` - if (!${iterations}[#i]) { - ${iterations}[#i] = ${create_each_block}(child_ctx); - ${iterations}[#i].c(); - ${iterations}[#i].m(${update_mount_node}, ${update_anchor_node}); + if (!${iterations}.b[#i]) { + ${iterations}.b[#i] = ${create_each_block}(child_ctx); + ${iterations}.b[#i].c(); + ${iterations}.b[#i].m(${update_mount_node}, ${update_anchor_node}); } `; @@ -515,8 +445,8 @@ export default class EachBlockWrapper extends Wrapper { const out = block.get_unique_name('out'); block.builders.init.add_block(deindent` - const ${out} = i => @transition_out(${iterations}[i], 1, 1, () => { - ${iterations}[i] = null; + const ${out} = i => @transition_out(${iterations}.b[i], 1, 1, () => { + ${iterations}.b[i] = null; }); `); remove_old_blocks = deindent` @@ -529,7 +459,7 @@ export default class EachBlockWrapper extends Wrapper { } else { remove_old_blocks = deindent` for (${this.block.has_update_method ? `` : `#i = ${this.vars.each_block_value}.${length}`}; #i < ${this.block.has_update_method ? view_length : '#old_length'}; #i += 1) { - ${iterations}[#i].d(1); + ${iterations}.b[#i].d(1); } ${!fixed_length && `${view_length} = ${this.vars.each_block_value}.${length};`} `; @@ -560,13 +490,13 @@ export default class EachBlockWrapper extends Wrapper { if (this.block.has_outros) { block.builders.outro.add_block(deindent` - ${iterations} = ${iterations}.filter(@_Boolean); + ${iterations}.b = ${iterations}.b.filter(@_Boolean); for (let #i = 0; #i < ${view_length}; #i += 1) { - @transition_out(${iterations}[#i]); + @transition_out(${iterations}.b[#i]); } `); } - block.builders.destroy.add_block(`@destroy_each(${iterations}, detaching);`); + block.builders.destroy.add_block(`@destroy_each_blocks(${iterations}, detaching);`); } } diff --git a/src/runtime/internal/dom.ts b/src/runtime/internal/dom.ts index 58a0d0729a..699ff400cd 100644 --- a/src/runtime/internal/dom.ts +++ b/src/runtime/internal/dom.ts @@ -10,12 +10,6 @@ export function detach(node: Node) { node.parentNode.removeChild(node); } -export function destroy_each(iterations, detaching) { - for (let i = 0; i < iterations.length; i += 1) { - if (iterations[i]) iterations[i].d(detaching); - } -} - export function element(name: K) { return document.createElement(name); } diff --git a/src/runtime/internal/each_block.ts b/src/runtime/internal/each_block.ts new file mode 100644 index 0000000000..06166a083e --- /dev/null +++ b/src/runtime/internal/each_block.ts @@ -0,0 +1,126 @@ +interface Fragment { + key: string; + + /** create */ + c: () => void; + + /** claim */ + l?: (nodes: Array) => void; + + /** hydrate */ + h?: () => void; + + /** mount */ + m: (target: Node, anchor?: Node | null) => void; + + /** update */ + p?: (changed: unknown, context: unknown) => void; + + /** intro */ + i?: () => void; + + /** outro */ + o?: () => void; + + /** destroy */ + d: (detaching: boolean) => void; +} + +export interface EachBlock { + /** each_blocks */ + b: Array; + /** each_lookup */ + l: Map; + /** else_block */ + e: Fragment | null; + + /** get_each_context */ + gc: (context: unknown, each_value: unknown, i: number) => unknown; + /** get_each_value */ + gv: (context: unknown) => Array; + /** get_key */ + gk?: (child_context: unknown) => string; + /** create_each_block */ + cb: (context: unknown, key?: unknown) => Fragment; + /** create_else_block */ + ce?: (context: unknown) => Fragment; +} + +export function init_each_block( + context: unknown, + get_each_context: EachBlock['gc'], + get_each_value: EachBlock['gv'], + get_key: EachBlock['gk'], + create_each_block: EachBlock['cb'], + create_else_block: EachBlock['ce'] +): EachBlock { + const each_value = get_each_value(context); + const each_blocks = []; + const each_lookup = new Map(); + + for (let i = 0; i < each_value.length; i += 1) { + let child_ctx = get_each_context(context, each_value, i); + let key = get_key && get_key(child_ctx); + each_lookup.set(key, (each_blocks[i] = create_each_block(child_ctx, key))); + } + + let else_block = null; + if (create_else_block && !each_value.length) { + else_block = create_else_block(context); + // TODO: Why exactly is this here and not in the `create` hook? + else_block.c(); + } + + return { + b: each_blocks, + l: each_lookup, + e: else_block, + gc: get_each_context, + gv: get_each_value, + gk: get_key, + cb: create_each_block, + ce: create_else_block, + }; +} + +export function create_each_blocks(each_block: EachBlock) { + for (const block of each_block.b) { + block.c(); + } +} + +export function claim_each_blocks(each_blocks: EachBlock, nodes: Array) { + for (const block of each_blocks.b) { + if (block.l) { + block.l(nodes); + } + } +} + +export function mount_each_blocks( + each_blocks: EachBlock, + target: Node, + anchor?: Node | null +) { + for (const block of each_blocks.b) { + block.m(target, anchor); + } + if (each_blocks.e) { + each_blocks.e.m(target, anchor); + } +} + +export function destroy_each_blocks( + each_blocks: EachBlock, + detaching: boolean +) { + for (const block of each_blocks.b) { + if (block) { + block.d(detaching); + } + } + + if (each_blocks.e) { + each_blocks.e.d(detaching); + } +} diff --git a/src/runtime/internal/index.ts b/src/runtime/internal/index.ts index e1dd2a1fcf..e04164cf77 100644 --- a/src/runtime/internal/index.ts +++ b/src/runtime/internal/index.ts @@ -13,3 +13,4 @@ export * from './transitions'; export * from './utils'; export * from './Component'; export * from './dev'; +export * from './each_block'; diff --git a/src/runtime/internal/keyed_each.ts b/src/runtime/internal/keyed_each.ts index 76708c93db..8f42cf7734 100644 --- a/src/runtime/internal/keyed_each.ts +++ b/src/runtime/internal/keyed_each.ts @@ -1,3 +1,4 @@ +import { EachBlock } from './each_block'; import { transition_in, transition_out } from './transitions'; export function destroy_block(block, lookup) { @@ -21,7 +22,15 @@ export function fix_and_outro_and_destroy_block(block, lookup) { outro_and_destroy_block(block, lookup); } -export function update_keyed_each(old_blocks, changed, get_key, dynamic, ctx, list, lookup, node, destroy, create_each_block, next, get_context) { +export function update_keyed_each(each_block: EachBlock, changed, dynamic, ctx, node, destroy, next) { + const { + b: old_blocks, + l: lookup, + cb: create_each_block, + gk: get_key, + gc: get_context, + } = each_block; + const list = each_block.gv(ctx); let o = old_blocks.length; let n = list.length; @@ -40,7 +49,7 @@ export function update_keyed_each(old_blocks, changed, get_key, dynamic, ctx, li let block = lookup.get(key); if (!block) { - block = create_each_block(key, child_ctx); + block = create_each_block(child_ctx, key); block.c(); } else if (dynamic) { block.p(changed, child_ctx); @@ -105,7 +114,7 @@ export function update_keyed_each(old_blocks, changed, get_key, dynamic, ctx, li while (n) insert(new_blocks[n - 1]); - return new_blocks; + each_block.b = new_blocks; } export function measure(blocks) { diff --git a/test/js/samples/debug-foo-bar-baz-things/expected.js b/test/js/samples/debug-foo-bar-baz-things/expected.js index 15d953f6bc..d6b961e428 100644 --- a/test/js/samples/debug-foo-bar-baz-things/expected.js +++ b/test/js/samples/debug-foo-bar-baz-things/expected.js @@ -3,12 +3,15 @@ import { SvelteComponentDev, add_location, append_dev, - destroy_each, + create_each_blocks, + destroy_each_blocks, detach_dev, dispatch_dev, element, init, + init_each_block, insert_dev, + mount_each_blocks, noop, safe_not_equal, set_data_dev, @@ -76,17 +79,18 @@ function create_fragment(ctx) { let each_value = ctx.things; - let each_blocks = []; - - for (let i = 0; i < each_value.length; i += 1) { - each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i)); - } + let each_blocks = init_each_block( + ctx, + get_each_context, + ctx => ctx.things, + null, + create_each_block, + null + ); const block = { c: function create() { - for (let i = 0; i < each_blocks.length; i += 1) { - each_blocks[i].c(); - } + create_each_blocks(each_blocks); t0 = space(); p = element("p"); @@ -100,9 +104,7 @@ function create_fragment(ctx) { }, m: function mount(target, anchor) { - for (let i = 0; i < each_blocks.length; i += 1) { - each_blocks[i].m(target, anchor); - } + mount_each_blocks(each_blocks, target, anchor); insert_dev(target, t0, anchor); insert_dev(target, p, anchor); @@ -118,19 +120,19 @@ function create_fragment(ctx) { for (i = 0; i < each_value.length; i += 1) { const child_ctx = get_each_context(ctx, each_value, i); - if (each_blocks[i]) { - each_blocks[i].p(changed, child_ctx); + if (each_blocks.b[i]) { + each_blocks.b[i].p(changed, child_ctx); } else { - each_blocks[i] = create_each_block(child_ctx); - each_blocks[i].c(); - each_blocks[i].m(t0.parentNode, t0); + each_blocks.b[i] = create_each_block(child_ctx); + each_blocks.b[i].c(); + each_blocks.b[i].m(t0.parentNode, t0); } } - for (; i < each_blocks.length; i += 1) { - each_blocks[i].d(1); + for (; i < each_blocks.b.length; i += 1) { + each_blocks.b[i].d(1); } - each_blocks.length = each_value.length; + each_blocks.b.length = each_value.length; } if (changed.foo) { @@ -142,7 +144,7 @@ function create_fragment(ctx) { o: noop, d: function destroy(detaching) { - destroy_each(each_blocks, detaching); + destroy_each_blocks(each_blocks, detaching); if (detaching) { detach_dev(t0); diff --git a/test/js/samples/debug-foo/expected.js b/test/js/samples/debug-foo/expected.js index 08a92171d1..15698476b2 100644 --- a/test/js/samples/debug-foo/expected.js +++ b/test/js/samples/debug-foo/expected.js @@ -3,12 +3,15 @@ import { SvelteComponentDev, add_location, append_dev, - destroy_each, + create_each_blocks, + destroy_each_blocks, detach_dev, dispatch_dev, element, init, + init_each_block, insert_dev, + mount_each_blocks, noop, safe_not_equal, set_data_dev, @@ -76,17 +79,18 @@ function create_fragment(ctx) { let each_value = ctx.things; - let each_blocks = []; - - for (let i = 0; i < each_value.length; i += 1) { - each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i)); - } + let each_blocks = init_each_block( + ctx, + get_each_context, + ctx => ctx.things, + null, + create_each_block, + null + ); const block = { c: function create() { - for (let i = 0; i < each_blocks.length; i += 1) { - each_blocks[i].c(); - } + create_each_blocks(each_blocks); t0 = space(); p = element("p"); @@ -100,9 +104,7 @@ function create_fragment(ctx) { }, m: function mount(target, anchor) { - for (let i = 0; i < each_blocks.length; i += 1) { - each_blocks[i].m(target, anchor); - } + mount_each_blocks(each_blocks, target, anchor); insert_dev(target, t0, anchor); insert_dev(target, p, anchor); @@ -118,19 +120,19 @@ function create_fragment(ctx) { for (i = 0; i < each_value.length; i += 1) { const child_ctx = get_each_context(ctx, each_value, i); - if (each_blocks[i]) { - each_blocks[i].p(changed, child_ctx); + if (each_blocks.b[i]) { + each_blocks.b[i].p(changed, child_ctx); } else { - each_blocks[i] = create_each_block(child_ctx); - each_blocks[i].c(); - each_blocks[i].m(t0.parentNode, t0); + each_blocks.b[i] = create_each_block(child_ctx); + each_blocks.b[i].c(); + each_blocks.b[i].m(t0.parentNode, t0); } } - for (; i < each_blocks.length; i += 1) { - each_blocks[i].d(1); + for (; i < each_blocks.b.length; i += 1) { + each_blocks.b[i].d(1); } - each_blocks.length = each_value.length; + each_blocks.b.length = each_value.length; } if (changed.foo) { @@ -142,7 +144,7 @@ function create_fragment(ctx) { o: noop, d: function destroy(detaching) { - destroy_each(each_blocks, detaching); + destroy_each_blocks(each_blocks, detaching); if (detaching) { detach_dev(t0); diff --git a/test/js/samples/deconflict-builtins/expected.js b/test/js/samples/deconflict-builtins/expected.js index 6609fcccf7..9c0fd2394b 100644 --- a/test/js/samples/deconflict-builtins/expected.js +++ b/test/js/samples/deconflict-builtins/expected.js @@ -2,12 +2,15 @@ import { SvelteComponent, append, - destroy_each, + create_each_blocks, + destroy_each_blocks, detach, element, empty, init, + init_each_block, insert, + mount_each_blocks, noop, safe_not_equal, set_data, @@ -54,25 +57,24 @@ function create_fragment(ctx) { let each_value = ctx.createElement; - let each_blocks = []; - - for (let i = 0; i < each_value.length; i += 1) { - each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i)); - } + let each_blocks = init_each_block( + ctx, + get_each_context, + ctx => ctx.createElement, + null, + create_each_block, + null + ); return { c() { - for (let i = 0; i < each_blocks.length; i += 1) { - each_blocks[i].c(); - } + create_each_blocks(each_blocks); each_1_anchor = empty(); }, m(target, anchor) { - for (let i = 0; i < each_blocks.length; i += 1) { - each_blocks[i].m(target, anchor); - } + mount_each_blocks(each_blocks, target, anchor); insert(target, each_1_anchor, anchor); }, @@ -85,19 +87,19 @@ function create_fragment(ctx) { for (i = 0; i < each_value.length; i += 1) { const child_ctx = get_each_context(ctx, each_value, i); - if (each_blocks[i]) { - each_blocks[i].p(changed, child_ctx); + if (each_blocks.b[i]) { + each_blocks.b[i].p(changed, child_ctx); } else { - each_blocks[i] = create_each_block(child_ctx); - each_blocks[i].c(); - each_blocks[i].m(each_1_anchor.parentNode, each_1_anchor); + each_blocks.b[i] = create_each_block(child_ctx); + each_blocks.b[i].c(); + each_blocks.b[i].m(each_1_anchor.parentNode, each_1_anchor); } } - for (; i < each_blocks.length; i += 1) { - each_blocks[i].d(1); + for (; i < each_blocks.b.length; i += 1) { + each_blocks.b[i].d(1); } - each_blocks.length = each_value.length; + each_blocks.b.length = each_value.length; } }, @@ -105,7 +107,7 @@ function create_fragment(ctx) { o: noop, d(detaching) { - destroy_each(each_blocks, detaching); + destroy_each_blocks(each_blocks, detaching); if (detaching) { detach(each_1_anchor); diff --git a/test/js/samples/each-block-array-literal/expected.js b/test/js/samples/each-block-array-literal/expected.js index 6ca6773f6b..fd4e2da7fb 100644 --- a/test/js/samples/each-block-array-literal/expected.js +++ b/test/js/samples/each-block-array-literal/expected.js @@ -2,12 +2,15 @@ import { SvelteComponent, append, - destroy_each, + create_each_blocks, + destroy_each_blocks, detach, element, empty, init, + init_each_block, insert, + mount_each_blocks, noop, safe_not_equal, set_data, @@ -54,25 +57,24 @@ function create_fragment(ctx) { let each_value = [ctx.a, ctx.b, ctx.c, ctx.d, ctx.e]; - let each_blocks = []; - - for (let i = 0; i < 5; i += 1) { - each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i)); - } + let each_blocks = init_each_block( + ctx, + get_each_context, + ctx => [ctx.a, ctx.b, ctx.c, ctx.d, ctx.e], + null, + create_each_block, + null + ); return { c() { - for (let i = 0; i < 5; i += 1) { - each_blocks[i].c(); - } + create_each_blocks(each_blocks); each_1_anchor = empty(); }, m(target, anchor) { - for (let i = 0; i < 5; i += 1) { - each_blocks[i].m(target, anchor); - } + mount_each_blocks(each_blocks, target, anchor); insert(target, each_1_anchor, anchor); }, @@ -85,17 +87,17 @@ function create_fragment(ctx) { for (i = 0; i < each_value.length; i += 1) { const child_ctx = get_each_context(ctx, each_value, i); - if (each_blocks[i]) { - each_blocks[i].p(changed, child_ctx); + if (each_blocks.b[i]) { + each_blocks.b[i].p(changed, child_ctx); } else { - each_blocks[i] = create_each_block(child_ctx); - each_blocks[i].c(); - each_blocks[i].m(each_1_anchor.parentNode, each_1_anchor); + each_blocks.b[i] = create_each_block(child_ctx); + each_blocks.b[i].c(); + each_blocks.b[i].m(each_1_anchor.parentNode, each_1_anchor); } } for (; i < 5; i += 1) { - each_blocks[i].d(1); + each_blocks.b[i].d(1); } } }, @@ -104,7 +106,7 @@ function create_fragment(ctx) { o: noop, d(detaching) { - destroy_each(each_blocks, detaching); + destroy_each_blocks(each_blocks, detaching); if (detaching) { detach(each_1_anchor); diff --git a/test/js/samples/each-block-changed-check/expected.js b/test/js/samples/each-block-changed-check/expected.js index 0601c31334..f120ee02ec 100644 --- a/test/js/samples/each-block-changed-check/expected.js +++ b/test/js/samples/each-block-changed-check/expected.js @@ -4,11 +4,14 @@ import { SvelteComponent, append, attr, - destroy_each, + create_each_blocks, + destroy_each_blocks, detach, element, init, + init_each_block, insert, + mount_each_blocks, noop, safe_not_equal, set_data, @@ -85,17 +88,18 @@ function create_fragment(ctx) { let each_value = ctx.comments; - let each_blocks = []; - - for (let i = 0; i < each_value.length; i += 1) { - each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i)); - } + let each_blocks = init_each_block( + ctx, + get_each_context, + ctx => ctx.comments, + null, + create_each_block, + null + ); return { c() { - for (let i = 0; i < each_blocks.length; i += 1) { - each_blocks[i].c(); - } + create_each_blocks(each_blocks); t0 = space(); p = element("p"); @@ -103,9 +107,7 @@ function create_fragment(ctx) { }, m(target, anchor) { - for (let i = 0; i < each_blocks.length; i += 1) { - each_blocks[i].m(target, anchor); - } + mount_each_blocks(each_blocks, target, anchor); insert(target, t0, anchor); insert(target, p, anchor); @@ -120,19 +122,19 @@ function create_fragment(ctx) { for (i = 0; i < each_value.length; i += 1) { const child_ctx = get_each_context(ctx, each_value, i); - if (each_blocks[i]) { - each_blocks[i].p(changed, child_ctx); + if (each_blocks.b[i]) { + each_blocks.b[i].p(changed, child_ctx); } else { - each_blocks[i] = create_each_block(child_ctx); - each_blocks[i].c(); - each_blocks[i].m(t0.parentNode, t0); + each_blocks.b[i] = create_each_block(child_ctx); + each_blocks.b[i].c(); + each_blocks.b[i].m(t0.parentNode, t0); } } - for (; i < each_blocks.length; i += 1) { - each_blocks[i].d(1); + for (; i < each_blocks.b.length; i += 1) { + each_blocks.b[i].d(1); } - each_blocks.length = each_value.length; + each_blocks.b.length = each_value.length; } if (changed.foo) { @@ -144,7 +146,7 @@ function create_fragment(ctx) { o: noop, d(detaching) { - destroy_each(each_blocks, detaching); + destroy_each_blocks(each_blocks, detaching); if (detaching) { detach(t0); diff --git a/test/js/samples/each-block-keyed-animated/expected.js b/test/js/samples/each-block-keyed-animated/expected.js index 25aa1e5c5d..7e972d82f6 100644 --- a/test/js/samples/each-block-keyed-animated/expected.js +++ b/test/js/samples/each-block-keyed-animated/expected.js @@ -3,13 +3,17 @@ import { SvelteComponent, append, create_animation, + create_each_blocks, + destroy_each_blocks, detach, element, empty, fix_and_destroy_block, fix_position, init, + init_each_block, insert, + mount_each_blocks, noop, safe_not_equal, set_data, @@ -24,7 +28,7 @@ function get_each_context(ctx, list, i) { } // (19:0) {#each things as thing (thing.id)} -function create_each_block(key_1, ctx) { +function create_each_block(ctx, key_1) { var div, t_value = ctx.thing.name + "", t, rect, stop_animation = noop; return { @@ -72,49 +76,52 @@ function create_each_block(key_1, ctx) { } function create_fragment(ctx) { - var each_blocks = [], each_1_lookup = new Map(), each_1_anchor; + var each_1_anchor; let each_value = ctx.things; - const get_key = ctx => ctx.thing.id; - - for (let i = 0; i < each_value.length; i += 1) { - let child_ctx = get_each_context(ctx, each_value, i); - let key = get_key(child_ctx); - each_1_lookup.set(key, each_blocks[i] = create_each_block(key, child_ctx)); - } + let each_blocks = init_each_block( + ctx, + get_each_context, + ctx => ctx.things, + ctx => ctx.thing.id, + create_each_block, + null + ); return { c() { - for (let i = 0; i < each_blocks.length; i += 1) { - each_blocks[i].c(); - } + create_each_blocks(each_blocks); each_1_anchor = empty(); }, m(target, anchor) { - for (let i = 0; i < each_blocks.length; i += 1) { - each_blocks[i].m(target, anchor); - } + mount_each_blocks(each_blocks, target, anchor); insert(target, each_1_anchor, anchor); }, p(changed, ctx) { const each_value = ctx.things; - for (let i = 0; i < each_blocks.length; i += 1) each_blocks[i].r(); - each_blocks = update_keyed_each(each_blocks, changed, get_key, 1, ctx, each_value, each_1_lookup, each_1_anchor.parentNode, fix_and_destroy_block, create_each_block, each_1_anchor, get_each_context); - for (let i = 0; i < each_blocks.length; i += 1) each_blocks[i].a(); + for (let i = 0; i < each_blocks.b.length; i += 1) each_blocks.b[i].r(); + update_keyed_each( + each_blocks, + changed, + 1, + ctx, + each_1_anchor.parentNode, + fix_and_destroy_block, + each_1_anchor + ); + for (let i = 0; i < each_blocks.b.length; i += 1) each_blocks.b[i].a(); }, i: noop, o: noop, d(detaching) { - for (let i = 0; i < each_blocks.length; i += 1) { - each_blocks[i].d(detaching); - } + destroy_each_blocks(each_blocks, detaching); if (detaching) { detach(each_1_anchor); diff --git a/test/js/samples/each-block-keyed/expected.js b/test/js/samples/each-block-keyed/expected.js index ae20825344..7f6c1451b6 100644 --- a/test/js/samples/each-block-keyed/expected.js +++ b/test/js/samples/each-block-keyed/expected.js @@ -2,12 +2,16 @@ import { SvelteComponent, append, + create_each_blocks, destroy_block, + destroy_each_blocks, detach, element, empty, init, + init_each_block, insert, + mount_each_blocks, noop, safe_not_equal, set_data, @@ -22,7 +26,7 @@ function get_each_context(ctx, list, i) { } // (5:0) {#each things as thing (thing.id)} -function create_each_block(key_1, ctx) { +function create_each_block(ctx, key_1) { var div, t_value = ctx.thing.name + "", t; return { @@ -56,47 +60,50 @@ function create_each_block(key_1, ctx) { } function create_fragment(ctx) { - var each_blocks = [], each_1_lookup = new Map(), each_1_anchor; + var each_1_anchor; let each_value = ctx.things; - const get_key = ctx => ctx.thing.id; - - for (let i = 0; i < each_value.length; i += 1) { - let child_ctx = get_each_context(ctx, each_value, i); - let key = get_key(child_ctx); - each_1_lookup.set(key, each_blocks[i] = create_each_block(key, child_ctx)); - } + let each_blocks = init_each_block( + ctx, + get_each_context, + ctx => ctx.things, + ctx => ctx.thing.id, + create_each_block, + null + ); return { c() { - for (let i = 0; i < each_blocks.length; i += 1) { - each_blocks[i].c(); - } + create_each_blocks(each_blocks); each_1_anchor = empty(); }, m(target, anchor) { - for (let i = 0; i < each_blocks.length; i += 1) { - each_blocks[i].m(target, anchor); - } + mount_each_blocks(each_blocks, target, anchor); insert(target, each_1_anchor, anchor); }, p(changed, ctx) { const each_value = ctx.things; - each_blocks = update_keyed_each(each_blocks, changed, get_key, 1, ctx, each_value, each_1_lookup, each_1_anchor.parentNode, destroy_block, create_each_block, each_1_anchor, get_each_context); + update_keyed_each( + each_blocks, + changed, + 1, + ctx, + each_1_anchor.parentNode, + destroy_block, + each_1_anchor + ); }, i: noop, o: noop, d(detaching) { - for (let i = 0; i < each_blocks.length; i += 1) { - each_blocks[i].d(detaching); - } + destroy_each_blocks(each_blocks, detaching); if (detaching) { detach(each_1_anchor);