@sanity/plugin-kit 0.0.1-studio-v3.1

package/src/cmds/verify-package.ts

@@ -0,0 +1,36 @@
+import path from 'path'
+import meow from 'meow'
+import {verifyPackage} from '../actions/verify-package'
+import {cliName} from '../constants'
+import {verifyFlags} from '../actions/verify/verify-common'
+
+const description = `Verify that a Sanity plugin package is v3 compatible, and print upgrade steps if not.`
+
+const help = `
+Usage
+  $ ${cliName} verify-package [dir] [<args>]
+
+Options
+  --single      Enables fail-fast mode: Will only output the first validation that fails.
+  --silent      Do not print info and warning messages
+  --verbose     Log everything. This option conflicts with --silent
+  --version     Output the version number
+  --help        Output usage information
+
+Each check will describe how they can be individually disabled.
+
+Examples
+  # Verify Sanity plugin package in current directory
+  $ ${cliName} verify-package
+
+  # Verify Sanity plugin package in my-plugin directory in silent mode
+  $ ${cliName} verify-package my-plugin-directory --silent
+`
+
+function run({argv}: {argv: string[]}) {
+  const cli = meow(help, {flags: verifyFlags, argv, description})
+  const basePath = path.resolve(cli.input[0] || process.cwd())
+  return verifyPackage({basePath, flags: cli.flags})
+}
+
+export default run

package/src/cmds/verify-studio.ts

@@ -0,0 +1,36 @@
+import path from 'path'
+import meow from 'meow'
+import {cliName} from '../constants'
+import {verifyFlags} from '../actions/verify/verify-common'
+import {verifyStudio} from '../actions/verify-studio'
+
+const description = `Verify that a Sanity Studio is configured correctly for v3, and print upgrade steps if not.`
+
+const help = `
+Usage
+  $ ${cliName} verify-studio [dir] [<args>]
+
+Options
+  --single      Enables fail-fast mode: Will only output the first validation that fails.
+  --silent      Do not print info and warning messages
+  --verbose     Log everything. This option conflicts with --silent
+  --version     Output the version number
+  --help        Output usage information
+
+Each check will describe how they can be individually disabled.
+
+Examples
+  # Verify Sanity Studio in current directory
+  $ ${cliName} verify-studio
+
+  # Verify Sanity Studio in my-sanity-studio directory in silent mode
+  $ ${cliName} verify-studio my-sanity-studio --silent
+`
+
+function run({argv}: {argv: string[]}) {
+  const cli = meow(help, {flags: verifyFlags, argv, description})
+  const basePath = path.resolve(cli.input[0] || process.cwd())
+  return verifyStudio({basePath, flags: cli.flags})
+}
+
+export default run

package/src/cmds/verify.ts

@@ -0,0 +1,40 @@
+/*
+import path from 'path'
+import meow from 'meow'
+import pkg from '../../package.json'
+import {verify} from '../actions/verify'
+import sharedFlags from '../sharedFlags'
+
+const description = `Verify that a Sanity plugin is ready for publishing`
+
+const help = `
+Usage
+  $ ${pkg.binname} verify [<dir>]
+
+Examples
+  # Verify the plugin in the current directory
+  $ ${pkg.binname} verify
+
+  # Verify the plugin in ~/my-plugin
+  $ ${pkg.binname} verify ~/my-plugin
+
+  # Allow package.json to reference files inside the uncompiled source folder
+  $ ${pkg.binname} verify --allow-source-target
+`
+
+const flags = {
+  ...sharedFlags,
+  allowSourceTarget: {
+    type: 'boolean',
+    default: false,
+  },
+} as const
+
+function run({argv}: {argv: string[]}) {
+  const cli = meow(help, {flags, argv, description})
+  const basePath = path.resolve(cli.input[0] || process.cwd())
+  return verify({basePath, flags: cli.flags})
+}
+
+export default run
+*/

package/src/cmds/version.ts

