chore: housekeeping 2 - emit ts-sourcemaps & monorepo config stuff (#103

)

.github/canary-version.js

@@ -1,5 +1,5 @@
-import fs from "fs";
 import { exec } from "child_process";
+import fs from "fs";
 
 const pkgJsonPaths = [
   "packages/uploadthing/package.json",
@@ -25,11 +25,11 @@ try {
       const newContent = content
         .replace(
           new RegExp(`"@uploadthing/\\*": "${oldVersion}"`, "g"),
-          `"@uploadthing/*": "${newVersion}"`
+          `"@uploadthing/*": "${newVersion}"`,
         )
         .replace(
           new RegExp(`"uploadthing": "${oldVersion}"`, "g"),
-          `"uploadthing": "${newVersion}"`
+          `"uploadthing": "${newVersion}"`,
         );
 
       fs.writeFileSync(pkgJsonPath, newContent);

.gitignore

@@ -10,6 +10,7 @@ coverage
 
 # next.js
 .next/
+**/next-env.d.ts
 out/
 build
 

.thing/hooks/file_upload.config.json

@@ -4,4 +4,4 @@
     "Content-Type": "application/json",
     "x-ping-signature": "43c0d8fc0eb544caf6d95bb7ca4d83fa96d8b32615029ee5e8f349e10b5ba5c0f0e1079f8b35a4a0b55b93b7a6810f072d925f0de573251a027a21fb97c541b9"
   }
-}
+}

.thing/hooks/get_presigned.config.json

@@ -1,3 +1,3 @@
 {
   "url": "http://localhost:3020/api/prepareUpload"
-}
+}

.vscode/settings.json

@@ -7,9 +7,8 @@
   "eslint.rules.customizations": [{ "rule": "*", "severity": "warn" }],
   "typescript.tsdk": "node_modules/typescript/lib",
   "eslint.workingDirectories": [
-    "examples/appdir",
-    "examples/pagedir",
-    "packages/uploadthing",
-    "docs"
+    "docs",
+    { "pattern": "./packages/**" },
+    { "pattern": "./examples/**" }
   ]
 }

docs/package.json

