asyncapi-viewer 2.0.0 → 2.1.0

package/dist/asyncapi-viewer.js

@@ -12099,47 +12099,50 @@ var Ed = 0, Dd = class extends Ve {
 	#n;
 	#r;
 	#i;
-	#a = [];
-	#o = "light";
-	#s = {};
-	#c = !1;
-	#l;
-	#u = /* @__PURE__ */ new Map();
-	#d = (e) => {
-		let t = this.#u.get(e);
-		return t || (t = new ku(() => this.requestUpdate()), this.#u.set(e, t)), t;
+	#a;
+	#o = [];
+	#s;
+	#c = [];
+	#l = "light";
+	#u = {};
+	#d = !1;
+	#f;
+	#p = /* @__PURE__ */ new Map();
+	#m = (e) => {
+		let t = this.#p.get(e);
+		return t || (t = new ku(() => this.requestUpdate()), this.#p.set(e, t)), t;
 	};
-	#f = /* @__PURE__ */ new Map();
-	#p;
-	#m = "";
-	#h = /* @__PURE__ */ new Set();
-	#g = !1;
-	#_;
-	#v;
+	#h = /* @__PURE__ */ new Map();
+	#g;
+	#_ = "";
+	#v = /* @__PURE__ */ new Set();
 	#y = !1;
 	#b;
-	#x = "";
-	#S;
+	#x;
+	#S = !1;
 	#C;
-	#w = /* @__PURE__ */ new Set();
-	#T = /* @__PURE__ */ new Map();
-	#E = (e) => {
-		let t = this.#T.get(e);
+	#w = "";
+	#T;
+	#E;
+	#D = /* @__PURE__ */ new Set();
+	#O = /* @__PURE__ */ new Map();
+	#k = (e) => {
+		let t = this.#O.get(e);
 		return t || (t = {
 			tab: "payload",
 			index: 0,
 			open: void 0,
 			copied: void 0
-		}, this.#T.set(e, t)), {
+		}, this.#O.set(e, t)), {
 			state: t,
 			defaultOpen: this.#e.messageExamples,
 			onChange: () => this.requestUpdate()
 		};
 	};
-	#D = () => {
-		this.#l = void 0, this.#R();
+	#A = () => {
+		this.#f = void 0, this.#V();
 	};
-	#O = new vd(this, (e) => this.#B(e));
+	#j = new vd(this, (e) => this.#U(e));
 	get options() {
 		return this.#e;
 	}
