@sanity/runtime-cli 16.0.3 → 17.1.0

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

@@ -1,4 +1,4 @@
-/* globals customElements document */
+/* globals customElements document window */
 import {ApiBaseElement} from './api-base.js'
 import {getSharedStyleSheets} from './shared-styles.js'
 
@@ -36,6 +36,16 @@ template.innerHTML = `
 `
 
 class ConsolePanel extends ApiBaseElement {
+  /**
+   * Nested context.invoke() output for the current run, kept as a list so the
+   * final render can order it by call order. Nested runs finish innermost-first
+   * (A → B → C resolves C then B), so each carries an `order` stamped when it was
+   * initiated; the final render sorts by it. Buffered separately so it survives
+   * the result render, which would otherwise overwrite the console when Preserve
+   * Log is off.
+   */
+  nestedEntries = []
+
   constructor() {
     super()
     this.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true))
@@ -45,25 +55,59 @@ class ConsolePanel extends ApiBaseElement {
     if (!this.consoleOutput || !result) return
 
     const {error, logs} = result
-    let update = ''
+    // Always show the logs. Then append the error, rather than replacing the logs with it.
+    let update = logs ?? ''
     if (error) {
-      // Display error details in the console
-      update = (error.stack || error.message || error.name) ?? 'An error occurred.'
-    } else {
-      // Display regular logs
-      update = logs ?? '' // Handle case where logs might be null/undefined
+      const errText = (error.stack || error.message || error.name) ?? 'An error occurred.'
+      update = update.trim() ? `${update.trimEnd()}\n${errText}` : errText
     }
 
     if (this.api.store.preserveLog) {
+      // Nested output was already appended live during the run; keep it in place.
       this.consoleOutput.innerText = this.consoleOutput.innerText + update
     } else {
-      this.consoleOutput.innerText = update
+      // Re-render so the nested output is shown in call order rather than the
+      // completion order it streamed in (and so it survives this overwrite).
+      this.consoleOutput.innerText = update + this.renderNestedEntries()
+    }
+  }
+
+  // Join the nested runs in call order (the order they were initiated).
+  renderNestedEntries = () =>
+    [...this.nestedEntries]
+      .sort((a, b) => a.order - b.order)
+      .map((e) => e.text)
+      .join('')
+
+  updateNested = (event) => {
+    const nestedInvoke = event.detail
+    if (!this.consoleOutput || !nestedInvoke) return
+
+    const {name, order, logs, json, error} = nestedInvoke
+    // Always show the logs. Then append the error, rather than replacing the logs with it.
+    let body = logs ?? ''
+    if (error) {
+      const errText = (error.stack || error.message || error.name) ?? 'An error occurred.'
+      body = body.trim() ? `${body.trimEnd()}\n${errText}` : errText
+    } else if (typeof json !== 'undefined') {
+      body += `${body && !body.endsWith('\n') ? '\n' : ''}→ returned ${JSON.stringify(json)}\n`
     }
+
+    const text = `↳ BEGIN: invoke('${name}')\n${body.trim()}\n↳ END: invoke('${name}')\n`
+    this.nestedEntries.push({order, text})
+    // Append live for immediate feedback; the final result render reorders.
+    this.consoleOutput.innerText = this.consoleOutput.innerText + text
+  }
+
+  // A new invocation is starting; drop the previous run's nested output.
+  resetNested = ({inprogress}) => {
+    if (inprogress) this.nestedEntries = []
   }
 
   clear = () => {
     const backUp = this.api.store.preserveLog
     this.api.store.result = {logs: undefined, error: undefined}
+    this.nestedEntries = []
     this.consoleOutput.innerText = ''
     this.api.store.preserveLog = backUp
   }
