feat: onSubmit prop

closes #10

.eslintrc.js

@@ -25,6 +25,8 @@ module.exports = {
       ],
     },
     'rules': {
+      'no-use-before-define': 'off',
+      '@typescript-eslint/no-use-before-define': 'error',
       'no-unused-vars': 'off',
       '@typescript-eslint/no-unused-vars': 'error',
       'no-dupe-class-members': 'off',

README.md

@@ -3,7 +3,7 @@ this is just a simple context wrapper around `jpex`
 
 ## useJpex
 ```ts
-() => JpexInstance
+() => Jpex
 ```
 
 ```tsx
@@ -47,7 +47,7 @@ const Page = () => {
 
 ## Provider
 ```ts
-ComponentType<{ value: JpexInstance }>
+ComponentType<{ value?: Jpex, onMount?: (jpex: Jpex) => void }>
 ```
 
 ```tsx
@@ -60,3 +60,15 @@ const App = () => (
 If you omit the `value` prop, the provider will implictly create a new jpex container from the previous one.
 
 If you there is no provider component in your app, `useJpex` will return the global `jpex` instance.
+
+The `onMount` prop allows you to access the current container and immediately register dependencies on mount.
+
+```tsx
+<Provider
+  onMount={(jpex) => {
+    jpex.constant<MyDependency>('foo');
+  }}
+>
+  <Page/>
+</Provider>
+```

package.json

@@ -26,28 +26,30 @@
     "@commitlint/config-conventional": "^9.1.2",
     "@jpex-js/babel-plugin": "^1.0.0",
     "@team-griffin/eslint-config": "^3.3.0",
+    "@testing-library/react": "^11.1.1",
     "@testing-library/react-hooks": "^3.4.1",
     "@types/react": "^16.9.49",
     "@typescript-eslint/eslint-plugin": "^4.0.1",
     "@typescript-eslint/parser": "^4.0.1",
     "ava": "^3.12.1",
     "browser-env": "^3.3.0",
     "eslint": "^7.8.1",
-    "jpex": "^4.0.0",
+    "jpex": "npm:jpex@^4.0.0",
     "jpex-v3": "npm:jpex@^3.2.0",
     "jpex-v4": "npm:jpex@^4.0.0",
     "module-alias": "^2.2.2",
     "nyc": "^15.1.0",
-    "react": "^16.13.1",
-    "react-test-renderer": "^16.13.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-test-renderer": "^17.0.1",
     "rollup": "^2.26.9",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "semantic-release": "^17.1.1",
-    "typescript": "^3.9.2"
+    "typescript": "^4.0.5"
   },
   "peerDependencies": {
     "jpex": "^3.0.0 || ^4.0.0",
-    "react": "^16.8.0"
+    "react": "^16.8.0 || ^17.0.0"
   }
 }

src/Provider.tsx

@@ -1,20 +1,38 @@
-import React, { useMemo, ReactNode } from 'react';
-import { JpexInstance } from 'jpex';
+import React, { ReactNode, useState, useEffect, useRef } from 'react';
+import { Jpex } from 'jpex';
 import useJpex from './useJpex';
 import context from './context';
 
 interface Props {
-  value?: JpexInstance,
+  value?: Jpex,
+  onMount?: (jpex: Jpex) => void,
   children?: ReactNode,
 }
 
 const { Provider } = context;
 
-const JpexProvider = ({ value, children }: Props) => {
+const JpexProvider = ({
+  value,
+  children,
+  onMount,
+}: Props) => {
   const parent = useJpex();
-  const container = useMemo(() => {
-    return value ?? parent.extend();
-  }, [ value ]);
+  const mounted = useRef(false);
+
+  const [ container, setContainer ] = useState(() => value ?? parent.extend());
+
+  useEffect(() => {
+    if (value && value !== container) {
+      setContainer(value);
+    }
+  }, [ value, setContainer ]);
+
+  if (!mounted.current) {
+    mounted.current = true;
+    if (onMount) {
+      onMount(container);
+    }
+  }
 
   return (
     <Provider value={container}>

src/__tests__/onMount.test.tsx

@@ -0,0 +1,66 @@
+import test from 'ava';
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Provider } from '..';
+import jpex, { Jpex } from 'jpex';
+
+test('calls onMount on mount', (t) => {
+  let called = false;
+  const callback = () => {
+    called = true;
+  };
+
+  render(
+    <Provider onMount={callback}>
+      <div/>
+    </Provider>
+  );
+
+  t.true(called);
+});
+
+test('passes the current jpex instance', (t) => {
+  const newJpex = jpex.extend();
+  let ioc: Jpex;
+  const callback = (jpex: Jpex) => {
+    ioc = jpex;
+  };
+
+  render(
+    <Provider
+      value={newJpex}
+      onMount={callback}
+    >
+      <div/>
+    </Provider>
+  );
+
+  t.is(ioc, newJpex);
+});
+
+test('does not call on subsequent renders', (t) => {
+  let callCount = 0;
+  const callback = () => {
+    callCount = callCount + 1;
+  };
+
+  const Inner = () => {
+    return (<div/>);
+  };
+
+  const { rerender } = render(
+    <Provider onMount={callback}>
+      <Inner/>
+    </Provider>
+  );
+
+  t.is(callCount, 1);
+
+  rerender(
+    <Provider onMount={callback}>
+      <Inner/>
+    </Provider>
+  );
+
+  t.is(callCount, 1);
+});

src/__tests__/useRegister.test.ts

@@ -4,7 +4,7 @@ import {
   Provider,
   useRegister,
 } from '..';
-import jpex, { JpexInstance } from 'jpex';
+import jpex, { Jpex } from 'jpex';
 
 test('calls a callback on mount', (t) => {
   let called = false;
@@ -18,8 +18,8 @@ test('calls a callback on mount', (t) => {
 });
 test('passes the current jpex instance', (t) => {
   const newJpex = jpex.extend();
-  let ioc: JpexInstance;
-  const callback = (jpex: JpexInstance) => {
+  let ioc: Jpex;
+  const callback = (jpex: Jpex) => {
     ioc = jpex;
   };
 

src/useRegister.ts

@@ -1,8 +1,8 @@
-import { JpexInstance } from 'jpex';
+import { Jpex } from 'jpex';
 import { useJpex } from '.';
 import { useRef } from 'react';
 
-const useRegister = (...fns: ((jpex: JpexInstance) => void)[]) => {
+const useRegister = (...fns: ((jpex: Jpex) => void)[]) => {
   const invoked = useRef(false);
   const jpex = useJpex();