@sanity/cli-test 0.0.2-alpha.1 → 0.0.2-alpha.11

package/dist/vitest.d.ts

@@ -0,0 +1,116 @@
+import {TestProject} from 'vitest/node'
+
+/**
+ * Global setup function for initializing test fixtures.
+ *
+ * Copies fixtures from the bundled location to a temp directory
+ * and installs dependencies.
+ *
+ * Note: Fixtures are NOT built during setup. Tests that need built
+ * fixtures should build them as part of the test.
+ *
+ * This function is designed to be used with vitest globalSetup.
+ *
+ * @public
+ *
+ * @param options - Configuration options
+ * @example
+ * ```typescript
+ * // In vitest.config.ts
+ * export default defineConfig({
+ *   test: {
+ *     globalSetup: ['@sanity/cli-test/vitest']
+ *   }
+ * })
+ * ```
+ */
+export declare function setup(_: TestProject, options?: SetupTestFixturesOptions): Promise<void>
+
+/**
+ * Options for setupTestFixtures
+ *
+ * @public
+ */
+declare interface SetupTestFixturesOptions {
+  /**
+   * Glob patterns for additional fixture directories to set up.
+   *
+   * Each pattern is matched against directories in the current working directory.
+   * Only directories containing a `package.json` file are included.
+   *
+   * @example
+   * ```typescript
+   * ['fixtures/*', 'dev/*']
+   * ```
+   */
+  additionalFixtures?: string[]
+  /**
+   * Custom temp directory path. Defaults to process.cwd()/tmp
+   */
+  tempDir?: string
+}
+
+/**
+ * Setup function to build the worker files with esbuild.
+ *
+ * Bundles the worker files with esbuild and sets up watch mode if in watch mode.
+ * All npm packages are automatically marked as external (loaded from node_modules at runtime).
+ * Only internal project code is bundled inline.
+ *
+ * @public
+ *
+ * @param filePaths - The paths to the worker files to build
+ * @returns A promise that resolves when the worker build is setup
+ * @throws If the worker files cannot be bundled
+ * @throws If the watcher cannot be set up
+ */
+export declare function setupWorkerBuild(filePaths: string[]): Promise<void>
+
+/**
+ * Serializer for snapshot tests to normalize line endings and Windows ^ to Unix `\`
+ * @public
+ */
+export declare const snapshotSerializer: {
+  serialize: (val: string) => string
+  test: (val: unknown) => val is string
+}
+
+/**
+ * Teardown function to clean up test fixtures.
+ *
+ * Removes the temp directory created by setupTestFixtures.
+ *
+ * This function is designed to be used with vitest globalSetup.
+ *
+ * @public
+ *
+ * @param options - Configuration options
+ */
+export declare function teardown(options?: TeardownTestFixturesOptions): Promise<void>
+
+/**
+ * Options for teardownTestFixtures
+ *
+ * @public
+ */
+declare interface TeardownTestFixturesOptions {
+  /**
+   * Custom temp directory path. Defaults to process.cwd()/tmp
+   */
+  tempDir?: string
+}
+
+/**
+ * Teardown function to clean up the worker build.
+ *
+ * Closes all build contexts and deletes the compiled JavaScript files.
+ *
+ * @public
+ *
+ * @returns A promise that resolves when the worker build is teared down
+ * @throws If the build contexts cannot be disposed
+ * @throws If the compiled JavaScript files cannot be deleted
+ */
+export declare function teardownWorkerBuild(): Promise<void>
+
+export {}

package/dist/vitest.js

@@ -0,0 +1,22 @@
+/**
+ * Vitest global setup entry point.
+ *
+ * Import this in your vitest.config.ts globalSetup array for automatic
+ * test fixture setup and teardown.
+ *
+ * @example
+ * ```typescript
+ * // vitest.config.ts
+ * import {defineConfig} from 'vitest/config'
+ *
+ * export default defineConfig({
+ *   test: {
+ *     globalSetup: ['@sanity/cli-test/vitest']
+ *   }
+ * })
+ * ```
+ */ export { setup, teardown } from './test/setupFixtures.js';
+export { snapshotSerializer } from './test/snapshotSerializer.js';
+export { setupWorkerBuild, teardownWorkerBuild } from './vitestWorker.js';
+
+//# sourceMappingURL=vitest.js.map

