How to use this with TypeScript?

[johannesmols]

I'm trying to use this library with Svelte and Typescript, but can't seem to find any way to import this properly.

There are no TS definitions. There are some forks that add them, but they don't seem to export it as a module either. The documentation says to use the "nodeHtmlLabel" function on the cy element, but how do I even import that if it doesn't exist in any definition?? Not even in the forks. require is apparently also not available in browser-based apps. And how do I register it to Cytoscape? So far I found a bunch of very different examples of how to register extensions, none of which work.

I've been trying to get this to work for a few hours now without any luck. I'm not very good at JS, so that's probably why. But the documentation is seriously lacking and does a very poor job at explaining how to use it. Could somebody be so kind and tell me how? Sorry if this sounds a bit like a rant, I've wasted a lot of time on just installing this, and can't even do that...

[zoestoll]

hey @johannesmols I had this issue as well, and just figured out a solution. Try creating a custom types file cytoscape.d.ts and add this code to it:

declare namespace cytoscape {
  interface Core {
    nodeHtmlLabel(options: CytoscapeNodeHtmlParams[]): void;
  }
}

This will merge with the existing cytoscape namespace, so you'll keep the types declared there, but will also add the nodeHtmlLabel type that you're looking for.

[johannesmols]

Wow that did the trick, thank you @zoestoll! Although the import was also not recognized as a module, so I had to also add declare module "cytoscape-node-html-label"; to the cytoscape.d.ts file. It can then be imported via import nodeHtmlLabel from "cytoscape-node-html-label"; and registered via nodeHtmlLabel(cytoscape);. Thank you so much, wouldn't have figured that out by myself! The readme should probably mention this, since I'm evidently not the only person having struggled with this.