Ability to dynamically generate files, from other files.

I'm always frustrated when I’m having a super fun time using 11ty and thinking “wow. I love 11ty so much. Everything feels painless”, but then the problem hits.

I’m very lazy and like to avoid writing files to disk unless I really have to. On multiple occasions I’ve found I have a file, let’s say foo.html, and I’d like some sidecar files- maybe foo.css, foo.png and so on. I’d like these files to be generated magically with zero effort on my part, but I’d like to be able to back reference them within my foo.html file under the assumption that they exist.

After a conversation with @zachleat on Twitter we settled on the idea that there could perhaps be an event triggered when Eleventy discovers a file. I think I’d extend that to also being able to emit files from the config, which then also get ingested like a regular file as part of the build.

Describe the solution you'd like

My dream api would be something like:

module.exports = eleventy => {
  eleventy.templateFound(file => {
    const altFile = file.replace('.html', '.png')
    if(path.extname(file) === '.html' && !fs.existsSync(altFile)) {
      eleventy.emitTemplate(altFile, makeData())
    }
  })
}

This way when a template file was discovered during the collection of files, I could emit a newly derived file and add it to the “stack” of files to be built; these new files would go through the regular loading/compiling step (so I could auto generate md files for example). This, I think, could also be useful for generating files based off of data sources, that can still be processed using the template languages like nunjucks:

const locations = require('./data.json')
module.exports = eleventy => {
   for (const location of locations) {
    eleventy.emitTemplate(`locations/${location.name}.md`, `---
tags: ['location']
---

# ${location.name}
…
)
    }
  })
}

Some other example use cases:

Placeholder files collected from other templates, for example having an authors page generated just by the author field in a collection of blog posts.
Using this for compiling files, for example when a .TS file is found, output both the .TS file in _site, but also output a .JS file.
Creating site directories like index pages, or sitemap files automatically by collecting all files found.

Describe alternatives you've considered

Some other alternatives were considered in the twitter conversation, such as using the after event, or using a serverless function.

11ty / eleventy

Ability to dynamically generate files, from other files. #2573