From f8738b207c251d9c5b2f98236de9dbf70d5890ef Mon Sep 17 00:00:00 2001 From: Danny Avila Date: Sun, 13 Jul 2025 08:35:49 -0400 Subject: [PATCH] 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. --- client/src/App.jsx | 2 +- package-lock.json | 98 +++++++++++++++++++++++++------ package.json | 3 +- packages/client/package.json | 28 ++++++--- packages/client/rollup.config.js | 56 ++++++++++++++++++ packages/client/rollup.config.mjs | 40 ------------- packages/client/src/index.ts | 11 ++++ packages/client/tsconfig.json | 9 ++- 8 files changed, 175 insertions(+), 72 deletions(-) create mode 100644 packages/client/rollup.config.js delete mode 100644 packages/client/rollup.config.mjs diff --git a/client/src/App.jsx b/client/src/App.jsx index 38e568e422..81dbb7a059 100644 --- 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'; diff --git a/package-lock.json b/package-lock.json index 0ef73ac5de..9ad643b0e3 100644 --- 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": { diff --git a/package.json b/package.json index 1aad42eb6e..9144195f34 100644 --- 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", diff --git a/packages/client/package.json b/packages/client/package.json index 6529925b9f..b91aba1a30 100644 --- 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" } } diff --git a/packages/client/rollup.config.js b/packages/client/rollup.config.js new file mode 100644 index 0000000000..1a756b9de2 --- /dev/null +++ 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, +}; diff --git a/packages/client/rollup.config.mjs b/packages/client/rollup.config.mjs deleted file mode 100644 index 0c3cc86f23..0000000000 --- a/packages/client/rollup.config.mjs +++ /dev/null @@ -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', - }), - ], -}; diff --git a/packages/client/src/index.ts b/packages/client/src/index.ts index e69de29bb2..8001576455 100644 --- 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'; diff --git a/packages/client/tsconfig.json b/packages/client/tsconfig.json index 999f217c47..2c160a3f22 100644 --- 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"] }