@sanity/runtime-cli 12.2.0 → 12.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (73) hide show
  1. package/README.md +32 -31
  2. package/dist/actions/blueprints/assets.d.ts +3 -4
  3. package/dist/actions/blueprints/assets.js +124 -2
  4. package/dist/baseCommands.d.ts +43 -7
  5. package/dist/baseCommands.js +82 -10
  6. package/dist/commands/blueprints/add.d.ts +2 -2
  7. package/dist/commands/blueprints/add.js +2 -2
  8. package/dist/commands/blueprints/config.d.ts +2 -2
  9. package/dist/commands/blueprints/config.js +2 -2
  10. package/dist/commands/blueprints/deploy.d.ts +2 -2
  11. package/dist/commands/blueprints/deploy.js +2 -2
  12. package/dist/commands/blueprints/destroy.d.ts +2 -2
  13. package/dist/commands/blueprints/destroy.js +2 -2
  14. package/dist/commands/blueprints/doctor.d.ts +5 -4
  15. package/dist/commands/blueprints/doctor.js +10 -12
  16. package/dist/commands/blueprints/info.d.ts +2 -2
  17. package/dist/commands/blueprints/info.js +2 -2
  18. package/dist/commands/blueprints/init.d.ts +2 -2
  19. package/dist/commands/blueprints/init.js +6 -9
  20. package/dist/commands/blueprints/logs.d.ts +2 -2
  21. package/dist/commands/blueprints/logs.js +2 -2
  22. package/dist/commands/blueprints/plan.d.ts +2 -2
  23. package/dist/commands/blueprints/plan.js +2 -2
  24. package/dist/commands/blueprints/stacks.d.ts +2 -2
  25. package/dist/commands/blueprints/stacks.js +2 -2
  26. package/dist/commands/functions/add.d.ts +2 -2
  27. package/dist/commands/functions/add.js +2 -2
  28. package/dist/commands/functions/dev.d.ts +2 -2
  29. package/dist/commands/functions/dev.js +2 -2
  30. package/dist/commands/functions/env/add.d.ts +2 -2
  31. package/dist/commands/functions/env/add.js +2 -2
  32. package/dist/commands/functions/env/list.d.ts +2 -2
  33. package/dist/commands/functions/env/list.js +2 -2
  34. package/dist/commands/functions/env/remove.d.ts +2 -2
  35. package/dist/commands/functions/env/remove.js +2 -2
  36. package/dist/commands/functions/logs.d.ts +3 -3
  37. package/dist/commands/functions/logs.js +7 -4
  38. package/dist/commands/functions/test.d.ts +3 -3
  39. package/dist/commands/functions/test.js +7 -4
  40. package/dist/cores/blueprints/config.d.ts +2 -5
  41. package/dist/cores/blueprints/deploy.js +29 -13
  42. package/dist/cores/blueprints/destroy.d.ts +2 -5
  43. package/dist/cores/blueprints/doctor.js +12 -2
  44. package/dist/cores/blueprints/info.js +2 -2
  45. package/dist/cores/blueprints/stacks.d.ts +2 -5
  46. package/dist/cores/functions/logs.d.ts +3 -1
  47. package/dist/cores/functions/logs.js +11 -2
  48. package/dist/cores/functions/test.d.ts +3 -1
  49. package/dist/cores/functions/test.js +11 -2
  50. package/dist/server/static/components/app.css +0 -116
  51. package/dist/server/static/components/clear-button.js +1 -1
  52. package/dist/server/static/components/console-panel.js +27 -6
  53. package/dist/server/static/components/fetch-button.js +1 -1
  54. package/dist/server/static/components/filter-api-version.js +39 -3
  55. package/dist/server/static/components/filter-document-id.js +39 -3
  56. package/dist/server/static/components/filter-with-token.js +27 -4
  57. package/dist/server/static/components/filters.js +127 -62
  58. package/dist/server/static/components/function-list.js +33 -13
  59. package/dist/server/static/components/network-spinner.js +6 -4
  60. package/dist/server/static/components/payload-panel.js +46 -24
  61. package/dist/server/static/components/response-panel.js +33 -6
  62. package/dist/server/static/components/rule-panel.js +13 -4
  63. package/dist/server/static/components/run-panel.js +14 -7
  64. package/dist/server/static/components/select-dropdown.js +34 -5
  65. package/dist/server/static/components/shared-styles.js +31 -0
  66. package/dist/server/static/components/toggle-switch.js +11 -2
  67. package/dist/utils/display/blueprints-formatting.d.ts +2 -2
  68. package/dist/utils/display/blueprints-formatting.js +31 -26
  69. package/dist/utils/find-function.d.ts +4 -0
  70. package/dist/utils/find-function.js +6 -0
  71. package/dist/utils/types.d.ts +21 -3
  72. package/oclif.manifest.json +281 -38
  73. package/package.json +2 -2
