chore(release): v3.0.0-beta.19 [skip ci]

This reverts commit 0ede95f375.

.github/CODEOWNERS

@@ -1,41 +1,33 @@
 # Order matters. The last matching pattern takes precedence.
 
-### Core ###
-/packages/payload/src/uploads/ @denolfe
-/packages/payload/src/admin/ @jmikrut @jacobsfletch @JarrodMFlesch
+### Package Exports ###
+/**/exports/ @denolfe @jmikrut
 
 ### Adapters ###
-/packages/db-*/ @denolfe @jmikrut @DanRibbens
-/packages/richtext-*/ @denolfe @jmikrut @DanRibbens @AlessioGr
+/packages/richtext-*/ @AlessioGr
 
 ### Plugins ###
-/packages/plugin-*/ @denolfe @jmikrut @DanRibbens
 /packages/plugin-cloud*/ @denolfe
-/packages/plugin-form-builder/ @jacobsfletch
-/packages/plugin-live-preview*/ @jacobsfletch
-/packages/plugin-nested-docs/ @jacobsfletch
-/packages/plugin-redirects/ @jacobsfletch
-/packages/plugin-search/ @jacobsfletch
-/packages/plugin-sentry/ @JessChowdhury
-/packages/plugin-seo/ @jacobsfletch
-/packages/plugin-stripe/ @jacobsfletch
-
-### Examples ###
-/examples/ @jacobsfletch
-/examples/testing/ @JarrodMFlesch
-/examples/email/ @JessChowdhury
-/examples/whitelabel/ @JessChowdhury
 
 ### Templates ###
 /templates/ @jacobsfletch @denolfe
 
 ### Misc ###
 /packages/create-payload-app/ @denolfe
-/packages/eslint-config-payload/ @denolfe
-/packages/payload-admin-bar/ @jacobsfletch
+/packages/eslint-*/ @denolfe
+
+### Build Files ###
+/**/package.json @denolfe
+
+/tsconfig.json @denolfe
+/**/tsconfig*.json @denolfe
+
+/jest.config.js @denolfe
+/**/jest.config.js @denolfe
 
 ### Root ###
 /package.json @denolfe
 /scripts/ @denolfe
+/.husky/ @denolfe
+/.vscode/ @denolfe
 /.github/ @denolfe
-/.github/CODEOWNERS @denolfe

.github/workflows/main.yml

@@ -10,6 +10,10 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
 
+env:
+  NODE_VERSION: 18.20.2
+  PNPM_VERSION: 8.15.7
+
 jobs:
   changes:
     runs-on: ubuntu-latest
@@ -19,6 +23,10 @@ jobs:
       needs_build: ${{ steps.filter.outputs.needs_build }}
       templates: ${{ steps.filter.outputs.templates }}
     steps:
+      # https://github.com/actions/virtual-environments/issues/1187
+      - name: tune linux network
+        run: sudo ethtool -K eth0 tx off rx off
+
       - uses: actions/checkout@v4
         with:
           fetch-depth: 25
@@ -49,15 +57,19 @@ jobs:
         with:
           fetch-depth: 25
 
-      - name: Use Node.js 18
+      # https://github.com/actions/virtual-environments/issues/1187
+      - name: tune linux network
+        run: sudo ethtool -K eth0 tx off rx off
+
+      - name: Setup Node@${{ env.NODE_VERSION }}
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: ${{ env.NODE_VERSION }}
 
       - name: Install pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 8
+          version: ${{ env.PNPM_VERSION }}
           run_install: false
 
       - name: Get pnpm store directory
@@ -90,15 +102,19 @@ jobs:
     needs: build
 
     steps:
-      - name: Use Node.js 18
+      # https://github.com/actions/virtual-environments/issues/1187
+      - name: tune linux network
+        run: sudo ethtool -K eth0 tx off rx off
+
+      - name: Setup Node@${{ env.NODE_VERSION }}
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: ${{ env.NODE_VERSION }}
 
       - name: Install pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 8
+          version: ${{ env.PNPM_VERSION }}
           run_install: false
 
       - name: Restore build
@@ -122,9 +138,9 @@ jobs:
         database:
           - mongodb
           - postgres
-        #  - postgres-custom-schema
-        #  - postgres-uuid
-        #  - supabase
+          - postgres-custom-schema
+          - postgres-uuid
+          - supabase
     env:
       POSTGRES_USER: postgres
       POSTGRES_PASSWORD: postgres
@@ -135,15 +151,19 @@ jobs:
       AWS_REGION: us-east-1
 
     steps:
-      - name: Use Node.js 18
+      # https://github.com/actions/virtual-environments/issues/1187
+      - name: tune linux network
+        run: sudo ethtool -K eth0 tx off rx off
+
+      - name: Setup Node@${{ env.NODE_VERSION }}
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: ${{ env.NODE_VERSION }}
 
       - name: Install pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 8
+          version: ${{ env.PNPM_VERSION }}
           run_install: false
 
       - name: Restore build
@@ -217,7 +237,6 @@ jobs:
           - access-control
           - admin
           - auth
-          - email
           - field-error-states
           - fields-relationship
           - fields
@@ -227,6 +246,7 @@ jobs:
           - fields__collections__Lexical
           - live-preview
           - localization
+          - plugin-cloud-storage
           - plugin-form-builder
           - plugin-nested-docs
           - plugin-seo
@@ -234,15 +254,19 @@ jobs:
           - uploads
 
     steps:
-      - name: Use Node.js 18
+      # https://github.com/actions/virtual-environments/issues/1187
+      - name: tune linux network
+        run: sudo ethtool -K eth0 tx off rx off
+
+      - name: Setup Node@${{ env.NODE_VERSION }}
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: ${{ env.NODE_VERSION }}
 
       - name: Install pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 8
+          version: ${{ env.PNPM_VERSION }}
           run_install: false
 
       - name: Restore build
@@ -252,6 +276,10 @@ jobs:
           path: ./*
           key: ${{ github.sha }}-${{ github.run_number }}
 
+      - name: Start LocalStack
+        run: pnpm docker:start
+        if: ${{ matrix.suite == 'plugin-cloud-storage' }}
+
       - name: Install Playwright
         run: pnpm exec playwright install --with-deps
 
@@ -263,23 +291,72 @@ jobs:
         with:
           name: test-results-${{ matrix.suite }}
           path: test/test-results/
+          if-no-files-found: ignore
           retention-days: 1
 
+  app-build-with-packed:
+    runs-on: ubuntu-latest
+    needs: build
+
+    steps:
+      # https://github.com/actions/virtual-environments/issues/1187
+      - name: tune linux network
+        run: sudo ethtool -K eth0 tx off rx off
+
+      - name: Setup Node@${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: ${{ env.PNPM_VERSION }}
+          run_install: false
+
+      - name: Restore build
+        uses: actions/cache@v4
+        timeout-minutes: 10
+        with:
+          path: ./*
+          key: ${{ github.sha }}-${{ github.run_number }}
+
+      - name: Start MongoDB
+        uses: supercharge/mongodb-github-action@1.10.0
+        with:
+          mongodb-version: 6.0
+
+      - name: Pack and build app
+        run: |
+          set -ex
+          pnpm run script:pack --dest templates/blank-3.0
+          cd templates/blank-3.0
+          cp .env.example .env
+          ls -la
+          pnpm add ./*.tgz
+          pnpm install --ignore-workspace
+          cat package.json
+          pnpm run build
+
   tests-type-generation:
     if: false # This should be replaced with gen on a real Payload project
     runs-on: ubuntu-latest
     needs: build
 
     steps:
-      - name: Use Node.js 18
+      # https://github.com/actions/virtual-environments/issues/1187
+      - name: tune linux network
+        run: sudo ethtool -K eth0 tx off rx off
+
+      - name: Setup Node@${{ env.NODE_VERSION }}
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: ${{ env.NODE_VERSION }}
 
       - name: Install pnpm
         uses: pnpm/action-setup@v3
         with:
-          version: 8
+          version: ${{ env.PNPM_VERSION }}
           run_install: false
 
       - name: Restore build
@@ -308,11 +385,14 @@ jobs:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 25
+      # https://github.com/actions/virtual-environments/issues/1187
+      - name: tune linux network
+        run: sudo ethtool -K eth0 tx off rx off
 
-      - name: Use Node.js 18
+      - name: Setup Node@${{ env.NODE_VERSION }}
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: ${{ env.NODE_VERSION }}
 
       - name: Start MongoDB
         uses: supercharge/mongodb-github-action@1.10.0

.github/workflows/pr-title.yml

@@ -0,0 +1,99 @@
+name: pr-title
+
+on:
+  pull_request:
+    types:
+      - opened
+      - edited
+      - synchronize
+
+permissions:
+  pull-requests: write
+
+jobs:
+  main:
+    name: lint-pr-title
+    runs-on: ubuntu-latest
+    steps:
+      - uses: amannn/action-semantic-pull-request@v5
+        id: lint_pr_title
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          types: |
+            build
+            chore
+            ci
+            docs
+            feat
+            fix
+            perf
+            refactor
+            revert
+            style
+            test
+            types
+          scopes: |
+            cpa
+            db-\*
+            db-mongodb
+            db-postgres
+            email-nodemailer
+            eslint
+            graphql
+            live-preview
+            live-preview-react
+            next
+            payload
+            plugin-cloud
+            plugin-cloud-storage
+            plugin-form-builder
+            plugin-nested-docs
+            plugin-redirects
+            plugin-relationship-object-ids
+            plugin-search
+            plugin-sentry
+            plugin-seo
+            plugin-stripe
+            richtext-\*
+            richtext-lexical
+            richtext-slate
+            storage-\*
+            storage-azure
+            storage-gcs
+            storage-vercel-blob
+            storage-s3
+            translations
+            ui
+            templates
+            examples
+            deps
+
+          # Disallow uppercase letters at the beginning of the subject
+          subjectPattern: ^(?![A-Z]).+$
+
+      - uses: marocchino/sticky-pull-request-comment@v2
+        # When the previous steps fails, the workflow would stop. By adding this
+        # condition you can continue the execution with the populated error message.
+        if: always() && (steps.lint_pr_title.outputs.error_message != null)
+        with:
+          header: pr-title-lint-error
+          message: |
+            Pull Request titles must follow the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/) and have valid scopes.
+
+            ${{ steps.lint_pr_title.outputs.error_message }}
+
+            ```
+            feat(ui): add Button component
+            ^    ^    ^
+            |    |    |__ Subject
+            |    |_______ Scope
+            |____________ Type
+            ```
+
+      # Delete a previous comment when the issue has been resolved
+      - if: ${{ steps.lint_pr_title.outputs.error_message == null }}
+        uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          header: pr-title-lint-error
+          delete: true

.node-version

@@ -1 +1 @@
-v18.19.1
+v18.20.2

.nvmrc

@@ -1 +1 @@
-v18.19.1
+v18.20.2

.vscode/launch.json

@@ -41,6 +41,13 @@
       "request": "launch",
       "type": "node-terminal"
     },
+    {
+      "command": "node --no-deprecation test/dev.js auth",
+      "cwd": "${workspaceFolder}",
+      "name": "Run Dev Auth",
+      "request": "launch",
+      "type": "node-terminal"
+    },
     {
       "command": "pnpm run dev plugin-cloud-storage",
       "cwd": "${workspaceFolder}",
@@ -69,36 +76,26 @@
       }
     },
     {
-      "command": "pnpm run dev versions",
+      "command": "node --no-deprecation test/dev.js versions",
       "cwd": "${workspaceFolder}",
       "name": "Run Dev Versions",
       "request": "launch",
       "type": "node-terminal"
     },
     {
-      "command": "pnpm run dev localization",
+      "command": "node --no-deprecation test/dev.js localization",
       "cwd": "${workspaceFolder}",
       "name": "Run Dev Localization",
       "request": "launch",
       "type": "node-terminal"
     },
     {
-      "command": "pnpm run dev uploads",
+      "command": "node --no-deprecation test/dev.js uploads",
       "cwd": "${workspaceFolder}",
       "name": "Run Dev Uploads",
       "request": "launch",
       "type": "node-terminal"
     },
-    {
-      "command": "PAYLOAD_BUNDLER=vite pnpm run dev fields",
-      "cwd": "${workspaceFolder}",
-      "name": "Run Dev Fields (Vite)",
-      "request": "launch",
-      "type": "node-terminal",
-      "env": {
-        "NODE_ENV": "production"
-      }
-    },
     {
       "command": "pnpm run test:int live-preview",
       "cwd": "${workspaceFolder}",

app/(payload)/api/[...slug]/route.ts

@@ -1,9 +1,10 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 /* DO NOT MODIFY it because it could be re-written at any time. */
 import config from '@payload-config'
-import { REST_DELETE, REST_GET, REST_PATCH, REST_POST } from '@payloadcms/next/routes'
+import { REST_DELETE, REST_GET, REST_OPTIONS, REST_PATCH, REST_POST } from '@payloadcms/next/routes'
 
 export const GET = REST_GET(config)
 export const POST = REST_POST(config)
 export const DELETE = REST_DELETE(config)
 export const PATCH = REST_PATCH(config)
+export const OPTIONS = REST_OPTIONS(config)

docs/fields/json.mdx

