From 2d67386e37f5868f0034de029139aad79b6d61ff Mon Sep 17 00:00:00 2001
From: Lyu Jason <jason.lyu@supergeo.com.tw>
Date: Tue, 4 Aug 2020 13:29:23 +0800
Subject: [PATCH 1/2] fix svelte:component on:event

---
 packages/svelte2tsx/src/htmlxtojsx.ts           | 17 ++++++-----------
 packages/svelte2tsx/src/nodes/component-type.ts |  9 +++++++++
 .../event-handler-svelte-component/expected.jsx |  1 +
 .../event-handler-svelte-component/input.svelte |  1 +
 4 files changed, 17 insertions(+), 11 deletions(-)
 create mode 100644 packages/svelte2tsx/src/nodes/component-type.ts
 create mode 100644 packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-svelte-component/expected.jsx
 create mode 100644 packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-svelte-component/input.svelte

diff --git a/packages/svelte2tsx/src/htmlxtojsx.ts b/packages/svelte2tsx/src/htmlxtojsx.ts
index 39225bde1..647ada465 100644
--- a/packages/svelte2tsx/src/htmlxtojsx.ts
+++ b/packages/svelte2tsx/src/htmlxtojsx.ts
@@ -3,6 +3,7 @@ import svelte from 'svelte/compiler';
 import { Node } from 'estree-walker';
 import { parseHtmlx } from './htmlxparser';
 import svgAttributes from './svgattributes';
+import { getTypeForComponent } from './nodes/component-type';
 
 type ElementType = string;
 const oneWayBindingAttributes: Map<string, ElementType> = new Map(
@@ -73,7 +74,7 @@ export function convertHtmlxToJsx(
                 const on = 'on';
                 //for handler assignment, we changeIt to call to our __sveltets_ensureFunction
                 str.appendRight(
-                    attr.start, `{__sveltets_instanceOf(${parent.name}).$`
+                    attr.start, `{__sveltets_instanceOf(${getTypeForComponent(parent)}).$`
                 );
                 const eventNameIndex = htmlx.indexOf(':', attr.start) + 1;
                 str.overwrite(
@@ -172,17 +173,11 @@ export function convertHtmlxToJsx(
     };
 
     const handleBinding = (attr: Node, el: Node) => {
-        const getThisTypeForComponent = (node: Node) => {
-            if (node.name === 'svelte:component' || node.name === 'svelte:self') {
-                return '__sveltets_componentType()';
-            } else {
-                return node.name;
-            }
-        };
+
         const getThisType = (node: Node) => {
             switch (node.type) {
                 case 'InlineComponent':
-                    return getThisTypeForComponent(node);
+                    return getTypeForComponent(node);
                 case 'Element':
                     return 'HTMLElement';
                 case 'Body':
@@ -229,7 +224,7 @@ export function convertHtmlxToJsx(
                 str.appendLeft(
                     attr.end,
                     `=__sveltets_instanceOf(${oneWayBindingAttributes.get(attr.name)}).${
-                        attr.name
+                    attr.name
                     })}`,
                 );
             } else {
@@ -238,7 +233,7 @@ export function convertHtmlxToJsx(
                     attr.expression.end,
                     attr.end,
                     `=__sveltets_instanceOf(${oneWayBindingAttributes.get(attr.name)}).${
-                        attr.name
+                    attr.name
                     })}`,
                 );
             }
diff --git a/packages/svelte2tsx/src/nodes/component-type.ts b/packages/svelte2tsx/src/nodes/component-type.ts
new file mode 100644
index 000000000..8e899f9cb
--- /dev/null
+++ b/packages/svelte2tsx/src/nodes/component-type.ts
@@ -0,0 +1,9 @@
+import { Node } from 'estree-walker';
+
+export function getTypeForComponent(node: Node) {
+    if (node.name === 'svelte:component' || node.name === 'svelte:self') {
+        return '__sveltets_componentType()';
+    } else {
+        return node.name;
+    }
+};
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-svelte-component/expected.jsx b/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-svelte-component/expected.jsx
new file mode 100644
index 000000000..5b85c1c8a
--- /dev/null
+++ b/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-svelte-component/expected.jsx
@@ -0,0 +1 @@
+<><sveltecomponent this={Whatever}  />{__sveltets_instanceOf(__sveltets_componentType()).$on('submit', handleSubmit)}</>
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-svelte-component/input.svelte b/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-svelte-component/input.svelte
new file mode 100644
index 000000000..7d60a5b76
--- /dev/null
+++ b/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-svelte-component/input.svelte
@@ -0,0 +1 @@
+<svelte:component this={Whatever} on:submit={handleSubmit} />

From 64b04f0efc6e0d00ba49b03bba7b5090913afff5 Mon Sep 17 00:00:00 2001
From: Lyu Jason <jason.lyu@supergeo.com.tw>
Date: Tue, 4 Aug 2020 13:51:47 +0800
Subject: [PATCH 2/2] lint

---
 packages/svelte2tsx/src/nodes/component-type.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/svelte2tsx/src/nodes/component-type.ts b/packages/svelte2tsx/src/nodes/component-type.ts
index 8e899f9cb..4f643eb75 100644
--- a/packages/svelte2tsx/src/nodes/component-type.ts
+++ b/packages/svelte2tsx/src/nodes/component-type.ts
@@ -6,4 +6,4 @@ export function getTypeForComponent(node: Node) {
     } else {
         return node.name;
     }
-};
+}