Re-render extensible components on change

Allow extensions to be provided after initial render (e.g. via
dynamic import after hydration). A single ExtensionsProvider at
the root subscribes to extension changes and propagates updates
via context, avoiding per-component subscriptions.

REDMINE-21261

Author: tf

entry_types/scrolled/package/spec/frontend/extensions-spec.js

@@ -1,17 +1,18 @@
 import React from 'react';
 
 import '@testing-library/jest-dom/extend-expect'
-import {render} from '@testing-library/react'
+import {render, act} from '@testing-library/react'
 import {
   extensible,
   provideExtensions,
-  clearExtensions
+  clearExtensions,
+  ExtensionsProvider
 } from 'frontend/extensions';
 import {StaticPreview} from 'frontend/useScrollPositionLifecycle';
 
 describe('extensions', () => {
   afterEach(() => {
-    clearExtensions();
+    act(() => clearExtensions());
   });
 
   describe('extensible with decorator', () => {
@@ -113,6 +114,50 @@ describe('extensions', () => {
   });
 
   describe('provideExtensions', () => {
+    it('re-renders decorator after mount', () => {
+      const TestComponent = extensible('TestComponent', function TestComponent() {
+        return <span>Component</span>;
+      });
+
+      const {container} = render(<ExtensionsProvider><TestComponent /></ExtensionsProvider>);
+      expect(container).not.toHaveTextContent('Decorator');
+
+      act(() => {
+        provideExtensions({
+          decorators: {
+            TestComponent({children}) {
+              return <div>Decorator{children}</div>;
+            }
+          }
+        });
+      });
+
+      expect(container).toHaveTextContent('DecoratorComponent');
+    });
+
+    it('re-renders alternative after mount', () => {
+      const TestComponent = extensible('TestComponent', function TestComponent() {
+        return <span>Original</span>;
+      });
+
+      const {container} = render(<ExtensionsProvider><TestComponent /></ExtensionsProvider>);
+      expect(container).toHaveTextContent('Original');
+
+      act(() => {
+        provideExtensions({
+          alternatives: {
+            TestComponent() {
+              return <span>Alternative</span>;
+            }
+          }
+        });
+      });
+
+      expect(container).toHaveTextContent('Alternative');
+      expect(container).not.toHaveTextContent('Original');
+    });
+
+
     it('replaces previous extensions', () => {
       const TestComponent = extensible('TestComponent', function TestComponent() {
         return <span>Original</span>;

entry_types/scrolled/package/spec/frontend/inlineEditingWithLoadedComponents-spec.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import '@testing-library/jest-dom/extend-expect'
-import {render} from '@testing-library/react'
+import {render, act} from '@testing-library/react'
 import {extensible, clearExtensions} from 'frontend/extensions';
 import {loadInlineEditingComponents} from 'frontend/inlineEditing';
 import {StaticPreview} from 'frontend/useScrollPositionLifecycle';
@@ -23,7 +23,7 @@ jest.mock('frontend/inlineEditing/components', () => ({
 
 describe('extensions with loaded inline editing components', () => {
   afterAll(() => {
-    clearExtensions();
+    act(() => clearExtensions());
   });
 
   describe('decorator', () => {

entry_types/scrolled/package/src/frontend/RootProviders.js

@@ -12,31 +12,34 @@ import {MediaMutedProvider} from './useMediaMuted';
 import {AudioFocusProvider} from './useAudioFocus';
 import {ConsentProvider} from './thirdPartyConsent';
 import {CurrentSectionProvider} from './useCurrentChapter';
+import {ExtensionsProvider} from './extensions';
 import {ScrollTargetEmitterProvider} from './useScrollTarget';
 
 export function RootProviders({seed, consent = consentApi, children}) {
   return (
     <FocusOutlineProvider>
       <BrowserFeaturesProvider>
-        <PhonePlatformProvider>
-          <PhoneLayoutProvider>
-            <MediaMutedProvider>
-              <AudioFocusProvider>
-                <EntryStateProvider seed={seed}>
-                  <CurrentSectionProvider>
-                    <LocaleProvider>
-                      <ConsentProvider consent={consent}>
-                        <ScrollTargetEmitterProvider>
-                          {children}
-                        </ScrollTargetEmitterProvider>
-                      </ConsentProvider>
-                    </LocaleProvider>
-                  </CurrentSectionProvider>
-                </EntryStateProvider>
-              </AudioFocusProvider>
-            </MediaMutedProvider>
-          </PhoneLayoutProvider>
-        </PhonePlatformProvider>
+        <ExtensionsProvider>
+          <PhonePlatformProvider>
+            <PhoneLayoutProvider>
+              <MediaMutedProvider>
+                <AudioFocusProvider>
+                  <EntryStateProvider seed={seed}>
+                    <CurrentSectionProvider>
+                      <LocaleProvider>
+                        <ConsentProvider consent={consent}>
+                          <ScrollTargetEmitterProvider>
+                            {children}
+                          </ScrollTargetEmitterProvider>
+                        </ConsentProvider>
+                      </LocaleProvider>
+                    </CurrentSectionProvider>
+                  </EntryStateProvider>
+                </AudioFocusProvider>
+              </MediaMutedProvider>
+            </PhoneLayoutProvider>
+          </PhonePlatformProvider>
+        </ExtensionsProvider>
       </BrowserFeaturesProvider>
     </FocusOutlineProvider>
   );

entry_types/scrolled/package/src/frontend/extensions.js

@@ -1,35 +1,67 @@
-import React from 'react';
+import React, {createContext, useContext, useEffect, useState} from 'react';
 
 import {useIsStaticPreview} from './useScrollPositionLifecycle';
 
 let decorators = {};
 let alternatives = {};
+let listeners = [];
+
+function subscribe(listener) {
+  listeners = [...listeners, listener];
+  return () => { listeners = listeners.filter(l => l !== listener); };
+}
+
+function notifyListeners() {
+  listeners.forEach(l => l());
+}
 
 export function provideExtensions({decorators: d, alternatives: a} = {}) {
   decorators = d || {};
   alternatives = a || {};
+  notifyListeners();
 }
 
 export function clearExtensions() {
   decorators = {};
   alternatives = {};
+  notifyListeners();
+}
+
+const ExtensionsContext = createContext(0);
+
+export function ExtensionsProvider({children}) {
+  const [version, setVersion] = useState(0);
+
+  useEffect(() => subscribe(() => setVersion(v => v + 1)), []);
+
+  return (
+    <ExtensionsContext.Provider value={version}>
+      {children}
+    </ExtensionsContext.Provider>
+  );
+}
+
+function useExtensions() {
+  useContext(ExtensionsContext);
+  return {decorators, alternatives};
 }
 
 export function extensible(name, Component) {
   return function ExtensibleComponent(props) {
     const isStaticPreview = useIsStaticPreview();
+    const extensions = useExtensions();
 
     if (isStaticPreview) {
       return <Component {...props} />;
     }
 
-    const Alternative = alternatives[name];
+    const Alternative = extensions.alternatives[name];
 
     if (Alternative) {
       return <Alternative {...props} />;
     }
 
-    const Decorator = decorators[name];
+    const Decorator = extensions.decorators[name];
 
     if (Decorator) {
       return <Decorator {...props}><Component {...props} /></Decorator>;