diff --git a/package-lock.json b/package-lock.json index 68d8329bc8..9771d83536 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "svelte", - "version": "3.0.0-beta.14", + "version": "3.0.0-beta.15", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index b8e9d5a520..4b85fdfdb9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "svelte", - "version": "3.0.0-beta.14", + "version": "3.0.0-beta.15", "description": "The magical disappearing UI framework", "module": "index.mjs", "main": "index", diff --git a/src/compile/render-dom/wrappers/EachBlock.ts b/src/compile/render-dom/wrappers/EachBlock.ts index 0fc9d293f6..36b493645c 100644 --- a/src/compile/render-dom/wrappers/EachBlock.ts +++ b/src/compile/render-dom/wrappers/EachBlock.ts @@ -1,6 +1,5 @@ import Renderer from '../Renderer'; import Block from '../Block'; -import Node from '../../nodes/shared/Node'; import Wrapper from './shared/Wrapper'; import createDebuggingComment from '../../../utils/createDebuggingComment'; import EachBlock from '../../nodes/EachBlock'; @@ -55,8 +54,9 @@ export default class EachBlockWrapper extends Wrapper { each_block_value: string; get_each_context: string; iterations: string; - data_length: string, - view_length: string, + fixed_length: number; + data_length: string; + view_length: string; length: string; } @@ -113,6 +113,7 @@ export default class EachBlockWrapper extends Wrapper { length: `[✂${c}-${c+4}✂]`, // 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, @@ -373,6 +374,7 @@ export default class EachBlockWrapper extends Wrapper { create_each_block, length, iterations, + fixed_length, data_length, view_length, anchor @@ -475,7 +477,7 @@ export default class EachBlockWrapper extends Wrapper { for (${this.block.hasUpdateMethod ? `` : `#i = ${this.vars.each_block_value}.${length}`}; #i < ${view_length}; #i += 1) { ${iterations}[#i].d(1); } - ${view_length} = ${this.vars.each_block_value}.${length}; + ${!fixed_length && `${view_length} = ${this.vars.each_block_value}.${length};`} `; } diff --git a/test/js/samples/each-block-array-literal/expected.js b/test/js/samples/each-block-array-literal/expected.js index 86f6841261..b5499707c3 100644 --- a/test/js/samples/each-block-array-literal/expected.js +++ b/test/js/samples/each-block-array-literal/expected.js @@ -1,5 +1,5 @@ /* generated by Svelte vX.Y.Z */ -import { SvelteComponent as SvelteComponent_1, append, createComment, createElement, createText, destroyEach, detachNode, init, insert, noop, safe_not_equal } from "svelte/internal"; +import { SvelteComponent as SvelteComponent_1, append, createComment, createElement, createText, destroyEach, detachNode, flush, init, insert, noop, safe_not_equal, setData } from "svelte/internal"; function get_each_context(ctx, list, i) { const child_ctx = Object.create(ctx); @@ -7,14 +7,14 @@ function get_each_context(ctx, list, i) { return child_ctx; } -// (1:0) {#each [1, 2, 3, 4, 5] as num} +// (1:0) {#each [a, b, c, d, e] as num} function create_each_block(ctx) { - var span, text; + var span, text_value = ctx.num, text; return { c() { span = createElement("span"); - text = createText(ctx.num); + text = createText(text_value); }, m(target, anchor) { @@ -22,7 +22,11 @@ function create_each_block(ctx) { append(span, text); }, - p: noop, + p(changed, ctx) { + if ((changed.a || changed.b || changed.c || changed.d || changed.e) && text_value !== (text_value = ctx.num)) { + setData(text, text_value); + } + }, d(detach) { if (detach) { @@ -35,7 +39,7 @@ function create_each_block(ctx) { function create_fragment(ctx) { var each_anchor; - var each_value = [1, 2, 3, 4, 5]; + var each_value = [ctx.a, ctx.b, ctx.c, ctx.d, ctx.e]; var each_blocks = []; @@ -60,7 +64,28 @@ function create_fragment(ctx) { insert(target, each_anchor, anchor); }, - p: noop, + p(changed, ctx) { + if (changed.a || changed.b || changed.c || changed.d || changed.e) { + each_value = [ctx.a, ctx.b, ctx.c, ctx.d, ctx.e]; + + for (var 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); + } else { + each_blocks[i] = create_each_block(child_ctx); + each_blocks[i].c(); + each_blocks[i].m(each_anchor.parentNode, each_anchor); + } + } + + for (; i < 5; i += 1) { + each_blocks[i].d(1); + } + } + }, + i: noop, o: noop, @@ -74,10 +99,69 @@ function create_fragment(ctx) { }; } +function instance($$self, $$props, $$invalidate) { + let { a, b, c, d, e } = $$props; + + $$self.$set = $$props => { + if ('a' in $$props) $$invalidate('a', a = $$props.a); + if ('b' in $$props) $$invalidate('b', b = $$props.b); + if ('c' in $$props) $$invalidate('c', c = $$props.c); + if ('d' in $$props) $$invalidate('d', d = $$props.d); + if ('e' in $$props) $$invalidate('e', e = $$props.e); + }; + + return { a, b, c, d, e }; +} + class SvelteComponent extends SvelteComponent_1 { constructor(options) { super(); - init(this, options, null, create_fragment, safe_not_equal); + init(this, options, instance, create_fragment, safe_not_equal); + } + + get a() { + return this.$$.ctx.a; + } + + set a(a) { + this.$set({ a }); + flush(); + } + + get b() { + return this.$$.ctx.b; + } + + set b(b) { + this.$set({ b }); + flush(); + } + + get c() { + return this.$$.ctx.c; + } + + set c(c) { + this.$set({ c }); + flush(); + } + + get d() { + return this.$$.ctx.d; + } + + set d(d) { + this.$set({ d }); + flush(); + } + + get e() { + return this.$$.ctx.e; + } + + set e(e) { + this.$set({ e }); + flush(); } } diff --git a/test/js/samples/each-block-array-literal/input.svelte b/test/js/samples/each-block-array-literal/input.svelte index 490c025233..aba508f711 100644 --- a/test/js/samples/each-block-array-literal/input.svelte +++ b/test/js/samples/each-block-array-literal/input.svelte @@ -1,3 +1,3 @@ -{#each [1, 2, 3, 4, 5] as num} +{#each [a, b, c, d, e] as num} {num} {/each} \ No newline at end of file