implement for defaultValue/defaultChecked on inputs

Author: dummdidumm

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

@@ -1,6 +1,6 @@
 /** @import { AST } from '#compiler' */
 /** @import { Context } from '../types' */
-import { is_mathml, is_svg, is_void } from '../../../../utils.js';
+import { cannot_be_set_statically, is_mathml, is_svg, is_void } from '../../../../utils.js';
 import {
 	is_tag_valid_with_ancestor,
 	is_tag_valid_with_parent
@@ -77,9 +77,7 @@ export function RegularElement(node, context) {
 
 	if (
 		node.attributes.some(
-			(attribute) =>
-				attribute.type === 'Attribute' &&
-				(attribute.name === 'autofocus' || attribute.name === 'muted')
+			(attribute) => attribute.type === 'Attribute' && cannot_be_set_statically(attribute.name)
 		)
 	) {
 		mark_subtree_dynamic(context.path);

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

@@ -4,6 +4,7 @@
 /** @import { ComponentClientTransformState, ComponentContext } from '../types' */
 /** @import { Scope } from '../../../scope' */
 import {
+	cannot_be_set_statically,
 	is_boolean_attribute,
 	is_dom_property,
 	is_load_error_element,
@@ -181,20 +182,28 @@ export function RegularElement(node, context) {
 		}
 	}
 
-	if (
-		node.name === 'input' &&
-		(has_spread ||
-			bindings.has('value') ||
-			bindings.has('checked') ||
-			bindings.has('group') ||
-			attributes.some(
-				(attribute) =>
-					attribute.type === 'Attribute' &&
-					(attribute.name === 'value' || attribute.name === 'checked') &&
-					!is_text_attribute(attribute)
-			))
-	) {
-		context.state.init.push(b.stmt(b.call('$.remove_input_defaults', context.state.node)));
+	if (node.name === 'input') {
+		const has_value_attribute = attributes.some(
+			(attribute) =>
+				attribute.type === 'Attribute' &&
+				(attribute.name === 'value' || attribute.name === 'checked') &&
+				!is_text_attribute(attribute)
+		);
+		const has_default_value_attribute = attributes.some(
+			(attribute) =>
+				attribute.type === 'Attribute' &&
+				(attribute.name === 'defaultValue' || attribute.name === 'defaultChecked')
+		);
+		if (
+			!has_default_value_attribute &&
+			(has_spread ||
+				bindings.has('value') ||
+				bindings.has('checked') ||
+				bindings.has('group') ||
+				(!bindings.has('group') && has_value_attribute))
+		) {
+			context.state.init.push(b.stmt(b.call('$.remove_input_defaults', context.state.node)));
+		}
 	}
 
 	if (node.name === 'textarea') {
@@ -272,8 +281,7 @@ export function RegularElement(node, context) {
 
 			if (
 				!is_custom_element &&
-				attribute.name !== 'autofocus' &&
-				attribute.name !== 'muted' &&
+				!cannot_be_set_statically(attribute.name) &&
 				(attribute.value === true || is_text_attribute(attribute))
 			) {
 				const name = get_attribute_name(node, attribute);

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

@@ -1,6 +1,7 @@
 /** @import { Expression } from 'estree' */
 /** @import { AST, SvelteNode } from '#compiler' */
 /** @import { ComponentContext } from '../../types' */
+import { cannot_be_set_statically } from '../../../../../../utils.js';
 import { is_event_attribute, is_text_attribute } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
 import { is_inlinable_expression } from '../../utils.js';
@@ -141,7 +142,7 @@ function is_static_element(node, state) {
 			return false;
 		}
 
-		if (attribute.name === 'autofocus' || attribute.name === 'muted') {
+		if (cannot_be_set_statically(attribute.name)) {
 			return false;
 		}
 

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

@@ -82,7 +82,8 @@ export function build_element_attributes(node, context) {
 				) {
 					events_to_capture.add(attribute.name);
 				}
-			} else {
+				// the defaultValue/defaultChecked properties don't exist as attributes
+			} else if (attribute.name !== 'defaultValue' && attribute.name !== 'defaultChecked') {
 				if (attribute.name === 'class') {
 					class_index = attributes.length;
 				} else if (attribute.name === 'style') {

packages/svelte/src/internal/client/dom/elements/bindings/input.js

@@ -1,6 +1,6 @@
 import { DEV } from 'esm-env';
 import { render_effect, teardown } from '../../../reactivity/effects.js';
-import { listen_to_event_and_reset_event, without_reactive_context } from './shared.js';
+import { listen_to_event_and_reset_event } from './shared.js';
 import * as e from '../../../errors.js';
 import { is } from '../../../proxy.js';
 import { queue_micro_task } from '../../task.js';
@@ -34,6 +34,17 @@ export function bind_value(input, get, set = get) {
 		}
 	});
 
+	if (
+		// If we are hydrating and the value has since changed,
+		// then use the update value from the input instead.
+		(hydrating && input.defaultValue !== input.value) ||
+		// If defaultValue is set, then value == defaultValue
+		// TODO Svelte 6: remove input.value check and set to empty string?
+		(get() == null && input.value)
+	) {
+		set(input.value);
+	}
+
 	render_effect(() => {
 		if (DEV && input.type === 'checkbox') {
 			// TODO should this happen in prod too?
@@ -42,13 +53,6 @@ export function bind_value(input, get, set = get) {
 
 		var value = get();
 
-		// If we are hydrating and the value has since changed, then use the update value
-		// from the input instead.
-		if (hydrating && input.defaultValue !== input.value) {
-			set(input.value);
-			return;
-		}
-
 		if (is_numberlike_input(input) && value === to_number(input.value)) {
 			// handles 0 vs 00 case (see https://github.com/sveltejs/svelte/issues/9959)
 			return;
@@ -180,8 +184,14 @@ export function bind_checked(input, get, set = get) {
 		set(value);
 	});
 
-	if (get() == undefined) {
-		set(false);
+	if (
+		// If we are hydrating and the value has since changed,
+		// then use the update value from the input instead.
+		(hydrating && input.defaultChecked !== input.checked) ||
+		// If defaultChecked is set, then checked == defaultChecked
+		get() == null
+	) {
+		set(input.checked);
 	}
 
 	render_effect(() => {

packages/svelte/src/utils.js

@@ -192,7 +192,9 @@ const ATTRIBUTE_ALIASES = {
 	ismap: 'isMap',
 	nomodule: 'noModule',
 	playsinline: 'playsInline',
-	readonly: 'readOnly'
+	readonly: 'readOnly',
+	defaultvalue: 'defaultValue',
+	defaultchecked: 'defaultChecked'
 };
 
 /**
@@ -212,7 +214,9 @@ const DOM_PROPERTIES = [
 	'readOnly',
 	'value',
 	'inert',
-	'volume'
+	'volume',
+	'defaultValue',
+	'defaultChecked'
 ];
 
 /**
@@ -222,6 +226,17 @@ export function is_dom_property(name) {
 	return DOM_PROPERTIES.includes(name);
 }
 
+const NON_STATIC_PROPERTIES = ['autofocus', 'muted', 'defaultValue', 'defaultChecked'];
+
+/**
+ * Returns `true` if the given attribute cannot be set through the template
+ * string, i.e. needs some kind of JavaScript handling to work.
+ * @param {string} name
+ */
+export function cannot_be_set_statically(name) {
+	return NON_STATIC_PROPERTIES.includes(name);
+}
+
 /**
  * Subset of delegated events which should be passive by default.
  * These two are already passive via browser defaults on window, document and body.