@nocobase/client-v2 2.1.0-beta.37 → 2.1.0-beta.38

package/src/components/KeepAlive.tsx

@@ -0,0 +1,131 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { RouteContext } from '@ant-design/pro-layout';
+import _ from 'lodash';
+import React, { createContext, FC, memo, useContext, useRef } from 'react';
+import {
+  UNSAFE_DataRouterContext,
+  UNSAFE_DataRouterStateContext,
+  UNSAFE_LocationContext,
+  UNSAFE_RouteContext,
+} from 'react-router-dom';
+
+const KeepAliveContext = createContext(true);
+const hidden = { display: 'none' };
+
+export const KeepAliveProvider: FC<{ active: boolean; parentActive: boolean }> = memo(
+  ({ children, active, parentActive }) => {
+    const currentLocationContext = useContext(UNSAFE_LocationContext);
+    const currentRouteContext = useContext(UNSAFE_RouteContext);
+    const currentDataRouterContext = useContext(UNSAFE_DataRouterContext);
+    const currentDataRouterStateContext = useContext(UNSAFE_DataRouterStateContext);
+    const routeContextValue = useContext(RouteContext);
+
+    const prevLocationContextRef = useRef(currentLocationContext);
+    const prevRouteContextRef = useRef(currentRouteContext);
+    const prevDataRouterContextRef = useRef(currentDataRouterContext);
+    const prevDataRouterStateContextRef = useRef(currentDataRouterStateContext);
+    const prevRouteContextValueRef = useRef(routeContextValue);
+
+    if (active) {
+      prevDataRouterContextRef.current = currentDataRouterContext;
+      prevDataRouterStateContextRef.current = currentDataRouterStateContext;
+      prevRouteContextValueRef.current = routeContextValue;
+    }
+
+    if (
+      active &&
+      !_.isEqual(_.omit(prevLocationContextRef.current.location, 'key'), _.omit(currentLocationContext.location, 'key'))
+    ) {
+      prevLocationContextRef.current = currentLocationContext;
+    }
+
+    if (active && !_.isEqual(prevRouteContextRef.current, currentRouteContext)) {
+      prevRouteContextRef.current = currentRouteContext;
+    }
+
+    return (
+      <div style={active ? { height: '100%' } : hidden}>
+        <RouteContext.Provider value={prevRouteContextValueRef.current}>
+          <UNSAFE_DataRouterContext.Provider value={prevDataRouterContextRef.current}>
+            <UNSAFE_DataRouterStateContext.Provider value={prevDataRouterStateContextRef.current}>
+              <UNSAFE_LocationContext.Provider value={prevLocationContextRef.current}>
+                <UNSAFE_RouteContext.Provider value={prevRouteContextRef.current}>
+                  <KeepAliveContext.Provider value={parentActive === false ? false : active}>
+                    {children}
+                  </KeepAliveContext.Provider>
+                </UNSAFE_RouteContext.Provider>
+              </UNSAFE_LocationContext.Provider>
+            </UNSAFE_DataRouterStateContext.Provider>
+          </UNSAFE_DataRouterContext.Provider>
+        </RouteContext.Provider>
+      </div>
+    );
+  },
+);
+
+export const useKeepAlive = () => {
+  const active = useContext(KeepAliveContext);
+  return { active };
+};
+
+interface KeepAliveProps {
+  uid: string;
+  children: (uid: string) => React.ReactNode;
+}
+
+const MINIMUM_CACHED_PAGES = 5;
+const MAXIMUM_CACHED_PAGES = 15;
+
+const getMaxPageCount = () => {
+  const baseCount = MINIMUM_CACHED_PAGES;
+
+  try {
+    const memory = (navigator as any).deviceMemory;
+    if (memory) {
+      return Math.min(Math.max(baseCount, memory * 3), MAXIMUM_CACHED_PAGES);
+    }
+
+    const cores = navigator.hardwareConcurrency;
+    if (cores) {
+      return cores >= 8 ? MAXIMUM_CACHED_PAGES : cores >= 4 ? 7 : baseCount;
+    }
+
+    return baseCount;
+  } catch (e) {
+    return baseCount;
+  }
+};
+
+const MAX_RENDERED_PAGE_COUNT = getMaxPageCount();
+
+export const KeepAlive: FC<KeepAliveProps> = React.memo(({ children, uid }) => {
+  const { active } = useKeepAlive();
+  const renderedUidListRef = useRef<string[]>([]);
+
+  if (!renderedUidListRef.current.includes(uid)) {
+    renderedUidListRef.current.push(uid);
+    if (renderedUidListRef.current.length > MAX_RENDERED_PAGE_COUNT) {
+      renderedUidListRef.current = renderedUidListRef.current.slice(-MAX_RENDERED_PAGE_COUNT);
+    }
+  }
+
+  return (
+    <>
+      {renderedUidListRef.current.map((renderedUid) => (
+        <KeepAliveProvider active={renderedUid === uid} key={renderedUid} parentActive={active}>
+          {children(renderedUid)}
+        </KeepAliveProvider>
+      ))}
+    </>
+  );
+});
+
+KeepAlive.displayName = 'KeepAlive';

