fix: transform input defaults from spread (#16481)

* fix: transform input defaults from spread

* chore: add changeset

* fix: prevent duplicates

* do not remove defaults if they are in spreads

* fix spreading twice

* tweak

* tweak

* drive-by: remove unused export

* tweak

* undo comment change, to minimise diff

* oops

* tweak

---------

Co-authored-by: 7nik <[email protected]>
Co-authored-by: Rich Harris <[email protected]>

Author: 3 people

.changeset/quiet-planes-doubt.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: transform input defaults from spread

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

@@ -72,6 +72,7 @@ export function RegularElement(node, context) {
 
 	let has_spread = node.metadata.has_spread;
 	let has_use = false;
+	let should_remove_defaults = false;
 
 	for (const attribute of node.attributes) {
 		switch (attribute.type) {
@@ -172,7 +173,12 @@ export function RegularElement(node, context) {
 				bindings.has('group') ||
 				(!bindings.has('group') && has_value_attribute))
 		) {
-			context.state.init.push(b.stmt(b.call('$.remove_input_defaults', context.state.node)));
+			if (has_spread) {
+				// remove_input_defaults will be called inside set_attributes
+				should_remove_defaults = true;
+			} else {
+				context.state.init.push(b.stmt(b.call('$.remove_input_defaults', context.state.node)));
+			}
 		}
 	}
 
@@ -202,7 +208,15 @@ export function RegularElement(node, context) {
 		bindings.has('checked');
 
 	if (has_spread) {
-		build_attribute_effect(attributes, class_directives, style_directives, context, node, node_id);
+		build_attribute_effect(
+			attributes,
+			class_directives,
+			style_directives,
+			context,
+			node,
+			node_id,
+			should_remove_defaults
+		);
 	} else {
 		for (const attribute of /** @type {AST.Attribute[]} */ (attributes)) {
 			if (is_event_attribute(attribute)) {

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

@@ -16,14 +16,16 @@ import { build_expression, build_template_chunk, Memoizer } from './utils.js';
  * @param {ComponentContext} context
  * @param {AST.RegularElement | AST.SvelteElement} element
  * @param {Identifier} element_id
+ * @param {boolean} [should_remove_defaults]
  */
 export function build_attribute_effect(
 	attributes,
 	class_directives,
 	style_directives,
 	context,
 	element,
-	element_id
+	element_id,
+	should_remove_defaults = false
 ) {
 	/** @type {ObjectExpression['properties']} */
 	const values = [];
@@ -91,6 +93,7 @@ export function build_attribute_effect(
 				element.metadata.scoped &&
 					context.state.analysis.css.hash !== '' &&
 					b.literal(context.state.analysis.css.hash),
+				should_remove_defaults && b.true,
 				is_ignored(element, 'hydration_attribute_changed') && b.true
 			)
 		)

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

@@ -11,6 +11,7 @@ import {
 import { regex_starts_with_newline } from '../../../../patterns.js';
 import * as b from '#compiler/builders';
 import {
+	ELEMENT_IS_INPUT,
 	ELEMENT_IS_NAMESPACED,
 	ELEMENT_PRESERVE_ATTRIBUTE_CASE
 } from '../../../../../../constants.js';
@@ -401,6 +402,8 @@ function build_element_spread_attributes(
 		flags |= ELEMENT_IS_NAMESPACED | ELEMENT_PRESERVE_ATTRIBUTE_CASE;
 	} else if (is_custom_element_node(element)) {
 		flags |= ELEMENT_PRESERVE_ATTRIBUTE_CASE;
+	} else if (element.type === 'RegularElement' && element.name === 'input') {
+		flags |= ELEMENT_IS_INPUT;
 	}
 
 	const object = build_spread_object(element, attributes, context);

packages/svelte/src/constants.js

@@ -28,6 +28,7 @@ export const HYDRATION_ERROR = {};
 
 export const ELEMENT_IS_NAMESPACED = 1;
 export const ELEMENT_PRESERVE_ATTRIBUTE_CASE = 1 << 1;
+export const ELEMENT_IS_INPUT = 1 << 2;
 
 export const UNINITIALIZED = Symbol();
 

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

@@ -268,10 +268,27 @@ export function set_custom_element_data(node, prop, value) {
  * @param {Record<string | symbol, any> | undefined} prev
  * @param {Record<string | symbol, any>} next New attributes - this function mutates this object
  * @param {string} [css_hash]
+ * @param {boolean} [should_remove_defaults]
  * @param {boolean} [skip_warning]
  * @returns {Record<string, any>}
  */
-export function set_attributes(element, prev, next, css_hash, skip_warning = false) {
+function set_attributes(
+	element,
+	prev,
+	next,
+	css_hash,
+	should_remove_defaults = false,
+	skip_warning = false
+) {
+	if (hydrating && should_remove_defaults && element.tagName === 'INPUT') {
+		var input = /** @type {HTMLInputElement} */ (element);
+		var attribute = input.type === 'checkbox' ? 'defaultChecked' : 'defaultValue';
+
+		if (!(attribute in next)) {
+			remove_input_defaults(input);
+		}
+	}
+
 	var attributes = get_attributes(element);
 
 	var is_custom_element = attributes[IS_CUSTOM_ELEMENT];
@@ -467,6 +484,7 @@ export function set_attributes(element, prev, next, css_hash, skip_warning = fal
  * @param {Array<() => any>} sync
  * @param {Array<() => Promise<any>>} async
  * @param {string} [css_hash]
+ * @param {boolean} [should_remove_defaults]
  * @param {boolean} [skip_warning]
  */
 export function attribute_effect(
@@ -475,6 +493,7 @@ export function attribute_effect(
 	sync = [],
 	async = [],
 	css_hash,
+	should_remove_defaults = false,
 	skip_warning = false
 ) {
 	flatten(sync, async, (values) => {
@@ -490,7 +509,14 @@ export function attribute_effect(
 		block(() => {
 			var next = fn(...values.map(get));
 			/** @type {Record<string | symbol, any>} */
-			var current = set_attributes(element, prev, next, css_hash, skip_warning);
+			var current = set_attributes(
+				element,
+				prev,
+				next,
+				css_hash,
+				should_remove_defaults,
+				skip_warning
+			);
 
 			if (inited && is_select && 'value' in next) {
 				select_option(/** @type {HTMLSelectElement} */ (element), next.value);

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

@@ -28,7 +28,6 @@ export { attach } from './dom/elements/attachments.js';
 export {
 	remove_input_defaults,
 	set_attribute,
-	set_attributes,
 	attribute_effect,
 	set_custom_element_data,
 	set_xlink_attribute,

packages/svelte/src/internal/server/index.js

@@ -8,7 +8,8 @@ import { subscribe_to_store } from '../../store/utils.js';
 import {
 	UNINITIALIZED,
 	ELEMENT_PRESERVE_ATTRIBUTE_CASE,
-	ELEMENT_IS_NAMESPACED
+	ELEMENT_IS_NAMESPACED,
+	ELEMENT_IS_INPUT
 } from '../../constants.js';
 import { escape_html } from '../../escaping.js';
 import { DEV } from 'esm-env';
@@ -187,6 +188,7 @@ export function spread_attributes(attrs, css_hash, classes, styles, flags = 0) {
 
 	const is_html = (flags & ELEMENT_IS_NAMESPACED) === 0;
 	const lowercase = (flags & ELEMENT_PRESERVE_ATTRIBUTE_CASE) === 0;
+	const is_input = (flags & ELEMENT_IS_INPUT) !== 0;
 
 	for (name in attrs) {
 		// omit functions, internal svelte properties and invalid attribute names
@@ -200,6 +202,13 @@ export function spread_attributes(attrs, css_hash, classes, styles, flags = 0) {
 			name = name.toLowerCase();
 		}
 
+		if (is_input) {
+			if (name === 'defaultvalue' || name === 'defaultchecked') {
+				name = name === 'defaultvalue' ? 'value' : 'checked';
+				if (attrs[name]) continue;
+			}
+		}
+
 		attr_str += attr(name, value, is_html && is_boolean_attribute(name));
 	}
 

packages/svelte/tests/runtime-runes/samples/form-default-value-from-spread/_config.js

@@ -0,0 +1,10 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['server'],
+	html: `
+		<input value="a">
+		<input type="checkbox" checked>
+		<input value="b">
+`
+});

packages/svelte/tests/runtime-runes/samples/form-default-value-from-spread/main.svelte

@@ -0,0 +1,8 @@
+<script>
+	let text = { defaultValue: "a" };
+	let checkbox = { defaultChecked: true }
+</script>
+
+<input {...text} />
+<input type="checkbox" {...checkbox} />
+<input value="b" {...text} />