fix: ensure hoisted interfaces are moved after hoisted imports (#2597)

#2594

As a drive-by, I also ensures that the dts generation knows about the hoisted interfaces so it does not transform them into types anymore

Author: dummdidumm

packages/svelte2tsx/src/svelte2tsx/nodes/HoistableInterfaces.ts

@@ -332,6 +332,7 @@ export class HoistableInterfaces {
         }
 
         const hoistable = this.determineHoistableInterfaces();
+
         if (hoistable.has(this.props_interface.name)) {
             for (const [name, node] of hoistable) {
                 let pos = node.pos + astOffset;
@@ -343,12 +344,17 @@ export class HoistableInterfaces {
                     }
                     if (/\s/.test(str.original[pos])) {
                         pos++;
-                        str.prependRight(pos, '\n');
                     }
+
+                    // jsdoc comments would be ignored if they are on the same line as the ;, so we add a newline, too
+                    str.prependRight(pos, ';\n');
+                    str.appendLeft(node.end + astOffset, ';');
                 }
 
                 str.move(pos, node.end + astOffset, scriptStart);
             }
+
+            return hoistable;
         }
     }
 

packages/svelte2tsx/src/svelte2tsx/processInstanceScriptContent.ts

@@ -310,21 +310,30 @@ export function processInstanceScriptContent(
         moveNode(node, str, astOffset, script.start, tsAst);
     }
 
+    const hoisted = exportedNames.hoistableInterfaces.moveHoistableInterfaces(
+        str,
+        astOffset,
+        script.start + 1, // +1 because imports are also moved at that position, and we want to move interfaces after imports
+        generics.getReferences()
+    );
+
     if (mode === 'dts') {
         // Transform interface declarations to type declarations because indirectly
         // using interfaces inside the return type of a function is forbidden.
         // This is not a problem for intellisense/type inference but it will
         // break dts generation (file will not be generated).
-        transformInterfacesToTypes(tsAst, str, astOffset, nodesToMove);
+        if (hoisted) {
+            transformInterfacesToTypes(
+                tsAst,
+                str,
+                astOffset,
+                [...hoisted.values()].concat(nodesToMove)
+            );
+        } else {
+            transformInterfacesToTypes(tsAst, str, astOffset, nodesToMove);
+        }
     }
 
-    exportedNames.hoistableInterfaces.moveHoistableInterfaces(
-        str,
-        astOffset,
-        script.start,
-        generics.getReferences()
-    );
-
     return {
         exportedNames,
         events,

packages/svelte2tsx/test/emitDts/samples/typescript-runes.v5/expected/TestRunes2.svelte.d.ts

@@ -1,9 +1,9 @@
+import type { X } from './x';
 /** asd */
-type Props = {
+interface Props {
     foo: string;
     bar?: X;
-};
-import type { X } from './x';
+}
 declare const TestRunes2: import("svelte").Component<Props, {}, "">;
 type TestRunes2 = ReturnType<typeof TestRunes2>;
 export default TestRunes2;

packages/svelte2tsx/test/svelte2tsx/samples/ts-runes-hoistable-props-1.v5/expectedv2.ts

@@ -1,13 +1,13 @@
 ///<reference types="svelte" />
 ;
     let value = 1;
-;
-    type NoComma = true
+;;;
+    type NoComma = true;;
     type Dependency = {
         a: number;
         b: typeof value;
         c: NoComma
-    }
+    };;
 
     /** A comment */
     interface Props<T> {

packages/svelte2tsx/test/svelte2tsx/samples/ts-runes-hoistable-props-2.v5/expectedv2.ts

@@ -1,11 +1,11 @@
 ///<reference types="svelte" />
 ;
     let value = 1;
-;
+;;;
     interface Dependency {
         a: number;
         b: typeof value;
-    };type $$ComponentProps =  { a: Dependency, b: string };;function render() {
+    };;type $$ComponentProps =  { a: Dependency, b: string };function render() {
 
 
 

packages/svelte2tsx/test/svelte2tsx/samples/ts-runes-hoistable-props-4.v5/expectedv2.ts

@@ -1,8 +1,8 @@
 ///<reference types="svelte" />
-
+;;
     interface Dependency {
         a: number;
-    }
+    };;
 
     interface Props {
         [k: string]: Dependency;

packages/svelte2tsx/test/svelte2tsx/samples/ts-runes-hoistable-props-5.v5/expectedv2.ts

@@ -0,0 +1,28 @@
+///<reference types="svelte" />
+;
+    import X from './X';
+;;
+
+import { readable } from 'svelte/store';
+;
+ 
+    /** I should not be sandwitched between the imports */
+    interface Props {
+        foo?: string;
+    };function render() {
+
+    
+    
+    const store = readable(1)/*Ωignore_startΩ*/;let $store = __sveltets_2_store_get(store);/*Ωignore_endΩ*/
+
+    let { foo }: Props = $props()
+;
+async () => {
+
+
+
+$store;};
+return { props: {} as any as Props, exports: {}, bindings: __sveltets_$$bindings(''), slots: {}, events: {} }}
+const Input__SvelteComponent_ = __sveltets_2_fn_component(render());
+type Input__SvelteComponent_ = ReturnType<typeof Input__SvelteComponent_>;
+export default Input__SvelteComponent_;

packages/svelte2tsx/test/svelte2tsx/samples/ts-runes-hoistable-props-5.v5/input.svelte

@@ -0,0 +1,17 @@
+<script module>
+    import X from './X';
+</script>
+
+<script lang="ts">
+    import { readable } from 'svelte/store';
+    
+    const store = readable(1)
+ 
+    /** I should not be sandwitched between the imports */
+    interface Props {
+        foo?: string;
+    }
+    let { foo }: Props = $props()
+</script>
+
+{$store}

packages/svelte2tsx/test/svelte2tsx/samples/ts-runes.v5/expectedv2.ts

@@ -1,5 +1,5 @@
 ///<reference types="svelte" />
-;type $$ComponentProps =  { a: number, b: string };;function render() {
+;;type $$ComponentProps =  { a: number, b: string };function render() {
 
     let { a, b }:/*Ωignore_startΩ*/$$ComponentProps/*Ωignore_endΩ*/ = $props();
     let x = $state(0);

packages/svelte2tsx/test/svelte2tsx/samples/ts-sveltekit-autotypes-$props-rune-unchanged.v5/expectedv2.ts

@@ -1,5 +1,5 @@
 ///<reference types="svelte" />
-;type $$ComponentProps =  {form: boolean, data: true };;function render() {
+;;type $$ComponentProps =  {form: boolean, data: true };function render() {
 
      const snapshot: any = {};
     let { form, data }:/*Ωignore_startΩ*/$$ComponentProps/*Ωignore_endΩ*/ = $props();