Merge pull request #215 from sveltejs/non-standalone

Non-standalone components

Author: Rich-Harris

src/generators/dom/index.js

@@ -302,15 +302,26 @@ export default function dom ( parsed, source, options, names ) {
 		builders.main.addBlock( `${name}.prototype = template.methods;` );
 	}
 
-	builders.main.addBlock( deindent`
-		${name}.prototype.get = ${shared.get};
+	const standalone = options.standalone !== false;
+
+	builders.main.addBlock( standalone ?
+		deindent`
+			${name}.prototype.get = ${shared.get};
 
-		${name}.prototype.fire = ${shared.fire};
+			${name}.prototype.fire = ${shared.fire};
 
-		${name}.prototype.observe = ${shared.observe};
+			${name}.prototype.observe = ${shared.observe};
 
-		${name}.prototype.on = ${shared.on};
+			${name}.prototype.on = ${shared.on};
+		` :
+		deindent`
+			${name}.prototype.get = get;
+			${name}.prototype.fire = fire;
+			${name}.prototype.observe = observe;
+			${name}.prototype.on = on;
+		` );
 
+	builders.main.addBlock( deindent`
 		${name}.prototype.set = function set ( newState ) {
 			${builders.set}
 		};
@@ -325,12 +336,23 @@ export default function dom ( parsed, source, options, names ) {
 		};
 	` );
 
-	builders.main.addBlock( shared.dispatchObservers.toString() );
+	if ( standalone ) {
+		builders.main.addBlock( shared.dispatchObservers.toString() );
 
-	Object.keys( generator.uses ).forEach( key => {
-		const fn = shared[ key ]; // eslint-disable-line import/namespace
-		builders.main.addBlock( fn.toString() );
-	});
+		Object.keys( generator.uses ).forEach( key => {
+			const fn = shared[ key ]; // eslint-disable-line import/namespace
+			builders.main.addBlock( fn.toString() );
+		});
+	} else {
+		if ( format !== 'es' ) {
+			throw new Error( `Non-standalone components must be compiled to ES2015 modules (format: 'es')` );
+		}
+
+		const names = [ 'get', 'fire', 'observe', 'on', 'dispatchObservers' ].concat( Object.keys( generator.uses ) );
+		builders.main.addLineAtStart(
+			`import { ${names.join( ', ' )} } from 'svelte/shared.js'`
+		);
+	}
 
 	return generator.generate( builders.main.toString(), options, { name, format } );
 }

test/generate.js

@@ -6,17 +6,16 @@ import * as acorn from 'acorn';
 
 import { svelte, env, setupHtmlEqual } from './helpers.js';
 
-const cache = {};
-
 let showCompiledCode = false;
 let compileOptions = null;
 
 require.extensions[ '.html' ] = function ( module, filename ) {
 	const options = Object.assign({ filename }, compileOptions );
-	const code = cache[ filename ] || ( cache[ filename ] = svelte.compile( fs.readFileSync( filename, 'utf-8' ), options ).code );
+	const { code } = svelte.compile( fs.readFileSync( filename, 'utf-8' ), options );
+
 	if ( showCompiledCode ) console.log( addLineNumbers( code ) ); // eslint-disable-line no-console
 
-	return module._compile( code, filename );
+	return module._compile( code.replace( 'svelte/shared.js', path.resolve( 'shared.js' ) ), filename );
 };
 
 function addLineNumbers ( code ) {
@@ -30,7 +29,9 @@ function addLineNumbers ( code ) {
 
 function loadConfig ( dir ) {
 	try {
-		return require( `./generator/${dir}/_config.js` ).default;
+		const resolved = require.resolve( `./generator/${dir}/_config.js` );
+		delete require.cache[ resolved ];
+		return require( resolved ).default;
 	} catch ( err ) {
 		if ( err.code === 'E_NOT_FOUND' ) {
 			return {};
@@ -43,7 +44,7 @@ function loadConfig ( dir ) {
 describe( 'generate', () => {
 	before( setupHtmlEqual );
 
-	fs.readdirSync( 'test/generator' ).forEach( dir => {
+	function runTest ( dir, standalone ) {
 		if ( dir[0] === '.' ) return;
 
 		const config = loadConfig( dir );
@@ -53,6 +54,7 @@ describe( 'generate', () => {
 
 			showCompiledCode = config.show;
 			compileOptions = config.compileOptions || {};
+			compileOptions.standalone = standalone;
 
 			try {
 				const source = fs.readFileSync( `test/generator/${dir}/main.html`, 'utf-8' );
@@ -78,7 +80,9 @@ describe( 'generate', () => {
 				throw err;
 			}
 
-			cache[ path.resolve( `test/generator/${dir}/main.html` ) ] = code;
+			Object.keys( require.cache ).filter( x => x.endsWith( '.html' ) ).forEach( file => {
+				delete require.cache[ file ];
+			});
 
 			let SvelteComponent;
 
@@ -117,5 +121,17 @@ describe( 'generate', () => {
 					throw err;
 				});
 		});
+	}
+
+	describe( 'standalone', () => {
+		fs.readdirSync( 'test/generator' ).forEach( dir => {
+			runTest( dir, true );
+		});
+	});
+
+	describe( 'non-standalone', () => {
+		fs.readdirSync( 'test/generator' ).forEach( dir => {
+			runTest( dir, false );
+		});
 	});
 });

test/generator/component-ref/Widget.html

@@ -1 +1,9 @@
 <p>i am a widget</p>
+
+<script>
+	export default {
+		onrender () {
+			this.isWidget = true;
+		}
+	};
+</script>

test/generator/component-ref/_config.js

@@ -1,9 +1,7 @@
-import Widget from './Widget.html';
-
 export default {
 	html: '<div><p>i am a widget</p></div>',
 	test ( assert, component ) {
 		const widget = component.refs.widget;
-		assert.ok( widget instanceof Widget );
+		assert.ok( widget.isWidget );
 	}
 };