Fix provider global clenup on error

src/eslint/rules/no-extraneous.js

@@ -62,7 +62,9 @@ module.exports = {
 
         blockReferences.set(node, {
           di: diVars,
-          through: context.getScope().through.map((v) => v.identifier),
+          through: context.sourceCode
+            .getScope(node)
+            .through.map((v) => v.identifier),
         });
       },
 

src/react/__tests__/provider.test.js

@@ -3,7 +3,7 @@
  */
 /* eslint-env jest */
 
-import React, { forwardRef } from 'react';
+import React, { Component, forwardRef } from 'react';
 import { render } from '@testing-library/react';
 
 import { Context } from '../context';
@@ -27,6 +27,20 @@ describe('DiProvider', () => {
     });
   });
 
+  it('should expose stable context', () => {
+    const children = jest.fn();
+    const App = () => (
+      <DiProvider use={[]}>
+        <Context.Consumer>{children}</Context.Consumer>
+      </DiProvider>
+    );
+
+    const { rerender } = render(<App />);
+    rerender(<App />);
+
+    expect(children.mock.calls[0][0]).toBe(children.mock.calls[1][0]);
+  });
+
   describe('getDependencies()', () => {
     const Text = () => 'text';
     const Button = forwardRef(() => 'button');
@@ -161,6 +175,38 @@ describe('DiProvider', () => {
     expect(globalDi._remove).toHaveBeenCalledWith([TextDi2]);
   });
 
+  it('should remove global injection on error', () => {
+    jest.spyOn(globalDi, '_remove');
+    const cSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    const children = jest.fn().mockImplementation(() => {
+      throw new Error('Oops!');
+    });
+    const TextDi = injectable(Text, () => '', { global: true });
+    const TextDi2 = injectable(Text, () => '');
+    class ErrorBoundary extends Component {
+      componentDidCatch() {
+        cSpy.mockRestore();
+      }
+      render() {
+        return this.props.children;
+      }
+    }
+
+    render(
+      <ErrorBoundary>
+        <DiProvider use={[TextDi]}>
+          <DiProvider use={[TextDi2]} global>
+            <Context.Consumer>{children}</Context.Consumer>
+          </DiProvider>
+        </DiProvider>
+      </ErrorBoundary>
+    );
+
+    expect(globalDi._remove).toHaveBeenCalledWith([TextDi]);
+    expect(globalDi._remove).toHaveBeenCalledWith([TextDi2]);
+  });
+
   it('should error when a non injectable is used', () => {
     const cSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
     expect(() => {

src/react/provider.js

@@ -1,16 +1,42 @@
-import React, { useContext, useMemo, forwardRef, useEffect } from 'react';
+import React, { forwardRef, Component } from 'react';
 import PropTypes from 'prop-types';
 
 import { diRegistry } from './constants';
 import { Context } from './context';
 import { addInjectableToMap, getDisplayName, findInjectable } from './utils';
 import { globalDi } from './global';
 
-export const DiProvider = ({ children, use, target, global }) => {
-  const { getDependencies } = useContext(Context);
+export class DiProvider extends Component {
+  static contextType = Context;
+
+  static propTypes = {
+    children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+    global: PropTypes.bool,
+    target: PropTypes.oneOfType([
+      PropTypes.func,
+      PropTypes.arrayOf(PropTypes.func),
+    ]),
+    use: PropTypes.arrayOf(
+      PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+    ).isRequired,
+  };
+
+  componentDidCatch(err) {
+    globalDi._remove(this.props.use);
+    throw err;
+  }
+
+  componentWillUnmount() {
+    globalDi._remove(this.props.use);
+  }
+
+  value = undefined;
+  getValue() {
+    if (this.value) return this.value;
+
+    const { use, target, global } = this.props;
+    const { getDependencies } = this.context;
 
-  // memo provider value so gets computed only once
-  const value = useMemo(() => {
     // create a map of dependency real -> replacements for fast lookup
     const replacementMap = use.reduce((acc, inj) => {
       addInjectableToMap(acc, inj);
@@ -21,7 +47,7 @@ export const DiProvider = ({ children, use, target, global }) => {
     // support single or multiple targets
     const targets = target && (Array.isArray(target) ? target : [target]);
 
-    return {
+    this.value = {
       getDependencies(realDeps, targetChild) {
         // First we collect dependencies from parent provider(s) (if any)
         const dependencies = getDependencies(realDeps, targetChild);
@@ -44,25 +70,17 @@ export const DiProvider = ({ children, use, target, global }) => {
         return dependencies;
       },
     };
-  }, [getDependencies]); // ignore use & target props
-
-  // on unmount
-  useEffect(() => () => globalDi._remove(use), []); // ignore use prop
+    return this.value;
+  }
 
-  return <Context.Provider value={value}>{children}</Context.Provider>;
-};
-
-DiProvider.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-  global: PropTypes.bool,
-  target: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.arrayOf(PropTypes.func),
-  ]),
-  use: PropTypes.arrayOf(
-    PropTypes.oneOfType([PropTypes.func, PropTypes.object])
-  ).isRequired,
-};
+  render() {
+    return (
+      <Context.Provider value={this.getValue()}>
+        {this.props.children}
+      </Context.Provider>
+    );
+  }
+}
 
 export function withDi(Comp, deps, target = null) {
   const WrappedComponent = forwardRef((props, ref) => (