@sanity/runtime-cli 1.0.2

package/dist/commands/functions/invoke.js

@@ -0,0 +1,25 @@
+import { Args, Command, Flags } from '@oclif/core';
+import { invoke } from '../../actions/functions/invoke.js';
+export default class Invoke extends Command {
+    static args = {
+        id: Args.string({ description: 'The ID of the function to invoke', required: true }),
+    };
+    static description = 'Invoke a remote Sanity Function';
+    static examples = [
+        `<%= config.bin %> <%= command.id %> <ID> --data '{ "id": 1 }'`,
+        `<%= config.bin %> <%= command.id %> <ID> --file 'payload.json'`,
+    ];
+    static flags = {
+        data: Flags.string({ char: 'd', description: 'Data to send to the function', required: false }),
+        file: Flags.string({
+            char: 'f',
+            description: 'Read data from file and send to the function',
+            required: false,
+        }),
+    };
+    async run() {
+        const { args, flags } = await this.parse(Invoke);
+        const result = await invoke(args.id, { data: flags.data, file: flags.file });
+        this.log(JSON.stringify(result, null, 2));
+    }
+}

package/dist/commands/functions/logs.d.ts

@@ -0,0 +1,9 @@
+import { Command } from '@oclif/core';
+export default class Logs extends Command {
+    static args: {
+        id: import("@oclif/core/interfaces").Arg<string, Record<string, unknown>>;
+    };
+    static description: string;
+    static examples: string[];
+    run(): Promise<void>;
+}

package/dist/commands/functions/logs.js

@@ -0,0 +1,14 @@
+import { Args, Command } from '@oclif/core';
+import { logs } from '../../actions/functions/logs.js';
+export default class Logs extends Command {
+    static args = {
+        id: Args.string({ description: 'The ID of the function to retrieve logs for', required: true }),
+    };
+    static description = 'Retrieve logs for a Sanity Function';
+    static examples = ['<%= config.bin %> <%= command.id %> <ID>'];
+    async run() {
+        const { args } = await this.parse(Logs);
+        const result = await logs(args.id);
+        this.log(JSON.stringify(result, null, 2));
+    }
+}

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

@@ -0,0 +1,14 @@
+import { Command } from '@oclif/core';
+export default class Test extends Command {
+    static args: {
+        path: import("@oclif/core/interfaces").Arg<string, Record<string, unknown>>;
+    };
+    static description: string;
+    static examples: string[];
+    static flags: {
+        data: import("@oclif/core/interfaces").OptionFlag<string | undefined, import("@oclif/core/interfaces").CustomOptions>;
+        file: import("@oclif/core/interfaces").OptionFlag<string | undefined, import("@oclif/core/interfaces").CustomOptions>;
+        timeout: import("@oclif/core/interfaces").OptionFlag<number | undefined, import("@oclif/core/interfaces").CustomOptions>;
+    };
+    run(): Promise<void>;
+}

package/dist/commands/functions/test.js

@@ -0,0 +1,43 @@
+import { Args, Command, Flags } from '@oclif/core';
+import { testAction } from '../../actions/functions/test.js';
+export default class Test extends Command {
+    static args = {
+        path: Args.string({ description: 'The path to the function source code', required: true }),
+    };
+    static description = 'Invoke a local Sanity Function';
+    static examples = [
+        `<%= config.bin %> <%= command.id %> ./test.ts --data '{ "id": 1 }'`,
+        `<%= config.bin %> <%= command.id %> ./test.js --file 'payload.json'`,
+        `<%= config.bin %> <%= command.id %> ./test.ts --data '{ "id": 1 }' --timeout 60`,
+    ];
+    static flags = {
+        data: Flags.string({ char: 'd', description: 'Data to send to the function', required: false }),
+        file: Flags.string({
+            char: 'f',
+            description: 'Read data from file and send to the function',
+            required: false,
+        }),
+        timeout: Flags.integer({
+            char: 't',
+            description: 'Execution timeout value in seconds',
+            required: false,
+        }),
+    };
+    async run() {
+        const { args, flags } = await this.parse(Test);
+        const { json, logs, error } = await testAction(args.path, {
+            data: flags.data,
+            file: flags.file,
+            timeout: flags.timeout,
+        });
+        if (!error) {
+            this.log('Logs:');
+            this.log(logs);
+            this.log('Response:');
+            this.log(JSON.stringify(json, null, 2));
+        }
+        else {
+            this.log(error.toString());
+        }
+    }
+}

package/dist/config.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    server: {
+        url: string;
+    };
+};
+export default _default;

package/dist/config.js

@@ -0,0 +1,9 @@
+import { env } from 'node:process';
+const nodeEnv = env.NODE_ENV ?? 'development';
+const isDev = nodeEnv === 'development';
+const baseUrl = isDev ? 'http://localhost:4567' : '';
+export default {
+    server: {
+        url: baseUrl,
+    },
+};

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { run } from '@oclif/core';
+import { dev } from './actions/functions/dev.js';
+import { logs } from './actions/functions/logs.js';
+import { testAction } from './actions/functions/test.js';
+export { dev as devAction, logs as logsAction, testAction, run };

package/dist/index.js

@@ -0,0 +1,5 @@
+import { run } from '@oclif/core';
+import { dev } from './actions/functions/dev.js';
+import { logs } from './actions/functions/logs.js';
+import { testAction } from './actions/functions/test.js';
+export { dev as devAction, logs as logsAction, testAction, run };

package/dist/server/app.d.ts

@@ -0,0 +1,3 @@
+import { Hono } from 'hono';
+declare const app: Hono<import("hono/types").BlankEnv, import("hono/types").BlankSchema, "/">;
+export default app;

package/dist/server/app.js

