create-lx2-app 0.11.4 → 0.11.5-beta.0e175c8

package/template/packages/config/biome.jsonc

@@ -1,7 +1,8 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.2.4/schema.json",
+  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
   "assist": {
     "actions": {
+      "recommended": true,
       "source": {
         "organizeImports": {
           "level": "on",
@@ -16,6 +17,7 @@
             "identifierOrder": "natural",
           },
         },
+        "recommended": true,
         "useSortedAttributes": "on",
         "useSortedKeys": "on",
         "useSortedProperties": "on",
@@ -23,9 +25,35 @@
     },
     "enabled": true,
   },
+  "css": {
+    "assist": {
+      "enabled": true,
+    },
+    "formatter": {
+      "enabled": true,
+    },
+    "linter": {
+      "enabled": true,
+    },
+    "parser": {
+      "cssModules": true,
+      "tailwindDirectives": true,
+    },
+  },
   "files": {
     "ignoreUnknown": true,
-    "includes": ["**", "!node_modules", "!.next", "!dist", "!build"],
+    "includes": [
+      "**",
+      "!node_modules",
+      "!.next",
+      "!dist",
+      "!build",
+      "!out",
+      "!package-lock.json",
+      "!pnpm-lock.yaml",
+      "!bun.lock",
+      "!yarn.lock",
+    ],
   },
   "formatter": {
     "bracketSpacing": true,
@@ -36,7 +64,15 @@
     "lineWidth": 80,
     "useEditorconfig": true,
   },
+  "html": {
+    "formatter": {
+      "enabled": true,
+    },
+  },
   "javascript": {
+    "assist": {
+      "enabled": true,
+    },
     "formatter": {
       "arrowParentheses": "always",
       "enabled": true,
@@ -45,14 +81,16 @@
       "semicolons": "asNeeded",
       "trailingCommas": "all",
     },
+    "linter": {
+      "enabled": true,
+    },
   },
   "linter": {
-    "domains": {
-      "next": "recommended",
-      "react": "recommended",
-    },
     "enabled": true,
     "rules": {
+      "a11y": {
+        "noLabelWithoutControl": "warn",
+      },
       "complexity": {
         "noExtraBooleanCast": "warn",
         "noUselessFragments": "warn",
@@ -63,8 +101,7 @@
           "fix": "safe",
           "level": "warn",
           "options": {
-            "attributes": ["className", "class"],
-            "functions": ["cn", "clsx", "classnames"],
+            "functions": ["clsx", "cva", "cn"],
           },
         },
       },
@@ -82,7 +119,7 @@
         "useShorthandAssign": "error",
       },
       "suspicious": {
-        "noUnknownAtRules": "off",
+        "noArrayIndexKey": "off",
       },
     },
   },

package/template/packages/config/prisma.config.ts

@@ -0,0 +1,14 @@
+import "dotenv/config"
+
+import { defineConfig, env } from "prisma/config"
+
+export default defineConfig({
+  schema: "prisma/schema.prisma",
+  migrations: {
+    path: "prisma/migrations",
+    // seed: "tsx prisma/seed.ts",
+  },
+  datasource: {
+    url: env("DATABASE_URL"),
+  },
+})

package/template/packages/prisma/schema/base.prisma

