I hoped to be able to do something similar to the following:
@Route(value = "cytoscape-demo")
@JavaScript("./src/cytoscape-extensions.js")
public class CytoscapeDemo extends Div {
public CytoscapeDemo() {
add(new Cytoscape(););
}
}
And then in src/cytoscape-extensions.js:
import cytoscape from 'cytoscape';
import fcose from '../../node_modules/cytoscape-fcose/cytoscape-fcose.js';
cytoscape.use(fcose);
But I haven’t been able to figure out how to reference either cytoscape that the addon includes, or my own @NpmPackage included extension from this import.
That’s why you can’t find the annotation NpmPackage.
If you want to get the extension cytoscape-fcose you can do the same (copy/paste it in your resource folder) or add @NpmPackage(value = "cytoscape-fcose", version = "1.2.3").
It will download the cytoscape-fcose then you can import in your javascript file without …/…/node_modules, by default Vaadin will check this folder so it should be like the documentation of npm:
import cytoscape from 'cytoscape';
import fcose from 'cytoscape-fcose';
cytoscape.use( fcose );
I don’t know:
How you can tweak the add-on to add this extension
why the author didn’t use the npm package so you may have some problems.
Indeed, the problem is how to reference a library that’s not been brought in via @NpmPackage. But it is brought in via @JsModule, which means that webpack is picking it up and including it in its vaadin-bundle*.js output I can see in the browser. I found this: