import { rm } from "node:fs/promises";

import process from "node:process";

import autoprefixer from "autoprefixer";

import { build, context } from "esbuild";

import { htmlPlugin } from "esbuild-html-plugin";

import stylePlugin from "esbuild-style-plugin";

import tailwindcss from "tailwindcss";

const outdir = "dist";

const nodeEnv = process.env["NODE_ENV"] ?? "production";

const dev = nodeEnv !== "production";

const style = stylePlugin({ postcss: { plugins: [tailwindcss, autoprefixer] } });

const html = htmlPlugin({

outfile: "index.html",

language: "en",

createHeadElements: (outputUrls) => [

],

createBodyElements: () => [`<main id="app"></main>`],

});

console.log(`Building in ${dev ? "DEV" : "PROD"} mode`);

/** @type {import('esbuild').BuildOptions} */

const buildOptions = {

bundle: true,

entryNames: "[dir]/[name]-[hash]",

entryPoints: [{ out: "client", in: "src/client.tsx" }],

metafile: true,

minify: !dev,

outdir,

plugins: [style, html],

publicPath: "/",

sourcemap: dev,

target: "es2022",

treeShaking: true,

tsconfig: "tsconfig.json",

};

if (process.argv.includes("--watch")) {

const ctx = await context(buildOptions);

await ctx.watch();

} else {

await rm(outdir, { recursive: true, force: true });

await build(buildOptions);

}