/* eslint-disable  import/extensions */
const { default: viteYaml } = require("@modyfi/vite-plugin-yaml");
const { default: react } = require("@vitejs/plugin-react");
const dotenv = require("dotenv");

const { nanoDevelopmentPlugin } = require("./plugins/nanoDevelopment.js");
const { prevalPlugin } = require("./plugins/preval.js");
const { reactGiphyPlugin } = require("./plugins/reactGiphy.js");
const svgr = require("./plugins/svgr.js");
const { virtualizedPlugin } = require("./plugins/virtualized.js");

const postCssConfig = require("../../../../../postcss.config.js");
const { VITE_BABEL_CONFIG } = require("../esbuild/constants.js");
const { config: esbuildConfig } = require("../esbuild/index.js");

dotenv.config({ path: ".env.development" });

const port = process.env.DEVSERVER_PORT || 8000;

const config = {
  assestsInclude: ["**/*.yaml"],
  css: { postcss: postCssConfig },
  plugins: [
    svgr(),
    react({ babel: VITE_BABEL_CONFIG }),
    virtualizedPlugin(),
    reactGiphyPlugin(),
    prevalPlugin(),
    viteYaml(),
    nanoDevelopmentPlugin(),
  ],
  resolve: { extensions: esbuildConfig.resolveExtensions },
  server: { port, origin: `http://localhost:${port}`, cors: true },
  build: {
    manifest: true,
    sourcemap: true,
    cssCodeSplit: false,
    rollupOptions: { input: esbuildConfig.entryPoints },
  },
  define: { ...esbuildConfig.define, global: "{}" },
  root: "app/javascript/packs",
  optimizeDeps: {
    include: ["@bigbinary/neeto-icons/typeface-logos", "zustand/shallow"],
  },
};

module.exports = { config };
