test: add D1 + Cloudflare Pages + Nuxt 3 (#5040)

Co-authored-by: Joël Galeran <[email protected]>

.github/scripts/convert-to-custom-output.mjs

@@ -3,6 +3,15 @@ import fs from 'node:fs/promises'
 import { glob } from 'glob'
 
 const projectPath = process.argv[2]
+const isD1CfPagesNuxt = process.cwd().includes('d1-cfpages-nuxt')
+
+// See https://github.com/prisma/ecosystem-tests/pull/5040#issuecomment-2152970656
+// Add the db link to the package.json
+if (isD1CfPagesNuxt) {
+  const packageJson = JSON.parse(await fs.readFile(path.join(projectPath, 'package.json'), 'utf8'))
+  packageJson.dependencies['db'] = 'link:prisma/client'
+  fs.writeFile(path.join(projectPath, 'package.json'), JSON.stringify(packageJson, null, 2), 'utf8')
+}
 
 const schemaFile = path.join(projectPath, 'prisma', 'schema.prisma')
 await replaceInFile(schemaFile, /provider\s*=\s*"prisma-client-js"/, '$&\noutput="client"')
@@ -20,7 +29,12 @@ for await (const file of sourceFiles) {
   if (!relImport.startsWith('.')) {
     relImport = `./${relImport}`
   }
-  await replaceInFile(file, /@prisma\/client/g, relImport)
+  if (isD1CfPagesNuxt) {
+    // Replace '@prisma/client' with 'db'
+    await replaceInFile(file, /@prisma\/client/g, 'db')
+  } else {
+    await replaceInFile(file, /@prisma\/client/g, relImport)
+  }
   numFiles++
 }
 

.github/workflows/test.yaml

@@ -366,6 +366,7 @@ jobs:
           - turso-vercel-nextjs-edgemw
           - d1-cf-basic
           - d1-cfpages-basic
+          - d1-cfpages-nuxt
         clientEngine: ['wasm']
         os: [ubuntu-20.04]
     runs-on: ${{ matrix.os }}

driver-adapters-wasm/d1-cfpages-nuxt/.gitignore

@@ -0,0 +1,26 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example
+
+.wrangler

driver-adapters-wasm/d1-cfpages-nuxt/README.md

@@ -0,0 +1,32 @@
+# Prisma Driver Adapters Nuxt
+
+This is a Nuxt 3 project that demonstrates how to use Prisma with Driver Adapters.
+This project uses:
+- Cloudflare Pages as the web platform
+- Cloudflare D1 as a database
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+pnpm install
+```
+
+Create a local Cloudflare D1 database:
+
+```bash
+pnpm wrangler d1 migrations apply nuxt-db --local
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+pnpm run dev
+```
+
+Go to `http://localhost:3000/api` to see an example Prisma query.

driver-adapters-wasm/d1-cfpages-nuxt/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <NuxtWelcome />
+  </div>
+</template>

driver-adapters-wasm/d1-cfpages-nuxt/env.d.ts

@@ -0,0 +1,12 @@
+import { CfProperties, Request, ExecutionContext, KVNamespace } from '@cloudflare/workers-types';
+
+declare module 'h3' {
+    interface H3EventContext {
+        cf: CfProperties,
+        cloudflare: {
+          request: Request,
+          env: Env,
+          context: ExecutionContext,
+        };
+    }
+}

driver-adapters-wasm/d1-cfpages-nuxt/finally.sh

@@ -0,0 +1,3 @@
+#!/usr/bin/env bash
+
+cat deployment-logs.txt

driver-adapters-wasm/d1-cfpages-nuxt/index.test.js

@@ -0,0 +1,151 @@
+// @ts-check
+const { test, expect } = require('@jest/globals')
+const { dependencies } = require('./package.json')
+const fetch = require('node-fetch').default
+
+jest.setTimeout(30_000)
+
+test('prisma version and output', async () => {
+  const response = await fetch(process.env.DEPLOYMENT_URL + '/api', {
+    headers: {
+      'user-agent': 'ecosystem-tests',
+    },
+  })
+  const { regResult } = await response.json()
+
+  expect(regResult.prismaVersion).toMatch(dependencies['@prisma/client'])
+  expect(regResult.deleteMany.count).toBe(0)
+  expect(regResult.create).toMatchInlineSnapshot(`
+{
+  "age": 27,
+  "email": "[email protected]",
+  "name": "Test 1",
+}
+`)
+  expect(regResult.createMany.count).toBe(2)
+  expect(regResult.createManyAndReturn).toMatchInlineSnapshot(`
+  [
+    {
+      "age": 30,
+      "email": "[email protected]",
+      "name": "Test 4",
+    },
+    {
+      "age": 30,
+      "email": "[email protected]",
+      "name": "Test 5",
+    },
+    {
+      "age": 30,
+      "email": "[email protected]",
+      "name": "Test 6",
+    },
+  ]
+  `)
+  expect(regResult.findMany).toMatchInlineSnapshot(`
+[
+  {
+    "age": 27,
+    "email": "[email protected]",
+    "name": "Test 1",
+  },
+  {
+    "age": 29,
+    "email": "[email protected]",
+    "name": "Test 2",
+  },
+  {
+    "age": 29,
+    "email": "[email protected]",
+    "name": "Test 3",
+  },
+  {
+    "age": 30,
+    "email": "[email protected]",
+    "name": "Test 4",
+  },
+  {
+    "age": 30,
+    "email": "[email protected]",
+    "name": "Test 5",
+  },
+  {
+    "age": 30,
+    "email": "[email protected]",
+    "name": "Test 6",
+  },
+]
+`)
+  expect(regResult.findUnique).toMatchInlineSnapshot(`
+{
+  "age": 27,
+  "email": "[email protected]",
+  "name": "Test 1",
+}
+`)
+  expect(regResult.update).toMatchInlineSnapshot(`
+{
+  "age": 26,
+  "email": "[email protected]",
+  "name": "Test 1",
+}
+`)
+  expect(regResult.updateMany.count).toBe(1)
+  expect(regResult.findFirst).toMatchInlineSnapshot(`
+{
+  "age": 27,
+  "email": "[email protected]",
+  "name": "Test 1",
+}
+`)
+  expect(regResult.delete).toMatchInlineSnapshot(`
+{
+  "age": 27,
+  "email": "[email protected]",
+  "name": "Test 1",
+}
+`)
+  expect(regResult.count).toBe(5)
+  expect(regResult.aggregate).toMatchInlineSnapshot(`
+{
+  "age": 29,
+}
+`)
+  expect(regResult.groupBy).toMatchInlineSnapshot(`
+[
+  {
+    "_count": {
+      "age": 2,
+    },
+    "age": 29,
+  },
+  {
+    "_count": {
+      "age": 3,
+    },
+    "age": 30,
+  },
+]
+`)
+  expect(regResult.findFirstOrThrow).toMatchInlineSnapshot(`
+{
+  "age": 29,
+  "email": "[email protected]",
+  "name": "Test 2",
+}
+`)
+  expect(regResult.findUniqueOrThrow).toMatchInlineSnapshot(`
+{
+  "age": 29,
+  "email": "[email protected]",
+  "name": "Test 2",
+}
+`)
+  expect(regResult.upsert).toMatchInlineSnapshot(`
+{
+  "age": 30,
+  "email": "[email protected]",
+  "name": "Test upsert",
+}
+`)
+})

driver-adapters-wasm/d1-cfpages-nuxt/nuxt.config.ts

@@ -0,0 +1,18 @@
+import nitroCloudflareBindings from 'nitro-cloudflare-dev'
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  modules: [nitroCloudflareBindings],
+  nitro: {
+    preset: 'cloudflare-pages',
+    experimental: {
+      wasm: true,
+    },
+    esbuild: {
+      options: {
+        target: 'esnext',
+      },
+    },
+  },
+  devtools: { enabled: true },
+})

driver-adapters-wasm/d1-cfpages-nuxt/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "d1-cfpages-nuxt",
+  "author": {
+    "name": "Alberto Schiabel",
+    "email": "[email protected]"
+  },
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare",
+    "test": "jest index.test.js"
+  },
+  "dependencies": {
+    "@prisma/adapter-d1": "5.16.0-dev.4",
+    "@prisma/client": "5.16.0-dev.4",
+    "nuxt": "^3.11.2",
+    "vue": "^3.4.27",
+    "vue-router": "^4.3.2"
+  },
+  "devDependencies": {
+    "@cloudflare/workers-types": "^4.20240524.0",
+    "@jest/globals": "29.7.0",
+    "jest": "29.7.0",
+    "nitro-cloudflare-dev": "^0.1.4",
+    "prisma": "5.16.0-dev.4",
+    "wrangler": "^3.57.1"
+  }
+}