Merge branch 'master' of https://github.com/sveltejs/svelte

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Svelte changelog
 
+## 1.2.1
+
+* Server-side rendering is available as a compiler option (`generate: 'ssr'`) ([#159](https://github.com/sveltejs/svelte/pull/159))
+* Allow call expressions where function is not in `helpers` ([#163](https://github.com/sveltejs/svelte/issues/163))
+
 ## 1.2.0
 
 * Server-side rendering of HTML ([#148](https://github.com/sveltejs/svelte/pull/148)) and CSS ([#154](https://github.com/sveltejs/svelte/pull/154))

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "The magical disappearing UI framework",
   "main": "compiler/svelte.js",
   "files": [

rollup.config.main.js

@@ -12,5 +12,8 @@ export default {
 		commonjs()
 	],
 	external: [ 'magic-string' ],
+	globals: {
+		'magic-string': 'MagicString'
+	},
 	sourceMap: true
 };

rollup.config.ssr.js

@@ -12,7 +12,7 @@ export default {
 		nodeResolve({ jsnext: true, module: true }),
 		commonjs()
 	],
-	external: [ path.resolve( 'src/index.js' ), 'magic-string' ],
+	external: [ path.resolve( 'src/index.js' ), 'fs', 'magic-string' ],
 	paths: {
 		[ path.resolve( 'src/index.js' ) ]: '../compiler/svelte.js'
 	},

src/generate/index.js

@@ -137,8 +137,8 @@ export default function generate ( parsed, source, options, names ) {
 					if ( isReference( node, parent ) ) {
 						const { name } = flattenReference( node );
 
-						if ( parent && parent.type === 'CallExpression' && node === parent.callee ) {
-							if ( generator.helpers[ name ] ) generator.code.prependRight( node.start, `template.helpers.` );
+						if ( parent && parent.type === 'CallExpression' && node === parent.callee && generator.helpers[ name ] ) {
+							generator.code.prependRight( node.start, `template.helpers.` );
 							return;
 						}
 
@@ -588,8 +588,7 @@ export default function generate ( parsed, source, options, names ) {
 	const intro = getIntro( format, options, imports );
 	if ( intro ) addString( intro );
 
-	// a filename is necessary for sourcemap generation
-	const filename = options.filename || 'SvelteComponent.html';
+	const { filename } = options;
 
 	parts.forEach( str => {
 		const chunk = str.replace( pattern, '' );

src/index.js

@@ -1,23 +1,36 @@
 import parse from './parse/index.js';
 import validate from './validate/index.js';
 import generate from './generate/index.js';
+import generateSSR from './server-side-rendering/compile.js';
 
-export function compile ( source, options = {} ) {
-	const parsed = parse( source, options );
+function normalizeOptions ( options ) {
+	return Object.assign( {
+		generate: 'dom',
+
+		// a filename is necessary for sourcemap generation
+		filename: 'SvelteComponent.html',
 
-	if ( !options.onwarn ) {
-		options.onwarn = warning => {
+		onwarn: warning => {
 			if ( warning.loc ) {
 				console.warn( `(${warning.loc.line}:${warning.loc.column}) – ${warning.message}` ); // eslint-disable-line no-console
 			} else {
 				console.warn( warning.message ); // eslint-disable-line no-console
 			}
-		};
 		}
+	}, options );
+}
+
+export function compile ( source, _options ) {
+	const options = normalizeOptions( _options );
+	const parsed = parse( source, options );
 
 	const { names } = validate( parsed, source, options );
 
-	return generate( parsed, source, options, names );
+	const compiler = options.generate === 'ssr'
+		? generateSSR
+		: generate;
+
+	return compiler( parsed, source, options, names );
 }
 
 export { parse, validate };

src/server-side-rendering/compile.js

@@ -1,4 +1,3 @@
-import { parse, validate } from '../index.js';
 import { walk } from 'estree-walker';
 import deindent from '../utils/deindent.js';
 import isReference from '../utils/isReference.js';
@@ -8,10 +7,7 @@ import processCss from '../generate/css/process.js';
 
 const voidElementNames = /^(?:area|base|br|col|command|doctype|embed|hr|img|input|keygen|link|meta|param|source|track|wbr)$/i;
 
-export default function compile ( source, { filename }) {
-	const parsed = parse( source, {} );
-	validate( parsed, source, {} );
-
+export default function compile ( parsed, source, { filename }) {
 	const code = new MagicString( source );
 
 	const templateProperties = {};
@@ -117,6 +113,10 @@ export default function compile ( source, { filename }) {
 	let elementDepth = 0;
 
 	const stringifiers = {
+		Comment () {
+			return '';
+		},
+
 		Component ( node ) {
 			const props = node.attributes.map( attribute => {
 				let value;

src/server-side-rendering/register.js

@@ -1,7 +1,10 @@
 import * as fs from 'fs';
-import compile from './compile.js';
+import { compile } from '../index.js';
 
 require.extensions[ '.html' ] = function ( module, filename ) {
-	const { code } = compile( fs.readFileSync( filename, 'utf-8' ), { filename });
+	const { code } = compile( fs.readFileSync( filename, 'utf-8' ), {
+		filename,
+		generate: 'ssr'
+	});
 	return module._compile( code, filename );
 };

test/generator/computed-function/_config.js

@@ -0,0 +1,14 @@
+export default {
+	html: '<p>50</p>',
+
+	test ( assert, component, target ) {
+		component.set({ range: [ 50, 100 ] });
+		assert.htmlEqual( target.innerHTML, '<p>75</p>' );
+
+		component.set({ range: [ 50, 60 ] });
+		assert.htmlEqual( target.innerHTML, '<p>55</p>' );
+
+		component.set({ x: 8 });
+		assert.htmlEqual( target.innerHTML, '<p>58</p>' );
+	}
+};

test/generator/computed-function/main.html

@@ -0,0 +1,20 @@
+<p>{{scale(x)}}</p>
+
+<script>
+	export default {
+		data: () => ({
+			x: 5,
+			domain: [ 0, 10 ],
+			range: [ 0, 100 ]
+		}),
+
+		computed: {
+			scale: ( domain, range ) => {
+				return num => {
+					const t = domain[0] + ( num - domain[0] ) / ( domain[1] - domain[0] );
+					return range[0] + t * ( range[1] - range[0] );
+				}
+			}
+		}
+	};
+</script>

test/generator/default-data-function/_config.js

@@ -0,0 +1,8 @@
+export default {
+	html: '<h1>Hello world!</h1>',
+
+	test ( assert, component, target ) {
+		component.set({ name: () => 'everybody' });
+		assert.htmlEqual( target.innerHTML, '<h1>Hello everybody!</h1>' );
+	}
+};

test/generator/default-data-function/main.html

@@ -0,0 +1,9 @@
+<h1>Hello {{name()}}!</h1>
+
+<script>
+	export default {
+		data: () => ({
+			name: () => 'world'
+		})
+	};
+</script>

test/server-side-rendering/comment/_actual.html

@@ -0,0 +1,3 @@
+<p>before</p>
+	 
+	 <p>after</p>

test/server-side-rendering/comment/_expected.html

@@ -0,0 +1,2 @@
+<p>before</p>
+<p>after</p>

test/server-side-rendering/comment/main.html

@@ -0,0 +1,3 @@
+<p>before</p>
+<!-- a comment -->
+<p>after</p>