Components use third-party/assets

underfisk

Currently, I'm migrating "components" that are essentially sections in the old v2 format but some require tailwind or some assets. Is there any way that at least we can ensure tailwind is present in the components? I'm not sure if using beforeRender in a global script would eventually make it available

jan_blaha

Weren't you able to solve this using answer here?
https://forum.jsreport.net/topic/2522/avoid-multiple-imports-of-assets-in-components

underfisk

I haven't tried it yet but the need for this request was based on having a "head" asset globally available and not having to load on each template, we do have standalone components/templates, and when developing we often end up importing them and it's just an extra boilerplate that I'm trying to avoid.
The idea would be to have a beforeRender invoking the custom load asset that you've provided but even so, is there any impact on performance using beforeRender to import assets?

jan_blaha

You could implement a generally available asset or component head. The boilerplate would be minimal then.

<html>
   {{component "head"}}
  <body>
  </body>
</html>

The other option is also beforeRender, but it makes it a bit less explicit.

const jsreport = require('jsreport-proxy')
async function beforeRender(req, res) {
    const aHeadAsset = await jsreport.documentStore.collection('asset').findOne({name: 'head'})
    req.template.content = aHeadAsset.content.toString() + req.template.content
}

I wouldn't be worried about perf here until you get some signs.

underfisk

If we have nested components, is this going to repeat the import? I'm just worried on having multiple times, probably with the solution that you've provided to simply avoid multiple imports, it should do the trick if we use the same approach here, right? (something that checks whether the head has been added and if so just skip since the head will be available for the whole report?)

jan_blaha

The components or assets are basically just a "string replace". No extra magic checking if something is in the head or not...

underfisk

What i meant is that loading in beforeRender, we are appending the head asset content before the actual template content, right? If we have nested components, beforeRender will not only be invoked on the parent template but also on the children. What I'm trying to see is a way to avoid some templates of ours that render hundreds of templates and avoid that each one of them includes the head or any sharable asset. Does this make sense what I'm describing?

jan_blaha

we are appending the head asset content before the actual template content, right

You can put it anyware, for example with some regexp.

will not only be invoked on the parent template but also on the children.

You can use if (req.context.isChildRequest) {} to determine you are in the child request.

underfisk

Thanks for getting back so quick, these answers have been very good to understand what's the potential ways of achieving what i was looking for