package/dist/vitest.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/vitest.ts"],"sourcesContent":["/**\n * Vitest global setup entry point.\n *\n * Import this in your vitest.config.ts globalSetup array for automatic\n * test fixture setup and teardown.\n *\n * @example\n * ```typescript\n * // vitest.config.ts\n * import {defineConfig} from 'vitest/config'\n *\n * export default defineConfig({\n *   test: {\n *     globalSetup: ['@sanity/cli-test/vitest']\n *   }\n * })\n * ```\n */\nexport {setup, teardown} from './test/setupFixtures.js'\nexport {snapshotSerializer} from './test/snapshotSerializer.js'\n\nexport {setupWorkerBuild, teardownWorkerBuild} from './vitestWorker.js'\n"],"names":["setup","teardown","snapshotSerializer","setupWorkerBuild","teardownWorkerBuild"],"mappings":"AAAA;;;;;;;;;;;;;;;;;CAiBC,GACD,SAAQA,KAAK,EAAEC,QAAQ,QAAO,0BAAyB;AACvD,SAAQC,kBAAkB,QAAO,+BAA8B;AAE/D,SAAQC,gBAAgB,EAAEC,mBAAmB,QAAO,oBAAmB"}

package/dist/vitestWorker.js

@@ -0,0 +1,135 @@
+/**
+ * Vitest worker setup for the Sanity CLI.
+ *
+ * This builds the worker TS files into JS files using esbuild bundling.
+ * All internal dependencies are bundled inline, while npm packages remain external.
+ */ import { unlink } from 'node:fs/promises';
+import { build, context } from 'esbuild';
+const compiledFiles = new Set();
+let buildContexts = [];
+/**
+ * Generate esbuild configuration for bundling worker files.
+ *
+ * @param filePath - The worker file path to bundle
+ * @param outputFile - The output file path for the bundled worker
+ * @returns esbuild configuration object
+ */ function esbuildOptions(filePath, outputFile) {
+    return {
+        bundle: true,
+        conditions: [
+            'node',
+            'import'
+        ],
+        entryPoints: [
+            filePath
+        ],
+        // Marks cli-core as external to avoid bundling it inline
+        // this is mostly necessary for the monorepo.
+        external: [
+            '@sanity/cli-core'
+        ],
+        format: 'esm',
+        loader: {
+            '.json': 'json'
+        },
+        logLevel: 'warning',
+        mainFields: [
+            'module',
+            'main'
+        ],
+        outfile: outputFile,
+        packages: 'external',
+        platform: 'node',
+        sourcemap: false,
+        target: 'node20'
+    };
+}
+/**
+ * Bundle a single worker file with esbuild.
+ *
+ * @param filePath - The worker file path to bundle
+ * @param external - Array of package names to keep external
+ * @returns The output file path
+ */ async function bundleWorkerFile(filePath) {
+    const outputFile = filePath.replace(/\.ts$/, '.js');
+    await build(esbuildOptions(filePath, outputFile));
+    compiledFiles.add(outputFile);
+    return outputFile;
+}
+/**
+ * Bundle all worker files with esbuild (non-watch mode).
+ *
+ * @param filePaths - Array of worker file paths to bundle
+ */ async function setupBundling(filePaths) {
+    console.log(`Found ${filePaths.length} worker files to bundle`);
+    for (const workerFile of filePaths){
+        try {
+            await bundleWorkerFile(workerFile);
+            console.log(`✓ Bundled ${workerFile}`);
+        } catch (error) {
+            console.error(`✗ Failed to bundle ${workerFile}:`, error);
+            throw error;
+        }
+    }
+}
+/**
+ * Set up watch mode for worker files using esbuild's native watch API.
+ *
+ * @param files - Array of worker file paths to watch
+ */ async function setupWatchMode(files) {
+    for (const filePath of files){
+        const outputFile = filePath.replace(/\.ts$/, '.js');
+        const ctx = await context(esbuildOptions(filePath, outputFile));
+        await ctx.watch();
+        buildContexts.push(ctx);
+        compiledFiles.add(outputFile);
+        console.log(`👀 Watching ${filePath}`);
+    }
+}
+/**
+ * Setup function to build the worker files with esbuild.
+ *
+ * Bundles the worker files with esbuild and sets up watch mode if in watch mode.
+ * All npm packages are automatically marked as external (loaded from node_modules at runtime).
+ * Only internal project code is bundled inline.
+ *
+ * @public
+ *
+ * @param filePaths - The paths to the worker files to build
+ * @returns A promise that resolves when the worker build is setup
+ * @throws If the worker files cannot be bundled
+ * @throws If the watcher cannot be set up
+ */ export async function setupWorkerBuild(filePaths) {
+    const isWatchMode = (process.env.VITEST_WATCH === 'true' || !process.argv.includes('run')) && process.env.CI !== 'true';
+    await (isWatchMode ? setupWatchMode(filePaths) : setupBundling(filePaths));
+}
+/**
+ * Teardown function to clean up the worker build.
+ *
+ * Closes all build contexts and deletes the compiled JavaScript files.
+ *
+ * @public
+ *
+ * @returns A promise that resolves when the worker build is teared down
+ * @throws If the build contexts cannot be disposed
+ * @throws If the compiled JavaScript files cannot be deleted
+ */ export async function teardownWorkerBuild() {
+    // Dispose all build contexts (for watch mode)
+    for (const ctx of buildContexts){
+        await ctx.dispose();
+    }
+    buildContexts = [];
+    // Clean up compiled JavaScript files
+    console.log('Cleaning up compiled JavaScript files...');
+    for (const filePath of compiledFiles){
+        try {
+            await unlink(filePath);
+            console.log(`✓ Deleted ${filePath}`);
+        } catch (error) {
+            console.error(`Failed to delete ${filePath}:`, error);
+        }
+    }
+    compiledFiles.clear();
+}
+
+//# sourceMappingURL=vitestWorker.js.map

