@sanity/runtime-cli 1.3.1 → 1.4.0

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

@@ -1,45 +1,41 @@
 /* globals customElements */
-import {EditorView, basicSetup, json} from '../vendor/vendor.bundle.js'
-import {ApiBaseElement} from './api-base.js'
-
+import { EditorView, basicSetup, json } from '../vendor/vendor.bundle.js';
+import { ApiBaseElement } from './api-base.js';
 const template = `<m-box>
     <h2 class="mar-t-0">Payload</h2>
     <div id="payload" name="payload"></div>
     <button ord="primary" class="mar-t-sm sanity-button">Invoke</button>
 </m-box>
-`
+`;
 class PayloadPanel extends ApiBaseElement {
-  invoke = () => {
-    const payloadText = this.api.store.payload.state.doc.text.join('') || '{}'
-    this.api.invoke(payloadText)
-  }
-  updateButtonText = ({inprogress}) => {
-    if (inprogress) {
-      this.button.setAttribute('disabled', '')
-      this.button.innerHTML = '<network-spinner></network-spinner>'
-    } else {
-      this.button.removeAttribute('disabled')
-      this.button.innerText = 'Invoke'
+    invoke = () => {
+        const payloadText = this.api.store.payload.state.doc.text.join('') || '{}';
+        this.api.invoke(payloadText);
+    };
+    updateButtonText = ({ inprogress }) => {
+        if (inprogress) {
+            this.button.setAttribute('disabled', '');
+            this.button.innerHTML = '<network-spinner></network-spinner>';
+        }
+        else {
+            this.button.removeAttribute('disabled');
+            this.button.innerText = 'Invoke';
+        }
+    };
+    connectedCallback() {
+        this.innerHTML = template;
+        this.payload = this.querySelector('#payload');
+        this.button = this.querySelector('button');
+        this.button.addEventListener('click', this.invoke);
+        this.api.subscribe(this.updateButtonText, ['inprogress']);
+        this.api.store.payload = new EditorView({
+            doc: '\n\n\n\n',
+            extensions: [basicSetup, json()],
+            parent: this.payload,
+        });
+    }
+    disconnectedCallback() {
+        this.button.removeEventListener('click', this.invoke);
     }
-  }
-
-  connectedCallback() {
-    this.innerHTML = template
-    this.payload = this.querySelector('#payload')
-    this.button = this.querySelector('button')
-    this.button.addEventListener('click', this.invoke)
-    this.api.subscribe(this.updateButtonText, ['inprogress'])
-
-    this.api.store.payload = new EditorView({
-      doc: '\n\n\n\n',
-      extensions: [basicSetup, json()],
-      parent: this.payload,
-    })
-  }
-
-  disconnectedCallback() {
-    this.button.removeEventListener('click', this.invoke)
-  }
 }
-
-customElements.define('payload-panel', PayloadPanel)
+customElements.define('payload-panel', PayloadPanel);

package/dist/server/static/components/response-panel.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -1,15 +1,7 @@
 /* eslint-disable unicorn/prefer-dom-node-text-content */
 /* globals customElements document */
-import {
-  EditorState,
-  EditorView,
-  basicSetup,
-  json,
-  prettyBytes,
-  prettyMilliseconds,
-} from '../vendor/vendor.bundle.js'
-import {ApiBaseElement} from './api-base.js'
-
+import { EditorState, EditorView, basicSetup, json, prettyBytes, prettyMilliseconds, } from '../vendor/vendor.bundle.js';
+import { ApiBaseElement } from './api-base.js';
 const template = `<m-box>
     <m-tabs role="tablist">
         <button id="a" role="tab" aria-selected="true">Response</button>
