Merge branch 'master' into version-4

Author: dummdidumm

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,3 +1,7 @@
+# HEADS UP: BIG RESTRUCTURING UNDERWAY
+
+The Svelte repo is currently in the process of heavy restructuring for Svelte 4. After that, work on Svelte 5 will likely change a lot on the compiler aswell. For that reason, please don't open PRs that are large in scope, touch more than a couple of files etc. In other words, bug fixes are fine, but feature PRs will likely not be merged.
+
 ### Before submitting the PR, please make sure you do the following
 - [ ] It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
 - [ ] Prefix your PR title with `feat:`, `fix:`, `chore:`, or `docs:`.

CHANGELOG.md

@@ -23,11 +23,18 @@
 * Fix transitions so that they don't require a `style-src 'unsafe-inline'` Content Security Policy (CSP) ([#6662](https://github.com/sveltejs/svelte/issues/6662)).
 * Explicitly disallow `var` declarations extending the reactive statement scope ([#6800](https://github.com/sveltejs/svelte/pull/6800))
 
-## Unreleased (3.0)
-
-* Handle `width`/`height` attributes when spreading ([#6752](https://github.com/sveltejs/svelte/issues/6752))
-* Add support for resize observer bindings (`<div bind:contentRect|contentBoxSize|borderBoxSize|devicePixelContentBoxSize>`) ([#8022](https://github.com/sveltejs/svelte/pull/8022))
-
+## 3.59.0
+
+* Add `ResizeObserver` bindings `contentRect`/`contentBoxSize`/`borderBoxSize`/`devicePixelContentBoxSize` ([#8022](https://github.com/sveltejs/svelte/pull/8022))
+* Add `devicePixelRatio` binding for `<svelte:window>` ([#8285](https://github.com/sveltejs/svelte/issues/8285))
+* Add `fullscreenElement` and `visibilityState` bindings for `<svelte:document>` ([#8507](https://github.com/sveltejs/svelte/pull/8507))
+* Add `a11y-autocomplete-valid` warning ([#8520](https://github.com/sveltejs/svelte/pull/8520))
+* Fix handling of `width`/`height` attributes when spreading ([#6752](https://github.com/sveltejs/svelte/issues/6752))
+* Fix updating of interpolated `style:` directive when using spread ([#8438](https://github.com/sveltejs/svelte/issues/8438))
+* Remove `style:` directive property when value is `undefined` ([#8462](https://github.com/sveltejs/svelte/issues/8462))
+* Fix type of `VERSION` compiler export ([#8498](https://github.com/sveltejs/svelte/issues/8498))
+* Relax `a11y-no-redundant-roles` warning ([#8536](https://github.com/sveltejs/svelte/pull/8536))
+* Handle nested array rest destructuring ([#8552](https://github.com/sveltejs/svelte/issues/8552), [#8554](https://github.com/sveltejs/svelte/issues/8554))
 ## 3.58.0
 
 * Add `bind:innerText` for `contenteditable` elements ([#3311](https://github.com/sveltejs/svelte/issues/3311))

CONTRIBUTING.md

@@ -62,6 +62,8 @@ When [opening a new issue](https://github.com/sveltejs/svelte/issues/new/choose)
 
 ## Pull requests
 
+> HEADS UP: The Svelte repo is currently in the process of heavy restructuring for Svelte 4. After that, work on Svelte 5 will likely change a lot on the compiler aswell. For that reason, please don't open PRs that are large in scope, touch more than a couple of files etc. In other words, bug fixes are fine, but feature PRs will likely not be merged.
+
 ### Proposing a change
 
 If you would like to request a new feature or enhancement but are not yet thinking about opening a pull request, you can also file an issue with [feature template](https://github.com/sveltejs/svelte/issues/new?template=feature_request.yml).

elements/index.d.ts

@@ -1081,11 +1081,17 @@ export interface SvelteMediaTimeRange {
 	end: number;
 }
 
+export interface SvelteDocumentAttributes extends HTMLAttributes<Document> {
+	readonly 'bind:fullscreenElement'?: Document['fullscreenElement'] | undefined | null;
+	readonly 'bind:visibilityState'?: Document['visibilityState'] | undefined | null;
+}
+
 export interface SvelteWindowAttributes extends HTMLAttributes<Window> {
 	readonly 'bind:innerWidth'?: Window['innerWidth'] | undefined | null;
 	readonly 'bind:innerHeight'?: Window['innerHeight'] | undefined | null;
 	readonly 'bind:outerWidth'?: Window['outerWidth'] | undefined | null;
 	readonly 'bind:outerHeight'?: Window['outerHeight'] | undefined | null;
+	readonly 'bind:devicePixelRatio'?: Window['devicePixelRatio'] | undefined | null;
 	'bind:scrollX'?: Window['scrollX'] | undefined | null;
 	'bind:scrollY'?: Window['scrollY'] | undefined | null;
 	readonly 'bind:online'?: Window['navigator']['onLine'] | undefined | null;
@@ -1594,7 +1600,7 @@ export interface SvelteHTMLElements {
 
 	// Svelte specific
 	'svelte:window': SvelteWindowAttributes;
-	'svelte:document': HTMLAttributes<Document>;
+	'svelte:document': SvelteDocumentAttributes;
 	'svelte:body': HTMLAttributes<HTMLElement>;
 	'svelte:fragment': { slot?: string };
 	'svelte:options': {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte",
-  "version": "3.58.0",
+  "version": "3.59.0",
   "description": "Cybernetically enhanced web apps",
   "module": "index.mjs",
   "main": "index",

site/content/docs/02-component-format.md

@@ -42,7 +42,7 @@ Svelte uses the `export` keyword to mark a variable declaration as a *property*
 
 ---
 
-You can specify a default initial value for a prop. It will be used if the component's consumer doesn't specify the prop on the component (or if its initial value is `undefined`) when instantiating the component. Note that whenever a prop is removed by the consumer, its value is set to `undefined` rather than the initial value.
+You can specify a default initial value for a prop. It will be used if the component's consumer doesn't specify the prop on the component (or if its initial value is `undefined`) when instantiating the component. Note that if the values of props are subsequently updated, then any prop whose value is not specified will be set to `undefined` (rather than its initial value).
 
 In development mode (see the [compiler options](/docs#compile-time-svelte-compile)), a warning will be printed if no default initial value is provided and the consumer does not specify a value. To squelch this warning, ensure that a default initial value is specified, even if it is `undefined`.
 

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

@@ -823,6 +823,8 @@ Inputs that work together can use `bind:group`.
 <input type="checkbox" bind:group={fillings} value="Guac (extra)">
 ```
 
+> `bind:group` only works if the inputs are in the same Svelte component.
+
 #### bind:this
 
 ```sv
@@ -1742,6 +1744,7 @@ You can also bind to the following properties:
 * `scrollX`
 * `scrollY`
 * `online` — an alias for `window.navigator.onLine`
+* `devicePixelRatio`
 
 All except `scrollX` and `scrollY` are readonly.
 
@@ -1756,6 +1759,9 @@ All except `scrollX` and `scrollY` are readonly.
 ```sv
 <svelte:document on:event={handler}/>
 ```
+```sv
+<svelte:document bind:prop={value}/>
+```
 
 ---
 
@@ -1770,6 +1776,15 @@ As with `<svelte:window>`, this element may only appear the top level of your co
 />
 ```
 
+---
+
+You can also bind to the following properties:
+
+* `fullscreenElement`
+* `visibilityState`
+
+All are readonly.
+
 ### `<svelte:body>`
 
 ```sv

src/compiler/compile/Component.ts

@@ -26,7 +26,7 @@ import TemplateScope from './nodes/shared/TemplateScope';
 import fuzzymatch from '../utils/fuzzymatch';
 import get_object from './utils/get_object';
 import Slot from './nodes/Slot';
-import { Node, ImportDeclaration, ExportNamedDeclaration, Identifier, ExpressionStatement, AssignmentExpression, Literal, Property, RestElement, ExportDefaultDeclaration, ExportAllDeclaration, FunctionDeclaration, FunctionExpression, VariableDeclarator, ObjectExpression } from 'estree';
+import { Node, ImportDeclaration, ExportNamedDeclaration, Identifier, ExpressionStatement, AssignmentExpression, Literal, Property, RestElement, ExportDefaultDeclaration, ExportAllDeclaration, FunctionDeclaration, FunctionExpression, VariableDeclarator, ObjectExpression, Pattern, Expression } from 'estree';
 import add_to_set from './utils/add_to_set';
 import check_graph_for_cycles from './utils/check_graph_for_cycles';
 import { print, b } from 'code-red';
@@ -1036,7 +1036,7 @@ export default class Component {
 						const inserts = [];
 						const props = [];
 
-						function add_new_props(exported, local, default_value) {
+						function add_new_props(exported: Identifier, local: Pattern, default_value: Expression) {
 							props.push({
 								type: 'Property',
 								method: false,
@@ -1066,7 +1066,7 @@ export default class Component {
 						for (let index = 0; index < node.declarations.length; index++) {
 							const declarator = node.declarations[index];
 							if (declarator.id.type !== 'Identifier') {
-								function get_new_name(local) {
+								function get_new_name(local: Identifier): Identifier {
 									const variable = component.var_lookup.get(local.name);
 									if (variable.subscribable) {
 										inserts.push(get_insert(variable));
@@ -1080,7 +1080,7 @@ export default class Component {
 									return local;
 								}
 
-								function rename_identifiers(param: Node) {
+								function rename_identifiers(param: Pattern) {
 									switch (param.type) {
 										case 'ObjectPattern': {
 											const handle_prop = (prop: Property | RestElement) => {
@@ -1089,15 +1089,15 @@ export default class Component {
 												} else if (prop.value.type === 'Identifier') {
 													prop.value = get_new_name(prop.value);
 												} else {
-													rename_identifiers(prop.value);
+													rename_identifiers(prop.value as Pattern);
 												}
 											};
 
 											param.properties.forEach(handle_prop);
 											break;
 										}
 										case 'ArrayPattern': {
-											const handle_element = (element: Node, index: number, array: Node[]) => {
+											const handle_element = (element: Pattern | null, index: number, array: Array<Pattern | null>) => {
 												if (element) {
 													if (element.type === 'Identifier') {
 														array[index] = get_new_name(element);
@@ -1112,7 +1112,11 @@ export default class Component {
 										}
 
 										case 'RestElement':
-											param.argument = get_new_name(param.argument);
+											if (param.argument.type === 'Identifier') {
+												param.argument = get_new_name(param.argument);
+											} else {
+												rename_identifiers(param.argument);
+											}
 											break;
 
 										case 'AssignmentPattern':

src/compiler/compile/compiler_warnings.ts

@@ -170,6 +170,10 @@ export default {
 		code: 'a11y-missing-attribute',
 		message: `A11y: <${name}> element should have ${article} ${sequence} attribute`
 	}),
+	a11y_autocomplete_valid: (type: null | true | string, value: null | true | string) => ({
+		code: 'a11y-autocomplete-valid',
+		message: `A11y: The value '${value}' is not supported by the attribute 'autocomplete' on element <input type="${type}">`
+	}),
 	a11y_img_redundant_alt: {
 		code: 'a11y-img-redundant-alt',
 		message: 'A11y: Screenreaders already announce <img> elements as an image.'
@@ -228,7 +232,7 @@ export default {
 	},
 	invalid_rest_eachblock_binding: (rest_element_name: string) => ({
 		code: 'invalid-rest-eachblock-binding',
-		message: `...${rest_element_name} operator will create a new object and binding propagation with original object will not work`
+		message: `The rest operator (...) will create a new object and binding '${rest_element_name}' with the original object will not work`
 	}),
 	avoid_mouse_events_on_document: {
 		code: 'avoid-mouse-events-on-document',

src/compiler/compile/nodes/Binding.ts

@@ -9,6 +9,7 @@ import { TemplateNode } from '../../interfaces';
 import Element from './Element';
 import InlineComponent from './InlineComponent';
 import Window from './Window';
+import Document from './Document';
 import { clone } from '../../utils/clone';
 import compiler_errors from '../compiler_errors';
 import compiler_warnings from '../compiler_warnings';
@@ -36,7 +37,7 @@ export default class Binding extends Node {
 	is_contextual: boolean;
 	is_readonly: boolean;
 
-	constructor(component: Component, parent: Element | InlineComponent | Window, scope: TemplateScope, info: TemplateNode) {
+	constructor(component: Component, parent: Element | InlineComponent | Window | Document, scope: TemplateScope, info: TemplateNode) {
 		super(component, parent, scope, info);
 
 		if (info.expression.type !== 'Identifier' && info.expression.type !== 'MemberExpression') {

src/compiler/compile/nodes/Document.ts

@@ -1,14 +1,24 @@
 import Node from './shared/Node';
+import Binding from './Binding';
 import EventHandler from './EventHandler';
+import fuzzymatch from '../../utils/fuzzymatch';
 import Action from './Action';
 import Component from '../Component';
+import list from '../../utils/list';
 import TemplateScope from './shared/TemplateScope';
 import { Element } from '../../interfaces';
 import compiler_warnings from '../compiler_warnings';
+import compiler_errors from '../compiler_errors';
+
+const valid_bindings = [
+	'fullscreenElement',
+	'visibilityState'
+];
 
 export default class Document extends Node {
 	type: 'Document';
 	handlers: EventHandler[] = [];
+	bindings: Binding[] = [];
 	actions: Action[] = [];
 
 	constructor(component: Component, parent: Node, scope: TemplateScope, info: Element) {
@@ -17,6 +27,17 @@ export default class Document extends Node {
 		info.attributes.forEach((node) => {
 			if (node.type === 'EventHandler') {
 				this.handlers.push(new EventHandler(component, this, scope, node));
+			} else if (node.type === 'Binding') {
+				if (!~valid_bindings.indexOf(node.name)) {
+					const match = fuzzymatch(node.name, valid_bindings);
+					if (match) {
+						return component.error(node, compiler_errors.invalid_binding_on(node.name, '<svelte:document>', ` (did you mean '${match}'?)`));
+					} else {
+						return component.error(node, compiler_errors.invalid_binding_on(node.name, '<svelte:document>', ` — valid bindings are ${list(valid_bindings)}`));
+					}
+				}
+
+				this.bindings.push(new Binding(component, this, scope, node));
 			} else if (node.type === 'Action') {
 				this.actions.push(new Action(component, this, scope, node));
 			} else {

src/compiler/compile/nodes/Element.ts

@@ -26,7 +26,7 @@ import { Literal } from 'estree';
 import compiler_warnings from '../compiler_warnings';
 import compiler_errors from '../compiler_errors';
 import { ARIARoleDefinitionKey, roles, aria, ARIAPropertyDefinition, ARIAProperty } from 'aria-query';
-import { is_interactive_element, is_non_interactive_element, is_non_interactive_roles, is_presentation_role, is_interactive_roles, is_hidden_from_screen_reader, is_semantic_role_element, is_abstract_role, is_static_element, has_disabled_attribute } from '../utils/a11y';
+import { is_interactive_element, is_non_interactive_element, is_non_interactive_roles, is_presentation_role, is_interactive_roles, is_hidden_from_screen_reader, is_semantic_role_element, is_abstract_role, is_static_element, has_disabled_attribute, is_valid_autocomplete } 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(' ');
 const aria_attribute_set = new Set(aria_attributes);
@@ -131,6 +131,7 @@ const a11y_implicit_semantics = new Map([
 	['details', 'group'],
 	['dt', 'term'],
 	['fieldset', 'group'],
+	['figure', 'figure'],
 	['form', 'form'],
 	['h1', 'heading'],
 	['h2', 'heading'],
@@ -142,6 +143,7 @@ const a11y_implicit_semantics = new Map([
 	['img', 'img'],
 	['li', 'listitem'],
 	['link', 'link'],
+	['main', 'main'],
 	['menu', 'list'],
 	['meter', 'progressbar'],
 	['nav', 'navigation'],
@@ -152,6 +154,7 @@ const a11y_implicit_semantics = new Map([
 	['progress', 'progressbar'],
 	['section', 'region'],
 	['summary', 'button'],
+	['table', 'table'],
 	['tbody', 'rowgroup'],
 	['textarea', 'textbox'],
 	['tfoot', 'rowgroup'],
@@ -660,9 +663,7 @@ export default class Element extends Node {
 						}
 
 						// no-redundant-roles
-						const has_redundant_role = current_role === get_implicit_role(this.name, attribute_map);
-
-						if (this.name === current_role || has_redundant_role) {
+						if (current_role === get_implicit_role(this.name, attribute_map)) {
 							component.warn(attribute, compiler_warnings.a11y_no_redundant_roles(current_role));
 						}
 
@@ -918,6 +919,18 @@ export default class Element extends Node {
 					should_have_attribute(this, required_attributes, 'input type="image"');
 				}
 			}
+
+			// autocomplete-valid
+			const autocomplete = attribute_map.get('autocomplete');
+
+			if (type && autocomplete) {
+				const type_value = type.get_static_value();
+				const autocomplete_value = autocomplete.get_static_value();
+
+				if (!is_valid_autocomplete(type_value, autocomplete_value)) {
+					component.warn(autocomplete, compiler_warnings.a11y_autocomplete_valid(type_value, autocomplete_value));
+				}
+			}
 		}
 
 		if (this.name === 'img') {

src/compiler/compile/nodes/Window.ts

@@ -17,6 +17,7 @@ const valid_bindings = [
 	'outerHeight',
 	'scrollX',
 	'scrollY',
+	'devicePixelRatio',
 	'online'
 ];