Merge branch 'master' into codegen

package.json

@@ -16,12 +16,8 @@
     "codecov": "codecov",
     "precodecov": "npm run coverage",
     "lint": "eslint src test/*.js",
-    "build": "npm run build:main && npm run build:shared && npm run build:ssr",
+    "build": "node src/shared/_build.js && rollup -c",
-    "build:main": "node src/shared/_build.js && rollup -c rollup/rollup.config.main.js",
+    "dev": "node src/shared/_build.js && rollup -c -w",
-    "build:shared": "rollup -c rollup/rollup.config.shared.js",
-    "build:ssr": "rollup -c rollup/rollup.config.ssr.js",
-    "dev": "node src/shared/_build.js && rollup -c rollup/rollup.config.main.js -w",
-    "dev:shared": "rollup -c rollup/rollup.config.shared.js -w",
     "pretest": "npm run build",
     "prepublish": "npm run build && npm run lint",
     "prettier": "prettier --use-tabs --single-quote --trailing-comma es5 --write \"src/**/*.ts\""
@@ -75,7 +71,7 @@
     "nyc": "^10.0.0",
     "prettier": "^1.4.1",
     "reify": "^0.4.4",
-    "rollup": "^0.39.0",
+    "rollup": "^0.43.0",
     "rollup-plugin-buble": "^0.15.0",
     "rollup-plugin-commonjs": "^7.0.0",
     "rollup-plugin-json": "^2.1.0",

rollup.config.js

@@ -0,0 +1,74 @@
+import path from 'path';
+import nodeResolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import json from 'rollup-plugin-json';
+import typescript from 'rollup-plugin-typescript';
+import buble from 'rollup-plugin-buble';
+
+const src = path.resolve('src');
+
+export default [
+	/* compiler/svelte.js */
+	{
+		entry: 'src/index.ts',
+		dest: 'compiler/svelte.js',
+		format: 'umd',
+		moduleName: 'svelte',
+		plugins: [
+			{
+				resolveId(importee, importer) {
+					// bit of a hack — TypeScript only really works if it can resolve imports,
+					// but they misguidedly chose to reject imports with file extensions. This
+					// means we need to resolve them here
+					if (
+						importer &&
+						importer.startsWith(src) &&
+						importee[0] === '.' &&
+						path.extname(importee) === ''
+					) {
+						return path.resolve(path.dirname(importer), `${importee}.ts`);
+					}
+				}
+			},
+			nodeResolve({ jsnext: true, module: true }),
+			commonjs(),
+			json(),
+			typescript({
+				include: 'src/**',
+				exclude: 'src/shared/**',
+				typescript: require('typescript')
+			})
+		],
+		sourceMap: true
+	},
+
+	/* ssr/register.js */
+	{
+		entry: 'src/server-side-rendering/register.js',
+		dest: 'ssr/register.js',
+		format: 'cjs',
+		plugins: [
+			nodeResolve({ jsnext: true, module: true }),
+			commonjs(),
+			buble({
+				include: 'src/**',
+				exclude: 'src/shared/**',
+				target: {
+					node: 4
+				}
+			})
+		],
+		external: [path.resolve('src/index.ts'), 'fs', 'path'],
+		paths: {
+			[path.resolve('src/index.ts')]: '../compiler/svelte.js'
+		},
+		sourceMap: true
+	},
+
+	/* shared.js */
+	{
+		entry: 'src/shared/index.js',
+		dest: 'shared.js',
+		format: 'es'
+	}
+];

rollup/rollup.config.main.js

@@ -1,39 +0,0 @@
-import path from 'path';
-import nodeResolve from 'rollup-plugin-node-resolve';
-import commonjs from 'rollup-plugin-commonjs';
-import json from 'rollup-plugin-json';
-import typescript from 'rollup-plugin-typescript';
-
-const src = path.resolve('src');
-
-export default {
-	entry: 'src/index.ts',
-	moduleName: 'svelte',
-	targets: [{ dest: 'compiler/svelte.js', format: 'umd' }],
-	plugins: [
-		{
-			resolveId(importee, importer) {
-				// bit of a hack — TypeScript only really works if it can resolve imports,
-				// but they misguidedly chose to reject imports with file extensions. This
-				// means we need to resolve them here
-				if (
-					importer &&
-					importer.startsWith(src) &&
-					importee[0] === '.' &&
-					path.extname(importee) === ''
-				) {
-					return path.resolve(path.dirname(importer), `${importee}.ts`);
-				}
-			}
-		},
-		nodeResolve({ jsnext: true, module: true }),
-		commonjs(),
-		json(),
-		typescript({
-			include: 'src/**',
-			exclude: 'src/shared/**',
-			typescript: require('typescript')
-		})
-	],
-	sourceMap: true
-};

