svelte 4.0.0 → 4.0.2

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "svelte",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "description": "Cybernetically enhanced web apps",
   "type": "module",
   "module": "src/runtime/index.js",
   "main": "src/runtime/index.js",
   "files": [
     "src",
+    "!src/**/tsconfig.json",
     "types",
     "compiler.*",
     "register.js",
@@ -57,7 +58,7 @@
       "default": "./src/runtime/store/index.js"
     },
     "./internal/disclose-version": {
-      "import": "./src/runtime/internal/disclose-version/index.js"
+      "default": "./src/runtime/internal/disclose-version/index.js"
     },
     "./transition": {
       "types": "./types/index.d.ts",
@@ -92,8 +93,8 @@
     "@ampproject/remapping": "^2.2.1",
     "@jridgewell/sourcemap-codec": "^1.4.15",
     "@jridgewell/trace-mapping": "^0.3.18",
-    "acorn": "^8.8.2",
-    "aria-query": "^5.2.1",
+    "acorn": "^8.9.0",
+    "aria-query": "^5.3.0",
     "axobject-query": "^3.2.1",
     "code-red": "^1.0.3",
     "css-tree": "^2.3.1",
@@ -104,35 +105,35 @@
     "periscopic": "^3.1.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.34.3",
+    "@playwright/test": "^1.35.1",
     "@rollup/plugin-commonjs": "^24.1.0",
     "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-node-resolve": "^15.1.0",
     "@sveltejs/eslint-config": "^6.0.4",
     "@types/aria-query": "^5.0.1",
     "@types/estree": "^1.0.1",
-    "@types/node": "^14.14.31",
+    "@types/node": "^14.18.51",
     "agadoo": "^3.0.0",
     "dts-buddy": "^0.1.7",
     "esbuild": "^0.17.19",
-    "happy-dom": "^9.18.3",
-    "jsdom": "^21.1.1",
+    "happy-dom": "^9.20.3",
+    "jsdom": "^21.1.2",
     "kleur": "^4.1.5",
-    "rollup": "^3.20.2",
+    "rollup": "^3.25.1",
     "source-map": "^0.7.4",
     "tiny-glob": "^0.2.9",
-    "typescript": "^5.0.4",
-    "vitest": "^0.31.1"
+    "typescript": "^5.1.3",
+    "vitest": "^0.31.4"
   },
   "scripts": {
     "format": "prettier . --cache --plugin-search-dir=. --write",
-    "check": "prettier . --cache --plugin-search-dir=. --check",
+    "check": "tsc --noEmit",
     "test": "vitest run && echo \"manually check that there are no type errors in test/types by opening the files in there\"",
     "build": "rollup -c && pnpm types",
     "generate:version": "node ./scripts/generate-version.js",
     "dev": "rollup -cw",
     "posttest": "agadoo src/internal/index.js",
     "types": "node ./scripts/generate-dts.js",
-    "lint": "eslint \"{src,test}/**/*.{ts,js}\" --cache"
+    "lint": "prettier . --cache --plugin-search-dir=. --check && eslint \"{src,test}/**/*.{ts,js}\" --cache"
   }
 }

package/src/compiler/compile/internal_exports.js

@@ -1,2 +1,2 @@
 // This file is automatically generated
