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 [이미지] HappyCactus: the document is not yet populated and the PGNV object is unable to find the block debounce may not be the sol…

Welcome to Meta, @happycactus :wave: [이미지] 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). [이미지] HappyCactus: I can’t on my…

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…

[이미지] 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 why it …

Your actual problem is trying to use inline JS, which is prohibited by CSP. [이미지] 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 take a …

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

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

[이미지] Robert: [이미지] 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. Thanks, and …

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

테마 컴포넌트에서 JS 에셋을 로드할 때 발생하는 문제

개발

pfaffman (Jay Pfaffman) 9월 22, 2023, 4:59오후 6

Discourse Mermaid 컴포넌트를 살펴보세요. 이 컴포넌트는 라이브러리를 로드하고 게시글에 다양한 효과를 적용합니다.

글		댓글	조회수
Javascript assets in a theme component Development	15	2487	5월 7, 2021
Defer loading JavaScript in Themes and Components Development dev-news	4	2143	4월 7, 2022
How to load library in a theme component Development	6	519	8월 25, 2023
Question about web app loading Product Support	1	154	3월 25, 2025
Discourse theme components now support Wasm :confetti_ball: Announcements new-feature	11	1648	3월 21, 2024

테마 컴포넌트에서 JS 에셋을 로드할 때 발생하는 문제

Related topics