@@ -3,11 +3,11 @@
 
 generator client {
     provider = "prisma-client-js"
+    output = "../src/generated/prisma"
 }
 
 datasource db {
     provider = "sqlite"
-    url      = env("DATABASE_URL")
 }
 
 model Post {

package/template/packages/prisma/schema/with-authjs.prisma

@@ -3,6 +3,7 @@
 
 generator client {
     provider = "prisma-client-js"
+    output = "../src/generated/prisma"
 }
 
 datasource db {
@@ -11,7 +12,6 @@ datasource db {
     // Further reading:
     // https://authjs.dev/getting-started/adapters/prisma#schema
     // https://www.prisma.io/docs/orm/reference/prisma-schema-reference#string
-    url      = env("DATABASE_URL")
 }
 
 model Post {

package/template/packages/prisma/schema/with-better-auth.prisma

@@ -3,11 +3,11 @@
 
 generator client {
     provider = "prisma-client-js"
+    output = "../src/generated/prisma"
 }
 
 datasource db {
     provider = "sqlite"
-    url      = env("DATABASE_URL")
 }
 
 model Post {

package/template/packages/src/app/api/trpc/[trpc]/route.ts

@@ -0,0 +1,34 @@
+import { fetchRequestHandler } from "@trpc/server/adapters/fetch"
+import { type NextRequest } from "next/server"
+
+import { env } from "@/env"
+import { createTRPCContext } from "@/server/api/init"
+import { appRouter } from "@/server/api/root"
+
+/**
+ * This wraps the `createTRPCContext` helper and provides the required context for the tRPC API when
+ * handling a HTTP request (e.g. when you make requests from Client Components).
+ */
+async function createContext(req: NextRequest) {
+  return createTRPCContext({
+    headers: req.headers,
+  })
+}
+
+const handler = (req: NextRequest) =>
+  fetchRequestHandler({
+    endpoint: "/api/trpc",
+    req,
+    router: appRouter,
+    createContext: () => createContext(req),
+    onError:
+      env.NODE_ENV === "development"
+        ? ({ path, error }) => {
+            console.error(
+              `[tRPC] Error on ${path ?? "<no-path>"}: ${error.message}`
+            )
+          }
+        : undefined,
+  })
+
+export { handler as GET, handler as POST }

package/template/packages/src/app/layout/with-trpc.tsx

@@ -0,0 +1,37 @@
+import type { Metadata } from "next"
+import { Geist, Geist_Mono } from "next/font/google"
+
+import { TRPCReactProvider } from "@/lib/api/client"
+
+import "@/styles/globals.css"
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+})
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+})
+
+export const metadata: Metadata = {
+  title: "Create Lx2 App",
+  description: "Generated by create lx2 app",
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <TRPCReactProvider>{children}</TRPCReactProvider>
+      </body>
+    </html>
+  )
+}

package/template/packages/src/app/page/base.tsx

