(fix) allow non-literal createEventDispatcher generic template (#2004)

#1388. Also deprecated SvelteCompiledToTsx.events. We can add support if the interface is inside the script tag. But not imported interfaces, and we no longer use this, so adding support at the cost of maintenance burden and runtime overhead doesn't make much sense.

If anyone uses this API for documentation purposes, consider using TypeScript's TypeChecker to analyse it instead.

Author: jasonlyu123

packages/language-server/src/plugins/typescript/ComponentInfoProvider.ts

@@ -1,9 +1,8 @@
-import { ComponentEvents } from 'svelte2tsx';
 import ts from 'typescript';
 import { flatten, isNotNullOrUndefined } from '../../utils';
 import { findContainingNode } from './features/utils';
 
-export type ComponentPartInfo = ReturnType<ComponentEvents['getAll']>;
+export type ComponentPartInfo = Array<{ name: string; type: string; doc?: string }>;
 
 export interface ComponentInfoProvider {
     getEvents(): ComponentPartInfo;

packages/svelte2tsx/index.d.ts

@@ -4,13 +4,19 @@ export interface SvelteCompiledToTsx {
     code: string;
     map: import("magic-string").SourceMap;
     exportedNames: IExportedNames;
+    /**
+     * @deprecated Use TypeScript's `TypeChecker` to get the type information instead. This only covers literal typings.
+     */
     events: ComponentEvents;
 }
 
 export interface IExportedNames {
     has(name: string): boolean;
 }
 
+/**
+ * @deprecated Use TypeScript's `TypeChecker` to get the type information instead. This only covers literal typings.
+ */
 export interface ComponentEvents {
     getAll(): { name: string; type: string; doc?: string }[];
 }

packages/svelte2tsx/src/svelte2tsx/nodes/ComponentEvents.ts

@@ -224,17 +224,20 @@ class ComponentEventsFromEventsMap {
 
         const { dispatcherTyping, dispatcherName } = result;
 
-        if (dispatcherTyping && ts.isTypeLiteralNode(dispatcherTyping)) {
+        if (dispatcherTyping) {
             this.eventDispatchers.push({
                 name: dispatcherName,
                 typing: dispatcherTyping.getText()
             });
-            dispatcherTyping.members.filter(ts.isPropertySignature).forEach((member) => {
-                this.addToEvents(getName(member.name), {
-                    type: `CustomEvent<${member.type?.getText() || 'any'}>`,
-                    doc: getDoc(member)
+
+            if (ts.isTypeLiteralNode(dispatcherTyping)) {
+                dispatcherTyping.members.filter(ts.isPropertySignature).forEach((member) => {
+                    this.addToEvents(getName(member.name), {
+                        type: `CustomEvent<${member.type?.getText() || 'any'}>`,
+                        doc: getDoc(member)
+                    });
                 });
-            });
+            }
         } else {
             this.eventDispatchers.push({ name: dispatcherName });
             this.eventHandler

packages/svelte2tsx/test/svelte2tsx/samples/ts-event-dispatcher-typed-non-literal/expectedv2.ts

@@ -0,0 +1,29 @@
+///<reference types="svelte" />
+;
+import { createEventDispatcher } from "svelte";
+function render() {
+
+    
+
+    type Events = {
+        hi: boolean;
+        bye: boolean;
+        btn: string;
+    };
+
+    const dispatch = createEventDispatcher<Events>();
+
+    dispatch('hi', true);
+
+    function bye() {
+        const bla = 'bye';
+        dispatch(bla, false);
+    }
+;
+async () => {
+
+ { svelteHTML.createElement("button", {  "on:click":() => dispatch('btn', ''),}); }};
+return { props: {} as Record<string, never>, slots: {}, events: {...__sveltets_2_toEventTypings<Events>()} }}
+
+export default class Input__SvelteComponent_ extends __sveltets_2_createSvelte2TsxComponent(__sveltets_2_with_any_event(render())) {
+}

packages/svelte2tsx/test/svelte2tsx/samples/ts-event-dispatcher-typed-non-literal/input.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import { createEventDispatcher } from "svelte";
+
+    type Events = {
+        hi: boolean;
+        bye: boolean;
+        btn: string;
+    };
+
+    const dispatch = createEventDispatcher<Events>();
+
+    dispatch('hi', true);
+
+    function bye() {
+        const bla = 'bye';
+        dispatch(bla, false);
+    }
+</script>
+
+<button on:click={() => dispatch('btn', '')}></button>