d8a62b7022
Updates the plugin template and adds it to the monorepo
Includes:
* Integration testing setup
* Adding custom client / server components via a plugin
* The same building setup that we use for our plugins in the monorepo
* `create-payload-app` dynamically configures the project based on the
name:`dev/tsconfig.json`, `src/index.ts`, `dev/payload.config.ts`
For example, from project name: `payload-plugin-cool`
`src/index.ts`:
```ts
export type PayloadPluginCoolConfig = {
/**
* List of collections to add a custom field
*/
collections?: Partial<Record<CollectionSlug, true>>
disabled?: boolean
}
export const payloadPluginCool =
(pluginOptions: PayloadPluginCoolConfig) =>
/// ...
```
`dev/tsconfig.json`:
```json
{
"extends": "../tsconfig.json",
"exclude": [],
"include": [
"**/*.ts",
"**/*.tsx",
"../src/**/*.ts",
"../src/**/*.tsx",
"next.config.mjs",
".next/types/**/*.ts"
],
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@payload-config": [
"./payload.config.ts"
],
"payload-plugin-cool": [
"../src/index.ts"
],
"payload-plugin-cool/client": [
"../src/exports/client.ts"
],
"payload-plugin-cool/rsc": [
"../src/exports/rsc.ts"
]
},
"noEmit": true
}
}
```
`./dev/payload.config.ts`
```
import { payloadPluginCool } from 'payload-plugin-cool'
///
plugins: [
payloadPluginCool({
collections: {
posts: true,
},
}),
],
```
Example of published plugin
https://www.npmjs.com/package/payload-plugin-cool
54 lines
1.5 KiB
JavaScript
54 lines
1.5 KiB
JavaScript
const esModules = [
|
|
// file-type and all dependencies: https://github.com/sindresorhus/file-type
|
|
'file-type',
|
|
'strtok3',
|
|
'readable-web-to-node-stream',
|
|
'token-types',
|
|
'peek-readable',
|
|
'locate-path',
|
|
'p-locate',
|
|
'p-limit',
|
|
'yocto-queue',
|
|
'unicorn-magic',
|
|
'path-exists',
|
|
'qs-esm',
|
|
'uint8array-extras',
|
|
'payload',
|
|
'@payloadcms/next',
|
|
'@payloadcms/ui',
|
|
'@payloadcms/graphql',
|
|
'@payloadcms/translations',
|
|
'@payloadcms/db-mongodb',
|
|
'@payloadcms/richtext-lexical',
|
|
].join('|')
|
|
|
|
/** @type {import('jest').Config} */
|
|
const customJestConfig = {
|
|
extensionsToTreatAsEsm: ['.ts', '.tsx'],
|
|
transformIgnorePatterns: [
|
|
`/node_modules/(?!.pnpm)(?!(${esModules})/)`,
|
|
`/node_modules/.pnpm/(?!(${esModules.replace(/\//g, '\\+')})@)`,
|
|
],
|
|
moduleNameMapper: {
|
|
'\\.(css|scss)$': '<rootDir>/test/helpers/mocks/emptyModule.js',
|
|
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
|
|
'<rootDir>/test/helpers/mocks/fileMock.js',
|
|
'^(\\.{1,2}/.*)\\.js$': '$1',
|
|
},
|
|
testEnvironment: 'node',
|
|
testTimeout: 90000,
|
|
transform: {
|
|
'^.+\\.(t|j)sx?$': ['@swc/jest'],
|
|
},
|
|
verbose: true,
|
|
testMatch: ['<rootDir>/**/*int.spec.ts'],
|
|
moduleNameMapper: {
|
|
'\\.(css|scss)$': '<rootDir>/helpers/mocks/emptyModule.js',
|
|
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
|
|
'<rootDir>/helpers/mocks/fileMock.js',
|
|
'^(\\.{1,2}/.*)\\.js$': '$1',
|
|
},
|
|
}
|
|
|
|
export default customJestConfig
|