Merge remote-tracking branch 'origin/master' into sites

Author: PuruVJ

CHANGELOG.md

@@ -1043,7 +1043,7 @@ Also:
 
 ## 3.5.1
 
-* Accommodate webpack idiosyncracies
+* Accommodate webpack idiosyncrasies
 
 ## 3.5.0
 

package-lock.json

@@ -663,7 +663,7 @@ A `<select>` value binding corresponds to the `value` property on the selected `
 
 ---
 
-A `<select multiple>` element behaves similarly to a checkbox group.
+A `<select multiple>` element behaves similarly to a checkbox group. The bound variable is an array with an entry corresponding to the `value` property of each selected `<option>`.
 
 ```sv
 <select multiple bind:value={fillings}>
@@ -1024,7 +1024,7 @@ Like actions, transitions can have parameters.
 
 Transitions can use custom functions. If the returned object has a `css` function, Svelte will create a CSS animation that plays on the element.
 
-The `t` argument passed to `css` is a value between `0` and `1` after the `easing` function has been applied. *In* transitions run from `0` to `1`, *out* transitions run from `1` to `0` — in other words `1` is the element's natural state, as though no transition had been applied. The `u` argument is equal to `1 - t`.
+The `t` argument passed to `css` is a value between `0` and `1` after the `easing` function has been applied. *In* transitions run from `0` to `1`, *out* transitions run from `1` to `0` — in other words, `1` is the element's natural state, as though no transition had been applied. The `u` argument is equal to `1 - t`.
 
 The function is called repeatedly *before* the transition begins, with different `t` and `u` arguments.
 
@@ -1307,14 +1307,12 @@ A custom animation function can also return a `tick` function, which is called *
 		const d = Math.sqrt(dx * dx + dy * dy);
 
 		return {
-		delay: 0,
-		duration: Math.sqrt(d) * 120,
-		easing: cubicOut,
-		tick: (t, u) =>
-			Object.assign(node.style, {
-				color: t > 0.5 ? 'Pink' : 'Blue'
-			});
-	};
+			delay: 0,
+			duration: Math.sqrt(d) * 120,
+			easing: cubicOut,
+			tick: (t, u) =>
+				Object.assign(node.style, { color: t > 0.5 ? 'Pink' : 'Blue' })
+		};
 	}
 </script>
 
@@ -1415,7 +1413,7 @@ Svelte's CSS Variables support allows for easily themeable components:
 
 ---
 
-So you can set a high level theme color:
+So you can set a high-level theme color:
 
 ```css
 /* global.css */
@@ -1575,7 +1573,7 @@ Note that explicitly passing in an empty named slot will add that slot's name to
 
 ---
 
-Slots can be rendered zero or more times, and can pass values *back* to the parent using props. The parent exposes the values to the slot template using the `let:` directive.
+Slots can be rendered zero or more times and can pass values *back* to the parent using props. The parent exposes the values to the slot template using the `let:` directive.
 
 The usual shorthand rules apply — `let:item` is equivalent to `let:item={item}`, and `<slot {item}>` is equivalent to `<slot item={item}>`.
 
@@ -1666,11 +1664,11 @@ If `this` is falsy, no component is rendered.
 
 The `<svelte:element>` element lets you render an element of a dynamically specified type. This is useful for example when displaying rich text content from a CMS. Any properties and event listeners present will be applied to the element.
 
-The only supported binding is `bind:this`, since the element type specific bindings that Svelte does at build time (e.g. `bind:value` for input elements) do not work with a dynamic tag type.
+The only supported binding is `bind:this`, since the element type-specific bindings that Svelte does at build time (e.g. `bind:value` for input elements) do not work with a dynamic tag type.
 
 If `this` has a nullish value, the element and its children will not be rendered.
 
-If `this` is the name of a void tag (e.g., `br`) and `<svelte:element>` has child elements, a runtime error will be thrown in development mode.
+If `this` is the name of a [void element](https://developer.mozilla.org/en-US/docs/Glossary/Void_element) (e.g., `br`) and `<svelte:element>` has child elements, a runtime error will be thrown in development mode.
 
 ```sv
 <script>
@@ -1716,7 +1714,7 @@ You can also bind to the following properties:
 * `outerHeight`
 * `scrollX`
 * `scrollY`
-* `online` — an alias for window.navigator.onLine
+* `online` — an alias for `window.navigator.onLine`
 
 All except `scrollX` and `scrollY` are readonly.
 

site/content/docs/03-template-syntax.md

@@ -44,7 +44,7 @@ export default {
 		code: 'invalid-binding',
 		message: 'Cannot bind to a variable declared with {@const ...}'
 	},
-	invalid_binding_writibale: {
+	invalid_binding_writable: {
 		code: 'invalid-binding',
 		message: 'Cannot bind to a variable which is not writable'
 	},

src/compiler/compile/compiler_errors.ts

@@ -80,7 +80,7 @@ export default class Binding extends Node {
 			variable[this.expression.node.type === 'MemberExpression' ? 'mutated' : 'reassigned'] = true;
 
 			if (info.expression.type === 'Identifier' && !variable.writable) {
-				component.error(this.expression.node as any, compiler_errors.invalid_binding_writibale);
+				component.error(this.expression.node as any, compiler_errors.invalid_binding_writable);
 				return;
 			}
 		}

src/compiler/compile/nodes/Binding.ts

@@ -1034,14 +1034,14 @@ export default class Element extends Node {
 	}
 }
 
-const regex_starts_with_vovel = /^[aeiou]/;
+const regex_starts_with_vowel = /^[aeiou]/;
 
 function should_have_attribute(
 	node,
 	attributes: string[],
 	name = node.name
 ) {
-	const article = regex_starts_with_vovel.test(attributes[0]) ? 'an' : 'a';
+	const article = regex_starts_with_vowel.test(attributes[0]) ? 'an' : 'a';
 	const sequence = attributes.length > 1 ?
 		attributes.slice(0, -1).join(', ') + ` or ${attributes[attributes.length - 1]}` :
 		attributes[0];

src/compiler/compile/nodes/Element.ts

@@ -48,7 +48,7 @@ function create_fragment(ctx) {
 			t8 = text(/*$prop*/ ctx[2]);
 			t9 = space();
 			t10 = text(/*shadowedByModule*/ ctx[4]);
-			add_location(p, file, 22, 0, 430);
+			add_location(p, file, 22, 0, 431);
 		},
 		l: function claim(nodes) {
 			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -91,7 +91,7 @@ function create_fragment(ctx) {
 }
 
 let moduleLiveBinding;
-const moduleContantProps = 4;
+const moduleConstantProps = 4;
 let moduleLet;
 const moduleConst = 2;
 let shadowedByModule;
@@ -137,7 +137,7 @@ function instance($$self, $$props, $$invalidate) {
 
 	$$self.$capture_state = () => ({
 		moduleLiveBinding,
-		moduleContantProps,
+		moduleConstantProps,
 		moduleLet,
 		moduleConst,
 		shadowedByModule,
@@ -197,4 +197,4 @@ class Component extends SvelteComponentDev {
 }
 
 export default Component;
-export { moduleLiveBinding, moduleContantProps };
+export { moduleLiveBinding, moduleConstantProps };

test/js/samples/capture-inject-state/expected.js

@@ -1,6 +1,6 @@
 <script context="module">
   export let moduleLiveBinding;
-  export const moduleContantProps = 4;
+  export const moduleConstantProps = 4;
   let moduleLet;
   const moduleConst = 2;
   let shadowedByModule;