Skip to content

feat: add CLI to launch Drizzle Studio #13157

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
wants to merge 7 commits into
base: main
Choose a base branch
from
Draft

feat: add CLI to launch Drizzle Studio #13157

wants to merge 7 commits into from

Conversation

GermanJablo
Copy link
Contributor

@GermanJablo GermanJablo commented Jul 14, 2025 •
edited
Loading

Sometimes it's very useful to see the raw table structure for debugging purposes. This PR introduces a new command, pnpx payload drizzle:studio, which runs Drizzle Studio if you're using payload with our Postgres or SQLite adapters.

To test this in the current PR:

  1. Run any Postgres suite, for example, PAYLOAD_DATABASE=postgres pnpm dev fields
  2. Run pnpm build:all
  3. Run node packages/payload/bin.js drizzle:studio in another terminal.

After the next release, pnpx payload drizzle:studio should work also in the monorepo. I intend to document this command once it's released and I've been able to test it in a fresh project.

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jul 14, 2025 •
edited
Loading

📦 esbuild Bundle Analysis for payload

This analysis was generated by esbuild-bundle-analyzer. 🤖

Meta File Out File Size (raw) Note
packages/next/meta_index.json esbuild/index.js 747.65 KB 🆕 Added
packages/payload/meta_index.json esbuild/index.js 1.19 MB 🆕 Added
packages/payload/meta_shared.json esbuild/exports/shared.js 160.41 KB 🆕 Added
packages/richtext-lexical/meta_client.json esbuild/exports/client_optimized/index.js 259.22 KB 🆕 Added
packages/ui/meta_client.json esbuild/exports/client_optimized/index.js 1.12 MB 🆕 Added
packages/ui/meta_shared.json esbuild/exports/shared_optimized/index.js 14.10 KB 🆕 Added
Largest paths These visualization shows top 20 largest paths in the bundle.

Meta file: packages/next/meta_index.json, Out file: esbuild/index.js

