(feat) add experimental $$Events and strictEvents support

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: []
+            }
+        ]);
+    });
 });

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

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>

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} />

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} />

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>

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

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);

packages/svelte2tsx/src/svelte2tsx/index.ts

@@ -53,7 +53,7 @@ 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,7 +279,11 @@ function processSvelteTemplate(
         moduleScriptTag,
         scriptTag,
         slots: slotHandler.getSlotDef(),
-        events: new ComponentEvents(eventHandler),
+        events: new ComponentEvents(
+            eventHandler,
+            tags.some((tag) => tag.attributes?.some((a) => a.name === 'strictEvents')),
+            str
+        ),
         uses$$props,
         uses$$restProps,
         uses$$slots,
@@ -461,7 +465,7 @@ export function svelte2tsx(
     addComponentExport({
         str,
         uses$$propsOr$$restProps: uses$$props || uses$$restProps,
-        strictEvents: events.hasInterface(),
+        strictEvents: events.hasStrictEvents(),
         isTsFile: options?.isTsFile,
         getters,
         exportedNames,