@sanity/runtime-cli 12.3.0 → 13.0.0

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() {

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

@@ -1,19 +1,49 @@
 /* globals customElements */
 import {ApiBaseElement} from './api-base.js'
+import {getSharedStyleSheets} from './shared-styles.js'
 
-const template = `<ol class="hidden-lg pad-t-0 pad-b-0 pad-r-4 pad-l-4" type="content"></ol>
+const template = document.createElement('template')
+template.innerHTML = `
+<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 {
+  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(`
+      select {
+        background: transparent !important;
+        color: light-dark(var(--gray-950), var(--gray-300)) !important;
+      }
+    `)
+
+    this.shadowRoot.adoptedStyleSheets = [...sheets, componentSheet]
+
+    this.list = this.shadowRoot.querySelector('ol')
+    this.select = this.shadowRoot.querySelector('select')
+    this.list.addEventListener('click', this.functionClicked)
+    this.select.addEventListener('change', this.functionSelected)
+    this.api.subscribe(this.renderFunctions, ['functions', 'selectedIndex'])
+    this.api.blueprint()
+  }
+
   functionClicked = (event) => {
-    const name = event.srcElement.closest('li').dataset.name
+    const name = event.target.closest('li').dataset.name
     const target = this.api.store.functions.find((func) => func.name === name)
     this.api.store.selectedIndex = target.name
     this.api.store.selectedFunctionType = target.type
   }
   functionSelected = (event) => {
-    this.api.store.selectedIndex = event.srcElement.value
+    this.api.store.selectedIndex = event.target.value
   }
   renderListItem = (func) => {
     const selected = this.api.store.selectedIndex === func.name ? 'selected' : ''
@@ -53,16 +83,6 @@ class FunctionList extends ApiBaseElement {
     }
   }
 
-  connectedCallback() {
-    this.innerHTML = template
-    this.list = this.querySelector('ol')
-    this.select = this.querySelector('select')
-    this.list.addEventListener('click', this.functionClicked)
-    this.select.addEventListener('change', this.functionSelected)
-    this.api.subscribe(this.renderFunctions, ['functions', 'selectedIndex'])
-    this.api.blueprint()
-  }
-
   disconnectedCallback() {
     this.list.removeEventListener('click', this.functionClicked)
     this.select.removeEventListener('change', this.functionSelected)

package/dist/server/static/components/network-spinner.js

@@ -1,6 +1,7 @@
 /* globals customElements HTMLElement */
-const template = `<style>
-  network-spinner {
+const template = document.createElement('template')
+template.innerHTML = `<style>
+  :host {
     --track-width: 2px;
     --track-color: var(--card-border-color);
     --indicator-color: var(--text-color);
@@ -63,8 +64,9 @@ const template = `<style>
 </svg>`
 
 class NetworkSpinner extends HTMLElement {
-  connectedCallback() {
-    this.innerHTML = template
+  constructor() {
+    super()
+    this.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true))
   }
 }
 

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

@@ -3,11 +3,28 @@
 import {basicSetup, EditorView, json} from '../vendor/vendor.bundle.js'
 import {ApiBaseElement} from './api-base.js'
 import {sanityCodeMirrorTheme} from './codemirror-theme.js'
+import {getSharedStyleSheets} from './shared-styles.js'
 
-function template({selectedEvent}) {
-  const singleModeStyle = selectedEvent === 'update' ? ' class="hidden"' : ''
-  const deltaModeStyle = selectedEvent !== 'update' ? '' : ' class="hidden"'
-  return `<div id="payloadContainer" class="gutter-gradient relative h-100 max-h-100 y-scroll border-top border-top-none-l"${singleModeStyle}>
+const template = document.createElement('template')
+template.innerHTML = `
+<style>
+:host {
+  grid-area: payload;
+  max-height: 100%;
+  height: 100%;
+  overflow: hidden;
+  min-height: 0;
+}
+
+@media (max-width: 40rem) {
+  :host {
+    max-height: none;
+    min-height: 200px;
+    overflow: auto;
+  }
+}
+</style>
+<div id="payloadContainer" class="gutter-gradient relative h-100 max-h-100 y-scroll border-top border-top-none-l">
   <div class="bg gutter-gradient sticky top-0 right-0 left-0 z-100">
     <div class="flex items-center space-between pad-t-2 pad-r-5 pad-b-2 pad-l-12">
       <h2 class="config-label mar-t-0 mar-b-0">Document</h2>
@@ -16,7 +33,7 @@ function template({selectedEvent}) {
   </div>
   <div id="payload" name="payload" class='max-h-100 min-h-0'></div>
 </div>
-<div id="deltaPayloadContainer" class="gutter-gradient relative h-100 max-h-100 y-scroll border-top border-top-none-l"${deltaModeStyle}>
+<div id="deltaPayloadContainer" class="gutter-gradient relative h-100 max-h-100 y-scroll border-top border-top-none-l" style="display: none;">
   <div class="bg gutter-gradient sticky top-0 right-0 left-0 z-100">
     <div class="flex items-center space-between pad-t-2 pad-r-5 pad-b-2 pad-l-12">
       <h2 class="config-label mar-t-0 mar-b-0">Before Document</h2>
@@ -34,9 +51,30 @@ function template({selectedEvent}) {
   <div id="afterPayload" name="afterPayload" class='max-h-50 min-h-0'></div>
 </div>
 `
-}
 
 class PayloadPanel extends ApiBaseElement {
+  constructor() {
+    super()
+    this.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true))
+  }
+
+  async connectedCallback() {
+    const sheets = await getSharedStyleSheets()
+    this.shadowRoot.adoptedStyleSheets = sheets
+
+    const beforePayloadElem = this.shadowRoot.querySelector('#beforePayload')
+    const afterPayloadElem = this.shadowRoot.querySelector('#afterPayload')
+
+    this.api.store.beforePayload = attachEditorView(beforePayloadElem)
+    this.api.store.afterPayload = attachEditorView(afterPayloadElem)
+
+    const payloadElem = this.shadowRoot.querySelector('#payload')
+    this.api.store.payload = attachEditorView(payloadElem)
+
+    this.api.subscribe(this.updatePayload, ['document'])
+    this.api.subscribe(this.updateSelectedEvent, ['selectedEvent'])
+  }
+
   updatePayload = ({document}) => {
     if (!document) return
 
@@ -57,30 +95,14 @@ class PayloadPanel extends ApiBaseElement {
   updateSelectedEvent = ({selectedEvent}) => {
     console.log('updateSelectedEvent', selectedEvent)
 
-    const payloadContainer = this.querySelector('#payloadContainer')
-    const deltaPayloadContainer = this.querySelector('#deltaPayloadContainer')
+    const payloadContainer = this.shadowRoot.querySelector('#payloadContainer')
+    const deltaPayloadContainer = this.shadowRoot.querySelector('#deltaPayloadContainer')
 
     const isUpdateEvent = selectedEvent === 'update'
     payloadContainer.style.display = isUpdateEvent ? 'none' : 'block'
     deltaPayloadContainer.style.display = isUpdateEvent ? 'block' : 'none'
   }
-  connectedCallback() {
-    this.innerHTML = template({
-      selectedEvent: this.api.store.selectedEvent,
-    })
-
-    const beforePayloadElem = this.querySelector('#beforePayload')
-    const afterPayloadElem = this.querySelector('#afterPayload')
-
-    this.api.store.beforePayload = attachEditorView(beforePayloadElem)
-    this.api.store.afterPayload = attachEditorView(afterPayloadElem)
-
-    const payloadElem = this.querySelector('#payload')
-    this.api.store.payload = attachEditorView(payloadElem)
 
-    this.api.subscribe(this.updatePayload, ['document'])
-    this.api.subscribe(this.updateSelectedEvent, ['selectedEvent'])
-  }
   disconnectedCallback() {
     if (this.api) {
       this.api.unsubscribe(this.updatePayload)

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

@@ -11,8 +11,28 @@ import {
 } from '../vendor/vendor.bundle.js'
 import {ApiBaseElement} from './api-base.js'
 import {sanityCodeMirrorTheme} from './codemirror-theme.js'
+import {getSharedStyleSheets} from './shared-styles.js'
 
-const template = `<div class="border-left border-top border-top-none-l h-100 gutter-gradient max-h-100 overflow-hidden response-panel-grid">
+const template = document.createElement('template')
+template.innerHTML = `
+<style>
+:host {
+  grid-area: response;
+  max-height: 100%;
+  height: 100%;
+  overflow: hidden;
+  min-height: 0;
+}
+
+@media (max-width: 40rem) {
+  :host {
+    max-height: none;
+    min-height: 200px;
+    overflow: auto;
+  }
+}
+</style>
+<div class="border-left border-top border-top-none-l h-100 gutter-gradient max-h-100 overflow-hidden response-panel-grid">
     <!-- Response Section -->
         <div class="y-scroll min-h-0">
             <div class="pad-b-12">
@@ -32,7 +52,12 @@ const template = `<div class="border-left border-top border-top-none-l h-100 gut
       </div>
 </div>
 `
+
 class ResponsePanel extends ApiBaseElement {
+  constructor() {
+    super()
+    this.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true))
+  }
   updateResponse = ({result}) => {
     if (!result) return
 
@@ -72,11 +97,13 @@ class ResponsePanel extends ApiBaseElement {
     }
   }
 
-  connectedCallback() {
-    this.innerHTML = template
-    this.response = this.querySelector('#response')
-    this.size = this.querySelector('#size')
-    this.time = this.querySelector('#time')
+  async connectedCallback() {
+    const sheets = await getSharedStyleSheets()
+    this.shadowRoot.adoptedStyleSheets = sheets
+
+    this.response = this.shadowRoot.querySelector('#response')
+    this.size = this.shadowRoot.querySelector('#size')
+    this.time = this.shadowRoot.querySelector('#time')
     if (this.api) {
       this.api.subscribe(this.updateResponse, ['result'])
       if (this.api.store.result) {

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

@@ -4,8 +4,10 @@
 import {basicSetup, EditorState, EditorView, json} from '../vendor/vendor.bundle.js'
 import {ApiBaseElement} from './api-base.js'
 import {sanityCodeMirrorTheme} from './codemirror-theme.js'
+import {getSharedStyleSheets} from './shared-styles.js'
 
-const template = `<div class="border-left y-scroll min-h-0">
+const template = document.createElement('template')
+template.innerHTML = `<div class="border-left y-scroll min-h-0">
   <div>
     <h3 class="config-label mar-t-0 hidden">Filter/Projection</h3>
     <header class='flex space-between'>
@@ -17,7 +19,12 @@ const template = `<div class="border-left y-scroll min-h-0">
   </div>
 </div>
 `
+
 class RulePanel extends ApiBaseElement {
+  constructor() {
+    super()
+    this.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true))
+  }
   updateRule = () => {
     const {functions, rule, selectedIndex} = this.api.store
     const func = functions.find((func) => func.name === selectedIndex)
@@ -34,9 +41,11 @@ class RulePanel extends ApiBaseElement {
     }
   }
 
-  connectedCallback() {
-    this.innerHTML = template
-    this.rule = this.querySelector('#rule')
+  async connectedCallback() {
+    const sheets = await getSharedStyleSheets()
+    this.shadowRoot.adoptedStyleSheets = sheets
+
+    this.rule = this.shadowRoot.querySelector('#rule')
 
     if (this.api) {
       this.api.subscribe(this.updateRule, ['selectedIndex', 'functions'])

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

@@ -1,10 +1,12 @@
 /* globals customElements document */
 import {ApiBaseElement} from './api-base.js'
+import {getSharedStyleSheets} from './shared-styles.js'
 
 const runTemplate = `<svg data-sanity-icon="play" width="1em" height="1em" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.5 18.5V6.5L17.5 12.5L7.5 18.5Z" fill="currentColor" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"></path></svg>
 <span title="Type CTRL + Enter to Run">Run</span>`
 
-const template = `<div class="pad-3">
+const template = document.createElement('template')
+template.innerHTML = `<div class="pad-3">
     <button ord="primary" class="items-center sanity-button">
         <span class="flex pad-3 gap-25 justify-content-center flex-row">
             ${runTemplate}
@@ -12,7 +14,12 @@ const template = `<div class="pad-3">
     </button>
 </div>
 `
+
 class RunPanel extends ApiBaseElement {
+  constructor() {
+    super()
+    this.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true))
+  }
   invoke = () => {
     const selectedEvent = this.api.store.selectedEvent
     const docFunction = this.api.store.selectedFunctionType === this.SANITY_FUNCTION_DOCUMENT
@@ -41,7 +48,7 @@ class RunPanel extends ApiBaseElement {
     }
     const context = {
       clientOptions: {
-        apiVersion: document.querySelector('#apiversion').value,
+        apiVersion: this.api.store.apiVersion,
         dataset: this.api.store.selectedDataset,
         projectId: this.api.store.selectedProject,
         token: this.api.store.withToken,
@@ -86,11 +93,11 @@ class RunPanel extends ApiBaseElement {
     }
   }
 
-  connectedCallback() {
-    this.innerHTML = template
-    this.datasetname = document.querySelector('#datasetname')
-    this.productId = document.querySelector('#project')
-    this.button = this.querySelector('button')
+  async connectedCallback() {
+    const sheets = await getSharedStyleSheets()
+    this.shadowRoot.adoptedStyleSheets = sheets
+
+    this.button = this.shadowRoot.querySelector('button')
     this.buttonText = this.button.querySelector('span')
     this.button.addEventListener('click', this.invoke)
     document.addEventListener('keydown', this.onKeyDown)