Descargar vscode async webview - Código fuente de vscode async webview Descargar

vscode async webview

Otro código fuente

1.0.0

Descargar

Introducción

Esta es una utilidad para facilitar la implementación de vistas web dentro de VSCode Extensions. En resumen, esto resume todo el tráfico de mensajes entre los iframes en una API asíncrona fácil de usar. Además, simplifica la inyección de una aplicación web completa en la extensión sin la necesidad de escribir cadenas HTML o código VSCODE específico en la aplicación web.

Este documento está dirigido a los usuarios de esta biblioteca. Si desea leer el documento para desarrolladores, lea este texto.

Motivación

Recientemente heredé un proyecto de extensión VSCode que dependía en gran medida de una vista web. Después de un análisis profundo del código, noté:

La parte de inyección HTML del proceso fue muy compleja y se basó mucho en la función asWebviewUri , lo que hace que sea muy difícil agregar nuevos recursos al proyecto.
La comunicación entre la vista web y la extensión fue muy compleja, detallada, no intuitiva y propensa a los errores. Estados sin tipo, mensajes con cuerdas en su mayoría sin tipo, llamadas explícitas al postMessage y el registro manual de los oyentes realmente no ayudó.

Necesitaba elevar la extensión a un nivel de producción de calidad y hacerla algo fácil de mantener. No tenía dudas de que tuve que desechar el proyecto actual y desarrollar un marco para trabajar en la parte superior de la API proporcionada por VSCode. Este es este marco.

Este es un proyecto muy nuevo y la extensión que estamos construyendo además probablemente se lanzará el próximo mes. Tan pronto como tengamos un lanzamiento estable, le pondré un enlace aquí.

Los resultados, por ahora, han sido muy satisfactorios. El código real para nuestra extensión es súper simple y se centra en la lógica de la extensión, nunca en los detalles de cómo comunicar dos aplicaciones diferentes.

Etapa de desarrollo

Esto se encuentra actualmente en alfa. Lo moveré a Beta tan pronto como lanzaremos la primera versión de nuestra extensión y está en vivo en la tienda VScode.

Esto tendrá una versión estable (1.0.0) cuando tengamos al menos el 80% de la cobertura de prueba.

Descargo de responsabilidad

Esta documentación supone que ya está familiarizado con los conceptos básicos de la documentación VSCode para crear una extensión.

Ejemplo

Nos centraremos en un ejemplo muy simple en el que el WebView muestra una notificación VSCode y la notificación de VSCODE interactúa con el estado WebView. Vea el video a continuación.

muestra.mov

Extensión

`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 es la clase que hace el puente entre las dos aplicaciones.

 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 archivo declara el estado compartido entre las dos aplicaciones:

 export interface ViewState {
  counter ?: number ,
}

Webview

Este ejemplo se ha creado con React, pero puede usar cualquier cosa como marco frontend.

`webview/src/vscode.ts` :

Este archivo realiza la configuración básica para usar la 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` :

La mayor parte del código aquí es la Boilerplate de Vite. Preste atención a cada vez que usemos vscode.bridge y useBridgeState , estas son las dos estructuras utilizadas en la frontend para comunicarse con la extensión.

 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