Expose `inputPath` in transforms #789

zachleat · 2019-11-24T03:14:17Z

Linters support an inputPath argument but transforms do not

https://www.11ty.io/docs/config/#transforms
https://www.11ty.io/docs/config/#linters

Requested by @nhoizey https://twitter.com/nhoizey/status/1197932949708165120

The text was updated successfully, but these errors were encountered:

zachleat · 2019-11-24T03:14:24Z

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 👍!

nhoizey · 2019-11-25T12:48:00Z

If anyone needs this, until it is supported I use a little trick:

I put the inputPath in a data-attribute of the article element in the page's generated HTML:

data-input="{{ page.inputPath }}"

I then need to use jsdom (or regexes) to get the value inside the transform, but at least I get the value.

Waiting for a better solution in 11ty/eleventy#789

nhoizey · 2019-12-11T12:44:37Z

Actually, I need both the inputPath and outputPath (even if the doc says "You probably won’t use this" 😅) in the transform's context.

I'm currently passing it from the template:

https://github.com/nhoizey/nicolas-hoizey.com/blob/b0355e14d03b322bd425ed8ec4baa0e968f57081/src/_layouts/default.njk#L10-L11

<body
    …
    data-img-src="{{ page.inputPath | dirname }}/"
    data-img-dist="{{ page.outputPath | dirname }}/"
  >

To the transform:

https://github.com/nhoizey/nicolas-hoizey.com/blob/d01079d81694f23050162ee89ca0f1951c0683ed/src/transforms/cloudinary-transform.js#L44-L50

// Get images src and dist path from attributes on body
// TODO: move to context data
let documentBody = document.querySelector('body');
let srcPath = documentBody.getAttribute('data-img-src');
let distPath = documentBody.getAttribute('data-img-dist');
documentBody.removeAttribute('data-img-src');
documentBody.removeAttribute('data-img-dist');

Snugug · 2020-01-14T21:55:04Z

https://www.npmjs.com/package/eleventy-plugin-local-respimg would benefit greatly from this as well

nhoizey · 2020-03-20T20:15:22Z

I'm still using the trick in #789 (comment)

My situation is the following:

I developed a plugin: eleventy-plugin-images-responsiver. It adds a transform.

NB: Here, I'm not even sure I pass the plugin options as I should, it feels strange using a global variable for that: https://github.com/nhoizey/eleventy-plugin-images-responsiver/blob/master/.eleventy.js

Anyway, this transform calls an imageResponsiver function that comes from another npm module: images-responsiver. This function doesn't need inputPath and outputPath.

But I need to be able to add inputPath and outputPath to the options (here imagesResponsiverOptions) before calling it, because this function calls other hook functions that I define in the plugin options, when adding it in my Eleventy config:

const imagesResponsiver = require('eleventy-plugin-images-responsiver');
const imagesResponsiverConfig = require('./src/_data/images-responsiver-config.js');
eleventyConfig.addPlugin(imagesResponsiver, imagesResponsiverConfig);

The imagesResponsiverConfig object comes from _data/images-responsiver-config.js.

It contains the runBefore and runAfter members, hook functions to run before and after the core of the imageResponsiver function.

In my current case, the runBefore function needs both inputPath and outputPath, and get them from the DOM of the transformed page:

let srcPath = documentBody.getAttribute('data-img-src');
let distPath = documentBody.getAttribute('data-img-dist').replace(/^dist/, '');

If inputPath was available as a parameter to the transform, I could add it to the imagesResponsiverOptions object for these hooks to get it.

NB: I could already do it for outputPath, but I preferred having the same "passage way" for both variables.

Thanks for reading all of this, if you did… 😅

zachleat · 2020-05-10T19:07:59Z

Really sorry, this is getting punted to 1.0.

nhoizey · 2020-05-10T19:31:42Z

@zachleat no problem on my side, I have a work around which can last as long as you need.

zachleat · 2020-05-16T18:33:45Z

The awkward part of this is that the linter and transform arguments are going to be reversed. Hmm.

Snugug · 2020-05-16T19:47:30Z