package/src/components/RouterBridge.tsx

@@ -7,11 +7,32 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { observable } from '@formily/reactive';
-import { useEffect, useMemo } from 'react';
-import { useLocation, useMatch, useMatches, useParams } from 'react-router-dom';
+import { useEffect } from 'react';
+import { useLocation, useMatches, useParams } from 'react-router-dom';
 import { Application } from '../Application';
 
+type LayoutMatchLike = {
+  id: string;
+  pathname: string;
+};
+
+type LayoutDefinitionLike = {
+  routeName: string;
+};
+
+export function findDeepestLayoutMatch(layouts: LayoutDefinitionLike[] = [], matches: LayoutMatchLike[] = []) {
+  const layoutRouteNames = new Set(layouts.map((layout) => layout.routeName));
+
+  for (let index = matches.length - 1; index >= 0; index -= 1) {
+    const match = matches[index];
+    if (layoutRouteNames.has(match.id)) {
+      return match;
+    }
+  }
+
+  return null;
+}
+
 export function useRouterSync(app: Application) {
   const params = useParams();
   const location = useLocation();
@@ -20,13 +41,16 @@ export function useRouterSync(app: Application) {
   useEffect(() => {
     const last = matches[matches.length - 1];
     if (!last) return;
+    const layoutMatch = findDeepestLayoutMatch(app.layoutManager?.listLayouts?.(), matches);
     engine.context['_observableCache']['route'] = {
       name: last.id,
       pathname: last.pathname,
       path: last.handle?.['path'] || null,
       params,
+      layoutRouteName: layoutMatch?.id,
+      layoutBasePathname: layoutMatch?.pathname,
     };
-  }, [engine.context, params, matches]);
+  }, [app, engine.context, params, matches]);
   useEffect(() => {
     engine.context['_observableCache']['location'] = location;
   }, [engine.context, location]);

package/src/components/__tests__/KeepAlive.test.tsx

@@ -0,0 +1,63 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { render, screen, waitFor } from '@testing-library/react';
+import React, { useEffect } from 'react';
+import { createMemoryRouter, Outlet, RouterProvider, useParams } from 'react-router-dom';
+import { describe, expect, it } from 'vitest';
+import { KeepAlive } from '../KeepAlive';
+
+describe('KeepAlive', () => {
+  it('keeps inactive outlet pages mounted while switching route params', async () => {
+    const events: string[] = [];
+
+    const Page = () => {
+      const { name } = useParams();
+      useEffect(() => {
+        events.push(`mount:${name}`);
+        return () => {
+          events.push(`unmount:${name}`);
+        };
+      }, [name]);
+
+      return <div>page {name}</div>;
+    };
+
+    const Layout = () => {
+      const { name } = useParams();
+      return <KeepAlive uid={name || ''}>{() => <Outlet />}</KeepAlive>;
+    };
+
+    const router = createMemoryRouter(
+      [
+        {
+          path: '/:name',
+          element: <Layout />,
+          children: [{ index: true, element: <Page /> }],
+        },
+      ],
+      {
+        initialEntries: ['/page-a'],
+      },
+    );
+
+    render(<RouterProvider router={router} />);
+
+    expect(await screen.findByText('page page-a')).toBeInTheDocument();
+
+    await router.navigate('/page-b');
+
+    expect(await screen.findByText('page page-b')).toBeInTheDocument();
+    expect(screen.getByText('page page-a')).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(events).toEqual(['mount:page-a', 'mount:page-b']);
+    });
+  });
+});

package/src/components/__tests__/RouterBridge.test.tsx

