Merge branch 'main' into tighten-up-accessor-naming

.changeset/brave-points-sleep.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: improve code generation for `bind:this` in SSR mode

.changeset/empty-bags-heal.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: use init properties when exporting non-state values in prod

.changeset/pre.json

@@ -21,6 +21,7 @@
     "big-eyes-carry",
     "big-geese-act",
     "blue-timers-film",
+    "brave-points-sleep",
     "brave-shrimps-kiss",
     "brave-walls-destroy",
     "breezy-carrots-flash",
@@ -274,6 +275,7 @@
     "unlucky-boxes-obey",
     "unlucky-trees-lick",
     "violet-pigs-jam",
+    "weak-terms-destroy",
     "wet-games-fly",
     "wicked-clouds-exercise",
     "wicked-doors-train",

.changeset/weak-terms-destroy.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: visit expression node in directives

packages/svelte/CHANGELOG.md

@@ -1,5 +1,13 @@
 # svelte
 
+## 5.0.0-next.59
+
+### Patch Changes
+
+- chore: improve code generation for `bind:this` in SSR mode ([#10524](https://github.com/sveltejs/svelte/pull/10524))
+
+- fix: visit expression node in directives ([#10527](https://github.com/sveltejs/svelte/pull/10527))
+
 ## 5.0.0-next.58
 
 ### Patch Changes

packages/svelte/package.json

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

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

@@ -1060,7 +1060,9 @@ const common_visitors = {
 				parent.type === 'SvelteComponent' ||
 				parent.type === 'SvelteSelf'
 			) {
-				context.state.analysis.uses_component_bindings = true;
+				if (node.name !== 'this') {
+					context.state.analysis.uses_component_bindings = true;
+				}
 				break;
 			} else if (is_element_node(parent)) {
 				break;

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

@@ -242,9 +242,11 @@ export function client_component(source, analysis, options) {
 		const binding = analysis.instance.scope.get(name);
 		const is_source = binding !== null && is_state_source(binding, state);
 
-		// TODO This is always a getter because the `renamed-instance-exports` test wants it that way.
-		// Should we for code size reasons make it an init in runes mode and/or non-dev mode?
-		return b.get(alias ?? name, [b.return(is_source ? b.call('$.get', b.id(name)) : b.id(name))]);
+		if (is_source || options.dev) {
+			return b.get(alias ?? name, [b.return(is_source ? b.call('$.get', b.id(name)) : b.id(name))]);
+		}
+
+		return b.init(alias ?? name, b.id(name));
 	});
 
 	if (analysis.accessors) {
@@ -286,17 +288,12 @@ export function client_component(source, analysis, options) {
 					)
 			: () => {};
 
-	if (properties.length > 0) {
-		component_block.body.push(
-			b.var('$$accessors', b.object(properties)),
-			b.stmt(b.call('$.pop', b.id('$$accessors')))
-		);
-		append_styles();
-		component_block.body.push(b.return(b.id('$$accessors')));
-	} else {
-		component_block.body.push(b.stmt(b.call('$.pop')));
-		append_styles();
-	}
+	append_styles();
+	component_block.body.push(
+		properties.length > 0
+			? b.return(b.call('$.pop', b.object(properties)))
+			: b.stmt(b.call('$.pop'))
+	);
 
 	if (analysis.uses_rest_props) {
 		/** @type {string[]} */

packages/svelte/src/compiler/phases/3-transform/server/transform-server.js

@@ -853,7 +853,7 @@ function serialize_inline_component(node, component_name, context) {
 
 			const value = serialize_attribute_value(attribute.value, context, false, true);
 			push_prop(b.prop('init', b.key(attribute.name), value));
-		} else if (attribute.type === 'BindDirective') {
+		} else if (attribute.type === 'BindDirective' && attribute.name !== 'this') {
 			// TODO this needs to turn the whole thing into a while loop because the binding could be mutated eagerly in the child
 			push_prop(
 				b.get(attribute.name, [

packages/svelte/src/compiler/phases/scope.js

@@ -331,10 +331,14 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 	}
 
 	/**
-	 * @type {import('zimmerframe').Visitor<import('#compiler').Directive, State, import('#compiler').SvelteNode>}
+	 * @type {import('zimmerframe').Visitor<import('#compiler').AnimateDirective | import('#compiler').TransitionDirective | import('#compiler').UseDirective, State, import('#compiler').SvelteNode>}
 	 */
-	const SvelteDirective = (node, context) => {
-		context.state.scope.reference(b.id(node.name), context.path);
+	const SvelteDirective = (node, { state, path, visit }) => {
+		state.scope.reference(b.id(node.name), path);
+
+		if (node.expression) {
+			visit(node.expression);
+		}
 	};
 
 	walk(ast, state, {

packages/svelte/src/internal/client/runtime.js

@@ -1906,14 +1906,15 @@ export function push(props, runes = false) {
 }
 
 /**
- * @param {Record<string, any>} [accessors]
- * @returns {void}
+ * @template {Record<string, any>} T
+ * @param {T} [component]
+ * @returns {T}
  */
-export function pop(accessors) {
+export function pop(component) {
 	const context_stack_item = current_component_context;
 	if (context_stack_item !== null) {
-		if (accessors !== undefined) {
-			context_stack_item.x = accessors;
+		if (component !== undefined) {
+			context_stack_item.x = component;
 		}
 		const effects = context_stack_item.e;
 		if (effects !== null) {
@@ -1925,6 +1926,9 @@ export function pop(accessors) {
 		current_component_context = context_stack_item.p;
 		context_stack_item.m = true;
 	}
+	// Micro-optimization: Don't set .a above to the empty object
+	// so it can be garbage-collected when the return here is unused
+	return component || /** @type {T} */ ({});
 }
 
 /**

packages/svelte/src/version.js

@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.58';
+export const VERSION = '5.0.0-next.59';
 export const PUBLIC_VERSION = '5';

packages/svelte/tests/runtime-legacy/samples/prop-accessors/_config.js

@@ -1,7 +1,12 @@
 import { test } from '../../test';
 
 export default test({
+	compileOptions: {
+		dev: true
+	},
+
 	accessors: false,
+
 	test({ assert, component }) {
 		assert.equal(component.foo1, 42);
 		assert.equal(component.foo2(), 42);

packages/svelte/tests/runtime-legacy/samples/renamed-instance-exports/_config.js

@@ -1,6 +1,10 @@
 import { test } from '../../test';
 
 export default test({
+	compileOptions: {
+		dev: true
+	},
+
 	test({ assert, component }) {
 		assert.equal(component.bar1, 42);
 		assert.equal(component.bar2, 42);

packages/svelte/tests/runtime-runes/samples/store-directive/main.svelte

@@ -1,9 +1,11 @@
 <script>
 	import { writable } from 'svelte/store';
 
-	let action = writable((node) => {
-		node.textContent = 'mounted';
+	let action = writable((node, text) => {
+		node.textContent = text;
 	});
+
+	let text = writable('mounted')
 </script>
 
-<div use:$action>hello</div>
+<div use:$action={$text}>hello</div>

packages/svelte/tests/snapshot/samples/bind-this/_config.js

@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});

packages/svelte/tests/snapshot/samples/bind-this/_expected/client/index.svelte.js

@@ -0,0 +1,17 @@
+// index.svelte (Svelte VERSION)
+// Note: compiler output will change before 5.0 is released!
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal";
+
+export default function Bind_this($$anchor, $$props) {
+	$.push($$props, false);
+	$.init();
+
+	/* Init */
+	var fragment = $.comment($$anchor);
+	var node = $.child_frag(fragment);
+
+	$.bind_this(Foo(node, {}), ($$value) => foo = $$value, foo);
+	$.close_frag($$anchor, fragment);
+	$.pop();
+}

packages/svelte/tests/snapshot/samples/bind-this/_expected/server/index.svelte.js

@@ -0,0 +1,14 @@
+// index.svelte (Svelte VERSION)
+// Note: compiler output will change before 5.0 is released!
+import * as $ from "svelte/internal/server";
+
+export default function Bind_this($$payload, $$props) {
+	$.push(false);
+
+	const anchor = $.create_anchor($$payload);
+
+	$$payload.out += `${anchor}`;
+	Foo($$payload, {});
+	$$payload.out += `${anchor}`;
+	$.pop();
+}

packages/svelte/tests/snapshot/samples/bind-this/index.svelte

@@ -0,0 +1 @@
+<Foo bind:this={foo} />

packages/svelte/tests/suite.ts

@@ -67,6 +67,10 @@ export function suite_with_variants<Test extends BaseTest, Variants extends stri
 	};
 }
 
+// If a directory only contains these children, it's a sign that it's leftover
+// from a different branch, and we can skip the test
+const ignored = ['_output', '_actual.json'];
+
 async function for_each_dir<Test extends BaseTest>(
 	cwd: string,
 	samples_dir = 'samples',
@@ -76,13 +80,14 @@ async function for_each_dir<Test extends BaseTest>(
 	let created_test = false;
 
 	for (const dir of fs.readdirSync(`${cwd}/${samples_dir}`)) {
-		if (dir[0] === '.') continue;
+		if (dir[0] === '.' || !filter.test(dir)) continue;
 
-		const file = `${cwd}/${samples_dir}/${dir}/_config.js`;
-		if (!filter.test(dir)) {
+		if (fs.readdirSync(`${cwd}/${samples_dir}/${dir}`).every((file) => ignored.includes(file))) {
 			continue;
 		}
 
+		const file = `${cwd}/${samples_dir}/${dir}/_config.js`;
+
 		created_test = true;
 		const config = (fs.existsSync(file) ? (await import(file)).default : {}) as Test;