Use next-themes in theme provider for React frontends, and fix neon setup (#407)

Co-authored-by: Aman Varshney <amanvarshney.work@gmail.com>

.changeset/spicy-eggs-rule.md

@@ -0,0 +1,5 @@
+---
+"create-better-t-stack": patch
+---
+
+Use next-themes in theme provider for React frontends, and fix neon setup

apps/cli/src/constants.ts

@@ -38,6 +38,8 @@ export const dependencyVersionMap = {
 	"@neondatabase/serverless": "^1.0.1",
 	pg: "^8.14.1",
 	"@types/pg": "^8.11.11",
+	"@types/ws": "^8.18.1",
+	ws: "^8.18.3",
 
 	mysql2: "^3.14.0",
 

apps/cli/src/helpers/project-generation/template-manager.ts

@@ -57,7 +57,6 @@ export async function copyBaseTemplate(
 ): Promise<void> {
 	const templateDir = path.join(PKG_ROOT, "templates/base");
 	await processAndCopyFiles(["**/*"], templateDir, projectDir, context);
-	await fs.ensureDir(path.join(projectDir, "packages"));
 }
 
 export async function setupFrontendTemplates(

apps/cli/src/helpers/setup/db-setup.ts

@@ -51,8 +51,8 @@ export async function setupDatabase(config: ProjectConfig): Promise<void> {
 			} else if (database === "postgres") {
 				if (dbSetup === "neon") {
 					await addPackageDependency({
-						dependencies: ["drizzle-orm", "@neondatabase/serverless"],
+						dependencies: ["drizzle-orm", "@neondatabase/serverless", "ws"],
-						devDependencies: ["drizzle-kit"],
+						devDependencies: ["drizzle-kit", "@types/ws"],
 						projectDir: serverDir,
 					});
 				} else {

apps/cli/templates/db/drizzle/postgres/src/db/index.ts.hbs

@@ -1,7 +1,13 @@
 {{#if (or (eq runtime "bun") (eq runtime "node"))}}
 {{#if (eq dbSetup "neon")}}
-import { neon } from '@neondatabase/serverless';
+import { neon, neonConfig } from '@neondatabase/serverless';
 import { drizzle } from 'drizzle-orm/neon-http';
+import ws from "ws";
+
+neonConfig.webSocketConstructor = ws;
+
+// To work in edge environments (Cloudflare Workers, Vercel Edge, etc.), enable querying over fetch
+// neonConfig.poolQueryViaFetch = true
 
 const sql = neon(process.env.DATABASE_URL || "");
 export const db = drizzle(sql);
@@ -14,9 +20,13 @@ export const db = drizzle(process.env.DATABASE_URL || "");
 
 {{#if (eq runtime "workers")}}
 {{#if (eq dbSetup "neon")}}
-import { neon } from '@neondatabase/serverless';
+import { neon, neonConfig } from '@neondatabase/serverless';
 import { drizzle } from 'drizzle-orm/neon-http';
 import { env } from "cloudflare:workers";
+import ws from "ws";
+
+neonConfig.webSocketConstructor = ws;
+neonConfig.poolQueryViaFetch = true;
 
 const sql = neon(env.DATABASE_URL || "");
 export const db = drizzle(sql);

apps/cli/templates/frontend/react/react-router/src/components/theme-provider.tsx

@@ -1,73 +1,11 @@
-import { createContext, useContext, useEffect, useState } from "react";
+import * as React from "react";
-
+import { ThemeProvider as NextThemesProvider } from "next-themes";
-type Theme = "dark" | "light" | "system";
-
-type ThemeProviderProps = {
-  children: React.ReactNode;
-  defaultTheme?: Theme;
-  storageKey?: string;
-};
-
-type ThemeProviderState = {
-  theme: Theme;
-  setTheme: (theme: Theme) => void;
-};
-
-const initialState: ThemeProviderState = {
-  theme: "system",
-  setTheme: () => null,
-};
-
-const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
 
 export function ThemeProvider({
   children,
-  defaultTheme = "system",
-  storageKey = "vite-ui-theme",
   ...props
-}: ThemeProviderProps) {
+}: React.ComponentProps<typeof NextThemesProvider>) {
-  const [theme, setTheme] = useState<Theme>(
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
-    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
-  );
-
-  useEffect(() => {
-    const root = window.document.documentElement;
-
-    root.classList.remove("light", "dark");
-
-    if (theme === "system") {
-      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
-        .matches
-        ? "dark"
-        : "light";
-
-      root.classList.add(systemTheme);
-      return;
-    }
-
-    root.classList.add(theme);
-  }, [theme]);
-
-  const value = {
-    theme,
-    setTheme: (theme: Theme) => {
-      localStorage.setItem(storageKey, theme);
-      setTheme(theme);
-    },
-  };
-
-  return (
-    <ThemeProviderContext.Provider {...props} value={value}>
-      {children}
-    </ThemeProviderContext.Provider>
-  );
 }
 
-export const useTheme = () => {
+export { useTheme } from "next-themes";
-  const context = useContext(ThemeProviderContext);
-
-  if (context === undefined)
-    throw new Error("useTheme must be used within a ThemeProvider");
-
-  return context;
-};

apps/cli/templates/frontend/react/react-router/src/root.tsx.hbs

@@ -15,31 +15,25 @@ import { Toaster } from "./components/ui/sonner";
 {{#if (eq backend "convex")}}
 import { ConvexProvider, ConvexReactClient } from "convex/react";
 {{else}}
-{{#unless (eq api "none")}}
+  {{#unless (eq api "none")}}
 import { QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-{{#if (eq api "orpc")}}
+    {{#if (eq api "orpc")}}
 import { queryClient } from "./utils/orpc";
-{{/if}}
+    {{/if}}
-{{#if (eq api "trpc")}}
+    {{#if (eq api "trpc")}}
 import { queryClient } from "./utils/trpc";
-{{/if}}
+    {{/if}}
-{{/unless}}
+  {{/unless}}
 {{/if}}
 
 export const links: Route.LinksFunction = () => [
-  {
+  { rel: "preconnect", href: "https://fonts.googleapis.com" },
-    rel: "preconnect",
+  { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" },
-    href: "https://fonts.googleapis.com",
-  },
-  {
-    rel: "preconnect",
-    href: "https://fonts.gstatic.com",
-    crossOrigin: "anonymous",
-  },
   {
     rel: "stylesheet",
-    href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
+    href:
+      "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
   },
 ];
 
@@ -68,7 +62,12 @@ export default function App() {
   );
   return (
     <ConvexProvider client={convex}>
-      <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+      <ThemeProvider
+        attribute="class"
+        defaultTheme="dark"
+        disableTransitionOnChange
+        storageKey="vite-ui-theme"
+      >
         <div className="grid grid-rows-[auto_1fr] h-svh">
           <Header />
           <Outlet />
@@ -82,7 +81,12 @@ export default function App() {
 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
-        <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+      <ThemeProvider
+        attribute="class"
+        defaultTheme="dark"
+        disableTransitionOnChange
+        storageKey="vite-ui-theme"
+      >
         <div className="grid grid-rows-[auto_1fr] h-svh">
           <Header />
           <Outlet />
@@ -97,7 +101,12 @@ export default function App() {
 export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
-      <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+      <ThemeProvider
+        attribute="class"
+        defaultTheme="dark"
+        disableTransitionOnChange
+        storageKey="vite-ui-theme"
+      >
         <div className="grid grid-rows-[auto_1fr] h-svh">
           <Header />
           <Outlet />
@@ -111,7 +120,12 @@ export default function App() {
 {{else}}
 export default function App() {
   return (
-    <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="dark"
+      disableTransitionOnChange
+      storageKey="vite-ui-theme"
+    >
       <div className="grid grid-rows-[auto_1fr] h-svh">
         <Header />
         <Outlet />
@@ -126,7 +140,6 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
   let message = "Oops!";
   let details = "An unexpected error occurred.";
   let stack: string | undefined;
-
   if (isRouteErrorResponse(error)) {
     message = error.status === 404 ? "404" : "Error";
     details =
@@ -137,7 +150,6 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
     details = error.message;
     stack = error.stack;
   }
-
   return (
     <main className="pt-16 p-4 container mx-auto">
       <h1>{message}</h1>

apps/cli/templates/frontend/react/react-router/src/routes/_index.tsx.hbs

@@ -29,7 +29,7 @@ const TITLE_TEXT = `
  `;
 
 export function meta({}: Route.MetaArgs) {
-  return [{ title: "My App" }, { name: "description", content: "My App" }];
+  return [{ title: "{{projectName}}" }, { name: "description", content: "{{projectName}} is a web application" }];
 }
 
 export default function Home() {

apps/cli/templates/frontend/react/tanstack-router/index.html.hbs

@@ -1,8 +1,9 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{projectName}}</title>
   </head>
 
   <body>

apps/cli/templates/frontend/react/tanstack-router/src/components/theme-provider.tsx

@@ -1,73 +1,11 @@
-import { createContext, useContext, useEffect, useState } from "react";
+import * as React from "react";
-
+import { ThemeProvider as NextThemesProvider } from "next-themes";
-type Theme = "dark" | "light" | "system";
-
-type ThemeProviderProps = {
-  children: React.ReactNode;
-  defaultTheme?: Theme;
-  storageKey?: string;
-};
-
-type ThemeProviderState = {
-  theme: Theme;
-  setTheme: (theme: Theme) => void;
-};
-
-const initialState: ThemeProviderState = {
-  theme: "system",
-  setTheme: () => null,
-};
-
-const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
 
 export function ThemeProvider({
   children,
-  defaultTheme = "system",
-  storageKey = "vite-ui-theme",
   ...props
-}: ThemeProviderProps) {
+}: React.ComponentProps<typeof NextThemesProvider>) {
-  const [theme, setTheme] = useState<Theme>(
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
-    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
-  );
-
-  useEffect(() => {
-    const root = window.document.documentElement;
-
-    root.classList.remove("light", "dark");
-
-    if (theme === "system") {
-      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
-        .matches
-        ? "dark"
-        : "light";
-
-      root.classList.add(systemTheme);
-      return;
-    }
-
-    root.classList.add(theme);
-  }, [theme]);
-
-  const value = {
-    theme,
-    setTheme: (theme: Theme) => {
-      localStorage.setItem(storageKey, theme);
-      setTheme(theme);
-    },
-  };
-
-  return (
-    <ThemeProviderContext.Provider {...props} value={value}>
-      {children}
-    </ThemeProviderContext.Provider>
-  );
 }
 
-export const useTheme = () => {
+export { useTheme } from "next-themes";
-  const context = useContext(ThemeProviderContext);
-
-  if (context === undefined)
-    throw new Error("useTheme must be used within a ThemeProvider");
-
-  return context;
-};

apps/cli/templates/frontend/react/tanstack-router/src/routes/__root.tsx.hbs

@@ -45,11 +45,11 @@ export const Route = createRootRouteWithContext<RouterAppContext>()({
   head: () => ({
     meta: [
       {
-        title: "My App",
+        title: "{{projectName}}",
       },
       {
         name: "description",
-        content: "My App is a web application",
+        content: "{{projectName}} is a web application",
       },
     ],
     links: [
@@ -75,7 +75,12 @@ function RootComponent() {
     <>
       <HeadContent />
       {{#if (eq api "orpc")}}
-        <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="dark"
+          disableTransitionOnChange
+          storageKey="vite-ui-theme"
+        >
           <div className="grid grid-rows-[auto_1fr] h-svh">
             <Header />
             {isFetching ? <Loader /> : <Outlet />}
@@ -83,7 +88,12 @@ function RootComponent() {
           <Toaster richColors />
         </ThemeProvider>
       {{else}}
-      <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+      <ThemeProvider
+        attribute="class"
+        defaultTheme="dark"
+        disableTransitionOnChange
+        storageKey="vite-ui-theme"
+      >
         <div className="grid grid-rows-[auto_1fr] h-svh">
           <Header />
           {isFetching ? <Loader /> : <Outlet />}