fix: @tomjs/vscode-extension-webview dependency issue #4

tomjs · Jun 4, 2024 · 450827d · 450827d
1 parent c49025c
commit 450827d
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 47 deletions.
diff --git a/package.json b/package.json
@@ -56,6 +56,7 @@
   "dependencies": {
     "@tomjs/vscode-extension-webview": "^1.2.0",
     "dayjs": "^1.11.10",
+    "execa": "^5.1.1",
     "kolorist": "^1.8.0",
     "lodash.clonedeep": "^4.5.0",
     "lodash.merge": "^4.6.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/index.ts b/src/index.ts
@@ -1,6 +1,7 @@
 import type { Plugin, ResolvedConfig, UserConfig } from 'vite';
 import type { ExtensionOptions, PluginOptions, WebviewOption } from './types';
 import fs from 'node:fs';
+import os from 'node:os';
 import path from 'node:path';
 import { cwd } from 'node:process';
 import cloneDeep from 'lodash.clonedeep';
@@ -161,7 +162,14 @@ export default function getWebviewHtml(webview: Webview, context: ExtensionConte
   `;
   fs.writeFileSync(destFile, code, { encoding: 'utf8' });
 
-  return destFile.replaceAll('\\', '/');
+  return fixWindowsPath(destFile);
+}
+
+function fixWindowsPath(webviewPath: string) {
+  if (os.platform() === 'win32') {
+    webviewPath = webviewPath.replaceAll('\\', '/');
+  }
+  return webviewPath;
 }
 
 export function useVSCodePlugin(options?: PluginOptions): Plugin[] {
@@ -201,19 +209,23 @@ export function useVSCodePlugin(options?: PluginOptions): Plugin[] {
     };
   };
 
-  let webviewClient: string;
-  let webviewNpmPath: string | undefined;
+  let devWebviewClient: string;
+  let devWebviewPath: string | undefined;
   if (opts.webview) {
-    webviewNpmPath = getWebviewNpmPath();
-    if (!webviewNpmPath || !fs.existsSync(webviewNpmPath)) {
+    devWebviewPath = getWebviewNpmPath();
+    if (devWebviewPath && os.platform() === 'win32') {
+      devWebviewPath = devWebviewPath.replaceAll('\\', '/');
+    }
+
+    if (!devWebviewPath || !fs.existsSync(devWebviewPath)) {
       logger.warn(`[${WEBVIEW_PACKAGE_NAME}] is not installed, please install it first!`);
     } else {
       const fileName = 'client.global.js';
-      const clientFile = path.join(webviewNpmPath, fileName);
+      const clientFile = path.join(devWebviewPath, 'dist', fileName);
       if (!fs.existsSync(clientFile)) {
         logger.warn(`[${fileName}] is does not exist, please update the package!`);
       } else {
-        webviewClient = fs.readFileSync(clientFile, 'utf-8');
+        devWebviewClient = fs.readFileSync(clientFile, 'utf-8');
       }
     }
   }
@@ -261,9 +273,7 @@ export function useVSCodePlugin(options?: PluginOptions): Plugin[] {
                           const file = fs.readFileSync(args.path, 'utf-8');
                           if (file.includes(`${webview.name}(`)) {
                             return {
-                              contents:
-                                `import ${webview.name} from '@tomjs/vscode-extension-webview';\n` +
-                                file,
+                              contents: `import ${webview.name} from '${devWebviewPath}';\n` + file,
                               loader: 'ts',
                             };
                           }
@@ -289,11 +299,11 @@ export function useVSCodePlugin(options?: PluginOptions): Plugin[] {
         });
       },
       transformIndexHtml(html) {
-        if (!opts.webview || !webviewClient) {
+        if (!opts.webview || !devWebviewClient) {
           return html;
         }
 
-        return html.replace(/<\/title>/i, `</title><script>${webviewClient}</script>`);
+        return html.replace(/<\/title>/i, `</title><script>${devWebviewClient}</script>`);
       },
     },
     {

diff --git a/src/utils.ts b/src/utils.ts
@@ -1,10 +1,10 @@
 import type { AddressInfo } from 'node:net';
 import type { ViteDevServer } from 'vite';
-import { spawnSync } from 'node:child_process';
 import fs from 'node:fs';
 import { builtinModules } from 'node:module';
 import path from 'node:path';
 import { cwd } from 'node:process';
+import execa from 'execa';
 import { PACKAGE_NAME, WEBVIEW_PACKAGE_NAME } from './constants';
 
 export function readJson(path: string) {
@@ -108,42 +108,34 @@ export function resolveServerUrl(server: ViteDevServer) {
   }
 }
 
-export function getWebviewNpmPath() {
-  let npmPath = path.join(cwd(), 'node_modules', WEBVIEW_PACKAGE_NAME);
-
-  if (!fs.existsSync(npmPath)) {
-    try {
-      const res = spawnSync(
-        process.platform === 'win32' ? 'pnpm.cmd' : 'pnpm',
-        ['list', '--dev', '--depth=1', '--json'],
-        {
-          // stdio: ['inherit', 'ignore'],
-          cwd: process.cwd(),
-          encoding: 'utf-8',
-        },
-      );
-
-      if (res.status === 0 && res.stdout) {
-        const list = JSON.parse(res.stdout.trim());
-        if (list.length === 0) {
-          return;
-        }
-        const self = (list[0].devDependencies || {})[PACKAGE_NAME];
-        if (!self) {
-          return;
-        }
-
-        const dep = self.dependencies[WEBVIEW_PACKAGE_NAME];
-        if (dep) {
-          npmPath = dep.path;
-        }
+function getWebviewPnpmPath() {
+  try {
+    const res = execa.sync('pnpm', ['list', '--dev', '--depth=1', '--json'], {});
+    if (res.stdout) {
+      const list = JSON.parse(res.stdout.trim());
+      if (list.length === 0) {
+        return;
+      }
+      const self = (list[0].devDependencies || {})[PACKAGE_NAME];
+      if (!self) {
+        return;
       }
-    } catch {
-      npmPath = '';
-    }
 
-    if (npmPath) {
-      return path.join(npmPath, 'dist');
+      const dep = self.dependencies[WEBVIEW_PACKAGE_NAME];
+      if (dep) {
+        return dep.path;
+      }
     }
+  } catch {}
+}
+
+export function getWebviewNpmPath() {
+  const npmPath = path.join(cwd(), 'node_modules', WEBVIEW_PACKAGE_NAME);
+
+  if (fs.existsSync(npmPath)) {
+    return npmPath;
   }
+
+  // Temporary solution
+  return getWebviewPnpmPath();
 }