@yahoo/uds-create-config 3.1.0 → 3.3.0

package/dist/renderer/wrappers/inline-styles.js

@@ -1,3 +1,4 @@
+import { kindOf } from "../../framework/utils/refs.js";
 import React from "react";
 //#region src/renderer/wrappers/inline-styles.tsx
 const HEX_RE = /^#[0-9a-fA-F]{3,8}$/;
@@ -68,6 +69,7 @@ function wrapInlineStyleProps(reg, config = {}) {
 		const elementType = renderProps.element.type;
 		const rawStyle = props?.style;
 		if (!props || rawStyle == null) return React.createElement(Comp, renderProps);
+		if (props["data-uds-layer"] !== void 0) return React.createElement(Comp, renderProps);
 		let style;
 		if (typeof rawStyle === "string") style = parseCssDeclarationString(rawStyle);
 		else if (typeof rawStyle === "object" && !Array.isArray(rawStyle)) style = rawStyle;
@@ -98,8 +100,26 @@ function wrapInlineStyleProps(reg, config = {}) {
 			}
 		});
 	};
-	for (const [name, Comp] of Object.entries(reg)) wrapped[name] = makeInlineStylePropsWrapper(Comp);
+	for (const [name, Comp] of Object.entries(reg)) {
+		if (takesNoStyleProps(name)) {
+			wrapped[name] = Comp;
+			continue;
+		}
+		wrapped[name] = makeInlineStylePropsWrapper(Comp);
+	}
 	return wrapped;
 }
+/** Whether a registry key names something that cannot resolve a style prop — see the loop above. */
+function takesNoStyleProps(registryKey) {
+	if (!registryKey.includes(":")) return false;
+	const open = registryKey.indexOf("(");
+	const kind = kindOf(open !== -1 && registryKey.endsWith(")") ? registryKey.slice(0, open) : registryKey);
+	if (kind !== "package" && kind !== "file") return false;
+	if (open !== -1 && registryKey.endsWith(")")) {
+		const target = registryKey.slice(open + 1, -1);
+		return !(target.includes(":") && kindOf(target) === "component");
+	}
+	return true;
+}
 //#endregion
 export { wrapInlineStyleProps };

package/dist/spec/index.d.ts

@@ -1,10 +1,10 @@
 import { AcceptsChildNodes, ChildNodesClassification, ClassifyChildNodes, buildAcceptsChildNodes, buildClassifyChildNodes, namedSlotTargets, stripInjectedSlots, withContainerChildSlots, withEmptyNodeSlots, withRenderSlots } from "./empty-node-slots.js";
+import { GraftableElement, GraftableSpec, PreviewElement, PreviewSpecNode, PreviewValue, graftPreviewElements, hasPreviewElementDeep, isPreviewElement, previewElementNodes, previewElementType } from "./preview-elements.js";
 import { DocumentRename, RewritableSpec, SpecRewrite, rewriteSpecRefs } from "./rewrite-refs.js";
 import { applyForcedModifiers, collectForcedModifierProps } from "./apply-forced-modifiers.js";
 import { AssetComponentMap, AssetJsxForm, AssetNodeResolver, assetJsxForm, jsxIdentifier, parseAssetType } from "./asset-jsx.js";
 import { CollapseTextLabelsResult, CollapsedTextLabel, collapseWrappedTextLabels } from "./collapse-text-labels.js";
 import { JsxToSpecOptions, UNRESOLVED, hasUnresolvedProps, jsxToSpec, stripUnresolvedProps } from "./jsxToSpec.js";
-import { GraftableElement, GraftableSpec, PreviewElement, PreviewSpecNode, PreviewValue, graftPreviewElements, hasPreviewElementDeep, isPreviewElement, previewElementNodes, previewElementType } from "./preview-elements.js";
 import { SpecToJsxOptions, SpecToJsxResult, specToJsx } from "./specToJsx.js";
 
 //#region src/spec/index.d.ts

package/dist/spec/specToJsx.js

@@ -4,9 +4,26 @@ import { serializeProps } from "@json-render/codegen";
 function statePathToExpression(path) {
 	return `state${path.split("/").filter(Boolean).map((s) => `.${s}`).join("")}`;
 }
-function isDynamicValue(value) {
+function isStateValue(value) {
 	return typeof value === "object" && value !== null && "$state" in value && typeof value.$state === "string";
 }
+/** `{ $cond, $then, $else }` — a value the anatomy chooses by a condition on state. */
+function isConditionalValue(value) {
+	return typeof value === "object" && value !== null && "$cond" in value && "$then" in value && "$else" in value && isStateValue(value.$cond);
+}
+/** A `$state` binding or a `$cond` choice — anything written as an expression rather than a literal. */
+function isDynamicValue(value) {
+	return isStateValue(value) || isConditionalValue(value);
+}
+/** The test of a `$cond`, as the expression the render would have written. */
+function conditionExpression(condition) {
+	const subject = statePathToExpression(condition.$state);
+	let test;
+	if (condition.eq !== void 0) test = `${subject} === ${JSON.stringify(condition.eq)}`;
+	else if (condition.neq !== void 0) test = `${subject} !== ${JSON.stringify(condition.neq)}`;
+	else test = subject;
+	return condition.not ? `!(${test})` : test;
+}
 /** All element keys an element's `slots` record pulls in. */
 function collectSlotKeys(slots) {
 	const keys = /* @__PURE__ */ new Set();
@@ -14,9 +31,16 @@ function collectSlotKeys(slots) {
 	return keys;
 }
 function resolveDynamicValue(value) {
-	if (isDynamicValue(value)) return statePathToExpression(value.$state);
+	if (isConditionalValue(value)) return `${conditionExpression(value.$cond)} ? ${armExpression(value.$then)} : ${armExpression(value.$else)}`;
+	if (isStateValue(value)) return statePathToExpression(value.$state);
 	return String(value);
 }
+/** One arm of a written-back choice: a nested choice in parentheses, a binding, or a literal. */
+function armExpression(value) {
+	if (isConditionalValue(value)) return `(${resolveDynamicValue(value)})`;
+	if (isStateValue(value)) return statePathToExpression(value.$state);
+	return JSON.stringify(value);
+}
 function renderActionBinding(binding) {
 	if (Array.isArray(binding)) return `{() => { ${binding.map((b) => b.action).map((a) => `${a}()`).join("; ")} }}`;
 	return `{${binding.action}}`;