@@ -0,0 +1,67 @@
+import meow from 'meow'
+import pkg from '../../package.json'
+import log from '../util/log'
+import sharedFlags from '../sharedFlags'
+
+const description = `Show the installed version of ${pkg.name}`
+
+const help = `
+Usage
+  $ ${pkg.binname} version
+
+Options
+  --major  Show only the major version
+  --minor  Show only the minor version
+  --patch  Show only the patch version
+
+Examples
+  $ ${pkg.binname} version
+  ${pkg.name} version ${pkg.version}
+
+  $ ${pkg.binname} version --major
+  ${pkg.version.split('.')[0]}
+`
+
+const flags = {
+  ...sharedFlags,
+
+  major: {
+    type: 'boolean',
+    default: false,
+  },
+
+  minor: {
+    type: 'boolean',
+    default: false,
+  },
+
+  patch: {
+    type: 'boolean',
+    default: false,
+  },
+} as const
+
+function run({argv}: {argv: string[]}) {
+  const cli = meow(help, {flags, argv, description})
+  const versionParts = pkg.version.split('.')
+  const versionNames = ['major', 'minor', 'patch']
+  const versionFlags = versionNames.filter((flagName) => cli.flags[flagName])
+  const versionFlag = versionFlags[0]
+  const numVersionFlags = versionFlags.length
+
+  if (numVersionFlags === 0) {
+    log.msg(`${pkg.name} version ${pkg.version}`)
+    return
+  }
+
+  if (numVersionFlags > 1) {
+    throw new Error(
+      `--major, --minor and --patch are mutually exclusive - only one can be used at a time`
+    )
+  }
+
+  const partIndex = versionNames.indexOf(versionFlag)
+  log.msg(versionParts[partIndex])
+}
+
+export default run

package/src/configs/buildExtensions.ts

@@ -0,0 +1 @@
+export const buildExtensions = ['.js', '.jsx', '.es6', '.es', '.mjs', '.ts', '.tsx']

package/src/configs/default-source.ts

@@ -0,0 +1,68 @@
+import outdent from 'outdent'
+import {PackageJson} from '../actions/verify/types'
+
+export function defaultSourceJs(pkg: PackageJson) {
+  return (
+    outdent`
+  import {createPlugin} from 'sanity'
+
+  /**
+   * ## Usage in sanity.config.js (or .js)
+   *
+   * \`\`\`
+   * import {createConfig} from 'sanity'
+   * import {myPlugin} from '${pkg.name}'
+   *
+   * export const createConfig({
+   *     /...
+   *     plugins: [
+   *         myPlugin({})
+   *     ]
+   * })
+   * \`\`\`
+   */
+  export const myPlugin = createPlugin((config = {}) => {
+    // eslint-disable-next-line no-console
+    console.log(\`hello from ${pkg.name}\`)
+    return {
+      name: '${pkg.name}',
+    }
+  })
+`.trimStart() + '\n'
+  )
+}
+
+export function defaultSourceTs(pkg: PackageJson) {
+  return (
+    outdent`
+  import {createPlugin} from 'sanity'
+
+  interface MyPluginConfig {
+    /* nothing here yet */
+  }
+
+  /**
+   * ## Usage in sanity.config.ts (or .js)
+   *
+   * \`\`\`
+   * import {createConfig} from 'sanity'
+   * import {myPlugin} from '${pkg.name}'
+   *
+   * export const createConfig({
+   *     /...
+   *     plugins: [
+   *         myPlugin()
+   *     ]
+   * })
+   * \`\`\`
+   */
+  export const myPlugin = createPlugin<MyPluginConfig | void>((config = {}) => {
+    // eslint-disable-next-line no-console
+    console.log('hello from ${pkg.name}')
+    return {
+      name: '${pkg.name}',
+    }
+  })
+`.trimStart() + '\n'
+  )
+}

package/src/configs/merged-packages.ts

@@ -0,0 +1,20 @@
+export const mergedPackages = [
+  '@sanity/base',
+  '@sanity/core',
+  '@sanity/cli',
+  '@sanity/types',
+  '@sanity/data-aspects',
+  '@sanity/default-layout',
+  '@sanity/default-login',
+  '@sanity/desk-tool',
+  '@sanity/field',
+  '@sanity/form-builder',
+  '@sanity/initial-value-templates',
+  '@sanity/language-filter',
+  '@sanity/production-preview',
+  '@sanity/react-hooks',
+  '@sanity/resolver',
+  '@sanity/state-router',
+  '@sanity/structure',
+  '@sanity/studio-hints',
+].sort()

package/src/configs/uselessFiles.ts

