Add addTransform option to filter by outputPath file extension (better handle outputPath.endsWith check fails with permalink: false)

[pepelsbey]

Describe the bug

When you have files with permalink: false then outputPath.endsWith check fails.

if(outputPath.endsWith('.html')) { … }

> Having trouble writing template: false (TemplateWriterWriteError)
> outputPath.endsWith is not a function (TypeError):

To Reproduce

1. Create a file with permalink: false that resolves into *.html
2. Add a transform, just like in this example.
3. Build

Expected behavior

Successful build.

Environment:

• OS and Version: macOS 10.14.6
• Eleventy Version: 0.8.3

Additional context

It could be fixed by checking if outputPath is available:

if(outputPath && outputPath.endsWith('.html')) { … }

…or by changing the outputPath behavior, which is preferable :)

[zachleat]

Hmmmmmmmmmmmmmmmmmm… Should we solve this in the library? Transforms should run on permalink: false templates. What would be a better value for outputPath there?

[pepelsbey]

How about if (!permalink) { outputPath = '' }? Pseudo code, of course.
It’s empty, but could be checked with endsWith.

[zachleat]

Hmm, this makes me a little uncomfortable because it’s a little bit of magic? Right now permalink: false means outputPath: false, which makes the most sense and has the least amount of magic.

Not saying no, just want to think it out all the way.

One other question that comes to mind: if you set permalink: should it be the same as permalink: false? Does permalink: have any unique functional value?

[pepelsbey]

You could require permalink key to accept strings, not Boolean values: permalink: '' or… Even better: keep it they way it is (string or false), but transform it to string, while parsing the metadata. Yes, a little bit of magic. Storing false as '' would keep API the same, but it would also make the outputPath check work. Personally, I don’t see why front matter key permalink and internal API property outputPath should have the same type. If permalink is false then outputPath is empty. It makes perfect sense to me. The first one is a yes/no thing, the second one is always a path, but sometimes it’s empty.

[edwardhorsford]

I just came across this - added the html minification example to my eleventyConfig and it blew up.

Two things caused this:

• I had some content in my site using ' and " such that the html was actually invalid - this is the first time I've noticed. I've now put more safeguards to make sure my content converts those to smartquotes before they get to the transform stage.
• One output path out of 722 was a boolean rather than string. The 'content' was an empty array - so I'm not quite sure what it is.

I'm not sure the transform necessarily needs to so something differently, but I think the example code for minification should handle this case. Something as simple as testing for a string / url and then proceeding. It using endsWith() strongly implied that outputPath would always be a string - which is not the case.

[davidysoards]

For anyone coming across this by using the html-minifier example in the docs and a link to an outside url using permalink: false the solutions is pretty simple, just add a check for outputPath to the if statement

if (outputPath && outputPath.endsWith('.html'))

[jdvivar]

What if the outputPath has no html file extension? As in:

---
permalink: "whatever"
---

How would a transform plugin for HTML would know the file to transform is HTML prior to the transformation itself?

[jdvivar]

I think I found a good balance in my plugin to deal with both undefined file extensions and permalink false:
jdvivar/eleventy-plugin-add-web-component-definitions@286ecef

[igelstorm]

I also came across this issue by following the html-minifier transform example in the docs. I fixed it by changing the code as @davidysoards suggested (thanks!).

It seems to me that the most immediate problem is not necessarily that there's anything unintuitive about the API, but that the docs contain a code example that breaks fairly easily (i.e. whenever any template has permalink: false). So maybe the appropriate fix is to amend that example per @davidysoards's suggestion? And potentially also clarify in the docs (e.g. here) that outputPath isn't guaranteed to be a string.

[davidysoards]

@igelstorm you're welcome! glad it helped someone.

[pdehaan]

I think the docs page is at https://github.com/11ty/11ty-website/blob/master/docs/config.md, if somebody want to create a Pull request for this.

[igelstorm]

I have opened a PR to fix the minification example and clarify this behaviour in a few other places in the docs: 11ty/docs#991

Comments welcome from anyone who encountered this issue about whether these changes would've been enough to help them at the time!

[SergeyRe]

My temporary and not smart solution for such case with AMP-plugin is to not use false value for permalink and generate empty page with no collision for plugin

---js
{
  eleventyComputed:{
  permalink: data=>{return (data.graphql.length>1 ? "index.html" : "empty")}  
  }
}
---

{% if permalink!="empty" %}

{% endif %}

[zachleat]

Slightly altering this to be an enhancement queue to add support for filtering by outputPath. See also the preprocessor API (that allows filtering by template syntax).

eleventyConfig.addPreprocessor("drafts", "njk,md,liquid", (data, content) => { //…

eleventyConfig.addTransform("transform-name", async function (content) { //…

Might look like adding an optional second argument (or maybe a third options object argument):

eleventyConfig.addTransform("transform-name", "html", async function (content) { //…
eleventyConfig.addTransform("transform-name", async function (content) {}, { extensions: "html" });