Upgrades

apps/cms/package.json

@@ -3,6 +3,7 @@
     "description": "Payload CMS instance",
     "version": "1.0.0",
     "license": "MIT",
+    "type": "module",
     "types": "./src/index.ts",
     "exports": {
         ".": {
@@ -26,30 +27,35 @@
     "scripts": {
         "clean": "rm -rf node_modules dist build .turbo",
         "build:payload": "cross-env PAYLOAD_CONFIG_PATH=src/config.ts payload build",
-        "build:server": "rm -rf dist/* && tsc",
+        "build:server": "rm -rf dist/* && tsc && tsc-alias",
         "build": "pnpm build:payload && pnpm build:server && pnpm copyfiles",
         "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png}\" dist/ && copyfiles -u 1 \"build/**/*\" ../server/build",
         "generate:types": "cross-env PAYLOAD_CONFIG_PATH=src/config.ts payload generate:types",
         "generate:graphQLSchema": "PAYLOAD_CONFIG_PATH=src/config.ts payload generate:graphQLSchema",
-        "lint": "eslint --ext .ts,.tsx,.js,.jsx ./src"
+        "lint": "eslint --ext .ts,.tsx,.js,.jsx ./src",
+        "payload": "cross-env PAYLOAD_CONFIG_PATH=src/config.ts payload"
     },
     "dependencies": {
         "@org/ui": "workspace:*",
-        "payload": "^1.6.9"
+        "@payloadcms/bundler-vite": "^0.1.6",
+        "@payloadcms/db-mongodb": "^1.4.3",
+        "@payloadcms/richtext-lexical": "^0.7.0",
+        "payload": "^2.11.2"
     },
     "devDependencies": {
         "@org/shared": "workspace:*",
-        "@types/express": "^4.17.17",
-        "@types/node": "^18.13.0",
-        "@types/react": "^18.0.27",
+        "@types/express": "^4.17.21",
+        "@types/node": "^20.11.20",
+        "@types/react": "^18.2.59",
         "@types/react-router-dom": "^5.3.3",
         "copyfiles": "^2.4.1",
         "cross-env": "^7.0.3",
-        "nodemon": "^2.0.20",
+        "nodemon": "^3.1.0",
         "react": "^18.2.0",
         "react-router-dom": "^5.3.4",
-        "ts-node": "^10.9.1",
-        "typescript": "^4.9.5"
+        "ts-node": "^10.9.2",
+        "tsc-alias": "^1.8.8",
+        "typescript": "^5.3.3"
     },
     "peerDependencies": {
         "@org/shared": "workspace:*",

apps/cms/src/blocks/Image.ts

@@ -39,7 +39,7 @@ export const Image: Block = {
             label: 'Caption',
             type: 'richText',
             admin: {
-                elements: ['link'],
+                // elements: ['link'],
             },
         },
     ],

apps/cms/src/config.ts

@@ -1,15 +1,27 @@
 import path from 'path';
-import { buildConfig } from 'payload/config';
-import Users from './collections/Users';
+
 import { Payload } from 'payload';
+import { buildConfig } from 'payload/config';
+
+import { mongooseAdapter } from '@payloadcms/db-mongodb';
+import { viteBundler } from '@payloadcms/bundler-vite';
+import { lexicalEditor } from '@payloadcms/richtext-lexical';
+
 import { seedPages, seedUsers } from './seed/index';
+
 import Media from './collections/Media';
 import Pages from './collections/Pages';
+import Users from './collections/Users';
 
 const config = buildConfig({
     admin: {
         user: Users.slug,
+        bundler: viteBundler(),
     },
+    db: mongooseAdapter({
+        url: process.env.MONGODB_URL ?? 'mongodb://localhost/remix-server',
+    }),
+    editor: lexicalEditor(),
     collections: [Users, Media, Pages],
     typescript: {
         outputFile: path.resolve(__dirname, 'payload-types.ts'),

apps/cms/src/index.ts

@@ -1,3 +1,3 @@
 export * from 'payload';
 export { default as payload } from 'payload';
-export * from './payload-types';
+export * from './payload-types';

apps/cms/src/seed/home-page.json

@@ -3,93 +3,125 @@
     {
       "blockType": "content",
       "blockName": "Intro - Rich Text Demo",
-      "content": [
-        {
-          "children": [
-            {
-              "text": "Here is an H2 to introduce the article"
-            }
-          ],
-          "type": "h3"
-        },
-        {
+      "content": {
+        "root": {
+          "type": "root",
           "children": [
             {
-              "text": "Here is some content that will be rendered as an HTML paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."
-            }
-          ],
-          "type": "p"
-        },
-        {
-          "children": [
+              "children": [
+                {
+                  "text": "Here is an H2 to introduce the article",
+                  "type": "text"
+                }
+              ],
+              "type": "heading",
+              "tag": "h3"
+            },
             {
-              "text": "Lorem Ipsum",
-              "bold": true
+              "children": [
+                {
+                  "text": "Here is some content that will be rendered as an HTML paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.",
+                  "type": "text"
+                }
+              ],
+              "type": "paragraph"
             },
             {
-              "text": " is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
+              "children": [
+                {
+                  "text": "Lorem Ipsum",
+                  "format": 1,
+                  "type": "text"
+                },
+                {
+                  "text": " is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
+                  "type": "text"
+                }
+              ],
+              "type": "paragraph"
             }
-          ],
-          "type": "p"
+          ]
         }
-      ]
+      }
     },
     {
       "type": "feature",
       "blockType": "image",
       "blockName": "Wide Image Demo",
       "image": "{{IMAGE_ID}}",
-      "caption": [
-        {
+      "caption": {
+        "root": {
+          "type": "root",
           "children": [
             {
-              "text": "Here is an image caption. It's got a "
-            },
-            {
-              "type": "link",
-              "url": "https://payloadcms.com",
-              "newTab": true,
               "children": [
                 {
-                  "text": "link embedded in it"
+                  "text": "Here is an image caption. It's got a ",
+                  "type": "text"
+                },
+                {
+                  "children": [
+                    {
+                      "text": "link embedded in it",
+                      "type": "text"
+                    }
+                  ],
+                  "type": "link",
+                  "fields": {
+                    "linkType": "custom",
+                    "newTab": true,
+                    "url": "https://payloadcms.com"
+                  }
                 }
-              ]
-            },
-            {
-              "text": ""
+              ],
+              "type": "paragraph"
             }
           ]
         }
-      ]
+      }
     },
     {
       "type": "card",
       "blockType": "image",
       "blockName": "Normal Width Image Demo",
       "image": "{{IMAGE_ID}}",
-      "caption": [
-        {
+      "caption": {
+        "root": {
+          "type": "root",
           "children": [
             {
-              "text": "This is a caption for an image."
+              "children": [
+                {
+                  "text": "This is a caption for an image.",
+                  "type": "text"
+                }
+              ],
+              "type": "paragraph"
             }
           ]
         }
-      ]
+      }
     },
     {
       "blockType": "cta",
       "blockName": "Calls to Action",
-      "content": [
-        {
+      "content": {
+        "root": {
+          "type": "root",
           "children": [
             {
-              "text": "Here is a Call to Action block"
+              "children": [
+                {
+                  "text": "Here is a Call to Action block",
+                  "type": "text"
+                }
+              ],
+              "type": "heading",
+              "tag": "h4"
             }
-          ],
-          "type": "h4"
+          ]
         }
-      ],
+      },
       "buttons": [
         {
           "type": "custom",

apps/cms/src/seed/index.ts

@@ -15,9 +15,7 @@ export const seedPages = async (payload: Payload) => {
             collection: mediaSlug,
             data: {
                 alt: 'Payload',
-            // Payloads incorrectly expects a 'sizes' object here, which should be optional since they are created during upload
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            } as any,
+            },
             filePath: path.resolve(__dirname, './payload.jpg'),
         });
 
@@ -27,8 +25,8 @@ export const seedPages = async (payload: Payload) => {
         });
 
         const publicString = JSON.stringify(home)
-            .replace(/{{IMAGE_ID}}/g, createdMedia.id)
-            .replace(/{{SAMPLE_PAGE_ID}}/g, createdPostsPage.id);
+            .replace(/{{IMAGE_ID}}/g, createdMedia.id.toString())
+            .replace(/{{SAMPLE_PAGE_ID}}/g, createdPostsPage.id.toString());
 
         await payload.create({
             collection: pagesSlug,

apps/cms/src/seed/posts-page.ts

@@ -1,43 +1,48 @@
 export default {
-    "layout": [
+    layout: [
         {
-            "blockType": "content" as const,
-            "blockName": "Page Content",
-            "content": [
-                {
-                    "children": [
+            blockType: 'content' as const,
+            blockName: 'Page Content',
+            content: {
+                root: {
+                    type: 'root',
+                    children: [
                         {
-                            "text": "This is a sample page which is only visible to authenticated users."
-                        }
-                    ],
-                    "type": "h3"
-                },
-                {
-                    "children": [
-                        {
-                            "text": ""
+                            children: [
+                                {
+                                    text: 'This is a sample page which is only visible to authenticated users.',
+                                    type: 'text',
+                                },
+                            ],
+                            type: 'heading',
+                            tag: 'h3',
                         },
                         {
-                            "type": "link",
-                            "url": "/",
-                            "newTab": false,
-                            "children": [
+                            children: [
                                 {
-                                    "text": "Go back home"
-                                }
-                            ]
+                                    children: [
+                                        {
+                                            text: 'Go back home',
+                                            type: 'text',
+                                        },
+                                    ],
+                                    type: 'link',
+                                    fields: {
+                                        linkType: 'custom',
+                                        newTab: false,
+                                        url: '/',
+                                    },
+                                },
+                            ],
+                            type: 'paragraph',
                         },
-                        {
-                            "text": ""
-                        }
                     ],
-                    "type": "p"
-                }
-            ]
-        }
+                },
+            },
+        },
     ],
-    "title": "Posts",
-    "public": false,
-    "slug": "posts" as const,
-    "meta": {}
-}
+    title: 'Posts',
+    public: false,
+    slug: 'posts' as const,
+    meta: {},
+};

apps/cms/tsconfig.json

@@ -5,6 +5,12 @@
         "paths": {
             "payload/generated-types": ["./src/payload-types.ts"]
         },
+        "module": "ESNext",
+        "moduleResolution": "Bundler",
+    },
+    "tsc-alias": {
+        "resolveFullPaths": true,
+        "verbose": false
     },
     "include": ["src/**/*"]
 }

apps/server/nodemon.json

@@ -1,6 +1,6 @@
 {
     "verbose": true,
     "ext": "ts",
-    "exec": "node -r ts-node/register src/index.ts",
+    "exec": "tsx src/index.ts",
     "watch": ["./src/index.ts", "../cms/src"]
 }