Merged useFn and context

Author: FabianHummel

packages/context/README.md

@@ -141,7 +141,9 @@ Note that this component solely serves as syntactic sugar and doesn't provide an
 
 ### How to use it
 
-`ConsumeContext` takes a `useFn` prop with the context's `use...()` function and a `children` prop that will receive the context value. The use function may directly come from `createContextProvider()`.
+`ConsumeContext` takes a `use` prop that can be either one of the following:
+* A `use...()` function returned by `createContextProvider` or a inline function that returns the context value like `() => useContext(MyContext)`.
+* A `context` prop that takes a raw SolidJS context created by `createContext()`.
 
 ```tsx
 import { createContextProvider, ConsumeContext } from "@solid-primitives/context";
@@ -155,27 +157,27 @@ const [CounterProvider, useCounter] = createContextProvider(() => {
 
 // Provide it, consume it and use it in the same JSX block
 <CounterProvider>
-  <ConsumeContext useFn={useCounter}>
+  <ConsumeContext use={useCounter}>
     {({ count, increment }) => (
       <div>
         <button onClick={increment}>Increment</button>
         <span>{count()}</span>
       </div>
     )}
   </ConsumeContext>
-</CounterProvider>;
+</CounterProvider>
 ```
 
-Alternatively, you may also pass the raw SolidJS context over `context` in case you have created a context using `createContext()`.
+With the raw SolidJS context returned by `createContext()`:
 
 ```tsx
 import { ConsumeContext } from "@solid-primitives/context";
 
 // Create a context
-const CounterContext = createContext(/*...*/);
+const counterContext = createContext(/*...*/);
 
 // Consume it using the raw context
-<ConsumeContext context={CounterContext}>
+<ConsumeContext use={counterContext}>
   {({ count, increment }) => {
     // ...
   }}

packages/context/src/index.ts

@@ -135,31 +135,49 @@ export function MultiProvider<T extends readonly [unknown?, ...unknown[]]>(props
  * </CounterProvider>
  * ```
  *
- * @param useFn A function that returns the context value. Preferably the `use...()` function returned from `createContextProvider()`.
- * @param context The context object itself returned by `createContext()`. If `useFn` is provided, this will be ignored.
+ * @param use Either one of the following:
+ *  - A function that returns the context value. Preferably the `use...()` function returned from `createContextProvider()`.
+ *  - The context itself returned from `createContext()`.
+ *  - A inline function that returns the context value.
  *
  * @example
  * ```tsx
  * // create the context
  * const [CounterProvider, useCounter] // = createContextProvider(...)
  *
- * // use the context
- * <ConsumeContext useFn={useCounter}>
- *   {({ count }) => (
- *     <div>Count: {count()}</div>
- *   )}
- * </ConsumeContext>
+ * // provide and use the context
+ * <CounterProvider count={1}>
+ *   <ConsumeContext use={useCounter}>
+ *     {({ count }) => (
+ *       <div>Count: {count()}</div>
+ *     )}
+ *   </ConsumeContext>
+ * </CounterProvider>
+ * ```
+ *
+ * ```tsx
+ * // create the context
+ * const counterContext = createContext({ count: 0 });
+ *
+ * // provide and use the context
+ * <counterContext.Provider value={{ count: 1 }}>
+ *   <ConsumeContext use={counterContext}>
+ *     {({ count }) => (
+ *       <div>Count: {count}</div>
+ *     )}
+ *   </ConsumeContext>
+ * </counterContext.Provider>
  * ```
  */
 export function ConsumeContext<T>(props: {
-  children: (value: T | undefined) => JSX.Element
-} & ({
-  useFn: () => T | undefined,
-  context?: never;
-} | {
-  useFn?: never;
-  context: Context<T>;
-})): JSX.Element {
-  const context = props.useFn ? props.useFn() : useContext(props.context);
+  children: (value: T | undefined) => JSX.Element,
+  use: (() => T | undefined) | Context<T>,
+}): JSX.Element {
+  let context: T | undefined;
+  if (typeof props.use === "function") {
+    context = props.use();
+  } else {
+    context = useContext(props.use);
+  }
   return props.children(context);
 }

packages/context/test/index.test.tsx

@@ -109,41 +109,35 @@ describe("MultiProvider", () => {
 });
 
 describe("ConsumeContext", () => {
-  test("consumes a context via use-function", () => {
+  test("consumes a context", () => {
     const Ctx = createContext<string>("Hello");
+    const useCtx = () => useContext(Ctx);
 
-    function useCtx() {
-      return useContext(Ctx);
-    }
-
-    let capture;
+    let capture1;
+    let capture2;
+    let capture3;
     createRoot(() => {
       <Ctx.Provider value="World">
-        <ConsumeContext useFn={useCtx}>
+        <ConsumeContext use={Ctx}>
           {value => (
-            capture = value
+            capture1 = value
           )}
         </ConsumeContext>
-      </Ctx.Provider>;
-    });
-
-    expect(capture).toBe("World");
-  });
-
-  test("consumes a context via context object", () => {
-    const Ctx = createContext<string>("Hello");
-
-    let capture;
-    createRoot(() => {
-      <Ctx.Provider value="World">
-        <ConsumeContext context={Ctx}>
+        <ConsumeContext use={useCtx}>
           {value => (
-            capture = value
+            capture2 = value
+          )}
+        </ConsumeContext>
+        <ConsumeContext use={() => useContext(Ctx)}>
+          {value => (
+            capture3 = value
           )}
         </ConsumeContext>
       </Ctx.Provider>;
     });
 
-    expect(capture).toBe("World");
+    expect(capture1).toBe("World");
+    expect(capture2).toBe("World");
+    expect(capture3).toBe("World");
   });
 });

packages/context/test/server.test.tsx

@@ -63,39 +63,33 @@ describe("MultiProvider", () => {
 describe("ConsumeContext", () => {
   test("consumes a context via use-function", () => {
     const Ctx = createContext<string>("Hello");
+    const useCtx = () => useContext(Ctx);
 
-    function useCtx() {
-      return useContext(Ctx);
-    }
-
-    let capture;
+    let capture1;
+    let capture2;
+    let capture3;
     renderToString(() => {
       <Ctx.Provider value="World">
-        <ConsumeContext useFn={useCtx}>
+        <ConsumeContext use={Ctx}>
           {value => (
-            capture = value
+            capture1 = value
           )}
         </ConsumeContext>
-      </Ctx.Provider>;
-    });
-
-    expect(capture).toBe("World");
-  });
-
-  test("consumes a context via context object", () => {
-    const Ctx = createContext<string>("Hello");
-
-    let capture;
-    renderToString(() => {
-      <Ctx.Provider value="World">
-        <ConsumeContext context={Ctx}>
+        <ConsumeContext use={useCtx}>
           {value => (
-            capture = value
+            capture2 = value
+          )}
+        </ConsumeContext>
+        <ConsumeContext use={() => useContext(Ctx)}>
+          {value => (
+            capture3 = value
           )}
         </ConsumeContext>
       </Ctx.Provider>;
     });
 
-    expect(capture).toBe("World");
+    expect(capture1).toBe("World");
+    expect(capture2).toBe("World");
+    expect(capture3).toBe("World");
   });
 });