from How to require external libraries in a component helper file? - #2 by merefield [תמונה]How to require external libraries in a component helper file? You can use the approach I use in GitHub - merefield/discourse-tc-tag-cloud: A Discourse Theme Component that displays a tag cloud above the tag lists on the tags page Hey @merefield – Is this still how to do this? I’m trying to pul in qrcode.js to generate a QRcode in the browser. I’m getting blocked by CSP as well. I don’t understand how it’s a CSP problem if it’s on the same host. This is on a production server using discourse_theme to debug. I’m putting this in an initializer: import loadScript from "discourse/lib/load-script"; import { withPluginApi } from "discourse/lib/plugin-api"; // import QRCode from "discourse/lib/qrcode"; export default { name: "qrcode", ensureQRCode() { window.console.log(settings.theme_uploads.QRCode); return loadScript(settings.theme_uploads.QRCode).then(() => { return loadScript(settings.theme_uploads.QRCode); }); }, initialize(container) { withPluginApi("0.8.7", (api) => { api.decorateCookedElement((cooked, postWidget) => { const placeholderNodes = cooked.querySelectorAll( ".d-wrap[data-wrap=qrcode]" ); this.ensureQRCode(); // const qr = new QRCode( // document.getElementById("qrcode"), // "http://jindo.dev.naver.com/collie" // ); ... And it seems that the function doesn’t get called to load the script if I don’t call this.ensureQRCode();, which you don’t seem to be doing in your component. The script is available and I can retrive it (so I got the stuff in the about.json and /assets/qrcode.js right), but the browser refuses to load it.

The result of your loadscript is a promise so you need to put your code relying on it in a .then block as per my example code

I don’t know if this is a similar thing (I suspect it isn’t) but holy smoly is it driving me nuts because this should be simple to do. javascripts/discourse/components/user-card-contents.js.es6 main import { default as userCardContents } from "discourse/components/user-card-contents"; import DiscourseURL from "discourse/lib/url"; export default userCardContents.extend({ _show(_, target) { DiscourseURL.routeTo(`${target.href}/summary`); return false; }, });

Thanks very much! But I thought I did that: return loadScript(settings.theme_uploads.QRCode).then(() => { return loadScript(settings.theme_uploads.QRCode); }); I tried very hard to change your example as little as possible :slight_smile: Maybe I need to use a .then when I’m trying to use the code later? But that doesn’t solve the CSP issue, does it? [image]

My two main advices are: Put the library in the assets folder This solves CSP, makes the theme self-contained and is considered a good practice, instead of loading it from third-parties. Load it lazily Only when needed, you can load it lazily using await loadScript. This means it won’t be loaded in pages where it isn’t needed, slowing your whole site. A good example of a theme that follows those good practices is GitHub - discourse/discourse-mermaid-theme-component · GitHub

[תמונה] Jay Pfaffman: Maybe I need to use a .then when I’m trying to use the code later? Yes, precisely. :+1:. That’s how it works in my example.

One more question: What’s the difference between ...initializers/mycode.js and ...api-initializers/mycode.js? And much thanks to both of you!! [תמונה] Falco: A good example of a theme that follows those good practices is GitHub - discourse/discourse-mermaid-theme-component That was a good example! I was able to make sense of it! [תמונה] Robert: Yes, precisely. :+1:. That’s how it works in my example. Well, I thought I followed your example. Javascript still seems like a twisty maze of passages that all look alike.

איך לטעון ספרייה ברכיב ערכת נושא

מפתח

merefield (Robert) 25 באוגוסט,‏ 2023,‏ 6:30pm 6

Yes, precisely. . That’s how it works in my example.

נושא		תגובות	צפיות
How to require external libraries in a component helper file? Development	6	909	3 ביולי,‏ 2021
Issues on loading a js asset from a Theme Component Development	18	1237	28 בספטמבר,‏ 2023
Javascript assets in a theme component Development	15	2584	7 במאי,‏ 2021
Defer loading JavaScript in Themes and Components Development dev-news	4	2185	7 באפריל,‏ 2022
Custom JS script in theme component not loading Product Support	1	691	10 בדצמבר,‏ 2020

איך לטעון ספרייה ברכיב ערכת נושא

נושאים קשורים