Hi, first time developing on Discourse, so sorry for the silly questions. I’m building a theme component to display PGNs (chessboard and matches). The component is not theoretically difficult, there is a js component for this (PGNViewer.js) and I was able to translate the [wrap] tags into the prop…

debounceFunction delay calling the target method until the debounce period has elapsed with no additional debounce calls, it sometimes won’t work may still because [afbeelding] HappyCactus: the document is not yet populated and the PGNV object is unable to find the block debounce may not be …

Welcome to Meta, @happycactus :wave: [afbeelding] HappyCactus: Overall, is this approach correct, or would it be better to implement a plugin instead? Yes, probably. The only reason why you’d need a plugin is if you were trying to change the API (ie back end). [afbeelding] HappyCactus: …

Thank you, Robert! I’m in doubt, probably because I’ve zero experience with such platforms. My doubt is: my approach is to “embed” the small snippet of javascript needed to fill the div block with the content, but I see that maybe I could execute it from a function “cookPgn”, like it is done in t…

[afbeelding] HappyCactus: what’s the difference between the loadScript and a simple import? Have you tried an import? I don’t think you can import an external script. Loadscript is the right approach and ensures that the script is fully loaded before your code proceeds and uses it (this is …

Your actual problem is trying to use inline JS, which is prohibited by CSP. [afbeelding] HappyCactus: <script>var x='pgn here'; ...</script> Put this code in a helper function in your theme component code, and do not inject it inside posts. Uploading your current theme to GitHub and we can …

[afbeelding] Falco: Your actual problem is trying to use inline JS, which is prohibited by CSP. Thanks, @Falco , this was one of my doubts. [afbeelding] Falco: Uploading your current theme to GitHub and we can take a look too. Sure, here it is: GitHub - studiofuga/discourse-pgn-compone…

[afbeelding] Robert: [afbeelding] happycactus: I can’t on my production server, because it says the asset is too big. Is there a way to fix this? I’ve had a similar issue in the past. My fault, I forgot I limited the attachment size to 512kB, raised to default (4096) and it worked well…

Ok I did fix everything and the component does work! But we have a problem, an “unsafe eval” in the library I’m using. I guess I should fix the upstream library, I have no idea how to pack it. For those interested, I pushed all my changes in my repo above, and here are the details of the error. […

Your script is tripping over Content Security Policy in Production. You need to add 'unsafe-eval' as a line item in the site setting: content security policy script src

Thanks, I’m browsing the documentation to see how to do this. :slight_smile: I’m learning a lot, thanks

Problemen bij het laden van een js-asset uit een Theme Component

Ontwikkelaar

pfaffman (Jay Pfaffman) 22 september 2023 om 16:59 6

Have a look at the Discourse Mermaid component, which loads a library and has stuff happen to posts.

Topic		Antwoorden	Weergaven
Javascript assets in a theme component Development	15	2261	7 mei 2021
Defer loading JavaScript in Themes and Components Development dev-news	4	2008	7 april 2022
How to load library in a theme component Development	6	460	25 augustus 2023
Question about web app loading Support	1	108	25 maart 2025
Discourse theme components now support Wasm :confetti_ball: Announcements new-feature	11	1523	21 maart 2024

Problemen bij het laden van een js-asset uit een Theme Component

Gerelateerde topics