@@ -1,19 +1,49 @@
1
1
  /* globals customElements */
2
2
  import {ApiBaseElement} from './api-base.js'
3
+ import {getSharedStyleSheets} from './shared-styles.js'
3
4
 
4
- const template = `<ol class="hidden-lg pad-t-0 pad-b-0 pad-r-4 pad-l-4" type="content"></ol>
5
+ const template = document.createElement('template')
6
+ template.innerHTML = `
7
+ <ol class="hidden-lg pad-t-0 pad-b-0 pad-r-4 pad-l-4" type="content"></ol>
5
8
  <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>
6
9
  `
7
10
 
8
11
  class FunctionList extends ApiBaseElement {
12
+ constructor() {
13
+ super()
14
+ this.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true))
15
+ }
16
+
17
+ async connectedCallback() {
18
+ const sheets = await getSharedStyleSheets()
19
+
20
+ // Create a component-specific stylesheet that will be applied after shared styles
21
+ const componentSheet = new CSSStyleSheet()
22
+ await componentSheet.replace(`
23
+ select {
24
+ background: transparent !important;
25
+ color: light-dark(var(--gray-950), var(--gray-300)) !important;
26
+ }
27
+ `)
28
+
29
+ this.shadowRoot.adoptedStyleSheets = [...sheets, componentSheet]
30
+
31
+ this.list = this.shadowRoot.querySelector('ol')
32
+ this.select = this.shadowRoot.querySelector('select')
33
+ this.list.addEventListener('click', this.functionClicked)
34
+ this.select.addEventListener('change', this.functionSelected)
35
+ this.api.subscribe(this.renderFunctions, ['functions', 'selectedIndex'])
36
+ this.api.blueprint()
37
+ }
38
+
9
39
  functionClicked = (event) => {
10
- const name = event.srcElement.closest('li').dataset.name
40
+ const name = event.target.closest('li').dataset.name
11
41
  const target = this.api.store.functions.find((func) => func.name === name)
12
42
  this.api.store.selectedIndex = target.name
13
43
  this.api.store.selectedFunctionType = target.type
14
44
  }
15
45
  functionSelected = (event) => {
16
- this.api.store.selectedIndex = event.srcElement.value
46
+ this.api.store.selectedIndex = event.target.value
17
47
  }
18
48
  renderListItem = (func) => {
19
49
  const selected = this.api.store.selectedIndex === func.name ? 'selected' : ''
@@ -53,16 +83,6 @@ class FunctionList extends ApiBaseElement {
53
83
  }
54
84
  }
55
85
 
56
- connectedCallback() {
57
- this.innerHTML = template
58
- this.list = this.querySelector('ol')
59
- this.select = this.querySelector('select')
60
- this.list.addEventListener('click', this.functionClicked)
61
- this.select.addEventListener('change', this.functionSelected)
62
- this.api.subscribe(this.renderFunctions, ['functions', 'selectedIndex'])
63
- this.api.blueprint()
64
- }
65
-
66
86
  disconnectedCallback() {
67
87
  this.list.removeEventListener('click', this.functionClicked)
68
88
  this.select.removeEventListener('change', this.functionSelected)
@@ -1,6 +1,7 @@
1
1
  /* globals customElements HTMLElement */
2
- const template = `<style>
3
- network-spinner {
2
+ const template = document.createElement('template')
3
+ template.innerHTML = `<style>
4
+ :host {
4
5
  --track-width: 2px;
5
6
  --track-color: var(--card-border-color);
6
7
  --indicator-color: var(--text-color);
@@ -63,8 +64,9 @@ const template = `<style>
63
64
  </svg>`
64
65
 
65
66
  class NetworkSpinner extends HTMLElement {
66
- connectedCallback() {
67
- this.innerHTML = template
67
+ constructor() {
68
+ super()
69
+ this.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true))
68
70
  }
69
71
  }
70
72
 
@@ -3,11 +3,28 @@
3
3
  import {basicSetup, EditorView, json} from '../vendor/vendor.bundle.js'
4
4
  import {ApiBaseElement} from './api-base.js'
5
5
  import {sanityCodeMirrorTheme} from './codemirror-theme.js'
6
+ import {getSharedStyleSheets} from './shared-styles.js'
6
7
 
7
- function template({selectedEvent}) {
8
- const singleModeStyle = selectedEvent === 'update' ? ' class="hidden"' : ''
9
- const deltaModeStyle = selectedEvent !== 'update' ? '' : ' class="hidden"'
10
- return `<div id="payloadContainer" class="gutter-gradient relative h-100 max-h-100 y-scroll border-top border-top-none-l"${singleModeStyle}>
8
+ const template = document.createElement('template')
9
+ template.innerHTML = `
10
+ <style>
11
+ :host {
12
+ grid-area: payload;
13
+ max-height: 100%;
14
+ height: 100%;
15
+ overflow: hidden;
16
+ min-height: 0;
17
+ }
18
+
19
+ @media (max-width: 40rem) {
20
+ :host {
21
+ max-height: none;
22
+ min-height: 200px;
23
+ overflow: auto;
24
+ }
25
+ }
26
+ </style>
27
+ <div id="payloadContainer" class="gutter-gradient relative h-100 max-h-100 y-scroll border-top border-top-none-l">
11
28
  <div class="bg gutter-gradient sticky top-0 right-0 left-0 z-100">
12
29
  <div class="flex items-center space-between pad-t-2 pad-r-5 pad-b-2 pad-l-12">
13
30
  <h2 class="config-label mar-t-0 mar-b-0">Document</h2>
@@ -16,7 +33,7 @@ function template({selectedEvent}) {
16
33
  </div>
17
34
  <div id="payload" name="payload" class='max-h-100 min-h-0'></div>
18
35
  </div>
19
- <div id="deltaPayloadContainer" class="gutter-gradient relative h-100 max-h-100 y-scroll border-top border-top-none-l"${deltaModeStyle}>
36
+ <div id="deltaPayloadContainer" class="gutter-gradient relative h-100 max-h-100 y-scroll border-top border-top-none-l" style="display: none;">
20
37
  <div class="bg gutter-gradient sticky top-0 right-0 left-0 z-100">
21
38
  <div class="flex items-center space-between pad-t-2 pad-r-5 pad-b-2 pad-l-12">
22
39
  <h2 class="config-label mar-t-0 mar-b-0">Before Document</h2>
@@ -34,9 +51,30 @@ function template({selectedEvent}) {
34
51
  <div id="afterPayload" name="afterPayload" class='max-h-50 min-h-0'></div>
35
52
  </div>
36
53
  `
37
- }
38
54
 
