Component event buble

Author: jasonlyu123

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

@@ -1,15 +1,23 @@
 import { Node } from "estree-walker";
 
 export function createEventHandlerTransformer() {
-    const events = new Map<string, string>();
+    const events = new Map<string, string | string[]>();
 
     const handleEventHandler = (node: Node, parent: Node) => {
         const eventName = node.name;
 
-        // pass-through
+        const handleEventHandlerBubble = () => {
+            const componentEventDef = `__sveltets_instanceOf(${parent.name})`;
+            const exp = `__sveltets_bubbleEventDef(${componentEventDef}, '${eventName}')`;
+
+            const exist = events.get(eventName);
+            events.set(eventName, exist ? [].concat(exist, exp) : exp);
+        };
+
+        // pass-through/ bubble
         if (!node.expression) {
             if (parent.type === "InlineComponent") {
-                // TODO: component
+                handleEventHandlerBubble();
             } else {
                 events.set(
                     eventName,

packages/svelte2tsx/src/svelte2tsx.ts

@@ -42,7 +42,7 @@ type TemplateProcessResult = {
     moduleScriptTag: Node;
     /** To be added later as a comment on the default class export */
     componentDocumentation: string | null;
-    events: Map<string, string>;
+    events: Map<string, string | string[]>;
 };
 
 class Scope {
@@ -542,7 +542,7 @@ function processInstanceScriptContent(str: MagicString, script: Node): InstanceS
         if (
             (ts.isPrefixUnaryExpression(parent) || ts.isPostfixUnaryExpression(parent)) &&
             parent.operator !==
-                ts.SyntaxKind.ExclamationToken /* `!$store` does not need processing */
+            ts.SyntaxKind.ExclamationToken /* `!$store` does not need processing */
         ) {
             let simpleOperator: string;
             if (parent.operator === ts.SyntaxKind.PlusPlusToken) {
@@ -844,8 +844,8 @@ function addComponentExport(
 
     const statement = `\n\n${doc}export default class ${
         className ? `${className} ` : ''
-    }{\n    $$prop_def = ${propDef}\n    $$slot_def = render().slots` +
-    `\n    $on = __sveltets_eventDef(render().events).$on\n}`;
+        }{\n    $$prop_def = ${propDef}\n    $$slot_def = render().slots` +
+        `\n    $on = __sveltets_eventDef(render().events).$on\n}`;
 
     str.append(statement);
 }
@@ -905,7 +905,7 @@ function createRenderFunction(
     scriptTag: Node,
     scriptDestination: number,
     slots: Map<string, Map<string, string>>,
-    events: Map<string, string>,
+    events: Map<string, string | string[]>,
     exportedNames: ExportedNames,
     uses$$props: boolean,
     uses$$restProps: boolean,
@@ -945,9 +945,18 @@ function createRenderFunction(
             })
             .join(', ') +
         '}';
-    const eventsDef = '{' + Array.from(events.entries())
-            .map(([evnetName, expression]) => `'${evnetName}':${expression}`)
-            .join(', ') + '}';
+
+    const eventMapEntryToString = ([evnetName, expression]: [
+        string,
+        string | string[]
+    ]) =>
+        `'${evnetName}':${
+        Array.isArray(expression) ? `[${expression}]` : expression
+        }`;
+    const eventsDef =
+        "{" +
+        Array.from(events.entries()).map(eventMapEntryToString).join(", ") +
+        "}";
 
     const returnString = `\nreturn { props: ${createPropsStr(
         exportedNames,

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

@@ -0,0 +1,10 @@
+<></>;function render() {
+<><Button ></Button>
+<Radio ></Radio></>
+return { props: {}, slots: {}, events: {'click':[__sveltets_bubbleEventDef(__sveltets_instanceOf(Button), 'click'),__sveltets_bubbleEventDef(__sveltets_instanceOf(Radio), 'click')]} }}
+
+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/event-bubble-component-multi/input.svelte

@@ -0,0 +1,2 @@
+<Button on:click></Button>
+<Radio on:click></Radio>

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

@@ -0,0 +1,9 @@
+<></>;function render() {
+<><Button ></Button></>
+return { props: {}, slots: {}, events: {'click':__sveltets_bubbleEventDef(__sveltets_instanceOf(Button), 'click')} }}
+
+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/event-bubble-component/input.svelte

@@ -0,0 +1 @@
+<Button on:click></Button>