Don’t require passthroughCopy for vite assets

[zachleat]

Automatically add a bunch-o-static asset extensions to passthrough copy so that folks don’t have to do it manually. Feedback from https://twitter.com/the_ross_man/status/1504888464076120074

[mattrossman]

I noticed that the Vite postprocessing step already discards unused files from the 11ty build. A (maybe silly) idea to consider is having this plugin copy the whole input directory (excluding files that 11ty already ignores) and let Vite figure out what to do with those resources.

For instance:

// .eleventy.js
const EleventyVitePlugin = require("@11ty/eleventy-plugin-vite")

module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("src")
  eleventyConfig.addPlugin(EleventyVitePlugin)
  return {
    dir: {
      input: "src",
    },
  }
}

Given this config, things behave more like I'd expect from Vite. I can have an HTML template that references co-located assets for Vite to process, and files in src/public are automatically treated as static assets by Vite.

I imagine this plugin could do something like this internally, albeit with consideration for excluding eleventyConfig.ignores and stuff like _includes so that it doesn't try to copy over node_modules when using the default input directory.

[zachleat]

Just a small note that this behavior has likely changed with https://www.11ty.dev/docs/copy/#passthrough-during-serve

Relevant: #9

[shoogstoel]

Is this still an open issue? I am currently struggling with the basis set-up of my project, because I don't want to add pass trough copies for all the assets I wanna pass to Vite. What's the best practice here?

[asbjornu]

I'm struggling with a related problem right now. Before adding the @11ty/eleventy-plugin-vite plugin, Eleventy copies the folders I've configured with addPassthroughCopy() as expected, but once I add the Vite plugin, most passthrough copy folders vanish from the output folder. I'm not well-versed enough in either Eleventy nor Vite to know how to fix this.

[KiwiKilian]

@asbjornu files that will not be touched by Vite should be in the public dir as soon as the Vite process starts. Place static assets you don't actually import/reference in your HTML/CSS/JS in a public/** dir in your input and add a addPassthrougCopy('public') to your eleventy config.

Assets that will be touched can be placed anywhere but must also have an addPassthrougCopy. For example if all your CSS/JS/Images reside within an assets directory, one would add addPassthrougCopy('assets'). Those can be referenced in the templates like this /assets/path-to-your-asset.xyz.

[asbjornu]

@KiwiKilian, yep – that fixed it. 🎉 Thanks! 🙏🏼