fix(di): resolve bem#551 issue

artems · Apr 1, 2020 · 21cbf14 · 21cbf14
1 parent 4723e3d
commit 21cbf14
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 30 deletions.
diff --git a/packages/di/di.tsx b/packages/di/di.tsx
@@ -14,40 +14,49 @@ const RegistryProvider = registryContext.Provider
 
 export const RegistryConsumer = registryContext.Consumer
 
-export function withRegistry(...registries: Registry[]): <P>(Component: ComponentType<P>) => FC<P>
+export function withRegistry(...registries: Registry[]):
+  <P>(Component: ComponentType<P>) => React.ComponentType<P>
 export function withRegistry() {
   // Use arguments instead of rest-arguments to get faster and more compact code.
   const registries: Registry[] = [].slice.call(arguments)
 
   return function WithRegistry<P>(Component: ComponentType<P>) {
-    const RegistryResolver: FC<P> = (props) => {
-      return (
-        <RegistryConsumer>
-          {(contextRegistries) => {
-            const providedRegistries = { ...contextRegistries }
-
-            for (let i = 0; i < registries.length; i++) {
-              const registry = registries[i]
-              const overrides = contextRegistries[registry.id]
-              // eslint-disable-next-line no-nested-ternary
-              providedRegistries[registry.id] = registry.overridable
-                ? overrides
-                  ? registry.merge(overrides)
-                  : registry
-                : registry && overrides
-                  ? overrides.merge(registry)
-                  : registry
-            }
-
-            return (
-              <RegistryProvider value={providedRegistries}>
-                {/* Use createElement instead of jsx to avoid __assign from tslib. */}
-                {createElement(Component, props)}
-              </RegistryProvider>
-            )
-          }}
-        </RegistryConsumer>
-      )
+    class RegistryResolver extends React.PureComponent<P> {
+      static displayName = 'RegistryResolver';
+
+      protected providedRegistries: RegistryContext | null = null;
+
+      public render() {
+        return (
+          <RegistryConsumer>
+            {(contextRegistries) => {
+              if (!this.providedRegistries) {
+                this.providedRegistries = { ...contextRegistries }
+
+                for (let i = 0; i < registries.length; i++) {
+                  const registry = registries[i]
+                  const overrides = contextRegistries[registry.id]
+                  // eslint-disable-next-line no-nested-ternary
+                  this.providedRegistries[registry.id] = registry.overridable
+                    ? overrides
+                      ? registry.merge(overrides)
+                      : registry
+                    : registry && overrides
+                      ? overrides.merge(registry)
+                      : registry
+                }
+              }
+
+              return (
+                <RegistryProvider value={this.providedRegistries}>
+                  {/* Use createElement instead of jsx to avoid __assign from tslib. */}
+                  {createElement(Component, this.props)}
+                </RegistryProvider>
+              )
+            }}
+          </RegistryConsumer>
+        )
+      }
     }
 
     if (__DEV__) {

diff --git a/packages/di/test/di.test.tsx b/packages/di/test/di.test.tsx
@@ -204,7 +204,9 @@ describe('@bem-react/di', () => {
         overridedCompositorRegistry.set('Element', OverridedElement)
 
         const CompositorPresenter: React.FC<ICommonProps> = () => {
-          const Content: React.FC<ICommonProps> = withRegistry(overridedCompositorRegistry)(() => (
+          const Content: React.ComponentType<ICommonProps> = withRegistry(
+            overridedCompositorRegistry
+          )(() => (
             <ComponentRegistryConsumer id="Compositor">
               {({ Element }: ICompositorRegistry) => <Element />}
             </ComponentRegistryConsumer>