@@ -11,7 +11,7 @@
     "debug": "NODE_OPTIONS='--inspect' next dev"
   },
   "dependencies": {
-    "next": "13.4.3",
+    "next": "13.4.4",
     "nextra": "^2.6.0",
     "nextra-theme-docs": "^2.6.0",
     "react": "18.2.0",

docs/src/pages/_app.mdx

@@ -1,3 +1,3 @@
 export default function App({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <Component {...pageProps} />;
 }

docs/src/pages/api-reference/react.mdx

@@ -4,6 +4,7 @@
 
 ```tsx
 import { UploadButton } from "@uploadthing/react";
+
 import { OurFileRouter } from "./api/uploadthing/core";
 
 export const OurUploadButton = () => (
@@ -35,6 +36,7 @@ export const OurUploadButton = () => (
 
 ```tsx
 import { UploadButton } from "@uploadthing/react";
+
 import { OurFileRouter } from "./api/uploadthing/core";
 
 export const OurUploadButton = () => (
@@ -67,6 +69,7 @@ The `generateReactHelpers` function is used to generate the useUploadThing hook
 
 ```tsx
 import { generateReactHelpers } from "@uploadthing/react";
+
 import type { OurFileRouter } from "~/app/api/uploadthing/core";
 
 export const { useUploadThing, uploadFiles } =

docs/src/pages/faq.mdx

@@ -9,9 +9,10 @@ import "@uploadthing/react/styles.css";
 ### Some of my other components look weird now... what's up with that?
 
 You may need to check the order of imports. Making sure that the uploadthing component styles are imported before others usually does the trick
+
 ```tsx
 import "@uploadthing/react/styles.css";
-import '../styles/globals.css'
+import "../styles/globals.css";
 ```
 
 ### When I upload files, I get the error `Failed to simulate callback for file. Is your webhook configured correctly?`

docs/src/pages/nextjs/_meta.json

@@ -1,4 +1,4 @@
 {
   "appdir": "App Router (app/)",
   "pagedir": "Page Router (pages/)"
-}
+}

docs/src/pages/nextjs/appdir.mdx

@@ -17,6 +17,7 @@ All files uploaded to uploadthing are associated with a FileRoute. Think of a Fi
 ```ts copy
 /** app/api/uploadthing/core.ts */
 import { createUploadthing, type FileRouter } from "uploadthing/next";
+
 const f = createUploadthing();
 
 const auth = (req: Request) => ({ id: "fakeId" }); // Fake auth function
@@ -57,9 +58,10 @@ export type OurFileRouter = typeof ourFileRouter;
 
 ```ts copy
 /** app/api/uploadthing/route.ts */
-import { ourFileRouter } from "./core";
 import { createNextRouteHandler } from "uploadthing/next";
 
+import { ourFileRouter } from "./core";
+
 // Export routes for Next App Router
 export const { GET, POST } = createNextRouteHandler({
   router: ourFileRouter,
@@ -77,6 +79,7 @@ The `@uploadthing/react` package includes an "UploadButton" component that you c
 import "@uploadthing/react/styles.css";
 
 import { UploadButton } from "@uploadthing/react";
+
 import { OurFileRouter } from "./api/uploadthing/core";
 
 export default function Home() {

docs/src/pages/nextjs/pagedir.mdx

@@ -34,6 +34,7 @@ All files uploaded to uploadthing are associated with a FileRoute. Think of a Fi
 ```ts copy
 /** server/uploadthing.ts */
 import { createUploadthing, type FileRouter } from "uploadthing/next-legacy";
+
 const f = createUploadthing();
 
 const auth = (req: NextApiRequest, res: NextApiResponse) => ({ id: "fakeId" }); // Fake auth function
@@ -75,6 +76,7 @@ export type OurFileRouter = typeof ourFileRouter;
 ```ts copy
 /** pages/api/uploadthing.ts */
 import { createNextPageApiHandler } from "uploadthing/next-legacy";
+
 import { ourFileRouter } from "~/server/uploadthing";
 
 const handler = createNextPageApiHandler({
@@ -92,7 +94,6 @@ The `@uploadthing/react` package includes an "UploadButton" component that you c
 import { UploadButton } from "@uploadthing/react";
 
 import type { OurFileRouter } from "~/server/uploadthing";
-
 // You need to import our styles for the button to look right. Best to import in the root /_app.tsx but this is fine
 import "@uploadthing/react/styles.css";
 

docs/src/pages/solid.mdx

@@ -59,6 +59,7 @@ All files uploaded to uploadthing are associated with a FileRoute. Think of a Fi
 ```ts copy
 /** src/api/uploadthing/core.ts */
 import { createUploadthing, type FileRouter } from "uploadthing";
+
 const f = createUploadthing();
 
 const auth = (req: Request) => ({ id: "fakeId" }); // Fake auth function
@@ -101,6 +102,7 @@ export type OurFileRouter = typeof ourFileRouter;
 ```ts copy
 /** src/api/uploadthing/index.ts */
 import { createServerHandler } from "@uploadthing/solid";
+
 import { ourFileRouter } from "./core";
 
 export const { GET, POST } = createServerHandler({
@@ -115,10 +117,13 @@ The `@uploadthing/solid` package includes an "Uploader" component that you can s
 ```tsx copy
 // You need to import our styles for the button to look right. Best to import in the root /layout.tsx but this is fine
 import "@uploadthing/solid/styles.css";
+
 import { type VoidComponent } from "solid-js";
-import type { OurFileRouter } from "./api/uploadthing/core";
+
 import { Uploader } from "@uploadthing/solid";
 
+import type { OurFileRouter } from "./api/uploadthing/core";
+
 const Home: VoidComponent = () => {
   return (
     <main class="flex min-h-screen flex-col items-center justify-center  gap-16 p-24">
@@ -152,10 +157,13 @@ The `@uploadthing/solid` package includes an "Uploader" component that you can s
 ```tsx copy
 // You need to import our styles for the button to look right. Best to import in the root /layout.tsx but this is fine
 import "@uploadthing/solid/styles.css";
+
 import { type VoidComponent } from "solid-js";
-import type { OurFileRouter } from "./api/uploadthing/core";
+
 import { Uploader } from "@uploadthing/solid";
 
+import type { OurFileRouter } from "./api/uploadthing/core";
+
 const Home: VoidComponent = () => {
   return (
     <main class="flex min-h-screen flex-col items-center justify-center  gap-16 p-24">
@@ -181,10 +189,13 @@ This is a SolidJS dropzone component that will be used to upload files when clic
 ```tsx copy
 // You need to import our styles for the button to look right. Best to import in the root /layout.tsx but this is fine
 import "@uploadthing/solid/styles.css";
+
 import { type VoidComponent } from "solid-js";
-import type { OurFileRouter } from "./api/uploadthing/core";
+
 import { UploadButton } from "@uploadthing/solid";
 
+import type { OurFileRouter } from "./api/uploadthing/core";
+
 const Home: VoidComponent = () => {
   return (
     <main class="flex min-h-screen flex-col items-center justify-center  gap-16 p-24">
@@ -214,10 +225,13 @@ This is a SolidJS dropzone component that you can use to upload files, you can d
 ```tsx copy
 // You need to import our styles for the button to look right. Best to import in the root /layout.tsx but this is fine
 import "@uploadthing/solid/styles.css";
+
 import { type VoidComponent } from "solid-js";
-import type { OurFileRouter } from "./api/uploadthing/core";
+
 import { UploadDropzone } from "@uploadthing/solid";
 
+import type { OurFileRouter } from "./api/uploadthing/core";
+
 const Home: VoidComponent = () => {
   return (
     <main class="flex min-h-screen flex-col items-center justify-center  gap-16 p-24">

docs/src/theme.config.js

@@ -1,5 +1,5 @@
-import { useConfig } from "nextra-theme-docs";
 import { useRouter } from "next/router";
+import { useConfig } from "nextra-theme-docs";
 
 const hackedCss = `
 body {
@@ -86,7 +86,7 @@ const Head = () => {
 export const Logo = () => {
   return (
     <h1 className="flex flex-row items-baseline text-2xl font-bold">
-      <span className="dark:text-white tracking-tight hover:cursor-pointer">
+      <span className="tracking-tight hover:cursor-pointer dark:text-white">
         {`upload`}
         <span className="text-red-600">{`thing`}</span>
         <span className="ml-1 font-semibold">docs</span>
@@ -95,7 +95,6 @@ export const Logo = () => {
   );
 };
 
-
 /* eslint sort-keys: error */
 /**
  * @type {import('nextra-theme-docs').DocsThemeConfig}

examples/appdir/.vscode/settings.json

@@ -1,4 +1,4 @@
 {
   "typescript.tsdk": "../../node_modules/.pnpm/[email protected]/node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true
-}
+}

examples/appdir/package.json

@@ -14,7 +14,7 @@
     "@tanstack/react-query": "^4.28.0",
     "@uploadthing/react": "3.0.5",
     "autoprefixer": "10.4.14",
-    "next": "13.4.3",
+    "next": "13.4.4",
     "postcss": "8.4.22",
     "react": "18.2.0",
     "react-dom": "18.2.0",

examples/appdir/postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

examples/appdir/src/app/api/uploadthing/route.ts

@@ -1,6 +1,7 @@
-import { uploadRouter } from "../../_uploadthing";
 import { createNextRouteHandler } from "uploadthing/next";
 
+import { uploadRouter } from "~/server/uploadthing";
+
 export const { GET, POST } = createNextRouteHandler({
   router: uploadRouter,
 });

examples/appdir/src/app/page.tsx

@@ -1,16 +1,18 @@
 "use client";
 
 import { Inter } from "next/font/google";
+
 import { UploadButton, UploadDropzone } from "@uploadthing/react";
-import type { OurFileRouter } from "./_uploadthing";
+
+import type { OurFileRouter } from "~/server/uploadthing";
 
 const inter = Inter({ subsets: ["latin"] });
 
 export default function Home() {
   return (
     <main className="flex min-h-screen flex-col items-center justify-center  gap-16 p-24">
       <div className="flex flex-col items-center justify-center gap-4">
-        <span className="text-4xl font-bold text-center">
+        <span className="text-center text-4xl font-bold">
           {`Upload a file using a button:`}
         </span>
 
@@ -27,7 +29,7 @@ export default function Home() {
         />
       </div>
       <div className="flex flex-col items-center justify-center gap-4">
-        <span className="text-4xl font-bold text-center">
+        <span className="text-center text-4xl font-bold">
           {`...or using a dropzone:`}
         </span>
         <UploadDropzone<OurFileRouter>

examples/appdir/src/app/pkg/page.tsx

@@ -1,5 +1,6 @@
 import { UploadButton } from "@uploadthing/react";
-import { OurFileRouter } from "../_uploadthing";
+
+import type { OurFileRouter } from "~/server/uploadthing";
 
 export default function Home() {
   return (

examples/appdir/src/app/sink/page.tsx

@@ -1,8 +1,10 @@
 "use client";
 
 import { Inter } from "next/font/google";
+
 import { UploadButton, UploadDropzone } from "@uploadthing/react";
-import type { OurFileRouter } from "../_uploadthing";
+
+import type { OurFileRouter } from "~/server/uploadthing";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -35,7 +37,7 @@ export default function Home() {
         </div>
       </div>
       <div className="flex flex-col items-center justify-center gap-4">
-        <span className="text-4xl font-bold text-center">
+        <span className="text-center text-4xl font-bold">
           {`...or using a dropzone:`}
         </span>
         <UploadDropzone<OurFileRouter>

examples/appdir/src/app/_uploadthing/index.ts → examples/appdir/src/server/uploadthing.ts

@@ -1,4 +1,5 @@
-import { createUploadthing, type FileRouter } from "uploadthing/next";
+import { createUploadthing } from "uploadthing/next";
+import type { FileRouter } from "uploadthing/next";
 
 const f = createUploadthing();
 

examples/appdir/tailwind.config.js

@@ -1,18 +1,18 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './src/pages/**/*.{js,ts,jsx,tsx}',
-    './src/components/**/*.{js,ts,jsx,tsx}',
-    './src/app/**/*.{js,ts,jsx,tsx}',
+    "./src/pages/**/*.{js,ts,jsx,tsx}",
+    "./src/components/**/*.{js,ts,jsx,tsx}",
+    "./src/app/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {
       backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic':
-          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
       },
     },
   },
   plugins: [],
-}
+};