https://github.com/eclipse-sprotty/sprotty-vscode

sprotty-vscode
https://github.com/eclipse-sprotty/sprotty-vscode

Last synced: 3 months ago
JSON representation

sprotty-vscode

• Host: GitHub
• URL: https://github.com/eclipse-sprotty/sprotty-vscode
• Owner: eclipse-sprotty
• License: epl-2.0
• Created: 2019-11-06T14:36:19.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2024-05-02T13:25:23.000Z (6 months ago)
• Last Synced: 2024-05-10T08:02:56.354Z (6 months ago)
• Language: TypeScript
• Size: 33.8 MB
• Stars: 53
• Watchers: 13
• Forks: 22
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-starred - eclipse-sprotty/sprotty-vscode - sprotty-vscode (others)

README

        
[![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/eclipse/sprotty-vscode)

# sprotty-vscode

This repository contains the glue code to integrate [Sprotty diagrams](https://github.com/eclipse/sprotty) - with or without a language server - in VSCode extensions.

Also contains an example extension for a domain-specific language for statemachines. The example is also available as _States Example_ from the [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=typefox.states-extension).

![Screenshot](images/screenshot.png)

## Features

* running Sprotty diagrams in VS Code webviews,

* SVG export (ALT-E), animated center selection (ALT-C) and fit to screen (ALT-F) actions,

* interaction with Sprotty-enhanced language servers to automatically synchronize diagrams with language artifacts.

## Architecture

In VS Code, extensions can contribute new UI components using a webview. Webviews communicate with the extension using the [`vscode-messenger`](https://github.com/TypeFox/vscode-messenger) library. The [`WebviewPanelManager`](./packages/sprotty-vscode/src/webview-panel-manager.ts) uses this to send and receive Sprotty Actions to and from a [`WebviewEndpoint`](./packages/sprotty-vscode/src/webview-endpoint.ts). The latter runs a webpacked `bundle.js` that contains the Sprotty diagram code.

![Architecture Diagram](images/architecture.png)

If your extension provides a language, you can include a [Sprotty-enhanced language server](https://github.com/eclipse/sprotty-server) to get fully synchronized diagrams for your language artifacts. The [`SprottyLspVscodeExtension`](./packages/sprotty-vscode/src/lsp/sprotty-lsp-vscode-extension.ts) acts as a relay between the language server and a [`SprottyLanguageWebview`](./packages/sprotty-vscode/src/lsp/sprotty-lsp-webview.ts), and intercepts actions/LSP messages that require to interact with the VS Code workbench.

## Contents

The repo is structured as follows

- `examples`: an example Sprotty visualization using a [Langium](https://langium.org/)-based Language Server.

- `packages/sprotty-vscode`: library code for the VSCode extension.

- `packages/sprotty-vscode-protocol`: common protocol classes for the communication between the extension and the webview.

- `packages/sprotty-vscode-webview`: library code for the script that is run in the webview.

## Development

Compile the library code and the examples:

```

yarn

```

If you also want to use the older Xtext-based example, you need to run this command before `yarn`:

```

./examples/states-xtext/language-server/gradlew -p examples/states-xtext/language-server/ build

```