fix: upgrade to @sanity/pkg-utils v5 and use updated ESM best practices

[stipsan]

Description

This PR started off as a mission to update all packages to @sanity/pkg-utils v5, and implement its updated best practices:

• generate CJS, ESM and .d.ts that fully pass publint.dev (@sanity/ui before / after) and Are the types wrong? (@sanity/ui before / after) while still supporting generating legacy exports (the legacyExports: true setting in package.config, see @sanity/client for an example that only ship modern code).
• Upgrade to TypeScript 5.4 and make use of the new module: "Preserve" option.
• No longer specify package.json exports[*].types conditions as they are now generated following TSC file ending conventions that fully supports the new customConditions feature in moduleResolution: "Bundler".

However it turned out that @sanity/tsdoc was on @sanity/pkg-utils v2, and on TS v5.1. Upgrading @sanity/tsdoc to v5.4 and fully support the changes in pkg-utils v5 was a significant effort.
Upgrading the monorepo to be able to use module: "Preserve" was also easier said than done, due to the usage of references and the large amount of spread out tsconfig.json files. Thus the monorepo is updated to follow turbo and pnpm best practices for using @repo prefixed packages for shared tsconfig.json settings, as well as the base package.config.ts file.

What to review

• Check that imports resolve the correct typings with module: "Preserve" (deep dive on what it means) which makes TS typecheck with support for package.json export conditions, and checking that npm packages work with Node.js in native ESM mode, modern CJS mode, and how bundlers (like @sanity/pkg-utils) expects you to write import statements.
• Linter rules were changed to better support TS' moduleResolution: "Bundler" mode, which is enabled by default when using module: "Preserve". I'm not super familiar with eslint-plugin-import, so I'm not sure if this is the best way to do this, but it seems to work.
• The output when running pnpm build locally is set to outputMode: 'new-only', this makes it much less noisy. While the CI uses--output-logs=full --log-order=grouped to allow viewing the full logs on GitHub Actions. This means that when you run pnpm build you'll only see the build log for packages that weren't cached, try it and let me know if it's confusing or makes sense.
• Each workspace tsconfig.json and tsconfig.lib.json now extends @repo/tsconfig/monorepo.json and @repo/tsconfig/base.
• Shared tsconfig settings and package.config.ts that used to be on the root level is moved to ./packages/@repo/tsconfig and ./packages/@repo/package.config. The @repo namespace is a convention in turborepo projects for when you have packages that shouldn't be published to npm, and when you don't want to use package names that could collide with actual npm packages. The main benefit of private workspaces is that they "just work" with tooling like pnpm and turbo (no need to specify globalDependencies in turbo.json for them). tsc check if any compilerOptions.paths options are missing required include statements, or if they're pointing to non-existing files.
• As Turborepo doesn't support pre* and post* scripts out of the box, the postbuild and prebuild scripts have been refactored. The prebuild script now runs during build, a future version of @sanity/pkg-utils will add the ability to rimraf your outDir automatically and we'll be able to remove run-s clean && from build scripts. The postbuild script is replaced with a check:types command.
• Running pnpm dev, pnpm test, and editing files in your IDE should see typings without first having to run pnpm build to generate .d.ts files. This can be tested by running build:clean to remove any generated output from a previous pnpm build run.
• The usage of TS references has been replaced with paths. For an IDE like VS Code the performance should be the same, while tsc cli is slower. You should be able to edit any files in dev/**/* or packages/**/* and see typings for any package (like @sanity/types, sanity) without having to run pnpm build first.
• The pnpm build:types command is replaced with pnpm check:types, test it and see if its output makes sense. It'll truncate the output unless there's type errors. To see the full output you can run pnpm check:types --output-logs=full.
• There's a new pnpm check:package command that works as pnpm build, but with @sanity/pkg-utils output validation ensuring that files that package.json are pointing to exists on the filesystem. This is how pnpm build used to work before we started using turbo run build, as lerna would run postbuild scripts. The fact that postbuild haven't been running since we moved to turborepo managed to slip under the radar. It's generally not necessary to run pnpm check:package locally since the CI handles it, but it's useful when setting up new packages, or adding/removing exports.

Testing

• Since references is replaced with paths and causing tsc to be much slower the pnpm build:dts command is replaced with a turborepo-enabled pnpm check:types command. It's not necessary to run this locally in the day-to-day as the CI Type check action will run this for you. Since rootDir: "." is used it also makes sure that all paths in tsconfig.json files are correct and up to date, ensuring that someone doesn't accidentally rely on pnpm build generating typings for all monorepo packages to be able to type check.
• The Type check CI action is updated to also run the check:types command, which used to be run as postbuild scripts on each package that uses @sanity/pkg-utils to bundle.

Notes for release

• fix(typings): resolves Masquerading as CJS and ESM type errors
• fix: add ESM with .mjs exports for full support of Node.js' native ESM mode, while still oferring .esm.js exports for legacy bundlers support
• fix: add missing sideEffects: false conditions to package.json files, improving tree-shaking and reducing bundle sizes for embedded Sanity Studio projects

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
performance-studio	✅ Ready (Inspect)	Visit Preview		Apr 8, 2024 9:31pm
test-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 8, 2024 9:31pm

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)	Visit Preview		Apr 8, 2024 9:31pm

[socket-security]

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@sanity/[email protected]	None	0	62 kB	sanity-io
npm/@sanity/[email protected]	Transitive: environment	+1	997 kB	sanity-io

🚮 Removed packages: npm/@sanity/[email protected], npm/@sanity/[email protected], npm/@sanity/[email protected], npm/@sanity/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected]

View full report↗︎

[github-actions]

No changes to documentation

[github-actions]

Component Testing Report Updated Apr 8, 2024 9:36 PM (UTC)

File	Status	Duration	Passed	Skipped	Failed
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	36s	15	0	0
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	6s	3	0	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	✅ Passed (Inspect)	25s	6	0	0
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx	✅ Passed (Inspect)	12s	4	2	0
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	12s	6	0	0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	✅ Passed (Inspect)	32s	15	0	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	58s	15	0	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	1m 1s	18	0	0
formBuilder/inputs/PortableText/RangeDecoration.spec.tsx	✅ Passed (Inspect)	11s	6	0	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	13s	6	0	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	✅ Passed (Inspect)	20s	9	0	0