Path Size
../../node_modules ${{\color{Goldenrod}{ ████████████████████▎ }}}$ 81.0%, 601.90 KB
dist/views/Version ${{\color{Goldenrod}{ █▋ }}}$ 6.6%, 49.35 KB
dist/views/Document ${{\color{Goldenrod}{ ▍ }}}$ 1.9%, 14.19 KB
dist/views/Root ${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 6.67 KB
dist/views/Versions ${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 6.17 KB
dist/views/List ${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 5.93 KB
dist/views/API ${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 5.90 KB
dist/views/Account ${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 5.34 KB
dist/elements/Nav ${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 4.84 KB
dist/elements/DocumentHeader ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 4.63 KB
dist/views/Login ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 4.39 KB
dist/views/Dashboard ${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 3.68 KB
dist/views/ForgotPassword ${{\color{Goldenrod}{ }}}$ 0.4%, 3.09 KB
dist/layouts/Root ${{\color{Goldenrod}{ }}}$ 0.4%, 3.09 KB
dist/utilities/initPage ${{\color{Goldenrod}{ }}}$ 0.4%, 3.01 KB
dist/templates/Default ${{\color{Goldenrod}{ }}}$ 0.4%, 2.83 KB
dist/views/CreateFirstUser ${{\color{Goldenrod}{ }}}$ 0.3%, 2.48 KB
dist/views/ResetPassword ${{\color{Goldenrod}{ }}}$ 0.3%, 2.41 KB
dist/views/CollectionFolders ${{\color{Goldenrod}{ }}}$ 0.3%, 2.38 KB
dist/views/BrowseByFolder ${{\color{Goldenrod}{ }}}$ 0.3%, 2.22 KB
(other) ${{\color{Goldenrod}{ ████▊ }}}$ 19.0%, 141.06 KB

Meta file: packages/payload/meta_index.json, Out file: esbuild/index.js

Path Size
../../node_modules ${{\color{Goldenrod}{ █████████████████▋ }}}$ 70.8%, 840.97 KB
dist/fields/hooks ${{\color{Goldenrod}{ ▊ }}}$ 3.4%, 40.06 KB
dist/collections/operations ${{\color{Goldenrod}{ ▋ }}}$ 2.6%, 31.32 KB
dist/auth/operations ${{\color{Goldenrod}{ ▎ }}}$ 1.2%, 14.58 KB
dist/utilities/configToJSONSchema.js ${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 11.54 KB
dist/globals/operations ${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 11.03 KB
dist/fields/config ${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 10.82 KB
dist/fields/validations.js ${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 9.35 KB
dist/queues/operations ${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 8.35 KB
dist/bin/generateImportMap ${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 8.27 KB
dist/database/migrations ${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 7.79 KB
dist/uploads/fetchAPI-multipart ${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 7.74 KB
dist/collections/config ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.58 KB
dist/collections/endpoints ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 6.87 KB
dist/index.js ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 6.84 KB
dist/config/orderable ${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 6.25 KB
dist/auth/endpoints ${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 5.41 KB
dist/utilities/telemetry ${{\color{Goldenrod}{ }}}$ 0.4%, 5.31 KB
dist/config/sanitize.js ${{\color{Goldenrod}{ }}}$ 0.4%, 4.76 KB
dist/auth/strategies ${{\color{Goldenrod}{ }}}$ 0.4%, 4.68 KB
(other) ${{\color{Goldenrod}{ ███████▎ }}}$ 29.2%, 346.99 KB

Meta file: packages/payload/meta_shared.json, Out file: esbuild/exports/shared.js

Path Size
../../node_modules ${{\color{Goldenrod}{ ████████████████████ }}}$ 80.3%, 126.19 KB
dist/fields/validations.js ${{\color{Goldenrod}{ █▍ }}}$ 5.9%, 9.35 KB
dist/fields/baseFields ${{\color{Goldenrod}{ ▍ }}}$ 1.8%, 2.79 KB
dist/utilities/deepCopyObject.js ${{\color{Goldenrod}{ ▍ }}}$ 1.6%, 2.48 KB
dist/auth/cookies.js ${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 1.55 KB
dist/utilities/flattenTopLevelFields.js ${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 1.41 KB
dist/fields/config ${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 1.28 KB
dist/utilities/flattenAllFields.js ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 943 B
dist/utilities/fieldSchemaToJSON.js ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 917 B
dist/folders/utils ${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 852 B
dist/utilities/unflatten.js ${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 779 B
dist/utilities/sanitizeUserDataForEmail.js ${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 713 B
dist/collections/config ${{\color{Goldenrod}{ }}}$ 0.4%, 570 B
dist/bin/generateImportMap ${{\color{Goldenrod}{ }}}$ 0.4%, 559 B
dist/utilities/getSafeRedirect.js ${{\color{Goldenrod}{ }}}$ 0.3%, 423 B
dist/utilities/deepMerge.js ${{\color{Goldenrod}{ }}}$ 0.3%, 413 B
dist/utilities/getFieldPermissions.js ${{\color{Goldenrod}{ }}}$ 0.2%, 391 B
dist/utilities/formatLabels.js ${{\color{Goldenrod}{ }}}$ 0.2%, 380 B
dist/utilities/mergeListSearchAndWhere.js ${{\color{Goldenrod}{ }}}$ 0.2%, 344 B
dist/utilities/getBestFitFromSizes.js ${{\color{Goldenrod}{ }}}$ 0.2%, 340 B
(other) ${{\color{Goldenrod}{ ████▉ }}}$ 19.7%, 31.04 KB

Meta file: packages/richtext-lexical/meta_client.json, Out file: esbuild/exports/client_optimized/index.js

Path Size
dist/lexical/plugins ${{\color{Goldenrod}{ ███ }}}$ 12.1%, 30.91 KB
dist/features/experimental_table ${{\color{Goldenrod}{ ██▍ }}}$ 9.6%, 24.60 KB
dist/lexical/ui ${{\color{Goldenrod}{ ██▎ }}}$ 9.2%, 23.47 KB
dist/features/blocks ${{\color{Goldenrod}{ ██▏ }}}$ 8.8%, 22.43 KB
dist/packages/@lexical ${{\color{Goldenrod}{ █▊ }}}$ 7.4%, 18.99 KB
dist/features/link ${{\color{Goldenrod}{ █▊ }}}$ 7.0%, 17.96 KB
dist/features/toolbars ${{\color{Goldenrod}{ █▋ }}}$ 6.8%, 17.44 KB
dist/features/textState ${{\color{Goldenrod}{ █ }}}$ 4.3%, 10.98 KB
dist/features/upload ${{\color{Goldenrod}{ ▉ }}}$ 3.7%, 9.60 KB
dist/features/relationship ${{\color{Goldenrod}{ ▉ }}}$ 3.7%, 9.41 KB
dist/lexical/utils ${{\color{Goldenrod}{ ▊ }}}$ 3.2%, 8.08 KB
dist/features/debug ${{\color{Goldenrod}{ ▋ }}}$ 2.9%, 7.34 KB
dist/features/converters ${{\color{Goldenrod}{ ▋ }}}$ 2.7%, 7.04 KB
dist/utilities/fieldsDrawer ${{\color{Goldenrod}{ ▋ }}}$ 2.7%, 7.01 KB
dist/lexical/config ${{\color{Goldenrod}{ ▌ }}}$ 2.0%, 5.10 KB
dist/features/lists ${{\color{Goldenrod}{ ▍ }}}$ 1.9%, 4.95 KB
dist/lexical/theme ${{\color{Goldenrod}{ ▍ }}}$ 1.6%, 4.01 KB
dist/features/format ${{\color{Goldenrod}{ ▎ }}}$ 1.4%, 3.46 KB
dist/lexical/LexicalEditor.js ${{\color{Goldenrod}{ ▎ }}}$ 1.3%, 3.23 KB
dist/features/indent ${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 2.50 KB
(other) ${{\color{Goldenrod}{ █████████████████████▉ }}}$ 87.9%, 225.29 KB

Meta file: packages/ui/meta_client.json, Out file: esbuild/exports/client_optimized/index.js

Path Size
../../node_modules ${{\color{Goldenrod}{ ████████████▉ }}}$ 51.5%, 572.91 KB
dist/elements/FolderView ${{\color{Goldenrod}{ ▋ }}}$ 2.5%, 27.71 KB
dist/elements/BulkUpload ${{\color{Goldenrod}{ ▌ }}}$ 2.2%, 24.52 KB
dist/elements/WhereBuilder ${{\color{Goldenrod}{ ▍ }}}$ 1.6%, 17.94 KB
dist/fields/Relationship ${{\color{Goldenrod}{ ▎ }}}$ 1.4%, 15.93 KB
dist/elements/Table ${{\color{Goldenrod}{ ▎ }}}$ 1.4%, 15.16 KB
dist/views/Edit ${{\color{Goldenrod}{ ▎ }}}$ 1.3%, 14.78 KB
dist/forms/Form ${{\color{Goldenrod}{ ▎ }}}$ 1.3%, 14.21 KB
dist/fields/Blocks ${{\color{Goldenrod}{ ▎ }}}$ 1.1%, 12.37 KB
dist/fields/Upload ${{\color{Goldenrod}{ ▎ }}}$ 1.1%, 11.94 KB
dist/fields/Array ${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 9.29 KB
dist/elements/ListControls ${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 9.04 KB
dist/elements/PublishButton ${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 8.57 KB
dist/elements/LivePreview ${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 8.18 KB
dist/elements/HTMLDiff ${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 7.81 KB
dist/views/CollectionFolder ${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 7.30 KB
dist/elements/ReactSelect ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 6.91 KB
dist/fields/Tabs ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 6.90 KB
dist/views/List ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 6.70 KB
dist/elements/Upload ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 6.62 KB
(other) ${{\color{Goldenrod}{ ████████████▏ }}}$ 48.5%, 538.75 KB

Meta file: packages/ui/meta_shared.json, Out file: esbuild/exports/shared_optimized/index.js

Path Size
dist/graphics/Logo ${{\color{Goldenrod}{ █████▊ }}}$ 23.1%, 3.12 KB
../../node_modules ${{\color{Goldenrod}{ ████▉ }}}$ 19.6%, 2.65 KB
dist/graphics/Icon ${{\color{Goldenrod}{ ██▊ }}}$ 11.3%, 1.52 KB
dist/utilities/formatDocTitle ${{\color{Goldenrod}{ ██▍ }}}$ 9.8%, 1.32 KB
dist/utilities/groupNavItems.js ${{\color{Goldenrod}{ █▌ }}}$ 6.0%, 814 B
dist/providers/TableColumns ${{\color{Goldenrod}{ █▍ }}}$ 5.6%, 757 B
dist/utilities/api.js ${{\color{Goldenrod}{ █▍ }}}$ 5.6%, 756 B
dist/elements/Translation ${{\color{Goldenrod}{ ▉ }}}$ 3.7%, 493 B
dist/elements/withMergedProps ${{\color{Goldenrod}{ ▋ }}}$ 2.5%, 339 B
dist/utilities/handleTakeOver.js ${{\color{Goldenrod}{ ▍ }}}$ 1.9%, 251 B
dist/elements/WithServerSideProps ${{\color{Goldenrod}{ ▍ }}}$ 1.7%, 232 B
dist/utilities/handleGoBack.js ${{\color{Goldenrod}{ ▎ }}}$ 1.2%, 168 B
dist/fields/mergeFieldStyles.js ${{\color{Goldenrod}{ ▎ }}}$ 1.2%, 159 B
dist/forms/Form ${{\color{Goldenrod}{ ▎ }}}$ 1.1%, 147 B
dist/utilities/abortAndIgnore.js ${{\color{Goldenrod}{ ▎ }}}$ 1.1%, 146 B
dist/utilities/hasSavePermission.js ${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 136 B
dist/utilities/handleBackToDashboard.js ${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 129 B
dist/utilities/findLocaleFromCode.js ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 84 B
dist/utilities/sanitizeID.js ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 77 B
dist/utilities/isEditing.js ${{\color{Goldenrod}{ }}}$ 0.4%, 59 B
(other) ${{\color{Goldenrod}{ ███████████████████▏ }}}$ 76.9%, 10.38 KB
Details

Next to the size is how much the size has increased or decreased compared with the base branch of this PR.

  • ‼️: Size increased by 20% or more. Special attention should be given to this.
  • ⚠️: Size increased in acceptable range (lower than 20%).
  • ✅: No change or even downsized.
  • 🗑️: The out file is deleted: not found in base branch.
  • 🆕: The out file is newly found: will be added to base branch.

@GermanJablo GermanJablo marked this pull request as ready for review July 16, 2025 10:46
@GermanJablo GermanJablo requested a review from denolfe as a code owner July 16, 2025 14:03
@GermanJablo
ammend
98faa43
@GermanJablo
fix
43fe251
@GermanJablo
wip
da88137
@GermanJablo
refactor: update package.json to use local file paths for dependencie…
dc37449 
…s and clean up drizzleStudio.ts and index.ts by removing workspace package handling code
@GermanJablo
update lock
caaed27
@GermanJablo
Copy link
Contributor Author

GermanJablo commented Jul 16, 2025 •
edited
Loading

I'm pausing this PR for now as I'm running into a technical difficulty that's taking longer than expected to resolve, and there are other higher priority matters to address at the moment. But if anyone wants to contribute, that would be great!
The issue is that the drizzle:studio command works for end users now, but it doesn't work within our monorepo during development because of how the following 4 packages handle their imports/exports:

  • @payloadcms/db-postgres
  • @payloadcms/drizzle
  • @payloadcms/translations
  • payload

These packages currently have their exports in package.json pointing to src/ (TypeScript source files), which causes module resolution errors when drizzle-kit tries to load them since it expects compiled JavaScript files. The problem can be resolved by changing the exports from src/ to dist/ in their respective package.json files, but this would require modifying workspace package configurations which introduces complexity.

The technical challenge is that drizzle-kit runs in a separate process and doesn't inherit TypeScript loaders, so there's a fundamental conflict between our development setup (which uses TypeScript source files) and drizzle-kit's requirements (which needs compiled JavaScript).

Interestingly, this change is required in the fields suite but not in _community

@GermanJablo GermanJablo marked this pull request as draft July 16, 2025 16:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@denolfe denolfe Awaiting requested review from denolfe denolfe is a code owner

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
created-by: Payload team
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@GermanJablo