Merge pull request #468 from sveltejs/gh-465

[WIP] catch hardcoded names that should be aliases

src/generators/Generator.js

@@ -11,6 +11,8 @@ import getOutro from './shared/utils/getOutro.js';
 import processCss from './shared/processCss.js';
 import annotateWithScopes from './annotateWithScopes.js';
 
+const test = typeof global !== 'undefined' && global.__svelte_test;
+
 export default class Generator {
 	constructor ( parsed, source, name, options ) {
 		this.parsed = parsed;
@@ -238,6 +240,7 @@ export default class Generator {
 	}
 
 	getUniqueName ( name ) {
+		if ( test ) name = `${name}$`;
 		let alias = name;
 		for ( let i = 1; reservedNames.has( alias ) || this.importedNames.has( alias ) || this._usedNames.has( alias ); alias = `${name}_${i++}` );
 		this._usedNames.add( alias );
@@ -247,6 +250,7 @@ export default class Generator {
 	getUniqueNameMaker ( params ) {
 		const localUsedNames = new Set( params );
 		return name => {
+			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++}` );
 			localUsedNames.add( alias );

src/generators/dom/visitors/Component/Component.js

@@ -140,7 +140,7 @@ export default function visitComponent ( generator, block, state, node ) {
 		if ( local.bindings.length ) {
 			const initialData = block.getUniqueName( `${name}_initial_data` );
 
-			statements.push( `var ${name}_initial_data = ${initialPropString};` );
+			statements.push( `var ${initialData} = ${initialPropString};` );
 
 			local.bindings.forEach( binding => {
 				statements.push( `if ( ${binding.prop} in ${binding.obj} ) ${initialData}.${binding.name} = ${binding.value};` );

src/generators/dom/visitors/Element/EventHandler.js

@@ -32,13 +32,14 @@ export default function visitEventHandler ( generator, block, state, node, attri
 	const declarations = usedContexts.map( name => {
 		if ( name === 'root' ) {
 			if ( shouldHoist ) state.usesComponent = true;
-			return 'var root = component.get();';
+			return `var root = ${block.component}.get();`;
 		}
 
 		const listName = block.listNames.get( name );
 		const indexName = block.indexNames.get( name );
+		const contextName = block.contexts.get( name );
 
-		return `var ${listName} = ${_this}._svelte.${listName}, ${indexName} = ${_this}._svelte.${indexName}, ${name} = ${listName}[${indexName}];`;
+		return `var ${listName} = ${_this}._svelte.${listName}, ${indexName} = ${_this}._svelte.${indexName}, ${contextName} = ${listName}[${indexName}];`;
 	});
 
 	// get a name for the event handler that is globally unique
@@ -52,7 +53,7 @@ export default function visitEventHandler ( generator, block, state, node, attri
 
 	if ( state.usesComponent ) {
 		// TODO the element needs to know to create `thing._svelte = { component: component }`
-		handlerBody.addLine( `var component = this._svelte.component;` );
+		handlerBody.addLine( `var ${block.component} = this._svelte.component;` );
 	}
 
 	declarations.forEach( declaration => {

src/generators/dom/visitors/Element/meta/Window.js

@@ -32,7 +32,7 @@ export default function visitWindow ( generator, block, node ) {
 			const flattened = flattenReference( attribute.expression.callee );
 			if ( flattened.name !== 'event' && flattened.name !== 'this' ) {
 				// allow event.stopPropagation(), this.select() etc
-				generator.code.prependRight( attribute.expression.start, 'component.' );
+				generator.code.prependRight( attribute.expression.start, `${block.component}.` );
 			}
 
 			const handlerName = block.getUniqueName( `onwindow${attribute.name}` );
@@ -96,7 +96,7 @@ export default function visitWindow ( generator, block, node ) {
 		if ( generator.options.dev ) handlerBody.addLine( `component._updatingReadonlyProperty = true;` );
 
 		handlerBody.addBlock( deindent`
-			component.set({
+			${block.component}.set({
 				${props}
 			});
 		` );
@@ -126,19 +126,19 @@ export default function visitWindow ( generator, block, node ) {
 		block.builders.create.addBlock( deindent`
 			function ${observerCallback} () {
 				if ( ${lock} ) return;
-				var x = ${bindings.scrollX ? `component.get( '${bindings.scrollX}' )` : `window.scrollX`};
+				var x = ${bindings.scrollX ? `${block.component}.get( '${bindings.scrollX}' )` : `window.scrollX`};
-				var y = ${bindings.scrollY ? `component.get( '${bindings.scrollY}' )` : `window.scrollY`};
+				var y = ${bindings.scrollY ? `${block.component}.get( '${bindings.scrollY}' )` : `window.scrollY`};
 				window.scrollTo( x, y );
 			};
 		` );
 
-		if ( bindings.scrollX ) block.builders.create.addLine( `component.observe( '${bindings.scrollX}', ${observerCallback} );` );
+		if ( bindings.scrollX ) block.builders.create.addLine( `${block.component}.observe( '${bindings.scrollX}', ${observerCallback} );` );
-		if ( bindings.scrollY ) block.builders.create.addLine( `component.observe( '${bindings.scrollY}', ${observerCallback} );` );
+		if ( bindings.scrollY ) block.builders.create.addLine( `${block.component}.observe( '${bindings.scrollY}', ${observerCallback} );` );
 	} else if ( bindings.scrollX || bindings.scrollY ) {
 		const isX = !!bindings.scrollX;
 
 		block.builders.create.addBlock( deindent`
-			component.observe( '${bindings.scrollX || bindings.scrollY}', function ( ${isX ? 'x' : 'y'} ) {
+			${block.component}.observe( '${bindings.scrollX || bindings.scrollY}', function ( ${isX ? 'x' : 'y'} ) {
 				if ( ${lock} ) return;
 				window.scrollTo( ${isX ? 'x, window.scrollY' : 'window.scrollX, y' } );
 			});
@@ -150,7 +150,7 @@ export default function visitWindow ( generator, block, node ) {
 		const handlerName = block.getUniqueName( `onlinestatuschanged` );
 		block.builders.create.addBlock( deindent`
 			function ${handlerName} ( event ) {
-				component.set({ ${bindings.online}: navigator.onLine });
+				${block.component}.set({ ${bindings.online}: navigator.onLine });
 			};
 			window.addEventListener( 'online', ${handlerName} );
 			window.addEventListener( 'offline', ${handlerName} );

test/helpers.js

@@ -10,9 +10,18 @@ sourceMapSupport.install();
 
 // for coverage purposes, we need to test source files,
 // but for sanity purposes, we need to test dist files
-export const svelte = process.env.COVERAGE ?
+export function loadSvelte ( test ) {
-	require( '../src/index.js' ) :
+	if ( test ) global.__svelte_test = true;
-	require( '../compiler/svelte.js' );
+
+	const resolved = process.env.COVERAGE ?
+		require.resolve( '../src/index.js' ) :
+		require.resolve( '../compiler/svelte.js' );
+
+	delete require.cache[ resolved ];
+	return require( resolved );
+}
+
+export const svelte = loadSvelte();
 
 export function exists ( path ) {
 	try {

test/runtime/index.js

@@ -5,7 +5,9 @@ import * as fs from 'fs';
 import * as acorn from 'acorn';
 import * as babel from 'babel-core';
 
-import { addLineNumbers, loadConfig, svelte, env, setupHtmlEqual } from '../helpers.js';
+import { addLineNumbers, loadConfig, loadSvelte, env, setupHtmlEqual } from '../helpers.js';
+
+let svelte;
 
 let showCompiledCode = false;
 let compileOptions = null;
@@ -33,7 +35,10 @@ require.extensions[ '.html' ] = function ( module, filename ) {
 const Object_assign = Object.assign;
 
 describe( 'runtime', () => {
-	before( setupHtmlEqual );
+	before( () => {
+		svelte = loadSvelte( true );
+		return setupHtmlEqual();
+	});
 
 	function runTest ( dir, shared ) {
 		if ( dir[0] === '.' ) return;