runtime styles injection + let user proxy requests for data in graph package + new playground (#588)proxy-graph-requests

1 files changed, 38 insertions, 4 deletions

diff --git a/packages/memory-graph/vite.config.ts b/packages/memory-graph/vite.config.ts
index 3098067f..f6055602 100644
--- a/packages/memory-graph/vite.config.ts
+++ b/packages/memory-graph/vite.config.ts
@@ -1,12 +1,46 @@
-import { defineConfig } from 'vite'
+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 { libInjectCss } from 'vite-plugin-lib-inject-css';
+
+/**
+ * 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(), libInjectCss()],
+  plugins: [react(), vanillaExtractPlugin(), injectCssPlugin()],
   build: {
     lib: {
       entry: resolve(__dirname, 'src/index.tsx'),
@@ -28,7 +62,7 @@ export default defineConfig({
           'react-dom': 'ReactDOM',
           'react/jsx-runtime': 'react/jsx-runtime'
         },
-        // Preserve CSS as separate file
+        // 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') {