feat: genereateReactComponents function

[OrJDev]

Instead of having to pass the generic everytime, you can now create type safed components using the genereateReactComponents method.

import { genereateReactComponents } from "@uploadthing/react";
import { OurFileRouter } from ".";

export const { UploadButton, UploadDropzone } =
  genereateReactComponents<OurFileRouter>();

This can later be used like:

  <UploadButton
          endpoint="withoutMdwr"
          onClientUploadComplete={(res) => {
            // Do something with the response
            console.log("Files: ", res);
            alert("Upload Completed");
          }}
          onUploadError={(error: Error) => {
            alert(`ERROR! ${error.message}`);
          }}
        />

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 88da633e4273d56df2a70ce1aa463d6418ce9755

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@uploadthing/react	Minor
@uploadthing/solid	Major
uploadthing	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docs-uploadthing	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 15, 2023 4:14pm

[jherr]

You should rename genereateReactComponents to generateReactComponents, the word generate is misspelled.

[OrJDev]

You should rename genereateReactComponents to generateReactComponents, the word generate is misspelled.

Thank you, fixed that and also implemented this function for solid

[OrJDev]

This also allows the url to be passed at first and then used in all of the solid's adapter functions instead of having to pass it everytime:

import { generateSolidComponents } from "@uploadthing/solid";

import type { OurFileRouter } from "~/server/uploadthing";

const url = "http://localhost:9898";

export const { UploadButton, UploadDropzone, Uploader } =
  generateSolidComponents<OurFileRouter>(url);

[markflorkowski]

Yeah, it's nicer than the types components which felt very strange.

[jherr]

One last thing on naming. If I'm bringing in createSolidComponents from a package named @uploadthing/solid then the Solid is implied. Perhaps createComponents in both cases?

import { generateComponents } from "@uploadthing/react";

import { generateComponents } from "@uploadthing/solid";

[OrJDev]

One last thing on naming. If I'm bringing in createSolidComponents from a package named @uploadthing/solid then the Solid is implied. Perhaps createComponents in both cases?

import { generateComponents } from "@uploadthing/react";

import { generateComponents } from "@uploadthing/solid";

Yes that is a good idea, will leave that up to @juliusmarminge and @markflorkowski

[juliusmarminge]

One last thing on naming. If I'm bringing in createSolidComponents from a package named @uploadthing/solid then the Solid is implied. Perhaps createComponents in both cases?

import { generateComponents } from "@uploadthing/react";

import { generateComponents } from "@uploadthing/solid";

Yes makes total sense - also matches the api on the backend, we dont do

createNextUploadthing from "uploadthing/next"

createNextLegacyUploadthing from "uploadthing/next-legacy"

As it's also inferred from the entrypoint's name which runtime you're using.

[OrJDev]

👍🏼

left some docs notes

Resolved everything.