supermemory/packages/memory-graph/vite.config.ts

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')
    }
  }
})