Merge remote-tracking branch 'origin/main' into inlined-attribute-static

Author: paoloricciuti

.changeset/bright-papayas-sneeze.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: do not treat reassigned synthetic binds as state in runes mode

.changeset/good-laws-sin.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: account for mutations in script module in ownership check

.changeset/nice-chicken-wonder.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: consider img with loading attribute not static

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

@@ -276,6 +276,8 @@ export function analyze_component(root, source, options) {
 	/** @type {Template} */
 	const template = { ast: root.fragment, scope, scopes };
 
+	let synthetic_stores_legacy_check = [];
+
 	// create synthetic bindings for store subscriptions
 	for (const [name, references] of module.scope.references) {
 		if (name[0] !== '$' || RESERVED.includes(name)) continue;
@@ -351,16 +353,21 @@ export function analyze_component(root, source, options) {
 				}
 			}
 
-			// if we are creating a synthetic binding for a let declaration we should also declare
-			// the declaration as state in case it's reassigned
-			if (
-				declaration !== null &&
-				declaration.kind === 'normal' &&
-				declaration.declaration_kind === 'let' &&
-				declaration.reassigned
-			) {
-				declaration.kind = 'state';
-			}
+			// we push to the array because at this moment in time we can't be sure if we are in legacy
+			// mode yet because we are still changing the module scope
+			synthetic_stores_legacy_check.push(() => {
+				// if we are creating a synthetic binding for a let declaration we should also declare
+				// the declaration as state in case it's reassigned and we are not in runes mode (the function will
+				// not be called if we are not in runes mode, that's why there's no !runes check here)
+				if (
+					declaration !== null &&
+					declaration.kind === 'normal' &&
+					declaration.declaration_kind === 'let' &&
+					declaration.reassigned
+				) {
+					declaration.kind = 'state';
+				}
+			});
 
 			const binding = instance.scope.declare(b.id(name), 'store_sub', 'synthetic');
 			binding.references = references;
@@ -373,6 +380,12 @@ export function analyze_component(root, source, options) {
 
 	const runes = options.runes ?? Array.from(module.scope.references.keys()).some(is_rune);
 
+	if (!runes) {
+		for (let check of synthetic_stores_legacy_check) {
+			check();
+		}
+	}
+
 	if (runes && root.module) {
 		const context = root.module.attributes.find((attribute) => attribute.name === 'context');
 		if (context) {

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

@@ -157,6 +157,11 @@ function is_static_element(node, state) {
 			return false;
 		}
 
+		// We need to apply src and loading after appending the img to the DOM for lazy loading to work
+		if (node.name === 'img' && attribute.name === 'loading') {
+			return false;
+		}
+
 		if (node.name.includes('-')) {
 			return false; // we're setting all attributes on custom elements through properties
 		}

packages/svelte/src/internal/client/dev/ownership.js

@@ -59,6 +59,9 @@ export function get_component() {
 		}
 
 		for (const module of modules) {
+			if (module.end == null) {
+				return null;
+			}
 			if (module.start.line < entry.line && module.end.line > entry.line) {
 				return module.component;
 			}

packages/svelte/tests/runtime-runes/samples/img-loading-lazy-no-static/_config.js

@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: `<h1></h1><img src="..." loading="lazy" />`
+});

packages/svelte/tests/runtime-runes/samples/img-loading-lazy-no-static/main.svelte

@@ -0,0 +1,2 @@
+<h1></h1>
+<img src="..." loading="lazy">

packages/svelte/tests/runtime-runes/samples/mutate-state-in-context-dev/_config.js

@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	}
+});

packages/svelte/tests/runtime-runes/samples/mutate-state-in-context-dev/main.svelte

@@ -0,0 +1,6 @@
+<script module>
+	let obj = $state({});
+	obj.test = "hi!";
+</script>
+  
+<h1>Values: {JSON.stringify(obj)}</h1>