vscode async webview
1.0.0
이것은 VSCODE 확장 내에서 웹 뷰를보다 쉽게 구현할 수 있도록 유틸리티입니다. 요약하면, 이것은 iframes 간의 모든 메시지 트래픽을 사용하기 쉬운 비동기 API로 추상화합니다. 또한 웹 앱에서 HTML 문자열 또는 특정 vscode 코드를 작성할 필요없이 전체 웹 앱을 확장자로 주입하는 것을 단순화합니다.
이 문서는이 라이브러리 사용자를 대상으로합니다. 개발자를위한 문서를 읽으려면 대신이 텍스트를 읽으십시오.
최근에 WebView에 크게 의존하는 VSCODE 확장 프로젝트를 상속했습니다. 코드를 깊이 분석 한 후 다음을 알았습니다.
asWebviewUri 기능에 많은 의존하여 프로젝트에 새로운 리소스를 추가하기가 매우 어렵습니다.postMessage 에 대한 명백한 호출 및 청취자의 수동 등록이 실제로 도움이되지 않았습니다.확장을 생산 품질 수준으로 높이고 유지하기 쉽게 만들어야했습니다. 의심 할 여지없이 현재 프로젝트를 폐기하고 VSCODE에서 제공 한 API 위에서 작업 할 프레임 워크를 개발해야했습니다. 이것이이 프레임 워크입니다.
이것은 매우 새로운 프로젝트이며 우리가 구축하고있는 확장 프로그램은 다음 달에 출시 될 것입니다. 안정적인 릴리스가 있으면 여기에 링크를 넣을 것입니다.
현재 결과는 매우 만족 스러웠습니다. 우리 확장에 대한 실제 코드는 매우 간단하며 확장의 논리에 중점을두고 있으며 두 가지 다른 응용 프로그램을 전달하는 방법에 대한 세부 사항은 없습니다.
이것은 현재 알파에 있습니다. 우리 확장의 첫 번째 버전을 출시하자마자 베타로 옮길 것입니다.
테스트 범위의 80% 이상이있을 때 안정적인 릴리스 (1.0.0)가 있습니다.
이 문서는 확장을 만들기위한 VSCODE 문서의 기본 사항에 이미 익숙하다고 가정합니다.
WebView가 VSCODE 알림을 표시하고 VSCODE 알림이 WebView 상태와 상호 작용하는 매우 간단한 예제에 중점을 둘 것입니다. 아래 비디오를 참조하십시오.
extension/src/extension.ts : import * as vscode from 'vscode'
import { VSCodeWebview } from '@stack-spot/vscode-async-webview-backend'
import { Bridge } from './Bridge'
export function activate ( context : vscode . ExtensionContext ) {
const webview = new VSCodeWebview ( {
type : 'myExtension' ,
path : 'packages/webview' ,
title : 'My Extension' ,
bridgeFactory : ( webview ) => new Bridge ( webview ) ,
context ,
} )
let disposable = vscode . commands . registerCommand ( 'myExtension.start' , ( ) => {
webview . show ( )
} )
context . subscriptions . push ( disposable )
}extension/src/Bridge.ts :이것은 두 응용 프로그램 사이의 브리지를 만드는 클래스입니다.
import { VSCodeWebviewBridge } from '@stack-spot/vscode-async-webview-backend'
import { ViewState } from './ViewState'
import { window } from 'vscode'
export class Bridge extends VSCodeWebviewBridge < ViewState > {
async showMessage ( message : string ) {
const action = await window . showInformationMessage ( message , 'reset counter' , 'close' )
if ( action === 'reset counter' ) {
this . state . set ( 'counter' , 0 )
}
}
}extension/src/ViewState.ts :이 파일은 두 응용 프로그램간에 공유 된 상태를 선언합니다.
export interface ViewState {
counter ?: number ,
} 이 예제는 React를 사용하여 만들어졌지만 프론트 엔드 프레임 워크로 사용할 수 있습니다.
webview/src/vscode.ts :이 파일은 lib를 사용하기위한 기본 설정을 만듭니다.
import { VSCodeWeb , VSCodeWebInterface } from '@stack-spot/vscode-async-webview-client'
import { createVSCodeHooks } from '@stack-spot/vscode-async-webview-react'
import type { Bridge } from 'extension/Bridge'
export const vscode : VSCodeWebInterface < Bridge > = new VSCodeWeb < Bridge > ( { } )
const vsHooks = createVSCodeHooks ( vscode )
export const useBridgeState = vsHooks . useStatewebview/src/App.tsx : 여기의 코드의 대부분은 Vite의 보일러 플레이트입니다. 우리가 vscode.bridge 및 useBridgeState 사용할 때마다주의를 기울이면, 이들은 확장과 통신하기 위해 프론트 엔드에 사용되는 두 구조입니다.
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import { useBridgeState , vscode } from './vscode'
function App ( ) {
const [ count = 0 , setCount ] = useBridgeState ( 'counter' )
return (
< >
< div >
< a href = "https://vitejs.dev" target = "_blank" >
< img src = { viteLogo } className = "logo" alt = "Vite logo" / >
< / a >
< a href = "https://react.dev" target = "_blank" >
< img src = { reactLogo } className = "logo react" alt = "React logo" / >
< / a >
< / div >
< h1 > Vite + React < / h1 >
< div className = "card" >
< button onClick = { ( ) => {
setCount ( count + 1 )
vscode . bridge . showMessage ( `The counter is at: ${ count + 1 } .` )
} } >
count is { count }
< / button >
< p >
Edit < code > src/App.tsx < / code > and save to test HMR
< / p >
< / div >
< p className = "read-the-docs" >
Click on the Vite and React logos to learn more
< / p >
< / >
)
}
export default App 샘플 프로젝트에서 전체 예제를 찾을 수 있습니다.
