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 = ''; + await tick(); + /** @type {any} */ + const el = target.querySelector('custom-element'); + + assert.htmlEqual( + el.shadowRoot.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 @@ +{ + return class extends customClass{ + public test: string = "test"; + } + }, +}}/> + + + +

name: {name}

\ No newline at end of file