Permalink errors when using pagination

[peterjanes]

Describe the bug

When rendering a paginated page that is a .webc component, I'm getting syntax or type errors depending on the permalink template.

To Reproduce

My setup is the same as in #36, but using the current @11ty/eleventy 2.0.0-canary.24 and @11ty/eleventy-plugin-webc 0.8.1.

With permalink: "thing/{{item.title | slugify }}/" as in the original:

$ npx eleventy
[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] Unexpected token '{' (via SyntaxError)
[11ty] 
[11ty] Original error stack trace: evalmachine.<anonymous>:1
[11ty] thing/{{item.title | slugify }}/
[11ty]        ^
[11ty] 
[11ty] SyntaxError: Unexpected token '{'
[11ty]     at new Script (node:vm:100:7)
[11ty]     at createScript (node:vm:265:10)
[11ty]     at Object.runInNewContext (node:vm:306:10)
[11ty]     at ModuleScript.evaluateScript (/home/peterj/devel/bug/node_modules/@11ty/webc/src/moduleScript.cjs:62:25)
[11ty]     at Object.<anonymous> (/home/peterj/devel/bug/node_modules/@11ty/eleventy-plugin-webc/src/eleventyWebcTemplate.js:70:26)
[11ty]     at Template._renderFunction (/home/peterj/devel/bug/node_modules/@11ty/eleventy/src/TemplateContent.js:373:27)
[11ty]     at Template.renderPermalink (/home/peterj/devel/bug/node_modules/@11ty/eleventy/src/TemplateContent.js:422:19)
[11ty]     at async Template._getLink (/home/peterj/devel/bug/node_modules/@11ty/eleventy/src/Template.js:243:24)
[11ty]     at async Template.getOutputLocations (/home/peterj/devel/bug/node_modules/@11ty/eleventy/src/Template.js:293:16)
[11ty]     at async Pagination.getPageTemplates (/home/peterj/devel/bug/node_modules/@11ty/eleventy/src/Plugins/Pagination.js:389:37)

With permalink: "/{{item.title | slugify }}/" (i.e. dropping the directory prefix):

$ npx eleventy
[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] link.slice is not a function (via TypeError)
[11ty] 
[11ty] Original error stack trace: TypeError: link.slice is not a function
[11ty]     at TemplatePermalink._addDefaultLinkFilename (/home/peterj/devel/bug/node_modules/@11ty/eleventy/src/TemplatePermalink.js:86:25)
[11ty]     at TemplatePermalink.toOutputPath (/home/peterj/devel/bug/node_modules/@11ty/eleventy/src/TemplatePermalink.js:95:26)
[11ty]     at TemplatePermalink.toPath (/home/peterj/devel/bug/node_modules/@11ty/eleventy/src/TemplatePermalink.js:188:20)
[11ty]     at Template.getOutputLocations (/home/peterj/devel/bug/node_modules/@11ty/eleventy/src/Template.js:299:19)
[11ty]     at async Pagination.getPageTemplates (/home/peterj/devel/bug/node_modules/@11ty/eleventy/src/Plugins/Pagination.js:389:37)
[11ty]     at async Template.getTemplates (/home/peterj/devel/bug/node_modules/@11ty/eleventy/src/Template.js:696:27)
[11ty]     at async TemplateMap.initDependencyMap (/home/peterj/devel/bug/node_modules/@11ty/eleventy/src/TemplateMap.js:410:22)
[11ty]     at async TemplateMap.cache (/home/peterj/devel/bug/node_modules/@11ty/eleventy/src/TemplateMap.js:454:5)
[11ty]     at async TemplateWriter._createTemplateMap (/home/peterj/devel/bug/node_modules/@11ty/eleventy/src/TemplateWriter.js:303:5)
[11ty]     at async TemplateWriter.generateTemplates (/home/peterj/devel/bug/node_modules/@11ty/eleventy/src/TemplateWriter.js:333:5)

With permalink: "{{item.title | slugify }}/" (i.e. dropping the directory prefix and leading /):

 npx eleventy
[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] Invalid regular expression: missing / (via SyntaxError)
[11ty] 
[11ty] Original error stack trace: evalmachine.<anonymous>:1
[11ty] {{item.title | slugify }}/
[11ty]                          ^
[11ty] 
[11ty] SyntaxError: Invalid regular expression: missing /
[11ty]     at new Script (node:vm:100:7)
[11ty]     at createScript (node:vm:265:10)
[11ty]     at Object.runInNewContext (node:vm:306:10)
[11ty]     at ModuleScript.evaluateScript (/home/peterj/devel/bug/node_modules/@11ty/webc/src/moduleScript.cjs:62:25)
[11ty]     at Object.<anonymous> (/home/peterj/devel/bug/node_modules/@11ty/eleventy-plugin-webc/src/eleventyWebcTemplate.js:70:26)
[11ty]     at Template._renderFunction (/home/peterj/devel/bug/node_modules/@11ty/eleventy/src/TemplateContent.js:373:27)
[11ty]     at Template.renderPermalink (/home/peterj/devel/bug/node_modules/@11ty/eleventy/src/TemplateContent.js:422:19)
[11ty]     at async Template._getLink (/home/peterj/devel/bug/node_modules/@11ty/eleventy/src/Template.js:243:24)
[11ty]     at async Template.getOutputLocations (/home/peterj/devel/bug/node_modules/@11ty/eleventy/src/Template.js:293:16)
[11ty]     at async Pagination.getPageTemplates (/home/peterj/devel/bug/node_modules/@11ty/eleventy/src/Plugins/Pagination.js:389:37)

The <template webc:nokeep> solution from this comment also doesn't appear to work.

These errors also occur using @11ty/eleventy 2.0.0-canary.16 and @11ty/eleventy-plugin-webc 0.7.0, which seems to be the configuration reported fixed in #36, so I'm not sure what I'm doing wrong.

[peterjanes]

I haven't seen it suggested anywhere, but permalink: "{{ slugify(item.title) + '/' }}" does work, as does any valid JS that's entirely contained within the {{/}} delimiters.

[zachleat]

Note that while {{ might technically work, it isn’t likely what you wanted (or the person in #36 wanted either). That’s Nunjucks/Liquid syntax. In a WebC template you want to use a WebC permalink syntax, which is the same syntax as Dynamic Attributes.

So if this is in front matter via YAML, you’ll likelywant:

---
permalink: "'/' + slugify(item.title) + '/'"
---

(assuming item is the alias from your pagination settings)

but any arbitrary JS would work so I’d expect this to work too:

---
permalink: "`/${slugify(item.title)}/`"
---

[zachleat]

You could also use a JS function for this as well (with JS front matter) and bypass the webc parsing altogether:

---js
{
  permalink: function(data) {
    return "`/${this.slugify(data.item.title)}/`";
  }
}
---

https://www.11ty.dev/docs/data-frontmatter/#javascript-front-matter

[peterjanes]

Gotcha, thanks. I guess it's implied by "Use template syntax in permalink" that the syntax should match the template language, but I've only ever used or seen Liquid/Nunjucks permalink templates.

[zachleat]

Yeah, I think post-2.0 release WebC will start to play a more prominent role as a first-party language on the docs, which should help with some of this confusion. Thanks!