@@ -23,61 +15,55 @@ const template = `<m-box>
     </div>
     <div role="tabpanel" data-tab-id="b" class="pad-t-sm" hidden><pre></pre></div>
 </m-box>
-`
+`;
 class ResponsePanel extends ApiBaseElement {
-  switchTab = (e) => {
-    const selectedTabId = e.target.closest('[role=tab]').id
-
-    // Select the tab and its panel
-    for (const tab of e.currentTarget.querySelectorAll('[role=tab]')) {
-      tab.ariaSelected = tab.id === selectedTabId
+    switchTab = (e) => {
+        const selectedTabId = e.target.closest('[role=tab]').id;
+        // Select the tab and its panel
+        for (const tab of e.currentTarget.querySelectorAll('[role=tab]')) {
+            tab.ariaSelected = tab.id === selectedTabId;
+        }
+        for (const panel of document.querySelectorAll('[role=tabpanel')) {
+            panel.hidden = panel.dataset.tabId !== selectedTabId;
+        }
+    };
+    updateResponse = ({ result }) => {
+        const { error, json, logs, time } = result;
+        if (!error) {
+            const transaction = this.api.store.response.state.update({
+                changes: {
+                    from: 0,
+                    insert: JSON.stringify(json, null, 2),
+                    to: this.api.store.response.state.doc.length,
+                },
+            });
+            this.api.store.response.dispatch(transaction);
+            this.size.innerText = json ? prettyBytes(JSON.stringify(json).length) : '';
+            this.time.innerText = prettyMilliseconds(time);
+            this.consoleTab.innerText = logs;
+        }
+        else {
+            this.consoleTab.innerText = error?.details?.error;
+        }
+    };
+    connectedCallback() {
+        this.innerHTML = template;
+        this.response = this.querySelector('#response');
+        this.size = this.querySelector('#size');
+        this.time = this.querySelector('#time');
+        this.consoleTab = this.querySelector('pre');
+        this.tabs = this.querySelector('m-tabs');
+        this.tabs.addEventListener('click', this.switchTab);
+        this.api.subscribe(this.updateResponse, ['result']);
+        this.api.store.response = new EditorView({
+            doc: '\n\n\n\n',
+            extensions: [basicSetup, json(), EditorState.readOnly.of(true)],
+            parent: this.response,
+        });
     }
-
-    for (const panel of document.querySelectorAll('[role=tabpanel')) {
-      panel.hidden = panel.dataset.tabId !== selectedTabId
+    disconnectedCallback() {
+        this.tabs.removeEventListener('click', this.switchTab);
+        this.api.unsubscribe(this.updateResponse);
     }
-  }
-  updateResponse = ({result}) => {
-    const {error, json, logs, time} = result
-    if (!error) {
-      const transaction = this.api.store.response.state.update({
-        changes: {
-          from: 0,
-          insert: JSON.stringify(json, null, 2),
-          to: this.api.store.response.state.doc.length,
-        },
-      })
-      this.api.store.response.dispatch(transaction)
-
-      this.size.innerText = json ? prettyBytes(JSON.stringify(json).length) : ''
-      this.time.innerText = prettyMilliseconds(time)
-      this.consoleTab.innerText = logs
-    } else {
-      this.consoleTab.innerText = error?.details?.error
-    }
-  }
-
-  connectedCallback() {
-    this.innerHTML = template
-    this.response = this.querySelector('#response')
-    this.size = this.querySelector('#size')
-    this.time = this.querySelector('#time')
-    this.consoleTab = this.querySelector('pre')
-    this.tabs = this.querySelector('m-tabs')
-    this.tabs.addEventListener('click', this.switchTab)
-    this.api.subscribe(this.updateResponse, ['result'])
-
-    this.api.store.response = new EditorView({
-      doc: '\n\n\n\n',
-      extensions: [basicSetup, json(), EditorState.readOnly.of(true)],
-      parent: this.response,
-    })
-  }
-
-  disconnectedCallback() {
-    this.tabs.removeEventListener('click', this.switchTab)
-    this.api.unsubscribe(this.updateResponse)
-  }
 }
-
-customElements.define('response-panel', ResponsePanel)
+customElements.define('response-panel', ResponsePanel);

package/dist/server/static/static/api.js

@@ -0,0 +1,53 @@
+/* eslint-disable n/no-unsupported-features/node-builtins */
+import {Store} from './vendor/vendor.bundle.js'
+
+// eslint-disable-next-line new-cap
+const store = Store()
+
+export default function API() {
+  return {
+    blueprint,
+    invoke,
+    store,
+    subscribe: store.subscribe,
+    unsubscribe: store.unsubscribe,
+  }
+}
+
+function invoke(payloadText = '{}') {
+  store.inprogress = true
+  const start = Date.now()
+  const payload = {
+    data: payloadText,
+    func: store.selectedIndex,
+  }
+  fetch('/invoke', {
+    body: JSON.stringify(payload),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+  })
+    .then((response) => response.json())
+    .then((data) => {
+      store.inprogress = false
+      store.result = {
+        ...data,
+        time: Date.now() - start,
+      }
+    })
+}
+
+function blueprint() {
+  fetch('/blueprint')
+    .then((response) => response.json())
+    .then((json) => {
+      const functions = json?.document?.resources.filter((resource) => resource.kind === 'function')
+
+      store.functions = functions
+      store.selectedIndex = functions[0].src
+    })
+    .catch(() => {
+      store.functions = []
+    })
+}

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

@@ -0,0 +1,10 @@
+/* globals HTMLElement */
+import apiConstructor from '../api.js'
+const api = apiConstructor()
+
+export class ApiBaseElement extends HTMLElement {
+  constructor() {
+    super()
+    this.api = api
+  }
+}

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

@@ -0,0 +1,54 @@
+/* globals customElements */
+import {ApiBaseElement} from './api-base.js'
+
+const template = `<ol class="hidden-lg" type="content"></ol>
+<fieldset class="pad-sm hidden block-lg"><select></select></fieldset>
+`
+
+class FunctionList extends ApiBaseElement {
+  functionClicked = (event) => {
+    // eslint-disable-next-line unicorn/prefer-dom-node-text-content
+    const target = this.api.store.functions.find((func) => func.name === event.srcElement.innerText)
+    this.api.store.selectedIndex = target.src
+  }
+  functionSelected = (event) => {
+    this.api.store.selectedIndex = event.srcElement.value
+  }
+  renderFunctions = () => {
+    if (this.api.store.functions.length > 0) {
+      this.list.innerHTML = this.api.store.functions
+        .map((func) => {
+          const selected = this.api.store.selectedIndex === func.src ? 'selected' : ''
+          return `<li class="pad-sm ${selected}">${func.name}</li>`
+        })
+        .join('')
+      this.select.innerHTML = this.api.store.functions
+        .map((func) => {
+          const selected = this.api.store.selectedIndex === func.src ? 'selected' : ''
+          return `<option value="${func.src}" ${selected}>${func.name}</option>`
+        })
+        .join('')
+    } else {
+      this.list.innerHTML = '<option class="pad-sm">No blueprint.json file found</li>'
+      this.select.innerHTML = '<option>No blueprint.json file found</option>'
+    }
+  }
+
+  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)
+    this.api.unsubscribe(this.renderFunctions)
+  }
+}
+
+customElements.define('function-list', FunctionList)

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

@@ -0,0 +1,71 @@
+/* globals customElements HTMLElement */
+const template = `<style>
+  network-spinner {
+    --track-width: 2px;
+    --track-color: var(--card-border-color);
+    --indicator-color: var(--text-color);
+    --speed: 2s;
+
+    display: inline-flex;
+    width: 1em;
+    height: 1em;
+    flex: none;
+  }
+
+  .spinner {
+    flex: 1 1 auto;
+    height: 100%;
+    width: 100%;
+  }
+
+  .spinner__track,
+  .spinner__indicator {
+    fill: none;
+    stroke-width: var(--track-width);
+    r: calc(0.5em - var(--track-width) / 2);
+    cx: 0.5em;
+    cy: 0.5em;
+    transform-origin: 50% 50%;
+  }
+
+  .spinner__track {
+    stroke: var(--track-color);
+    transform-origin: 0% 0%;
+  }
+
+  .spinner__indicator {
+    stroke: var(--indicator-color);
+    stroke-linecap: round;
+    stroke-dasharray: 150% 75%;
+    animation: spin var(--speed) linear infinite;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+      stroke-dasharray: 0.05em, 3em;
+    }
+
+    50% {
+      transform: rotate(450deg);
+      stroke-dasharray: 1.375em, 1.375em;
+    }
+
+    100% {
+      transform: rotate(1080deg);
+      stroke-dasharray: 0.05em, 3em;
+    }
+  }
+</style>
+<svg part="base" class="spinner" role="progressbar" aria-label="loading">
+    <circle class="spinner__track"></circle>
+    <circle class="spinner__indicator"></circle>
+</svg>`
+
+class NetworkSpinner extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = template
+  }
+}
+
+customElements.define('network-spinner', NetworkSpinner)

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

@@ -0,0 +1,45 @@
+/* globals customElements */
+import {EditorView, basicSetup, json} from '../vendor/vendor.bundle.js'
+import {ApiBaseElement} from './api-base.js'
+
+const template = `<m-box>
+    <h2 class="mar-t-0">Payload</h2>
+    <div id="payload" name="payload"></div>
+    <button ord="primary" class="mar-t-sm sanity-button">Invoke</button>
+</m-box>
+`
+class PayloadPanel extends ApiBaseElement {
+  invoke = () => {
+    const payloadText = this.api.store.payload.state.doc.text.join('') || '{}'
+    this.api.invoke(payloadText)
+  }
+  updateButtonText = ({inprogress}) => {
+    if (inprogress) {
+      this.button.setAttribute('disabled', '')
+      this.button.innerHTML = '<network-spinner></network-spinner>'
+    } else {
+      this.button.removeAttribute('disabled')
+      this.button.innerText = 'Invoke'
+    }
+  }
+
+  connectedCallback() {
+    this.innerHTML = template
+    this.payload = this.querySelector('#payload')
+    this.button = this.querySelector('button')
+    this.button.addEventListener('click', this.invoke)
+    this.api.subscribe(this.updateButtonText, ['inprogress'])
+
+    this.api.store.payload = new EditorView({
+      doc: '\n\n\n\n',
+      extensions: [basicSetup, json()],
+      parent: this.payload,
+    })
+  }
+
+  disconnectedCallback() {
+    this.button.removeEventListener('click', this.invoke)
+  }
+}
+
+customElements.define('payload-panel', PayloadPanel)

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

@@ -0,0 +1,83 @@
+/* eslint-disable unicorn/prefer-dom-node-text-content */
+/* globals customElements document */
+import {
+  EditorState,
+  EditorView,
+  basicSetup,
+  json,
+  prettyBytes,
+  prettyMilliseconds,
+} from '../vendor/vendor.bundle.js'
+import {ApiBaseElement} from './api-base.js'
+
+const template = `<m-box>
+    <m-tabs role="tablist">
+        <button id="a" role="tab" aria-selected="true">Response</button>
+        <button id="b" role="tab">Console</button>
+    </m-tabs>
+    <div role="tabpanel" data-tab-id="a" class="pad-t-sm">
+        <div class="mar-b-sm">
+            <span id="time"></span> <span id="size"></span>
+        </div>
+        <div id="response" name="response"></div>
+    </div>
+    <div role="tabpanel" data-tab-id="b" class="pad-t-sm" hidden><pre></pre></div>
+</m-box>
+`
+class ResponsePanel extends ApiBaseElement {
+  switchTab = (e) => {
+    const selectedTabId = e.target.closest('[role=tab]').id
+
+    // Select the tab and its panel
+    for (const tab of e.currentTarget.querySelectorAll('[role=tab]')) {
+      tab.ariaSelected = tab.id === selectedTabId
+    }
+
+    for (const panel of document.querySelectorAll('[role=tabpanel')) {
+      panel.hidden = panel.dataset.tabId !== selectedTabId
+    }
+  }
+  updateResponse = ({result}) => {
+    const {error, json, logs, time} = result
+    if (!error) {
+      const transaction = this.api.store.response.state.update({
+        changes: {
+          from: 0,
+          insert: JSON.stringify(json, null, 2),
+          to: this.api.store.response.state.doc.length,
+        },
+      })
+      this.api.store.response.dispatch(transaction)
+
+      this.size.innerText = json ? prettyBytes(JSON.stringify(json).length) : ''
+      this.time.innerText = prettyMilliseconds(time)
+      this.consoleTab.innerText = logs
+    } else {
+      this.consoleTab.innerText = error?.details?.error
+    }
+  }
+
+  connectedCallback() {
+    this.innerHTML = template
+    this.response = this.querySelector('#response')
+    this.size = this.querySelector('#size')
+    this.time = this.querySelector('#time')
+    this.consoleTab = this.querySelector('pre')
+    this.tabs = this.querySelector('m-tabs')
+    this.tabs.addEventListener('click', this.switchTab)
+    this.api.subscribe(this.updateResponse, ['result'])
+
+    this.api.store.response = new EditorView({
+      doc: '\n\n\n\n',
+      extensions: [basicSetup, json(), EditorState.readOnly.of(true)],
+      parent: this.response,
+    })
+  }
+
+  disconnectedCallback() {
+    this.tabs.removeEventListener('click', this.switchTab)
+    this.api.unsubscribe(this.updateResponse)
+  }
+}
+
+customElements.define('response-panel', ResponsePanel)