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



  • 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");
    }
    


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



  • 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?



  • 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



  • 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



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



  • 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

Log in to reply
 

Looks like your connection to jsreport forum was lost, please wait while we try to reconnect.