Skip to content

Commit

Permalink
Merge pull request #3504 from Swatinem/consistent-each
Browse files Browse the repository at this point in the history 
Make generated `each` code more consistent
  • Loading branch information
@Rich-Harris
Rich-Harris authored Sep 5, 2019
2 parents b1a8c96 + f41bbad commit cc10714
Show file tree
Hide file tree
Showing 8 changed files with 94 additions and 58 deletions.
55 changes: 37 additions & 18 deletions src/compiler/compile/render_dom/wrappers/EachBlock.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,7 @@ export default class EachBlockWrapper extends Wrapper {

const snippet = this.node.expression.render(block);

block.builders.init.add_line(`var ${this.vars.each_block_value} = ${snippet};`);
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) {
Expand Down Expand Up @@ -214,7 +214,9 @@ export default class EachBlockWrapper extends Wrapper {

if (this.block.has_intro_method || this.block.has_outro_method) {
block.builders.intro.add_block(deindent`
for (var #i = 0; #i < ${this.vars.data_length}; #i += 1) @transition_in(${this.vars.iterations}[#i]);
for (let #i = 0; #i < ${this.vars.data_length}; #i += 1) {
@transition_in(${this.vars.iterations}[#i]);
}
`);
}

Expand All @@ -230,7 +232,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(`var ${each_block_else} = null;`);
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`
Expand Down Expand Up @@ -335,25 +337,31 @@ export default class EachBlockWrapper extends Wrapper {
// @ts-ignore todo: probably error
this.node.key.render()};
for (var #i = 0; #i < ${this.vars.each_block_value}.${length}; #i += 1) {
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 (#i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].c();
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 (#i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].l(${parent_nodes});
for (let #i = 0; #i < ${view_length}; #i += 1) {
${iterations}[#i].l(${parent_nodes});
}
`);
}