39
55
  class PayloadPanel extends ApiBaseElement {
56
+ constructor() {
57
+ super()
58
+ this.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true))
59
+ }
60
+
61
+ async connectedCallback() {
62
+ const sheets = await getSharedStyleSheets()
63
+ this.shadowRoot.adoptedStyleSheets = sheets
64
+
65
+ const beforePayloadElem = this.shadowRoot.querySelector('#beforePayload')
66
+ const afterPayloadElem = this.shadowRoot.querySelector('#afterPayload')
67
+
68
+ this.api.store.beforePayload = attachEditorView(beforePayloadElem)
69
+ this.api.store.afterPayload = attachEditorView(afterPayloadElem)
70
+
71
+ const payloadElem = this.shadowRoot.querySelector('#payload')
72
+ this.api.store.payload = attachEditorView(payloadElem)
73
+
74
+ this.api.subscribe(this.updatePayload, ['document'])
75
+ this.api.subscribe(this.updateSelectedEvent, ['selectedEvent'])
76
+ }
77
+
40
78
  updatePayload = ({document}) => {
41
79
  if (!document) return
42
80
 
@@ -57,30 +95,14 @@ class PayloadPanel extends ApiBaseElement {
57
95
  updateSelectedEvent = ({selectedEvent}) => {
58
96
  console.log('updateSelectedEvent', selectedEvent)
59
97
 
60
- const payloadContainer = this.querySelector('#payloadContainer')
61
- const deltaPayloadContainer = this.querySelector('#deltaPayloadContainer')
98
+ const payloadContainer = this.shadowRoot.querySelector('#payloadContainer')
99
+ const deltaPayloadContainer = this.shadowRoot.querySelector('#deltaPayloadContainer')
62
100
 
63
101
  const isUpdateEvent = selectedEvent === 'update'
64
102
  payloadContainer.style.display = isUpdateEvent ? 'none' : 'block'
65
103
  deltaPayloadContainer.style.display = isUpdateEvent ? 'block' : 'none'
66
104
  }
67
- connectedCallback() {
68
- this.innerHTML = template({
69
- selectedEvent: this.api.store.selectedEvent,
70
- })
71
-
72
- const beforePayloadElem = this.querySelector('#beforePayload')
73
- const afterPayloadElem = this.querySelector('#afterPayload')
74
-
75
- this.api.store.beforePayload = attachEditorView(beforePayloadElem)
76
- this.api.store.afterPayload = attachEditorView(afterPayloadElem)
77
-
78
- const payloadElem = this.querySelector('#payload')
79
- this.api.store.payload = attachEditorView(payloadElem)
80
105
 
81
- this.api.subscribe(this.updatePayload, ['document'])
82
- this.api.subscribe(this.updateSelectedEvent, ['selectedEvent'])
83
- }
84
106
  disconnectedCallback() {
85
107
  if (this.api) {
86
108
  this.api.unsubscribe(this.updatePayload)
@@ -11,8 +11,28 @@ import {
11
11
  } from '../vendor/vendor.bundle.js'
12
12
  import {ApiBaseElement} from './api-base.js'
13
13
  import {sanityCodeMirrorTheme} from './codemirror-theme.js'
14
+ import {getSharedStyleSheets} from './shared-styles.js'
14
15
 
15
- const template = `<div class="border-left border-top border-top-none-l h-100 gutter-gradient max-h-100 overflow-hidden response-panel-grid">
16
+ const template = document.createElement('template')
17
+ template.innerHTML = `
18
+ <style>
19
+ :host {
20
+ grid-area: response;
21
+ max-height: 100%;
22
+ height: 100%;
23
+ overflow: hidden;
24
+ min-height: 0;
25
+ }
26
+
27
+ @media (max-width: 40rem) {
28
+ :host {
29
+ max-height: none;
30
+ min-height: 200px;
31
+ overflow: auto;
32
+ }
33
+ }
34
+ </style>
35
+ <div class="border-left border-top border-top-none-l h-100 gutter-gradient max-h-100 overflow-hidden response-panel-grid">
16
36
  <!-- Response Section -->
17
37
  <div class="y-scroll min-h-0">
18
38
  <div class="pad-b-12">
@@ -32,7 +52,12 @@ const template = `<div class="border-left border-top border-top-none-l h-100 gut
32
52
  </div>
33
53
  </div>
34
54
  `
55
+
35
56
  class ResponsePanel extends ApiBaseElement {
57
+ constructor() {
58
+ super()
59
+ this.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true))
60
+ }
36
61
  updateResponse = ({result}) => {
37
62
  if (!result) return
38
63
 
@@ -72,11 +97,13 @@ class ResponsePanel extends ApiBaseElement {
72
97
  }
73
98
  }
74
99
 
75
- connectedCallback() {
76
- this.innerHTML = template
77
- this.response = this.querySelector('#response')
78
- this.size = this.querySelector('#size')
79
- this.time = this.querySelector('#time')
100
+ async connectedCallback() {
101
+ const sheets = await getSharedStyleSheets()
102
+ this.shadowRoot.adoptedStyleSheets = sheets
103
+
104
+ this.response = this.shadowRoot.querySelector('#response')
105
+ this.size = this.shadowRoot.querySelector('#size')
106
+ this.time = this.shadowRoot.querySelector('#time')
80
107
  if (this.api) {
81
108
  this.api.subscribe(this.updateResponse, ['result'])
82
109
  if (this.api.store.result) {
@@ -4,8 +4,10 @@
4
4
  import {basicSetup, EditorState, EditorView, json} from '../vendor/vendor.bundle.js'
5
5
  import {ApiBaseElement} from './api-base.js'
6
6
  import {sanityCodeMirrorTheme} from './codemirror-theme.js'
7
+ import {getSharedStyleSheets} from './shared-styles.js'
7
8
 
8
- const template = `<div class="border-left y-scroll min-h-0">
9
+ const template = document.createElement('template')
10
+ template.innerHTML = `<div class="border-left y-scroll min-h-0">
9
11
  <div>
10
12
  <h3 class="config-label mar-t-0 hidden">Filter/Projection</h3>
11
13
  <header class='flex space-between'>
@@ -17,7 +19,12 @@ const template = `<div class="border-left y-scroll min-h-0">
17
19
  </div>
18
20
  </div>
19
21
  `
22
+
20
23
  class RulePanel extends ApiBaseElement {
24
+ constructor() {
25
+ super()
26
+ this.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true))
27
+ }
21
28
  updateRule = () => {
22
29
  const {functions, rule, selectedIndex} = this.api.store
23
30
  const func = functions.find((func) => func.name === selectedIndex)
@@ -34,9 +41,11 @@ class RulePanel extends ApiBaseElement {
34
41
  }
35
42
  }
36
43
 
37
- connectedCallback() {
38
- this.innerHTML = template
39
- this.rule = this.querySelector('#rule')
44
+ async connectedCallback() {
45
+ const sheets = await getSharedStyleSheets()
46
+ this.shadowRoot.adoptedStyleSheets = sheets
47
+
48
+ this.rule = this.shadowRoot.querySelector('#rule')
40
49
 
41
50
  if (this.api) {
42
51
  this.api.subscribe(this.updateRule, ['selectedIndex', 'functions'])
@@ -1,10 +1,12 @@
1
1
  /* globals customElements document */
2
2
  import {ApiBaseElement} from './api-base.js'
3
+ import {getSharedStyleSheets} from './shared-styles.js'
3
4
 
4
5
  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>
5
6
  <span title="Type CTRL + Enter to Run">Run</span>`
6
7
 
7
- const template = `<div class="pad-3">
8
+ const template = document.createElement('template')
9
+ template.innerHTML = `<div class="pad-3">
8
10
  <button ord="primary" class="items-center sanity-button">
9
11
  <span class="flex pad-3 gap-25 justify-content-center flex-row">
10
12
  ${runTemplate}
@@ -12,7 +14,12 @@ const template = `<div class="pad-3">
12
14
  </button>
13
15
  </div>
14
16
  `
17
+
15
18
  class RunPanel extends ApiBaseElement {
19
+ constructor() {
20
+ super()
21
+ this.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true))
22
+ }
16
23
  invoke = () => {
17
24
  const selectedEvent = this.api.store.selectedEvent
18
25
  const docFunction = this.api.store.selectedFunctionType === this.SANITY_FUNCTION_DOCUMENT
@@ -41,7 +48,7 @@ class RunPanel extends ApiBaseElement {
41
48
  }
42
49
  const context = {
43
50
  clientOptions: {
44
- apiVersion: document.querySelector('#apiversion').value,
51
+ apiVersion: this.api.store.apiVersion,
45
52
  dataset: this.api.store.selectedDataset,
46
53
  projectId: this.api.store.selectedProject,
47
54
  token: this.api.store.withToken,
@@ -86,11 +93,11 @@ class RunPanel extends ApiBaseElement {
86
93
  }
87
94
  }
88
95
 
89
- connectedCallback() {
90
- this.innerHTML = template
91
- this.datasetname = document.querySelector('#datasetname')
92
- this.productId = document.querySelector('#project')
93
- this.button = this.querySelector('button')
96
+ async connectedCallback() {
97
+ const sheets = await getSharedStyleSheets()
98
+ this.shadowRoot.adoptedStyleSheets = sheets
99
+
100
+ this.button = this.shadowRoot.querySelector('button')
94
101
  this.buttonText = this.button.querySelector('span')
95
102
  this.button.addEventListener('click', this.invoke)
96
103
  document.addEventListener('keydown', this.onKeyDown)
@@ -1,10 +1,12 @@
1
1
  /* globals customElements */
2
2
  import {ApiBaseElement} from './api-base.js'
3
+ import {getSharedStyleSheets} from './shared-styles.js'
3
4
 
4
- const dropdownTemplate = ({label}) => `
5
+ const template = document.createElement('template')
6
+ template.innerHTML = `
5
7
  <fieldset class="mar-t-2">
6
8
  <label class="slab-text">
7
- <span class="block mar-b-1">${label}</span>
9
+ <span class="block mar-b-1"><slot name="label"></slot></span>
8
10
  <div data-ui="Select" class="relative inline-block w-100">
9
11
  <select
10
12
  data-ui="Select"
@@ -37,7 +39,31 @@ const dropdownTemplate = ({label}) => `
37
39
  `
38
40
 
39
41
  class SelectDropdown extends ApiBaseElement {
40
- connectedCallback() {
42
+ constructor() {
43
+ super()
44
+ this.attachShadow({mode: 'open'}).appendChild(template.content.cloneNode(true))
45
+ }
46
+
47
+ async connectedCallback() {
48
+ const sheets = await getSharedStyleSheets()
49
+
50
+ // Create a component-specific stylesheet that will be applied after shared styles
51
+ const componentSheet = new CSSStyleSheet()
52
+ await componentSheet.replace(`
53
+ :host {
54
+ align-self: flex-end;
55
+ }
56
+ fieldset {
57
+ margin-top: 0 !important;
58
+ }
59
+ select {
60
+ background: transparent !important;
61
+ color: light-dark(var(--gray-950), var(--gray-300)) !important;
62
+ }
63
+ `)
64
+
65
+ this.shadowRoot.adoptedStyleSheets = [...sheets, componentSheet]
66
+
41
67
  this.label = this.getAttribute('label') || 'Select'
42
68
  this.storeKey = this.getAttribute('store-key')
43
69
  this.selectedKey = this.getAttribute('selected-key')
@@ -45,8 +71,11 @@ class SelectDropdown extends ApiBaseElement {
45
71
  this.labelProp = this.getAttribute('label-prop') || 'displayName'
46
72
  this.subscribeTo = this.getAttribute('subscribe-to')
47
73
 
48
- this.innerHTML = dropdownTemplate({label: this.label})
49
- this.select = this.querySelector('select')
74
+ // Set label text in slot
75
+ const labelSlot = this.shadowRoot.querySelector('slot[name="label"]')
76
+ labelSlot.textContent = this.label
77
+
78
+ this.select = this.shadowRoot.querySelector('select')
50
79
  this.select.addEventListener('change', this.handleSelect)
51
80
 
52
81
  this.api.subscribe(this.renderOptions, [this.storeKey])
@@ -0,0 +1,31 @@
1
+ /* globals fetch */
2
+
3
+ let cachedStyleSheets = null
4
+
5
+ export async function getSharedStyleSheets() {
6
+ if (cachedStyleSheets) {
7
+ return cachedStyleSheets
8
+ }
9
+
10
+ try {
11
+ // Fetch both stylesheets
12
+ const [mCssResponse, appCssResponse] = await Promise.all([
13
+ fetch('./vendor/m-.css'),
14
+ fetch('./components/app.css'),
15
+ ])
16
+
17
+ const [mCssText, appCssText] = await Promise.all([mCssResponse.text(), appCssResponse.text()])
18
+
19
+ // Create CSSStyleSheet objects
20
+ const mSheet = new CSSStyleSheet()
21
+ const appSheet = new CSSStyleSheet()
22
+
23
+ await Promise.all([mSheet.replace(mCssText), appSheet.replace(appCssText)])
24
+
25
+ cachedStyleSheets = [mSheet, appSheet]
26
+ return cachedStyleSheets
27
+ } catch (error) {
28
+ console.error('Failed to load shared stylesheets:', error)
29
+ return []
30
+ }
31
+ }
@@ -6,6 +6,7 @@ template.innerHTML = `
6
6
  <style>
7
7
  :host {
8
8
  display: inline-block;
9
+ cursor: pointer;
9
10
  }
10
11
 
11
12
  .switch-container {
@@ -14,9 +15,11 @@ template.innerHTML = `
14
15
  }
15
16
 
16
17
  [part="track"] {
18
+ padding: 0.125em;
19
+ border-radius: 1em;
20
+ background-color: hsl(0, 0%, 67%);
17
21
  width: 1.5rem;
18
22
  height: 0.75rem;
19
- background-color: #dddddd;
20
23
  text-align: left;
21
24
  border-radius: 10px;
22
25
  overflow: hidden;
@@ -24,9 +27,11 @@ template.innerHTML = `
24
27
  }
25
28
 
26
29
  [part="slider"] {
30
+ border-radius: 1em;
31
+ background-color: hsl(0, 0%, 100%);
32
+ box-shadow: 0.0625em 0.0625em 0.125em hsla(0, 0%, 0%, 0.25);
27
33
  width: 50%;
28
34
  height: 100%;
29
- background-color: #777777;
30
35
  transition: all 256ms;
31
36
  position: absolute;
32
37
  top: 0;
@@ -37,6 +42,10 @@ template.innerHTML = `
37
42
  :host([checked]) [part="slider"] {
38
43
  transform: translateX(100%);
39
44
  }
45
+
46
+ :host([checked])::part(track) {
47
+ background-color: var(--color-interactive-primary-active-bg);
48
+ }
40
49
  </style>
41
50
 
42
51
 
@@ -1,8 +1,8 @@
1
1
  import type { Blueprint, Resource } from '@sanity/blueprints-parser';
2
2
  import { type DeployedResource, type Stack } from '../types.js';
3
3
  export declare function formatTitle(title: string, name: string): string;
4
- export declare function formatDeployedResourceTree(resources: DeployedResource[] | undefined): string;
5
- export declare function formatResourceTree(resources: Resource[] | undefined): string;
4
+ export declare function formatDeployedResourceTree(resources: DeployedResource[] | undefined, verbose?: boolean): string;
5
+ export declare function formatResourceTree(resources: Resource[] | undefined, verbose?: boolean): string;
6
6
  export declare function formatStackInfo(stack: Stack | Blueprint, isCurrentStack?: boolean): string;
7
7
  export declare function formatStacksListing(stacks: Stack[], currentStackId?: string): string;
8
8
  export declare function stackDeployDiff(localBlueprint: Blueprint, deployedStack: Stack): string | null;
@@ -47,28 +47,35 @@ const categoryByLabel = Object.values(RESOURCE_CATEGORIES).reduce((acc, curr) =>
47
47
  return acc;
48
48
  }, {});
49
49
  function resourceName(res, displayNameAttribute) {
50
+ const nameParts = [chalk.bold.green(res.name)];
50
51
  const displayName = displayNameAttribute &&
51
52
  displayNameAttribute in res &&
52
53
  typeof res[displayNameAttribute] === 'string' &&
53
54
  res[displayNameAttribute];
54
- const name = displayName || res.name || 'unnamed';
55
- return chalk.bold.green(name);
55
+ if (displayName && displayName !== res.name)
56
+ nameParts.push(chalk.green(`"${displayName}"`));
57
+ return nameParts.join(' ');
56
58
  }
57
- function deployedResourceName(res, displayNameAttribute) {
59
+ function deployedResourceName(res, displayNameAttribute, _verbose = false) {
60
+ const nameParts = [chalk.bold.green(res.name)];
58
61
  const displayName = displayNameAttribute &&
59
62
  typeof res.parameters[displayNameAttribute] === 'string' &&
60
63
  res.parameters[displayNameAttribute];
61
- const name = displayName || res.name || 'unnamed';
62
- const ids = idList(res).join(' ');
63
- return `${chalk.bold.green(name)} ${ids}`;
64
+ if (displayName && displayName !== res.name)
65
+ nameParts.push(chalk.green(`"${displayName}"`));
66
+ // if (verbose)
67
+ nameParts.push(idList(res));
68
+ return nameParts.join(' ');
64
69
  }
65
70
  function idList(res) {
66
- return [
67
- 'id' in res && typeof res.id === 'string' && res.id ? `${niceId(res.id)}` : '',
68
- 'externalId' in res && typeof res.externalId === 'string' && res.externalId
69
- ? `<${niceId(res.externalId)}>`
70
- : '',
71
- ];
71
+ const ids = [];
72
+ if ('id' in res && typeof res.id === 'string' && res.id) {
73
+ ids.push(niceId(res.id));
74
+ }
75
+ if ('externalId' in res && typeof res.externalId === 'string' && res.externalId) {
76
+ ids.push(`<${niceId(res.externalId)}>`);
77
+ }
78
+ return ids.length > 0 ? ids.join(' ') : '';
72
79
  }
73
80
  export function formatTitle(title, name) {
74
81
  return `${chalk.bold.blue(title)} ${chalk.bold(`"${name}"`)}`;
@@ -93,46 +100,44 @@ function categorizeResources(resources) {
93
100
  }
94
101
  return categorized;
95
102
  }
96
- function buildOutputTree(resources, name, mapToResource) {
103
+ function buildOutputTree(resources, createName, mapToResource, verbose = false) {
97
104
  const output = [`${chalk.bold.underline('Resources')} [${resources.length}]`];
105
+ const children = [];
98
106
  const categorized = categorizeResources(resources);
99
107
  for (const category of Object.values(categoryByLabel)) {
100
108
  const catResources = categorized[category.label];
101
109
  if (catResources && catResources.length > 0) {
102
- const catOutput = [`${chalk.bold(category.label)} [${catResources.length}]`];
110
+ children.push(`${chalk.bold(category.label)} [${catResources.length}]`);
103
111
  const details = [];
104
112
  for (const res of catResources) {
105
- details.push(name(category, res));
113
+ details.push(createName(category, res, verbose));
106
114
  if (category.formatDetails) {
107
115
  details.push(category.formatDetails(mapToResource(res)));
108
116
  }
109
117
  }
110
- catOutput.push(details);
111
- output.push(catOutput);
118
+ children.push(details);
112
119
  }
113
120
  }
114
121
  if (categorized['Other Resources'] && categorized['Other Resources'].length > 0) {
115
- const otherOutput = [
116
- `${chalk.bold('Other Resources')} [${categorized['Other Resources'].length}]`,
117
- ];
122
+ children.push(`${chalk.bold('Other Resources')} [${categorized['Other Resources'].length}]`);
118
123
  const otherResourcesOutput = categorized['Other Resources'].map((other) => {
119
124
  return `${chalk.yellow(other.name ?? 'unnamed')} ${chalk.dim(other.type)}`;
120
125
  });
121
- otherOutput.push(otherResourcesOutput);
122
- output.push(otherOutput);
126
+ children.push(otherResourcesOutput);
123
127
  }
128
+ output.push(children);
124
129
  return output;
125
130
  }
126
- export function formatDeployedResourceTree(resources) {
131
+ export function formatDeployedResourceTree(resources, verbose = false) {
127
132
  if (!resources || resources.length === 0)
128
133
  return ' Zero deployed resources';
129
- const output = buildOutputTree(resources, (category, res) => deployedResourceName(res, category.displayNameAttribute), (res) => ({ name: res.name, type: res.type, ...res.parameters }));
134
+ const output = buildOutputTree(resources, (category, res, v) => deployedResourceName(res, category.displayNameAttribute, v), (res) => ({ name: res.name, type: res.type, ...res.parameters }), verbose);
130
135
  return `${treeify(output)}\n`;
131
136
  }
132
- export function formatResourceTree(resources) {
137
+ export function formatResourceTree(resources, verbose = false) {
133
138
  if (!resources || resources.length === 0)
134
139
  return ' Zero resources';
135
- const output = buildOutputTree(resources, (category, res) => resourceName(res, category.displayNameAttribute), (res) => res);
140
+ const output = buildOutputTree(resources, (category, res) => resourceName(res, category.displayNameAttribute), (res) => res, verbose);
136
141
  return `${treeify(output)}\n`;
137
142
  }
138
143
  export function formatStackInfo(stack, isCurrentStack = false) {
@@ -1,4 +1,8 @@
1
1
  import type { Blueprint } from '@sanity/blueprints-parser';
2
2
  import type { DeployedResource, FunctionResource, Stack } from './types.js';
3
+ export declare function getFunctionNames(resources: Array<{
4
+ type?: string;
5
+ name?: string;
6
+ }> | undefined): string[];
3
7
  export declare function findFunctionInBlueprint(blueprint: Blueprint, name: string): FunctionResource;
4
8
  export declare function findFunctionInStack(stack: Stack, name: string): DeployedResource;
@@ -1,3 +1,9 @@
1
+ export function getFunctionNames(resources) {
2
+ return (resources
3
+ ?.filter((r) => r?.type?.startsWith('sanity.function.'))
4
+ .map((r) => r.name)
5
+ .filter((name) => typeof name === 'string') ?? []);
6
+ }
1
7
  export function findFunctionInBlueprint(blueprint, name) {
2
8
  const func = blueprint?.resources?.find((r) => r?.type?.startsWith('sanity.function.') && r.name === name);
3
9
  if (!func)