Using add-ons - at least "image" and "web-links"

[spr-plusnet]

Feature proposal

First of all: Thank you for making this Vaadin add-on - your work is appreciated.

I would like to make use of some Xterm add-ons (addon-image to be precise). The general procedure is described here.

So I would like to propose adding support for loading a list of add-ons.

Describe solution expectations

It would be great if there would be some way to add a list of add-on names and get the imports and loadAddOn-calls generated automatically.
Also most add-ons come with their object that exposes settings of the add-on. While I consider this a bonus, it would of course be great if somehow these settings objects could be exposed as Java objects.

Additional information

No response

[javier-godoy]

Hello. I'll investigate the proposed feature for the general case.

Currently there is no API support for automatic integration of add-ons, but the architecture is already there (which could be enough if you only have to integrate a single add-on).

XTerm already loads the fit add-on from XTerm.js. The XTerm class is nothing more than XTermBase (the actual server-side logic of the component) plus add-ons:

XTermConsoleAddon/src/main/java/com/flowingcode/vaadin/addons/xterm/XTerm.java

Lines 29 to 30 in a1154c1

	public class XTerm extends XTermBase
	implements ITerminalFit, ITerminalConsole, ITerminalClipboard {

(ITerminalFit is the server-side API for the fit add-on from XTerm.js, while ITerminalConsole and ITerminalClipboard are implemented by FlowingCode/XTermConsoleAddon)

In the client-side, fc-xterm element is just an XTermElement with several aspects:

XTermConsoleAddon/src/main/resources/META-INF/frontend/fc-xterm/xterm.ts

Lines 29 to 30 in a1154c1

	@customElement('fc-xterm')
	export class XTermComponent extends XTermInsertFixMixin(XTermClipboardMixin(XTermConsoleMixin(XTermSelectionMixin(XTermFitMixin(XTermElement))))) {

Then, there is a wrapper around the actual fit add-on, which invokes terminal.loadAddon and provides the client-side API:

XTermConsoleAddon/src/main/resources/META-INF/frontend/fc-xterm/xterm-fit-mixin.ts

Lines 68 to 84 in a1154c1

	type Constructor<T = {}> = new (...args: any[]) => T;
	export function XTermFitMixin<TBase extends Constructor<TerminalMixin>>(Base: TBase) {
	return class XTermFitMixin extends Base {
	_fitAddon? : FitAddon;
	fitOnResize: boolean = true;
	connectedCallback() {
	super.connectedCallback();
	let addon = new FitAddon();
	addon.$=this;
	this.node.terminal.loadAddon(addon);
	this._fitAddon = addon;
	this.fit();

(Our FitAddon actually extends that from XTerm.js, but it should be the same approach)

XTermConsoleAddon/src/main/resources/META-INF/frontend/fc-xterm/xterm-fit-mixin.ts

Line 29 in a1154c1

class FitAddon extends FitAddonBase {

[javier-godoy]

#99, available in version 3.2.0-SNAPSHOT from our snapshot repository (http://maven.flowingcode.com/snapshots), resolves the module loading for @xterm/addon-web-links and introduces a simplified integration mechanism, although this solution does require some custom JavaScript code to 'plug in' the add-on.

However, a technical challenge persists: designing a Java APIs for @xterm/addon-web-links and managing the addon's JavaScript-native behavior (such as receiving configurations via its constructor and performance issues related to its event-driven operations).

Since you are likely more familiar with the specific add-ons, could you please elaborate on your use case?

Usage Example:

@NpmPackage(value = "@xterm/addon-web-links", version = "0.11.0")
@JsModule("./fc-xterm/xterm-weblinks-addon.ts")
public class WebLinkAddon extends ClientTerminalAddon {

  private final static String NAME = "addon-web-links";

  public WebLinkAddon(XTermBase xterm) {
    super(xterm);
    xterm.getElement().executeJs("Vaadin.Flow.fcXtermConnector.load_weblinks($0, this)", NAME);
  }

  //just as an example on how to set a property on WebLinksAddon 
  public void setFoo(String foo) {
    executeJs("this.foo=$0;", foo);
  }

  @Override
  public String getName() {
    return NAME;
  }

}

import { WebLinksAddon } from '@xterm/addon-web-links';
import { XTermElement } from './xterm-element';

(function () { 
  (window as any).Vaadin.Flow.fcXtermConnector = (window as any).Vaadin.Flow.fcXtermConnector || {};
  (window as any).Vaadin.Flow.fcXtermConnector.load_weblinks = (name:string, node: XTermElement) => {
    const addon = new WebLinksAddon();
    node.terminal.loadAddon(addon);
    node.addons[name]=addon;
  };
})();

[taranion]

Hey,
sorry for the very late response - I had my project put aside for some weeks and forgot to answer.

I got your example working (in 3.2.0-SNAPSHOT) and managed to adapt it to the image add-on

I still need to work on the Java + TypeScript part of the code, but it already is sufficient to my need (displaying images).

So, thank you.

[javier-godoy]

@taranion @spr-plusnet That is fantastic news, and thank you so much for taking the time to update us! Absolutely no worries about the delay.

To be honest, I didn't have hands-on experience with the image and web-links add-ons, so I wasn't sure if the proposed solution was going to be useful in practice, but since you've confirmed it works well and addresses your need, we can definitely move forward and get this included in the next release.

[javier-godoy]

Changes have been released in version 3.2.0