use RSCs in @dub/ui

dubinc · versecafe · Jan 19, 2024 · Jan 19, 2024 · Jan 20, 2024 · Jan 20, 2024
commit 7534bba6077db643f39d45f610fdcebf5d50cbc4
diff --git a/README.md b/README.md
@@ -75,3 +75,97 @@ We love our contributors! Here's how you can contribute:
 ## License
 
 Inspired by [Plausible](https://plausible.io/), Dub is open-source under the GNU Affero General Public License Version 3 (AGPLv3) or any later version. You can [find it here](https://github.com/dubinc/dub/blob/main/LICENSE.md).
+
+# Old
+```
+Route (app)                                       Size     First Load JS
+┌ ○ /_not-found                                   893 B          85.4 kB
+├ ● /[domain]                                     3.49 kB         713 kB
+├ ℇ /[domain]/stats/[key]                         1.69 kB         269 kB
+├ ○ /admin.dub.co                                 3.59 kB         157 kB
+├ ○ /admin.dub.co/links                           200 B           296 kB
+├ ○ /admin.dub.co/login                           1.71 kB         198 kB
+├ ○ /app.dub.co                                   5.89 kB         298 kB
+├ ○ /app.dub.co/[slug]                            201 B           296 kB
+├ λ /app.dub.co/[slug]/[domain]/[[...key]]        160 B          84.7 kB
+├ ○ /app.dub.co/[slug]/analytics                  1.52 kB         301 kB
+├ ○ /app.dub.co/[slug]/domains                    12.4 kB         250 kB
+├ ○ /app.dub.co/[slug]/settings                   7.68 kB         179 kB
+├ ○ /app.dub.co/[slug]/settings/billing           8.94 kB         202 kB
+├ ○ /app.dub.co/[slug]/settings/people            9.29 kB         200 kB
+├ ○ /app.dub.co/[slug]/settings/security          9.97 kB         191 kB
+├ λ /app.dub.co/analytics                         160 B          84.7 kB
+├ ℇ /app.dub.co/auth/saml                         399 B           196 kB
+├ λ /app.dub.co/links                             160 B          84.7 kB
+├ λ /app.dub.co/links/[key]                       160 B          84.7 kB
+├ ℇ /app.dub.co/login                             1.71 kB         198 kB
+├ ℇ /app.dub.co/register                          894 B           224 kB
+├ ○ /app.dub.co/settings                          6.6 kB          161 kB
+├ ○ /app.dub.co/settings/tokens                   4.82 kB         182 kB
+├ ○ /app.dub.co/welcome                           12.1 kB         727 kB
+├ ℇ /banned/[domain]/[key]                        239 B           187 kB
+├ ℇ /expired/[domain]/[key]                       238 B           187 kB
+├ ℇ /inspect/[domain]/[key]                       3.86 kB         217 kB
+├ ● /protected/[domain]/[key]                     1.09 kB         190 kB
+├ ℇ /proxy/[domain]/[key]                         193 B          84.7 kB
+├ ℇ /rewrite/[url]                                160 B          84.7 kB
++ First Load JS shared by all                     84.5 kB
+  ├ chunks/046fd414-c22de0896b393186.js           53.3 kB
+  ├ chunks/4237-adea44edabf2faaa.js               29 kB
+  └ other shared chunks (total)                   2.18 kB
+
+
+ƒ Middleware                                      133 kB
+
+○  (Static)        prerendered as static content
+●  (SSG)           prerendered as static HTML (uses getStaticProps)
+λ  (Dynamic)       server-rendered on demand using Node.js
+ℇ  (Edge Runtime)  server-rendered on demand using the Edge Runtime
+```
+
+# New
+```
+Route (app)                                       Size     First Load JS
+┌ ○ /_not-found                                   893 B          85.5 kB
+├ ● /[domain]                                     1.35 kB         718 kB
+├ ℇ /[domain]/stats/[key]                         1.57 kB         249 kB
+├ ○ /admin.dub.co                                 3.8 kB          139 kB
+├ ○ /admin.dub.co/links                           189 B           276 kB
+├ ○ /admin.dub.co/login                           2.08 kB         197 kB
+├ ○ /app.dub.co                                   6.07 kB         277 kB
+├ ○ /app.dub.co/[slug]                            189 B           276 kB
+├ λ /app.dub.co/[slug]/[domain]/[[...key]]        160 B          84.7 kB
+├ ○ /app.dub.co/[slug]/analytics                  1.63 kB         279 kB
+├ ○ /app.dub.co/[slug]/domains                    8.31 kB         231 kB
+├ ○ /app.dub.co/[slug]/settings                   6.86 kB         159 kB
+├ ○ /app.dub.co/[slug]/settings/billing           7.37 kB         182 kB
+├ ○ /app.dub.co/[slug]/settings/people            8.49 kB         180 kB
+├ ○ /app.dub.co/[slug]/settings/security          9.13 kB         179 kB
+├ λ /app.dub.co/analytics                         160 B          84.7 kB
+├ ℇ /app.dub.co/auth/saml                         506 B           195 kB
+├ λ /app.dub.co/links                             160 B          84.7 kB
+├ λ /app.dub.co/links/[key]                       160 B          84.7 kB
+├ ℇ /app.dub.co/login                             2.08 kB         197 kB
+├ ℇ /app.dub.co/register                          1.25 kB         201 kB
+├ ○ /app.dub.co/settings                          5.79 kB         163 kB
+├ ○ /app.dub.co/settings/tokens                   7.49 kB         162 kB
+├ ○ /app.dub.co/welcome                           6.94 kB         740 kB
+├ ℇ /banned/[domain]/[key]                        356 B           186 kB
+├ ℇ /expired/[domain]/[key]                       356 B           186 kB
+├ ℇ /inspect/[domain]/[key]                       3.98 kB         195 kB
+├ ● /protected/[domain]/[key]                     1.23 kB         189 kB
+├ ℇ /proxy/[domain]/[key]                         193 B          84.8 kB
+├ ℇ /rewrite/[url]                                160 B          84.7 kB
++ First Load JS shared by all                     84.6 kB
+  ├ chunks/046fd414-c22de0896b393186.js           53.3 kB
+  ├ chunks/4237-adea44edabf2faaa.js               29 kB
+  └ other shared chunks (total)                   2.21 kB
+
+
+ƒ Middleware                                      133 kB
+
+○  (Static)        prerendered as static content
+●  (SSG)           prerendered as static HTML (uses getStaticProps)
+λ  (Dynamic)       server-rendered on demand using Node.js
+ℇ  (Edge Runtime)  server-rendered on demand using the Edge Runtime
+```
diff --git a/apps/web/app/app.dub.co/(auth)/welcome/page-client.tsx b/apps/web/app/app.dub.co/(auth)/welcome/page-client.tsx
@@ -4,7 +4,6 @@ import { useAddProjectModal } from "@/ui/modals/add-project-modal";
 import { useUpgradePlanModal } from "@/ui/modals/upgrade-plan-modal";
 import Interim from "@/ui/welcome/interim";
 import Intro from "@/ui/welcome/intro";
-import { Background } from "@dub/ui";
 import va from "@vercel/analytics";
 import { AnimatePresence } from "framer-motion";
 import { ArrowLeft } from "lucide-react";
@@ -40,8 +39,7 @@ export default function WelcomePageClient() {
   }, [searchParams]);
 
   return (
-    <div className="flex h-screen flex-col items-center">
-      <Background />
+    <>
       <AddProjectModal />
       <UpgradePlanModal />
       <AnimatePresence mode="wait">
@@ -61,6 +59,6 @@ export default function WelcomePageClient() {
           </>
         )}
       </AnimatePresence>
