transpile inlang environment to common js

.changeset/cool-plants-shout.md

@@ -0,0 +1,7 @@
+---
+"vs-code-extension": minor
+---
+
+The VSCode extension should now work for the majority of projects.
+
+We fixed a problem that blocked the VSCode extension for months. The extension transpiles ESM under the hood to CJS now because Electron, and thus VSCode, do not support ESM.

source-code/ide-extension/package.json

@@ -50,10 +50,12 @@
 	"dependencies": {
 		"@inlang/core": "*",
 		"@inlang/telemetry": "*",
+		"require-from-string": "^2.0.2",
 		"throttle-debounce": "^5.0.0"
 	},
 	"devDependencies": {
 		"@types/fs-extra": "^11.0.1",
+		"@types/require-from-string": "^1.2.1",
 		"@types/throttle-debounce": "^5.0.0",
 		"@types/vscode": "^1.75.0",
 		"@vscode/vsce": "^2.18.0",

source-code/ide-extension/src/decorations/messagePreview.ts

@@ -2,6 +2,7 @@ import * as vscode from "vscode"
 import { debounce } from "throttle-debounce"
 import { query } from "@inlang/core/query"
 import { state } from "../state.js"
+import { telemetryNode } from "@inlang/telemetry"
 
 const MAXIMUM_PREVIEW_LENGTH = 40
 
@@ -54,7 +55,7 @@ export async function messagePreview(args: {
 		}
 
 		// Get the message references
-		const wrappedDecorations = state().config.ideExtension?.messageReferenceMatchers.map(
+		const wrappedDecorations = (state().config.ideExtension?.messageReferenceMatchers ?? []).map(
 			async (matcher) => {
 				const messages = await matcher({
 					documentText: args.activeTextEditor.document.getText(),

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

@@ -1,23 +1,26 @@
 import * as vscode from "vscode"
-import fetch from "node-fetch"
 import { debounce } from "throttle-debounce"
 import { setState, state } from "./state.js"
 import { extractMessageCommand } from "./commands/extractMessage.js"
 import { messagePreview } from "./decorations/messagePreview.js"
 import { determineClosestPath } from "./utils/determineClosestPath.js"
-import { InlangConfigModule, setupConfig } from "@inlang/core/config"
+import { setupConfig } from "@inlang/core/config"
 import { ExtractMessage } from "./actions/extractMessage.js"
-import { createFileSystemMapper } from "./utils/createFileSystemMapper.js"
-import { initialize$import } from "./utils/$import.js"
 import { msg } from "./utils/message.js"
-// import { telemetryNode } from "@inlang/telemetry"
+import { createInlangEnv, importInlangConfig } from "./services/inlang-environment/index.js"
+import { telemetryNode } from "@inlang/telemetry"
+import { version } from "../package.json"
 
 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",
+			properties: {
+				vscode_version: vscode.version,
+				version: version,
+			},
+		})
 		msg("Inlang extension activated.", "info")
 
 		// start the extension
@@ -62,25 +65,18 @@ async function main(args: { context: vscode.ExtensionContext }): Promise<void> {
 	})
 
 	// get current workspace
-	const workspace = vscode.workspace.getWorkspaceFolder(vscode.Uri.parse(closestConfigPath))
-	if (!workspace) {
+	const workspaceFolder = vscode.workspace.getWorkspaceFolder(vscode.Uri.parse(closestConfigPath))
+	if (!workspaceFolder) {
 		return
 	}
 
-	// initialize inlang core and resources for current workspace
-	const fileSystemMapper = createFileSystemMapper(vscode.workspace.fs, workspace.uri)
-
 	// watch for changes in the config file
 	const watcher = vscode.workspace.createFileSystemWatcher(
-		new vscode.RelativePattern(workspace, "**/inlang.config.js"),
+		new vscode.RelativePattern(workspaceFolder, "**/inlang.config.js"),
 	)
 
-	const env = {
-		$fs: fileSystemMapper,
-		$import: initialize$import({ fs: fileSystemMapper, fetch }),
-	}
-
-	const module = (await import(closestConfigPath)) as InlangConfigModule
+	const module = await importInlangConfig(closestConfigPath)
+	const env = createInlangEnv({ workspaceFolder })
 
 	const config = await setupConfig({ module, env })
 
@@ -115,7 +111,7 @@ async function main(args: { context: vscode.ExtensionContext }): Promise<void> {
 		),
 	)
 
-	const documentSelectors = [
+	const documentSelectors: vscode.DocumentSelector = [
 		{ language: "javascript", pattern: "!**/inlang.config.js" },
 		...(state().config.ideExtension?.documentSelectors || []), // an empty array as fallback
 	]

source-code/ide-extension/src/services/inlang-environment/README.md

@@ -0,0 +1,5 @@
+# Inlang Environment for VSCode
+
+This service is a custom inlang environment based on the requirements of VSCode.
+
+The need for a custom environment stems from the fact that VSCode doesn't support ESM. The lack of ESM support in VSCode is caused by lacking ESM support in Electron. Issue https://github.com/inlang/inlang/issues/452 provides more details.