Merge branch 'master' into pr/5256

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Svelte changelog
 
+## Unreleased
+
+* In SSR mode, do not automatically declare variables for reactive assignments to member expressions ([#5247](https://github.com/sveltejs/svelte/issues/5247))
+
 ## 3.24.1
 
 * Prevent duplicate invalidation with certain two-way component bindings ([#3180](https://github.com/sveltejs/svelte/issues/3180), [#5117](https://github.com/sveltejs/svelte/issues/5117), [#5144](https://github.com/sveltejs/svelte/issues/5144))

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

@@ -544,6 +544,21 @@ Numeric input values are coerced; even though `input.value` is a string as far a
 <input type="range" bind:value={num}>
 ```
 
+---
+
+On `<input>` elements with `type="file"`, you can use `bind:files` to get the [`FileList` of selected files](https://developer.mozilla.org/en-US/docs/Web/API/FileList).
+
+```sv
+<label for="avatar">Upload a picture:</label>
+<input
+	accept="image/png, image/jpeg"
+	bind:files
+	id="avatar"
+	name="avatar"
+	type="file"
+/>
+```
+
 
 ##### Binding `<select>` value
 

site/content/examples/05-bindings/05-file-inputs/App.svelte

@@ -0,0 +1,37 @@
+<script>
+	let files;
+
+	$: if (files) {
+		// Note that `files` is of type `FileList`, not an Array:
+		// https://developer.mozilla.org/en-US/docs/Web/API/FileList
+		console.log(files);
+
+		for (const file of files) {
+			console.log(`${file.name}: ${file.size} bytes`);
+		}
+	}
+</script>
+
+<label for="avatar">Upload a picture:</label>
+<input
+	accept="image/png, image/jpeg"
+	bind:files
+	id="avatar"
+	name="avatar"
+	type="file"
+/>
+
+<label for="many">Upload multiple files of any type:</label>
+<input
+	bind:files
+	id="many"
+	multiple
+	type="file"
+/>
+
+{#if files}
+	<h2>Selected files:</h2>
+	{#each Array.from(files) as file}
+		<p>{file.name} ({file.size} bytes) </p>
+	{/each}
+{/if}

site/content/examples/05-bindings/05-file-inputs/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "File inputs"
+}

site/content/faq/200-are-there-any-video-courses.md

@@ -2,7 +2,11 @@
 question: Are there any video courses?
 ---
 
-There are no official ones, but here are a couple of third-part ones that we know of.
+Rich Harris, the creator of Svelte, taught a course:
+
+- [Frontend Masters](https://frontendmasters.com/courses/svelte/)
+
+There are also a couple of third-party courses:
 
 - [Egghead](https://egghead.io/playlists/getting-started-with-svelte-3-05a8541a)
 - [Udemy](https://www.udemy.com/sveltejs-the-complete-guide/)

site/package-lock.json

@@ -1281,9 +1281,9 @@
       }
     },
     "@sveltejs/site-kit": {
-      "version": "1.2.1",
+      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-1.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/@sveltejs/site-kit/-/site-kit-1.2.4.tgz",
-      "integrity": "sha512-5AhOCBcproHF5UbmuOIB9CiyAmG6BXOr2G4EjeeDz/tyo9myfnRKIgJSy26q8Zlw6TOlwxhzcAgvL5sgZF+IsA==",
+      "integrity": "sha512-W+/PthWX4R8UvKr+IyWIITGoY3cl/54ePZr3dU9ZlyP9r/weEvvKDBvjmW8tAKQFRfbxyySmXUxEGBoPhF8XAA==",
       "dev": true,
       "requires": {
         "@sindresorhus/slugify": "^0.9.1",
@@ -1573,9 +1573,9 @@
       }
     },
     "clipboard": {
-      "version": "2.0.4",
+      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz",
-      "integrity": "sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==",
+      "integrity": "sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==",
       "optional": true,
       "requires": {
         "good-listener": "^1.2.2",
@@ -3170,9 +3170,9 @@
       "integrity": "sha512-plS7uY0WWiTBwWZs9KM3M88ZxHWKbrbMUDf52CPum6BqAxiLmKROmaTnmhXtv0krQ0l0HRLcFS8JDwOFyPt/OQ=="
     },
     "prismjs": {
-      "version": "1.17.1",
+      "version": "1.21.0",
-      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.17.1.tgz",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.21.0.tgz",
-      "integrity": "sha512-PrEDJAFdUGbOP6xK/UsfkC5ghJsPJviKgnQOoxaDbBjwc8op68Quupwt1DeAFoG8GImPhiKXAvvsH7wDSLsu1Q==",
+      "integrity": "sha512-uGdSIu1nk3kej2iZsLyDoJ7e9bnPzIgY0naW/HdknGj61zScaprVEVGHrPoXqI+M9sP0NDnTK2jpkvmldpuqDw==",
       "requires": {
         "clipboard": "^2.0.0"
       }

site/package.json

@@ -25,7 +25,7 @@
     "pg": "^7.12.1",
     "polka": "^1.0.0-next.9",
     "prism-svelte": "^0.4.3",
-    "prismjs": "^1.17.1",
+    "prismjs": "^1.21.0",
     "sirv": "^1.0.0-next.2",
     "yootils": "0.0.16"
   },
@@ -36,7 +36,7 @@
     "@babel/preset-env": "^7.6.0",
     "@babel/runtime": "^7.6.0",
     "@sindresorhus/slugify": "^0.9.1",
-    "@sveltejs/site-kit": "^1.2.1",
+    "@sveltejs/site-kit": "^1.2.4",
     "@sveltejs/svelte-repl": "^0.2.0",
     "degit": "^2.1.4",
     "dotenv": "^8.1.0",

src/compiler/compile/render_ssr/index.ts

@@ -5,8 +5,7 @@ import { string_literal } from '../utils/stringify';
 import Renderer from './Renderer';
 import { INode as TemplateNode } from '../nodes/interfaces'; // TODO
 import Text from '../nodes/Text';
-import { extract_names } from '../utils/scope';
+import { LabeledStatement, Statement, Node } from 'estree';
-import { LabeledStatement, Statement, ExpressionStatement, AssignmentExpression, Node } from 'estree';
 
 export default function ssr(
 	component: Component,
@@ -72,37 +71,17 @@ export default function ssr(
 			})
 		: [];
 
+	const injected = Array.from(component.injected_reactive_declaration_vars).filter(name => {
+		const variable = component.var_lookup.get(name);
+		return variable.injected;
+	});
+
 	const reactive_declarations = component.reactive_declarations.map(d => {
 		const body: Statement = (d.node as LabeledStatement).body;
 
 		let statement = b`${body}`;
 
-		if (d.declaration) {
+		if (!d.declaration) { // TODO do not add label if it's not referenced
-			const declared = extract_names(d.declaration);
-			const injected = declared.filter(name => {
-				return name[0] !== '$' && component.var_lookup.get(name).injected;
-			});
-
-			const self_dependencies = injected.filter(name => d.dependencies.has(name));
-
-			if (injected.length) {
-				// in some cases we need to do `let foo; [expression]`, in
-				// others we can do `let [expression]`
-				const separate = (
-					self_dependencies.length > 0 ||
-					declared.length > injected.length
-				);
-
-				const { left, right } = (body as ExpressionStatement).expression as AssignmentExpression;
-
-				statement = separate
-					? b`
-						${injected.map(name => b`let ${name};`)}
-						${statement}`
-					: b`
-						let ${left} = ${right}`;
-			}
-		} else { // TODO do not add label if it's not referenced
 			statement = b`$: { ${statement} }`;
 		}
 
@@ -119,6 +98,8 @@ export default function ssr(
 
 				${reactive_store_values}
 
+				${injected.map(name => b`let ${name};`)}
+
 				${reactive_declarations}
 
 				$$rendered = ${literal};
@@ -129,6 +110,8 @@ export default function ssr(
 		: b`
 			${reactive_store_values}
 
+			${injected.map(name => b`let ${name};`)}
+
 			${reactive_declarations}
 
 			return ${literal};`;

test/runtime/samples/reactive-value-assign-property/_config.js

@@ -0,0 +1,5 @@
+export default {
+	html: `
+		<h1>Hello world!</h1>
+	`,
+};

test/runtime/samples/reactive-value-assign-property/main.svelte

@@ -0,0 +1,6 @@
+<script>
+	$: user = {};
+	$: user.name = 'world';
+</script>
+
+<h1>Hello {user.name}!</h1>