fix(deps): Update dependency @sanity/pkg-utils to v6 (#161)

* fix(deps): Update dependency @sanity/pkg-utils to v6

* refactor: use new best practices

* fix: adjust tsconfig to best practice

* chore: fix ts-node

* fix: update best practices

* fix: update tsconfig to follow current best practices

* fix: sync best practices

* fix: pkg-utils now validate `typings`

* chore: fixing tests

* chore: fix tests

* fix: change type back to commonjs to maintain compat

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Cody Olsen <stipsan@gmail.com>

.prettierrc.json

@@ -2,5 +2,6 @@
   "semi": false,
   "printWidth": 100,
   "bracketSpacing": false,
-  "singleQuote": true
+  "singleQuote": true,
+  "plugins": ["prettier-plugin-packagejson"]
 }

package.json

@@ -21,17 +21,17 @@
   "license": "MIT",
   "author": "Sanity.io <hello@sanity.io>",
   "type": "commonjs",
+  "sideEffects": false,
+  "browserslist": "extends @sanity/browserslist-config",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
       "source": "./src/index.ts",
       "require": "./dist/index.js",
       "default": "./dist/index.js"
     },
     "./package.json": "./package.json"
   },
   "main": "./dist/index.js",
-  "source": "./src/index.ts",
   "types": "./dist/index.d.ts",
   "bin": {
     "plugin-kit": "./bin/plugin-kit.js"
@@ -44,15 +44,15 @@
     "v2-incompatible.js"
   ],
   "scripts": {
-    "build": "run-s clean && pkg-utils build --strict && pkg-utils --strict",
-    "clean": "rimraf dist",
+    "build": "pkg-utils build --strict --check --clean",
     "commit": "git-cz",
+    "prepublishOnly": "npm run build",
     "compile": "tsc --build",
-    "format": "prettier src -w",
+    "format": "prettier src package.json -w",
     "lint": "eslint .",
     "prepare": "husky install",
-    "prepublishOnly": "run-s build",
     "test": "tap",
+    "test:update-snapshots": "tap --snapshot",
     "watch": "pkg-utils watch --strict"
   },
   "tap": {
@@ -69,7 +69,7 @@
   },
   "dependencies": {
     "@rexxars/choosealicense-list": "1.1.2",
-    "@sanity/pkg-utils": "3.3.8",
+    "@sanity/pkg-utils": "6.4.1",
     "chalk": "4.1.2",
     "concurrently": "8.2.0",
     "discover-path": "1.0.0",
@@ -89,7 +89,6 @@
     "p-any": "3.0.0",
     "p-props": "4.0.0",
     "postcss": "8.4.38",
-    "rimraf": "4.4.1",
     "semver": "7.5.4",
     "spdx-license-ids": "3.0.17",
     "validate-npm-package-name": "5.0.0",
@@ -100,6 +99,7 @@
     "@commitlint/cli": "19.2.1",
     "@commitlint/config-conventional": "19.1.0",
     "@sanity/semantic-release-preset": "4.1.7",
+    "rimraf": "^4.4.1",
     "@sanity/ui-workshop": "^1.2.11",
     "@types/eslint": "^8.56.8",
     "@types/fs-extra": "^11.0.4",
@@ -118,11 +118,9 @@
     "husky": "^8.0.3",
     "json5": "2.2.3",
     "lint-staged": "^13.3.0",
-    "npm-run-all2": "^5.0.0",
     "prettier": "^3.2.5",
     "prettier-plugin-packagejson": "^2.4.14",
     "readdirp": "^3.6.0",
-    "rimraf": "^4.4.1",
     "sanity": "3.20.2",
     "sinon": "^17.0.1",
     "tap": "^16.3.10",

src/actions/inject.ts

@@ -329,7 +329,7 @@ async function writeStaticAssets(options: InjectOptions) {
     flags.gitignore && gitignoreTemplate(),
     flags.typescript && tsconfigTemplate({flags: options.flags}),
     flags.typescript && tsconfigTemplateDist({outDir, flags: options.flags}),
-    flags.typescript && tsconfigTemplateSettings({flags: options.flags}),
+    flags.typescript && tsconfigTemplateSettings({outDir, flags: options.flags}),
     flags.prettier && prettierignoreTemplate({outDir}),
     flags.prettier && {type: 'copy', from: 'prettierrc.json', to: '.prettierrc'},
   ]

src/actions/verify/types.ts

@@ -17,7 +17,6 @@ export interface PackageJson {
   main?: string
   module?: string
   types?: string
-  typings?: string
   browser?: string
   files?: string[]
   scripts?: Record<string, string>

src/actions/verify/validations.ts

@@ -10,25 +10,24 @@ import {PackageJson, SanityStudioJson, SanityV2Json} from './types'
 import {ParsedCommandLine} from 'typescript'
 
 export const expectedScripts = {
-  build:
-    'run-s clean && plugin-kit verify-package --silent && pkg-utils build --strict && pkg-utils --strict',
+  build: 'plugin-kit verify-package --silent && pkg-utils build --strict --check --clean',
   watch: 'pkg-utils watch --strict',
   'link-watch': 'plugin-kit link-watch',
-  prepublishOnly: 'run-s build',
+  prepublishOnly: 'npm run build',
 }
 
-const expectedModulesFields = ['source', 'exports', 'main', 'module', 'files']
+const expectedModulesFields = ['exports', 'main', 'files']
 
 function filesWithSuffixes(fileBases: string[], suffixes: string[]): string[] {
   return fileBases.flatMap((file) => suffixes.map((suffix) => `${file}.${suffix}`))
 }
 
 export function validateNodeEngine(packageJson: PackageJson) {
-  const nodeVersionRange = '>=14'
+  const nodeVersionRange = '>=18'
   if (!packageJson.engines?.node?.startsWith(nodeVersionRange)) {
     return [
       outdent`
-        Expected package.json to contain engines.node: ">=14" to ensure Studio compatible builds,
+        Expected package.json to contain engines.node: ">=18" to ensure Studio compatible builds,
         but it was: ${packageJson.engines?.node}
 
         Please add the following to package.json:
@@ -49,7 +48,7 @@ export function validateModule(packageJson: PackageJson, options: {outDir: strin
   if (missingFields.length) {
     errors.push(
       outdent`
-        Expected source, exports, main, module and files entries in package.json, but ${missingFields.join(
+        Expected exports, main, files entries in package.json, but ${missingFields.join(
           ', ',
         )} where missing.
 
@@ -58,18 +57,14 @@ export function validateModule(packageJson: PackageJson, options: {outDir: strin
         Given a plugin with entry-point in src/index.ts, using default @sanity/pkg-utils build command,
         package.json should contain the following entries to ensure that commonjs and esm outputs are built into ${outDir}:
 
-        "source": "./src/index.ts",
         "exports": {
           ".": {
-            "types": "./${outDir}/index.d.ts",
             "source": "./src/index.ts",
-            "require": "./${outDir}/index.js",
-            "import": "./${outDir}/index.esm.js",
+            "import": "./${outDir}/index.mjs",
             "default": "./${outDir}/index.js"
           }
         },
         "main": "./${outDir}/index.js",
-        "module": "./${outDir}/index.esm.js",
         "types": "./${outDir}/index.d.ts",
         "files": [
           "${outDir}",
@@ -81,9 +76,6 @@ export function validateModule(packageJson: PackageJson, options: {outDir: strin
     )
   }
 
-  if (packageJson.typings) {
-    errors.push(outdent`Found typings field in package.json. Use types instead.`)
-  }
   return errors
 }
 
@@ -123,18 +115,12 @@ export async function validateTsConfig(
   const errors: string[] = []
 
   const expectedCompilerOptions = {
-    moduleResolution: 'node',
     target: 'esnext',
-    module: 'esnext',
-    emitDeclarationOnly: true,
-    esModuleInterop: true,
-    skipLibCheck: true,
-    isolatedModules: true,
-    downlevelIteration: true,
-    declaration: true,
-    allowSyntheticDefaultImports: true,
+    jsx: 'preserve',
+    module: 'preserve',
     rootDir: '.',
     outDir,
+    noEmit: true,
   }
 
   const wrongEntries = Object.entries(expectedCompilerOptions).filter(([key, value]) => {
@@ -148,16 +134,16 @@ export async function validateTsConfig(
       option = path.relative(basePath, option) || '.'
     }
 
-    if (key === 'moduleResolution' && option === 2) {
-      option = 'node'
-    }
-
     if (key === 'target' && option === 99) {
       option = 'esnext'
     }
 
-    if (key === 'module' && option === 99) {
-      option = 'esnext'
+    if (key === 'module' && option === 200) {
+      option = 'preserve'
+    }
+
+    if (key === 'jsx' && option === 1) {
+      option = 'preserve'
     }
 
     return typeof value === 'string' && typeof option === 'string'

src/cli.ts

@@ -4,6 +4,7 @@ import commands from './cmds'
 import sharedFlags from './sharedFlags'
 import {cliName} from './constants'
 
+/** @public */
 export async function cliEntry(argv = process.argv, autoExit = true) {
   const cli = meow(
     `

src/configs/forced-package-versions.ts

@@ -5,7 +5,6 @@ export const forcedDevPackageVersions = forcedPackageVersions
 export const forcedPeerPackageVersions = {
   react: '^18',
   'react-dom': '^18',
-  'react-is': '^18',
   '@types/react': '^18',
   '@types/react-dom': '^18',
   sanity: '^3',

src/configs/pkg-config.ts

@@ -13,7 +13,6 @@ export function pkgConfigTemplate(options: {outDir: string; flags: InitFlags}):
       import {defineConfig} from '@sanity/pkg-utils'
 
       export default defineConfig({
-        legacyExports: true,
         dist: '${outDir}',
         tsconfig: 'tsconfig.${outDir}.json',
 

src/configs/tsconfig.ts

@@ -12,12 +12,7 @@ export function tsconfigTemplate(options: {flags: InitFlags}): InjectTemplate {
     value: outdent`
       {
         "extends": "./tsconfig.settings",
-        "include": ["./src", "./package.config.ts"],
-        "compilerOptions": {
-          "rootDir": ".",
-          "jsx": "react-jsx",
-          "noEmit": true
-        }
+        "include": ["./src", "./package.config.ts"]
       }
     `,
   }
@@ -39,20 +34,17 @@ export function tsconfigTemplateDist(options: {outDir: string; flags: InitFlags}
           "./src/**/__mocks__",
           "./src/**/*.test.ts",
           "./src/**/*.test.tsx"
-        ],
-        "compilerOptions": {
-          "rootDir": ".",
-          "outDir": "./${outDir}",
-          "jsx": "react-jsx",
-          "emitDeclarationOnly": true
-        }
+        ]
       }
     `,
   }
 }
 
-export function tsconfigTemplateSettings(options: {flags: InitFlags}): InjectTemplate {
-  const {flags} = options
+export function tsconfigTemplateSettings(options: {
+  outDir: string
+  flags: InitFlags
+}): InjectTemplate {
+  const {flags, outDir} = options
 
   return {
     type: 'template',
@@ -61,17 +53,24 @@ export function tsconfigTemplateSettings(options: {flags: InitFlags}): InjectTem
     value: outdent`
       {
         "compilerOptions": {
-          "moduleResolution": "node",
+          "rootDir": ".",
+          "outDir": "./${outDir}",
+
           "target": "esnext",
-          "module": "esnext",
-          "lib": ["DOM", "DOM.Iterable", "ESNext"],
+          "jsx": "preserve",
+          "module": "preserve",
+          "moduleResolution": "bundler",
           "esModuleInterop": true,
+          "resolveJsonModule": true,
+          "moduleDetection": "force",
           "strict": true,
-          "downlevelIteration": true,
-          "declaration": true,
           "allowSyntheticDefaultImports": true,
           "skipLibCheck": true,
-          "isolatedModules": true
+          "forceConsistentCasingInFileNames": true,
+          "isolatedModules": true,
+
+          // Don't emit by default, pkg-utils will ignore this when generating .d.ts files
+          "noEmit": true
         }
       }
     `,

src/npm/package.ts

@@ -21,24 +21,19 @@ import {
 const defaultDependencies = [incompatiblePluginPackage]
 
 const defaultDevDependencies = [
-  'npm-run-all',
-  'rimraf',
   'sanity',
 
   // peer dependencies of `sanity`
   'react',
   'react-dom',
   'styled-components',
-
-  // peer dependencies of `styled-components`
-  'react-is',
 ]
 
 const defaultPeerDependencies = ['react', 'sanity']
 
 const readFile = util.promisify(fs.readFile)
 
-const pathKeys: (keyof PackageJson)[] = ['main', 'module', 'browser', 'types', 'typings']
+const pathKeys: (keyof PackageJson)[] = ['main', 'module', 'browser', 'types']
 
 export async function getPackage(opts: ManifestOptions): Promise<PackageJson> {
   const options = {flags: {}, ...opts}
@@ -292,27 +287,25 @@ export async function writePackageJson(data: PackageData, options: InjectOptions
     ...repoFromOrigin(gitOrigin),
     license: license ? license.id : 'UNLICENSED',
     author: user?.email ? `${user.name} <${user.email}>` : user?.name,
+    sideEffects: false,
+    type: 'commonjs',
     exports: {
       '.': {
-        ...(flags.typescript ? {types: `./${outDir}/index.d.ts`} : {}),
         source,
-        import: `./${outDir}/index.esm.js`,
-        require: `./${outDir}/index.js`,
-        default: `./${outDir}/index.esm.js`,
+        import: `./${outDir}/index.mjs`,
+        default: `./${outDir}/index.js`,
       },
       './package.json': './package.json',
     },
     main: `./${outDir}/index.js`,
-    module: `./${outDir}/index.esm.js`,
-    source,
     ...(flags.typescript ? {types: `./${outDir}/index.d.ts`} : {}),
     files,
     scripts: {...prev.scripts},
     dependencies: sortKeys(dependencies),
     devDependencies: sortKeys(devDependencies),
     peerDependencies: sortKeys(peerDependencies),
     engines: {
-      node: '>=14',
+      node: '>=18',
     },
   }
 
@@ -324,9 +317,6 @@ export async function writePackageJson(data: PackageData, options: InjectOptions
     ...forcedOrder,
   }
 
-  // we use types, not typings
-  delete manifest.typings
-
   const differs = JSON.stringify(prev) !== JSON.stringify(manifest)
   log.debug('Does manifest differ? %s', differs ? 'yes' : 'no')
   if (differs) {
@@ -401,7 +391,6 @@ export async function addBuildScripts(manifest: PackageJson, options: InjectOpti
   }
   return addPackageJsonScripts(manifest, options, (scripts) => {
     scripts.build = addScript(expectedScripts.build, scripts.build)
-    scripts.clean = addScript(`rimraf ${outDir}`, scripts.clean)
     scripts.format = addScript(`prettier --write --cache --ignore-unknown .`, scripts.format)
     scripts['link-watch'] = addScript(expectedScripts['link-watch'], scripts['link-watch'])
     scripts.lint = addScript(`eslint .`, scripts.lint)

src/presets/ui.ts

@@ -62,7 +62,6 @@ async function resolveDevDependencyList(): Promise<Record<string, string>> {
     // install the peer dependencies of `@sanity/ui` as dev dependencies
     'react',
     'react-dom',
-    'react-is',
     'styled-components',
   ])
 }