@@ -12147,7 +12150,7 @@ var Ed = 0, Dd = class extends Ve {
 		return this.#r;
 	}
 	get problems() {
-		return this.#a;
+		return this.#c;
 	}
 	get model() {
 		return this.#i;
@@ -12156,34 +12159,34 @@ var Ed = 0, Dd = class extends Ve {
 		return this.id;
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.id ||= `asyncapi-viewer-${++Ed}`, this.#z(), this.#t = new MutationObserver(() => this.#z()), this.#t.observe(this, { attributes: !0 }), this.#O.connect(), this.ownerDocument.defaultView?.addEventListener("hashchange", this.#D);
+		super.connectedCallback(), this.id ||= `asyncapi-viewer-${++Ed}`, this.#H(), this.#t = new MutationObserver(() => this.#H()), this.#t.observe(this, { attributes: !0 }), this.#j.connect(), this.ownerDocument.defaultView?.addEventListener("hashchange", this.#A);
 	}
 	disconnectedCallback() {
-		this.#t?.disconnect(), this.#t = void 0, this.#O.disconnect(), this.#C?.disconnect(), this.#C = void 0, this.ownerDocument.defaultView?.removeEventListener("hashchange", this.#D), super.disconnectedCallback();
+		this.#t?.disconnect(), this.#t = void 0, this.#j.disconnect(), this.#E?.disconnect(), this.#E = void 0, this.ownerDocument.defaultView?.removeEventListener("hashchange", this.#A), super.disconnectedCallback();
 	}
 	firstUpdated() {
-		this.#V();
+		this.#W();
 		for (let e of this.querySelectorAll(":scope > [data-asyncapi-fallback]")) e.remove();
 	}
 	updated() {
-		this.#R(), this.#M();
+		this.#V(), this.#F();
 		let e = this.renderRoot.querySelector(".layout");
-		e && (this.#_ === void 0 ? e.style.removeProperty("--_side-width") : e.style.setProperty("--_side-width", `${this.#_}px`));
+		e && (this.#b === void 0 ? e.style.removeProperty("--_side-width") : e.style.setProperty("--_side-width", `${this.#b}px`));
 	}
-	#k() {
+	#M() {
 		return {
 			min: 220,
 			max: Math.max(220, Math.min(560, Math.floor(this.getBoundingClientRect().width) - 600))
 		};
 	}
-	#A(e) {
-		let { min: t, max: n } = this.#k(), r = Math.round(Math.min(n, Math.max(t, e)));
-		r !== this.#_ && (this.#_ = r, this.requestUpdate());
+	#N(e) {
+		let { min: t, max: n } = this.#M(), r = Math.round(Math.min(n, Math.max(t, e)));
+		r !== this.#b && (this.#b = r, this.requestUpdate());
 	}
-	#j() {
-		let { min: e, max: t } = this.#k(), n = this.#_ ?? 292;
+	#P() {
+		let { min: e, max: t } = this.#M(), n = this.#b ?? 292;
 		return C`<div
-      class="side__resize ${this.#v ? "side__resize--active" : ""}"
+      class="side__resize ${this.#x ? "side__resize--active" : ""}"
       role="separator"
       aria-orientation="vertical"
       aria-label="Resize sidebar"
@@ -12193,73 +12196,73 @@ var Ed = 0, Dd = class extends Ve {
       tabindex="0"
       title="Drag to resize the sidebar; double-click to reset"
       @pointerdown=${(e) => {
-			e.button === 0 && (e.currentTarget.setPointerCapture(e.pointerId), this.#v = {
+			e.button === 0 && (e.currentTarget.setPointerCapture(e.pointerId), this.#x = {
 				x: e.clientX,
 				width: n
 			}, e.preventDefault(), this.requestUpdate());
 		}}
       @pointermove=${(e) => {
-			this.#v && this.#A(this.#v.width + e.clientX - this.#v.x);
+			this.#x && this.#N(this.#x.width + e.clientX - this.#x.x);
 		}}
       @pointerup=${() => {
-			this.#v = void 0, this.requestUpdate();
+			this.#x = void 0, this.requestUpdate();
 		}}
       @pointercancel=${() => {
-			this.#v = void 0, this.requestUpdate();
+			this.#x = void 0, this.requestUpdate();
 		}}
       @dblclick=${() => {
-			this.#_ = void 0, this.requestUpdate();
+			this.#b = void 0, this.requestUpdate();
 		}}
       @keydown=${(r) => {
-			if (r.key === "ArrowLeft") this.#A(n - 16);
-			else if (r.key === "ArrowRight") this.#A(n + 16);
-			else if (r.key === "Home") this.#A(e);
-			else if (r.key === "End") this.#A(t);
+			if (r.key === "ArrowLeft") this.#N(n - 16);
+			else if (r.key === "ArrowRight") this.#N(n + 16);
+			else if (r.key === "Home") this.#N(e);
+			else if (r.key === "End") this.#N(t);
 			else return;
 			r.preventDefault();
 		}}
     ></div>`;
 	}
-	#M() {
+	#F() {
 		if (!this.#e.sidebar || !this.#i) {
-			this.#C?.disconnect(), this.#C = void 0;
+			this.#E?.disconnect(), this.#E = void 0;
 			return;
 		}
 		let e = [...this.renderRoot.querySelectorAll("section[aria-labelledby]:not(.ops), article.op")];
-		this.#C?.disconnect(), this.#w.clear(), this.#C = new IntersectionObserver((t) => {
+		this.#E?.disconnect(), this.#D.clear(), this.#E = new IntersectionObserver((t) => {
 			for (let e of t) {
 				let t = e.target.id || e.target.getAttribute("aria-labelledby") || "";
-				e.isIntersecting ? this.#w.add(t) : this.#w.delete(t);
+				e.isIntersecting ? this.#D.add(t) : this.#D.delete(t);
 			}
