fix svelte:component on:event (#419)

#418

Author: jasonlyu123

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
                     })}`,
                 );
             }

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;
+    }
+}

packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-svelte-component/expected.jsx

@@ -0,0 +1 @@
+<><sveltecomponent this={Whatever}  />{__sveltets_instanceOf(__sveltets_componentType()).$on('submit', handleSubmit)}</>

packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-svelte-component/input.svelte

@@ -0,0 +1 @@
+<svelte:component this={Whatever} on:submit={handleSubmit} />