rollup/rollup.config.shared.js

@@ -1,5 +0,0 @@
-export default {
-	entry: 'src/shared/index.js',
-	dest: 'shared.js',
-	format: 'es'
-};

rollup/rollup.config.ssr.js

@@ -1,26 +0,0 @@
-import * as path from 'path';
-import nodeResolve from 'rollup-plugin-node-resolve';
-import commonjs from 'rollup-plugin-commonjs';
-import buble from 'rollup-plugin-buble';
-
-export default {
-	entry: 'src/server-side-rendering/register.js',
-	moduleName: 'svelte',
-	targets: [{ dest: 'ssr/register.js', format: 'cjs' }],
-	plugins: [
-		nodeResolve({ jsnext: true, module: true }),
-		commonjs(),
-		buble({
-			include: 'src/**',
-			exclude: 'src/shared/**',
-			target: {
-				node: 4
-			}
-		})
-	],
-	external: [path.resolve('src/index.ts'), 'fs', 'path'],
-	paths: {
-		[path.resolve('src/index.ts')]: '../compiler/svelte.js'
-	},
-	sourceMap: true
-};

src/parse/utils/hash.ts

@@ -3,6 +3,6 @@ export default function hash(str: string): number {
 	let hash = 5381;
 	let i = str.length;
 
-	while (i--) hash = (hash * 33) ^ str.charCodeAt(i);
+	while (i--) hash = ((hash << 5) - hash) ^ str.charCodeAt(i);
 	return hash >>> 0;
 }

src/shared/transitions.js

@@ -5,37 +5,31 @@ export function linear(t) {
 	return t;
 }
 
