Add custom function to twig loader

[tacman]

I'm trying to reuse some server-side twig files in twigjs. I'd like to add a path function that basically maps FosJsRouting bundle generate function, since obviously a client-side renderer can't render server paths without that data.

I see the examples on how to extend Twig with a custom function, but I never actually get a Twig variable, I simply load the templates via this terrific loader.

What I have now is:

const routes = require('../../public/js/fos_js_routes.json');
import Routing from '../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js';
Routing.setRoutingData(routes);
let template = require('../templates/headlines_by_group.html.twig'); 
let html = template({Routing: Routing, project: project});

and the template contains

<a href="{{ Routing.generate('project_show', {id: project.id}) }}">{{ project.name }}</a>

What I want I for the template to simply contain the server-side twig:

<a href="{{ path('project_show', {id: project.id}) }}">{{ project.name }}</a>

And have the path function be mapped from the Routing above, from https://github.com/FriendsOfSymfony/FOSJsRoutingBundle

Twig.extendFunction("path", (route, params) =>
{
    return Routing.generate(route, params);
});

Is it even possible? Having path() in twigjs templates would be amazing.

[megahertz]

Yes, I think that's possible.

[tacman]

can you give me some guidance as to how?

…

On Sun, Nov 28, 2021, 10:47 PM Alexey Prokhorov ***@***.***> wrote: Yes, I think that's possible. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#11 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAEXIQJH7BTXDMVUY6AY52LUOLZUJANCNFSM5I6EJP3A> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[megahertz]

Actually, you're on the right way and defining the path function with Twig.extendFunction should work fine.

[tacman]

Since I'm using webpack and this loader, I never actually load the Twig library, so I was hoping there was a way to set it up globally.
That is, in webpack.config.js,, I have

    .addLoader({
        test: /\.twig$/,
        use: {
            loader: 'twig-loader',
            options: {
            },
        },
    })

The templates are compiled, so I can then call

let template = require('../templates/headlines_by_group.html.twig'); 

Is there a way in options to make sure that Twig is extended before the path function is called? Literally, how to I inject this code so that it is available when the loader compiles my twig templates?

Twig.extend(function (Twig) {
    Twig._function.extend('path', function (start, end) {
        return Twig.functions.range(end, start);
    });
});

[megahertz]

I'm not sure whether a new function should be defined before requiring the template or it's fine if it's defined after that. Anyway, even if it's not possible to define that after requiring, you can move Twig.extend code to a separate file and require it before requiring the first twig template.