snapshot

compiler/parse/__test__.js

@@ -1,196 +0,0 @@
-import * as assert from 'assert';
-import parse from './index.js';
-
-describe( 'parse', () => {
-	it( 'is a function', () => {
-		assert.equal( typeof parse, 'function' );
-	});
-
-	it( 'parses a self-closing element', () => {
-		const template = '<div/>';
-
-		assert.deepEqual( parse( template ), {
-			html: {
-				start: 0,
-				end: 6,
-				type: 'Fragment',
-				children: [
-					{
-						start: 0,
-						end: 6,
-						type: 'Element',
-						name: 'div',
-						attributes: [],
-						children: []
-					}
-				]
-			},
-			css: null,
-			js: null
-		});
-	});
-
-	it( 'parses an element with text', () => {
-		const template = `<span>test</span>`;
-
-		assert.deepEqual( parse( template ), {
-			html: {
-				start: 0,
-				end: 17,
-				type: 'Fragment',
-				children: [
-					{
-						start: 0,
-						end: 17,
-						type: 'Element',
-						name: 'span',
-						attributes: [],
-						children: [
-							{
-								start: 6,
-								end: 10,
-								type: 'Text',
-								data: 'test'
-							}
-						]
-					}
-				]
-			},
-			css: null,
-			js: null
-		});
-	});
-
-	it( 'parses an element with a mustache tag', () => {
-		const template = `<h1>hello {{name}}!</h1>`;
-
-		assert.deepEqual( parse( template ), {
-			html: {
-				start: 0,
-				end: 24,
-				type: 'Fragment',
-				children: [
-					{
-						start: 0,
-						end: 24,
-						type: 'Element',
-						name: 'h1',
-						attributes: [],
-						children: [
-							{
-								start: 4,
-								end: 10,
-								type: 'Text',
-								data: 'hello '
-							},
-							{
-								start: 10,
-								end: 18,
-								type: 'MustacheTag',
-								expression: {
-									start: 12,
-									end: 16,
-									type: 'Identifier',
-									name: 'name'
-								}
-							},
-							{
-								start: 18,
-								end: 19,
-								type: 'Text',
-								data: '!'
-							}
-						]
-					}
-				]
-			},
-			css: null,
-			js: null
-		});
-	});
-
-	it( 'parses an {{#if}}...{{/if}} block', () => {
-		const template = `{{#if foo}}bar{{/if}}`;
-
-		assert.deepEqual( parse( template ), {
-			html: {
-				start: 0,
-				end: 21,
-				type: 'Fragment',
-				children: [
-					{
-						start: 0,
-						end: 21,
-						type: 'IfBlock',
-						expression: {
-							start: 6,
-							end: 9,
-							type: 'Identifier',
-							name: 'foo'
-						},
-						children: [
-							{
-								start: 11,
-								end: 14,
-								type: 'Text',
-								data: 'bar'
-							}
-						]
-					}
-				]
-			},
-			css: null,
-			js: null
-		});
-	});
-
-	it( 'parses an {{#each}}...{{/each}} block', () => {
-		const template = `{{#each animals as animal}}<p>{{animal}}</p>{{/each}}`;
-
-		assert.deepEqual( parse( template ), {
-			html: {
-				start: 0,
-				end: 53,
-				type: 'Fragment',
-				children: [
-					{
-						start: 0,
-						end: 53,
-						type: 'EachBlock',
-						expression: {
-							start: 8,
-							end: 15,
-							type: 'Identifier',
-							name: 'animals'
-						},
-						context: 'animal',
-						children: [
-							{
-								start: 27,
-								end: 44,
-								type: 'Element',
-								name: 'p',
-								attributes: [],
-								children: [
-									{
-										start: 30,
-										end: 40,
-										type: 'MustacheTag',
-										expression: {
-											start: 32,
-											end: 38,
-											type: 'Identifier',
-											name: 'animal'
-										}
-									}
-								]
-							}
-						]
-					}
-				]
-			},
-			css: null,
-			js: null
-		});
-	});
-});

compiler/parse/index.js

@@ -63,20 +63,21 @@ export default function parse ( template ) {
 			}
 
 			this.allowWhitespace();
-		}
+		},
-	};
 
-	const html = {
+		html: {
-		start: 0,
+			start: 0,
-		end: template.length,
+			end: template.length,
-		type: 'Fragment',
+			type: 'Fragment',
-		children: []
+			children: []
-	};
+		},
 
-	let css = null;
+		css: null,
-	let js = null;
 
