@yahoo/uds-v5-wip 1.46.0 → 1.48.0

package/dist/config/dist/component-config.d.ts

@@ -95,16 +95,16 @@ interface CompositeBinding {
   layers: Record<string, string>;
 }
 /**
- * Forward an existing surface key from one of the component's layers as
- * a public JSX prop. If the target layer is a primitive, `from` is an
- * HTML attr / event name; if it's a composed component, `from` is one
- * of that component's existing props.
+ * Forward a JSX prop value to one of the component's layers as an
+ * existing surface key. If the target layer is a primitive, `from` is
+ * an HTML attr / event name; if it's a composed component, `from` is
+ * one of that component's existing props.
  *
- * `from` is a bare string (no braces) — the leading-brace check on the
- * binding shape's `from` is how the framework dispatches "bind a
- * registered thing" vs "forward an existing surface key".
+ * `from` is a bare string (no braces) — the absence of `styleProp` /
+ * `composite` keys is how the framework discriminates this shape from
+ * the registered-binding shapes.
  */
-interface SurfaceForward {
+interface ForwardBinding {
   layer: string;
   from: string;
 }
@@ -144,7 +144,7 @@ type StylePropShorthand = StylePropRef;
  * `'{bg}'` is allowed only in the primitive form's props (see
  * `PrimitivePropBinding`).
  */
-type VerbosePropBinding = StylePropBinding | SingleLayerCompositeBinding | CompositeBinding | SurfaceForward | BoolMarker | EnumMarker<any>;
+type VerbosePropBinding = StylePropBinding | SingleLayerCompositeBinding | CompositeBinding | ForwardBinding | BoolMarker | EnumMarker<any>;
 /**
  * All allowed shapes for a single entry in the primitive form's `props`
  * block. Primitive form adds the `StylePropShorthand` brace-ref
@@ -198,4 +198,4 @@ interface ComponentConfigValue<TLayers extends Record<string, LayerInput>, TProp
  * function destructures `props.<layerName>` into the JSX position.
  */
 //#endregion
-export { BoolMarker, ComponentConfigValue, ComposedLayer, CompositeBinding, EnumMarker, HtmlTag, LayerInput, PrimitiveLayer, PrimitivePropBinding, PropBinding, RootTag, SingleLayerCompositeBinding, StylePropBinding, StylePropShorthand, SurfaceForward, VerbosePropBinding };
+export { BoolMarker, ComponentConfigValue, ComposedLayer, CompositeBinding, EnumMarker, ForwardBinding, HtmlTag, LayerInput, PrimitiveLayer, PrimitivePropBinding, PropBinding, RootTag, SingleLayerCompositeBinding, StylePropBinding, StylePropShorthand, VerbosePropBinding };

package/dist/config/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { ComponentRef, CompositeRef, RegisteredComponents, RegisteredComposites, RegisteredStyleProps, StylePropRef } from "./component-refs.js";
-import { BoolMarker, ComponentConfigValue, ComposedLayer, CompositeBinding, EnumMarker, HtmlTag, LayerInput, PrimitiveLayer, PrimitivePropBinding, PropBinding, RootTag, SingleLayerCompositeBinding, StylePropBinding, StylePropShorthand, SurfaceForward, VerbosePropBinding } from "./component-config.js";
+import { BoolMarker, ComponentConfigValue, ComposedLayer, CompositeBinding, EnumMarker, ForwardBinding, HtmlTag, LayerInput, PrimitiveLayer, PrimitivePropBinding, PropBinding, RootTag, SingleLayerCompositeBinding, StylePropBinding, StylePropShorthand, VerbosePropBinding } from "./component-config.js";
 import { Props } from "./Props.js";
 import { BoundComponent } from "./defineComponent.js";
 import { ColorFn, ColorKeyword, CssAngle, CssColor, CssLength, CssPercentage, CssRatio, CssTime, CssValue, CssValueTypeName, HexColor, HslColor, RgbColor } from "./types/css-values.js";

