Create an extension point with inversify

[dejawho]

Hi, I have two theia extensions and I want one of them provide something similar to an extensions point as explained here: https://eclipsesource.com/blogs/2018/11/28/how-to-inversify-in-eclipse-theia/

The first extension is a resource viewer the the second is an editor, I want that when a resource is clicked the editor is notified. I've tried to implement a resource listener in the viewer like this

import { injectable } from 'inversify';

export interface IResourceInfo {
    name: string,
}

export interface IResourceListener {
    onResourcePress(resource: IResourceInfo): void;
}

export const IResourceListenerManager = Symbol('IResourceListenerManager');

export interface IResourceListenerManager {
    addResourceListener(resourceListener: IResourceListener): void;
}

@injectable()
export default class ResourceListenerManager implements IResourceListenerManager {

    static readonly registeredListeners : IResourceListener[] = [];

    public addResourceListener(resourceListener: IResourceListener){
        ResourceListenerManager.registeredListeners.push(resourceListener);
    }
}

And then bind it in the frontend module
bind(IResourceListenerManager).to(ResourceListenerManager);

Now on the editor extension I try to get this dependency with

   @inject(Symbol('IResourceListenerManager')) private readonly resourceListener: any
    @inject(MessageService) private readonly messageService: MessageService

    @postConstruct()
    protected async init(): Promise < void> {
        this.id = EditorWidget.ID;
        this.title.label = EditorWidget.LABEL;
        this.title.caption = EditorWidget.LABEL;
        this.title.closable = true;
        this.title.iconClass = 'fa fa-window-maximize';
        const onResourcePress = (resource : any) => {
            this.messageService.info(`resource clicked ${resource.name}`);
        }
        this.resourceListener.addResourceListener(onResourcePress);
        this.update();
    }

But when I open the editor extension I got this error: Uncaught (in promise) Error: No matching bindings found for serviceIdentifier: Symbol(IResourceListenerManager)
Have you any hint of what I'm doing wrong? The main constraint on this is that the resource viewer and editor must be on separated extensions

[kittaakos]

Watch out!

Symbol('foo') === Symbol('foo')  // false

Check the docs here

---

I am not sure if you have copied the code as is or it's just a pseudo one but try the injections like this:

import { IResourceListenerManager } from './path/to/the/module';

// ...

  // this could be the problem in your code -> @inject(Symbol('IResourceListenerManager')) private readonly resourceListener: any
  @inject(IResourceListenerManager) private readonly resourceListener: IResourceListenerManager 
  @inject(MessageService) private readonly messageService: MessageService

Update: l have checked the eclipsesource link and the example is correctly using either the same Symbol or a string as the service identifier. If the proposed fix does not work for you, please share your code.

[dejawho]

It is the actual code, the problem is that the interface is defined on one of the extension, the resource view one, so I can't access it in the second extension. I didn't want to add the dependency on the editor extension for the resource ones, to leave them decoupled. I will try to use a simple string instead of a symbol to see if it does the trick

[dejawho]

Thanks @kittaakos , your suggestion was right, registering only the string instead that the symbol allow me to solve the problem between add a dependence between the two extension. I'll leave the code here for anyone that has the same problem:

provider

import { injectable } from 'inversify';

export interface IResourceInfo {
    name: string,
}

export interface IResourceListener {
    onResourcePress(resource: IResourceInfo): void;
}

export interface IResourceListenerManager {
    addResourceListener(resourceListener: IResourceListener): void;
}

@injectable()
export default class ResourceListenerManager implements IResourceListenerManager {

    static readonly registeredListeners : IResourceListener[] = [];

    public addResourceListener(resourceListener: IResourceListener){
        ResourceListenerManager.registeredListeners.push(resourceListener);
    }
}

Provider frontend module

bind('IResourceListenerManager').to(ResourceListenerManager);

Consumer

    @inject('IResourceListenerManager') private readonly resourceListener: any
    @inject(MessageService) private readonly messageService: MessageService

    @postConstruct()
    protected async init(): Promise < void> {
        this.id = EditorWidget.ID;
        this.title.label = EditorWidget.LABEL;
        this.title.caption = EditorWidget.LABEL;
        this.title.closable = true;
        this.title.iconClass = 'fa fa-window-maximize';
        const resourceListener = {
            onResourcePress: (resource : any) => {
                this.messageService.info(`resource clicked ${resource.name}`);
            }
        }
        this.resourceListener.addResourceListener(resourceListener);
        this.update();
    }