block.builders.mount.add_block(deindent`
for (#i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].m(${initial_mount_node}, ${initial_anchor_node});
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;
Expand All @@ -378,12 +386,16 @@ export default class EachBlockWrapper extends Wrapper {

if (this.block.has_outros) {
block.builders.outro.add_block(deindent`
for (#i = 0; #i < ${view_length}; #i += 1) @transition_out(${iterations}[#i]);
for (let #i = 0; #i < ${view_length}; #i += 1) {
@transition_out(${iterations}[#i]);
}
`);
}

block.builders.destroy.add_block(deindent`
for (#i = 0; #i < ${view_length}; #i += 1) ${iterations}[#i].d(${parent_node ? '' : 'detaching'});
for (let #i = 0; #i < ${view_length}; #i += 1) {
${iterations}[#i].d(${parent_node ? '' : 'detaching'});
}
`);
}

Expand Down Expand Up @@ -414,29 +426,29 @@ export default class EachBlockWrapper extends Wrapper {
} = this.vars;

block.builders.init.add_block(deindent`
var ${iterations} = [];
let ${iterations} = [];
for (var #i = 0; #i < ${data_length}; #i += 1) {
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 (var #i = 0; #i < ${view_length}; #i += 1) {
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 (var #i = 0; #i < ${view_length}; #i += 1) {
for (let #i = 0; #i < ${view_length}; #i += 1) {
${iterations}[#i].l(${parent_nodes});
}
`);
}

block.builders.mount.add_block(deindent`
for (var #i = 0; #i < ${view_length}; #i += 1) {
for (let #i = 0; #i < ${view_length}; #i += 1) {
${iterations}[#i].m(${initial_mount_node}, ${initial_anchor_node});
}
`);
Expand Down Expand Up @@ -499,7 +511,9 @@ export default class EachBlockWrapper extends Wrapper {
`);
remove_old_blocks = deindent`
@group_outros();
for (#i = ${this.vars.each_block_value}.${length}; #i < ${view_length}; #i += 1) ${out}(#i);
for (#i = ${this.vars.each_block_value}.${length}; #i < ${view_length}; #i += 1) {
${out}(#i);
}
@check_outros();
`;
} else {
Expand All @@ -511,11 +525,14 @@ export default class EachBlockWrapper extends Wrapper {
`;
}

// We declare `i` as block scoped here, as the `remove_old_blocks` code
// may rely on continuing where this iteration stopped.
const update = deindent`
${!this.block.has_update_method && `const #old_length = ${this.vars.each_block_value}.length;`}
${this.vars.each_block_value} = ${snippet};
for (var #i = ${start}; #i < ${this.vars.each_block_value}.${length}; #i += 1) {
let #i;
for (#i = ${start}; #i < ${this.vars.each_block_value}.${length}; #i += 1) {
const child_ctx = ${this.vars.get_each_context}(ctx, ${this.vars.each_block_value}, #i);
${for_loop_body}
Expand All @@ -534,8 +551,10 @@ export default class EachBlockWrapper extends Wrapper {
if (this.block.has_outros) {
block.builders.outro.add_block(deindent`
${iterations} = ${iterations}.filter(@_Boolean);
for (let #i = 0; #i < ${view_length}; #i += 1) @transition_out(${iterations}[#i]);`
);
for (let #i = 0; #i < ${view_length}; #i += 1) {
@transition_out(${iterations}[#i]);
}
`);
}

block.builders.destroy.add_block(`@destroy_each(${iterations}, detaching);`);
Expand Down
13 changes: 7 additions & 6 deletions test/js/samples/debug-foo-bar-baz-things/expected.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,17 +71,17 @@ function create_each_block(ctx) {
function create_fragment(ctx) {
var t0, p, t1, t2;

var each_value = ctx.things;
let each_value = ctx.things;

var each_blocks = [];
let each_blocks = [];

for (var i = 0; i < each_value.length; i += 1) {
for (let i = 0; i < each_value.length; i += 1) {
each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
}

return {
c: function create() {
for (var i = 0; i < each_blocks.length; i += 1) {
for (let i = 0; i < each_blocks.length; i += 1) {
each_blocks[i].c();
}

Expand All @@ -97,7 +97,7 @@ function create_fragment(ctx) {
},

m: function mount(target, anchor) {
for (var i = 0; i < each_blocks.length; i += 1) {
for (let i = 0; i < each_blocks.length; i += 1) {
each_blocks[i].m(target, anchor);
}

Expand All @@ -111,7 +111,8 @@ function create_fragment(ctx) {
if (changed.things) {
each_value = ctx.things;

for (var i = 0; i < each_value.length; i += 1) {
let i;
for (i = 0; i < each_value.length; i += 1) {
const child_ctx = get_each_context(ctx, each_value, i);

if (each_blocks[i]) {
Expand Down
13 changes: 7 additions & 6 deletions test/js/samples/debug-foo/expected.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,17 +71,17 @@ function create_each_block(ctx) {
function create_fragment(ctx) {
var t0, p, t1, t2;

var each_value = ctx.things;
let each_value = ctx.things;

var each_blocks = [];
let each_blocks = [];

for (var i = 0; i < each_value.length; i += 1) {
for (let i = 0; i < each_value.length; i += 1) {
each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
}

return {
c: function create() {
for (var i = 0; i < each_blocks.length; i += 1) {
for (let i = 0; i < each_blocks.length; i += 1) {
each_blocks[i].c();
}

Expand All @@ -97,7 +97,7 @@ function create_fragment(ctx) {
},

m: function mount(target, anchor) {
for (var i = 0; i < each_blocks.length; i += 1) {
for (let i = 0; i < each_blocks.length; i += 1) {
each_blocks[i].m(target, anchor);
}

Expand All @@ -111,7 +111,8 @@ function create_fragment(ctx) {
if (changed.things) {
each_value = ctx.things;

for (var i = 0; i < each_value.length; i += 1) {
let i;
for (i = 0; i < each_value.length; i += 1) {
const child_ctx = get_each_context(ctx, each_value, i);

if (each_blocks[i]) {
Expand Down
13 changes: 7 additions & 6 deletions test/js/samples/deconflict-builtins/expected.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,25 +52,25 @@ function create_each_block(ctx) {
function create_fragment(ctx) {
var each_1_anchor;

var each_value = ctx.createElement;
let each_value = ctx.createElement;

var each_blocks = [];
let each_blocks = [];

for (var i = 0; i < each_value.length; i += 1) {
for (let i = 0; i < each_value.length; i += 1) {
each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
}

return {
c() {
for (var i = 0; i < each_blocks.length; i += 1) {
for (let i = 0; i < each_blocks.length; i += 1) {
each_blocks[i].c();
}

each_1_anchor = empty();
},

m(target, anchor) {
for (var i = 0; i < each_blocks.length; i += 1) {
for (let i = 0; i < each_blocks.length; i += 1) {
each_blocks[i].m(target, anchor);
}

Expand All @@ -81,7 +81,8 @@ function create_fragment(ctx) {
if (changed.createElement) {
each_value = ctx.createElement;

for (var i = 0; i < each_value.length; i += 1) {
let i;
for (i = 0; i < each_value.length; i += 1) {
const child_ctx = get_each_context(ctx, each_value, i);

if (each_blocks[i]) {
Expand Down
13 changes: 7 additions & 6 deletions test/js/samples/each-block-array-literal/expected.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,25 +52,25 @@ function create_each_block(ctx) {
function create_fragment(ctx) {
var each_1_anchor;

var each_value = [ctx.a, ctx.b, ctx.c, ctx.d, ctx.e];
let each_value = [ctx.a, ctx.b, ctx.c, ctx.d, ctx.e];

var each_blocks = [];
let each_blocks = [];

for (var i = 0; i < 5; i += 1) {
for (let i = 0; i < 5; i += 1) {
each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
}

return {
c() {
for (var i = 0; i < 5; i += 1) {
for (let i = 0; i < 5; i += 1) {
each_blocks[i].c();
}

each_1_anchor = empty();
},

m(target, anchor) {
for (var i = 0; i < 5; i += 1) {
for (let i = 0; i < 5; i += 1) {
each_blocks[i].m(target, anchor);
}

Expand All @@ -81,7 +81,8 @@ function create_fragment(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) {
let i;
for (i = 0; i < each_value.length; i += 1) {
const child_ctx = get_each_context(ctx, each_value, i);

if (each_blocks[i]) {
Expand Down
13 changes: 7 additions & 6 deletions test/js/samples/each-block-changed-check/expected.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,17 +83,17 @@ function create_each_block(ctx) {
function create_fragment(ctx) {
var t0, p, t1;

var each_value = ctx.comments;
let each_value = ctx.comments;

var each_blocks = [];
let each_blocks = [];

for (var i = 0; i < each_value.length; i += 1) {
for (let i = 0; i < each_value.length; i += 1) {
each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
}

return {
c() {
for (var i = 0; i < each_blocks.length; i += 1) {
for (let i = 0; i < each_blocks.length; i += 1) {
each_blocks[i].c();
}

Expand All @@ -103,7 +103,7 @@ function create_fragment(ctx) {
},

m(target, anchor) {
for (var i = 0; i < each_blocks.length; i += 1) {
for (let i = 0; i < each_blocks.length; i += 1) {
each_blocks[i].m(target, anchor);
}

Expand All @@ -116,7 +116,8 @@ function create_fragment(ctx) {
if (changed.comments || changed.elapsed || changed.time) {
each_value = ctx.comments;

for (var i = 0; i < each_value.length; i += 1) {
let i;
for (i = 0; i < each_value.length; i += 1) {
const child_ctx = get_each_context(ctx, each_value, i);

if (each_blocks[i]) {
Expand Down
Loading

0 comments on commit cc10714

Please sign in to comment.