@@ -4,7 +4,7 @@ export default function HomePage() {
   const fileURL = `vscode://file/${fileURLToPath(import.meta.url)}`
 
   return (
-    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-[45px]">
+    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-11.25">
       <div className="flex grow flex-col items-center justify-center">
         {/* Logo */}
         <picture className="relative">
@@ -45,6 +45,7 @@ export default function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Docs</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -63,6 +64,7 @@ export default function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Discord</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -81,6 +83,7 @@ export default function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>GitHub</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>

package/template/packages/src/app/page/with-authjs-drizzle.tsx

@@ -15,7 +15,7 @@ export default async function HomePage() {
   const fileURL = `vscode://file/${fileURLToPath(import.meta.url)}`
 
   return (
-    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-[45px]">
+    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-11.25">
       {/* Header */}
       <header className="ml-auto">
         {user ? (
@@ -94,6 +94,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Docs</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -112,6 +113,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Discord</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -130,6 +132,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>GitHub</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>

package/template/packages/src/app/page/with-authjs-prisma.tsx

@@ -4,6 +4,12 @@ import { revalidatePath } from "next/cache"
 import { auth, signIn, signOut } from "@/server/auth"
 import { db } from "@/server/db"
 
+/**
+ * Force dynamic rendering for pnpm + prisma
+ * @see https://github.com/prisma/prisma/issues/28581
+ */
+export const dynamic = "force-dynamic"
+
 export default async function HomePage() {
   const session = await auth()
   const user = session?.user
@@ -13,7 +19,7 @@ export default async function HomePage() {
   const fileURL = `vscode://file/${fileURLToPath(import.meta.url)}`
 
   return (
-    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-[45px]">
+    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-11.25">
       {/* Header */}
       <header className="ml-auto">
         {user ? (
@@ -92,6 +98,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Docs</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -110,6 +117,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Discord</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -128,6 +136,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>GitHub</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>

package/template/packages/src/app/page/with-authjs.tsx

@@ -9,7 +9,7 @@ export default async function HomePage() {
   const fileURL = `vscode://file/${fileURLToPath(import.meta.url)}`
 
   return (
-    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-[45px]">
+    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-11.25">
       {/* Header */}
       <header className="ml-auto">
         {user ? (
@@ -88,6 +88,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Docs</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -106,6 +107,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Discord</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -124,6 +126,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>GitHub</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>

package/template/packages/src/app/page/with-better-auth-drizzle.tsx

@@ -19,7 +19,7 @@ export default async function HomePage() {
   const fileURL = `vscode://file/${fileURLToPath(import.meta.url)}`
 
   return (
-    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-[45px]">
+    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-11.25">
       {/* Header */}
       <header className="ml-auto">
         {user ? (
@@ -110,6 +110,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Docs</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -128,6 +129,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Discord</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -146,6 +148,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>GitHub</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>

package/template/packages/src/app/page/with-better-auth-prisma.tsx

@@ -6,6 +6,12 @@ import { redirect } from "next/navigation"
 import { auth } from "@/server/auth"
 import { db } from "@/server/db"
 
+/**
+ * Force dynamic rendering for pnpm + prisma
+ * @see https://github.com/prisma/prisma/issues/28581
+ */
+export const dynamic = "force-dynamic"
+
 export default async function HomePage() {
   const session = await auth.api.getSession({
     headers: await headers(),
@@ -17,7 +23,7 @@ export default async function HomePage() {
   const fileURL = `vscode://file/${fileURLToPath(import.meta.url)}`
 
   return (
-    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-[45px]">
+    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-11.25">
       {/* Header */}
       <header className="ml-auto">
         {user ? (
@@ -108,6 +114,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Docs</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -126,6 +133,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Discord</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -144,6 +152,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>GitHub</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>

package/template/packages/src/app/page/with-better-auth.tsx

@@ -13,7 +13,7 @@ export default async function HomePage() {
   const fileURL = `vscode://file/${fileURLToPath(import.meta.url)}`
 
   return (
-    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-[45px]">
+    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-11.25">
       {/* Header */}
       <header className="ml-auto">
         {user ? (
@@ -104,6 +104,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Docs</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -122,6 +123,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Discord</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -140,6 +142,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>GitHub</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>

package/template/packages/src/app/page/with-drizzle.tsx

@@ -11,7 +11,7 @@ export default async function HomePage() {
   const fileURL = `vscode://file/${fileURLToPath(import.meta.url)}`
 
   return (
-    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-[45px]">
+    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-11.25">
       <div className="flex grow flex-col items-center justify-center">
         {/* Logo */}
         <picture className="relative">
@@ -52,6 +52,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Docs</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -70,6 +71,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Discord</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -88,6 +90,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>GitHub</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>

package/template/packages/src/app/page/with-payload.tsx

@@ -12,7 +12,7 @@ export default async function HomePage() {
   const fileURL = `vscode://file/${fileURLToPath(import.meta.url)}`
 
   return (
-    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-[45px]">
+    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-11.25">
       <div className="flex grow flex-col items-center justify-center">
         {/* Logo */}
         <picture className="relative">
@@ -86,6 +86,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Docs</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -104,6 +105,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Discord</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -122,6 +124,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>GitHub</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>

package/template/packages/src/app/page/with-prisma.tsx

@@ -3,13 +3,19 @@ import { revalidatePath } from "next/cache"
 
 import { db } from "@/server/db"
 
+/**
+ * Force dynamic rendering for pnpm + prisma
+ * @see https://github.com/prisma/prisma/issues/28581
+ */
+export const dynamic = "force-dynamic"
+
 export default async function HomePage() {
   const posts = await db.post.findMany()
 
   const fileURL = `vscode://file/${fileURLToPath(import.meta.url)}`
 
   return (
-    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-[45px]">
+    <main className="mx-auto flex h-screen max-w-5xl flex-col items-center justify-between overflow-hidden p-6 sm:p-11.25">
       <div className="flex grow flex-col items-center justify-center">
         {/* Logo */}
         <picture className="relative">
@@ -50,6 +56,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Docs</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -68,6 +75,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>Discord</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>
@@ -86,6 +94,7 @@ export default async function HomePage() {
               strokeLinejoin="round"
               className="mb-1.5 size-4 fill-none stroke-current stroke-2"
             >
+              <title>GitHub</title>
               <path d="M7 7h10v10" />
               <path d="M7 17 17 7" />
             </svg>