Merge branch 'main' into aa-coordination-resource

.changeset/long-moles-join.md

@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: ensure tracking returns true, even if in unowned

package.json

@@ -44,6 +44,6 @@
     "typescript": "^5.5.4",
     "typescript-eslint": "^8.2.0",
     "v8-natives": "^1.2.5",
-    "vitest": "^2.0.5"
+    "vitest": "^2.1.9"
   }
 }

packages/svelte/CHANGELOG.md

@@ -1,5 +1,15 @@
 # svelte
 
+## 5.19.8
+
+### Patch Changes
+
+- fix: properly set `value` property of custom elements ([#15206](https://github.com/sveltejs/svelte/pull/15206))
+
+- fix: ensure custom element updates don't run in hydration mode ([#15217](https://github.com/sveltejs/svelte/pull/15217))
+
+- fix: ensure tracking returns true, even if in unowned ([#15214](https://github.com/sveltejs/svelte/pull/15214))
+
 ## 5.19.7
 
 ### Patch Changes

packages/svelte/package.json

@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.19.7",
+  "version": "5.19.8",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
@@ -143,7 +143,7 @@
     "source-map": "^0.7.4",
     "tiny-glob": "^0.2.9",
     "typescript": "^5.5.4",
-    "vitest": "^2.0.5"
+    "vitest": "^2.1.9"
   },
   "dependencies": {
     "@ampproject/remapping": "^2.3.0",

packages/svelte/src/internal/client/dom/elements/attributes.js

@@ -1,5 +1,5 @@
 import { DEV } from 'esm-env';
-import { hydrating } from '../hydration.js';
+import { hydrating, set_hydrating } from '../hydration.js';
 import { get_descriptors, get_prototype_of } from '../../../shared/utils.js';
 import { create_event, delegate } from './events.js';
 import { add_form_reset_listener, autofocus } from './misc.js';
@@ -213,6 +213,12 @@ export function set_custom_element_data(node, prop, value) {
 	// or effect
 	var previous_reaction = active_reaction;
 	var previous_effect = active_effect;
+	// If we're hydrating but the custom element is from Svelte, and it already scaffolded,
+	// then it might run block logic in hydration mode, which we have to prevent.
+	let was_hydrating = hydrating;
+	if (hydrating) {
+		set_hydrating(false);
+	}
 
 	set_active_reaction(null);
 	set_active_effect(null);
@@ -239,6 +245,9 @@ export function set_custom_element_data(node, prop, value) {
 	} finally {
 		set_active_reaction(previous_reaction);
 		set_active_effect(previous_effect);
+		if (was_hydrating) {
+			set_hydrating(true);
+		}
 	}
 }
 
@@ -262,6 +271,13 @@ export function set_attributes(
 	is_custom_element = false,
 	skip_warning = false
 ) {
+	// If we're hydrating but the custom element is from Svelte, and it already scaffolded,
+	// then it might run block logic in hydration mode, which we have to prevent.
+	let is_hydrating_custom_element = hydrating && is_custom_element;
+	if (is_hydrating_custom_element) {
+		set_hydrating(false);
+	}
+
 	var current = prev || {};
 	var is_option_element = element.tagName === 'OPTION';
 
@@ -363,9 +379,10 @@ export function set_attributes(
 			element.style.cssText = value + '';
 		} else if (key === 'autofocus') {
 			autofocus(/** @type {HTMLElement} */ (element), Boolean(value));
-		} else if (key === '__value' || (key === 'value' && value != null)) {
+		} else if (!is_custom_element && (key === '__value' || (key === 'value' && value != null))) {
-			// @ts-ignore
+			// @ts-ignore We're not running this for custom elements because __value is actually
-			element.value = element[key] = element.__value = value;
+			// how Lit stores the current value on the element, and messing with that would break things.
+			element.value = element.__value = value;
 		} else if (key === 'selected' && is_option_element) {
 			set_selected(/** @type {HTMLOptionElement} */ (element), value);
 		} else {
@@ -415,6 +432,10 @@ export function set_attributes(
 		}
 	}
 
+	if (is_hydrating_custom_element) {
+		set_hydrating(true);
+	}
+
 	return current;
 }
 

packages/svelte/src/version.js

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

packages/svelte/tests/runtime-runes/samples/custom-element-attributes/_config.js

@@ -1,19 +1,24 @@
 import { test } from '../../test';
 
 export default test({
-	mode: ['client', 'server'],
+	mode: ['client'],
 	async test({ assert, target }) {
 		const my_element = /** @type HTMLElement & { object: { test: true }; } */ (
 			target.querySelector('my-element')
 		);
-		const my_link = /** @type HTMLAnchorElement & { object: { test: true }; } */ (
-			target.querySelector('a')
-		);
 		assert.equal(my_element.getAttribute('string'), 'test');
 		assert.equal(my_element.hasAttribute('object'), false);
 		assert.deepEqual(my_element.object, { test: true });
+
+		const my_link = /** @type HTMLAnchorElement & { object: { test: true }; } */ (
+			target.querySelector('a')
+		);
 		assert.equal(my_link.getAttribute('string'), 'test');
 		assert.equal(my_link.hasAttribute('object'), false);
 		assert.deepEqual(my_link.object, { test: true });
+
+		const [value1, value2] = target.querySelectorAll('value-element');
+		assert.equal(value1.shadowRoot?.innerHTML, '<span>test</span>');
+		assert.equal(value2.shadowRoot?.innerHTML, '<span>test</span>');
 	}
 });

packages/svelte/tests/runtime-runes/samples/custom-element-attributes/main.svelte

@@ -1,2 +1,22 @@
+<script module>
+    customElements.define('value-element', class extends HTMLElement {
+
+        constructor() {
+            super();
+            this.attachShadow({ mode: 'open' });
+        }
+
+        set value(v) {
+            if (this.__value !== v) {
+                this.__value = v;
+                this.shadowRoot.innerHTML = `<span>${v}</span>`;
+            }
+        }
+    });
+</script>
+
 <my-element string="test" object={{ test: true }}></my-element>
 <a is="my-link" string="test" object={{ test: true }}></a>
+
+<value-element value="test"></value-element>
+<value-element {...{value: "test"}}></value-element>

playgrounds/sandbox/package.json

@@ -11,14 +11,14 @@
     "prod": "npm run build && node dist/server/ssr-prod",
     "preview": "vite preview",
     "download": "node scripts/download.js",
-    "hash": "node scripts/hash.js | pbcopy && echo \"copied URL to clipboard\""
+    "hash": "node scripts/hash.js"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
     "polka": "^1.0.0-next.25",
     "svelte": "workspace:*",
     "tiny-glob": "^0.2.9",
-    "vite": "^6.0.9",
+    "vite": "^5.4.14",
     "vite-plugin-inspect": "^0.8.4"
   }
 }