@arcgis/coding-components
Version:
ArcGIS Coding Components
132 lines (131 loc) • 7.1 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { g as m, c as u } from "../../chunks/runtime.js";
import { LitElement as g } from "@arcgis/lumina";
import { slotChangeHasContent as p, observeAncestorsMutation as f, unsafeGetCalciteModeName as _ } from "@arcgis/toolkit/dom";
import { load as v } from "@arcgis/lumina/controllers";
import { i as b } from "../../chunks/monaco-importer.js";
import { css as y, html as a } from "lit";
import { w as l, s as c } from "../../chunks/setup-monaco-theme.js";
import { c as S, g as d, o as N } from "../../chunks/colorize.js";
import { s as E } from "../../chunks/arcade-service-accessors.js";
import { debounce as T } from "@arcgis/toolkit/function";
import { Task as w } from "@lit/task";
import { rethrowError as C, log as L } from "@arcgis/toolkit/log";
const O = y`:host{display:block}.arcgis-code-viewer-container{display:flex;align-items:stretch;background-color:var(--calcite-color-foreground-2)}.arcgis-code-viewer__gutter{display:flex;min-width:var(--calcite-spacing-md);padding:0 var(--calcite-spacing-xs) 0 var(--calcite-spacing-sm);border-inline-end:1px solid var(--calcite-color-border-3);color:var(--calcite-color-text-3);font-size:var(--calcite-font-size--2);font-family:var(--calcite-font-family-code);user-select:none;justify-items:center;font-variant-numeric:tabular-nums}.arcgis-code-viewer__line-number{display:flex;align-items:center}pre.arcgis-code-viewer{display:flex;direction:ltr;overflow-x:auto;margin:0;padding:var(--calcite-spacing-sm);white-space:pre-line;code{font-size:var(--calcite-font-size--2);font-family:var(--calcite-font-family-code)}}:host([round]){.arcgis-code-viewer-container{border-radius:var(--calcite-corner-radius-round)}}`;
class z extends g {
constructor() {
super(...arguments), this._monacoEditor = v(b), this.#t = Promise.withResolvers(), this.#e = "", this._slotContentObservers = [], this._onDefaultSlotChange = async (e) => {
p(e) || (this._codeFromSlot = "");
const t = e.target instanceof HTMLSlotElement ? e.target : null, s = t ? this._computeSlotText(t) : "";
t && this._observeAssignedSlotNodes(t), s !== this._codeFromSlot && (this._codeFromSlot = s), this.#t.resolve();
}, this._colorizeTask = new w(this, {
task: async ([e, t], { signal: s }) => {
if (await this.#t.promise, s.aborted)
return this.#e;
if (await l(t), s.aborted)
return this.#e;
const r = await S(e, t);
return s.aborted ? this.#e : (this.#e = r, r);
},
args: () => [this._codeFromSlot, this.language]
}), this._codeFromSlot = "", this.language = "arcade", this.round = !1, this.lineNumbers = "off";
}
static {
this.properties = { _codeFromSlot: 16, language: 1, round: 7, lineNumbers: 1 };
}
static {
this.styles = O;
}
#t;
#e;
async load() {
E(m("./assets")), await c(this.language), await l(this.language), this._applyColorizeStyles(d()), this.manager.onLifecycle(() => (this._themeObserver = f(this.el, ["class"], () => this.updateTheme()), this._themeChangedListener = N(() => {
this._applyColorizeStyles(d());
}), this.updateTheme(), () => {
this._themeObserver?.(), this._themeObserver = void 0, this._themeChangedListener?.dispose(), this._themeChangedListener = void 0;
}));
}
loaded() {
this.el.hasChildNodes() || this.#t.resolve();
}
willUpdate(e) {
e.has("language") && c(this.language).then(() => l(this.language)).catch(C(this));
}
disconnectedCallback() {
super.disconnectedCallback(), this._disposeSlotObservers();
}
_disposeSlotObservers() {
this._slotContentObservers.length && (this._slotContentObservers.forEach((e) => e.disconnect()), this._slotContentObservers = []);
}
_observeAssignedSlotNodes(e) {
this._disposeSlotObservers();
const t = e.assignedNodes({ flatten: !0 });
if (!t.length)
return;
const s = /* @__PURE__ */ new Set();
for (const o of t)
o.nodeType === Node.ELEMENT_NODE ? s.add(o) : o.nodeType === Node.TEXT_NODE && o.parentElement && s.add(o.parentElement);
const r = { characterData: !0, childList: !0, subtree: !0 }, i = T(() => {
const o = this._computeSlotText(e);
o !== this._codeFromSlot && (this._codeFromSlot = o);
}, 100), h = (o) => {
if (o.some((n) => n.type === "childList")) {
const n = this._computeSlotText(e);
n !== this._codeFromSlot && (this._codeFromSlot = n);
return;
}
i();
};
s.forEach((o) => {
const n = new MutationObserver(h);
n.observe(o, r), this._slotContentObservers.push(n);
});
}
_computeSlotText(e) {
const t = e.assignedNodes({ flatten: !0 }).filter((s) => s.nodeType !== Node.COMMENT_NODE);
if (this.language === "html" && t.length) {
const s = t.find((i) => i.nodeType === Node.ELEMENT_NODE && i.tagName === "TEMPLATE");
if (s)
return (s.innerHTML ?? "").trim();
const r = t.map((i) => i.nodeType === Node.ELEMENT_NODE ? i.outerHTML : i.nodeType === Node.TEXT_NODE ? i.textContent ?? "" : "").join("").trim();
return r && process.env.NODE_ENV !== "production" && L("warn", this, "Consider wrapping your snippet in a <template> for fully inert, intention-revealing markup."), r;
}
return t.map((s) => s.textContent ?? "").join("").trim();
}
updateTheme() {
const e = _(this.el) === "light" ? "vs" : "vs-dark";
e !== this._currentTheme && (this._currentTheme = e, this._monacoEditor.setTheme(e));
}
_applyColorizeStyles(e) {
if (!this._colorizeSheet) {
this._colorizeSheet = new CSSStyleSheet();
const t = this.renderRoot;
t.adoptedStyleSheets = [...t.adoptedStyleSheets, this._colorizeSheet];
}
this._colorizeSheet.replaceSync(e);
}
_showLineNumbers() {
return typeof this.lineNumbers == "function" || this.lineNumbers === "on";
}
_getLineNumberLabel(e) {
return typeof this.lineNumbers == "function" ? this.lineNumbers(e) : `${e}`;
}
_getRenderedLineNumbers() {
if (!this._showLineNumbers())
return [];
const e = Math.max(this._codeFromSlot.split(/\r\n|\r|\n/u).length, 1);
return Array.from({ length: e }, (t, s) => this._getLineNumberLabel(s + 1));
}
render() {
const e = this._getRenderedLineNumbers();
return a`<div class=${`arcgis-code-viewer-container${e.length ? " arcgis-code-viewer-container--with-line-numbers" : ""}`}><slot =${this._onDefaultSlotChange} style="display:none" aria-hidden=true></slot>${e.length ? a`<div class="arcgis-code-viewer__gutter" aria-hidden=true>${e.map((t) => a`<span class="arcgis-code-viewer__line-number">${t}</span>`)}</div>` : null}<pre class="arcgis-code-viewer" aria-label=${`${this.language} code snippet`}>${this._colorizeTask.render({
error: () => null,
pending: () => a`<code class=${`language-${this.language}`}></code>`,
complete: (t) => a`<code class=${`language-${this.language}`} .innerHTML=${t ?? ""}></code>`
})}</pre></div>`;
}
}
u("arcgis-code-viewer", z);
export {
z as ArcgisCodeViewer
};