refactor(link): colocate resolver context APIs

Author: ENvironmentSet

extensions/link/README.md

@@ -4,7 +4,7 @@ It mimics the `<Link />` component behavior provided by Gatsby or Next.js.
 
 ## Dependencies
 
-Provide a URL resolver with `LinkUrlResolverContext`. The resolver can come
+Provide a URL resolver with `LinkUrlResolverProvider`. The resolver can come
 from `@stackflow/plugin-history-sync` or another routing plugin.
 
 ## Usage
@@ -57,12 +57,12 @@ const { Stack } = stackflow({
 Wrap `Stack` with the resolver from the routing plugin.
 
 ```tsx
-import { LinkUrlResolverContext } from "@stackflow/link";
+import { LinkUrlResolverProvider } from "@stackflow/link";
 
 const App = () => (
-  <LinkUrlResolverContext.Provider value={historySync.urlResolver}>
+  <LinkUrlResolverProvider resolver={historySync.urlResolver}>
     <Stack />
-  </LinkUrlResolverContext.Provider>
+  </LinkUrlResolverProvider>
 );
 ```
 

extensions/link/src/Link.tsx

@@ -3,22 +3,10 @@ import type {
   RegisteredActivityName,
 } from "@stackflow/config";
 import { useFlow } from "@stackflow/react";
-import { useContext, useMemo } from "react";
-import { LinkUrlResolverContext } from "./LinkUrlResolverContext";
+import { useMemo } from "react";
+import { useLinkUrlResolver } from "./LinkUrlResolverContext";
 import { omit } from "./omit";
 
-function useRequiredLinkUrlResolver() {
-  const urlResolver = useContext(LinkUrlResolverContext);
-
-  if (urlResolver === null) {
-    throw new Error(
-      "Link must be rendered inside a LinkUrlResolverContext.Provider.",
-    );
-  }
-
-  return urlResolver;
-}
-
 type AnchorProps = Omit<
   React.DetailedHTMLProps<
     React.AnchorHTMLAttributes<HTMLAnchorElement>,
@@ -37,7 +25,7 @@ export interface LinkProps<K extends RegisteredActivityName>
 }
 
 export function Link<K extends RegisteredActivityName>(props: LinkProps<K>) {
-  const urlResolver = useRequiredLinkUrlResolver();
+  const urlResolver = useLinkUrlResolver();
   const { push, replace } = useFlow();
 
   const href = useMemo(

extensions/link/src/LinkUrlResolverContext.ts

@@ -0,0 +1,38 @@
+import { createContext, type ReactNode, useContext } from "react";
+
+export interface LinkUrlResolver {
+  readonly makeActivityUrl: (
+    activityName: string,
+    activityParams: Record<string, any>,
+  ) => string;
+}
+
+export const LinkUrlResolverContext = createContext<LinkUrlResolver | null>(
+  null,
+);
+
+export function LinkUrlResolverProvider({
+  resolver,
+  children,
+}: {
+  resolver: LinkUrlResolver;
+  children: ReactNode;
+}) {
+  return (
+    <LinkUrlResolverContext.Provider value={resolver}>
+      {children}
+    </LinkUrlResolverContext.Provider>
+  );
+}
+
+export function useLinkUrlResolver() {
+  const urlResolver = useContext(LinkUrlResolverContext);
+
+  if (urlResolver === null) {
+    throw new Error(
+      "Link must be rendered inside a LinkUrlResolverContext.Provider.",
+    );
+  }
+
+  return urlResolver;
+}

extensions/link/src/LinkUrlResolverContext.tsx

@@ -1,3 +1,2 @@
 export * from "./Link";
-export type { LinkUrlResolver } from "./LinkUrlResolverContext";
-export { LinkUrlResolverContext } from "./LinkUrlResolverContext";
+export * from "./LinkUrlResolverContext";