@djangocfg/centrifugo 2.1.41 → 2.1.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/centrifugo",
-  "version": "2.1.41",
+  "version": "2.1.43",
   "description": "Production-ready Centrifugo WebSocket client for React with real-time subscriptions, RPC patterns, and connection state management",
   "keywords": [
     "centrifugo",
@@ -51,9 +51,9 @@
     "centrifuge": "^5.2.2"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.41",
-    "@djangocfg/ui-nextjs": "^2.1.41",
-    "@djangocfg/layouts": "^2.1.41",
+    "@djangocfg/api": "^2.1.43",
+    "@djangocfg/ui-nextjs": "^2.1.43",
+    "@djangocfg/layouts": "^2.1.43",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -61,7 +61,7 @@
     "react-dom": "^19.1.0"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.41",
+    "@djangocfg/typescript-config": "^2.1.43",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "moment": "^2.30.1",

package/src/components/CentrifugoMonitor/CentrifugoMonitor.tsx

@@ -8,10 +8,13 @@
 'use client';
 
 import React from 'react';
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '@djangocfg/ui-nextjs';
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@djangocfg/ui-nextjs';
+
 import { ConnectionStatus } from '../ConnectionStatus';
 import { MessagesFeed } from '../MessagesFeed';
 import { SubscriptionsList } from '../SubscriptionsList';
+
 import type { CentrifugoMessage } from '../MessagesFeed';
 
 // ─────────────────────────────────────────────────────────────────────────

package/src/components/CentrifugoMonitor/CentrifugoMonitorDialog.tsx

@@ -7,18 +7,15 @@
 
 'use client';
 
+import { Activity } from 'lucide-react';
 import React, { useState } from 'react';
+
 import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetDescription,
-  useEventListener,
+    Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, useEventListener
 } from '@djangocfg/ui-nextjs';
-import { Activity } from 'lucide-react';
+
+import { CENTRIFUGO_MONITOR_EVENTS, OpenMonitorDialogPayload} from '../../events';
 import { CentrifugoMonitor } from './CentrifugoMonitor';
-import { CENTRIFUGO_MONITOR_EVENTS, type OpenMonitorDialogPayload } from '../../events';
 
 // ─────────────────────────────────────────────────────────────────────────
 // Component

package/src/components/CentrifugoMonitor/CentrifugoMonitorFAB.tsx

@@ -7,9 +7,10 @@
 
 'use client';
 
-import React from 'react';
 import { Activity } from 'lucide-react';
-import { emitOpenMonitorDialog, type OpenMonitorDialogPayload } from '../../events';
+import React from 'react';
+
+import { emitOpenMonitorDialog, OpenMonitorDialogPayload} from '../../events';
 
 // ─────────────────────────────────────────────────────────────────────────
 // Types

package/src/components/CentrifugoMonitor/CentrifugoMonitorWidget.tsx

@@ -7,11 +7,13 @@
 
 'use client';
 
-import React from 'react';
-import { Card, CardContent, CardHeader, CardTitle, Button } from '@djangocfg/ui-nextjs';
 import { Activity, Maximize2 } from 'lucide-react';
-import { ConnectionStatus } from '../ConnectionStatus';
+import React from 'react';
+
+import { Button, Card, CardContent, CardHeader, CardTitle } from '@djangocfg/ui-nextjs';
+
 import { emitOpenMonitorDialog } from '../../events';
+import { ConnectionStatus } from '../ConnectionStatus';
 
 // ─────────────────────────────────────────────────────────────────────────
 // Types

package/src/components/ConnectionStatus/ConnectionStatus.tsx

@@ -7,12 +7,14 @@
 
 'use client';
 
-import React, { useState, useEffect } from 'react';
-import { Badge } from '@djangocfg/ui-nextjs';
-import { Wifi, WifiOff, Radio, Clock } from 'lucide-react';
+import { Clock, Radio, Wifi, WifiOff } from 'lucide-react';
 import moment from 'moment';
