feat: simpler string normalization (#11954)

* feat: simpler string normalization

* simpler still - no function call necessary

Author: Rich-Harris

.changeset/tiny-taxis-whisper.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: simpler string normalization

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

@@ -1337,10 +1337,7 @@ function process_children(nodes, expression, is_element, { visit, state }) {
 						b.assignment(
 							'=',
 							b.member(text_id, b.id('nodeValue')),
-							b.call(
-								'$.stringify',
-								/** @type {import('estree').Expression} */ (visit(node.expression))
-							)
+							/** @type {import('estree').Expression} */ (visit(node.expression))
 						)
 					)
 				);
@@ -1524,7 +1521,7 @@ function serialize_template_literal(values, visit, state) {
 				);
 				expressions.push(b.call('$.get', id));
 			} else {
-				expressions.push(b.call('$.stringify', visit(node.expression, state)));
+				expressions.push(b.logical('??', visit(node.expression, state), b.literal('')));
 			}
 			quasis.push(b.quasi('', i + 1 === values.length));
 		}

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

@@ -1,6 +1,5 @@
 import { DEV } from 'esm-env';
 import { render_effect, effect, teardown } from '../../../reactivity/effects.js';
-import { stringify } from '../../../render.js';
 import { listen_to_event_and_reset_event } from './shared.js';
 import * as e from '../../../errors.js';
 import { get_proxied_value, is } from '../../../proxy.js';
@@ -43,7 +42,8 @@ export function bind_value(input, get_value, update) {
 			return;
 		}
 
-		input.value = stringify(value);
+		// @ts-expect-error the value is coerced on assignment
+		input.value = value ?? '';
 	});
 }
 

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

@@ -118,7 +118,7 @@ export {
 	update_pre_store,
 	update_store
 } from './reactivity/store.js';
-export { append_styles, sanitize_slots, set_text, slot, stringify } from './render.js';
+export { append_styles, sanitize_slots, set_text, slot } from './render.js';
 export {
 	get,
 	invalidate_inner_signals,

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

@@ -66,14 +66,6 @@ export function slot(anchor, slot_fn, slot_props, fallback_fn) {
 	}
 }
 
-/**
- * @param {unknown} value
- * @returns {string}
- */
-export function stringify(value) {
-	return typeof value === 'string' ? value : value == null ? '' : value + '';
-}
-
 /**
  * Mounts a component to the given target and returns the exports and potentially the props (if compiled with `accessors: true`) of the component
  *

packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/client/index.svelte.js

@@ -28,6 +28,6 @@ export default function Bind_component_snippet($$anchor) {
 
 	var text = $.sibling(node, true);
 
-	$.template_effect(() => $.set_text(text, ` value: ${$.stringify($.get(value))}`));
+	$.template_effect(() => $.set_text(text, ` value: ${$.get(value) ?? ""}`));
 	$.append($$anchor, fragment_1);
 }

packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js

@@ -8,7 +8,7 @@ export default function Each_string_template($$anchor) {
 	$.each(node, 1, () => ['foo', 'bar', 'baz'], $.index, ($$anchor, thing, $$index) => {
 		var text = $.text($$anchor);
 
-		$.template_effect(() => $.set_text(text, `${$.stringify($.unwrap(thing))}, `));
+		$.template_effect(() => $.set_text(text, `${$.unwrap(thing) ?? ""}, `));
 		$.append($$anchor, text);
 	});
 

packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/client/index.svelte.js

@@ -19,7 +19,7 @@ export default function Function_prop_no_getter($$anchor) {
 		children: ($$anchor, $$slotProps) => {
 			var text = $.text($$anchor);
 
-			$.template_effect(() => $.set_text(text, `clicks: ${$.stringify($.get(count))}`));
+			$.template_effect(() => $.set_text(text, `clicks: ${$.get(count) ?? ""}`));
 			$.append($$anchor, text);
 		},
 		$$slots: { default: true }