@@ -0,0 +1,27 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { describe, expect, it } from 'vitest';
+import { findDeepestLayoutMatch } from '../RouterBridge';
+
+describe('RouterBridge', () => {
+  it('uses the deepest matched layout route as layout base pathname', () => {
+    const match = findDeepestLayoutMatch(
+      [{ routeName: 'admin' }, { routeName: 'admin.settings.publicForms' }],
+      [
+        { id: 'admin', pathname: '/admin' },
+        { id: 'admin.settings', pathname: '/admin/settings' },
+        { id: 'admin.settings.publicForms', pathname: '/admin/settings/public-forms' },
+        { id: 'admin.settings.publicForms.page.view', pathname: '/admin/settings/public-forms/form-1/view/popup' },
+      ],
+    );
+
+    expect(match?.pathname).toBe('/admin/settings/public-forms');
+  });
+});

package/src/data-source/ExtendCollectionsProvider.tsx

@@ -16,53 +16,127 @@ export interface ExtendCollectionsProviderProps {
   dataSource?: string;
   /** Collections to surface for the lifetime of this provider's subtree. */
   collections: CollectionOptions[];
+  /**
+   * When `true`, re-sync the data source whenever the `collections` prop
+   * reference changes after mount: add entries newly present in the prop and
+   * remove entries no longer present (only those this provider registered).
+   * The diff runs in the same render as the prop change so children see the
+   * new state on their first render — at the cost of one observable mutation
+   * per change.
+   *
+   * Defaults to `false`. Most pages pass a stable (often module-level)
+   * `collections` list and don't need this; leaving it off avoids accidental
+   * re-registration when callers forget to memoize. Enable only when your
+   * collection list legitimately varies during the provider's lifetime.
+   */
+  syncOnChange?: boolean;
   children?: ReactNode;
 }
 
 /**
- * Mount-scoped collection injector. Adds the given `collections` to the target data source on mount and removes them on unmount. Survives mid-session reloads via `dataSource:loaded` events.
+ * Mount-scoped collection injector. Adds the given `collections` to the target
+ * data source on first render — synchronously, so children can read
+ * `getCollection(name)` on their own first render — and removes them on
+ * unmount. Survives mid-session data-source reloads via the
+ * `dataSource:loaded` event by re-registering only the names this provider
+ * owns.
  *
- * Use this for client-only collections — e.g. a `schema-only` server collection that isn't auto-published to the v2 data source, or a pure UI-side mirror — so downstream components (like `<CollectionFilter>`) can resolve the collection by name.
+ * Use this for client-only collections — e.g. a `schema-only` server
+ * collection that isn't auto-published to the v2 data source, or a pure
+ * UI-side mirror — so downstream components (like `<CollectionFilter>`) can
+ * resolve the collection by name.
+ *
+ * Default behavior is "static-at-mount": subsequent changes to the
+ * `collections` prop are ignored. Pass `syncOnChange` to opt into diffing on
+ * prop change.
  */
 export const ExtendCollectionsProvider: FC<ExtendCollectionsProviderProps> = ({
   dataSource = 'main',
   collections,
+  syncOnChange = false,
   children,
 }) => {
   const app = useApp();
-  const ownedRef = useRef<Set<string>>(new Set());
+  // Lazy-ref init guard. `ownedRef.current === null` only on the first render;
+  // once populated, StrictMode dev's second render and any subsequent
+  // re-render see a non-null ref and skip re-registering. React docs bless
+  // this idiom for "init exactly once on mount" — see "Avoiding recreating
+  // the ref contents".
+  const ownedRef = useRef<CollectionOptions[] | null>(null);
+  // Identity of the `collections` reference we last reacted to; gates the
+  // opt-in diff so StrictMode's double-render doesn't diff twice.
+  const lastCollectionsRef = useRef<CollectionOptions[] | null>(null);
 
-  const apply = () => {
+  if (ownedRef.current === null) {
     const ds = app.dataSourceManager?.getDataSource?.(dataSource);
-    if (!ds) return;
-    for (const collection of collections) {
-      if (ds.getCollection?.(collection.name)) continue;
-      ds.addCollection?.(collection);
-      ownedRef.current.add(collection.name);
+    const owned: CollectionOptions[] = [];
+    if (ds) {
+      for (const c of collections) {
+        if (ds.getCollection?.(c.name)) continue;
+        ds.addCollection?.(c);
+        owned.push(c);
+      }
     }
-  };
-
-  apply();
+    ownedRef.current = owned;
+    lastCollectionsRef.current = collections;
+  } else if (syncOnChange && lastCollectionsRef.current !== collections) {
+    const ds = app.dataSourceManager?.getDataSource?.(dataSource);
+    if (ds) {
+      const nextNames = new Set(collections.map((c) => c.name));
+      const prevOwned = new Map(ownedRef.current.map((c) => [c.name, c]));
+      for (const name of prevOwned.keys()) {
+        if (!nextNames.has(name)) ds.removeCollection?.(name);
+      }
+      const nextOwned: CollectionOptions[] = [];
+      for (const c of collections) {
+        const previous = prevOwned.get(c.name);
+        if (previous) {
+          // First-registered wins: keep the existing options object, mirroring
+          // the original behavior where re-adding a present name was a no-op.
+          // Callers who need to update a collection should remount the
+          // provider (e.g. `key={signature}`).
+          nextOwned.push(previous);
+          continue;
+        }
+        if (ds.getCollection?.(c.name)) continue;
+        ds.addCollection?.(c);
+        nextOwned.push(c);
+      }
+      ownedRef.current = nextOwned;
+    }
+    lastCollectionsRef.current = collections;
+  }
 
   useEffect(() => {
     const onLoaded = (event: Event) => {
       const key = (event as CustomEvent<{ dataSourceKey: string }>).detail?.dataSourceKey;
-      if (key === dataSource || key === '*') apply();
+      if (key !== dataSource && key !== '*') return;
+      const ds = app.dataSourceManager?.getDataSource?.(dataSource);
+      if (!ds || !ownedRef.current) return;
+      // dataSource was just reloaded from the server — our owned client-only
+      // entries got wiped. Re-add only the ones we own, using the snapshot in
+      // the ref so we don't accidentally seize names this provider never
+      // registered.
+      for (const c of ownedRef.current) {
+        if (ds.getCollection?.(c.name)) continue;
+        ds.addCollection?.(c);
+      }
     };
     app.eventBus?.addEventListener('dataSource:loaded', onLoaded);
-
     return () => {
       app.eventBus?.removeEventListener('dataSource:loaded', onLoaded);
       const ds = app.dataSourceManager?.getDataSource?.(dataSource);
-      const owned = ownedRef.current;
-      ownedRef.current = new Set();
+      const owned = ownedRef.current ?? [];
+      ownedRef.current = null;
+      lastCollectionsRef.current = null;
       if (!ds) return;
-      for (const name of owned) {
-        ds.removeCollection?.(name);
-      }
+      for (const c of owned) ds.removeCollection?.(c.name);
     };
+    // `collections` / `syncOnChange` intentionally excluded — they drive the
+    // render-phase init/diff above, not this effect. The listener reads
+    // `ownedRef` each time it fires (async, never during render).
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [app, dataSource, collections]);
+  }, [app, dataSource]);
 
   return <>{children}</>;
 };

