Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -15,19 +15,19 @@ summary:

:context: testing-che-theia-plug-ins

Developers can test how plug-ins work while working on themby running Che-Theia in hosted mode. It is a special mode in which Che-Theia loads your plug-in directly from the `/projects` directory (as opposed to the rest of the plug-ins, which are loaded from the plug-in registry). Che-Theia hosted mode is similar to debug mode in VS Code.
Developers can test how plug-ins work while working on them by running Che-Theia in the hosted mode. It is a special mode in which Che-Theia loads your plug-in directly from the `/projects` directory (as opposed to the rest of the plug-ins, which are loaded from the plug-in registry). The Che-Theia hosted mode is similar to the debug mode in VS Code.


== Starting a hosted Che-Theia instance

. Press F1 to display the command palette, and run the `Hosted Plugin: Start Instance` command.

. Specify the path to the plug-in. A new browser tab will be opened.
. Specify the path to the plug-in. A new browser tab is opened.


.Status in the hosted instance

When running in hosted mode, Che-Theia displays a *Development Host* message in the status bar. When you hover over the message, a tip is displayed with the name of the hosted plug-in.
When running in the hosted mode, Che-Theia displays a *Development Host* message in the status bar. When you hover your mouse over the message, a tip is displayed with the name of the hosted plug-in.

image::extensibility/che-theia-hosted-mode.png[]

Expand All @@ -36,18 +36,18 @@ At the same time, the main instance of Che-Theia displays a *Hosted Plugin* mess

image::extensibility/watching-hosted-plug-in.png[]

When you change something in your plug-in, you can just switch to the hosted Che-Theia instance, refresh the page, and immediately see the results.
When you change something in your plug-in, you can switch to the hosted Che-Theia instance, refresh the page, and immediately see the results.

.Plug-in output

When you run a hosted instance, the main Che-Theia instance opens the *Output* view. This view contains all output from the `yarn` backend process. It also contains the output of the backend plug-in that is being developed.
When you run a hosted instance, the main Che-Theia instance opens the *Output* view. This view contains all the output from the `yarn` backend process. It also contains the output of the backend plug-in that is being developed.

image::extensibility/hosted-instance-output.png[link="{imagesdir}/extensibility/hosted-instance-output.png"]


== Controlling a hosted Che-Theia instance

You can control the state of the hosted instance directly from the main instance. Click *Hosted Plugin* element in the status bar, and a context menu with available actions will be displayed. You will be able to stop and restart the running hosted Che-Theia instance. When a hosted instance is stopped, the context menu can be used to start it.
You can control the state of the hosted instance directly from the main instance. Click *Hosted Plugin* element in the status bar, and a context menu with the available actions is displayed. You can stop and restart the running hosted Che-Theia instance from the context menu. When a hosted instance is stopped, use the context menu to start it again.

image::extensibility/controlling-hosted-che-theia.png[]

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@

In addition to using API methods and events, each plug-in can bring new components into Che-Theia. These components include visual, such as panels, menus, and others. Other types of components are language servers, debuggers, and others.

The mechanism for adding additional components into Che-Theia is called extension points. An extension point is a section in a Che-Theia plug-in configuration into which meta-information about a new component is added. This chapter contains the full list of available extension points in Che-Theia.
The mechanism for adding additional components into Che-Theia is called extension points. An extension point is a section in a Che-Theia plug-in configuration into which the meta-information about a new component is added. This chapter contains the full list of available extension points in Che-Theia.


[id="syntax-highlighting-grammars_{context}"]
== Syntax-highlighting grammars

This section provides syntax highlight rules for specified file types. To add syntax highlighting into Che-Theia using a plug-in, add a record that describes the new grammar into the `contributes.grammars` array of the plug-in's `package.json` file.
This section provides syntax highlight rules for specified file types. To add syntax highlighting into Che-Theia using a plug-in, add a record that describes the new grammar into the `contributes.grammars` array of the `package.json` file of the plug-in.

