bubble event again

Author: jasonlyu123

packages/svelte2tsx/src/interfaces.ts

@@ -15,12 +15,12 @@ export interface InstanceScriptProcessResult {
     uses$$props: boolean;
     uses$$restProps: boolean;
     getters: Set<string>;
-    events: Map<string, string | string[]>;
 }
 
 export interface CreateRenderFunctionPara extends InstanceScriptProcessResult {
     str: MagicString;
     scriptTag: Node;
     scriptDestination: number;
     slots: Map<string, Map<string, string>>;
+    events: Map<string, string | string[]>;
 }

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

@@ -8,7 +8,7 @@ export function createEventHandlerTransformer() {
 
         const handleEventHandlerBubble = () => {
             const componentEventDef = `__sveltets_instanceOf(${parent.name})`;
-            const exp = `__sveltets_bubbleEventDef(${componentEventDef}, '${eventName}')`;
+            const exp = `__sveltets_bubbleEventDef(${componentEventDef}.$on, '${eventName}')`;
 
             const exist = events.get(eventName);
             events.set(eventName, exist ? [].concat(exist, exp) : exp);

packages/svelte2tsx/src/svelte2tsx.ts

@@ -863,7 +863,7 @@ function addComponentExport(
             className ? `${className} ` : ''
         }{\n    $$prop_def = ${propDef}\n    $$slot_def = render().slots` +
         createClassGetters(getters) +
-        `\n    $on = __sveltets_eventDef(render().events).$on` +
+        `\n    $on = __sveltets_eventDef(render().events)` +
         '\n}';
 
     str.append(statement);

packages/svelte2tsx/svelte-shims.d.ts

@@ -38,11 +38,12 @@ type SvelteStore<T> = { subscribe: (run: (value: T) => any, invalidate?: 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
-}
+type SvelteEventOnEvent<T, K extends keyof T> = (
+    event: K,
+    handler: (e: SvelteExtractEvent<T[K]>) => any
+) => void;
+type SvelteAllEvent = (event: string, handler: (e: Event) => any) => void
+type SvelteOnEvent<T> = SvelteEventOnEvent<T, keyof T> & SvelteAllEvent
 
 declare var process: NodeJS.Process & { browser: boolean }
 
@@ -61,7 +62,7 @@ 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_eventDef<T extends SvelteEventRecord>(def: T): SvelteOnEvent<T>
 declare function __sveltets_mapWindowEvent<K extends keyof HTMLBodyElementEventMap>(
     event: K
 ): HTMLBodyElementEventMap[K];
@@ -73,5 +74,6 @@ declare function __sveltets_mapElementEvent<K extends keyof HTMLElementEventMap>
 ): HTMLElementEventMap[K];
 declare function __sveltets_bubbleEventDef<
     T extends SvelteEventRecord,
-    K extends keyof T
->(componentDef: SvelteEventHandling<T>, event: K): T[K]
+    TEvent,
+    TKey extends keyof T = TEvent extends keyof T ? TEvent : string
+>(componentDef: SvelteOnEvent<T>, event: TEvent): T[TKey];

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

@@ -8,7 +8,7 @@
 export default class {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }
 !Expected
 <Component on:click={$check ? method1 : method2} />

packages/svelte2tsx/test/sourcemaps/let.html

@@ -9,7 +9,7 @@
 export default class {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }
 !Expected
 <script>

packages/svelte2tsx/test/sourcemaps/repl.html

@@ -182,7 +182,7 @@
 export default class {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }
 !Expected
 <script context="module">

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

@@ -8,5 +8,5 @@ return { props: {a: a , b: b , c: c}, slots: {}, getters: {}, events: {} }}
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

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

@@ -6,5 +6,5 @@ return { props: {}, slots: {}, getters: {}, events: {} }}
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

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

@@ -6,5 +6,5 @@ return { props: {}, slots: {}, getters: {}, events: {} }}
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

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

@@ -17,5 +17,5 @@ return { props: {}, slots: {}, getters: {}, events: {} }}
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

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

@@ -5,5 +5,5 @@ return { props: {}, slots: {}, getters: {}, events: {} }}
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

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

@@ -92,5 +92,5 @@ return { props: {}, slots: {}, getters: {}, events: {} }}
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

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

@@ -11,5 +11,5 @@ return { props: {}, slots: {default: {a:b}}, getters: {}, events: {} }}
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

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

@@ -14,5 +14,5 @@ return { props: {}, slots: {default: {a:b}, test: {c:d, e:e}}, getters: {}, even
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

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

@@ -11,5 +11,5 @@ return { props: {}, slots: {default: {a:b, b:b, c:"b", d:"__svelte_ts_string", e
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

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

@@ -8,5 +8,5 @@ return { props: {}, slots: {}, getters: {}, events: {} }}
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

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

@@ -20,5 +20,5 @@ return { props: {}, slots: {}, getters: {}, events: {} }}
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

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

@@ -14,5 +14,5 @@ return { props: {}, slots: {}, getters: {}, events: {} }}
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

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

@@ -1,10 +1,10 @@
 <></>;function render() {
 <><Button ></Button>
 <Radio ></Radio></>
-return { props: {}, slots: {}, getters: {}, events: {'click':[__sveltets_bubbleEventDef(__sveltets_instanceOf(Button), 'click'),__sveltets_bubbleEventDef(__sveltets_instanceOf(Radio), 'click')]} }}
+return { props: {}, slots: {}, getters: {}, events: {'click':[__sveltets_bubbleEventDef(__sveltets_instanceOf(Button).$on, 'click'),__sveltets_bubbleEventDef(__sveltets_instanceOf(Radio).$on, 'click')]} }}
 
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

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

@@ -1,9 +1,9 @@
 <></>;function render() {
 <><Button ></Button></>
-return { props: {}, slots: {}, getters: {}, events: {'click':__sveltets_bubbleEventDef(__sveltets_instanceOf(Button), 'click')} }}
+return { props: {}, slots: {}, getters: {}, events: {'click':__sveltets_bubbleEventDef(__sveltets_instanceOf(Button).$on, 'click')} }}
 
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

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

@@ -5,5 +5,5 @@ return { props: {}, slots: {}, getters: {}, events: {'click':__sveltets_mapEleme
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

packages/svelte2tsx/test/svelte2tsx/samples/event-bubble-svelte-element/expected.tsx

@@ -6,5 +6,5 @@ return { props: {}, slots: {}, getters: {}, events: {'click':__sveltets_mapBodyE
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

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

@@ -11,5 +11,5 @@ return { props: {f: f}, slots: {}, getters: {}, events: {} }}
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

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

@@ -9,5 +9,5 @@ export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
     get Foo() { return render().getters.Foo }
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

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

@@ -12,5 +12,5 @@ export default class Input__SvelteComponent_ {
     get name() { return render().getters.name }
     get SOME() { return render().getters.SOME }
     get CONSTANT() { return render().getters.CONSTANT }
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

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

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

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

@@ -7,5 +7,5 @@ return { props: {}, slots: {}, getters: {}, events: {} }}
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

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

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

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

@@ -10,5 +10,5 @@ return { props: {name: name , name2: name2}, slots: {}, getters: {}, events: {}
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

packages/svelte2tsx/test/svelte2tsx/samples/export-references-local/expected.tsx

@@ -9,5 +9,5 @@ return { props: {name: name}, slots: {}, getters: {}, events: {} }}
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

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

@@ -10,5 +10,5 @@ return { props: {a: a , b: b , c: c} as {a: number, b: number | undefined, c?: n
 export default class Input__SvelteComponent_ {
     $$prop_def = render().props
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

packages/svelte2tsx/test/svelte2tsx/samples/export-with-default-multi/expected.tsx

@@ -10,5 +10,5 @@ return { props: {name: name , world: world}, slots: {}, getters: {}, events: {}
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

packages/svelte2tsx/test/svelte2tsx/samples/import-single-quote/expected.tsx

@@ -11,5 +11,5 @@ return { props: {}, slots: {}, getters: {}, events: {} }}
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

packages/svelte2tsx/test/svelte2tsx/samples/imports/expected.tsx

@@ -15,5 +15,5 @@ return { props: {world: world}, slots: {}, getters: {}, events: {} }}
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

packages/svelte2tsx/test/svelte2tsx/samples/module-script-and-script-in-line/expected.tsx

@@ -6,5 +6,5 @@ return { props: {world: world}, slots: {}, getters: {}, events: {} }}
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

packages/svelte2tsx/test/svelte2tsx/samples/module-script-and-script-in-line2/expected.tsx

@@ -6,5 +6,5 @@ return { props: {world: world}, slots: {}, getters: {}, events: {} }}
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

packages/svelte2tsx/test/svelte2tsx/samples/module-script-and-script/expected.tsx

@@ -13,5 +13,5 @@ return { props: {world: world}, slots: {}, getters: {}, events: {} }}
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

packages/svelte2tsx/test/svelte2tsx/samples/module-script-and-script2/expected.tsx

@@ -13,5 +13,5 @@ return { props: {world: world}, slots: {}, getters: {}, events: {} }}
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

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

@@ -10,5 +10,5 @@ return { props: {number1: number1 , number2: number2} as {number1: number, numbe
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

packages/svelte2tsx/test/svelte2tsx/samples/nested-$-variables-script/expected.tsx

@@ -27,5 +27,5 @@ return { props: {}, slots: {}, getters: {}, events: {} }}
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

packages/svelte2tsx/test/svelte2tsx/samples/nested-$-variables-template/expected.tsx

@@ -27,5 +27,5 @@ return { props: {}, slots: {}, getters: {}, events: {} }}
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

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

@@ -8,5 +8,5 @@ return { props: {rename: rename}, slots: {}, getters: {}, events: {} }}
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

packages/svelte2tsx/test/svelte2tsx/samples/reactive-block/expected.tsx

@@ -11,5 +11,5 @@ return { props: {}, slots: {}, getters: {}, events: {} }}
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

packages/svelte2tsx/test/svelte2tsx/samples/reactive-declare-object/expected.tsx

@@ -9,5 +9,5 @@ return { props: {}, slots: {}, getters: {}, events: {} }}
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

packages/svelte2tsx/test/svelte2tsx/samples/reactive-declare/expected.tsx

@@ -12,5 +12,5 @@ return { props: {}, slots: {}, getters: {}, events: {} }}
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

packages/svelte2tsx/test/svelte2tsx/samples/renamed-exports/expected.tsx

@@ -10,5 +10,5 @@ return { props: {name3: name , name4: name2}, slots: {}, getters: {}, events: {}
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

packages/svelte2tsx/test/svelte2tsx/samples/script-and-module-script/expected.tsx

@@ -13,5 +13,5 @@ return { props: {world: world}, slots: {}, getters: {}, events: {} }}
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }

packages/svelte2tsx/test/svelte2tsx/samples/script-inside-head-after-toplevel-script/expected.tsx

@@ -17,5 +17,5 @@ return { props: {}, slots: {}, getters: {}, events: {} }}
 export default class Input__SvelteComponent_ {
     $$prop_def = __sveltets_partial(render().props)
     $$slot_def = render().slots
-    $on = __sveltets_eventDef(render().events).$on
+    $on = __sveltets_eventDef(render().events)
 }