diff --git a/.changeset/modern-mangos-punch.md b/.changeset/modern-mangos-punch.md new file mode 100644 index 0000000000..52e373a2ed --- /dev/null +++ b/.changeset/modern-mangos-punch.md @@ -0,0 +1,7 @@ +--- +"@uploadthing/solid": patch +--- + +refactor: rename `useUploadThing` to `createUploadThing` to follow ecosystem naming convention + +`useUploadThing` is now marked deprecated and will be removed in the next major. diff --git a/docs/src/pages/getting-started/solid.mdx b/docs/src/pages/getting-started/solid.mdx index bad77d8428..6e18993283 100644 --- a/docs/src/pages/getting-started/solid.mdx +++ b/docs/src/pages/getting-started/solid.mdx @@ -177,7 +177,7 @@ export default function Home() { UploadThing provides a few premade components that you can use to upload files in your app. For component customization, see [Theming](/theming), and for even more advanced use cases check out the -[hook usage](#advanced-usage-useuploadthing) +[hook usage](#advanced-usage-createuploadthing) #### UploadButton @@ -293,7 +293,7 @@ export default function Home() { } ``` -## Advanced usage: `useUploadThing` +## Advanced usage: `createUploadThing` For advanced use cases, the premade components might not be flexible enough to suit your needs. In that case, you can use the `useUploadThing` hook to build @@ -301,9 +301,9 @@ your own components with a custom upload flow: -### Create the hook +### Create the helper -First, generate a typed hook using the `generateSolidHelpers` function from +First, generate a typed helper using the `generateSolidHelpers` function from `@uploadthing/solid`: ```tsx copy filename="src/utils/uploadthing.ts" @@ -311,16 +311,17 @@ import { generateSolidHelpers } from "@uploadthing/solid"; import type { OurFileRouter } from "~/server/uploadthing"; -export const { useUploadThing } = generateSolidHelpers(); +export const { createUploadThing } = generateSolidHelpers(); ``` -### Use the hook +### Use the generated helper -Then, use the hook in your component. By using the hook, you have full control -of when and how to upload files. +Then, use the `createUploadThing` function in your component. By using the raw +`createUploadThing` function, you have full control of when and how to upload +files. ```tsx copy filename="src/routes/index.tsx" -import { useUploadThing } from "~/utils/uploadthing"; +import { createUploadThing } from "~/utils/uploadthing"; async function compress(file: File) { // Run some compression algorithm on the file @@ -328,7 +329,7 @@ async function compress(file: File) { } export default function Home() { - const { startUpload } = useUploadThing("profileImage", { + const { startUpload } = createUploadThing("profileImage", { onClientUploadComplete: () => { alert("Upload Completed"); }, diff --git a/examples/minimal-solidstart/src/routes/index.tsx b/examples/minimal-solidstart/src/routes/index.tsx index e2e7c78f73..37edaae456 100644 --- a/examples/minimal-solidstart/src/routes/index.tsx +++ b/examples/minimal-solidstart/src/routes/index.tsx @@ -1,11 +1,11 @@ import { + createUploadThing, UploadButton, UploadDropzone, - useUploadThing, } from "~/utils/uploadthing"; export default function Home() { - const { startUpload } = useUploadThing("videoAndImage", { + const { startUpload } = createUploadThing("videoAndImage", { /** * @see https://docs.uploadthing.com/api-reference/react#useuploadthing */ diff --git a/examples/minimal-solidstart/src/utils/uploadthing.ts b/examples/minimal-solidstart/src/utils/uploadthing.ts index 8ed2ef94a4..f957b42f32 100644 --- a/examples/minimal-solidstart/src/utils/uploadthing.ts +++ b/examples/minimal-solidstart/src/utils/uploadthing.ts @@ -15,4 +15,5 @@ const initOpts = { export const UploadButton = generateUploadButton(initOpts); export const UploadDropzone = generateUploadDropzone(initOpts); -export const { useUploadThing } = generateSolidHelpers(initOpts); +export const { createUploadThing } = + generateSolidHelpers(initOpts); diff --git a/packages/solid/src/components/button.tsx b/packages/solid/src/components/button.tsx index 3382c13938..0d92d014eb 100644 --- a/packages/solid/src/components/button.tsx +++ b/packages/solid/src/components/button.tsx @@ -19,8 +19,8 @@ import type { } from "@uploadthing/shared"; import type { FileRouter } from "uploadthing/types"; +import { INTERNAL_createUploadThingGen } from "../create-uploadthing"; import type { UploadthingComponentProps } from "../types"; -import { INTERNAL_uploadthingHookGen } from "../useUploadThing"; import { progressWidths, Spinner } from "./shared"; type ButtonStyleFieldCallbackArgs = { @@ -91,11 +91,11 @@ export function UploadButton< const { mode = "auto", appendOnPaste = false } = $props.config ?? {}; - const useUploadThing = INTERNAL_uploadthingHookGen({ + const createUploadThing = INTERNAL_createUploadThingGen({ url: resolveMaybeUrlArg($props.url), }); - const uploadThing = useUploadThing($props.endpoint, { + const uploadThing = createUploadThing($props.endpoint, { signal: acRef.signal, headers: $props.headers, skipPolling: $props.skipPolling, diff --git a/packages/solid/src/components/dropzone.tsx b/packages/solid/src/components/dropzone.tsx index 155cc7959a..7c968d8e14 100644 --- a/packages/solid/src/components/dropzone.tsx +++ b/packages/solid/src/components/dropzone.tsx @@ -20,8 +20,8 @@ import type { } from "@uploadthing/shared"; import type { FileRouter } from "uploadthing/types"; +import { INTERNAL_createUploadThingGen } from "../create-uploadthing"; import type { UploadthingComponentProps } from "../types"; -import { INTERNAL_uploadthingHookGen } from "../useUploadThing"; import { progressWidths, Spinner } from "./shared"; type DropzoneStyleFieldCallbackArgs = { @@ -91,10 +91,10 @@ export const UploadDropzone = < let rootRef: HTMLElement; let acRef = new AbortController(); - const useUploadThing = INTERNAL_uploadthingHookGen({ + const createUploadThing = INTERNAL_createUploadThingGen({ url: resolveMaybeUrlArg($props.url), }); - const uploadThing = useUploadThing($props.endpoint, { + const uploadThing = createUploadThing($props.endpoint, { signal: acRef.signal, headers: $props.headers, skipPolling: $props.skipPolling, diff --git a/packages/solid/src/useUploadThing.ts b/packages/solid/src/create-uploadthing.ts similarity index 90% rename from packages/solid/src/useUploadThing.ts rename to packages/solid/src/create-uploadthing.ts index 5a5deef567..3e4585d0f1 100644 --- a/packages/solid/src/useUploadThing.ts +++ b/packages/solid/src/create-uploadthing.ts @@ -14,7 +14,10 @@ import type { inferErrorShape, } from "uploadthing/types"; -import type { GenerateTypedHelpersOptions, UseUploadthingProps } from "./types"; +import type { + CreateUploadthingProps, + GenerateTypedHelpersOptions, +} from "./types"; import { createFetch } from "./utils/createFetch"; const useRouteConfig = (url: URL, endpoint: string) => { @@ -22,7 +25,7 @@ const useRouteConfig = (url: URL, endpoint: string) => { return () => dataGetter()?.data?.find((x) => x.slug === endpoint)?.config; }; -export const INTERNAL_uploadthingHookGen = < +export const INTERNAL_createUploadThingGen = < TRouter extends FileRouter, >(initOpts: { /** @@ -37,12 +40,12 @@ export const INTERNAL_uploadthingHookGen = < package: "@uploadthing/solid", }); - const useUploadThing = < + const createUploadThing = < TEndpoint extends keyof TRouter, TSkipPolling extends boolean = false, >( endpoint: TEndpoint, - opts?: UseUploadthingProps, + opts?: CreateUploadthingProps, ) => { const [isUploading, setUploading] = createSignal(false); @@ -133,16 +136,21 @@ export const INTERNAL_uploadthingHookGen = < } as const; }; - return useUploadThing; + return createUploadThing; }; export const generateSolidHelpers = ( initOpts?: GenerateTypedHelpersOptions, ) => { const url = resolveMaybeUrlArg(initOpts?.url); + const createUploadThing = INTERNAL_createUploadThingGen({ url }); return { - useUploadThing: INTERNAL_uploadthingHookGen({ url }), + createUploadThing, + /** + * @deprecated use `createUploadThing` instead + */ + useUploadThing: createUploadThing, uploadFiles: genUploader({ url, package: "@uploadthing/solid", diff --git a/packages/solid/src/index.tsx b/packages/solid/src/index.tsx index 088b56b263..3513529d51 100644 --- a/packages/solid/src/index.tsx +++ b/packages/solid/src/index.tsx @@ -1,6 +1,6 @@ import "./styles.css"; -export * from "./useUploadThing"; +export * from "./create-uploadthing"; export { UploadButton, UploadDropzone, diff --git a/packages/solid/src/types.ts b/packages/solid/src/types.ts index b33663d2ab..a770bbd0e9 100644 --- a/packages/solid/src/types.ts +++ b/packages/solid/src/types.ts @@ -24,7 +24,7 @@ export interface GenerateTypedHelpersOptions { url?: string | URL; } -export type UseUploadthingProps< +export type CreateUploadthingProps< TRouter extends FileRouter, TEndpoint extends keyof TRouter, TSkipPolling extends boolean = false, @@ -84,12 +84,24 @@ export type UseUploadthingProps< signal?: AbortSignal | undefined; }; +/** + * @deprecated Use `CreateUploadthingProps` instead + */ +export type UseUploadThingProps< + TRouter extends FileRouter, + TEndpoint extends keyof TRouter, + TSkipPolling extends boolean = false, + TServerOutput = false extends TSkipPolling + ? inferEndpointOutput + : null, +> = CreateUploadthingProps; + export type UploadthingComponentProps< TRouter extends FileRouter, TEndpoint extends keyof TRouter, TSkipPolling extends boolean = false, > = Omit< - UseUploadthingProps, + CreateUploadthingProps, /** * Signal is omitted, component has its own AbortController * If you need to control the interruption with more granularity,