-			let n = e.map((e) => e.id || e.getAttribute("aria-labelledby") || "").find((e) => this.#w.has(e));
-			n !== this.#b && (this.#b = n, this.requestUpdate());
+			let n = e.map((e) => e.id || e.getAttribute("aria-labelledby") || "").find((e) => this.#D.has(e));
+			n !== this.#C && (this.#C = n, this.requestUpdate());
 		}, {
 			rootMargin: "0px 0px -60% 0px",
 			threshold: 0
 		});
-		for (let t of e) this.#C.observe(t);
+		for (let t of e) this.#E.observe(t);
 	}
-	#N(e, t, n) {
-		this.#m = e, this.#P(t, n);
+	#I(e, t, n) {
+		this.#_ = e, this.#L(t, n);
 	}
-	#P(e, t) {
-		clearTimeout(this.#S), this.#S = setTimeout(() => {
-			this.#x = this.#m.trim() === "" && this.#h.size === 0 ? "" : `${e} of ${t} operations shown`, this.requestUpdate();
+	#L(e, t) {
+		clearTimeout(this.#T), this.#T = setTimeout(() => {
+			this.#w = this.#_.trim() === "" && this.#v.size === 0 ? "" : `${e} of ${t} operations shown`, this.requestUpdate();
 		}, 300), this.requestUpdate();
 	}
-	#F() {
-		this.#y = !0;
+	#R() {
+		this.#S = !0;
 		let e = this.getBoundingClientRect().top;
 		e > 0 && this.ownerDocument.defaultView?.scrollBy({
 			top: e,
 			behavior: "smooth"
 		}), this.requestUpdate(), this.updateComplete.then(() => this.renderRoot.querySelector(".side__search")?.focus()).catch(() => void 0);
 	}
-	#I(e = !1) {
-		this.#y && (this.#y = !1, this.requestUpdate(), e || this.updateComplete.then(() => this.renderRoot.querySelector(".menu")?.focus()).catch(() => void 0));
+	#z(e = !1) {
+		this.#S && (this.#S = !1, this.requestUpdate(), e || this.updateComplete.then(() => this.renderRoot.querySelector(".menu")?.focus()).catch(() => void 0));
 	}
