import { defineConfig, type Plugin } from 'vite' import react from '@vitejs/plugin-react' import { resolve } from 'path' import { readFileSync } from 'fs' import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'; /** * Custom plugin to embed CSS content into the JS bundle for runtime injection. * This allows the package to work with any bundler (Vite, webpack, Next.js, etc.) */ function injectCssPlugin(): Plugin { let cssContent = ''; return { name: 'inject-css-content', enforce: 'post', generateBundle(_, bundle) { // Find the generated CSS file for (const [fileName, chunk] of Object.entries(bundle)) { if (fileName.endsWith('.css') && chunk.type === 'asset') { cssContent = chunk.source as string; break; } } // Replace placeholder in JS files with actual CSS content for (const [fileName, chunk] of Object.entries(bundle)) { if ((fileName.endsWith('.js') || fileName.endsWith('.cjs')) && chunk.type === 'chunk') { // Escape the CSS for embedding in JS string const escapedCss = JSON.stringify(cssContent); chunk.code = chunk.code.replace( /__MEMORY_GRAPH_CSS__/g, escapedCss ); } } } }; } // https://vitejs.dev/config/ export default defineConfig({ plugins: [react(), vanillaExtractPlugin(), injectCssPlugin()], build: { lib: { entry: resolve(__dirname, 'src/index.tsx'), name: 'MemoryGraph', formats: ['es', 'cjs'], fileName: (format) => { if (format === 'es') return 'memory-graph.js' if (format === 'cjs') return 'memory-graph.cjs' return 'memory-graph.js' } }, rollupOptions: { // Externalize only peer dependencies (React) external: ['react', 'react-dom', 'react/jsx-runtime'], output: { // Provide global variables for UMD build (if needed later) globals: { react: 'React', 'react-dom': 'ReactDOM', 'react/jsx-runtime': 'react/jsx-runtime' }, // Preserve CSS as separate file (for manual import fallback) assetFileNames: (assetInfo) => { // Vanilla-extract generates index.css, rename to memory-graph.css if (assetInfo.name === 'index.css' || assetInfo.name === 'style.css') { return 'memory-graph.css' } return assetInfo.name || 'asset' }, // Don't preserve modules - bundle everything except externals preserveModules: false, } }, // Ensure CSS is extracted cssCodeSplit: false, // Generate sourcemaps for debugging sourcemap: true, // Optimize deps minify: 'esbuild', target: 'esnext' }, resolve: { alias: { '@': resolve(__dirname, './src') } } })