review feedback

.changeset/twenty-rings-unite.md

@@ -16,19 +16,19 @@ All places that accepts the `endpoint` argument now additionally accepts a funct
 ```ts
 // uploadthing/client#uploadFiles
 uploadFiles(
-    (rr) => rr.videoAndImage,
+    (routeRegistry) => routeRegistry.videoAndImage,
     { ... }
 )
 
 // uploadthing/react#useUploadThing
 useUploadThing(
-    (rr) => rr.videoAndImage,
+    (routeRegistry) => routeRegistry.videoAndImage,
     { ... }
 )
 
 // uploadthing/react#UploadButton
 <UploadButton
-    endpoint={(rr) => rr.videoAndImage}
+    endpoint={(routeRegistry) => routeRegistry.videoAndImage}
     { ... }
 />
 ```

docs/src/app/(docs)/api-reference/client/page.mdx

@@ -41,15 +41,16 @@ The first parameter is the route endpoint to upload to, and the second parameter
 is an options object:
 
 <Note>
+
   The endpoint arg may be a string literal or a callback function:
 
 ```ts
-await uploadFiles((rr) => rr.routeEndpoint, { ... })
+await uploadFiles((routeRegistry) => routeRegistry.routeEndpoint, { ... })
 ```
 
-This way allows `Go to Defintion` on `routeEndpoint` to take you straight to
-your backend file route definition, which is not possible when using a string
-literal parameter.
+Using a callback function allows `Go to Defintion` on `routeEndpoint` to take
+you straight to your backend file route definition, which is not possible when
+using a string literal parameter.
 
 </Note>
 

docs/src/app/(docs)/api-reference/react/page.mdx

