@arcgis/coding-components 5.1.0-next.88 → 5.1.0-next.89

package/dist/components/arcgis-arcade-debugger-console/customElement.js

@@ -0,0 +1,201 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+import { c as h } from "../../chunks/runtime.js";
+import { css as u, html as r } from "lit";
+import { repeat as p } from "lit/directives/repeat.js";
+import { LitElement as f, safeClassMap as w, nothing as g } from "@arcgis/lumina";
+import { u as x } from "../../chunks/useT9n.js";
+import { load as k } from "@arcgis/lumina/controllers";
+import { i as S } from "../../chunks/monaco-importer.js";
+import { t as l } from "../../chunks/functional.js";
+import { d as $, g as y, c as b } from "../../chunks/debugger-value-styles.js";
+import { i as v, a as T, p as P, b as L, c as E, d as C, S as B, D as z, e as M } from "../../chunks/debugger-value-components.js";
+import { observeAncestorsMutation as I, unsafeGetCalciteModeName as V } from "@arcgis/toolkit/dom";
+import { generateGuid as D } from "@arcgis/toolkit/string";
+import { d as c } from "../../chunks/ArcadeDebuggerPreviewTabsState.js";
+import { Uri as A } from "monaco-editor";
+const N = u`:host{--calcite-block-padding: var(--calcite-spacing-sm);--breakpoints-popover-max-height: min(14rem, 20vh);display:block;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);overflow:hidden;height:100%;.console-shell,.tabs-container,calcite-tabs{height:100%}.tabs-container{flex:1 1 auto;min-height:0;overflow:hidden}.console-shell,calcite-tabs{display:flex;flex-direction:column;min-height:0}.console-shell{container-type:size;container-name:debugger-console}calcite-tab-nav{--calcite-size-2xl: var(--calcite-space-md);justify-content:flex-start;padding-inline:var(--calcite-spacing-sm)}calcite-tab-title{font-size:var(--calcite-font-size-sm)}calcite-tab{--calcite-tab-content-block-padding: 0;--calcite-tab-content-space-y: 0;display:flex;flex-direction:column;min-height:0}calcite-tab:not([selected]){display:none}.disabled-state-text{font-size:var(--calcite-font-size-sm);color:var(--calcite-color-text-3);font-style:italic;text-align:center;display:block;padding:var(--calcite-spacing-md)}.breakpoint-header{display:flex;align-items:flex-start;gap:var(--calcite-spacing-sm);padding:var(--calcite-spacing-sm);border-bottom:1px solid var(--calcite-color-border-3);background-color:var(--calcite-color-foreground-1)}.load-action{--calcite-action-background-color: var(--calcite-color-foreground-2);--calcite-internal-action-height: 1.25rem;--calcite-internal-action-padding-block: 0;--calcite-internal-action-padding-inline: var(--calcite-spacing-xs);margin-block:var(--calcite-spacing-xxs)}.breakpoint-code-viewer{margin-block:0;width:100%}.tab-panel{display:flex;flex:1 1 auto;min-height:0;overflow:hidden}.tab-panel>*{flex:1 1 auto;min-height:0}.tab-panel>calcite-tree{margin-inline-end:var(--calcite-space-sm)}.preview-panel{display:flex;flex:1 1 auto;min-height:0}.preview-empty-state{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:var(--calcite-spacing-md)}.preview-table-shell{display:flex;flex-direction:column;flex:1 1 auto;width:100%;min-height:0;overflow:hidden}.preview-table-summary{padding:var(--calcite-spacing-sm);border-bottom:1px solid var(--calcite-color-border-3);color:var(--calcite-color-text-2);font-family:var(--calcite-code-family);background-color:var(--calcite-color-foreground-1)}.table-scroll{overflow:auto;flex:1 1 auto;min-height:0;max-width:100%;background-color:var(--calcite-color-foreground-1);margin:var(--calcite-spacing-sm)}table{min-width:max-content;border-spacing:0;border-collapse:collapse;text-align:start;white-space:nowrap;thead{background-color:var(--calcite-color-foreground-2)}tr{border-top:1px solid var(--calcite-color-border-3);border-bottom:1px solid var(--calcite-color-border-3)}th,td{border-inline-start:1px solid var(--calcite-color-border-3);border-inline-end:1px solid var(--calcite-color-border-3);text-align:start;padding:var(--calcite-spacing-xxs);.string-value{white-space:pre}}th{font-weight:var(--calcite-font-weight-medium)}}.breakpoints-popover{--calcite-popover-max-size-x: min(22rem, 68vw)}.breakpoints-popover-content{max-block-size:var(--breakpoints-popover-max-height);overflow:hidden}.breakpoints-list{display:flex;flex-direction:column;gap:var(--calcite-spacing-xs);padding:var(--calcite-spacing-xs);min-width:min(18rem,58vw);max-block-size:var(--breakpoints-popover-max-height);overflow:auto}.breakpoints-popover .breakpoint-code-viewer{--calcite-font-size--2: var(--calcite-font-size--3);--calcite-spacing-md: var(--calcite-spacing-sm);--calcite-spacing-sm: var(--calcite-spacing-xs);--calcite-spacing-xs: var(--calcite-spacing-xxs)}.breakpoint-list-item{border:1px solid var(--calcite-color-border-3);border-radius:var(--calcite-corner-radius-sharp);background-color:var(--calcite-color-foreground-1);padding:var(--calcite-spacing-xxs)}.breakpoint-list-item--current{border-color:var(--calcite-color-brand)}.breakpoint-list-item-meta{color:var(--calcite-color-text-2);font-size:var(--calcite-font-size-xs);margin-bottom:var(--calcite-spacing-xxs)}}`;
+class F extends f {
+  constructor() {
+    super(...arguments), this.messages = x(), this._monacoEditor = k(S), this._breakpointPopoverId = `arcade-debugger-console-breakpoints-${D()}`, this.modelId = "";
+  }
+  static {
+    this.properties = { debuggerStore: 0, modelId: 1 };
+  }
+  static {
+    this.styles = [N, $, y()];
+  }
+  get breakpoints() {
+    return this.debuggerStore?.debuggerBreakpoints ?? [];
+  }
+  get previewTabsState() {
+    return this.debuggerStore.previewTabsState;
+  }
+  get lazyTreeState() {
+    return this.debuggerStore?.lazyTreeState;
+  }
+  load() {
+    this.manager.onLifecycle(() => {
+      const e = I(this.el, ["class"], this.updateTheme.bind(this));
+      return this.updateTheme(), () => e();
+    });
+  }
+  getContentAtLine(e) {
+    if (!this.modelId)
+      return "";
+    const t = this._monacoEditor.getModel(A.parse(this.modelId));
+    return t ? t.getLineContent(e) : "";
+  }
+  updateTheme() {
+    V(this.el) === "dark" ? this.elementInternals.states.add(b) : this.elementInternals.states.delete(b);
+  }
+  getBreakpointCode(e) {
+    return e == null ? this.messages.nocontent ?? "No content" : this.getContentAtLine(e) || (this.messages.nocontent ?? "No content");
+  }
+  getPreviewLoadErrorMessage() {
+    return this.messages.previewloaderror ?? "Unable to load preview.";
+  }
+  getBreakpointPositionText(e) {
+    return (this.messages.breakpointposition ?? "{position} of {count}" ?? "{position} of {count}").replace("{position}", String(e)).replace("{count}", String(this.breakpoints.length));
+  }
+  findCollectionItemByPreviewSegment(e, t) {
+    if (t.startsWith("name:")) {
+      const i = t.slice(5);
+      return e.find((a) => a.name === i)?.featureSet;
+    }
+    if (t.startsWith("id:")) {
+      const i = t.slice(3);
+      return e.find((a) => String(a.id) === i)?.featureSet;
+    }
+  }
+  getExpandedDebuggerMap(e) {
+    if (e == null || !v(e))
+      return null;
+    const t = e.expand();
+    return Array.isArray(t) ? null : t;
+  }
+  getPreviewRows(e) {
+    return e.map((t) => {
+      const i = this.getExpandedDebuggerMap(t);
+      return i || /* @__PURE__ */ new Map();
+    });
+  }
+  getExpandedDebuggerChild(e, t) {
+    if (!e || !v(e))
+      return;
+    const i = e.expand();
+    if (Array.isArray(i)) {
+      const a = Number(t);
+      return !Number.isInteger(a) || String(a) !== t ? void 0 : i[a];
+    }
+    return i.get(t);
+  }
+  async resolvePreviewValueFromSegments(e, t) {
+    if (!t.length)
+      return e;
+    if (!e)
+      return;
+    const [i, ...a] = t;
+    let s;
+    if (T(e)) {
+      const o = await e.load();
+      s = this.findCollectionItemByPreviewSegment(o, i);
+    } else
+      s = this.getExpandedDebuggerChild(e, i);
+    return await this.resolvePreviewValueFromSegments(s, a);
+  }
+  async resolvePreviewValue(e) {
+    const t = this.debuggerStore?.executionState?.result;
+    if (!t)
+      return;
+    const i = P(e);
+    if (!i)
+      return;
+    const { scopeName: a, rootName: s, pathSegments: o } = i, n = a === "globals" ? t.globals : a === "locals" ? t.locals : null;
+    if (n)
+      return await this.resolvePreviewValueFromSegments(n.get(s), o);
+  }
+  async loadPreview({ label: e, sourcePath: t, value: i }) {
+    const a = this.previewTabsState, { snapshot: s } = a.startLoad(e, t);
+    let o = i;
+    if (o == null)
+      try {
+        o = await this.resolvePreviewValue(t);
+      } catch {
+        a.setError(s, this.getPreviewLoadErrorMessage());
+        return;
+      }
+    if (o == null || !L(o) || typeof o.querySample != "function" || typeof o.schema != "function") {
+      a.setUnavailable(s, this.messages.previewunavailable ?? "This preview is no longer available in the current paused state.");
+      return;
+    }
+    try {
+      const { fields: n, features: d } = await o.querySample(), m = this.getPreviewRows(d);
+      a.setLoaded(s, n, m);
+    } catch {
+      a.setError(s, this.getPreviewLoadErrorMessage());
+    }
+  }
+  activateTab(e) {
+    if (e === c) {
+      this.previewTabsState.selectScope();
+      return;
+    }
+    this.previewTabsState.selectTab(e);
+    const t = this.previewTabsState.getTab(e);
+    t?.invalidated && this.loadPreview({ label: t.label, sourcePath: t.sourcePath });
+  }
+  closePreviewTab(e) {
+    e.closed = !1, this.previewTabsState.closeTab(e.tab);
+  }
+  scrollToSelectedBreakpoint(e) {
+    const t = e.currentTarget;
+    requestAnimationFrame(() => {
+      t?.querySelector(".breakpoint-list-item--current")?.scrollIntoView({ block: "center" });
+    });
+  }
+  renderPreviewLabel(e) {
+    return r`<bdi>${e}</bdi>`;
+  }
+  renderPreviewCell(e) {
+    return e ? E(e) || C(e) ? B({ value: e }) : r`<span class="xs"></span>` : r`<span class="xs"></span>`;
+  }
+  renderScopeEntryForScope(e, t, i) {
+    const [a, s] = i, o = `${t}.${a}`, n = this.lazyTreeState;
+    return n ? z({ name: a, value: s, messages: this.messages, path: `${e}.${a}`, lazyTreeState: n, previewLabel: o, previewSourcePath: M(e, a), previewLoading: this.previewTabsState.isTabLoading(o), onLoadPreview: (d) => {
+      this.loadPreview(d);
+    } }) : null;
+  }
+  renderBreakpointPopover(e) {
+    return this.breakpoints.length ? r`<calcite-popover .referenceElement=${this._breakpointPopoverId} placement=bottom-end scale=s auto-close focus-trap-disabled @calcitePopoverOpen=${(t) => this.scrollToSelectedBreakpoint(t)} .label=${this.messages.breakpoints ?? "Breakpoints"} class="breakpoints-popover" .heading=${this.messages.breakpoints ?? "Breakpoints"} heading-level=2><div class="breakpoints-popover-content"><div class="breakpoints-list">${this.breakpoints.map((t, i) => r`<div class=${w(t.line === e ? "breakpoint-list-item breakpoint-list-item--current" : "breakpoint-list-item")}><div class="breakpoint-list-item-meta"><bdi>${this.getBreakpointPositionText(i + 1)}</bdi></div><arcgis-code-viewer language=arcade class="breakpoint-code-viewer" .lineNumbers=${(a) => String(a + t.line - 1)}>${this.getBreakpointCode(t.line)}</arcgis-code-viewer></div>`)}</div></div></calcite-popover>` : null;
+  }
+  renderScopePanel() {
+    const e = this.debuggerStore?.executionState?.result, t = !!(e?.locals && e.locals.size > 0), i = Array.from(e?.globals ?? []), a = Array.from(e?.locals ?? []);
+    return e ? r`<calcite-tree .scale=${l.scale} @calciteTreeSelect=${l.oncalciteTreeSelect} .lines=${l.lines} .selectionMode=${l.selectionMode}><calcite-tree-item expanded>${this.messages.global ?? "Global"}<calcite-tree slot=children .lines=${l.lines} .selectionMode=${l.selectionMode} .scale=${l.scale} @calciteTreeSelect=${l.oncalciteTreeSelect}>${i.map((s) => this.renderScopeEntryForScope("globals", this.messages.global ?? "Global", s))}</calcite-tree></calcite-tree-item><calcite-tree-item expanded .disabled=${!t}>${this.messages.local ?? "Local"}<calcite-tree slot=children .lines=${l.lines} .selectionMode=${l.selectionMode} .scale=${l.scale} @calciteTreeSelect=${l.oncalciteTreeSelect}>${t ? a.map((s) => this.renderScopeEntryForScope("locals", this.messages.local ?? "Local", s)) : r`<span><i>${this.messages.nolocalscope ?? "No local scope"}</i></span>`}</calcite-tree></calcite-tree-item></calcite-tree>` : this.debuggerStore?.isExecuting ? r`<div class="preview-empty-state"><calcite-loader scale=s type=indeterminate .label=${this.messages.loading ?? "Loading"} .text=${this.messages.loading ?? "Loading"}></calcite-loader></div>` : r`<span class="disabled-state-text">${this.messages.notpaused ?? "Not paused"}</span>`;
+  }
+  renderPreviewPanel(e) {
+    switch (e.status) {
+      case "loading":
+        return r`<div class="preview-empty-state"><calcite-loader scale=s type=indeterminate .label=${this.messages.loadingpreview ?? "Loading preview"} .text=${this.messages.loadingpreview ?? "Loading preview"}></calcite-loader></div>`;
+      case "unavailable":
+      case "error":
+        return r`<span class="disabled-state-text">${e.message}</span>`;
+      case "loaded":
+        const { fields: t, label: i, rows: a } = e;
+        return !a.length || !t.length ? r`<span class="disabled-state-text">${this.messages.nopreviewrows ?? "No preview rows available."}</span>` : r`<div class="preview-table-shell"><div class="preview-table-summary">${this.renderPreviewLabel(i)}</div><div class="table-scroll"><table><thead><tr>${t.map((s) => r`<th><bdi>${s}</bdi></th>`)}</tr></thead><tbody>${a.map((s) => r`<tr>${t.map((o) => r`<td>${this.renderPreviewCell(s.get(o))}</td>`)}</tr>`)}</tbody></table></div></div>`;
+      default:
+        return r`<span class="disabled-state-text">${this.messages.nopreviewloaded ?? "Select a FeatureSet variable and load a preview."}</span>`;
+    }
+  }
+  renderTabs() {
+    const e = this.previewTabsState.activeTabId;
+    return r`<calcite-tabs><calcite-tab-nav slot=title-group><calcite-tab-title .tab=${c} .selected=${e === c} @calciteTabsActivate=${(t) => this.activateTab(t.target.tab)}>${this.messages.scope ?? "Scope"}</calcite-tab-title>${p(this.previewTabsState.tabs, (t) => `title-${t.id}`, (t) => r`<calcite-tab-title .tab=${t.id} title=${t.label ?? g} closable .selected=${e === t.id} @calciteTabsActivate=${(i) => this.activateTab(i.target.tab)} @calciteTabsClose=${(i) => this.closePreviewTab(i.target)}><bdi>${t.title}</bdi></calcite-tab-title>`)}</calcite-tab-nav><calcite-tab .tab=${c} .selected=${e === c}><div class="tab-panel">${this.renderScopePanel()}</div></calcite-tab>${p(this.previewTabsState.tabs, (t) => `panel-${t.id}`, (t) => r`<calcite-tab .tab=${t.id} .selected=${e === t.id}><div class="tab-panel preview-panel">${this.renderPreviewPanel(t)}</div></calcite-tab>`)}</calcite-tabs>`;
+  }
+  render() {
+    const { line: e } = this.debuggerStore?.executionState ?? {}, t = this.breakpoints.find((a) => a.line === e), i = this.breakpoints.findIndex((a) => a.line === e);
+    return r`<div class="console-shell"><div class="breakpoint-header"><arcgis-code-viewer language=arcade class="breakpoint-code-viewer" .lineNumbers=${(a) => String(a + (t?.line ?? e ?? 1) - 1)}>${this.getBreakpointCode(t?.line ?? this.breakpoints[0]?.line ?? e ?? 1)}</arcgis-code-viewer>${this.breakpoints.length ? r`<calcite-action id=${this._breakpointPopoverId ?? g} scale=s .text=${this.getBreakpointPositionText(i >= 0 ? i + 1 : 1)} text-enabled icon=chevron-down></calcite-action>` : null}${this.renderBreakpointPopover(t?.line ?? e)}</div><div class="tabs-container">${this.renderTabs()}</div></div>`;
+  }
+}
+h("arcgis-arcade-debugger-console", F);
+export {
+  F as ArcgisArcadeDebuggerConsole
+};

