Merge pull request #71 from farreldarian/drizzle-schema-example

feat(example): with drizzle-orm/prisma

README.md

@@ -6,6 +6,7 @@
 
 In this version, the focus is still on the query and mutation capabilities of the generated Drizzle schema.
 
+
 ## Features
 
 https://github.com/farreldarian/prisma-generator-drizzle/assets/62016900/35b57135-614e-4e07-920b-9e9a487eb6cb
@@ -19,6 +20,14 @@ _\*Only supports default scalar for now and more constraints will be added in fu
 
 > This project is still considered as experimental, but you can safely use it for production. Follow the progress on [v1](https://github.com/farreldarian/prisma-generator-drizzle/issues/1).
 
+
+### Get started
+- [Installation](#installation)
+- [Usages](#usages)
+- [Configuration](#configuration)
+- [Example](#example) 
+- [Gotchas](#gotchas)
+
 ## Installation
 
 ### 1. Install the package
@@ -106,6 +115,8 @@ export default defineConfig({
 
 ### Generate [`.$defaultFn()`](https://arc.net/l/quote/cmywscsv) Custom Default Initializer
 
+> ⚠️ DEPRECATED , will be replace by `drizzle.custom` directive
+
 Add `/// drizzle.default <module>::<named-function-import>` directive above the field definition to generate a custom default initializer.
 
 > NOTE: This will override any `@default(...)` attribute from the schema.
@@ -156,6 +167,9 @@ export const users = pgTable('User', {
 
 ### Generate [`.$type<..>()`](https://orm.drizzle.team/docs/column-types/mysql#customizing-column-data-type) Type Customization
 
+
+> ⚠️ DEPRECATED , will be replace by `drizzle.custom` directive
+
 Add `/// drizzle.type <module>::<named-import>` directive above the field definition.
 
 ```prisma
@@ -197,6 +211,11 @@ export const users = pgTable('User', {
   ...
 })
 ```
+
+## Example
+1. [with-drizzle-prisma](./examples/with-drizzle-prisma/): using drizzle's prisma extension
+
+
 ## Gotchas
 ### Relative import paths need explicit file extensions in ECMAScript imports when '--moduleResolution' is 'node16' or 'nodenext'.
 

examples/with-drizzle-prisma/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+	"extends": "next/core-web-vitals"
+}

examples/with-drizzle-prisma/.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+prisma/drizzle.ts
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/with-drizzle-prisma/README.md

@@ -0,0 +1,41 @@
+# With Drizzle ORM and Prisma Extension
+
+This example demonstrates how to use [Drizzle ORM](https://orm.drizzle.team/) with the [Prisma](https://www.prisma.io/) extension in a Next.js project.
+
+## Getting Started
+
+1. Install dependencies:
+
+```bash
+npm install drizzle-orm@beta prisma prisma-generator-drizzle
+```
+
+2. Generate Drizzle schema
+```bash
+bun prisma generate
+```
+
+3. Define the Drizzle instance with Prisma extension:
+```ts
+// infra/db.ts
+import { PrismaClient } from '@prisma/client'
+import { drizzle } from 'drizzle-orm/prisma/pg'
+
+export const db = new PrismaClient().$extends(drizzle())
+```
+
+4. Use the Drizzle schema for querying and mutations:
+```ts
+import { db } from '~/infra/db'
+import { users } from './<path-to-generated-drizzle>';
+
+await db.$drizzle.insert(users).values({ email: '[email protected]', name: 'John' });
+const result = await prisma.$drizzle.select().from(users);
+```
+
+## Learn More
+To learn more about Drizzle ORM and Prisma, check out the following resources:
+
+- [Drizzle ORM Documentation](https://orm.drizzle.team/docs/overview)
+- [Prisma Documentation](https://www.prisma.io/docs)
+- [Prisma and Drizzle Integration Guide](https://orm.drizzle.team/docs/prisma)

examples/with-drizzle-prisma/next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+export default nextConfig

examples/with-drizzle-prisma/package.json

@@ -0,0 +1,30 @@
+{
+	"name": "with-drizzle-prisma",
+	"version": "0.1.0",
+	"private": true,
+	"scripts": {
+		"dev": "next dev",
+		"build": "next build",
+		"start": "next start",
+		"lint": "next lint"
+	},
+	"dependencies": {
+		"@prisma/client": "5.15.1",
+		"drizzle-orm": "^0.31.2-b59e0a5",
+		"next": "14.2.4",
+		"react": "^18",
+		"react-dom": "^18"
+	},
+	"devDependencies": {
+		"@types/node": "^20",
+		"@types/react": "^18",
+		"@types/react-dom": "^18",
+		"eslint": "^8",
+		"eslint-config-next": "14.2.4",
+		"postcss": "^8",
+		"prisma": "^5.15.1",
+		"prisma-generator-drizzle": "^0.7.5",
+		"tailwindcss": "^3.4.1",
+		"typescript": "^5"
+	}
+}

examples/with-drizzle-prisma/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+	plugins: {
+		tailwindcss: {},
+	},
+}
+
+export default config

examples/with-drizzle-prisma/prisma/schema.prisma

@@ -0,0 +1,19 @@
+generator client {
+  provider = "prisma-client-js"
+}
+
+generator drizzle {
+  provider = "prisma-generator-drizzle"
+  output   = "./drizzle.ts"
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DB_URL")
+}
+
+model User {
+  id    Int     @id @default(autoincrement())
+  email String  @unique
+  name  String?
+}

examples/with-drizzle-prisma/src/app/globals.css

@@ -0,0 +1,33 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}

examples/with-drizzle-prisma/src/app/layout.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+	title: 'Create Next App',
+	description: 'Generated by create next app',
+}
+
+export default function RootLayout({
+	children,
+}: Readonly<{
+	children: React.ReactNode
+}>) {
+	return (
+		<html lang="en">
+			<body className={inter.className}>{children}</body>
+		</html>
+	)
+}

examples/with-drizzle-prisma/src/app/page.tsx

@@ -0,0 +1,17 @@
+import { db } from '@/infra/db'
+import { users } from '../../prisma/drizzle'
+
+export default async function Home() {
+	const result = await db.$drizzle.select().from(users)
+
+	return (
+		<main className="grid place-items-center w-screen h-screen">
+			<div>
+				<p>Users</p>
+				{result.map((user) => (
+					<p key={user.id}>{user.name}</p>
+				))}
+			</div>
+		</main>
+	)
+}

examples/with-drizzle-prisma/src/infra/db.ts

@@ -0,0 +1,4 @@
+import { PrismaClient } from '@prisma/client'
+import { drizzle } from 'drizzle-orm/prisma/pg'
+
+export const db = new PrismaClient().$extends(drizzle())

examples/with-drizzle-prisma/tailwind.config.ts

@@ -0,0 +1,20 @@
+import type { Config } from 'tailwindcss'
+
+const config: Config = {
+	content: [
+		'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+		'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
+		'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
+	],
+	theme: {
+		extend: {
+			backgroundImage: {
+				'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+				'gradient-conic':
+					'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+			},
+		},
+	},
+	plugins: [],
+}
+export default config

examples/with-drizzle-prisma/tsconfig.json

@@ -0,0 +1,26 @@
+{
+	"compilerOptions": {
+		"lib": ["dom", "dom.iterable", "esnext"],
+		"allowJs": true,
+		"skipLibCheck": true,
+		"strict": true,
+		"noEmit": true,
+		"esModuleInterop": true,
+		"module": "esnext",
+		"moduleResolution": "bundler",
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"jsx": "preserve",
+		"incremental": true,
+		"plugins": [
+			{
+				"name": "next"
+			}
+		],
+		"paths": {
+			"@/*": ["./src/*"]
+		}
+	},
+	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+	"exclude": ["node_modules"]
+}

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "prisma-generator-drizzle-root",
-	"workspaces": ["packages/*"],
+	"workspaces": ["packages/*", "examples/*"],
 	"devDependencies": {
 		"@biomejs/biome": "^1.8.2",
 		"lefthook": "^1.6.16"