svelte - npm Package Compare versions

Comparing version 5.0.0-next.151 to 5.0.0-next.152

package.json

@@ -5,3 +5,3 @@ {
   "license": "MIT",
-  "version": "5.0.0-next.151",
+  "version": "5.0.0-next.152",
   "type": "module",
@@ -85,2 +85,6 @@ "types": "./types/index.d.ts",
       "default": "./src/transition/index.js"
+    },
+    "./events": {
+      "types": "./types/index.d.ts",
+      "default": "./src/events/index.js"
     }
@@ -87,0 +91,0 @@ },

src/compiler/phases/1-parse/state/element.js

@@ -75,3 +75,3 @@ import { is_void } from '../utils/names.js';
 /** @param {import('../index.js').Parser} parser */
-export default function tag(parser) {
+export default function element(parser) {
 	const start = parser.index++;
@@ -78,0 +78,0 @@

src/compiler/phases/1-parse/state/tag.js

@@ -10,3 +10,3 @@ import read_pattern from '../read/context.js';
 /** @param {import('../index.js').Parser} parser */
-export default function mustache(parser) {
+export default function tag(parser) {
 	const start = parser.index;
@@ -13,0 +13,0 @@ parser.index += 1;

src/compiler/phases/2-analyze/validation.js

@@ -571,2 +571,13 @@ import is_reference from 'is-reference';
 
+		// can't add form to interactive elements because those are also used by the parser
+		// to check for the last auto-closing parent.
+		if (node.name === 'form') {
+			const path = context.path;
+			for (let parent of path) {
+				if (parent.type === 'RegularElement' && parent.name === 'form') {
+					e.node_invalid_placement(node, `<${node.name}>`, parent.name);
+				}
+			}
+		}
+
 		if (interactive_elements.has(node.name)) {
@@ -573,0 +584,0 @@ const path = context.path;

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

@@ -455,3 +455,3 @@ import { walk } from 'zimmerframe';
 			b.if(
-				b.binary('===', b.id('new.target'), b.id(analysis.name)),
+				b.id('new.target'),
 				b.return(
@@ -467,11 +467,3 @@ b.call(
 	} else if (options.dev) {
-		component_block.body.unshift(
-			b.if(
-				b.binary('===', b.id('new.target'), b.id(analysis.name)),
-				b.throw_error(
-					`Instantiating a component with \`new\` is no longer valid in Svelte 5. ` +
-						'See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information'
-				)
-			)
-		);
+		component_block.body.unshift(b.stmt(b.call('$.check_target', b.id('new.target'))));
 	}
@@ -478,0 +470,0 @@

src/compiler/phases/bindings.js

@@ -5,3 +5,3 @@ /**
  * 							  and there's an event that notifies of a change to that property
- * @property {string} [type] Set this to `set` if updates are written to the dom property
+ * @property {boolean} [bidirectional] Set this to `true` if updates are written to the dom property
  * @property {boolean} [omit_in_ssr] Set this to true if the binding should not be included in SSR
@@ -179,3 +179,3 @@ * @property {string[]} [valid_elements] If this is set, the binding is only valid on the given elements
 		event: 'change',
-		type: 'set',
+		bidirectional: true,
 		valid_elements: ['input'],
@@ -205,3 +205,3 @@ omit_in_ssr: true // no corresponding attribute
 		event: 'toggle',
-		type: 'set',
+		bidirectional: true,
 		valid_elements: ['details']
@@ -208,0 +208,0 @@ },

src/constants.js

@@ -24,2 +24,3 @@ export const EACH_ITEM_REACTIVE = 1;
 export const HYDRATION_END = ']';
+export const HYDRATION_ANCHOR = '';
 export const HYDRATION_END_ELSE = `${HYDRATION_END}!`; // used to indicate that an `{:else}...` block was rendered
@@ -26,0 +27,0 @@ export const HYDRATION_ERROR = {};

src/internal/client/dev/hmr.js

 import { block, branch, destroy_effect } from '../reactivity/effects.js';
 import { set_should_intro } from '../render.js';
 import { get } from '../runtime.js';
+import { check_target } from './legacy.js';
 
@@ -14,3 +15,3 @@ /**
 	 */
-	return (anchor, props) => {
+	return function (anchor, props) {
 		let instance = {};
@@ -35,3 +36,6 @@
 					instance,
-					Object.getOwnPropertyDescriptors(component(anchor, props))
+					Object.getOwnPropertyDescriptors(
+						// @ts-expect-error
+						new.target ? new component(anchor, props) : component(anchor, props)
+					)
 				);
@@ -38,0 +42,0 @@ set_should_intro(true);

src/internal/client/dev/legacy.js

@@ -5,2 +5,9 @@ import * as e from '../errors.js';
 
+/** @param {Function & { filename: string }} target */
+export function check_target(target) {
+	if (target) {
+		e.component_api_invalid_new(target.filename ?? 'a component', target.name);
+	}
+}
+
 export function legacy_api() {
@@ -7,0 +14,0 @@ const component = current_component_context?.function;

src/internal/client/dom/blocks/css-props.js

@@ -1,62 +0,33 @@
-import { namespace_svg } from '../../../../constants.js';
-import { hydrate_anchor, hydrate_start, hydrating } from '../hydration.js';
-import { empty } from '../operations.js';
+import { hydrating, set_hydrate_nodes } from '../hydration.js';
 import { render_effect } from '../../reactivity/effects.js';
 
 /**
- * @param {Element | Text | Comment} anchor
- * @param {boolean} is_html
- * @param {() => Record<string, string>} props
- * @param {(anchor: Element | Text | Comment) => any} component
+ * @param {HTMLDivElement | SVGGElement} element
+ * @param {() => Record<string, string>} get_styles
  * @returns {void}
  */
-export function css_props(anchor, is_html, props, component) {
-	/** @type {HTMLElement | SVGElement} */
-	let element;
-
-	/** @type {Text | Comment} */
-	let component_anchor;
-
+export function css_props(element, get_styles) {
 	if (hydrating) {
-		// Hydration: css props element is surrounded by a ssr comment ...
-		element = /** @type {HTMLElement | SVGElement} */ (hydrate_start);
-		// ... and the child(ren) of the css props element is also surround by a ssr comment
-		component_anchor = /** @type {Comment} */ (
-			hydrate_anchor(/** @type {Comment} */ (element.firstChild))
+		set_hydrate_nodes(
+			/** @type {import('#client').TemplateNode[]} */ ([...element.childNodes]).slice(0, -1)
 		);
-	} else {
-		if (is_html) {
-			element = document.createElement('div');
-			element.style.display = 'contents';
-		} else {
-			element = document.createElementNS(namespace_svg, 'g');
-		}
-
-		anchor.before(element);
-		component_anchor = element.appendChild(empty());
 	}
 
-	component(component_anchor);
-
 	render_effect(() => {
-		/** @type {Record<string, string>} */
-		let current_props = {};
-
 		render_effect(() => {
-			const next_props = props();
+			var styles = get_styles();
 
-			for (const key in current_props) {
-				if (!(key in next_props)) {
+			for (var key in styles) {
+				var value = styles[key];
+
+				if (value) {
+					element.style.setProperty(key, value);
+				} else {
 					element.style.removeProperty(key);
 				}
 			}
-
-			for (const key in next_props) {
-				element.style.setProperty(key, next_props[key]);
-			}
-
-			current_props = next_props;
 		});
 
 		return () => {
+			// TODO use `teardown` instead of creating a nested effect, post-https://github.com/sveltejs/svelte/pull/11936
 			element.remove();
@@ -63,0 +34,0 @@ };

src/internal/client/dom/blocks/svelte-component.js

@@ -8,3 +8,2 @@ import { block, branch, pause_effect } from '../../reactivity/effects.js';
  * @template {(props: P) => void} C
- * @param {Comment} anchor
  * @param {() => C} get_component
@@ -14,3 +13,3 @@ * @param {(component: C) => import('#client').Dom | void} render_fn
  */
-export function component(anchor, get_component, render_fn) {
+export function component(get_component, render_fn) {
 	/** @type {C} */
@@ -17,0 +16,0 @@ let component;

src/internal/client/dom/blocks/svelte-element.js

 import { namespace_svg } from '../../../../constants.js';
-import { hydrate_anchor, hydrate_start, hydrating } from '../hydration.js';
+import { hydrating, set_hydrate_nodes } from '../hydration.js';
 import { empty } from '../operations.js';
@@ -40,3 +40,3 @@ import {
 /**
- * @param {Comment} anchor
+ * @param {Comment | Element} node
  * @param {() => string} get_tag
@@ -49,3 +49,3 @@ * @param {boolean} is_svg
  */
-export function element(anchor, get_tag, is_svg, render_fn, get_namespace, location) {
+export function element(node, get_tag, is_svg, render_fn, get_namespace, location) {
 	const parent_effect = /** @type {import('#client').Effect} */ (current_effect);
@@ -61,4 +61,6 @@ const filename = DEV && location && current_component_context?.function.filename;
 	/** @type {null | Element} */
-	let element = null;
+	let element = hydrating && node.nodeType === 1 ? /** @type {Element} */ (node) : null;
 
+	let anchor = /** @type {Comment} */ (hydrating && element ? element.nextSibling : node);
+
 	/** @type {import('#client').Effect | null} */
@@ -81,2 +83,3 @@ let effect;
 				: null;
+
 		// Assumption: Noone changes the namespace but not the tag (what would that even mean?)
@@ -111,3 +114,3 @@ if (next_tag === tag) return;
 				element = hydrating
-					? /** @type {Element} */ (hydrate_start)
+					? /** @type {Element} */ (element)
 					: ns
@@ -131,6 +134,10 @@ ? document.createElementNS(ns, next_tag)
 					// inner open and close methods can pick up the existing nodes correctly
-					var child_anchor = hydrating
-						? element.firstChild && hydrate_anchor(/** @type {Comment} */ (element.firstChild))
-						: element.appendChild(empty());
+					var child_anchor = hydrating ? element.lastChild : element.appendChild(empty());
 
+					if (hydrating && child_anchor) {
+						set_hydrate_nodes(
+							/** @type {import('#client').TemplateNode[]} */ ([...element.childNodes]).slice(0, -1)
+						);
+					}
+
 					// `child_anchor` is undefined if this is a void element, but we still
@@ -145,7 +152,9 @@ // need to call `render_fn` in order to run actions etc. If the element
 
-				if (prev_element) {
-					swap_block_dom(parent_effect, prev_element, element);
-					prev_element.remove();
-				} else if (!hydrating) {
-					push_template_node(element, parent_effect);
+				if (!hydrating) {
+					if (prev_element) {
+						swap_block_dom(parent_effect, prev_element, element);
+						prev_element.remove();
+					} else {
+						push_template_node(element, parent_effect);
+					}
 				}
@@ -152,0 +161,0 @@ });

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

@@ -147,2 +147,3 @@ import { DEV } from 'esm-env';
 	var has_hash = css_hash.length !== 0;
+	var current = prev || {};
 
@@ -171,4 +172,7 @@ for (var key in prev) {
 		let value = next[key];
-		if (value === prev?.[key]) continue;
+		var prev_value = current[key];
+		if (value === prev_value) continue;
 
+		current[key] = value;
+
 		var prefix = key[0] + key[1]; // this is faster than key.slice(0, 2)
@@ -180,2 +184,3 @@ if (prefix === '$$') continue;
 			const opts = {};
+			const event_handle_key = '$$' + key;
 			let event_name = key.slice(2);
@@ -189,4 +194,11 @@ var delegated = DelegatedEvents.includes(event_name);
 
-			if (!delegated && prev?.[key]) {
-				element.removeEventListener(event_name, /** @type {any} */ (prev[key]), opts);
+			if (!delegated && prev_value) {
+				// Listening to same event but different handler -> our handle function below takes care of this
+				// If we were to remove and add listeners in this case, it could happen that the event is "swallowed"
+				// (the browser seems to not know yet that a new one exists now) and doesn't reach the handler
+				// https://github.com/sveltejs/svelte/issues/11903
+				if (value != null) continue;
+
+				element.removeEventListener(event_name, current[event_handle_key], opts);
+				current[event_handle_key] = null;
 			}
@@ -196,3 +208,10 @@
 				if (!delegated) {
-					// we use `addEventListener` here because these events are not delegated
+					/**
+					 * @this {any}
+					 * @param {Event} evt
+					 */
+					function handle(evt) {
+						current[key].call(this, evt);
+					}
+
 					if (!prev) {
@@ -202,6 +221,6 @@ events.push([
 							value,
-							() => (next[key] = create_event(event_name, element, value, opts))
+							() => (current[event_handle_key] = create_event(event_name, element, handle, opts))
 						]);
 					} else {
-						next[key] = create_event(event_name, element, value, opts);
+						current[event_handle_key] = create_event(event_name, element, handle, opts);
 					}
@@ -261,3 +280,3 @@ } else {
 				for (const [key, value, evt] of events) {
-					if (next[key] === value) {
+					if (current[key] === value) {
 						evt();
@@ -271,3 +290,3 @@ }
 
-	return next;
+	return current;
 }
@@ -274,0 +293,0 @@

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

 import { DEV } from 'esm-env';
-import { render_effect, effect } from '../../../reactivity/effects.js';
-import { stringify } from '../../../render.js';
+import { render_effect, effect, teardown } from '../../../reactivity/effects.js';
 import { listen_to_event_and_reset_event } from './shared.js';
@@ -46,3 +45,4 @@ import * as e from '../../../errors.js';
 
-		input.value = stringify(value);
+		// @ts-expect-error the value is coerced on assignment
+		input.value = value ?? '';
 	});
@@ -107,10 +107,8 @@ }
 
-	render_effect(() => {
-		return () => {
-			var index = binding_group.indexOf(input);
+	teardown(() => {
+		var index = binding_group.indexOf(input);
 
-			if (index !== -1) {
-				binding_group.splice(index, 1);
-			}
-		};
+		if (index !== -1) {
+			binding_group.splice(index, 1);
+		}
 	});
@@ -194,2 +192,3 @@
 	});
+
 	render_effect(() => {
@@ -196,0 +195,0 @@ input.files = get_value();

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

 import { hydrating } from '../../hydration.js';
-import { render_effect, effect } from '../../../reactivity/effects.js';
+import { render_effect, effect, teardown } from '../../../reactivity/effects.js';
 import { listen } from './shared.js';
@@ -55,3 +55,3 @@
 
-	render_effect(() => () => cancelAnimationFrame(raf_id));
+	teardown(() => cancelAnimationFrame(raf_id));
 }
@@ -58,0 +58,0 @@

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

@@ -1,2 +0,2 @@
-import { render_effect } from '../../../reactivity/effects.js';
+import { teardown } from '../../../reactivity/effects.js';
 import { get_descriptor } from '../../../utils.js';
@@ -18,3 +18,3 @@
 		props[prop] = value;
-		render_effect(() => () => {
+		teardown(() => {
 			props[prop] = null;
@@ -21,0 +21,0 @@ });

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

@@ -1,2 +0,2 @@
-import { render_effect } from '../../../reactivity/effects.js';
+import { teardown } from '../../../reactivity/effects.js';
 import { add_form_reset_listener } from '../misc.js';
@@ -21,8 +21,6 @@
 
-	render_effect(() => {
-		return () => {
-			for (var name of events) {
-				target.removeEventListener(name, handler);
-			}
-		};
+	teardown(() => {
+		for (var name of events) {
+			target.removeEventListener(name, handler);
+		}
 	});
@@ -29,0 +27,0 @@ }

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

@@ -1,3 +0,2 @@
-import { effect, render_effect } from '../../../reactivity/effects.js';
-import { untrack } from '../../../runtime.js';
+import { effect, teardown } from '../../../reactivity/effects.js';
 
@@ -92,3 +91,3 @@ /**
 	var unsub = observer.observe(element, /** @param {any} entry */ (entry) => update(entry[type]));
-	render_effect(() => unsub);
+	teardown(unsub);
 }
@@ -95,0 +94,0 @@

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

@@ -1,2 +0,2 @@
-import { render_effect } from '../../../reactivity/effects.js';
+import { render_effect, teardown } from '../../../reactivity/effects.js';
 import { listen } from './shared.js';
@@ -36,36 +36,30 @@
  * @param {string} event_name
- * @param {'get' | 'set'} type
  * @param {Element} element
- * @param {() => unknown} get_value
- * @param {(value: unknown) => void} update
+ * @param {(value: unknown) => void} set
+ * @param {() => unknown} [get]
  * @returns {void}
  */
-export function bind_property(property, event_name, type, element, get_value, update) {
-	var target_handler = () => {
+export function bind_property(property, event_name, element, set, get) {
+	var handler = () => {
 		// @ts-ignore
-		update(element[property]);
+		set(element[property]);
 	};
 
-	element.addEventListener(event_name, target_handler);
+	element.addEventListener(event_name, handler);
 
-	if (type === 'set') {
+	if (get) {
 		render_effect(() => {
 			// @ts-ignore
-			element[property] = get_value();
+			element[property] = get();
 		});
+	} else {
+		handler();
 	}
 
-	if (type === 'get') {
-		// @ts-ignore
-		update(element[property]);
+	// @ts-ignore
+	if (element === document.body || element === window || element === document) {
+		teardown(() => {
+			element.removeEventListener(event_name, handler);
+		});
 	}
-
-	render_effect(() => {
-		// @ts-ignore
-		if (element === document.body || element === window || element === document) {
-			return () => {
-				element.removeEventListener(event_name, target_handler);
-			};
-		}
-	});
 }
@@ -72,0 +66,0 @@

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

@@ -1,2 +0,2 @@
-import { effect, render_effect } from '../../../reactivity/effects.js';
+import { effect, render_effect, teardown } from '../../../reactivity/effects.js';
 import { listen } from './shared.js';
@@ -54,6 +54,4 @@
 
-	render_effect(() => {
-		return () => {
-			removeEventListener('scroll', target_handler);
-		};
+	teardown(() => {
+		removeEventListener('scroll', target_handler);
 	});
@@ -60,0 +58,0 @@ }

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

@@ -1,2 +0,2 @@
-import { render_effect } from '../../reactivity/effects.js';
+import { render_effect, teardown } from '../../reactivity/effects.js';
 import { all_registered_events, root_event_handles } from '../../render.js';
@@ -70,2 +70,20 @@ import { define_property, is_array } from '../../utils.js';
 /**
+ * Attaches an event handler to an element and returns a function that removes the handler. Using this
+ * rather than `addEventListener` will preserve the correct order relative to handlers added declaratively
+ * (with attributes like `onclick`), which use event delegation for performance reasons
+ *
+ * @param {Element} element
+ * @param {string} type
+ * @param {EventListener} handler
+ * @param {AddEventListenerOptions} [options]
+ */
+export function on(element, type, handler, options = {}) {
+	var target_handler = create_event(type, element, handler, options);
+
+	return () => {
+		element.removeEventListener(type, target_handler, options);
+	};
+}
+
+/**
  * @param {string} event_name
@@ -84,6 +102,4 @@ * @param {Element} dom
 	if (dom === document.body || dom === window || dom === document) {
-		render_effect(() => {
-			return () => {
-				dom.removeEventListener(event_name, target_handler, options);
-			};
+		teardown(() => {
+			dom.removeEventListener(event_name, target_handler, options);
 		});
@@ -90,0 +106,0 @@ }

src/internal/client/dom/operations.js

@@ -5,2 +5,3 @@ import { hydrate_anchor, hydrate_start, hydrating } from './hydration.js';
 import { current_effect } from '../runtime.js';
+import { HYDRATION_ANCHOR } from '../../../constants.js';
 
@@ -39,3 +40,3 @@ // export these for reference in the compiled code, making global name deduplication unnecessary
 	// @ts-expect-error
-	Text.prototype.__nodeValue = ' ';
+	Text.prototype.__t = undefined;
 
@@ -110,3 +111,3 @@ if (DEV) {
 export function sibling(node, is_text = false) {
-	const next_sibling = node.nextSibling;
+	var next_sibling = /** @type {import('#client').TemplateNode} */ (node.nextSibling);
 
@@ -117,5 +118,11 @@ if (!hydrating) {
 
+	var type = next_sibling.nodeType;
+
+	if (type === 8 && /** @type {Comment} */ (next_sibling).data === HYDRATION_ANCHOR) {
+		return sibling(next_sibling, is_text);
+	}
+
 	// if a sibling {expression} is empty during SSR, there might be no
 	// text node to hydrate — we must therefore create one
-	if (is_text && next_sibling?.nodeType !== 3) {
+	if (is_text && type !== 3) {
 		var text = empty();
@@ -122,0 +129,0 @@ var dom = /** @type {import('#client').TemplateNode[]} */ (

src/internal/client/errors.js

@@ -79,2 +79,20 @@ /* This file is generated by scripts/process-messages/index.js. Do not edit! */
 /**
+ * Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `legacy.componentApi` compiler option to keep it working. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information
+ * @param {string} component
+ * @param {string} name
+ * @returns {never}
+ */
+export function component_api_invalid_new(component, name) {
+	if (DEV) {
+		const error = new Error(`${"component_api_invalid_new"}\n${`Attempted to instantiate ${component} with \`new ${name}\`, which is no longer valid in Svelte 5. If this component is not under your control, set the \`legacy.componentApi\` compiler option to keep it working. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information`}`);
+
+		error.name = 'Svelte error';
+		throw error;
+	} else {
+		// TODO print a link to the documentation
+		throw new Error("component_api_invalid_new");
+	}
+}
+
+/**
  * Keyed each block has duplicate key `%value%` at indexes %a% and %b%
@@ -81,0 +99,0 @@ * @param {string} a

src/internal/client/index.js

@@ -10,3 +10,3 @@ export { add_locations } from './dev/elements.js';
 } from './dev/ownership.js';
-export { legacy_api } from './dev/legacy.js';
+export { check_target, legacy_api } from './dev/legacy.js';
 export { inspect } from './dev/inspect.js';
@@ -122,3 +122,3 @@ export { await_block as await } from './dom/blocks/await.js';
 } 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 {
@@ -125,0 +125,0 @@ get,

src/internal/client/reactivity/effects.js

@@ -33,3 +33,4 @@ import {
 	DERIVED,
-	UNOWNED
+	UNOWNED,
+	CLEAN
 } from '../constants.js';
@@ -72,3 +73,3 @@ import { set } from './sources.js';
  * @param {number} type
- * @param {(() => void | (() => void))} fn
+ * @param {null | (() => void | (() => void))} fn
  * @param {boolean} sync
@@ -126,3 +127,3 @@ * @returns {import('#client').Effect}
 		}
-	} else {
+	} else if (fn !== null) {
 		schedule_effect(effect);
@@ -151,2 +152,12 @@ }
 /**
+ * @param {() => void} fn
+ */
+export function teardown(fn) {
+	const effect = create_effect(RENDER_EFFECT, null, false);
+	set_signal_status(effect, CLEAN);
+	effect.teardown = fn;
+	return effect;
+}
+
+/**
  * Internal representation of `$effect(...)`
@@ -371,3 +382,2 @@ * @param {() => void | (() => void)} fn
 		effect.parent =
-		// @ts-expect-error
 		effect.fn =
@@ -374,0 +384,0 @@ null;

src/internal/client/reactivity/types.d.ts

@@ -21,3 +21,3 @@ import type { ComponentContext, Dom, Equals, TransitionManager } from '#client';
 	/** The reaction function */
-	fn: Function;
+	fn: null | Function;
 	/** Signals that this signal reads from */
@@ -44,3 +44,3 @@ deps: null | Value[];
 	/** The effect function */
-	fn: () => void | (() => void);
+	fn: null | (() => void | (() => void));
 	/** The teardown function returned from the effect function */
@@ -47,0 +47,0 @@ teardown: null | (() => void);

src/internal/client/render.js

@@ -39,18 +39,13 @@ import { DEV } from 'esm-env';
 /**
- * @param {Element} dom
+ * @param {Element} text
  * @param {string} value
  * @returns {void}
  */
-export function set_text(dom, value) {
-	// @ts-expect-error need to add __value to patched prototype
-	const prev_node_value = dom.__nodeValue;
-	const next_node_value = stringify(value);
-	if (hydrating && dom.nodeValue === next_node_value) {
-		// In case of hydration don't reset the nodeValue as it's already correct.
-		// @ts-expect-error need to add __nodeValue to patched prototype
-		dom.__nodeValue = next_node_value;
-	} else if (prev_node_value !== next_node_value) {
-		dom.nodeValue = next_node_value;
-		// @ts-expect-error need to add __className to patched prototype
-		dom.__nodeValue = next_node_value;
+export function set_text(text, value) {
+	// @ts-expect-error
+	const prev = (text.__t ??= text.nodeValue);
+
+	if (prev !== value) {
+		// @ts-expect-error
+		text.nodeValue = text.__t = value;
 	}
@@ -76,10 +71,2 @@ }
 /**
- * @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
@@ -86,0 +73,0 @@ *

src/internal/client/runtime.js

@@ -293,3 +293,3 @@ import { DEV } from 'esm-env';
 
-	const effect_name = effect.fn.name;
+	const effect_name = effect.fn?.name;
 
@@ -362,3 +362,3 @@ if (effect_name) {
 	try {
-		let res = (0, signal.fn)();
+		let res = /** @type {Function} */ (0, signal.fn)();
 		let dependencies = /** @type {import('#client').Value<unknown>[]} **/ (signal.deps);
@@ -365,0 +365,0 @@ if (current_dependencies !== null) {

src/internal/server/hydration.js

@@ -1,5 +0,11 @@
-import { HYDRATION_END, HYDRATION_END_ELSE, HYDRATION_START } from '../../constants.js';
+import {
+	HYDRATION_ANCHOR,
+	HYDRATION_END,
+	HYDRATION_END_ELSE,
+	HYDRATION_START
+} from '../../constants.js';
 
 export const BLOCK_OPEN = `<!--${HYDRATION_START}-->`;
 export const BLOCK_CLOSE = `<!--${HYDRATION_END}-->`;
+export const BLOCK_ANCHOR = `<!--${HYDRATION_ANCHOR}-->`;
 export const BLOCK_CLOSE_ELSE = `<!--${HYDRATION_END_ELSE}-->`;

src/internal/server/index.js

@@ -13,3 +13,3 @@ import { is_promise, noop } from '../shared/utils.js';
 import { current_component, pop, push } from './context.js';
-import { BLOCK_CLOSE, BLOCK_OPEN } from './hydration.js';
+import { BLOCK_ANCHOR, BLOCK_CLOSE, BLOCK_OPEN } from './hydration.js';
 import { validate_store } from '../shared/validate.js';
@@ -82,8 +82,5 @@
 	if (!VoidElements.has(tag)) {
-		if (!RawTextElements.includes(tag)) {
-			payload.out += BLOCK_OPEN;
-		}
 		children_fn();
 		if (!RawTextElements.includes(tag)) {
-			payload.out += BLOCK_CLOSE;
+			payload.out += BLOCK_ANCHOR;
 		}
@@ -151,8 +148,8 @@ payload.out += `</${tag}>`;
  * @param {V} value
- * @param {boolean} boolean
+ * @param {boolean} [is_boolean]
  * @returns {string}
  */
-export function attr(name, value, boolean) {
-	if (value == null || (!value && boolean) || (value === '' && name === 'class')) return '';
-	const assignment = boolean ? '' : `="${escape_html(value, true)}"`;
+export function attr(name, value, is_boolean = false) {
+	if (value == null || (!value && is_boolean) || (value === '' && name === 'class')) return '';
+	const assignment = is_boolean ? '' : `="${escape_html(value, true)}"`;
 	return ` ${name}${assignment}`;
@@ -171,11 +168,11 @@ }
 	if (is_html) {
-		payload.out += `<div style="display: contents; ${styles}"><!--[-->`;
+		payload.out += `<div style="display: contents; ${styles}">`;
 	} else {
-		payload.out += `<g style="${styles}"><!--[-->`;
+		payload.out += `<g style="${styles}">`;
 	}
 	component();
 	if (is_html) {
-		payload.out += `<!--]--></div>`;
+		payload.out += `<!----></div>`;
 	} else {
-		payload.out += `<!--]--></g>`;
+		payload.out += `<!----></g>`;
 	}
@@ -182,0 +179,0 @@ }

src/reactivity/set.js

@@ -69,2 +69,3 @@ import { DEV } from 'esm-env';
 	has(value) {
+		var has = super.has(value);
 		var sources = this.#sources;
@@ -74,16 +75,15 @@ var s = sources.get(value);
 		if (s === undefined) {
-			var ret = super.has(value);
-			if (ret) {
-				s = source(true);
-				sources.set(value, s);
-			} else {
-				// We should always track the version in case
-				// the Set ever gets this value in the future.
+			if (!has) {
+				// If the value doesn't exist, track the version in case it's added later
+				// but don't create sources willy-nilly to track all possible values
 				get(this.#version);
 				return false;
 			}
+
+			s = source(true);
+			sources.set(value, s);
 		}
 
 		get(s);
-		return super.has(value);
+		return has;
 	}
@@ -93,15 +93,9 @@
 	add(value) {
-		var sources = this.#sources;
-		var res = super.add(value);
-		var s = sources.get(value);
-
-		if (s === undefined) {
-			sources.set(value, source(true));
+		if (!super.has(value)) {
+			super.add(value);
 			set(this.#size, super.size);
 			increment(this.#version);
-		} else {
-			set(s, true);
 		}
 
-		return res;
+		return this;
 	}
@@ -111,27 +105,32 @@
 	delete(value) {
+		var deleted = super.delete(value);
 		var sources = this.#sources;
 		var s = sources.get(value);
-		var res = super.delete(value);
 
 		if (s !== undefined) {
 			sources.delete(value);
+			set(s, false);
+		}
+
+		if (deleted) {
 			set(this.#size, super.size);
-			set(s, false);
 			increment(this.#version);
 		}
 
-		return res;
+		return deleted;
 	}
 
 	clear() {
-		var sources = this.#sources;
+		if (super.size !== 0) {
+			var sources = this.#sources;
 
-		if (super.size !== 0) {
-			set(this.#size, 0);
 			for (var s of sources.values()) {
 				set(s, false);
 			}
+
+			sources.clear();
+			set(this.#size, 0);
 			increment(this.#version);
-			sources.clear();
 		}
+
 		super.clear();
@@ -141,4 +140,3 @@ }
 	keys() {
-		get(this.#version);
-		return super.keys();
+		return this.values();
 	}
@@ -145,0 +143,0 @@

src/version.js

@@ -9,3 +9,3 @@ // generated during release, do not modify
  */
-export const VERSION = '5.0.0-next.151';
+export const VERSION = '5.0.0-next.152';
 export const PUBLIC_VERSION = '5';

No alert changes

Improved metrics

Total package byte prevSize

2108740

increased by0.08%

Number of package files

209

increased by0.48%

Lines of code

46204

increased by0.06%

No dependency changes