Eleventy plugin vite: how to properly emit script updates

[sombriks]

Hello all,

i am experimenting with https://www.11ty.dev/docs/server-vite/ and looking for the correct setup to delegate to vite all script bundling, maybe css bundling too, at the same time it correctly emits the entry point setup in my 11ty polyglot templates.

i want to keep layouts where vite bundles get properly injected while i benefit of all the good stuff that eleventy delivers.

this is my current package.json:

{
  "type": "module",
  "scripts": {
    "dev": "eleventy --serve --incremental",
    "build": "eleventy"
  },
  "devDependencies": {
    "@11ty/eleventy": "^3.1.5",
    "@11ty/eleventy-plugin-vite": "^8.0.0-alpha.2"
  }
}

my .eleventy.js follows:

import EleventyVitePlugin from "@11ty/eleventy-plugin-vite";

/**
 * @param {import("@11ty/eleventy/UserConfig").default} config
 */
export default function (config) {
  // basic directories
  config.setInputDirectory('./src/pages');
  config.setLayoutsDirectory("../components");
  config.setLayoutsDirectory("../layouts");
  config.setOutputDirectory('./dist');

  config.addPlugin(EleventyVitePlugin, {
    viteOptions: {
      server: {
        mode: "development",
        middlewareMode: true,
        watch: ["./src/scripts/**"] // not working
      },
      build: {
        rolldownOptions: {
          input: {
            main: "./src/scripts/index.js"
          },
          output: {
            entryFileNames: "assets/[name].js" // not refreshing
          },
        }
      }
    }
  });
}

The issue i am facing is, whenever i change a javascript file which vite is supposed to bundle, nothing happens.

And also, if i don't set explicitly the output name, i am unable to inject the emited file name in my eleventy layouts.

So, two key questions:

1- how do i make my layouts aware of emitted bundles?
2- How to trigger hot reload for scripts or css or something, not only for my templates?

Any guidance is welcome!

[zachleat]

You might have better luck filing an issue on the Vite plugin repo directly! https://github.com/11ty/eleventy-plugin-vite