search

11ty / eleventy-plugin-vite

A plugin to use Vite with Eleventy
135 stars 10 forks source link

For-free passthrough copy on the public directory not working as expected #13

Closed matthiasott closed 1 year ago

matthiasott commented 2 years ago

I tested the recent implementation of the for-free passthrough copy on Vite’s publicdirectory and I think it is not working correctly yet. But feel free to correct me if I’m missing something! 😅

I have – more or less – the following project structure:

.
├── public/
│   ├── assets/
│   │   └── fonts/
│   │       ├── webfontA.woff2
│   │       ├── webfontB.woff2
│   │       └── webfontC.woff2
│   └── site.webmanifest
├── src/
│   ├── _data/
│   ├── _includes/
│   ├── assets/
│   ├── layouts/
│   ├── posts/
│   ├── 404.md
│   ├── feed.xml.njk
│   ├── index.njk
│   ├── robots.txt.njk
│   └── sitemap.xml.njk
└── …

There are a few static assets in the public directory that should ultimately just be copied over to the output directory (_site). Then, I also have a few files in the srcfolder which Eleventy should process first (like feed.xml, robots.txt, and sitemap.xml) and which are output to /public/filename via the permalink front matter option. The idea is that when Vite runs, those files are already "static" because Eleventy is done adding e.g. all entries to feed.xml.

When I run a build, Eleventy with eleventy-plugin-vite generates the following .11ty-vite temp folder structure:

.
├── .11ty-vite/
│   ├── assets/
│   ├── posts/
│   ├── public/
│   │   ├── feed.xml
│   │   ├── robots.txt
│   │   └── sitemap.xml
│   ├── 404.md
│   ├── index.html
│   ├── site.webmanifest
│   ├── webfontA.woff2
│   ├── webfontB.woff2
│   └── webfontC.woff2
└── …

The feed, robots.txt, and sitemap are successfully output into the .11ty-vite/public folder, but all static assets from the original public folder in the project root are copied to the root of the .11ty-vite temp directory. Consequently, when the Vite build runs, it removes all those static assets like web fonts or the site.webmanifest file.

It seems like this happens because of line 21 in .eleventy.js of eleventy-plugin-vite:

passthroughCopyObject[`${publicDir}/**`] = "/"

If I change line 22 to

eleventyConfig.addPassthroughCopy(`${publicDir}/**`);

it works as expected and all static files are copied to their respective folders inside the .11ty-vite/public folder.

.
├── .11ty-vite/
│   ├── assets/
│   ├── posts/
│   ├── public/
│   │   ├── assets/
│   │   │   └── fonts/
│   │   │       ├── webfontA.woff2
│   │   │       ├── webfontB.woff2
│   │   │       └── webfontC.woff2
│   │   ├── feed.xml
│   │   ├── robots.txt
│   │   ├── site.webmanifest
│   │   └── sitemap.xml
│   ├── 404.md
│   └── index.html
└── …

And when the Vite build runs, it now creates the correct folder structure with all static files and assets copied to the root of the output directory:

.
├── _site/
│   ├── assets/
│   │   ├── css/
│   │   ├── fonts/
│   │   │   ├── webfontA.woff2
│   │   │   ├── webfontB.woff2
│   │   │   └── webfontC.woff2
│   │   └── js/
│   ├── posts/
│   ├── 404.md
│   ├── feed.xml
│   ├── index.html
│   ├── robots.txt
│   ├── site.webmanifest
│   └── sitemap.xml
└── …
…

I’m not sure, however, whether this would only solve the issue for a build and not for --watch or --serve.

zachleat commented 1 year ago

I confirmed this one! Workaround is to use the escape hatch to re-enable the previous behavior. We may end up doing this in the plugin itself.

module.exports = function(eleventyConfig) {
  eleventyConfig.setServerPassthroughCopyBehavior("copy");
};

Docs: https://www.11ty.dev/docs/copy/#passthrough-during-serve

zachleat commented 1 year ago

Core 2.0.0-beta.1 disabled the emulated passthrough copy feature by default https://www.11ty.dev/docs/copy/#emulate-passthrough-copy-during-serve so this should work as is with the latest core version!