vscode async webview download - vscode async webview código fonte download

vscode async webview

Outro código-fonte

1.0.0

Baixar

Introdução

Este é um utilitário para facilitar a implementação de visualizações da Web nas extensões do VSCODE. Em resumo, isso resumiu todo o tráfego de mensagens entre os iframes em uma API assíncrona fácil de usar. Além disso, simplifica a injeção de um aplicativo Web completo na extensão sem a necessidade de escrever strings HTML ou código VSCODE específico no aplicativo da Web.

Este documento é destinado a usuários desta biblioteca. Se você quiser ler o documento para desenvolvedores, leia este texto.

Motivação

Recentemente, herdei um projeto de extensão do VSCODE que confiou fortemente em uma WebView. Após uma análise profunda do código, notei:

A parte da injeção de HTML do processo foi muito complexa e confiava muito na função asWebviewUri , dificultando a adição de novos recursos ao projeto.
A comunicação entre o WebView e a extensão foi muito complexa, detalhada, não intuitiva e propensa a erros. Estados não titados, mensagens com cordas principalmente sem forma e chamadas explícitas para postMessage e registro manual de ouvintes realmente não ajudaram.

Eu precisava elevar a extensão a um nível de produção de qualidade e tornar algo fácil de manter. Não tive dúvida de que tive que descartar o projeto atual e desenvolver uma estrutura para trabalhar no topo da API fornecida pelo VSCode. Esta é essa estrutura.

Este é um projeto muito novo e a extensão que estamos construindo no topo provavelmente será lançada no próximo mês. Assim que tivermos um lançamento estável, colocarei um link para isso aqui.

Os resultados, por enquanto, têm sido muito satisfatórios. O código real para nossa extensão é super simples e se concentra na lógica da extensão, nunca em detalhes de como comunicar dois aplicativos diferentes.

Estágio de desenvolvimento

Atualmente, está em Alpha. Estarei movendo -o para a Beta assim que lançarmos a primeira versão da nossa extensão e está ao vivo na loja Vscode.

Isso terá uma liberação estável (1.0.0) quando tivermos pelo menos 80% da cobertura do teste.

Isenção de responsabilidade

Esta documentação pressupõe que você já esteja familiarizado com o básico da documentação do VSCode para criar uma extensão.

Exemplo

Vamos nos concentrar em um exemplo muito simples, onde o WebView mostra uma notificação do VSCODE e a notificação do VSCODE interage com o estado da WebView. Veja o vídeo abaixo.

Sample.mov

Extensão

`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` :

Esta é a classe que faz a ponte entre os dois aplicativos.

 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` :

Este arquivo declara o estado compartilhado entre os dois aplicativos:

 export interface ViewState {
  counter ?: number ,
}

WebView

Este exemplo foi criado com o React, mas você pode usar qualquer coisa como estrutura de front -end.

`webview/src/vscode.ts` :

Este arquivo faz a configuração básica para o uso da 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` :

A maior parte do código aqui é a caldeira da Vite. Preste atenção sempre que usamos vscode.bridge e useBridgeState , essas são as duas estruturas usadas no front -end para se comunicar com a extensão.

 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