@sanity/plugin-kit 2.2.0 → 3.0.0

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/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
+  )
 }

package/src/presets/semver-workflow.ts

@@ -1,4 +1,4 @@
-import {FromTo, InjectOptions, writeAssets} from '../actions/inject'
+import {Injectable, InjectOptions, writeAssets} from '../actions/inject'
 import {resolveLatestVersions} from '../npm/resolveLatestVersions'
 import {Preset} from './presets'
 import {
@@ -148,19 +148,31 @@ function closeEnough(a: string, b: string) {
   return isCloseEnough
 }
 
-function semverWorkflowFiles(): FromTo[] {
-  return [
-    {from: ['.github', 'workflows', 'main.yml'], to: ['.github', 'workflows', 'main.yml']},
-    {from: ['.husky', 'commit-msg'], to: ['.husky', 'commit-msg']},
-    {from: ['.husky', 'pre-commit'], to: ['.husky', 'pre-commit']},
-    {from: ['.releaserc.json'], to: '.releaserc.json'},
-    {from: ['npmrc'], to: '.npmrc'},
-    {from: ['commitlint.template.js'], to: 'commitlint.config.js'},
-    {from: ['lint-staged.template.js'], to: 'lint-staged.config.js'},
-  ].map((fromTo) => ({
-    ...fromTo,
-    from: ['semver-workflow', ...fromTo.from],
-  }))
+function semverWorkflowFiles(): Injectable[] {
+  const base: Injectable[] = [
+    {
+      type: 'copy',
+      from: ['.github', 'workflows', 'main.yml'],
+      to: ['.github', 'workflows', 'main.yml'],
+    },
+    {type: 'copy', from: ['.husky', 'commit-msg'], to: ['.husky', 'commit-msg']},
+    {type: 'copy', from: ['.husky', 'pre-commit'], to: ['.husky', 'pre-commit']},
+    {type: 'copy', from: ['.releaserc.json'], to: '.releaserc.json'},
+    {type: 'copy', from: ['npmrc'], to: '.npmrc'},
+    {type: 'copy', from: ['commitlint.template.js'], to: 'commitlint.config.js'},
+    {type: 'copy', from: ['lint-staged.template.js'], to: 'lint-staged.config.js'},
+  ]
+
+  return base.map((fromTo) => {
+    if (fromTo.type === 'copy') {
+      return {
+        ...fromTo,
+        from: ['semver-workflow', ...fromTo.from],
+      }
+    }
+
+    return fromTo
+  })
 }
 
 async function semverWorkflowDependencies(): Promise<Record<string, string>> {

package/src/presets/ui-workshop.ts

@@ -1,5 +1,5 @@
 import {Preset} from './presets'
-import {FromTo, InjectOptions, writeAssets} from '../actions/inject'
+import {Injectable, InjectOptions, writeAssets} from '../actions/inject'
 import {getPackage, sortKeys, writePackageJsonDirect} from '../npm/package'
 import log from '../util/log'
 import chalk from 'chalk'
@@ -32,16 +32,32 @@ async function applyPreset(options: InjectOptions) {
   )
 }
 
-function files(): FromTo[] {
-  return [
-    {from: ['workshop.config.ts'], to: ['workshop.config.ts']},
-    {from: ['src', 'CustomField.tsx'], to: ['src', 'CustomField.tsx']},
-    {from: ['src', '__workshop__', 'index.tsx'], to: ['src', '__workshop__', 'index.tsx']},
-    {from: ['src', '__workshop__', 'props.tsx'], to: ['src', '__workshop__', 'props.tsx']},
-  ].map((fromTo) => ({
-    ...fromTo,
-    from: ['ui-workshop', ...fromTo.from],
-  }))
+function files(): Injectable[] {
+  const base: Injectable[] = [
+    {type: 'copy', from: ['workshop.config.ts'], to: ['workshop.config.ts']},
+    {type: 'copy', from: ['src', 'CustomField.tsx'], to: ['src', 'CustomField.tsx']},
+    {
+      type: 'copy',
+      from: ['src', '__workshop__', 'index.tsx'],
+      to: ['src', '__workshop__', 'index.tsx'],
+    },
+    {
+      type: 'copy',
+      from: ['src', '__workshop__', 'props.tsx'],
+      to: ['src', '__workshop__', 'props.tsx'],
+    },
+  ]
+
+  return base.map((fromTo) => {
+    if (fromTo.type === 'copy') {
+      return {
+        ...fromTo,
+        from: ['ui-workshop', ...fromTo.from],
+      }
+    }
+
+    return fromTo
+  })
 }
 
 async function updateGitIgnore(options: InjectOptions) {
@@ -76,6 +92,6 @@ async function devDependencies(): Promise<Record<string, string>> {
     '@sanity/ui',
     'react',
     'react-dom',
-    'styled-component',
+    'styled-components',
   ])
 }