fix(typescript): Fix ESM output (#5554)

Fix ESM output

generators/typescript/sdk/CHANGELOG.md

@@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.46.1] - 2025-01-08
+
+- Fix: ESModule output is fixed to be compatible with Node.js ESM loading.
+
 ## [0.46.0] - 2025-01-06
 
 - Feat: SDKs are now built and exported in both CommonJS (legacy) and ESModule format.

generators/typescript/sdk/VERSION

@@ -1 +1 @@
-0.46.0
+0.46.1

generators/typescript/sdk/cli/browser-docker/Dockerfile

@@ -15,6 +15,7 @@ COPY generators/typescript/utils/core-utilities/auth/src/ /assets/auth
 COPY generators/typescript/utils/core-utilities/zurg/src/ /assets/zurg
 COPY generators/typescript/utils/core-utilities/base/src/ /assets/base-core-utilities
 COPY generators/typescript/utils/core-utilities/utils/src/ /assets/utils
+COPY generators/typescript/utils/scripts/ /assets/scripts
 
 COPY generators/typescript/sdk/cli/browser-docker/dist/browserCli.cjs /browserCli.cjs
 

generators/typescript/sdk/cli/node-docker/Dockerfile

@@ -51,6 +51,7 @@ COPY generators/typescript/utils/core-utilities/auth/src/ /assets/auth
 COPY generators/typescript/utils/core-utilities/zurg/src/ /assets/zurg
 COPY generators/typescript/utils/core-utilities/base/src/ /assets/base-core-utilities
 COPY generators/typescript/utils/core-utilities/utils/src/ /assets/utils
+COPY generators/typescript/utils/scripts/ /assets/scripts
 COPY generators/typescript/sdk/features.yml /assets/features.yml
 
 COPY generators/typescript/sdk/cli/node-docker/dist/nodeCli.cjs /nodeCli.cjs

generators/typescript/sdk/cli/src/SdkGeneratorCli.ts

@@ -1,5 +1,11 @@
 import { AbstractGeneratorCli } from "@fern-typescript/abstract-generator-cli";
-import { JavaScriptRuntime, NpmPackage, PersistedTypescriptProject } from "@fern-typescript/commons";
+import {
+    JavaScriptRuntime,
+    NpmPackage,
+    PersistedTypescriptProject,
+    ScriptsManager,
+    fixImportsForEsm
+} from "@fern-typescript/commons";
 import { GeneratorContext } from "@fern-typescript/contexts";
 import { SdkGenerator } from "@fern-typescript/sdk-generator";
 
@@ -152,10 +158,19 @@ export class SdkGeneratorCli extends AbstractGeneratorCli<SdkCustomConfig> {
             pathToSrc: persistedTypescriptProject.getSrcDirectory(),
             pathToRoot: persistedTypescriptProject.getRootDirectory()
         });
+        const scriptsManager = new ScriptsManager();
+        await scriptsManager.copyScripts({
+            pathToRoot: persistedTypescriptProject.getRootDirectory()
+        });
+        await this.postProcess(persistedTypescriptProject);
 
         return persistedTypescriptProject;
     }
 
+    private async postProcess(persistedTypescriptProject: PersistedTypescriptProject): Promise<void> {
+        await fixImportsForEsm(persistedTypescriptProject.getRootDirectory());
+    }
+
     protected isPackagePrivate(customConfig: SdkCustomConfig): boolean {
         return customConfig.isPackagePrivate;
     }

generators/typescript/utils/commons/src/index.ts

@@ -29,3 +29,5 @@ export * from "./typescript-project";
 export { FernWriters, ObjectWriter } from "./writers";
 export { getWriterForMultiLineUnionType } from "./writers/getWriterForMultiLineUnionType";
 export * from "@fern-api/typescript-base";
+export { ScriptsManager } from "./scripts";
+export { fixImportsForEsm } from "./typescript-project/fixImportsForEsm";

generators/typescript/utils/commons/src/scripts/RenameToEsmFilesFile.ts

@@ -0,0 +1,12 @@
+import fs from "fs/promises";
+import path from "path";
+
+import { ScriptFile } from "./ScriptFile";
+
+const fileName = "rename-to-esm-files.js";
+const filePathOnDockerContainer = `/assets/scripts/${fileName}`;
+export const renameToEsmFilesFile: ScriptFile = {
+    copyToFolder: async (destinationFolder: string): Promise<void> => {
+        await fs.copyFile(filePathOnDockerContainer, path.join(destinationFolder, fileName));
+    }
+} as const;

