schema-components 1.22.0 → 1.24.0

package/dist/html/streamRenderers.mjs

@@ -1,14 +1,17 @@
 import { isObject } from "../core/guards.mjs";
 import "../core/limits.mjs";
 import { emitDiagnostic } from "../core/diagnostics.mjs";
+import { SC_CLASSES } from "../core/cssClasses.mjs";
 import { getHtmlRenderFn } from "../core/renderer.mjs";
+import { matchUnionOption, resolveDiscriminatedActive } from "../core/unionMatch.mjs";
 import { VOID_ELEMENTS, h, raw, serialize, serializeAttributes } from "./html.mjs";
 import { ariaLabelAttrs, buildHintElement, buildInputId, joinPath, requiredIndicator } from "./a11y.mjs";
+import { panelId, tabId } from "./renderers.mjs";
 import { recursionSentinelHtml } from "./renderToHtml.mjs";
 //#region src/html/streamRenderers.ts
 function yieldOpen(el) {
 	const attrStr = serializeAttributes(el.attributes);
-	if (el.children.length === 0 && VOID_ELEMENTS.has(el.tag)) return `<${el.tag}${attrStr}>`;
+	if (VOID_ELEMENTS.has(el.tag)) return `<${el.tag}${attrStr} />`;
 	return `<${el.tag}${attrStr}>`;
 }
 function yieldClose(el) {
@@ -27,19 +30,12 @@ function renderLeaf(tree, value, mergedResolver, path) {
 		tree,
 		renderChild: () => ""
 	});
-	if (value === void 0 || value === null) return serialize(h("span", { class: "sc-value sc-value--empty" }, "—"));
-	return serialize(h("span", { class: "sc-value" }, typeof value === "string" ? value : JSON.stringify(value)));
+	if (value === void 0 || value === null) return serialize(h("span", { class: SC_CLASSES.valueEmpty }, "—"));
+	return serialize(h("span", { class: SC_CLASSES.value }, typeof value === "string" ? value : JSON.stringify(value)));
 }
 function renderFieldSync(tree, value, mergedResolver, path, rawResolver, currentDepth, diagnostics) {
 	return [...streamField(tree, value, mergedResolver, path, rawResolver, currentDepth, diagnostics)].join("");
 }
