Merge branch 'main' into ssr-select-value

.changeset/olive-pandas-trade.md

@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: allow using typescript in `customElement.extend` option

.changeset/thin-dolls-cover.md

@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: cleanup event handlers on media elements

documentation/docs/03-template-syntax/12-bind.md

@@ -4,7 +4,7 @@ title: bind:
 
 Data ordinarily flows down, from parent to child. The `bind:` directive allows data to flow the other way, from child to parent.
 
-The general syntax is `bind:property={expression}`, where `expression` is an _lvalue_ (i.e. a variable or an object property). When the expression is an identifier with the same name as the property, we can omit the expression — in other words these are equivalent:
+The general syntax is `bind:property={expression}`, where `expression` is an [_lvalue_](https://press.rebus.community/programmingfundamentals/chapter/lvalue-and-rvalue/) (i.e. a variable or an object property). When the expression is an identifier with the same name as the property, we can omit the expression — in other words these are equivalent:
 
 <!-- prettier-ignore -->
 ```svelte

documentation/docs/98-reference/.generated/compile-warnings.md

@@ -632,6 +632,12 @@ In some situations a selector may target an element that is not 'visible' to the
 </style>
 ```
 
+### custom_element_props_identifier
+
+```
+Using a rest element or a non-destructured declaration with `$props()` means that Svelte can't infer what properties to expose when creating a custom element. Consider destructuring all the props or explicitly specifying the `customElement.props` option.
+```
+
 ### element_implicitly_closed
 
 ```

packages/svelte/CHANGELOG.md

@@ -1,5 +1,21 @@
 # svelte
 
+## 5.33.4
+
+### Patch Changes
+
+- fix: narrow `defaultChecked` to boolean ([#16009](https://github.com/sveltejs/svelte/pull/16009))
+
+- fix: warn when using rest or identifier in custom elements without props option ([#16003](https://github.com/sveltejs/svelte/pull/16003))
+
+## 5.33.3
+
+### Patch Changes
+
+- fix: allow using typescript in `customElement.extend` option ([#16001](https://github.com/sveltejs/svelte/pull/16001))
+
+- fix: cleanup event handlers on media elements ([#16005](https://github.com/sveltejs/svelte/pull/16005))
+
 ## 5.33.2
 
 ### Patch Changes

packages/svelte/elements.d.ts

@@ -1115,8 +1115,8 @@ export interface HTMLInputAttributes extends HTMLAttributes<HTMLInputElement> {
 	// needs both casing variants because language tools does lowercase names of non-shorthand attributes
 	defaultValue?: any;
 	defaultvalue?: any;
-	defaultChecked?: any;
+	defaultChecked?: boolean | undefined | null;
-	defaultchecked?: any;
+	defaultchecked?: boolean | undefined | null;
 	width?: number | string | undefined | null;
 	webkitdirectory?: boolean | undefined | null;
 

packages/svelte/messages/compile-warnings/script.md

@@ -1,3 +1,7 @@
+## custom_element_props_identifier
+
+> Using a rest element or a non-destructured declaration with `$props()` means that Svelte can't infer what properties to expose when creating a custom element. Consider destructuring all the props or explicitly specifying the `customElement.props` option.
+
 ## export_let_unused
 
 > Component has unused export property '%name%'. If it is for external reference only, please consider using `export const %name%`

packages/svelte/package.json

@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.33.2",
+  "version": "5.33.4",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {

packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js

@@ -4,6 +4,7 @@
 import { get_rune } from '../../scope.js';
 import { ensure_no_module_import_conflict, validate_identifier_name } from './shared/utils.js';
 import * as e from '../../../errors.js';
+import * as w from '../../../warnings.js';
 import { extract_paths } from '../../../utils/ast.js';
 import { equal } from '../../../utils/assert.js';
 
@@ -52,6 +53,19 @@ export function VariableDeclarator(node, context) {
 				e.props_invalid_identifier(node);
 			}
 
+			if (
+				context.state.analysis.custom_element &&
+				context.state.options.customElementOptions?.props == null
+			) {
+				let warn_on;
+				if (
+					node.id.type === 'Identifier' ||
+					(warn_on = node.id.properties.find((p) => p.type === 'RestElement')) != null
+				) {
+					w.custom_element_props_identifier(warn_on ?? node.id);
+				}
+			}
+
 			context.state.analysis.needs_props = true;
 
 			if (node.id.type === 'Identifier') {

packages/svelte/src/compiler/warnings.js

@@ -96,6 +96,7 @@ export const codes = [
 	'options_removed_hydratable',
 	'options_removed_loop_guard_timeout',
 	'options_renamed_ssr_dom',
+	'custom_element_props_identifier',
 	'export_let_unused',
 	'legacy_component_creation',
 	'non_reactive_update',
@@ -592,6 +593,14 @@ export function options_renamed_ssr_dom(node) {
 	w(node, 'options_renamed_ssr_dom', `\`generate: "dom"\` and \`generate: "ssr"\` options have been renamed to "client" and "server" respectively\nhttps://svelte.dev/e/options_renamed_ssr_dom`);
 }
 
