Payload v3

.env.example

@@ -1,2 +1,3 @@
-MONGODB_URI=
-PAYLOAD_SECRET=
+PAYLOAD_SECRET=jawliejfilwajefSEANlawefawfewag349jwgo3gj4w
+MONGODB_URI=mongodb://127.0.0.1:27017/next-payload-3
+# POSTGRES_URI=postgresql://postgres:[email protected]:5432/next-payload-3

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["@remix-run/eslint-config", "@remix-run/eslint-config/node", "next/core-web-vitals"]
+}

.gitignore

@@ -1,10 +1,52 @@
-node_modules
-
 /.cache
+*timestamp-*
+
+# generated by payload
+cms/payload-types.ts
+
+# 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
 /dist
 /public/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
 .env
+.env*.local
 
-# generated by payload
-cms/payload-types.ts
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.env
+
+/media

.prettierrc.json

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

CHANGELOG.md

@@ -0,0 +1,13 @@
+# alpha.42
+
+**We're now pre-compiling CSS for faster startup times**
+
+We are beginning to optimize the compilation and dev startup performance of Payload 3.0, and the first thing we've done is pre-compiled all SCSS that is required by the Payload admin UI.
+
+If you started before `alpha.42` and update to this version, you'll see that no styles are loaded. To fix this, take a look at the `/src/app/(payload)/layout.tsx` file within this repo, and note that this file has a new CSS import within it to load all CSS required by the Payload admin panel.
+
+Simply add this import to your `(payload)/layout.tsx` file, and you'll be back in business.
+
+**We now load all required Payload static files from your Next.js `public` folder**
+
+In addition to pre-compiling SCSS, we are also shipping static files through the Next.js `/public` folder which will cut down on compilation time as well. Make sure you copy the `public/payload` folder into your repo as well as add the CSS import above.

Dockerfile

@@ -1,7 +1,7 @@
 # syntax = docker/dockerfile:1
 
 # Adjust NODE_VERSION as desired
-ARG NODE_VERSION=18.17.0
+ARG NODE_VERSION=20.13.1
 FROM node:${NODE_VERSION}-alpine as base
 
 LABEL fly_launch_runtime="Remix"

auth.js

@@ -0,0 +1,33 @@
+import {
+  executeAuthStrategies,
+  getAccessResults,
+  parseCookies,
+} from "payload/auth";
+
+export const auth = async ({ headers, payload }) => {
+  const cookies = parseCookies(headers);
+
+  const user = await executeAuthStrategies({
+    cookies,
+    headers,
+    payload,
+  });
+
+  const permissions = await getAccessResults({
+    req: {
+      context: {},
+      headers,
+      i18n: undefined,
+      payload,
+      payloadAPI: "REST",
+      t: undefined,
+      user,
+    },
+  });
+
+  return {
+    cookies,
+    permissions,
+    user,
+  };
+};

docs/decisions/003-ESM.md

