Merge branch 'sveltejs:master' into master

CHANGELOG.md

@@ -1,44 +1,45 @@
 # Svelte changelog
 
-## Unreleased
+## 3.56.0
 
+* Add `|stopImmediatePropagation` event modifier ([#5085](https://github.com/sveltejs/svelte/issues/5085))
+* Add `axis` parameter to `slide` transition ([#6182](https://github.com/sveltejs/svelte/issues/6182))
+* Add `readonly` utility to convert `writable` store to readonly ([#6518](https://github.com/sveltejs/svelte/pull/6518))
+* Add `readyState` binding for media elements ([#6666](https://github.com/sveltejs/svelte/issues/6666))
+* Generate valid automatic component names when the filename contains only special characters ([#7143](https://github.com/sveltejs/svelte/issues/7143))
+* Add `naturalWidth` and `naturalHeight` bindings ([#7771](https://github.com/sveltejs/svelte/issues/7771))
+* Support `<!-- svelte-ignore ... -->` on components ([#8082](https://github.com/sveltejs/svelte/issues/8082))
 * Add a11y warnings:
-	* `aria-activedescendant-has-tabindex`: elements with `aria-activedescendant` need to have a `tabindex` ([#8172](https://github.com/sveltejs/svelte/pull/8172))
+	* `aria-activedescendant-has-tabindex`: checks that elements with `aria-activedescendant` have a `tabindex` ([#8172](https://github.com/sveltejs/svelte/pull/8172))
 	* `role-supports-aria-props`: checks that the (implicit) element role supports the given aria attributes ([#8195](https://github.com/sveltejs/svelte/pull/8195))
-* Omit a11y warning on `<video>` tags with `aria-hidden="true"` ([#7874](https://github.com/sveltejs/svelte/issues/7874))
-* Omit a11y "no child content" warning on elements with `aria-label` ([#8299](https://github.com/sveltejs/svelte/pull/8299))
-* Omit a11y warnings on `<svelte:element>` ([#7939](https://github.com/sveltejs/svelte/issues/7939))
-* Make `noreferrer` warning less zealous ([#6289](https://github.com/sveltejs/svelte/issues/6289))
-* `trusted-types` CSP compatibility for Web Components ([#8134](https://github.com/sveltejs/svelte/issues/8134))
 * Add `data-sveltekit-replacestate` and `data-sveltekit-keepfocus` attribute typings ([#8281](https://github.com/sveltejs/svelte/issues/8281))
-* Don't throw when calling `unsubscribe` twice ([#8186](https://github.com/sveltejs/svelte/pull/8186))
+* Compute node dimensions immediately before crossfading ([#4111](https://github.com/sveltejs/svelte/issues/4111))
-* Detect unused empty attribute CSS selectors ([#8042](https://github.com/sveltejs/svelte/issues/8042))
+* Fix potential infinite invalidate loop with `<svelte:component>` ([#4129](https://github.com/sveltejs/svelte/issues/4129))
-* Simpler output for reactive statements if dependencies are all static ([#7942](https://github.com/sveltejs/svelte/pull/7942))
-* Flush remaining `afterUpdate` calls before `onDestroy` ([#7476](https://github.com/sveltejs/svelte/issues/7476))
-* Check value equality for `input` types `url` and `search` ([#7027](https://github.com/sveltejs/svelte/issues/7027))
-* Compute node dimensions directly before crossfading ([#4111](https://github.com/sveltejs/svelte/issues/4111))
-* Add `readonly` method to convert `writable` store to readonly ([#6518](https://github.com/sveltejs/svelte/pull/6518))
 * Ensure `bind:offsetHeight` updates initially ([#4233](https://github.com/sveltejs/svelte/issues/4233))
-* Better handling of `inert` attribute ([#7500](https://github.com/sveltejs/svelte/issues/7500))
-* Clear inputs when `bind:group` to `undefined` ([#8214](https://github.com/sveltejs/svelte/issues/8214))
-* Ensure nested arrays can change at the same time ([#8282](https://github.com/sveltejs/svelte/issues/8282))
-* Reduce use of template literals in SSR output for better performance ([#7539](https://github.com/sveltejs/svelte/pull/7539))
-* Allow assigning to property of const while destructuring ([#7964](https://github.com/sveltejs/svelte/issues/7964))
 * Don't set selected options if value is unbound or not passed ([#5644](https://github.com/sveltejs/svelte/issues/5644))
-* Ensure `<input>` value persists when swapping elements with spread attributes in an `#each` block ([#7578](https://github.com/sveltejs/svelte/issues/7578))
+* Validate component `:global()` selectors ([#6272](https://github.com/sveltejs/svelte/issues/6272))
-* Select first enabled option by default when initial value is undefined ([#7041](https://github.com/sveltejs/svelte/issues/7041))
+* Improve warnings:
-* Fix race condition on `svelte:element` with transitions ([#7948](https://github.com/sveltejs/svelte/issues/7948))
+	* Make `noreferrer` warning less zealous ([#6289](https://github.com/sveltejs/svelte/issues/6289))
-* Optimise `<svelte:element>` output code for static tag and static attribute ([#8161](https://github.com/sveltejs/svelte/pull/8161))
+	* Omit a11y warnings on `<video aria-hidden="true">` ([#7874](https://github.com/sveltejs/svelte/issues/7874))
-* Decode html entities correctly ([#8026](https://github.com/sveltejs/svelte/issues/8026))
+	* Omit a11y warnings on `<svelte:element>` ([#7939](https://github.com/sveltejs/svelte/issues/7939))
+	* Detect unused empty attribute CSS selectors ([#8042](https://github.com/sveltejs/svelte/issues/8042))
+	* Omit "no child content" warning on elements with `aria-label` ([#8296](https://github.com/sveltejs/svelte/issues/8296))
+* Check value equality for `<input type="search">` and `<input type="url">` ([#7027](https://github.com/sveltejs/svelte/issues/7027))
+* Do not select a disabled `<option>` by default when the initial bound value is undefined ([#7041](https://github.com/sveltejs/svelte/issues/7041))
 * Handle `{@html}` tags inside `<template>` tags ([#7364](https://github.com/sveltejs/svelte/pull/7364))
-* Introduce parameter to allow for horizontal slide transition ([#6182](https://github.com/sveltejs/svelte/issues/6182))
+* Ensure `afterUpdate` is not called after `onDestroy` ([#7476](https://github.com/sveltejs/svelte/issues/7476))
-* Add `naturalWidth` and `naturalHeight` bindings ([#7771](https://github.com/sveltejs/svelte/issues/7771))
+* Improve handling of `inert` attribute ([#7500](https://github.com/sveltejs/svelte/issues/7500))
-* make `<!-- svelte-ignore ... -->` work above components ([#8082](https://github.com/sveltejs/svelte/issues/8082))
+* Reduce use of template literals in SSR output for better performance ([#7539](https://github.com/sveltejs/svelte/pull/7539))
-* add global compound selector validation ([#6272](https://github.com/sveltejs/svelte/issues/6272))
+* Ensure `<input>` value persists when swapping elements with spread attributes in an `{#each}` block ([#7578](https://github.com/sveltejs/svelte/issues/7578))
-* add `stopImmediatePropagation` event modifier ([#5085](https://github.com/sveltejs/svelte/issues/5085))
+* Simplify generated code for reactive statements if dependencies are all static ([#7942](https://github.com/sveltejs/svelte/pull/7942))
-* add `readyState` binding for media elements ([#6666](https://github.com/sveltejs/svelte/issues/6666))
+* Fix race condition on `<svelte:element>` with transitions ([#7948](https://github.com/sveltejs/svelte/issues/7948))
-* call `<svelte:component>` update to `this` only when it's dirty ([#4129](https://github.com/sveltejs/svelte/issues/4129))
+* Allow assigning to a property of a `const` when destructuring ([#7964](https://github.com/sveltejs/svelte/issues/7964))
-* support exclusively special characters in component filenames ([#7143](https://github.com/sveltejs/svelte/issues/7143))
+* Match browser behavior for decoding malformed HTML entities ([#8026](https://github.com/sveltejs/svelte/issues/8026))
+* Ensure `trusted-types` CSP compatibility for Web Components ([#8134](https://github.com/sveltejs/svelte/issues/8134))
+* Optimise `<svelte:element>` output code for static tag and static attribute ([#8161](https://github.com/sveltejs/svelte/pull/8161))
+* Don't throw when calling unsubscribing from a store twice ([#8186](https://github.com/sveltejs/svelte/pull/8186))
+* Clear inputs when `bind:group` value is set to `undefined` ([#8214](https://github.com/sveltejs/svelte/issues/8214))
+* Fix handling of nested arrays with keyed `{#each}` containing a non-keyed `{#each}` ([#8282](https://github.com/sveltejs/svelte/issues/8282))
 
 ## 3.55.1
 

elements/index.d.ts

@@ -869,9 +869,9 @@ export interface HTMLMediaAttributes<T extends HTMLMediaElement> extends HTMLAtt
 }
 
 export interface HTMLMetaAttributes extends HTMLAttributes<HTMLMetaElement> {
-	charSet?: string | undefined | null;
+	charset?: string | undefined | null;
 	content?: string | undefined | null;
-	httpequiv?: string | undefined | null;
+	'http-equiv'?: string | undefined | null;
 	name?: string | undefined | null;
 	media?: string | undefined | null;
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "3.55.1",
+  "version": "3.56.0",
   "description": "Cybernetically enhanced web apps",
   "module": "index.mjs",
   "main": "index",
@@ -122,41 +122,41 @@
     "@ampproject/remapping": "^0.3.0",
     "@jridgewell/sourcemap-codec": "^1.4.14",
     "@rollup/plugin-commonjs": "^11.0.0",
-    "@rollup/plugin-json": "^4.0.1",
+    "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^11.2.1",
-    "@rollup/plugin-replace": "^2.3.0",
+    "@rollup/plugin-replace": "^5.0.2",
     "@rollup/plugin-sucrase": "^3.1.0",
     "@rollup/plugin-typescript": "^2.0.1",
-    "@rollup/plugin-virtual": "^2.0.0",
+    "@rollup/plugin-virtual": "^3.0.1",
     "@sveltejs/eslint-config": "github:sveltejs/eslint-config#v5.8.0",
-    "@types/aria-query": "^5.0.0",
+    "@types/aria-query": "^5.0.1",
     "@types/mocha": "^7.0.0",
     "@types/node": "^8.10.53",
-    "@typescript-eslint/eslint-plugin": "^5.22.0",
+    "@typescript-eslint/eslint-plugin": "^5.29.0",
-    "@typescript-eslint/parser": "^5.22.0",
+    "@typescript-eslint/parser": "^5.29.0",
     "acorn": "^8.8.1",
-    "agadoo": "^2.0.0",
+    "agadoo": "^3.0.0",
-    "aria-query": "^5.1.1",
+    "aria-query": "^5.1.3",
     "axobject-query": "^3.1.1",
-    "code-red": "^0.2.5",
+    "code-red": "^1.0.0",
-    "css-tree": "^2.2.1",
+    "css-tree": "^2.3.1",
-    "eslint": "^8.26.0",
+    "eslint": "^8.35.0",
-    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-import": "^2.27.0",
     "eslint-plugin-svelte3": "^4.0.0",
-    "estree-walker": "^3.0.1",
+    "estree-walker": "^3.0.3",
-    "is-reference": "^3.0.0",
+    "is-reference": "^3.0.1",
     "jsdom": "^15.2.1",
     "kleur": "^4.1.5",
     "locate-character": "^2.0.5",
     "magic-string": "^0.30.0",
     "mocha": "^7.0.0",
-    "periscopic": "^3.0.4",
+    "periscopic": "^3.1.0",
     "puppeteer": "^2.0.0",
     "rollup": "^1.27.14",
     "source-map": "^0.7.4",
     "source-map-support": "^0.5.21",
     "tiny-glob": "^0.2.9",
-    "tslib": "^2.4.1",
+    "tslib": "^2.5.0",
     "typescript": "^3.7.5",
     "util": "^0.12.5"
   }

src/compiler/compile/Component.ts

@@ -951,7 +951,7 @@ export default class Component {
 		});
 	}
 
-	warn_on_undefined_store_value_references(node: Node, parent: Node, prop: string, scope: Scope) {
+	warn_on_undefined_store_value_references(node: Node, parent: Node, prop: string | number | symbol, scope: Scope) {
 		if (
 			node.type === 'LabeledStatement' &&
 			node.label.name === '$' &&

src/compiler/compile/nodes/Element.ts

@@ -23,7 +23,7 @@ import { string_literal } from '../utils/stringify';
 import { Literal } from 'estree';
 import compiler_warnings from '../compiler_warnings';
 import compiler_errors from '../compiler_errors';
-import { ARIARoleDefintionKey, roles, aria, ARIAPropertyDefinition, ARIAProperty } from 'aria-query';
+import { ARIARoleDefinitionKey, roles, aria, ARIAPropertyDefinition, ARIAProperty } from 'aria-query';
 import { is_interactive_element, is_non_interactive_roles, is_presentation_role, is_interactive_roles, is_hidden_from_screen_reader, is_semantic_role_element } from '../utils/a11y';
 
 const aria_attributes = 'activedescendant atomic autocomplete busy checked colcount colindex colspan controls current describedby description details disabled dropeffect errormessage expanded flowto grabbed haspopup hidden invalid keyshortcuts label labelledby level live modal multiline multiselectable orientation owns placeholder posinset pressed readonly relevant required roledescription rowcount rowindex rowspan selected setsize sort valuemax valuemin valuenow valuetext'.split(' ');
@@ -566,7 +566,7 @@ export default class Element extends Node {
 				const value = attribute.get_static_value();
 
 				if (typeof value === 'string') {
-					value.split(regex_any_repeated_whitespaces).forEach((current_role: ARIARoleDefintionKey) => {
+					value.split(regex_any_repeated_whitespaces).forEach((current_role: ARIARoleDefinitionKey) => {
 						if (current_role && aria_role_abstract_set.has(current_role)) {
 							component.warn(attribute, compiler_warnings.a11y_no_abstract_role(current_role));
 						} else if (current_role && !aria_role_set.has(current_role)) {
@@ -640,7 +640,7 @@ export default class Element extends Node {
 		// click-events-have-key-events
 		if (handlers_map.has('click')) {
 			const role = attribute_map.get('role');
-			const is_non_presentation_role = role?.is_static && !is_presentation_role(role.get_static_value() as ARIARoleDefintionKey);
+			const is_non_presentation_role = role?.is_static && !is_presentation_role(role.get_static_value() as ARIARoleDefinitionKey);
 
 			if (
 				!this.is_dynamic_element && 
@@ -664,7 +664,7 @@ export default class Element extends Node {
 		}
 
 		// no-noninteractive-tabindex
-		if (!this.is_dynamic_element && !is_interactive_element(this.name, attribute_map) && !is_interactive_roles(attribute_map.get('role')?.get_static_value() as ARIARoleDefintionKey)) {
+		if (!this.is_dynamic_element && !is_interactive_element(this.name, attribute_map) && !is_interactive_roles(attribute_map.get('role')?.get_static_value() as ARIARoleDefinitionKey)) {
 			const tab_index = attribute_map.get('tabindex');
 			if (tab_index && (!tab_index.is_static || Number(tab_index.get_static_value()) >= 0)) {
 				component.warn(this, compiler_warnings.a11y_no_noninteractive_tabindex);
@@ -673,7 +673,7 @@ export default class Element extends Node {
 
 		// role-supports-aria-props
 		const role = attribute_map.get('role');
-		const role_value = (role ? role.get_static_value() : get_implicit_role(this.name, attribute_map)) as ARIARoleDefintionKey;
+		const role_value = (role ? role.get_static_value() : get_implicit_role(this.name, attribute_map)) as ARIARoleDefinitionKey;
 		if (typeof role_value === 'string' && roles.has(role_value)) {
 			const { props } = roles.get(role_value);
 			const invalid_aria_props = new Set(aria.keys().filter(attribute => !(attribute in props)));

src/compiler/compile/render_dom/wrappers/Element/Binding.ts

@@ -145,8 +145,8 @@ export default class BindingWrapper {
 		}
 
 		// model to view
-		let update_dom = get_dom_updater(parent, this);
+		let update_dom = get_dom_updater(parent, this, false);
-		let mount_dom = update_dom;
+		let mount_dom = get_dom_updater(parent, this, true);
 
 		// special cases
 		switch (this.node.name) {
@@ -234,7 +234,8 @@ export default class BindingWrapper {
 
 function get_dom_updater(
 	element: ElementWrapper | InlineComponentWrapper,
-	binding: BindingWrapper
+	binding: BindingWrapper,
+	mounting: boolean
 ) {
 	const { node } = element;
 
@@ -249,6 +250,7 @@ function get_dom_updater(
 	if (node.name === 'select') {
 		return node.get_static_attribute_value('multiple') === true ?
 			b`@select_options(${element.var}, ${binding.snippet})` :
+			mounting ? b`@select_option(${element.var}, ${binding.snippet}, true)` :
 			b`@select_option(${element.var}, ${binding.snippet})`;
 	}
 
@@ -439,7 +441,7 @@ function get_value_from_dom(
 		return x`$$value`;
 	}
 
-	// <select bind:value='selected>
+	// <select bind:value='selected'>
 	if (node.name === 'select') {
 		return node.get_static_attribute_value('multiple') === true ?
 			x`@select_multiple_value(this)` :

src/compiler/compile/utils/a11y.ts

@@ -1,5 +1,5 @@
 import {
-	ARIARoleDefintionKey,
+	ARIARoleDefinitionKey,
 	roles as roles_map,
 	elementRoles,
 	ARIARoleRelationConcept
@@ -32,17 +32,17 @@ const interactive_roles = new Set(
 	non_abstract_roles.filter((name) => !non_interactive_roles.has(name))
 );
 
-export function is_non_interactive_roles(role: ARIARoleDefintionKey) {
+export function is_non_interactive_roles(role: ARIARoleDefinitionKey) {
 	return non_interactive_roles.has(role);
 }
 
-export function is_interactive_roles(role: ARIARoleDefintionKey) {
+export function is_interactive_roles(role: ARIARoleDefinitionKey) {
 	return interactive_roles.has(role);
 }
 
 const presentation_roles = new Set(['presentation', 'none']);
 
-export function is_presentation_role(role: ARIARoleDefintionKey) {
+export function is_presentation_role(role: ARIARoleDefinitionKey) {
 	return presentation_roles.has(role);
 }
 
@@ -141,7 +141,7 @@ export function is_interactive_element(
 	return false;
 }
 
-export function is_semantic_role_element(role: ARIARoleDefintionKey, tag_name: string, attribute_map: Map<string, Attribute>) {
+export function is_semantic_role_element(role: ARIARoleDefinitionKey, tag_name: string, attribute_map: Map<string, Attribute>) {
 	for (const [schema, ax_object] of elementAXObjects.entries()) {
 		if (schema.name === tag_name && (!schema.attributes || schema.attributes.every(
 			(attr) => attribute_map.has(attr.name) && attribute_map.get(attr.name).get_static_value() === attr.value

src/compiler/parse/acorn.ts

@@ -3,12 +3,12 @@ import * as code_red from 'code-red';
 
 export const parse = (source: string): Node => code_red.parse(source, {
 	sourceType: 'module',
-	ecmaVersion: 12,
+	ecmaVersion: 13,
 	locations: true
 });
 
 export const parse_expression_at = (source: string, index: number): Node => code_red.parseExpressionAt(source, index, {
 	sourceType: 'module',
-	ecmaVersion: 12,
+	ecmaVersion: 13,
 	locations: true
 });

src/runtime/internal/dom.ts

@@ -606,7 +606,7 @@ export function set_style(node, key, value, important) {
 	}
 }
 
-export function select_option(select, value) {
+export function select_option(select, value, mounting) {
 	for (let i = 0; i < select.options.length; i += 1) {
 		const option = select.options[i];
 
@@ -616,7 +616,9 @@ export function select_option(select, value) {
 		}
 	}
 
-	select.selectedIndex = -1; // no option should be selected
+	if (!mounting || value !== undefined) {
+		select.selectedIndex = -1; // no option should be selected
+	}
 }
 
 export function select_options(select, value) {
@@ -626,16 +628,8 @@ export function select_options(select, value) {
 	}
 }
 
-function first_enabled_option(select) {
-	for (const option of select.options) {
-		if (!option.disabled) {
-			return option;
-		}
-	}
-}
-
 export function select_value(select) {
-	const selected_option = select.querySelector(':checked') || first_enabled_option(select);
+	const selected_option = select.querySelector(':checked');
 	return selected_option && selected_option.__value;
 }
 

src/runtime/internal/scheduler.ts

@@ -8,7 +8,7 @@ export const binding_callbacks = [];
 let render_callbacks = [];
 const flush_callbacks = [];
 
-const resolved_promise = Promise.resolve();
+const resolved_promise = /* @__PURE__ */ Promise.resolve();
 let update_scheduled = false;
 
 export function schedule_update() {

test/js/samples/class-field/expected.js

@@ -0,0 +1,25 @@
+/* generated by Svelte vX.Y.Z */
+import { SvelteComponent, init, safe_not_equal } from "svelte/internal";
+
+function instance($$self) {
+	class A {
+		p1;
+		p2 = 1;
+		#p3 = 2;
+
+		#getP3() {
+			return this.#p3;
+		}
+	}
+
+	return [];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, null, safe_not_equal, {});
+	}
+}
+
+export default Component;

test/js/samples/class-field/input.svelte

@@ -0,0 +1,12 @@
+<script>
+	class A {
+		p1;
+		p2 = 1;
+
+		#p3 = 2;
+
+		#getP3() {
+			return this.#p3;
+		}
+	}
+</script>

test/runtime/samples/binding-select-initial-value-undefined-2/_config.js

@@ -0,0 +1,25 @@
+export default {
+	skip_if_ssr: true, // TODO would be nice to fix this in SSR as well
+
+	html: `
+		<p>selected: b</p>
+
+		<select>
+			<option value='a'>a</option>
+			<option value='b'>b</option>
+			<option value='c'>c</option>
+		</select>
+
+		<p>selected: b</p>
+	`,
+
+	test({ assert, component, target }) {
+		assert.equal(component.selected, 'b');
+		const select = target.querySelector('select');
+		const options = [...target.querySelectorAll('option')];
+
+		// option with selected attribute should be selected
+		assert.equal(select.value, 'b');
+		assert.ok(options[1].selected);
+	}
+};

test/runtime/samples/binding-select-initial-value-undefined-2/main.svelte

@@ -0,0 +1,13 @@
+<script>
+	export let selected;
+</script>
+
+<p>selected: {selected}</p>
+
+<select bind:value={selected}>
+	<option>a</option>
+	<option selected>b</option>
+	<option>c</option>
+</select>
+
+<p>selected: {selected}</p>