@@ -0,0 +1,36 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { cwd } from 'node:process';
+import { serveStatic } from '@hono/node-server/serve-static';
+import { Hono } from 'hono';
+import invoke from '../utils/invoke-local.js';
+import isDependency from '../utils/is-dependency.js';
+function errorResponse(code, message, details = {}) {
+    return { error: { code, details, message } };
+}
+function getStaticPath() {
+    return isDependency('./server/static')
+        ? './node_modules/@sanity/runtime-cli/dist/server/static'
+        : './src/server/static';
+}
+const app = new Hono();
+app.use('*', serveStatic({ root: getStaticPath() }));
+app.get('/blueprint', async (c) => {
+    const response = JSON.parse(readFileSync(join(cwd(), './blueprints.json')).toString());
+    return c.json(response);
+});
+app.post('/invoke', async (c) => {
+    const { data = {}, func } = await c.req.json();
+    const response = await invoke(func, { data: JSON.parse(data) });
+    return c.json(response);
+});
+app
+    .notFound((c) => c.json(errorResponse('NOT_FOUND', 'Not Found', {
+    method: c.req.method,
+    path: c.req.path,
+}), 404))
+    .onError((err, c) => c.json(errorResponse('INTERNAL_SERVER_ERROR', 'Internal Server Error', {
+    error: err.message,
+    stack: err,
+}), 500));
+export default app;

package/dist/server/static/api.js

@@ -0,0 +1,50 @@
+/* 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?.resources.filter((resource) => resource.kind === 'function')
+
+      store.functions = functions
+      store.selectedIndex = functions[0].src
+    })
+}

package/dist/server/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/components/app.css

@@ -0,0 +1,155 @@
+:root {
+  --card-bg-color: light-dark(#f6f6f8, #0d0e12);
+  --card-border-color: light-dark(#dbdce2, #252837);
+  --text-color: light-dark(#242736, #e3e4e8);
+  --button-text-color: light-dark(white, #0d0e12);
+  --button-background-color: light-dark(rgb(85, 107, 252), rgb(120, 152, 255));
+  --button-background-color-hover: light-dark(rgb(64, 67, 231), rgb(170, 193, 255));
+  --button-border-color: light-dark(rgb(85, 107, 252), rgb(120, 152, 255));
+  --button-border-color-hover: light-dark(rgb(64, 67, 231), rgb(170, 193, 255));
+}
+html {
+  color-scheme: light dark;
+}
+
+body {
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Liberation Sans', Helvetica, Arial, system-ui, sans-serif;
+  background-color: var(--card-bg-color);
+  color: var(--text-color) !important;
+  min-height: 100vh;
+  display: grid;
+  grid-template-areas:
+    'header'
+    'left-sidebar'
+    'main'
+    'footer';
+  grid-template-rows: min-content min-content 1fr min-content;
+}
+body > header {
+  grid-area: header;
+}
+body > nav {
+  grid-area: left-sidebar;
+}
+body > main {
+  grid-area: main;
+}
+body > footer {
+  grid-area: footer;
+}
+
+@media (min-width: 40rem) {
+  body {
+    grid-template:
+      'header             header' min-content
+      'left-sidebar       main  ' 1fr
+      'footer             footer' min-content
+      / minmax(auto, var(--layout-max-sidebar-width, 16rem)) minmax(var(--layout-min-content-width, 16rem), 1fr);
+  }
+}
+
+@media (max-width: 40rem) {
+  button {
+    width: 100%;
+  }
+
+  .block-lg {
+    display: block !important;
+  }
+
+  .hidden-lg {
+    display: none;
+  }
+}
+
+header {
+  border-bottom: 1px solid var(--card-border-color);
+}
+
+footer {
+  border-top: 1px solid var(--card-border-color);
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.logo-image {
+  height: 2.25em;
+  width: auto;
+}
+
+.logo-image img {
+  width: 100%;
+  height: 100%;
+}
+
+.logo-text {
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Liberation Sans', Helvetica, Arial, system-ui, sans-serif;
+  font-weight: 500;
+  margin: 0px;
+  line-height: calc(1.46154);
+  letter-spacing: 0px;
+}
+
+.footer-text {
+  position: relative;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Liberation Sans', Helvetica, Arial, system-ui, sans-serif;
+  font-weight: 400;
+  padding: 1px 0px;
+  margin: 0px;
+  font-size: 0.8125rem;
+  line-height: calc(1.46154);
+  letter-spacing: 0px;
+  transform: translateY(0.3125rem);
+}
+
+.sanity-button {
+  color: var(--button-text-color) !important;
+  background-color: var(--button-background-color) !important;
+  border-color: var(--button-border-color) !important;
+}
+
+.sanity-button:hover {
+  background-color: var(--button-background-color-hover) !important;
+  border-color: var(--button-border-color-hover) !important;
+}
+
+.selected {
+  color: var(--button-text-color);
+  background-color: var(--button-background-color);
+}
+
+ol[type='content'] li:hover {
+  color: var(--button-text-color);
+  background-color: var(--button-background-color-hover) !important;
+}
+
+m-box,
+m-tabs {
+  background-color: var(--card-bg-color) !important;
+  border-color: var(--card-border-color) !important;
+  color: var(--text-color) !important;
+}
+
+m-tabs {
+  & > :is(a, button) {
+    color: var(--text-color) !important;
+  }
+}
+
+m-tabs {
+  & > :is(a, button) {
+    &[aria-selected='true'] {
+      border-color: var(--button-border-color) !important;
+    }
+  }
+}
+
+#payload,
+#response {
+  color: black;
+  background-color: white !important;
+}

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

@@ -0,0 +1,49 @@
+/* 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 = () => {
+    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('')
+  }
+
+  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/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/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/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)