add support for canary's use function

Author: EskiMojo14

package.json

@@ -66,7 +66,7 @@
     "@arethetypeswrong/cli": "^0.15.2",
     "@size-limit/preset-small-lib": "^11.1.2",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.2",
+    "@testing-library/react": "^15",
     "@types/eslint": "^8",
     "@types/react": "^18",
     "@types/react-dom": "^18",
@@ -81,12 +81,19 @@
     "lint-staged": "^15.2.2",
     "prettier": "^3.2.5",
     "publint": "^0.2.7",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "canary",
+    "react-dom": "canary",
     "rimraf": "^5.0.5",
     "size-limit": "^11.1.2",
     "tsup": "^8.0.2",
     "typescript": "^5.4.3",
     "vitest": "^1.4.0"
+  },
+  "resolutions": {
+    "react": "npm:canary",
+    "react-dom": "npm:canary"
+  },
+  "dependencies": {
+    "@testing-library/user-event": "^14.5.2"
   }
 }

src/canary.test.tsx

@@ -0,0 +1,88 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React, { useState } from "react";
+import { describe, expect, it } from "vitest";
+import { use } from "./canary";
+import { createRequiredContext } from ".";
+
+describe("canary support", () => {
+  describe("use", () => {
+    const { TestContext, TestProvider } = createRequiredContext<string>().with({
+      name: "test",
+    });
+
+    function TestComponent() {
+      const value = use(TestContext);
+      return <div>{value}</div>;
+    }
+
+    it("throws when value is not set", () => {
+      expect(() => render(<TestComponent />)).toThrow(
+        "use: context value is not set. Use TestProvider to set the value.",
+      );
+    });
+
+    it("does not throw when value is set", () => {
+      expect(() =>
+        render(
+          <TestProvider test="Hello">
+            <TestComponent />
+          </TestProvider>,
+        ),
+      ).not.toThrow();
+
+      expect(screen.getByText("Hello")).toBeInTheDocument();
+    });
+
+    const user = userEvent.setup();
+
+    function Button() {
+      const [clicked, setClicked] = useState(false);
+      const text = clicked ? use(TestContext) : "Click me";
+      return (
+        <button
+          onClick={() => {
+            setClicked(true);
+          }}
+        >
+          {text}
+        </button>
+      );
+    }
+
+    it("can be called conditionally", async () => {
+      render(
+        <TestProvider test="Clicked">
+          <Button />
+        </TestProvider>,
+      );
+
+      const button = screen.getByRole("button", { name: "Click me" });
+
+      expect(button).toBeInTheDocument();
+
+      await user.click(button);
+
+      expect(button).toHaveTextContent("Clicked");
+    });
+
+    it("still throws if called conditionally", async () => {
+      render(<Button />);
+
+      const button = screen.getByRole("button", { name: "Click me" });
+
+      expect(button).toBeInTheDocument();
+
+      try {
+        await user.click(button);
+
+        expect.unreachable("Should throw");
+      } catch (error) {
+        expect(error).toBeInstanceOf(Error);
+        expect((error as Error).message).toBe(
+          "use: context value is not set. Use TestProvider to set the value.",
+        );
+      }
+    });
+  });
+});

src/canary.tsx

@@ -0,0 +1,15 @@
+// eslint-disable-next-line import/no-unresolved
+/// <reference types="react/canary" />
+import { use as originalUse } from "react";
+import type { RequiredContext } from "./types";
+import { UNSET_VALUE } from "./types";
+import { notSet } from ".";
+
+export function use<T>(context: RequiredContext<T>): T {
+  const value = originalUse(context);
+  if (value === UNSET_VALUE) {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    throw new Error(notSet("use", context.providerName ?? "UnknownProvider"));
+  }
+  return value;
+}

src/index.tsx

@@ -1,12 +1,12 @@
 import type { PropsWithChildren, ConsumerProps } from "react";
 import React, { createContext, useContext, useDebugValue } from "react";
-import type { Names, NamedRequiredContext } from "./types";
+import type { Names, NamedRequiredContext, RequiredContext } from "./types";
 import { UNSET_VALUE } from "./types";
 import { assert, capitalise } from "./util";
 
 export { UNSET_VALUE };
 
-const notSet = (caller: string, providerName: string) =>
+export const notSet = (caller: string, providerName: string) =>
   `${caller}: context value is not set. Use ${providerName} to set the value.`;
 
 export function createRequiredContext<T>() {
@@ -35,8 +35,13 @@ export function createRequiredContext<T>() {
         hookName.startsWith("use"),
         `createRequiredContext: hookName must start with "use". Got: ${hookName}`,
       );
-      const Context = createContext<T | typeof UNSET_VALUE>(UNSET_VALUE);
-      Context.displayName = contextName;
+      const Context: RequiredContext<T> = Object.assign(
+        createContext<T | typeof UNSET_VALUE>(UNSET_VALUE),
+        {
+          providerName,
+          displayName: contextName,
+        },
+      );
       return {
         [contextName]: Context,
         [providerName](props: PropsWithChildren<Record<string, T>>) {

src/types.ts

@@ -44,8 +44,13 @@ type GetHookName<N extends Names> = GetName<
   `use${Capitalize<N["name"]>}`
 >;
 
+export interface RequiredContext<T> extends Context<T | typeof UNSET_VALUE> {
+  displayName: string;
+  providerName: string;
+}
+
 export type NamedRequiredContext<T, N extends Names> = Compute<
-  Record<GetContextName<N>, Context<T | typeof UNSET_VALUE>> &
+  Record<GetContextName<N>, RequiredContext<T>> &
     Record<
       GetProviderName<N>,
       FC<PropsWithChildren<Record<GetProviderProp<N>, T>>>

src/util.ts

@@ -14,3 +14,6 @@ export function assert(
     throw new Error(typeof message === "string" ? message : message());
   }
 }
+
+export const safeAssign: <T>(target: T, source: Partial<T>) => T =
+  Object.assign;