@linktr.ee/messaging-react 3.3.11-rc-1781859612 → 3.3.11

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-SMjrfgpc.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CRVJo6HP.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as e, b as t, C as i, c as n, d as o, e as m, F as g, f as l, L as r, h as M, M as u, i as L, j as c, k as h, l as d, m as p, n as v, o as A, p as C, q as F, s as k, t as b, u as f, v as x, w as y, x as P, y as S, z as q, B as z, D as B } from "./index-CAAtAfn1.js";
+import { a as e, b as t, C as i, c as n, d as o, e as m, F as g, f as l, L as r, h as M, M as u, i as L, j as c, k as h, l as d, m as p, n as v, o as A, p as C, q as F, s as k, t as b, u as f, v as x, w as y, x as P, y as S, z as q, B as z, D as B } from "./index-cIErdakH.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.3.11-rc-1781859612",
+  "version": "3.3.11",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@linktr.ee/component-library": "11.8.6",
-    "@linktr.ee/messaging-core": "2.2.0-rc-1781859612",
+    "@linktr.ee/messaging-core": "^2.2.0",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/providers/MessagingProvider.test.tsx

@@ -147,8 +147,8 @@ describe('MessagingProvider', () => {
     await waitFor(() => expect(connectUser).toHaveBeenCalledTimes(1))
 
     // Re-render with a NEW inline serviceConfig object (same apiKey). The
-    // service is recreated but reuses the same injected client, so the stale
-    // service must not tear down the live connection.
+    // service is created once per client lifetime, so a serviceConfig change
+    // neither recreates the service nor tears down the live connection.
     await act(async () => {
       rerender(
         <MessagingProvider
@@ -167,6 +167,50 @@ describe('MessagingProvider', () => {
     expect(disconnectUser).not.toHaveBeenCalled()
   })
 
+  it('does not disconnect the reused client when only the debug prop toggles', async () => {
+    const { connectUser, disconnectUser } = setupServiceMock()
+    const user = {
+      type: 'guest' as const,
+      id: 'guest-1',
+      name: 'Guest',
+    } as MessagingUser
+    const serviceConfig = {
+      fetchToken: async () => 'token',
+      createChannel: async () => ({ channelId: 'ch-1' }),
+    }
+
+    const { rerender } = render(
+      <MessagingProvider
+        apiKey="mock-api-key"
+        user={user}
+        serviceConfig={serviceConfig}
+        debug={false}
+      >
+        <div />
+      </MessagingProvider>
+    )
+
+    await waitFor(() => expect(connectUser).toHaveBeenCalledTimes(1))
+
+    // Toggling `debug` changes the internal debugLog identity. The client
+    // cleanup must stay keyed on the client's lifetime, not on debugLog, so the
+    // live connection is not torn down for a logging change.
+    await act(async () => {
+      rerender(
+        <MessagingProvider
+          apiKey="mock-api-key"
+          user={user}
+          serviceConfig={serviceConfig}
+          debug={true}
+        >
+          <div />
+        </MessagingProvider>
+      )
+    })
+
+    expect(disconnectUser).not.toHaveBeenCalled()
+  })
+
   it('disconnects and reconnects when remounted with a new key', async () => {
     const { connectUser, disconnectUser } = setupServiceMock()
 

package/src/providers/MessagingProvider.tsx

@@ -79,10 +79,18 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
   // Prevent multiple concurrent connection attempts
   const connectingRef = useRef(false)
 
-  // Latest service instance, for teardown that is keyed on the client's
-  // lifetime rather than the service's (see the client-cleanup effect below).
+  // The single service instance, for teardown in the client-cleanup effect.
   const serviceRef = useRef<StreamChatService | null>(null)
 
+  // serviceConfig / debug are read at service-creation time via refs so that
+  // changing them does not recreate the service (and re-adopt the live client).
+  // The service is created once per client lifetime (apiKey); the connection is
+  // driven by `user`. Real consumers pass a stable, memoized serviceConfig.
+  const serviceConfigRef = useRef(serviceConfig)
+  serviceConfigRef.current = serviceConfig
+  const debugRef = useRef(debug)
+  debugRef.current = debug
+
   // Track renders and prop changes
   const prevPropsRef = useRef({
     userId: user?.id,
@@ -118,50 +126,50 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
   // connectUser resolved (~0.8s later) because the children's parent element
   // changed — re-running every mount effect (refetches, Stream listeners,
   // page-view events) and resetting transient state. This client is injected
-  // into the service below, so connectUser connects this exact instance. One
-  // client per provider mount (keyed on apiKey) — not the process-wide
-  // StreamChat.getInstance, which is shared across keys and provider instances.
-  const chatClient = React.useMemo(
-    () => (apiKey ? new StreamChat(apiKey) : null),
-    [apiKey]
-  )
-
-  // Initialize service when config changes
+  // into the service below, so connectUser connects this exact instance.
+  //
+  // Stored in a ref (not useMemo) so its identity is *guaranteed* stable for the
+  // apiKey's lifetime. useMemo is unsafe here: React may discard a memo and
+  // recompute it, which would mint a new client, re-run the service-init effect,
+  // and tear down + rebuild the live connection — the very remount this fix
+  // exists to prevent. Both effects below key on `chatClient`, so it must not
+  // depend on memo retention. One client per provider mount (keyed on apiKey) —
+  // not the process-wide StreamChat.getInstance, which is shared across keys and
+  // provider instances.
+  const clientRef = useRef<{ apiKey: string; client: StreamChat } | null>(null)
+  if (apiKey && clientRef.current?.apiKey !== apiKey) {
+    clientRef.current = { apiKey, client: new StreamChat(apiKey) }
+  }
+  const chatClient = apiKey ? (clientRef.current?.client ?? null) : null
+
+  // Create the service once per client lifetime (apiKey). Keyed on `chatClient`
+  // — NOT on serviceConfig/debug — so those changing does not spin up a second
+  // service that would re-adopt the live client and race the in-flight connect.
+  // serviceConfig/debug are read from refs at creation. There is therefore a
+  // single service per client, which owns the connection lifecycle and tracks
+  // the active user; `user` changes reconnect through it.
   useEffect(() => {
     const currentRender = renderCountRef.current
-    debugLog('🔧 SERVICE INIT EFFECT TRIGGERED', {
-      renderCount: currentRender,
-      apiKey: !!apiKey,
-      serviceConfig: !!serviceConfig,
-      dependencies: {
-        apiKey: apiKey?.substring(0, 8) + '...',
-        serviceConfigRef: serviceConfig,
-        serviceConfigStable:
-          prevPropsRef.current.serviceConfig === serviceConfig,
-        apiKeyStable: prevPropsRef.current.apiKey === apiKey,
-      },
-    })
+    const currentConfig = serviceConfigRef.current
 
-    if (!apiKey || !serviceConfig) {
+    if (!apiKey || !chatClient || !currentConfig) {
       debugLog('⚠️ SERVICE INIT SKIPPED', {
         renderCount: currentRender,
-        reason: 'Missing apiKey or serviceConfig',
+        reason: 'Missing apiKey, client, or serviceConfig',
       })
       return
     }
 
-    debugLog('🚀 CREATING NEW SERVICE', {
+    debugLog('🚀 CREATING SERVICE', {
       renderCount: currentRender,
       apiKey: apiKey?.substring(0, 8) + '...',
-      serviceConfigChanged:
-        prevPropsRef.current.serviceConfig !== serviceConfig,
     })
 
     const newService = new StreamChatService({
-      ...serviceConfig,
+      ...currentConfig,
       apiKey,
-      debug,
-      ...(chatClient ? { client: chatClient } : {}),
+      debug: debugRef.current,
+      client: chatClient,
     })
 
     serviceRef.current = newService
@@ -171,12 +179,10 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
       serviceInstance: !!newService,
     })
 
-    // No disconnect on cleanup here. When only serviceConfig/debug change (same
-    // apiKey), the replacement service reuses the same injected `chatClient`, so
-    // disconnecting the old service would tear down the live connection the new
-    // service is about to reuse. Disconnection is owned by the client-cleanup
-    // effect below, keyed on `chatClient` (apiKey) and unmount.
-  }, [apiKey, serviceConfig, debug, debugLog, chatClient]) // Use serviceConfig object directly, not individual properties
+    // No disconnect on cleanup here — disconnection is owned by the
+    // client-cleanup effect below, keyed on `chatClient` (apiKey) and unmount.
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- serviceConfig/debug/debugLog are read via refs by design (see above); recreating on them would re-adopt the live client
+  }, [apiKey, chatClient])
 
   // Track if we've already connected this user with this service to prevent duplicate connections
   const connectedUserRef = useRef<{
@@ -252,22 +258,23 @@ export const MessagingProvider: React.FC<MessagingProviderProps> = ({
     }
 
     connectUser()
-  }, [service, user, debugLog, isConnected]) // Remove isConnected to prevent circular dependency
+  }, [service, user, debugLog, isConnected])
 
   // Disconnect tied to the client's lifetime: only when `chatClient` changes
   // (i.e. `apiKey` changes) or the provider unmounts — never on a mere
   // serviceConfig/debug change, which reuses the same client. Uses `serviceRef`
-  // so the disconnect goes through the latest service instance.
+  // so the disconnect goes through the latest service instance. Deliberately
+  // keyed on `chatClient` only: depending on `debugLog` (which changes identity
+  // when the `debug` prop toggles) would tear down the live client just for a
+  // logging change.
   useEffect(() => {
-    debugLog('🔌 CLIENT CLEANUP EFFECT REGISTERED', {
-      hasClient: !!chatClient,
-    })
+    const client = chatClient
     return () => {
-      debugLog('🧹 CLIENT CLEANUP EFFECT TRIGGERED', 'Disconnecting client')
+      if (!client) return
       connectedUserRef.current = null // Reset connection tracking
       serviceRef.current?.disconnectUser().catch(console.error)
     }
-  }, [chatClient, debugLog])
+  }, [chatClient])
 
   const refreshConnection = useCallback(async () => {
     debugLog('🔄 REFRESH CONNECTION CALLED', {