From b49b87b1044eba7f094eeb93166aa84663073af1 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@accso.de>
Date: Mon, 14 Jun 2021 12:34:59 +0200
Subject: [PATCH] (feat) add $$Events and strictEvents support

$$Events lets the user define all events that a component can dispatch. If createEventDispatcher is not typed, the $$Events definition is added to it under the hood for type checking.
strictEvents can be used when the user is sure that there are no other events besides the one from createEventDispatcher and forwarded events - this removes the custom event fallback typing.

#442
#424
https://github.com/sveltejs/rfcs/pull/38
---
 .../features/DiagnosticsProvider.test.ts      | 113 +++++++++++
 .../component-events-interface.svelte         |   2 +-
 .../testfiles/diagnostics/$$events.svelte     |  17 ++
 .../diagnostics/diagnostics-$$events.svelte   |   8 +
 .../diagnostics-strictEvents.svelte           |   8 +
 .../testfiles/diagnostics/strictEvents.svelte |   8 +
 .../hover/hover-events-interface.svelte       |   2 +-
 packages/svelte2tsx/src/htmlxtojsx/index.ts   |   2 +-
 packages/svelte2tsx/src/svelte2tsx/index.ts   |  15 +-
 .../src/svelte2tsx/nodes/ComponentEvents.ts   | 186 +++++++++++++-----
 .../processInstanceScriptContent.ts           |   7 +-
 .../svelte2tsx/src/svelte2tsx/svelteShims.ts  |   3 +
 packages/svelte2tsx/src/utils/htmlxparser.ts  |  10 +-
 packages/svelte2tsx/svelte-shims.d.ts         |   3 +
 .../expected.tsx                              |   4 +-
 .../input.svelte                              |   2 +-
 .../expected.tsx                              |  23 +++
 .../input.svelte                              |  14 ++
 .../expected.tsx                              |   4 +-
 .../input.svelte                              |   2 +-
 .../component-events-interface/expected.tsx   |   4 +-
 .../component-events-interface/input.svelte   |   2 +-
 .../expected.tsx                              |  17 ++
 .../input.svelte                              |   8 +
 .../samples/creates-dts/expected.tsx          |   3 +
 .../samples/ts-$$generics-dts/expected.tsx    |   3 +
 .../samples/ts-creates-dts/expected.tsx       |   3 +
 27 files changed, 395 insertions(+), 78 deletions(-)
 create mode 100644 packages/language-server/test/plugins/typescript/testfiles/diagnostics/$$events.svelte
 create mode 100644 packages/language-server/test/plugins/typescript/testfiles/diagnostics/diagnostics-$$events.svelte
 create mode 100644 packages/language-server/test/plugins/typescript/testfiles/diagnostics/diagnostics-strictEvents.svelte
 create mode 100644 packages/language-server/test/plugins/typescript/testfiles/diagnostics/strictEvents.svelte
 create mode 100644 packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface-dispatcher/expected.tsx
 create mode 100644 packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface-dispatcher/input.svelte
 create mode 100644 packages/svelte2tsx/test/svelte2tsx/samples/component-events-strictEvents/expected.tsx
 create mode 100644 packages/svelte2tsx/test/svelte2tsx/samples/component-events-strictEvents/input.svelte

diff --git a/packages/language-server/test/plugins/typescript/features/DiagnosticsProvider.test.ts b/packages/language-server/test/plugins/typescript/features/DiagnosticsProvider.test.ts
index 06c52476a..4f14095d7 100644
--- a/packages/language-server/test/plugins/typescript/features/DiagnosticsProvider.test.ts
+++ b/packages/language-server/test/plugins/typescript/features/DiagnosticsProvider.test.ts
@@ -1293,4 +1293,117 @@ describe('DiagnosticsProvider', () => {
             }
         ]);
     });