@@ -0,0 +1,19 @@
+# Title
+
+Date: 2023-11-01
+
+Status: accepted
+
+## Context
+
+Payload 3 ships as ESM, which remove the final blocker stopping RePay to fully migrate.
+
+## Decision
+
+RePay will be ESM by default.
+
+## Consequences
+
+Might cause problems when upgrading from older releases.
+
+[See this guide CJS/ESM migration](https://alemtuzlak.hashnode.dev/migrating-a-v1-cjs-remix-project-to-remix-vite-esm).

docs/decisions/003-remix-app-dir.md

@@ -0,0 +1,21 @@
+# Title
+
+Date: 2023-11-01
+
+Status: accepted
+
+## Context
+
+NextJS is hardcoded to use the project `app` directory if it exists. This is a problem because Remix also uses the `app` directory for routes as well, by default.
+
+https://nextjs.org/docs/app/building-your-application/configuring/src-directory
+
+Luckily, we can change the Remix default routes directory to another with the appDirectory prop.
+
+## Decision
+
+We'll set the `appDirectory` prop to `remix-app` in the `remix.config.js` file.
+
+## Consequences
+
+Update from older RePay template need to move the `app` directory to `remix-app` and update their Remix Config in remix.config.js or vite.config.js file.

docs/decisions/004-path-aliases.md

@@ -0,0 +1,20 @@
+# Title
+
+Date: 2023-11-01
+
+Status: accepted
+
+## Context
+
+Typescript 5.4 ships subpath aliasing "#" from package.json. Using "#app/" in lieu of "~" will help with sharing react components between Remix and Payload.
+
+- [Annoucing Typescript 5.4: Auto-Import Support for Subpath Imports](https://devblogs.microsoft.com/typescript/announcing-typescript-5-4/#auto-import-support-for-subpath-imports)
+- [Epic-Stack Decision Doc: Imports](https://github.com/epicweb-dev/epic-stack/blob/main/docs/decisions/031-imports.md)
+
+## Decision
+
+Replace "~/" with "#app/" in all imports.
+
+## Consequences
+
+Requires updating all imports; unfamiliar syntax for Remix devs.

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)

package.json

@@ -1,39 +1,45 @@
 {
   "private": true,
   "sideEffects": false,
+  "type": "module",
   "scripts": {
     "build": "run-s \"build:*\"",
     "build:remix": "remix vite:build",
-    "build:payload": "payload build",
+    "build:payload": "cross-env NODE_OPTIONS=--no-deprecation next build",
     "build:server": "tsc -p tsconfig.server.json",
-    "dev": "node -r ts-node/register --watch-path ./server.ts server.ts",
+    "dev": "tsx server.ts",
     "start": "cross-env PAYLOAD_CONFIG_PATH=dist/payload.config.js NODE_ENV=production node dist/server.js",
     "generate:types": "payload generate:types",
     "clean": "shx rm -rf node_modules dist build public/build",
     "typecheck": "tsc"
   },
+  "imports": {
+    "#*": "./*"
+  },
   "dependencies": {
-    "@payloadcms/bundler-vite": "^0.1.6",
-    "@payloadcms/db-mongodb": "^1.4.2",
-    "@payloadcms/richtext-lexical": "^0.7.0",
-    "@remix-run/express": "^2.7.0",
-    "@remix-run/node": "^2.7.0",
-    "@remix-run/react": "^2.7.0",
+    "@payloadcms/db-mongodb": "3.0.0-beta.25",
+    "@payloadcms/next": "3.0.0-beta.25",
+    "@payloadcms/richtext-lexical": "3.0.0-beta.25",
+    "@remix-run/express": "^2.9.1",
+    "@remix-run/node": "^2.9.1",
+    "@remix-run/react": "^2.9.1",
     "compression": "^1.7.4",
     "cross-env": "^7.0.3",
     "dotenv": "^16.4.4",
     "express": "^4.18.2",
+    "graphql": "^16.8.1",
     "isbot": "^5.1.0",
     "morgan": "^1.10.0",
-    "payload": "^2.11.1",
+    "next": "14.3.0-canary.7",
+    "payload": "3.0.0-beta.25",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "source-map-support": "^0.5.21",
     "tiny-invariant": "^1.3.1"
   },
   "devDependencies": {
-    "@remix-run/dev": "^2.7.0",
-    "@remix-run/eslint-config": "^2.7.0",
+    "@remix-run/dev": "^2.9.1",
+    "@remix-run/eslint-config": "^2.9.1",
     "@swc/core": "1.3.107",
     "@types/compression": "^1.7.5",
     "@types/express": "^4.17.21",
@@ -43,17 +49,18 @@
     "@types/react-dom": "^18.2.19",
     "@types/source-map-support": "^0.5.10",
     "autoprefixer": "^10.4.17",
+    "esbuild": "^0.20.2",
     "eslint": "^8.56.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.35",
     "shx": "^0.3.4",
     "tailwindcss": "^3.4.1",
     "ts-node": "^10.9.2",
-    "typescript": "^5.3.3",
-    "vite": "^5.1.3",
-    "vite-tsconfig-paths": "^4.3.1"
+    "tsx": "^4.7.1",
+    "typescript": "^5.4.3",
+    "vite": "^5.2.6"
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   }
 }

payload.config.ts

@@ -1,28 +1,24 @@
 import { mongooseAdapter } from "@payloadcms/db-mongodb";
 import { lexicalEditor } from "@payloadcms/richtext-lexical";
-import { viteBundler } from "@payloadcms/bundler-vite";
 import { buildConfig } from "payload/config";
 import path from "path";
 import Users from "./cms/collections/Users";
+import { fileURLToPath } from "url";
+
+const filename = fileURLToPath(import.meta.url);
+const dirname = path.dirname(filename);
 
 export default buildConfig({
   admin: {
     user: Users.slug,
-    bundler: viteBundler(),
-    vite: (incomingViteConfig) => ({
-      ...incomingViteConfig,
-      build: {
-        ...incomingViteConfig.build,
-        emptyOutDir: false,
-      },
-    }),
   },
   editor: lexicalEditor({}),
   db: mongooseAdapter({
     url: process.env.MONGODB_URI ?? false,
   }),
+  secret: process.env.PAYLOAD_SECRET || "",
   collections: [Users],
   typescript: {
-    outputFile: path.resolve(__dirname, "cms/payload-types.ts"),
+    outputFile: path.resolve(dirname, "cms/payload-types.ts"),
   },
 });

postcss.config.js → postcss.config.mjs

@@ -1,5 +1,5 @@
 /** @type {import('postcss-load-config').Config} */
-module.exports = {
+export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},

app/root.tsx → remix-app/root.tsx

@@ -9,8 +9,11 @@ import {
 } from "@remix-run/react";
 
 //css should be imported as an side effect for Vite
-import "./tailwind.css";
+import tailwind from "./tailwind.css?url";
 
+export const links = () => {
+  return [{ rel: "stylesheet", href: tailwind }];
+};
 export const meta: MetaFunction = () => [
   { title: "Welcome to RePay!" },
   { charSet: "utf-8" },