(feat) better typings for actions (#421)

#416

Author: dummdidumm

packages/svelte2tsx/src/htmlxtojsx.ts

@@ -74,14 +74,11 @@ export function convertHtmlxToJsx(
                 const on = 'on';
                 //for handler assignment, we changeIt to call to our __sveltets_ensureFunction
                 str.appendRight(
-                    attr.start, `{__sveltets_instanceOf(${getTypeForComponent(parent)}).$`
+                    attr.start,
+                    `{__sveltets_instanceOf(${getTypeForComponent(parent)}).$`,
                 );
                 const eventNameIndex = htmlx.indexOf(':', attr.start) + 1;
-                str.overwrite(
-                    htmlx.indexOf(on, attr.start) + on.length,
-                    eventNameIndex,
-                    `('`
-                );
+                str.overwrite(htmlx.indexOf(on, attr.start) + on.length, eventNameIndex, `('`);
                 const eventEnd = htmlx.lastIndexOf('=', attr.expression.start);
                 str.overwrite(eventEnd, attr.expression.start, `', `);
                 str.overwrite(attr.expression.end, attr.end, ')}');
@@ -103,8 +100,12 @@ export function convertHtmlxToJsx(
         }
     };
 
-    const handleActionDirective = (attr: Node) => {
-        str.overwrite(attr.start, attr.start + 'use:'.length, '{...__sveltets_ensureAction(');
+    const handleActionDirective = (attr: Node, parent: Node) => {
+        str.overwrite(
+            attr.start,
+            attr.start + 'use:'.length,
+            `{...__sveltets_ensureAction(__sveltets_mapElementTag('${parent.name}'),`,
+        );
 
         if (!attr.expression) {
             str.appendLeft(attr.end, ')}');
@@ -173,7 +174,6 @@ export function convertHtmlxToJsx(
     };
 
     const handleBinding = (attr: Node, el: Node) => {
-
         const getThisType = (node: Node) => {
             switch (node.type) {
                 case 'InlineComponent':
@@ -224,7 +224,7 @@ export function convertHtmlxToJsx(
                 str.appendLeft(
                     attr.end,
                     `=__sveltets_instanceOf(${oneWayBindingAttributes.get(attr.name)}).${
-                    attr.name
+                        attr.name
                     })}`,
                 );
             } else {
@@ -233,7 +233,7 @@ export function convertHtmlxToJsx(
                     attr.expression.end,
                     attr.end,
                     `=__sveltets_instanceOf(${oneWayBindingAttributes.get(attr.name)}).${
-                    attr.name
+                        attr.name
                     })}`,
                 );
             }
@@ -611,7 +611,7 @@ export function convertHtmlxToJsx(
                         handleClassDirective(node);
                         break;
                     case 'Action':
-                        handleActionDirective(node);
+                        handleActionDirective(node, parent);
                         break;
                     case 'Transition':
                         handleTransitionDirective(node);

packages/svelte2tsx/svelte-shims.d.ts

@@ -9,7 +9,7 @@ declare module '*.svelte' {
 
 type AConstructorTypeOf<T> = new (...args: any[]) => T;
 
-type SvelteAction<U extends any[]> = (node: HTMLElement, ...args:U) => {
+type SvelteAction<U extends any[], El extends any> = (node: El, ...args:U) => {
 	update?: (...args:U) => void,
 	destroy?: () => void
 } | void
@@ -48,7 +48,11 @@ type SvelteOnAllEvent<T> = SvelteOnEvent<T, keyof T> & SvelteRestEvent
 declare var process: NodeJS.Process & { browser: boolean }
 
 declare function __sveltets_ensureAnimation<U extends any[]>(animation: SvelteAnimation<U>, ...args: U): {};
-declare function __sveltets_ensureAction<U extends any[]>(action: SvelteAction<U>, ...args: U): {};
+declare function __sveltets_ensureAction<U extends any[], El extends any>(
+    el: El,
+    action: SvelteAction<U, El>,
+    ...args: U
+): {};
 declare function __sveltets_ensureTransition<U extends any[]>(transition: SvelteTransition<U>, ...args: U): {};
 declare function __sveltets_ensureFunction(expression: (e: Event & { detail?: any }) => unknown ): {};
 declare function __sveltets_ensureType<T>(type: AConstructorTypeOf<T>, el: T): {};
@@ -73,6 +77,15 @@ declare function __sveltets_mapBodyEvent<K extends keyof WindowEventMap>(
 declare function __sveltets_mapElementEvent<K extends keyof HTMLElementEventMap>(
     event: K
 ): HTMLElementEventMap[K];
+declare function __sveltets_mapElementTag<K extends keyof ElementTagNameMap>(
+    tag: K
+): ElementTagNameMap[K];
+declare function __sveltets_mapElementTag<K extends keyof SVGElementTagNameMap>(
+    tag: K
+): SVGElementTagNameMap[K];
+declare function __sveltets_mapElementTag(
+    tag: any
+): HTMLElement;
 declare function __sveltets_bubbleEventDef<
     T extends SvelteEventRecord,
     TEvent,

packages/svelte2tsx/test/htmlx2jsx/samples/action-bare/expected.jsx

@@ -1 +1 @@
-<><h1 {...__sveltets_ensureAction(blink)}>Hello</h1></>
+<><h1 {...__sveltets_ensureAction(__sveltets_mapElementTag('h1'),blink)}>Hello</h1></>

packages/svelte2tsx/test/htmlx2jsx/samples/action-nested/expected.jsx

@@ -0,0 +1,6 @@
+<><svg {...__sveltets_ensureAction(__sveltets_mapElementTag('svg'),svgAction)}></svg>
+<div {...__sveltets_ensureAction(__sveltets_mapElementTag('div'),divAction)}>
+  <input {...__sveltets_ensureAction(__sveltets_mapElementTag('input'),action)} />
+  <p {...__sveltets_ensureAction(__sveltets_mapElementTag('p'),pAction)}></p>
+  <unknownTag {...__sveltets_ensureAction(__sveltets_mapElementTag('unknownTag'),unknownAction)}></unknownTag>
+</div></>

packages/svelte2tsx/test/htmlx2jsx/samples/action-nested/input.svelte

@@ -0,0 +1,6 @@
+<svg use:svgAction></svg>
+<div use:divAction>
+  <input use:action />
+  <p use:pAction></p>
+  <unknownTag use:unknownAction></unknownTag>
+</div>

packages/svelte2tsx/test/htmlx2jsx/samples/action-params/expected.jsx

@@ -1 +1 @@
-<><h1 {...__sveltets_ensureAction(blink,500,2)}>Hello</h1></>
+<><h1 {...__sveltets_ensureAction(__sveltets_mapElementTag('h1'),blink,500,2)}>Hello</h1></>

packages/svelte2tsx/test/htmlx2jsx/samples/directive-quoted/expected.jsx

@@ -1,6 +1,6 @@
 <><h1 onclick={()=>console.log("click")}>Hello</h1>
 <Component />{__sveltets_instanceOf(Component).$on('click', test)}
-<img {...__sveltets_ensureAction(action,thing)} />
+<img {...__sveltets_ensureAction(__sveltets_mapElementTag('img'),action,thing)} />
 <img {...__sveltets_ensureTransition(fade, params)} />
 <img {...__sveltets_ensureType(Boolean, !!(classthing))} />
 <img {...__sveltets_ensureAnimation(thing, params)} />