How to get the output directory from inside a plugin?

[rezaalavi]

I am writing a plugin that generates files that need to be written to the output directory.
I can't find any method to get the full path to the output directory. Specifically, if the path is passed with --output argument to elements.

Can someone please point me in the right direction?

Thanks.

[pdehaan]

I found a dir in the eleventyConfig object from within my fake plugin. But that only seems to return whatever I set in my root .eleventy.js config file, and doesn't account for --output being set via the command line.

I also found #2320 (comment) from @zachleat, which says:

I think there is also a eleventy.directories event that isn’t on the docs but you shouldn’t need that when eleventy.before has the same info.

I'm testing in @11ty/eleventy@canary (v2.0.0-canary.12) per https://www.11ty.dev/docs/events/#event-arguments "Coming soon in v2.0.0" comment; but am seeing subtle differences between the [undocumented] eleventy.directories and eleventy.before results:

> eleventy --output=bananasinpajamas

plugin: { input: 'src', includes: '_includes', data: '_data', output: 'www' }
{
  'eleventy.directories': {
    input: 'src',
    data: 'src/_data',
    includes: 'src/_includes',
    layouts: undefined,
    output: 'bananasinpajamas'
  }
}
{
  'eleventy.before': {
    inputDir: 'src',
    dir: {
      input: 'src',
      includes: '_includes',
      data: '_data',
      output: 'www'
    },
    runMode: 'build',
    outputMode: 'fs'
  }
}
[11ty] Writing bananasinpajamas/index.html from ./src/index.njk
[11ty] Wrote 1 file in 0.05 seconds (v2.0.0-canary.12)

Where my custom plugin is:

module.exports = function (eleventyConfig, pluginConfig={}) {
  console.log(`plugin: ${inspect(eleventyConfig.dir)}`);

  eleventyConfig.on('eleventy.before', async (data) => {
    console.log({"eleventy.before": data});
  });

  eleventyConfig.on('eleventy.directories', async (data) => {
    console.log({"eleventy.directories": data});
  });
};

and my .eleventy.js looks like this:

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(require("./plugin"));
  eleventyConfig.addFilter("inspect", require("node:util").inspect);

  return {
    dir: {
      input: "src",
      output: "www",
    }
  };
};

So, you can see that my .eleventy.js config file sets the {input: "src", output: "www"} directories, which I then override the output directory by calling eleventy --output=bananasinpajamas.
The eleventy.directories event correctly sets my output directory to 'bananasinpajamas'.
But the eleventy.before event seems to still use the output value of "www" from the .eleventy.js config file, ignoring the --output directory from the command line.

I still can't seem to find an easier way to get the fully resolved output directory from within a plugin, since using the eleventy.directories event might not be optimal.

[KiwiKilian]

Would be happy to do so, but I'm not sure which part is the bug. The eleventyConfig (instance of UserConfig) having the dir object or not representing --output set via the command line.

---

For my problem it seems to work fine to retrieve the dir from eleventy.directories just like the templateConfig in the RenderPlugin. Looks like this:

module.exports = function (eleventyConfig, pluginConfig = {}) {
  let directoriesConfig;
  eleventyConfig.on("eleventy.directories", ( dir ) => {
    directoriesConfig = dir;
  });

  let templateConfig;
  eleventyConfig.on("eleventy.config", (config) => {
    templateConfig = config;
  });

  eleventyConfig.addAsyncShortcode("myShortcode", async () => {
    // Do stuff with directoriesConfig and templateConfig
  });
};

[zachleat]

In a plugin file I would expect this to work, as we run plugins in a second stage after the initial config callback function has completed:

module.exports = function (eleventyConfig, pluginConfig = {}) {
  let directoriesConfig = eleventyConfig.dir;
};

If the above does not work, it is a bug!
If --output is not represented correctly in the eleventyConfig.dir I would consider that to also be a bug.

(Thank you!)

[pdehaan]

IIRC, the first one worked, but second one didn't.

npx @11ty/eleventy --input=pasta --output=noodles
[CONFIG] undefined
[PLUGIN] { input: 'src' }
[11ty] Writing noodles/index.html from ./pasta/index.njk
[11ty] Wrote 1 file in 0.03 seconds (v1.0.2)

Where my .eleventy.js is:

const { inspect } = require("node:util");

/**
 * @param {import("@11ty/eleventy/src/UserConfig")} eleventyConfig
 * @returns {ReturnType<import("@11ty/eleventy/src/defaultConfig")>}
 */
module.exports = function (eleventyConfig) {
  console.log("[CONFIG]", inspect(eleventyConfig.dir, { sorted: true }));

  eleventyConfig.addPlugin(require("./plugins/custom"));

  return {
    dir: {
      input: "src",
      // output: "www",
    }
  };
};

And my ./plugins/custom.js is:

const { inspect } = require("node:util");

module.exports = (eleventyConfig, pluginConfig) => {
  console.log("[PLUGIN]", inspect(eleventyConfig.dir, { sorted: true }));
  return {};
};

And my src/index.njk and pasta.njk are blank files that exist.

---

UPDATE: Pushed my sample repo to https://github.com/pdehaan/11ty-config-plugins.

npm run

Lifecycle scripts included in [email protected]:
  test
    echo "Error: no test specified" && exit 1

available via `npm run-script`:
  build
    eleventy
  build:noodles
    eleventy --input=pasta --output=noodles
  build:pasta
    eleventy --input=./pasta

npm run build:noodles

> [email protected] build:noodles
> eleventy --input=pasta --output=noodles

[CONFIG] undefined
[PLUGIN] { input: 'src' }
[11ty] Writing noodles/index.html from ./pasta/index.njk
[11ty] Wrote 1 file in 0.03 seconds (v1.0.2)

I think it should resolve the input and output directories from the command line (and possibly return the defaults if they are not specified; like output: "_site", etc).

[pdehaan]

@zachleat Filed as #2729 for your bug tracking pleasure.

[zachleat]

Thank you @pdehaan !!