zilla-vscode-ext

Zilla extension helps you to configure Zilla Yaml files providing IntelliSense.

What is Zilla?

API Gateway for event-driven microservices

How to use?

Create a valid YAML file in any folder with a name that ends in zilla and press CTRL + space to see suggestions.

Features

Yaml IntelliSense
Zilla Diagram

Requirements

We use YAML Extension so if you don't have it installed VSCode will prompt you.

Known Issues

The first level of many entities, such as bindings, guards and vaults, requires that you give an arbitrary identifier so in these cases the suggestions are not going to help you.

Development

Extension

If you want to send a Pull Request follow these steps to run and test locally:

Fork and clone the repo locally
Run npm run setup
Open VSCode in the zilla-vscode-ext folder (make sure you are running latest VSCode)
Start Debugging (you can press F5)
A new window will pop-up, this is the Extension Development Host mode for VSCode
- You can switch back to previous window to see logs
In the Extension Development Host the extension will be loaded for you
- If you don't have the YAML extension installed, VSCode will prompt you
Now you can create a valid YAML file in any folder with a name that ends in zilla and enjoy auto-completion of fields

Diagram App

We have a second app embedded in the extension to render the diagram.

When working with the diagram you have two options:

Run as a standalone app

You can run it as a standalone app in the browser, by default it will render the diagram hard-coded in the DataProvider.tsx file in the yamlString variable.

To change the rendered yaml file a raw yaml download url can be added to the hash at the /remoteConfig path. This will first download the file then apply it to the diagram.

<host>/remoteConfig#https://raw.githubusercontent.com/aklivity/zilla-examples/main/http.echo/zilla.yaml

Use the following command:

npm run start:webview

The benefit of this approach is that you will get Hot Module Replacement work so you can iterate quickly. And the down side is that you don't have the communication with the extension.

Run inside the extension

If you want to test the communication between the extension and the webview, you need to build the website first and then run the extension as usual.

To build the diagram app, use the following command:

npm run build:webview

For this case, you need to manually re-build the webview and restart the extension after each change.

For more information

Enjoy!

Zilla VSCode

Aklivity