@@ -0,0 +1,29 @@
+export const uselessFiles = [
+  '.babel.config.js',
+  '.babelrc',
+  '.drone.yml',
+  '.editorconfig',
+  '.eslintignore',
+  '.eslintrc-ts.js',
+  '.eslintrc-ts',
+  '.eslintrc',
+  '.gitignore',
+  '.github',
+  '.nyc_output',
+  '.prettierrc',
+  '.stylelintignore',
+  '.stylelintrc.json',
+  '.stylelintrc',
+  '.travis.yaml',
+  '.travis.yml',
+  'babel.config.js',
+  'coverage',
+  'gulpfile.js',
+  'lcov-report',
+  'lerna.json',
+  'now.json',
+  'vercel.json',
+  'netlify.toml',
+  'postcss.config.js',
+  'tsconfig.json',
+]

package/src/constants.ts

@@ -0,0 +1,13 @@
+export const cliName = '@sanity/plugin-kit'
+
+export const urls = {
+  refDocs: 'https://beta.sanity.io/docs/reference',
+  migrationGuideStudio: 'https://beta.sanity.io/docs/platform/v2-to-v3',
+  migrationGuidePlugin: 'https://beta.sanity.io/docs/platform/v2-to-v3/plugins',
+  pluginReadme: 'https://github.com/sanity-io/plugin-kit',
+  incompatiblePlugin: 'https://github.com/sanity-io/incompatible-plugin',
+  sanityExchange: 'https://www.sanity.io/exchange',
+  linterPackage: 'https://github.com/sanity-io/eslint-config-no-v2-imports',
+}
+
+export const incompatiblePluginPackage = '@sanity/incompatible-plugin'

package/src/dependencies/find.ts

