@sanity/cli 3.67.2-corel.454 → 3.68.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/cli",
-  "version": "3.67.2-corel.454+ea86580c76",
+  "version": "3.68.0",
   "description": "Sanity CLI tool for managing Sanity installations, managing plugins, schemas and datasets",
   "keywords": [
     "sanity",
@@ -58,9 +58,10 @@
   "dependencies": {
     "@babel/traverse": "^7.23.5",
     "@sanity/client": "^6.24.1",
-    "@sanity/codegen": "3.67.2-corel.454+ea86580c76",
+    "@sanity/codegen": "3.68.0",
     "@sanity/telemetry": "^0.7.7",
-    "@sanity/util": "3.67.2-corel.454+ea86580c76",
+    "@sanity/template-validator": "^1.0.2",
+    "@sanity/util": "3.68.0",
     "chalk": "^4.1.2",
     "debug": "^4.3.4",
     "decompress": "^4.2.0",
@@ -72,17 +73,16 @@
     "prettier": "^3.3.0",
     "semver": "^7.3.5",
     "silver-fleece": "1.1.0",
-    "validate-npm-package-name": "^3.0.0",
-    "yaml": "^2.6.1"
+    "validate-npm-package-name": "^3.0.0"
   },
   "devDependencies": {
-    "@repo/package.config": "3.67.1",
-    "@repo/test-config": "3.67.1",
+    "@repo/package.config": "3.68.0",
+    "@repo/test-config": "3.68.0",
     "@rexxars/gitconfiglocal": "^3.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@sanity/eslint-config-studio": "^4.0.0",
     "@sanity/generate-help-url": "^3.0.0",
-    "@sanity/types": "3.67.2-corel.454+ea86580c76",
+    "@sanity/types": "3.68.0",
     "@types/babel__traverse": "^7.20.5",
     "@types/configstore": "^5.0.1",
     "@types/cpx": "^1.5.2",
@@ -127,12 +127,12 @@
     "semver-compare": "^1.0.0",
     "tar": "^6.1.11",
     "vite": "^5.4.11",
-    "vitest": "^2.1.1",
+    "vitest": "^2.1.8",
     "which": "^2.0.2",
     "xdg-basedir": "^4.0.0"
   },
   "engines": {
     "node": ">=18"
   },
-  "gitHead": "ea86580c76aa4b5f2fefda043afed3168c6a7d82"
+  "gitHead": "121e7bb9b6239364c1fd0745c683d18dfa29cfff"
 }

package/src/actions/init-project/bootstrapRemoteTemplate.ts

@@ -6,13 +6,15 @@ import {detectFrameworkRecord, LocalFileSystemDetector} from '@vercel/fs-detecto
 
 import {debug} from '../../debug'
 import {type CliCommandContext} from '../../types'
+import {getDefaultPortForFramework} from '../../util/frameworkPort'
 import {
   applyEnvVariables,
   checkNeedsReadToken,
   downloadAndExtractRepo,
   generateSanityApiReadToken,
-  getMonoRepo,
+  getPackages,
   type RepoInfo,
+  setCorsOrigin,
   tryApplyPackageName,
   validateRemoteTemplate,
 } from '../../util/remoteTemplate'
@@ -40,7 +42,7 @@ export async function bootstrapRemoteTemplate(
   const spinner = output.spinner(`Bootstrapping files from template "${name}"`).start()
 
   debug('Validating remote template')
-  const packages = await getMonoRepo(repoInfo, bearerToken)
+  const packages = await getPackages(repoInfo, bearerToken)
   await validateRemoteTemplate(repoInfo, packages, bearerToken)
 
   debug('Create new directory "%s"', outputPath)
@@ -65,6 +67,12 @@ export async function bootstrapRemoteTemplate(
       fs: new LocalFileSystemDetector(packagePath),
       frameworkList: frameworks as readonly Framework[],
     })
+    const port = getDefaultPortForFramework(packageFramework?.slug)
+
+    debug('Setting CORS origin to http://localhost:%d', port)
+    await setCorsOrigin(`http://localhost:${port}`, variables.projectId, apiClient)
+
+    debug('Applying environment variables to %s', pkg)
     // Next.js uses `.env.local` for local environment variables
     const envName = packageFramework?.slug === 'nextjs' ? '.env.local' : '.env'
     await applyEnvVariables(packagePath, {...variables, readToken}, envName)

