svelte - npm Package Compare versions

Comparing version 5.5.4 to 5.6.0

package.json

@@ -5,3 +5,3 @@ {
   "license": "MIT",
-  "version": "5.5.4",
+  "version": "5.6.0",
   "type": "module",
@@ -8,0 +8,0 @@ "types": "./types/index.d.ts",

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

@@ -175,16 +175,24 @@ /** @import { Expression, ExpressionStatement, Identifier, MemberExpression, ObjectExpression, Statement } from 'estree' */
 
-	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)));
+		}
 	}
@@ -559,2 +567,4 @@
 		update = b.stmt(b.call('$.set_checked', node_id, value));
+	} else if (name === 'selected') {
+		update = b.stmt(b.call('$.set_selected', node_id, value));
 	} else if (is_dom_property(name)) {
@@ -561,0 +571,0 @@ update = b.stmt(b.assignment('=', b.member(node_id, name), value));

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

@@ -85,3 +85,4 @@ /** @import { Expression, Literal } from 'estree' */
 				}
-			} else {
+				// the defaultValue/defaultChecked properties don't exist as attributes
+			} else if (attribute.name !== 'defaultValue' && attribute.name !== 'defaultChecked') {
 				if (attribute.name === 'class') {
@@ -88,0 +89,0 @@ class_index = attributes.length;

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

@@ -88,2 +88,21 @@ import { DEV } from 'esm-env';
 /**
+ * Sets the `selected` attribute on an `option` element.
+ * Not set through the property because that doesn't reflect to the DOM,
+ * which means it wouldn't be taken into account when a form is reset.
+ * @param {HTMLOptionElement} element
+ * @param {boolean} selected
+ */
+export function set_selected(element, selected) {
+	if (selected) {
+		// The selected option could've changed via user selection, and
+		// setting the value without this check would set it back.
+		if (!element.hasAttribute('selected')) {
+			element.setAttribute('selected', '');
+		}
+	} else {
+		element.removeAttribute('selected');
+	}
+}
+
+/**
  * @param {Element} element
@@ -90,0 +109,0 @@ * @param {string} attribute

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

@@ -8,3 +8,3 @@ import { DEV } from 'esm-env';
 import { hydrating } from '../../hydration.js';
-import { is_runes } from '../../../runtime.js';
+import { is_runes, untrack } from '../../../runtime.js';
 
@@ -20,3 +20,3 @@ /**
 
-	listen_to_event_and_reset_event(input, 'input', () => {
+	listen_to_event_and_reset_event(input, 'input', (is_reset) => {
 		if (DEV && input.type === 'checkbox') {
@@ -27,4 +27,5 @@ // TODO should this happen in prod too?
 
-		/** @type {unknown} */
-		var value = is_numberlike_input(input) ? to_number(input.value) : input.value;
+		/** @type {any} */
+		var value = is_reset ? input.defaultValue : input.value;
+		value = is_numberlike_input(input) ? to_number(value) : value;
 		set(value);
@@ -35,3 +36,3 @@
 		if (runes && value !== (value = get())) {
-			// @ts-expect-error the value is coerced on assignment
+			// the value is coerced on assignment
 			input.value = value ?? '';
@@ -41,2 +42,13 @@ }
 
+	if (
+		// If we are hydrating and the value has since changed,
+		// then use the updated 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?
+		(untrack(get) == null && input.value)
+	) {
+		set(is_numberlike_input(input) ? to_number(input.value) : input.value);
+	}
+
 	render_effect(() => {
@@ -50,9 +62,2 @@ if (DEV && input.type === 'checkbox') {
 
-		// 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(is_numberlike_input(input) ? to_number(input.value) : input.value);
-			return;
-		}
-
 		if (is_numberlike_input(input) && value === to_number(input.value)) {
@@ -184,9 +189,15 @@ // handles 0 vs 00 case (see https://github.com/sveltejs/svelte/issues/9959)
 export function bind_checked(input, get, set = get) {
-	listen_to_event_and_reset_event(input, 'change', () => {
-		var value = input.checked;
+	listen_to_event_and_reset_event(input, 'change', (is_reset) => {
+		var value = is_reset ? input.defaultChecked : input.checked;
 		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
+		untrack(get) == null
+	) {
+		set(input.checked);
 	}
@@ -193,0 +204,0 @@

src/internal/client/dom/elements/bindings/select.js

@@ -83,3 +83,4 @@ import { effect } from '../../../reactivity/effects.js';
 
-	listen_to_event_and_reset_event(select, 'change', () => {
+	listen_to_event_and_reset_event(select, 'change', (is_reset) => {
+		var query = is_reset ? '[selected]' : ':checked';
 		/** @type {unknown} */
@@ -89,6 +90,9 @@ var value;
 		if (select.multiple) {
-			value = [].map.call(select.querySelectorAll(':checked'), get_option_value);
+			value = [].map.call(select.querySelectorAll(query), get_option_value);
 		} else {
 			/** @type {HTMLOptionElement | null} */
-			var selected_option = select.querySelector(':checked');
+			var selected_option =
+				select.querySelector(query) ??
+				// will fall back to first non-disabled option if no option is selected
+				select.querySelector('option:not([disabled])');
 			value = selected_option && get_option_value(selected_option);
@@ -95,0 +99,0 @@ }

src/internal/client/dom/elements/bindings/shared.js

@@ -56,4 +56,4 @@ import { teardown } from '../../../reactivity/effects.js';
  * @param {string} event
- * @param {() => void} handler
- * @param {() => void} [on_reset]
+ * @param {(is_reset?: true) => void} handler
+ * @param {(is_reset?: true) => void} [on_reset]
  */
@@ -69,7 +69,7 @@ export function listen_to_event_and_reset_event(element, event, handler, on_reset = handler) {
 			prev();
-			on_reset();
+			on_reset(true);
 		};
 	} else {
 		// @ts-expect-error
-		element.__on_r = on_reset;
+		element.__on_r = () => on_reset(true);
 	}
@@ -76,0 +76,0 @@

src/internal/client/index.js

@@ -37,3 +37,4 @@ export { FILENAME, HMR, NAMESPACE_SVG } from '../../constants.js';
 	set_value,
-	set_checked
+	set_checked,
+	set_selected
 } from './dom/elements/attributes.js';
@@ -40,0 +41,0 @@ export { set_class, set_svg_class, set_mathml_class, toggle_class } from './dom/elements/class.js';

src/utils.js

@@ -196,2 +196,4 @@ const regex_return_characters = /\r/g;
 	readonly: 'readOnly',
+	defaultvalue: 'defaultValue',
+	defaultchecked: 'defaultChecked',
 	srcobject: 'srcObject'
@@ -218,2 +220,4 @@ };
 	'volume',
+	'defaultValue',
+	'defaultChecked',
 	'srcObject'
@@ -229,3 +233,3 @@ ];
 
-const NON_STATIC_PROPERTIES = ['autofocus', 'muted'];
+const NON_STATIC_PROPERTIES = ['autofocus', 'muted', 'defaultValue', 'defaultChecked'];
 
@@ -232,0 +236,0 @@ /**

src/version.js

@@ -9,3 +9,3 @@ // generated during release, do not modify
  */
-export const VERSION = '5.5.4';
+export const VERSION = '5.6.0';
 export const PUBLIC_VERSION = '5';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2363411

increased by0.12%

Lines of code

52192

increased by0.11%

No dependency changes