Adding jquery and jquery-clock-timepicker library into htmlgraphics-html-bundler-template

[frogg1ven]

I'm using your htmlgraphics-html-bundler-template and I'd like to add the jquery-clock-timepicker library to it, which requires jQuery. I've installed everything via npm, and there are no errors displayed in the code. However, when I open the console inside the development script, I see an error: "jQuery is not defined at node_modules/jquery-clock-timepicker/jquery-clock-timepicker.min.js."
This is my onInit.ts:

import "./style.css";
import $ from "jquery";
import "jquery-clock-timepicker";

(<any>$(".time")).clockTimePicker({
  duration: true,
  durationNegative: true,
  precision: 5,
  i18n: {
    cancelButton: "Abbrechen",
  },
});

and this is my html:

    <input
      class="time"
      type="text"
      data-precision="5"
      data-minimum="10:00"
      data-maximum="20:00"
    />

I would appreciate your assistance in implementing the library.

[ZuperZee]

Tested a bit, seems like jQuery is a bit tricky with rollup rollup/rollup#520 rollup/rollup#592

[frogg1ven]

I have tried these solutions before, but still, I couldn't make it work. I attempted to add the jquery-global.js file along with jquery-global.ts with the appropriate content and imported them in my onInit.ts. Despite no errors being displayed, jQuery is not performing even the simplest tasks.

//onInit.ts
import "./style.css";
import "./jquery-global.js";

jQuery(".test").text("new content");
$(".test").text("new content");

//jquery-global.ts
import * as $ from "jquery";
(window as any).jQuery = window.$ = $;

[frogg1ven]

While experimenting for a while, I noticed that jQuery works in the development script, however, I cannot access the htmlNode element. It is visible to jQuery as div#shadow-container, but it has no content, even though it is displayed on the screen. Could you please suggest how to reference htmlNode from jQuery?

[ZuperZee]

I haven't really used jQuery, so I'm not sure how to reference htmlNode from jQuery.