diff options
Diffstat (limited to 'packages/memory-graph/vite.config.ts')
| -rw-r--r-- | packages/memory-graph/vite.config.ts | 157 |
1 files changed, 80 insertions, 77 deletions
diff --git a/packages/memory-graph/vite.config.ts b/packages/memory-graph/vite.config.ts index f6055602..923952d4 100644 --- a/packages/memory-graph/vite.config.ts +++ b/packages/memory-graph/vite.config.ts @@ -1,90 +1,93 @@ -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'; +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 = ''; + 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; - } - } + 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 - ); - } - } - } - }; + // 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') - } - } + 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"), + }, + }, }) |