-    </div>
+      </>
   );
 }
diff --git a/apps/web/app/app.dub.co/(auth)/welcome/page.tsx b/apps/web/app/app.dub.co/(auth)/welcome/page.tsx
@@ -1,5 +1,7 @@
 import { constructMetadata } from "@dub/utils";
+import { Background } from "@dub/ui";
 import WelcomePageClient from "./page-client";
+import { Suspense } from "react";
 
 export const runtime = "nodejs";
 
@@ -8,5 +10,12 @@ export const metadata = constructMetadata({
 });
 
 export default function WelcomePage() {
-  return <WelcomePageClient />;
+  return (
+    <div className="flex h-screen flex-col items-center">
+      <Background />
+      <Suspense fallback={<div/>}>
+      <WelcomePageClient />
+      </Suspense>
+    </div>
+  );
 }
diff --git a/apps/web/next.config.js b/apps/web/next.config.js
@@ -18,6 +18,7 @@ module.exports = {
     useDeploymentId: true,
     useDeploymentIdServerActions: true,
   },
+  transpilePackages: ["@dub/ui"],
   webpack: (config, { webpack, isServer }) => {
     if (isServer) {
       config.plugins.push(

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -14,7 +14,6 @@
   "dependencies": {
     "@boxyhq/saml-jackson": "^1.14.2",
     "@dub/tailwind-config": "workspace:*",
-    "@dub/ui": "workspace:*",
     "@dub/utils": "workspace:*",
     "@next-auth/prisma-adapter": "^1.0.5",
     "@planetscale/database": "^1.7.0",
@@ -88,6 +87,9 @@
     "use-debounce": "^8.0.4",
     "vaul": "^0.6.8"
   },
+  "peerDependencies": {
+    "@dub/ui": "workspace:*"
+  },
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "^4.0.0",
     "@types/dotenv-flow": "^3.3.2",

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -3,14 +3,9 @@
   "description": "UI components for Dub.co",
   "version": "0.0.43",
   "sideEffects": false,
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist/**"
-  ],
+  "main": "./src/index.tsx",
+  "types": "./src/index.tsx",
   "scripts": {
-    "build": "tsup",
     "lint": "eslint src/",
     "dev": "tsup --watch",
     "check-types": "tsc --noEmit"

diff --git a/packages/ui/src/accordion.tsx b/packages/ui/src/accordion.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { cn } from "@dub/utils";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { ChevronDown } from "lucide-react";

diff --git a/packages/ui/src/form.tsx b/packages/ui/src/form.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { cn } from "@dub/utils";
 import { InputHTMLAttributes, ReactNode, useMemo, useState } from "react";
 import { Button } from "./button";

diff --git a/packages/ui/src/hooks/use-cookies.ts b/packages/ui/src/hooks/use-cookies.ts
@@ -1,3 +1,5 @@
+"use client";
+
 import Cookies from "js-cookie";
 import { useEffect, useState } from "react";
 

diff --git a/packages/ui/src/hooks/use-current-anchor.ts b/packages/ui/src/hooks/use-current-anchor.ts
@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useState } from "react";
 
 export default function useCurrentAnchor() {

diff --git a/packages/ui/src/hooks/use-intersection-observer.ts b/packages/ui/src/hooks/use-intersection-observer.ts
@@ -1,3 +1,5 @@
+"use client";
+
 import { RefObject, useEffect, useState } from "react";
 
 interface Args extends IntersectionObserverInit {

diff --git a/packages/ui/src/hooks/use-local-storage.ts b/packages/ui/src/hooks/use-local-storage.ts
@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useState } from "react";
 
 export default function useLocalStorage<T>(

diff --git a/packages/ui/src/hooks/use-media-query.ts b/packages/ui/src/hooks/use-media-query.ts
@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useState } from "react";
 
 export default function useMediaQuery() {

diff --git a/packages/ui/src/hooks/use-router-stuff.ts b/packages/ui/src/hooks/use-router-stuff.ts
@@ -1,3 +1,5 @@
+"use client";
+
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 
 export default function useRouterStuff() {

diff --git a/packages/ui/src/hooks/use-scroll.ts b/packages/ui/src/hooks/use-scroll.ts
@@ -1,3 +1,5 @@
+"use client";
+
 import { useCallback, useEffect, useState } from "react";
 
 export default function useScroll(threshold: number) {

diff --git a/packages/ui/src/hooks/use-toast-with-undo.tsx b/packages/ui/src/hooks/use-toast-with-undo.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect } from "react";
 import { toast } from "sonner";
 import Success from "../icons/success";