diff --git a/.changeset/olive-pandas-trade.md b/.changeset/olive-pandas-trade.md
new file mode 100644
index 0000000000..bef36a3075
--- /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/packages/svelte/src/compiler/phases/1-parse/index.js b/packages/svelte/src/compiler/phases/1-parse/index.js
index 6cc5b58aa6..5c72d2003f 100644
--- a/packages/svelte/src/compiler/phases/1-parse/index.js
+++ b/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);
diff --git a/packages/svelte/src/compiler/phases/1-parse/read/options.js b/packages/svelte/src/compiler/phases/1-parse/read/options.js
index a36e101468..51c682ade7 100644
--- a/packages/svelte/src/compiler/phases/1-parse/read/options.js
+++ b/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;
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 0000000000..6502a08290
--- /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 = '
name: world
+ ` + ); + 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 0000000000..ddd2d4b61a --- /dev/null +++ b/packages/svelte/tests/runtime-browser/custom-elements-samples/extend-with-ts/main.svelte @@ -0,0 +1,14 @@ +name: {name}
\ No newline at end of file