(feat) add experimental $$Events and strictEvents support (#1054)

$$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
sveltejs/rfcs#38

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,