package/src/outputters/cliOutputter.ts

@@ -13,19 +13,19 @@ export default {
     console.log(...args)
   },
 
-  success(...args: unknown[]): void {
-    console.log(`${SYMBOL_CHECK} ${args.join(' ')}`)
+  success(firstPartOfMessage: unknown, ...args: unknown[]): void {
+    console.log(`${SYMBOL_CHECK} ${firstPartOfMessage}`, ...args)
   },
 
-  warn(...args: unknown[]): void {
-    console.warn(`${SYMBOL_WARN} ${args.join(' ')}`)
+  warn(firstPartOfMessage: unknown, ...args: unknown[]): void {
+    console.warn(`${SYMBOL_WARN} ${firstPartOfMessage}`, ...args)
   },
 
-  error(...args: unknown[]): void {
-    if (args[0] instanceof Error) {
-      console.error(`${SYMBOL_FAIL} ${chalk.red(args[0].stack)}`)
+  error(firstPartOfMessage: unknown, ...args: unknown[]): void {
+    if (firstPartOfMessage instanceof Error) {
+      console.error(`${SYMBOL_FAIL} ${chalk.red(firstPartOfMessage.stack)}`)
     } else {
-      console.error(`${SYMBOL_FAIL} ${args.join(' ')}`)
+      console.error(`${SYMBOL_FAIL} ${firstPartOfMessage}`, ...args)
     }
   },
 
@@ -37,7 +37,7 @@ export default {
   },
 
   spinner(options: Options): Ora {
-    const spinner = ora({...options, spinner: 'dots'})
+    const spinner = ora(options)
     // Override the default status methods to use custom symbols instead of emojis
     spinner.succeed = (text?: string) => spinner.stopAndPersist({text, symbol: SYMBOL_CHECK})
     spinner.warn = (text?: string) => spinner.stopAndPersist({text, symbol: SYMBOL_WARN})

package/src/util/frameworkPort.ts

@@ -0,0 +1,63 @@
+const FALLBACK_PORT = 3000
+
+const portMap: Record<string, number> = {
+  'nextjs': 3000,
+  'blitzjs': 3000,
+  'gatsby': 8000,
+  'remix': 3000,
+  'astro': 3000,
+  'hexo': 4000,
+  'eleventy': 8080,
+  'docusaurus': 3000,
+  'docusaurus-2': 3000,
+  'preact': 8080,
+  'solidstart': 3000,
+  'solidstart-1': 3000,
+  'dojo': 3000,
+  'ember': 4200,
+  'vue': 8080,
+  'scully': 1668,
+  'ionic-angular': 4200,
+  'angular': 4200,
+  'polymer': 8081,
+  'svelte': 5000,
+  'sveltekit': 5173,
+  'sveltekit-1': 5173,
+  'ionic-react': 3000,
+  'create-react-app': 3000,
+  'gridsome': 8080,
+  'umijs': 8000,
+  'saber': 3000,
+  'stencil': 3333,
+  'nuxtjs': 3000,
+  'redwoodjs': 8910,
+  'hugo': 1313,
+  'jekyll': 4000,
+  'brunch': 3333,
+  'middleman': 4567,
+  'zola': 1111,
+  'hydrogen': 3000,
+  'vite': 5173,
+  'vitepress': 5173,
+  'vuepress': 8080,
+  'parcel': 1234,
+  'fasthtml': 8000,
+  'sanity': 3333,
+  'sanity-v3': 3333,
+  'storybook': 6006,
+}
+
+/**
+ * Returns the default development port for a given framework.
+ * Contains default ports for all frameworks supported by `@vercel/frameworks`.
+ * Falls back to port 3000 if framework is not found or not specified.
+ *
+ * @see https://github.com/vercel/vercel/blob/main/packages/frameworks/src/frameworks.ts
+ * for the complete list of supported frameworks
+ *
+ * @param frameworkSlug - The framework identifier from `@vercel/frameworks`
+ * @returns The default port number for the framework
+ */
+export function getDefaultPortForFramework(frameworkSlug?: string | null): number {
+  return portMap[frameworkSlug ?? ''] ?? FALLBACK_PORT
+}

package/src/util/remoteTemplate.ts

@@ -4,25 +4,27 @@ import {Readable} from 'node:stream'
 import {pipeline} from 'node:stream/promises'
 import {type ReadableStream} from 'node:stream/web'
 
+import {
+  ENV_TEMPLATE_FILES,
+  getMonoRepo,
+  REQUIRED_ENV_VAR,
+  validateSanityTemplate,
+} from '@sanity/template-validator'
 import {x} from 'tar'
-import {parse as parseYaml} from 'yaml'
 
+import {debug} from '../debug'
 import {type CliApiClient, type PackageJson} from '../types'
 
+const DISALLOWED_PATHS = [
+  // Prevent security risks from unknown GitHub Actions
+  '/.github/',
+]
+
 const ENV_VAR = {
-  PROJECT_ID: /SANITY(?:_STUDIO)?_PROJECT_ID/, // Matches SANITY_PROJECT_ID and SANITY_STUDIO_PROJECT_ID
-  DATASET: /SANITY(?:_STUDIO)?_DATASET/, // Matches SANITY_DATASET and SANITY_STUDIO_DATASET
+  ...REQUIRED_ENV_VAR,
   READ_TOKEN: 'SANITY_API_READ_TOKEN',
 } as const
 
-const ENV_FILE = {
-  TEMPLATE: '.env.template',
-  EXAMPLE: '.env.example',
-  LOCAL_EXAMPLE: '.env.local.example',
-} as const
-
-const ENV_TEMPLATE_FILES = [ENV_FILE.TEMPLATE, ENV_FILE.EXAMPLE, ENV_FILE.LOCAL_EXAMPLE] as const
-
 type EnvData = {
   projectId: string
   dataset: string
@@ -40,6 +42,11 @@ export type RepoInfo = {
   filePath: string
 }
 
+function getGitHubRawContentUrl(repoInfo: RepoInfo): string {
+  const {username, name, branch, filePath} = repoInfo
+  return `https://raw.githubusercontent.com/${username}/${name}/${branch}/${filePath}`
+}
+
 function isGithubRepoShorthand(value: string): boolean {
   if (URL.canParse(value)) {
     return false
@@ -180,6 +187,9 @@ export async function downloadAndExtractRepo(
           const pathSegments = posixPath.split(posix.sep)
           rootPath = pathSegments.length ? pathSegments[0] : null
         }
+        for (const disallowedPath of DISALLOWED_PATHS) {
+          if (posixPath.includes(disallowedPath)) return false
+        }
         return posixPath.startsWith(`${rootPath}${filePath ? `/${filePath}/` : '/'}`)
       },
     }),
@@ -191,222 +201,29 @@ export async function downloadAndExtractRepo(
  * Supports pnpm workspaces, Lerna, Rush, and npm workspaces (package.json).
  * @returns Promise that resolves to an array of package paths/names if monorepo is detected, undefined otherwise
  */
-export async function getMonoRepo(
+export async function getPackages(
   repoInfo: RepoInfo,
   bearerToken?: string,
 ): Promise<string[] | undefined> {
-  const {username, name, branch, filePath} = repoInfo
-  const baseUrl = `https://raw.githubusercontent.com/${username}/${name}/${branch}/${filePath}`
-
   const headers: Record<string, string> = {}
   if (bearerToken) {
     headers.Authorization = `Bearer ${bearerToken}`
   }
-
-  type MonorepoHandler = {
-    check: (content: string) => string[] | undefined
-  }
-
-  const handlers: Record<string, MonorepoHandler> = {
-    'package.json': {
-      check: (content) => {
-        try {
-          const pkg = JSON.parse(content)
-          if (!pkg.workspaces) return undefined
-          return Array.isArray(pkg.workspaces) ? pkg.workspaces : pkg.workspaces.packages
-        } catch {
-          return undefined
-        }
-      },
-    },
-    'pnpm-workspace.yaml': {
-      check: (content) => {
-        try {
-          const config = parseYaml(content)
-          return config.packages
-        } catch {
-          return undefined
-        }
-      },
-    },
-    'lerna.json': {
-      check: (content) => {
-        try {
-          const config = JSON.parse(content)
-          return config.packages
-        } catch {
-          return undefined
-        }
-      },
-    },
-    'rush.json': {
-      check: (content) => {
-        try {
-          const config = JSON.parse(content)
-          return config.projects?.map((p: {packageName: string}) => p.packageName)
-        } catch {
-          return undefined
-        }
-      },
-    },
-  }
-
-  const fileChecks = await Promise.all(
-    Object.keys(handlers).map(async (file) => {
-      const response = await fetch(`${baseUrl}/${file}`, {headers})
-      return {file, exists: response.status === 200, content: await response.text()}
-    }),
-  )
-
-  for (const check of fileChecks) {
-    if (!check.exists) continue
-    const result = handlers[check.file].check(check.content)
-    if (result) return result
-  }
-
-  return undefined
+  return getMonoRepo(getGitHubRawContentUrl(repoInfo), headers)
 }
 
-/**
- * Validates a single package within a repository against required criteria.
- */
-async function validatePackage(
-  baseUrl: string,
-  packagePath: string,
-  headers: Record<string, string>,
-): Promise<{
-  hasSanityConfig: boolean
-  hasSanityCli: boolean
-  hasEnvFile: boolean
-  hasSanityDep: boolean
-}> {
-  const packageUrl = packagePath ? `${baseUrl}/${packagePath}` : baseUrl
-
-  const requiredFiles = [
-    'package.json',
-    'sanity.config.ts',
-    'sanity.config.js',
-    'sanity.cli.ts',
-    'sanity.cli.js',
-    ...ENV_TEMPLATE_FILES,
-  ]
-
-  const fileChecks = await Promise.all(
-    requiredFiles.map(async (file) => {
-      const response = await fetch(`${packageUrl}/${file}`, {headers})
-      return {file, exists: response.status === 200, content: await response.text()}
-    }),
-  )
-
-  const packageJson = fileChecks.find((f) => f.file === 'package.json')
-  if (!packageJson?.exists) {
-    throw new Error(`Package at ${packagePath || 'root'} must include a package.json file`)
-  }
-
-  let hasSanityDep = false
-  try {
-    const pkg: PackageJson = JSON.parse(packageJson.content)
-    hasSanityDep = !!(pkg.dependencies?.sanity || pkg.devDependencies?.sanity)
-  } catch (err) {
-    throw new Error(`Invalid package.json file in ${packagePath || 'root'}`)
-  }
-
-  const hasSanityConfig = fileChecks.some(
-    (f) => f.exists && (f.file === 'sanity.config.ts' || f.file === 'sanity.config.js'),
-  )
-
-  const hasSanityCli = fileChecks.some(
-    (f) => f.exists && (f.file === 'sanity.cli.ts' || f.file === 'sanity.cli.js'),
-  )
-
-  const envFile = fileChecks.find(
-    (f) => f.exists && ENV_TEMPLATE_FILES.includes(f.file as (typeof ENV_TEMPLATE_FILES)[number]),
-  )
-  if (envFile) {
-    const envContent = envFile.content
-    const hasProjectId = envContent.match(ENV_VAR.PROJECT_ID)
-    const hasDataset = envContent.match(ENV_VAR.DATASET)
-
-    if (!hasProjectId || !hasDataset) {
-      const missing = []
-      if (!hasProjectId) missing.push('SANITY_PROJECT_ID or SANITY_STUDIO_PROJECT_ID')
-      if (!hasDataset) missing.push('SANITY_DATASET or SANITY_STUDIO_DATASET')
-      throw new Error(
-        `Environment template in ${
-          packagePath || 'repo'
-        } must include the following variables: ${missing.join(', ')}`,
-      )
-    }
-  }
-
-  return {
-    hasSanityConfig,
-    hasSanityCli,
-    hasEnvFile: Boolean(envFile),
-    hasSanityDep,
-  }
-}
-
-/**
- * Validates a GitHub repository template against required criteria.
- * Supports both monorepo and single-package repositories.
- *
- * For monorepos:
- * - Each package must have a valid package.json
- * - At least one package must include 'sanity' in dependencies or devDependencies
- * - At least one package must have sanity.config.js/ts and sanity.cli.js/ts
- * - Each package must have a .env.template, .env.example, or .env.local.example
- *
- * For single-package repositories:
- * - Must have a valid package.json with 'sanity' dependency
- * - Must have sanity.config.js/ts and sanity.cli.js/ts
- * - Must have .env.template, .env.example, or .env.local.example
- *
- * Environment files must include:
- * - SANITY_PROJECT_ID or SANITY_STUDIO_PROJECT_ID variable
- * - SANITY_DATASET or SANITY_STUDIO_DATASET variable
- *
- * @throws Error if validation fails with specific reason
- */
 export async function validateRemoteTemplate(
   repoInfo: RepoInfo,
   packages: string[] = [''],
   bearerToken?: string,
 ): Promise<void> {
-  const {username, name, branch, filePath} = repoInfo
-  const baseUrl = `https://raw.githubusercontent.com/${username}/${name}/${branch}/${filePath}`
-
   const headers: Record<string, string> = {}
   if (bearerToken) {
     headers.Authorization = `Bearer ${bearerToken}`
   }
-
-  const validations = await Promise.all(
-    packages.map((pkg) => validatePackage(baseUrl, pkg, headers)),
-  )
-
-  const hasSanityDep = validations.some((v) => v.hasSanityDep)
-  if (!hasSanityDep) {
-    throw new Error('At least one package must include "sanity" as a dependency in package.json')
-  }
-
-  const hasSanityConfig = validations.some((v) => v.hasSanityConfig)
-  if (!hasSanityConfig) {
-    throw new Error('At least one package must include a sanity.config.js or sanity.config.ts file')
-  }
-
-  const hasSanityCli = validations.some((v) => v.hasSanityCli)
-  if (!hasSanityCli) {
-    throw new Error('At least one package must include a sanity.cli.js or sanity.cli.ts file')
-  }
-
-  const missingEnvPackages = packages.filter((pkg, i) => !validations[i].hasEnvFile)
-  if (missingEnvPackages.length > 0) {
-    throw new Error(
-      `The following packages are missing .env.template, .env.example, or .env.local.example files: ${missingEnvPackages.join(
-        ', ',
-      )}`,
-    )
+  const result = await validateSanityTemplate(getGitHubRawContentUrl(repoInfo), packages, headers)
+  if (!result.isValid) {
+    throw new Error(result.errors.join('\n'))
   }
 }
 
@@ -510,3 +327,20 @@ export async function generateSanityApiReadToken(
     })
   return response.key
 }
+
+export async function setCorsOrigin(
+  origin: string,
+  projectId: string,
+  apiClient: CliApiClient,
+): Promise<void> {
+  try {
+    await apiClient({api: {projectId}}).request({
+      method: 'POST',
+      url: '/cors',
+      body: {origin: origin, allowCredentials: false},
+    })
+  } catch (error) {
+    // Silent fail, it most likely means that the origin is already set
+    debug('Failed to set CORS origin', error)
+  }
+}

package/templates/get-started/plugins/sanity-plugin-tutorial/GetStartedTutorial.tsx

@@ -1,4 +1,4 @@
-import React, {useRef, useState} from 'react'
+import React, {useState} from 'react'
 import {
   Card,
   Container,
@@ -32,8 +32,8 @@ export const GetStartedTutorial = () => {
   )
 
   const {sanity} = useTheme()
-  const rootElement = useRef(null)
-  const rect = useElementSize(rootElement.current)
+  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
+  const rect = useElementSize(rootElement)
   const width = rect?.content?.width
   const isSmallScreen = width ? width < sanity.media[1] : false
   const isProdEnv = process.env.NODE_ENV !== 'development'
@@ -48,7 +48,7 @@ export const GetStartedTutorial = () => {
   }
 
   return (
-    <div ref={rootElement}>
+    <div ref={setRootElement}>
       <Card tone="primary" padding={isSmallScreen ? 3 : 5} paddingBottom={isSmallScreen ? 4 : 6}>
         <Flex justify={isSmallScreen ? 'space-between' : 'flex-end'} align="center">
           {isSmallScreen && (