From 837b61fa57cb80b0e4c531e5d7c61d0000707ce7 Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Thu, 26 Sep 2024 11:36:42 +0200 Subject: [PATCH] breaking(svelte5): only generate function component shape in runes mode (#2517) When a component is in runes mode and not using slots or events, adjust the output to only create the function type that mimics the underlying real shape of components in Svelte 5. This is a breaking change because previously the type was enhanced such that it also had the legacy class shape. As a result, users now may need to switch to `typeof Component` when using the component inside types. Sadly, due to a combination of requirements and TypeScript limitations, we need to always create both a legacy class component and function component type. - Constraints: Need to support Svelte 4 class component types, therefore we need to use __sveltets_2_ensureComponent to transform function components to classes - Limitations: TypeScript is not able to preserve generics during said transformation (i.e. there's no way to express keeping the generic etc) TODO Svelte 6/7: Switch this around and not use new Component in svelte2tsx anymore, which means we can remove the legacy class component. We need something like _ensureFnComponent then. --- .../features/SemanticTokensProvider.ts | 48 +++++++---- .../features/SemanticTokensProvider.test.ts | 7 -- .../fixtures/bindings/RunesGeneric.svelte | 7 ++ .../fixtures/bindings/expected_svelte_5.json | 84 +++++++++++++++++-- .../fixtures/bindings/expectedv2.json | 50 +++++++++-- .../fixtures/bindings/input.svelte | 7 +- .../src/svelte2tsx/addComponentExport.ts | 59 +++++++++---- packages/svelte2tsx/src/svelte2tsx/index.ts | 2 +- .../src/svelte2tsx/nodes/ComponentEvents.ts | 4 + .../src/svelte2tsx/nodes/ExportedNames.ts | 2 +- packages/svelte2tsx/svelte-shims-v4.d.ts | 38 ++++++++- .../expected/TestRunes.svelte.d.ts | 18 +--- .../expected/TestRunes.svelte.d.ts | 8 +- .../expected/TestRunes.svelte.d.ts | 18 +--- packages/svelte2tsx/test/helpers.ts | 5 +- .../expectedv2.ts | 8 +- .../runes-best-effort-types.v5/expectedv2.ts | 5 +- .../samples/runes-bindable.v5/expectedv2.ts | 5 +- .../expectedv2.ts | 5 +- .../runes-only-export.v5/expectedv2.ts | 5 +- .../svelte2tsx/samples/runes.v5/expectedv2.ts | 5 +- .../expectedv2.ts | 5 +- .../expectedv2.ts | 5 +- .../expectedv2.ts | 5 +- .../ts-runes-bindable.v5/expectedv2.ts | 5 +- .../ts-runes-generics.v5/expectedv2.ts | 4 +- .../ts-runes-with-slot.v5/expectedv2.ts | 4 +- .../samples/ts-runes.v5/expectedv2.ts | 5 +- .../expectedv2.ts | 5 +- .../expectedv2.ts | 5 +- 30 files changed, 285 insertions(+), 148 deletions(-) create mode 100644 packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/bindings/RunesGeneric.svelte diff --git a/packages/language-server/src/plugins/typescript/features/SemanticTokensProvider.ts b/packages/language-server/src/plugins/typescript/features/SemanticTokensProvider.ts index 9af4f4239..2103371f2 100644 --- a/packages/language-server/src/plugins/typescript/features/SemanticTokensProvider.ts +++ b/packages/language-server/src/plugins/typescript/features/SemanticTokensProvider.ts @@ -66,29 +66,23 @@ export class SemanticTokensProviderImpl implements SemanticTokensProvider { continue; } - const originalPosition = this.mapToOrigin( + const original = this.map( textDocument, tsDoc, generatedOffset, generatedLength, - encodedClassification + encodedClassification, + classificationType ); - if (!originalPosition) { - continue; - } - - const [line, character, length] = originalPosition; // remove identifiers whose start and end mapped to the same location, // like the svelte2tsx inserted render function, // or reversed like Component.$on - if (length <= 0) { + if (!original || original[2] <= 0) { continue; } - const modifier = this.getTokenModifierFromClassification(encodedClassification); - - data.push([line, character, length, classificationType, modifier]); + data.push(original); } const sorted = data.sort((a, b) => { @@ -103,17 +97,20 @@ export class SemanticTokensProviderImpl implements SemanticTokensProvider { return builder.build(); } - private mapToOrigin( + private map( document: Document, snapshot: SvelteDocumentSnapshot, generatedOffset: number, generatedLength: number, - token: number - ): [line: number, character: number, length: number, start: number] | undefined { + encodedClassification: number, + classificationType: number + ): + | [line: number, character: number, length: number, token: number, modifier: number] + | undefined { const text = snapshot.getFullText(); if ( isInGeneratedCode(text, generatedOffset, generatedOffset + generatedLength) || - (token === 2817 /* top level function */ && + (encodedClassification === 2817 /* top level function */ && text.substring(generatedOffset, generatedOffset + generatedLength) === 'render') ) { return; @@ -132,7 +129,26 @@ export class SemanticTokensProviderImpl implements SemanticTokensProvider { const startOffset = document.offsetAt(startPosition); const endOffset = document.offsetAt(endPosition); - return [startPosition.line, startPosition.character, endOffset - startOffset, startOffset]; + // Ensure components in the template get no semantic highlighting + if ( + (classificationType === 0 || + classificationType === 5 || + classificationType === 7 || + classificationType === 10) && + snapshot.svelteNodeAt(startOffset)?.type === 'InlineComponent' && + (document.getText().charCodeAt(startOffset - 1) === /* < */ 60 || + document.getText().charCodeAt(startOffset - 1) === /* / */ 47) + ) { + return; + } + + return [ + startPosition.line, + startPosition.character, + endOffset - startOffset, + classificationType, + this.getTokenModifierFromClassification(encodedClassification) + ]; } /** diff --git a/packages/language-server/test/plugins/typescript/features/SemanticTokensProvider.test.ts b/packages/language-server/test/plugins/typescript/features/SemanticTokensProvider.test.ts index 7acb27099..a942f32f8 100644 --- a/packages/language-server/test/plugins/typescript/features/SemanticTokensProvider.test.ts +++ b/packages/language-server/test/plugins/typescript/features/SemanticTokensProvider.test.ts @@ -191,13 +191,6 @@ describe('SemanticTokensProvider', function () { type: TokenType.variable, modifiers: [TokenModifier.declaration, TokenModifier.local, TokenModifier.readonly] }, - { - line: 12, - character: 5, - length: 'Imported'.length, - type: isSvelte5Plus ? TokenType.type : TokenType.class, - modifiers: isSvelte5Plus ? [TokenModifier.readonly] : [] - }, { line: 12, character: 23, diff --git a/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/bindings/RunesGeneric.svelte b/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/bindings/RunesGeneric.svelte new file mode 100644 index 000000000..0b9ff0c17 --- /dev/null +++ b/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/bindings/RunesGeneric.svelte @@ -0,0 +1,7 @@ + diff --git a/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/bindings/expected_svelte_5.json b/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/bindings/expected_svelte_5.json index 72c8185db..8aca1d067 100644 --- a/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/bindings/expected_svelte_5.json +++ b/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/bindings/expected_svelte_5.json @@ -5,11 +5,11 @@ "range": { "end": { "character": 20, - "line": 25 + "line": 26 }, "start": { "character": 7, - "line": 25 + "line": 26 } }, "severity": 1, @@ -22,11 +22,11 @@ "range": { "end": { "character": 21, - "line": 26 + "line": 27 }, "start": { "character": 12, - "line": 26 + "line": 27 } }, "severity": 1, @@ -39,11 +39,11 @@ "range": { "end": { "character": 21, - "line": 26 + "line": 27 }, "start": { "character": 7, - "line": 26 + "line": 27 } }, "severity": 1, @@ -56,11 +56,79 @@ "range": { "end": { "character": 17, - "line": 27 + "line": 28 }, "start": { "character": 8, - "line": 27 + "line": 28 + } + }, + "severity": 1, + "source": "ts", + "tags": [] + }, + { + "code": 2322, + "message": "Cannot use 'bind:' with this property. It is declared as non-bindable inside the component.\nTo mark a property as bindable: 'let { readonly = $bindable() } = $props()'", + "range": { + "end": { + "character": 27, + "line": 30 + }, + "start": { + "character": 14, + "line": 30 + } + }, + "severity": 1, + "source": "ts", + "tags": [] + }, + { + "code": 2353, + "message": "Object literal may only specify known properties, and 'only_bind' does not exist in type '$$ComponentProps'.", + "range": { + "end": { + "character": 28, + "line": 31 + }, + "start": { + "character": 19, + "line": 31 + } + }, + "severity": 1, + "source": "ts", + "tags": [] + }, + { + "code": 2322, + "message": "Cannot use 'bind:' with this property. It is declared as non-bindable inside the component.\nTo mark a property as bindable: 'let { only_bind = $bindable() } = $props()'", + "range": { + "end": { + "character": 28, + "line": 31 + }, + "start": { + "character": 14, + "line": 31 + } + }, + "severity": 1, + "source": "ts", + "tags": [] + }, + { + "code": 2353, + "message": "Object literal may only specify known properties, and 'only_bind' does not exist in type '$$ComponentProps'.", + "range": { + "end": { + "character": 24, + "line": 32 + }, + "start": { + "character": 15, + "line": 32 } }, "severity": 1, diff --git a/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/bindings/expectedv2.json b/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/bindings/expectedv2.json index e441ca7e2..da73688bf 100644 --- a/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/bindings/expectedv2.json +++ b/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/bindings/expectedv2.json @@ -1,15 +1,32 @@ [ + { + "code": 2344, + "message": "Type 'typeof Runes__SvelteComponent_' does not satisfy the constraint '(...args: any) => any'.\n Type 'typeof Runes__SvelteComponent_' provides no match for the signature '(...args: any): any'.", + "range": { + "end": { + "character": 41, + "line": 12 + }, + "start": { + "character": 29, + "line": 12 + } + }, + "severity": 1, + "source": "ts", + "tags": [] + }, { "code": 2353, "message": "Object literal may only specify known properties, and 'can_bind' does not exist in type '{ only_bind?: (() => boolean) | undefined; }'.", "range": { "end": { "character": 20, - "line": 20 + "line": 21 }, "start": { "character": 12, - "line": 20 + "line": 21 } }, "severity": 1, @@ -22,11 +39,11 @@ "range": { "end": { "character": 16, - "line": 21 + "line": 22 }, "start": { "character": 8, - "line": 21 + "line": 22 } }, "severity": 1, @@ -39,11 +56,11 @@ "range": { "end": { "character": 16, - "line": 22 + "line": 23 }, "start": { "character": 8, - "line": 22 + "line": 23 } }, "severity": 1, @@ -56,11 +73,28 @@ "range": { "end": { "character": 20, - "line": 25 + "line": 26 }, "start": { "character": 12, - "line": 25 + "line": 26 + } + }, + "severity": 1, + "source": "ts", + "tags": [] + }, + { + "code": 2353, + "message": "Object literal may only specify known properties, and 'readonly' does not exist in type '{ only_bind?: (() => boolean) | undefined; }'.", + "range": { + "end": { + "character": 27, + "line": 30 + }, + "start": { + "character": 19, + "line": 30 } }, "severity": 1, diff --git a/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/bindings/input.svelte b/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/bindings/input.svelte index 55de44f2d..dd51d79f5 100644 --- a/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/bindings/input.svelte +++ b/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/bindings/input.svelte @@ -1,6 +1,7 @@ @@ -26,3 +27,7 @@ + + + + diff --git a/packages/svelte2tsx/src/svelte2tsx/addComponentExport.ts b/packages/svelte2tsx/src/svelte2tsx/addComponentExport.ts index 4cbf2b980..fc9550b77 100644 --- a/packages/svelte2tsx/src/svelte2tsx/addComponentExport.ts +++ b/packages/svelte2tsx/src/svelte2tsx/addComponentExport.ts @@ -5,15 +5,16 @@ import { ExportedNames } from './nodes/ExportedNames'; import { ComponentDocumentation } from './nodes/ComponentDocumentation'; import { Generics } from './nodes/Generics'; import { surroundWithIgnoreComments } from '../utils/ignore'; +import { ComponentEvents } from './nodes/ComponentEvents'; export interface AddComponentExportPara { str: MagicString; canHaveAnyProp: boolean; /** - * If true, not fallback to `any` + * If strictEvents true, not fallback to `any` * -> all unknown events will throw a type error * */ - strictEvents: boolean; + events: ComponentEvents; isTsFile: boolean; usesAccessors: boolean; exportedNames: ExportedNames; @@ -41,7 +42,7 @@ export function addComponentExport(params: AddComponentExportPara) { } function addGenericsComponentExport({ - strictEvents, + events, canHaveAnyProp, exportedNames, componentDocumentation, @@ -70,7 +71,7 @@ class __sveltets_Render${genericsDef} { return ${props(true, canHaveAnyProp, exportedNames, `render${genericsRef}()`)}.props; } events() { - return ${events(strictEvents, `render${genericsRef}()`)}.events; + return ${_events(events.hasStrictEvents() || exportedNames.usesRunes(), `render${genericsRef}()`)}.events; } slots() { return render${genericsRef}().slots; @@ -94,15 +95,29 @@ ${ if (isSvelte5) { // Don't add props/events/slots type exports in dts mode for now, maybe someone asks for it to be back, // but it's safer to not do it for now to have more flexibility in the future. + let eventsSlotsType = []; + if (events.hasEvents() || !exportedNames.usesRunes()) { + eventsSlotsType.push(`$$events?: ${returnType('events')}`); + } + if (usesSlots) { + eventsSlotsType.push(`$$slots?: ${returnType('slots')}`); + eventsSlotsType.push(`children?: any`); + } const propsType = !canHaveAnyProp && exportedNames.hasNoProps() - ? `{$$events?: ${returnType('events')}${usesSlots ? `, $$slots?: ${returnType('slots')}, children?: any` : ''}}` - : `${returnType('props')} & {$$events?: ${returnType('events')}${usesSlots ? `, $$slots?: ${returnType('slots')}, children?: any` : ''}}`; + ? `{${eventsSlotsType.join(', ')}}` + : `${returnType('props')} & {${eventsSlotsType.join(', ')}}`; + const bindingsType = `ReturnType<__sveltets_Render${generics.toReferencesAnyString()}['bindings']>`; + + // Sadly, due to a combination of requirements and TypeScript limitations, we need to always create both a legacy class component and function component type. + // - Constraints: Need to support Svelte 4 class component types, therefore we need to use __sveltets_2_ensureComponent to transform function components to classes + // - Limitations: TypeScript is not able to preserve generics during said transformation (i.e. there's no way to express keeping the generic etc) + // TODO Svelte 6/7: Switch this around and not use new Component in svelte2tsx anymore, which means we can remove the legacy class component. We need something like _ensureFnComponent then. statement += `\ninterface $$IsomorphicComponent {\n` + ` new ${genericsDef}(options: import('svelte').ComponentConstructorOptions<${returnType('props') + (usesSlots ? '& {children?: any}' : '')}>): import('svelte').SvelteComponent<${returnType('props')}, ${returnType('events')}, ${returnType('slots')}> & { $$bindings?: ${returnType('bindings')} } & ${returnType('exports')};\n` + ` ${genericsDef}(internal: unknown, props: ${propsType}): ${returnType('exports')};\n` + - ` z_$$bindings?: ReturnType<__sveltets_Render${generics.toReferencesAnyString()}['bindings']>;\n` + + ` z_$$bindings?: ${bindingsType};\n` + `}\n` + `${doc}const ${className || '$$Component'}: $$IsomorphicComponent = null as any;\n` + surroundWithIgnoreComments( @@ -137,7 +152,7 @@ ${ } function addSimpleComponentExport({ - strictEvents, + events, isTsFile, canHaveAnyProp, exportedNames, @@ -154,7 +169,7 @@ function addSimpleComponentExport({ isTsFile, canHaveAnyProp, exportedNames, - events(strictEvents, 'render()') + _events(events.hasStrictEvents(), 'render()') ); const doc = componentDocumentation.getFormatted(); @@ -162,7 +177,11 @@ function addSimpleComponentExport({ let statement: string; if (mode === 'dts') { - if (isSvelte5) { + if (isSvelte5 && exportedNames.usesRunes() && !usesSlots && !events.hasEvents()) { + statement = + `\n${doc}const ${className || '$$Component'} = __sveltets_2_fn_component(render());\n` + + `export default ${className || '$$Component'};`; + } else if (isSvelte5) { // Inline definitions from Svelte shims; else dts files will reference the globals which will be unresolved statement = `\ninterface $$__sveltets_2_IsomorphicComponent = any, Events extends Record = any, Slots extends Record = any, Exports = {}, Bindings = string> { @@ -223,12 +242,18 @@ declare function $$__sveltets_2_isomorphic_component< } } else { if (isSvelte5) { - statement = - `\n${doc}const ${className || '$$Component'} = __sveltets_2_isomorphic_component${usesSlots ? '_slots' : ''}(${propDef});\n` + - surroundWithIgnoreComments( - `type ${className || '$$Component'} = InstanceType;\n` - ) + - `export default ${className || '$$Component'};`; + if (exportedNames.usesRunes() && !usesSlots && !events.hasEvents()) { + statement = + `\n${doc}const ${className || '$$Component'} = __sveltets_2_fn_component(render());\n` + + `export default ${className || '$$Component'};`; + } else { + statement = + `\n${doc}const ${className || '$$Component'} = __sveltets_2_isomorphic_component${usesSlots ? '_slots' : ''}(${propDef});\n` + + surroundWithIgnoreComments( + `type ${className || '$$Component'} = InstanceType;\n` + ) + + `export default ${className || '$$Component'};`; + } } else { statement = `\n\n${doc}export default class${ @@ -281,7 +306,7 @@ function addTypeExport( } } -function events(strictEvents: boolean, renderStr: string) { +function _events(strictEvents: boolean, renderStr: string) { return strictEvents ? renderStr : `__sveltets_2_with_any_event(${renderStr})`; } diff --git a/packages/svelte2tsx/src/svelte2tsx/index.ts b/packages/svelte2tsx/src/svelte2tsx/index.ts index e6410d661..91e0d6b5a 100644 --- a/packages/svelte2tsx/src/svelte2tsx/index.ts +++ b/packages/svelte2tsx/src/svelte2tsx/index.ts @@ -435,7 +435,7 @@ export function svelte2tsx( addComponentExport({ str, canHaveAnyProp: !exportedNames.uses$$Props && (uses$$props || uses$$restProps), - strictEvents: events.hasStrictEvents(), // TODO in Svelte 6 we should also apply strictEvents in runes mode + events, isTsFile: options?.isTsFile, exportedNames, usesAccessors, diff --git a/packages/svelte2tsx/src/svelte2tsx/nodes/ComponentEvents.ts b/packages/svelte2tsx/src/svelte2tsx/nodes/ComponentEvents.ts index b2bb18e8e..a83dc9df0 100644 --- a/packages/svelte2tsx/src/svelte2tsx/nodes/ComponentEvents.ts +++ b/packages/svelte2tsx/src/svelte2tsx/nodes/ComponentEvents.ts @@ -77,6 +77,10 @@ export class ComponentEvents { this.componentEventsInterface.setComponentEventsInterface(node, this.str, astOffset); } + hasEvents(): boolean { + return this.eventsClass.events.size > 0; + } + hasStrictEvents(): boolean { return this.componentEventsInterface.isPresent() || this.strictEvents; } diff --git a/packages/svelte2tsx/src/svelte2tsx/nodes/ExportedNames.ts b/packages/svelte2tsx/src/svelte2tsx/nodes/ExportedNames.ts index d461ecd66..3f5ec412a 100644 --- a/packages/svelte2tsx/src/svelte2tsx/nodes/ExportedNames.ts +++ b/packages/svelte2tsx/src/svelte2tsx/nodes/ExportedNames.ts @@ -793,7 +793,7 @@ export class ExportedNames { } hasPropsRune() { - return this.isSvelte5Plus && (this.$props.type || this.$props.comment); + return this.isSvelte5Plus && !!(this.$props.type || this.$props.comment); } checkGlobalsForRunes(globals: string[]) { diff --git a/packages/svelte2tsx/svelte-shims-v4.d.ts b/packages/svelte2tsx/svelte-shims-v4.d.ts index 70e6df540..71bfbac6d 100644 --- a/packages/svelte2tsx/svelte-shims-v4.d.ts +++ b/packages/svelte2tsx/svelte-shims-v4.d.ts @@ -220,11 +220,36 @@ declare type ATypedSvelteComponent = { * ``` */ declare type ConstructorOfATypedSvelteComponent = new (args: {target: any, props?: any}) => ATypedSvelteComponent +// Usage note: Cannot properly transform generic function components to class components due to TypeScript limitations declare function __sveltets_2_ensureComponent< - // @ts-ignore svelte.Component doesn't exist in Svelte 4 - T extends ConstructorOfATypedSvelteComponent | (typeof import('svelte') extends { mount: any } ? import('svelte').Component : never) | null | undefined - // @ts-ignore svelte.Component doesn't exist in Svelte 4 ->(type: T): NonNullable> ? typeof import('svelte').SvelteComponent : T : T>; + T extends + | ConstructorOfATypedSvelteComponent + | (typeof import('svelte') extends { mount: any } + ? // @ts-ignore svelte.Component doesn't exist in Svelte 4 + import('svelte').Component + : never) + | null + | undefined +>( + type: T +): NonNullable< + T extends ConstructorOfATypedSvelteComponent + ? T + : typeof import('svelte') extends { mount: any } + ? // @ts-ignore svelte.Component doesn't exist in Svelte 4 + T extends import('svelte').Component< + infer Props extends Record, + infer Exports extends Record, + infer Bindings extends string + > + ? new ( + options: import('svelte').ComponentConstructorOptions + ) => import('svelte').SvelteComponent & + Exports & { $$bindings: Bindings } + : never + : never +>; + declare function __sveltets_2_ensureArray | Iterable>(array: T): T extends ArrayLike ? U[] : T extends Iterable ? Iterable : any[]; type __sveltets_2_PropsWithChildren = Props & @@ -240,6 +265,11 @@ declare function __sveltets_2_runes_constructor(render: {props declare function __sveltets_$$bindings(...bindings: Bindings): Bindings[number]; +declare function __sveltets_2_fn_component< + Props extends Record, Exports extends Record, Bindings extends string + // @ts-ignore Svelte 5 only +>(klass: {props: Props, exports?: Exports, bindings?: Bindings }): import('svelte').Component; + interface __sveltets_2_IsomorphicComponent = any, Events extends Record = any, Slots extends Record = any, Exports = {}, Bindings = string> { new (options: import('svelte').ComponentConstructorOptions): import('svelte').SvelteComponent & { $$bindings?: Bindings } & Exports; (internal: unknown, props: Props extends Record ? {$$events?: Events, $$slots?: Slots} : Props & {$$events?: Events, $$slots?: Slots}): Exports & { $set?: any, $on?: any }; diff --git a/packages/svelte2tsx/test/emitDts/samples/javascript-runes.v5/expected/TestRunes.svelte.d.ts b/packages/svelte2tsx/test/emitDts/samples/javascript-runes.v5/expected/TestRunes.svelte.d.ts index 6c3b7250e..04808233f 100644 --- a/packages/svelte2tsx/test/emitDts/samples/javascript-runes.v5/expected/TestRunes.svelte.d.ts +++ b/packages/svelte2tsx/test/emitDts/samples/javascript-runes.v5/expected/TestRunes.svelte.d.ts @@ -1,23 +1,7 @@ -interface $$__sveltets_2_IsomorphicComponent = any, Events extends Record = any, Slots extends Record = any, Exports = {}, Bindings = string> { - new (options: import('svelte').ComponentConstructorOptions): import('svelte').SvelteComponent & { - $$bindings?: Bindings; - } & Exports; - (internal: unknown, props: Props & { - $$events?: Events; - $$slots?: Slots; - }): Exports & { - $set?: any; - $on?: any; - }; - z_$$bindings?: Bindings; -} -declare const TestRunes: $$__sveltets_2_IsomorphicComponent<{ +declare const TestRunes: import("svelte").Component<{ foo: string; bar?: number; }, { - [evt: string]: CustomEvent; -}, {}, { baz: () => void; }, "bar">; -type TestRunes = InstanceType; export default TestRunes; diff --git a/packages/svelte2tsx/test/emitDts/samples/typescript-runes-generics.v5/expected/TestRunes.svelte.d.ts b/packages/svelte2tsx/test/emitDts/samples/typescript-runes-generics.v5/expected/TestRunes.svelte.d.ts index 6f01eae42..296b24ab4 100644 --- a/packages/svelte2tsx/test/emitDts/samples/typescript-runes-generics.v5/expected/TestRunes.svelte.d.ts +++ b/packages/svelte2tsx/test/emitDts/samples/typescript-runes-generics.v5/expected/TestRunes.svelte.d.ts @@ -3,9 +3,7 @@ declare class __sveltets_Render, K extends keyof T foo: T; bar?: K; }; - events(): {} & { - [evt: string]: CustomEvent; - }; + events(): {}; slots(): {}; bindings(): "bar"; exports(): { @@ -16,9 +14,7 @@ interface $$IsomorphicComponent { new , K extends keyof T>(options: import('svelte').ComponentConstructorOptions['props']>>): import('svelte').SvelteComponent['props']>, ReturnType<__sveltets_Render['events']>, ReturnType<__sveltets_Render['slots']>> & { $$bindings?: ReturnType<__sveltets_Render['bindings']>; } & ReturnType<__sveltets_Render['exports']>; - , K extends keyof T>(internal: unknown, props: ReturnType<__sveltets_Render['props']> & { - $$events?: ReturnType<__sveltets_Render['events']>; - }): ReturnType<__sveltets_Render['exports']>; + , K extends keyof T>(internal: unknown, props: ReturnType<__sveltets_Render['props']> & {}): ReturnType<__sveltets_Render['exports']>; z_$$bindings?: ReturnType<__sveltets_Render['bindings']>; } declare const TestRunes: $$IsomorphicComponent; diff --git a/packages/svelte2tsx/test/emitDts/samples/typescript-runes.v5/expected/TestRunes.svelte.d.ts b/packages/svelte2tsx/test/emitDts/samples/typescript-runes.v5/expected/TestRunes.svelte.d.ts index 6c3b7250e..04808233f 100644 --- a/packages/svelte2tsx/test/emitDts/samples/typescript-runes.v5/expected/TestRunes.svelte.d.ts +++ b/packages/svelte2tsx/test/emitDts/samples/typescript-runes.v5/expected/TestRunes.svelte.d.ts @@ -1,23 +1,7 @@ -interface $$__sveltets_2_IsomorphicComponent = any, Events extends Record = any, Slots extends Record = any, Exports = {}, Bindings = string> { - new (options: import('svelte').ComponentConstructorOptions): import('svelte').SvelteComponent & { - $$bindings?: Bindings; - } & Exports; - (internal: unknown, props: Props & { - $$events?: Events; - $$slots?: Slots; - }): Exports & { - $set?: any; - $on?: any; - }; - z_$$bindings?: Bindings; -} -declare const TestRunes: $$__sveltets_2_IsomorphicComponent<{ +declare const TestRunes: import("svelte").Component<{ foo: string; bar?: number; }, { - [evt: string]: CustomEvent; -}, {}, { baz: () => void; }, "bar">; -type TestRunes = InstanceType; export default TestRunes; diff --git a/packages/svelte2tsx/test/helpers.ts b/packages/svelte2tsx/test/helpers.ts index ceec3b03d..7fa3f5acf 100644 --- a/packages/svelte2tsx/test/helpers.ts +++ b/packages/svelte2tsx/test/helpers.ts @@ -230,7 +230,10 @@ export function test_samples(dir: string, transform: TransformSampleFn, js: 'js' if (sample.name.endsWith('.v5') && !isSvelte5Plus) continue; const svelteFile = sample.find_file('*.svelte'); - const expectedFile = isSvelte5Plus ? `expected-svelte5.${js}` : `expectedv2.${js}`; + const expectedFile = + isSvelte5Plus && !sample.name.endsWith('.v5') + ? `expected-svelte5.${js}` + : `expectedv2.${js}`; const config = { filename: svelteFile, sampleName: sample.name, diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/module-script-and-script3.v5/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/module-script-and-script3.v5/expectedv2.ts index 6406a56c2..5c395efb6 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/module-script-and-script3.v5/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/module-script-and-script3.v5/expectedv2.ts @@ -9,7 +9,7 @@ async () => { { svelteHTML.createElement("h1", {}); world; }}; -return { props: {world: world}, slots: {}, events: {} }} - -export default class Input__SvelteComponent_ extends __sveltets_2_createSvelte2TsxComponent(__sveltets_2_partial(['world'], __sveltets_2_with_any_event(render()))) { -} \ No newline at end of file +return { props: {world: world}, exports: {}, bindings: "", slots: {}, events: {} }} +const Input__SvelteComponent_ = __sveltets_2_isomorphic_component(__sveltets_2_partial(['world'], __sveltets_2_with_any_event(render()))); +/*Ωignore_startΩ*/type Input__SvelteComponent_ = InstanceType; +/*Ωignore_endΩ*/export default Input__SvelteComponent_; \ No newline at end of file diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/runes-best-effort-types.v5/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/runes-best-effort-types.v5/expectedv2.ts index 4b9dd9437..b5c446abe 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/runes-best-effort-types.v5/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/runes-best-effort-types.v5/expectedv2.ts @@ -5,6 +5,5 @@ ; async () => {}; return { props: /** @type {$$ComponentProps} */({}), exports: {}, bindings: __sveltets_$$bindings(''), slots: {}, events: {} }} -const Input__SvelteComponent_ = __sveltets_2_isomorphic_component(__sveltets_2_with_any_event(render())); -/*Ωignore_startΩ*/type Input__SvelteComponent_ = InstanceType; -/*Ωignore_endΩ*/export default Input__SvelteComponent_; \ No newline at end of file +const Input__SvelteComponent_ = __sveltets_2_fn_component(render()); +export default Input__SvelteComponent_; \ No newline at end of file diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/runes-bindable.v5/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/runes-bindable.v5/expectedv2.ts index c4de2d23e..5c4ac5f23 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/runes-bindable.v5/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/runes-bindable.v5/expectedv2.ts @@ -5,6 +5,5 @@ ; async () => {}; return { props: /** @type {$$ComponentProps} */({}), exports: {}, bindings: __sveltets_$$bindings('b'), slots: {}, events: {} }} -const Input__SvelteComponent_ = __sveltets_2_isomorphic_component(__sveltets_2_with_any_event(render())); -/*Ωignore_startΩ*/type Input__SvelteComponent_ = InstanceType; -/*Ωignore_endΩ*/export default Input__SvelteComponent_; \ No newline at end of file +const Input__SvelteComponent_ = __sveltets_2_fn_component(render()); +export default Input__SvelteComponent_; \ No newline at end of file diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/runes-looking-like-stores.v5/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/runes-looking-like-stores.v5/expectedv2.ts index 05b04da66..8263d1173 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/runes-looking-like-stores.v5/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/runes-looking-like-stores.v5/expectedv2.ts @@ -9,6 +9,5 @@ async () => { state; derived;}; return { props: /** @type {$$ComponentProps} */({}), exports: {}, bindings: __sveltets_$$bindings(''), slots: {}, events: {} }} -const Input__SvelteComponent_ = __sveltets_2_isomorphic_component(__sveltets_2_with_any_event(render())); -/*Ωignore_startΩ*/type Input__SvelteComponent_ = InstanceType; -/*Ωignore_endΩ*/export default Input__SvelteComponent_; \ No newline at end of file +const Input__SvelteComponent_ = __sveltets_2_fn_component(render()); +export default Input__SvelteComponent_; \ No newline at end of file diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/runes-only-export.v5/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/runes-only-export.v5/expectedv2.ts index cd5d6aca0..0a77ec5d6 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/runes-only-export.v5/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/runes-only-export.v5/expectedv2.ts @@ -8,6 +8,5 @@ async () => { x;}; return { props: /** @type {Record} */ ({}), exports: /** @type {{foo: typeof foo}} */ ({}), bindings: __sveltets_$$bindings(''), slots: {}, events: {} }} -const Input__SvelteComponent_ = __sveltets_2_isomorphic_component(__sveltets_2_with_any_event(render())); -/*Ωignore_startΩ*/type Input__SvelteComponent_ = InstanceType; -/*Ωignore_endΩ*/export default Input__SvelteComponent_; \ No newline at end of file +const Input__SvelteComponent_ = __sveltets_2_fn_component(render()); +export default Input__SvelteComponent_; \ No newline at end of file diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/runes.v5/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/runes.v5/expectedv2.ts index 06e1497b4..328328888 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/runes.v5/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/runes.v5/expectedv2.ts @@ -8,6 +8,5 @@ ; async () => {}; return { props: /** @type {$$ComponentProps} */({}), exports: {}, bindings: __sveltets_$$bindings(''), slots: {}, events: {} }} -const Input__SvelteComponent_ = __sveltets_2_isomorphic_component(__sveltets_2_with_any_event(render())); -/*Ωignore_startΩ*/type Input__SvelteComponent_ = InstanceType; -/*Ωignore_endΩ*/export default Input__SvelteComponent_; \ No newline at end of file +const Input__SvelteComponent_ = __sveltets_2_fn_component(render()); +export default Input__SvelteComponent_; \ No newline at end of file diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/sveltekit-autotypes-$props-rune-no-changes.v5/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/sveltekit-autotypes-$props-rune-no-changes.v5/expectedv2.ts index fe4d98e31..6eceb26ee 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/sveltekit-autotypes-$props-rune-no-changes.v5/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/sveltekit-autotypes-$props-rune-no-changes.v5/expectedv2.ts @@ -8,6 +8,5 @@ ; async () => {}; return { props: /** @type {$$ComponentProps} */({}), exports: /** @type {{snapshot: typeof snapshot}} */ ({}), bindings: __sveltets_$$bindings(''), slots: {}, events: {} }} -const Page__SvelteComponent_ = __sveltets_2_isomorphic_component(__sveltets_2_with_any_event(render())); -/*Ωignore_startΩ*/type Page__SvelteComponent_ = InstanceType; -/*Ωignore_endΩ*/export default Page__SvelteComponent_; \ No newline at end of file +const Page__SvelteComponent_ = __sveltets_2_fn_component(render()); +export default Page__SvelteComponent_; \ No newline at end of file diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/sveltekit-autotypes-$props-rune.v5/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/sveltekit-autotypes-$props-rune.v5/expectedv2.ts index b5014a5d2..eeb3e8864 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/sveltekit-autotypes-$props-rune.v5/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/sveltekit-autotypes-$props-rune.v5/expectedv2.ts @@ -6,6 +6,5 @@ ; async () => {}; return { props: /** @type {$$ComponentProps} */({}), exports: /** @type {{snapshot: typeof snapshot}} */ ({}), bindings: __sveltets_$$bindings(''), slots: {}, events: {} }} -const Page__SvelteComponent_ = __sveltets_2_isomorphic_component(__sveltets_2_with_any_event(render())); -/*Ωignore_startΩ*/type Page__SvelteComponent_ = InstanceType; -/*Ωignore_endΩ*/export default Page__SvelteComponent_; \ No newline at end of file +const Page__SvelteComponent_ = __sveltets_2_fn_component(render()); +export default Page__SvelteComponent_; \ No newline at end of file diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/ts-runes-best-effort-types.v5/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/ts-runes-best-effort-types.v5/expectedv2.ts index eab76fea5..faa1d533b 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/ts-runes-best-effort-types.v5/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/ts-runes-best-effort-types.v5/expectedv2.ts @@ -5,6 +5,5 @@ ; async () => {}; return { props: {} as any as $$ComponentProps, exports: {}, bindings: __sveltets_$$bindings(''), slots: {}, events: {} }} -const Input__SvelteComponent_ = __sveltets_2_isomorphic_component(__sveltets_2_with_any_event(render())); -/*Ωignore_startΩ*/type Input__SvelteComponent_ = InstanceType; -/*Ωignore_endΩ*/export default Input__SvelteComponent_; \ No newline at end of file +const Input__SvelteComponent_ = __sveltets_2_fn_component(render()); +export default Input__SvelteComponent_; \ No newline at end of file diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/ts-runes-bindable.v5/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/ts-runes-bindable.v5/expectedv2.ts index 90775addb..ce3a575fe 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/ts-runes-bindable.v5/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/ts-runes-bindable.v5/expectedv2.ts @@ -5,6 +5,5 @@ ; async () => {}; return { props: {} as any as $$ComponentProps, exports: {}, bindings: __sveltets_$$bindings('b', 'c'), slots: {}, events: {} }} -const Input__SvelteComponent_ = __sveltets_2_isomorphic_component(__sveltets_2_with_any_event(render())); -/*Ωignore_startΩ*/type Input__SvelteComponent_ = InstanceType; -/*Ωignore_endΩ*/export default Input__SvelteComponent_; \ No newline at end of file +const Input__SvelteComponent_ = __sveltets_2_fn_component(render()); +export default Input__SvelteComponent_; \ No newline at end of file diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/ts-runes-generics.v5/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/ts-runes-generics.v5/expectedv2.ts index b7e2a8765..d87b3a3ee 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/ts-runes-generics.v5/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/ts-runes-generics.v5/expectedv2.ts @@ -12,7 +12,7 @@ class __sveltets_Render { return render().props; } events() { - return __sveltets_2_with_any_event(render()).events; + return render().events; } slots() { return render().slots; @@ -23,7 +23,7 @@ class __sveltets_Render { interface $$IsomorphicComponent { new (options: import('svelte').ComponentConstructorOptions['props']>>): import('svelte').SvelteComponent['props']>, ReturnType<__sveltets_Render['events']>, ReturnType<__sveltets_Render['slots']>> & { $$bindings?: ReturnType<__sveltets_Render['bindings']> } & ReturnType<__sveltets_Render['exports']>; - (internal: unknown, props: ReturnType<__sveltets_Render['props']> & {$$events?: ReturnType<__sveltets_Render['events']>}): ReturnType<__sveltets_Render['exports']>; + (internal: unknown, props: ReturnType<__sveltets_Render['props']> & {}): ReturnType<__sveltets_Render['exports']>; z_$$bindings?: ReturnType<__sveltets_Render['bindings']>; } const Input__SvelteComponent_: $$IsomorphicComponent = null as any; diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/ts-runes-with-slot.v5/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/ts-runes-with-slot.v5/expectedv2.ts index 68212de3d..d34195b64 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/ts-runes-with-slot.v5/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/ts-runes-with-slot.v5/expectedv2.ts @@ -16,7 +16,7 @@ class __sveltets_Render { return render().props; } events() { - return __sveltets_2_with_any_event(render()).events; + return render().events; } slots() { return render().slots; @@ -27,7 +27,7 @@ class __sveltets_Render { interface $$IsomorphicComponent { new (options: import('svelte').ComponentConstructorOptions['props']>& {children?: any}>): import('svelte').SvelteComponent['props']>, ReturnType<__sveltets_Render['events']>, ReturnType<__sveltets_Render['slots']>> & { $$bindings?: ReturnType<__sveltets_Render['bindings']> } & ReturnType<__sveltets_Render['exports']>; - (internal: unknown, props: ReturnType<__sveltets_Render['props']> & {$$events?: ReturnType<__sveltets_Render['events']>, $$slots?: ReturnType<__sveltets_Render['slots']>, children?: any}): ReturnType<__sveltets_Render['exports']>; + (internal: unknown, props: ReturnType<__sveltets_Render['props']> & {$$slots?: ReturnType<__sveltets_Render['slots']>, children?: any}): ReturnType<__sveltets_Render['exports']>; z_$$bindings?: ReturnType<__sveltets_Render['bindings']>; } const Input__SvelteComponent_: $$IsomorphicComponent = null as any; diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/ts-runes.v5/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/ts-runes.v5/expectedv2.ts index 12e191193..8e4065235 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/ts-runes.v5/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/ts-runes.v5/expectedv2.ts @@ -7,6 +7,5 @@ ; async () => {}; return { props: {} as any as $$ComponentProps, exports: {}, bindings: __sveltets_$$bindings(''), slots: {}, events: {} }} -const Input__SvelteComponent_ = __sveltets_2_isomorphic_component(__sveltets_2_with_any_event(render())); -/*Ωignore_startΩ*/type Input__SvelteComponent_ = InstanceType; -/*Ωignore_endΩ*/export default Input__SvelteComponent_; \ No newline at end of file +const Input__SvelteComponent_ = __sveltets_2_fn_component(render()); +export default Input__SvelteComponent_; \ No newline at end of file diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/ts-sveltekit-autotypes-$props-rune-unchanged.v5/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/ts-sveltekit-autotypes-$props-rune-unchanged.v5/expectedv2.ts index 522d58fd2..df7501a9a 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/ts-sveltekit-autotypes-$props-rune-unchanged.v5/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/ts-sveltekit-autotypes-$props-rune-unchanged.v5/expectedv2.ts @@ -6,6 +6,5 @@ ; async () => {}; return { props: {} as any as $$ComponentProps, exports: {} as any as { snapshot: any }, bindings: __sveltets_$$bindings(''), slots: {}, events: {} }} -const Page__SvelteComponent_ = __sveltets_2_isomorphic_component(__sveltets_2_with_any_event(render())); -/*Ωignore_startΩ*/type Page__SvelteComponent_ = InstanceType; -/*Ωignore_endΩ*/export default Page__SvelteComponent_; \ No newline at end of file +const Page__SvelteComponent_ = __sveltets_2_fn_component(render()); +export default Page__SvelteComponent_; \ No newline at end of file diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/ts-sveltekit-autotypes-$props-rune.v5/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/ts-sveltekit-autotypes-$props-rune.v5/expectedv2.ts index 04db7b55e..ae77eca3f 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/ts-sveltekit-autotypes-$props-rune.v5/expectedv2.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/ts-sveltekit-autotypes-$props-rune.v5/expectedv2.ts @@ -6,6 +6,5 @@ ; async () => {}; return { props: {} as any as $$ComponentProps, exports: {} as any as { snapshot: typeof snapshot }, bindings: __sveltets_$$bindings(''), slots: {}, events: {} }} -const Page__SvelteComponent_ = __sveltets_2_isomorphic_component(__sveltets_2_with_any_event(render())); -/*Ωignore_startΩ*/type Page__SvelteComponent_ = InstanceType; -/*Ωignore_endΩ*/export default Page__SvelteComponent_; \ No newline at end of file +const Page__SvelteComponent_ = __sveltets_2_fn_component(render()); +export default Page__SvelteComponent_; \ No newline at end of file