@open-resource-discovery/metadata-renderer 0.0.0 → 1.0.1

package/dist/chunks/asyncApi-DtAXW7IY.js

@@ -0,0 +1,502 @@
+import { i as loadObject } from "./utils-BC3WF3-9.js";
+/* empty css                 */
+import { createElement, useId, useMemo } from "react";
+import Markdown from "react-markdown";
+import { jsx, jsxs } from "react/jsx-runtime";
+import AsyncApiComponent from "@asyncapi/react-component/browser/index.js";
+import { PluginSlot } from "@asyncapi/react-component";
+//#region src/lib/asyncApi/customAttributes/context.ts
+var asyncApiContext = {
+	version: "",
+	configs: [],
+	rootFields: {},
+	getDocumentationUrl(fieldName) {
+		return (this.configs.find((c) => c.extensions?.[fieldName]) ?? this.configs.find((c) => c.prefixStartsWith && fieldName.startsWith(c.prefixStartsWith)))?.documentationUrl?.(fieldName, { version: this.version });
+	}
+};
+//#endregion
+//#region src/lib/asyncApi/customAttributes/attributeLink.tsx
+function AttributeLink({ attributeName }) {
+	const href = asyncApiContext.getDocumentationUrl(attributeName);
+	if (!href) return null;
+	return /* @__PURE__ */ jsx("a", {
+		href,
+		style: {
+			marginLeft: 4,
+			marginTop: 4
+		},
+		target: "_blank",
+		rel: "noreferrer",
+		title: "View in AsyncAPI Specification",
+		children: /* @__PURE__ */ jsx("svg", {
+			width: "16",
+			height: "16",
+			viewBox: "0 0 16 16",
+			fill: "currentColor",
+			children: /* @__PURE__ */ jsx("path", { d: "M10.604 1h4.146a.25.25 0 01.25.25v4.146a.25.25 0 01-.427.177L13.03 4.03 9.28 7.78a.75.75 0 01-1.06-1.06l3.75-3.75-1.543-1.543A.25.25 0 0110.604 1zM3.75 2A1.75 1.75 0 002 3.75v8.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 12.25v-3.5a.75.75 0 00-1.5 0v3.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-8.5a.25.25 0 01.25-.25h3.5a.75.75 0 000-1.5h-3.5z" })
+		})
+	});
+}
+//#endregion
+//#region src/lib/asyncApi/customAttributes/genericRenderer.tsx
+function autoLabel(fieldName, prefix) {
+	let name = fieldName;
+	if (prefix && name.startsWith(prefix)) name = name.slice(prefix.length);
+	return name.replace(/([a-z])([A-Z])/g, "$1-$2").split("-").filter(Boolean).map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
+}
+function Label({ name, label }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "asyncapi-attr-label",
+		children: [
+			label,
+			" ",
+			/* @__PURE__ */ jsx(AttributeLink, { attributeName: name })
+		]
+	});
+}
+function renderObjectValue(val) {
+	if (val === null || val === void 0) return /* @__PURE__ */ jsx("span", {
+		className: "asyncapi-attr-placeholder",
+		children: "—"
+	});
+	if (typeof val === "boolean") return /* @__PURE__ */ jsx("span", { children: val ? "Yes" : "No" });
+	if (typeof val === "number") return /* @__PURE__ */ jsx("span", { children: val });
+	if (Array.isArray(val)) return /* @__PURE__ */ jsx("ul", {
+		className: "asyncapi-attr-list",
+		children: val.map((item, i) => /* @__PURE__ */ jsx("li", { children: renderObjectValue(item) }, i))
+	});
+	if (typeof val === "object") return /* @__PURE__ */ jsx("dl", {
+		className: "asyncapi-attr-obj",
+		children: Object.entries(val).map(([k, v]) => /* @__PURE__ */ jsxs("div", {
+			className: "asyncapi-attr-obj-row",
+			children: [
+				/* @__PURE__ */ jsxs("dt", {
+					className: "asyncapi-attr-obj-key",
+					children: [k, ":"]
+				}),
+				" ",
+				/* @__PURE__ */ jsx("dd", {
+					className: "asyncapi-attr-obj-val",
+					children: renderObjectValue(v)
+				})
+			]
+		}, k))
+	});
+	const str = String(val);
+	return /[*_`[\]#]/.test(str) ? /* @__PURE__ */ jsx(Markdown, { children: str }) : /* @__PURE__ */ jsx("span", { children: str });
+}
+function StringRenderer(props) {
+	const link = props.valueLinks?.[props.value];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "asyncapi-attr-row",
+		children: [/* @__PURE__ */ jsx(Label, {
+			name: props.name,
+			label: props.label
+		}), /* @__PURE__ */ jsx("p", {
+			className: "asyncapi-attr-value",
+			children: link ? /* @__PURE__ */ jsx("a", {
+				href: link,
+				rel: "noreferrer noopener",
+				target: "_blank",
+				className: "asyncapi-attr-link",
+				children: props.value
+			}) : props.value
+		})]
+	});
+}
+function BooleanRenderer(props) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "asyncapi-attr-row",
+		children: [/* @__PURE__ */ jsx(Label, {
+			name: props.name,
+			label: props.label
+		}), /* @__PURE__ */ jsx("p", {
+			className: "asyncapi-attr-value",
+			children: props.value ? "Yes" : "No"
+		})]
+	});
+}
+function NumberRenderer(props) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "asyncapi-attr-row",
+		children: [/* @__PURE__ */ jsx(Label, {
+			name: props.name,
+			label: props.label
+		}), /* @__PURE__ */ jsx("p", {
+			className: "asyncapi-attr-value",
+			children: props.value
+		})]
+	});
+}
+function ArrayRenderer(props) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "asyncapi-attr-row",
+		children: [/* @__PURE__ */ jsx(Label, {
+			name: props.name,
+			label: props.label
+		}), /* @__PURE__ */ jsx("div", {
+			className: "asyncapi-attr-value",
+			children: /* @__PURE__ */ jsx("ul", {
+				className: "asyncapi-attr-list",
+				children: props.value.map((item, i) => /* @__PURE__ */ jsx("li", { children: renderObjectValue(item) }, i))
+			})
+		})]
+	});
+}
+function ObjectRenderer(props) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "asyncapi-attr-row",
+		children: [/* @__PURE__ */ jsx(Label, {
+			name: props.name,
+			label: props.label
+		}), /* @__PURE__ */ jsx("div", {
+			className: "asyncapi-attr-value",
+			children: renderObjectValue(props.value)
+		})]
+	});
+}
+function LinkRenderer(props) {
+	const href = props.callback(props.value);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "asyncapi-attr-row",
+		children: [/* @__PURE__ */ jsx(Label, {
+			name: props.name,
+			label: props.label
+		}), /* @__PURE__ */ jsx("p", {
+			className: "asyncapi-attr-value",
+			children: href ? /* @__PURE__ */ jsx("a", {
+				href,
+				rel: "noreferrer noopener",
+				target: "_blank",
+				className: "asyncapi-attr-link",
+				children: String(props.value)
+			}) : String(props.value)
+		})]
+	});
+}
+function buildAsyncApiGenericRenderer(fieldName, def, config) {
+	if (def && "component" in def) return def.component;
+	return function AsyncApiFieldRenderer({ propertyValue }) {
+		const value = propertyValue;
+		if (value === void 0 || value === null) return null;
+		const label = def && "label" in def && def.label ? def.label : autoLabel(fieldName, config.prefixStartsWith);
+		if (def?.type === "link") return /* @__PURE__ */ jsx(LinkRenderer, {
+			name: fieldName,
+			label,
+			value,
+			callback: def.callback
+		});
+		if (def?.type === "boolean" || typeof value === "boolean") return /* @__PURE__ */ jsx(BooleanRenderer, {
+			name: fieldName,
+			label,
+			value: Boolean(value)
+		});
+		if (def?.type === "number" || typeof value === "number") return /* @__PURE__ */ jsx(NumberRenderer, {
+			name: fieldName,
+			label,
+			value
+		});
+		if (def?.type === "array" || Array.isArray(value)) {
+			if (!Array.isArray(value)) return null;
+			return /* @__PURE__ */ jsx(ArrayRenderer, {
+				name: fieldName,
+				label,
+				value
+			});
+		}
+		if (def?.type === "object" || typeof value === "object") return /* @__PURE__ */ jsx(ObjectRenderer, {
+			name: fieldName,
+			label,
+			value
+		});
+		const valueLinks = def && "valueLinks" in def ? def.valueLinks : void 0;
+		return /* @__PURE__ */ jsx(StringRenderer, {
+			name: fieldName,
+			label,
+			value: String(value),
+			valueLinks
+		});
+	};
+}
+//#endregion
+//#region src/lib/asyncApi/customAttributes/autoDiscover.ts
+var ASYNCAPI_ROOT_KEYS = /* @__PURE__ */ new Set([
+	"asyncapi",
+	"info",
+	"channels",
+	"operations",
+	"components",
+	"servers",
+	"tags",
+	"id",
+	"defaultContentType",
+	"externalDocs"
+]);
+function discoverAsyncApiFieldNames(doc, prefix) {
+	const names = /* @__PURE__ */ new Set();
+	const addKeys = (obj) => {
+		if (!obj || typeof obj !== "object") return;
+		for (const key of Object.keys(obj)) if (key.startsWith(prefix)) names.add(key);
+	};
+	addKeys(doc);
+	addKeys(doc.info);
+	const channels = doc.channels;
+	if (channels) for (const channel of Object.values(channels)) {
+		if (!channel || typeof channel !== "object") continue;
+		const ch = channel;
+		addKeys(ch);
+		for (const op of [
+			"subscribe",
+			"publish",
+			"send",
+			"receive"
+		]) {
+			const operation = ch[op];
+			if (!operation || typeof operation !== "object") continue;
+			addKeys(operation);
+			addKeys(operation.message);
+		}
+		const msgs = ch.messages;
+		if (msgs) for (const msg of Object.values(msgs)) addKeys(msg);
+	}
+	const operations = doc.operations;
+	if (operations) for (const op of Object.values(operations)) addKeys(op);
+	const components = doc.components;
+	if (components) {
+		for (const section of ["messages", "messageTraits"]) {
+			const msgs = components[section];
+			if (msgs) for (const msg of Object.values(msgs)) addKeys(msg);
+		}
+		const schemas = components.schemas;
+		if (schemas) for (const schema of Object.values(schemas)) addKeys(schema);
+		const compChannels = components.channels;
+		if (compChannels) for (const ch of Object.values(compChannels)) addKeys(ch);
+		const compOps = components.operations;
+		if (compOps) for (const op of Object.values(compOps)) addKeys(op);
+	}
+	return [...names];
+}
+function extractRootFields(doc, prefixes) {
+	const result = {};
+	for (const [key, value] of Object.entries(doc)) {
+		if (ASYNCAPI_ROOT_KEYS.has(key)) continue;
+		if (!key.startsWith("x-")) continue;
+		if (prefixes.some((p) => key.startsWith(p))) result[key] = value;
+	}
+	return result;
+}
+//#endregion
+//#region src/lib/asyncApi/customAttributes/buildExtensionsConfig.ts
+function buildAsyncApiExtensionsConfig(configs, doc, version) {
+	asyncApiContext.version = version;
+	asyncApiContext.configs = configs;
+	if (doc) {
+		const prefixes = configs.map((c) => c.prefixStartsWith).filter(Boolean);
+		asyncApiContext.rootFields = prefixes.length ? extractRootFields(doc, prefixes) : {};
+	} else asyncApiContext.rootFields = {};
+	const result = {};
+	for (const config of configs) {
+		for (const [key, def] of Object.entries(config.extensions ?? {})) result[key] = buildAsyncApiGenericRenderer(key, def, config);
+		if (config.prefixStartsWith && doc) {
+			for (const key of discoverAsyncApiFieldNames(doc, config.prefixStartsWith)) if (!result[key]) result[key] = buildAsyncApiGenericRenderer(key, void 0, config);
+		}
+	}
+	return result;
+}
+function buildRootExtensionsPlugin(configs) {
+	function rootExtensionsSlot(_props) {
+		const entries = Object.entries(asyncApiContext.rootFields);
+		if (!entries.length) return null;
+		const nodes = entries.flatMap(([key, value]) => {
+			const config = asyncApiContext.configs.find((c) => c.extensions?.[key]) ?? asyncApiContext.configs.find((c) => c.prefixStartsWith && key.startsWith(c.prefixStartsWith)) ?? configs[0];
+			if (!config) return [];
+			const def = config.extensions?.[key];
+			return [createElement(buildAsyncApiGenericRenderer(key, def, config), {
+				key,
+				propertyName: key,
+				propertyValue: value,
+				document: void 0,
+				parent: void 0
+			})];
+		});
+		return nodes.length ? createElement("div", null, ...nodes) : null;
+	}
+	return {
+		name: "sap-root-extensions",
+		version: "1.0.0",
+		install(api) {
+			api.registerComponent(PluginSlot.INFO, rootExtensionsSlot);
+		}
+	};
+}
+//#endregion
+//#region src/lib/asyncApi/customAttributes/styles.ts
+var styles_default = `
+.asyncapi-attr-row {
+    display: flex;
+    border: 1px solid var(--ord-border, #e5e7eb);
+    border-radius: calc(var(--ord-radius, 4)*1px);
+    margin-top: 8px;
+    margin-bottom: 4px;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    overflow: hidden;
+}
+.asyncapi-attr-label {
+    color: var(--ord-foreground, #111);
+    width: 20ch;
+    min-width: 20ch;
+    flex-shrink: 0;
+    background: var(--ord-muted, #f3f4f6);
+    padding: 8px 10px 8px 16px;
+    border-right: 1px solid var(--ord-border, #e5e7eb);
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    font-weight: 400;
+}
+.asyncapi-attr-value {
+    color: var(--ord-muted-foreground, #555);
+    padding: 8px;
+}
+.asyncapi-attr-list {
+    margin: 0 2ch;
+    list-style: disc;
+}
+.asyncapi-attr-link {
+    text-decoration: none;
+    color: var(--ord-primary, #0098ff);
+    transition: color 0.1s ease-in-out;
+    cursor: pointer;
+}
+.asyncapi-attr-placeholder {
+    color: #999;
+}
+.asyncapi-attr-obj {
+    margin: 0;
+    padding-left: 12px;
+}
+.asyncapi-attr-obj-row {
+    margin-bottom: 4px;
+}
+.asyncapi-attr-obj-key {
+    font-weight: 600;
+    display: inline;
+}
+.asyncapi-attr-obj-val {
+    display: inline;
+    margin: 0;
+}
+
+/* Width-adaptive rows: react to the renderer's own available width (container on the
+   wrapper above). Below the breakpoint, every row stacks label-above-value simultaneously,
+   and the label spans the full width. */
+@container asyncapi-attrs (max-width: 520px) {
+    .asyncapi-attr-row {
+        flex-direction: column;
+    }
+    .asyncapi-attr-label {
+        width: 100%;
+        min-width: 0;
+        border-right: none;
+        border-bottom: 1px solid var(--ord-border, #e5e7eb);
+    }
+    .asyncapi-attr-value {
+        width: 100%;
+    }
+}
+`;
+//#endregion
+//#region src/lib/asyncApi/index.tsx
+var DARK_DEFAULTS = {
+	"--ord-background": "#1e1e1e",
+	"--ord-foreground": "#d4d4d4",
+	"--ord-card": "#252526",
+	"--ord-primary": "#0098ff",
+	"--ord-primary-foreground": "#1e1e1e",
+	"--ord-muted": "#2d2d30",
+	"--ord-muted-foreground": "#969696",
+	"--ord-border": "#3e3e42"
+};
+function buildAsyncApiThemeStyle(id, theme) {
+	const t = theme;
+	const bg = t["--ord-background"];
+	const fg = t["--ord-foreground"];
+	const secondary = t["--ord-secondary"];
+	const secondaryFg = t["--ord-secondary-foreground"];
+	const muted = t["--ord-muted"];
+	const mutedFg = t["--ord-muted-foreground"];
+	const border = t["--ord-border"];
+	const primary = t["--ord-primary"];
+	const primaryFg = t["--ord-primary-foreground"];
+	const accent = t["--ord-accent"];
+	const accentFg = t["--ord-accent-foreground"];
+	const borderRadius = t["--ord-radius"];
+	const rules = [];
+	const scope = `[data-renderer-id="${id}"]`;
+	if (bg) rules.push(`${scope} .bg-white { background-color: ${bg} !important; }`);
+	if (fg) rules.push(`${scope} {color: ${fg}; }`);
+	if (accent && accentFg) rules.push(`${scope} .bg-blue-100 { color: ${accentFg}; background-color: ${accent}; }`);
+	if (secondary) rules.push(`${scope} .bg-gray-100 { background-color: ${secondary} !important; }`);
+	if (secondaryFg) rules.push(`${scope} .prose, ${scope} .text-gray-700 { color: ${secondaryFg}; }`);
+	if (muted) rules.push(`${scope} .bg-gray-200 { background-color: ${muted} !important; }`);
+	if (mutedFg) rules.push(`${scope} .text-gray-500, ${scope} .text-gray-600 { color: ${mutedFg} !important; }`);
+	if (primary) rules.push(`${scope} .bg-gray-800 { background-color: ${primary} !important; }`, `${scope} .bg-blue-100 .text-purple-700 { color: ${primary}; }`);
+	if (primaryFg) rules.push(`${scope} .text-white { color: ${primaryFg} !important; }`);
+	if (secondary) rules.push(`${scope} .bg-gray-400 { background-color: ${secondary} !important; }`);
+	if (accentFg) rules.push(`${scope} .text-gray-200, ${scope} .examples .text-gray-600 { color: ${accentFg} !important; } `);
+	if (fg) rules.push(`${scope} .text-gray-800, ${scope} .text-gray-900 { color: ${fg} !important; }`);
+	if (border) rules.push(`${scope} .border { border-color: ${border}; }`, `${scope} .border-b { border-bottom-color: ${border}; }`, `${scope} .border-gray-400 { border-color: ${border} !important; }`);
+	if (borderRadius) rules.push(`${scope} .rounded, ${scope} .prose pre, ${scope} .\\32 xl\\:rounded { border-radius: ${borderRadius}px; }`, `${scope} .rounded:not(.inline-block) { overflow: hidden; }`, `${scope} .rounded-tl-none { border-top-left-radius: 0px; }`, `${scope} .examples { border-radius: 0px !important; }`);
+	return rules.join("\n");
+}
+function AsyncApiRenderer({ content, config, customAttributes, className, theme }) {
+	const id = useId();
+	const isDark = className?.split(/\s+/).includes("dark") ?? false;
+	const effectiveTheme = theme ?? (isDark ? DARK_DEFAULTS : null);
+	const themeStyle = effectiveTheme ? buildAsyncApiThemeStyle(id, effectiveTheme) : null;
+	const activeConfigs = useMemo(() => customAttributes ?? [], [customAttributes]);
+	const isEnabled = customAttributes !== void 0;
+	const parsedDoc = useMemo(() => isEnabled ? loadObject(content) : null, [content, isEnabled]);
+	const version = useMemo(() => {
+		const doc = parsedDoc;
+		return typeof doc?.asyncapi === "string" ? doc.asyncapi : "";
+	}, [parsedDoc]);
+	const effectiveConfig = useMemo(() => {
+		if (!isEnabled) return config ?? {};
+		const extensions = buildAsyncApiExtensionsConfig(activeConfigs, parsedDoc, version);
+		return {
+			...config,
+			extensions: {
+				...extensions,
+				...config?.extensions ?? {}
+			}
+		};
+	}, [
+		config,
+		isEnabled,
+		activeConfigs,
+		parsedDoc,
+		version
+	]);
+	const rootPlugin = useMemo(() => isEnabled ? buildRootExtensionsPlugin(activeConfigs) : null, [isEnabled, activeConfigs]);
+	const scope = `[data-renderer-id="${id}"]`;
+	const layoutStyle = `${scope} { container: asyncapi-attrs / inline-size; height: 100%; overflow: auto; scrollbar-gutter: stable; }\n${scope} :where(h1,h2,h3,h4,p,span,strong,a,li,td,div):not(pre *) { overflow-wrap: anywhere; }`;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-renderer-id": id,
+		className,
+		children: [
+			themeStyle && /* @__PURE__ */ jsx("style", { children: themeStyle }),
+			isEnabled && /* @__PURE__ */ jsx("style", { children: styles_default }),
+			/* @__PURE__ */ jsx("style", { children: layoutStyle }),
+			isEnabled && /* @__PURE__ */ jsx("style", { children: `[data-renderer-id="${id}"] #introduction .hidden { display: block !important; }` }),
+			/* @__PURE__ */ jsx(AsyncApiComponent, {
+				schema: content,
+				config: effectiveConfig,
+				plugins: rootPlugin ? [rootPlugin] : []
+			})
+		]
+	});
+}
+//#endregion
+export { AttributeLink as n, AsyncApiRenderer as t };