-import { useCentrifugo } from '../../providers/CentrifugoProvider';
+import React, { useEffect, useState } from 'react';
+
+import { Badge } from '@djangocfg/ui-nextjs';
+
 import { getConsolaLogger } from '../../core/logger/consolaLogger';
+import { useCentrifugo } from '../../providers/CentrifugoProvider';
 
 const logger = getConsolaLogger('ConnectionStatus');
 

package/src/components/ConnectionStatus/ConnectionStatusCard.tsx

@@ -7,12 +7,14 @@
 
 'use client';
 
+import { Wifi, WifiOff } from 'lucide-react';
 import React from 'react';
+
 import { Card, CardContent, CardHeader, CardTitle } from '@djangocfg/ui-nextjs';
-import { Wifi, WifiOff } from 'lucide-react';
+
+import { emitOpenMonitorDialog } from '../../events';
 import { useCentrifugo } from '../../providers/CentrifugoProvider';
 import { ConnectionStatus } from './ConnectionStatus';
-import { emitOpenMonitorDialog } from '../../events';
 
 // ─────────────────────────────────────────────────────────────────────────
 // Types

package/src/components/MessagesFeed/MessageFilters.tsx

@@ -6,9 +6,11 @@
 
 'use client';
 
+import { Filter, Search, X } from 'lucide-react';
 import React from 'react';
-import { Input, Badge, Button } from '@djangocfg/ui-nextjs';
-import { Search, Filter, X } from 'lucide-react';
+
+import { Badge, Button, Input } from '@djangocfg/ui-nextjs';
+
 import type { MessageFilters as MessageFiltersType } from './types';
 
 // ─────────────────────────────────────────────────────────────────────────

package/src/components/MessagesFeed/MessagesFeed.tsx

@@ -7,30 +7,19 @@
 
 'use client';
 
-import React, { useState, useEffect, useCallback, useRef } from 'react';
 import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Badge,
-  Button,
-  ScrollArea,
-} from '@djangocfg/ui-nextjs';
-import {
-  Trash2,
-  Pause,
-  Play,
-  Download,
-  Activity,
-  AlertCircle,
-  CheckCircle2,
-  Info,
-  Circle,
+    Activity, AlertCircle, CheckCircle2, Circle, Download, Info, Pause, Play, Trash2
 } from 'lucide-react';
 import moment from 'moment';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import {
+    Badge, Button, Card, CardContent, CardHeader, CardTitle, ScrollArea
+} from '@djangocfg/ui-nextjs';
+
 import { useCentrifugo } from '../../providers/CentrifugoProvider';
 import { MessageFilters as MessageFiltersComponent } from './MessageFilters';
+
 import type { CentrifugoMessage, MessageFilters, MessagesFeedProps } from './types';
 
 // ─────────────────────────────────────────────────────────────────────────
@@ -182,44 +171,52 @@ export function MessagesFeed({
     }
   }, [messages, autoScroll]);
 
