vscode async webview

介绍

这是一个实用程序，可以使在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 

完整的例子

您可以在我们的示例项目中找到完整的示例。

文档

• 入门
• 后端库
• 客户库库