@sanity/plugin-kit 2.2.0 → 3.1.0

package/src/actions/inject.ts

@@ -18,8 +18,12 @@ import {
 } from '../util/files'
 import {InitFlags} from './init'
 import {PackageJson} from './verify/types'
-import outdent from 'outdent'
 import {injectPresets} from '../presets/presets'
+import {tsconfigTemplateDist, tsconfigTemplate, tsconfigTemplateSettings} from '../configs/tsconfig'
+import {pkgConfigTemplate} from '../configs/pkg-config'
+import {gitignoreTemplate} from '../configs/git'
+import {eslintignoreTemplate, eslintrcTemplate} from '../configs/eslint'
+import {prettierignoreTemplate} from '../configs/prettier'
 
 const bannedFields = ['login', 'description', 'projecturl', 'email']
 const preferredLicenses = ['MIT', 'ISC', 'BSD-3-Clause']
@@ -31,7 +35,20 @@ const otherLicenses = Object.keys(licenses.list).filter((id) => {
   )
 })
 
-export type FromTo = {from: string | string[]; to: string | string[]}
+export interface InjectCopyFromTo {
+  type: 'copy'
+  from: string | string[]
+  to: string | string[]
+}
+
+export interface InjectTemplate {
+  type: 'template'
+  to: string | string[]
+  value: string
+  force?: boolean
+}
+
+export type Injectable = InjectCopyFromTo | InjectTemplate
 
 export interface InjectOptions {
   basePath: string
@@ -41,6 +58,7 @@ export interface InjectOptions {
   devDependencies?: Record<string, string>
   peerDependencies?: Record<string, string>
   validate?: boolean
+  outDir: string
 }
 
 export interface PackageData {
@@ -111,11 +129,6 @@ async function injectBase(options: InjectOptions) {
   didWrite = await writeStaticAssets(options)
   info(didWrite.length > 0, 'Wrote static asset files: %s', didWrite.join(', '))
 
-  didWrite = await writeEslintrc(options)
-  info(didWrite, 'Wrote .eslintrc.js')
-  didWrite = await writeEslintIgnore(options)
-  info(didWrite, 'Wrote .eslintignore')
-
   didWrite = await addBuildScripts(newPkg, options)
   info(didWrite, 'Added build scripts to package.json')
 
@@ -140,61 +153,6 @@ async function writeReadme(data: PackageData, options: InjectOptions) {
   return true
 }
 
-async function writeEslintrc(options: InjectOptions) {
-  if (!options.flags.eslint) {
-    return false
-  }
-  const {basePath} = options
-
-  const eslintrc = path.join(basePath, '.eslintrc')
-
-  const config = {
-    root: true,
-    env: {
-      node: true,
-      browser: true,
-    },
-    extends: [
-      'sanity',
-      options.flags.typescript && 'sanity/typescript',
-      'sanity/react',
-      'plugin:react-hooks/recommended',
-      options.flags.prettier && 'plugin:prettier/recommended',
-    ].filter(Boolean),
-  }
-
-  const content = JSON.stringify(config, null, 2)
-  await writeFileWithOverwritePrompt(eslintrc, content, {
-    encoding: 'utf8',
-    force: options.flags.force,
-  })
-  return true
-}
-
-async function writeEslintIgnore(options: InjectOptions) {
-  if (!options.flags.eslint) {
-    return false
-  }
-  const {basePath} = options
-
-  const eslintignore = path.join(basePath, '.eslintignore')
-
-  const content = outdent`
-    .eslintrc.js
-    commitlint.config.js
-    lib
-    lint-staged.config.js
-    package.config.ts
-    ${options.flags.typescript ? '*.js' : ''}
-  `.trim()
-
-  await writeFileWithOverwritePrompt(eslintignore, content, {
-    encoding: 'utf8',
-    force: options.flags.force,
-  })
-  return true
-}
-
 async function writeLicense(
   {license}: PackageData,
   options: InjectOptions,
@@ -323,43 +281,64 @@ async function resolveProjectDescription(basePath: string, pkg: PackageJson | un
   }
 }
 
-export async function writeAssets(files: FromTo[], {basePath, flags}: InjectOptions) {
+export async function writeAssets(injectables: Injectable[], {basePath, flags}: InjectOptions) {
   const assetsDir = await findAssetsDir()
 
   const from = (...segments: string[]) => path.join(assetsDir, 'inject', ...segments)
   const to = (...segments: string[]) => path.join(basePath, ...segments)
 
   const writes: string[] = []
-  for (const file of files) {
-    const fromPath = asArray(file.from)
-    const toPath = asArray(file.to)
-    if (await copyFileWithOverwritePrompt(from(...fromPath), to(...toPath), flags)) {
+  for (const injectable of injectables) {
+    if (injectable.type === 'copy') {
+      const fromPath = asArray(injectable.from)
+      const toPath = asArray(injectable.to)
+      if (await copyFileWithOverwritePrompt(from(...fromPath), to(...toPath), flags)) {
+        writes.push(path.join(...toPath))
+      }
+      continue
+    }
+
+    if (injectable.type === 'template') {
+      const toPath = asArray(injectable.to)
+
+      await writeFileWithOverwritePrompt(to(...toPath), `${injectable.value.trim()}\n`, {
+        default: 'n',
+        force: injectable.force || flags.force,
+      })
+
       writes.push(path.join(...toPath))
+      continue
     }
+
+    throw new Error(`Unknown operation type "${(injectable as any).type}"`)
   }
 
   return writes
 }
 
 async function writeStaticAssets(options: InjectOptions) {
-  const {flags} = options
-
-  const files: FromTo[] = [
-    {from: 'editorconfig', to: '.editorconfig'},
-    {from: 'sanity.json', to: 'sanity.json'},
-    {from: 'v2-incompatible.js.template', to: 'v2-incompatible.js'},
-    {
-      from: 'package.config.template',
-      to: options.flags.typescript ? 'package.config.ts' : 'package.config.js',
-    },
-    flags.gitignore && {from: 'gitignore', to: '.gitignore'},
-    flags.typescript && {from: 'template-tsconfig.json', to: 'tsconfig.json'},
-    flags.prettier && {from: 'prettierrc.json', to: '.prettierrc.json'},
+  const {outDir, flags} = options
+
+  const files: Injectable[] = [
+    flags.eslint && eslintrcTemplate({flags: options.flags}),
+    flags.eslint && eslintignoreTemplate({outDir, flags: options.flags}),
+    {type: 'copy', from: 'editorconfig', to: '.editorconfig'},
+    {type: 'copy', from: 'sanity.json', to: 'sanity.json'},
+    {type: 'copy', from: 'v2-incompatible.js.template', to: 'v2-incompatible.js'},
+    pkgConfigTemplate({outDir, flags: options.flags}),
+    flags.gitignore && gitignoreTemplate(),
+    flags.typescript && tsconfigTemplate({flags: options.flags}),
+    flags.typescript && tsconfigTemplateDist({outDir, flags: options.flags}),
+    flags.typescript && tsconfigTemplateSettings({flags: options.flags}),
+    flags.prettier && prettierignoreTemplate({outDir}),
+    flags.prettier && {type: 'copy', from: 'prettierrc.json', to: '.prettierrc'},
   ]
-    .map((f) => (f ? (f as FromTo) : undefined))
-    .filter((f): f is FromTo => !!f)
+    .map((f) => (f ? (f as Injectable) : undefined))
+    .filter((f): f is Injectable => !!f)
+
+  const result = writeAssets(files, options)
 
-  return writeAssets(files, options)
+  return result
 }
 
 function asArray(input: string | string[]): string[] {
@@ -368,7 +347,7 @@ function asArray(input: string | string[]): string[] {
 
 /**
  * assets dir might be in higher or lower in the dir hierarchy depending on
- * if we run from lib or src
+ * if we run from `dist` or `src`
  */
 async function findAssetsDir(): Promise<string> {
   let maxBackpaddle = 3
@@ -408,13 +387,13 @@ async function addCompileDirToGitIgnore(data: PackageData, options: InjectOption
     return false
   }
 
-  const lines = gitignore.split('\n')
+  const lines = gitignore.trim().split('\n')
   if (lines.includes(ignore)) {
     return false
   }
 
-  lines.push('# Compiled plugin', ignore, '\n')
+  lines.push('', '# Compiled plugin', ignore)
 
-  await writeFile(gitIgnorePath, lines.join('\n'), {encoding: 'utf8'})
+  await writeFile(gitIgnorePath, lines.join('\n') + '\n', {encoding: 'utf8'})
   return true
 }

package/src/actions/link-watch.ts

@@ -26,9 +26,10 @@ import log from '../util/log'
 import {getPackage} from '../npm/package'
 import outdent from 'outdent'
 import {fileExists, mkdir} from '../util/files'
+import {loadConfig as loadPackageConfig} from '@sanity/pkg-utils'
+import {defaultOutDir} from '../constants'
 
 interface YalcWatchConfig {
-  folder?: string
   command?: string
   extensions?: string
 }
@@ -42,22 +43,24 @@ export async function linkWatch({basePath}: {basePath: string}) {
     fs.readFileSync(path.join(basePath, 'package.json'), 'utf8')
   )
 
+  const packageConfig = await loadPackageConfig({cwd: basePath})
+  const outDir = packageConfig?.dist ?? defaultOutDir
+
   const watch: Required<YalcWatchConfig> = {
-    folder: 'lib',
     command: 'npm run watch',
     extensions: 'ts,js,png,svg,gif,jpeg,css',
     ...packageJson.sanityPlugin?.linkWatch,
   }
 
   nodemon({
-    watch: [watch.folder],
+    watch: [outDir],
     ext: watch.extensions,
     exec: 'yalc push --changed',
     //delay: 1000
   })
 
   // ensure the folder exits so it can be watched
-  const folder = path.join(basePath, watch.folder)
+  const folder = path.join(basePath, outDir)
   if (!(await fileExists(folder))) {
     await mkdir(folder)
   }
@@ -70,7 +73,7 @@ export async function linkWatch({basePath}: {basePath: string}) {
     .on('start', function () {
       log.info(
         outdent`
-        Watching ${watch.folder} for changes to files with extensions: ${watch.extensions}
+        Watching ${outDir} for changes to files with extensions: ${watch.extensions}
 
         To test this package in Sanity Studio or another package, in a separate shell run:
         cd /path/to/sanity/studio-or-package

package/src/actions/verify/types.ts

@@ -34,29 +34,6 @@ export interface PackageJson {
   [index: string]: unknown
 }
 
-export interface CompilerOptions {
-  jsx?: string
-  moduleResolution?: string
-  target?: string
-  module?: string
-  sourceMap?: boolean
-  inlineSourceMap?: boolean
-  esModuleInterop?: boolean
-  skipLibCheck?: boolean
-  isolatedModules?: boolean
-  downlevelIteration?: boolean
-  declaration?: boolean
-  allowSyntheticDefaultImports?: boolean
-  outDir?: string
-  baseUrl?: string
-  checkJs?: false
-}
-
-export interface TsConfig {
-  compilerOptions?: CompilerOptions
-  include?: string[]
-}
-
 export interface SanityV2Json {
   parts?: [
     {

package/src/actions/verify/validations.ts

@@ -6,34 +6,20 @@ import findBabelConfig from 'find-babel-config'
 import {incompatiblePluginPackage, urls} from '../../constants'
 import {deprecatedDevDeps, mergedPackages} from '../../configs/banned-packages'
 import path from 'path'
-import {fileExists, readFileContent, readJson5File} from '../../util/files'
+import {fileExists, readJson5File} from '../../util/files'
 import chalk from 'chalk'
-import {CompilerOptions, PackageJson, SanityStudioJson, SanityV2Json, TsConfig} from './types'
+import {PackageJson, SanityStudioJson, SanityV2Json} from './types'
+import {ParsedCommandLine} from 'typescript'
 
 export const expectedScripts = {
-  prebuild: `plugin-kit verify-package --silent && pkg-utils`,
-  build: 'pkg-utils build',
-  watch: 'pkg-utils watch',
+  build:
+    'run-s clean && plugin-kit verify-package --silent && pkg-utils build --strict && pkg-utils --strict',
+  watch: 'pkg-utils watch --strict',
   'link-watch': 'plugin-kit link-watch',
-  prepublishOnly: 'npm run build',
+  prepublishOnly: 'run-s build',
 }
 
 const expectedModulesFields = ['source', 'exports', 'main', 'module', 'files']
-const expectedCompilerOptions = {
-  jsx: 'preserve',
-  moduleResolution: 'node',
-  target: 'esnext',
-  module: 'esnext',
-  sourceMap: false,
-  inlineSourceMap: false,
-  esModuleInterop: true,
-  skipLibCheck: true,
-  isolatedModules: true,
-  downlevelIteration: true,
-  declaration: true,
-  allowSyntheticDefaultImports: true,
-  rootDir: 'src',
-}
 
 export function validateNodeEngine(packageJson: PackageJson) {
   const nodeVersionRange = '>=14'
@@ -52,7 +38,8 @@ export function validateNodeEngine(packageJson: PackageJson) {
   }
 }
 
-export function validateModule(packageJson: PackageJson): string[] {
+export function validateModule(packageJson: PackageJson, options: {outDir: string}): string[] {
+  const {outDir} = options
   const errors: string[] = []
 
   const missingFields = expectedModulesFields.filter((field) => !packageJson[field])
@@ -67,24 +54,24 @@ export function validateModule(packageJson: PackageJson): string[] {
         Example:
 
         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 lib:
+        package.json should contain the following entries to ensure that commonjs and esm outputs are built into ${outDir}:
 
         "source": "./src/index.ts",
         "exports": {
           ".": {
-            "types": "./lib/src/index.d.ts",
+            "types": "./${outDir}/index.d.ts",
             "source": "./src/index.ts",
-            "import": "./lib/index.esm.js",
-            "require": "./lib/index.js",
-            "default": "./lib/index.js"
+            "import": "./${outDir}/index.esm.js",
+            "require": "./${outDir}/index.js",
+            "default": "./${outDir}/index.js"
           }
         },
-        "main": "./lib/index.js",
-        "module": "./lib/index.esm.js",
-        "types": "./lib/src/index.d.ts",
+        "main": "./${outDir}/index.js",
+        "module": "./${outDir}/index.esm.js",
+        "types": "./${outDir}/index.d.ts",
         "files": [
-          "src",
-          "lib"
+          "${outDir}",
+          "src"
         ],
 
         Refer to @sanity/pkg-utils for more: https://github.com/sanity-io/pkg-utils#sanitypkg-utils
@@ -115,8 +102,6 @@ export function validateScripts(packageJson: PackageJson): string[] {
         .join(', ')}
 
       This checks for that the commands-strings includes these terms.
-      For example, this will validate ok:
-      "prebuild": "npm run clean && ${expectedScripts.prebuild}",
 
       Please add the following to your package.json "scripts":
 
@@ -127,11 +112,52 @@ export function validateScripts(packageJson: PackageJson): string[] {
   return errors
 }
 
-export async function validateTsConfig(tsConfig: TsConfig) {
+export async function validateTsConfig(
+  ts: ParsedCommandLine,
+  options: {basePath: string; outDir: string; tsconfig: string}
+) {
+  const {basePath, outDir, tsconfig} = options
+
   const errors: string[] = []
-  const options = tsConfig.compilerOptions ?? {}
+
+  const expectedCompilerOptions = {
+    moduleResolution: 'node',
+    target: 'esnext',
+    module: 'esnext',
+    emitDeclarationOnly: true,
+    esModuleInterop: true,
+    skipLibCheck: true,
+    isolatedModules: true,
+    downlevelIteration: true,
+    declaration: true,
+    allowSyntheticDefaultImports: true,
+    rootDir: '.',
+    outDir,
+  }
+
   const wrongEntries = Object.entries(expectedCompilerOptions).filter(([key, value]) => {
-    const option = options[key as keyof CompilerOptions]
+    let option: any = ts.options[key]
+
+    if (key === 'rootDir' && typeof option === 'string') {
+      option = path.relative(basePath, option) || '.'
+    }
+
+    if (key === 'outDir' && typeof option === 'string') {
+      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'
+    }
+
     return typeof value === 'string' && typeof option === 'string'
       ? value.toLowerCase() !== option?.toLowerCase()
       : value !== option
@@ -144,13 +170,13 @@ export async function validateTsConfig(tsConfig: TsConfig) {
 
     errors.push(
       outdent`
-        Recommended tsconfig.json compilerOptions missing:
+        Recommended ${tsconfig} compilerOptions missing:
 
         The following fields had unexpected values: [${wrongEntries.map(([key]) => key).join(', ')}]
         Expected to find these values:
         ${expectedOutput}
 
-        Please update your tsconfig.json accordingly.
+        Please update your ${tsconfig} accordingly.
       `.trimStart()
     )
   }
@@ -443,3 +469,80 @@ export async function validateSrcIndexFile(basePath: string) {
 
   return []
 }
+
+export async function disallowDuplicateConfig({
+  basePath,
+  pkgJson,
+  configKey,
+  files,
+}: {
+  basePath: string
+  pkgJson: PackageJson
+  configKey: string
+  files: string[]
+}) {
+  const found: string[] = []
+  for (const file of files) {
+    const filePath = path.join(basePath, file)
+    const exits = await fileExists(filePath)
+    if (exits) {
+      found.push(file)
+    }
+  }
+  if (found.length > 1) {
+    return [
+      outdent`
+      Found multiple config files that serve the same purpose: [${found.join(', ')}].
+
+      There should be at most one of these files. Delete the rest.
+      `,
+    ]
+  }
+  if (found.length && pkgJson[configKey]) {
+    return [
+      outdent`
+      package.json contains ${configKey}, but there also exists a config file that serves the same purpose.
+      Config file: ${found.join('')}]
+
+      Either delete the file or remove ${configKey} entry from package.json.
+      `,
+    ]
+  }
+
+  return []
+}
+
+export async function disallowDuplicateEslintConfig(basePath: string, pkgJson: PackageJson) {
+  return disallowDuplicateConfig({
+    basePath,
+    pkgJson,
+    configKey: 'eslint',
+    files: [
+      '.eslintrc',
+      '.eslintrc.js',
+      '.eslintrc.cjs',
+      '.eslintrc.yaml',
+      '.eslintrc.yml',
+      '.eslintrc.json',
+    ],
+  })
+}
+
+export async function disallowDuplicatePrettierConfig(basePath: string, pkgJson: PackageJson) {
+  return disallowDuplicateConfig({
+    basePath,
+    pkgJson,
+    configKey: 'prettier',
+    files: [
+      '.prettierrc',
+      '.prettierrc.json5',
+      '.prettierrc.yaml',
+      '.prettierrc.yml',
+      '.prettierrc.js',
+      '.prettierrc.cjs',
+      '.prettier.config,js',
+      '.prettier.config.cjs',
+      '.prettierrc.toml',
+    ],
+  })
+}

package/src/actions/verify/verify-common.ts

@@ -2,10 +2,10 @@ import log from '../../util/log'
 import {TypedFlags} from 'meow'
 import fs from 'fs'
 import sharedFlags from '../../sharedFlags'
-import {TsConfig} from './types'
 import chalk from 'chalk'
 import outdent from 'outdent'
 import {runCommand} from '../../util/command-parser'
+import {ParsedCommandLine} from 'typescript'
 
 export const readFile = fs.promises.readFile
 const splitLine = `\n----------------------------------------------------------`
@@ -25,6 +25,7 @@ export const verifyPackageConfigDefaults = {
   nodeEngine: true,
   studioConfig: true,
   srcIndex: true,
+  duplicateConfig: true,
 } as const
 
 export type VerifyPackageConfig = Partial<Record<keyof typeof verifyPackageConfigDefaults, boolean>>
@@ -82,10 +83,10 @@ export function createValidator(
   }
 }
 
-export async function runTscMaybe(verifyConfig: VerifyPackageConfig, tsConfig?: TsConfig) {
-  if (tsConfig && verifyConfig.tsc !== false) {
+export async function runTscMaybe(verifyConfig: VerifyPackageConfig, ts?: ParsedCommandLine) {
+  if (ts && verifyConfig.tsc !== false) {
     log.info('All checks ok, running Typescript compiler.')
-    const {code} = await runCommand('tsc --noEmit')
+    const {code} = await runCommand('tsc --build')
     if (code !== 0) {
       throw new Error('Compilation failed. See output above.\n\n' + disableCheckText('tsc'))
     }

package/src/actions/verify-package.ts

@@ -1,6 +1,7 @@
+import {loadConfig as loadPackageConfig} from '@sanity/pkg-utils'
 import {getPackage} from '../npm/package'
 import log from '../util/log'
-import {cliName, urls} from '../constants'
+import {cliName, defaultOutDir, urls} from '../constants'
 import {validateImports} from '../dependencies/import-linter'
 import outdent from 'outdent'
 import {
@@ -9,7 +10,6 @@ import {
   VerifyFlags,
   VerifyPackageConfig,
 } from './verify/verify-common'
-import {readJson5File} from '../util/files'
 import {
   validateBabelConfig,
   validateModule,
@@ -22,28 +22,42 @@ import {
   validateTsConfig,
   validateSanityDependencies,
   validateSrcIndexFile,
+  disallowDuplicateEslintConfig,
+  disallowDuplicatePrettierConfig,
 } from './verify/validations'
-import {PackageJson, TsConfig} from './verify/types'
+import {PackageJson} from './verify/types'
 import chalk from 'chalk'
+import {readTSConfig} from '../util/ts'
 
 export async function verifyPackage({basePath, flags}: {basePath: string; flags: VerifyFlags}) {
   let errors: string[] = []
 
   const packageJson: PackageJson = await getPackage({basePath, validate: false})
   const verifyConfig: VerifyPackageConfig = packageJson.sanityPlugin?.verifyPackage || {}
+  const packageConfig = await loadPackageConfig({cwd: basePath})
+  const outDir = packageConfig?.dist ?? defaultOutDir
+  const tsconfig = packageConfig?.tsconfig ?? 'tsconfig.json'
 
   const validation = createValidator(verifyConfig, flags, errors)
 
-  const tsConfig = await readJson5File<TsConfig>({basePath, filename: 'tsconfig.json'})
+  const ts = await readTSConfig({basePath, filename: tsconfig})
 
   await validation('packageName', async () => validatePackageName(packageJson))
   await validation('pkg-utils', async () => validatePkgUtilsDependency(packageJson))
   await validation('srcIndex', async () => validateSrcIndexFile(basePath))
   await validation('scripts', async () => validateScripts(packageJson))
-  await validation('module', async () => validateModule(packageJson))
+  await validation('module', async () => validateModule(packageJson, {outDir}))
   await validation('nodeEngine', async () => validateNodeEngine(packageJson))
+  await validation('duplicateConfig', async () =>
+    disallowDuplicateEslintConfig(basePath, packageJson)
+  )
+  await validation('duplicateConfig', async () =>
+    disallowDuplicatePrettierConfig(basePath, packageJson)
+  )
 
-  tsConfig && (await validation('tsconfig', async () => validateTsConfig(tsConfig)))
+  if (ts) {
+    await validation('tsconfig', async () => validateTsConfig(ts, {basePath, outDir, tsconfig}))
+  }
 
   await validation('sanityV2Json', async () => validatePluginSanityJson({basePath, packageJson}))
 
@@ -76,7 +90,7 @@ export async function verifyPackage({basePath, flags}: {basePath: string; flags:
     )
   }
 
-  await runTscMaybe(verifyConfig, tsConfig)
+  await runTscMaybe(verifyConfig, ts)
 
   log.success(
     outdent`