eleventy icon indicating copy to clipboard operation
eleventy copied to clipboard

Fix pagination and eleventy computed for `.njk` engine

Open alifeee opened this issue 1 year ago • 1 comments

closes #2512, #2837, #3013

Introduction

Hi, I hope you are well.

There is a problem where if you use a Nunjucks and a template file like

---
layout: base
pagination:
  data: books
  size: 1
  alias: book
permalink: /{{ book.shortname }}/
eleventyComputed:
  title: "{{ book.name }}"
---
{{ title }}

All eleventyComputed variables are blank. See #2512, #2837, #3013 for discussion.

This problem was introduced by https://github.com/11ty/eleventy/commit/c6158b0fc3f3bd675adf6b8bec1be89828120bfb, a commit between 2.0.0-canary.8 and 2.0.0-canary.9.

New test

I have added a test which fails:

https://github.com/alifeee/eleventy/blob/301d2c09d76a6bc717a0a8ceda37a1bdb7cdbb42/test/PaginationTest.js#L833-L863

here is a simplification (in the actual test, it tests all templating languages)

// ./_data/books.json
[
    {
        "id": 1,
        "name": "The Effervescent adventures of Paul Mescal",
        "shortname": "paul-mescal"
    }
]
{{! ./_includes/base.njk }}
---
title: Books
---
<title>{{ title }}</title>
{{! ./book.njk }}
---
layout: base
pagination:
  data: books
  size: 1
  alias: book
eleventyComputed:
  title: "{{ book.name }}"
---
// PaginationTest.js
test("Pagination and eleventyComputed data, issues #2512, #2837, #3013", async (t) => {
  let elev = new Eleventy(`./test/stubs-3013/njk/`, `./test/stubs-3013/njk/_site`, {
      source: "cli",
      runMode: "build",
    });
    await elev.init();
    let written = await elev.toJSON();

    t.is(written[0].content, "<title>The Effervescent adventures of Paul Mescal</title>");
});

Result

This test failed

image

The fix

I spent some time commiting https://github.com/11ty/eleventy/commit/c6158b0fc3f3bd675adf6b8bec1be89828120bfb bit-by-bit and the fix i discovered was this:

- // set(target, prop, value) {
- //  return Reflect.set(target, prop, value);
- // }
+ set(target, prop, value) {
+   return Reflect.set(target, prop, value);
+  }

I am not fully sure why this is the fix, but I think it is to do with being able to set the data.eleventyComputed on a Proxy object.

If you re-add this removed code from https://github.com/11ty/eleventy/commit/c6158b0fc3f3bd675adf6b8bec1be89828120bfb, then, compiling a template complains as the object cannot be assigned unless set exists as a property above. Thus, this is the fix I implemented with https://github.com/alifeee/eleventy/commit/301d2c09d76a6bc717a0a8ceda37a1bdb7cdbb42

And now the test passes

Thank you for your time. I hope this is the correct branch to target with this change.

alifeee avatar Dec 10 '23 16:12 alifeee

Would love to see this merged as this specific issue plagued me all day.

wgeorgecook avatar Mar 24 '24 01:03 wgeorgecook

Shipping with 3.0.0-alpha.11. Thank you!

zachleat avatar Jun 10 '24 21:06 zachleat

Accidentally merged this in 2.x. Again, this will ship with 3.0.0-alpha.11.

Thank you!

zachleat avatar Jun 10 '24 21:06 zachleat

cheers ;) enjoy

alifeee avatar Jun 11 '24 16:06 alifeee