package/dist/vitestWorker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/vitestWorker.ts"],"sourcesContent":["/**\n * Vitest worker setup for the Sanity CLI.\n *\n * This builds the worker TS files into JS files using esbuild bundling.\n * All internal dependencies are bundled inline, while npm packages remain external.\n */\nimport {unlink} from 'node:fs/promises'\n\nimport {build, type BuildContext, type BuildOptions, context} from 'esbuild'\n\nconst compiledFiles: Set<string> = new Set()\nlet buildContexts: BuildContext[] = []\n\n/**\n * Generate esbuild configuration for bundling worker files.\n *\n * @param filePath - The worker file path to bundle\n * @param outputFile - The output file path for the bundled worker\n * @returns esbuild configuration object\n */\nfunction esbuildOptions(filePath: string, outputFile: string): BuildOptions {\n  return {\n    bundle: true,\n    conditions: ['node', 'import'],\n    entryPoints: [filePath],\n    // Marks cli-core as external to avoid bundling it inline\n    // this is mostly necessary for the monorepo.\n    external: ['@sanity/cli-core'],\n    format: 'esm',\n    loader: {'.json': 'json'},\n    logLevel: 'warning',\n    mainFields: ['module', 'main'],\n    outfile: outputFile,\n    packages: 'external',\n    platform: 'node',\n    sourcemap: false,\n    target: 'node20',\n  }\n}\n\n/**\n * Bundle a single worker file with esbuild.\n *\n * @param filePath - The worker file path to bundle\n * @param external - Array of package names to keep external\n * @returns The output file path\n */\nasync function bundleWorkerFile(filePath: string): Promise<string> {\n  const outputFile = filePath.replace(/\\.ts$/, '.js')\n\n  await build(esbuildOptions(filePath, outputFile))\n\n  compiledFiles.add(outputFile)\n  return outputFile\n}\n\n/**\n * Bundle all worker files with esbuild (non-watch mode).\n *\n * @param filePaths - Array of worker file paths to bundle\n */\nasync function setupBundling(filePaths: string[]) {\n  console.log(`Found ${filePaths.length} worker files to bundle`)\n\n  for (const workerFile of filePaths) {\n    try {\n      await bundleWorkerFile(workerFile)\n      console.log(`✓ Bundled ${workerFile}`)\n    } catch (error) {\n      console.error(`✗ Failed to bundle ${workerFile}:`, error)\n      throw error\n    }\n  }\n}\n\n/**\n * Set up watch mode for worker files using esbuild's native watch API.\n *\n * @param files - Array of worker file paths to watch\n */\nasync function setupWatchMode(files: string[]) {\n  for (const filePath of files) {\n    const outputFile = filePath.replace(/\\.ts$/, '.js')\n\n    const ctx = await context(esbuildOptions(filePath, outputFile))\n\n    await ctx.watch()\n    buildContexts.push(ctx)\n    compiledFiles.add(outputFile)\n\n    console.log(`👀 Watching ${filePath}`)\n  }\n}\n\n/**\n * Setup function to build the worker files with esbuild.\n *\n * Bundles the worker files with esbuild and sets up watch mode if in watch mode.\n * All npm packages are automatically marked as external (loaded from node_modules at runtime).\n * Only internal project code is bundled inline.\n *\n * @public\n *\n * @param filePaths - The paths to the worker files to build\n * @returns A promise that resolves when the worker build is setup\n * @throws If the worker files cannot be bundled\n * @throws If the watcher cannot be set up\n */\nexport async function setupWorkerBuild(filePaths: string[]) {\n  const isWatchMode =\n    (process.env.VITEST_WATCH === 'true' || !process.argv.includes('run')) &&\n    process.env.CI !== 'true'\n\n  await (isWatchMode ? setupWatchMode(filePaths) : setupBundling(filePaths))\n}\n\n/**\n * Teardown function to clean up the worker build.\n *\n * Closes all build contexts and deletes the compiled JavaScript files.\n *\n * @public\n *\n * @returns A promise that resolves when the worker build is teared down\n * @throws If the build contexts cannot be disposed\n * @throws If the compiled JavaScript files cannot be deleted\n */\nexport async function teardownWorkerBuild(): Promise<void> {\n  // Dispose all build contexts (for watch mode)\n  for (const ctx of buildContexts) {\n    await ctx.dispose()\n  }\n  buildContexts = []\n\n  // Clean up compiled JavaScript files\n  console.log('Cleaning up compiled JavaScript files...')\n  for (const filePath of compiledFiles) {\n    try {\n      await unlink(filePath)\n      console.log(`✓ Deleted ${filePath}`)\n    } catch (error) {\n      console.error(`Failed to delete ${filePath}:`, error)\n    }\n  }\n  compiledFiles.clear()\n}\n"],"names":["unlink","build","context","compiledFiles","Set","buildContexts","esbuildOptions","filePath","outputFile","bundle","conditions","entryPoints","external","format","loader","logLevel","mainFields","outfile","packages","platform","sourcemap","target","bundleWorkerFile","replace","add","setupBundling","filePaths","console","log","length","workerFile","error","setupWatchMode","files","ctx","watch","push","setupWorkerBuild","isWatchMode","process","env","VITEST_WATCH","argv","includes","CI","teardownWorkerBuild","dispose","clear"],"mappings":"AAAA;;;;;CAKC,GACD,SAAQA,MAAM,QAAO,mBAAkB;AAEvC,SAAQC,KAAK,EAAwCC,OAAO,QAAO,UAAS;AAE5E,MAAMC,gBAA6B,IAAIC;AACvC,IAAIC,gBAAgC,EAAE;AAEtC;;;;;;CAMC,GACD,SAASC,eAAeC,QAAgB,EAAEC,UAAkB;IAC1D,OAAO;QACLC,QAAQ;QACRC,YAAY;YAAC;YAAQ;SAAS;QAC9BC,aAAa;YAACJ;SAAS;QACvB,yDAAyD;QACzD,6CAA6C;QAC7CK,UAAU;YAAC;SAAmB;QAC9BC,QAAQ;QACRC,QAAQ;YAAC,SAAS;QAAM;QACxBC,UAAU;QACVC,YAAY;YAAC;YAAU;SAAO;QAC9BC,SAAST;QACTU,UAAU;QACVC,UAAU;QACVC,WAAW;QACXC,QAAQ;IACV;AACF;AAEA;;;;;;CAMC,GACD,eAAeC,iBAAiBf,QAAgB;IAC9C,MAAMC,aAAaD,SAASgB,OAAO,CAAC,SAAS;IAE7C,MAAMtB,MAAMK,eAAeC,UAAUC;IAErCL,cAAcqB,GAAG,CAAChB;IAClB,OAAOA;AACT;AAEA;;;;CAIC,GACD,eAAeiB,cAAcC,SAAmB;IAC9CC,QAAQC,GAAG,CAAC,CAAC,MAAM,EAAEF,UAAUG,MAAM,CAAC,uBAAuB,CAAC;IAE9D,KAAK,MAAMC,cAAcJ,UAAW;QAClC,IAAI;YACF,MAAMJ,iBAAiBQ;YACvBH,QAAQC,GAAG,CAAC,CAAC,UAAU,EAAEE,YAAY;QACvC,EAAE,OAAOC,OAAO;YACdJ,QAAQI,KAAK,CAAC,CAAC,mBAAmB,EAAED,WAAW,CAAC,CAAC,EAAEC;YACnD,MAAMA;QACR;IACF;AACF;AAEA;;;;CAIC,GACD,eAAeC,eAAeC,KAAe;IAC3C,KAAK,MAAM1B,YAAY0B,MAAO;QAC5B,MAAMzB,aAAaD,SAASgB,OAAO,CAAC,SAAS;QAE7C,MAAMW,MAAM,MAAMhC,QAAQI,eAAeC,UAAUC;QAEnD,MAAM0B,IAAIC,KAAK;QACf9B,cAAc+B,IAAI,CAACF;QACnB/B,cAAcqB,GAAG,CAAChB;QAElBmB,QAAQC,GAAG,CAAC,CAAC,YAAY,EAAErB,UAAU;IACvC;AACF;AAEA;;;;;;;;;;;;;CAaC,GACD,OAAO,eAAe8B,iBAAiBX,SAAmB;IACxD,MAAMY,cACJ,AAACC,CAAAA,QAAQC,GAAG,CAACC,YAAY,KAAK,UAAU,CAACF,QAAQG,IAAI,CAACC,QAAQ,CAAC,MAAK,KACpEJ,QAAQC,GAAG,CAACI,EAAE,KAAK;IAErB,MAAON,CAAAA,cAAcN,eAAeN,aAAaD,cAAcC,UAAS;AAC1E;AAEA;;;;;;;;;;CAUC,GACD,OAAO,eAAemB;IACpB,8CAA8C;IAC9C,KAAK,MAAMX,OAAO7B,cAAe;QAC/B,MAAM6B,IAAIY,OAAO;IACnB;IACAzC,gBAAgB,EAAE;IAElB,qCAAqC;IACrCsB,QAAQC,GAAG,CAAC;IACZ,KAAK,MAAMrB,YAAYJ,cAAe;QACpC,IAAI;YACF,MAAMH,OAAOO;YACboB,QAAQC,GAAG,CAAC,CAAC,UAAU,EAAErB,UAAU;QACrC,EAAE,OAAOwB,OAAO;YACdJ,QAAQI,KAAK,CAAC,CAAC,iBAAiB,EAAExB,SAAS,CAAC,CAAC,EAAEwB;QACjD;IACF;IACA5B,cAAc4C,KAAK;AACrB"}

package/fixtures/basic-app/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "basic-app",
+  "version": "1.0.0",
+  "private": true,
+  "keywords": [
+    "sanity"
+  ],
+  "license": "UNLICENSED",
+  "main": "package.json",
+  "scripts": {
+    "dev": "sanity dev",
+    "start": "sanity start"
+  },
+  "dependencies": {
+    "@sanity/sdk": "^2.6.0",
+    "@sanity/sdk-react": "^2.6.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "sanity": "^5.9.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.9",
+    "sanity": "^5.9.0",
+    "typescript": "^5.9.3"
+  }
+}

package/fixtures/basic-app/sanity.cli.ts

@@ -0,0 +1,12 @@
+import {defineCliConfig} from 'sanity/cli'
+
+export default defineCliConfig({
+  app: {
+    entry: './src/App.tsx',
+    organizationId: 'org-id',
+  },
+  deployment: {
+    appId: 'app-id',
+    autoUpdates: true,
+  },
+})

package/fixtures/basic-app/src/App.css

@@ -0,0 +1,20 @@
+/* Container styling for the app */
+.app-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
+}
+
+/* Basic reset */
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  background-color: #f9f9f9;
+}

