(fix) bubble events (#433)

* (fix) bubble events

Added new property $$events_def to bubble events
Also removed some obsolete types

* add union type for multiple events

Author: dummdidumm

packages/svelte2tsx/README.md

@@ -36,11 +36,7 @@ function render() {
     return { props: { world }, slots: {}, events: {} };
 }
 
-export default class {
-    $$prop_def = __sveltets_partial(render().props);
-    $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on;
-}
+export default class _World_ extends createSvelte2TsxComponent(__sveltets_partial(render)) {}
 ```
 
 with a v3 SourceMap back to the original source.

packages/svelte2tsx/src/nodes/event-handler.ts

@@ -8,7 +8,8 @@ export function createEventHandlerTransformer() {
 
         const handleEventHandlerBubble = () => {
             const componentEventDef = `__sveltets_instanceOf(${parent.name})`;
-            const exp = `__sveltets_bubbleEventDef(${componentEventDef}.$on, '${eventName}')`;
+            // eslint-disable-next-line max-len
+            const exp = `__sveltets_bubbleEventDef(${componentEventDef}.$$events_def, '${eventName}')`;
 
             const exist = events.get(eventName);
             events.set(eventName, exist ? [].concat(exist, exp) : exp);
@@ -19,10 +20,7 @@ export function createEventHandlerTransformer() {
             if (parent.type === 'InlineComponent') {
                 handleEventHandlerBubble();
             } else {
-                events.set(
-                    eventName,
-                    getEventDefExpressionForNonCompoent(eventName, parent)
-                );
+                events.set(eventName, getEventDefExpressionForNonCompoent(eventName, parent));
             }
         }
     };
@@ -47,17 +45,11 @@ function getEventDefExpressionForNonCompoent(eventName: string, ele: Node) {
 }
 
 export function eventMapToString(events: Map<string, string | string[]>) {
-    return '{' +
-        Array.from(events.entries()).map(eventMapEntryToString).join(', ') +
-        '}';
-
+    return '{' + Array.from(events.entries()).map(eventMapEntryToString).join(', ') + '}';
 }
 
-function eventMapEntryToString([eventName, expression]: [
-    string,
-    string | string[]
-]) {
+function eventMapEntryToString([eventName, expression]: [string, string | string[]]) {
     return `'${eventName}':${
-        Array.isArray(expression) ? `[${expression}]` : expression
-        }`;
+        Array.isArray(expression) ? `__sveltets_unionType(${expression.join(',')})` : expression
+    }`;
 }

packages/svelte2tsx/svelte-shims.d.ts

@@ -14,6 +14,11 @@ declare class Svelte2TsxComponent<
      * and does not exist at runtime. Don't use this property.
      */
     $$prop_def: Props;
+    /**
+     * @internal This is for type checking capabilities only
+     * and does not exist at runtime. Don't use this property.
+     */
+    $$events_def: Events;
     /**
      * @internal This is for type checking capabilities only
      * and does not exist at runtime. Don't use this property.
@@ -41,7 +46,7 @@ declare class Svelte2TsxComponent<
      * Causes the callback function to be called whenever the component dispatches an event.
      * A function is returned that will remove the event listener when called.
      */
