diff --git a/packages/svelte2tsx/src/htmlxtojsx/nodes/action-directive.ts b/packages/svelte2tsx/src/htmlxtojsx/nodes/action-directive.ts index 1ff47ac2f..09d3afd57 100644 --- a/packages/svelte2tsx/src/htmlxtojsx/nodes/action-directive.ts +++ b/packages/svelte2tsx/src/htmlxtojsx/nodes/action-directive.ts @@ -2,7 +2,7 @@ import MagicString from 'magic-string'; import { Node } from 'estree-walker'; /** - * use:xxx ---> {...__sveltets_ensureAction(__sveltets_mapElementTag('ParentNodeName', xxx))} + * use:xxx={params} ---> {...__sveltets_ensureAction(xxx(__sveltets_mapElementTag('ParentNodeName'),(params)))} */ export function handleActionDirective( htmlx: string, @@ -10,19 +10,19 @@ export function handleActionDirective( attr: Node, parent: Node ): void { - str.overwrite( - attr.start, - attr.start + 'use:'.length, - `{...__sveltets_ensureAction(__sveltets_mapElementTag('${parent.name}'),` - ); + str.overwrite(attr.start, attr.start + 'use:'.length, '{...__sveltets_ensureAction('); if (!attr.expression) { - str.appendLeft(attr.end, ')}'); + str.appendLeft(attr.end, `(__sveltets_mapElementTag('${parent.name}')))}`); return; } - str.overwrite(attr.start + `use:${attr.name}`.length, attr.expression.start, ','); - str.appendLeft(attr.expression.end, ')'); + str.overwrite( + attr.start + `use:${attr.name}`.length, + attr.expression.start, + `(__sveltets_mapElementTag('${parent.name}'),(` + ); + str.appendLeft(attr.expression.end, ')))'); if (htmlx[attr.end - 1] == '"') { str.remove(attr.end - 1, attr.end); } diff --git a/packages/svelte2tsx/src/htmlxtojsx/nodes/animation-directive.ts b/packages/svelte2tsx/src/htmlxtojsx/nodes/animation-directive.ts index 78eb7b40f..ebf51729e 100644 --- a/packages/svelte2tsx/src/htmlxtojsx/nodes/animation-directive.ts +++ b/packages/svelte2tsx/src/htmlxtojsx/nodes/animation-directive.ts @@ -2,7 +2,7 @@ import MagicString from 'magic-string'; import { Node } from 'estree-walker'; /** - * animation:xxx(yyy) ---> {...__sveltets_ensureAnimation(xxx, yyy)} + * animation:xxx(yyy) ---> {...__sveltets_ensureAnimation(xxx(__sveltets_ElementNode,__sveltets_AnimationMove,(yyy)))} */ export function handleAnimateDirective(htmlx: string, str: MagicString, attr: Node): void { str.overwrite( @@ -12,15 +12,15 @@ export function handleAnimateDirective(htmlx: string, str: MagicString, attr: No ); if (!attr.expression) { - str.appendLeft(attr.end, ', {})}'); + str.appendLeft(attr.end, '(__sveltets_ElementNode,__sveltets_AnimationMove))}'); return; } str.overwrite( htmlx.indexOf(':', attr.start) + 1 + `${attr.name}`.length, attr.expression.start, - ', ' + '(__sveltets_ElementNode,__sveltets_AnimationMove,(' ); - str.appendLeft(attr.expression.end, ')'); + str.appendLeft(attr.expression.end, ')))'); if (htmlx[attr.end - 1] == '"') { str.remove(attr.end - 1, attr.end); } diff --git a/packages/svelte2tsx/src/htmlxtojsx/nodes/transition-directive.ts b/packages/svelte2tsx/src/htmlxtojsx/nodes/transition-directive.ts index 3af9dcd65..0ef4cc9ce 100644 --- a/packages/svelte2tsx/src/htmlxtojsx/nodes/transition-directive.ts +++ b/packages/svelte2tsx/src/htmlxtojsx/nodes/transition-directive.ts @@ -2,7 +2,7 @@ import MagicString from 'magic-string'; import { Node } from 'estree-walker'; /** - * transition:xxx(yyy) ---> {...__sveltets_ensureTransition(xxx, yyy)} + * transition:xxx(yyy) ---> {...__sveltets_ensureTransition(xxx(__sveltets_ElementNode,(yyy)))} */ export function handleTransitionDirective(htmlx: string, str: MagicString, attr: Node): void { str.overwrite( @@ -17,16 +17,16 @@ export function handleTransitionDirective(htmlx: string, str: MagicString, attr: } if (!attr.expression) { - str.appendLeft(attr.end, ', {})}'); + str.appendLeft(attr.end, '(__sveltets_ElementNode))}'); return; } str.overwrite( htmlx.indexOf(':', attr.start) + 1 + `${attr.name}`.length, attr.expression.start, - ', ' + '(__sveltets_ElementNode,(' ); - str.appendLeft(attr.expression.end, ')'); + str.appendLeft(attr.expression.end, ')))'); if (htmlx[attr.end - 1] == '"') { str.remove(attr.end - 1, attr.end); } diff --git a/packages/svelte2tsx/svelte-shims.d.ts b/packages/svelte2tsx/svelte-shims.d.ts index 1daa4de41..39ad4b0e5 100644 --- a/packages/svelte2tsx/svelte-shims.d.ts +++ b/packages/svelte2tsx/svelte-shims.d.ts @@ -67,8 +67,8 @@ interface Svelte2TsxComponentConstructorParameters { type AConstructorTypeOf = new (...args: U) => T; type SvelteComponentConstructor> = new (options: U) => T; -type SvelteAction = (node: El, ...args:U) => { - update?: (...args:U) => void, +type SvelteActionReturnType = { + update?: (args: any) => void, destroy?: () => void } | void @@ -80,9 +80,9 @@ type SvelteTransitionConfig = { tick?: (t: number, u: number) => void } -type SvelteTransition = (node: Element, ...args: U) => SvelteTransitionConfig | (() => SvelteTransitionConfig) +type SvelteTransitionReturnType = SvelteTransitionConfig | (() => SvelteTransitionConfig) -type SvelteAnimation = (node: Element, move: { from: DOMRect, to: DOMRect }, ...args: U) => { +type SvelteAnimationReturnType = { delay?: number, duration?: number, easing?: (t: number) => number, @@ -98,14 +98,12 @@ type SvelteStore = { subscribe: (run: (value: T) => any, invalidate?: any) => declare var process: NodeJS.Process & { browser: boolean } +declare var __sveltets_ElementNode: Element +declare var __sveltets_AnimationMove: { from: DOMRect, to: DOMRect } -declare function __sveltets_ensureAnimation(animation: SvelteAnimation, ...args: U): {}; -declare function __sveltets_ensureAction( - el: El, - action: SvelteAction, - ...args: U -): {}; -declare function __sveltets_ensureTransition(transition: SvelteTransition, ...args: U): {}; +declare function __sveltets_ensureAnimation(animationCall: SvelteAnimationReturnType): {}; +declare function __sveltets_ensureAction(actionCall: SvelteActionReturnType): {}; +declare function __sveltets_ensureTransition(transitionCall: SvelteTransitionReturnType): {}; declare function __sveltets_ensureFunction(expression: (e: Event & { detail?: any }) => unknown ): {}; declare function __sveltets_ensureType(type: AConstructorTypeOf, el: T): {}; declare function __sveltets_ctorOf(type: T): AConstructorTypeOf; diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/action-bare/expected.jsx b/packages/svelte2tsx/test/htmlx2jsx/samples/action-bare/expected.jsx index c9312c246..ba37fc9be 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 index deb08b58b..4be39f1f8 100644 --- a/packages/svelte2tsx/test/htmlx2jsx/samples/action-nested/expected.jsx +++ b/packages/svelte2tsx/test/htmlx2jsx/samples/action-nested/expected.jsx @@ -1,6 +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 1142ef70c..9e974b2de 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/animation-bare/expected.jsx b/packages/svelte2tsx/test/htmlx2jsx/samples/animation-bare/expected.jsx index 77fcd2d5b..fcd4b7cb6 100644 --- a/packages/svelte2tsx/test/htmlx2jsx/samples/animation-bare/expected.jsx +++ b/packages/svelte2tsx/test/htmlx2jsx/samples/animation-bare/expected.jsx @@ -1 +1 @@ -<>

Hello

+<>

Hello

diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/animation-params/expected.jsx b/packages/svelte2tsx/test/htmlx2jsx/samples/animation-params/expected.jsx index fb495e773..f46ee0232 100644 --- a/packages/svelte2tsx/test/htmlx2jsx/samples/animation-params/expected.jsx +++ b/packages/svelte2tsx/test/htmlx2jsx/samples/animation-params/expected.jsx @@ -1,2 +1,2 @@ -<>

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 0c8e2fdc5..a325c0b49 100644 --- a/packages/svelte2tsx/test/htmlx2jsx/samples/directive-quoted/expected.jsx +++ b/packages/svelte2tsx/test/htmlx2jsx/samples/directive-quoted/expected.jsx @@ -1,7 +1,7 @@ <>

console.log("click")}>Hello

{__sveltets_instanceOf(Component).$on('click', test)} - - + + - + diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/transition-bare/expected.jsx b/packages/svelte2tsx/test/htmlx2jsx/samples/transition-bare/expected.jsx index 4fc1d8f7d..7386f222c 100644 --- a/packages/svelte2tsx/test/htmlx2jsx/samples/transition-bare/expected.jsx +++ b/packages/svelte2tsx/test/htmlx2jsx/samples/transition-bare/expected.jsx @@ -1,3 +1,3 @@ -<>

Hello

-

Hello

-

Hello

+<>

Hello

+

Hello

+

Hello

diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/transition-modifiers/expected.jsx b/packages/svelte2tsx/test/htmlx2jsx/samples/transition-modifiers/expected.jsx index bdd0af595..024b31a7f 100644 --- a/packages/svelte2tsx/test/htmlx2jsx/samples/transition-modifiers/expected.jsx +++ b/packages/svelte2tsx/test/htmlx2jsx/samples/transition-modifiers/expected.jsx @@ -1,3 +1,3 @@ -<>
+<>
{item}
\ No newline at end of file diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/transition-params/expected.jsx b/packages/svelte2tsx/test/htmlx2jsx/samples/transition-params/expected.jsx index b79977059..bf41b1dc9 100644 --- a/packages/svelte2tsx/test/htmlx2jsx/samples/transition-params/expected.jsx +++ b/packages/svelte2tsx/test/htmlx2jsx/samples/transition-params/expected.jsx @@ -1,3 +1,3 @@ -<>

Hello

-

Hello

-

Hello

+<>

Hello

+

Hello

+

Hello