@@ -4,7 +4,7 @@ label: JSON
 order: 50
 desc: The JSON field type will store any string in the Database. Learn how to use JSON fields, see examples and options.
 
-keywords: json, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
+keywords: json, jsonSchema, schema, validation, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---
 
 <Banner>
@@ -30,6 +30,7 @@ This field uses the `monaco-react` editor syntax highlighting.
 | **`unique`**       | Enforce that each entry in the Collection has a unique value for this field.                                                                                                |
 | **`index`**        | Build an [index](/docs/database/overview) for this field to produce faster queries. Set this field to `true` if your users will perform queries on this field's data often. |
 | **`validate`**     | Provide a custom validation function that will be executed on both the Admin panel and the backend. [More](/docs/fields/overview#validation)                                |
+| **`jsonSchema`**   | Provide a JSON schema that will be used for validation. [JSON schemas](https://json-schema.org/learn/getting-started-step-by-step)
 | **`saveToJWT`**    | If this field is top-level and nested in a config supporting [Authentication](/docs/authentication/config), include its data in the user JWT.                               |
 | **`hooks`**        | Provide field-based hooks to control logic for this field. [More](/docs/fields/overview#field-level-hooks)                                                                  |
 | **`access`**       | Provide field-based access control to denote what users can see and do with this field's data. [More](/docs/fields/overview#field-level-access-control)                     |
@@ -52,7 +53,7 @@ In addition to the default [field admin config](/docs/fields/overview#admin-conf
 
 ### Example
 
-`collections/ExampleCollection.ts
+`collections/ExampleCollection.ts`
 
 ```ts
 import { CollectionConfig } from 'payload/types'
@@ -68,3 +69,67 @@ export const ExampleCollection: CollectionConfig = {
   ],
 }
 ```
+### JSON Schema Validation
+
+Payload JSON fields fully support the [JSON schema](https://json-schema.org/) standard. By providing a schema in your field config, the editor will be guided in the admin UI, getting typeahead for properties and their formats automatically. When the document is saved, the default validation will prevent saving any invalid data in the field according to the schema in your config.
+
+If you only provide a URL to a schema, Payload will fetch the desired schema if it is publicly available. If not, it is recommended to add the schema directly to your config or import it from another file so that it can be implemented consistently in your project.
+
+
+#### Local JSON Schema
+
+`collections/ExampleCollection.ts`
+
+```ts
+import { CollectionConfig } from 'payload/types'
+
+export const ExampleCollection: CollectionConfig = {
+  slug: 'example-collection',
+  fields: [
+    {
+      name: 'customerJSON', // required
+      type: 'json', // required
+      jsonSchema: {
+        uri: 'a://b/foo.json', // required
+        fileMatch: ['a://b/foo.json'], // required
+        schema: {
+          type: 'object',
+          properties: {
+            foo: {
+              enum: ['bar', 'foobar'],
+            }
+          },
+        },
+      },
+
+    },
+  ],
+}
+// {"foo": "bar"} or {"foo": "foobar"} - ok
+// Attempting to create {"foo": "not-bar"} will throw an error
+```
+
+#### Remote JSON Schema
+
+`collections/ExampleCollection.ts`
+
+```ts
+import { CollectionConfig } from 'payload/types'
+
+export const ExampleCollection: CollectionConfig = {
+  slug: 'example-collection',
+  fields: [
+    {
+      name: 'customerJSON', // required
+      type: 'json', // required
+      jsonSchema: {
+        uri: 'https://example.com/customer.schema.json', // required
+        fileMatch: ['https://example.com/customer.schema.json'], // required
+      },
+    },
+  ],
+}
+// If 'https://example.com/customer.schema.json' has a JSON schema
+// {"foo": "bar"} or {"foo": "foobar"} - ok
+// Attempting to create {"foo": "not-bar"} will throw an error
+```

docs/graphql/overview.mdx

@@ -42,11 +42,12 @@ export const PublicUser: CollectionConfig = {
 
 **Payload will automatically open up the following queries:**
 
-| Query Name         | Operation           |
-| ------------------ | ------------------- |
-| **`PublicUser`**   | `findByID`          |
-| **`PublicUsers`**  | `find`              |
-| **`mePublicUser`** | `me` auth operation |
+| Query Name              | Operation           |
+| ------------------      | ------------------- |
+| **`PublicUser`**        | `findByID`          |
+| **`PublicUsers`**       | `find`              |
+| **`countPublicUsers`**  | `count`             |
+| **`mePublicUser`**      | `me` auth operation |
 
 **And the following mutations:**
 

docs/live-preview/frontend.mdx

@@ -8,7 +8,7 @@ keywords: live preview, frontend, react, next.js, vue, nuxt.js, svelte, hook, us
 
 While using Live Preview, the Admin panel emits a new `window.postMessage` event every time a change is made to the document. Your front-end application can listen for these events and re-render accordingly.
 
-Wiring your front-end into Live Preview is easy. If your front-end application is built with React or Next.js, use the [`useLivePreview`](#react) React hook that Payload provides. In the future, all other major frameworks like Vue, Svelte, etc will be officially supported. If you are using any of these frameworks today, you can still integrate with Live Preview yourself using the underlying tooling that Payload provides. See [building your own hook](#building-your-own-hook) for more information.
+Wiring your front-end into Live Preview is easy. If your front-end application is built with React, Next.js, Vue or Nuxt.js, use the `useLivePreview` hook that Payload provides. In the future, all other major frameworks like Svelte will be officially supported. If you are using any of these frameworks today, you can still integrate with Live Preview yourself using the underlying tooling that Payload provides. See [building your own hook](#building-your-own-hook) for more information.
 
 By default, all hooks accept the following args:
 
@@ -36,6 +36,10 @@ And return the following values:
   For example, `data?.relatedPosts?.[0]?.title`.
 </Banner>
 
+<Banner type="info">
+  It is important that the `depth` argument matches exactly with the depth of your initial page request. The depth property is used to populated relationships and uploads beyond their IDs. See [Depth](../getting-started/concepts#depth) for more information.
+</Banner>
+
 ### React
 
 If your front-end application is built with React or Next.js, you can use the `useLivePreview` hook that Payload provides.
@@ -71,11 +75,40 @@ export const PageClient: React.FC<{
 }
 ```
 
-<Banner type="info">
-  If is important that the `depth` argument matches exactly with the depth of your initial page
-  request. The depth property is used to populated relationships and uploads beyond their IDs. See
-  [Depth](../getting-started/concepts#depth) for more information.
-</Banner>
+### Vue
+
+If your front-end application is built with Vue 3 or Nuxt 3, you can use the `useLivePreview` composable that Payload provides.
+
+First, install the `@payloadcms/live-preview-vue` package:
+
+```bash
+npm install @payloadcms/live-preview-vue
+```
+
+Then, use the `useLivePreview` hook in your Vue component:
+
+```vue
+<script setup lang="ts">
+import type { PageData } from '~/types';
+import { defineProps } from 'vue';
+import { useLivePreview } from '@payloadcms/live-preview-vue';
+
+// Fetch the initial data on the parent component or using async state
+const props = defineProps<{ initialData: PageData }>();
+
+// The hook will take over from here and keep the preview in sync with the changes you make.
+// The `data` property will contain the live data of the document only when viewed from the Preview view of the Admin UI.
+const { data } = useLivePreview<PageData>({
+  initialData: props.initialData,
+  serverURL: "<PAYLOAD_SERVER_URL>",
+  depth: 2,
+});
+</script>
+
+<template>
+  <h1>{{ data.title }}</h1>
+</template>
+```
 
 ## Building your own hook
 

docs/local-api/overview.mdx

@@ -164,6 +164,22 @@ const result = await payload.findByID({
 })
 ```
 
+#### Count
+
+```js
+// Result will be an object with:
+// {
+//   totalDocs: 10, // count of the documents satisfies query
+// }
+const result = await payload.count({
+  collection: 'posts', // required
+  locale: 'en',
+  where: {}, // pass a `where` query here
+  user: dummyUser,
+  overrideAccess: false,
+})
+```
+
 #### Update by ID
 
 ```js

docs/rest-api/overview.mdx

@@ -90,6 +90,19 @@ Note: Collection slugs must be formatted in kebab-case
         },
       },
     },
+    {
+      operation: "Count",
+      method: "GET",
+      path: "/api/{collection-slug}/count",
+      description: "Count the documents",
+      example: {
+        slug: "count",
+        req: true,
+        res: {
+         totalDocs: 10
+        },
+      },
+    },
     {
       operation: "Create",
       method: "POST",

docs/rich-text/lexical.mdx

@@ -138,7 +138,7 @@ import { CallToAction } from '../blocks/CallToAction'
 Here's an overview of all the included features:
 
 | Feature Name                   | Included by default | Description                                                                                                                                                                            |
-| ------------------------------ | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+|--------------------------------|---------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | **`BoldTextFeature`**          | Yes                 | Handles the bold text format                                                                                                                                                           |
 | **`ItalicTextFeature`**        | Yes                 | Handles the italic text format                                                                                                                                                         |
 | **`UnderlineTextFeature`**     | Yes                 | Handles the underline text format                                                                                                                                                      |
@@ -157,7 +157,8 @@ Here's an overview of all the included features:
 | **`RelationshipFeature`**      | Yes                 | Allows you to create block-level (not inline) relationships to other documents                                                                                                         |
 | **`BlockQuoteFeature`**        | Yes                 | Allows you to create block-level quotes                                                                                                                                                |
 | **`UploadFeature`**            | Yes                 | Allows you to create block-level upload nodes - this supports all kinds of uploads, not just images                                                                                    |
-| **`BlocksFeature`**            | No                  | Allows you to use Payload's [Blocks Field](/docs/fields/blocks) directly inside your editor. In the feature props, you can specify the allowed blocks - just like in the Blocks field. |
+| **`HorizontalRuleFeature`**    | Yes                 | Horizontal rules / separators. Basically displays an <hr> element                                                                                                                      |
+| **`BlocksFeature`**            | No                  | Allows you to use Payload's [Blocks Field](/docs/fields/blocks) directly inside your editor. In the feature props, you can specify the allowed blocks - just like in the Blocks field.                 |
 | **`TreeViewFeature`**          | No                  | Adds a debug box under the editor, which allows you to see the current editor state live, the dom, as well as time travel. Very useful for debugging                                   |
 
 ## Creating your own, custom Feature
@@ -234,6 +235,19 @@ This method employs `convertLexicalToHTML` from `@payloadcms/richtext-lexical`,
 
 Because every `Feature` is able to provide html converters, and because the `htmlFeature` can modify those or provide their own, we need to consolidate them with the default html Converters using the `consolidateHTMLConverters` function.
 
+#### CSS
+
+Payload's lexical HTML converter does not generate CSS for you, but it does add classes to the generated HTML. You can use these classes to style the HTML in your frontend.
+
+Here is some "base" CSS you can use to ensure that nested lists render correctly:
+
+```css
+/* Base CSS for Lexical HTML */
+.nestedListItem, .list-check {
+  list-style-type: none;
+}
+```
+
 #### Creating your own HTML Converter
 
 HTML Converters are typed as `HTMLConverter`, which contains the node type it should handle, and a function that accepts the serialized node from the lexical editor, and outputs the HTML string. Here's the HTML Converter of the Upload node as an example:

docs/upload/overview.mdx

@@ -40,21 +40,22 @@ Every Payload Collection can opt-in to supporting Uploads by specifying the `upl
 
 ### Collection Upload Options
 
-| Option                      | Description                                                                                                                                                                                                      |
-| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **`staticURL`** \*          | The URL path to use to access your uploads. Relative path like `/media` will be served by payload. Full path like `https://example.com/media` needs to be served by another web server.                          |
-| **`staticDir`** \*          | The folder directory to use to store media in. Can be either an absolute path or relative to the directory that contains your config.                                                                            |
-| **`adminThumbnail`**        | Set the way that the Admin panel will display thumbnails for this Collection. [More](#admin-thumbnails)                                                                                                          |
-| **`crop`**                  | Set to `false` to disable the cropping tool in the Admin panel. Crop is enabled by default. [More](#crop-and-focal-point-selector)                                                                               |
-| **`disableLocalStorage`**   | Completely disable uploading files to disk locally. [More](#disabling-local-upload-storage)                                                                                                                      |
-| **`focalPoint`**            | Set to `false` to disable the focal point selection tool in the Admin panel. The focal point selector is only available when `imageSizes` or `resizeOptions` are defined. [More](#crop-and-focal-point-selector) |
-| **`formatOptions`**         | An object with `format` and `options` that are used with the Sharp image library to format the upload file. [More](https://sharp.pixelplumbing.com/api-output#toformat)                                          |
-| **`handlers`**              | Array of Express request handlers to execute before the built-in Payload static middleware executes.                                                                                                             |
-| **`imageSizes`**            | If specified, image uploads will be automatically resized in accordance to these image sizes. [More](#image-sizes)                                                                                               |
-| **`mimeTypes`**             | Restrict mimeTypes in the file picker. Array of valid mimetypes or mimetype wildcards [More](#mimetypes)                                                                                                         |
-| **`staticOptions`**         | Set options for `express.static` to use while serving your static files. [More](http://expressjs.com/en/resources/middleware/serve-static.html)                                                                  |
-| **`resizeOptions`**         | An object passed to the the Sharp image library to resize the uploaded file. [More](https://sharp.pixelplumbing.com/api-resize)                                                                                  |
-| **`filesRequiredOnCreate`** | Mandate file data on creation, default is true.                                                                                                                                                                  |
+| Option                         | Description                                                                                                                                                                                                      |
+| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **`staticURL`** \*             | The URL path to use to access your uploads. Relative path like `/media` will be served by payload. Full path like `https://example.com/media` needs to be served by another web server.                          |
+| **`staticDir`** \*             | The folder directory to use to store media in. Can be either an absolute path or relative to the directory that contains your config.                                                                            |
+| **`adminThumbnail`**           | Set the way that the Admin panel will display thumbnails for this Collection. [More](#admin-thumbnails)                                                                                                          |
+| **`crop`**                     | Set to `false` to disable the cropping tool in the Admin panel. Crop is enabled by default. [More](#crop-and-focal-point-selector)                                                                               |
+| **`disableLocalStorage`**      | Completely disable uploading files to disk locally. [More](#disabling-local-upload-storage)                                                                                                                      |
+| **`externalFileHeaderFilter`** | Accepts existing headers and can filter/modify them.                                                                                                                                                             |
+| **`focalPoint`**               | Set to `false` to disable the focal point selection tool in the Admin panel. The focal point selector is only available when `imageSizes` or `resizeOptions` are defined. [More](#crop-and-focal-point-selector) |
+| **`formatOptions`**            | An object with `format` and `options` that are used with the Sharp image library to format the upload file. [More](https://sharp.pixelplumbing.com/api-output#toformat)                                          |
+| **`handlers`**                 | Array of Express request handlers to execute before the built-in Payload static middleware executes.                                                                                                             |
+| **`imageSizes`**               | If specified, image uploads will be automatically resized in accordance to these image sizes. [More](#image-sizes)                                                                                               |
+| **`mimeTypes`**                | Restrict mimeTypes in the file picker. Array of valid mimetypes or mimetype wildcards [More](#mimetypes)                                                                                                         |
+| **`staticOptions`**            | Set options for `express.static` to use while serving your static files. [More](http://expressjs.com/en/resources/middleware/serve-static.html)                                                                  |
+| **`resizeOptions`**            | An object passed to the the Sharp image library to resize the uploaded file. [More](https://sharp.pixelplumbing.com/api-resize)                                                                                  |
+| **`filesRequiredOnCreate`**    | Mandate file data on creation, default is true.                                                                                                                                                                  |
 
 _An asterisk denotes that a property above is required._
 

examples/hierarchy/.env.example

@@ -1,2 +1,2 @@
-DATABASE_URI=mongodb://127.0.0.1/payload-template-blank
+DATABASE_URI=mongodb://127.0.0.1/payload-template-blank-3-0
 PAYLOAD_SECRET=YOUR_SECRET_HERE

examples/hierarchy/.eslintrc.cjs

@@ -0,0 +1,7 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  parserOptions: {
+    project: ['./tsconfig.json'],
+    tsconfigRootDir: __dirname,
+  },
+}

examples/hierarchy/.gitignore

@@ -1,6 +1,43 @@
-build
-dist
-/media
-node_modules
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+/.idea/*
+!/.idea/runConfigurations
+
+# 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
+
 .env
+
+/media

examples/hierarchy/.prettierrc.js

@@ -1,8 +0,0 @@
-module.exports = {
-  printWidth: 100,
-  parser: 'typescript',
-  semi: false,
-  singleQuote: true,
-  trailingComma: 'all',
-  arrowParens: 'avoid',
-}

examples/hierarchy/.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "semi": false
+}

examples/hierarchy/README.md

@@ -1,8 +1,10 @@
-# Payload Hierarchy Example
+# Payload Blank Template
 
-This example demonstrates how to achieve a virtual hierarchy between documents in your [Payload](https://github.com/payloadcms/payload) application.
+A blank template for [Payload](https://github.com/payloadcms/payload) to help you get up and running quickly. This repo may have been created by running `npx create-payload-app@latest` and selecting the "blank" template or by cloning this template on [Payload Cloud](https://payloadcms.com/new/clone/blank).
 
-## Quick Start
+See the official [Examples Directory](https://github.com/payloadcms/payload/tree/main/examples) for details on how to use Payload in a variety of different ways.
+
+## Development
 
 To spin up the project locally, follow these steps:
 
@@ -14,33 +16,15 @@ To spin up the project locally, follow these steps:
 
 That's it! Changes made in `./src` will be reflected in your app.
 
-## How it works
+### Docker
 
-This example achieves parent/child relationships between your documents through the use of virtual fields. When you query a document with the `?children=true` query param, an afterRead hook is used to populate the documents within its own tree.
+Alternatively, you can use [Docker](https://www.docker.com) to spin up this project locally. To do so, follow these steps:
 
-For more information on how virtual fields, see the [Official Virtual Fields Example](https://github.com/payloadcms/payload/tree/main/examples/virtual-fields).
+1. Follow [steps 1 and 2 from above](#development), the docker-compose file will automatically use the `.env` file in your project root
+1. Next run `docker-compose up`
+1. Follow [steps 4 and 5 from above](#development) to login and create your first admin user
 
-### Collections
-
-See the [Collections](https://payloadcms.com/docs/configuration/collections) docs for details on how to extend any of this functionality.
-
-- #### Users
-
-  The `users` collection is a default payload users collection.
-
-- #### Entities
-
-  The `entities` collection can define a parent as any other entity.  It has a virtual field that will also populate children when it is called via the API using a query `children=true`. See [Virtual Fields](https://github.com/payloadcms/payload/tree/main/examples/virtual-fields) for more details on how virtual fields work. 
-  
-  The virtual field retrieves __all__ children which includes other entities and people.
-
-- #### People
-
-  The `people` collection is a collection that can define an array of parent entities.  It also has an allocation field.  This is for demonstrating attaching data to a parent-child relationship.
-
-## Development
-
-To spin up this example locally, follow the [Quick Start](#quick-start).
+That's it! The Docker instance will help you get up and running quickly while also standardizing the development environment across your teams.
 
 ## Production
 

examples/hierarchy/next.config.mjs

@@ -0,0 +1,8 @@
+import { withPayload } from '@payloadcms/next/withPayload'
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // Your Next.js config here
+}
+
+export default withPayload(nextConfig)

examples/hierarchy/package.json

@@ -2,34 +2,38 @@
   "name": "hierarchy",
   "description": "A hierarchy example with Payload",
   "version": "1.0.0",
-  "main": "dist/server.js",
   "license": "MIT",
+  "type": "module",
   "scripts": {
-    "dev": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts nodemon",
-    "build:payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload build",
-    "build:server": "tsc",
-    "build": "yarn copyfiles && yarn build:payload && yarn build:server",
-    "serve": "cross-env PAYLOAD_CONFIG_PATH=dist/payload.config.js NODE_ENV=production node dist/server.js",
-    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png}\" dist/",
-    "generate:types": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:types",
-    "generate:graphQLSchema": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:graphQLSchema",
-    "payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload"
+    "dev": "cross-env NODE_OPTIONS=--no-deprecation next dev",
+    "devsafe": "rm -rf .next && cross-env NODE_OPTIONS=--no-deprecation next dev",
+    "build": "cross-env NODE_OPTIONS=--no-deprecation next build",
+    "payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
+    "start": "cross-env NODE_OPTIONS=--no-deprecation next start",
+    "lint": "cross-env NODE_OPTIONS=--no-deprecation next lint",
+    "generate:types": "payload generate:types"
+  },
+  "engines": {
+    "node": ">=18.19.0"
   },
   "dependencies": {
-    "@payloadcms/bundler-webpack": "^1.0.0",
-    "@payloadcms/db-mongodb": "^1.0.0",
-    "@payloadcms/plugin-cloud": "^3.0.0",
-    "@payloadcms/richtext-slate": "^1.0.0",
+    "@payloadcms/db-mongodb": "beta",
+    "@payloadcms/next": "beta",
+    "@payloadcms/plugin-cloud": "beta",
+    "@payloadcms/richtext-lexical": "beta",
     "cross-env": "^7.0.3",
-    "dotenv": "^8.2.0",
-    "express": "^4.17.1",
-    "payload": "^2.0.0"
+    "next": "14.3.0-canary.7",
+    "payload": "beta",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sharp": "0.32.6"
   },
   "devDependencies": {
-    "@types/express": "^4.17.9",
-    "copyfiles": "^2.4.1",
-    "nodemon": "^2.0.6",
-    "ts-node": "^9.1.1",
-    "typescript": "^4.8.4"
+    "@types/node": "^20.11.25",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "dotenv": "^16.4.5",
+    "tsx": "^4.7.1",
+    "typescript": "^5.4.2"
   }
 }

examples/hierarchy/src/app/(payload)/admin/[[...segments]]/page.tsx

@@ -0,0 +1,17 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+import config from '@payload-config'
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import { RootPage } from '@payloadcms/next/views'
+
+type Args = {
+  params: {
+    segments: string[]
+  }
+  searchParams: {
+    [key: string]: string | string[]
+  }
+}
+
+const Page = ({ params, searchParams }: Args) => RootPage({ config, params, searchParams })
+
+export default Page

examples/hierarchy/src/app/(payload)/api/[...slug]/route.ts

@@ -0,0 +1,9 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { REST_DELETE, REST_GET, REST_PATCH, REST_POST } from '@payloadcms/next/routes'
+
+export const GET = REST_GET(config)
+export const POST = REST_POST(config)
+export const DELETE = REST_DELETE(config)
+export const PATCH = REST_PATCH(config)

examples/hierarchy/src/app/(payload)/api/graphql-playground/route.ts

@@ -0,0 +1,6 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes'
+
+export const GET = GRAPHQL_PLAYGROUND_GET(config)

examples/hierarchy/src/app/(payload)/api/graphql/route.ts

@@ -0,0 +1,6 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { GRAPHQL_POST } from '@payloadcms/next/routes'
+
+export const POST = GRAPHQL_POST(config)

examples/hierarchy/src/app/(payload)/layout.tsx

@@ -0,0 +1,16 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+import configPromise from '@payload-config'
+import '@payloadcms/next/css'
+import { RootLayout } from '@payloadcms/next/layouts'
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
+
+import './custom.scss'
+
+type Args = {
+  children: React.ReactNode
+}
+
+const Layout = ({ children }: Args) => <RootLayout config={configPromise}>{children}</RootLayout>
+
+export default Layout

examples/hierarchy/src/collections/Entities.ts

@@ -1,4 +1,4 @@
-import { CollectionConfig } from 'payload/types'
+import type { CollectionConfig } from 'payload/types'
 
 export const Entities: CollectionConfig = {
   slug: 'entities',
@@ -18,7 +18,6 @@ export const Entities: CollectionConfig = {
     {
       name: 'children',
       type: 'relationship',
-      relationTo: ['entities', 'people'],
       access: {
         create: () => false,
         update: () => false,
@@ -26,40 +25,40 @@ export const Entities: CollectionConfig = {
       hooks: {
         afterRead: [
           async ({ data, req }) => {
+            if (!req.query.children || !data) return
+
             const { id } = data
 
-            if (!req.query.children) return
-
             const people = await req.payload.find({
-              req,
               collection: 'people',
+              depth: 0,
+              limit: 0,
+              pagination: false,
+              req,
               where: {
                 'parents.parent': { equals: id },
               },
-              limit: 0,
-              depth: 0,
-              pagination: false,
             })
 
             const entities = await req.payload.find({
-              req,
               collection: 'entities',
+              depth: 0,
+              limit: 0,
+              pagination: false,
+              req,
               where: {
                 parent: { equals: id },
               },
-              limit: 0,
-              depth: 0,
-              pagination: false,
             })
 
             return [
-              ...entities.docs.map(entity => {
+              ...entities.docs.map((entity) => {
                 return {
                   relationTo: 'entity',
                   value: entity,
                 }
               }),
-              ...people.docs.map(person => {
+              ...people.docs.map((person) => {
                 return {
                   relationTo: 'people',
                   value: person,
@@ -69,6 +68,7 @@ export const Entities: CollectionConfig = {
           },
         ],
       },
+      relationTo: ['entities', 'people'],
     },
     {
       name: 'parent',

examples/hierarchy/src/collections/People.ts

@@ -1,4 +1,4 @@
-import { CollectionConfig } from 'payload/types'
+import type { CollectionConfig } from 'payload/types'
 
 export const People: CollectionConfig = {
   slug: 'people',
@@ -23,8 +23,8 @@ export const People: CollectionConfig = {
         {
           name: 'allocation',
           type: 'number',
-          min: 0,
           max: 100,
+          min: 0,
         },
       ],
     },

examples/hierarchy/src/collections/Users.ts

@@ -1,15 +1,13 @@
-import { CollectionConfig } from 'payload/types'
+import type { CollectionConfig } from 'payload/types'
 
-const Users: CollectionConfig = {
+export const Users: CollectionConfig = {
   slug: 'users',
-  auth: true,
   admin: {
     useAsTitle: 'email',
   },
+  auth: true,
   fields: [
     // Email added by default
     // Add more fields as needed
   ],
 }
-
-export default Users

examples/hierarchy/src/payload.config.ts

@@ -1,30 +1,39 @@
-import path from 'path'
-
-import { payloadCloud } from '@payloadcms/plugin-cloud'
 import { mongooseAdapter } from '@payloadcms/db-mongodb'
-import { webpackBundler } from '@payloadcms/bundler-webpack'
-import { slateEditor } from '@payloadcms/richtext-slate'
+// import { payloadCloud } from '@payloadcms/plugin-cloud'
+import { lexicalEditor } from '@payloadcms/richtext-lexical'
+import path from 'path'
 import { buildConfig } from 'payload/config'
+// import sharp from 'sharp'
+import { fileURLToPath } from 'url'
 
-import Users from './collections/Users'
 import { Entities } from './collections/Entities'
 import { People } from './collections/People'
+import { Users } from './collections/Users'
+
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
 
 export default buildConfig({
   admin: {
     user: Users.slug,
-    bundler: webpackBundler(),
   },
-  editor: slateEditor({}),
-  collections: [Users, Entities, People],
-  typescript: {
-    outputFile: path.resolve(__dirname, 'payload-types.ts'),
-  },
-  graphQL: {
-    schemaOutputFile: path.resolve(__dirname, 'generated-schema.graphql'),
-  },
-  plugins: [payloadCloud()],
+  collections: [Entities, People, Users],
+  editor: lexicalEditor({}),
+  // plugins: [payloadCloud()], // TODO: Re-enable when cloud supports 3.0
   db: mongooseAdapter({
-    url: process.env.DATABASE_URI,
+    url: process.env.DATABASE_URI || '',
   }),
+  secret: process.env.PAYLOAD_SECRET || '',
+  typescript: {
+    outputFile: path.resolve(dirname, 'payload-types.ts'),
+  },
+
+  // Sharp is now an optional dependency -
+  // if you want to resize images, crop, set focal point, etc.
+  // make sure to install it and pass it to the config.
+
+  // This is temporary - we may make an adapter pattern
+  // for this before reaching 3.0 stable
+
+  // sharp,
 })

examples/hierarchy/src/server.ts

@@ -1,27 +0,0 @@
-import express from 'express'
-import payload from 'payload'
-
-require('dotenv').config()
-const app = express()
-
-// Redirect root to Admin panel
-app.get('/', (_, res) => {
-  res.redirect('/admin')
-})
-
-const start = async () => {
-  // Initialize Payload
-  await payload.init({
-    secret: process.env.PAYLOAD_SECRET,
-    express: app,
-    onInit: async () => {
-      payload.logger.info(`Payload Admin URL: ${payload.getAdminURL()}`)
-    },
-  })
-
-  // Add your own express routes here
-
-  app.listen(3000)
-}
-
-start()

examples/hierarchy/tsconfig.json

@@ -1,22 +1,28 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "baseUrl": ".",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
-    "strict": false,
-    "esModuleInterop": true,
     "skipLibCheck": true,
-    "outDir": "./dist",
-    "rootDir": "./src",
-    "jsx": "react",
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
     "paths": {
-      "payload/generated-types": ["./src/payload-types.ts"]
+      "@/*": ["./src/*"],
+      "@payload-config": ["./src/payload.config.ts"]
     }
   },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist", "build"],
-  "ts-node": {
-    "transpileOnly": true,
-    "swc": true
-  }
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
 }

examples/virtual-fields/.env.example

@@ -1,3 +1,3 @@
-MONGODB_URI=mongodb://127.0.0.1/payload-example-vitual-fields
-PAYLOAD_SECRET=ENTER-STRING-HERE
-PAYLOAD_PUBLIC_SERVER_URL=http://localhost:8000
+DATABASE_URI=mongodb://127.0.0.1/payload-template-blank-3-0
+PAYLOAD_SECRET=YOUR_SECRET_HERE
+PAYLOAD_PUBLIC_SEED=true

examples/virtual-fields/.eslintrc.cjs

@@ -0,0 +1,7 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  parserOptions: {
+    project: ['./tsconfig.json'],
+    tsconfigRootDir: __dirname,
+  },
+}

examples/virtual-fields/.gitignore

@@ -1,5 +1,43 @@
-build
-dist
-node_modules
-package-lock.json
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+/.idea/*
+!/.idea/runConfigurations
+
+# 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
+
 .env
+
+/media

examples/virtual-fields/package.json

@@ -4,26 +4,31 @@
   "main": "dist/server.js",
   "license": "MIT",
   "scripts": {
-    "dev": "cross-env PAYLOAD_PUBLIC_SEED=true PAYLOAD_DROP_DATABASE=true PAYLOAD_CONFIG_PATH=src/payload.config.ts nodemon",
-    "build:payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload build",
-    "build:server": "tsc",
-    "build": "yarn copyfiles && yarn build:payload && yarn build:server",
-    "serve": "cross-env PAYLOAD_CONFIG_PATH=dist/payload.config.js NODE_ENV=production node dist/server.js",
-    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png}\" dist/",
-    "generate:types": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:types",
-    "generate:graphQLSchema": "PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:graphQLSchema"
+    "dev": "cross-env NODE_OPTIONS=--no-deprecation next dev",
+    "devsafe": "rm -rf .next && cross-env NODE_OPTIONS=--no-deprecation next dev",
+    "build": "cross-env NODE_OPTIONS=--no-deprecation next build",
+    "payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
+    "start": "cross-env NODE_OPTIONS=--no-deprecation next start",
+    "lint": "cross-env NODE_OPTIONS=--no-deprecation next lint",
+    "generate:types": "payload generate:types"
   },
   "dependencies": {
-    "dotenv": "^8.2.0",
-    "express": "^4.17.1",
-    "payload": "latest"
+    "@payloadcms/db-mongodb": "beta",
+    "@payloadcms/next": "beta",
+    "@payloadcms/richtext-lexical": "beta",
+    "cross-env": "^7.0.3",
+    "next": "^14.3.0-canary.7",
+    "payload": "beta",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sharp": "0.32.6"
   },
   "devDependencies": {
-    "@types/express": "^4.17.9",
-    "copyfiles": "^2.4.1",
-    "cross-env": "^7.0.3",
-    "nodemon": "^2.0.6",
-    "ts-node": "^9.1.1",
-    "typescript": "^4.8.4"
+    "@types/node": "^20.11.25",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "dotenv": "^16.4.5",
+    "tsx": "^4.7.1",
+    "typescript": "^5.4.2"
   }
 }

examples/virtual-fields/src/app/(payload)/admin/[[...segments]]/page.tsx

@@ -0,0 +1,17 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+import config from '@payload-config'
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import { RootPage } from '@payloadcms/next/views'
+
+type Args = {
+  params: {
+    segments: string[]
+  }
+  searchParams: {
+    [key: string]: string | string[]
+  }
+}
+
+const Page = ({ params, searchParams }: Args) => RootPage({ config, params, searchParams })
+
+export default Page

examples/virtual-fields/src/app/(payload)/api/[...slug]/route.ts

@@ -0,0 +1,9 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { REST_DELETE, REST_GET, REST_PATCH, REST_POST } from '@payloadcms/next/routes'
+
+export const GET = REST_GET(config)
+export const POST = REST_POST(config)
+export const DELETE = REST_DELETE(config)
+export const PATCH = REST_PATCH(config)

examples/virtual-fields/src/app/(payload)/api/graphql-playground/route.ts

@@ -0,0 +1,6 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes'
+
+export const GET = GRAPHQL_PLAYGROUND_GET(config)

examples/virtual-fields/src/app/(payload)/api/graphql/route.ts

@@ -0,0 +1,6 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { GRAPHQL_POST } from '@payloadcms/next/routes'
+
+export const POST = GRAPHQL_POST(config)

examples/virtual-fields/src/app/(payload)/layout.tsx

@@ -0,0 +1,16 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+import configPromise from '@payload-config'
+import '@payloadcms/next/css'
+import { RootLayout } from '@payloadcms/next/layouts'
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
+
+import './custom.scss'
+
+type Args = {
+  children: React.ReactNode
+}
+
+const Layout = ({ children }: Args) => <RootLayout config={configPromise}>{children}</RootLayout>
+
+export default Layout

examples/virtual-fields/src/collections/Events.ts

@@ -1,14 +1,15 @@
-import payload from 'payload';
-import { CollectionConfig, FieldHook } from 'payload/types';
+import type { CollectionConfig, FieldHook } from 'payload/types'
 
-const getTotalPrice: FieldHook = async ({ data }) => {
-  const { price, salesTaxPercentage, fees } = data.tickets;
-  const totalPrice = Math.round(price * (1 + (salesTaxPercentage / 100))) + fees;
+const getTotalPrice: FieldHook = ({ data }) => {
+  if (!data) return 0
 
-  return totalPrice;
-};
+  const { fees, price, salesTaxPercentage } = data.tickets
+  const totalPrice = Math.round(price * (1 + salesTaxPercentage / 100)) + fees
 
-const Events: CollectionConfig = {
+  return totalPrice
+}
+
+export const Events: CollectionConfig = {
   slug: 'events',
   admin: {
     defaultColumns: ['title', 'date', 'location'],
@@ -31,9 +32,9 @@ const Events: CollectionConfig = {
         {
           name: 'location',
           type: 'relationship',
-          relationTo: 'locations',
-          maxDepth: 0,
           hasMany: false,
+          maxDepth: 0,
+          relationTo: 'locations',
         },
       ],
     },
@@ -82,12 +83,14 @@ const Events: CollectionConfig = {
                 readOnly: true,
               },
               hooks: {
-                beforeChange: [({ siblingData }) => {
-                  // Mutate the sibling data to prevent DB storage
-                  // eslint-disable-next-line no-param-reassign
-                  siblingData.totalPrice = undefined;
-                }],
                 afterRead: [getTotalPrice],
+                beforeChange: [
+                  ({ siblingData }) => {
+                    // Mutate the sibling data to prevent DB storage
+                    // eslint-disable-next-line no-param-reassign
+                    siblingData.totalPrice = undefined
+                  },
+                ],
               },
             },
           ],
@@ -95,6 +98,4 @@ const Events: CollectionConfig = {
       ],
     },
   ],
-};
-
-export default Events;
+}

examples/virtual-fields/src/collections/Location.ts

@@ -1,30 +1,33 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import payload from 'payload';
-import { CollectionConfig, FieldHook } from 'payload/types';
+import type { CollectionConfig, FieldHook } from 'payload/types'
 
-const formatLocation: FieldHook = async ({ data }) => {
-  return `${data.city}${data.state ? `, ${data.state},` : ','} ${data.country}`;
-};
+const formatLocation: FieldHook = ({ data }) => {
+  if (!data) return ''
+  return `${data.city}${data.state ? `, ${data.state},` : ','} ${data.country}`
+}
 
-const getLocationStaff: FieldHook = async ({ data }) => {
-  const staff = await payload.find({
+const getLocationStaff: FieldHook = async ({ data, req }) => {
+  if (!data) return null
+
+  const staff = await req.payload.find({
     collection: 'staff',
     where: {
       location: {
         equals: data.id,
       },
     },
-  });
+  })
 
   if (staff.docs) {
-    return staff.docs.map((doc) => doc.id);
+    return staff.docs.map((doc) => doc.id)
   }
 
-  return null;
-};
+  return null
+}
 
-const getNextEvent: FieldHook = async ({ data }) => {
-  const eventsByDate = await payload.find({
+const getNextEvent: FieldHook = async ({ data, req }) => {
+  if (!data) return null
+
+  const eventsByDate = await req.payload.find({
     collection: 'events',
     sort: 'date',
     where: {
@@ -32,30 +35,32 @@ const getNextEvent: FieldHook = async ({ data }) => {
         equals: data.id,
       },
     },
-  });
+  })
 
   if (eventsByDate?.docs) {
-    return eventsByDate.docs[0]?.id;
+    return eventsByDate.docs[0]?.id
   }
 
-  return null;
-};
+  return null
+}
 
-const getAllEvents: FieldHook = async ({ data }) => {
-  const allEvents = await payload.find({
+const getAllEvents: FieldHook = async ({ data, req }) => {
+  if (!data) return null
+
+  const allEvents = await req.payload.find({
     collection: 'events',
     where: {
       location: {
         equals: data.id,
       },
     },
-  });
-  if (allEvents.docs) return allEvents.docs.map((doc) => doc.id);
+  })
+  if (allEvents.docs) return allEvents.docs.map((doc) => doc.id)
 
-  return null;
-};
+  return null
+}
 
-const Locations: CollectionConfig = {
+export const Locations: CollectionConfig = {
   slug: 'locations',
   admin: {
     defaultColumns: ['location', 'nextEvent'],
@@ -64,18 +69,7 @@ const Locations: CollectionConfig = {
   fields: [
     {
       name: 'location',
-      label: false,
       type: 'text',
-      hooks: {
-        beforeChange: [({ siblingData }) => {
-          // Mutate the sibling data to prevent DB storage
-          // eslint-disable-next-line no-param-reassign
-          siblingData.location = undefined;
-        }],
-        afterRead: [
-          formatLocation,
-        ],
-      },
       access: {
         create: () => false,
         update: () => false,
@@ -83,6 +77,17 @@ const Locations: CollectionConfig = {
       admin: {
         hidden: true,
       },
+      hooks: {
+        afterRead: [formatLocation],
+        beforeChange: [
+          ({ siblingData }) => {
+            // Mutate the sibling data to prevent DB storage
+            // eslint-disable-next-line no-param-reassign
+            siblingData.location = undefined
+          },
+        ],
+      },
+      label: false,
     },
     {
       type: 'row',
@@ -105,10 +110,7 @@ const Locations: CollectionConfig = {
     },
     {
       name: 'events',
-      maxDepth: 0,
       type: 'relationship',
-      relationTo: 'events',
-      hasMany: true,
       access: {
         create: () => false,
         update: () => false,
@@ -116,21 +118,23 @@ const Locations: CollectionConfig = {
       admin: {
         readOnly: true,
       },
+      hasMany: true,
       hooks: {
-        beforeChange: [({ siblingData }) => {
-          // Mutate the sibling data to prevent DB storage
-          // eslint-disable-next-line no-param-reassign
-          siblingData.events = undefined;
-        }],
         afterRead: [getAllEvents],
+        beforeChange: [
+          ({ siblingData }) => {
+            // Mutate the sibling data to prevent DB storage
+            // eslint-disable-next-line no-param-reassign
+            siblingData.events = undefined
+          },
+        ],
       },
+      maxDepth: 0,
+      relationTo: 'events',
     },
     {
       name: 'staff',
       type: 'relationship',
-      relationTo: 'staff',
-      hasMany: true,
-      maxDepth: 0,
       access: {
         create: () => false,
         update: () => false,
@@ -138,37 +142,42 @@ const Locations: CollectionConfig = {
       admin: {
         readOnly: true,
       },
+      hasMany: true,
       hooks: {
-        beforeChange: [({ siblingData }) => {
-          // Mutate the sibling data to prevent DB storage
-          // eslint-disable-next-line no-param-reassign
-          siblingData.staff = undefined;
-        }],
         afterRead: [getLocationStaff],
+        beforeChange: [
+          ({ siblingData }) => {
+            // Mutate the sibling data to prevent DB storage
+            // eslint-disable-next-line no-param-reassign
+            siblingData.staff = undefined
+          },
+        ],
       },
+      maxDepth: 0,
+      relationTo: 'staff',
     },
     {
       name: 'nextEvent',
       type: 'relationship',
-      relationTo: 'events',
-      admin: {
-        position: 'sidebar',
-        readOnly: true,
-      },
       access: {
         create: () => false,
         update: () => false,
       },
-      hooks: {
-        beforeChange: [({ siblingData }) => {
-          // Mutate the sibling data to prevent DB storage
-          // eslint-disable-next-line no-param-reassign
-          siblingData.nextEvent = undefined;
-        }],
-        afterRead: [getNextEvent],
+      admin: {
+        position: 'sidebar',
+        readOnly: true,
       },
+      hooks: {
+        afterRead: [getNextEvent],
+        beforeChange: [
+          ({ siblingData }) => {
+            // Mutate the sibling data to prevent DB storage
+            // eslint-disable-next-line no-param-reassign
+            siblingData.nextEvent = undefined
+          },
+        ],
+      },
+      relationTo: 'events',
     },
   ],
-};
-
-export default Locations;
+}

examples/virtual-fields/src/collections/Staff.ts

@@ -1,10 +1,11 @@
-import { CollectionConfig, FieldHook } from 'payload/types';
+import type { CollectionConfig, FieldHook } from 'payload/types'
 
-const populateFullTitle: FieldHook = async ({ data }) => (
-  `${data.title} ${data.firstName} ${data.lastName}`
-);
+const populateFullTitle: FieldHook = ({ data }) => {
+  if (!data) return ''
+  return `${data.title} ${data.firstName} ${data.lastName}`
+}
 
-const Staff: CollectionConfig = {
+export const Staff: CollectionConfig = {
   slug: 'staff',
   admin: {
     defaultColumns: ['fullTitle', 'location'],
@@ -18,19 +19,19 @@ const Staff: CollectionConfig = {
         create: () => false,
         update: () => false,
       },
-      hooks: {
-        beforeChange: [({ siblingData }) => {
-          // Mutate the sibling data to prevent DB storage
-          // eslint-disable-next-line no-param-reassign
-          siblingData.fullTitle = undefined;
-        }],
-        afterRead: [
-          populateFullTitle,
-        ],
-      },
       admin: {
         hidden: true,
       },
+      hooks: {
+        afterRead: [populateFullTitle],
+        beforeChange: [
+          ({ siblingData }) => {
+            // Mutate the sibling data to prevent DB storage
+            // eslint-disable-next-line no-param-reassign
+            siblingData.fullTitle = undefined
+          },
+        ],
+      },
     },
     {
       name: 'title',
@@ -50,12 +51,10 @@ const Staff: CollectionConfig = {
     {
       name: 'location',
       type: 'relationship',
-      relationTo: 'locations',
-      maxDepth: 0,
       hasMany: true,
+      maxDepth: 0,
+      relationTo: 'locations',
       required: true,
     },
   ],
-};
-
-export default Staff;
+}

examples/virtual-fields/src/collections/Users.ts

@@ -1,18 +1,16 @@
-import { CollectionConfig } from 'payload/types';
+import type { CollectionConfig } from 'payload/types'
 
-const Users: CollectionConfig = {
+export const Users: CollectionConfig = {
   slug: 'users',
-  auth: true,
-  admin: {
-    useAsTitle: 'email',
-  },
   access: {
     read: () => true,
   },
+  admin: {
+    useAsTitle: 'email',
+  },
+  auth: true,
   fields: [
     // Email added by default
     // Add more fields as needed
   ],
-};
-
-export default Users;
+}

examples/virtual-fields/src/components/BeforeLogin/index.tsx

@@ -1,24 +1,16 @@
-import React from 'react';
+import React from 'react'
 
-const BeforeLogin: React.FC = () => {
+export const BeforeLogin: React.FC = () => {
   if (process.env.PAYLOAD_PUBLIC_SEED === 'true') {
     return (
       <div>
         <h3>Virtual Fields Demo</h3>
         <p>
-          Log in with the email
-          {' '}
-          <strong>dev@payloadcms.com</strong>
-          {' '}
-          and the password
-          {' '}
-          <strong>test</strong>
-          .
+          Log in with the email <strong>dev@payloadcms.com</strong> and the password{' '}
+          <strong>test</strong>.
         </p>
       </div>
-    );
+    )
   }
-  return null;
-};
-
-export default BeforeLogin;
+  return null
+}

examples/virtual-fields/src/payload.config.ts

@@ -1,29 +1,38 @@
-import { buildConfig } from 'payload/config';
-import path from 'path';
-import Events from './collections/Events';
-import Locations from './collections/Location';
-import Staff from './collections/Staff';
-import Users from './collections/Users';
-import BeforeLogin from './components/BeforeLogin';
+import { mongooseAdapter } from '@payloadcms/db-mongodb'
+import { lexicalEditor } from '@payloadcms/richtext-lexical'
+import path from 'path'
+import { buildConfig } from 'payload/config'
+import { fileURLToPath } from 'url'
+
+import { Events } from './collections/Events'
+import { Locations } from './collections/Location'
+import { Staff } from './collections/Staff'
+import { Users } from './collections/Users'
+import { BeforeLogin } from './components/BeforeLogin'
+import { seedData } from './seed'
+
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
 
 export default buildConfig({
-  serverURL: 'http://localhost:3000',
   admin: {
-    user: Users.slug,
     components: {
       beforeLogin: [BeforeLogin],
     },
+    user: Users.slug,
   },
-  collections: [
-    Events,
-    Locations,
-    Staff,
-    Users,
-  ],
+  collections: [Events, Locations, Staff, Users],
+  editor: lexicalEditor({}),
+  serverURL: 'http://localhost:3000',
+  // plugins: [payloadCloud()], // TODO: Re-enable when cloud supports 3.0
+  db: mongooseAdapter({
+    url: process.env.DATABASE_URI || '',
+  }),
+  onInit: async (payload) => {
+    await seedData(payload)
+  },
+  secret: process.env.PAYLOAD_SECRET || '',
   typescript: {
-    outputFile: path.resolve(__dirname, 'payload-types.ts'),
+    outputFile: path.resolve(dirname, 'payload-types.ts'),
   },
-  graphQL: {
-    schemaOutputFile: path.resolve(__dirname, 'generated-schema.graphql'),
-  },
-});
+})

examples/virtual-fields/src/seed/events.ts

@@ -1,45 +1,45 @@
 export const eventsOne = [
   {
-    title: 'Event 1',
     date: '2023-02-01T00:00:00.000Z',
     pricing: {
-      price: 10,
       fees: 5,
+      price: 10,
     },
     tickets: {
+      fees: 3.5,
       price: 100,
       salesTaxPercentage: 10,
-      fees: 3.50,
     },
+    title: 'Event 1',
   },
   {
-    title: 'Event 2',
     date: '2023-03-01T00:00:00.000Z',
     tickets: {
+      fees: 5,
       price: 20,
       salesTaxPercentage: 20,
-      fees: 5,
     },
+    title: 'Event 2',
   },
-];
+]
 
 export const eventsTwo = [
   {
-    title: 'Event 3',
     date: '2023-03-31T23:00:00.000Z',
     tickets: {
+      fees: 2,
       price: 10,
       salesTaxPercentage: 10,
-      fees: 2,
     },
+    title: 'Event 3',
   },
   {
-    title: 'Event 4',
     date: '2023-04-30T23:00:00.000Z',
     tickets: {
+      fees: 5,
       price: 50,
       salesTaxPercentage: 10,
-      fees: 5,
     },
+    title: 'Event 4',
   },
-];
+]

examples/virtual-fields/src/seed/index.ts

@@ -1,28 +1,27 @@
-import payload from 'payload';
-import { MongoClient } from 'mongodb';
-import { eventsOne, eventsTwo } from './events';
-import { locationOne, locationTwo } from './locations';
-import { staffOne, staffTwo } from './staff';
+import type { Payload } from 'payload'
 
-export async function seedData() {
+import { eventsOne, eventsTwo } from './events'
+import { locationOne, locationTwo } from './locations'
+import { staffOne, staffTwo } from './staff'
+
+export async function seedData(payload: Payload) {
   await payload.create({
     collection: 'users',
     data: {
       email: 'dev@payloadcms.com',
       password: 'test',
     },
-  });
+  })
 
   const { id: locationOneID } = await payload.create({
     collection: 'locations',
     data: locationOne,
-  });
+  })
 
   const { id: locationTwoID } = await payload.create({
     collection: 'locations',
     data: locationTwo,
-  });
-
+  })
 
   await payload.create({
     collection: 'staff',
@@ -30,8 +29,7 @@ export async function seedData() {
       ...staffOne,
       location: [locationOneID],
     },
-  });
-
+  })
 
   await payload.create({
     collection: 'staff',
@@ -39,30 +37,31 @@ export async function seedData() {
       ...staffTwo,
       location: [locationTwoID],
     },
-  });
+  })
 
   eventsOne.map((event) => {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
     payload.create({
       collection: 'events',
       data: {
         ...event,
         location: locationOneID,
       },
-    });
-
-    return null;
-  });
+    })
 
+    return null
+  })
 
   eventsTwo.map((event) => {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
     payload.create({
       collection: 'events',
       data: {
         ...event,
         location: locationTwoID,
       },
-    });
+    })
 
-    return null;
-  });
+    return null
+  })
 }

examples/virtual-fields/src/seed/locations.ts

@@ -1,12 +1,12 @@
 export const locationOne = {
   city: 'Grand Rapids',
   country: 'USA',
-  state: 'MI',
   events: [],
-};
+  state: 'MI',
+}
 
 export const locationTwo = {
   city: 'London',
   country: 'UK',
   events: [],
-};
+}

examples/virtual-fields/src/seed/staff.ts

@@ -1,11 +1,11 @@
 export const staffOne = {
-  title: 'Mr',
   firstName: 'John',
   lastName: 'Doe',
-};
+  title: 'Mr',
+}
 
 export const staffTwo = {
-  title: 'Miss',
   firstName: 'Jane',
   lastName: 'Doe',
-};
+  title: 'Miss',
+}

examples/virtual-fields/src/server.ts

@@ -1,37 +0,0 @@
-import express from 'express';
-import payload from 'payload';
-import path from 'path';
-import { seedData } from './seed';
-
-require('dotenv').config({
-  path: path.resolve(__dirname, '../.env'),
-});
-
-const app = express();
-
-// Redirect all traffic at root to admin UI
-app.get('/', (_, res) => {
-  res.redirect('/admin');
-});
-
-const start = async () => {
-  // Initialize Payload
-  await payload.init({
-    secret: process.env.PAYLOAD_SECRET,
-    mongoURL: process.env.MONGODB_URI,
-    express: app,
-    onInit: async () => {
-      payload.logger.info(`Payload Admin URL: ${payload.getAdminURL()}`);
-    },
-  });
-
-  if (process.env.PAYLOAD_PUBLIC_SEED === 'true') {
-    payload.logger.info('---- SEEDING DATABASE ----');
-    await seedData();
-    payload.logger.info('---- SEED COMPLETE ----');
-  }
-
-  app.listen(3000);
-};
-
-start();

examples/virtual-fields/tsconfig.json

@@ -1,18 +1,44 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "baseUrl": ".",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
-    "strict": false,
-    "esModuleInterop": true,
     "skipLibCheck": true,
-    "outDir": "./dist",
-    "rootDir": "./src",
-    "jsx": "react"
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+      "@payload-config": [
+        "./src/payload.config.ts"
+      ]
+    },
+    "target": "ES2017"
   },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist", "build"],
-  "ts-node": {
-    "transpileOnly": true
-  }
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

examples/whitelabel/.env.example

@@ -1,3 +1,3 @@
-MONGODB_URI=mongodb://127.0.0.1/payload-example-whitelabel
+DATABASE_URI=mongodb://127.0.0.1/payload-example-whitelabel
 PAYLOAD_SECRET=ENTER-STRING-HERE
 PAYLOAD_PUBLIC_SERVER_URL=http://localhost:8000

examples/whitelabel/.eslintrc.cjs

@@ -0,0 +1,7 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  parserOptions: {
+    project: ['./tsconfig.json'],
+    tsconfigRootDir: __dirname,
+  },
+}

examples/whitelabel/.gitignore copy

@@ -0,0 +1,43 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+/.idea/*
+!/.idea/runConfigurations
+
+# 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
+
+.env
+
+/media

examples/whitelabel/.npmrc copy

@@ -0,0 +1 @@
+legacy-peer-deps=true

examples/whitelabel/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/whitelabel/nodemon copy.json

@@ -1,5 +1,4 @@
 {
-  "$schema": "https://json.schemastore.org/nodemon.json",
   "ext": "ts",
   "exec": "ts-node src/server.ts -- -I",
   "stdin": false

examples/whitelabel/package.json

@@ -4,26 +4,31 @@
   "main": "dist/server.js",
   "license": "MIT",
   "scripts": {
-    "dev": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts nodemon",
-    "build:payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload build",
-    "build:server": "tsc",
-    "build": "yarn copyfiles && yarn build:payload && yarn build:server",
-    "serve": "cross-env PAYLOAD_CONFIG_PATH=dist/payload.config.js NODE_ENV=production node dist/server.js",
-    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png}\" dist/",
-    "generate:types": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:types",
-    "generate:graphQLSchema": "PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:graphQLSchema"
+    "dev": "cross-env NODE_OPTIONS=--no-deprecation next dev",
+    "devsafe": "rm -rf .next && cross-env NODE_OPTIONS=--no-deprecation next dev",
+    "build": "cross-env NODE_OPTIONS=--no-deprecation next build",
+    "payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
+    "start": "cross-env NODE_OPTIONS=--no-deprecation next start",
+    "lint": "cross-env NODE_OPTIONS=--no-deprecation next lint",
+    "generate:types": "payload generate:types"
   },
   "dependencies": {
-    "dotenv": "^8.2.0",
-    "express": "^4.17.1",
-    "payload": "latest"
+    "@payloadcms/db-mongodb": "beta",
+    "@payloadcms/next": "beta",
+    "@payloadcms/richtext-lexical": "beta",
+    "cross-env": "^7.0.3",
+    "next": "^14.3.0-canary.7",
+    "payload": "beta",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sharp": "0.32.6"
   },
   "devDependencies": {
-    "@types/express": "^4.17.9",
-    "copyfiles": "^2.4.1",
-    "cross-env": "^7.0.3",
-    "nodemon": "^2.0.6",
-    "ts-node": "^9.1.1",
-    "typescript": "^4.8.4"
+    "@types/node": "^20.11.25",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "dotenv": "^16.4.5",
+    "tsx": "^4.7.1",
+    "typescript": "^5.4.2"
   }
 }

examples/whitelabel/src/app/(payload)/admin/[[...segments]]/page.tsx

@@ -0,0 +1,17 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+import config from '@payload-config'
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import { RootPage } from '@payloadcms/next/views'
+
+type Args = {
+  params: {
+    segments: string[]
+  }
+  searchParams: {
+    [key: string]: string | string[]
+  }
+}
+
+const Page = ({ params, searchParams }: Args) => RootPage({ config, params, searchParams })
+
+export default Page

examples/whitelabel/src/app/(payload)/api/[...slug]/route.ts

@@ -0,0 +1,9 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { REST_DELETE, REST_GET, REST_PATCH, REST_POST } from '@payloadcms/next/routes'
+
+export const GET = REST_GET(config)
+export const POST = REST_POST(config)
+export const DELETE = REST_DELETE(config)
+export const PATCH = REST_PATCH(config)

examples/whitelabel/src/app/(payload)/api/graphql-playground/route.ts

@@ -0,0 +1,6 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes'
+
+export const GET = GRAPHQL_PLAYGROUND_GET(config)

examples/whitelabel/src/app/(payload)/api/graphql/route.ts

@@ -0,0 +1,6 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { GRAPHQL_POST } from '@payloadcms/next/routes'
+
+export const POST = GRAPHQL_POST(config)

examples/whitelabel/src/app/(payload)/layout.tsx

@@ -0,0 +1,16 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+import configPromise from '@payload-config'
+import '@payloadcms/next/css'
+import { RootLayout } from '@payloadcms/next/layouts'
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
+
+import './custom.scss'
+
+type Args = {
+  children: React.ReactNode
+}
+
+const Layout = ({ children }: Args) => <RootLayout config={configPromise}>{children}</RootLayout>
+
+export default Layout

examples/whitelabel/src/graphics/Icon/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react'
 
 const css = `
   html[data-theme="dark"] .text {
@@ -13,27 +13,25 @@ const css = `
     width: 50px;
     height: 50px;
   }
-`;
+`
 
 export const Icon = () => {
   return (
     <svg
       className="graphic-icon"
-      width="430"
+      fill="none"
       height="435"
       viewBox="0 0 430 435"
-      fill="none"
+      width="430"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <style>
-        {css}
-      </style>
+      <style>{css}</style>
       <rect
         className="bg"
-        width="430"
+        fill="#0C0C0C"
         height="434"
         transform="translate(0 0.154785)"
-        fill="#0C0C0C"
+        width="430"
       />
       <path
         className="text"
@@ -41,5 +39,5 @@ export const Icon = () => {
         fill="white"
       />
     </svg>
-  );
-};
+  )
+}

examples/whitelabel/src/graphics/Logo/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react'
 
 const css = `
   html[data-theme="dark"] path {
@@ -8,25 +8,20 @@ const css = `
   .graphic-logo {
     width: 150px;
     height: auto;
-  }`;
+  }`
 
 export const Logo = () => {
   return (
     <svg
       className="graphic-logo"
-      xmlns="http://www.w3.org/2000/svg"
       fill="#0F0F0F"
       viewBox="0 0 518 563"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <style type="text/css">
-        {css}
-      </style>
-      <g
-        transform="translate(0,563) scale(0.1,-0.1)"
-        fill="#000000"
-        stroke="none"
-      >
-        <path d="M440 3060 l0 -2170 2150 0 2150 0 0 2170 0 2170 -2150 0 -2150 0 0
+      <style type="text/css">{css}</style>
+      <g fill="#000000" stroke="none" transform="translate(0,563) scale(0.1,-0.1)">
+        <path
+          d="M440 3060 l0 -2170 2150 0 2150 0 0 2170 0 2170 -2150 0 -2150 0 0
           -2170z m1855 301 c52 -24 88 -63 117 -126 19 -42 23 -71 26 -182 4 -151 -8
           -213 -58 -281 -55 -77 -140 -107 -230 -83 -66 18 -105 53 -141 128 -31 61 -33
           74 -37 189 -5 145 16 233 69 298 60 72 169 97 254 57z m766 8 c74 -25 126 -85
@@ -39,15 +34,17 @@ export const Logo = () => {
           264 -19 144 13 296 79 366 60 63 167 84 247 47z m-2505 -296 l0 -305 165 0
           165 0 0 -35 0 -35 -210 0 -210 0 0 340 0 340 45 0 45 0 0 -305z"
         />
-        <path d="M2140 3286 c-80 -44 -114 -265 -64 -418 44 -135 193 -147 254 -22 22
+        <path
+          d="M2140 3286 c-80 -44 -114 -265 -64 -418 44 -135 193 -147 254 -22 22
           44 24 63 24 184 1 122 -2 140 -23 183 -13 26 -36 56 -51 67 -33 23 -102 26
           -140 6z"
         />
-        <path d="M3667 3280 c-14 -11 -36 -41 -49 -68 -20 -42 -23 -61 -23 -177 0
+        <path
+          d="M3667 3280 c-14 -11 -36 -41 -49 -68 -20 -42 -23 -61 -23 -177 0
           -120 2 -134 27 -187 30 -65 64 -88 129 -88 35 0 48 6 79 38 52 52 63 98 58
           257 -3 117 -6 134 -28 173 -14 24 -37 50 -52 58 -40 21 -110 18 -141 -6z"
         />
       </g>
     </svg>
-  );
-};
+  )
+}

examples/whitelabel/src/payload.config.ts

@@ -1,12 +1,16 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { buildConfig } from 'payload/config';
-import path from 'path';
+import { mongooseAdapter } from '@payloadcms/db-mongodb'
+import { lexicalEditor } from '@payloadcms/richtext-lexical'
+import path from 'path'
+import { buildConfig } from 'payload/config'
+import { fileURLToPath } from 'url'
 
-import { Icon } from './graphics/Icon';
-import { Logo } from './graphics/Logo';
+import { Icon } from './graphics/Icon'
+import { Logo } from './graphics/Logo'
+
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
 
 export default buildConfig({
-  serverURL: 'http://localhost:3000',
   admin: {
     // Add your own logo and icon here
     components: {
@@ -22,10 +26,13 @@ export default buildConfig({
       titleSuffix: '- Your App Name',
     },
   },
+  db: mongooseAdapter({
+    url: process.env.DATABASE_URI || '',
+  }),
+  editor: lexicalEditor({}),
+  secret: process.env.PAYLOAD_SECRET || '',
+  serverURL: 'http://localhost:3000',
   typescript: {
-    outputFile: path.resolve(__dirname, 'payload-types.ts'),
+    outputFile: path.resolve(dirname, 'payload-types.ts'),
   },
-  graphQL: {
-    schemaOutputFile: path.resolve(__dirname, 'generated-schema.graphql'),
-  },
-});
+})

examples/whitelabel/src/server.ts

@@ -1,30 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-/* eslint-disable @typescript-eslint/no-var-requires */
-import express from 'express';
-import payload from 'payload';
-import path from 'path';
-
-require('dotenv').config();
-
-const app = express();
-
-// Redirect root to Admin panel
-app.get('/', (_, res) => {
-  res.redirect('/admin');
-});
-
-app.use('/assets', express.static(path.resolve(__dirname, '../assets')));
-
-// Initialize Payload
-payload.init({
-  secret: process.env.PAYLOAD_SECRET,
-  mongoURL: process.env.MONGODB_URI,
-  express: app,
-  onInit: () => {
-    payload.logger.info(`Payload Admin URL: ${payload.getAdminURL()}`);
-  },
-});
-
-// Add your own express routes here
-
-app.listen(3000);

examples/whitelabel/tsconfig.json

@@ -1,18 +1,44 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "baseUrl": ".",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
-    "strict": false,
-    "esModuleInterop": true,
     "skipLibCheck": true,
-    "outDir": "./dist",
-    "rootDir": "./src",
-    "jsx": "react"
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+      "@payload-config": [
+        "./src/payload.config.ts"
+      ]
+    },
+    "target": "ES2017"
   },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist", "build"],
-  "ts-node": {
-    "transpileOnly": true
-  }
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

package.json

@@ -1,23 +1,18 @@
 {
   "name": "payload-monorepo",
-  "version": "3.0.0-beta.6",
+  "version": "3.0.0-beta.19",
   "private": true,
   "type": "module",
-  "workspaces:": [
-    "packages/*",
-    "test/*"
-  ],
   "scripts": {
     "build": "pnpm run build:core",
-    "obliterate-playwright-cache": "rm -rf ~/Library/Caches/ms-playwright && find /System/Volumes/Data/private/var/folders -type d -name 'playwright*' -exec rm -rf {} +",
     "build:all": "turbo build",
-    "build:core": "turbo build --filter \"!@payloadcms/plugin-*\"",
-    "build:plugins": "turbo build --filter \"@payloadcms/plugin-*\"",
     "build:app": "next build",
     "build:app:analyze": "cross-env ANALYZE=true next build",
+    "build:core": "turbo build --filter \"!@payloadcms/plugin-*\"",
     "build:create-payload-app": "turbo build --filter create-payload-app",
     "build:db-mongodb": "turbo build --filter db-mongodb",
     "build:db-postgres": "turbo build --filter db-postgres",
+    "build:email-nodemailer": "turbo build --filter email-nodemailer",
     "build:eslint-config-payload": "turbo build --filter eslint-config-payload",
     "build:graphql": "turbo build --filter graphql",
     "build:live-preview": "turbo build --filter live-preview",
@@ -33,20 +28,21 @@
     "build:plugin-sentry": "turbo build --filter plugin-sentry",
     "build:plugin-seo": "turbo build --filter plugin-seo",
     "build:plugin-stripe": "turbo build --filter plugin-stripe",
+    "build:plugins": "turbo build --filter \"@payloadcms/plugin-*\"",
     "build:richtext-lexical": "turbo build --filter richtext-lexical",
     "build:richtext-slate": "turbo build --filter richtext-slate",
-    "build:tests": "pnpm --filter test run typecheck",
+    "build:tests": "pnpm --filter payload-test-suite run typecheck",
     "build:translations": "turbo build --filter translations",
     "build:ui": "turbo build --filter ui",
     "clean": "turbo clean",
-    "clean:cache": "rimraf node_modules/.cache && rimraf packages/payload/node_modules/.cache && rimraf .next",
-    "clean:build": "find . \\( -type d \\( -name dist -o -name .cache -o -name .next -o -name .turbo \\) -o -type f -name tsconfig.tsbuildinfo \\) -not -path '*/node_modules/*' -exec rm -rf {} +",
     "clean:all": "find . \\( -type d \\( -name node_modules -o -name dist -o -name .cache -o -name .next -o -name .turbo \\) -o -type f -name tsconfig.tsbuildinfo \\) -exec rm -rf {} +",
+    "clean:build": "find . \\( -type d \\( -name dist -o -name .cache -o -name .next -o -name .turbo \\) -o -type f -name tsconfig.tsbuildinfo \\) -not -path '*/node_modules/*' -exec rm -rf {} +",
+    "clean:cache": "rimraf node_modules/.cache && rimraf packages/payload/node_modules/.cache && rimraf .next",
     "dev": "cross-env NODE_OPTIONS=--no-deprecation node ./test/dev.js",
-    "devsafe": "rimraf .next && pnpm dev",
     "dev:generate-graphql-schema": "cross-env NODE_OPTIONS=--no-deprecation tsx ./test/generateGraphQLSchema.ts",
     "dev:generate-types": "cross-env NODE_OPTIONS=--no-deprecation tsx ./test/generateTypes.ts",
     "dev:postgres": "cross-env NODE_OPTIONS=--no-deprecation PAYLOAD_DATABASE=postgres node ./test/dev.js",
+    "devsafe": "rimraf .next && pnpm dev",
     "docker:restart": "pnpm docker:stop --remove-orphans && pnpm docker:start",
     "docker:start": "docker compose -f packages/plugin-cloud-storage/docker-compose.yml up -d",
     "docker:stop": "docker compose -f packages/plugin-cloud-storage/docker-compose.yml down",
@@ -54,22 +50,31 @@
     "generate:types": "PAYLOAD_CONFIG_PATH=./test/_community/config.ts node --no-deprecation ./packages/payload/bin.js generate:types",
     "lint": "eslint \"packages/**/*.ts\"",
     "lint-staged": "lint-staged",
+    "obliterate-playwright-cache": "rm -rf ~/Library/Caches/ms-playwright && find /System/Volumes/Data/private/var/folders -type d -name 'playwright*' -exec rm -rf {} +",
     "prepare": "husky install",
-    "pretest": "pnpm build",
     "reinstall": "pnpm clean:all && pnpm install",
-    "script:pack": "tsx scripts/pack-all-to-dest.ts",
     "release:alpha": "tsx ./scripts/release.ts --bump prerelease --tag alpha",
     "release:beta": "tsx ./scripts/release.ts --bump prerelease --tag beta",
+    "script:pack": "tsx scripts/pack-all-to-dest.ts",
+    "pretest": "pnpm build",
     "test": "pnpm test:int && pnpm test:components && pnpm test:e2e",
     "test:components": "cross-env NODE_OPTIONS=--no-deprecation jest --config=jest.components.config.js",
     "test:e2e": "cross-env NODE_OPTIONS=--no-deprecation NODE_NO_WARNINGS=1 tsx ./test/runE2E.ts",
     "test:e2e:debug": "cross-env NODE_OPTIONS=--no-deprecation NODE_NO_WARNINGS=1 PWDEBUG=1 DISABLE_LOGGING=true playwright test",
     "test:e2e:headed": "cross-env NODE_OPTIONS=--no-deprecation NODE_NO_WARNINGS=1 DISABLE_LOGGING=true playwright test --headed",
-    "test:int:postgres": "cross-env NODE_OPTIONS=--no-deprecation NODE_NO_WARNINGS=1 PAYLOAD_DATABASE=postgres DISABLE_LOGGING=true jest --forceExit --detectOpenHandles --config=test/jest.config.js --runInBand",
     "test:int": "cross-env NODE_OPTIONS=--no-deprecation NODE_NO_WARNINGS=1 DISABLE_LOGGING=true jest --forceExit --detectOpenHandles --config=test/jest.config.js --runInBand",
+    "test:int:postgres": "cross-env NODE_OPTIONS=--no-deprecation NODE_NO_WARNINGS=1 PAYLOAD_DATABASE=postgres DISABLE_LOGGING=true jest --forceExit --detectOpenHandles --config=test/jest.config.js --runInBand",
     "test:unit": "cross-env NODE_OPTIONS=--no-deprecation NODE_NO_WARNINGS=1 DISABLE_LOGGING=true jest --forceExit --detectOpenHandles  --config=jest.config.js --runInBand",
     "translateNewKeys": "pnpm --filter payload run translateNewKeys"
   },
+  "lint-staged": {
+    "**/package.json": "sort-package-json",
+    "*.{md,mdx,yml,json}": "prettier --write",
+    "*.{js,jsx,ts,tsx}": [
+      "prettier --write",
+      "eslint --cache --fix"
+    ]
+  },
   "devDependencies": {
     "@aws-sdk/client-s3": "^3.525.0",
     "@next/bundle-analyzer": "^14.1.0",
@@ -77,6 +82,7 @@
     "@payloadcms/eslint-config": "workspace:*",
     "@payloadcms/live-preview-react": "workspace:*",
     "@playwright/test": "1.43.0",
+    "@sentry/react": "^7.77.0",
     "@swc/cli": "^0.1.62",
     "@swc/jest": "0.2.36",
     "@testing-library/jest-dom": "6.4.2",
@@ -127,7 +133,7 @@
     "lint-staged": "^14.0.1",
     "minimist": "1.2.8",
     "mongodb-memory-server": "^9.0",
-    "next": "14.2.0-canary.22",
+    "next": "^14.3.0-canary.7",
     "node-mocks-http": "^1.14.1",
     "nodemon": "3.0.3",
     "open": "^10.1.0",
@@ -139,8 +145,8 @@
     "prettier": "^3.0.3",
     "prompts": "2.4.2",
     "qs": "6.11.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "read-stream": "^2.1.1",
     "rimraf": "3.0.2",
     "semver": "^7.5.4",
@@ -149,6 +155,7 @@
     "simple-git": "^3.24.0",
     "slash": "3.0.0",
     "slate": "0.91.4",
+    "sort-package-json": "^2.10.0",
     "swc-plugin-transform-remove-imports": "^1.12.1",
     "tempfile": "^3.0.0",
     "tempy": "^1.0.1",
@@ -163,21 +170,15 @@
     "react": "18.2.0"
   },
   "engines": {
-    "node": ">=18.17.0",
-    "pnpm": ">=8"
-  },
-  "lint-staged": {
-    "*.{md,mdx,yml,json}": "prettier --write",
-    "*.{js,jsx,ts,tsx}": [
-      "prettier --write",
-      "eslint --cache --fix"
-    ]
-  },
-  "dependencies": {
-    "@sentry/react": "^7.77.0",
-    "passport-strategy": "1.0.0"
+    "node": ">=18.20.2",
+    "pnpm": "^8.15.7"
   },
   "pnpm": {
+    "allowedDeprecatedVersions": {
+      "abab": "2",
+      "domexception": "4",
+      "uuid": "3.4.0"
+    },
     "overrides": {
       "copyfiles": "$copyfiles",
       "cross-env": "$cross-env",
@@ -189,13 +190,12 @@
       "react-dom": "$react-dom",
       "typescript": "$typescript"
     },
-    "allowedDeprecatedVersions": {
-      "uuid": "3.4.0",
-      "abab": "2",
-      "domexception": "4"
-    },
     "patchedDependencies": {
       "playwright@1.43.0": "patches/playwright@1.43.0.patch"
     }
-  }
+  },
+  "workspaces:": [
+    "packages/*",
+    "test/*"
+  ]
 }

packages/create-payload-app/package.json

@@ -1,31 +1,38 @@
 {
   "name": "create-payload-app",
-  "version": "3.0.0-beta.6",
-  "license": "MIT",
-  "type": "module",
+  "version": "3.0.0-beta.19",
   "homepage": "https://payloadcms.com",
-  "bin": {
-    "create-payload-app": "bin/cli.js"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/payloadcms/payload.git",
     "directory": "packages/create-payload-app"
   },
-  "scripts": {
-    "build": "pnpm pack-template-files && pnpm typecheck && pnpm build:swc",
-    "typecheck": "tsc",
-    "pack-template-files": "tsx src/scripts/pack-template-files.ts",
-    "build:swc": "swc ./src -d ./dist --config-file .swcrc",
-    "clean": "rimraf {dist,*.tsbuildinfo}",
-    "test": "jest",
-    "prepublishOnly": "pnpm clean && pnpm build"
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    "./commands": {
+      "import": "./src/lib/init-next.ts",
+      "require": "./src/lib/init-next.ts",
+      "types": "./src/lib/init-next.ts"
+    }
+  },
+  "bin": {
+    "create-payload-app": "bin/cli.js"
   },
   "files": [
     "package.json",
     "dist",
     "bin"
   ],
+  "scripts": {
+    "build": "pnpm pack-template-files && pnpm typecheck && pnpm build:swc",
+    "build:swc": "swc ./src -d ./dist --config-file .swcrc",
+    "clean": "rimraf {dist,*.tsbuildinfo}",
+    "pack-template-files": "tsx src/scripts/pack-template-files.ts",
+    "prepublishOnly": "pnpm clean && pnpm build",
+    "test": "jest",
+    "typecheck": "tsc"
+  },
   "dependencies": {
     "@clack/prompts": "^0.7.0",
     "@sindresorhus/slugify": "^1.1.0",
@@ -49,12 +56,5 @@
     "@types/fs-extra": "^9.0.12",
     "@types/jest": "^27.0.3",
     "@types/node": "20.12.5"
-  },
-  "exports": {
-    "./commands": {
-      "import": "./src/lib/init-next.ts",
-      "require": "./src/lib/init-next.ts",
-      "types": "./src/lib/init-next.ts"
-    }
   }
 }

packages/create-payload-app/src/lib/configure-payload-config.ts

@@ -1,5 +1,9 @@
 import fse from 'fs-extra'
 import globby from 'globby'
+import { fileURLToPath } from 'node:url'
+import path from 'path'
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
 
 import type { DbDetails } from '../types.js'
 
@@ -15,6 +19,34 @@ export async function configurePayloadConfig(args: {
     return
   }
 
+  // Update package.json
+  const packageJsonPath =
+    'projectDir' in args.projectDirOrConfigPath &&
+    path.resolve(args.projectDirOrConfigPath.projectDir, 'package.json')
+
+  if (packageJsonPath && fse.existsSync(packageJsonPath)) {
+    try {
+      const packageObj = await fse.readJson(packageJsonPath)
+
+      const dbPackage = dbReplacements[args.dbDetails.type]
+
+      // Delete all other db adapters
+      Object.values(dbReplacements).forEach((p) => {
+        if (p.packageName !== dbPackage.packageName) {
+          delete packageObj.dependencies[p.packageName]
+        }
+      })
+
+      // Set version of db adapter to match payload version
+      packageObj.dependencies[dbPackage.packageName] = packageObj.dependencies['payload']
+
+      await fse.writeJson(packageJsonPath, packageObj, { spaces: 2 })
+    } catch (err: unknown) {
+      warning(`Unable to configure Payload in package.json`)
+      warning(err instanceof Error ? err.message : '')
+    }
+  }
+
   try {
     let payloadConfigPath: string | undefined
     if (!('payloadConfigPath' in args.projectDirOrConfigPath)) {

packages/create-payload-app/src/lib/init-next.ts

@@ -117,13 +117,17 @@ async function addPayloadConfigToTsConfig(projectDir: string, isSrcDir: boolean)
     warning(`Could not find tsconfig.json to add @payload-config path.`)
     return
   }
-
   const userTsConfigContent = await readFile(tsConfigPath, {
     encoding: 'utf8',
   })
   const userTsConfig = parse(userTsConfigContent) as {
     compilerOptions?: CompilerOptions
   }
+
+  const hasBaseUrl =
+    userTsConfig?.compilerOptions?.baseUrl && userTsConfig?.compilerOptions?.baseUrl !== '.'
+  const baseUrl = hasBaseUrl ? userTsConfig?.compilerOptions?.baseUrl : './'
+
   if (!userTsConfig.compilerOptions && !('extends' in userTsConfig)) {
     userTsConfig.compilerOptions = {}
   }
@@ -134,7 +138,7 @@ async function addPayloadConfigToTsConfig(projectDir: string, isSrcDir: boolean)
   ) {
     userTsConfig.compilerOptions.paths = {
       ...(userTsConfig.compilerOptions.paths || {}),
-      '@payload-config': [`./${isSrcDir ? 'src/' : ''}payload.config.ts`],
+      '@payload-config': [`${baseUrl}${isSrcDir ? 'src/' : ''}payload.config.ts`],
     }
     await writeFile(tsConfigPath, stringify(userTsConfig, null, 2), { encoding: 'utf8' })
   }

packages/create-payload-app/src/lib/select-db.ts

@@ -16,7 +16,7 @@ const dbChoiceRecord: Record<DbType, DbChoice> = {
     value: 'mongodb',
   },
   postgres: {
-    dbConnectionPrefix: 'postgres://127.0.0.1:5432/',
+    dbConnectionPrefix: 'postgres://postgres:<password>@127.0.0.1:5432/',
     title: 'PostgreSQL (beta)',
     value: 'postgres',
   },

packages/create-payload-app/src/lib/templates.ts

@@ -41,12 +41,12 @@ export function getValidTemplates(): ProjectTemplate[] {
     //   description: 'E-commerce Template',
     //   url: 'https://github.com/payloadcms/payload/templates/ecommerce',
     // },
-    // {
-    //   name: 'plugin',
-    //   type: 'plugin',
-    //   description: 'Template for creating a Payload plugin',
-    //   url: 'https://github.com/payloadcms/payload-plugin-template',
-    // },
+    {
+      name: 'plugin',
+      type: 'plugin',
+      description: 'Template for creating a Payload plugin',
+      url: 'https://github.com/payloadcms/payload-plugin-template#beta',
+    },
     // {
     //   name: 'payload-demo',
     //   type: 'starter',

packages/db-mongodb/package.json

@@ -1,22 +1,34 @@
 {
   "name": "@payloadcms/db-mongodb",
-  "version": "3.0.0-beta.6",
+  "version": "3.0.0-beta.19",
   "description": "The officially supported MongoDB database adapter for Payload",
+  "homepage": "https://payloadcms.com",
   "repository": {
     "type": "git",
     "url": "https://github.com/payloadcms/payload.git",
     "directory": "packages/db-mongodb"
   },
   "license": "MIT",
-  "homepage": "https://payloadcms.com",
-  "type": "module",
   "author": {
-    "email": "info@payloadcms.com",
     "name": "Payload",
+    "email": "info@payloadcms.com",
     "url": "https://payloadcms.com"
   },
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "require": "./src/index.ts",
+      "types": "./src/index.ts"
+    }
+  },
   "main": "./src/index.ts",
   "types": "./src/types.ts",
+  "files": [
+    "dist",
+    "mock.js",
+    "predefinedMigrations"
+  ],
   "scripts": {
     "build": "pnpm build:swc && pnpm build:types",
     "build:swc": "swc ./src -d ./dist --config-file .swcrc-build",
@@ -44,27 +56,15 @@
   "peerDependencies": {
     "payload": "workspace:*"
   },
-  "exports": {
-    ".": {
-      "import": "./src/index.ts",
-      "require": "./src/index.ts",
-      "types": "./src/index.ts"
-    }
-  },
   "publishConfig": {
-    "main": "./dist/index.js",
-    "types": "./dist/index.d.ts",
     "exports": {
       ".": {
         "import": "./dist/index.js",
         "require": "./dist/index.js",
         "types": "./dist/index.d.ts"
       }
-    }
-  },
-  "files": [
-    "dist",
-    "mock.js",
-    "predefinedMigrations"
-  ]
+    },
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts"
+  }
 }

packages/db-mongodb/src/count.ts

@@ -0,0 +1,49 @@
+import type { QueryOptions } from 'mongoose'
+import type { Count } from 'payload/database'
+import type { PayloadRequestWithData } from 'payload/types'
+
+import { flattenWhereToOperators } from 'payload/database'
+
+import type { MongooseAdapter } from './index.js'
+
+import { withSession } from './withSession.js'
+
+export const count: Count = async function count(
+  this: MongooseAdapter,
+  { collection, locale, req = {} as PayloadRequestWithData, where },
+) {
+  const Model = this.collections[collection]
+  const options: QueryOptions = withSession(this, req.transactionID)
+
+  let hasNearConstraint = false
+
+  if (where) {
+    const constraints = flattenWhereToOperators(where)
+    hasNearConstraint = constraints.some((prop) => Object.keys(prop).some((key) => key === 'near'))
+  }
+
+  const query = await Model.buildQuery({
+    locale,
+    payload: this.payload,
+    where,
+  })
+
+  // useEstimatedCount is faster, but not accurate, as it ignores any filters. It is thus set to true if there are no filters.
+  const useEstimatedCount = hasNearConstraint || !query || Object.keys(query).length === 0
+
+  if (!useEstimatedCount && Object.keys(query).length === 0 && this.disableIndexHints !== true) {
+    // Improve the performance of the countDocuments query which is used if useEstimatedCount is set to false by adding
+    // a hint. By default, if no hint is provided, MongoDB does not use an indexed field to count the returned documents,
+    // which makes queries very slow. This only happens when no query (filter) is provided. If one is provided, it uses
+    // the correct indexed field
+    options.hint = {
+      _id: 1,
+    }
+  }
+
+  const result = await Model.countDocuments(query, options)
+
+  return {
+    totalDocs: result,
+  }
+}

packages/db-mongodb/src/create.ts

@@ -1,5 +1,5 @@
 import type { Create } from 'payload/database'
-import type { Document, PayloadRequest } from 'payload/types'
+import type { Document, PayloadRequestWithData } from 'payload/types'
 
 import type { MongooseAdapter } from './index.js'
 
@@ -8,7 +8,7 @@ import { withSession } from './withSession.js'
 
 export const create: Create = async function create(
   this: MongooseAdapter,
-  { collection, data, req = {} as PayloadRequest },
+  { collection, data, req = {} as PayloadRequestWithData },
 ) {
   const Model = this.collections[collection]
   const options = withSession(this, req.transactionID)

packages/db-mongodb/src/createGlobal.ts

@@ -1,5 +1,5 @@
 import type { CreateGlobal } from 'payload/database'
-import type { PayloadRequest } from 'payload/types'
+import type { PayloadRequestWithData } from 'payload/types'
 
 import type { MongooseAdapter } from './index.js'
 
@@ -8,7 +8,7 @@ import { withSession } from './withSession.js'
 
 export const createGlobal: CreateGlobal = async function createGlobal(
   this: MongooseAdapter,
-  { slug, data, req = {} as PayloadRequest },
+  { slug, data, req = {} as PayloadRequestWithData },
 ) {
   const Model = this.globals
   const global = {

packages/db-mongodb/src/createGlobalVersion.ts

@@ -1,5 +1,5 @@
 import type { CreateGlobalVersion } from 'payload/database'
-import type { PayloadRequest } from 'payload/types'
+import type { PayloadRequestWithData } from 'payload/types'
 import type { Document } from 'payload/types'
 
 import type { MongooseAdapter } from './index.js'
@@ -8,7 +8,15 @@ import { withSession } from './withSession.js'
 
 export const createGlobalVersion: CreateGlobalVersion = async function createGlobalVersion(
   this: MongooseAdapter,
-  { autosave, createdAt, globalSlug, parent, req = {} as PayloadRequest, updatedAt, versionData },
+  {
+    autosave,
+    createdAt,
+    globalSlug,
+    parent,
+    req = {} as PayloadRequestWithData,
+    updatedAt,
+    versionData,
+  },
 ) {
   const VersionModel = this.versions[globalSlug]
   const options = withSession(this, req.transactionID)

packages/db-mongodb/src/createVersion.ts

@@ -1,5 +1,5 @@
 import type { CreateVersion } from 'payload/database'
-import type { PayloadRequest } from 'payload/types'
+import type { PayloadRequestWithData } from 'payload/types'
 import type { Document } from 'payload/types'
 
 import type { MongooseAdapter } from './index.js'
@@ -13,7 +13,7 @@ export const createVersion: CreateVersion = async function createVersion(
     collectionSlug,
     createdAt,
     parent,
-    req = {} as PayloadRequest,
+    req = {} as PayloadRequestWithData,
     updatedAt,
     versionData,
   },

packages/db-mongodb/src/deleteMany.ts

@@ -1,5 +1,5 @@
 import type { DeleteMany } from 'payload/database'
-import type { PayloadRequest } from 'payload/types'
+import type { PayloadRequestWithData } from 'payload/types'
 
 import type { MongooseAdapter } from './index.js'
 
@@ -7,7 +7,7 @@ import { withSession } from './withSession.js'
 
 export const deleteMany: DeleteMany = async function deleteMany(
   this: MongooseAdapter,
-  { collection, req = {} as PayloadRequest, where },
+  { collection, req = {} as PayloadRequestWithData, where },
 ) {
   const Model = this.collections[collection]
   const options = {

packages/db-mongodb/src/deleteOne.ts

@@ -1,5 +1,5 @@
 import type { DeleteOne } from 'payload/database'
-import type { PayloadRequest } from 'payload/types'
+import type { PayloadRequestWithData } from 'payload/types'
 import type { Document } from 'payload/types'
 
 import type { MongooseAdapter } from './index.js'
@@ -9,7 +9,7 @@ import { withSession } from './withSession.js'
 
 export const deleteOne: DeleteOne = async function deleteOne(
   this: MongooseAdapter,
-  { collection, req = {} as PayloadRequest, where },
+  { collection, req = {} as PayloadRequestWithData, where },
 ) {
   const Model = this.collections[collection]
   const options = withSession(this, req.transactionID)

packages/db-mongodb/src/deleteVersions.ts

@@ -1,5 +1,5 @@
 import type { DeleteVersions } from 'payload/database'
-import type { PayloadRequest } from 'payload/types'
+import type { PayloadRequestWithData } from 'payload/types'
 
 import type { MongooseAdapter } from './index.js'
 
@@ -7,7 +7,7 @@ import { withSession } from './withSession.js'
 
 export const deleteVersions: DeleteVersions = async function deleteVersions(
   this: MongooseAdapter,
-  { collection, locale, req = {} as PayloadRequest, where },
+  { collection, locale, req = {} as PayloadRequestWithData, where },
 ) {
   const VersionsModel = this.versions[collection]
   const options = {

packages/db-mongodb/src/find.ts

@@ -1,6 +1,6 @@
 import type { PaginateOptions } from 'mongoose'
 import type { Find } from 'payload/database'
-import type { PayloadRequest } from 'payload/types'
+import type { PayloadRequestWithData } from 'payload/types'
 
 import { flattenWhereToOperators } from 'payload/database'
 
@@ -12,7 +12,16 @@ import { withSession } from './withSession.js'
 
 export const find: Find = async function find(
   this: MongooseAdapter,
-  { collection, limit, locale, page, pagination, req = {} as PayloadRequest, sort: sortArg, where },
+  {
+    collection,
+    limit,
+    locale,
+    page,
+    pagination,
+    req = {} as PayloadRequestWithData,
+    sort: sortArg,
+    where,
+  },
 ) {
   const Model = this.collections[collection]
   const collectionConfig = this.payload.collections[collection].config

packages/db-mongodb/src/findGlobal.ts

@@ -1,5 +1,5 @@
 import type { FindGlobal } from 'payload/database'
-import type { PayloadRequest } from 'payload/types'
+import type { PayloadRequestWithData } from 'payload/types'
 
 import { combineQueries } from 'payload/database'
 
@@ -10,7 +10,7 @@ import { withSession } from './withSession.js'
 
 export const findGlobal: FindGlobal = async function findGlobal(
   this: MongooseAdapter,
-  { slug, locale, req = {} as PayloadRequest, where },
+  { slug, locale, req = {} as PayloadRequestWithData, where },
 ) {
   const Model = this.globals
   const options = {

packages/db-mongodb/src/findGlobalVersions.ts

@@ -1,6 +1,6 @@
 import type { PaginateOptions } from 'mongoose'
 import type { FindGlobalVersions } from 'payload/database'
-import type { PayloadRequest } from 'payload/types'
+import type { PayloadRequestWithData } from 'payload/types'
 
 import { flattenWhereToOperators } from 'payload/database'
 import { buildVersionGlobalFields } from 'payload/versions'
@@ -19,7 +19,7 @@ export const findGlobalVersions: FindGlobalVersions = async function findGlobalV
     locale,
     page,
     pagination,
-    req = {} as PayloadRequest,
+    req = {} as PayloadRequestWithData,
     skip,
     sort: sortArg,
     where,

packages/db-mongodb/src/findOne.ts

@@ -1,6 +1,6 @@
 import type { MongooseQueryOptions } from 'mongoose'
 import type { FindOne } from 'payload/database'
-import type { PayloadRequest } from 'payload/types'
+import type { PayloadRequestWithData } from 'payload/types'
 import type { Document } from 'payload/types'
 
 import type { MongooseAdapter } from './index.js'
@@ -10,7 +10,7 @@ import { withSession } from './withSession.js'
 
 export const findOne: FindOne = async function findOne(
   this: MongooseAdapter,
-  { collection, locale, req = {} as PayloadRequest, where },
+  { collection, locale, req = {} as PayloadRequestWithData, where },
 ) {
   const Model = this.collections[collection]
   const options: MongooseQueryOptions = {