Merge branch 'master' into gh-654

Author: Rich-Harris

.eslintignore

@@ -1,5 +1,6 @@
 src/shared
 shared.js
+store.js
 test/test.js
 test/setup.js
 **/_actual.js

CHANGELOG.md

@@ -1,5 +1,19 @@
 # Svelte changelog
 
+## 1.43.1
+
+* Fix parameterised transitions ([#962](https://github.com/sveltejs/svelte/issues/962))
+* Prevent boolean attributes breaking estree-walker expectations ([#961](https://github.com/sveltejs/svelte/issues/961))
+* Throw error on cyclical store computations ([#964](https://github.com/sveltejs/svelte/pull/964))
+
+## 1.43.0
+
+* Export `Store` class to manage global state ([#930](https://github.com/sveltejs/svelte/issues/930))
+* Recognise `aria-current` ([#953](https://github.com/sveltejs/svelte/pull/953))
+* Support SSR register options including `extensions` ([#939](https://github.com/sveltejs/svelte/issues/939))
+* Friendlier error for illegal contexts ([#934](https://github.com/sveltejs/svelte/issues/934))
+* Remove whitespace around `<:Window>` components ([#943](https://github.com/sveltejs/svelte/issues/943))
+
 ## 1.42.1
 
 * Correctly append items inside a slotted `each` block ([#932](https://github.com/sveltejs/svelte/pull/932))

package.json

@@ -1,12 +1,13 @@
 {
   "name": "svelte",
-  "version": "1.42.1",
+  "version": "1.43.1",
   "description": "The magical disappearing UI framework",
   "main": "compiler/svelte.js",
   "files": [
     "compiler",
     "ssr",
     "shared.js",
+    "store.js",
     "README.md"
   ],
   "scripts": {

src/generators/Generator.ts

@@ -72,15 +72,8 @@ function removeIndentation(
 // We need to tell estree-walker that it should always
 // look for an `else` block, otherwise it might get
 // the wrong idea about the shape of each/if blocks
-childKeys.EachBlock = [
-	'children',
-	'else'
-];
-
-childKeys.IfBlock = [
-	'children',
-	'else'
-];
+childKeys.EachBlock = childKeys.IfBlock = ['children', 'else'];
+childKeys.Attribute = ['value'];
 
 export default class Generator {
 	ast: Parsed;
@@ -536,6 +529,9 @@ export default class Generator {
 							(param: Node) =>
 								param.type === 'AssignmentPattern' ? param.left.name : param.name
 						);
+						deps.forEach(dep => {
+							this.expectedProperties.add(dep);
+						});
 						dependencies.set(key, deps);
 					});
 
@@ -762,6 +758,11 @@ export default class Generator {
 					});
 					this.skip();
 				}
+
+				if (node.type === 'Transition' && node.expression) {
+					node.metadata = contextualise(node.expression, contextDependencies, indexes);
+					this.skip();
+				}
 			},
 
 			leave(node: Node, parent: Node) {

src/generators/dom/index.ts

@@ -184,15 +184,23 @@ export default function dom(
 	const debugName = `<${generator.customElement ? generator.tag : name}>`;
 
 	// generate initial state object
-	const globals = Array.from(generator.expectedProperties).filter(prop => globalWhitelist.has(prop));
+	const expectedProperties = Array.from(generator.expectedProperties);
+	const globals = expectedProperties.filter(prop => globalWhitelist.has(prop));
+	const storeProps = options.store ? expectedProperties.filter(prop => prop[0] === '$') : [];
+
 	const initialState = [];
+
 	if (globals.length > 0) {
 		initialState.push(`{ ${globals.map(prop => `${prop} : ${prop}`).join(', ')} }`);
 	}
 
+	if (storeProps.length > 0) {
+		initialState.push(`this.store._init([${storeProps.map(prop => `"${prop.slice(1)}"`)}])`);
+	}
+
 	if (templateProperties.data) {
 		initialState.push(`%data()`);
-	} else if (globals.length === 0) {
+	} else if (globals.length === 0 && storeProps.length === 0) {
 		initialState.push('{}');
 	}
 
@@ -205,6 +213,7 @@ export default function dom(
 		@init(this, options);
 		${generator.usesRefs && `this.refs = {};`}
 		this._state = @assign(${initialState.join(', ')});
+		${storeProps.length > 0 && `this.store._add(this, [${storeProps.map(prop => `"${prop.slice(1)}"`)}]);`}
 		${generator.metaBindings}
 		${computations.length && `this._recompute({ ${Array.from(computationDeps).map(dep => `${dep}: 1`).join(', ')} }, this._state);`}
 		${options.dev &&
@@ -215,7 +224,11 @@ export default function dom(
 		${generator.bindingGroups.length &&
 			`this._bindingGroups = [${Array(generator.bindingGroups.length).fill('[]').join(', ')}];`}
 
-		${templateProperties.ondestroy && `this._handlers.destroy = [%ondestroy]`}
+		${(templateProperties.ondestroy || storeProps.length) && (
+			`this._handlers.destroy = [${
+				[templateProperties.ondestroy && `%ondestroy`, storeProps.length && `@removeFromStore`].filter(Boolean).join(', ')
+			}];`
+		)}
 
 		${generator.slots.size && `this._slotted = options.slots || {};`}
 

src/generators/dom/visitors/Element/addBindings.ts

@@ -195,13 +195,19 @@ export default function addBindings(
 
 		const usesContext = group.bindings.some(binding => binding.handler.usesContext);
 		const usesState = group.bindings.some(binding => binding.handler.usesState);
+		const usesStore = group.bindings.some(binding => binding.handler.usesStore);
 		const mutations = group.bindings.map(binding => binding.handler.mutation).filter(Boolean).join('\n');
 
 		const props = new Set();
+		const storeProps = new Set();
 		group.bindings.forEach(binding => {
 			binding.handler.props.forEach(prop => {
 				props.add(prop);
 			});
+
+			binding.handler.storeProps.forEach(prop => {
+				storeProps.add(prop);
+			});
 		}); // TODO use stringifyProps here, once indenting is fixed
 
 		// media bindings — awkward special case. The native timeupdate events
@@ -222,9 +228,11 @@ export default function addBindings(
 				}
 				${usesContext && `var context = ${node.var}._svelte;`}
 				${usesState && `var state = #component.get();`}
+				${usesStore && `var $ = #component.store.get();`}
 				${needsLock && `${lock} = true;`}
 				${mutations.length > 0 && mutations}
-				#component.set({ ${Array.from(props).join(', ')} });
+				${props.size > 0 && `#component.set({ ${Array.from(props).join(', ')} });`}
+				${storeProps.size > 0 && `#component.store.set({ ${Array.from(storeProps).join(', ')} });`}
 				${needsLock && `${lock} = false;`}
 			}
 		`);
@@ -307,6 +315,13 @@ function getEventHandler(
 	dependencies: string[],
 	value: string,
 ) {
+	let storeDependencies = [];
+
+	if (generator.options.store) {
+		storeDependencies = dependencies.filter(prop => prop[0] === '$').map(prop => prop.slice(1));
+		dependencies = dependencies.filter(prop => prop[0] !== '$');
+	}
+
 	if (block.contexts.has(name)) {
 		const tail = attribute.value.type === 'MemberExpression'
 			? getTailSnippet(attribute.value)
@@ -318,8 +333,10 @@ function getEventHandler(
 		return {
 			usesContext: true,
 			usesState: true,
+			usesStore: storeDependencies.length > 0,
 			mutation: `${list}[${index}]${tail} = ${value};`,
-			props: dependencies.map(prop => `${prop}: state.${prop}`)
+			props: dependencies.map(prop => `${prop}: state.${prop}`),
+			storeProps: storeDependencies.map(prop => `${prop}: $.${prop}`)
 		};
 	}
 
@@ -336,16 +353,31 @@ function getEventHandler(
 		return {
 			usesContext: false,
 			usesState: true,
+			usesStore: storeDependencies.length > 0,
 			mutation: `${snippet} = ${value}`,
-			props: dependencies.map((prop: string) => `${prop}: state.${prop}`)
+			props: dependencies.map((prop: string) => `${prop}: state.${prop}`),
+			storeProps: storeDependencies.map(prop => `${prop}: $.${prop}`)
 		};
 	}
 
+	let props;
+	let storeProps;
+
+	if (generator.options.store && name[0] === '$') {
+		props = [];
+		storeProps = [`${name.slice(1)}: ${value}`];
+	} else {
+		props = [`${name}: ${value}`];
+		storeProps = [];
+	}
+
 	return {
 		usesContext: false,
 		usesState: false,
+		usesStore: false,
 		mutation: null,
-		props: [`${name}: ${value}`]
+		props,
+		storeProps
 	};
 }
 
@@ -393,4 +425,4 @@ function isComputed(node: Node) {
 	}
 
 	return false;
-}
+}

src/generators/dom/visitors/Element/addTransitions.ts

@@ -21,7 +21,7 @@ export default function addTransitions(
 	if (intro === outro) {
 		const name = block.getUniqueName(`${node.var}_transition`);
 		const snippet = intro.expression
-			? intro.expression.metadata.snippet
+			? intro.metadata.snippet
 			: '{}';
 
 		block.addVariable(name);
@@ -51,7 +51,7 @@ export default function addTransitions(
 		if (intro) {
 			block.addVariable(introName);
 			const snippet = intro.expression
-				? intro.expression.metadata.snippet
+				? intro.metadata.snippet
 				: '{}';
 
 			const fn = `%transitions-${intro.name}`; // TODO add built-in transitions?
@@ -76,7 +76,7 @@ export default function addTransitions(
 		if (outro) {
 			block.addVariable(outroName);
 			const snippet = outro.expression
-				? intro.expression.metadata.snippet
+				? outro.metadata.snippet
 				: '{}';
 
 			const fn = `%transitions-${outro.name}`;

src/generators/server-side-rendering/index.ts

@@ -73,16 +73,22 @@ export default function ssr(
 		generator.stylesheet.render(options.filename, true);
 
 	// generate initial state object
-	// TODO this doesn't work, because expectedProperties isn't populated
-	const globals = Array.from(generator.expectedProperties).filter(prop => globalWhitelist.has(prop));
+	const expectedProperties = Array.from(generator.expectedProperties);
+	const globals = expectedProperties.filter(prop => globalWhitelist.has(prop));
+	const storeProps = options.store ? expectedProperties.filter(prop => prop[0] === '$') : [];
+
 	const initialState = [];
 	if (globals.length > 0) {
 		initialState.push(`{ ${globals.map(prop => `${prop} : ${prop}`).join(', ')} }`);
 	}
 
+	if (storeProps.length > 0) {
+		initialState.push(`options.store._init([${storeProps.map(prop => `"${prop.slice(1)}"`)}])`);
+	}
+
 	if (templateProperties.data) {
 		initialState.push(`%data()`);
-	} else if (globals.length === 0) {
+	} else if (globals.length === 0 && storeProps.length === 0) {
 		initialState.push('{}');
 	}
 
@@ -99,7 +105,7 @@ export default function ssr(
 			return ${templateProperties.data ? `%data()` : `{}`};
 		};
 
-		${name}.render = function(state, options) {
+		${name}.render = function(state, options = {}) {
 			state = Object.assign(${initialState.join(', ')});
 
 			${computations.map(

src/generators/server-side-rendering/visitors/Component.ts

@@ -79,6 +79,11 @@ export default function visitComponent(
 
 	let open = `\${${expression}.render({${props}}`;
 
+	const options = [];
+	if (generator.options.store) {
+		options.push(`store: options.store`);
+	}
+
 	if (node.children.length) {
 		const appendTarget: AppendTarget = {
 			slots: { default: '' },
@@ -95,11 +100,15 @@ export default function visitComponent(
 			.map(name => `${name}: () => \`${appendTarget.slots[name]}\``)
 			.join(', ');
 
-		open += `, { slotted: { ${slotted} } }`;
+		options.push(`slotted: { ${slotted} }`);
 
 		generator.appendTargets.pop();
 	}
 
+	if (options.length) {
+		open += `, { ${options.join(', ')} }`;
+	}
+
 	generator.append(open);
 	generator.append(')}');
 }