@@ -0,0 +1,193 @@
+/*
+import fs from 'fs'
+import path from 'path'
+import postcss from 'postcss'
+import {discoverPathSync} from 'discover-path'
+import traverse from '@babel/traverse'
+import {parseSync} from '@babel/core'
+
+export default {findDependencies}
+
+const partReg = /^(all:part|part|config|sanity):/
+const importReg = /^(?:"([^"]+)"|'([^']+)')$/
+const composesReg = /^(.+?)\s+from\s+(?:"([^"]+)"|'([^']+)'|(global))$/
+
+function findDependenciesFromFiles(files, seen = new Set<string>()): string[] {
+  const dependencies = new Set<string>()
+  files.forEach((file) => findDependencies(file, seen).forEach((dep) => dependencies.add(dep)))
+  return Array.from(dependencies)
+}
+
+function findDependenciesInCss(css, entryPath, processDependency) {
+  let ast
+  try {
+    ast = postcss.parse(css)
+  } catch (err: any) {
+    throw new Error(`Error parsing file (${entryPath}): ${err.message}`)
+  }
+
+  ast.walkDecls(/^composes/, (decl) => {
+    const matches = decl.value.match(composesReg)
+    if (!matches) {
+      return
+    }
+
+    const [, , doubleQuotePath, singleQuotePath] = matches
+    const importPath = doubleQuotePath || singleQuotePath
+    if (importPath) {
+      processDependency(importPath)
+    }
+  })
+
+  ast.walkAtRules('import', (rule) => {
+    const matches = rule.params.match(importReg)
+    if (!matches) {
+      return
+    }
+
+    const [, doubleQuotePath, singleQuotePath] = matches
+    const importPath = doubleQuotePath || singleQuotePath
+    if (importPath) {
+      processDependency(importPath)
+    }
+  })
+}
+
+interface Traverse {
+  node: {callee: {name: string}; source: {value: string}; arguments: {value: string}[]}
+}
+
+function findDependenciesInJs(
+  js: string,
+  entryPath: string,
+  processDependency: (val: string) => void
+) {
+  let ast
+  try {
+    ast = parseSync(js, {babelrc: false})
+  } catch (err: any) {
+    throw new Error(`Error parsing file (${entryPath}): ${err.message}`)
+  }
+
+  traverse(ast, {
+    ImportDeclaration({node}: Traverse) {
+      processDependency(node.source.value)
+    },
+
+    CallExpression({node}: Traverse) {
+      if (node.callee.name === 'require') {
+        processDependency(node.arguments[0].value)
+      }
+    },
+  })
+}
+
+export function findDependencies(entryPath: string, seen = new Set<string>()): string[] {
+  if (Array.isArray(entryPath)) {
+    return findDependenciesFromFiles(entryPath, seen)
+  }
+
+  seen.add(entryPath)
+
+  let content
+  try {
+    content = fs.readFileSync(entryPath, 'utf8')
+  } catch (err: any) {
+    throw new Error(`Error reading file (${entryPath}): ${err.message}`)
+  }
+
+  const dir = path.dirname(entryPath)
+  const dependencies = new Set<string>()
+
+  if (entryPath.endsWith('.css')) {
+    findDependenciesInCss(content, entryPath, processDependency)
+  } else {
+    findDependenciesInJs(content, entryPath, processDependency)
+  }
+
+  function processDependency(requirePath: string) {
+    if (typeof requirePath !== 'string') {
+      return
+    }
+
+    // Don't allow absolute requires
+    if (path.isAbsolute(requirePath)) {
+      throw new Error(
+        `Absolute paths cannot be used in require/import statements: ${entryPath} references path "${requirePath}"`
+      )
+    }
+
+    const isRelative = requirePath.startsWith('.')
+    const depPath = isRelative && resolveDependency(dir, requirePath, entryPath)
+
+    if (
+      depPath &&
+      ['.js', '.css', '.esm', '.mjs', '.jsx'].includes(path.extname(depPath)) &&
+      !seen.has(depPath)
+    ) {
+      // For relative javascript/css requires, recurse to find all depdendencies
+      findDependencies(depPath, seen).forEach((dep) => dependencies.add(dep))
+      return
+    }
+
+    if (isRelative) {
+      // Not JS? Skip it
+      return
+    }
+
+    // For parts, we want the entire path, as we might want to validate them
+    if (partReg.test(requirePath)) {
+      dependencies.add(requirePath)
+      return
+    }
+
+    // For modules, resolve the base module name, then add them
+    // eg: `codemirror/mode/javascript` => `codemirror`
+    // eg: `@sanity/base/foo/bar.js`    => `@sanity/base`
+    const dep = requirePath.startsWith('@')
+      ? requirePath.replace(/^(@[^/]+\/[^/]+)(\/.*|$)/, '$1')
+      : requirePath.replace(/^([^/]+)(\/.*|$)/, '$1')
+
+    dependencies.add(dep)
+  }
+
+  return Array.from(dependencies)
+}
+
+function resolveDependency(fromDir: string, toPath: string, entryPath: string) {
+  const [querylessPath] = toPath.split('?', 1)
+
+  let depPath
+  try {
+    depPath = require.resolve(path.resolve(fromDir, querylessPath))
+  } catch (err) {
+    throw new Error(`Unable to resolve "${querylessPath}" from ${entryPath}`)
+  }
+
+  let actualPath
+  try {
+    actualPath = discoverPathSync(depPath)
+  } catch (err: any) {
+    const paths = (err.suggestions || []).map((suggested: string) =>
+      getDidYouMeanPath(querylessPath, suggested)
+    )
+    const didYouMean = paths ? `Did you mean:\n${paths.join('\n- ')}` : ''
+    throw new Error(`Unable to resolve "${querylessPath}" from ${entryPath}. ${didYouMean}`)
+  }
+
+  if (actualPath !== depPath) {
+    const didYouMean = getDidYouMeanPath(querylessPath, actualPath)
+    throw new Error(
+      `Unable to resolve "${querylessPath} from ${entryPath}. Did you mean "${didYouMean}"?`
+    )
+  }
+
+  return actualPath
+}
+
+function getDidYouMeanPath(wanted: string, suggested: string) {
+  const end = wanted.replace(/[./]+/, '')
+  const start = wanted.slice(0, 0 - end.length)
+  return `${start}${suggested.slice(0 - end.length)}`
+}
+*/

package/src/dependencies/import-linter.ts

