vscode async webview Download - vscode async webview Source Code Télécharger

vscode async webview

Autre code source

1.0.0

Télécharger

Introduction

Il s'agit d'un utilitaire pour faciliter la mise en œuvre des vues Web dans les extensions VScode. En résumé, cela résume tout le trafic de message entre les iframes en une API asynchrone facile à utiliser. En outre, il simplifie l'injection d'une application Web complète dans l'extension sans avoir besoin d'écrire des chaînes HTML ou un code VScode spécifique dans l'application Web.

Ce document s'adresse aux utilisateurs de cette bibliothèque. Si vous souhaitez lire le document pour les développeurs, veuillez lire ce texte à la place.

Motivation

J'ai récemment hérité d'un projet d'extension VScode qui s'appuyait fortement sur une vue Web. Après une analyse profonde du code, j'ai remarqué:

La partie d'injection HTML du processus était très complexe et s'appuyait beaucoup dans la fonction asWebviewUri , ce qui rend très difficile d'ajouter de nouvelles ressources au projet.
La communication entre WebView et l'extension était très complexe, verbeuse, non intuitive et sujette aux erreurs. États non typés, messages avec des chaînes pour la plupart des appels explicites et explicites au postMessage et l'enregistrement manuel des auditeurs n'ont vraiment pas aidé.

J'avais besoin d'élever l'extension à un niveau de production de qualité et de le rendre facile à entretenir. Je ne doutais pas que je devais supprimer le projet actuel et développer un cadre pour travailler au-dessus de l'API fournis par VSCODE. Ceci est ce cadre.

Il s'agit d'un tout nouveau projet et l'extension que nous construisons en plus sera probablement publiée le mois prochain. Dès que nous avons une version stable, je vais y mettre un lien ici.

Les résultats, pour l'instant, ont été très satisfaisants. Le code réel de notre extension est super simple et se concentre sur la logique de l'extension, jamais sur les détails de la façon de communiquer deux applications différentes.

Étape de développement

Ceci est actuellement sur Alpha. Je le déplacerai en bêta dès que nous publierons la première version de notre extension et il est en direct sur le magasin VScode.

Cela aura une version stable (1,0,0) lorsque nous aurons au moins 80% de la couverture des tests.

Clause de non-responsabilité

Cette documentation suppose que vous connaissez déjà les bases de la documentation VScode pour créer une extension.

Exemple

Nous allons nous concentrer sur un exemple très simple où le WebView affiche une notification VScode et la notification VScode interagit avec l'état WebView. Voir la vidéo ci-dessous.

échantillon

Extension

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

C'est la classe qui fait le pont entre les deux applications.

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

Ce fichier déclare que l'état partagé entre les deux applications:

 export interface ViewState {
  counter ?: number ,
}

WebView

Cet exemple a été créé avec React, mais vous pouvez utiliser n'importe quoi comme Frontend Framework.

`webview/src/vscode.ts` :

Ce fichier fait la configuration de base pour l'utilisation de 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 majeure partie du code ici est la bailler de Vite. Faites attention à chaque fois que nous utilisons vscode.bridge et useBridgeState , ce sont les deux structures utilisées dans le frontend afin de communiquer avec l'extension.

 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