Merge branch 'master' into gh-908

CHANGELOG.md

@@ -1,5 +1,19 @@
 # Svelte changelog
 
+## 1.42.0
+
+* Implement `indeterminate` binding for checkbox inputs ([#910](https://github.com/sveltejs/svelte/issues/910))
+* Use `<option>` children as `value` attribute if none exists ([#928](https://github.com/sveltejs/svelte/issues/928))
+* Allow quoted property names in default export and sub-properties ([#914](https://github.com/sveltejs/svelte/issues/914))
+* Various improvements to generated code for bindings
+
+## 1.41.4
+
+* Handle self-destructive bindings ([#917](https://github.com/sveltejs/svelte/issues/917))
+* Prevent `innerHTML` with `<option>` elements ([#915](https://github.com/sveltejs/svelte/issues/915))
+* Use `dataset` unless `legacy` is true ([#858](https://github.com/sveltejs/svelte/issues/858))
+* Add `prepare` script to facilitate installing from git ([#923](https://github.com/sveltejs/svelte/pull/923))
+
 ## 1.41.3
 
 * Prevent argument name clashes ([#911](https://github.com/sveltejs/svelte/issues/911))

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "1.41.3",
+  "version": "1.42.0",
   "description": "The magical disappearing UI framework",
   "main": "compiler/svelte.js",
   "files": [
@@ -18,6 +18,7 @@
     "precodecov": "npm run coverage",
     "lint": "eslint src test/*.js",
     "build": "node src/shared/_build.js && rollup -c",
+    "prepare": "npm run build",
     "dev": "node src/shared/_build.js && rollup -c -w",
     "pretest": "npm run build",
     "prepublishOnly": "npm run lint && npm test",

src/generators/Generator.ts

@@ -12,6 +12,7 @@ import namespaces from '../utils/namespaces';
 import { removeNode, removeObjectKey } from '../utils/removeNode';
 import wrapModule from './shared/utils/wrapModule';
 import annotateWithScopes from '../utils/annotateWithScopes';
+import getName from '../utils/getName';
 import clone from '../utils/clone';
 import DomBlock from './dom/Block';
 import SsrBlock from './server-side-rendering/Block';
@@ -497,13 +498,13 @@ export default class Generator {
 
 			if (defaultExport) {
 				defaultExport.declaration.properties.forEach((prop: Node) => {
-					templateProperties[prop.key.name] = prop;
+					templateProperties[getName(prop.key)] = prop;
 				});
 
 				['helpers', 'events', 'components', 'transitions'].forEach(key => {
 					if (templateProperties[key]) {
 						templateProperties[key].value.properties.forEach((prop: Node) => {
-							this[key].add(prop.key.name);
+							this[key].add(getName(prop.key));
 						});
 					}
 				});
@@ -574,15 +575,15 @@ export default class Generator {
 
 				if (templateProperties.components) {
 					templateProperties.components.value.properties.forEach((property: Node) => {
-						addDeclaration(property.key.name, property.value, 'components');
+						addDeclaration(getName(property.key), property.value, 'components');
 					});
 				}
 
 				if (templateProperties.computed) {
 					const dependencies = new Map();
 
 					templateProperties.computed.value.properties.forEach((prop: Node) => {
-						const key = prop.key.name;
+						const key = getName(prop.key);
 						const value = prop.value;
 
 						const deps = value.params.map(
@@ -605,12 +606,12 @@ export default class Generator {
 
 						computations.push({ key, deps });
 
-						const prop = templateProperties.computed.value.properties.find((prop: Node) => prop.key.name === key);
+						const prop = templateProperties.computed.value.properties.find((prop: Node) => getName(prop.key) === key);
 						addDeclaration(key, prop.value, 'computed');
 					};
 
 					templateProperties.computed.value.properties.forEach((prop: Node) =>
-						visit(prop.key.name)
+						visit(getName(prop.key))
 					);
 				}
 
@@ -620,13 +621,13 @@ export default class Generator {
 
 				if (templateProperties.events && dom) {
 					templateProperties.events.value.properties.forEach((property: Node) => {
-						addDeclaration(property.key.name, property.value, 'events');
+						addDeclaration(getName(property.key), property.value, 'events');
 					});
 				}
 
 				if (templateProperties.helpers) {
 					templateProperties.helpers.value.properties.forEach((property: Node) => {
-						addDeclaration(property.key.name, property.value, 'helpers');
+						addDeclaration(getName(property.key), property.value, 'helpers');
 					});
 				}
 
@@ -663,7 +664,7 @@ export default class Generator {
 
 				if (templateProperties.transitions) {
 					templateProperties.transitions.value.properties.forEach((property: Node) => {
-						addDeclaration(property.key.name, property.value, 'transitions');
+						addDeclaration(getName(property.key), property.value, 'transitions');
 					});
 				}
 			}

src/generators/dom/preprocess.ts

@@ -309,7 +309,7 @@ const preprocessors = {
 		stripWhitespace: boolean,
 		nextSibling: Node
 	) => {
-		if (node.name === 'slot') {
+		if (node.name === 'slot' || node.name === 'option') {
 			cannotUseInnerHTML(node);
 		}
 
@@ -358,6 +358,19 @@ const preprocessors = {
 			}
 		});
 
+		const valueAttribute = node.attributes.find((attribute: Node) => attribute.name === 'value');
+
+		// Treat these the same way:
+		//   <option>{{foo}}</option>
+		//   <option value='{{foo}}'>{{foo}}</option>
+		if (node.name === 'option' && !valueAttribute) {
+			node.attributes.push({
+				type: 'Attribute',
+				name: 'value',
+				value: node.children
+			});
+		}
+
 		// special case — in a case like this...
 		//
 		//   <select bind:value='foo'>
@@ -369,14 +382,9 @@ const preprocessors = {
 		// so that if `foo.qux` changes, we know that we need to
 		// mark `bar` and `baz` as dirty too
 		if (node.name === 'select') {
-			cannotUseInnerHTML(node);
-
-			const value = node.attributes.find(
-				(attribute: Node) => attribute.name === 'value'
-			);
-			if (value) {
+			if (valueAttribute) {
 				// TODO does this also apply to e.g. `<input type='checkbox' bind:group='foo'>`?
-				const dependencies = block.findDependencies(value.value);
+				const dependencies = block.findDependencies(valueAttribute.value);
 				state.selectBindingDependencies = dependencies;
 				dependencies.forEach((prop: string) => {
 					generator.indirectDependencies.set(prop, new Set());

src/generators/dom/visitors/Component.ts

@@ -7,21 +7,10 @@ import getTailSnippet from '../../../utils/getTailSnippet';
 import getObject from '../../../utils/getObject';
 import getExpressionPrecedence from '../../../utils/getExpressionPrecedence';
 import { stringify } from '../../../utils/stringify';
+import stringifyProps from '../../../utils/stringifyProps';
 import { Node } from '../../../interfaces';
 import { State } from '../interfaces';
 
-function stringifyProps(props: string[]) {
-	if (!props.length) return '{}';
-
-	const joined = props.join(', ');
-	if (joined.length > 40) {
-		// make larger data objects readable
-		return `{\n\t${props.join(',\n\t')}\n}`;
-	}
-
-	return `{ ${joined} }`;
-}
-
 interface Attribute {
 	name: string;
 	value: any;

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

@@ -3,7 +3,6 @@ import deindent from '../../../../utils/deindent';
 import visitStyleAttribute, { optimizeStyle } from './StyleAttribute';
 import { stringify } from '../../../../utils/stringify';
 import getExpressionPrecedence from '../../../../utils/getExpressionPrecedence';
-import getStaticAttributeValue from '../../../../utils/getStaticAttributeValue';
 import { DomGenerator } from '../../index';
 import Block from '../../Block';
 import { Node } from '../../../../interfaces';
@@ -56,6 +55,11 @@ export default function visitAttribute(
 
 	const isLegacyInputType = generator.legacy && name === 'type' && node.name === 'input';
 
+	const isDataSet = /^data-/.test(name) && !generator.legacy;
+	const camelCaseName = isDataSet ? name.replace('data-', '').replace(/(-\w)/g, function (m) {
+		return m[1].toUpperCase();
+	}) : name;
+
 	if (isDynamic) {
 		let value;
 
@@ -163,6 +167,11 @@ export default function visitAttribute(
 				`${state.parentNode}.${propertyName} = ${init};`
 			);
 			updater = `${state.parentNode}.${propertyName} = ${shouldCache || isSelectValueAttribute ? last : value};`;
+		} else if (isDataSet) {
+			block.builders.hydrate.addLine(
+				`${state.parentNode}.dataset.${camelCaseName} = ${init};`
+			);
+			updater = `${state.parentNode}.dataset.${camelCaseName} = ${shouldCache || isSelectValueAttribute ? last : value};`;
 		} else {
 			block.builders.hydrate.addLine(
 				`${method}(${state.parentNode}, "${name}", ${init});`
@@ -198,6 +207,7 @@ export default function visitAttribute(
 		const statement = (
 			isLegacyInputType ? `@setInputType(${state.parentNode}, ${value});` :
 			propertyName ? `${state.parentNode}.${propertyName} = ${value};` :
+				isDataSet ? `${state.parentNode}.dataset.${camelCaseName} = ${value};` :
 			`${method}(${state.parentNode}, "${name}", ${value});`
 		);
 
@@ -221,4 +231,4 @@ export default function visitAttribute(
 		block.builders.hydrate.addLine(updateValue);
 		if (isDynamic) block.builders.update.addLine(updateValue);
 	}
-}
+}