Prototype TS plugins on web

mjbvz · mjbvz · commit e2bbb6c3297b · 2022-02-15T19:25:10.000-08:00
This prototype allows service plugins to be loaded on web TSServer

Main changes:

- Adds a new host entryPoint called `importServicePlugin` for overriding how plugins can be loaded. This may be async
- Implement `importServicePlugin` for webServer
- The web server plugin implementation looks for a `browser` field in the plugin's `package.json`
- It then uses `import(...)` to load the plugin (the plugin source must be compiled to support being loaded as a module)
diff --git a/src/server/project.ts b/src/server/project.ts
@@ -1577,7 +1577,7 @@ namespace ts.server {
             }
         }
 
-        protected enablePlugin(pluginConfigEntry: PluginImport, searchPaths: string[], pluginConfigOverrides: Map<any> | undefined) {
+        protected async enablePlugin(pluginConfigEntry: PluginImport, searchPaths: string[], pluginConfigOverrides: Map<any> | undefined) {
             this.projectService.logger.info(`Enabling plugin ${pluginConfigEntry.name} from candidate paths: ${searchPaths.join(",")}`);
             if (!pluginConfigEntry.name || parsePackageName(pluginConfigEntry.name).rest) {
                 this.projectService.logger.info(`Skipped loading plugin ${pluginConfigEntry.name || JSON.stringify(pluginConfigEntry)} because only package name is allowed plugin name`);
@@ -1589,8 +1589,27 @@ namespace ts.server {
             const logError = (message: string) => {
                 (errorLogs || (errorLogs = [])).push(message);
             };
-            const resolvedModule = firstDefined(searchPaths, searchPath =>
+
+            let resolvedModule: any | undefined;
+            if (this.projectService.host.importServicePlugin) {
+                for (const searchPath of searchPaths) {
+                    try {
+                        resolvedModule = await this.projectService.host.importServicePlugin(searchPath, pluginConfigEntry.name);
+                    }
+                    catch (e) {
+                        // TODO: log this?
+                        continue;
+                    }
+                    if (resolvedModule) {
+                        break;
+                    }
+                }
+            }
+            else {
+                resolvedModule = firstDefined(searchPaths, searchPath =>
                 Project.resolveModule(pluginConfigEntry.name, searchPath, this.projectService.host, log, logError) as PluginModuleFactory | undefined);
+            }
+
             if (resolvedModule) {
                 const configurationOverride = pluginConfigOverrides && pluginConfigOverrides.get(pluginConfigEntry.name);
                 if (configurationOverride) {
diff --git a/src/server/types.ts b/src/server/types.ts
@@ -16,5 +16,6 @@ declare namespace ts.server {
         gc?(): void;
         trace?(s: string): void;
         require?(initialPath: string, moduleName: string): RequireResult;
+        importServicePlugin?(root: string, moduleName: string): Promise<any>;
     }
 }
diff --git a/src/webServer/webServer.ts b/src/webServer/webServer.ts
@@ -1,4 +1,6 @@
 /*@internal*/
+/// <reference lib="dom" />
+
 namespace ts.server {
     export interface HostWithWriteMessage {
         writeMessage(s: any): void;
@@ -137,6 +139,22 @@ namespace ts.server {
             /* eslint-enable no-restricted-globals */
 
             require: () => ({ module: undefined, error: new Error("Not implemented") }),
+            importServicePlugin: async (root: string, moduleName: string) => {
+                const packageRoot = combinePaths(root, "node_modules", moduleName);
+
+                const packageJsonResponse = await fetch(combinePaths(packageRoot, "package.json"));
+                const packageJson = await packageJsonResponse.json();
+                const browser = packageJson.browser;
+                if (!browser) {
+                    throw new Error("Could not load plugin. No 'browser' field found in package.json.");
+                }
+
+                const scriptPath = combinePaths(packageRoot, browser);
+
+                // TODO: TS rewrites `import(...)` to `require`. Use eval to bypass this
+                // eslint-disable-next-line no-eval
+                return eval(`import(${JSON.stringify(scriptPath)})`);
+            },
             exit: notImplemented,
 
             // Debugging related

Original file line number	Diff line number	Diff line change
`@@ -16,5 +16,6 @@ declare namespace ts.server {`
`16`	`16`	`gc?(): void;`
`17`	`17`	`trace?(s: string): void;`
`18`	`18`	`require?(initialPath: string, moduleName: string): RequireResult;`
	`19`	`+ importServicePlugin?(root: string, moduleName: string): Promise<any>;`
`19`	`20`	`}`
`20`	`21`	`}`