How to migrate from old {#asset ..} to new {{asset ..}}

msageryd

I'm cyrrently loading fonts like this in my CSS.

@font-face {
    font-family: "pt-regular";
    src: url({#asset Myriad-Pro-Regular.ttf @encoding=dataURI});
    format("ttf");
}

How should the {#asset ..} syntax look like if I want to use the new {{asset ..}} helper?
I tried this, but it didn't work:

@font-face {
    font-family: "pt-regular";
    src: url({{asset "Myriad-Pro-Regular.ttf" "dataURI"}});
    format("ttf");
}

jan_blaha

It looks like it should be identical. Could you reproduce the problem in the playground, please?

msageryd

Here you go.
https://playground.jsreport.net/w/msageryd/P9rTrXEF

The CSS loads the same font twice, once with {#asset..} and once with {{asset ..}}.
Two classes are defined to use each of the fonts.

Only "legacy" works as I want.

Edit:
I'm not sure why I need url(). That came from very old code. I cannot find any documentation about this function either. Is it really needed?

jan_blaha

Ok, I see now. The asset helper doesn't work in a recursive way. This means you cannot nest another {{asset call inside. This is for performance reasons (re-evaling content takes time). The asset should be just static.

In case you need nested structures, you should look at components
https://jsreport.net/learn/components

msageryd

Thanks for claifying.
I love component, and I use them alot.

Could you clarify a bit more so I can choose the right tool.

I suppose I could use component for almost everything except binary assets?
When should I use assets, besides for loading binary files?
Are assets faster to load than components if the content is static?

I separated the static content (pure CSS) from the part where I need to load binary assets.
The font-part is now a component:
https://playground.jsreport.net/w/msageryd/ZWNLbcpR

Is there any reason why I shouldn't simplify this and put the whole CSS in a component?
Like this:
https://playground.jsreport.net/w/msageryd/PaFIRXBa

jan_blaha

I suppose I could use component for almost everything except binary assets?

Yes, components can be used for everything inside the templating evaluation context.

When should I use assets, besides for loading binary files?

You should use assets for everything static that you don't want to eveal with templating engine. You can use asset also for storing configurations that you load in a custom script.

Are assets faster to load than components if the content is static?

Yes, because there isn't any templating engine evaluation involved.

Is there any reason why I shouldn't simplify this and put the whole CSS in a component?

It's not important from the performance context in this case. Just use what feels better for you.

msageryd

Thanks again.
Maybe some of this should be added to the asstes docs (https://jsreport.net/learn/assets#wrap).

This would have helped me:

Assets loads faster than components, but must be static
Assets cannot be nested
If the content is not static, use components