-export default new Set(["HtmlTag","HtmlTagHydration","ResizeObserverSingleton","SvelteComponent","SvelteComponentDev","SvelteComponentTyped","SvelteElement","action_destroyer","add_attribute","add_classes","add_flush_callback","add_iframe_resize_listener","add_location","add_render_callback","add_styles","add_transform","afterUpdate","append","append_dev","append_empty_stylesheet","append_hydration","append_hydration_dev","append_styles","assign","attr","attr_dev","attribute_to_object","beforeUpdate","bind","binding_callbacks","blank_object","bubble","check_outros","children","claim_comment","claim_component","claim_element","claim_html_tag","claim_space","claim_svg_element","claim_text","clear_loops","comment","component_subscribe","compute_rest_props","compute_slots","construct_svelte_component","construct_svelte_component_dev","contenteditable_truthy_values","createEventDispatcher","create_animation","create_bidirectional_transition","create_component","create_custom_element","create_in_transition","create_out_transition","create_slot","create_ssr_component","current_component","custom_event","dataset_dev","debug","destroy_block","destroy_component","destroy_each","detach","detach_after_dev","detach_before_dev","detach_between_dev","detach_dev","dirty_components","dispatch_dev","each","element","element_is","empty","end_hydrating","ensure_array_like","ensure_array_like_dev","escape","escape_attribute_value","escape_object","exclude_internal_props","fix_and_destroy_block","fix_and_outro_and_destroy_block","fix_position","flush","flush_render_callbacks","getAllContexts","getContext","get_all_dirty_from_scope","get_binding_group_value","get_current_component","get_custom_elements_slots","get_root_for_style","get_slot_changes","get_spread_object","get_spread_update","get_store_value","get_svelte_dataset","globals","group_outros","handle_promise","hasContext","has_prop","head_selector","identity","init","init_binding_group","init_binding_group_dynamic","insert","insert_dev","insert_hydration","insert_hydration_dev","intros","invalid_attribute_name_character","is_client","is_crossorigin","is_empty","is_function","is_promise","is_void","listen","listen_dev","loop","loop_guard","merge_ssr_styles","missing_component","mount_component","noop","not_equal","now","null_to_empty","object_without_properties","onDestroy","onMount","once","outro_and_destroy_block","prevent_default","prop_dev","query_selector_all","raf","resize_observer_border_box","resize_observer_content_box","resize_observer_device_pixel_content_box","run","run_all","safe_not_equal","schedule_update","select_multiple_value","select_option","select_options","select_value","self","setContext","set_attributes","set_current_component","set_custom_element_data","set_custom_element_data_map","set_data","set_data_contenteditable","set_data_contenteditable_dev","set_data_dev","set_data_maybe_contenteditable","set_data_maybe_contenteditable_dev","set_dynamic_element_data","set_input_type","set_input_value","set_now","set_raf","set_store_value","set_style","set_svg_attributes","space","split_css_unit","spread","src_url_equal","start_hydrating","stop_immediate_propagation","stop_propagation","subscribe","svg_element","text","tick","time_ranges_to_array","to_number","toggle_class","transition_in","transition_out","trusted","update_await_block_branch","update_keyed_each","update_slot","update_slot_base","validate_component","validate_dynamic_element","validate_each_keys","validate_slots","validate_store","validate_void_dynamic_element","xlink_attr"]);
+export default new Set(["HtmlTag","HtmlTagHydration","ResizeObserverSingleton","SvelteComponent","SvelteComponentDev","SvelteComponentTyped","SvelteElement","action_destroyer","add_attribute","add_classes","add_flush_callback","add_iframe_resize_listener","add_location","add_render_callback","add_styles","add_transform","afterUpdate","append","append_dev","append_empty_stylesheet","append_hydration","append_hydration_dev","append_styles","assign","attr","attr_dev","attribute_to_object","beforeUpdate","bind","binding_callbacks","blank_object","bubble","check_outros","children","claim_comment","claim_component","claim_element","claim_html_tag","claim_space","claim_svg_element","claim_text","clear_loops","comment","component_subscribe","compute_rest_props","compute_slots","construct_svelte_component","construct_svelte_component_dev","contenteditable_truthy_values","createEventDispatcher","create_animation","create_bidirectional_transition","create_component","create_custom_element","create_in_transition","create_out_transition","create_slot","create_ssr_component","current_component","custom_event","dataset_dev","debug","destroy_block","destroy_component","destroy_each","detach","detach_after_dev","detach_before_dev","detach_between_dev","detach_dev","dirty_components","dispatch_dev","each","element","element_is","empty","end_hydrating","ensure_array_like","ensure_array_like_dev","escape","escape_attribute_value","escape_object","exclude_internal_props","fix_and_destroy_block","fix_and_outro_and_destroy_block","fix_position","flush","flush_render_callbacks","getAllContexts","getContext","get_all_dirty_from_scope","get_binding_group_value","get_current_component","get_custom_elements_slots","get_root_for_style","get_slot_changes","get_spread_object","get_spread_update","get_store_value","get_svelte_dataset","globals","group_outros","handle_promise","hasContext","has_prop","head_selector","identity","init","init_binding_group","init_binding_group_dynamic","insert","insert_dev","insert_hydration","insert_hydration_dev","intros","invalid_attribute_name_character","is_client","is_crossorigin","is_empty","is_function","is_promise","is_void","listen","listen_dev","loop","loop_guard","merge_ssr_styles","missing_component","mount_component","noop","not_equal","now","null_to_empty","object_without_properties","onDestroy","onMount","once","outro_and_destroy_block","prevent_default","prop_dev","query_selector_all","raf","resize_observer_border_box","resize_observer_content_box","resize_observer_device_pixel_content_box","run","run_all","safe_not_equal","schedule_update","select_multiple_value","select_option","select_options","select_value","self","setContext","set_attributes","set_current_component","set_custom_element_data","set_custom_element_data_map","set_data","set_data_contenteditable","set_data_contenteditable_dev","set_data_dev","set_data_maybe_contenteditable","set_data_maybe_contenteditable_dev","set_dynamic_element_data","set_input_type","set_input_value","set_now","set_raf","set_store_value","set_style","set_svg_attributes","space","split_css_unit","spread","src_url_equal","srcset_url_equal","start_hydrating","stop_immediate_propagation","stop_propagation","subscribe","svg_element","text","tick","time_ranges_to_array","to_number","toggle_class","transition_in","transition_out","trusted","update_await_block_branch","update_keyed_each","update_slot","update_slot_base","validate_component","validate_dynamic_element","validate_each_keys","validate_slots","validate_store","validate_void_dynamic_element","xlink_attr"]);

