From 450827d63787544bd1c864ddf690e90d31454e17 Mon Sep 17 00:00:00 2001 From: Tom Gao Date: Tue, 4 Jun 2024 17:29:42 +0800 Subject: [PATCH] fix: @tomjs/vscode-extension-webview dependency issue #4 --- package.json | 1 + pnpm-lock.yaml | 3 +++ src/index.ts | 34 +++++++++++++++++---------- src/utils.ts | 62 ++++++++++++++++++++++---------------------------- 4 files changed, 53 insertions(+), 47 deletions(-) diff --git a/package.json b/package.json index 7dae3dc..6a73cd7 100644 --- 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 index 5d72120..0a91037 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -14,6 +14,9 @@ importers: dayjs: specifier: ^1.11.10 version: 1.11.10 + execa: + specifier: ^5.1.1 + version: 5.1.1 kolorist: specifier: ^1.8.0 version: 1.8.0 diff --git a/src/index.ts b/src/index.ts index e4a9395..55c93ef 100644 --- 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, ``); + return html.replace(/<\/title>/i, ``); }, }, { diff --git a/src/utils.ts b/src/utils.ts index d24cda7..5772c49 100644 --- 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(); }