From fbb6444fd89573d01cb4afb5881d0d52d08853a9 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Mon, 26 May 2025 12:17:43 +0200
Subject: [PATCH 1/4] fix: allow using typescript in `customElement.extend`
 option (#16001)

Closes #15372

---------

Co-authored-by: Dominik G. <dominik.goepel@gmx.de>
---
 .changeset/olive-pandas-trade.md              |  5 +++++
 .../docs/07-misc/04-custom-elements.md        |  2 ++
 packages/svelte/src/compiler/index.js         |  5 +++++
 .../extend-with-ts/_config.js                 | 19 +++++++++++++++++++
 .../extend-with-ts/main.svelte                | 14 ++++++++++++++
 5 files changed, 45 insertions(+)
 create mode 100644 .changeset/olive-pandas-trade.md
 create mode 100644 packages/svelte/tests/runtime-browser/custom-elements-samples/extend-with-ts/_config.js
 create mode 100644 packages/svelte/tests/runtime-browser/custom-elements-samples/extend-with-ts/main.svelte

diff --git a/.changeset/olive-pandas-trade.md b/.changeset/olive-pandas-trade.md
new file mode 100644
index 000000000000..bef36a30758b
--- /dev/null
+++ b/.changeset/olive-pandas-trade.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: allow using typescript in `customElement.extend` option
diff --git a/documentation/docs/07-misc/04-custom-elements.md b/documentation/docs/07-misc/04-custom-elements.md
index a8e0c8176316..7e6a17b947c9 100644
--- a/documentation/docs/07-misc/04-custom-elements.md
+++ b/documentation/docs/07-misc/04-custom-elements.md
@@ -114,6 +114,8 @@ When constructing a custom element, you can tailor several aspects by defining `
 ...
 ```
 
+> [!NOTE] While Typescript is supported in the `extend` function, it is subject to limitations: you need to set `lang="ts"` on one of the scripts AND you can only use [erasable syntax](https://www.typescriptlang.org/tsconfig/#erasableSyntaxOnly) in it. They are not processed by script preprocessors.
+
 ## Caveats and limitations
 
 Custom elements can be a useful way to package components for consumption in a non-Svelte app, as they will work with vanilla HTML and JavaScript as well as [most frameworks](https://custom-elements-everywhere.com/). There are, however, some important differences to be aware of:
diff --git a/packages/svelte/src/compiler/index.js b/packages/svelte/src/compiler/index.js
index 42427dd9c407..756a88a824b6 100644
--- a/packages/svelte/src/compiler/index.js
+++ b/packages/svelte/src/compiler/index.js
@@ -43,6 +43,11 @@ export function compile(source, options) {
 			instance: parsed.instance && remove_typescript_nodes(parsed.instance),
 			module: parsed.module && remove_typescript_nodes(parsed.module)
 		};
+		if (combined_options.customElementOptions?.extend) {
+			combined_options.customElementOptions.extend = remove_typescript_nodes(
+				combined_options.customElementOptions?.extend
+			);
+		}
 	}
 
 	const analysis = analyze_component(parsed, source, combined_options);
diff --git a/packages/svelte/tests/runtime-browser/custom-elements-samples/extend-with-ts/_config.js b/packages/svelte/tests/runtime-browser/custom-elements-samples/extend-with-ts/_config.js
new file mode 100644
index 000000000000..6502a08290c5
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/custom-elements-samples/extend-with-ts/_config.js
@@ -0,0 +1,19 @@
+import { test } from '../../assert';
+const tick = () => Promise.resolve();
+
+export default test({
+	async test({ assert, target }) {
+		target.innerHTML = '<custom-element name="world"></custom-element>';
+		await tick();
+		/** @type {any} */
+		const el = target.querySelector('custom-element');
+
+		assert.htmlEqual(
+			el.shadowRoot.innerHTML,
+			`
+		<p>name: world</p>
+	`
+		);
+		assert.equal(el.test, `test`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-browser/custom-elements-samples/extend-with-ts/main.svelte b/packages/svelte/tests/runtime-browser/custom-elements-samples/extend-with-ts/main.svelte
new file mode 100644
index 000000000000..ddd2d4b61ac6
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/custom-elements-samples/extend-with-ts/main.svelte
@@ -0,0 +1,14 @@
+<svelte:options customElement={{
+	tag: "custom-element",
+	extend: (customClass)=>{
+		return class extends customClass{
+			public test: string = "test";
+		}
+	},
+}}/>
+
+<script lang="ts">
+	let { name } = $props();
+</script>
+
+<p>name: {name}</p>
\ No newline at end of file

From 94a2bca0e383b25ed436907b8884eb8d149d5830 Mon Sep 17 00:00:00 2001
From: 7nik <kfiiranet@gmail.com>
Date: Mon, 26 May 2025 16:56:32 +0300
Subject: [PATCH 2/4] fix: cleanup event handlers on media elements (#16005)

Co-authored-by: 7nik <kifiranet@gmail.com>
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---
 .changeset/thin-dolls-cover.md                |  5 +++++
 .../internal/client/dom/elements/events.js    | 11 ++++++++--
 .../event-media-element-cleanup/_config.js    | 20 +++++++++++++++++++
 .../event-media-element-cleanup/main.svelte   |  9 +++++++++
 4 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/thin-dolls-cover.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/event-media-element-cleanup/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/event-media-element-cleanup/main.svelte

diff --git a/.changeset/thin-dolls-cover.md b/.changeset/thin-dolls-cover.md
new file mode 100644
index 000000000000..e9f09342a5fe
--- /dev/null
+++ b/.changeset/thin-dolls-cover.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: cleanup event handlers on media elements
diff --git a/packages/svelte/src/internal/client/dom/elements/events.js b/packages/svelte/src/internal/client/dom/elements/events.js
index c2b7fc7d838d..fa3bf0b0210a 100644
--- a/packages/svelte/src/internal/client/dom/elements/events.js
+++ b/packages/svelte/src/internal/client/dom/elements/events.js
@@ -112,8 +112,15 @@ export function event(event_name, dom, handler, capture, passive) {
 	var options = { capture, passive };
 	var target_handler = create_event(event_name, dom, handler, options);
 
-	// @ts-ignore
-	if (dom === document.body || dom === window || dom === document) {
+	if (
+		dom === document.body ||
+		// @ts-ignore
+		dom === window ||
+		// @ts-ignore
+		dom === document ||
+		// Firefox has quirky behavior, it can happen that we still get "canplay" events when the element is already removed
+		dom instanceof HTMLMediaElement
+	) {
 		teardown(() => {
 			dom.removeEventListener(event_name, target_handler, options);
 		});
diff --git a/packages/svelte/tests/runtime-runes/samples/event-media-element-cleanup/_config.js b/packages/svelte/tests/runtime-runes/samples/event-media-element-cleanup/_config.js
new file mode 100644
index 000000000000..775afcab8913
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-media-element-cleanup/_config.js
@@ -0,0 +1,20 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+import { expect, vi } from 'vitest';
+
+const handler = vi.fn();
+
+export default test({
+	props: {
+		handler
+	},
+	async test({ target }) {
+		const button = target.querySelector('button');
+		const video = target.querySelector('video');
+
+		button?.click();
+		flushSync();
+		video?.dispatchEvent(new Event('someevent'));
+		expect(handler).not.toHaveBeenCalled();
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/event-media-element-cleanup/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-media-element-cleanup/main.svelte
new file mode 100644
index 000000000000..6a1f9b6b4b8c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-media-element-cleanup/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	const { handler } = $props();
+	let show = $state(true);
+</script>
+
+<button onclick={() => show = false}>show/hide</button>
+{#if show}
+	<video onsomeevent={handler}></video>
+{/if}

From f9d0df60417b60d72fbb73ff671b4c2918b15c17 Mon Sep 17 00:00:00 2001
From: ComputerGuy <63362464+Ocean-OS@users.noreply.github.com>
Date: Mon, 26 May 2025 15:54:19 -0700
Subject: [PATCH 3/4] docs: add link to lvalue info on `bind:` docs (#16008)

* add link to lvalue

* use more user-friendly info
---
 documentation/docs/03-template-syntax/12-bind.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/documentation/docs/03-template-syntax/12-bind.md b/documentation/docs/03-template-syntax/12-bind.md
index a59a2d8321e8..de57815687dc 100644
--- a/documentation/docs/03-template-syntax/12-bind.md
+++ b/documentation/docs/03-template-syntax/12-bind.md
@@ -4,7 +4,7 @@ title: bind:
 
 Data ordinarily flows down, from parent to child. The `bind:` directive allows data to flow the other way, from child to parent.
 
-The general syntax is `bind:property={expression}`, where `expression` is an _lvalue_ (i.e. a variable or an object property). When the expression is an identifier with the same name as the property, we can omit the expression — in other words these are equivalent:
+The general syntax is `bind:property={expression}`, where `expression` is an [_lvalue_](https://press.rebus.community/programmingfundamentals/chapter/lvalue-and-rvalue/) (i.e. a variable or an object property). When the expression is an identifier with the same name as the property, we can omit the expression — in other words these are equivalent:
 
 <!-- prettier-ignore -->
 ```svelte

From 6e2ba643c5526ae74f7c1c61a5883d1cc8848d0a Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 26 May 2025 18:56:25 -0400
Subject: [PATCH 4/4] Version Packages (#16002)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .changeset/olive-pandas-trade.md | 5 -----
 .changeset/thin-dolls-cover.md   | 5 -----
 packages/svelte/CHANGELOG.md     | 8 ++++++++
 packages/svelte/package.json     | 2 +-
 packages/svelte/src/version.js   | 2 +-
 5 files changed, 10 insertions(+), 12 deletions(-)
 delete mode 100644 .changeset/olive-pandas-trade.md
 delete mode 100644 .changeset/thin-dolls-cover.md

diff --git a/.changeset/olive-pandas-trade.md b/.changeset/olive-pandas-trade.md
deleted file mode 100644
index bef36a30758b..000000000000
--- a/.changeset/olive-pandas-trade.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: allow using typescript in `customElement.extend` option
diff --git a/.changeset/thin-dolls-cover.md b/.changeset/thin-dolls-cover.md
deleted file mode 100644
index e9f09342a5fe..000000000000
--- a/.changeset/thin-dolls-cover.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: cleanup event handlers on media elements
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 62b1db37596c..dae7f68e859f 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.33.3
+
+### Patch Changes
+
+- fix: allow using typescript in `customElement.extend` option ([#16001](https://github.com/sveltejs/svelte/pull/16001))
+
+- fix: cleanup event handlers on media elements ([#16005](https://github.com/sveltejs/svelte/pull/16005))
+
 ## 5.33.2
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 65af4a543f2a..3f625f1590ad 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.33.2",
+  "version": "5.33.3",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 2184f10a6c92..fb2f3752732c 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -4,5 +4,5 @@
  * The current version, as set in package.json.
  * @type {string}
  */
-export const VERSION = '5.33.2';
+export const VERSION = '5.33.3';
 export const PUBLIC_VERSION = '5';

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://github.com/sveltejs/svelte/compare/sveltejs:add0c6a...sveltejs:6e2ba64.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://github.com/sveltejs/svelte/compare/sveltejs:add0c6a...sveltejs:6e2ba64.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://github.com/sveltejs/svelte/compare/sveltejs:add0c6a...sveltejs:6e2ba64.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://github.com/sveltejs/svelte/compare/sveltejs:add0c6a...sveltejs:6e2ba64.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>