Repository: sveltejs/language-tools
Pull request #1967 (2023-03-27 13:44:52)

(fix) add .js to $types imports to support node16/nodenext resolution
will also work with other resoution algorithms
#1965


Patch:
diff --git a/packages/svelte2tsx/src/helpers/sveltekit.ts b/packages/svelte2tsx/src/helpers/sveltekit.ts
index ad49f35f..f25735c9 100644
--- a/packages/svelte2tsx/src/helpers/sveltekit.ts
+++ b/packages/svelte2tsx/src/helpers/sveltekit.ts
@@ -163,7 +163,7 @@ function upserKitRouteFile(
     if (load?.type === 'function' && load.node.parameters.length === 1 && !load.hasTypeDefinition) {
         const pos = load.node.parameters[0].getEnd();
         const inserted = surround(
-            `: import('./$types').${basename.includes('layout') ? 'Layout' : 'Page'}${
+            `: import('./$types.js').${basename.includes('layout') ? 'Layout' : 'Page'}${
                 basename.includes('server') ? 'Server' : ''
             }LoadEvent`
         );
@@ -175,7 +175,7 @@ function upserKitRouteFile(
     const actions = exports.get('actions');
     if (actions?.type === 'var' && !actions.hasTypeDefinition && actions.node.initializer) {
         const pos = actions.node.initializer.getEnd();
-        const inserted = surround(` satisfies import('./$types').Actions`);
+        const inserted = surround(` satisfies import('./$types.js').Actions`);
         insert(pos, inserted);
     }
 
@@ -192,7 +192,7 @@ function upserKitRouteFile(
             surround,
             insert,
             name,
-            `import('./$types').RequestEvent`,
+            `import('./$types.js').RequestEvent`,
             `Response | Promise<Response>`
         );
     };
diff --git a/packages/svelte2tsx/src/svelte2tsx/nodes/ExportedNames.ts b/packages/svelte2tsx/src/svelte2tsx/nodes/ExportedNames.ts
index fc9c811e..50c90acf 100644
--- a/packages/svelte2tsx/src/svelte2tsx/nodes/ExportedNames.ts
+++ b/packages/svelte2tsx/src/svelte2tsx/nodes/ExportedNames.ts
@@ -57,7 +57,8 @@ export class ExportedNames {
                             internalHelpers.isKitRouteFile(this.basename) &&
                             n.name.getText() === 'snapshot';
                         // TS types are not allowed in JS files, but TS will still pick it up and the ignore comment will filter out the error
-                        const kitType = isKitExport && !type ? `: import('./$types').Snapshot` : '';
+                        const kitType =
+                            isKitExport && !type ? `: import('./$types.js').Snapshot` : '';
                         const nameEnd = n.name.end + this.astOffset;
                         if (kitType) {
                             preprendStr(this.str, nameEnd, surroundWithIgnoreComments(kitType));
@@ -132,7 +133,7 @@ export class ExportedNames {
             // TS types are not allowed in JS files, but TS will still pick it up and the ignore comment will filter out the error
             const kitType =
                 isKitExport && !type
-                    ? `: import('./$types').${
+                    ? `: import('./$types.js').${
                           name === 'data'
                               ? this.basename.includes('layout')
                                   ? 'LayoutData'


Test patch:
diff --git a/packages/svelte2tsx/test/helpers/index.ts b/packages/svelte2tsx/test/helpers/index.ts
index 694ce7fc..f120bae8 100644
--- a/packages/svelte2tsx/test/helpers/index.ts
+++ b/packages/svelte2tsx/test/helpers/index.ts
@@ -22,7 +22,7 @@ describe('Internal Helpers - upsertKitFile', () => {
         upsert(
             '+page.ts',
             `export function load(e) { return e; }`,
-            `export function load(e: import('./$types').PageLoadEvent) { return e; }`
+            `export function load(e: import('./$types.js').PageLoadEvent) { return e; }`
         );
     });
 
@@ -38,7 +38,7 @@ describe('Internal Helpers - upsertKitFile', () => {
         upsert(
             '+server.ts',
             `export async function GET(e) {}`,
-            `export async function GET(e: import('./$types').RequestEvent) : Response | Promise<Response> {}`
+            `export async function GET(e: import('./$types.js').RequestEvent) : Response | Promise<Response> {}`
         );
     });
 
@@ -46,7 +46,7 @@ describe('Internal Helpers - upsertKitFile', () => {
         upsert(
             '+page.ts',
             `export const load = (async (e) => {});`,
-            `export const load = (async (e: import('./$types').PageLoadEvent) => {});`
+            `export const load = (async (e: import('./$types.js').PageLoadEvent) => {});`
         );
     });
 
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/sveltekit-autotypes/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/sveltekit-autotypes/expectedv2.ts
index 9a08d45f..d5fab74b 100644
--- a/packages/svelte2tsx/test/svelte2tsx/samples/sveltekit-autotypes/expectedv2.ts
+++ b/packages/svelte2tsx/test/svelte2tsx/samples/sveltekit-autotypes/expectedv2.ts
@@ -1,12 +1,12 @@
 ///<reference types="svelte" />
 ;function render() {
 
-     let data/*Ωignore_startΩ*/: import('./$types').PageData;data = __sveltets_2_any(data);/*Ωignore_endΩ*/;
-     let form/*Ωignore_startΩ*/: import('./$types').ActionData;form = __sveltets_2_any(form);/*Ωignore_endΩ*/;
-     const snapshot/*Ωignore_startΩ*/: import('./$types').Snapshot/*Ωignore_endΩ*/ = {};
+     let data/*Ωignore_startΩ*/: import('./$types.js').PageData;data = __sveltets_2_any(data);/*Ωignore_endΩ*/;
+     let form/*Ωignore_startΩ*/: import('./$types.js').ActionData;form = __sveltets_2_any(form);/*Ωignore_endΩ*/;
+     const snapshot/*Ωignore_startΩ*/: import('./$types.js').Snapshot/*Ωignore_endΩ*/ = {};
 
      let nope/*Ωignore_startΩ*/;nope = __sveltets_2_any(nope);/*Ωignore_endΩ*/;
-     let form/*Ωignore_startΩ*/: import('./$types').ActionData/*Ωignore_endΩ*/ = {}
+     let form/*Ωignore_startΩ*/: import('./$types.js').ActionData/*Ωignore_endΩ*/ = {}
      let data: number/*Ωignore_startΩ*/;data = __sveltets_2_any(data);/*Ωignore_endΩ*/;
 ;
 async () => {};