-	parser.stack.push( html );
+		js: null
+	};
+
+	parser.stack.push( parser.html );
 
 	let state = fragment;
 
@@ -84,5 +85,9 @@ export default function parse ( template ) {
 		state = state( parser ) || fragment;
 	}
 
-	return { html, css, js };
+	return {
+		html: parser.html,
+		css: parser.css,
+		js: parser.js
+	};
 }

compiler/parse/read/script.js

@@ -0,0 +1,25 @@
+import { parse, tokenizer, tokTypes } from 'acorn';
+
+export default function readScript ( parser, start, attributes ) {
+	const scriptStart = parser.index;
+	let scriptEnd = null;
+
+	const js = {
+		start,
+		end: null,
+		attributes,
+		content: null
+	};
+
+	const endPattern = /\s*<\/script\>/g;
+
+	for ( const token of tokenizer( parser.remaining() ) ) {
+		endPattern.lastIndex = scriptStart + token.end;
+		if ( endPattern.test( parser.template ) ) {
+			scriptEnd = scriptStart + token.end;
+			break;
+		}
+	}
+
+	js.content = parse( )
+}

compiler/parse/state/tag.js

@@ -1,8 +1,22 @@
 import readExpression from '../read/expression.js';
+import readScript from '../read/script.js';
+import readStyle from '../read/style.js';
 
 const validTagName = /^[a-zA-Z]{1,}:?[a-zA-Z0-9\-]*/;
 const voidElementNames = /^(?:area|base|br|col|command|doctype|embed|hr|img|input|keygen|link|meta|param|source|track|wbr)$/i;
 
+const specials = {
+	script: {
+		read: readScript,
+		property: 'js'
+	},
+
+	style: {
+		read: readStyle,
+		property: 'css'
+	}
+};
+
 export default function tag ( parser ) {
 	const start = parser.index++;
 
@@ -30,6 +44,20 @@ export default function tag ( parser ) {
 
 	parser.allowWhitespace();
 
+	// special cases – <script> and <style>
+	if ( name in specials ) {
+		const special = specials[ name ];
+
+		if ( parser[ special.id ] ) {
+			parser.index = start;
+			parser.error( `You can only have one <${name}> tag per component` );
+		}
+
+		parser.eat( '>', true );
+		parser[ special.id ] = special.read( parser, start, attributes );
+		return;
+	}
+
 	const element = {
 		start,
 		end: null, // filled in later
@@ -43,9 +71,7 @@ export default function tag ( parser ) {
 
 	const selfClosing = parser.eat( '/' ) || voidElementNames.test( name );
 
-	if ( !parser.eat( '>' ) ) {
+	parser.eat( '>', true );
-		parser.error( `Expected >` );
-	}
 
 	if ( selfClosing ) {
 		element.end = parser.index;

test/compiler/default-data/_config.js

@@ -0,0 +1,6 @@
+import * as assert from 'assert';
+
+export default {
+	description: 'hello world',
+	html: '<h1>Hello world!</h1>'
+};

test/compiler/default-data/main.svelte

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

test/parser/each-block/input.svelte

@@ -0,0 +1 @@
+{{#each animals as animal}}<p>{{animal}}</p>{{/each}}

test/parser/each-block/output.json

@@ -0,0 +1,45 @@
+{
+	"html": {
+		"start": 0,
+		"end": 53,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 53,
+				"type": "EachBlock",
+				"expression": {
+					"start": 8,
+					"end": 15,
+					"type": "Identifier",
+					"name": "animals"
+				},
+				"context": "animal",
+				"children": [
+					{
+						"start": 27,
+						"end": 44,
+						"type": "Element",
+						"name": "p",
+						"attributes": [],
+						"children": [
+							{
+								"start": 30,
+								"end": 40,
+								"type": "MustacheTag",
+								"expression": {
+									"start": 32,
+									"end": 38,
+									"type": "Identifier",
+									"name": "animal"
+								}
+							}
+						]
+					}
+				]
+			}
+		]
+	},
+	"css": null,
+	"js": null
+}

test/parser/element-with-mustache/input.svelte

@@ -0,0 +1 @@
+<h1>hello {{name}}!</h1>

test/parser/element-with-mustache/output.json

@@ -0,0 +1,43 @@
+{
+	"html": {
+		"start": 0,
+		"end": 24,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 24,
+				"type": "Element",
+				"name": "h1",
+				"attributes": [],
+				"children": [
+					{
+						"start": 4,
+						"end": 10,
+						"type": "Text",
+						"data": "hello "
+					},
+					{
+						"start": 10,
+						"end": 18,
+						"type": "MustacheTag",
+						"expression": {
+							"start": 12,
+							"end": 16,
+							"type": "Identifier",
+							"name": "name"
+						}
+					},
+					{
+						"start": 18,
+						"end": 19,
+						"type": "Text",
+						"data": "!"
+					}
+				]
+			}
+		]
+	},
+	"css": null,
+	"js": null
+}

test/parser/element-with-text/input.svelte

@@ -0,0 +1 @@
+<span>test</span>

test/parser/element-with-text/output.json

@@ -0,0 +1,26 @@
+{
+	"html": {
+		"start": 0,
+		"end": 17,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 17,
+				"type": "Element",
+				"name": "span",
+				"attributes": [],
+				"children": [
+					{
+						"start": 6,
+						"end": 10,
+						"type": "Text",
+						"data": "test"
+					}
+				]
+			}
+		]
+	},
+	"css": null,
+	"js": null
+}

test/parser/if-block/input.svelte

@@ -0,0 +1 @@
+{{#if foo}}bar{{/if}}

test/parser/if-block/output.json

@@ -0,0 +1,30 @@
+{
+	"html": {
+		"start": 0,
+		"end": 21,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 21,
+				"type": "IfBlock",
+				"expression": {
+					"start": 6,
+					"end": 9,
+					"type": "Identifier",
+					"name": "foo"
+				},
+				"children": [
+					{
+						"start": 11,
+						"end": 14,
+						"type": "Text",
+						"data": "bar"
+					}
+				]
+			}
+		]
+	},
+	"css": null,
+	"js": null
+}

test/parser/script/input.svelte

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

test/parser/script/output.json

@@ -0,0 +1,43 @@
+{
+	"html": {
+		"start": 0,
+		"end": 24,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 24,
+				"type": "Element",
+				"name": "h1",
+				"attributes": [],
+				"children": [
+					{
+						"start": 4,
+						"end": 10,
+						"type": "Text",
+						"data": "Hello "
+					},
+					{
+						"start": 10,
+						"end": 18,
+						"type": "MustacheTag",
+						"expression": {
+							"start": 12,
+							"end": 16,
+							"type": "Identifier",
+							"name": "name"
+						}
+					},
+					{
+						"start": 18,
+						"end": 19,
+						"type": "Text",
+						"data": "!"
+					}
+				]
+			}
+		]
+	},
+	"css": null,
+	"js": null
+}