-	#L(e) {
-		if (e.key !== "Tab" || !this.#y) return;
+	#B(e) {
+		if (e.key !== "Tab" || !this.#S) return;
 		let t = this.renderRoot.querySelector(".side__panel");
 		if (!t) return;
 		let n = [...t.querySelectorAll("a[href], button, input, select, [tabindex=\"0\"]")].filter((e) => !e.hasAttribute("disabled"));
@@ -12267,69 +12270,113 @@ var Ed = 0, Dd = class extends Ve {
 		let r = n[0], i = n[n.length - 1], a = this.renderRoot.activeElement;
 		e.shiftKey && a === r ? (i.focus(), e.preventDefault()) : !e.shiftKey && a === i && (r.focus(), e.preventDefault());
 	}
-	#R() {
+	#V() {
 		let e = this.ownerDocument.defaultView?.location.hash ?? "";
-		if (!this.#i || e.length < 2 || e === this.#l) return;
+		if (!this.#i || e.length < 2 || e === this.#f) return;
 		let t = decodeURIComponent(e.slice(1));
 		if (!t.startsWith(`${this.id}--`)) return;
 		let n = this.renderRoot.getElementById(t) ?? this.renderRoot.getElementById(`${t}--heading`);
-		n && (this.#l = e, n instanceof HTMLDetailsElement && (n.open = !0), n.scrollIntoView({ block: "start" }), (n.querySelector("[tabindex=\"-1\"], summary") ?? n).focus({ preventScroll: !0 }));
+		n && (this.#f = e, n instanceof HTMLDetailsElement && (n.open = !0), n.scrollIntoView({ block: "start" }), (n.querySelector("[tabindex=\"-1\"], summary") ?? n).focus({ preventScroll: !0 }));
 	}
-	#z() {
-		this.#e = Ta(this.getAttributeNames().map((e) => [e, this.getAttribute(e)])), this.#O.mode = this.#e.theme, this.requestUpdate(), this.#H();
+	#H() {
+		this.#e = Ta(this.getAttributeNames().map((e) => [e, this.getAttribute(e)])), this.#j.mode = this.#e.theme, this.requestUpdate(), this.#i && this.#e.src === this.#n && this.#q() !== this.#s && this.#J(), this.#G();
 	}
-	#B(e) {
-		this.#o = e, this.updateComplete.then(() => this.#V()).catch(() => void 0), this.requestUpdate();
+	#U(e) {
+		this.#l = e, this.updateComplete.then(() => this.#W()).catch(() => void 0), this.requestUpdate();
 	}
-	#V() {
+	#W() {
 		let e = this.renderRoot, t = e?.querySelector(".probe");
 		if (!t) return;
-		let n = (e) => (t.style.color = `var(${e})`, yd(getComputedStyle(t).color)), r = n("--_primary"), i = n("--_secondary"), a = n("--_send"), o = n("--_receive"), s = n("--_head"), c = this.#o === "dark", l = {};
+		let n = (e) => (t.style.color = `var(${e})`, yd(getComputedStyle(t).color)), r = n("--_primary"), i = n("--_secondary"), a = n("--_send"), o = n("--_receive"), s = n("--_head"), c = this.#l === "dark", l = {};
 		r && s && (l["--_primary-text"] = bd(wd(r, s, c))), i && s && (l["--_secondary-text"] = bd(wd(i, s, c))), a && (l["--_badge-ink-send"] = Cd(a)), o && (l["--_badge-ink-receive"] = Cd(o));
 		let u = getComputedStyle(this).getPropertyValue("--_logo").trim(), d = u !== "" && u !== "none", f = e?.querySelector(".root");
 		if (f) for (let [e, t] of Object.entries(l)) f.style.setProperty(e, t);
-		(d !== this.#c || JSON.stringify(l) !== JSON.stringify(this.#s)) && (this.#c = d, this.#s = l, this.requestUpdate());
+		(d !== this.#d || JSON.stringify(l) !== JSON.stringify(this.#u)) && (this.#d = d, this.#u = l, this.requestUpdate());
 	}
-	async #H() {
+	async #G() {
 		let e = this.#e.src;
-		if (e === this.#n || (this.#n = e, this.#r = void 0, this.#i = void 0, this.#a = [], this.#u.clear(), this.#T.clear(), this.#f.clear(), this.#m = "", this.#h = /* @__PURE__ */ new Set(), this.#g = !1, this.#y = !1, this.#b = void 0, this.#p && URL.revokeObjectURL(this.#p), this.#p = void 0, e === void 0)) return;
+		if (e === this.#n || (this.#n = e, this.#r = void 0, this.#i = void 0, this.#a = void 0, this.#o = [], this.#c = [], this.#p.clear(), this.#O.clear(), this.#h.clear(), this.#_ = "", this.#v = /* @__PURE__ */ new Set(), this.#y = !1, this.#S = !1, this.#C = void 0, this.#g && URL.revokeObjectURL(this.#g), this.#g = void 0, e === void 0)) return;
 		let t = await Ci(Si(e, this.ownerDocument.baseURI));
 		if (this.#n === e) {
 			if (this.#r = t, t.ok) {
-				this.#p = URL.createObjectURL(new Blob([t.text], { type: t.format === "json" ? "application/json" : "application/yaml" }));
+				this.#g = URL.createObjectURL(new Blob([t.text], { type: t.format === "json" ? "application/json" : "application/yaml" }));
 				let n = new Ai(t.url, t.data), r = await n.preload();
 				if (this.#n !== e) return;
-				let i = this.#e;
-				this.#i = ma({
-					resolver: n,
-					data: t.data,
-					specVersion: t.specVersion,
-					specMajor: t.specMajor,
-					problems: r,
-					options: {
-						labels: {
-							publish: i.publishLabel,
-							subscribe: i.subscribeLabel,
-							send: i.sendLabel,
-							receive: i.receiveLabel,
-							request: i.requestLabel,
-							reply: i.replyLabel
-						},
-						useChannelAddressAsIdentifier: i.useChannelAddressAsIdentifier,
-						applyTraits: i.parserOptions.applyTraits
-					}
-				}), this.#a = this.#i.problems;
+				this.#a = n, this.#o = r, this.#J();
 			}
-			this.requestUpdate();
+			this.requestUpdate(), await this.updateComplete, this.#n === e && this.#K(t);
 		}
 	}
+	#K(e) {
+		let t = {
+			bubbles: !0,
+			composed: !0
+		};
+		if (!e.ok) this.dispatchEvent(new CustomEvent("asyncapi-error", {
+			...t,
+			detail: {
+				url: e.url,
+				error: e.error
+			}
+		}));
+		else if (this.#i) {
+			let n = {
+				url: e.url,
+				specVersion: e.specVersion,
+				specMajor: e.specMajor,
+				model: this.#i,
+				problems: this.#c
+			};
+			this.dispatchEvent(new CustomEvent("asyncapi-load", {
+				...t,
+				detail: n
+			}));
+		}
+	}
+	#q() {
+		let e = this.#e;
+		return JSON.stringify([
+			e.publishLabel,
+			e.subscribeLabel,
+			e.sendLabel,
+			e.receiveLabel,
+			e.requestLabel,
+			e.replyLabel,
+			e.useChannelAddressAsIdentifier,
+			e.parserOptions.applyTraits
+		]);
+	}
+	#J() {
+		let e = this.#r;
+		if (!e?.ok || !this.#a) return;
+		let t = this.#e;
+		this.#s = this.#q(), this.#i = ma({
+			resolver: this.#a,
+			data: e.data,
+			specVersion: e.specVersion,
+			specMajor: e.specMajor,
+			problems: [...this.#o],
+			options: {
+				labels: {
+					publish: t.publishLabel,
+					subscribe: t.subscribeLabel,
+					send: t.sendLabel,
+					receive: t.receiveLabel,
+					request: t.requestLabel,
+					reply: t.replyLabel
+				},
+				useChannelAddressAsIdentifier: t.useChannelAddressAsIdentifier,
+				applyTraits: t.parserOptions.applyTraits
+			}
+		}), this.#c = this.#i.problems;
+	}
 	render() {
 		return C`<div class="root">
       <span class="probe visually-hidden" aria-hidden="true"></span>
-      ${this.#U()}
+      ${this.#Y()}
     </div>`;
 	}
-	#U() {
+	#Y() {
 		let e = this.#e.src;
 		if (e === void 0) return C`<div class="content"><p class="alert" role="alert">This viewer has no <code>src</code> attribute, so there is nothing to show.</p></div>`;
 		let t = this.#r;
@@ -12341,8 +12388,8 @@ var Ed = 0, Dd = class extends Ve {
 		if (!n) return C`<div class="content"><p class="summary">Preparing ${e}…</p></div>`;
 		let r = this.#e, i = n.operations, a = {
 			prefix: this.id,
-			tree: this.#d,
-			example: this.#E
+			tree: this.#m,
+			example: this.#k
 		}, o = r.sidebar ? Xu(n, i, this.id, {
 			info: r.info,
 			servers: r.servers,
@@ -12350,24 +12397,24 @@ var Ed = 0, Dd = class extends Ve {
 			schemas: r.schemas,
 			showServers: r.showServers,
 			showOperations: r.showOperations
-		}) : [], s = ed(o, this.#m, r.searchKeepSections, this.#h), c = (e, t) => ed(o, e, r.searchKeepSections, t).shown, l = r.sidebar ? C`<button
+		}) : [], s = ed(o, this.#_, r.searchKeepSections, this.#v), c = (e, t) => ed(o, e, r.searchKeepSections, t).shown, l = r.sidebar ? C`<button
           class="menu"
           type="button"
           aria-label="Open navigation"
-          aria-expanded=${this.#y ? "true" : "false"}
+          aria-expanded=${this.#S ? "true" : "false"}
           aria-controls="${this.id}--sidebar"
-          @click=${() => this.#y ? this.#I() : this.#F()}
+          @click=${() => this.#S ? this.#z() : this.#R()}
         >
           ${hd}
         </button>` : w, u = C`
       ${Ma({
 			doc: n,
 			src: t.url,
-			downloadHref: this.#p,
-			hasLogo: this.#c,
+			downloadHref: this.#g,
+			hasLogo: this.#d,
 			themeToggle: r.themeToggle,
-			resolvedTheme: this.#o,
-			onToggleTheme: () => this.#O.toggle(),
+			resolvedTheme: this.#l,
+			onToggleTheme: () => this.#j.toggle(),
 			menu: l
 		})}
       <div class="content">
@@ -12375,50 +12422,50 @@ var Ed = 0, Dd = class extends Ve {
         ${r.servers ? ad(n, this.id) : w}
         ${r.operations ? Yu(n, {
 			...a,
-			messageIndex: (e) => this.#f.get(e) ?? 0,
+			messageIndex: (e) => this.#h.get(e) ?? 0,
 			selectMessage: (e, t) => {
-				this.#f.set(e, t), this.requestUpdate();
+				this.#h.set(e, t), this.requestUpdate();
 			}
 		}) : w}
         ${r.messages ? sd(n, a, r.showMessageExamples) : w}
         ${r.schemas ? cd(n, a) : w}
-        ${r.errors ? ld(this.#a, this.id) : w}
+        ${r.errors ? ld(this.#c, this.id) : w}
       </div>
     `;
 		return r.sidebar ? C`<div
-      class="layout layout--sidebar ${this.#y ? "layout--open" : ""} ${this.#v ? "layout--resizing" : ""}"
+      class="layout layout--sidebar ${this.#S ? "layout--open" : ""} ${this.#x ? "layout--resizing" : ""}"
       @keydown=${(e) => {
-			e.key === "Escape" && this.#y && !e.target.classList?.contains("side__search") && (this.#I(), e.preventDefault()), this.#L(e);
+			e.key === "Escape" && this.#S && !e.target.classList?.contains("side__search") && (this.#z(), e.preventDefault()), this.#B(e);
 		}}
     >
       ${fd({
 			items: o,
 			tags: Qu(n, i),
-			selectedTags: this.#h,
-			tagsOpen: this.#g,
+			selectedTags: this.#v,
+			tagsOpen: this.#y,
 			onTagsToggle: (e) => {
-				this.#g = e, this.requestUpdate();
+				this.#y = e, this.requestUpdate();
 			},
 			onToggleTag: (e) => {
-				let t = new Set(this.#h);
-				t.has(e) ? t.delete(e) : t.add(e), this.#h = t, this.#P(c(this.#m, t), s.total);
+				let t = new Set(this.#v);
+				t.has(e) ? t.delete(e) : t.add(e), this.#v = t, this.#L(c(this.#_, t), s.total);
 			},
 			onClearTags: () => {
-				this.#h = /* @__PURE__ */ new Set(), this.#P(c(this.#m, this.#h), s.total);
+				this.#v = /* @__PURE__ */ new Set(), this.#L(c(this.#_, this.#v), s.total);
 			},
-			query: this.#m,
+			query: this.#_,
 			keepSections: r.searchKeepSections,
-			current: this.#b,
-			open: this.#y,
-			liveText: this.#x,
-			onQuery: (e) => this.#N(e, c(e, this.#h), s.total),
-			onEscape: () => this.#I(),
-			onChoose: () => this.#I(!0),
-			onClose: () => this.#I(),
+			current: this.#C,
+			open: this.#S,
+			liveText: this.#w,
+			onQuery: (e) => this.#I(e, c(e, this.#v), s.total),
+			onEscape: () => this.#z(),
+			onChoose: () => this.#z(!0),
+			onClose: () => this.#z(),
 			id: this.id
 		})}
-      ${this.#j()}
-      <div class="main" ?inert=${this.#y}>${u}</div>
+      ${this.#P()}
+      <div class="main" ?inert=${this.#S}>${u}</div>
     </div>` : C`<div class="layout"><div class="main">${u}</div></div>`;
 	}
 };