vscode async webview下載vscode async webview源代碼下載

vscode async webview

其他源碼

1.0.0

下載

介紹

這是一個實用程序，可以使在VSCODE擴展中實現Web視圖變得易於實現。總而言之，這將iframe之間的所有消息流量抽象成易於使用的異步API。此外，它簡化了將完整的Web應用程序注入到擴展程序中，而無需在Web應用程序中編寫HTML字符串或特定的VSCODE代碼。

該文檔針對此庫的用戶。如果您想閱讀開發人員的文檔，請改用此文本。

動機

我最近繼承了一個vscode擴展項目，該項目在很大程度上依賴於WebView。經過對代碼的深入分析後，我注意到：

該過程的HTML注入部分非常複雜，並且非常依賴於asWebviewUri功能，因此很難在項目中添加新的資源。
網絡瀏覽和擴展之間的通信非常複雜，冗長，不直覺且容易出現錯誤。未經類似的州，帶有字符串的消息大多是未構想的，對聆聽者的postMessage和手動註冊的明確呼叫確實沒有幫助。

我需要將擴展提升到質量的生產水平，並使其易於維護。毫無疑問，我必須廢除當前的項目，並開發一個框架以在VSCODE提供的API之上工作。這是這個框架。

這是一個非常新的項目，我們正在建立的擴展名可能會在下個月發布。一旦我們有一個穩定的版本，我將在此處鏈接。

目前，結果非常令人滿意。我們擴展的實際代碼非常簡單，專注於擴展的邏輯，從未介紹如何傳達兩個不同應用程序的詳細信息。

發展階段

這目前在alpha上。一旦我們發布了擴展名的第一個版本，它將在VSCODE商店中直播，將其移至Beta。

當我們至少具有80％的測試覆蓋範圍時，這將具有穩定的版本（1.0.0）。

免責聲明

該文檔假定您已經熟悉用於創建擴展名的VSCODE文檔的基礎知識。

例子

我們將重點介紹一個非常簡單的示例，其中WebView顯示了VSCODE通知，並且VSCODE NOTIFIFIENCT與WebView State進行交互。請參閱下面的視頻。

樣本

擴大

`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 ,
}

WebView

此示例是通過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 . useState

`webview/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