...

The setup tasks for Modular Target will fail. Disable it after this happens and execute them again via Help>Perform Setup Tasks. Open the plug-in development perspective. Select working sets as top level elements. Run clean build. Several pragmatics projects have errorerrors. Just close them and you will be fine.

...

yarn && cd keith-app && yarn run socket

yarn builds all the stuff. yarn run socket in keith-app starts the application. After an initial build via yarn you can run yarn watch  to watch the changes in your repository. In another console you run yarn run socket in keith-app. Now refreshing your browser is enough to apply the changes.

Per default the KEITH opens on localhost:3000.

It is required to restart the language server if KEITH is restarted, since the diagram view has a problem (since theia-sprotty is used) to reconnect after that.

Known issues for windows:

nsfw.code not found: In the top level package.json exists a script called postinstall. Remove this on windows, delete the node_modules folder and rebuilt the application. This is a known issue of electron-builder.

Known issues on mac:

Since SWT is still used as part of the diagram synthesis (but is not relevant anymore). Since it is not called on the main thread this causes a deadlock. Therefore mac just does not work.

Known issues:

Refreshing the browser is not enough for the diagram to work. If the diagram is needed the language server has to be restarted before the browser is refreshed. This is a known issue in theia-sprotty.

Developing for KEITH

We use java ServiceLoader to register stuff. Here is a small example how a LanguageServerExtension is registered via a ServiceLoader and how it is used:

...

const lclient = await this.client.languageClient
const snapshotsDescriptions: CodeContainer = await lclient.sendRequest("keith/kicool/compile", [uri, KeithDiagramManager.DIAGRAM_TYPE + '_sprotty', command,
	this.compilerWidget.compileInplace]) as CodeContainer
// or via a thenable
client.languageClient.then(lClient => {
lClient.sendRequest("keith/kicool/compile").then((languagessnapshotsDescriptions: LanguageDescription[]CodeContainer) => {
	// very important stuff
}
// await is preferred, since it is shorter. 

In this example client is an instance of a language client. It is usally usually injected like this:

constructor(
	@inject(KeithLanguageClientContribution) public readonly client: KeithLanguageClientContribution
	// other injected classes
    ) {
	// constructor stuff
}

How to make a new package for KEITH

Clone the KEITH repository.

Open the keith folder in VSCode. You are know in the keith directory in VSCode.

You see something like this: TODO picture

Create a new folder called keith-<your extension name>.

Copy a package.json, a tslint.json, a tsconfig.json, and a src folder into the folder.

Add keith-<your extension name> to workspaces in the top level package.json.

Add "keith-<your extension name>": "0.1.0" to the dependencies in the top level package.json and the product package.json files (e.g. the package.json in keith-app).

What is in the src directory?

The source directory has three optional subfolders.

• node: Holds all backend related classes. This does currently only exist in the keith-language package.
• common: Holds general helper methods, string constants and some data classes
• browser: Holds all widgets, contribution for commands, menus, and widgets, and the frontend-extension.

The frontend-extension

This binds all necessary classes. Look at existing frontend extension in KEITH or Theia to see how this is done.

More examples for stuff

See Theia examples.

How to write a widget

There are different kinds of widgets that are commonly used in KEITH or in existing Theia packages.

• BaseWidget: Very basic
• ReactWidget: A render method has to be implemented that redraws the widget on demand. Additionally several on* event methods can beimplemented.
• TreeWidget: Extends the ReactWidget and draws the contents of the widget in a tree view.

If a widget has a state it should implement the StatefulWidget interface, which allows to imlement a store and restore method.

Look at examples in KEITH or Theia to see how this is done.