@sanity/runtime-cli 12.2.0 → 12.4.0

package/dist/cores/functions/test.d.ts

@@ -3,7 +3,7 @@ import type { CoreConfig, CoreResult } from '../index.js';
 export interface FunctionTestOptions extends CoreConfig {
     blueprint: ReadBlueprintResult;
     args: {
-        name: string;
+        name: string | undefined;
     };
     flags: {
         data?: string;
@@ -24,5 +24,7 @@ export interface FunctionTestOptions extends CoreConfig {
         'document-id-after'?: string;
         'media-library-id'?: string;
     };
+    error: (message: string, options: object) => void;
+    helpText: string;
 }
 export declare function functionTestCore(options: FunctionTestOptions): Promise<CoreResult>;

package/dist/cores/functions/test.js

@@ -6,16 +6,25 @@ import { testAction } from '../../actions/functions/test.js';
 import config from '../../config.js';
 import { SANITY_FUNCTION_DOCUMENT, SANITY_FUNCTION_MEDIA_LIBRARY_ASSET } from '../../constants.js';
 import buildPayload from '../../utils/build-payload.js';
-import { findFunctionInBlueprint } from '../../utils/find-function.js';
+import { findFunctionInBlueprint, getFunctionNames } from '../../utils/find-function.js';
 import { fetchAsset, fetchDocument } from '../../utils/functions/fetch-document.js';
 import { parseJsonObject } from '../../utils/parse-json-object.js';
 import { isEventType, isGroqContextOptions, } from '../../utils/types.js';
 export async function functionTestCore(options) {
-    const { blueprint, log, args, flags } = options;
+    const { blueprint, log, error, args, flags, helpText } = options;
     const { name: fnName } = args;
     const { data, event, file, timeout, api, dataset, 'document-id': documentId, 'with-user-token': withUserToken, 'data-before': dataBefore, 'data-after': dataAfter, 'file-before': fileBefore, 'file-after': fileAfter, 'document-id-before': documentIdBefore, 'document-id-after': documentIdAfter, 'media-library-id': mediaLibraryId, } = flags;
     const { parsedBlueprint } = blueprint;
     const { 'project-id': projectId = blueprint?.projectId, 'organization-id': organizationId = blueprint?.organizationId, } = flags;
+    if (!fnName) {
+        const functionNames = getFunctionNames(blueprint.parsedBlueprint.resources);
+        const validNames = functionNames.length > 0
+            ? `Valid names are: ${functionNames.join(', ')}`
+            : 'No functions are defined in the blueprint.';
+        error(`Missing required argument: name\n${validNames}\n`, { exit: false });
+        log(helpText);
+        return { success: true };
+    }
     let eventType;
     if (!event) {
         eventType = 'create';

package/dist/server/static/components/app.css

@@ -747,9 +747,6 @@ body {
 header {
   grid-area: header;
 }
-filters-component {
-  grid-area: filters;
-}
 nav {
   grid-area: left-sidebar;
 }
@@ -763,36 +760,6 @@ footer {
   grid-area: footer;
 }
 
-/* Add styles for filters-component form */
-/* Default (Mobile) Styles */
-filters-component form {
-  display: block; /* Stack direct children */
-  padding: var(--m-space-3); /* Consistent padding */
-  border-bottom: 1px solid var(--card-border-color);
-}
-
-filters-component form > * {
-  /* Target direct children: dropdowns, fieldset */
-  display: block; /* Ensure they are block level */
-  width: 100%; /* Make them take full width */
-  margin-bottom: var(--m-space-3); /* Add space below each item when stacked */
-}
-
-filters-component form > *:last-child {
-  margin-bottom: 0; /* Remove margin from the last stacked item */
-}
-
-filters-component form label {
-  display: block; /* Ensure label stacks above input if needed */
-  margin-bottom: var(--m-space-1); /* Small space between label and input */
-}
-
-filters-component form input {
-  width: 100%; /* Make input fill its container */
-  box-sizing: border-box; /* Include padding/border in width calculation */
-}
-/* End of Mobile Styles */
-
 /* Apply grid styles to main#main-content */
 #main-content {
   display: grid;
@@ -808,26 +775,6 @@ filters-component form input {
   min-height: 0; /* Important for nested overflow/height */
 }
 
-payload-panel {
-  grid-area: payload;
-  max-height: 100%; /* Fit within allocated grid row space */
-  overflow: hidden; /* Let internal elements scroll */
-  min-height: 0; /* Allow shrinking */
-}
-
-response-panel {
-  grid-area: response;
-  max-height: 100%;
-  overflow: hidden;
-  min-height: 0;
-}
-
-/* Target console-panel for grid area and height constraints */
-console-panel {
-  grid-area: console;
-  overflow: hidden; /* The inner div handles scrolling */
-}
-
 @media (max-width: 40rem) {
   /* Mobile layout: stack elements vertically */
   #main-content {
@@ -843,20 +790,6 @@ console-panel {
     overflow-y: auto; /* Allow scrolling for the whole main area */
   }
 
-  /* Reset max-heights on mobile if they cause layout issues */
-  payload-panel,
-  response-panel,
-  console-panel {
-    max-height: none;
-    min-height: 200px; /* Give some minimum space on mobile */
-    overflow: auto; /* Allow individual scrolling if content is large */
-  }
-
-  /* Ensure console has reasonable height on mobile */
-  console-panel {
-    max-height: 400px; /* Allow more console height on mobile maybe */
-  }
-
   .block-lg {
     display: block !important;
   }
@@ -878,27 +811,6 @@ console-panel {
   .border-top-none-l {
     border-top: 0;
   }
-
-  /* Revert filters-component form to horizontal layout on larger screens */
-  filters-component form {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-end; /* Align form elements along their bottom edge */
-    gap: var(--m-space-3); /* Space between elements */
-    padding-left: var(--m-space-3);
-    padding-bottom: var(--m-space-3);
-  }
-
-  filters-component form > * {
-    width: auto; /* Allow elements to size based on content/flex rules */
-    margin-bottom: 0; /* Remove stacking margin */
-  }
-
-  /* Optional: Give API version input a specific width or allow growth */
-  filters-component form fieldset {
-    min-width: 150px; /* Example minimum width */
-    /* flex-grow: 1; */ /* Uncomment to allow it to fill space */
-  }
 }
 
 header {
@@ -1088,34 +1000,6 @@ time {
   font-family: var(--font-family-mono);
 }
 
-response-panel,
-payload-panel {
-  max-height: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-toggle-switch {
-  display: inline-block;
-  cursor: pointer;
-}
-
-toggle-switch::part(track) {
-  padding: 0.125em;
-  border-radius: 1em;
-  background-color: hsl(0, 0%, 67%);
-}
-
-toggle-switch::part(slider) {
-  border-radius: 1em;
-  background-color: hsl(0, 0%, 100%);
-  box-shadow: 0.0625em 0.0625em 0.125em hsla(0, 0%, 0%, 0.25);
-}
-
-toggle-switch[checked]::part(track) {
-  background-color: var(--color-interactive-primary-active-bg);
-}
-
 /* Default sidebar */
 #sidebar {
   transition:

package/dist/server/static/components/clear-button.js

@@ -36,10 +36,10 @@ export class ClearButton extends ApiBaseElement {
   }
 
   clear = () => {
-    // this.api.store.result = {logs: '', timings: {bundle: 0, execute: 0}}
     this.dispatchEvent(
       new CustomEvent('clear-console', {
         bubbles: true,
+        composed: true,
       }),
     )
   }

package/dist/server/static/components/console-panel.js

@@ -1,8 +1,24 @@
 /* globals customElements document */
 import {ApiBaseElement} from './api-base.js'
+import {getSharedStyleSheets} from './shared-styles.js'
 
 // Template for the console panel
-const template = `
+const template = document.createElement('template')
+template.innerHTML = `
+<style>
+:host {
+  grid-area: console;
+  overflow: hidden;
+}
+
+@media (max-width: 40rem) {
+  :host {
+    max-height: 400px;
+    min-height: 200px;
+    overflow: auto;
+  }
+}
+</style>
 <div id="console-container" class="relative y-scroll h-100 max-h-100 bg-base pad-t-0 pad-r-3 pad-b-7 pad-l-5 border-top">
   <div class="sticky top-0 left-0 right-0 mar-t-0 mar-b-0">
     <h3 class="config-label mar-t-0 mar-b-0 pad-t-3 bg-base z-32">
@@ -17,10 +33,13 @@ const template = `
   </div>
   <pre id="console-output" class="pad-0 mar-t-0 mar-r-0 mar-b-5 mar-l-0 pre-wrap break-word"></pre>
 </div>
-
 `
 
 class ConsolePanel extends ApiBaseElement {
+  constructor() {
+    super()
+    this.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true))
+  }
   updateConsole = ({result}) => {
     // Guard against element not being ready or API not injected yet
     if (!this.consoleOutput || !result) return
@@ -45,13 +64,15 @@ class ConsolePanel extends ApiBaseElement {
   clear = () => {
     const backUp = this.api.store.preserveLog
     this.api.store.result = {logs: undefined, error: undefined}
-    this.querySelector('#console-output').innerText = ''
+    this.consoleOutput.innerText = ''
     this.api.store.preserveLog = backUp
   }
 
-  connectedCallback() {
-    this.innerHTML = template
-    this.consoleOutput = this.querySelector('#console-output')
+  async connectedCallback() {
+    const sheets = await getSharedStyleSheets()
+    this.shadowRoot.adoptedStyleSheets = sheets
+
+    this.consoleOutput = this.shadowRoot.querySelector('#console-output')
     this.addEventListener('clear-console', this.clear)
 
     // Subscribe to changes in the result state to update the console

package/dist/server/static/components/fetch-button.js

@@ -56,7 +56,7 @@ export class FetchButton extends ApiBaseElement {
   }
 
   fetchDoc = async () => {
-    const docId = document.querySelector('#docid').value.trim()
+    const docId = this.api.store.docId.trim()
 
     if (docId) {
       const originalContent = this.button.innerHTML

package/dist/server/static/components/filter-api-version.js

@@ -1,6 +1,9 @@
-class ApiVersionComponent extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = `
+import {ApiBaseElement} from './api-base.js'
+
+import {getSharedStyleSheets} from './shared-styles.js'
+
+const template = document.createElement('template')
+template.innerHTML = `
 <fieldset class="mar-t-2">
     <label class="slab-text">
       <span class="block mar-b-1">API Version</span>
@@ -8,6 +11,39 @@ class ApiVersionComponent extends HTMLElement {
     </label>
 </fieldset>
 `
+
+class ApiVersionComponent extends ApiBaseElement {
+  constructor() {
+    super()
+    this.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true))
+  }
+
+  async connectedCallback() {
+    const sheets = await getSharedStyleSheets()
+
+    // Create a component-specific stylesheet that will be applied after shared styles
+    const componentSheet = new CSSStyleSheet()
+    await componentSheet.replace(`
+      :host {
+        align-self: flex-end;
+      }
+      fieldset {
+        margin-top: 0 !important;
+      }
+      input {
+        background: transparent !important;
+        color: light-dark(var(--gray-950), var(--gray-300)) !important;
+      }
+    `)
+
+    this.shadowRoot.adoptedStyleSheets = [...sheets, componentSheet]
+
+    this.input = this.shadowRoot.querySelector('input')
+    this.input.addEventListener('input', this.updateApiVersion)
+  }
+
+  updateApiVersion = (event) => {
+    this.api.store.apiVersion = event.target.value
   }
 }
 

package/dist/server/static/components/filter-document-id.js

@@ -1,6 +1,9 @@
-class DocumentIdFilter extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = `
+import {ApiBaseElement} from './api-base.js'
+
+import {getSharedStyleSheets} from './shared-styles.js'
+
+const template = document.createElement('template')
+template.innerHTML = `
 <fieldset class="mar-t-2">
     <label class="slab-text">
       <span class="block mar-b-1">
@@ -20,6 +23,39 @@ class DocumentIdFilter extends HTMLElement {
     </label>
 </fieldset>
 `
+
+class DocumentIdFilter extends ApiBaseElement {
+  constructor() {
+    super()
+    this.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true))
+  }
+
+  async connectedCallback() {
+    const sheets = await getSharedStyleSheets()
+
+    // Create a component-specific stylesheet that will be applied after shared styles
+    const componentSheet = new CSSStyleSheet()
+    await componentSheet.replace(`
+      :host {
+        align-self: flex-end;
+      }
+      fieldset {
+        margin-top: 0 !important;
+      }
+      input {
+        background: transparent !important;
+        color: light-dark(var(--gray-950), var(--gray-300)) !important;
+      }
+    `)
+
+    this.shadowRoot.adoptedStyleSheets = [...sheets, componentSheet]
+
+    this.input = this.shadowRoot.querySelector('input')
+    this.input.addEventListener('input', this.updateDocId)
+  }
+
+  updateDocId = (event) => {
+    this.api.store.docId = event.target.value
   }
 }
 

package/dist/server/static/components/filter-with-token.js

@@ -1,7 +1,8 @@
-class WithTokenComponent extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = `
-<fieldset class="mar-t-2" class="flex flex-col">
+import {getSharedStyleSheets} from './shared-styles.js'
+
+const template = document.createElement('template')
+template.innerHTML = `
+<fieldset class="mar-t-2 flex flex-col">
     <span class="slab-text block mar-b-1">
         <span class="flex items-center">
         With Token
@@ -15,6 +16,28 @@ class WithTokenComponent extends HTMLElement {
     <toggle-switch toggle-key="withToken" class="flex component-height"></toggle-switch>
 </fieldset>
 `
+
+class WithTokenComponent extends HTMLElement {
+  constructor() {
+    super()
+    this.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true))
+  }
+
+  async connectedCallback() {
+    const sheets = await getSharedStyleSheets()
+
+    // Create a component-specific stylesheet that will be applied after shared styles
+    const componentSheet = new CSSStyleSheet()
+    await componentSheet.replace(`
+      :host {
+        align-self: flex-end;
+      }
+      fieldset {
+        margin-top: 0 !important;
+      }
+    `)
+
+    this.shadowRoot.adoptedStyleSheets = [...sheets, componentSheet]
   }
 }
 

package/dist/server/static/components/filters.js

@@ -1,75 +1,140 @@
 import {ApiBaseElement} from './api-base.js'
+import {getSharedStyleSheets} from './shared-styles.js'
+
+const template = document.createElement('template')
+template.innerHTML = `
+<style>
+:host {
+  grid-area: filters;
+}
+
+form {
+  display: block;
+  padding: var(--m-space-3);
+  border-bottom: 1px solid var(--card-border-color);
+}
+
+form > * {
+  display: block;
+  width: 100%;
+  margin-bottom: var(--m-space-3);
+}
+
+form > *:last-child {
+  margin-bottom: 0;
+}
+
+form label {
+  display: block;
+  margin-bottom: var(--m-space-1);
+}
+
+form input {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+@media (min-width: 40em) {
+  form {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    gap: var(--m-space-3);
+    padding-left: var(--m-space-3);
+    padding-bottom: var(--m-space-3);
+  }
+
+  form > * {
+    width: auto;
+    margin-bottom: 0;
+  }
+
+  form fieldset {
+    min-width: 150px;
+  }
+}
+</style>
+<form class="gap-2 pad-l-3 pad-b-3 border-bottom">
+  <fieldset class="flex gap-2">
+    <legend class="config-label">Client Options</legend>
+    <div id="dynamic-dropdowns" class="flex gap-2"></div>
+    <select-dropdown
+      label="Event"
+      store-key="events"
+      selected-key="selectedEvent"
+      value-prop="name"
+      label-prop="name"
+    ></select-dropdown>
+    <api-version></api-version>
+    <with-token></with-token>
+    <document-id></document-id>
+  </fieldset>
+</form>
+`
 
 class FiltersComponent extends ApiBaseElement {
+  constructor() {
+    super()
+    this.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true))
+  }
+
+  async connectedCallback() {
+    const sheets = await getSharedStyleSheets()
+    this.shadowRoot.adoptedStyleSheets = sheets
+
+    this.renderFilters()
+    this.api.subscribe(this.renderFilters, ['selectedFunctionType'])
+  }
+
   renderFilters = () => {
     const docFunction = this.api.store.selectedFunctionType === 'sanity.function.document'
     const mediaFunction = this.api.store.selectedFunctionType?.startsWith(
       'sanity.function.media-library',
     )
 
-    this.innerHTML = `
-        <form class="gap-2 pad-l-3 pad-b-3 border-bottom">
-          <fieldset class="flex gap-2">
-            <legend class="config-label">Client Options</legend>
-            ${
-              docFunction
-                ? `<select-dropdown
-              label="Project"
-              store-key="projects"
-              selected-key="selectedProject"
-              value-prop="id"
-              label-prop="displayName"
-              trigger-fetch
-            ></select-dropdown>
-            <select-dropdown
-              label="Dataset"
-              store-key="datasets"
-              selected-key="selectedDataset"
-              value-prop="name"
-              label-prop="name"
-              subscribe-to="selectedProject"
-            ></select-dropdown>`
-                : ''
-            }
-            ${
-              mediaFunction
-                ? `<select-dropdown
-              label="Organization"
-              store-key="organizations"
-              selected-key="selectedOrganization"
-              value-prop="id"
-              label-prop="name"
-              trigger-fetch
-            ></select-dropdown>
-            <select-dropdown
-              label="Media Library"
-              store-key="mediaLibraries"
-              selected-key="selectedMediaLibrary"
-              value-prop="id"
-              label-prop="id"
-              subscribe-to="selectedOrganization"
-            ></select-dropdown>`
-                : ''
-            }
-
-            <select-dropdown
-              label="Event"
-              store-key="events"
-              selected-key="selectedEvent"
-              value-prop="name"
-              label-prop="name"
-            ></select-dropdown>
-
-            <api-version></api-version>
-            <with-token></with-token>
-            <document-id></document-id>
-          </form>
-        `
-  }
+    const container = this.shadowRoot.querySelector('#dynamic-dropdowns')
 
-  connectedCallback() {
-    this.innerHTML = this.renderFilters()
-    this.api.subscribe(this.renderFilters, ['selectedFunctionType'])
+    if (docFunction) {
+      container.innerHTML = `
+        <select-dropdown
+          label="Project"
+          store-key="projects"
+          selected-key="selectedProject"
+          value-prop="id"
+          label-prop="displayName"
+          trigger-fetch
+        ></select-dropdown>
+        <select-dropdown
+          label="Dataset"
+          store-key="datasets"
+          selected-key="selectedDataset"
+          value-prop="name"
+          label-prop="name"
+          subscribe-to="selectedProject"
+        ></select-dropdown>
+      `
+    } else if (mediaFunction) {
+      container.innerHTML = `
+        <select-dropdown
+          label="Organization"
+          store-key="organizations"
+          selected-key="selectedOrganization"
+          value-prop="id"
+          label-prop="name"
+          trigger-fetch
+        ></select-dropdown>
+        <select-dropdown
+          label="Media Library"
+          store-key="mediaLibraries"
+          selected-key="selectedMediaLibrary"
+          value-prop="id"
+          label-prop="id"
+          subscribe-to="selectedOrganization"
+        ></select-dropdown>
+      `
+    } else {
+      container.innerHTML = ''
+    }
   }
 
   disconnectedCallback() {