@@ -220,12 +220,12 @@ export const OurUploadButton = () => (
       The endpoint arg may be a string literal or a callback function:
 
       ```ts
-      await uploadFiles((rr) => rr.routeEndpoint, { ... })
+      await uploadFiles((routeRegistry) => routeRegistry.routeEndpoint, { ... })
       ```
 
-      This way allows `Go to Defintion` on `routeEndpoint` to take you straight to
-      your backend file route definition, which is not possible when using a string
-      literal parameter.
+      Using a callback function allows `Go to Defintion` on `routeEndpoint` to take
+      you straight to your backend file route definition, which is not possible when
+      using a string literal parameter.
 
     </Note>
 
@@ -376,12 +376,12 @@ export const OurUploadDropzone = () => (
       The endpoint arg may be a string literal or a callback function:
 
       ```ts
-      await uploadFiles((rr) => rr.routeEndpoint, { ... })
+      await uploadFiles((routeRegistry) => routeRegistry.routeEndpoint, { ... })
       ```
 
-      This way allows `Go to Defintion` on `routeEndpoint` to take you straight to
-      your backend file route definition, which is not possible when using a string
-      literal parameter.
+      Using a callback function allows `Go to Defintion` on `routeEndpoint` to take
+      you straight to your backend file route definition, which is not possible when
+      using a string literal parameter.
 
     </Note>
 
@@ -501,15 +501,16 @@ The first parameter is the route endpoint to upload to, and the second parameter
 is an options object:
 
 <Note>
-  The endpoint arg may be a string literal or a callback function:
+
+The endpoint arg may be a string literal or a callback function:
 
 ```ts
-useUploadThing((rr) => rr.routeEndpoint, { ... })
+useUploadThing((routeRegistry) => routeRegistry.routeEndpoint, { ... })
 ```
 
-This way allows `Go to Defintion` on `routeEndpoint` to take you straight to
-your backend file route definition, which is not possible when using a string
-literal parameter.
+Using a callback function allows `Go to Defintion` on `routeEndpoint` to take
+you straight to your backend file route definition, which is not possible when
+using a string literal parameter.
 
 </Note>
 

examples/backend-adapters/client-react/src/main.tsx

@@ -24,7 +24,7 @@ function App() {
           }}
         />
         <UploadDropzone
-          endpoint={(rr) => rr.videoAndImage}
+          endpoint={(routeRegistry) => routeRegistry.videoAndImage}
           onClientUploadComplete={(file) => {
             console.log("uploaded", file);
             alert("Upload complete");

examples/backend-adapters/client-vanilla/src/resumable-upload.ts

@@ -36,7 +36,7 @@ export const setupResumableUploader = (el: HTMLDivElement) => {
 
     // Create uploads for each file
     const { done, pauseUpload, resumeUpload } = await createUpload(
-      (rr) => rr.videoAndImage,
+      (routeRegistry) => routeRegistry.videoAndImage,
       {
         files,
         onUploadProgress: ({ file, progress }) => {

examples/minimal-appdir/src/app/page.tsx

@@ -32,7 +32,7 @@ export default function Home() {
         /**
          * @see https://docs.uploadthing.com/api-reference/react#uploadbutton
          */
-        endpoint={(_) => _.videoAndImage}
+        endpoint={(routeRegistry) => routeRegistry.videoAndImage}
         onClientUploadComplete={(res) => {
           console.log(`onClientUploadComplete`, res);
           alert("Upload Completed");
@@ -46,7 +46,7 @@ export default function Home() {
         /**
          * @see https://docs.uploadthing.com/api-reference/react#uploaddropzone
          */
-        endpoint={(_) => _.videoAndImage}
+        endpoint={(routeRegistry) => routeRegistry.videoAndImage}
         onUploadAborted={() => {
           alert("Upload Aborted");
         }}

examples/minimal-pagedir/src/pages/index.tsx

@@ -33,7 +33,7 @@ export default function Home() {
         /**
          * @see https://docs.uploadthing.com/api-reference/react#uploaddropzone
          */
-        endpoint={(rr) => rr.videoAndImage}
+        endpoint={(routeRegistry) => routeRegistry.videoAndImage}
         onClientUploadComplete={(res) => {
           console.log(`onClientUploadComplete`, res);
           alert("Upload Completed");

examples/minimal-solidstart/src/routes/index.tsx

@@ -40,7 +40,7 @@ export default function Home() {
         /**
          * @see https://docs.uploadthing.com/api-reference/react#uploaddropzone
          */
-        endpoint={(rr) => rr.videoAndImage}
+        endpoint={(routeRegistry) => routeRegistry.videoAndImage}
         onUploadBegin={(fileName) => {
           console.log("onUploadBegin", fileName);
         }}

examples/minimal-tanstack-start/app/routes/index.tsx

@@ -50,7 +50,7 @@ function Home() {
         /**
          * @see https://docs.uploadthing.com/api-reference/react#uploaddropzone
          */
-        endpoint={(rr) => rr.videoAndImage}
+        endpoint={(routeRegistry) => routeRegistry.videoAndImage}
         onUploadAborted={() => {
           alert("Upload Aborted");
         }}

examples/with-clerk-appdir/src/app/page.tsx

@@ -26,7 +26,7 @@ export default function Home() {
         /**
          * @see https://docs.uploadthing.com/api-reference/react#uploaddropzone
          */
-        endpoint={(rr) => rr.videoAndImage}
+        endpoint={(routeRegistry) => routeRegistry.videoAndImage}
         onClientUploadComplete={(res) => {
           console.log(`onClientUploadComplete`, res);
           alert("Upload Completed");

examples/with-clerk-pagesdir/src/pages/index.tsx

@@ -27,7 +27,7 @@ export default function Home() {
         /**
          * @see https://docs.uploadthing.com/api-reference/react#uploaddropzone
          */
-        endpoint={(rr) => rr.videoAndImage}
+        endpoint={(routeRegistry) => routeRegistry.videoAndImage}
         onClientUploadComplete={(res) => {
           console.log(`onClientUploadComplete`, res);
           alert("Upload Completed");

examples/with-drizzle-appdir/src/app/uploader.tsx

@@ -49,7 +49,7 @@ export function Uploader() {
         /**
          * @see https://docs.uploadthing.com/api-reference/react#uploaddropzone
          */
-        endpoint={(rr) => rr.videoAndImage}
+        endpoint={(routeRegistry) => routeRegistry.videoAndImage}
         onClientUploadComplete={(res) => {
           console.log(`onClientUploadComplete`, res);
           alert("Upload Completed");

examples/with-drizzle-pagesdir/src/pages/index.tsx

@@ -48,7 +48,7 @@ export default function Page() {
         /**
          * @see https://docs.uploadthing.com/api-reference/react#uploaddropzone
          */
-        endpoint={(rr) => rr.videoAndImage}
+        endpoint={(routeRegistry) => routeRegistry.videoAndImage}
         onClientUploadComplete={(res) => {
           console.log(`onClientUploadComplete`, res);
         }}

examples/with-novel/uploadthing/novel-plugin.ts

@@ -27,9 +27,12 @@ export const uploadFn = createImageUpload({
     /**
      * Upload the file to the server and preload the image in the browser
      */
-    const uploadPromise = uploadFiles((rr) => rr.imageUploader, {
-      files: [file],
-    });
+    const uploadPromise = uploadFiles(
+      (routeRegistry) => routeRegistry.imageUploader,
+      {
+        files: [file],
+      },
+    );
 
     return new Promise<string>((resolve) => {
       toast.promise(
@@ -47,7 +50,9 @@ export const uploadFn = createImageUpload({
     });
   },
   validateFn: (file) => {
-    const config = getRouteConfig((rr) => rr.imageUploader);
+    const config = getRouteConfig(
+      (routeRegistry) => routeRegistry.imageUploader,
+    );
     if (!isValidFileType(file, config)) {
       toast.error("File type not supported.");
       return false;

examples/with-tailwindcss/src/app/page.tsx

@@ -27,7 +27,7 @@ export default function Home() {
       />
       <UploadDropzone
         className="ut-label:text-lg ut-allowed-content:ut-uploading:text-red-300 ut-allowed-content:text-white w-full bg-slate-800"
-        endpoint={(rr) => rr.videoAndImage}
+        endpoint={(routeRegistry) => routeRegistry.videoAndImage}
         onClientUploadComplete={(res) => {
           console.log(`onClientUploadComplete`, res);
           alert("Upload Completed");

packages/react/test/client-generator.test.ts

@@ -152,13 +152,17 @@ it("infers output properly", () => {
 
 it("gets go-to-definition proxy as endpoint arg", () => {
   doNotExecute(async () => {
-    const { startUpload } = useUploadThing((rr) => rr.withFooInput);
+    const { startUpload } = useUploadThing(
+      (routeRegistry) => routeRegistry.withFooInput,
+    );
     type _Input = Parameters<typeof startUpload>[1];
     expectTypeOf<_Input>().toEqualTypeOf<{ foo: string }>();
   });
 
   doNotExecute(async () => {
-    const { startUpload } = useUploadThing((rr) => rr.exampleRoute);
+    const { startUpload } = useUploadThing(
+      (routeRegistry) => routeRegistry.exampleRoute,
+    );
     const res = await startUpload(files);
     expectTypeOf<ClientUploadedFileData<{ foo: "bar" }>[] | undefined>(res);
   });

packages/react/test/upload-button.test.tsx

@@ -118,7 +118,9 @@ describe("UploadButton - basic", () => {
   });
 
   it("fetches and displays route config (with callback endpoint arg)", async () => {
-    const utils = render(<UploadButton endpoint={(rr) => rr.image} />);
+    const utils = render(
+      <UploadButton endpoint={(routeRegistry) => routeRegistry.image} />,
+    );
     const label = utils.container.querySelector("label");
 
     if (!label) throw new Error("No label found");

packages/uploadthing/test/client.test.ts

@@ -122,7 +122,7 @@ describe("uploadFiles", () => {
     const file = new File(["foo"], "foo.txt", { type: "text/plain" });
 
     await expect(
-      uploadFiles((rr) => rr.foo, { files: [file] }),
+      uploadFiles((routeRegistry) => routeRegistry.foo, { files: [file] }),
     ).resolves.toEqual([
       {
         name: "foo.txt",
@@ -163,7 +163,7 @@ describe("uploadFiles", () => {
 
     const file = new File(["foo"], "foo.txt", { type: "text/plain" });
     await expect(
-      uploadFiles((rr) => rr.foo, {
+      uploadFiles((routeRegistry) => routeRegistry.foo, {
         files: [file],
         headers: {
           authorization: "Bearer my-auth-token",