diff --git a/packages/svelte2tsx/src/htmlxtojsx.ts b/packages/svelte2tsx/src/htmlxtojsx.ts
index 647ada465..0a95f80e3 100644
--- a/packages/svelte2tsx/src/htmlxtojsx.ts
+++ b/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);
diff --git a/packages/svelte2tsx/svelte-shims.d.ts b/packages/svelte2tsx/svelte-shims.d.ts
index 0aa8a23f4..b2cbdc54b 100644
--- a/packages/svelte2tsx/svelte-shims.d.ts
+++ b/packages/svelte2tsx/svelte-shims.d.ts
@@ -9,7 +9,7 @@ declare module '*.svelte' {
type AConstructorTypeOf = new (...args: any[]) => T;
-type SvelteAction = (node: HTMLElement, ...args:U) => {
+type SvelteAction = (node: El, ...args:U) => {
update?: (...args:U) => void,
destroy?: () => void
} | void
@@ -48,7 +48,11 @@ type SvelteOnAllEvent = SvelteOnEvent & SvelteRestEvent
declare var process: NodeJS.Process & { browser: boolean }
declare function __sveltets_ensureAnimation(animation: SvelteAnimation, ...args: U): {};
-declare function __sveltets_ensureAction(action: SvelteAction, ...args: U): {};
+declare function __sveltets_ensureAction(
+ el: El,
+ action: SvelteAction,
+ ...args: U
+): {};
declare function __sveltets_ensureTransition(transition: SvelteTransition, ...args: U): {};
declare function __sveltets_ensureFunction(expression: (e: Event & { detail?: any }) => unknown ): {};
declare function __sveltets_ensureType(type: AConstructorTypeOf, el: T): {};
@@ -73,6 +77,15 @@ declare function __sveltets_mapBodyEvent(
declare function __sveltets_mapElementEvent(
event: K
): HTMLElementEventMap[K];
+declare function __sveltets_mapElementTag(
+ tag: K
+): ElementTagNameMap[K];
+declare function __sveltets_mapElementTag(
+ tag: K
+): SVGElementTagNameMap[K];
+declare function __sveltets_mapElementTag(
+ tag: any
+): HTMLElement;
declare function __sveltets_bubbleEventDef<
T extends SvelteEventRecord,
TEvent,
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/action-bare/expected.jsx b/packages/svelte2tsx/test/htmlx2jsx/samples/action-bare/expected.jsx
index b017249ec..c9312c246 100644
--- a/packages/svelte2tsx/test/htmlx2jsx/samples/action-bare/expected.jsx
+++ b/packages/svelte2tsx/test/htmlx2jsx/samples/action-bare/expected.jsx
@@ -1 +1 @@
-<>Hello >
+<>Hello >
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/action-nested/expected.jsx b/packages/svelte2tsx/test/htmlx2jsx/samples/action-nested/expected.jsx
new file mode 100644
index 000000000..deb08b58b
--- /dev/null
+++ b/packages/svelte2tsx/test/htmlx2jsx/samples/action-nested/expected.jsx
@@ -0,0 +1,6 @@
+<>
+>
\ No newline at end of file
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/action-nested/input.svelte b/packages/svelte2tsx/test/htmlx2jsx/samples/action-nested/input.svelte
new file mode 100644
index 000000000..dcdcb07e5
--- /dev/null
+++ b/packages/svelte2tsx/test/htmlx2jsx/samples/action-nested/input.svelte
@@ -0,0 +1,6 @@
+
+
\ No newline at end of file
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/action-params/expected.jsx b/packages/svelte2tsx/test/htmlx2jsx/samples/action-params/expected.jsx
index 158196a31..1142ef70c 100644
--- a/packages/svelte2tsx/test/htmlx2jsx/samples/action-params/expected.jsx
+++ b/packages/svelte2tsx/test/htmlx2jsx/samples/action-params/expected.jsx
@@ -1 +1 @@
-<>Hello >
+<>Hello >
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/directive-quoted/expected.jsx b/packages/svelte2tsx/test/htmlx2jsx/samples/directive-quoted/expected.jsx
index 667309112..0c8e2fdc5 100644
--- a/packages/svelte2tsx/test/htmlx2jsx/samples/directive-quoted/expected.jsx
+++ b/packages/svelte2tsx/test/htmlx2jsx/samples/directive-quoted/expected.jsx
@@ -1,6 +1,6 @@
<>console.log("click")}>Hello
{__sveltets_instanceOf(Component).$on('click', test)}
-
+