-function matchUnionOption(options, value) {
-	if (typeof value === "string") return options.find((o) => o.type === "string" || o.type === "enum");
-	if (typeof value === "number") return options.find((o) => o.type === "number");
-	if (typeof value === "boolean") return options.find((o) => o.type === "boolean");
-	if (Array.isArray(value)) return options.find((o) => o.type === "array");
-	if (typeof value === "object" && value !== null) return options.find((o) => o.type === "object");
-}
 /**
 * Build a visible placeholder element used when a value does not match
 * the shape implied by its field type. The expected-shape label is
@@ -110,7 +106,7 @@ function* streamObject(tree, value, mergedResolver, path, rawResolver, currentDe
 	const descriptionText = typeof tree.meta.description === "string" ? tree.meta.description : void 0;
 	const labelAttrs = ariaLabelAttrs(descriptionText);
 	if (readOnly) {
-		const dlAttrs = { class: "sc-object" };
+		const dlAttrs = { class: SC_CLASSES.object };
 		Object.assign(dlAttrs, labelAttrs);
 		const dl = h("dl", dlAttrs);
 		const legend = descriptionText !== void 0 ? serialize(h("legend", {}, descriptionText)) : "";
@@ -119,11 +115,11 @@ function* streamObject(tree, value, mergedResolver, path, rawResolver, currentDe
 			const label = typeof field.meta.description === "string" ? field.meta.description : key;
 			const childValue = obj[key];
 			const childHtml = renderFieldSync(field, childValue, mergedResolver, joinPath(path, key), rawResolver, currentDepth + 1, diagnostics);
-			yield `${serialize(h("dt", { class: "sc-label" }, label))}${serialize(h("dd", { class: "sc-value" }, raw(childHtml)))}`;
+			yield `${serialize(h("dt", { class: SC_CLASSES.label }, label))}${serialize(h("dd", { class: SC_CLASSES.value }, raw(childHtml)))}`;
 		}
 		yield yieldClose(dl);
 	} else {
-		const fieldsetAttrs = { class: "sc-object" };
+		const fieldsetAttrs = { class: SC_CLASSES.object };
 		Object.assign(fieldsetAttrs, labelAttrs);
 		const fieldset = h("fieldset", fieldsetAttrs);
 		const legend = descriptionText !== void 0 ? serialize(h("legend", {}, descriptionText)) : "";
@@ -137,12 +133,12 @@ function* streamObject(tree, value, mergedResolver, path, rawResolver, currentDe
 			const labelContent = [label];
 			if (required !== void 0) labelContent.push(required);
 			const fieldChildren = [h("label", {
-				class: "sc-label",
+				class: SC_CLASSES.label,
 				for: fieldId
 			}, ...labelContent), raw(childChunks)];
 			const hint = buildHintElement(key, field.constraints);
 			if (hint !== void 0) fieldChildren.push(hint);
-			yield serialize(h("div", { class: "sc-field" }, ...fieldChildren));
+			yield serialize(h("div", { class: SC_CLASSES.field }, ...fieldChildren));
 		}
 		yield yieldClose(fieldset);
 	}
@@ -167,12 +163,12 @@ function* streamArray(tree, value, mergedResolver, path, rawResolver, currentDep
 	}
 	const arr = Array.isArray(value) ? value : [];
 	if (tree.editability === "presentation") {
-		const ul = h("ul", { class: "sc-array" });
+		const ul = h("ul", { class: SC_CLASSES.array });
 		yield yieldOpen(ul);
 		for (const [i, item] of arr.entries()) yield serialize(h("li", { class: "sc-item" }, raw(renderFieldSync(element, item, mergedResolver, joinPath(path, `[${String(i)}]`), rawResolver, currentDepth + 1, diagnostics))));
 		yield yieldClose(ul);
 	} else {
-		const div = h("div", { class: "sc-array" });
+		const div = h("div", { class: SC_CLASSES.array });
 		yield yieldOpen(div);
 		for (const [i, item] of arr.entries()) yield serialize(h("div", {}, raw(renderFieldSync(element, item, mergedResolver, joinPath(path, `[${String(i)}]`), rawResolver, currentDepth + 1, diagnostics))));
 		yield yieldClose(div);
@@ -198,7 +194,7 @@ function* streamRecord(tree, value, mergedResolver, path, rawResolver, currentDe
 	const obj = isObject(value) ? value : {};
 	const readOnly = tree.editability === "presentation";
 	const attrs = {
-		class: "sc-record",
+		class: SC_CLASSES.record,
 		role: "group"
 	};
 	if (readOnly) {
@@ -206,7 +202,7 @@ function* streamRecord(tree, value, mergedResolver, path, rawResolver, currentDe
 		yield yieldOpen(dl);
 		for (const [key, val] of Object.entries(obj)) {
 			const childHtml = renderFieldSync(valueType, val, mergedResolver, joinPath(path, key), rawResolver, currentDepth + 1, diagnostics);
-			yield `${serialize(h("dt", { class: "sc-label" }, key))}${serialize(h("dd", { class: "sc-value" }, raw(childHtml)))}`;
+			yield `${serialize(h("dt", { class: SC_CLASSES.label }, key))}${serialize(h("dd", { class: SC_CLASSES.value }, raw(childHtml)))}`;
 		}
 		yield yieldClose(dl);
 	} else {
@@ -214,7 +210,7 @@ function* streamRecord(tree, value, mergedResolver, path, rawResolver, currentDe
 		yield yieldOpen(container);
 		for (const [key, val] of Object.entries(obj)) {
 			const childHtml = renderFieldSync(valueType, val, mergedResolver, joinPath(path, key), rawResolver, currentDepth + 1, diagnostics);
-			yield serialize(h("div", { class: "sc-field" }, h("label", { class: "sc-label" }, key), raw(childHtml)));
+			yield serialize(h("div", { class: SC_CLASSES.field }, h("label", { class: SC_CLASSES.label }, key), raw(childHtml)));
 		}
 		yield yieldClose(container);
 	}
@@ -222,67 +218,50 @@ function* streamRecord(tree, value, mergedResolver, path, rawResolver, currentDe
 function* streamUnion(tree, value, mergedResolver, path, rawResolver, currentDepth, diagnostics) {
 	const options = tree.type === "union" ? tree.options : void 0;
 	if (options === void 0 || options.length === 0) {
-		if (value === void 0 || value === null) yield serialize(h("span", { class: "sc-value sc-value--empty" }, "—"));
-		else yield serialize(h("span", { class: "sc-value" }, JSON.stringify(value)));
+		if (value === void 0 || value === null) yield serialize(h("span", { class: SC_CLASSES.valueEmpty }, "—"));
+		else yield serialize(h("span", { class: SC_CLASSES.value }, JSON.stringify(value)));
 		return;
 	}
 	const target = matchUnionOption(options, value) ?? options[0];
 	if (target !== void 0) yield* streamField(target, value, mergedResolver, path, rawResolver, currentDepth + 1, diagnostics);
-	else yield serialize(h("span", { class: "sc-value sc-value--empty" }, "—"));
+	else yield serialize(h("span", { class: SC_CLASSES.valueEmpty }, "—"));
 }
 function* streamDiscriminatedUnion(tree, value, mergedResolver, path, rawResolver, currentDepth, diagnostics) {
-	const options = tree.type === "discriminatedUnion" ? tree.options : void 0;
-	const discriminator = tree.type === "discriminatedUnion" ? tree.discriminator : void 0;
-	if (options === void 0 || options.length === 0) {
-		if (value === void 0 || value === null) yield serialize(h("span", { class: "sc-value sc-value--empty" }, "—"));
-		else yield serialize(h("span", { class: "sc-value" }, JSON.stringify(value)));
+	if (tree.type !== "discriminatedUnion") return;
+	const { options, discriminator } = tree;
+	if (options.length === 0) {
+		if (value === void 0 || value === null) yield serialize(h("span", { class: SC_CLASSES.valueEmpty }, "—"));
+		else yield serialize(h("span", { class: SC_CLASSES.value }, JSON.stringify(value)));
 		return;
 	}
-	const obj = isObject(value) ? value : {};
-	const discKey = discriminator ?? "";
-	const currentDiscriminatorValue = typeof obj[discKey] === "string" ? obj[discKey] : void 0;
-	const optionLabels = options.map((opt) => {
-		if (opt.type === "object") {
-			const discriminatorField = opt.fields[discKey];
-			if (discriminatorField?.type === "literal") {
-				const constVal = discriminatorField.literalValues[0];
-				if (typeof constVal === "string") return constVal;
-			}
-		}
-		return typeof opt.meta.title === "string" ? opt.meta.title : opt.type;
-	});
-	let activeIndex = 0;
-	if (currentDiscriminatorValue !== void 0) {
-		const found = optionLabels.indexOf(currentDiscriminatorValue);
-		if (found !== -1) activeIndex = found;
-	}
-	const activeOption = options[activeIndex];
+	const { optionLabels, activeIndex, activeOption } = resolveDiscriminatedActive(options, discriminator, isObject(value) ? value : void 0);
 	if (tree.editability === "presentation") {
 		if (activeOption !== void 0) yield* streamField(activeOption, value, mergedResolver, path, rawResolver, currentDepth + 1, diagnostics);
 		return;
 	}
-	const panelId = `sc-${path}-panel`;
-	const wrapper = h("div", { class: "sc-discriminated-union" });
+	const tabPanelId = panelId(path);
+	const wrapper = h("div", { class: SC_CLASSES.discriminatedUnion });
 	yield yieldOpen(wrapper);
-	yield serialize(h("div", {
-		role: "tablist",
-		class: "sc-tabs",
-		"aria-label": "Select variant"
-	}, ...options.map((_opt, i) => {
+	const tabButtons = options.map((_opt, i) => {
 		return h("button", {
 			type: "button",
 			role: "tab",
-			class: i === activeIndex ? "sc-tab sc-tab--active" : "sc-tab",
-			id: `sc-${path}-tab-${String(i)}`,
+			class: i === activeIndex ? SC_CLASSES.tabActive : SC_CLASSES.tab,
+			id: tabId(path, i),
 			"aria-selected": i === activeIndex ? "true" : void 0,
-			"aria-controls": panelId,
+			"aria-controls": tabPanelId,
 			tabindex: i === activeIndex ? "0" : "-1"
 		}, optionLabels[i]);
-	})));
+	});
+	yield serialize(h("div", {
+		role: "tablist",
+		class: SC_CLASSES.tabs,
+		"aria-label": "Select variant"
+	}, ...tabButtons));
 	const panelOpen = h("div", {
 		role: "tabpanel",
-		id: panelId,
-		"aria-labelledby": `sc-${path}-tab-${String(activeIndex)}`
+		id: tabPanelId,
+		"aria-labelledby": tabId(path, activeIndex)
 	});
 	yield yieldOpen(panelOpen);
 	if (activeOption !== void 0) yield* streamField(activeOption, value, mergedResolver, path, rawResolver, currentDepth + 1, diagnostics);
@@ -290,4 +269,4 @@ function* streamDiscriminatedUnion(tree, value, mergedResolver, path, rawResolve
 	yield yieldClose(wrapper);
 }
 //#endregion
-export { matchUnionOption, renderFieldSync, renderLeaf, streamField, yieldClose, yieldOpen };
+export { renderFieldSync, renderLeaf, streamField, yieldClose, yieldOpen };