From bf047798b6b5bd01a40fd1af49e7c76133ce6ad6 Mon Sep 17 00:00:00 2001 From: juliusmarminge Date: Wed, 23 Oct 2024 10:41:37 +0200 Subject: [PATCH] review feedback --- .changeset/twenty-rings-unite.md | 6 ++--- .../app/(docs)/api-reference/client/page.mdx | 9 ++++--- .../app/(docs)/api-reference/react/page.mdx | 27 ++++++++++--------- .../client-react/src/main.tsx | 2 +- .../client-vanilla/src/resumable-upload.ts | 2 +- examples/minimal-appdir/src/app/page.tsx | 4 +-- examples/minimal-pagedir/src/pages/index.tsx | 2 +- .../minimal-solidstart/src/routes/index.tsx | 2 +- .../app/routes/index.tsx | 2 +- examples/with-clerk-appdir/src/app/page.tsx | 2 +- .../with-clerk-pagesdir/src/pages/index.tsx | 2 +- .../with-drizzle-appdir/src/app/uploader.tsx | 2 +- .../with-drizzle-pagesdir/src/pages/index.tsx | 2 +- .../with-novel/uploadthing/novel-plugin.ts | 13 ++++++--- examples/with-tailwindcss/src/app/page.tsx | 2 +- packages/react/test/client-generator.test.ts | 8 ++++-- packages/react/test/upload-button.test.tsx | 4 ++- packages/uploadthing/test/client.test.ts | 4 +-- 18 files changed, 54 insertions(+), 41 deletions(-) diff --git a/.changeset/twenty-rings-unite.md b/.changeset/twenty-rings-unite.md index a6d82cddd1..5ada93d0bf 100644 --- a/.changeset/twenty-rings-unite.md +++ b/.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 rr.videoAndImage} + endpoint={(routeRegistry) => routeRegistry.videoAndImage} { ... } /> ``` \ No newline at end of file diff --git a/docs/src/app/(docs)/api-reference/client/page.mdx b/docs/src/app/(docs)/api-reference/client/page.mdx index 88c619cf1c..48ebe7787d 100644 --- a/docs/src/app/(docs)/api-reference/client/page.mdx +++ b/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: + 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. diff --git a/docs/src/app/(docs)/api-reference/react/page.mdx b/docs/src/app/(docs)/api-reference/react/page.mdx index 85ff569592..3ef615c842 100644 --- a/docs/src/app/(docs)/api-reference/react/page.mdx +++ b/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. @@ -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. @@ -501,15 +501,16 @@ The first parameter is the route endpoint to upload to, and the second parameter is an options object: - 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. diff --git a/examples/backend-adapters/client-react/src/main.tsx b/examples/backend-adapters/client-react/src/main.tsx index 8de92a144c..cd732011db 100644 --- a/examples/backend-adapters/client-react/src/main.tsx +++ b/examples/backend-adapters/client-react/src/main.tsx @@ -24,7 +24,7 @@ function App() { }} /> rr.videoAndImage} + endpoint={(routeRegistry) => routeRegistry.videoAndImage} onClientUploadComplete={(file) => { console.log("uploaded", file); alert("Upload complete"); diff --git a/examples/backend-adapters/client-vanilla/src/resumable-upload.ts b/examples/backend-adapters/client-vanilla/src/resumable-upload.ts index e754c9ffe0..3f9c3964a7 100644 --- a/examples/backend-adapters/client-vanilla/src/resumable-upload.ts +++ b/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 }) => { diff --git a/examples/minimal-appdir/src/app/page.tsx b/examples/minimal-appdir/src/app/page.tsx index cdce847868..6a6a87c6fb 100644 --- a/examples/minimal-appdir/src/app/page.tsx +++ b/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"); }} diff --git a/examples/minimal-pagedir/src/pages/index.tsx b/examples/minimal-pagedir/src/pages/index.tsx index 87fee99d87..f3731bb2af 100644 --- a/examples/minimal-pagedir/src/pages/index.tsx +++ b/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"); diff --git a/examples/minimal-solidstart/src/routes/index.tsx b/examples/minimal-solidstart/src/routes/index.tsx index 910f66c1c6..5ab4625a33 100644 --- a/examples/minimal-solidstart/src/routes/index.tsx +++ b/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); }} diff --git a/examples/minimal-tanstack-start/app/routes/index.tsx b/examples/minimal-tanstack-start/app/routes/index.tsx index df0254580b..1d3392dedc 100644 --- a/examples/minimal-tanstack-start/app/routes/index.tsx +++ b/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"); }} diff --git a/examples/with-clerk-appdir/src/app/page.tsx b/examples/with-clerk-appdir/src/app/page.tsx index 27603332b6..85561c0075 100644 --- a/examples/with-clerk-appdir/src/app/page.tsx +++ b/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"); diff --git a/examples/with-clerk-pagesdir/src/pages/index.tsx b/examples/with-clerk-pagesdir/src/pages/index.tsx index edbcab1ced..42521c201a 100644 --- a/examples/with-clerk-pagesdir/src/pages/index.tsx +++ b/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"); diff --git a/examples/with-drizzle-appdir/src/app/uploader.tsx b/examples/with-drizzle-appdir/src/app/uploader.tsx index e7baecd960..fe23b2dccb 100644 --- a/examples/with-drizzle-appdir/src/app/uploader.tsx +++ b/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"); diff --git a/examples/with-drizzle-pagesdir/src/pages/index.tsx b/examples/with-drizzle-pagesdir/src/pages/index.tsx index 8524e0a134..87d05d7a67 100644 --- a/examples/with-drizzle-pagesdir/src/pages/index.tsx +++ b/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); }} diff --git a/examples/with-novel/uploadthing/novel-plugin.ts b/examples/with-novel/uploadthing/novel-plugin.ts index 3d4df3115b..7b61dacab2 100644 --- a/examples/with-novel/uploadthing/novel-plugin.ts +++ b/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((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; diff --git a/examples/with-tailwindcss/src/app/page.tsx b/examples/with-tailwindcss/src/app/page.tsx index a1f5e6c7dd..82586c169a 100644 --- a/examples/with-tailwindcss/src/app/page.tsx +++ b/examples/with-tailwindcss/src/app/page.tsx @@ -27,7 +27,7 @@ export default function Home() { /> rr.videoAndImage} + endpoint={(routeRegistry) => routeRegistry.videoAndImage} onClientUploadComplete={(res) => { console.log(`onClientUploadComplete`, res); alert("Upload Completed"); diff --git a/packages/react/test/client-generator.test.ts b/packages/react/test/client-generator.test.ts index 5699b66e40..f655af05c0 100644 --- a/packages/react/test/client-generator.test.ts +++ b/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[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[] | undefined>(res); }); diff --git a/packages/react/test/upload-button.test.tsx b/packages/react/test/upload-button.test.tsx index 2a1198213c..5ecfe5e41c 100644 --- a/packages/react/test/upload-button.test.tsx +++ b/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( rr.image} />); + const utils = render( + routeRegistry.image} />, + ); const label = utils.container.querySelector("label"); if (!label) throw new Error("No label found"); diff --git a/packages/uploadthing/test/client.test.ts b/packages/uploadthing/test/client.test.ts index f9fc560ed9..748a876f17 100644 --- a/packages/uploadthing/test/client.test.ts +++ b/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",