package/dist/foundational-presets/dist/style-props.js

@@ -1235,8 +1235,9 @@ const transformOrigin = defineStyleProp({
 	classPrefix: "origin"
 }).metadata({ label: "Transform origin" });
 const transition = defineStyleProp({
-	cssProperty: "transition-property",
-	classPrefix: "transition"
+	cssProperty: "transition",
+	classPrefix: "transition",
+	arbitrary: "string"
 }).metadata({ label: "Transition" });
 const transitionDuration = defineStyleProp({
 	cssProperty: "transition-duration",

package/dist/loader/dist/loader/lower-new-api-primitive.js

@@ -0,0 +1,90 @@
+//#region ../loader/dist/loader/lower-new-api-primitive.js
+/**
+* Build the className a binding emits for a given value. Mirrors the
+* codegen convention in `packages/codegen/src/css/prepareCss.ts`:
+*
+*  - `classPrefix === ''` / `'no-prefix'` → value IS the class.
+*  - Bracketed arbitrary values (`'[#abc]'`) → preserved verbatim
+*    (`bg-[#abc]`).
+*  - Otherwise → `${classPrefix}-${value}`.
+*/
+function buildClassName(classPrefix, noPrefix, value) {
+	if (noPrefix) return value;
+	return `${classPrefix}-${value}`;
+}
+/**
+* Read a JSX attribute value as a literal string when statically
+* resolvable. Handles `attr="x"`, `attr={"x"}`, and template-literal
+* expressions with no interpolations. Returns `undefined` for any
+* dynamic form so the caller can bail.
+*/
+function readStaticString(value) {
+	if (!value) return void 0;
+	if (value.type === "StringLiteral") return value.value;
+	if (value.type === "JSXExpressionContainer") {
+		const expr = value.expression;
+		if (expr.type === "StringLiteral") return expr.value;
+		if (expr.type === "TemplateLiteral" && expr.expressions.length === 0 && expr.quasis.length === 1) return expr.quasis[0].value.cooked ?? expr.quasis[0].value.raw;
+	}
+}
+/**
+* Lower a JSX element of a new-API primitive component. Returns `true`
+* when the AST was mutated (lowered); `false` when the call site can't
+* be statically lowered and the runtime path should take over.
+*
+* `t` is the `@babel/types` namespace — passed in so the helper stays
+* free of direct import dependencies on Babel internals (the loader
+* already imports them and threads them through).
+*
+* `openingElement` and (optional) `closingElement` are mutated in
+* place on success.
+*/
+function lowerNewApiPrimitiveJsx(openingElement, closingElement, entry, t) {
+	let tag = entry.tag;
+	const classNames = [...entry.defaultClassNames];
+	const passthroughAttrs = [];
+	let existingClassName = null;
+	for (const attr of openingElement.attributes ?? []) {
+		if (attr.type === "JSXSpreadAttribute") return false;
+		const attrName = attr.name?.type === "JSXIdentifier" ? attr.name.name : void 0;
+		if (!attrName) return false;
+		if (attrName === "as") {
+			const tagValue = readStaticString(attr.value);
+			if (tagValue === void 0) return false;
+			tag = tagValue;
+			continue;
+		}
+		if (attrName === "className") {
+			existingClassName = attr.value;
+			continue;
+		}
+		const binding = entry.propBindings[attrName];
+		if (binding) {
+			const value = readStaticString(attr.value);
+			if (value === void 0) return false;
+			classNames.push(buildClassName(binding.classPrefix, binding.noPrefix, value));
+			continue;
+		}
+		passthroughAttrs.push(attr);
+	}
+	const boundClassName = classNames.join(" ");
+	let classNameAttr = null;
+	if (existingClassName === null && boundClassName.length > 0) classNameAttr = t.jsxAttribute(t.jsxIdentifier("className"), t.stringLiteral(boundClassName));
+	else if (existingClassName !== null) if (existingClassName.type === "StringLiteral") {
+		const merged = boundClassName ? `${existingClassName.value} ${boundClassName}` : existingClassName.value;
+		classNameAttr = t.jsxAttribute(t.jsxIdentifier("className"), t.stringLiteral(merged));
+	} else if (existingClassName.type === "JSXExpressionContainer" && existingClassName.expression.type === "StringLiteral") {
+		const merged = boundClassName ? `${existingClassName.expression.value} ${boundClassName}` : existingClassName.expression.value;
+		classNameAttr = t.jsxAttribute(t.jsxIdentifier("className"), t.stringLiteral(merged));
+	} else if (existingClassName.type === "JSXExpressionContainer") {
+		const expr = existingClassName.expression;
+		const finalExpr = boundClassName ? t.binaryExpression("+", t.binaryExpression("+", expr, t.stringLiteral(" ")), t.stringLiteral(boundClassName)) : expr;
+		classNameAttr = t.jsxAttribute(t.jsxIdentifier("className"), t.jsxExpressionContainer(finalExpr));
+	} else return false;
+	openingElement.name = t.jsxIdentifier(tag);
+	openingElement.attributes = classNameAttr ? [classNameAttr, ...passthroughAttrs] : passthroughAttrs;
+	if (closingElement) closingElement.name = t.jsxIdentifier(tag);
+	return true;
+}
+//#endregion
+export { lowerNewApiPrimitiveJsx };

package/dist/loader/dist/loader.js

@@ -6,6 +6,7 @@ import { canInlineSimpleLoweredComponent, resolveLoweredCreateComponentData } fr
 import { applySlotMotionToElement, clearHoistedMotionStates, componentHasExitMotion, getCustomSlotMotion, getHoistedMotionStates, handleMotionOnElement, wrapCustomComponentWithAnimatePresence, wrapParentConditionalWithAnimatePresence } from "./loader/motion-transform.js";
 import { findClassesParamName, findSlotFromClassNameAttr, findSlotFromPropsSpreadAttr, findSlotPropsParamName, handleCompiledJsxDataAttrs, injectInternalUdsProps } from "./loader/data-attr-transform.js";
 import { buildInlineSimpleLoweredCreateComponentRenderFn, buildInlineSimplePrimitiveCreateComponentRenderFn, buildLoweredCreateComponentConfigExpression, extractOwnPropKeys, inferCreateComponentNameFromAssignment, isCreateComponentRenderFnNode, remapOnPressToOnClickInJsxAttributes } from "./loader/create-component-lowering.js";
+import { lowerNewApiPrimitiveJsx } from "./loader/lower-new-api-primitive.js";
 import { createStyleTransformRuntime } from "./loader/style-transform.js";
 import * as t from "@babel/types";
 import path from "node:path";
@@ -97,6 +98,18 @@ const transformLoader = function(source) {
 		JSXOpeningElement(nodePath) {
 			const jsxName = nodePath.node.name;
 			const jsxTagName = jsxName?.type === "JSXIdentifier" ? jsxName.name : void 0;
+			if (jsxTagName) {
+				const componentEntry = manifest?.components?.[jsxTagName];
+				if (componentEntry?.propBindings && udsImportedNames.has(jsxTagName)) {
+					const closingElement = (nodePath.parentPath?.node)?.closingElement ?? null;
+					if (lowerNewApiPrimitiveJsx(nodePath.node, closingElement, {
+						tag: componentEntry.element,
+						propBindings: componentEntry.propBindings,
+						defaultClassNames: componentEntry.defaultClassNames ?? []
+					}, t)) transformed = true;
+					return;
+				}
+			}
 			if (jsxTagName && !allUdsComponents.has(jsxTagName) && udsImportedNames.has(jsxTagName)) {
 				allUdsComponents.add(jsxTagName);
 				if (!primitiveUdsComponents.has(jsxTagName)) {