Here's a step-by-step process that I used to get jQuery and jQuery-UI into my visual.
- Start with Use Developer tools to create custom visuals.
- Then add jQuery and the strong types to be TypeScript friendly:
- npm install jquery
- npm install "@types/jquery"
- Add jQuery UI (this was the hard part, see below).
Full disclosure, I started by putting some non-TypeScript code there that I had written (CSS, custom JavaScript, etc.). But it's not an npm package, so it shouldn't be there. I moved it to my src folder. Next, I tried and tried to use an npm package for jQuery UI. I tried the jquery-ui package, but it has to be built. Then I got some new info and tried the jquery-ui-dist package. But, I'm getting an error when compiling. Near the very last line of jquery-ui.css there's a rule:
filter: Alpha(Opacity=.3);
But, Node.js doesn't understand that rule and throws the error "error LESS style/visual.less : (1307,23) Could not parse alpha". I did some searches and the only way to fix it is to modify the code. I don't want to modify the code in node_modules.
My fix was to download the vanilla version of jQuery UI. Then cherry pick only the assets I need to be successful. I grabbed jquery-ui.js, jquery-ui.min.js, and the minimal items from the css folder in the distribution. For the timebeing they are in a jquery-ui folder in node_modules. I know I just got done writing that this was bad, so my next step will be to move them to the src folder. Optimally, it would be great if I could just use the jquery-ui-dist package, but it seems that I can't, yet...
No comments:
Post a Comment