bubble svelte:window and svelte:body

Author: jasonlyu123

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

@@ -1,4 +1,4 @@
-import { Node } from 'estree-walker';
+import { Node } from "estree-walker";
 
 export function createEventHandlerTransformer() {
     const events = new Map<string, string>();
@@ -8,14 +8,32 @@ export function createEventHandlerTransformer() {
 
         // pass-through
         if (!node.expression) {
-            if (parent.type === "Element") {
-                events.set(eventName, `__sveltets_mapElementEvent('${eventName}')`);
+            if (parent.type === "InlineComponent") {
+                // TODO: component
+            } else {
+                events.set(
+                    eventName,
+                    getEventDefExpressionForNonCompoent(eventName, parent)
+                );
             }
         }
     };
 
     return {
         handleEventHandler,
-        getEvents: () => events
+        getEvents: () => events,
     };
 }
+
+function getEventDefExpressionForNonCompoent(eventName: string, ele: Node) {
+    switch (ele.type) {
+        case "Element":
+            return `__sveltets_mapElementEvent('${eventName}')`;
+        case "Body":
+            return `__sveltets_mapBodyEvent('${eventName}')`;
+        case "Window":
+            return `__sveltets_mapWindowEvent('${eventName}')`;
+        default:
+            break;
+    }
+}

packages/svelte2tsx/svelte-shims.d.ts

@@ -62,9 +62,16 @@ 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>(
+declare function __sveltets_mapWindowEvent<K extends keyof HTMLBodyElementEventMap>(
     event: K
-): GlobalEventHandlersEventMap[K];
+): HTMLBodyElementEventMap[K];
+declare function __sveltets_mapBodyEvent<K extends keyof WindowEventMap>(
+    event: K
+): WindowEventMap[K];
 declare function __sveltets_mapElementEvent<K extends keyof HTMLElementEventMap>(
     event: K
 ): HTMLElementEventMap[K];
+declare function __sveltets_bubbleEventDef<
+    T extends SvelteEventRecord,
+    K extends keyof T
+>(componentDef: SvelteEventHandling<T>, event: K): T[K]

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

@@ -0,0 +1,10 @@
+<></>;function render() {
+<><sveltebody onclick={undefined}></sveltebody>
+<sveltewindow onresize={undefined}></sveltewindow></>
+return { props: {}, slots: {}, events: {'click':__sveltets_mapBodyEvent('click'), 'resize':__sveltets_mapWindowEvent('resize')} }}
+
+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/svelte-element-event-bubble/input.svelte

@@ -0,0 +1,2 @@
+<svelte:body on:click></svelte:body>
+<svelte:window on:resize></svelte:window>