Ballerina vscode web editor

This is a monorepo containing multiple packages for building a Ballerina-based web editor. It uses Rush for managing dependencies, building, and maintaining the packages within the repository.

Prerequisites

• Node.js (version >= 16.13.0 and <= 21.19.2)
• PNPM (version 8.15.8)
• Rush (version 5.141.2)
• Run ballerina server

This project is using APIs of Ballerina Swan Lake Update 12.0 (2201.12.0).

Installation

1. Clone the repository
2. Install Rush globally if you haven't already

npm install -g @microsoft/rush

3. Install dependencies using Rush

rush install

4. Build all packages.

rush build

5. Run the project

npm start

6. Open your browser and navigate to http://localhost:3001.
7. Press Ctrl+Shift+P to open the command palette.
8. Select the Open GitHub Repository command and provide the repository URL of a Ballerina project to get started.

Packages

Vscode web server (workspaces/server/)

This workspace launches the vscode web server on http://localhost:3001.

This server serves ballerina web extension from workspaces/ballerina/ballerina-extension

Ballerina web extension

The current implementation of ballerina extension supports below features:

Language features:

• Completion
• Hover
• Publish diagnostics
• Rename
• Go to definition
• Go to references
• Document symbol
• Folding ranges
• Code action
• Inlay hint

Diagram features:

• Overview view
• Function view - add/view
• Type diagram view - add/view/edit/delete
• Service designer - http, graphql
• Triggers/Connectors - add/edit/view/delete
• Configurables - add/edit/view/delete
• Data mapper view

workspaces/ballerina/ballerina-extension/src/extension.ts, serves as the entry point for the Ballerina extension. When the extension is activated, it initializes the following components:

• Ballerina language server: Establishes a connection between the language client and the WebSocket-based Ballerina Language Server by connecting to the WebSocket server.

• File system: Connects to the HTTP-based file system server to provide project file access and handle file system operations.

• Ballerina visualizer - Activates features related to visualizing and editing Ballerina code.

References

1. Vscode test web
2. Web extensions
3. Language server protocol
4. Vscode file system provider
5. Vscode webview