diff --git a/src/generators/Generator.js b/src/generators/Generator.js index 272e843142e3..83f726cab6f2 100644 --- a/src/generators/Generator.js +++ b/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 ); diff --git a/src/generators/dom/visitors/Component/Component.js b/src/generators/dom/visitors/Component/Component.js index 5446d5427609..5e210e976276 100644 --- a/src/generators/dom/visitors/Component/Component.js +++ b/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};` ); diff --git a/src/generators/dom/visitors/Element/EventHandler.js b/src/generators/dom/visitors/Element/EventHandler.js index 1099238b83cd..3800b528a5db 100644 --- a/src/generators/dom/visitors/Element/EventHandler.js +++ b/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 => { diff --git a/src/generators/dom/visitors/Element/meta/Window.js b/src/generators/dom/visitors/Element/meta/Window.js index 5bf02b2774a1..269596432c7d 100644 --- a/src/generators/dom/visitors/Element/meta/Window.js +++ b/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 y = ${bindings.scrollY ? `component.get( '${bindings.scrollY}' )` : `window.scrollY`}; + var x = ${bindings.scrollX ? `${block.component}.get( '${bindings.scrollX}' )` : `window.scrollX`}; + 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.scrollY ) block.builders.create.addLine( `component.observe( '${bindings.scrollY}', ${observerCallback} );` ); + if ( bindings.scrollX ) block.builders.create.addLine( `${block.component}.observe( '${bindings.scrollX}', ${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} ); diff --git a/test/helpers.js b/test/helpers.js index 905233280c5d..4318d6d3644e 100644 --- a/test/helpers.js +++ b/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 ? - require( '../src/index.js' ) : - require( '../compiler/svelte.js' ); +export function loadSvelte ( test ) { + if ( test ) global.__svelte_test = true; + + 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 { diff --git a/test/runtime/index.js b/test/runtime/index.js index f4926388c1f9..e67192cbc66c 100644 --- a/test/runtime/index.js +++ b/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;