package/src/compiler/compile/nodes/Element.js

@@ -694,7 +694,11 @@ export default class Element extends Node {
 									);
 								}
 								// no-redundant-roles
-								if (current_role === get_implicit_role(this.name, attribute_map)) {
+								if (
+									current_role === get_implicit_role(this.name, attribute_map) &&
+									// <ul role="list"> is ok because CSS list-style:none removes the semantics and this is a way to bring them back
+									!['ul', 'ol', 'li'].includes(this.name)
+								) {
 									component.warn(
 										attribute,
 										compiler_warnings.a11y_no_redundant_roles(current_role)

package/src/compiler/compile/nodes/shared/Context.js

@@ -36,6 +36,7 @@ export function unpack_destructuring({
 		if (in_rest_element) {
 			context_rest_properties.set(node.name, node);
 		}
+		component.used_names.add(node.name);
 	} else if (node.type === 'ArrayPattern') {
 		node.elements.forEach((element, i) => {
 			if (!element) {

package/src/compiler/compile/render_dom/wrappers/Element/Attribute.js

@@ -64,6 +64,9 @@ export default class AttributeWrapper extends BaseAttributeWrapper {
 	/** @type {boolean} */
 	is_src;
 
+	/** @type {boolean} */
+	is_srcset;
+
 	/** @type {boolean} */
 	is_select_value_attribute;
 
@@ -120,6 +123,9 @@ export default class AttributeWrapper extends BaseAttributeWrapper {
 		this.is_src =
 			this.name === 'src' &&
 			(!this.parent.node.namespace || this.parent.node.namespace === namespaces.html);
+		this.is_srcset =
+			this.name === 'srcset' &&
+			(!this.parent.node.namespace || this.parent.node.namespace === namespaces.html);
 		this.should_cache = should_cache(this);
 	}
 
@@ -164,6 +170,11 @@ export default class AttributeWrapper extends BaseAttributeWrapper {
 				b`if (!@src_url_equal(${element.var}.src, ${init})) ${method}(${element.var}, "${name}", ${this.last});`
 			);
 			updater = b`${method}(${element.var}, "${name}", ${should_cache ? this.last : value});`;
+		} else if (this.is_srcset) {
+			block.chunks.hydrate.push(
+				b`if (!@srcset_url_equal(${element.var}, ${init})) ${method}(${element.var}, "${name}", ${this.last});`
+			);
+			updater = b`${method}(${element.var}, "${name}", ${should_cache ? this.last : value});`;
 		} else if (property_name) {
 			block.chunks.hydrate.push(b`${element.var}.${property_name} = ${init};`);
 			updater = block.renderer.options.dev
@@ -403,7 +414,7 @@ Object.keys(attribute_lookup).forEach((name) => {
 
 /** @param {AttributeWrapper} attribute */
 function should_cache(attribute) {
-	return attribute.is_src || attribute.node.should_cache();
+	return attribute.is_src || attribute.is_srcset || attribute.node.should_cache();
 }
 const regex_contains_checked_or_group = /checked|group/;
 

package/src/compiler/compile/render_dom/wrappers/Element/index.js

@@ -233,6 +233,14 @@ export default class ElementWrapper extends Wrapper {
 				strip_whitespace,
 				next_sibling
 			);
+
+			// in the case of `parent_block -> child_dynamic_element_block -> child_dynamic_element`
+			// `child_dynamic_element_block.add_intro/outro` is called inside `new ElementWrapper()`
+			// but when `is_local === true` it does not bubble to parent_block
+			// we manually add transitions back to the parent_block (#8233)
+			if (node.intro) block.add_intro(node.intro.is_local);
+			if (node.outro) block.add_outro(node.outro.is_local);
+
 			// the original svelte:element is never used for rendering, because
 			// it gets assigned a child_dynamic_element which is used in all rendering logic.
 			// so doing all of this on the original svelte:element will just cause double
@@ -266,10 +274,10 @@ export default class ElementWrapper extends Wrapper {
 		this.event_handlers = this.node.handlers.map(
 			(event_handler) => new EventHandler(event_handler, this)
 		);
-		if (node.intro || node.outro) {
-			if (node.intro) block.add_intro(node.intro.is_local);
-			if (node.outro) block.add_outro(node.outro.is_local);
-		}
+
+		if (node.intro) block.add_intro(node.intro.is_local);
+		if (node.outro) block.add_outro(node.outro.is_local);
+
 		if (node.animation) {
 			block.add_animation();
 		}

package/src/compiler/compile/render_dom/wrappers/RawMustacheTag.js

@@ -26,7 +26,7 @@ export default class RawMustacheTagWrapper extends Tag {
 	render(block, parent_node, _parent_nodes) {
 		const in_head = is_head(parent_node);
 		const can_use_innerhtml = !in_head && parent_node && !this.prev && !this.next;
-		if (can_use_innerhtml) {
+		if (can_use_innerhtml && !this.renderer.options.hydratable) {
 			/** @param {import('estree').Node} content */
 			const insert = (content) => b`${parent_node}.innerHTML = ${content};`[0];
 			const { init } = this.rename_this_method(block, (content) => insert(content));

package/src/runtime/action/public.d.ts

@@ -1,8 +1,8 @@
 /**
  * Actions can return an object containing the two properties defined in this interface. Both are optional.
  * - update: An action can have a parameter. This method will be called whenever that parameter changes,
- *   immediately after Svelte has applied updates to the markup. `ActionReturn` and `ActionReturn<never>` both
- *   mean that the action accepts no parameters, which makes it illegal to set the `update` method.
+ *   immediately after Svelte has applied updates to the markup. `ActionReturn` and `ActionReturn<undefined>` both
+ *   mean that the action accepts no parameters.
  * - destroy: Method that is called after the element is unmounted
  *
  * Additionally, you can specify which additional attributes and events the action enables on the applied element.
@@ -27,10 +27,10 @@
  * Docs: https://svelte.dev/docs/svelte-action
  */
 export interface ActionReturn<
-	Parameter = never,
+	Parameter = undefined,
 	Attributes extends Record<string, any> = Record<never, any>
 > {
-	update?: [Parameter] extends [never] ? never : (parameter: Parameter) => void;
+	update?: (parameter: Parameter) => void;
 	destroy?: () => void;
 	/**
 	 * ### DO NOT USE THIS
@@ -50,7 +50,7 @@ export interface ActionReturn<
  *   // ...
  * }
  * ```
- * `Action<HTMLDivElement>` and `Action<HTMLDiveElement, never>` both signal that the action accepts no parameters.
+ * `Action<HTMLDivElement>` and `Action<HTMLDiveElement, undefined>` both signal that the action accepts no parameters.
  *
  * You can return an object with methods `update` and `destroy` from the function and type which additional attributes and events it has.
  * See interface `ActionReturn` for more details.
@@ -59,13 +59,11 @@ export interface ActionReturn<
  */
 export interface Action<
 	Element = HTMLElement,
-	Parameter = never,
+	Parameter = undefined,
 	Attributes extends Record<string, any> = Record<never, any>
 > {
 	<Node extends Element>(
-		...args: [Parameter] extends [never]
-			? [node: Node]
-			: undefined extends Parameter
+		...args: undefined extends Parameter
 			? [node: Node, parameter?: Parameter]
 			: [node: Node, parameter: Parameter]
 	): void | ActionReturn<Parameter, Attributes>;
@@ -73,4 +71,3 @@ export interface Action<
 
 // Implementation notes:
 // - undefined extends X instead of X extends undefined makes this work better with both strict and nonstrict mode
-// - [X] extends [never] is needed, X extends never would reduce the whole resulting type to never and not to one of the condition outcomes

package/src/runtime/internal/Component.js

@@ -13,7 +13,9 @@ import {
 	start_hydrating,
 	end_hydrating,
 	get_custom_elements_slots,
-	insert
+	insert,
+	element,
+	attr
 } from './dom.js';
 import { transition_in } from './transitions.js';
 
@@ -157,23 +159,29 @@ export let SvelteElement;
 
 if (typeof HTMLElement === 'function') {
 	SvelteElement = class extends HTMLElement {
-		$$componentCtor;
-		$$slots;
-		$$component;
-		$$connected = false;
-		$$data = {};
-		$$reflecting = false;
-		/** @type {Record<string, CustomElementPropDefinition>} */
-		$$props_definition = {};
-		/** @type {Record<string, Function[]>} */
-		$$listeners = {};
-		/** @type {Map<Function, Function>} */
-		$$listener_unsubscribe_fns = new Map();
+		/** The Svelte component constructor */
+		$$ctor;
+		/** Slots */
+		$$s;
+		/** The Svelte component instance */
+		$$c;
+		/** Whether or not the custom element is connected */
+		$$cn = false;
+		/** Component props data */
+		$$d = {};
+		/** `true` if currently in the process of reflecting component props back to attributes */
+		$$r = false;
+		/** @type {Record<string, CustomElementPropDefinition>} Props definition (name, reflected, type etc) */
+		$$p_d = {};
+		/** @type {Record<string, Function[]>} Event listeners */
+		$$l = {};
+		/** @type {Map<Function, Function>} Event listener unsubscribe functions */
+		$$l_u = new Map();
 
 		constructor($$componentCtor, $$slots, use_shadow_dom) {
 			super();
-			this.$$componentCtor = $$componentCtor;
-			this.$$slots = $$slots;
+			this.$$ctor = $$componentCtor;
+			this.$$s = $$slots;
 			if (use_shadow_dom) {
 				this.attachShadow({ mode: 'open' });
 			}
@@ -183,32 +191,32 @@ if (typeof HTMLElement === 'function') {
 			// We can't determine upfront if the event is a custom event or not, so we have to
 			// listen to both. If someone uses a custom event with the same name as a regular
 			// browser event, this fires twice - we can't avoid that.
-			this.$$listeners[type] = this.$$listeners[type] || [];
-			this.$$listeners[type].push(listener);
-			if (this.$$component) {
-				const unsub = this.$$component.$on(type, listener);
-				this.$$listener_unsubscribe_fns.set(listener, unsub);
+			this.$$l[type] = this.$$l[type] || [];
+			this.$$l[type].push(listener);
+			if (this.$$c) {
+				const unsub = this.$$c.$on(type, listener);
+				this.$$l_u.set(listener, unsub);
 			}
 			super.addEventListener(type, listener, options);
 		}
 
 		removeEventListener(type, listener, options) {
 			super.removeEventListener(type, listener, options);
-			if (this.$$component) {
-				const unsub = this.$$listener_unsubscribe_fns.get(listener);
+			if (this.$$c) {
+				const unsub = this.$$l_u.get(listener);
 				if (unsub) {
 					unsub();
-					this.$$listener_unsubscribe_fns.delete(listener);
+					this.$$l_u.delete(listener);
 				}
 			}
 		}
 
 		async connectedCallback() {
-			this.$$connected = true;
-			if (!this.$$component) {
+			this.$$cn = true;
+			if (!this.$$c) {
 				// We wait one tick to let possible child slot elements be created/mounted
 				await Promise.resolve();
-				if (!this.$$connected) {
+				if (!this.$$cn) {
 					return;
 				}
 				function create_slot(name) {
@@ -216,9 +224,9 @@ if (typeof HTMLElement === 'function') {
 						let node;
 						const obj = {
 							c: function create() {
-								node = document.createElement('slot');
+								node = element('slot');
 								if (name !== 'default') {
-									node.setAttribute('name', name);
+									attr(node, 'name', name);
 								}
 							},
 							/**
@@ -239,74 +247,89 @@ if (typeof HTMLElement === 'function') {
 				}
 				const $$slots = {};
 				const existing_slots = get_custom_elements_slots(this);
-				for (const name of this.$$slots) {
+				for (const name of this.$$s) {
 					if (name in existing_slots) {
 						$$slots[name] = [create_slot(name)];
 					}
 				}
 				for (const attribute of this.attributes) {
 					// this.$$data takes precedence over this.attributes
-					const name = this.$$get_prop_name(attribute.name);
-					if (!(name in this.$$data)) {
-						this.$$data[name] = get_custom_element_value(
-							name,
-							attribute.value,
-							this.$$props_definition,
-							'toProp'
-						);
+					const name = this.$$g_p(attribute.name);
+					if (!(name in this.$$d)) {
+						this.$$d[name] = get_custom_element_value(name, attribute.value, this.$$p_d, 'toProp');
 					}
 				}
-				this.$$component = new this.$$componentCtor({
+				this.$$c = new this.$$ctor({
 					target: this.shadowRoot || this,
 					props: {
-						...this.$$data,
+						...this.$$d,
 						$$slots,
 						$$scope: {
 							ctx: []
 						}
 					}
 				});
-				for (const type in this.$$listeners) {
-					for (const listener of this.$$listeners[type]) {
-						const unsub = this.$$component.$on(type, listener);
-						this.$$listener_unsubscribe_fns.set(listener, unsub);
+
+				// Reflect component props as attributes
+				const reflect_attributes = () => {
+					this.$$r = true;
+					for (const key in this.$$p_d) {
+						this.$$d[key] = this.$$c.$$.ctx[this.$$c.$$.props[key]];
+						if (this.$$p_d[key].reflect) {
+							const attribute_value = get_custom_element_value(
+								key,
+								this.$$d[key],
+								this.$$p_d,
+								'toAttribute'
+							);
+							if (attribute_value == null) {
+								this.removeAttribute(key);
+							} else {
+								this.setAttribute(this.$$p_d[key].attribute || key, attribute_value);
+							}
+						}
+					}
+					this.$$r = false;
+				};
+				this.$$c.$$.after_update.push(reflect_attributes);
+				reflect_attributes(); // once initially because after_update is added too late for first render
+
+				for (const type in this.$$l) {
+					for (const listener of this.$$l[type]) {
+						const unsub = this.$$c.$on(type, listener);
+						this.$$l_u.set(listener, unsub);
 					}
 				}
-				this.$$listeners = {};
+				this.$$l = {};
 			}
 		}
 
 		// We don't need this when working within Svelte code, but for compatibility of people using this outside of Svelte
 		// and setting attributes through setAttribute etc, this is helpful
 		attributeChangedCallback(attr, _oldValue, newValue) {
-			if (this.$$reflecting) return;
-			attr = this.$$get_prop_name(attr);
-			this.$$data[attr] = get_custom_element_value(
-				attr,
-				newValue,
-				this.$$props_definition,
-				'toProp'
-			);
-			this.$$component?.$set({ [attr]: this.$$data[attr] });
+			if (this.$$r) return;
+			attr = this.$$g_p(attr);
+			this.$$d[attr] = get_custom_element_value(attr, newValue, this.$$p_d, 'toProp');
+			this.$$c?.$set({ [attr]: this.$$d[attr] });
 		}
 
 		disconnectedCallback() {
-			this.$$connected = false;
+			this.$$cn = false;
 			// In a microtask, because this could be a move within the DOM
 			Promise.resolve().then(() => {
-				if (!this.$$connected) {
-					this.$$component.$destroy();
-					this.$$component = undefined;
+				if (!this.$$cn) {
+					this.$$c.$destroy();
+					this.$$c = undefined;
 				}
 			});
 		}
 
-		$$get_prop_name(attribute_name) {
+		$$g_p(attribute_name) {
 			return (
-				Object.keys(this.$$props_definition).find(
+				Object.keys(this.$$p_d).find(
 					(key) =>
-						this.$$props_definition[key].attribute === attribute_name ||
-						(!this.$$props_definition[key].attribute && key.toLowerCase() === attribute_name)
+						this.$$p_d[key].attribute === attribute_name ||
+						(!this.$$p_d[key].attribute && key.toLowerCase() === attribute_name)
 				) || attribute_name
 			);
 		}
@@ -371,7 +394,7 @@ export function create_custom_element(
 	const Class = class extends SvelteElement {
 		constructor() {
 			super(Component, slots, use_shadow_dom);
-			this.$$props_definition = props_definition;
+			this.$$p_d = props_definition;
 		}
 		static get observedAttributes() {
 			return Object.keys(props_definition).map((key) =>
@@ -382,36 +405,19 @@ export function create_custom_element(
 	Object.keys(props_definition).forEach((prop) => {
 		Object.defineProperty(Class.prototype, prop, {
 			get() {
-				return this.$$component && prop in this.$$component
-					? this.$$component[prop]
-					: this.$$data[prop];
+				return this.$$c && prop in this.$$c ? this.$$c[prop] : this.$$d[prop];
 			},
 			set(value) {
 				value = get_custom_element_value(prop, value, props_definition);
-				this.$$data[prop] = value;
-				this.$$component?.$set({ [prop]: value });
-				if (props_definition[prop].reflect) {
-					this.$$reflecting = true;
-					const attribute_value = get_custom_element_value(
-						prop,
-						value,
-						props_definition,
-						'toAttribute'
-					);
-					if (attribute_value == null) {
-						this.removeAttribute(prop);
-					} else {
-						this.setAttribute(props_definition[prop].attribute || prop, attribute_value);
-					}
-					this.$$reflecting = false;
-				}
+				this.$$d[prop] = value;
+				this.$$c?.$set({ [prop]: value });
 			}
 		});
 	});
 	accessors.forEach((accessor) => {
 		Object.defineProperty(Class.prototype, accessor, {
 			get() {
-				return this.$$component?.[accessor];
+				return this.$$c?.[accessor];
 			}
 		});
 	});

package/src/runtime/internal/public.d.ts

@@ -80,14 +80,12 @@ export interface DispatchOptions {
 export interface EventDispatcher<EventMap extends Record<string, any>> {
 	// Implementation notes:
 	// - undefined extends X instead of X extends undefined makes this work better with both strict and nonstrict mode
-	// - [X] extends [never] is needed, X extends never would reduce the whole resulting type to never and not to one of the condition outcomes
+	// - | null | undefined is added for convenience, as they are equivalent for the custom event constructor (both result in a null detail)
 	<Type extends keyof EventMap>(
-		...args: [EventMap[Type]] extends [never]
-			? [type: Type, parameter?: null | undefined, options?: DispatchOptions]
-			: null extends EventMap[Type]
-			? [type: Type, parameter?: EventMap[Type], options?: DispatchOptions]
+		...args: null extends EventMap[Type]
+			? [type: Type, parameter?: EventMap[Type] | null | undefined, options?: DispatchOptions]
 			: undefined extends EventMap[Type]
-			? [type: Type, parameter?: EventMap[Type], options?: DispatchOptions]
+			? [type: Type, parameter?: EventMap[Type] | null | undefined, options?: DispatchOptions]
 			: [type: Type, parameter: EventMap[Type], options?: DispatchOptions]
 	): boolean;
 }

package/src/runtime/internal/utils.js

@@ -68,15 +68,50 @@ export function safe_not_equal(a, b) {
 
 let src_url_equal_anchor;
 
-/** @returns {boolean} */
+/**
+ * @param {string} element_src
+ * @param {string} url
+ * @returns {boolean}
+ */
 export function src_url_equal(element_src, url) {
+	if (element_src === url) return true;
 	if (!src_url_equal_anchor) {
 		src_url_equal_anchor = document.createElement('a');
 	}
+	// This is actually faster than doing URL(..).href
 	src_url_equal_anchor.href = url;
 	return element_src === src_url_equal_anchor.href;
 }
 
+/** @param {string} srcset */
+function split_srcset(srcset) {
+	return srcset.split(',').map((src) => src.trim().split(' ').filter(Boolean));
+}
+
+/**
+ * @param {HTMLSourceElement | HTMLImageElement} element_srcset
+ * @param {string} srcset
+ * @returns {boolean}
+ */
+export function srcset_url_equal(element_srcset, srcset) {
+	const element_urls = split_srcset(element_srcset.srcset);
+	const urls = split_srcset(srcset);
+
+	return (
+		urls.length === element_urls.length &&
+		urls.every(
+			([url, width], i) =>
+				width === element_urls[i][1] &&
+				// We need to test both ways because Vite will create an a full URL with
+				// `new URL(asset, import.meta.url).href` for the client when `base: './'`, and the
+				// relative URLs inside srcset are not automatically resolved to absolute URLs by
+				// browsers (in contrast to img.src). This means both SSR and DOM code could
+				// contain relative or absolute URLs.
+				(src_url_equal(element_urls[i][0], url) || src_url_equal(url, element_urls[i][0]))
+		)
+	);
+}
+
 /** @returns {boolean} */
 export function not_equal(a, b) {
 	return a != a ? b == b : a !== b;

package/src/shared/version.js

@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '4.0.0';
+export const VERSION = '4.0.2';
 export const PUBLIC_VERSION = '4';