I think aligning them is a good idea. Given it'll be a breaking change for one of them, doing it either under 0.x or 1.x should be OK given that 0.x public APIs aren't considered stable under Semver (presuming you're keeping strict Semver)

…

On May 16, 2020, at 1:33 PM, Zach Leatherman ***@***.***> wrote: The awkward part of this is that the linter and transform arguments are going to be reversed. Hmm. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

nhoizey · 2020-05-16T21:18:10Z

I agree they should not be reversed for the future, and breaking it right know, before 1.0 (or for it) is better than later.

daKmoR · 2020-05-25T11:42:14Z

imho best would be to have an object for options 🤔

eleventyConfig.addLinter("my-linter", (content, { inputPath, outputPath }) => {});

that way the order doesn't matter and additional info can get added without a breaking change.

PS: in my experience an options object generally better for optional infos

daKmoR · 2020-06-20T11:05:12Z

any way we can help to make this happen? I mean the code change is "trivial" - so what info do we need to proceed?

we now patch it for our use case... but that is of course not a long term solution 😅

TigersWay · 2020-07-26T03:19:21Z

It seems this one is needed in multiple places, breaking change(s) or not!!

gregives · 2020-08-02T09:59:14Z

In a transform, can you not access the inputPath already, via this.inputPath? For example,

eleventyConfig.addTransform('myTransform', function(content, outputPath) {
    console.log(this.inputPath)
})

(Not a long-term solution, I just wondered if this would work fine for now)

TigersWay · 2020-08-04T02:49:24Z

Just to add a little something...

First of all, thanks to @nhoizey for his neat trick,
and then I had to go further, as I have - sometimes - multiple posts in one single page. It means one only inputPath is not so interesting anymore, I went to add that data-path to each article.

daKmoR · 2020-08-05T16:33:08Z

I actually need a different this in the function... but yeah it's now like that

const that = this;
this.elev.config.filters['hook-for-rocket'] = function hook(html, outputPath) {
  const { inputPath } = this;
  return that.doSomething(inputPath);
};

thx for the workaround 🤗

but yeah no workaround would be better 😬 so fixing this would still be nice 👍

nhoizey · 2020-08-11T09:16:34Z

@TigersWay you should thank @gregives instead… 😅

zachleat · 2020-10-30T19:18:27Z

Code is in for this. We’re using this.inputPath and this.outputPath to avoid the argument order consistency problem with linters. We’ll keep support for the existing arguments but transition away from them in the docs.

More importantly, since it seems like y’all are using them here (specifically #789 (comment)): the object key filters is going away in 1.0 and will throw a contextual error message if you use it. It’s been deprecated since Eleventy 0.3.3 😅

Hopefully that workaround won’t be necessary anyway with this fix.

zachleat · 2020-10-30T19:19:39Z

🚢🛳⛴🚀📦

zachleat · 2020-10-30T19:26:51Z

Example of the error messaging:

nhoizey · 2020-10-30T22:01:49Z

That's awesome, thanks a lot Zach! 👍

zachleat added enhancement needs-votes A feature request on the backlog that needs upvotes or downvotes. Remove this label when resolved. labels Nov 24, 2019

zachleat closed this as completed Nov 24, 2019

nhoizey mentioned this issue Nov 25, 2019

Access page data in shortcodes without arguments #741

Closed

nhoizey added a commit to nhoizey/nicolas-hoizey.com that referenced this issue Nov 25, 2019

Get current page source and destination path through the content itself

b20ef78

Waiting for a better solution in 11ty/eleventy#789

nhoizey mentioned this issue Nov 26, 2019

Remove dataset from article nhoizey/nicolas-hoizey.com#156

Open

zachleat added a commit that referenced this issue Nov 26, 2019

Adds skipped test for #789 (transforms and inputPath)

918ff77

zachleat added this to the Eleventy v0.11.0 milestone Mar 25, 2020

theapplegates mentioned this issue Apr 15, 2020

Eleventy:EleventyErrorHandler Problem writing Eleventy templates: +0ms nhoizey/pack11ty#3

Closed

zachleat reopened this May 1, 2020

zachleat modified the milestones: Eleventy v0.11.0, Eleventy v1.0.0 May 10, 2020

pdehaan mentioned this issue May 16, 2020

Transformers do not get passed the inputPath #1191

Closed

daKmoR mentioned this issue May 29, 2020

11tyDevServer and Rollup Build open-wc/open-wc#1657

Merged

Snugug mentioned this issue Jun 22, 2020

[eleventy-plugin-local-respimg] Relative img src chromeos/static-site-scaffold-modules#24

Open

daKmoR mentioned this issue Jul 9, 2020

fix: pass inputPath to transforms #1309

Closed

nhoizey mentioned this issue Jul 20, 2020

Strategies to help developers mitigate breaking changes in 1.0 #1322

Closed

liamfiddler mentioned this issue Jul 29, 2020

Using with plugin that renames final files? liamfiddler/eleventy-plugin-lazyimages#17

Closed

nhoizey mentioned this issue Feb 23, 2023

Add inputPath and outputPath to the options object nhoizey/eleventy-plugin-images-responsiver#6

Open

zachleat closed this as completed in 71f5943 Oct 30, 2020

zachleat added a commit to 11ty/11ty-website that referenced this issue Oct 30, 2020

Docs for 11ty/eleventy#789

6a4026f

zachleat modified the milestones: Planning for Eleventy v1.0.0, Eleventy 1.0.0 Oct 30, 2020

zachleat removed the needs-votes A feature request on the backlog that needs upvotes or downvotes. Remove this label when resolved. label Oct 30, 2020

zachleat mentioned this issue Oct 30, 2020

Show a console warning if a transform returns empty content. #1487

Closed

pdehaan mentioned this issue Mar 28, 2021

Transform input and output path are wrongly documented #1716

Closed

mahnunchik mentioned this issue Dec 9, 2021

Expose page data to filters, shortcodes, and transforms #2135

Closed

zachleat added a commit that referenced this issue Dec 14, 2022

Re-enable a skipped test for #789

47729b1

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Expose `inputPath` in transforms #789

Expose `inputPath` in transforms #789

zachleat commented Nov 24, 2019

zachleat commented Nov 24, 2019

nhoizey commented Nov 25, 2019

nhoizey commented Dec 11, 2019

Snugug commented Jan 14, 2020

nhoizey commented Mar 20, 2020

zachleat commented May 10, 2020

nhoizey commented May 10, 2020

zachleat commented May 16, 2020

Snugug commented May 16, 2020 via email

nhoizey commented May 16, 2020

daKmoR commented May 25, 2020

daKmoR commented Jun 20, 2020

TigersWay commented Jul 26, 2020

gregives commented Aug 2, 2020 •

edited

Loading

TigersWay commented Aug 4, 2020

daKmoR commented Aug 5, 2020 •

edited

Loading

nhoizey commented Aug 11, 2020

zachleat commented Oct 30, 2020

zachleat commented Oct 30, 2020

zachleat commented Oct 30, 2020

nhoizey commented Oct 30, 2020

Expose inputPath in transforms #789

Expose inputPath in transforms #789

Comments

zachleat commented Nov 24, 2019

zachleat commented Nov 24, 2019

nhoizey commented Nov 25, 2019

nhoizey commented Dec 11, 2019

Snugug commented Jan 14, 2020

nhoizey commented Mar 20, 2020

zachleat commented May 10, 2020

nhoizey commented May 10, 2020

zachleat commented May 16, 2020

Snugug commented May 16, 2020 via email

nhoizey commented May 16, 2020

daKmoR commented May 25, 2020

daKmoR commented Jun 20, 2020

TigersWay commented Jul 26, 2020

gregives commented Aug 2, 2020 • edited Loading

TigersWay commented Aug 4, 2020

daKmoR commented Aug 5, 2020 • edited Loading

nhoizey commented Aug 11, 2020

zachleat commented Oct 30, 2020

zachleat commented Oct 30, 2020

zachleat commented Oct 30, 2020

nhoizey commented Oct 30, 2020

Expose `inputPath` in transforms #789

Expose `inputPath` in transforms #789

gregives commented Aug 2, 2020 •

edited

Loading

daKmoR commented Aug 5, 2020 •

edited

Loading