Eleventy: Documentation/helper functions for dumping collections state info

[jeffposnick]

I've been experimenting with taking some of the templating and state management that 11ty provides and moving it into a service worker.

As part of that process, the service worker needs access to data (i.e. HTML-formatted content) and metadata (e.g. titles, dates, tags, other post-specific state info, along with global config that lives under _data/) as well as the underlying templates used to render the final HTML.

It's possible to collect a good deal of this required info at build time and format it so that it could be cached by the service worker and used later on. (Here's an example of how I'm doing that, and @zachleat offered some suggestions on Twitter for improving that process for post-specific [meta]data.)

One of the thing I'm not sure how to do is to get at 11ty's internal data about collections, which would need to be dumped at build time, and read by the service worker at runtime, in order to have the service worker render index.html-style templates, or deal with pagination. It would be great to see either documentation as to how to get at that data, or for a new helper function to be created to make it easy to dump out all of the internal state that might be useful for this purpose.

(In the course of researching this issue I found https://github.com/11ty/eleventy/issues/130, which is tangentially related.)

[jeffposnick]

FWIW, I've naively tried

permalink: /_posts/collections.json
---
{{ collections.post | dump }}

which leads to

> Having trouble rendering template ./_posts/collections.njk (TemplateContentRenderError)
> (unknown path)
  TypeError: Converting circular structure to JSON (Template render error)

[zachleat]

Just as a quick note (I’ll leave more feedback here later) the last issue you mentioned is almost certainly https://github.com/11ty/eleventy/issues/263 and will be fixed in the next version.

[zachleat]

I’d recommend re-checking this after 0.6.0 is released and then we can decide whether to this needs additional work and needs to go into the enhancement queue or not.

If the following example is still broken in 0.6.0 I’d consider that a bug:

permalink: /_posts/collections.json
---
{{ collections.post | dump }}

[jeffposnick]

Sounds good—could you ping this issue when 0.6.0 is released so that I don't miss it? I'm eager to try things out.

[jeffposnick]

I've updated to 0.6.0 and am still seeing the same

> Having trouble rendering template ./_posts/collections.njk (TemplateContentRenderError)
> (unknown path)
  TypeError: Converting circular structure to JSON (Template render error)

when attempting to dump the collections.post data.

[wesruv]

I'm getting the same as @jeffposnick

[zachleat]

I don’t think using JSON.stringify is gonna get us there, sorry y’all.

Can you try https://www.npmjs.com/package/javascript-stringify instead and see if it will work? I do use it for JSTL file processing so I know that it can convert the object.

You can make your own filter to do this, and use it just like you would dump. https://www.11ty.io/docs/filters/

[jeffposnick]

When going down the custom filter route, I think I could get what I want just by explicitly listing the fields I want dumped:

eleventyConfig.addFilter('serializePosts', (value) => {
  const postData = value.map((post) => {
    return {
      date: post.date,
      url: post.url,
      data: {
        title: post.data.title,
        excerpt: post.data.excerpt,
      },
    };
  });

  return JSON.stringify({
    collections: {
      post: postData,
    },
  }, null, 2);
});

[zachleat]

Ah, that’s great @jeffposnick. Is that enough to consider this resolved?

[jeffposnick]

Yeah, I think this can be closed—that might end up being a useful snippet to include in the docs, though.

[zachleat]

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

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

[fabarea]

Since I stumbled upon the same issue, I went with javascript-stringify solution mentioned above. I am debugging for now the (circular) objects in the console with {{ collections.nav | console }}.

  const stringify = require('javascript-stringify').stringify;

  eleventyConfig.addFilter('console', function(value) {
    const output = stringify(value, null, "\t", { maxDepth: 3 });
    console.log(output);
    return '';
  });

The implementation is very raw but this might help.

[Ryuno-Ki]

Thank you!

[stephane-klein]

With this solution I have always circular reference error.

Now, I use this with success in my .eleventy.js:

const util = require('util');

...

module.exports = function (eleventyConfig) {
   ...
   eleventyConfig.addFilter('console', function(value) {
        return util.inspect(value);
    });
   ...