.Example of a grammar record
[source,json]
Expand Down Expand Up @@ -56,7 +56,7 @@ A plug-in can introduce new *preferences*. These are defined in the `"configurat

There are three scopes of preferences defined in Che-Theia:

* The *default* scope consists of values defined in the `"configuration"` sub-section in `package.json`. These are default values of the preferences contributed by the plug-in.
* The *default* scope consists of values defined in the `"configuration"` sub-section in the `package.json` file. These are default values of the preferences contributed by the plug-in.

* The *global* or *application-wide* scope values can be set in *User Preferences*. They override the default ones.

Expand All @@ -77,7 +77,7 @@ theia.workspace.getConfiguration().get('myPlugin'); // { "logLevel": "error" }
theia.workspace.getConfiguration().get('myPlugin').get('logLevel'); // "error"
----

The plug-in API allows to update preferences as well:
The plug-in API also allows to update preferences:

[source,javascript]
----
Expand Down Expand Up @@ -166,8 +166,8 @@ To add a view into Che-Theia, add an appropriate record into the `contributes.vi
]
}
----
<1> view identifier
<2> name of the view, which will be displayed as the widget title inside the view container
<1> View identifier
<2> Name of the view, which is displayed as the widget title inside the view container

Currently, only tree view is supported as a view widget.

Expand Down Expand Up @@ -246,7 +246,7 @@ Note that `ctrl+f alt+b` defines a _chord_: the command is invoked after pressin
[id="debuggers_{context}"]
== Debuggers

Plug-ins can add new *debuggers*. To do so, you need to implement the link:https://microsoft.github.io/debug-adapter-protocol/[Debagger Adapter Protocol] (DAP) for a specific debugger. The debugger then can registered in the `contributes.debuggers` debuggers of a plug-in `package.json` file.
Plug-ins can add new *debuggers* by implementing the link:https://microsoft.github.io/debug-adapter-protocol/[Debagger Adapter Protocol] (DAP) for a specific debugger. The debugger can then register in the `contributes.debuggers` debuggers of a plug-in `package.json` file.

// TODO: For instruction on how to add a debugger, see link:link[Adding support for a new debugger].

Expand All @@ -260,7 +260,7 @@ NOTE: This is an experimental approach, which may change in the future.

To add a language server into Che-Theia using a plug-in:

. Describe the server in the `contributes.languages` array in the plug-in's `package.json` file:
. Describe the server in the `contributes.languages` array in the plug-in `package.json` file:
+
.Example of a language-server definition
[source,json]
Expand Down Expand Up @@ -296,26 +296,26 @@ theia.languageServer.registerLanguageServerProvider(xLanguageServerInfo);
Where `xLanguageServerInfo` is an object of `theia.LanguageServerInfo` and has to contain the following fields:
+
|===
| `id` | language ID; should be the same as `id` in the configuration JSON file
| `name` | human-readable name of the language server
| `globPatterns` | file pattern that specifies files for which this language server is added
| `command` | the language server start executable
| `args` | arguments for the language server start executable
| `id` | Language ID; should be the same as `id` in the configuration JSON file
| `name` | Human-readable name of the language server
| `globPatterns` | File pattern that specifies files for which this language server is added
| `command` | The language server start executable
| `args` | Arguments for the language server start executable
|===
+
After the command above is invoked, the language server should start.
After the command above is invoked, the language server is started.

See a full example at https://github.com/eclipse/che-theia-samples/tree/master/samples/xml-language-server-plugin[xml-language-server-plugin].


[id="web-view-api_{context}"]
== Web view API

A *web view API* is not a contribution point by definition, but it behaves like one and allows to bring a many new features to Che-Theia. Web view API plug-ins can add custom UI, graphical data, or anything what can be displayed in a web page. A web view API provides an HTML `iframe` to which a plug-in has access.
A *web view API* is not a contribution point by definition, but it behaves like one and allows to bring many new features to Che-Theia. Web view API plug-ins can add custom UI, graphical data, or anything that can be displayed in a web page. A web view API provides an HTML `iframe` to which a plug-in has access.

To create an instance of web view:

. use the `createWebviewPanel` function:
. Use the `createWebviewPanel` function:
+
[source,typescript]
----
Expand All @@ -331,7 +331,7 @@ webViewPanel.webview.html ='<html><body><h1>Hello from web view</h1></body></htm

[NOTE]
====
Web view content is destroyed when hidden. To restore state, register a serializer, or set the `retainContextWhenHidden` option for the web view. Even with this option set, hiding a web view pauses all scripts, and the web view will not be process messages from the plug-in.
Web view content is destroyed when hidden. To restore its state, register a serializer, or set the `retainContextWhenHidden` option for the web view. Even with this option set, hiding a web view pauses all scripts, and the web view will not process messages from the plug-in.

The current state of a web view can be read from the web view panel object.

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
[id="che-theia-plug-in-registries_{context}"]
= Che-Theia plug-in registries

A plug-in registry is a simple service that hosts information (metadata) about plug-ins.
A plug-in registry is a simple service that hosts information (metadata) about the plug-ins.

