Eleventy Edge Function with nested PairedShortcode

[joepavitt]

H, I'm trying to build out an A/B Testing framework into our Eleventy site.

I had setup a paired shortcode called abtesting, which takes in a feature flag (flag) and value (value), and returns the content if the value matches the chosen value for this user, and nothing if the flag does not, means we can write templated content like this:

{% abtesting "flag", "control"%}
<h1>
    Main Header
</h1>
{% endabtesting %}
{% abtesting "flag", "test"%}
<h1>
    Alternative Main Header
</h1>
{% endabtesting %}

Our flags are driven by PostHog Experiments, which requires a call to their NodeJS SDK in order to retrieve the flag for a given user, this can also be achieved via a raw API call.

The challenge was that the API call currently just runs on server load, given it's running at build-time. As such, I thought I'd explore the Edge Functions. Ideally, I'd be able to call something like:

{% edge %}
{% abtesting "flag", "control"%}
<h1>
    Main Header
</h1>
{% endabtesting %}
{% abtesting "flag", "test"%}
<h1>
    Alternative Main Header
</h1>
{% endabtesting %}
{% endedge %}

but I get a lot of issues with Eleventy when trying to do this, even though I've moved the definition of abtesting into the relevant edge function with:

let edge = new EleventyEdge("edge", {
    request,
    context,
    precompiled: precompiledAppData,

    // default is [], add more keys to opt-in e.g. ["appearance", "username"]
    cookies: [],
});

edge.config((eleventyConfig) => {
    eleventyConfig.addPairedShortcode("abtesting", async function (content, flag, value) {
        ...
    }
}    

When running this, I get errors that the abtesting function is not found. What are my best options here? Is there something I'm obviously missing?

[joepavitt]

seems related to this I believe: #2585

[joepavitt]

Did get this working by using {% edge "liquid" %} (even though my files are njk)