test/parser/self-closing-element/input.svelte

@@ -0,0 +1 @@
+<div/>

test/parser/self-closing-element/output.json

@@ -0,0 +1,19 @@
+{
+	"html": {
+		"start": 0,
+		"end": 6,
+		"type": "Fragment",
+		"children": [
+			{
+				"start": 0,
+				"end": 6,
+				"type": "Element",
+				"name": "div",
+				"attributes": [],
+				"children": []
+			}
+		]
+	},
+	"css": null,
+	"js": null
+}

test/test.js

@@ -1,4 +1,5 @@
 import { compile } from '../compiler/index.js';
+import parse from '../compiler/parse/index.js';
 import * as assert from 'assert';
 import * as path from 'path';
 import * as fs from 'fs';
@@ -13,99 +14,126 @@ require.extensions[ '.svelte' ] = function ( module, filename ) {
 	return module._compile( code, filename );
 };
 
-describe( 'svelte', () => {
+function exists ( path ) {
-	function loadConfig ( dir ) {
+	try {
-		try {
+		fs.statSync( path );
-			return require( `./samples/${dir}/_config.js` ).default;
+		return true;
-		} catch ( err ) {
+	} catch ( err ) {
-			if ( err.code === 'E_NOT_FOUND' ) {
+		return false;
-				return {};
-			}
-
-			throw err;
-		}
 	}
+}
 
-	function env () {
+describe( 'svelte', () => {
-		return new Promise( ( fulfil, reject ) => {
+	describe( 'parser', () => {
-			jsdom.env( '<main></main>', ( err, window ) => {
+		fs.readdirSync( 'test/parser' ).forEach( dir => {
-				if ( err ) {
+			if ( dir[0] === '.' ) return;
-					reject( err );
-				} else {
-					global.document = window.document;
-					fulfil( window );
-				}
-			});
-		});
-	}
 
-	fs.readdirSync( 'test/samples' ).forEach( dir => {
+			const solo = exists( `test/parser/${dir}/solo` );
-		if ( dir[0] === '.' ) return;
 
-		const config = loadConfig( dir );
+			( solo ? it.only : it )( dir, () => {
+				const input = fs.readFileSync( `test/parser/${dir}/input.svelte`, 'utf-8' ).trim();
+				const actual = parse( input );
+				const expected = require( `./parser/${dir}/output.json` );
 
-		( config.solo ? it.only : it )( dir, () => {
+				assert.deepEqual( actual, expected );
-			let compiled;
+			});
+		});
+	});
 
+	describe( 'compiler', () => {
+		function loadConfig ( dir ) {
 			try {
-				const source = fs.readFileSync( `test/samples/${dir}/main.svelte`, 'utf-8' );
+				return require( `./compiler/${dir}/_config.js` ).default;
-				compiled = compile( source );
 			} catch ( err ) {
-				if ( config.compileError ) {
+				if ( err.code === 'E_NOT_FOUND' ) {
-					config.compileError( err );
+					return {};
-					return;
-				} else {
-					throw err;
 				}
+
+				throw err;
 			}
+		}
 
-			const { code } = compiled;
+		function env () {
-			const withLineNumbers = code.split( '\n' ).map( ( line, i ) => {
+			return new Promise( ( fulfil, reject ) => {
-				i = String( i + 1 );
+				jsdom.env( '<main></main>', ( err, window ) => {
-				while ( i.length < 3 ) i = ` ${i}`;
+					if ( err ) {
+						reject( err );
+					} else {
+						global.document = window.document;
+						fulfil( window );
+					}
+				});
+			});
+		}
 
-				return `${i}: ${line.replace( /^\t+/, match => match.split( '\t' ).join( '    ' ) )}`;
+		fs.readdirSync( 'test/compiler' ).forEach( dir => {
-			}).join( '\n' );
+			if ( dir[0] === '.' ) return;
 
-			cache[ path.resolve( `test/samples/${dir}/main.svelte` ) ] = code;
+			const config = loadConfig( dir );
 
-			let factory;
+			( config.solo ? it.only : it )( dir, () => {
+				let compiled;
 
-			try {
+				try {
-				factory = require( `./samples/${dir}/main.svelte` ).default;
+					const source = fs.readFileSync( `test/compiler/${dir}/main.svelte`, 'utf-8' );
-			} catch ( err ) {
+					compiled = compile( source );
-				console.log( withLineNumbers ); // eslint-disable-line no-console
+				} catch ( err ) {
-				throw err;
+					if ( config.compileError ) {
-			}
+						config.compileError( err );
+						return;
+					} else {
+						throw err;
+					}
+				}
 
-			if ( config.show ) {
+				const { code } = compiled;
-				console.log( withLineNumbers ); // eslint-disable-line no-console
+				const withLineNumbers = code.split( '\n' ).map( ( line, i ) => {
-			}
+					i = String( i + 1 );
+					while ( i.length < 3 ) i = ` ${i}`;
 
-			return env()
+					return `${i}: ${line.replace( /^\t+/, match => match.split( '\t' ).join( '    ' ) )}`;
-				.then( window => {
+				}).join( '\n' );
-					const target = window.document.querySelector( 'main' );
 
-					const component = factory({
+				cache[ path.resolve( `test/compiler/${dir}/main.svelte` ) ] = code;
-						target,
-						data: config.data
-					});
 
-					if ( config.html ) {
+				let factory;
-						assert.equal( target.innerHTML, config.html );
-					}
 
-					if ( config.test ) {
+				try {
-						config.test( component, target );
+					factory = require( `./compiler/${dir}/main.svelte` ).default;
-					} else {
+				} catch ( err ) {
-						component.teardown();
+					console.log( withLineNumbers ); // eslint-disable-line no-console
-						assert.equal( target.innerHTML, '' );
-					}
-				})
-				.catch( err => {
-					if ( !config.show ) console.log( withLineNumbers ); // eslint-disable-line no-console
 					throw err;
-				});
+				}
+
+				if ( config.show ) {
+					console.log( withLineNumbers ); // eslint-disable-line no-console
+				}
+
+				return env()
+					.then( window => {
+						const target = window.document.querySelector( 'main' );
+
+						const component = factory({
+							target,
+							data: config.data
+						});
+
+						if ( config.html ) {
+							assert.equal( target.innerHTML, config.html );
+						}
+
+						if ( config.test ) {
+							config.test( component, target );
+						} else {
+							component.teardown();
+							assert.equal( target.innerHTML, '' );
+						}
+					})
+					.catch( err => {
+						if ( !config.show ) console.log( withLineNumbers ); // eslint-disable-line no-console
+						throw err;
+					});
+			});
 		});
 	});
 });