feat: update client package configuration and dependencies

- Added new dependencies for Rollup plugins and updated existing ones in package.json and package-lock.json. - Introduced a new Rollup configuration file for building the client package. - Refactored build scripts to include a dedicated build command for the client. - Updated TypeScript configuration for improved module resolution and type declaration output. - Integrated a Toast component from the client package into the main App component.
2025-12-25 12:48:53 +01:00 · 2025-07-13 08:35:49 -04:00 · 2025-07-13 08:35:49 -04:00 · f8738b207c
commit f8738b207c
parent 6ea1d5eab2
8 changed files with 175 additions and 72 deletions
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@ -1,5 +1,6 @@
 import { RecoilRoot } from 'recoil';
 import { DndProvider } from 'react-dnd';
+import { Toast } from '@librechat/client';
 import { RouterProvider } from 'react-router-dom';
 import * as RadixToast from '@radix-ui/react-toast';
 import { HTML5Backend } from 'react-dnd-html5-backend';
@ -7,7 +8,6 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { QueryClient, QueryClientProvider, QueryCache } from '@tanstack/react-query';
 import { ScreenshotProvider, ThemeProvider, useApiErrorBoundary } from './hooks';
 import { ToastProvider } from './Providers';
-import Toast from './components/ui/Toast';
 import { LiveAnnouncer } from '~/a11y';
 import { router } from './routes';

--- a/package-lock.json
+++ b/package-lock.json
@ -48801,11 +48801,17 @@
      "name": "@librechat/client",
      "version": "0.1.0",
      "devDependencies": {
+        "@rollup/plugin-alias": "^5.1.0",
+        "@rollup/plugin-commonjs": "^25.0.2",
        "@rollup/plugin-node-resolve": "^15.0.0",
-        "@rollup/plugin-typescript": "^11.0.0",
+        "@rollup/plugin-replace": "^5.0.5",
+        "@rollup/plugin-terser": "^0.4.4",
        "@types/react": "^18.0.0",
        "@types/react-dom": "^18.0.0",
+        "rimraf": "^5.0.1",
        "rollup": "^4.0.0",
+        "rollup-plugin-peer-deps-external": "^2.2.4",
+        "rollup-plugin-typescript2": "^0.35.0",
        "typescript": "^5.0.0"
      },
      "peerDependencies": {
@ -48813,6 +48819,7 @@
        "@headlessui/react": "^2.2.4",
        "@radix-ui/react-separator": "^1.0.0",
        "@radix-ui/react-slot": "^1.0.0",
+        "@radix-ui/react-toast": "^1.0.0",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.0.0",
        "framer-motion": "^10.0.0",
@ -48820,34 +48827,87 @@
        "react": "^18.0.0",
        "react-dom": "^18.0.0",
        "react-resizable-panels": "^3.0.3",
+        "recoil": "^0.7.7",
        "tailwind-merge": "^1.14.0"
      }
    },
-    "packages/client/node_modules/@rollup/plugin-typescript": {
-      "version": "11.1.6",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-11.1.6.tgz",
-      "integrity": "sha512-R92yOmIACgYdJ7dJ97p4K69I8gg6IEHt8M7dUBxN3W6nrO8uUxX5ixl0yU/N3aZTi8WhPuICvOHXQvF6FaykAA==",
+    "packages/client/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
-        "@rollup/pluginutils": "^5.1.0",
-        "resolve": "^1.22.1"
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "packages/client/node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "packages/client/node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "packages/client/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
      },
      "engines": {
-        "node": ">=14.0.0"
+        "node": ">=16 || 14 >=14.17"
      },