-    $on<K extends keyof Events>(event: K, handler: (e: SvelteExtractEvent<Events[K]>) => any): void;
+    $on<K extends keyof Events>(event: K, handler: (e: Events[K]) => any): void;
     /**
      * Causes the callback function to be called whenever the component dispatches an event.
      * A function is returned that will remove the event listener when called.
@@ -87,14 +92,7 @@ type SvelteAnimation<U extends any[]> = (node: Element, move: { from: DOMRect, t
 type SvelteAllProps = { [index: string]: any }
 type SvelteRestProps = { [index: string]: any }
 type SvelteStore<T> = { subscribe: (run: (value: T) => any, invalidate?: any) => any }
-type SvelteEventRecord = Record<string, Event | Event[]>
-type SvelteExtractEvent<T> = T extends any[] ? T[number] : T;
-type SvelteOnEvent<T, K extends keyof T> = (
-    event: K,
-    handler: (e: SvelteExtractEvent<T[K]>) => any
-) => () => void;
-type SvelteRestEvent = (event: string, handler: (e: CustomEvent) => any) => () => void
-type SvelteOnAllEvent<T> = SvelteOnEvent<T, keyof T> & SvelteRestEvent
+
 
 declare var process: NodeJS.Process & { browser: boolean }
 
@@ -124,7 +122,7 @@ declare function __sveltets_any(dummy: any): any;
 declare function __sveltets_empty(dummy: any): {};
 declare function __sveltets_componentType(): AConstructorTypeOf<Svelte2TsxComponent<any, any, any, false>>
 declare function __sveltets_invalidate<T>(getValue: () => T): T
-declare function __sveltets_eventDef<T extends SvelteEventRecord>(def: T): SvelteOnAllEvent<T>
+
 declare function __sveltets_mapWindowEvent<K extends keyof HTMLBodyElementEventMap>(
     event: K
 ): HTMLBodyElementEventMap[K];
@@ -143,11 +141,18 @@ declare function __sveltets_mapElementTag<K extends keyof SVGElementTagNameMap>(
 declare function __sveltets_mapElementTag(
     tag: any
 ): HTMLElement;
-declare function __sveltets_bubbleEventDef<
-    T extends SvelteEventRecord,
-    TEvent,
-    TKey extends keyof T = TEvent extends keyof T ? TEvent : string
->(on: SvelteOnAllEvent<T>, event: TEvent): T[TKey];
+
+declare function __sveltets_bubbleEventDef<Events, K extends keyof Events>(
+    events: Events, eventKey: K
+): Events[K];
+declare function __sveltets_bubbleEventDef(
+    events: any, eventKey: string
+): any;
+
+declare function __sveltets_unionType<T1, T2>(t1: T1, t2: T2): T1 | T2;
+declare function __sveltets_unionType<T1, T2, T3>(t1: T1, t2: T2, t3: T3): T1 | T2 | T3;
+declare function __sveltets_unionType<T1, T2, T3, T4>(t1: T1, t2: T2, t3: T3, t4: T4): T1 | T2 | T3 | T4;
+declare function __sveltets_unionType(...types: any[]): any;
 
 declare function __sveltets_awaitThen<T>(
     promise: PromiseLike<T>,

packages/svelte2tsx/test/svelte2tsx/samples/event-bubble-component-multi/expected.tsx

@@ -1,7 +1,7 @@
 <></>;function render() {
 <><Button ></Button>
 <Radio ></Radio></>
-return { props: {}, slots: {}, getters: {}, events: {'click':[__sveltets_bubbleEventDef(__sveltets_instanceOf(Button).$on, 'click'),__sveltets_bubbleEventDef(__sveltets_instanceOf(Radio).$on, 'click')]} }}
+return { props: {}, slots: {}, getters: {}, events: {'click':__sveltets_unionType(__sveltets_bubbleEventDef(__sveltets_instanceOf(Button).$$events_def, 'click'),__sveltets_bubbleEventDef(__sveltets_instanceOf(Radio).$$events_def, 'click'))} }}
 
 export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(render)) {
 }

packages/svelte2tsx/test/svelte2tsx/samples/event-bubble-component/expected.tsx

@@ -1,6 +1,6 @@
 <></>;function render() {
 <><Button ></Button></>
-return { props: {}, slots: {}, getters: {}, events: {'click':__sveltets_bubbleEventDef(__sveltets_instanceOf(Button).$on, 'click')} }}
+return { props: {}, slots: {}, getters: {}, events: {'click':__sveltets_bubbleEventDef(__sveltets_instanceOf(Button).$$events_def, 'click')} }}
 
 export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(render)) {
 }