package/fixtures/basic-app/src/App.tsx

@@ -0,0 +1,26 @@
+import {type SanityConfig} from '@sanity/sdk'
+import {SanityApp} from '@sanity/sdk-react'
+
+import {ExampleComponent} from './ExampleComponent'
+import './App.css'
+
+function App() {
+  // apps can access many different projects or other sources of data
+  const sanityConfigs: SanityConfig[] = [
+    {
+      dataset: 'dataset-name',
+      projectId: 'project-id',
+    },
+  ]
+
+  return (
+    <div className="app-container">
+      <SanityApp config={sanityConfigs} fallback={<div>Loading...</div>}>
+        {/* add your own components here! */}
+        <ExampleComponent />
+      </SanityApp>
+    </div>
+  )
+}
+
+export default App

package/fixtures/basic-app/src/ExampleComponent.css

@@ -0,0 +1,84 @@
+.example-container {
+  background-color: white;
+  border-radius: 8px;
+  padding: 2rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.example-avatar-container {
+  position: relative;
+  margin-block-end: 1rem;
+}
+
+@keyframes wave {
+  0% {
+    rotate: 0deg;
+  }
+  2% {
+    rotate: 20deg;
+    filter: blur(1px);
+  }
+  4% {
+    rotate: 0deg;
+  }
+  6% {
+    rotate: -20deg;
+  }
+  8% {
+    rotate: 0deg;
+  }
+  10% {
+    rotate: 20deg;
+  }
+  12% {
+    rotate: 0deg;
+  }
+  14% {
+    rotate: -20deg;
+  }
+  16% {
+    rotate: 0deg;
+    filter: blur(0);
+  }
+}
+
+.example-avatar-container:after {
+  content: '👋';
+  position: absolute;
+  font-size: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-container: center;
+  inset-inline-start: 0;
+  inset-block-start: 0;
+  translate: -25% -25%;
+  transform-origin: 100% 100%;
+  animation: wave 4s infinite linear;
+}
+
+.example-avatar {
+  inline-size: 4rem;
+  aspect-ratio: 1;
+  border-radius: 50%;
+}
+
+.example-heading {
+  color: #333;
+  margin-top: 0;
+  font-size: 2rem;
+}
+
+p {
+  color: #666;
+  line-height: 1.6;
+}
+
+.code-hint {
+  background-color: #f5f5f5;
+  padding: 1rem;
+  border-radius: 4px;
+  font-family: monospace;
+  margin-top: 1.5rem;
+  border-left: 3px solid #e0e0e0;
+  line-height: 1.5;
+}

package/fixtures/basic-app/src/ExampleComponent.tsx

@@ -0,0 +1,38 @@
+import {type CurrentUser, useCurrentUser} from '@sanity/sdk-react'
+
+import './ExampleComponent.css'
+
+export function ExampleComponent() {
+  const user: CurrentUser | null = useCurrentUser()
+
+  return (
+    <div className="example-container">
+      {user?.profileImage ? (
+        <div className="example-avatar-container">
+          <img alt="" className="example-avatar" src={user.profileImage} />
+        </div>
+      ) : (
+        ''
+      )}
+      <h1 className="example-heading">
+        Welcome to your Sanity App{user?.name ? `, ${user.name}` : ''}!
+      </h1>
+      <p className="example-text">
+        This is an example component. You can replace this with your own content by creating a new
+        component and importing it in App.tsx.
+      </p>
+      <div className="code-hint">
+        <p>
+          Quick tip: Create new components in separate files and import them like this in App.tsx /
+          App.jsx:
+        </p>
+        <pre>{`import {YourComponent} from './YourComponent'
+
+// Then use it in your JSX
+<SanityApp config={sanityConfigs}>
+  <YourComponent />
+</SanityApp>`}</pre>
+      </div>
+    </div>
+  )
+}

package/fixtures/basic-app/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "Preserve",
+    "moduleDetection": "force",
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

package/fixtures/basic-studio/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "basic-studio",
+  "version": "1.0.0",
+  "private": true,
+  "keywords": [
+    "sanity"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "main": "package.json",
+  "scripts": {
+    "deploy": "sanity deploy",
+    "deploy-graphql": "sanity graphql deploy",
+    "dev": "sanity dev",
+    "start": "sanity start"
+  },
+  "dependencies": {
+    "@sanity/vision": "^5.9.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "sanity": "^5.9.0",
+    "styled-components": "^6.3.8"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.9",
+    "typescript": "^5.9.3"
+  }
+}

package/fixtures/basic-studio/sanity.cli.ts

@@ -0,0 +1,11 @@
+import {defineCliConfig} from 'sanity/cli'
+
+export default defineCliConfig({
+  api: {
+    dataset: 'test',
+    projectId: 'ppsg7ml5',
+  },
+  deployment: {
+    autoUpdates: true,
+  },
+})

package/fixtures/basic-studio/sanity.config.ts

@@ -0,0 +1,18 @@
+import {visionTool} from '@sanity/vision'
+import {defineConfig} from 'sanity'
+import {structureTool} from 'sanity/structure'
+
+import {schemaTypes} from './schemaTypes'
+
+export default defineConfig({
+  title: 'Basic Studio',
+
+  dataset: 'test',
+  projectId: 'ppsg7ml5',
+
+  plugins: [structureTool(), visionTool()],
+
+  schema: {
+    types: schemaTypes,
+  },
+})

package/fixtures/basic-studio/schemaTypes/author.ts

@@ -0,0 +1,52 @@
+import {defineField, defineType} from 'sanity'
+
+export default defineType({
+  name: 'author',
+  title: 'Author',
+  type: 'document',
+
+  fields: [
+    defineField({
+      name: 'name',
+      title: 'Name',
+      type: 'string',
+    }),
+    defineField({
+      name: 'slug',
+      options: {
+        maxLength: 96,
+        source: 'name',
+      },
+      title: 'Slug',
+      type: 'slug',
+    }),
+    defineField({
+      name: 'image',
+      options: {
+        hotspot: true,
+      },
+      title: 'Image',
+      type: 'image',
+    }),
+    defineField({
+      name: 'bio',
+      of: [
+        {
+          lists: [],
+          styles: [{title: 'Normal', value: 'normal'}],
+          title: 'Block',
+          type: 'block',
+        },
+      ],
+      title: 'Bio',
+      type: 'array',
+    }),
+  ],
+
+  preview: {
+    select: {
+      media: 'image',
+      title: 'name',
+    },
+  },
+})