Allow computed data to configure special Eleventy Data properties (like pagination)

[romaricpascal]

Describe the bug
I'm trying to paginate some data that's returned by an eleventyComputed property. Eleventy breaks announcing it cannot find the property used for the pagination:

Could not resolve pagination key in template data: supportedLocales

To Reproduce

The computed-properties-pagination branch of this repository contains a reduced test case. The test.liquid template tries to paginate over the supportedLocales key defined in data/eleventyComputed. Run npx @11ty/eleventy to get the exception.

If there's a non-computed property with the same name, it will get used for the pagination. You can witness the behaviour using the previous commit on the branch. It contains a property with the same key defined in data/supportedLocales. The test.liquid template does paginate, but does it over the "static" properties not the computed ones.

Expected behavior

I'd have expected the computed property to be used for pagination in both cases, overriding the static ones when they are defined.

Environment:

• OS and Version: Ubuntu 18.04
• Eleventy Version: Using the 11ty/eleventy#9109e76 in package.json.

Additional context
Add any other context about the problem here.

[romaricpascal]

Realised it wasn't the latest commit on master, but even with 11ty/eleventy#1fd4f02 the issue is still there, unfortunately.

[martinkz]

I'm not 100% certain, but I suspect "computed properties", as in functions that return an object being treated as being the object itself, are not a thing in eleventy. I've seen the concept in Vue where you can indeed treat them as a data object. If you look at the examples in the documentation for computed data, they all use plain JS objects (or arrays).

The reason this fails is probably because supportedLocales is a type of function, not something iterable. Is there any particular reason you can't return an object or array instead of a function?

Furthermore, if you have the following data.js:

module.exports = {
    test() {
        return "test";
    }
};

And then try to output it in a template like this: {{ data.test }}, it prints out some function code instead, which again leads me to believe Vue-style computed properties aren't a thing.

Edit: I might be wrong though, and the example should work, anyone else want to weigh in on this?

[romaricpascal]

^_^ Computed properties are actually coming to Eleventy: https://www.11ty.dev/docs/data-computed/. The feature is on master so I was trying it out early.

[zachleat]

This docs page is extremely relevant to this discussion: https://www.11ty.dev/docs/advanced-order/

Hmm, let me ponder this one.

[zachleat]

We could move this up in the order of operations but that would have a lot more undesirable implications, specifically I think it would create a circular dependency on computed permalinks (and you wouldn’t be able to access collections in computed functions). This might just be a out of the box limitation of the feature.

Hmm.

At the very least we should throw an error when computed data overrides something used as a pagination key.

[zachleat]

Alright, after some consideration I do think this would be a worthwhile feature but will be a Version 2 iteration of the feature. Note that the docs do currently say “At the end of the Data Cascade.”

I’m going to modify this issue and put it into the enhancement queue.

There are a bunch of special data props in Eleventy that we could use this feature to transform and each of them will require a special case in the order of operations.

e.g.:

collections
page
pagination
permalink
date
dynamicPermalink
layout
tags
templateEngineOverride
eleventyExcludeFromCollections

(via https://www.11ty.dev/docs/data-configuration/)

[zachleat]

In the mean time use the before callback to transform pagination data.

https://www.11ty.dev/docs/pagination/#the-before-callback

[zachleat]

This repository is now using lodash style issue management for enhancements. This means enhancement issues will now be closed instead of leaving them open.

View the enhancement backlog here. Don’t forget to upvote the top comment with 👍!