✨ feat: support to use pglite as client db (lobehub#4873)

* ✨ feat: pglite 迁移实现

refactor modal name

pin pglite@0.2.13

add serverExternalPackages for pglite

fix tests

update model

remove migration

back previous test file

* 💚 build: fix build with ReactScan

* clean

* refactor with isDBinit

* fix test

next.config.mjs

@@ -6,6 +6,7 @@ import ReactComponentName from 'react-scan/react-component-name/webpack';
 const isProd = process.env.NODE_ENV === 'production';
 const buildWithDocker = process.env.DOCKER === 'true';
 const enableReactScan = !!process.env.REACT_SCAN_MONITOR_API_KEY;
+const isUsePglite = process.env.NEXT_PUBLIC_CLIENT_DB === 'pglite';
 
 // if you need to proxy the api endpoint to remote server
 const API_PROXY_ENDPOINT = process.env.API_PROXY_ENDPOINT || '';
@@ -26,6 +27,7 @@ const nextConfig = {
       'gpt-tokenizer',
       'chroma-js',
     ],
+    serverComponentsExternalPackages: ['@electric-sql/pglite'],
     webVitalsAttribution: ['CLS', 'LCP'],
   },
 
@@ -180,7 +182,8 @@ const nextConfig = {
       layers: true,
     };
 
-    if (enableReactScan) {
+    // 开启该插件会导致 pglite 的 fs bundler 被改表
+    if (enableReactScan && !isUsePglite) {
       config.plugins.push(ReactComponentName({}));
     }
 

package.json

@@ -32,7 +32,8 @@
     "build-sitemap": "tsx ./scripts/buildSitemapIndex/index.ts",
     "build:analyze": "ANALYZE=true next build",
     "build:docker": "DOCKER=true next build && npm run build-sitemap",
-    "db:generate": "drizzle-kit generate",
+    "db:generate": "drizzle-kit generate && npm run db:generate-client",
+    "db:generate-client": "tsx ./scripts/migrateClientDB/compile-migrations.ts",
     "db:migrate": "MIGRATION_DB=1 tsx ./scripts/migrateServerDB/index.ts",
     "db:push": "drizzle-kit push",
     "db:push-test": "NODE_ENV=test drizzle-kit push",
@@ -117,6 +118,7 @@
     "@clerk/themes": "^2.1.37",
     "@codesandbox/sandpack-react": "^2.19.9",
     "@cyntler/react-doc-viewer": "^1.17.0",
+    "@electric-sql/pglite": "0.2.13",
     "@google/generative-ai": "^0.21.0",
     "@huggingface/inference": "^2.8.1",
     "@icons-pack/react-simple-icons": "9.6.0",

scripts/migrateClientDB/compile-migrations.ts

@@ -0,0 +1,14 @@
+import { readMigrationFiles } from 'drizzle-orm/migrator';
+import { writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+const dbBase = join(__dirname, '../../src/database');
+const migrationsFolder = join(dbBase, './migrations');
+const migrations = readMigrationFiles({ migrationsFolder: migrationsFolder });
+
+writeFileSync(
+  join(dbBase, './client/migrations.json'),
+  JSON.stringify(migrations, null, 2), // null, 2 adds indentation for better readability
+);
+
+console.log('🏁 client migrations.json compiled!');

src/app/(main)/(mobile)/me/(home)/layout.tsx

@@ -1,13 +1,15 @@
 import { PropsWithChildren } from 'react';
 
 import MobileContentLayout from '@/components/server/MobileNavLayout';
+import InitClientDB from '@/features/InitClientDB';
 
 import Header from './features/Header';
 
 const Layout = ({ children }: PropsWithChildren) => {
   return (
     <MobileContentLayout header={<Header />} withNav>
       {children}
+      <InitClientDB />
     </MobileContentLayout>
   );
 };

src/app/(main)/chat/_layout/Desktop/index.tsx

@@ -1,6 +1,7 @@
 import { Flexbox } from 'react-layout-kit';
 
-import Migration from '../../features/Migration';
+import InitClientDB from '@/features/InitClientDB';
+
 import { LayoutProps } from '../type';
 import SessionPanel from './SessionPanel';
 
@@ -18,7 +19,7 @@ const Layout = ({ children, session }: LayoutProps) => {
           {children}
         </Flexbox>
       </Flexbox>
-      <Migration />
+      <InitClientDB bottom={60} />
       {/* ↓ cloud slot ↓ */}
 
       {/* ↑ cloud slot ↑ */}

src/app/(main)/chat/_layout/Mobile.tsx

@@ -1,10 +1,10 @@
 'use client';
 
 import { createStyles } from 'antd-style';
-import { memo } from 'react';
+import { Suspense, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import Migration from '@/app/(main)/chat/features/Migration';
+import InitClientDB from '@/features/InitClientDB';
 import { useQuery } from '@/hooks/useQuery';
 
 import { LayoutProps } from './type';
@@ -39,7 +39,9 @@ const Layout = memo<LayoutProps>(({ children, session }) => {
       >
         {children}
       </Flexbox>
-      <Migration />
+      <Suspense fallback={null}>
+        <InitClientDB bottom={100} />
+      </Suspense>
     </>
   );
 });