@@ -75,9 +119,14 @@ class ConsolePanel extends ApiBaseElement {
     this.consoleOutput = this.shadowRoot.querySelector('#console-output')
     this.addEventListener('clear-console', this.clear)
 
+    // Nested context.invoke() runs arrive as a stream of discrete DOM events
+    // (not state) so none are dropped when several land in one frame.
+    window.addEventListener('nested-invoke', this.updateNested)
+
     // Subscribe to changes in the result state to update the console
     if (this.api) {
       this.api.subscribe(this.updateConsole, ['result'])
+      this.api.subscribe(this.resetNested, ['inprogress'])
       // Initial update in case result is already populated
       if (this.api.store.result) {
         this.updateConsole({result: this.api.store.result})
@@ -90,9 +139,11 @@ class ConsolePanel extends ApiBaseElement {
 
   disconnectedCallback() {
     this.removeEventListener('clear-console', this.clear)
+    window.removeEventListener('nested-invoke', this.updateNested)
     // Unsubscribe when the element is removed from the DOM
     if (this.api) {
       this.api.unsubscribe(this.updateConsole)
+      this.api.unsubscribe(this.resetNested)
     }
   }
 }

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

@@ -43,14 +43,17 @@ class RulePanel extends ApiBaseElement {
         break
     }
 
-    const transaction = rule.state.update({
-      changes: {
-        from: 0,
-        insert: func.event ? JSON.stringify(func.event, null, 2) : '',
-        to: rule.state.doc.length,
-      },
-    })
-    rule.dispatch(transaction)
+    // Guard against the sate not being setup
+    if (rule?.state) {
+      const transaction = rule.state.update({
+        changes: {
+          from: 0,
+          insert: func.event ? JSON.stringify(func.event, null, 2) : '',
+          to: rule.state.doc.length,
+        },
+      })
+      rule.dispatch(transaction)
+    }
   }
 
   async connectedCallback() {

package/dist/server/static/components/shared-styles.js

@@ -1,31 +1,34 @@
 /* globals fetch */
 
-let cachedStyleSheets = null
+let sharedStyleSheetsPromise = null
 
-export async function getSharedStyleSheets() {
-  if (cachedStyleSheets) {
-    return cachedStyleSheets
-  }
+async function loadSharedStyleSheets() {
+  // Fetch both stylesheets
+  const [mCssResponse, appCssResponse] = await Promise.all([
+    fetch('./vendor/m-.css'),
+    fetch('./components/app.css'),
+  ])
 
-  try {
-    // Fetch both stylesheets
-    const [mCssResponse, appCssResponse] = await Promise.all([
-      fetch('./vendor/m-.css'),
-      fetch('./components/app.css'),
-    ])
+  const [mCssText, appCssText] = await Promise.all([mCssResponse.text(), appCssResponse.text()])
 
-    const [mCssText, appCssText] = await Promise.all([mCssResponse.text(), appCssResponse.text()])
+  // Create CSSStyleSheet objects
+  const mSheet = new CSSStyleSheet()
+  const appSheet = new CSSStyleSheet()
 
-    // Create CSSStyleSheet objects
-    const mSheet = new CSSStyleSheet()
-    const appSheet = new CSSStyleSheet()
+  await Promise.all([mSheet.replace(mCssText), appSheet.replace(appCssText)])
 
-    await Promise.all([mSheet.replace(mCssText), appSheet.replace(appCssText)])
+  return [mSheet, appSheet]
+}
 
-    cachedStyleSheets = [mSheet, appSheet]
-    return cachedStyleSheets
-  } catch (error) {
-    console.error('Failed to load shared stylesheets:', error)
-    return []
+export function getSharedStyleSheets() {
+  if (!sharedStyleSheetsPromise) {
+    sharedStyleSheetsPromise = loadSharedStyleSheets().catch((error) => {
+      console.error('Failed to load shared stylesheets:', error)
+      // Reset so a later caller can retry instead of being stuck with [].
+      sharedStyleSheetsPromise = null
+      return []
+    })
   }
+
+  return sharedStyleSheetsPromise
 }

package/dist/server/static/index.html

@@ -64,6 +64,6 @@
         <script src="./components/clear-button.js" type="module"></script>
         <script src="./components/help-button.js" type="module"></script>
         <script src="./components/fetch-button.js" type="module"></script>
-        <script src="./hot-reload.js" type="module"></script>
+        <script src="./web-socket.js" type="module"></script>
     </body>
 </html>

package/dist/server/static/vendor/design-tokens/color.css

@@ -37,39 +37,39 @@
   --gray-800: #252837;
   --gray-900: #1b1d27;
   --gray-950: #13141b;
-  --green-100: #dcfce7;
-  --green-200: #bbf7d0;
-  --green-300: #86efac;
-  --green-400: #4ade80;
-  --green-50: #f0fdf4;
-  --green-500: #22c55e;
+  --green-100: #c5fce8;
+  --green-200: #a9f9dc;
+  --green-300: #59f3ba;
+  --green-400: #0ff0a1;
+  --green-50: #e7fef5;
+  --green-500: #04b97a;
   --green-600: #01794f;
   --green-700: #015133;
   --green-800: #023120;
   --green-900: #06231a;
   --green-950: #071715;
-  --magenta-100: #fde8f1;
-  --magenta-200: #fcd5e8;
-  --magenta-300: #f7a5cc;
-  --magenta-400: #f06dac;
+  --magenta-100: #fde8ef;
+  --magenta-200: #fcdee9;
+  --magenta-300: #f7abc5;
+  --magenta-400: #f0709b;
   --magenta-50: #fef6f9;
-  --magenta-500: #e03d8d;
-  --magenta-600: #c41e72;
-  --magenta-700: #8c1452;
-  --magenta-800: #560d34;
-  --magenta-900: #380b24;
-  --magenta-950: #230717;
-  --orange-100: #ffecd9;
-  --orange-200: #ffdfc0;
-  --orange-300: #ffbe85;
-  --orange-400: #ff9c47;
+  --magenta-500: #e72767;
+  --magenta-600: #b11651;
+  --magenta-700: #7c1342;
+  --magenta-800: #4b1130;
+  --magenta-900: #341325;
+  --magenta-950: #1f0f14;
+  --orange-100: #ffeadb;
+  --orange-200: #ffddc7;
+  --orange-300: #ffb685;
+  --orange-400: #ff8e42;
   --orange-50: #fff7f0;
-  --orange-500: #f57c1f;
-  --orange-600: #d95f07;
-  --orange-700: #9e4204;
-  --orange-800: #4f2204;
-  --orange-900: #341803;
-  --orange-950: #200f02;
+  --orange-500: #fa6400;
+  --orange-600: #b14802;
+  --orange-700: #7c3404;
+  --orange-800: #461e07;
+  --orange-900: #32160b;
+  --orange-950: #21120d;
   --purple-100: #f1ebff;
   --purple-200: #ece1fe;
   --purple-300: #ccb1fc;
@@ -81,27 +81,27 @@
   --purple-800: #2f1862;
   --purple-900: #23173f;
   --purple-950: #181128;
-  --red-100: #ffe5e5;
-  --red-200: #ffd5d5;
-  --red-300: #ffaaaa;
-  --red-400: #ff7b7b;
-  --red-50: #fff5f5;
-  --red-500: #f94f4f;
-  --red-600: #e42f2f;
-  --red-700: #a81e1e;
-  --red-800: #551212;
-  --red-900: #380d0d;
-  --red-950: #230808;
+  --red-100: #ffe7e5;
+  --red-200: #ffdedc;
+  --red-300: #fdada5;
+  --red-400: #f77769;
+  --red-50: #fff6f5;
+  --red-500: #ef4434;
+  --red-600: #cc2819;
+  --red-700: #8b2018;
+  --red-800: #4d1714;
+  --red-900: #321615;
+  --red-950: #1e1011;
   --white: #ffffff;
-  --yellow-100: #fef9c3;
-  --yellow-200: #fef08a;
-  --yellow-300: #fde047;
-  --yellow-400: #facc15;
-  --yellow-50: #fefce8;
-  --yellow-500: #eab308;
-  --yellow-600: #ca8a04;
-  --yellow-700: #a16207;
-  --yellow-800: #713f12;
-  --yellow-900: #422006;
-  --yellow-950: #27130a;
+  --yellow-100: #fcf3bb;
+  --yellow-200: #f9e994;
+  --yellow-300: #f7d455;
+  --yellow-400: #f9bc15;
+  --yellow-50: #fefae1;
+  --yellow-500: #d28a04;
+  --yellow-600: #965908;
+  --yellow-700: #653a0b;
+  --yellow-800: #3b220c;
+  --yellow-900: #271a11;
+  --yellow-950: #181410;
 }

package/dist/server/static/vendor/design-tokens/index.css

@@ -7,7 +7,6 @@
 @import "./container.css";
 @import "./fontFamily.css";
 @import "./fontWeight.css";
-@import "./index.css";
 @import "./radius.css";
 @import "./shadow.css";
 @import "./space.css";