chore: add minimal-tanstack-start example

.changeset/healthy-vans-trade.md

@@ -0,0 +1,7 @@
+---
+"@uploadthing/shared": patch
+"@uploadthing/react": patch
+"@uploadthing/expo": patch
+---
+
+chore: refactor internal hook generator to be more friendly for Vite React Refresh

examples/minimal-tanstack-start/.env.example

@@ -0,0 +1,2 @@
+# Go to https://uploadthing.com/dashboard to get your token
+UPLOADTHING_TOKEN='...'

examples/minimal-tanstack-start/app.config.ts

@@ -0,0 +1,3 @@
+import { defineConfig } from "@tanstack/start/config";
+
+export default defineConfig({});

examples/minimal-tanstack-start/app/api.ts

@@ -0,0 +1,6 @@
+import {
+  createStartAPIHandler,
+  defaultAPIFileRouteHandler,
+} from "@tanstack/start/api";
+
+export default createStartAPIHandler(defaultAPIFileRouteHandler);

examples/minimal-tanstack-start/app/client.tsx

@@ -0,0 +1,8 @@
+import { StartClient } from "@tanstack/start";
+import { hydrateRoot } from "react-dom/client";
+
+import { createRouter } from "./router";
+
+const router = createRouter();
+
+hydrateRoot(document.getElementById("root")!, <StartClient router={router} />);

examples/minimal-tanstack-start/app/routeTree.gen.ts

@@ -0,0 +1,89 @@
+/* prettier-ignore-start */
+
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file is auto-generated by TanStack Router
+
+// Import Routes
+
+import { Route as rootRoute } from "./routes/__root";
+import { Route as IndexImport } from "./routes/index";
+
+// Create/Update Routes
+
+const IndexRoute = IndexImport.update({
+  path: "/",
+  getParentRoute: () => rootRoute,
+} as any);
+
+// Populate the FileRoutesByPath interface
+
+declare module "@tanstack/react-router" {
+  interface FileRoutesByPath {
+    "/": {
+      id: "/";
+      path: "/";
+      fullPath: "/";
+      preLoaderRoute: typeof IndexImport;
+      parentRoute: typeof rootRoute;
+    };
+  }
+}
+
+// Create and export the route tree
+
+export interface FileRoutesByFullPath {
+  "/": typeof IndexRoute;
+}
+
+export interface FileRoutesByTo {
+  "/": typeof IndexRoute;
+}
+
+export interface FileRoutesById {
+  __root__: typeof rootRoute;
+  "/": typeof IndexRoute;
+}
+
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath;
+  fullPaths: "/";
+  fileRoutesByTo: FileRoutesByTo;
+  to: "/";
+  id: "__root__" | "/";
+  fileRoutesById: FileRoutesById;
+}
+
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute;
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+};
+
+export const routeTree = rootRoute
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>();
+
+/* prettier-ignore-end */
+
+/* ROUTE_MANIFEST_START
+{
+  "routes": {
+    "__root__": {
+      "filePath": "__root.tsx",
+      "children": [
+        "/"
+      ]
+    },
+    "/": {
+      "filePath": "index.tsx"
+    }
+  }
+}
+ROUTE_MANIFEST_END */

examples/minimal-tanstack-start/app/router.tsx

@@ -0,0 +1,38 @@
+import {
+  AnyRouter,
+  createRouter as createTanStackRouter,
+} from "@tanstack/react-router";
+
+import { routeTree } from "./routeTree.gen";
+
+/**
+ * This wrapper could potentially be exported from `@uploadthing/react` similar to NextSSRPlugin
+ */
+function routerWithUploadThing<TRouter extends AnyRouter>(router: TRouter) {
+  if (router.isServer) {
+    // On the server, stream the router config over the wire to the client
+    // globalThis.__UPLOADTHING is set in `ssr.tsx` to ensure we don't
+    // leak the entire router code to the client
+    router.streamValue("__UPLOADTHING", globalThis.__UPLOADTHING);
+  } else {
+    // On the client, inject the streamed value into globalThis
+    // useUploadThing will pick this up and skip a client side fetch
+    globalThis.__UPLOADTHING = router.getStreamedValue("__UPLOADTHING");
+  }
+
+  return router;
+}
+
+export function createRouter() {
+  const router = createTanStackRouter({
+    routeTree,
+  });
+
+  return routerWithUploadThing(router);
+}
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: ReturnType<typeof createRouter>;
+  }
+}

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

@@ -0,0 +1,38 @@
+import * as React from "react";
+import {
+  createRootRoute,
+  Outlet,
+  ScrollRestoration,
+} from "@tanstack/react-router";
+import { Body, Head, Html, Meta, Scripts } from "@tanstack/start";
+
+// @ts-expect-error
+import uploadthingCss from "@uploadthing/react/styles.css?url";
+
+export const Route = createRootRoute({
+  component: RootComponent,
+  links: () => [{ rel: "stylesheet", href: uploadthingCss }],
+});
+
+function RootComponent() {
+  return (
+    <RootDocument>
+      <Outlet />
+    </RootDocument>
+  );
+}
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <Html>
+      <Head>
+        <Meta />
+      </Head>
+      <Body>
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+      </Body>
+    </Html>
+  );
+}

examples/minimal-tanstack-start/app/routes/api/uploadthing.ts