-      "peerDependencies": {
-        "rollup": "^2.14.0||^3.0.0||^4.0.0",
-        "tslib": "*",
-        "typescript": ">=3.7.0"
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "packages/client/node_modules/rimraf": {
+      "version": "5.0.10",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.10.tgz",
+      "integrity": "sha512-l0OE8wL34P4nJH/H2ffoaniAokM2qSmrtXHmlpvYr5AVVX8msAyW0l8NVJFDxlSK4u3Uh/f41cQheDVdnYijwQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "glob": "^10.3.7"
      },
-      "peerDependenciesMeta": {
-        "rollup": {
-          "optional": true
-        },
-        "tslib": {
-          "optional": true
-        }
+      "bin": {
+        "rimraf": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
      }
    },
    "packages/data-provider": {
--- a/package.json
+++ b/package.json
@ -40,7 +40,8 @@
    "build:data-provider": "cd packages/data-provider && npm run build",
    "build:api": "cd packages/api && npm run build",
    "build:data-schemas": "cd packages/data-schemas && npm run build",
-    "frontend": "npm run build:data-provider && npm run build:data-schemas && npm run build:api && cd client && npm run build",
+    "build:client": "cd packages/client && npm run build",
+    "frontend": "npm run build:data-provider && npm run build:data-schemas && npm run build:api && npm run build:client && cd client && npm run build",
    "frontend:ci": "npm run build:data-provider && cd client && npm run build:ci",
    "frontend:dev": "cd client && npm run dev",
    "e2e": "playwright test --config=e2e/playwright.config.local.ts",
--- a/packages/client/package.json
+++ b/packages/client/package.json
@ -1,27 +1,32 @@
 {
  "name": "@librechat/client",
  "version": "0.1.0",
-  "type": "module",
+  "description": "React components for LibreChat",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "types": "dist/types/index.d.ts",
  "exports": {
    ".": {
-      "types": "./dist/index.d.ts",
-      "module": "./dist/index.js"
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.js",
+      "types": "./dist/types/index.d.ts"
    }
  },
-  "types": "./dist/index.d.ts",
  "files": [
    "dist"
  ],
  "scripts": {
-    "build": "rollup -c rollup.config.mjs",
-    "dev": "rollup -c rollup.config.mjs -w",
-    "clean": "rm -rf dist"
+    "clean": "rimraf dist",
+    "build": "npm run clean && rollup -c --bundleConfigAsCjs",
+    "build:watch": "rollup -c -w --bundleConfigAsCjs",
+    "dev": "rollup -c -w --bundleConfigAsCjs"
  },
  "peerDependencies": {
    "@ariakit/react": "^0.4.17",
    "@headlessui/react": "^2.2.4",
    "@radix-ui/react-separator": "^1.0.0",
    "@radix-ui/react-slot": "^1.0.0",
+    "@radix-ui/react-toast": "^1.0.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.0.0",
    "framer-motion": "^10.0.0",
@ -29,14 +34,21 @@
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-resizable-panels": "^3.0.3",
+    "recoil": "^0.7.7",
    "tailwind-merge": "^1.14.0"
  },
  "devDependencies": {
+    "@rollup/plugin-alias": "^5.1.0",
+    "@rollup/plugin-commonjs": "^25.0.2",
    "@rollup/plugin-node-resolve": "^15.0.0",
-    "@rollup/plugin-typescript": "^11.0.0",
+    "@rollup/plugin-replace": "^5.0.5",
+    "@rollup/plugin-terser": "^0.4.4",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
+    "rimraf": "^5.0.1",
    "rollup": "^4.0.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-typescript2": "^0.35.0",
    "typescript": "^5.0.0"
  }
 }
--- a/packages/client/rollup.config.js
+++ b/packages/client/rollup.config.js
@ -0,0 +1,56 @@
+// ESM bundler config for React components
+import typescript from 'rollup-plugin-typescript2';
+import resolve from '@rollup/plugin-node-resolve';
+import pkg from './package.json';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import commonjs from '@rollup/plugin-commonjs';
+import replace from '@rollup/plugin-replace';
+import terser from '@rollup/plugin-terser';
+import alias from '@rollup/plugin-alias';
+import { fileURLToPath } from 'url';
+import { dirname, resolve as pathResolve } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const plugins = [
+  peerDepsExternal(),
+  alias({
+    entries: [{ find: '~', replacement: pathResolve(__dirname, 'src') }],
+  }),
+  resolve({
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+  }),
+  replace({
+    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production'),
+    preventAssignment: true,
+  }),
+  commonjs(),
+  typescript({
+    tsconfig: './tsconfig.json',
+    useTsconfigDeclarationDir: true,
+    clean: true,
+  }),
+  terser(),
+];
+
+export default {
+  input: 'src/index.ts',
+  output: [
+    {
+      file: pkg.main,
+      format: 'cjs',
+      sourcemap: true,
+      exports: 'named',
+    },
+    {
+      file: pkg.module,
+      format: 'esm',
+      sourcemap: true,
+      exports: 'named',
+    },
+  ],
+  external: [...Object.keys(pkg.peerDependencies || {}), 'react/jsx-runtime'],
+  preserveSymlinks: true,
+  plugins,
+};
--- a/packages/client/rollup.config.mjs
+++ b/packages/client/rollup.config.mjs
@ -1,40 +0,0 @@
-// ESM bundler config for React components
-import resolve from '@rollup/plugin-node-resolve';
-import typescript from '@rollup/plugin-typescript';
-import alias from '@rollup/plugin-alias';
-import { fileURLToPath } from 'url';
-import { dirname, resolve as pathResolve } from 'path';
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-export default {
-  input: 'src/index.ts',
-  output: {
-    dir: 'dist',
-    format: 'es',
-    preserveModules: true,
-  },
-  external: [
-    'react',
-    'react-dom',
-    'react/jsx-runtime',
-    '@radix-ui/react-separator',
-    '@radix-ui/react-slot',
-    'class-variance-authority',
-    'clsx',
-    'framer-motion',
-    'lucide-react',
-    'tailwind-merge',
-  ],
-  plugins: [
-    alias({
-      entries: [{ find: '~', replacement: pathResolve(__dirname, 'src') }],
-    }),
-    resolve(),
-    typescript({
-      tsconfig: './tsconfig.json',
-      jsx: 'react-jsx',
-    }),
-  ],
-};
--- a/packages/client/src/index.ts
+++ b/packages/client/src/index.ts
@ -0,0 +1,11 @@
+// Components
+export { default as Toast } from './components/Toast';
+
+// Hooks
+export * from './hooks';
+
+// Common types
+export * from './common/types';
+
+// Store
+export * from './store';
--- a/packages/client/tsconfig.json
+++ b/packages/client/tsconfig.json
@ -2,11 +2,12 @@
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
-    "moduleResolution": "bundler",
+    "moduleResolution": "node",
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    "declaration": true,
    "declarationMap": true,
+    "declarationDir": "./dist/types",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
@ -17,8 +18,10 @@
    "baseUrl": "./src",
    "paths": {
      "~/*": ["./*"]
-    }
+    },
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "resolveJsonModule": true
  },
  "include": ["src/**/*"],
-  "exclude": ["dist", "node_modules"]
+  "exclude": ["dist", "node_modules", "**/*.test.ts", "**/*.test.tsx"]
 }