package/dist/components/arcgis-arcade-debugger-console/index.js

@@ -0,0 +1,11 @@
+import "@esri/calcite-components/components/calcite-tree";
+import "@esri/calcite-components/components/calcite-tree-item";
+import "@esri/calcite-components/components/calcite-loader";
+import "@esri/calcite-components/components/calcite-action";
+import "@esri/calcite-components/components/calcite-popover";
+import "../arcgis-code-viewer/index.js";
+import "@esri/calcite-components/components/calcite-tabs";
+import "@esri/calcite-components/components/calcite-tab-nav";
+import "@esri/calcite-components/components/calcite-tab-title";
+import "@esri/calcite-components/components/calcite-tab";
+export * from "./customElement.js";

package/dist/components/arcgis-arcade-debugger-output/customElement.js

@@ -0,0 +1,42 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+import { c as r } from "../../chunks/runtime.js";
+import { css as l, html as s } from "lit";
+import { LitElement as i } from "@arcgis/lumina";
+import { u as o } from "../../chunks/useT9n.js";
+import { d as c, g as n, c as a, t } from "../../chunks/debugger-value-styles.js";
+import { observeAncestorsMutation as u, unsafeGetCalciteModeName as d } from "@arcgis/toolkit/dom";
+import { D as m } from "../../chunks/debugger-value-components.js";
+const p = l`:host{display:flex;flex-direction:column;width:100%;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);--calcite-block-padding: var(--calcite-spacing-sm);overflow:auto;calcite-flow{height:100%}.disabled-state-text{font-size:var(--calcite-font-size-sm);color:var(--calcite-color-text-3);font-style:italic;display:block;margin:var(--calcite-spacing-md)}.ltr-container{direction:ltr}[class*=result-value-]{line-height:1.25rem}}`;
+class h extends i {
+  constructor() {
+    super(...arguments), this.messages = o();
+  }
+  static {
+    this.properties = { debuggerStore: 0, result: 0 };
+  }
+  static {
+    this.styles = [p, c, n()];
+  }
+  load() {
+    this.manager.onLifecycle(() => {
+      const e = u(this.el, ["class"], this.updateTheme.bind(this));
+      return this.updateTheme(), () => e();
+    });
+  }
+  willUpdate(e) {
+    e.has("result") && this.result && this.debuggerStore?.lazyTreeState.reset();
+  }
+  updateTheme() {
+    d(this.el) === "dark" ? this.elementInternals.states.add(a) : this.elementInternals.states.delete(a);
+  }
+  render() {
+    if (!this.result)
+      return s`<span class="disabled-state-text">${this.messages.nooutput ?? "No output available."}</span>`;
+    const e = this.debuggerStore?.lazyTreeState;
+    return e ? s`<calcite-tree .scale=${t.scale} @calciteTreeSelect=${t.oncalciteTreeSelect} .lines=${t.lines} .selectionMode=${t.selectionMode}>${m({ expanded: !0, name: this.result.arcadeType, value: this.result, messages: this.messages, path: this.result.arcadeType, lazyTreeState: e })}</calcite-tree>` : s`<span class="disabled-state-text">${this.messages.nooutput ?? "No output available."}</span>`;
+  }
+}
+r("arcgis-arcade-debugger-output", h);
+export {
+  h as ArcgisArcadeDebuggerOutput
+};

