chore: rename solid helper to createUploadThing (#747)

Co-authored-by: Mark R. Florkowski <[email protected]>

.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.

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,42 +293,43 @@ 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
 your own components with a custom upload flow:
 
 <Steps>
 
-### 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"
 import { generateSolidHelpers } from "@uploadthing/solid";
 
 import type { OurFileRouter } from "~/server/uploadthing";
 
-export const { useUploadThing } = generateSolidHelpers<OurFileRouter>();
+export const { createUploadThing } = generateSolidHelpers<OurFileRouter>();
 ```
 
-### 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
   return file;
 }
 
 export default function Home() {
-  const { startUpload } = useUploadThing("profileImage", {
+  const { startUpload } = createUploadThing("profileImage", {
     onClientUploadComplete: () => {
       alert("Upload Completed");
     },

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
      */

examples/minimal-solidstart/src/utils/uploadthing.ts

@@ -15,4 +15,5 @@ const initOpts = {
 
 export const UploadButton = generateUploadButton<OurFileRouter>(initOpts);
 export const UploadDropzone = generateUploadDropzone<OurFileRouter>(initOpts);
-export const { useUploadThing } = generateSolidHelpers<OurFileRouter>(initOpts);
+export const { createUploadThing } =
+  generateSolidHelpers<OurFileRouter>(initOpts);

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<TRouter>({
+  const createUploadThing = INTERNAL_createUploadThingGen<TRouter>({
     url: resolveMaybeUrlArg($props.url),
   });
 
-  const uploadThing = useUploadThing($props.endpoint, {
+  const uploadThing = createUploadThing($props.endpoint, {
     signal: acRef.signal,
     headers: $props.headers,
     skipPolling: $props.skipPolling,

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<TRouter>({
+  const createUploadThing = INTERNAL_createUploadThingGen<TRouter>({
     url: resolveMaybeUrlArg($props.url),
   });
-  const uploadThing = useUploadThing($props.endpoint, {
+  const uploadThing = createUploadThing($props.endpoint, {
     signal: acRef.signal,
     headers: $props.headers,
     skipPolling: $props.skipPolling,

packages/solid/src/useUploadThing.ts → packages/solid/src/create-uploadthing.ts

@@ -14,15 +14,18 @@ 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) => {
   const dataGetter = createFetch<EndpointMetadata>(url.href);
   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<TRouter, TEndpoint, TSkipPolling>,
+    opts?: CreateUploadthingProps<TRouter, TEndpoint, TSkipPolling>,
   ) => {
     const [isUploading, setUploading] = createSignal(false);
 
@@ -133,16 +136,21 @@ export const INTERNAL_uploadthingHookGen = <
     } as const;
   };
 
-  return useUploadThing;
+  return createUploadThing;
 };
 
 export const generateSolidHelpers = <TRouter extends FileRouter>(
   initOpts?: GenerateTypedHelpersOptions,
 ) => {
   const url = resolveMaybeUrlArg(initOpts?.url);
+  const createUploadThing = INTERNAL_createUploadThingGen<TRouter>({ url });
 
   return {
-    useUploadThing: INTERNAL_uploadthingHookGen<TRouter>({ url }),
+    createUploadThing,
+    /**
+     * @deprecated use `createUploadThing` instead
+     */
+    useUploadThing: createUploadThing,
     uploadFiles: genUploader<TRouter>({
       url,
       package: "@uploadthing/solid",

packages/solid/src/index.tsx

@@ -1,6 +1,6 @@
 import "./styles.css";
 
-export * from "./useUploadThing";
+export * from "./create-uploadthing";
 export {
   UploadButton,
   UploadDropzone,

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<TRouter[TEndpoint]>
+    : null,
+> = CreateUploadthingProps<TRouter, TEndpoint, TSkipPolling, TServerOutput>;
+
 export type UploadthingComponentProps<
   TRouter extends FileRouter,
   TEndpoint extends keyof TRouter,
   TSkipPolling extends boolean = false,
 > = Omit<
-  UseUploadthingProps<TRouter, TEndpoint, TSkipPolling>,
+  CreateUploadthingProps<TRouter, TEndpoint, TSkipPolling>,
   /**
    * Signal is omitted, component has its own AbortController
    * If you need to control the interruption with more granularity,