vscode async webview
1.0.0
これは、VSCODE拡張機能内でWebビューを簡単に実装できるようにするためのユーティリティです。要約すると、これはiframes間のすべてのメッセージトラフィックを、使いやすい非同期APIに抽象化します。さらに、WebアプリにHTML文字列または特定のVSCodeコードを作成する必要なく、フルWebアプリの拡張機能への噴射を簡素化します。
このドキュメントは、このライブラリのユーザーを対象としています。開発者向けのドキュメントを読みたい場合は、代わりにこのテキストをお読みください。
私は最近、WebViewに大きく依存しているVSCODE拡張プロジェクトを継承しました。コードの深い分析の後、私は気づきました：
asWebviewUriを依頼していたため、プロジェクトに新しいリソースを追加することは非常に困難でした。postMessageへの明示的な明示的な呼びかけは本当に役に立ちませんでした。拡張機能を品質の生産レベルに引き上げ、維持しやすくする必要がありました。現在のプロジェクトを廃棄し、VSCodeが提供するAPIの上で作業するためのフレームワークを開発しなければならなかったことは間違いありませんでした。これがこのフレームワークです。
これは非常に新しいプロジェクトであり、その上に構築されている拡張機能は、おそらく来月リリースされるでしょう。安定したリリースがあるとすぐに、ここにリンクを入れます。
今のところ、結果は非常に満足のいくものでした。拡張機能の実際のコードは非常にシンプルで、拡張機能のロジックに焦点を当てており、2つの異なるアプリケーションを通信する方法の詳細には決してありません。
これは現在アルファにあります。拡張機能の最初のバージョンをリリースするとすぐにベータに移動し、VSCODEストアでライブになります。
これは、テストカバレッジの少なくとも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 ：これは、2つのアプリケーション間のブリッジを作成するクラスです。
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 ：このファイルは、2つのアプリケーション間で共有される状態を宣言します。
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使用するときはいつでも注意してください。これらは、拡張機能と通信するためにフロントエンドで使用される2つの構造です。
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 サンプルプロジェクトで完全な例を見つけることができます。