+/**
+ * Using a rest element or a non-destructured declaration with `$props()` means that Svelte can't infer what properties to expose when creating a custom element. Consider destructuring all the props or explicitly specifying the `customElement.props` option.
+ * @param {null | NodeLike} node
+ */
+export function custom_element_props_identifier(node) {
+	w(node, 'custom_element_props_identifier', `Using a rest element or a non-destructured declaration with \`$props()\` means that Svelte can't infer what properties to expose when creating a custom element. Consider destructuring all the props or explicitly specifying the \`customElement.props\` option.\nhttps://svelte.dev/e/custom_element_props_identifier`);
+}
+
 /**
  * Component has unused export property '%name%'. If it is for external reference only, please consider using `export const %name%`
  * @param {null | NodeLike} node

packages/svelte/src/version.js

@@ -4,5 +4,5 @@
  * The current version, as set in package.json.
  * @type {string}
  */
-export const VERSION = '5.33.2';
+export const VERSION = '5.33.4';
 export const PUBLIC_VERSION = '5';

packages/svelte/tests/validator/samples/custom-element-props-identifier-props-option/input.svelte

@@ -0,0 +1,7 @@
+<svelte:options customElement={{
+	props: {}
+}} />
+
+<script>
+	let props = $props();
+</script>

packages/svelte/tests/validator/samples/custom-element-props-identifier-props-option/warnings.json

@@ -0,0 +1,14 @@
+[
+	{
+		"code": "options_missing_custom_element",
+		"end": {
+			"column": 2,
+			"line": 3
+		},
+		"message": "The `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option?",
+		"start": {
+			"column": 16,
+			"line": 1
+		}
+	}
+]

packages/svelte/tests/validator/samples/custom-element-props-identifier-rest/input.svelte

@@ -0,0 +1,5 @@
+<svelte:options customElement={{}} />
+
+<script>
+	let { ...props } = $props();
+</script>

packages/svelte/tests/validator/samples/custom-element-props-identifier-rest/warnings.json

@@ -0,0 +1,26 @@
+[
+	{
+		"code": "options_missing_custom_element",
+		"end": {
+			"column": 34,
+			"line": 1
+		},
+		"message": "The `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option?",
+		"start": {
+			"column": 16,
+			"line": 1
+		}
+	},
+	{
+		"code": "custom_element_props_identifier",
+		"end": {
+			"column": 15,
+			"line": 4
+		},
+		"message": "Using a rest element or a non-destructured declaration with `$props()` means that Svelte can't infer what properties to expose when creating a custom element. Consider destructuring all the props or explicitly specifying the `customElement.props` option.",
+		"start": {
+			"column": 7,
+			"line": 4
+		}
+	}
+]

packages/svelte/tests/validator/samples/custom-element-props-identifier/input.svelte

@@ -0,0 +1,5 @@
+<svelte:options customElement={{}} />
+
+<script>
+	let props = $props();
+</script>

packages/svelte/tests/validator/samples/custom-element-props-identifier/warnings.json

@@ -0,0 +1,26 @@
+[
+	{
+		"code": "options_missing_custom_element",
+		"end": {
+			"column": 34,
+			"line": 1
+		},
+		"message": "The `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option?",
+		"start": {
+			"column": 16,
+			"line": 1
+		}
+	},
+	{
+		"code": "custom_element_props_identifier",
+		"end": {
+			"column": 10,
+			"line": 4
+		},
+		"message": "Using a rest element or a non-destructured declaration with `$props()` means that Svelte can't infer what properties to expose when creating a custom element. Consider destructuring all the props or explicitly specifying the `customElement.props` option.",
+		"start": {
+			"column": 5,
+			"line": 4
+		}
+	}
+]