generators/typescript/utils/commons/src/scripts/ScriptFile.ts

@@ -0,0 +1,3 @@
+export type ScriptFile = {
+    copyToFolder: (destinationFolder: string) => Promise<void>;
+};

generators/typescript/utils/commons/src/scripts/ScriptsManager.ts

@@ -0,0 +1,15 @@
+import fs from "fs/promises";
+import path from "path";
+
+import { AbsoluteFilePath } from "@fern-api/fs-utils";
+
+import { renameToEsmFilesFile } from "./RenameToEsmFilesFile";
+
+export class ScriptsManager {
+    public async copyScripts({ pathToRoot }: { pathToRoot: AbsoluteFilePath }): Promise<void> {
+        // make sure the scripts directory exists
+        const scriptsDir = path.join(pathToRoot, "scripts");
+        await fs.mkdir(scriptsDir, { recursive: true });
+        await renameToEsmFilesFile.copyToFolder(scriptsDir);
+    }
+}

generators/typescript/utils/commons/src/scripts/index.ts

@@ -0,0 +1 @@
+export * from "./ScriptsManager";

generators/typescript/utils/commons/src/typescript-project/PersistedTypescriptProject.ts

@@ -1,6 +1,7 @@
 import decompress from "decompress";
 import { cp, readdir, rm } from "fs/promises";
 import tmp from "tmp-promise";
+import { Project } from "ts-morph";
 import urlJoin from "url-join";
 
 import { AbsoluteFilePath, RelativeFilePath, join } from "@fern-api/fs-utils";

generators/typescript/utils/commons/src/typescript-project/SimpleTypescriptProject.ts

