more readable each block values

src/generators/Generator.ts

@@ -425,13 +425,19 @@ export default class Generator {
 
 	getUniqueNameMaker(params: string[]) {
 		const localUsedNames = new Set(params);
+
+		function add(name: string) {
+			localUsedNames.add(name);
+		}
+
+		reservedNames.forEach(add);
+		this.importedNames.forEach(add);
+
 		return (name: string) => {
 			if (test) name = `${name}$`;
 			let alias = name;
 			for (
 				let i = 1;
-				reservedNames.has(alias) ||
-				this.importedNames.has(alias) ||
 				this.usedNames.has(alias) ||
 				localUsedNames.has(alias);
 				alias = `${name}_${i++}`

src/generators/dom/index.ts

@@ -6,6 +6,7 @@ import { walk } from 'estree-walker';
 import deindent from '../../utils/deindent';
 import { stringify, escape } from '../../utils/stringify';
 import CodeBuilder from '../../utils/CodeBuilder';
+import reservedNames from '../../utils/reservedNames';
 import visit from './visit';
 import shared from './shared';
 import Generator from '../Generator';
@@ -15,6 +16,8 @@ import Block from './Block';
 import { version } from '../../../package.json';
 import { Parsed, CompileOptions, Node } from '../../interfaces';
 
+const test = typeof global !== 'undefined' && global.__svelte_test;
+
 export class DomGenerator extends Generator {
 	blocks: (Block|string)[];
 	readonly: Set<string>;
@@ -48,6 +51,33 @@ export class DomGenerator extends Generator {
 		// initial values for e.g. window.innerWidth, if there's a <:Window> meta tag
 		this.metaBindings = [];
 	}
+
+	getUniqueNameMaker(params: string[]) {
+		const localUsedNames = new Set(params);
+
+		function add(name: string) {
+			localUsedNames.add(name);
+		}
+
+		reservedNames.forEach(add);
+		this.importedNames.forEach(add);
+		for (const name in shared) {
+			localUsedNames.add(test ? `${name}$` : name);
+		}
+
+		return (name: string) => {
+			if (test) name = `${name}$`;
+			let alias = name;
+			for (
+				let i = 1;
+				this.usedNames.has(alias) ||
+				localUsedNames.has(alias);
+				alias = `${name}_${i++}`
+			);
+			localUsedNames.add(alias);
+			return alias;
+		};
+	}
 }
 
 export default function dom(

src/generators/dom/preprocess.ts

@@ -206,7 +206,11 @@ const preprocessors = {
 		indexNames.set(node.context, indexName);
 
 		const listNames = new Map(block.listNames);
-		const listName = block.getUniqueName(`each_block_value`);
+		const listName = block.getUniqueName(
+			(node.expression.type === 'MemberExpression' && !node.expression.computed) ? node.expression.property.name :
+			node.expression.type === 'Identifier' ? node.expression.name :
+			`each_block_value`
+		);
 		listNames.set(node.context, listName);
 
 		const context = generator.getUniqueName(node.context);

test/helpers.js

@@ -174,10 +174,10 @@ function capitalise(str) {
 	return str[0].toUpperCase() + str.slice(1);
 }
 
-export function showOutput(cwd, options = {}) {
+export function showOutput(cwd, options = {}, s = svelte) {
 	glob.sync('**/*.html', { cwd }).forEach(file => {
 		if (file[0] === '_') return;
-		const { code } = svelte.compile(
+		const { code } = s.compile(
 			fs.readFileSync(`${cwd}/${file}`, 'utf-8'),
 			Object.assign(options, {
 				filename: file,

test/js/samples/each-block-changed-check/expected-bundle.js

@@ -203,12 +203,12 @@ var proto = {
 function create_main_fragment(state, component) {
 	var text, p, text_1;
 
-	var each_block_value = state.comments;
+	var comments = state.comments;
 
 	var each_block_iterations = [];
 
-	for (var i = 0; i < each_block_value.length; i += 1) {
+	for (var i = 0; i < comments.length; i += 1) {
-		each_block_iterations[i] = create_each_block(state, each_block_value, each_block_value[i], i, component);
+		each_block_iterations[i] = create_each_block(state, comments, comments[i], i, component);
 	}
 
 	return {
@@ -233,14 +233,14 @@ function create_main_fragment(state, component) {
 		},
 
 		update: function(changed, state) {
-			var each_block_value = state.comments;
+			var comments = state.comments;
 
 			if (changed.comments || changed.elapsed || changed.time) {
-				for (var i = 0; i < each_block_value.length; i += 1) {
+				for (var i = 0; i < comments.length; i += 1) {
 					if (each_block_iterations[i]) {
-						each_block_iterations[i].update(changed, state, each_block_value, each_block_value[i], i);
+						each_block_iterations[i].update(changed, state, comments, comments[i], i);
 					} else {
-						each_block_iterations[i] = create_each_block(state, each_block_value, each_block_value[i], i, component);
+						each_block_iterations[i] = create_each_block(state, comments, comments[i], i, component);
 						each_block_iterations[i].create();
 						each_block_iterations[i].mount(text.parentNode, text);
 					}
@@ -250,7 +250,7 @@ function create_main_fragment(state, component) {
 					each_block_iterations[i].unmount();
 					each_block_iterations[i].destroy();
 				}
-				each_block_iterations.length = each_block_value.length;
+				each_block_iterations.length = comments.length;
 			}
 
 			if (changed.foo) {
@@ -274,7 +274,7 @@ function create_main_fragment(state, component) {
 }
 
 // (1:0) {{#each comments as comment, i}}
-function create_each_block(state, each_block_value, comment, i, component) {
+function create_each_block(state, comments, comment, i, component) {
 	var div, strong, text, text_1, span, text_2_value = comment.author, text_2, text_3, text_4_value = state.elapsed(comment.time, state.time), text_4, text_5, text_6, raw_value = comment.html, raw_before;
 
 	return {
@@ -313,7 +313,7 @@ function create_each_block(state, each_block_value, comment, i, component) {
 			raw_before.insertAdjacentHTML("afterend", raw_value);
 		},
 
-		update: function(changed, state, each_block_value, comment, i) {
+		update: function(changed, state, comments, comment, i) {
 			if ((changed.comments) && text_2_value !== (text_2_value = comment.author)) {
 				text_2.data = text_2_value;
 			}

test/js/samples/each-block-changed-check/expected.js

@@ -5,12 +5,12 @@ import { appendNode, assign, createElement, createText, destroyEach, detachAfter
 function create_main_fragment(state, component) {
 	var text, p, text_1;
 
-	var each_block_value = state.comments;
+	var comments = state.comments;
 
 	var each_block_iterations = [];
 
-	for (var i = 0; i < each_block_value.length; i += 1) {
+	for (var i = 0; i < comments.length; i += 1) {
-		each_block_iterations[i] = create_each_block(state, each_block_value, each_block_value[i], i, component);
+		each_block_iterations[i] = create_each_block(state, comments, comments[i], i, component);
 	}
 
 	return {
@@ -35,14 +35,14 @@ function create_main_fragment(state, component) {
 		},
 
 		update: function(changed, state) {
-			var each_block_value = state.comments;
+			var comments = state.comments;
 
 			if (changed.comments || changed.elapsed || changed.time) {
-				for (var i = 0; i < each_block_value.length; i += 1) {
+				for (var i = 0; i < comments.length; i += 1) {
 					if (each_block_iterations[i]) {
-						each_block_iterations[i].update(changed, state, each_block_value, each_block_value[i], i);
+						each_block_iterations[i].update(changed, state, comments, comments[i], i);
 					} else {
-						each_block_iterations[i] = create_each_block(state, each_block_value, each_block_value[i], i, component);
+						each_block_iterations[i] = create_each_block(state, comments, comments[i], i, component);
 						each_block_iterations[i].create();
 						each_block_iterations[i].mount(text.parentNode, text);
 					}
@@ -52,7 +52,7 @@ function create_main_fragment(state, component) {
 					each_block_iterations[i].unmount();
 					each_block_iterations[i].destroy();
 				}
-				each_block_iterations.length = each_block_value.length;
+				each_block_iterations.length = comments.length;
 			}
 
 			if (changed.foo) {
@@ -76,7 +76,7 @@ function create_main_fragment(state, component) {
 }
 
 // (1:0) {{#each comments as comment, i}}
-function create_each_block(state, each_block_value, comment, i, component) {
+function create_each_block(state, comments, comment, i, component) {
 	var div, strong, text, text_1, span, text_2_value = comment.author, text_2, text_3, text_4_value = state.elapsed(comment.time, state.time), text_4, text_5, text_6, raw_value = comment.html, raw_before;
 
 	return {
@@ -115,7 +115,7 @@ function create_each_block(state, each_block_value, comment, i, component) {
 			raw_before.insertAdjacentHTML("afterend", raw_value);
 		},
 
-		update: function(changed, state, each_block_value, comment, i) {
+		update: function(changed, state, comments, comment, i) {
 			if ((changed.comments) && text_2_value !== (text_2_value = comment.author)) {
 				text_2.data = text_2_value;
 			}

test/runtime/index.js

@@ -87,7 +87,7 @@ describe("runtime", () => {
 					}
 				} catch (err) {
 					failed.add(dir);
-					showOutput(cwd, { shared }); // eslint-disable-line no-console
+					showOutput(cwd, { shared }, svelte); // eslint-disable-line no-console
 					throw err;
 				}
 			}
@@ -133,7 +133,7 @@ describe("runtime", () => {
 				try {
 					SvelteComponent = require(`./samples/${dir}/main.html`);
 				} catch (err) {
-					showOutput(cwd, { shared, hydratable: hydrate }); // eslint-disable-line no-console
+					showOutput(cwd, { shared, hydratable: hydrate }, svelte); // eslint-disable-line no-console
 					throw err;
 				}
 
@@ -187,12 +187,12 @@ describe("runtime", () => {
 					config.error(assert, err);
 				} else {
 					failed.add(dir);
-					showOutput(cwd, { shared, hydratable: hydrate }); // eslint-disable-line no-console
+					showOutput(cwd, { shared, hydratable: hydrate }, svelte); // eslint-disable-line no-console
 					throw err;
 				}
 			}
 
-			if (config.show) showOutput(cwd, { shared, hydratable: hydrate });
+			if (config.show) showOutput(cwd, { shared, hydratable: hydrate }, svelte);
 		});
 	}