event type check spec

packages/svelte2tsx/README.md

@@ -33,12 +33,13 @@ function render() {
     <>
         <h1>hello {world}</h1>
     </>;
-    return { props: { world }, slots: {} };
+    return { props: { world }, slots: {}, events: {} };
 }
 
 export default class {
     $$prop_def = __sveltets_partial(render().props);
-    $$slot_def = render().slots;
+    $$slot_def = render().slots
+    $on = __sveltets_eventDef(render().events).$on;
 }
 ```
 

packages/svelte2tsx/src/svelte2tsx.ts

@@ -834,10 +834,10 @@ function addComponentExport(
 
     const doc = formatComponentDocumentation(componentDocumentation);
 
-    // eslint-disable-next-line max-len
     const statement = `\n\n${doc}export default class ${
         className ? `${className} ` : ''
-    }{\n    $$prop_def = ${propDef}\n    $$slot_def = render().slots\n}`;
+    }{\n    $$prop_def = ${propDef}\n    $$slot_def = render().slots` +
+    `\n    $on = __sveltets_eventDef(render().events).$on\n}`;
 
     str.append(statement);
 }
@@ -939,7 +939,7 @@ function createRenderFunction(
 
     const returnString = `\nreturn { props: ${createPropsStr(
         exportedNames,
-    )}, slots: ${slotsAsDef} }}`;
+    )}, slots: ${slotsAsDef}, events: {} }}`;
     str.append(returnString);
 }
 

packages/svelte2tsx/svelte-shims.d.ts

@@ -1,55 +1,70 @@
 declare module '*.svelte' {
     export default class {
-		$$prop_def: any;
-		$$slot_def: any;
+        $$prop_def: any;
+        $$slot_def: any;
+
+        $on(event: string, handler: (e: Event) => any): void
     }
 }
 
-type AConstructorTypeOf<T> = new (...args:any[]) => T;
+type AConstructorTypeOf<T> = new (...args: any[]) => T;
 
-type SvelteAction<U extends any[]> = (node: HTMLElement, ...args:U) => {
-	update?: (...args:U) => void,
-	destroy?: () => void
+type SvelteAction<U extends any[]> = (node: HTMLElement, ...args: U) => {
+    update?: (...args: U) => void,
+    destroy?: () => void
 }
 
-
 type SvelteTransitionConfig = {
-	delay?: number,
-	duration?: number,
-	easing?: (t: number) => number,
-	css?: (t: number, u: number) => string,
-	tick?: (t: number, u: number) => void
+    delay?: number,
+    duration?: number,
+    easing?: (t: number) => number,
+    css?: (t: number, u: number) => string,
+    tick?: (t: number, u: number) => void
 }
 
-type SvelteTransition<U extends any[]> = (node: Element, ...args:U) => SvelteTransitionConfig | (() => SvelteTransitionConfig)
+type SvelteTransition<U extends any[]> = (node: Element, ...args: U) => SvelteTransitionConfig | (() => SvelteTransitionConfig)
 
-type SvelteAnimation<U extends any[]> = (node: Element, move: { from: DOMRect, to: DOMRect}, ...args:U) => {
+type SvelteAnimation<U extends any[]> = (node: Element, move: { from: DOMRect, to: DOMRect }, ...args: U) => {
     delay?: number,
-	duration?: number,
-	easing?: (t: number) => number,
-	css?: (t: number, u: number) => string,
-	tick?: (t: number, u: number) => void
+    duration?: number,
+    easing?: (t: number) => number,
+    css?: (t: number, u: number) => string,
+    tick?: (t: number, u: number) => void
 }
 
-type SvelteAllProps = {	[index: string]: any }
+type SvelteAllProps = { [index: string]: any }
 type SvelteRestProps = { [index: string]: any }
-type SvelteStore<T> =  { subscribe: (run: (value:T) => any, invalidate?: any) => any }
+type SvelteStore<T> = { subscribe: (run: (value: T) => any, invalidate?: any) => any }
 type SvelteComponent = import('*.svelte').default
+type SvelteEventRecord = Record<string, Event | Event[]>
+type SvelteExtractEvent<T> = T extends any[] ? T[number] : T;
+
+interface SvelteEventHandling<T extends SvelteEventRecord> {
+    $on<K extends keyof T>(event: K, handler: (e: SvelteExtractEvent<T[K]>) => any): void
+    $on(event: string, handler: (e: Event) => any): void
+}
 
 declare var process: NodeJS.Process & { browser: boolean }
 
 declare function __sveltets_ensureAnimation<U extends any[]>(animation: SvelteAnimation<U>, ...args: U): any;
 declare function __sveltets_ensureAction<U extends any[]>(action: SvelteAction<U>, ...args: U): any;
 declare function __sveltets_ensureTransition<U extends any[]>(transition: SvelteTransition<U>, ...args: U): any;
-declare function __sveltets_ensureFunction(expression: (e: Event) => unknown ):any;
+declare function __sveltets_ensureFunction(expression: (e: Event) => unknown): any;
 declare function __sveltets_ensureType<T>(type: AConstructorTypeOf<T>, el: T): any;
 declare function __sveltets_instanceOf<T>(type: AConstructorTypeOf<T>): T;
 declare function __sveltets_allPropsType(): SvelteAllProps
 declare function __sveltets_restPropsType(): SvelteRestProps
 declare function __sveltets_partial<T>(obj: T): Partial<T>;
 declare function __sveltets_partial_with_any<T>(obj: T): Partial<T> & SvelteAllProps
 declare function __sveltets_with_any<T>(obj: T): T & SvelteAllProps
-declare function __sveltets_store_get<T=any>(store: SvelteStore<T>): T
+declare function __sveltets_store_get<T = any>(store: SvelteStore<T>): T
 declare function __sveltets_any(dummy: any): any;
 declare function __sveltets_componentType(): AConstructorTypeOf<SvelteComponent>
 declare function __sveltets_invalidate<T>(getValue: () => T): T
+declare function __sveltets_eventDef<T extends SvelteEventRecord>(def: T): SvelteEventHandling<T>
+declare function __sveltets_mapGlobalEvent<K extends keyof GlobalEventHandlersEventMap>(
+    event: K
+): GlobalEventHandlersEventMap[K];
+declare function __sveltets_mapElementEvent<K extends keyof HTMLElementEventMap>(
+    event: K
+): HTMLElementEventMap[K];

packages/svelte2tsx/test/sourcemaps/event-binding.html

@@ -3,11 +3,12 @@
                                                                  1====  2================== 
 <button onclick={__sveltets_store_get(check) ? method1 : method2} >Bla</button></>
                                       3====  4==================
-return { props: {}, slots: {} }}
+return { props: {}, slots: {}, events: {} }}
 
 export default class {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
+    $on = __sveltets_eventDef(render().events).$on
 }
 !Expected
 <Component on:click={$check ? method1 : method2} />

packages/svelte2tsx/test/sourcemaps/let.html

@@ -4,11 +4,12 @@
 ;
 <>
 </>
-return { props: {}, slots: {} }}
+return { props: {}, slots: {}, events: {} }}
 
 export default class {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
+    $on = __sveltets_eventDef(render().events).$on
 }
 !Expected
 <script>

packages/svelte2tsx/test/sourcemaps/repl.html

@@ -176,11 +176,12 @@
 	</>}}}
 </div>
 </>
-return { props: {slug: slug , chapter: chapter}, slots: {} }}
+return { props: {slug: slug , chapter: chapter}, slots: {}, events: {} }}
 
 export default class {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
+    $on = __sveltets_eventDef(render().events).$on
 }
 !Expected
 <script context="module">

packages/svelte2tsx/test/svelte2tsx/samples/array-binding-export/expected.tsx

@@ -3,9 +3,10 @@
      let [a,b,c] = [1,2,3];
 ;
 <></>
-return { props: {a: a , b: b , c: c}, slots: {} }}
+return { props: {a: a , b: b , c: c}, slots: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
+    $on = __sveltets_eventDef(render().events).$on
 }

packages/svelte2tsx/test/svelte2tsx/samples/ast-offset-none/expected.tsx

@@ -1,9 +1,10 @@
 <></>;function render() {
 __sveltets_store_get(var);
 <></>
-return { props: {}, slots: {} }}
+return { props: {}, slots: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-}
+    $on = __sveltets_eventDef(render().events).$on
+}

packages/svelte2tsx/test/svelte2tsx/samples/ast-offset-some/expected.tsx

@@ -1,9 +1,10 @@
 <></>;function render() {
    __sveltets_store_get(var);
 <></>
-return { props: {}, slots: {} }}
+return { props: {}, slots: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-}
+    $on = __sveltets_eventDef(render().events).$on
+}

packages/svelte2tsx/test/svelte2tsx/samples/await-with-$store/expected.tsx

@@ -11,9 +11,10 @@ function render() {
 </>; _$$p.then((data) => {<>
 	{data}
 </>})}}</>
-return { props: {}, slots: {} }}
+return { props: {}, slots: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-}
+    $on = __sveltets_eventDef(render().events).$on
+}

packages/svelte2tsx/test/svelte2tsx/samples/binding-group-store/expected.tsx

@@ -1,8 +1,9 @@
 <></>;function render() {
 <><input id="dom-input" type="radio" {...__sveltets_any(__sveltets_store_get(compile_options).generate)} value="dom"/></>
-return { props: {}, slots: {} }}
+return { props: {}, slots: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
+    $on = __sveltets_eventDef(render().events).$on
 }

packages/svelte2tsx/test/svelte2tsx/samples/circle-drawer-example/expected.tsx

@@ -87,9 +87,10 @@
 		<input type="range" value={selected.r} oninput={adjust}/>
 	</div>
 </>}}}</>
-return { props: {}, slots: {} }}
+return { props: {}, slots: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-}
+    $on = __sveltets_eventDef(render().events).$on
+}

packages/svelte2tsx/test/svelte2tsx/samples/component-default-slot/expected.tsx

@@ -6,9 +6,10 @@
 <div>
     <slot a={b}>Hello</slot>
 </div></>
-return { props: {}, slots: {default: {a:b}} }}
+return { props: {}, slots: {default: {a:b}}, events: {} }}
 
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-}
+    $on = __sveltets_eventDef(render().events).$on
+}

packages/svelte2tsx/test/svelte2tsx/samples/component-multiple-slots/expected.tsx

@@ -9,9 +9,10 @@
     <slot a={b}>Hello</slot>
     <slot name="test" c={d} e={e}></slot>
 </div></>
-return { props: {}, slots: {default: {a:b}, test: {c:d, e:e}} }}
+return { props: {}, slots: {default: {a:b}, test: {c:d, e:e}}, events: {} }}
 
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-}
+    $on = __sveltets_eventDef(render().events).$on
+}

packages/svelte2tsx/test/svelte2tsx/samples/component-slot-crazy-attributes/expected.tsx

@@ -6,9 +6,10 @@
 <div>
     <slot a={b} b={b} c="b" d={`a${b}`} e={b} >Hello</slot>
 </div></>
-return { props: {}, slots: {default: {a:b, b:b, c:"b", d:"__svelte_ts_string", e:b}} }}
+return { props: {}, slots: {default: {a:b, b:b, c:"b", d:"__svelte_ts_string", e:b}}, events: {} }}
 
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-}
+    $on = __sveltets_eventDef(render().events).$on
+}

packages/svelte2tsx/test/svelte2tsx/samples/component-with-documentation/expected.tsx

@@ -2,10 +2,11 @@
 <>
 
 <main>At least I am documented</main></>
-return { props: {}, slots: {} }}
+return { props: {}, slots: {}, events: {} }}
 
 /** This component does nothing at all */
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
+    $on = __sveltets_eventDef(render().events).$on
 }

packages/svelte2tsx/test/svelte2tsx/samples/component-with-indented-multiline-documentation/expected.tsx

@@ -2,7 +2,7 @@
 <>
 
 <main>At least I am documented</main></>
-return { props: {}, slots: {} }}
+return { props: {}, slots: {}, events: {} }}
 
 /**
  * This component has indented multiline documentation:
@@ -20,4 +20,5 @@ return { props: {}, slots: {} }}
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
+    $on = __sveltets_eventDef(render().events).$on
 }

packages/svelte2tsx/test/svelte2tsx/samples/component-with-multiline-documentation/expected.tsx

@@ -2,7 +2,7 @@
 <>
 
 <main>At least I am documented</main></>
-return { props: {}, slots: {} }}
+return { props: {}, slots: {}, events: {} }}
 
 /**
  * This component has multiline documentation:
@@ -14,4 +14,5 @@ return { props: {}, slots: {} }}
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
+    $on = __sveltets_eventDef(render().events).$on
 }

packages/svelte2tsx/test/svelte2tsx/samples/export-arrow-function/expected.tsx

@@ -6,9 +6,10 @@
     }
 ;
 <></>
-return { props: {f: f}, slots: {} }}
+return { props: {f: f}, slots: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
+    $on = __sveltets_eventDef(render().events).$on
 }

packages/svelte2tsx/test/svelte2tsx/samples/export-const/expected.tsx

@@ -3,9 +3,10 @@
      const name: string = "world";
 ;
 <></>
-return { props: {name: name} as {name?: string}, slots: {} }}
+return { props: {name: name} as {name?: string}, slots: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
+    $on = __sveltets_eventDef(render().events).$on
 }

packages/svelte2tsx/test/svelte2tsx/samples/export-has-type/expected.tsx

@@ -5,9 +5,10 @@
      let b: A = {};b = __sveltets_any(b);;
 ;
 <></>
-return { props: {a: a , b: b} as {a: A, b?: A}, slots: {} }}
+return { props: {a: a , b: b} as {a: A, b?: A}, slots: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
+    $on = __sveltets_eventDef(render().events).$on
 }

packages/svelte2tsx/test/svelte2tsx/samples/export-interface/expected.tsx

@@ -2,9 +2,10 @@
     export interface A {}
 ;<></>;function render() {
 <></>
-return { props: {}, slots: {} }}
+return { props: {}, slots: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
+    $on = __sveltets_eventDef(render().events).$on
 }

packages/svelte2tsx/test/svelte2tsx/samples/export-js-strictMode/expected.tsx

@@ -5,9 +5,10 @@
      let c: number = 123;c = __sveltets_any(c);;
 ;
 <></>
-return { props: {a: a , b: b , c: c} as {a: number, b: number | undefined, c?: number}, slots: {} }}
+return { props: {a: a , b: b , c: c} as {a: number, b: number | undefined, c?: number}, slots: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
+    $on = __sveltets_eventDef(render().events).$on
 }