-  // Filter messages
-  const filteredMessages = messages.filter((msg) => {
-    if (filters.channels && filters.channels.length > 0) {
-      if (!msg.channel || !filters.channels.includes(msg.channel)) {
-        return false;
-      }
-    }
-
-    if (filters.types && filters.types.length > 0) {
-      if (!filters.types.includes(msg.type)) {
-        return false;
-      }
-    }
-
-    if (filters.levels && filters.levels.length > 0) {
-      if (!filters.levels.includes(msg.level)) {
-        return false;
-      }
-    }
-
-    if (filters.searchQuery) {
-      const query = filters.searchQuery.toLowerCase();
-      const searchableText = [
-        msg.message,
-        msg.channel,
-        JSON.stringify(msg.data),
-      ]
-        .filter(Boolean)
-        .join(' ')
-        .toLowerCase();
-
-      if (!searchableText.includes(query)) {
-        return false;
-      }
-    }
-
-    return true;
-  });
+  // Filter and prepare messages with pre-computed values
+  const filteredMessages = useMemo(() => {
+    return messages
+      .filter((msg) => {
+        if (filters.channels && filters.channels.length > 0) {
+          if (!msg.channel || !filters.channels.includes(msg.channel)) {
+            return false;
+          }
+        }
+
+        if (filters.types && filters.types.length > 0) {
+          if (!filters.types.includes(msg.type)) {
+            return false;
+          }
+        }
+
+        if (filters.levels && filters.levels.length > 0) {
+          if (!filters.levels.includes(msg.level)) {
+            return false;
+          }
+        }
+
+        if (filters.searchQuery) {
+          const query = filters.searchQuery.toLowerCase();
+          const searchableText = [
+            msg.message,
+            msg.channel,
+            JSON.stringify(msg.data),
+          ]
+            .filter(Boolean)
+            .join(' ')
+            .toLowerCase();
+
+          if (!searchableText.includes(query)) {
+            return false;
+          }
+        }
+
+        return true;
+      })
+      .map((msg) => ({
+        ...msg,
+        formattedTime: moment.utc(msg.timestamp).format('HH:mm:ss'),
+        formattedData: msg.data ? JSON.stringify(msg.data, null, 2) : null,
+      }));
+  }, [messages, filters]);
 
   // Clear messages
   const handleClear = () => {
@@ -353,19 +350,19 @@ export function MessagesFeed({
                           </Badge>
                         )}
                         <span className="text-xs text-muted-foreground">
-                          {moment.utc(msg.timestamp).format('HH:mm:ss')}
+                          {msg.formattedTime}
                         </span>
                       </div>
                       {msg.message && (
                         <p className="text-sm break-words">{msg.message}</p>
                       )}
-                      {msg.data && (
+                      {msg.formattedData && (
                         <details className="text-xs">
                           <summary className="cursor-pointer text-muted-foreground hover:text-foreground">
                             View data
                           </summary>
                           <pre className="mt-2 p-2 bg-muted rounded overflow-x-auto">
-                            {JSON.stringify(msg.data, null, 2)}
+                            {msg.formattedData}
                           </pre>
                         </details>
                       )}

package/src/components/SubscriptionsList/SubscriptionsList.tsx

@@ -6,20 +6,16 @@
 
 'use client';
 
-import React, { useState, useEffect } from 'react';
+import { Subscription, SubscriptionState } from 'centrifuge';
+import { Radio, RefreshCw, Trash2 } from 'lucide-react';
+import React, { useEffect, useState } from 'react';
+
 import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Badge,
-  Button,
-  ScrollArea,
+    Badge, Button, Card, CardContent, CardHeader, CardTitle, ScrollArea
 } from '@djangocfg/ui-nextjs';
-import { Radio, RefreshCw, Trash2 } from 'lucide-react';
-import { Subscription, SubscriptionState } from 'centrifuge';
-import { useCentrifugo } from '../../providers/CentrifugoProvider';
+
 import { getConsolaLogger } from '../../core/logger/consolaLogger';
+import { useCentrifugo } from '../../providers/CentrifugoProvider';
 
 const logger = getConsolaLogger('SubscriptionsList');
 

package/src/core/client/CentrifugoRPCClient.ts

@@ -6,9 +6,10 @@
  */
 
 import { Centrifuge } from 'centrifuge';
-import type { Logger } from '../logger';
+
 import { getConsolaLogger } from '../logger/consolaLogger';
 
+import type { Logger } from '../logger';
 export interface CentrifugoClientOptions {
   url: string;
   token: string;

package/src/core/logger/consolaLogger.ts

@@ -5,6 +5,7 @@
  */
 
 import { createConsola } from 'consola';
+
 import type { Logger } from './createLogger';
 
 const isDevelopment = process.env.NODE_ENV === 'development';

package/src/core/logger/createLogger.ts

@@ -6,9 +6,10 @@
  */
 
 import { createConsola } from 'consola';
-import type { LogEntry, LogLevel } from '../types';
+
 import { getGlobalLogsStore } from './LogsStore';
 
+import type { LogEntry, LogLevel } from '../types';
 export interface Logger {
   debug: (message: string, data?: unknown) => void;
   info: (message: string, data?: unknown) => void;

package/src/debug/ConnectionTab/ConnectionTab.tsx

@@ -6,16 +6,12 @@
 
 'use client';
 
-import { Wifi, WifiOff, Clock, RefreshCw } from 'lucide-react';
+import { Clock, RefreshCw, Wifi, WifiOff } from 'lucide-react';
+
 import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Badge,
-  Button,
-  Separator,
+    Badge, Button, Card, CardContent, CardHeader, CardTitle, Separator
 } from '@djangocfg/ui-nextjs';
+
 import { useCentrifugo } from '../../providers/CentrifugoProvider';
 
 // ─────────────────────────────────────────────────────────────────────────

package/src/debug/DebugPanel/DebugPanel.tsx

@@ -7,19 +7,14 @@
 
 'use client';
 
-import { useState } from 'react';
 import { Bug } from 'lucide-react';
+import { useState } from 'react';
+
 import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetDescription,
-  Tabs,
-  TabsList,
-  TabsTrigger,
-  TabsContent,
+    Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, Tabs, TabsContent, TabsList,
+    TabsTrigger
 } from '@djangocfg/ui-nextjs';
+
 import { ConnectionTab } from '../ConnectionTab';
 import { LogsTab } from '../LogsTab';
 import { SubscriptionsTab } from '../SubscriptionsTab';

package/src/debug/LogsTab/LogsTab.tsx

@@ -7,26 +7,17 @@
 
 'use client';
 
-import { useRef, useEffect, useState } from 'react';
-import { Trash2, Search, Filter } from 'lucide-react';
+import { Filter, Search, Trash2 } from 'lucide-react';
 import moment from 'moment';
+import { useEffect, useRef, useState } from 'react';
+
 import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Button,
-  Input,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  ScrollArea,
-  Badge,
-  PrettyCode,
+    Badge, Button, Card, CardContent, CardHeader, CardTitle, Input, PrettyCode, ScrollArea, Select,
+    SelectContent, SelectItem, SelectTrigger, SelectValue
 } from '@djangocfg/ui-nextjs';
+
 import { useLogs } from '../../providers/LogsProvider';
+
 import type { LogLevel, LogEntry } from '../../core/types';
 
 // ─────────────────────────────────────────────────────────────────────────

package/src/debug/SubscriptionsTab/SubscriptionsTab.tsx

@@ -6,18 +6,13 @@
 
 'use client';
 
-import { Fragment } from 'react';
 import { Radio, Trash2 } from 'lucide-react';
+import { Fragment } from 'react';
+
 import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Badge,
-  Button,
-  ScrollArea,
-  Separator,
+    Badge, Button, Card, CardContent, CardHeader, CardTitle, ScrollArea, Separator
 } from '@djangocfg/ui-nextjs';
