fix: default Context value

Author: zombieJ

src/context.tsx

@@ -25,12 +25,13 @@ export interface ContextSelectorProviderProps<T> {
 export interface SelectorContext<ContextProps> {
   Context: React.Context<Context<ContextProps>>;
   Provider: React.ComponentType<ContextSelectorProviderProps<ContextProps>>;
+  defaultValue?: ContextProps;
 }
 
 export function createContext<ContextProps>(
-  defaultContext?: ContextProps,
+  defaultValue?: ContextProps,
 ): SelectorContext<ContextProps> {
-  const Context = React.createContext<Context<ContextProps>>(defaultContext as any);
+  const Context = React.createContext<Context<ContextProps>>(undefined);
 
   const Provider = ({ value, children }: ContextSelectorProviderProps<ContextProps>) => {
     const valueRef = React.useRef(value);
@@ -52,13 +53,11 @@ export function createContext<ContextProps>(
     return <Context.Provider value={context}>{children}</Context.Provider>;
   };
 
-  return { Context, Provider };
+  return { Context, Provider, defaultValue };
 }
 
 /** e.g. useSelect(userContext) => user */
-export function useContext<ContextProps>(
-  holder: SelectorContext<ContextProps>,
-): ContextProps;
+export function useContext<ContextProps>(holder: SelectorContext<ContextProps>): ContextProps;
 
 /** e.g. useSelect(userContext, user => user.name) => user.name */
 export function useContext<ContextProps, SelectorValue>(
@@ -105,7 +104,7 @@ export function useContext<ContextProps, SelectorValue>(
   const { listeners, getValue } = context || {};
 
   const valueRef = React.useRef<SelectorValue>();
-  valueRef.current = eventSelector(context ? getValue() : null);
+  valueRef.current = eventSelector(context ? getValue() : holder?.defaultValue);
   const [, forceUpdate] = React.useState({});
 
   useLayoutEffect(() => {

tests/context.test.tsx

@@ -185,4 +185,17 @@ describe('Basic', () => {
     expect(container.querySelector('#times')!.textContent).toEqual('2');
     expect(container.querySelector('#value')!.textContent).toEqual('light');
   });
+
+  it('defaultValue', () => {
+    const DefaultContext = createContext('little');
+    const Demo = () => (
+      <>
+        <Value id="value" value={useContext(DefaultContext)} />
+      </>
+    );
+
+    const { container } = render(<Demo />);
+
+    expect(container.querySelector('#value')!.textContent).toEqual('little');
+  });
 });