Issues on loading a js asset from a Theme Component

happycactus · September 22, 2023, 1:39pm

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 <script>var x='pgn here'; ...</script> and <div class='pgn-blahblah'></div> 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

merefield · September 22, 2023, 1:53pm

Welcome to Meta, @happycactus

Yes, probably. The only reason why you’d need a plugin is if you were trying to change the API (ie back end).

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 …

happycactus · September 22, 2023, 3:35pm

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

merefield · September 22, 2023, 3:47pm

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).

can you share the exact error - is this in the browser console?

Falco · September 22, 2023, 4:10pm

Your actual problem is trying to use inline JS, which is prohibited by CSP.

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.

pfaffman · September 22, 2023, 4:59pm

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

happycactus · September 23, 2023, 9:15am

Thanks, @Falco, this was one of my doubts.

Sure, here it is: GitHub - studiofuga/discourse-pgn-component: A theme component for Discourse to display PGN blocks
There’s also a plugin version, but I think I’ll not follow this approach and stay on the theme 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.

happycactus · September 23, 2023, 9:35am

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.

happycactus · September 23, 2023, 2:47pm

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.

and the line is this (on the original js module)

let isBrowser=new Function("try {return this===window;}catch(e){ return false;}")

here.

merefield · September 23, 2023, 4:01pm

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

happycactus · September 23, 2023, 4:06pm

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

happycactus · September 23, 2023, 4:30pm

Ok I did it, just I needed to use the ’ … lol… Anyway, My script almost worked, I pushed everything on main and it somehow worked, it seems i have an issue with rendering but at least the main component is called (I suspect where the problem is).
Thanks all… I’ll be back soon with more questions LOL. Thanks!

Falco · September 23, 2023, 6:27pm

Keeping in mind that adding unsafe-eval to your CSP is basically removing the whole point of CSP and making your site less secure as a result.

Using eval is a code smell, and it should be fixed upstream as you pointed above.

happycactus · September 23, 2023, 7:42pm

Yes, defintely. I’m unable to fix it at the moment, but my plan is to first fix my component, then fix the upstream library and remove the CSP override.
Thanks for the advice!

happycactus · September 25, 2023, 1:41pm

I’m almost done. I was able to display “something” but it is working randomly.
The js library I’m using works this way:

First we need to define a <div id='board'> block with a unique id. then we need to launch a function to populate the div, something like this. PGNV.pgnBoard('board', {});. The script requires the same id to populate it.

If I understand correctly, 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. So I used first a widget (doesn’t work, because the HTML function must return the block, and I don’t have it), then I switched to a debounced function: debounceFunction(this, renderPgn, attrs, 200);.

But it works “sometimes”.

What am I missing?

Thanks

hawm · September 26, 2023, 12:22pm

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

debounce may not be the solution in your use case

Have a try to use the afterAdopt options

github.com

discourse/discourse/blob/2a10ea0e3f858f243330edce5a07015df72d7f88/app/assets/javascripts/discourse/app/lib/plugin-api.js#L366


      
          }
          
          /**
           * 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' }
           * );
           * ```
           **/

happycactus · September 27, 2023, 9:43am

Hi Hawn, thank your for your hint!
It seems exactly what I was looking for. I tried two different approach:

first use the normal “decorateCooked” to parse and attach the div block and then the afterAdopt to render by calling PGNV.pgnviewer() or
use only the afterAdopt option to both attach and render

none worked for yet another issue that I’m, unable to fully grasp, it seems the inner library crashes with an error, unable to find className attribute apparently in a DOM element. I’m a bit lost . I’ve seen that someone use loadScript, but I just import the library and using the debounce function just worked. What is the difference between the two methods?

Thanks!

happycactus · September 28, 2023, 8:39pm

Hi @hawm , I’ve found why it doesn’t work and I’m stuck.
Of course I’m totally new on Ember and on recent js in general. So I studied a bit and find out the reason.
PgnViewerJs expect to work on real DOM, not on Virtual DOM. So even after the cooked element has been adopted, it isn’t present in the real DOM, and PGNV search for IDs by using document.getElementById.
I studied everything I could find out: ember components seems to fit my needs, but I’m unsure how to handle it.
Or perhaps API.onAppEvent ?

Thanks.

happycactus · September 28, 2023, 9:36pm

I used later() from ember and though it’s a dirty hack, it works.
Any better solution?

system · October 28, 2023, 9:37pm

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Javascript assets in a theme component Dev	15	1843	May 7, 2021
decorateCookedElement for each page change? Dev	5	1492	January 11, 2022
Defer loading JavaScript in Themes and Components Dev	4	1897	April 7, 2022
A tour of how the Widget (Virtual DOM) code in Discourse works Dev	75	28481	July 10, 2023
Mermaid JS Plugin Plugin	17	7340	July 17, 2023

Issues on loading a js asset from a Theme Component

Related Topics