Integrate scripts into Vaadin

Hi . I would like to integrate a javascript in my vaadin flow project: https://docs.dddice.com/sdk/js/latest/?ref=footer How can this be achived? Thanks for tips.

the doc https://vaadin.com/docs/latest/advanced/loading-resources#importing-javascript-and-css only shows for the .js import. but what about paragraphs?

maybe UI.getCurrent().getPage().addJavaScript(“”); ?

Using the annotation like “@NpmPackage(value = ‘jspackage’, version = ‘vxx’)” may be needed to ensure that it becomes included in the package.json file and subsequently accessible within the node_modules directory. This dependency, will be bundled with either webpack/vite. So I don’t think you need script tag in html page

Other vaadin experts may have a better advice than me, but here is what
I have used for using some js libraries

  1. Declare dependency
    @NpmPackage(value = “dddice-js”, version = “^0.10.0”)

  2. Define a lit wrapper around JS library
    // place this in folder: frontend/src/components/ddice-wc.js

import { LitElement, html } from ‘lit-element’;
import { ThreeDDice } from ‘dddice-js/dddice-latest.js’;

class DDiceComponent extends LitElement {
constructor() {
super();
this.apiKey = “<api_key_goes_here>”;
this.roomId = “<room_id_goes_here>”;
}

connectedCallback() {
super.connectedCallback();
}
firstUpdated(changedProperties) {
debugger;

    this.dddice = new ThreeDDice(this.shadowRoot.querySelector("#dddice"), this.apiKey);
    this.dddice.start();
    this.dddice.api.room.join(this.roomId);
    this.dddice.connect(this.roomId);
    this.dddice.roll([{
            theme: "dddice-standard",
            type: "d20",
          }]);

}

render() {
return html <div > <canvas id="dddice"></canvas> </div> ;
}
}

customElements.define(‘ddice-wc’, DDiceComponent);

  1. use that in java code.

@Tag(“ddice-wc”)
@JsModule(“./src/components/ddice-wc.js”)
public class DDICEComponent extends Component {
public DDICEComponent(){
super.setId(“dddice”);
}
}

@valiant-zorse wow thanks for your effort and the help! Will try this tomorrow :slightly_smiling_face: looks different to my approach but if it works :slightly_smiling_face:

@valiant-zorse this component should be shown automatically when loading the page?

That depends on the application requirements. If you are just experimenting, you can download the sample app from Vaadin Starter and add the DDICEComponent component into the view. There is a debugger statement in the JS code, so you should be able to debug it from the developer’s tool. I tried the code I pasted above, it loads the javascript , but I am not familiar with this particular javascript library so I am not sure what to expect.

ah ok debugger console i see. i usually dont make anything with jscript thats why i decided to use vaadin flow :wink: but dddice has an api which i am experimenting with. the first target was to show some dice on my page, show the canvas… will play around with this thank you !