package/dist/components/arcgis-arcade-debugger-output/index.js

@@ -0,0 +1,5 @@
+import "@esri/calcite-components/components/calcite-tree";
+import "@esri/calcite-components/components/calcite-tree-item";
+import "@esri/calcite-components/components/calcite-loader";
+import "@esri/calcite-components/components/calcite-action";
+export * from "./customElement.js";

package/dist/components/arcgis-arcade-editor/customElement.d.ts

@@ -54,7 +54,13 @@ export abstract class ArcgisArcadeEditor extends LitElement {
    *
    * To get the full list of available options, see the Monaco Editor options [documentation](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor_editor_api.editor.IEditorOptions.html) for more details.
    */
-  accessor editorOptions: Editor.IEditorOptions & Editor.IGlobalEditorOptions | undefined;
+  accessor editorOptions: (Editor.IEditorOptions & Editor.IGlobalEditorOptions) | undefined;
+  /**
+   * Enables the bottom run and debug drawer UX.
+   *
+   * @default false
+   */
+  accessor enableDebugger: boolean;
   /**
    * If true, it will hide the documentation action in the side panel
    *
@@ -78,7 +84,16 @@ export abstract class ArcgisArcadeEditor extends LitElement {
       constantsandfunctions?: string | undefined;
       suggestions?: string | undefined;
       run?: string | undefined;
+      runanddebug?: string | undefined;
+      continue?: string | undefined;
+      reset?: string | undefined;
+      stop?: string | undefined;
       lastresults?: string | undefined;
+      close?: string | undefined;
+      output?: string | undefined;
+      console?: string | undefined;
+      log?: string | undefined;
+      debugconsole?: string | undefined;
       arcadeassistant?: string | undefined;
       profileempty?: string | undefined;
   };
@@ -89,7 +104,16 @@ export abstract class ArcgisArcadeEditor extends LitElement {
       constantsandfunctions: string;
       suggestions: string;
       run: string;
+      runanddebug: string;
+      continue: string;
+      reset: string;
+      stop: string;
       lastresults: string;
+      close: string;
+      output: string;
+      console: string;
+      log: string;
+      debugconsole: string;
       arcadeassistant: string;
       profileempty: string;
   }> & T9nMeta<{
@@ -98,7 +122,16 @@ export abstract class ArcgisArcadeEditor extends LitElement {
       constantsandfunctions: string;
       suggestions: string;
       run: string;
+      runanddebug: string;
+      continue: string;
+      reset: string;
+      stop: string;
       lastresults: string;
+      close: string;
+      output: string;
+      console: string;
+      log: string;
+      debugconsole: string;
       arcadeassistant: string;
       profileempty: string;
   }>;