@@ -0,0 +1,103 @@
+import log from '../util/log'
+import {mergedPackages} from '../configs/merged-packages'
+import {urls} from '../constants'
+import {ESLint} from 'eslint'
+import path from 'path'
+import outdent from 'outdent'
+
+const removedImportSuffix = `imports where removed in Sanity v3. Please refer to the migration guide: ${urls.migrationGuideStudio}, or new API-reference docs: ${urls.refDocs}`
+
+export async function validateImports({basePath}: {basePath: string}): Promise<string[]> {
+  log.debug('Running ESLint with Sanity Studio import hints...')
+  const eslint = new ESLint({
+    cwd: basePath,
+    overrideConfig: {
+      ignorePatterns: ['node_modules'],
+      rules: {
+        'no-restricted-imports': [
+          'error',
+          {
+            patterns: [
+              ...mergedPackages.map((packageName) => ({
+                group: [`${packageName}*`],
+                message: `Use sanity instead of ${packageName}.`,
+              })),
+              {
+                group: ['config:*'],
+                message: `config: imports are no longer supported. Please see the new plugin API for alternatives: ${urls.migrationGuideStudio}`,
+              },
+              {
+                group: ['part:*'],
+                message: `part: ${removedImportSuffix}`,
+              },
+              {
+                group: ['all:part:*'],
+                message: `all:part: ${removedImportSuffix}`,
+              },
+              {
+                group: ['sanity:*'],
+                message: `sanity: ${removedImportSuffix}`,
+              },
+            ],
+          },
+        ],
+      },
+    },
+  })
+
+  try {
+    const results = await eslint.lintFiles([path.join(basePath, '**/*.{js,jsx,ts,tsx}')])
+
+    const onlyImportErrors = results
+      .map((r) => {
+        const limitErrors = r.messages.filter((m) => m.ruleId === 'no-restricted-imports')
+        return {
+          ...r,
+          messages: limitErrors,
+          errorCount: limitErrors.length,
+        }
+      })
+      .filter((r) => r.errorCount)
+
+    if (onlyImportErrors.length) {
+      const formatter = await eslint.loadFormatter('stylish')
+      const resultText = await formatter.format(onlyImportErrors)
+
+      const addtionalInfo = outdent`
+        ESLint detected Studio V2 imports that are no longer available.
+        It is recommended configure @sanity/eslint-config-no-v2-imports for ESLint.
+
+        Run:
+        npm install --save-dev @sanity/eslint-config-no-v2-imports
+
+        In .eslintrc add:
+        "extends": ["@sanity/no-v2-imports"]
+
+        This way, V2-imports can be identified directly in the IDE, or using eslint CLI.
+        For more, see ${urls.linterPackage}
+
+        If the plugin package does not use eslint, disable this check.
+    `
+      return [resultText + addtionalInfo]
+    }
+  } catch (e) {
+    log.error('Failed to run eslint check', e)
+    return [
+      outdent`
+        Failed to run ESLint. Is ESLint configured?
+        It is recommended to install eslint-config-sanity and add 'sanity/upgrade-v2' to your eslint-extends config.
+
+        Run:
+        npm install --save-dev eslint-config-sanity
+
+        In .eslintrc add:
+        extends: ['sanity/upgrade-v2']
+
+        This way, V2-imports can be identified directly in the IDE, or using eslint CLI.
+        If the package does not use eslint, disable this check.
+    `,
+    ]
+  }
+
+  return []
+}

package/src/index.ts

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

package/src/npm/manager.ts

@@ -0,0 +1,44 @@
+import execa from 'execa'
+import {prompt} from '../util/prompt'
+
+export function npmIsAvailable() {
+  return execa('npm', ['-v'])
+    .then(() => true)
+    .catch(() => false)
+}
+
+export function yarnIsAvailable() {
+  return execa('yarn', ['-v'])
+    .then(() => true)
+    .catch(() => false)
+}
+
+export function pnpmAvailable() {
+  return execa('pnpm', ['-v'])
+    .then(() => true)
+    .catch(() => false)
+}
+
+export async function promptForPackageManager() {
+  const [npm, yarn, pnpm] = await Promise.all([
+    npmIsAvailable(),
+    yarnIsAvailable(),
+    pnpmAvailable(),
+  ])
+
+  const choices = [npm && 'npm', yarn && 'yarn', pnpm && 'pnpm'].filter(Boolean)
+  if (choices.length < 2) {
+    return choices[0] || 'npm'
+  }
+
+  return prompt('Which package manager do you prefer?', {
+    choices: choices.map((value) => ({value, name: value})),
+    default: choices[0],
+  })
+}
+
+export async function installDependencies(pm: string, {cwd}: {cwd?: string}) {
+  const proc = execa(pm, ['install'], {cwd, stdio: 'inherit'})
+  const {exitCode} = await proc
+  return exitCode <= 0
+}