fix: correctly update dynamic member expressions (#14359)

* fix: output template effect for svg xlink attribute

* mark subtree dynamic in MemberExpression visitor

* don't treat attributes and text nodes differently

* Update .changeset/serious-spiders-bake.md

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>

.changeset/serious-spiders-bake.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correctly update dynamic member expressions

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

@@ -126,16 +126,11 @@ export function Identifier(node, context) {
 		}
 	}
 
-	if (!can_inline && context.state.expression) {
-		context.state.expression.can_inline = false;
-	}
+	if (!can_inline) {
+		if (context.state.expression) {
+			context.state.expression.can_inline = false;
+		}
 
-	/**
-	 * if the identifier is part of an expression tag of an attribute we want to check if it's inlinable
-	 * before marking the subtree as dynamic. This is because if it's inlinable it will be inlined in the template
-	 * directly making the whole thing actually static.
-	 */
-	if (!can_inline || !context.path.find((node) => node.type === 'Attribute')) {
 		mark_subtree_dynamic(context.path);
 	}
 }

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

@@ -4,6 +4,7 @@ import * as e from '../../../errors.js';
 import * as w from '../../../warnings.js';
 import { object } from '../../../utils/ast.js';
 import { is_pure, is_safe_identifier } from './shared/utils.js';
+import { mark_subtree_dynamic } from './shared/fragment.js';
 
 /**
  * @param {MemberExpression} node
@@ -20,6 +21,8 @@ export function MemberExpression(node, context) {
 	if (context.state.expression && !is_pure(node, context)) {
 		context.state.expression.has_state = true;
 		context.state.expression.can_inline = false;
+
+		mark_subtree_dynamic(context.path);
 	}
 
 	if (!is_safe_identifier(node, context.state.scope)) {

packages/svelte/tests/runtime-legacy/samples/inline-expressions-3/_config.js

@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: `<div><svg aria-hidden="true" height="14" width="13"><use xlink:href="test#done"></use></svg></div`
+});

packages/svelte/tests/runtime-legacy/samples/inline-expressions-3/main.svelte

@@ -0,0 +1,9 @@
+<script>
+	import { sprites } from './sprites.js'
+</script>
+
+<div>
+	<svg width="13" height="14" aria-hidden="true">
+    <use xlink:href="{sprites['a']}#done"></use>
+  </svg>
+</div>

packages/svelte/tests/runtime-legacy/samples/inline-expressions-3/sprites.js

@@ -0,0 +1,3 @@
+export const sprites = {
+	a: 'test'
+};

packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js

@@ -11,7 +11,7 @@ var root = $.template(`<picture><source srcset="${__DECLARED_ASSET_0__}" type="i
 
 export default function Inline_module_vars($$anchor) {
 	var fragment = root();
-	var p = $.sibling($.first_child(fragment), 2);
 
+	$.next(2);
 	$.append($$anchor, fragment);
 }