fix: allow using typescript in customElement.extend option

Author: paoloricciuti

.changeset/olive-pandas-trade.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: allow using typescript in `customElement.extend` option

packages/svelte/src/compiler/phases/1-parse/index.js

@@ -143,7 +143,7 @@ export class Parser {
 		if (options_index !== -1) {
 			const options = /** @type {AST.SvelteOptionsRaw} */ (this.root.fragment.nodes[options_index]);
 			this.root.fragment.nodes.splice(options_index, 1);
-			this.root.options = read_options(options);
+			this.root.options = read_options(options, this.ts);
 
 			disallow_children(options);
 

packages/svelte/src/compiler/phases/1-parse/read/options.js

@@ -2,12 +2,14 @@
 /** @import { AST } from '#compiler' */
 import { NAMESPACE_MATHML, NAMESPACE_SVG } from '../../../../constants.js';
 import * as e from '../../../errors.js';
+import { remove_typescript_nodes } from '../remove_typescript_nodes.js';
 
 /**
  * @param {AST.SvelteOptionsRaw} node
+ * @param {boolean} ts
  * @returns {AST.Root['options']}
  */
-export default function read_options(node) {
+export default function read_options(node, ts) {
 	/** @type {AST.SvelteOptions} */
 	const component_options = {
 		start: node.start,
@@ -142,7 +144,7 @@ export default function read_options(node) {
 
 				const extend = properties.find(([name]) => name === 'extend')?.[1];
 				if (extend) {
-					ce.extend = extend;
+					ce.extend = ts ? remove_typescript_nodes(extend) : extend;
 				}
 
 				component_options.customElement = ce;

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`);
+	}
+});

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>