@@ -212,8 +212,8 @@ export class SimpleTypescriptProject extends TypescriptProject {
 
         const cjsFile = `./${SimpleTypescriptProject.DIST_DIRECTORY}/${SimpleTypescriptProject.CJS_DIRECTORY}/index.js`;
         const cjsTypesFile = `./${SimpleTypescriptProject.DIST_DIRECTORY}/${SimpleTypescriptProject.CJS_DIRECTORY}/index.d.ts`;
-        const mjsFile = `./${SimpleTypescriptProject.DIST_DIRECTORY}/${SimpleTypescriptProject.ESM_DIRECTORY}/index.js`;
-        const mjsTypesFile = `./${SimpleTypescriptProject.DIST_DIRECTORY}/${SimpleTypescriptProject.ESM_DIRECTORY}/index.d.ts`;
+        const mjsFile = `./${SimpleTypescriptProject.DIST_DIRECTORY}/${SimpleTypescriptProject.ESM_DIRECTORY}/index.mjs`;
+        const mjsTypesFile = `./${SimpleTypescriptProject.DIST_DIRECTORY}/${SimpleTypescriptProject.ESM_DIRECTORY}/index.d.mts`;
         const defaultTypesExport = this.outputEsm ? mjsTypesFile : cjsTypesFile;
         const defaultExport = this.outputEsm ? mjsFile : cjsFile;
 
@@ -251,8 +251,8 @@ export class SimpleTypescriptProject extends TypescriptProject {
                     ...this.getFoldersForExports().reduce((acc, folder) => {
                         const cjsFile = `./${SimpleTypescriptProject.DIST_DIRECTORY}/${SimpleTypescriptProject.CJS_DIRECTORY}/${folder}/index.js`;
                         const cjsTypesFile = `./${SimpleTypescriptProject.DIST_DIRECTORY}/${SimpleTypescriptProject.CJS_DIRECTORY}/${folder}/index.d.ts`;
-                        const mjsFile = `./${SimpleTypescriptProject.DIST_DIRECTORY}/${SimpleTypescriptProject.ESM_DIRECTORY}/${folder}/index.js`;
-                        const mjsTypesFile = `./${SimpleTypescriptProject.DIST_DIRECTORY}/${SimpleTypescriptProject.ESM_DIRECTORY}/${folder}/index.d.ts`;
+                        const mjsFile = `./${SimpleTypescriptProject.DIST_DIRECTORY}/${SimpleTypescriptProject.ESM_DIRECTORY}/${folder}/index.mjs`;
+                        const mjsTypesFile = `./${SimpleTypescriptProject.DIST_DIRECTORY}/${SimpleTypescriptProject.ESM_DIRECTORY}/${folder}/index.d.mts`;
                         const defaultTypesExport = this.outputEsm ? mjsTypesFile : cjsTypesFile;
                         const defaultExport = this.outputEsm ? mjsFile : cjsFile;
 
@@ -279,7 +279,10 @@ export class SimpleTypescriptProject extends TypescriptProject {
                     [SimpleTypescriptProject.FORMAT_SCRIPT_NAME]: "prettier . --write --ignore-unknown",
                     [SimpleTypescriptProject.BUILD_SCRIPT_NAME]: `yarn ${SimpleTypescriptProject.BUILD_CJS_SCRIPT_NAME} && yarn ${SimpleTypescriptProject.BUILD_ESM_SCRIPT_NAME}`,
                     [SimpleTypescriptProject.BUILD_CJS_SCRIPT_NAME]: `tsc --project ./${TypescriptProject.TS_CONFIG_CJS_FILENAME}`,
-                    [SimpleTypescriptProject.BUILD_ESM_SCRIPT_NAME]: `tsc --project ./${TypescriptProject.TS_CONFIG_ESM_FILENAME}`
+                    [SimpleTypescriptProject.BUILD_ESM_SCRIPT_NAME]: [
+                        `tsc --project ./${TypescriptProject.TS_CONFIG_ESM_FILENAME}`,
+                        `node ${SimpleTypescriptProject.SCRIPTS_DIRECTORY_NAME}/rename-to-esm-files.js ${SimpleTypescriptProject.DIST_DIRECTORY}/${SimpleTypescriptProject.ESM_DIRECTORY}`
+                    ].join(" && ")
                 }
             };
         }

generators/typescript/utils/commons/src/typescript-project/TypescriptProject.ts

@@ -33,9 +33,12 @@ export abstract class TypescriptProject {
     protected static SRC_DIRECTORY = "src" as const;
     protected static TEST_DIRECTORY = "tests" as const;
     protected static DIST_DIRECTORY = "dist" as const;
+    protected static SCRIPTS_DIRECTORY_NAME = "scripts" as const;
+
     protected static CJS_DIRECTORY = "cjs" as const;
     protected static ESM_DIRECTORY = "esm" as const;
     protected static TYPES_DIRECTORY = "types" as const;
+
     protected static BUILD_SCRIPT_FILENAME = "build.js" as const;
     protected static NODE_DIST_DIRECTORY = "node" as const;
     protected static BROWSER_DIST_DIRECTORY = "browser" as const;

generators/typescript/utils/commons/src/typescript-project/fixImportsForEsm.ts

@@ -0,0 +1,64 @@
+import { Project } from "ts-morph";
+
+import { AbsoluteFilePath, RelativeFilePath, join } from "@fern-api/fs-utils";
+
+export async function fixImportsForEsm(pathToProject: AbsoluteFilePath): Promise<void> {
+    const project = new Project({
+        tsConfigFilePath: join(pathToProject, RelativeFilePath.of("tsconfig.json"))
+    });
+    const typeChecker = project.getTypeChecker();
+    project.getSourceFiles().forEach((sourceFile) => {
+        // Get all imports in the file
+        const imports = sourceFile.getImportDeclarations();
+        const exports = sourceFile.getExportDeclarations();
+
+        [...imports, ...exports].forEach((importDecl) => {
+            const moduleSpecifier = importDecl.getModuleSpecifierValue();
+
+            if (!moduleSpecifier) {
+                return;
+            }
+
+            // Skip if it's not a relative import or already has .js extension
+            if (!moduleSpecifier.startsWith(".") || moduleSpecifier.endsWith(".js")) {
+                return;
+            }
+
+            // Get the referenced file path by using the TypeChecker
+            const importModuleSpecifier = importDecl.getModuleSpecifier();
+            if (importModuleSpecifier == null) {
+                return;
+            }
+            const symbol = typeChecker.getSymbolAtLocation(importModuleSpecifier);
+
+            const symbolSourceFile = symbol?.getValueDeclaration()?.getSourceFile();
+            if (symbolSourceFile) {
+                const filePath = symbolSourceFile.getFilePath();
+                let newSpecifier = moduleSpecifier;
+
+                // Case 1: Directory import resolving to an index file
+                if (
+                    (filePath.endsWith("index.ts") || filePath.endsWith("index.js")) &&
+                    !moduleSpecifier.endsWith("index") &&
+                    !moduleSpecifier.endsWith(".ts") &&
+                    !moduleSpecifier.endsWith(".js")
+                ) {
+                    newSpecifier = `${moduleSpecifier}/index.js`;
+                }
+                // Case 2: Regular .ts file import
+                else if (filePath.endsWith(".ts") && !moduleSpecifier.endsWith(".ts")) {
+                    newSpecifier = `${moduleSpecifier}.js`;
+                }
+                // Case 3: Import with explicit .ts extension
+                else if (moduleSpecifier.endsWith(".ts")) {
+                    newSpecifier = moduleSpecifier.replace(/\.ts$/, ".js");
+                }
+
+                if (newSpecifier !== moduleSpecifier) {
+                    importDecl.setModuleSpecifier(newSpecifier);
+                }
+            }
+        });
+    });
+    await project.save();
+}

generators/typescript/utils/scripts/rename-to-esm-files.js

@@ -0,0 +1,119 @@
+#!/usr/bin/env node
+
+const fs = require('fs').promises;
+const path = require('path');
+
+const extensionMap = {
+  '.js': '.mjs',
+  '.d.ts': '.d.mts'
+};
+const oldExtensions = Object.keys(extensionMap);
+
+async function findFiles(rootPath) {
+  const files = [];
+
+  async function scan(directory) {
+    const entries = await fs.readdir(directory, { withFileTypes: true });
+
+    for (const entry of entries) {
+      const fullPath = path.join(directory, entry.name);
+
+      if (entry.isDirectory()) {
+        if (entry.name !== 'node_modules' && !entry.name.startsWith('.')) {
+          await scan(fullPath);
+        }
+      } else if (entry.isFile()) {
+        if (oldExtensions.some(ext => entry.name.endsWith(ext))) {
+          files.push(fullPath);
+        }
+      }
+    }
+  }
+
+  await scan(rootPath);
+  return files;
+}
+
+async function updateFiles(files) {
+  const updatedFiles = [];
+  for (const file of files) {
+    const updated = await updateFileContents(file);
+    updatedFiles.push(updated);
+  }
+
+  console.log(`Updated imports in ${updatedFiles.length} files.`);
+}
+
+async function updateFileContents(file) {
+  const content = await fs.readFile(file, 'utf8');
+
+  let newContent = content;
+  // Update each extension type defined in the map
+  for (const [oldExt, newExt] of Object.entries(extensionMap)) {
+    const regex = new RegExp(
+      `(import|export)(.+from\\s+['"])(\\.\\.?\\/[^'"]+)(\\${oldExt})(['"])`,
+      'g'
+    );
+    newContent = newContent.replace(regex, `$1$2$3${newExt}$5`);
+  }
+
+  if (content !== newContent) {
+    await fs.writeFile(file, newContent, 'utf8');
+    return true;
+  }
+  return false;
+}
+
+async function renameFiles(files) {
+  let counter = 0;
+  for (const file of files) {
+    const ext = oldExtensions.find(ext => file.endsWith(ext));
+    const newExt = extensionMap[ext];
+
+    if (newExt) {
+      const newPath = file.slice(0, -ext.length) + newExt;
+      await fs.rename(file, newPath);
+      counter++;
+    }
+  }
+
+  console.log(`Renamed ${counter} files.`);
+}
+
+async function main() {
+  try {
+    const targetDir = process.argv[2];
+    if (!targetDir) {
+      console.error('Please provide a target directory');
+      process.exit(1);
+    }
+
+    const targetPath = path.resolve(targetDir);
+    const targetStats = await fs.stat(targetPath);
+
+    if (!targetStats.isDirectory()) {
+      console.error('The provided path is not a directory');
+      process.exit(1);
+    }
+
+    console.log(`Scanning directory: ${targetDir}`);
+
+    const files = await findFiles(targetDir);
+
+    if (files.length === 0) {
+      console.log('No matching files found.');
+      process.exit(0);
+    }
+
+    console.log(`Found ${files.length} files.`);
+    await updateFiles(files);
+    await renameFiles(files);
+    console.log('\nDone!');
+
+  } catch (error) {
+    console.error('An error occurred:', error.message);
+    process.exit(1);
+  }
+}
+
+main();