@yahoo/uds-v5-wip 1.47.0 → 1.48.0

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)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yahoo/uds-v5-wip",
-  "version": "1.47.0",
+  "version": "1.48.0",
   "description": "Universal Design System",
   "license": "MIT",
   "type": "module",
@@ -119,8 +119,8 @@
     "@babel/traverse": "^7.29.0",
     "@babel/types": "^7.29.0",
     "@modelcontextprotocol/sdk": "^1.27.1",
-    "@uds/cli": "npm:@yahoo/uds-v5-wip-cli@1.47.0",
-    "@uds/types": "npm:@yahoo/uds-v5-wip-types@1.47.0",
+    "@uds/cli": "npm:@yahoo/uds-v5-wip-cli@1.48.0",
+    "@uds/types": "npm:@yahoo/uds-v5-wip-types@1.48.0",
     "clsx": "^2.1.1",
     "react-day-picker": "^9.14.0",
     "unplugin": "^3.0.0",