-export function generateKeyframes(
+export function generateRule(
 	a,
 	b,
 	delta,
 	duration,
 	ease,
-	fn,
+	fn
-	node,
-	style
 ) {
-	var id = '__svelte' + ~~(Math.random() * 1e9); // TODO make this more robust
+	var keyframes = '{\n';
-	var keyframes = '@keyframes ' + id + '{\n';
 
 	for (var p = 0; p <= 1; p += 16.666 / duration) {
 		var t = a + delta * ease(p);
 		keyframes += p * 100 + '%{' + fn(t) + '}\n';
 	}
 
-	keyframes += '100% {' + fn(b) + '}\n}';
+	return keyframes + '100% {' + fn(b) + '}\n}';
-	style.textContent += keyframes;
+}
 
-	document.head.appendChild(style);
+// https://github.com/darkskyapp/string-hash/blob/master/index.js
+export function hash(str) {
+	var hash = 5381;
+	var i = str.length;
 
-	node.style.animation = (node.style.animation || '')
+	while (i--) hash = ((hash << 5) - hash) ^ str.charCodeAt(i);
-		.split(',')
+	return hash >>> 0;
-		.filter(function(anim) {
-			// when introing, discard old animations if there are any
-			return anim && (delta < 0 || !/__svelte/.test(anim));
-		})
-		.concat(id + ' ' + duration + 'ms linear 1 forwards')
-		.join(', ');
 }
 
 export function wrapTransition(node, fn, params, intro, outgroup) {
@@ -45,8 +39,10 @@ export function wrapTransition(node, fn, params, intro, outgroup) {
 	var cssText;
 
 	// TODO share <style> tag between all transitions?
-	if (obj.css) {
+	if (obj.css && !transitionManager.stylesheet) {
 		var style = createElement('style');
+		document.head.appendChild(style);
+		transitionManager.stylesheet = style.sheet;
 	}
 
 	if (intro) {
@@ -90,16 +86,26 @@ export function wrapTransition(node, fn, params, intro, outgroup) {
 
 			if (obj.css) {
 				if (obj.delay) node.style.cssText = cssText;
-				generateKeyframes(
+
+				program.rule = generateRule(
 					program.a,
 					program.b,
 					program.delta,
 					program.duration,
 					ease,
-					obj.css,
+					obj.css
-					node,
-					style
 				);
+
+				transitionManager.addRule(program.rule, program.name = '__svelte_' + hash(program.rule));
+
+				node.style.animation = (node.style.animation || '')
+					.split(', ')
+					.filter(function(anim) {
+						// when introing, discard old animations if there are any
+						return anim && (program.delta < 0 || !/__svelte/.test(anim));
+					})
+					.concat(program.name + ' ' + duration + 'ms linear 1 forwards')
+					.join(', ');
 			}
 
 			this.program = program;
@@ -114,16 +120,17 @@ export function wrapTransition(node, fn, params, intro, outgroup) {
 			if (obj.tick) obj.tick(this.t);
 		},
 		done: function() {
-			this.t = this.program.b;
+			var program = this.program;
+			this.t = program.b;
 			if (obj.tick) obj.tick(this.t);
-			if (obj.css) document.head.removeChild(style);
+			if (obj.css) transitionManager.deleteRule(node, program.name);
-			this.program.callback();
+			program.callback();
-			this.program = null;
+			program = null;
 			this.running = !!this.pending;
 		},
 		abort: function() {
 			if (obj.tick) obj.tick(1);
-			if (obj.css) document.head.removeChild(style);
+			if (obj.css) transitionManager.deleteRule(node, this.program.name);
 			this.program = this.pending = null;
 			this.running = false;
 		}
@@ -134,6 +141,8 @@ export var transitionManager = {
 	running: false,
 	transitions: [],
 	bound: null,
+	stylesheet: null,
+	activeRules: {},
 
 	add: function(transition) {
 		this.transitions.push(transition);
@@ -144,6 +153,13 @@ export var transitionManager = {
 		}
 	},
 
+	addRule: function(rule, name) {
+		if (!this.activeRules[name]) {
+			this.activeRules[name] = true;
+			this.stylesheet.insertRule('@keyframes ' + name + ' ' + rule, this.stylesheet.cssRules.length);
+		}
+	},
+
 	next: function() {
 		this.running = false;
 
@@ -171,6 +187,19 @@ export var transitionManager = {
 
 		if (this.running) {
 			requestAnimationFrame(this.bound || (this.bound = this.next.bind(this)));
+		} else if (this.stylesheet) {
+			var i = this.stylesheet.cssRules.length;
+			while (i--) this.stylesheet.deleteRule(i);
+			this.activeRules = {};
 		}
+	},
+
+	deleteRule: function(node, name) {
+		node.style.animation = node.style.animation
+			.split(', ')
+			.filter(function(anim) {
+				return anim.slice(0, name.length) !== name;
+			})
+			.join(', ');
 	}
 };

test/css/samples/basic/expected.css

@@ -1,4 +1,4 @@
 
-	div[svelte-281576708], [svelte-281576708] div {
+	div[svelte-2278551596], [svelte-2278551596] div {
 		color: red;
 	}

test/css/samples/cascade-false-global-keyframes/_config.js

@@ -0,0 +1,3 @@
+export default {
+	cascade: false
+};

test/css/samples/cascade-false-global-keyframes/expected.css

@@ -4,10 +4,10 @@
 		100% { color: blue; }
 	}
 
-	[svelte-2486527405].animated, [svelte-2486527405] .animated {
+	.animated[svelte-90785995] {
 		animation: why 2s;
 	}
 
-	[svelte-2486527405].also-animated, [svelte-2486527405] .also-animated {
+	.also-animated[svelte-90785995] {
 		animation: not-defined-here 2s;
 	}

test/css/samples/cascade-false-keyframes/_config.js

@@ -0,0 +1,3 @@
+export default {
+	cascade: false
+};

test/css/samples/cascade-false-keyframes/expected.css

@@ -1,13 +1,13 @@
 
-	@keyframes svelte-776829126-why {
+	@keyframes svelte-1647166666-why {
 		0% { color: red; }
 		100% { color: blue; }
 	}
 
-	[svelte-776829126].animated, [svelte-776829126] .animated {
+	.animated[svelte-1647166666] {
-		animation: svelte-776829126-why 2s;
+		animation: svelte-1647166666-why 2s;
 	}
 
-	[svelte-776829126].also-animated, [svelte-776829126] .also-animated {
+	.also-animated[svelte-1647166666] {
 		animation: not-defined-here 2s;
 	}

test/css/samples/cascade-false-pseudo-element/expected.css

@@ -1,12 +1,12 @@
 
-	span[svelte-583610229]::after {
+	span[svelte-2146001331]::after {
 		content: 'i am a pseudo-element';
 	}
 
-	span[svelte-583610229]:first-child {
+	span[svelte-2146001331]:first-child {
 		color: red;
 	}
 
-	span[svelte-583610229]:last-child::after {
+	span[svelte-2146001331]:last-child::after {
 		color: blue;
 	}

test/css/samples/cascade-false/expected.css

@@ -1,12 +1,12 @@
 
-	div[svelte-4161687011] {
+	div[svelte-781920915] {
 		color: red;
 	}
 
-	div.foo[svelte-4161687011] {
+	div.foo[svelte-781920915] {
 		color: blue;
 	}
 
-	.foo[svelte-4161687011] {
+	.foo[svelte-781920915] {
 		font-weight: bold;
 	}

test/css/samples/keyframes/expected.css

@@ -1,9 +1,9 @@
 
-	@keyframes svelte-4112859982-why {
+	@keyframes svelte-2931302006-why {
 		0% { color: red; }
 		100% { color: blue; }
 	}
 
-	[svelte-4112859982].animated, [svelte-4112859982] .animated {
+	[svelte-2931302006].animated, [svelte-2931302006] .animated {
-		animation: svelte-4112859982-why 2s;
+		animation: svelte-2931302006-why 2s;
 	}

test/css/samples/media-query/expected.css

@@ -1,6 +1,6 @@
 
 	@media (min-width: 400px) {
-		[svelte-2352010302].large-screen, [svelte-2352010302] .large-screen {
+		[svelte-411199634].large-screen, [svelte-411199634] .large-screen {
 			display: block;
 		}
 	}

test/js/samples/collapses-text-around-comments/expected-bundle.js

@@ -145,8 +145,8 @@ var template = (function () {
 
 function add_css () {
 	var style = createElement( 'style' );
-	style.id = 'svelte-3842350206-style';
+	style.id = 'svelte-3590263702-style';
-	style.textContent = "\n\tp[svelte-3842350206], [svelte-3842350206] p {\n\t\tcolor: red;\n\t}\n";
+	style.textContent = "\n\tp[svelte-3590263702], [svelte-3590263702] p {\n\t\tcolor: red;\n\t}\n";
 	appendNode( style, document.head );
 }
 
@@ -161,7 +161,7 @@ function create_main_fragment ( state, component ) {
 		},
 
 		hydrate: function ( nodes ) {
-			setAttribute( p, 'svelte-3842350206', '' );
+			setAttribute( p, 'svelte-3590263702', '' );
 		},
 
 		mount: function ( target, anchor ) {
@@ -198,7 +198,7 @@ function SvelteComponent ( options ) {
 	this._yield = options._yield;
 
 	this._torndown = false;
-	if ( !document.getElementById( 'svelte-3842350206-style' ) ) add_css();
+	if ( !document.getElementById( 'svelte-3590263702-style' ) ) add_css();
 
 	this._fragment = create_main_fragment( this._state, this );
 

test/js/samples/collapses-text-around-comments/expected.js

@@ -10,8 +10,8 @@ var template = (function () {
 
 function add_css () {
 	var style = createElement( 'style' );
-	style.id = 'svelte-3842350206-style';
+	style.id = 'svelte-3590263702-style';
-	style.textContent = "\n\tp[svelte-3842350206], [svelte-3842350206] p {\n\t\tcolor: red;\n\t}\n";
+	style.textContent = "\n\tp[svelte-3590263702], [svelte-3590263702] p {\n\t\tcolor: red;\n\t}\n";
 	appendNode( style, document.head );
 }
 
@@ -26,7 +26,7 @@ function create_main_fragment ( state, component ) {
 		},
 
 		hydrate: function ( nodes ) {
-			setAttribute( p, 'svelte-3842350206', '' );
+			setAttribute( p, 'svelte-3590263702', '' );
 		},
 
 		mount: function ( target, anchor ) {
@@ -63,7 +63,7 @@ function SvelteComponent ( options ) {
 	this._yield = options._yield;
 
 	this._torndown = false;
-	if ( !document.getElementById( 'svelte-3842350206-style' ) ) add_css();
+	if ( !document.getElementById( 'svelte-3590263702-style' ) ) add_css();
 
 	this._fragment = create_main_fragment( this._state, this );
 

test/server-side-rendering/samples/styles-nested/_actual.css

@@ -1,14 +1,14 @@
 
-	div[svelte-4188175681], [svelte-4188175681] div {
+	div[svelte-1408461649], [svelte-1408461649] div {
 		color: red;
 	}
 
 
-	div[svelte-146600313], [svelte-146600313] div {
+	div[svelte-54999591], [svelte-54999591] div {
 		color: green;
 	}
 
 
-	div[svelte-1506185237], [svelte-1506185237] div {
+	div[svelte-2385185803], [svelte-2385185803] div {
 		color: blue;
 	}

test/server-side-rendering/samples/styles-nested/_actual.html

@@ -1,5 +1,5 @@
-<div svelte-4188175681>red</div>
+<div svelte-1408461649>red</div>
-<div svelte-146600313>green: foo</div>
+<div svelte-54999591>green: foo</div>
-<div svelte-1506185237>blue: foo</div>
+<div svelte-2385185803>blue: foo</div>
-<div svelte-146600313>green: bar</div>
+<div svelte-54999591>green: bar</div>
-<div svelte-1506185237>blue: bar</div>
+<div svelte-2385185803>blue: bar</div>

test/server-side-rendering/samples/styles-nested/_expected.css

@@ -1,11 +1,14 @@
-div[svelte-4188175681], [svelte-4188175681] div {
-	color: red;
-}
 
-div[svelte-146600313], [svelte-146600313] div {
+	div[svelte-1408461649], [svelte-1408461649] div {
-	color: green;
+		color: red;
-}
+	}
 
-div[svelte-1506185237], [svelte-1506185237] div {
+
-	color: blue;
+	div[svelte-54999591], [svelte-54999591] div {
-}
+		color: green;
+	}
+
+
+	div[svelte-2385185803], [svelte-2385185803] div {
+		color: blue;
+	}

test/server-side-rendering/samples/styles-nested/_expected.html

@@ -1,5 +1,5 @@
-<div svelte-4188175681>red</div>
+<div svelte-1408461649>red</div>
-<div svelte-146600313>green: foo</div>
+<div svelte-54999591>green: foo</div>
-<div svelte-1506185237>blue: foo</div>
+<div svelte-2385185803>blue: foo</div>
-<div svelte-146600313>green: bar</div>
+<div svelte-54999591>green: bar</div>
-<div svelte-1506185237>blue: bar</div>
+<div svelte-2385185803>blue: bar</div>

test/server-side-rendering/samples/styles/_actual.css

@@ -1,4 +1,4 @@
 
-	div[svelte-281576708], [svelte-281576708] div {
+	div[svelte-2278551596], [svelte-2278551596] div {
 		color: red;
 	}

test/server-side-rendering/samples/styles/_actual.html

@@ -1 +1 @@
-<div svelte-281576708>red</div>
+<div svelte-2278551596>red</div>

test/server-side-rendering/samples/styles/_expected.css

@@ -1,3 +1,4 @@
-div[svelte-281576708], [svelte-281576708] div {
+
-	color: red;
+	div[svelte-2278551596], [svelte-2278551596] div {
-}
+		color: red;
+	}

test/server-side-rendering/samples/styles/_expected.html

@@ -1 +1 @@
-<div svelte-281576708>red</div>
+<div svelte-2278551596>red</div>

yarn.lock

@@ -2578,9 +2578,9 @@ rollup-watch@^3.2.2:
   dependencies:
     require-relative "0.8.7"
 
-rollup@^0.39.0:
+rollup@^0.43.0:
-  version "0.39.2"
+  version "0.43.0"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.39.2.tgz#858cf3020027cf74e0c5d7faa1c18275faf00df4"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.43.0.tgz#b36bdb75fa5e0823b6de8aee18ff7b5655520543"
   dependencies:
     source-map-support "^0.4.0"