@@ -0,0 +1,11 @@
+import { createAPIFileRoute } from "@tanstack/start/api";
+
+import { createRouteHandler } from "uploadthing/server";
+
+import { uploadRouter } from "../../server/uploadthing";
+
+const handlers = createRouteHandler({ router: uploadRouter });
+export const Route = createAPIFileRoute("/api/uploadthing")({
+  GET: handlers,
+  POST: handlers,
+});

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

@@ -0,0 +1,79 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import {
+  UploadButton,
+  UploadDropzone,
+  useUploadThing,
+} from "../utils/uploadthing";
+
+export const Route = createFileRoute("/")({
+  component: Home,
+});
+
+function Home() {
+  const { startUpload } = useUploadThing("videoAndImage", {
+    /**
+     * @see https://docs.uploadthing.com/api-reference/react#useuploadthing
+     */
+    onBeforeUploadBegin: (files) => {
+      console.log("Uploading", files.length, "files");
+      return files;
+    },
+    onUploadBegin: (name) => {
+      console.log("Beginning upload of", name);
+    },
+    onClientUploadComplete: (res) => {
+      console.log("Upload Completed.", res.length, "files uploaded");
+    },
+    onUploadProgress(p) {
+      console.log("onUploadProgress", p);
+    },
+  });
+
+  return (
+    <main>
+      <UploadButton
+        /**
+         * @see https://docs.uploadthing.com/api-reference/react#uploadbutton
+         */
+        endpoint="videoAndImage"
+        onClientUploadComplete={(res) => {
+          console.log(`onClientUploadComplete`, res);
+          alert("Upload Completed");
+        }}
+        onUploadBegin={() => {
+          console.log("upload begin");
+        }}
+        config={{ appendOnPaste: true, mode: "manual" }}
+      />
+      <UploadDropzone
+        /**
+         * @see https://docs.uploadthing.com/api-reference/react#uploaddropzone
+         */
+        endpoint="videoAndImage"
+        onUploadAborted={() => {
+          alert("Upload Aborted");
+        }}
+        onClientUploadComplete={(res) => {
+          console.log(`onClientUploadComplete`, res);
+          alert("Upload Completed");
+        }}
+        onUploadBegin={() => {
+          console.log("upload begin");
+        }}
+      />
+      <input
+        type="file"
+        multiple
+        onChange={async (e) => {
+          const files = Array.from(e.target.files ?? []);
+
+          // Do something with files
+
+          // Then start the upload
+          await startUpload(files);
+        }}
+      />
+    </main>
+  );
+}

examples/minimal-tanstack-start/app/server/uploadthing.ts

@@ -0,0 +1,61 @@
+import { createUploadthing, UTFiles } from "uploadthing/next";
+import type { FileRouter } from "uploadthing/next";
+
+const f = createUploadthing({
+  /**
+   * Log out more information about the error, but don't return it to the client
+   * @see https://docs.uploadthing.com/errors#error-formatting
+   */
+  errorFormatter: (err) => {
+    console.log("Error uploading file", err.message);
+    console.log("  - Above error caused by:", err.cause);
+
+    return { message: err.message };
+  },
+});
+
+/**
+ * This is your Uploadthing file router. For more information:
+ * @see https://docs.uploadthing.com/api-reference/server#file-routes
+ */
+export const uploadRouter = {
+  videoAndImage: f({
+    image: {
+      maxFileSize: "32MB",
+      maxFileCount: 4,
+      acl: "public-read",
+    },
+    video: {
+      maxFileSize: "16MB",
+    },
+    blob: {
+      maxFileSize: "8GB",
+    },
+  })
+    .middleware(({ req, files }) => {
+      // Check some condition based on the incoming requrest
+      console.log("Request", req);
+      //^?
+      // if (!req.headers.get("x-some-header")) {
+      //   throw new Error("x-some-header is required");
+      // }
+
+      // (Optional) Label your files with a custom identifier
+      const filesWithMyIds = files.map((file, idx) => ({
+        ...file,
+        customId: `${idx}-HELLO`,
+      }));
+
+      // Return some metadata to be stored with the file
+      return { foo: "bar" as const, [UTFiles]: filesWithMyIds };
+    })
+    .onUploadComplete(({ file, metadata }) => {
+      metadata;
+      // ^?
+      file.customId;
+      //   ^?
+      console.log("upload completed", file);
+    }),
+} satisfies FileRouter;
+
+export type OurFileRouter = typeof uploadRouter;

examples/minimal-tanstack-start/app/ssr.tsx

@@ -0,0 +1,17 @@
+import { getRouterManifest } from "@tanstack/start/router-manifest";
+import {
+  createStartHandler,
+  defaultStreamHandler,
+} from "@tanstack/start/server";
+
+import { extractRouterConfig } from "uploadthing/server";
+
+import { createRouter } from "./router";
+import { uploadRouter } from "./server/uploadthing";
+
+globalThis.__UPLOADTHING = extractRouterConfig(uploadRouter);
+
+export default createStartHandler({
+  createRouter,
+  getRouterManifest,
+})(defaultStreamHandler);

examples/minimal-tanstack-start/app/utils/uploadthing.ts

@@ -0,0 +1,12 @@
+import {
+  generateReactHelpers,
+  generateUploadButton,
+  generateUploadDropzone,
+} from "@uploadthing/react";
+
+import type { OurFileRouter } from "../server/uploadthing";
+
+export const UploadButton = generateUploadButton<OurFileRouter>();
+export const UploadDropzone = generateUploadDropzone<OurFileRouter>();
+
+export const { useUploadThing } = generateReactHelpers<OurFileRouter>();