Merge branch 'master' into pr/5261

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Svelte changelog
 
+## Unreleased
+
+* Add types to `createEventDispatcher` ([#5211](https://github.com/sveltejs/svelte/issues/5211))
+* In SSR mode, do not automatically declare variables for reactive assignments to member expressions ([#5247](https://github.com/sveltejs/svelte/issues/5247))
+* Include selector in message of `unused-css-selector` warning ([#5252](https://github.com/sveltejs/svelte/issues/5252))
+* Fix using `<Namespaced.Component/>`s in child `{#await}`/`{#each}` contexts ([#5255](https://github.com/sveltejs/svelte/issues/5255))
+
 ## 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

@@ -1573,9 +1573,9 @@
       }
     },
     "clipboard": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.4.tgz",
-      "integrity": "sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==",
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz",
+      "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",
-      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.17.1.tgz",
-      "integrity": "sha512-PrEDJAFdUGbOP6xK/UsfkC5ghJsPJviKgnQOoxaDbBjwc8op68Quupwt1DeAFoG8GImPhiKXAvvsH7wDSLsu1Q==",
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.21.0.tgz",
+      "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"
   },

src/compiler/compile/css/Stylesheet.ts

@@ -435,7 +435,7 @@ export default class Stylesheet {
 			child.warn_on_unused_selector((selector: Selector) => {
 				component.warn(selector.node, {
 					code: `css-unused-selector`,
-					message: `Unused CSS selector`
+					message: `Unused CSS selector "${this.source.slice(selector.node.start, selector.node.end)}"`
 				});
 			});
 		});

src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts

@@ -17,6 +17,7 @@ import { Node, Identifier, ObjectExpression } from 'estree';
 import EventHandler from '../Element/EventHandler';
 import { extract_names } from 'periscopic';
 import mark_each_block_bindings from '../shared/mark_each_block_bindings';
+import { string_to_member_expression } from '../../../utils/string_to_member_expression';
 
 export default class InlineComponentWrapper extends Wrapper {
 	var: Identifier;
@@ -484,7 +485,7 @@ export default class InlineComponentWrapper extends Wrapper {
 		} else {
 			const expression = this.node.name === 'svelte:self'
 				? component.name
-				: this.renderer.reference(this.node.name);
+				: this.renderer.reference(string_to_member_expression(this.node.name));
 
 			block.chunks.init.push(b`
 				${(this.node.attributes.length > 0 || this.node.bindings.length > 0) && b`

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, ExpressionStatement, AssignmentExpression, Node } from 'estree';
+import { LabeledStatement, Statement, 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) {
-			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
+		if (!d.declaration) { // 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};`;

src/compiler/compile/utils/string_to_member_expression.ts

@@ -0,0 +1,17 @@
+import { MemberExpression, Identifier } from "estree";
+
+export function string_to_member_expression(name: string) {
+	const parts = name.split(".");
+	let node: MemberExpression | Identifier = {
+		type: "Identifier",
+		name: parts[0],
+	};
+	for (let i = 1; i < parts.length; i++) {
+		node = {
+			type: "MemberExpression",
+			object: node,
+			property: { type: "Identifier", name: parts[i] },
+		} as MemberExpression;
+	}
+	return node;
+}

src/runtime/internal/lifecycle.ts

@@ -27,7 +27,9 @@ export function onDestroy(fn) {
 	get_current_component().$$.on_destroy.push(fn);
 }
 
-export function createEventDispatcher() {
+export function createEventDispatcher<
+	EventMap extends {} = any
+>(): <EventKey extends Extract<keyof EventMap, string>>(type: EventKey, detail?: EventMap[EventKey]) => void {
 	const component = get_current_component();
 
 	return (type: string, detail?: any) => {
@@ -61,4 +63,4 @@ export function bubble(component, event) {
 	if (callbacks) {
 		callbacks.slice().forEach(fn => fn(event));
 	}
-}
+}

test/css/samples/empty-class/_config.js

@@ -2,7 +2,7 @@ export default {
 	warnings: [{
 		filename: "SvelteComponent.svelte",
 		code: `css-unused-selector`,
-		message: "Unused CSS selector",
+		message: 'Unused CSS selector ".x"',
 		start: {
 			line: 4,
 			column: 1,

test/css/samples/global-with-unused-descendant/_config.js

@@ -13,7 +13,7 @@ export default {
 			3:     color: red;
 			4:   }
 		`,
-		message: 'Unused CSS selector',
+		message: 'Unused CSS selector ":global(.foo) .bar"',
 		pos: 9,
 		start: {
 			character: 9,

test/css/samples/omit-scoping-attribute-descendant/_config.js

@@ -1,7 +1,7 @@
 export default {
 	warnings: [{
 		code: `css-unused-selector`,
-		message: 'Unused CSS selector',
+		message: 'Unused CSS selector "div > p"',
 		start: {
 			line: 8,
 			column: 1,

test/css/samples/unused-selector-leading/_config.js

@@ -3,7 +3,7 @@ export default {
 		{
 			filename: "SvelteComponent.svelte",
 			code: `css-unused-selector`,
-			message: "Unused CSS selector",
+			message: 'Unused CSS selector ".foo"',
 			start: {
 				line: 4,
 				column: 1,
@@ -27,7 +27,7 @@ export default {
 		{
 			filename: "SvelteComponent.svelte",
 			code: `css-unused-selector`,
-			message: "Unused CSS selector",
+			message: 'Unused CSS selector ".baz"',
 			start: {
 				line: 4,
 				column: 13,

test/css/samples/unused-selector-string-concat/_config.js

@@ -2,7 +2,7 @@ export default {
 	warnings: [
 		{
 			code: 'css-unused-selector',
-			message: 'Unused CSS selector',
+			message: 'Unused CSS selector ".fooaa"',
 			frame:
 				` 9: <style>
 				10:   .foo {color: red;}
@@ -16,7 +16,7 @@ export default {
 		},
 		{
 			code: 'css-unused-selector',
-			message: 'Unused CSS selector',
+			message: 'Unused CSS selector ".foobb"',
 			frame:
 				`10:   .foo {color: red;}
 				11:   .fooaa {color: red;}
@@ -30,7 +30,7 @@ export default {
 		},
 		{
 			code: 'css-unused-selector',
-			message: 'Unused CSS selector',
+			message: 'Unused CSS selector ".foodd"',
 			frame:
 				`12:   .foobb {color: red;}
 				13:   .foocc {color: red;}
@@ -44,7 +44,7 @@ export default {
 		},
 		{
 			code: 'css-unused-selector',
-			message: 'Unused CSS selector',
+			message: 'Unused CSS selector ".bbbar"',
 			frame:
 				`18:   .dd {color: red;}
 				19:   .aabar {color: red;}
@@ -58,7 +58,7 @@ export default {
 		},
 		{
 			code: 'css-unused-selector',
-			message: 'Unused CSS selector',
+			message: 'Unused CSS selector ".ccbar"',
 			frame:
 				`19:   .aabar {color: red;}
 				20:   .bbbar {color: red;}
@@ -72,7 +72,7 @@ export default {
 		},
 		{
 			code: 'css-unused-selector',
-			message: 'Unused CSS selector',
+			message: 'Unused CSS selector ".ddbar"',
 			frame:
 				`20:   .bbbar {color: red;}
 				21:   .ccbar {color: red;}
@@ -86,7 +86,7 @@ export default {
 		},
 		{
 			code: 'css-unused-selector',
-			message: 'Unused CSS selector',
+			message: 'Unused CSS selector ".fooaabar"',
 			frame:
 				`21:   .ccbar {color: red;}
 				22:   .ddbar {color: red;}
@@ -100,7 +100,7 @@ export default {
 		},
 		{
 			code: 'css-unused-selector',
-			message: 'Unused CSS selector',
+			message: 'Unused CSS selector ".foobbbar"',
 			frame:
 				`22:   .ddbar {color: red;}
 				23:   .fooaabar {color: red;}
@@ -114,7 +114,7 @@ export default {
 		},
 		{
 			code: 'css-unused-selector',
-			message: 'Unused CSS selector',
+			message: 'Unused CSS selector ".fooccbar"',
 			frame:
 				`23:   .fooaabar {color: red;}
 				24:   .foobbbar {color: red;}
@@ -128,7 +128,7 @@ export default {
 		},
 		{
 			code: 'css-unused-selector',
-			message: 'Unused CSS selector',
+			message: 'Unused CSS selector ".unused"',
 			frame:
 				`26:   .fooddbar {color: red;}
 				27:   .baz {color: red;}

test/css/samples/unused-selector-ternary-concat/_config.js

@@ -13,7 +13,7 @@ export default {
 				14:   .unused {color: blue;}
 				      ^
 				15: </style>`,
-			message: 'Unused CSS selector',
+			message: 'Unused CSS selector ".unused"',
 			pos: 198,
 			start: {
 				character: 198,

test/css/samples/unused-selector-ternary-nested/_config.js

@@ -2,7 +2,7 @@ export default {
 	warnings: [
 		{
 			code: 'css-unused-selector',
-			message: 'Unused CSS selector',
+			message: 'Unused CSS selector ".hover.unused"',
 			frame: `
 				13:   .thing.active {color: blue;}
 				14:   .hover { color: blue; }
@@ -16,7 +16,7 @@ export default {
 		},
 		{
 			code: 'css-unused-selector',
-			message: 'Unused CSS selector',
+			message: 'Unused CSS selector ".unused"',
 			frame: `
 				15:   .hover.unused { color: blue; }
 				16:

test/css/samples/unused-selector-ternary/_config.js

@@ -6,7 +6,7 @@ export default {
 	warnings: [{
 		filename: "SvelteComponent.svelte",
 		code: `css-unused-selector`,
-		message: "Unused CSS selector",
+		message: 'Unused CSS selector ".maybeactive"',
 		start: {
 			line: 16,
 			column: 1,

test/css/samples/unused-selector/_config.js

@@ -2,7 +2,7 @@ export default {
 	warnings: [{
 		filename: "SvelteComponent.svelte",
 		code: `css-unused-selector`,
-		message: "Unused CSS selector",
+		message: 'Unused CSS selector ".bar"',
 		start: {
 			line: 8,
 			column: 1,

test/runtime/samples/component-namespace/Tooltip.svelte

@@ -0,0 +1 @@
+<p>i am a widget</p>

test/runtime/samples/component-namespace/Widget.svelte

@@ -0,0 +1,5 @@
+<script context="module">
+  import Tooltip from './Tooltip.svelte';
+
+  export const Widget = { Tooltip };
+</script>

test/runtime/samples/component-namespace/_config.js

@@ -0,0 +1,3 @@
+export default {
+	html: '<p>i am a widget</p>'
+};

test/runtime/samples/component-namespace/main.svelte

@@ -0,0 +1,8 @@
+<script>
+	import { Widget } from './Widget.svelte';
+	let widgets = [Widget];
+</script>
+
+{#each widgets as LazyWidget}
+	<LazyWidget.Tooltip />
+{/each}

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>