1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
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')
}
}
})
|