To retrieve a full list of plug-ins hosted in a registry, navigate to the following address: `<registry-base-uri>/plugins/index.json`.

Expand Down Expand Up @@ -34,9 +34,9 @@ description: A hello world theia plug-in wrapped into a Che Plug-in
icon: https://www.eclipse.org/che/images/logo-eclipseche.svg
url: https://github.com/ws-skeleton/che-dummy-plugin/releases/download/untagged-8f3e198285a2f3b6b2db/che-dummy-plugin.tar.gz <1>
----
<1> Points to plug-in configuration. Typically, it is a TAR archive with the plug-in's YAML file. It is also possible to have a link to a raw content of a plug-in's YAML.
<1> Points to the plug-in configuration. Typically, it is a TAR archive with the plug-in YAML file. It is also possible to have a link to the raw content of a plug-in YAML file.

For a VS Code extension, the `url` field is replaced with an `attributes` section:
For a VS Code extension, the `url` field is replaced with an `attributes` section.

.Sample `attributes` section of `meta.yaml`
[source,json]
Expand All @@ -54,7 +54,7 @@ For more details about the `meta.yaml` structure, see xref:che-theia-plug-in-met
[id="official-plug-in-registry_{context}"]
== Official plug-in registry

The official Che plug-in registry is at link:https://che-plugin-registry.openshift.io[che-plugin-registry.openshift.io]. By default, the Che dashboard shows editors and plug-ins from there.
The official Che plug-in registry is at link:https://che-plugin-registry.openshift.io[che-plugin-registry.openshift.io]. By default, the Che dashboard shows editors and plug-ins from this registry.

The source is located at link: https://github.com/eclipse/che-plugin-registry[github.com/eclipse/che-plugin-registry].

Expand All @@ -66,9 +66,9 @@ For more information about setting up a custom registry, see the description of

There are two ways of using plug-ins from a custom registry:

* Specify a link to plug-in in the configuration of a workspace. See xref:adding-a-plug-in-by-configuring-a-workspace_publishing-che-theia-plug-ins[Adding a plug-in into a workspace via configuration].
* Specify a link to the plug-in in the configuration of a workspace. See xref:adding-a-plug-in-by-configuring-a-workspace_publishing-che-theia-plug-ins[Adding a plug-in into a workspace via configuration].

* Replace the default official registry with a custom one in your Che instance. To do that, set the `PLUGIN_REGISTRY_IMAGE` environment variable in your Che configuration. Note that plug-ins from the official registry will not be available from the dashboard interface. To include them, add references into your registry from the official registry.
* Replace the default official registry with a custom one in your Che instance. To do that, set the `PLUGIN_REGISTRY_IMAGE` environment variable in your Che configuration. Note that plug-ins from the official registry are not available from the dashboard interface. To include them, add references into your registry from the official registry.


.Additional resources
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
[id="adding-a-che-theia-plug-in-into-a-workspace_{context}"]
= Adding a Che-Theia plug-in into a workspace

There are three ways of adding a Che-Theia plug-in into the Che-Theia IDE:
There are three ways to add a Che-Theia plug-in into the Che-Theia IDE:

* Using the Che-Theia dashboard
* By configuring a workspace
Expand All @@ -11,9 +11,9 @@ There are three ways of adding a Che-Theia plug-in into the Che-Theia IDE:
[id="adding-a-plug-in-through-the-dashboard_{context}"]
== Adding a plug-in through the dashboard

