[Q] How to preserve output build directory structure? (this should be easy to configure? maybe with a plugin?)

[YuriusuDev]

How to preserve the freaking output build directory structure?

import {cwd} from "node:process";
import {resolve} from "node:path";
import {fileURLToPath} from "node:url";
import {defineConfig, build, preview} from "vite";

const directory = fileURLToPath(new URL(cwd(), import.meta.url));

const config = defineConfig({
  plugins: [
  ],
  root: resolve(directory, "source"),
  base: "./",
  envDir: resolve(directory),
  envPrefix: "ENV",
  publicDir: false,
  css: {
    devSourcemap: false
  },
  json: {
    stringify: true
  },
  build: {
    target: "esnext",
    minify: "esbuild",
    outDir: resolve(directory, "output"),
    assetsDir: "",
    assetsInlineLimit: 0,
    emptyOutDir: true,
    copyPublicDir: false,
    sourcemap: false,
    cssCodeSplit: true,
    watch: false,
    write: true,
    modulePreload: false,
    rollupOptions: {
    }
  },
  server: {
    host: "0.0.0.0"
  },
  preview: {
    host: "0.0.0.0"
  }
});

await build(config);
const server = await preview(config);
server.printUrls();
server.bindCLIShortcuts({print: true});

Where the source/ directory

source/
├── assets/
│   └── fonts/
│       └── font.ttf
├── index.html
├── script.js
└── styles.js

And the output/ directory should be the same on build:

output/
├── assets/
│   └── fonts/
│       └── font.ttf
├── index.html
├── script.js
└── styles.js

[YuriusuDev]

I don't wanna fight against Rollup's configuration anymore. so I ended up switching to ESBuild-only with Solid-JS:

import {readFile} from "node:fs/promises";
import {build, context} from "esbuild";
import {transformAsync} from "@babel/core";
import solid from "babel-preset-solid";

const config = {
  build: {
    plugins: [
      {
        name: "custom-solid-js-plugin",
        setup: ({onLoad}) => {
          onLoad({filter: /\.jsx$/}, async ({path}) => {
            const jsx = await readFile(path, {encoding: "utf-8"});
            const {code} = await transformAsync(jsx, {presets: [solid]});
            return {
              contents: code,
              loader: "js"
            };
          });
        }
      }
    ],
    entryPoints: [
      "source/*"
    ],
    loader: {
      ".webmanifest": "copy",
      ".json": "copy",
      ".jsx": "jsx",
      ".js": "js",
      ".css": "css",
      ".html": "copy",
      ".svg": "copy",
      ".png": "copy",
      ".ttf": "copy"
    },
    assetNames: "[dir]/[name]",
    entryNames: "[dir]/[name]",
    outdir: "public",
    publicPath: "./",
    target: "esnext",
    format: "esm",
    bundle: true,
    treeShaking: true,
    splitting: false,
    minify: true,
    minifyIdentifiers: true,
    minifyWhitespace: true,
    minifySyntax: true,
    sourcemap: false,
    write: true
  },
  serve: {
    host: "0.0.0.0",
    port: 8000,
    servedir: "public",
    fallback: "public/index.html"
  }
};