+
+    it('checks $$Events usage', async () => {
+        const { plugin, document } = setup('$$events.svelte');
+        const diagnostics = await plugin.getDiagnostics(document);
+        assert.deepStrictEqual(diagnostics, [
+            {
+                code: 2345,
+                message:
+                    "Argument of type 'true' is not assignable to parameter of type 'string | undefined'.",
+                range: {
+                    start: {
+                        character: 20,
+                        line: 12
+                    },
+                    end: {
+                        character: 24,
+                        line: 12
+                    }
+                },
+                severity: 1,
+                source: 'ts',
+                tags: []
+            },
+            {
+                code: 2345,
+                message:
+                    'Argument of type \'"click"\' is not assignable to parameter of type \'"foo"\'.',
+                range: {
+                    start: {
+                        character: 13,
+                        line: 13
+                    },
+                    end: {
+                        character: 20,
+                        line: 13
+                    }
+                },
+                severity: 1,
+                source: 'ts',
+                tags: []
+            }
+        ]);
+    });
+
+    it('checks $$Events component usage', async () => {
+        const { plugin, document } = setup('diagnostics-$$events.svelte');
+        const diagnostics = await plugin.getDiagnostics(document);
+        assert.deepStrictEqual(diagnostics, [
+            {
+                code: 2345,
+                message:
+                    // Note: If you only run this test, the test message is slightly different for some reason
+                    'Argument of type \'"bar"\' is not assignable to parameter of type \'"foo" | "click"\'.',
+                range: {
+                    start: {
+                        character: 10,
+                        line: 7
+                    },
+                    end: {
+                        character: 15,
+                        line: 7
+                    }
+                },
+                severity: 1,
+                source: 'ts',
+                tags: []
+            },
+            {
+                code: 2367,
+                message:
+                    "This condition will always return 'false' since the types 'string' and 'boolean' have no overlap.",
+                range: {
+                    start: {
+                        character: 37,
+                        line: 7
+                    },
+                    end: {
+                        character: 54,
+                        line: 7
+                    }
+                },
+                severity: 1,
+                source: 'ts',
+                tags: []
+            }
+        ]);
+    });
+
+    it('checks strictEvents', async () => {
+        const { plugin, document } = setup('diagnostics-strictEvents.svelte');
+        const diagnostics = await plugin.getDiagnostics(document);
+        assert.deepStrictEqual(diagnostics, [
+            {
+                code: 2345,
+                message:
+                    // Note: If you only run this test, the test message is slightly different for some reason
+                    'Argument of type \'"bar"\' is not assignable to parameter of type \'"foo" | "click"\'.',
+                range: {
+                    start: {
+                        character: 16,
+                        line: 7
+                    },
+                    end: {
+                        character: 21,
+                        line: 7
+                    }
+                },
+                severity: 1,
+                source: 'ts',
+                tags: []
+            }
+        ]);
+    });
 });
