feat: allow `let props = $props()`, optimize prop read access (#12201)

- allow to write `let props = $props()`
- optimize read access of props.x to use `$$props` argument directly; closes #11055

.changeset/six-gorillas-obey.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: allow `let props = $props()` and optimize prop read access

packages/svelte/src/compiler/phases/2-analyze/index.js

@@ -31,6 +31,7 @@ import { hash } from './utils.js';
 import { warn_unused } from './css/css-warn.js';
 import { extract_svelte_ignore } from '../../utils/extract_svelte_ignore.js';
 import { ignore_map, ignore_stack, pop_ignore, push_ignore } from '../../state.js';
+import { equal } from '../../utils/assert.js';
 
 /**
  * @param {import('#compiler').Script | null} script
@@ -969,7 +970,14 @@ const runes_scope_tweaker = {
 		if (rune === '$props') {
 			state.analysis.needs_props = true;
 
-			for (const property of /** @type {import('estree').ObjectPattern} */ (node.id).properties) {
+			if (node.id.type === 'Identifier') {
+				const binding = /** @type {import('#compiler').Binding} */ (state.scope.get(node.id.name));
+				binding.initial = null; // else would be $props()
+				binding.kind = 'rest_prop';
+			} else {
+				equal(node.id.type, 'ObjectPattern');
+
+				for (const property of node.id.properties) {
 					if (property.type !== 'Property') continue;
 
 					const name =
@@ -1000,6 +1008,7 @@ const runes_scope_tweaker = {
 					}
 				}
 			}
+		}
 	},
 	ExportSpecifier(node, { state }) {
 		if (state.ast_type !== 'instance') return;

packages/svelte/src/compiler/phases/2-analyze/validation.js

@@ -1240,7 +1240,7 @@ export const validation_runes = merge(validation, a11y_validators, {
 				e.rune_invalid_arguments(node, rune);
 			}
 
-			if (node.id.type !== 'ObjectPattern') {
+			if (node.id.type !== 'ObjectPattern' && node.id.type !== 'Identifier') {
 				e.props_invalid_identifier(node);
 			}
 
@@ -1248,6 +1248,7 @@ export const validation_runes = merge(validation, a11y_validators, {
 				e.props_invalid_placement(node);
 			}
 
+			if (node.id.type === 'ObjectPattern') {
 				for (const property of node.id.properties) {
 					if (property.type === 'Property') {
 						if (property.computed) {
@@ -1263,6 +1264,7 @@ export const validation_runes = merge(validation, a11y_validators, {
 					}
 				}
 			}
+		}
 
 		if (rune === '$derived') {
 			const arg = args[0];

packages/svelte/src/compiler/phases/3-transform/client/visitors/global.js

@@ -9,6 +9,27 @@ export const global_visitors = {
 			if (node.name === '$$props') {
 				return b.id('$$sanitized_props');
 			}
+
+			// Optimize prop access: If it's a member read access, we can use the $$props object directly
+			const binding = state.scope.get(node.name);
+			if (
+				state.analysis.runes && // can't do this in legacy mode because the proxy does more than just read/write
+				binding !== null &&
+				node !== binding.node &&
+				binding.kind === 'rest_prop'
+			) {
+				const parent = path.at(-1);
+				const grand_parent = path.at(-2);
+				if (
+					parent?.type === 'MemberExpression' &&
+					!parent.computed &&
+					grand_parent?.type !== 'AssignmentExpression' &&
+					grand_parent?.type !== 'UpdateExpression'
+				) {
+					return b.id('$$props');
+				}
+			}
+
 			return serialize_get_binding(node, state);
 		}
 	},

packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript-runes.js

@@ -238,8 +238,6 @@ export const javascript_visitors_runes = {
 			}
 
 			if (rune === '$props') {
-				assert.equal(declarator.id.type, 'ObjectPattern');
-
 				/** @type {string[]} */
 				const seen = ['$$slots', '$$events', '$$legacy'];
 
@@ -247,6 +245,19 @@ export const javascript_visitors_runes = {
 					seen.push('$$host');
 				}
 
+				if (declarator.id.type === 'Identifier') {
+					/** @type {import('estree').Expression[]} */
+					const args = [b.id('$$props'), b.array(seen.map((name) => b.literal(name)))];
+
+					if (state.options.dev) {
+						// include rest name, so we can provide informative error messages
+						args.push(b.literal(declarator.id.name));
+					}
+
+					declarations.push(b.declarator(declarator.id, b.call('$.rest_props', ...args)));
+				} else {
+					assert.equal(declarator.id.type, 'ObjectPattern');
+
 					for (const property of declarator.id.properties) {
 						if (property.type === 'Property') {
 							const key = /** @type {import('estree').Identifier | import('estree').Literal} */ (
@@ -287,6 +298,7 @@ export const javascript_visitors_runes = {
 							declarations.push(b.declarator(property.argument, b.call('$.rest_props', ...args)));
 						}
 					}
+				}
 
 				// TODO
 				continue;

packages/svelte/src/internal/client/reactivity/props.js

@@ -78,6 +78,7 @@ const rest_props_handler = {
  * @param {string} [name]
  * @returns {Record<string, unknown>}
  */
+/*#__NO_SIDE_EFFECTS__*/
 export function rest_props(props, exclude, name) {
 	return new Proxy(
 		DEV ? { props, exclude, name, other: {}, to_proxy: [] } : { props, exclude },

packages/svelte/tests/snapshot/samples/props-identifier/_expected/client/index.svelte.js

@@ -0,0 +1,17 @@
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+
+export default function Props_identifier($$anchor, $$props) {
+	$.push($$props, true);
+
+	let props = $.rest_props($$props, ["$$slots", "$$events", "$$legacy"]);
+
+	$$props.a;
+	props[a];
+	$$props.a.b;
+	$$props.a.b = true;
+	props.a = true;
+	props[a] = true;
+	props;
+	$.pop();
+}

packages/svelte/tests/snapshot/samples/props-identifier/_expected/server/index.svelte.js

@@ -0,0 +1,16 @@
+import * as $ from "svelte/internal/server";
+
+export default function Props_identifier($$payload, $$props) {
+	$.push();
+
+	let props = $$props;
+
+	props.a;
+	props[a];
+	props.a.b;
+	props.a.b = true;
+	props.a = true;
+	props[a] = true;
+	props;
+	$.pop();
+}

packages/svelte/tests/snapshot/samples/props-identifier/index.svelte

@@ -0,0 +1,10 @@
+<script>
+	let props = $props();
+	props.a;
+	props[a];
+	props.a.b;
+	props.a.b = true;
+	props.a = true;
+	props[a] = true;
+	props;
+</script>

sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md

@@ -548,6 +548,12 @@ To get all properties, use rest syntax:
 let { a, b, c, ...everythingElse } = $props();
 ```
 
+You can also use an identifier:
+
+```js
+let props = $props();
+```
+
 If you're using TypeScript, you can declare the prop types:
 
 ```ts