. Go to the *Workspaces* tab in the dashboard.
. Select the workspace into which the plug-in should be added.
. In workspace details, switch to the *Plugins* tab, and select the required plug-ins.
. Navigate to the *Workspaces* tab in the dashboard.
. Select the workspace to which you want to add the plug-in.
. In *Workspace > _<workspace-name>_* window, click the *Plugins* tab, and select the required plug-ins.
+
.Adding plug-ins through the dashboard
image::extensibility/adding-plug-ins-in-dashboard.png[link="{imagesdir}/extensibility/adding-plug-ins-in-dashboard.png"]
Expand All @@ -24,8 +24,8 @@ image::extensibility/adding-plug-ins-in-dashboard.png[link="{imagesdir}/extensib

This method is useful when you need to add plug-ins from a non-default registry.

. Go to the *Workspaces* tab in the dashboard.
. Select the workspace into which the plug-in should be added.
. Navigate to the *Workspaces* tab in the dashboard.
. Select the workspace to which you want to add the plug-in.
. Switch to the *Config* tab, and find the `attributes.plugins` section.
+
.Adding plug-ins by configuring a workspace
Expand All @@ -47,19 +47,19 @@ Examples:
[id="adding-a-plug-in-at-runtime_{context}"]
== Adding a plug-in at runtime

This method adds a plug-in into an already running workspace. The plug-in is not added permanently -- it is removed when the workspace stops. This is a good method to testing a plug-in without affecting the permanent workspace configuration.
This method adds a plug-in to an already running workspace. The plug-in is not added permanently; it is removed when the workspace stops. This is a good method to test a plug-in without affecting the permanent workspace configuration.

. Run the `Deploy Plugin by Id` command, and specify the ID of the plug-in that should be added into the workspace. A plug-in ID can be:
. Run the `Deploy Plugin by Id` command, and specify the ID of the plug-in that you want to add to the workspace. A plug-in ID can be:
+
** A local directory with plug-ins. All the plug-in binaries (`.theia` files) in the specified directory would be loaded. Example: `local-dir:///home/theia/plugins/`.

** VS Code extension link. To obtain the link, go to VS Code marketplace, find the needed extension, copy its ID, and append the ID to the `vscode:extension/` prefix.
** VS Code extension link. To obtain the link, go to the VS Code marketplace, find the needed extension, copy its ID, and append the ID to the `vscode:extension/` prefix.
+
For example, for the link:https://marketplace.visualstudio.com/items?itemName=redhat.vscode-xml[XML language server] plug-in, it is: `vscode:extension/redhat.vscode-xml`.

** Link to plug-in binaries (`.theia` files). Can be both HTTP and HTTPS. Example: `https://domain.net/path/plugin.theia`.

To check if plug-in loaded successful, open the *Plugins panel* (go to *View > Plugins* in the main menu) and search for the plug-in in the list.
To check if the plug-in loaded successful, open the *Plugins panel* (*View* > *Plugins* in the main menu) and search for the plug-in in the list.


// .Additional resources
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@

To have a Che-Theia plug-in available in the default Che plug-in registry, submit a pull request to the registry GitHub repository.


.Prerequisites

* Che-Theia plug-in definition file: `meta.yaml`
Expand All @@ -13,11 +12,11 @@ To have a Che-Theia plug-in available in the default Che plug-in registry, submi

. Submit a PR with the `meta.yaml` file of your Che-Theia plug-in in the `plugins/<your-plug-in-id>/<version>/` directory to the Che plug-in registry GitHub repository at link:https://github.com/eclipse/che-plugin-registry/[che-plugin-registry].
+
For example, SonarLint Che-Theia plug-in is located in `plugins/org.eclipse.che.vscode-sonarlint/0.0.1/meta.yaml`.
For example, SonarLint Che-Theia plug-in is located in the `plugins/org.eclipse.che.vscode-sonarlint/0.0.1/meta.yaml` file.

// TODO: Add a sample PR adding a plugin to the registry.

Once new Che-Theia plug-ins are added and merged to the repository, the list of available plug-ins in the registry is updated.
After the new Che-Theia plug-ins are added and merged into the repository, the list of available plug-ins in the registry is updated.


.Additional resources
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ This section describes how to add a new debugger into Eclipse Che.
[discrete]
== Prerequisites

* Install the latest Che-Theia plug-in Yeoman generator by running:
* Install the latest Che-Theia plug-in Yeoman generator by running the following command:
+
----
$ npm install -g yo @theia/generator-plugin
Expand All @@ -16,11 +16,11 @@ $ npm install -g yo @theia/generator-plugin
[discrete]
== Procedure

. Generate a sample by running `yo @theia/plugin`. When prompted, confirm the choices for *Backend plug-in*, *Samples*, and then *Debugger sample*. This creates a project and a ready-to-use plug-in, which can be deployed.
. Generate a sample by running the `yo @theia/plugin` command. When prompted, confirm the choices for *Backend plug-in*, *Samples*, and then *Debugger sample*. This creates a project and a ready-to-use plug-in, which can be deployed.

. Replace the mock implementation of the debug adapter in the `src/vscode-mockDebug.ts` and `src/vscode-mockRuntime.ts` files by code that interacts with a real debugger or runtime.
. Replace the mock implementation of the debug adapter in the `src/vscode-mockDebug.ts` and `src/vscode-mockRuntime.ts` files with code that interacts with a real debugger or runtime.

. Build the plug-in by running `yarn` in the root of the project.
. Build the plug-in by running the `yarn` command in the root of the project.

. Deploy the Che-Theia plug-in via the plugin-in registry.

Expand Down
Loading