diff --git a/packages/language-server/test/plugins/typescript/testfiles/completions/component-events-interface.svelte b/packages/language-server/test/plugins/typescript/testfiles/completions/component-events-interface.svelte
index a87dc62b6..c7c3eeef0 100644
--- a/packages/language-server/test/plugins/typescript/testfiles/completions/component-events-interface.svelte
+++ b/packages/language-server/test/plugins/typescript/testfiles/completions/component-events-interface.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    interface ComponentEvents {
+    interface $$Events {
         a: CustomEvent<boolean>;
         /**
          * TEST
diff --git a/packages/language-server/test/plugins/typescript/testfiles/diagnostics/$$events.svelte b/packages/language-server/test/plugins/typescript/testfiles/diagnostics/$$events.svelte
new file mode 100644
index 000000000..7440a92d6
--- /dev/null
+++ b/packages/language-server/test/plugins/typescript/testfiles/diagnostics/$$events.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+
+    interface $$Events {
+        foo: CustomEvent<string>;
+        click: MouseEvent;
+    }
+
+    const dispatch = createEventDispatcher();
+    // valid
+    dispatch('foo', 'bar');
+    // invalid
+    dispatch('foo', true);
+    dispatch('click');
+</script>
+
+<button on:click>click</button>
\ No newline at end of file
diff --git a/packages/language-server/test/plugins/typescript/testfiles/diagnostics/diagnostics-$$events.svelte b/packages/language-server/test/plugins/typescript/testfiles/diagnostics/diagnostics-$$events.svelte
new file mode 100644
index 000000000..400adae57
--- /dev/null
+++ b/packages/language-server/test/plugins/typescript/testfiles/diagnostics/diagnostics-$$events.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+    import Events from './$$events.svelte';
+</script>
+
+<!-- valid -->
+<Events on:click={e => e} on:foo={e => e.detail === 'bar'} />
+<!-- invalid -->
+<Events on:bar={e => e} on:foo={e => e.detail === true} />
\ No newline at end of file
diff --git a/packages/language-server/test/plugins/typescript/testfiles/diagnostics/diagnostics-strictEvents.svelte b/packages/language-server/test/plugins/typescript/testfiles/diagnostics/diagnostics-strictEvents.svelte
new file mode 100644
index 000000000..a5d3698fc
--- /dev/null
+++ b/packages/language-server/test/plugins/typescript/testfiles/diagnostics/diagnostics-strictEvents.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+    import StrictEvents from './strictEvents.svelte';
+</script>
+
+<!-- valid -->
+<StrictEvents on:foo={e => e} on:click={e => e} />
+<!-- invalid -->
+<StrictEvents on:bar={e => e} />
\ No newline at end of file
diff --git a/packages/language-server/test/plugins/typescript/testfiles/diagnostics/strictEvents.svelte b/packages/language-server/test/plugins/typescript/testfiles/diagnostics/strictEvents.svelte
new file mode 100644
index 000000000..416fc3437
--- /dev/null
+++ b/packages/language-server/test/plugins/typescript/testfiles/diagnostics/strictEvents.svelte
@@ -0,0 +1,8 @@
+<script strictEvents>
+    import { createEventDispatcher } from 'svelte';
+
+    const dispatch = createEventDispatcher();
+    dispatch('foo', 'bar');
+</script>
+
+<button on:click>click</button>
\ No newline at end of file
diff --git a/packages/language-server/test/plugins/typescript/testfiles/hover/hover-events-interface.svelte b/packages/language-server/test/plugins/typescript/testfiles/hover/hover-events-interface.svelte
index e2cd5ec82..1d5dbe66c 100644
--- a/packages/language-server/test/plugins/typescript/testfiles/hover/hover-events-interface.svelte
+++ b/packages/language-server/test/plugins/typescript/testfiles/hover/hover-events-interface.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    interface ComponentEvents {
+    interface $$Events {
         a: CustomEvent<boolean>;
         /**
          * TEST
diff --git a/packages/svelte2tsx/src/htmlxtojsx/index.ts b/packages/svelte2tsx/src/htmlxtojsx/index.ts
index f650a8f71..8980d6fb8 100644
--- a/packages/svelte2tsx/src/htmlxtojsx/index.ts
+++ b/packages/svelte2tsx/src/htmlxtojsx/index.ts
@@ -229,7 +229,7 @@ export function htmlx2jsx(
     htmlx: string,
     options?: { emitOnTemplateError?: boolean; preserveAttributeCase: boolean }
 ) {
-    const ast = parseHtmlx(htmlx, options);
+    const ast = parseHtmlx(htmlx, options).htmlxAst;
     const str = new MagicString(htmlx);
 
     convertHtmlxToJsx(str, ast, null, null, options);
diff --git a/packages/svelte2tsx/src/svelte2tsx/index.ts b/packages/svelte2tsx/src/svelte2tsx/index.ts
index d43eb628e..d7f9cd593 100644
--- a/packages/svelte2tsx/src/svelte2tsx/index.ts
+++ b/packages/svelte2tsx/src/svelte2tsx/index.ts
@@ -47,13 +47,14 @@ type TemplateProcessResult = {
     events: ComponentEvents;
     resolvedStores: string[];
     usesAccessors: boolean;
+    tags: Node[];
 };
 
 function processSvelteTemplate(
     str: MagicString,
     options?: { emitOnTemplateError?: boolean; namespace?: string }
 ): TemplateProcessResult {
-    const htmlxAst = parseHtmlx(str.original, options);
+    const { htmlxAst, tags } = parseHtmlx(str.original, options);
 
     let uses$$props = false;
     let uses$$restProps = false;
@@ -279,13 +280,14 @@ function processSvelteTemplate(
         moduleScriptTag,
         scriptTag,
         slots: slotHandler.getSlotDef(),
-        events: new ComponentEvents(eventHandler),
+        events: new ComponentEvents(eventHandler, str),
         uses$$props,
         uses$$restProps,
         uses$$slots,
         componentDocumentation,
         resolvedStores,
-        usesAccessors
+        usesAccessors,
+        tags
     };
 }
 
@@ -392,7 +394,8 @@ export function svelte2tsx(
         events,
         componentDocumentation,
         resolvedStores,
-        usesAccessors
+        usesAccessors,
+        tags
     } = processSvelteTemplate(str, options);
 
     /* Rearrange the script tags so that module is first, and instance second followed finally by the template
@@ -461,7 +464,9 @@ export function svelte2tsx(
     addComponentExport({
         str,
         uses$$propsOr$$restProps: uses$$props || uses$$restProps,
-        strictEvents: events.hasInterface(),
+        strictEvents:
+            events.hasInterface() ||
+            tags.some((tag) => tag.attributes?.some((a) => a.name === 'strictEvents')),
         isTsFile: options?.isTsFile,
         getters,
         exportedNames,
diff --git a/packages/svelte2tsx/src/svelte2tsx/nodes/ComponentEvents.ts b/packages/svelte2tsx/src/svelte2tsx/nodes/ComponentEvents.ts
index 09f1fff59..43f4afa62 100644
--- a/packages/svelte2tsx/src/svelte2tsx/nodes/ComponentEvents.ts
+++ b/packages/svelte2tsx/src/svelte2tsx/nodes/ComponentEvents.ts
@@ -1,6 +1,7 @@
 import ts from 'typescript';
 import { EventHandler } from './event-handler';
 import { getVariableAtTopLevel, getLastLeadingDoc } from '../utils/tsAst';
+import MagicString from 'magic-string';
 
 /**
  * This class accumulates all events that are dispatched from the component.
@@ -19,14 +20,16 @@ import { getVariableAtTopLevel, getLastLeadingDoc } from '../utils/tsAst';
  *   - If no, track all invocations of it to get the event names
  */
 export class ComponentEvents {
-    private componentEventsInterface?: ComponentEventsFromInterface;
+    private componentEventsInterface = new ComponentEventsFromInterface();
     private componentEventsFromEventsMap: ComponentEventsFromEventsMap;
 
     private get eventsClass() {
-        return this.componentEventsInterface || this.componentEventsFromEventsMap;
+        return this.componentEventsInterface.isPresent()
+            ? this.componentEventsInterface
+            : this.componentEventsFromEventsMap;
     }
 
-    constructor(eventHandler: EventHandler) {
+    constructor(eventHandler: EventHandler, private str: MagicString) {
         this.componentEventsFromEventsMap = new ComponentEventsFromEventsMap(eventHandler);
     }
 
@@ -49,16 +52,21 @@ export class ComponentEvents {
         };
     }
 
-    setComponentEventsInterface(node: ts.InterfaceDeclaration): void {
-        this.componentEventsInterface = new ComponentEventsFromInterface(node);
+    toDefString(): string {
+        return this.eventsClass.toDefString();
+    }
+
+    setComponentEventsInterface(node: ts.InterfaceDeclaration, astOffset: number): void {
+        this.componentEventsInterface.setComponentEventsInterface(node, this.str, astOffset);
     }
 
     hasInterface(): boolean {
-        return !!this.componentEventsInterface;
+        return this.componentEventsInterface.isPresent();
     }
 
     checkIfImportIsEventDispatcher(node: ts.ImportDeclaration): void {
         this.componentEventsFromEventsMap.checkIfImportIsEventDispatcher(node);
+        this.componentEventsInterface?.checkIfImportIsEventDispatcher(node);
     }
 
     checkIfIsStringLiteralDeclaration(node: ts.VariableDeclaration): void {
@@ -67,26 +75,67 @@ export class ComponentEvents {
 
     checkIfDeclarationInstantiatedEventDispatcher(node: ts.VariableDeclaration): void {
         this.componentEventsFromEventsMap.checkIfDeclarationInstantiatedEventDispatcher(node);
+        this.componentEventsInterface?.checkIfDeclarationInstantiatedEventDispatcher(node);
     }
 
     checkIfCallExpressionIsDispatch(node: ts.CallExpression): void {
         this.componentEventsFromEventsMap.checkIfCallExpressionIsDispatch(node);
     }
-
-    toDefString(): string {
-        return this.eventsClass.toDefString();
-    }
 }
 
 class ComponentEventsFromInterface {
     events = new Map<string, { type: string; doc?: string }>();
-
-    constructor(node: ts.InterfaceDeclaration) {
+    private eventDispatcherImport = '';
+    private node?: ts.InterfaceDeclaration;
+    private str?: MagicString;
+    private astOffset?: number;
+
+    setComponentEventsInterface(
+        node: ts.InterfaceDeclaration,
+        str: MagicString,
+        astOffset: number
+    ) {
+        this.node = node;
+        this.str = str;
+        this.astOffset = astOffset;
         this.events = this.extractEvents(node);
     }
 
+    checkIfImportIsEventDispatcher(node: ts.ImportDeclaration) {
+        if (this.eventDispatcherImport) {
+            return;
+        }
+        this.eventDispatcherImport = checkIfImportIsEventDispatcher(node);
+    }
+
+    checkIfDeclarationInstantiatedEventDispatcher(node: ts.VariableDeclaration) {
+        if (!this.isPresent()) {
+            return;
+        }
+        const result = checkIfDeclarationInstantiatedEventDispatcher(
+            node,
+            this.eventDispatcherImport
+        );
+        if (!result) {
+            return;
+        }
+
+        const { dispatcherTyping, dispatcherCreationExpr } = result;
+
+        if (!dispatcherTyping) {
+            this.str.prependLeft(
+                dispatcherCreationExpr.expression.getEnd() + this.astOffset,
+                '<__Sveltets_CustomEvents<$$Events>>'
+            );
+        }
+    }
+
     toDefString() {
-        return '{} as unknown as ComponentEvents';
+        return this.isPresent() ? '{} as unknown as $$Events' : undefined;
+    }
+
+    isPresent() {
+        return !!this.node;
     }
 
     private extractEvents(node: ts.InterfaceDeclaration) {
@@ -118,20 +167,7 @@ class ComponentEventsFromEventsMap {
         if (this.eventDispatcherImport) {
             return;
         }
-        if (ts.isStringLiteral(node.moduleSpecifier) && node.moduleSpecifier.text !== 'svelte') {
-            return;
-        }
-
-        const namedImports = node.importClause?.namedBindings;
-        if (ts.isNamedImports(namedImports)) {
-            const eventDispatcherImport = namedImports.elements.find(
-                // If it's an aliased import, propertyName is set
-                (el) => (el.propertyName || el.name).text === 'createEventDispatcher'
-            );
-            if (eventDispatcherImport) {
-                this.eventDispatcherImport = eventDispatcherImport.name.text;
-            }
-        }
+        this.eventDispatcherImport = checkIfImportIsEventDispatcher(node);
     }
 
     checkIfIsStringLiteralDeclaration(node: ts.VariableDeclaration) {
@@ -145,38 +181,35 @@ class ComponentEventsFromEventsMap {
     }
 
     checkIfDeclarationInstantiatedEventDispatcher(node: ts.VariableDeclaration) {
-        if (!ts.isIdentifier(node.name) || !node.initializer) {
+        const result = checkIfDeclarationInstantiatedEventDispatcher(
+            node,
+            this.eventDispatcherImport
+        );
+        if (!result) {
             return;
         }
 
-        if (
-            ts.isCallExpression(node.initializer) &&
-            ts.isIdentifier(node.initializer.expression) &&
-            node.initializer.expression.text === this.eventDispatcherImport
-        ) {
-            const dispatcherName = node.name.text;
-            const dispatcherTyping = node.initializer.typeArguments?.[0];
+        const { dispatcherTyping, dispatcherName } = result;
 
-            if (dispatcherTyping && ts.isTypeLiteralNode(dispatcherTyping)) {
-                this.eventDispatchers.push({
-                    name: dispatcherName,
-                    typing: dispatcherTyping.getText()
+        if (dispatcherTyping && ts.isTypeLiteralNode(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)
                 });
-                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
+                .getDispatchedEventsForIdentifier(dispatcherName)
+                .forEach((evtName) => {
+                    this.addToEvents(evtName);
+                    this.dispatchedEvents.add(evtName);
                 });
-            } else {
-                this.eventDispatchers.push({ name: dispatcherName });
-                this.eventHandler
-                    .getDispatchedEventsForIdentifier(dispatcherName)
-                    .forEach((evtName) => {
-                        this.addToEvents(evtName);
-                        this.dispatchedEvents.add(evtName);
-                    });
-            }
         }
     }
 
@@ -309,3 +342,50 @@ function getDoc(member: ts.PropertySignature) {
 
     return doc;
 }
+
+function checkIfImportIsEventDispatcher(node: ts.ImportDeclaration): string | undefined {
+    if (ts.isStringLiteral(node.moduleSpecifier) && node.moduleSpecifier.text !== 'svelte') {
+        return;
+    }
+
+    const namedImports = node.importClause?.namedBindings;
+    if (ts.isNamedImports(namedImports)) {
+        const eventDispatcherImport = namedImports.elements.find(
+            // If it's an aliased import, propertyName is set
+            (el) => (el.propertyName || el.name).text === 'createEventDispatcher'
+        );
+        if (eventDispatcherImport) {
+            return eventDispatcherImport.name.text;
+        }
+    }
+}
+
+function checkIfDeclarationInstantiatedEventDispatcher(
+    node: ts.VariableDeclaration,
+    eventDispatcherImport: string | undefined
+):
+    | {
+          dispatcherName: string;
+          dispatcherTyping: ts.TypeNode | undefined;
+          dispatcherCreationExpr: ts.CallExpression;
+      }
+    | undefined {
+    if (!ts.isIdentifier(node.name) || !node.initializer) {
+        return;
+    }
+
+    if (
+        ts.isCallExpression(node.initializer) &&
+        ts.isIdentifier(node.initializer.expression) &&
+        node.initializer.expression.text === eventDispatcherImport
+    ) {
+        const dispatcherName = node.name.text;
+        const dispatcherTyping = node.initializer.typeArguments?.[0];
+
+        return {
+            dispatcherName,
+            dispatcherTyping,
+            dispatcherCreationExpr: node.initializer
+        };
+    }
+}
diff --git a/packages/svelte2tsx/src/svelte2tsx/processInstanceScriptContent.ts b/packages/svelte2tsx/src/svelte2tsx/processInstanceScriptContent.ts
index f0b0fa33d..11fcf45d6 100644
--- a/packages/svelte2tsx/src/svelte2tsx/processInstanceScriptContent.ts
+++ b/packages/svelte2tsx/src/svelte2tsx/processInstanceScriptContent.ts
@@ -296,7 +296,8 @@ export function processInstanceScriptContent(
                     (!ts.isPropertyAssignment(parent) || parent.initializer == ident) &&
                     !ts.isPropertySignature(parent) &&
                     !ts.isPropertyDeclaration(parent) &&
-                    !ts.isTypeReferenceNode(parent)
+                    !ts.isTypeReferenceNode(parent) &&
+                    !ts.isInterfaceDeclaration(parent)
                 ) {
                     pendingStoreResolutions.push({ node: ident, parent, scope });
                 }
@@ -349,8 +350,8 @@ export function processInstanceScriptContent(
 
         generics.addIfIsGeneric(node);
 
-        if (ts.isInterfaceDeclaration(node) && node.name.text === 'ComponentEvents') {
-            events.setComponentEventsInterface(node);
+        if (ts.isInterfaceDeclaration(node) && node.name.text === '$$Events') {
+            events.setComponentEventsInterface(node, astOffset);
         }
 
         if (ts.isVariableStatement(node)) {
diff --git a/packages/svelte2tsx/src/svelte2tsx/svelteShims.ts b/packages/svelte2tsx/src/svelte2tsx/svelteShims.ts
index 9e069495d..d9d9246b1 100644
--- a/packages/svelte2tsx/src/svelte2tsx/svelteShims.ts
+++ b/packages/svelte2tsx/src/svelte2tsx/svelteShims.ts
@@ -100,6 +100,9 @@ type SvelteStore<T> = { subscribe: (run: (value: T) => any, invalidate?: any) =>
 // which helps for error messages
 type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
 
+type KeysMatching<Obj, V> = {[K in keyof Obj]-?: Obj[K] extends V ? K : never}[keyof Obj]
+declare type __Sveltets_CustomEvents<T> = {[K in KeysMatching<T, CustomEvent>]: T[K] extends CustomEvent ? T[K]['detail']: T[K]}
+
 declare var process: NodeJS.Process & { browser: boolean }
 declare var __sveltets_AnimationMove: { from: DOMRect, to: DOMRect }
 
diff --git a/packages/svelte2tsx/src/utils/htmlxparser.ts b/packages/svelte2tsx/src/utils/htmlxparser.ts
index a9a0631fd..13024210a 100644
--- a/packages/svelte2tsx/src/utils/htmlxparser.ts
+++ b/packages/svelte2tsx/src/utils/htmlxparser.ts
@@ -106,15 +106,15 @@ export function parseHtmlx(htmlx: string, options?: { emitOnTemplateError?: bool
     const parsingCode = options?.emitOnTemplateError
         ? blankPossiblyErrorOperatorOrPropertyAccess(deconstructed)
         : deconstructed;
-    const svelteHtmlxAst = parse(parsingCode).html;
+    const htmlxAst = parse(parsingCode).html;
 
     //restore our script and style tags as nodes to maintain validity with HTMLx
     for (const s of verbatimElements) {
-        svelteHtmlxAst.children.push(s);
-        svelteHtmlxAst.start = Math.min(svelteHtmlxAst.start, s.start);
-        svelteHtmlxAst.end = Math.max(svelteHtmlxAst.end, s.end);
+        htmlxAst.children.push(s);
+        htmlxAst.start = Math.min(htmlxAst.start, s.start);
+        htmlxAst.end = Math.max(htmlxAst.end, s.end);
     }
-    return svelteHtmlxAst;
+    return { htmlxAst, tags: verbatimElements };
 }
 
 const possibleOperatorOrPropertyAccess = new Set([
diff --git a/packages/svelte2tsx/svelte-shims.d.ts b/packages/svelte2tsx/svelte-shims.d.ts
index 000365821..022f58b2c 100644
--- a/packages/svelte2tsx/svelte-shims.d.ts
+++ b/packages/svelte2tsx/svelte-shims.d.ts
@@ -101,6 +101,9 @@ type SvelteStore<T> = { subscribe: (run: (value: T) => any, invalidate?: any) =>
 // which helps for error messages
 type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
 
+type KeysMatching<Obj, V> = {[K in keyof Obj]-?: Obj[K] extends V ? K : never}[keyof Obj]
+declare type __Sveltets_CustomEvents<T> = {[K in KeysMatching<T, CustomEvent>]: T[K] extends CustomEvent ? T[K]['detail']: T[K]}
+
 declare var process: NodeJS.Process & { browser: boolean }
 declare var __sveltets_AnimationMove: { from: DOMRect, to: DOMRect }
 
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface-constant/expected.tsx b/packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface-constant/expected.tsx
index 80037c2b2..82cf3c909 100644
--- a/packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface-constant/expected.tsx
+++ b/packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface-constant/expected.tsx
@@ -3,7 +3,7 @@
 
     const A = 'a';
     const B = 'b', C = 'c';
-    interface ComponentEvents {
+    interface $$Events {
         /**
          * Some doc
          */
@@ -13,7 +13,7 @@
     }
 ;
 () => (<></>);
-return { props: {}, slots: {}, getters: {}, events: {} as unknown as ComponentEvents }}
+return { props: {}, slots: {}, getters: {}, events: {} as unknown as $$Events }}
 
 export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(render())) {
 }
\ No newline at end of file
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface-constant/input.svelte b/packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface-constant/input.svelte
index d45039835..5bf60e6d6 100644
--- a/packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface-constant/input.svelte
+++ b/packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface-constant/input.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     const A = 'a';
     const B = 'b', C = 'c';
-    interface ComponentEvents {
+    interface $$Events {
         /**
          * Some doc
          */
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface-dispatcher/expected.tsx b/packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface-dispatcher/expected.tsx
new file mode 100644
index 000000000..e3c8e7993
--- /dev/null
+++ b/packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface-dispatcher/expected.tsx
@@ -0,0 +1,23 @@
+///<reference types="svelte" />
+<></>;
+import { createEventDispatcher } from 'svelte';
+function render() {
+
+    
+
+    interface $$Events {
+        /**
+         * Some *doc*
+         */
+        a: boolean;
+        b: string;
+        c;
+    }
+
+    const dispatch = createEventDispatcher<__Sveltets_CustomEvents<$$Events>>();
+;
+() => (<></>);
+return { props: {}, slots: {}, getters: {}, events: {} as unknown as $$Events }}
+
+export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(render())) {
+}
\ No newline at end of file
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface-dispatcher/input.svelte b/packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface-dispatcher/input.svelte
new file mode 100644
index 000000000..786e39127
--- /dev/null
+++ b/packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface-dispatcher/input.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+
+    interface $$Events {
+        /**
+         * Some *doc*
+         */
+        a: boolean;
+        b: string;
+        c;
+    }
+
+    const dispatch = createEventDispatcher();
+</script>
\ No newline at end of file
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface-string-literals/expected.tsx b/packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface-string-literals/expected.tsx
index 9ae3ad44e..399a6acdb 100644
--- a/packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface-string-literals/expected.tsx
+++ b/packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface-string-literals/expected.tsx
@@ -1,7 +1,7 @@
 ///<reference types="svelte" />
 <></>;function render() {
 
-    interface ComponentEvents {
+    interface $$Events {
         /**
          * Some doc
          */
@@ -11,7 +11,7 @@
     }
 ;
 () => (<></>);
-return { props: {}, slots: {}, getters: {}, events: {} as unknown as ComponentEvents }}
+return { props: {}, slots: {}, getters: {}, events: {} as unknown as $$Events }}
 
 export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(render())) {
 }
\ No newline at end of file
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface-string-literals/input.svelte b/packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface-string-literals/input.svelte
index 402e21f19..abf27bd14 100644
--- a/packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface-string-literals/input.svelte
+++ b/packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface-string-literals/input.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    interface ComponentEvents {
+    interface $$Events {
         /**
          * Some doc
          */
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface/expected.tsx b/packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface/expected.tsx
index d2accbc94..9ce778964 100644
--- a/packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface/expected.tsx
+++ b/packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface/expected.tsx
@@ -1,7 +1,7 @@
 ///<reference types="svelte" />
 <></>;function render() {
 
-    interface ComponentEvents {
+    interface $$Events {
         /**
          * Some *doc*
          */
@@ -11,7 +11,7 @@
     }
 ;
 () => (<></>);
-return { props: {}, slots: {}, getters: {}, events: {} as unknown as ComponentEvents }}
+return { props: {}, slots: {}, getters: {}, events: {} as unknown as $$Events }}
 
 export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(render())) {
 }
\ No newline at end of file
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface/input.svelte b/packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface/input.svelte
index a87e07b87..731bd37fc 100644
--- a/packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface/input.svelte
+++ b/packages/svelte2tsx/test/svelte2tsx/samples/component-events-interface/input.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    interface ComponentEvents {
+    interface $$Events {
         /**
          * Some *doc*
          */
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/component-events-strictEvents/expected.tsx b/packages/svelte2tsx/test/svelte2tsx/samples/component-events-strictEvents/expected.tsx
new file mode 100644
index 000000000..eea38391d
--- /dev/null
+++ b/packages/svelte2tsx/test/svelte2tsx/samples/component-events-strictEvents/expected.tsx
@@ -0,0 +1,17 @@
+///<reference types="svelte" />
+<></>;
+import { createEventDispatcher } from 'svelte';
+function render() {
+
+    
+
+    const dispatch = createEventDispatcher();
+    dispatch('foo');
+;
+() => (<>
+
+<button onclick={undefined}>d</button></>);
+return { props: {}, slots: {}, getters: {}, events: {'click':__sveltets_mapElementEvent('click'), 'foo': __sveltets_customEvent} }}
+
+export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(render())) {
+}
\ No newline at end of file
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/component-events-strictEvents/input.svelte b/packages/svelte2tsx/test/svelte2tsx/samples/component-events-strictEvents/input.svelte
new file mode 100644
index 000000000..a8c7abc16
--- /dev/null
+++ b/packages/svelte2tsx/test/svelte2tsx/samples/component-events-strictEvents/input.svelte
@@ -0,0 +1,8 @@
+<script strictEvents>
+    import { createEventDispatcher } from 'svelte';
+
+    const dispatch = createEventDispatcher();
+    dispatch('foo');
+</script>
+
+<button on:click>d</button>
\ No newline at end of file
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/creates-dts/expected.tsx b/packages/svelte2tsx/test/svelte2tsx/samples/creates-dts/expected.tsx
index ab8c546ba..69130333b 100644
--- a/packages/svelte2tsx/test/svelte2tsx/samples/creates-dts/expected.tsx
+++ b/packages/svelte2tsx/test/svelte2tsx/samples/creates-dts/expected.tsx
@@ -98,6 +98,9 @@ type SvelteStore<T> = { subscribe: (run: (value: T) => any, invalidate?: any) =>
 // which helps for error messages
 type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
 
+type KeysMatching<Obj, V> = {[K in keyof Obj]-?: Obj[K] extends V ? K : never}[keyof Obj]
+declare type __Sveltets_CustomEvents<T> = {[K in KeysMatching<T, CustomEvent>]: T[K] extends CustomEvent ? T[K]['detail']: T[K]}
+
 declare var process: NodeJS.Process & { browser: boolean }
 declare var __sveltets_AnimationMove: { from: DOMRect, to: DOMRect }
 
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/ts-$$generics-dts/expected.tsx b/packages/svelte2tsx/test/svelte2tsx/samples/ts-$$generics-dts/expected.tsx
index de10fcd72..04e22e766 100644
--- a/packages/svelte2tsx/test/svelte2tsx/samples/ts-$$generics-dts/expected.tsx
+++ b/packages/svelte2tsx/test/svelte2tsx/samples/ts-$$generics-dts/expected.tsx
@@ -98,6 +98,9 @@ type SvelteStore<T> = { subscribe: (run: (value: T) => any, invalidate?: any) =>
 // which helps for error messages
 type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
 
+type KeysMatching<Obj, V> = {[K in keyof Obj]-?: Obj[K] extends V ? K : never}[keyof Obj]
+declare type __Sveltets_CustomEvents<T> = {[K in KeysMatching<T, CustomEvent>]: T[K] extends CustomEvent ? T[K]['detail']: T[K]}
+
 declare var process: NodeJS.Process & { browser: boolean }
 declare var __sveltets_AnimationMove: { from: DOMRect, to: DOMRect }
 
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/ts-creates-dts/expected.tsx b/packages/svelte2tsx/test/svelte2tsx/samples/ts-creates-dts/expected.tsx
index b325b8cd8..1f56c00c3 100644
--- a/packages/svelte2tsx/test/svelte2tsx/samples/ts-creates-dts/expected.tsx
+++ b/packages/svelte2tsx/test/svelte2tsx/samples/ts-creates-dts/expected.tsx
@@ -98,6 +98,9 @@ type SvelteStore<T> = { subscribe: (run: (value: T) => any, invalidate?: any) =>
 // which helps for error messages
 type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
 
+type KeysMatching<Obj, V> = {[K in keyof Obj]-?: Obj[K] extends V ? K : never}[keyof Obj]
+declare type __Sveltets_CustomEvents<T> = {[K in KeysMatching<T, CustomEvent>]: T[K] extends CustomEvent ? T[K]['detail']: T[K]}
+
 declare var process: NodeJS.Process & { browser: boolean }
 declare var __sveltets_AnimationMove: { from: DOMRect, to: DOMRect }