@sanity/runtime-cli 12.1.0 → 12.2.0

package/dist/server/app.js

@@ -5,7 +5,7 @@ import { WebSocketServer } from 'ws';
 import { readLocalBlueprint } from '../actions/blueprints/blueprint.js';
 import config from '../config.js';
 import { isRecord } from '../utils/is-record.js';
-import { isEventType, } from '../utils/types.js';
+import { isEventType, isGroqContextOptions, } from '../utils/types.js';
 import { handleInvokeRequest } from './handlers/invoke.js';
 const app = (host, port, executionOptions) => {
     const requestListener = async (req, res) => {
@@ -34,11 +34,13 @@ const app = (host, port, executionOptions) => {
                             const { data, func: functionName, metadata } = parseInvokeRequest(Buffer.concat(body));
                             const { context, event } = data;
                             // replace user token if required
-                            if (context.clientOptions.token) {
-                                context.clientOptions.token = config.token || undefined;
-                            }
-                            else {
-                                delete context.clientOptions.token;
+                            if (isGroqContextOptions(context)) {
+                                if (context.clientOptions.token) {
+                                    context.clientOptions.token = config.token || undefined;
+                                }
+                                else {
+                                    delete context.clientOptions.token;
+                                }
                             }
                             const result = await handleInvokeRequest(functionName, event, metadata, context, executionOptions);
                             // Add Server-Timing header
@@ -324,21 +326,30 @@ function parseInvokeRequest(body) {
         throw new Error('Request body is not valid, `metadata.event` field is missing');
     }
     const metadataEvent = metadata.event;
-    if (typeof metadataEvent !== 'string' || !isEventType(metadataEvent)) {
-        throw new Error('Request body is not valid, `metadata.event` field is not one of `create`, `update`, or `delete`');
-    }
-    if (!('before' in metadata)) {
-        throw new Error('Request body is not valid, `metadata.before` field is missing');
-    }
-    if (!('after' in metadata)) {
-        throw new Error('Request body is not valid, `metadata.after` field is missing');
-    }
-    const { before, after } = metadata;
-    if (!isRecord(before) && before !== null) {
-        throw new Error('Request body is not valid, `metadata.before` field is not an object');
+    if (typeof metadataEvent !== 'string' ||
+        (!isEventType(metadataEvent) && metadataEvent !== 'schedule')) {
+        throw new Error('Request body is not valid, `metadata.event` field is not one of `create`, `update`, `delete`, or `schedule`');
     }
-    if (!isRecord(after) && after !== null) {
-        throw new Error('Request body is not valid, `metadata.after` field is not an object');
+    let before = null;
+    let after = null;
+    // Only GROQ-based events (create, update, delete) have before and after fields
+    if (metadataEvent !== 'schedule') {
+        if (!('before' in metadata)) {
+            throw new Error('Request body is not valid, `metadata.before` field is missing');
+        }
+        if (!('after' in metadata)) {
+            throw new Error('Request body is not valid, `metadata.after` field is missing');
+        }
+        const beforeValue = metadata.before;
+        const afterValue = metadata.after;
+        if (!isRecord(beforeValue) && beforeValue !== null) {
+            throw new Error('Request body is not valid, `metadata.before` field is not an object');
+        }
+        if (!isRecord(afterValue) && afterValue !== null) {
+            throw new Error('Request body is not valid, `metadata.after` field is not an object');
+        }
+        before = beforeValue;
+        after = afterValue;
     }
     const clientOptions = {
         ...context.clientOptions,
@@ -361,7 +372,7 @@ function parseInvokeRequest(body) {
             },
             event,
         },
-        metadata: { event: metadataEvent, before, after },
+        metadata: metadataEvent === 'schedule' ? { event: metadataEvent } : { event: metadataEvent, before, after },
     };
 }
 export { app, buildApiUrl, parseDocumentUrl };

package/dist/server/handlers/invoke.d.ts

@@ -1,4 +1,4 @@
-import type { InvocationResponse, InvokeContextOptions, InvokeExecutionOptions, InvokePayloadOptions } from '../../utils/types.js';
-export declare function handleInvokeRequest(functionName: string, event: Record<string, unknown>, metadata: Pick<InvokePayloadOptions, 'event' | 'before' | 'after'>, context: InvokeContextOptions, executionOptions?: Partial<InvokeExecutionOptions>): Promise<InvocationResponse & {
+import type { InvocationResponse, InvokeContextOptions, InvokeExecutionOptions, InvokePayloadMetadata } from '../../utils/types.js';
+export declare function handleInvokeRequest(functionName: string, event: Record<string, unknown>, metadata: InvokePayloadMetadata, context: InvokeContextOptions, executionOptions?: Partial<InvokeExecutionOptions>): Promise<InvocationResponse & {
     timings: Record<string, number>;
 }>;

package/dist/server/handlers/invoke.js

@@ -1,10 +1,10 @@
 import { readLocalBlueprint } from '../../actions/blueprints/blueprint.js';
-import { findFunctionByName } from '../../utils/find-function.js';
+import { findFunctionInBlueprint } from '../../utils/find-function.js';
 import invoke from '../../utils/invoke-local.js';
 export async function handleInvokeRequest(functionName, event, metadata, context, executionOptions) {
     const start = performance.now();
     const { parsedBlueprint } = await readLocalBlueprint();
-    const resource = findFunctionByName(parsedBlueprint, functionName);
+    const resource = findFunctionInBlueprint(parsedBlueprint, functionName);
     const readBlueprintTime = performance.now() - start;
     const payload = {
         payload: event,

package/dist/server/static/components/api-base.js

@@ -7,5 +7,8 @@ export class ApiBaseElement extends HTMLElement {
   constructor() {
     super()
     this.api = api
+    this.SANITY_FUNCTION_DOCUMENT = 'sanity.function.document'
+    this.SANITY_FUNCTION_MEDIA_LIBRARY_ASSET = 'sanity.function.media-library.asset'
+    this.SANITY_FUNCTION_SCHEDULE = 'sanity.function.cron'
   }
 }

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

@@ -498,29 +498,7 @@
   /* ---------------------------------- */
   /* Used for padding, margin, gap, etc. Assumed px units. */
 
-  --space-0: 0px;
-  --space-1: 4px;
-  --space-2: 8px;
-  --space-3: 12px;
-  --space-4: 20px;
-  --space-5: 32px;
-  --space-6: 52px;
   --space-7: 84px;
-  --space-8: 136px;
-  --space-9: 220px;
-
-  /* ---------------------------------- */
-  /* Border Radius (Numerical Scale)    */
-  /* ---------------------------------- */
-  /* Assumed px units. Index 7 is 'pill' shape. */
-  --radius-0: 0px;
-  --radius-1: 1px;
-  --radius-2: 3px;
-  --radius-3: 6px;
-  --radius-4: 9px;
-  --radius-5: 12px;
-  --radius-6: 21px;
-  --radius-7: 9999px; /* Pill / Full round */
 
   /* ---------------------------------- */
   /* Container Widths (Numerical Scale) */
@@ -681,18 +659,15 @@ body {
 .capitalize {
   text-transform: capitalize;
 }
-.flex {
-  display: flex;
-}
-.flex-column {
-  flex-direction: column;
-}
 .items-center {
   align-items: center;
 }
 .space-between {
   justify-content: space-between;
 }
+.flex-end {
+  justify-content: flex-end;
+}
 
 .sticky {
   position: sticky;
@@ -710,13 +685,19 @@ body {
 .left-0 {
   left: 0;
 }
-.bottom-0 {
-  bottom: 0;
-}
 
+.z-10 {
+  z-index: 10;
+}
+.z-32 {
+  z-index: 32;
+}
 .z-100 {
   z-index: 100;
 }
+.w-100 {
+  width: 100%;
+}
 .h-100 {
   height: 100%;
 }
@@ -731,7 +712,7 @@ body {
 }
 
 .border-color {
-  border-color: light-dark(var(--gray-200), var(--gray-800));
+  border-color: var(--card-border-color);
 }
 .border-left {
   border-left-width: 1px;
@@ -754,10 +735,6 @@ body {
   border-top-color: var(--card-border-color);
 }
 
-.bg-transparent {
-  background-color: transparent;
-}
-
 .hr-border {
   margin-top: 0;
   margin-bottom: 0;
@@ -790,7 +767,7 @@ footer {
 /* Default (Mobile) Styles */
 filters-component form {
   display: block; /* Stack direct children */
-  padding: var(--space-3); /* Consistent padding */
+  padding: var(--m-space-3); /* Consistent padding */
   border-bottom: 1px solid var(--card-border-color);
 }
 
@@ -798,7 +775,7 @@ 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(--space-3); /* Add space below each item when stacked */
+  margin-bottom: var(--m-space-3); /* Add space below each item when stacked */
 }
 
 filters-component form > *:last-child {
@@ -807,7 +784,7 @@ filters-component form > *:last-child {
 
 filters-component form label {
   display: block; /* Ensure label stacks above input if needed */
-  margin-bottom: var(--space-1); /* Small space between label and input */
+  margin-bottom: var(--m-space-1); /* Small space between label and input */
 }
 
 filters-component form input {
@@ -907,9 +884,9 @@ console-panel {
     display: flex;
     flex-direction: row;
     align-items: flex-end; /* Align form elements along their bottom edge */
-    gap: var(--space-3); /* Space between elements */
-    padding-left: var(--space-3);
-    padding-bottom: var(--space-3);
+    gap: var(--m-space-3); /* Space between elements */
+    padding-left: var(--m-space-3);
+    padding-bottom: var(--m-space-3);
   }
 
   filters-component form > * {
@@ -933,12 +910,6 @@ footer {
   border-top: 1px solid var(--card-border-color);
 }
 
-.logo {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
 .logo-image {
   height: 25px;
   width: 25px;
@@ -961,7 +932,6 @@ footer {
   appearance: none;
   -webkit-appearance: none;
   display: flex;
-  align-items: center;
   gap: 6px;
   background-color: light-dark(var(--gray-900), white) !important;
   color: light-dark(white, var(--gray-950)) !important;
@@ -969,7 +939,7 @@ footer {
   border-radius: 3px !important;
   outline: 0;
   font-size: 14px !important;
-  line-height: 1;
+  line-height: 1 !important;
   padding: 0px 12px !important;
   height: 24px !important;
   max-width: 160px;
@@ -992,7 +962,6 @@ footer {
 }
 
 .function-list-item {
-  padding: 8px;
   font-size: 0.875rem;
   border-radius: 3px;
   margin: 0 0 1px 0;
@@ -1002,7 +971,7 @@ footer {
 .function-list-item-label {
   color: light-dark(var(--gray-800), var(--gray-400));
   font-weight: var(--font-weight-3);
-  padding-bottom: var(--space-1);
+  padding-bottom: var(--m-space-1);
 }
 
 .function-list-item-type {
@@ -1025,50 +994,12 @@ ol[type='content'] li:hover:not(.selected:not(.selected)) {
   background-color: light-dark(var(--gray-100), var(--gray-800)) !important;
 }
 
-m-box {
-  background-color: var(--card-bg-color) !important;
-  border-color: var(--card-border-color) !important;
-  color: var(--text-color) !important;
-}
-
-m-tabs {
-  font-size: 0.8125rem;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 10px 0 10px 40px;
-}
-
-m-tabs {
-  & > :is(a, button) {
-    padding: 4px 12px !important;
-    color: light-dark(var(--gray-900), var(--gray-300)) !important;
-  }
-}
-
-m-tabs {
-  & > :is(a, button) {
-    &[aria-selected='true'] {
-      background: light-dark(var(--gray-100), var(--gray-800));
-      color: light-dark(var(--gray-800), var(--gray-100)) !important;
-    }
-  }
-}
-
-:is(ul, ol)[type='content'] {
+:is(ol)[type='content'] {
   & > li:not(:last-of-type) {
     border-bottom: 0 !important;
   }
 }
 
-.tab {
-  font-size: 11px;
-  font-weight: 500;
-  border-radius: 0.1875rem;
-  padding: 8px;
-  border: 0 !important;
-}
-
 #payload {
   height: 100%;
 }
@@ -1131,11 +1062,7 @@ m-tabs {
 }
 
 .slab-stat {
-  display: flex;
-  align-items: center;
   gap: 0 8px;
-  margin: 0;
-  padding: var(--space-3);
 }
 
 .slab-stat dt {
@@ -1259,3 +1186,101 @@ body:has(#nav-toggle:checked) {
       / 40px 1fr !important;
   }
 }
+
+.bg-base {
+  background-color: var(--base-background-color);
+}
+
+.pre-wrap {
+  white-space: pre-wrap;
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
+.break-word {
+  word-wrap: break-word;
+}
+
+.block {
+  display: block;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.transparent {
+  background: transparent;
+}
+
+.component-color {
+  color: light-dark(var(--gray-950), var(--gray-300));
+}
+
+.component-height {
+  height: 2.5rem;
+}
+
+.hidden {
+  display: none;
+}
+
+.mar-l-specific {
+  margin-left: 31px;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.response-panel-grid {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  grid-template-columns: 1fr;
+}
+
+.gap-25 {
+  gap: 0.25rem;
+}
+
+.appearance-none {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+.dropdown-template {
+  padding-right: 2rem;
+  border: 1px solid var(--gray-400);
+  border-radius: var(--m-border-radius-2);
+  height: var(--input-height, 2.5rem);
+}
+
+.dropdown-template-div {
+  position: absolute;
+  top: 50%;
+  right: 0.4rem;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.nav-min-width {
+  min-width: 200px;
+}
+
+.nav-label {
+  position: absolute;
+  top: var(--m-space-2);
+  right: var(--m-space-3);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 2px;
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+}

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

@@ -7,7 +7,7 @@ template.innerHTML = `
 button {
   background-color: transparent;
   border-color: transparent;
-  margin-left: var(--space-1);
+  margin-left: var(--m-space-1);
   display: flex;
   align-items: center;
   cursor: pointer;

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

@@ -3,19 +3,19 @@ import {ApiBaseElement} from './api-base.js'
 
 // Template for the console panel
 const template = `
-<div id="console-container" style="position: relative; background: var(--base-background-color); padding: var(--space-0) var(--space-3) var(--space-7) var(--space-4); overflow-y: scroll; border-top: 1px solid var(--card-border-color); height: 100%; max-height: 100%;">
-  <div style=" position: sticky; top: 0; left: 0; right: 0; margin-top: 0; margin-bottom: 0;">
-    <h3 class="config-label mar-t-0 mar-b-0" style="padding-top: var(--space-3); z-index: 32; background: var(--base-background-color);">
+<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">
       Console
     </h3>
-    <div style="background: var(--base-background-color); display: flex; justify-content: flex-end; align-items: center; padding: var(--space-0); padding-block-end: var(--space-2)">
+    <div class="bg-base flex items-center pad-0 pad-b-2 flex-end">
       <toggle-switch toggle-key="preserveLog">
-        <span class="slab-text" style="margin-left: var(--space-1);">Preserve Log</span>
+        <span class="slab-text mar-l-1">Preserve Log</span>
       </toggle-switch>
       <clear-button></clear-button>
     </div>
   </div>
-  <pre id="console-output" style="padding: 0; margin: 0 0 var(--space-4) 0; white-space: pre-wrap; word-wrap: break-word;"></pre>
+  <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>
 
 `

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

@@ -64,7 +64,7 @@ export class FetchButton extends ApiBaseElement {
 
       try {
         // TODO: This assumes only two functions types for the sake of releasing today
-        if (this.api.store.selectedFunctionType === 'sanity.function.document') {
+        if (this.api.store.selectedFunctionType === this.SANITY_FUNCTION_DOCUMENT) {
           await this.api.document({
             projectId: this.api.store.selectedProject,
             dataset: this.api.store.selectedDataset,

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

@@ -1,10 +1,10 @@
 class ApiVersionComponent extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
-<fieldset class="mar-t-sm">
+<fieldset class="mar-t-2">
     <label class="slab-text">
-      <span style="display: block; margin-bottom: var(--space-1);">API Version</span>
-      <input name="apiVersion" id="apiversion" style="background: transparent; border-color: light-dark(var(--gray-200), var(--gray-700)); height: 2.5rem; color: light-dark(var(--gray-950), var(--gray-300));">
+      <span class="block mar-b-1">API Version</span>
+      <input name="apiVersion" id="apiversion" class="transparent border-color component-color component-height">
     </label>
 </fieldset>
 `

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

@@ -1,10 +1,10 @@
 class DocumentIdFilter extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
-<fieldset class="mar-t-sm" style="margin-top: 12px !important;">
+<fieldset class="mar-t-2">
     <label class="slab-text">
-      <span style="display: block; margin-bottom: var(--space-1);">
-        <span style="display: flex; align-items: center;">
+      <span class="block mar-b-1">
+        <span class="flex items-center">
           Document ID
           <help-button>
             <p>Fill out "Document ID" text field and then click the "Fetch Document" button to pre-populate the Document panel.</p>
@@ -13,8 +13,8 @@ class DocumentIdFilter extends HTMLElement {
           </help-button>
         </span>
       </span>
-      <div style="display: flex; flex-direction: row; gap: var(--space-2);">
-        <input name="docid" id="docid" style="background: transparent; border-color: light-dark(var(--gray-200), var(--gray-700)); height: 2.5rem; color: light-dark(var(--gray-950), var(--gray-300));">
+      <div class="flex flex-direction-row gap-2">
+        <input name="docid" id="docid" class="transparent component-color border-color component-height">
         <fetch-button></fetch-button>
       </div>
     </label>

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

@@ -1,9 +1,9 @@
 class WithTokenComponent extends HTMLElement {
   connectedCallback() {
     this.innerHTML = `
-<fieldset class="mar-t-sm" style="display: flex; flex-direction: column; margin-top: 12px !important;">
-    <span class="slab-text" style="display: block; margin-bottom: var(--space-1);">
-        <span style="display: flex; align-items: center;">
+<fieldset class="mar-t-2" class="flex flex-col">
+    <span class="slab-text block mar-b-1">
+        <span class="flex items-center">
         With Token
         <help-button>
             <p><strong>With Token</strong> controls whether your function runs with or without authentication.</p>
@@ -12,7 +12,7 @@ class WithTokenComponent extends HTMLElement {
         </help-button>
         </span>
     </span>
-    <toggle-switch toggle-key="withToken" style="display: flex; height: 2.5rem;"></toggle-switch>
+    <toggle-switch toggle-key="withToken" class="flex component-height"></toggle-switch>
 </fieldset>
 `
   }

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

@@ -8,8 +8,8 @@ class FiltersComponent extends ApiBaseElement {
     )
 
     this.innerHTML = `
-        <form style="gap: 8px; padding-left: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--card-border-color);">
-          <fieldset style="display: flex; gap: var(--space-2);">
+        <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

package/dist/server/static/components/function-list.js

@@ -1,8 +1,8 @@
 /* globals customElements */
 import {ApiBaseElement} from './api-base.js'
 
-const template = `<ol class="hidden-lg" type="content" style="padding:0 16px;"></ol>
-<fieldset class="hidden block-lg" style="padding:0 var(--space-3); margin-bottom: var(--space-3);"><select class="dropdown-select"></select></fieldset>
+const template = `<ol class="hidden-lg pad-t-0 pad-b-0 pad-r-4 pad-l-4" type="content"></ol>
+<fieldset class="hidden block-lg pad-t-0 pad-b-0 pad-r-3 pad-l-3 mar-b-3"><select class="dropdown-select"></select></fieldset>
 `
 
 class FunctionList extends ApiBaseElement {
@@ -17,13 +17,22 @@ class FunctionList extends ApiBaseElement {
   }
   renderListItem = (func) => {
     const selected = this.api.store.selectedIndex === func.name ? 'selected' : ''
-    return `<li data-name="${func.name}" class="function-list-item ${selected} flex flex-column" style="padding: 16px 24px;">
+    return `<li data-name="${func.name}" class="function-list-item ${selected} flex flex-col pad-t-4 pad-b-4 pad-r-6 pad-l-6">
 <span class="function-list-item-label">${func.name}</span>
 <span class="function-list-item-type capitalize">${this.renderType(func.type)}</span>
 </li>`
   }
   renderType = (type) => {
-    return type.split('.').pop().replaceAll('-', ' ')
+    switch (type) {
+      case this.SANITY_FUNCTION_DOCUMENT:
+        return 'Document'
+      case this.SANITY_FUNCTION_MEDIA_LIBRARY_ASSET:
+        return 'Media Library'
+      case this.SANITY_FUNCTION_SCHEDULE:
+        return 'Schedule'
+      default:
+        return type.split('.').pop().replaceAll('-', ' ')
+    }
   }
   renderFunctions = () => {
     if (this.api.store.functions.length > 0) {
@@ -39,7 +48,7 @@ class FunctionList extends ApiBaseElement {
         })
         .join('')
     } else {
-      this.list.innerHTML = '<option class="pad-sm">No Blueprint found</li>'
+      this.list.innerHTML = '<option class="pad-2">No Blueprint found</li>'
       this.select.innerHTML = '<option>No blueprint.json file found</option>'
     }
   }

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

@@ -36,12 +36,15 @@ div[popover] {
   opacity: 1;
   visibility: visible;
 }
+.help-button-padding {
+  padding: 0.75rem;
+}
 </style>
 <button title="Info" popovertarget="popover-el">
     <svg data-sanity-icon="help-circle" width="1em" height="1em" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.5 13C12.5 11 14 11.5 14 10C14 9.34375 13.5 8.5 12.5 8.5C11.5 8.5 11 9 10.5 9.5M12.5 16V14.5M20.5 12.5C20.5 16.9183 16.9183 20.5 12.5 20.5C8.08172 20.5 4.5 16.9183 4.5 12.5C4.5 8.08172 8.08172 4.5 12.5 4.5C16.9183 4.5 20.5 8.08172 20.5 12.5Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path></svg>
 </button>
 <div popover="" id="popover-el">
-  <div style="padding: 0.75rem;">
+  <div class="help-button-padding">
     <slot>
     </slot>
   </div>