Skip to content

fix: Move hoisted snippet to right after import #2753

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 2, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 16 additions & 7 deletions packages/svelte2tsx/src/svelte2tsx/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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 &&
Expand All @@ -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);
}
Expand Down
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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;
Expand Down
4 changes: 4 additions & 0 deletions packages/svelte2tsx/src/svelte2tsx/utils/tsAst.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Original file line number Diff line number Diff line change
@@ -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 () => {


Expand Down
Original file line number Diff line number Diff line change
@@ -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_;
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<script module>
import {} from 'svelte'
</script>

{#snippet foo()}{/snippet}
Original file line number Diff line number Diff line change
@@ -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_;
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<script module>
export const foo = _foo;
</script>

{#snippet _foo()}{/snippet}