fix: Move hoisted snippet to right after import (#2753)

#2653

Author: jasonlyu123

packages/svelte2tsx/src/svelte2tsx/index.ts

@@ -10,6 +10,7 @@ import { processInstanceScriptContent } from './processInstanceScriptContent';
 import { createModuleAst, ModuleAst, processModuleScriptTag } from './processModuleScriptTag';
 import path from 'path';
 import { parse, VERSION } from 'svelte/compiler';
+import { getTopLevelImports } from './utils/tsAst';
 
 function processSvelteTemplate(
     str: MagicString,
@@ -170,6 +171,20 @@ export function svelte2tsx(
     }
 
     if (moduleScriptTag || scriptTag) {
+        let snippetHoistTargetForModule = 0;
+        if (rootSnippets.length) {
+            if (scriptTag) {
+                snippetHoistTargetForModule = scriptTag.start + 1; // +1 because imports are also moved at that position, and we want to move interfaces after imports
+            } else {
+                const imports = getTopLevelImports(moduleAst.tsAst);
+                const lastImport = imports[imports.length - 1];
+                snippetHoistTargetForModule = lastImport
+                    ? lastImport.end + moduleAst.astOffset
+                    : moduleAst.astOffset;
+                str.appendLeft(snippetHoistTargetForModule, '\n');
+            }
+        }
+
         for (const [start, end, globals] of rootSnippets) {
             const hoist_to_module =
                 moduleScriptTag &&
@@ -179,13 +194,7 @@ export function svelte2tsx(
                     ));
 
             if (hoist_to_module) {
-                str.move(
-                    start,
-                    end,
-                    scriptTag
-                        ? scriptTag.start + 1 // +1 because imports are also moved at that position, and we want to move interfaces after imports
-                        : instanceScriptTarget
-                );
+                str.move(start, end, snippetHoistTargetForModule);
             } else if (scriptTag) {
                 str.move(start, end, renderFunctionStart);
             }

packages/svelte2tsx/src/svelte2tsx/nodes/handleImportDeclaration.ts

@@ -1,6 +1,6 @@
 import MagicString from 'magic-string';
 import ts from 'typescript';
-import { moveNode } from '../utils/tsAst';
+import { getTopLevelImports, moveNode } from '../utils/tsAst';
 
 /**
  * move imports to top of script so they appear outside our render function
@@ -25,7 +25,7 @@ export function handleFirstInstanceImport(
     hasModuleScript: boolean,
     str: MagicString
 ) {
-    const imports = tsAst.statements.filter(ts.isImportDeclaration).sort((a, b) => a.end - b.end);
+    const imports = getTopLevelImports(tsAst);
     const firstImport = imports[0];
     if (!firstImport) {
         return;

packages/svelte2tsx/src/svelte2tsx/utils/tsAst.ts

@@ -273,3 +273,7 @@ function isNewGroup(sourceFile: ts.SourceFile, topLevelImportDecl: ts.Node, scan
 
     return false;
 }
+
+export function getTopLevelImports(sourceFile: ts.SourceFile): ts.ImportDeclaration[] {
+    return sourceFile.statements.filter(ts.isImportDeclaration).sort((a, b) => a.end - b.end);
+}

packages/svelte2tsx/test/svelte2tsx/samples/snippet-module-hoist-3.v5/expectedv2.ts

@@ -1,11 +1,12 @@
 ///<reference types="svelte" />
 ;
-    let foo = true;
-;  const hoistable1/*Ωignore_positionΩ*/ = ()/*Ωignore_startΩ*/: ReturnType<import('svelte').Snippet>/*Ωignore_endΩ*/ => { async ()/*Ωignore_positionΩ*/ => {
+  const hoistable1/*Ωignore_positionΩ*/ = ()/*Ωignore_startΩ*/: ReturnType<import('svelte').Snippet>/*Ωignore_endΩ*/ => { async ()/*Ωignore_positionΩ*/ => {
      { svelteHTML.createElement("div", {});  }
 };return __sveltets_2_any(0)};  const hoistable2/*Ωignore_positionΩ*/ = ()/*Ωignore_startΩ*/: ReturnType<import('svelte').Snippet>/*Ωignore_endΩ*/ => { async ()/*Ωignore_positionΩ*/ => {
      { svelteHTML.createElement("div", {});foo; }
-};return __sveltets_2_any(0)};;function $$render() {
+};return __sveltets_2_any(0)};
+    let foo = true;
+;;function $$render() {
 async () => {
 
 

packages/svelte2tsx/test/svelte2tsx/samples/snippet-module-hoist-5.v5/expectedv2.ts

@@ -0,0 +1,12 @@
+///<reference types="svelte" />
+;
+    import {} from 'svelte'
+  const foo/*Ωignore_positionΩ*/ = ()/*Ωignore_startΩ*/: ReturnType<import('svelte').Snippet>/*Ωignore_endΩ*/ => { async ()/*Ωignore_positionΩ*/ => {};return __sveltets_2_any(0)};
+;;function $$render() {
+async () => {
+
+};
+return { props: /** @type {Record<string, never>} */ ({}), exports: {}, bindings: "", slots: {}, events: {} }}
+const Input__SvelteComponent_ = __sveltets_2_isomorphic_component(__sveltets_2_partial(__sveltets_2_with_any_event($$render())));
+/*Ωignore_startΩ*/type Input__SvelteComponent_ = InstanceType<typeof Input__SvelteComponent_>;
+/*Ωignore_endΩ*/export default Input__SvelteComponent_;

packages/svelte2tsx/test/svelte2tsx/samples/snippet-module-hoist-5.v5/input.svelte

@@ -0,0 +1,5 @@
+<script module>
+    import {} from 'svelte'
+</script>
+
+{#snippet foo()}{/snippet}

packages/svelte2tsx/test/svelte2tsx/samples/snippet-module-hoist-6.v5/expectedv2.ts

@@ -0,0 +1,12 @@
+///<reference types="svelte" />
+;
+  const _foo/*Ωignore_positionΩ*/ = ()/*Ωignore_startΩ*/: ReturnType<import('svelte').Snippet>/*Ωignore_endΩ*/ => { async ()/*Ωignore_positionΩ*/ => {};return __sveltets_2_any(0)};
+    export const foo = _foo;
+;;function $$render() {
+async () => {
+
+};
+return { props: /** @type {Record<string, never>} */ ({}), exports: {}, bindings: "", slots: {}, events: {} }}
+const Input__SvelteComponent_ = __sveltets_2_isomorphic_component(__sveltets_2_partial(__sveltets_2_with_any_event($$render())));
+/*Ωignore_startΩ*/type Input__SvelteComponent_ = InstanceType<typeof Input__SvelteComponent_>;
+/*Ωignore_endΩ*/export default Input__SvelteComponent_;

packages/svelte2tsx/test/svelte2tsx/samples/snippet-module-hoist-6.v5/input.svelte

@@ -0,0 +1,5 @@
+<script module>
+    export const foo = _foo;
+</script>
+
+{#snippet _foo()}{/snippet}