feat!: type auto-generation (#6657)

Types are now auto-generated by default.

You can opt-out of this behavior by setting:
```ts
buildConfig({
  // Rest of config
  typescript: {
    autoGenerate: false
  },
})
```

Author: denolfe

next.config.mjs

@@ -33,6 +33,7 @@ export default withBundleAnalyzer(
         '.js': ['.ts', '.tsx', '.js', '.jsx'],
         '.mjs': ['.mts', '.mjs'],
       }
+
       return webpackConfig
     },
   }),

package.json

@@ -124,6 +124,7 @@
     "husky": "^8.0.3",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
+    "json-schema-to-typescript": "11.0.3",
     "lint-staged": "^14.0.1",
     "minimist": "1.2.8",
     "mongodb-memory-server": "^9.0",

packages/next/src/utilities/getPayloadHMR.ts

@@ -2,6 +2,7 @@ import type { GeneratedTypes, Payload } from 'payload'
 import type { InitOptions, SanitizedConfig } from 'payload/config'
 
 import { BasePayload } from 'payload'
+import { generateTypes } from 'payload/bin'
 import WebSocket from 'ws'
 
 let cached: {
@@ -36,6 +37,11 @@ export const reload = async (config: SanitizedConfig, payload: Payload): Promise
 
   // TODO: support HMR for other props in the future (see payload/src/index init()) hat may change on Payload singleton
 
+  // Generate types
+  if (config.typescript.autoGenerate !== false) {
+    void generateTypes(config, { log: false })
+  }
+
   await payload.db.init()
   if (payload.db.connect) {
     await payload.db.connect({ hotReload: true })

packages/next/src/withPayload.js

@@ -68,6 +68,7 @@ export const withPayload = (nextConfig = {}) => {
       'pino',
       'pino-pretty',
       'graphql',
+      'json-schema-to-typescript',
     ],
     webpack: (webpackConfig, webpackOptions) => {
       const incomingWebpackConfig =
@@ -83,6 +84,7 @@ export const withPayload = (nextConfig = {}) => {
           'drizzle-kit/payload',
           'sharp',
           'libsql',
+          'json-schema-to-typescript',
         ],
         ignoreWarnings: [
           ...(incomingWebpackConfig?.ignoreWarnings || []),

packages/next/webpack.config.js

@@ -18,6 +18,7 @@ const componentWebpackConfig = {
     'payload/config',
     'react-image-crop',
     'payload/operations',
+    'payload/bin',
   ],
   mode: 'production',
   module: {

packages/payload/src/bin/generateTypes.ts

@@ -6,11 +6,16 @@ import type { SanitizedConfig } from '../config/types.js'
 import { configToJSONSchema } from '../utilities/configToJSONSchema.js'
 import Logger from '../utilities/logger.js'
 
-export async function generateTypes(config: SanitizedConfig): Promise<void> {
+export async function generateTypes(
+  config: SanitizedConfig,
+  options?: { log: boolean },
+): Promise<void> {
   const logger = Logger()
   const outputFile = process.env.PAYLOAD_TS_OUTPUT_PATH || config.typescript.outputFile
 
-  logger.info('Compiling TS types for Collections and Globals...')
+  const shouldLog = options?.log ?? true
+
+  if (shouldLog) logger.info('Compiling TS types for Collections and Globals...')
 
   const jsonSchema = configToJSONSchema(config, config.db.defaultIDType)
 
@@ -37,5 +42,5 @@ export async function generateTypes(config: SanitizedConfig): Promise<void> {
     }
   }
   fs.writeFileSync(outputFile, compiled)
-  logger.info(`Types written to ${outputFile}`)
+  if (shouldLog) logger.info(`Types written to ${outputFile}`)
 }

packages/payload/src/config/defaults.ts

@@ -49,6 +49,7 @@ export const defaults: Omit<Config, 'db' | 'editor' | 'secret'> = {
   serverURL: '',
   telemetry: true,
   typescript: {
+    autoGenerate: true,
     outputFile: `${typeof process?.cwd === 'function' ? process.cwd() : ''}/payload-types.ts`,
   },
   upload: {},

packages/payload/src/config/schema.ts

@@ -189,6 +189,7 @@ export default joi.object({
   sharp: joi.any(),
   telemetry: joi.boolean(),
   typescript: joi.object({
+    autoGenerate: joi.boolean(),
     declare: joi.alternatives().try(joi.boolean(), joi.object({ ignoreTSError: joi.boolean() })),
     outputFile: joi.string(),
   }),

packages/payload/src/config/types.ts

@@ -719,6 +719,12 @@ export type Config = {
   telemetry?: boolean
   /** Control how typescript interfaces are generated from your collections. */
   typescript?: {
+    /**
+     * Automatically generate types during development
+     * @default true
+     */
+    autoGenerate?: boolean
+
     /** Disable declare block in generated types file */
     declare?:
       | {
@@ -732,6 +738,7 @@ export type Config = {
           ignoreTSError?: boolean
         }
       | false
+
     /** Filename to write the generated types to */
     outputFile?: string
   }

packages/payload/src/exports/bin.ts

@@ -0,0 +1,5 @@
+/**
+ * WARNING: This file contains exports that can only be safely used on the server.
+ */
+
+export { generateTypes } from '../bin/generateTypes.js'