+
 import { useCentrifugo } from '../../providers/CentrifugoProvider';
 
 // ─────────────────────────────────────────────────────────────────────────

package/src/hooks/useCodegenTip.ts

@@ -5,6 +5,7 @@
  */
 
 import { useEffect, useRef } from 'react';
+
 import { consolaLogger } from '../core/logger/consolaLogger';
 
 const isDevelopment = process.env.NODE_ENV === 'development';

package/src/hooks/useNamedRPC.ts

@@ -25,9 +25,10 @@
 
 'use client';
 
-import { useState, useCallback, useRef } from 'react';
-import { useCentrifugo } from '../providers/CentrifugoProvider';
+import { useCallback, useRef, useState } from 'react';
+
 import { getConsolaLogger } from '../core/logger/consolaLogger';
+import { useCentrifugo } from '../providers/CentrifugoProvider';
 
 export interface UseNamedRPCOptions {
   onError?: (error: Error) => void;

package/src/hooks/useRPC.ts

@@ -20,9 +20,10 @@
 
 'use client';
 
-import { useState, useCallback, useRef } from 'react';
-import { useCentrifugo } from '../providers/CentrifugoProvider';
+import { useCallback, useRef, useState } from 'react';
+
 import { getConsolaLogger } from '../core/logger/consolaLogger';
+import { useCentrifugo } from '../providers/CentrifugoProvider';
 
 export interface UseRPCOptions {
   timeout?: number;

package/src/hooks/useSubscription.ts

@@ -12,10 +12,11 @@
 
 'use client';
 
-import { useEffect, useCallback, useRef, useState } from 'react';
-import { useCentrifugo } from '../providers/CentrifugoProvider';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
 import { getConsolaLogger } from '../core/logger/consolaLogger';
 import { logChannelWarnings } from '../core/utils/channelValidator';
+import { useCentrifugo } from '../providers/CentrifugoProvider';
 
 export interface UseSubscriptionOptions<T = any> {
   channel: string;

package/src/index.ts

@@ -41,11 +41,10 @@
  */
 
 // ─────────────────────────────────────────────────────────────────────────
-// Re-export Centrifuge for advanced usage
+// Re-export everything from centrifuge for advanced usage
 // ─────────────────────────────────────────────────────────────────────────
 
-export { Centrifuge } from 'centrifuge';
-export type { Subscription } from 'centrifuge';
+export * from 'centrifuge';
 
 // ─────────────────────────────────────────────────────────────────────────
 // Core (Platform-agnostic)

package/src/providers/CentrifugoProvider/CentrifugoProvider.tsx

@@ -7,16 +7,22 @@
 
 'use client';
 
-import { createContext, useContext, useState, useEffect, useCallback, useRef, useMemo, type ReactNode } from 'react';
+import {
+    createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState
+} from 'react';
+
 import { useAuth } from '@djangocfg/api/auth';
+
+import {
+    CentrifugoMonitorDialog
+} from '../../components/CentrifugoMonitor/CentrifugoMonitorDialog';
+import { isDevelopment, isStaticBuild, reconnectConfig } from '../../config';
 import { CentrifugoRPCClient } from '../../core/client';
 import { getConsolaLogger } from '../../core/logger/consolaLogger';
-import type { ConnectionState, CentrifugoToken, ActiveSubscription } from '../../core/types';
-import { LogsProvider } from '../LogsProvider';
-import { isStaticBuild, isDevelopment, reconnectConfig } from '../../config';
-import { CentrifugoMonitorDialog } from '../../components/CentrifugoMonitor/CentrifugoMonitorDialog';
 import { useCodegenTip } from '../../hooks/useCodegenTip';
+import { LogsProvider } from '../LogsProvider';
 
+import type { ConnectionState, CentrifugoToken, ActiveSubscription } from '../../core/types';
 // ─────────────────────────────────────────────────────────────────────────
 // Context
 // ─────────────────────────────────────────────────────────────────────────

package/src/providers/LogsProvider/LogsProvider.tsx

@@ -7,10 +7,13 @@
 
 'use client';
 
-import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from 'react';
-import type { LogEntry, LogLevel } from '../../core/types';
+import {
+    createContext, ReactNode, useCallback, useContext, useEffect, useState
+} from 'react';
+
 import { getGlobalLogsStore } from '../../core/logger';
 
+import type { LogEntry, LogLevel } from '../../core/types';
 // ─────────────────────────────────────────────────────────────────────────
 // Context
 // ─────────────────────────────────────────────────────────────────────────