// retoor <retoor@molodetz.nl>
import { CodeBlock } from "./CodeBlock.js";
import { devrantSession } from "./DevRantSession.js";
function el(tag, props = {}, children = []) {
const node = document.createElement(tag);
for (const [key, value] of Object.entries(props)) {
if (key === "class") node.className = value;
else if (key === "text") node.textContent = value;
else if (key === "html") node.innerHTML = value;
else if (value === true) node.setAttribute(key, "");
else if (value !== false && value !== null) node.setAttribute(key, value);
}
for (const child of children) {
if (child) node.appendChild(child);
}
return node;
}
export class DevRantTester {
constructor(mount) {
this.mount = mount;
try {
this.config = JSON.parse(mount.dataset.config || "{}");
} catch {
return;
}
this.base = (window.DEVPLACE_DOCS || {}).base || location.origin;
this.inputs = [];
this.build();
this.renderExpected();
if (this.requiresAuth()) {
devrantSession.onChange(() => this.syncAuth());
this.syncAuth();
}
}
requiresAuth() {
return this.config.auth === "user";
}
build() {
const root = el("div", { class: "api-tester" });
if (this.config.params.length) root.appendChild(this.buildParams());
if (this.requiresAuth()) {
this.authNote = el("div", { class: "param-desc devrant-auth-note" });
root.appendChild(this.authNote);
}
root.appendChild(this.buildActions());
root.appendChild(this.buildResponse());
this.mount.appendChild(root);
}
buildParams() {
const table = el("div", { class: "param-table" });
for (const param of this.config.params) {
const control = this.buildControl(param);
this.inputs.push({ param, control });
const label = el("div", { class: "param-label" }, [
el("span", { class: "param-name", text: param.name }),
param.required ? el("span", { class: "param-required", text: "*" }) : null,
el("span", { class: "param-loc param-loc-" + param.location, text: param.location }),
]);
const meta = el("div", { class: "param-meta" }, [
control,
param.description ? el("div", { class: "param-desc", text: param.description }) : null,
]);
table.appendChild(el("div", { class: "param-row" }, [label, meta]));
}
return table;
}
buildControl(param) {
if (param.type === "enum") {
const select = el("select", { class: "param-input" });
for (const option of param.options || []) {
const opt = el("option", { value: option, text: option });
if (option === param.example) opt.selected = true;
select.appendChild(opt);
}
return select;
}
if (param.type === "textarea") {
const area = el("textarea", { class: "param-input", rows: "3" });
area.value = param.example || "";
return area;
}
const input = el("input", {
class: "param-input",
type: param.type === "int" ? "number" : param.type === "password" ? "password" : "text",
placeholder: param.example || "",
});
if (param.type !== "password") input.value = param.example || "";
return input;
}
buildActions() {
const bar = el("div", { class: "try-panel" });
this.sendBtn = el("button", { type: "button", class: "btn btn-primary try-send", text: "Send request" });
this.sendBtn.addEventListener("click", () => this.send());
bar.appendChild(this.sendBtn);
return bar;
}
syncAuth() {
if (!this.authNote) return;
if (devrantSession.isLoggedIn()) {
this.authNote.textContent = `Authenticated as ${devrantSession.username || "user " + devrantSession.auth.user_id}.`;
this.sendBtn.disabled = false;
} else {
this.authNote.textContent = "Requires login - use the Log in widget at the top of the page.";
this.sendBtn.disabled = true;
}
}
buildResponse() {
const wrap = el("div", { class: "response-viewer" });
const tabs = el("div", { class: "response-tabs" });
this.responseTabs = {};
for (const tab of [{ id: "expected", label: "Expected" }, { id: "live", label: "Live response" }]) {
const btn = el("button", { type: "button", class: "code-tab", text: tab.label });
btn.addEventListener("click", () => this.selectTab(tab.id));
this.responseTabs[tab.id] = btn;
tabs.appendChild(btn);
}
this.expectedEl = el("div", { class: "response-pane" });
this.liveEl = el("div", { class: "response-pane" });
this.liveEl.appendChild(el("p", { class: "response-placeholder", text: "Run the request to see the live response." }));
wrap.appendChild(tabs);
wrap.appendChild(this.expectedEl);
wrap.appendChild(this.liveEl);
this.selectTab("expected");
return wrap;
}
selectTab(id) {
for (const [name, btn] of Object.entries(this.responseTabs)) {
btn.classList.toggle("active", name === id);
}
this.expectedEl.classList.toggle("active", id === "expected");
this.liveEl.classList.toggle("active", id === "live");
}
renderExpected() {
const sample = this.config.sample_response;
if (sample === null || sample === undefined) {
this.expectedEl.appendChild(el("p", { class: "response-note", text: "No documented response body." }));
return;
}
this.expectedEl.appendChild(el("p", { class: "response-note", text: "Modeled JSON response:" }));
const pre = el("pre", { class: "response-body" });
pre.appendChild(el("code", { class: "language-json", text: JSON.stringify(sample, null, 2) }));
this.expectedEl.appendChild(pre);
CodeBlock.enhance(pre, { lineNumbers: false });
}
values() {
const out = { path: {}, query: {}, body: {} };
for (const { param, control } of this.inputs) {
const value = control.value;
if (value === "" && !param.required) continue;
out[param.location][param.name] = value;
}
return out;
}
buildUrl(values) {
let path = this.config.path;
for (const [name, value] of Object.entries(values.path)) {
path = path.replace("{" + name + "}", encodeURIComponent(value));
}
const query = { ...values.query };
const usesQuery = this.config.method === "GET" || this.config.method === "DELETE";
if (usesQuery && this.requiresAuth()) Object.assign(query, devrantSession.triple());
const entries = Object.entries(query);
const qs = entries.length
? "?" + entries.map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`).join("&")
: "";
return this.base + path + qs;
}
async confirmDestructive() {
if (!(this.config.destructive || this.config.method === "DELETE")) return true;
if (window.app && window.app.dialog) {
return window.app.dialog.confirm({
title: "Run request",
message: "This performs a real action on your account. Continue?",
confirmLabel: "Run",
danger: true,
});
}
return window.confirm("This performs a real action on your account. Continue?");
}
async send() {
if (this.requiresAuth() && !devrantSession.isLoggedIn()) {
this.showError("Log in first using the widget at the top of the page.");
return;
}
if (!(await this.confirmDestructive())) return;
const values = this.values();
const url = this.buildUrl(values);
const headers = { Accept: "application/json" };
const options = { method: this.config.method, headers };
if (this.config.encoding === "form") {
const body = { ...values.body };
if (this.requiresAuth()) Object.assign(body, devrantSession.triple());
options.body = new URLSearchParams(body).toString();
headers["Content-Type"] = "application/x-www-form-urlencoded";
}
this.sendBtn.disabled = true;
const started = performance.now();
try {
const response = await fetch(url, options);
const ms = Math.round(performance.now() - started);
await this.renderResponse(response, ms, values);
} catch (error) {
this.showError(error.message || "Network error");
} finally {
this.sendBtn.disabled = false;
if (this.requiresAuth()) this.syncAuth();
}
}
async renderResponse(response, ms, values) {
const contentType = response.headers.get("content-type") || "";
this.liveEl.innerHTML = "";
this.selectTab("live");
const cls = "response-" + Math.floor(response.status / 100) + "xx";
const meta = el("div", { class: "response-meta" }, [
el("span", { class: "response-status " + cls, text: `${response.status} ${response.statusText}` }),
el("span", { text: `${ms} ms` }),
el("span", { text: contentType.split(";")[0] || "unknown" }),
]);
this.liveEl.appendChild(meta);
if (contentType.includes("application/json")) {
const data = await response.json();
this.maybeCaptureLogin(data, values);
const pre = el("pre", { class: "response-body" });
pre.appendChild(el("code", { class: "language-json", text: JSON.stringify(data, null, 2) }));
this.liveEl.appendChild(pre);
CodeBlock.enhance(pre, { lineNumbers: false });
return;
}
const text = await response.text();
const pre = el("pre", { class: "response-body" });
pre.appendChild(el("code", { text: text.slice(0, 2000) }));
this.liveEl.appendChild(pre);
CodeBlock.enhance(pre, { highlight: false, lineNumbers: false });
}
maybeCaptureLogin(data, values) {
const loginIds = ["devrant-login", "devrant-register"];
if (loginIds.includes(this.config.id) && data && data.success && data.auth_token) {
devrantSession.setFromToken(data.auth_token, values.body.username || "");
}
}
showError(message) {
this.liveEl.innerHTML = "";
this.selectTab("live");
this.liveEl.appendChild(el("div", { class: "response-meta" }, [
el("span", { class: "response-status response-5xx", text: "Error" }),
]));
this.liveEl.appendChild(el("p", { class: "response-redirect", text: message }));
}
}
Reference in New Issue View Git Blame Copy Permalink