package/src/data-source/__tests__/ExtendCollectionsProvider.test.tsx

@@ -0,0 +1,264 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { CollectionOptions } from '@nocobase/flow-engine';
+import { FlowEngineProvider } from '@nocobase/flow-engine';
+import { act, render } from '@testing-library/react';
+import React, { useState } from 'react';
+import { describe, expect, it } from 'vitest';
+import { createMockClient } from '../../MockApplication';
+import { ExtendCollectionsProvider } from '../ExtendCollectionsProvider';
+
+// `MockApplication` isn't exported as a named type, so infer from the factory.
+type AppInstance = ReturnType<typeof createMockClient>;
+
+function makeApp(): AppInstance {
+  const app = createMockClient();
+  // The mock client wires a lazy `appInfo` getter to `GET app:getInfo`; any
+  // proxy iteration of the FlowEngineContext can trip it. Pre-stub so a 404
+  // doesn't surface as an unhandled axios rejection during the test run.
+  app.apiMock.onGet('app:getInfo').reply(200, { data: { version: 'test' } });
+  return app;
+}
+
+const LOCKED: CollectionOptions = {
+  name: 'lockedUsers',
+  fields: [{ name: 'id', type: 'integer', interface: 'integer' }],
+};
+
+const USERS: CollectionOptions = {
+  name: 'users',
+  fields: [{ name: 'username', type: 'string', interface: 'input' }],
+};
+
+const POSTS: CollectionOptions = {
+  name: 'posts',
+  fields: [{ name: 'title', type: 'string', interface: 'input' }],
+};
+
+function mountWith(app: AppInstance, node: React.ReactNode) {
+  return render(<FlowEngineProvider engine={app.flowEngine}>{node}</FlowEngineProvider>);
+}
+
+function getMain(app: AppInstance) {
+  return app.dataSourceManager.getDataSource('main');
+}
+
+describe('ExtendCollectionsProvider', () => {
+  // The defining contract: a page-inner that reads `getCollection(name)` in its
+  // own render body (the LockedUsersPage pattern at LockedUsersPage.tsx:156-157)
+  // must see the registered collection on its FIRST render, with no extra tick.
+  it('lets children read the registered collection during their first render', () => {
+    const app = makeApp();
+    let firstRenderResult: { name?: string } | undefined;
+
+    const Child: React.FC = () => {
+      // Read synchronously during render — this is the contract that forces
+      // the provider to register collections in render-phase rather than in
+      // an effect.
+      const found = getMain(app)?.getCollection?.(LOCKED.name);
+      firstRenderResult = found ? { name: found.name } : undefined;
+      return <div>child</div>;
+    };
+
+    mountWith(
+      app,
+      <ExtendCollectionsProvider collections={[LOCKED]}>
+        <Child />
+      </ExtendCollectionsProvider>,
+    );
+
+    expect(firstRenderResult).toEqual({ name: LOCKED.name });
+  });
+
+  it('removes only the collections it added when unmounted', () => {
+    const app = makeApp();
+    // Pre-existing collection in the data source — provider must not touch it.
+    getMain(app).addCollection(USERS);
+
+    const { unmount } = mountWith(
+      app,
+      <ExtendCollectionsProvider collections={[LOCKED]}>
+        <span>inside</span>
+      </ExtendCollectionsProvider>,
+    );
+
+    expect(getMain(app).getCollection(LOCKED.name)?.name).toBe(LOCKED.name);
+    expect(getMain(app).getCollection(USERS.name)?.name).toBe(USERS.name);
+
+    unmount();
+
+    expect(getMain(app).getCollection(LOCKED.name)).toBeUndefined();
+    // The provider didn't add USERS, so it must leave it alone.
+    expect(getMain(app).getCollection(USERS.name)?.name).toBe(USERS.name);
+  });
+
+  // Direct regression for the lazy-ref idempotency: even when the provider
+  // re-renders many times (which is what StrictMode dev's double-render and
+  // any caller-driven re-render look like to the provider), it must not
+  // re-register the same collection or accumulate duplicate ownership.
+  it('only calls addCollection once across many re-renders of the same mount', () => {
+    const app = makeApp();
+    let addCount = 0;
+    const origAdd = getMain(app).addCollection.bind(getMain(app));
+    getMain(app).addCollection = (c: CollectionOptions) => {
+      addCount += 1;
+      origAdd(c);
+    };
+
+    const Host: React.FC = () => {
+      const [, setTick] = useState(0);
+      // Force a render burst on mount — covers StrictMode dev's second render
+      // and any other parent-driven re-renders. The lazy-ref guard in the
+      // provider must hold across all of them.
+      React.useEffect(() => {
+        setTick((n) => n + 1);
+        setTick((n) => n + 1);
+      }, []);
+      return (
+        <ExtendCollectionsProvider collections={[LOCKED]}>
+          <span>inside</span>
+        </ExtendCollectionsProvider>
+      );
+    };
+
+    const { unmount } = mountWith(app, <Host />);
+
+    expect(addCount).toBe(1);
+    expect(getMain(app).getCollection(LOCKED.name)?.name).toBe(LOCKED.name);
+
+    unmount();
+    expect(getMain(app).getCollection(LOCKED.name)).toBeUndefined();
+  });
+
+  // Default semantics: "static-at-mount". Caller's prop changes are ignored.
+  describe('with syncOnChange={false} (default)', () => {
+    it('ignores a `collections` prop reference change after mount', () => {
+      const app = makeApp();
+
+      const Host: React.FC = () => {
+        const [list, setList] = useState<CollectionOptions[]>([LOCKED]);
+        return (
+          <>
+            <button type="button" onClick={() => setList([LOCKED, POSTS])}>
+              add posts
+            </button>
+            <ExtendCollectionsProvider collections={list}>
+              <span>inside</span>
+            </ExtendCollectionsProvider>
+          </>
+        );
+      };
+
+      const { getByText } = mountWith(app, <Host />);
+      expect(getMain(app).getCollection(LOCKED.name)?.name).toBe(LOCKED.name);
+      expect(getMain(app).getCollection(POSTS.name)).toBeUndefined();
+
+      act(() => {
+        getByText('add posts').click();
+      });
+
+      // POSTS must NOT have been registered — syncOnChange is off.
+      expect(getMain(app).getCollection(POSTS.name)).toBeUndefined();
+      expect(getMain(app).getCollection(LOCKED.name)?.name).toBe(LOCKED.name);
+    });
+  });
+
+  describe('with syncOnChange={true}', () => {
+    it('adds collections newly added to the prop and removes ones dropped from it', () => {
+      const app = makeApp();
+
+      const Host: React.FC = () => {
+        const [list, setList] = useState<CollectionOptions[]>([LOCKED, POSTS]);
+        return (
+          <>
+            <button type="button" onClick={() => setList([POSTS, USERS])}>
+              swap
+            </button>
+            <ExtendCollectionsProvider collections={list} syncOnChange>
+              <span>inside</span>
+            </ExtendCollectionsProvider>
+          </>
+        );
+      };
+
+      const { getByText } = mountWith(app, <Host />);
+      expect(getMain(app).getCollection(LOCKED.name)?.name).toBe(LOCKED.name);
+      expect(getMain(app).getCollection(POSTS.name)?.name).toBe(POSTS.name);
+      expect(getMain(app).getCollection(USERS.name)).toBeUndefined();
+
+      act(() => {
+        getByText('swap').click();
+      });
+
+      // LOCKED was dropped from the prop → removed.
+      expect(getMain(app).getCollection(LOCKED.name)).toBeUndefined();
+      // POSTS was in both lists → kept.
+      expect(getMain(app).getCollection(POSTS.name)?.name).toBe(POSTS.name);
+      // USERS is new → added.
+      expect(getMain(app).getCollection(USERS.name)?.name).toBe(USERS.name);
+    });
+
+    it('still leaves pre-existing collections it never owned alone after diff', () => {
+      const app = makeApp();
+      // Pre-existing in the data source before the provider mounts.
+      getMain(app).addCollection(USERS);
+
+      const Host: React.FC = () => {
+        const [list, setList] = useState<CollectionOptions[]>([LOCKED, USERS]);
+        return (
+          <>
+            <button type="button" onClick={() => setList([LOCKED])}>
+              drop users
+            </button>
+            <ExtendCollectionsProvider collections={list} syncOnChange>
+              <span>inside</span>
+            </ExtendCollectionsProvider>
+          </>
+        );
+      };
+
+      const { getByText } = mountWith(app, <Host />);
+      // USERS was already there, so the provider never owned it.
+      expect(getMain(app).getCollection(USERS.name)?.name).toBe(USERS.name);
+
+      act(() => {
+        getByText('drop users').click();
+      });
+
+      // The prop dropped USERS, but the provider doesn't own it — must not
+      // accidentally remove it.
+      expect(getMain(app).getCollection(USERS.name)?.name).toBe(USERS.name);
+      expect(getMain(app).getCollection(LOCKED.name)?.name).toBe(LOCKED.name);
+    });
+  });
+
+  // Mid-session reload: the data source manager wipes everything and reloads
+  // from the server; client-only entries this provider registered would be
+  // gone. The `dataSource:loaded` event handler re-adds owned entries.
+  it('re-registers owned collections after a dataSource:loaded event', () => {
+    const app = makeApp();
+
+    mountWith(
+      app,
+      <ExtendCollectionsProvider collections={[LOCKED]}>
+        <span>inside</span>
+      </ExtendCollectionsProvider>,
+    );
+    expect(getMain(app).getCollection(LOCKED.name)?.name).toBe(LOCKED.name);
+
+    // Simulate the data source manager wiping then re-broadcasting the event.
+    act(() => {
+      getMain(app).removeCollection(LOCKED.name);
+      app.eventBus.dispatchEvent(new CustomEvent('dataSource:loaded', { detail: { dataSourceKey: 'main' } }));
+    });
+
+    expect(getMain(app).getCollection(LOCKED.name)?.name).toBe(LOCKED.name);
+  });
+});