@sanity/plugin-kit 2.2.0 → 3.1.0

package/src/actions/verify-studio.ts

@@ -1,6 +1,6 @@
+import {loadConfig as loadPackageConfig} from '@sanity/pkg-utils'
 import {getPackage} from '../npm/package'
 import log from '../util/log'
-import {readJson5File} from '../util/files'
 import {cliName, urls} from '../constants'
 import {validateImports} from '../dependencies/import-linter'
 import outdent from 'outdent'
@@ -11,18 +11,21 @@ import {
   VerifyFlags,
   VerifyPackageConfig,
 } from './verify/verify-common'
-import {PackageJson, TsConfig} from './verify/types'
+import {PackageJson} from './verify/types'
 import {validateSanityDependencies, validateStudioConfig} from './verify/validations'
+import {readTSConfig} from '../util/ts'
 
 export async function verifyStudio({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 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('studioConfig', async () => validateStudioConfig({basePath}))
   await validation('dependencies', async () => validateSanityDependencies(packageJson))
@@ -45,7 +48,7 @@ export async function verifyStudio({basePath, flags}: {basePath: string; flags:
     )
   }
 
-  await runTscMaybe(verifyConfig, tsConfig)
+  await runTscMaybe(verifyConfig, ts)
 
   log.success(
     outdent`

package/src/cli.ts

@@ -1,5 +1,3 @@
-#!/usr/bin/env node
-'use strict'
 import meow from 'meow'
 import log from './util/log'
 import commands from './cmds'
@@ -64,7 +62,7 @@ export async function cliEntry(argv = process.argv, autoExit = true) {
   }
 
   // Lazy-load command
-  const cmd = require(commands[commandName as keyof typeof commands]).default
+  const cmd = commands[commandName as keyof typeof commands]
 
   try {
     log.setVerbosity(cli.flags)

package/src/cmds/index.ts

@@ -1,8 +1,20 @@
 export default {
-  init: require.resolve('./init'),
-  inject: require.resolve('./inject'),
-  'link-watch': require.resolve('./link-watch'),
-  'verify-package': require.resolve('./verify-package'),
-  'verify-studio': require.resolve('./verify-studio'),
-  version: require.resolve('./version'),
+  init: async (options: {argv: string[]}) => {
+    await (await import('./init')).default(options)
+  },
+  inject: async (options: {argv: string[]}) => {
+    await (await import('./inject')).default(options)
+  },
+  'link-watch': async (options: {argv: string[]}) => {
+    await (await import('./link-watch')).default(options)
+  },
+  'verify-package': async (options: {argv: string[]}) => {
+    await (await import('./verify-package')).default(options)
+  },
+  'verify-studio': async (options: {argv: string[]}) => {
+    await (await import('./verify-studio')).default(options)
+  },
+  version: async (options: {argv: string[]}) => {
+    await (await import('./version')).default(options)
+  },
 }

package/src/cmds/inject.ts

@@ -1,10 +1,11 @@
+import {loadConfig as loadPackageConfig} from '@sanity/pkg-utils'
 import path from 'path'
 import meow from 'meow'
 import log from '../util/log'
 import {inject} from '../actions/inject'
 import {findStudioV3Config} from '../sanity/manifest'
 import {initFlags} from '../actions/init'
-import {cliName} from '../constants'
+import {cliName, defaultOutDir} from '../constants'
 import {presetHelpList} from '../presets/presets'
 
 const description = `Inject configuration into a Sanity plugin`
@@ -51,6 +52,8 @@ Examples
 async function run({argv}: {argv: string[]}) {
   const cli = meow(help, {flags: initFlags, argv, description})
   const basePath = path.resolve(cli.input[0] || process.cwd())
+  const packageConfig = await loadPackageConfig({cwd: basePath})
+  const outDir = packageConfig?.dist ?? defaultOutDir
 
   const {v3ConfigFile} = await findStudioV3Config(basePath)
   if (v3ConfigFile) {
@@ -60,7 +63,7 @@ async function run({argv}: {argv: string[]}) {
   }
   log.info('Inject config into plugin in "%s"', basePath)
 
-  await inject({basePath, flags: cli.flags, validate: false})
+  await inject({basePath, outDir, flags: cli.flags, validate: false})
   log.info('Done!')
 }
 

package/src/cmds/link-watch.ts

@@ -22,7 +22,6 @@ To override the default watch command configuration, provide an override in pack
   "sanityPlugin": {
     "watchCommand": "microbundle watch --format modern,esm,cjs --jsx React.createElement --jsxImportSource react --css inline",
     "linkWatch": {
-      "folder": "lib",
       "command": "npm run watch",
       "extensions": "js,png,svg,gif,jpeg,css"
     }

package/src/configs/default-source.ts

@@ -7,17 +7,15 @@ export function defaultSourceJs(pkg: PackageJson) {
   import {definePlugin} from 'sanity'
 
   /**
-   * ## Usage in sanity.config.js (or .js)
+   * Usage in sanity.config.js (or .ts)
    *
-   * \`\`\`
+   * \`\`\`js
    * import {defineConfig} from 'sanity'
    * import {myPlugin} from '${pkg.name}'
    *
-   * export const defineConfig({
-   *     //...
-   *     plugins: [
-   *         myPlugin({})
-   *     ]
+   * export default defineConfig({
+   *   // ...
+   *   plugins: [myPlugin({})],
    * })
    * \`\`\`
    */
@@ -42,17 +40,15 @@ export function defaultSourceTs(pkg: PackageJson) {
   }
 
   /**
-   * ## Usage in sanity.config.ts (or .js)
+   * Usage in \`sanity.config.ts\` (or .js)
    *
-   * \`\`\`
+   * \`\`\`ts
    * import {defineConfig} from 'sanity'
    * import {myPlugin} from '${pkg.name}'
    *
-   * export const defineConfig({
-   *     //...
-   *     plugins: [
-   *         myPlugin()
-   *     ]
+   * export default defineConfig({
+   *   // ...
+   *   plugins: [myPlugin()],
    * })
    * \`\`\`
    */

package/src/configs/eslint.ts

@@ -0,0 +1,51 @@
+import {InjectTemplate} from '../actions/inject'
+import {InitFlags} from '../actions/init'
+
+export function eslintrcTemplate(options: {flags: InitFlags}): InjectTemplate {
+  const {flags} = options
+
+  const eslintConfig = {
+    root: true,
+    env: {
+      node: true,
+      browser: true,
+    },
+    extends: [
+      'sanity',
+      flags.typescript && 'sanity/typescript',
+      'sanity/react',
+      'plugin:react-hooks/recommended',
+      flags.prettier && 'plugin:prettier/recommended',
+      'plugin:react/jsx-runtime',
+    ].filter(Boolean),
+  }
+
+  return {
+    type: 'template',
+    force: flags.force,
+    to: '.eslintrc',
+    value: JSON.stringify(eslintConfig, null, 2),
+  }
+}
+
+export function eslintignoreTemplate(options: {flags: InitFlags; outDir: string}): InjectTemplate {
+  const {flags, outDir} = options
+
+  const patterns = [
+    '.eslintrc.js',
+    'commitlint.config.js',
+    outDir,
+    'lint-staged.config.js',
+    flags.typescript ? 'package.config.ts' : 'package.config.js',
+    flags.typescript ? '*.js' : '',
+  ].filter(Boolean)
+
+  patterns.sort()
+
+  return {
+    type: 'template',
+    force: flags.force,
+    to: '.eslintignore',
+    value: patterns.join('\n'),
+  }
+}

package/src/configs/forced-package-versions.ts

@@ -1,12 +1,13 @@
-const sanityVersion = '^3.0.0'
+export const forcedPackageVersions = {}
 
-export const forcedPackageVersions = {
+export const forcedDevPackageVersions = forcedPackageVersions
+
+export const forcedPeerPackageVersions = {
   react: '^18',
-  '@types/react': '^18',
   'react-dom': '^18',
+  'react-is': '^18',
+  '@types/react': '^18',
   '@types/react-dom': '^18',
-  sanity: sanityVersion,
-  '@sanity/ui': '^1.0.0',
+  sanity: '^3',
+  'styled-components': '^5.2',
 }
-
-export const forcedDevPackageVersions = forcedPackageVersions

package/src/configs/git.ts

@@ -0,0 +1,68 @@
+import {outdent} from 'outdent'
+import {InjectTemplate} from '../actions/inject'
+
+export function gitignoreTemplate(): InjectTemplate {
+  return {
+    type: 'template',
+    to: '.gitignore',
+    value: outdent`
+      # Logs
+      logs
+      *.log
+      npm-debug.log*
+
+      # Runtime data
+      pids
+      *.pid
+      *.seed
+
+      # Directory for instrumented libs generated by jscoverage/JSCover
+      lib-cov
+
+      # Coverage directory used by tools like istanbul
+      coverage
+
+      # nyc test coverage
+      .nyc_output
+
+      # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+      .grunt
+
+      # node-waf configuration
+      .lock-wscript
+
+      # Compiled binary addons (http://nodejs.org/api/addons.html)
+      build/Release
+
+      # Dependency directories
+      node_modules
+      jspm_packages
+
+      # Optional npm cache directory
+      .npm
+
+      # Optional REPL history
+      .node_repl_history
+
+      # macOS finder cache file
+      .DS_Store
+
+      # VS Code settings
+      .vscode
+
+      # IntelliJ
+      .idea
+      *.iml
+
+      # Cache
+      .cache
+
+      # Yalc
+      .yalc
+      yalc.lock
+
+      # npm package zips
+      *.tgz
+    `,
+  }
+}

package/src/configs/pkg-config.ts

@@ -0,0 +1,31 @@
+import {outdent} from 'outdent'
+import {InjectTemplate} from '../actions/inject'
+import {InitFlags} from '../actions/init'
+
+export function pkgConfigTemplate(options: {outDir: string; flags: InitFlags}): InjectTemplate {
+  const {flags, outDir} = options
+
+  return {
+    type: 'template',
+    force: flags.force,
+    to: flags.typescript ? 'package.config.ts' : 'package.config.js',
+    value: outdent`
+      import {defineConfig} from '@sanity/pkg-utils'
+
+      export default defineConfig({
+        legacyExports: true,
+        tsconfig: 'tsconfig.${outDir}.json',
+
+        // Remove this block to enable strict export validation
+        extract: {
+          rules: {
+            'ae-forgotten-export': 'off',
+            'ae-incompatible-release-tags': 'off',
+            'ae-internal-missing-underscore': 'off',
+            'ae-missing-release-tag': 'off',
+          },
+        },
+      })
+    `,
+  }
+}

package/src/configs/prettier.ts

@@ -0,0 +1,11 @@
+import {InjectTemplate} from '../actions/inject'
+
+export function prettierignoreTemplate(options: {outDir: string}): InjectTemplate {
+  const {outDir} = options
+
+  return {
+    type: 'template',
+    to: '.prettierignore',
+    value: [outDir, 'pnpm-lock.yaml', 'yarn.lock', 'package-lock.json'].join('\n'),
+  }
+}

package/src/configs/tsconfig.ts

@@ -0,0 +1,79 @@
+import {outdent} from 'outdent'
+import {InjectTemplate} from '../actions/inject'
+import {InitFlags} from '../actions/init'
+
+export function tsconfigTemplate(options: {flags: InitFlags}): InjectTemplate {
+  const {flags} = options
+
+  return {
+    type: 'template',
+    force: flags.force,
+    to: 'tsconfig.json',
+    value: outdent`
+      {
+        "extends": "./tsconfig.settings",
+        "include": ["./src", "./package.config.ts"],
+        "compilerOptions": {
+          "rootDir": ".",
+          "jsx": "react-jsx",
+          "noEmit": true
+        }
+      }
+    `,
+  }
+}
+
+export function tsconfigTemplateDist(options: {outDir: string; flags: InitFlags}): InjectTemplate {
+  const {flags, outDir} = options
+
+  return {
+    type: 'template',
+    force: flags.force,
+    to: `tsconfig.${outDir}.json`,
+    value: outdent`
+      {
+        "extends": "./tsconfig.settings",
+        "include": ["./src"],
+        "exclude": [
+          "./src/**/__fixtures__",
+          "./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
+
+  return {
+    type: 'template',
+    force: flags.force,
+    to: `tsconfig.settings.json`,
+    value: outdent`
+      {
+        "compilerOptions": {
+          "moduleResolution": "node",
+          "target": "esnext",
+          "module": "esnext",
+          "lib": ["DOM", "DOM.Iterable", "ESNext"],
+          "esModuleInterop": true,
+          "strict": true,
+          "downlevelIteration": true,
+          "declaration": true,
+          "allowSyntheticDefaultImports": true,
+          "skipLibCheck": true,
+          "isolatedModules": true
+        }
+      }
+    `,
+  }
+}

package/src/configs/uselessFiles.ts

@@ -10,7 +10,7 @@ export const uselessFiles = [
   '.gitignore',
   '.github',
   '.nyc_output',
-  '.prettierrc.json',
+  '.prettierrc',
   '.stylelintignore',
   '.stylelintrc.json',
   '.stylelintrc',

package/src/constants.ts

@@ -11,3 +11,5 @@ export const urls = {
 }
 
 export const incompatiblePluginPackage = '@sanity/incompatible-plugin'
+
+export const defaultOutDir = 'dist'

package/src/index.ts

@@ -1,4 +1 @@
-#!/usr/bin/env node
-import {cliEntry} from './cli'
-
-cliEntry()
+export {}

package/src/npm/package.ts

@@ -13,10 +13,27 @@ import {cliName, incompatiblePluginPackage} from '../constants'
 import {InjectOptions, PackageData} from '../actions/inject'
 import {expectedScripts} from '../actions/verify/validations'
 import {PackageJson} from '../actions/verify/types'
-import {forcedDevPackageVersions, forcedPackageVersions} from '../configs/forced-package-versions'
+import {
+  forcedDevPackageVersions,
+  forcedPackageVersions,
+  forcedPeerPackageVersions,
+} from '../configs/forced-package-versions'
 const defaultDependencies = [incompatiblePluginPackage]
 
-const defaultDevDependencies = ['rimraf', 'react', 'sanity']
+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)
@@ -137,7 +154,7 @@ async function validatePaths(manifest: PackageJson, options: ManifestOptions) {
     }
 
     // We don't want to reference `./src/MyComponent.js` containing a bunch of JSX and whatnot,
-    // instead we want to target `./lib/MyComponent.js` which is the location it'll be compiled to
+    // instead we want to target `./dist/MyComponent.js` which is the location it'll be compiled to
     if (!options?.flags?.allowSourceTarget && paths && withinSourceDir(manifestValue)) {
       throw new Error(
         `Invalid package.json: "${key}" points to file within source (uncompiled) directory. Use --allow-source-target if you really want to do this.`
@@ -188,7 +205,12 @@ function validateLockFiles(options: {basePath: string}) {
 
 export async function writePackageJson(data: PackageData, options: InjectOptions) {
   const {user, pluginName, license, description, pkg: prevPkg, gitOrigin} = data
-  const {peerDependencies: addPeers, dependencies: addDeps, devDependencies: addDevDeps} = options
+  const {
+    outDir,
+    peerDependencies: addPeers,
+    dependencies: addDeps,
+    devDependencies: addDevDeps,
+  } = options
   const {flags} = options
   const prev = prevPkg || {}
 
@@ -200,7 +222,7 @@ export async function writePackageJson(data: PackageData, options: InjectOptions
 
   if (useTypescript) {
     log.debug('Using TypeScript. Adding to dev dependencies.')
-    newDevDependencies.push('typescript')
+    newDevDependencies.push('@types/react', 'typescript')
   }
 
   if (usePrettier) {
@@ -228,11 +250,14 @@ export async function writePackageJson(data: PackageData, options: InjectOptions
   }
 
   log.debug('Resolving latest versions for %s', newDevDependencies.join(', '))
-  const dependencies = forceDependencyVersions({
-    ...(prev.dependencies || {}),
-    ...(addDeps || {}),
-    ...(await resolveLatestVersions(defaultDependencies)),
-  })
+  const dependencies = forceDependencyVersions(
+    {
+      ...(prev.dependencies || {}),
+      ...(addDeps || {}),
+      ...(await resolveLatestVersions(defaultDependencies)),
+    },
+    forcedPackageVersions
+  )
   const devDependencies = forceDependencyVersions(
     {
       ...(addDevDeps || {}),
@@ -241,14 +266,22 @@ export async function writePackageJson(data: PackageData, options: InjectOptions
     },
     forcedDevPackageVersions
   )
-  const peerDependencies = forceDependencyVersions({
-    ...(prev.peerDependencies || {}),
-    ...(addPeers || {}),
-    ...(await resolveLatestVersions(defaultPeerDependencies)),
-  })
+  const peerDependencies = forceDependencyVersions(
+    {
+      ...(prev.peerDependencies || {}),
+      ...(addPeers || {}),
+      ...(await resolveLatestVersions(defaultPeerDependencies)),
+    },
+    forcedPeerPackageVersions
+  )
 
   const source = flags.typescript ? './src/index.ts' : './src/index.js'
 
+  const files = [outDir, 'sanity.json', 'src', 'v2-incompatible.js']
+
+  // sort alphabetically for scanability
+  files.sort()
+
   // order should be compatible with prettier-plugin-packagejson
   const forcedOrder = {
     name: pluginName,
@@ -261,19 +294,19 @@ export async function writePackageJson(data: PackageData, options: InjectOptions
     author: user?.email ? `${user.name} <${user.email}>` : user?.name,
     exports: {
       '.': {
-        ...(flags.typescript ? {types: './lib/src/index.d.ts'} : {}),
+        ...(flags.typescript ? {types: `./${outDir}/index.d.ts`} : {}),
         source,
-        import: './lib/index.esm.js',
-        require: './lib/index.js',
-        default: './lib/index.esm.js',
+        import: `./${outDir}/index.esm.js`,
+        require: `./${outDir}/index.js`,
+        default: `./${outDir}/index.esm.js`,
       },
       './package.json': './package.json',
     },
-    main: './lib/index.js',
-    module: './lib/index.esm.js',
+    main: `./${outDir}/index.js`,
+    module: `./${outDir}/index.esm.js`,
     source,
-    ...(flags.typescript ? {types: './lib/src/index.d.ts'} : {}),
-    files: ['src', 'lib', 'v2-incompatible.js', 'sanity.json'],
+    ...(flags.typescript ? {types: `./${outDir}/index.d.ts`} : {}),
+    files,
     scripts: {...prev.scripts},
     dependencies: sortKeys(dependencies),
     devDependencies: sortKeys(devDependencies),
@@ -361,13 +394,15 @@ export async function writePackageJsonDirect(manifest: PackageJson, {basePath}:
 }
 
 export async function addBuildScripts(manifest: PackageJson, options: InjectOptions) {
+  const {outDir} = options
+
   if (!options.flags.scripts) {
     return false
   }
   return addPackageJsonScripts(manifest, options, (scripts) => {
-    scripts.prebuild = addScript('npm run clean && ' + expectedScripts.prebuild, scripts.prebuild)
     scripts.build = addScript(expectedScripts.build, scripts.build)
-    scripts.clean = addScript(`rimraf lib`, scripts.clean)
+    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)
     scripts.prepublishOnly = addScript(expectedScripts.prepublishOnly, scripts.prepublishOnly)
@@ -386,7 +421,8 @@ export function sortKeys<T extends Record<string, unknown>>(unordered: T): T {
     }, {} as T)
 }
 
-function forceDependencyVersions(
+/** @internal */
+export function forceDependencyVersions(
   deps: Record<string, string>,
   versions = forcedPackageVersions
 ): Record<string, string> {

package/src/presets/presets.ts

@@ -1,6 +1,7 @@
 import {InjectOptions} from '../actions/inject'
 import {semverWorkflowPreset} from './semver-workflow'
 import {renovatePreset} from './renovatebot'
+import {ui} from './ui'
 import {uiWorkshop} from './ui-workshop'
 
 export interface Preset {
@@ -9,7 +10,7 @@ export interface Preset {
   apply: (options: InjectOptions) => Promise<void>
 }
 
-const presets: Preset[] = [semverWorkflowPreset, renovatePreset, uiWorkshop]
+const presets: Preset[] = [semverWorkflowPreset, renovatePreset, ui, uiWorkshop]
 const presetNames = presets.map((p) => p?.name)
 
 export function presetHelpList(padStart: number) {

package/src/presets/renovatebot.ts

@@ -8,5 +8,14 @@ export const renovatePreset: Preset = {
 }
 
 async function applyPreset(options: InjectOptions) {
-  await writeAssets([{from: ['renovatebot', 'renovate.json'], to: 'renovate.json'}], options)
+  await writeAssets(
+    [
+      {
+        type: 'copy',
+        from: ['renovatebot', 'renovate.json'],
+        to: 'renovate.json',
+      },
+    ],
+    options
+  )
 }