import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
/**
* Vite configuration for building the Web Component as an IIFE bundle
*
* This builds src/wc.ts into an IIFE (Immediately Invoked Function Expression)
* that auto-executes when loaded via script tag, ensuring customElements.define() runs.
*
* Usage:
* <script src="path/to/ragstack-chat.js"></script>
* <ragstack-chat conversation-id="my-chat"></ragstack-chat>
*/
export default defineConfig({
plugins: [react()],
define: {
// Replace Node.js globals with browser-compatible values
'process.env.NODE_ENV': JSON.stringify('production'),
'process.env': '{}',
'global': 'globalThis',
// SAM GraphQL API configuration (injected from environment variables)
'SAM_GRAPHQL_ENDPOINT': JSON.stringify(process.env.SAM_GRAPHQL_ENDPOINT || ''),
'SAM_GRAPHQL_API_KEY': JSON.stringify(process.env.SAM_GRAPHQL_API_KEY || ''),
},
esbuild: {
// Strip console.log and debugger in production builds
drop: ['console', 'debugger'],
},
build: {
lib: {
entry: path.resolve(__dirname, 'src/wc.ts'),
name: 'RagStackChat',
fileName: (format) => `wc.${format === 'es' ? 'esm.' : ''}js`,
formats: ['iife', 'es'],
},
cssCodeSplit: false, // Inline all CSS into the JS bundle
rollupOptions: {
output: [
// IIFE format for <script> tag usage (auto-executes)
{
format: 'iife',
name: 'RagStackChat',
// Don't externalize dependencies - bundle everything for standalone use
inlineDynamicImports: true,
},
// ES Module format for npm imports
{
format: 'es',
},
],
// Bundle all dependencies (React, Amplify, etc.) for standalone IIFE
external: [],
},
},
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
css: {
modules: {
localsConvention: 'camelCase', // Convert CSS class names to camelCase for JS
},
},
});
