refactor: import esm modules in ide extension

source-code/ide-extension/package.json

@@ -53,12 +53,15 @@
 		"throttle-debounce": "^5.0.0"
 	},
 	"devDependencies": {
+		"@types/fs-extra": "^11.0.1",
 		"@types/throttle-debounce": "^5.0.0",
 		"@types/vscode": "^1.75.0",
 		"@vscode/vsce": "^2.18.0",
 		"esbuild": "^0.17.18",
+		"fs-extra": "^11.1.1",
 		"node-fetch": "^3.3.1",
-		"ovsx": "^0.8.0"
+		"ovsx": "^0.8.0",
+		"typescript": "^5.0.4"
 	},
 	"activationEvents": [
 		"workspaceContains:**/inlang.config.js"

source-code/ide-extension/src/commands/extractMessage.ts

@@ -3,7 +3,7 @@ import { setState, state } from "../state.js"
 import { query } from "@inlang/core/query"
 import type { Message } from "@inlang/core/ast"
 import { msg } from "../utils/message.js"
-import { telemetryNode } from "@inlang/telemetry"
+// import { telemetryNode } from "@inlang/telemetry"
 
 /**
  * Helps the user to extract messages from the active text editor.
@@ -106,13 +106,13 @@ export const extractMessageCommand = {
 		await textEditor.edit((editor) => {
 			editor.replace(textEditor.selection, preparedExtractOption)
 		})
-		telemetryNode.capture({
-			distinctId: "unknown",
-			event: "IDE-EXTENSION message extracted",
-			properties: {
-				config: state().config,
-			},
-		})
+		// telemetryNode.capture({
+		// 	distinctId: "unknown",
+		// 	event: "IDE-EXTENSION message extracted",
+		// 	properties: {
+		// 		config: state().config,
+		// 	},
+		// })
 		return msg("Message extracted.")
 	},
 } as const

source-code/ide-extension/src/main.ts

@@ -10,14 +10,15 @@ import { ExtractMessage } from "./actions/extractMessage.js"
 import { createFileSystemMapper } from "./utils/createFileSystemMapper.js"
 import { initialize$import } from "@inlang/core/environment"
 import { msg } from "./utils/message.js"
-import { telemetryNode } from "@inlang/telemetry"
+import { $import } from "./utils/$import.js"
+// import { telemetryNode } from "@inlang/telemetry"
 
 export async function activate(context: vscode.ExtensionContext): Promise<void> {
 	try {
-		telemetryNode.capture({
-			distinctId: "unknown",
-			event: "IDE-EXTENSION activated",
-		})
+		// telemetryNode.capture({
+		// 	distinctId: "unknown",
+		// 	event: "IDE-EXTENSION activated",
+		// })
 		msg("Inlang extension activated.", "info")
 
 		// start the extension
@@ -77,7 +78,9 @@ async function main(args: { context: vscode.ExtensionContext }): Promise<void> {
 
 	const env = { $fs: fileSystemMapper, $import: initialize$import({ fs: fileSystemMapper, fetch }) }
 
-	const module = (await import(closestConfigPath)) as InlangConfigModule
+	const module = (await $import(closestConfigPath)) as InlangConfigModule
+	console.log("module", module)
+
 	const config = await setupConfig({ module, env })
 
 	const loadResources = async () => {
@@ -111,8 +114,6 @@ async function main(args: { context: vscode.ExtensionContext }): Promise<void> {
 		),
 	)
 
-	console.log("inlang extension started")
-
 	const documentSelectors = [
 		{ language: "javascript", pattern: "!**/inlang.config.js" },
 		...(state().config.ideExtension?.documentSelectors || []), // an empty array as fallback

source-code/ide-extension/src/utils/$import.ts

@@ -0,0 +1,63 @@
+import path from "node:path"
+import ts from "typescript"
+import * as vscode from "vscode"
+import fsExtra from "fs-extra"
+
+// Transpile code to CommonJS using TypeScript Compiler API
+function transpileCode(code: string): string {
+	const compilerOptions: ts.CompilerOptions = {
+		module: ts.ModuleKind.CommonJS,
+		target: ts.ScriptTarget.ES2015,
+	}
+
+	const result = ts.transpileModule(code, { compilerOptions })
+	return result.outputText
+}
+
+// Custom $import function
+export const $import = async (modulePath: string): Promise<any> => {
+	// Read the code from the module path
+	const code = await vscode.workspace.fs.readFile(vscode.Uri.file(modulePath))
+
+	// Transpile the code to CommonJS
+	const transpiledCode = transpileCode(code.toString())
+
+	console.log("transpiledCode", transpiledCode)
+
+	// Create the .inlang folder if it doesn't exist
+	const inlangFolder = ".inlang"
+	const rootFolder = vscode.workspace.workspaceFolders?.[0]
+
+	if (!rootFolder) {
+		// Handle root folder not found
+		console.error("No workspace folder found.")
+		return undefined
+	}
+
+	const folderUri = rootFolder.uri.with({ path: path.join(rootFolder.uri.path, inlangFolder) })
+
+	try {
+		await vscode.workspace.fs.createDirectory(folderUri)
+	} catch (error) {
+		// Handle folder creation error
+		console.error("Failed to create .inlang folder:", error)
+		return undefined
+	}
+
+	// Generate a random file name
+	const tempFileName = `${Math.random().toString(36).slice(7)}.cjs`
+	const tempFilePath = folderUri.with({ path: path.join(folderUri.path, tempFileName) })
+
+	// Write the transpiled code to a temporary file
+	await vscode.workspace.fs.writeFile(tempFilePath, Buffer.from(transpiledCode))
+
+	// Use require to load the transpiled code
+	// eslint-disable-next-line @typescript-eslint/no-var-requires
+	const module = require(tempFilePath.fsPath)
+
+	// Clean up the temporary file and folder
+	await vscode.workspace.fs.delete(tempFilePath)
+	await fsExtra.remove(folderUri.fsPath)
+
+	return module
+}