fix(vscode-ide-companion): 重构 useVSCode hook 实现, 解决 webview 中 vscode api 重复声明

This commit is contained in:
yiliang114
2025-11-20 11:07:09 +08:00
parent 805e5f92c1
commit dcc10eb0a9

View File

@@ -4,8 +4,6 @@
* SPDX-License-Identifier: Apache-2.0 * SPDX-License-Identifier: Apache-2.0
*/ */
import { useMemo } from 'react';
export interface VSCodeAPI { export interface VSCodeAPI {
postMessage: (message: unknown) => void; postMessage: (message: unknown) => void;
getState: () => unknown; getState: () => unknown;
@@ -14,14 +12,28 @@ export interface VSCodeAPI {
declare const acquireVsCodeApi: () => VSCodeAPI; declare const acquireVsCodeApi: () => VSCodeAPI;
export function useVSCode(): VSCodeAPI { /**
return useMemo(() => { * 模块级别的 VS Code API 实例缓存
* acquireVsCodeApi() 只能调用一次,必须在模块级别缓存
*/
let vscodeApiInstance: VSCodeAPI | null = null;
/**
* 获取 VS Code API 实例
* 使用模块级别缓存确保 acquireVsCodeApi() 只被调用一次
*/
function getVSCodeAPI(): VSCodeAPI {
if (vscodeApiInstance) {
return vscodeApiInstance;
}
if (typeof acquireVsCodeApi !== 'undefined') { if (typeof acquireVsCodeApi !== 'undefined') {
return acquireVsCodeApi(); vscodeApiInstance = acquireVsCodeApi();
return vscodeApiInstance;
} }
// Fallback for development/testing // Fallback for development/testing
return { vscodeApiInstance = {
postMessage: (message: unknown) => { postMessage: (message: unknown) => {
console.log('Mock postMessage:', message); console.log('Mock postMessage:', message);
}, },
@@ -30,5 +42,13 @@ export function useVSCode(): VSCodeAPI {
console.log('Mock setState:', state); console.log('Mock setState:', state);
}, },
}; };
}, []); return vscodeApiInstance;
}
/**
* Hook to get VS Code API
* 多个组件可以安全地调用此 hookAPI 实例会被复用
*/
export function useVSCode(): VSCodeAPI {
return getVSCodeAPI();
} }