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 proper var x='pgn here'; ... and blocks. So far so good, but now I need to load the js. I found that I can use import loadScript from "discourse/lib/load-script"; and await loadScript(settings.theme_uploads_local.pgnviewer_js); to load it at initialization time from the /assets/ directory. But I have a few problems here. Despite I’m able to load the component on the dev installation, I can’t on my production server, because it says the asset is too big. Is there a way to fix this? Second, on the dev installation, I see a warning stating it couldn’t load /theme-javascripts/dist.js.map. I have no idea where it comes from. Is there something I should provide? Overall, is this approach correct, or would it be better to implement a plugin instead? Thanks kind regards FF

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 [image] HappyCactus: the document is not yet populated and the PGNV object is unable to find the block debounce may not be the solution in your use case [image] HappyCactus: I cannot do this while decorating the cooked block, because the document is not yet populated and the PGNV object is unable to find the block Have a try to use the afterAdopt options app/assets/javascripts/discourse/app/lib/plugin-api.js 2a10ea0e3 } /** * Used for decorating the `cooked` content of a post after it is rendered * * `callback` will be called when it is time to decorate with an DOM node. * * Use `options.onlyStream` if you only want to decorate posts within a topic, * and not in other places like the user stream. * * Decoration normally happens in a detached DOM. Use `options.afterAdopt` * to decorate html content after it is adopted by the main `document`. * * For example, to add a yellow background to all posts you could do this: * * ``` * api.decorateCookedElement( * elem => { elem.style.backgroundColor = 'yellow' } * ); * ``` **/

Welcome to Meta, @happycactus :wave: [image] 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). [image] 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. Yes, you need to change app.yml to allow large files to be fed through the reverse proxy (nginx). Thankfully this is a simple setting, upload_size:, here in context: params: ## Which Git revision should this container use? (default: tests-passed) version: tests-passed ## Maximum upload size (default: 10m) upload_size: 20m Once you’ve changed this you will need to rebuild for it to take effect: ./launcher rebuild app Of course, this assumes you have appropriate access to the server …

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 the marmaid component: async function applyMermaid(element, key = "composer") { const mermaids = element.querySelectorAll("pre[data-code-wrap=mermaid]"); ... await loadScript(settings.theme_uploads_local.mermaid_js); ... mermaids.forEach((mermaid) => { if (mermaid.dataset.processed) { return; } const spinner = document.createElement("div"); spinner.classList.add("spinner"); ... mermaid.append(spinner); }); This way, if I understand correctly, I don’t need to load the script from the page (using loadScript perhaps??) but I can just import it in the theme js? Or likely I’m totally mislead! I mean, what’s the difference between the loadScript and a simple import? Can you address me to some web resource where I can better understand this? Sorry again if the questions are trivial or stupid! Another thing, the limit is by default to 10M, but my asset is around 300kb, and the whole zip is 337kb, still during upload it says it is mre than 512kb. Thanks, FF

[image] 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 returns a promise). [image] HappyCactus: Another thing, the limit is by default to 10M, but my asset is around 300kb, and the whole zip is 337kb, still during upload it says it is mre than 512kb. can you share the exact error - is this in the browser console?

Your actual problem is trying to use inline JS, which is prohibited by CSP. [image] HappyCactus: var x='pgn here'; ... 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 look too.

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

[image] Falco: Your actual problem is trying to use inline JS, which is prohibited by CSP. Thanks, @Falco, this was one of my doubts. [image] 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 component for Discourse to display PGN blocks · GitHub There’s also a plugin version, but I think I’ll not follow this approach and stay on the theme component. [image] Jay Pfaffman: Have a look at the Discourse Mermaid component Thanks @pfaffman , indeed I took inspiration on it, and I noticed that it does exactly what I need and in the correct way, without injecting the code as suggested above. Thanks all, I’ll try with your suggestions and get back with results. Of course my code is open sourced, so any contribution or critic is very welcome.

[image] Robert: [image] 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 sorry for the stupid question.

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. [Schermata del 2023-09-23 16-12-11] and the line is this (on the original js module) let isBrowser=new Function("try {return this===window;}catch(e){ return false;}") here.

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

Issues on loading a js asset from a Theme Component

Development

merefield (Robert) September 23, 2023, 4:01pm 10

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

Topic		Replies	Views
Javascript assets in a theme component Development	15	2575	May 7, 2021
Defer loading JavaScript in Themes and Components Development dev-news	4	2182	April 7, 2022
How to load library in a theme component Development	6	529	August 25, 2023
Question about web app loading Product Support	1	162	March 25, 2025
Discourse theme components now support Wasm :confetti_ball: Announcements new-feature	11	1674	March 21, 2024

Issues on loading a js asset from a Theme Component

Related topics