Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 | 1x 27x 27x 27x 27x 27x 23x 4x 27x 27x 27x 27x 27x 27x 26x 27x 27x 27x 27x 24x 3x 27x 27x 8x 5x 5x 5x 27x 2x 3x 27x 26x 1x 1x 1x 27x 23x 3x 1x 1x 4x 3x 3x 2x 1x 4x 6x 3x 3x 26x | /**
* JSX Builder
*
* Transforms UIF structure definitions into JSX syntax.
*/
import type {
StructureMetadata,
SlotMetadata,
ComposedComponentMetadata,
} from '@fds-uif/generator-base/browser';
import type { GenerationContext } from './types.js';
/**
* Type guard for ComposedComponentMetadata
*/
function isComposedComponent(
child: SlotMetadata | StructureMetadata | ComposedComponentMetadata,
): child is ComposedComponentMetadata {
return 'type' in child && child.type === 'component';
}
/**
* Build JSX for a structure node
*/
export function buildJsx(structure: StructureMetadata, context: GenerationContext): string {
const { indent } = context;
const spaces = ' '.repeat(indent);
const element = structure.element || 'div';
const attrs = buildAttributes(structure, context);
const children = buildChildren(structure, { ...context, indent: indent + 1 });
// Self-closing tag if no children
if (!children) {
return `${spaces}<${element}${attrs} />`;
}
return `${spaces}<${element}${attrs}>\n${children}\n${spaces}</${element}>`;
}
/**
* Build JSX attributes string
*/
function buildAttributes(structure: StructureMetadata, context: GenerationContext): string {
const attrs: string[] = [];
const isRoot = context.indent === 2; // Root element uses computed className
// Build className attribute (computed for root, static for children)
const classNameAttr = buildClassNameAttribute(structure, isRoot);
if (classNameAttr) attrs.push(classNameAttr);
// Build static attributes (excluding className which is handled above)
const staticAttrs = buildStaticAttributes(structure);
attrs.push(...staticAttrs);
// Build style attribute for root element
if (isRoot) {
attrs.push('style={style}');
}
// Build bound attributes as props
const boundAttrs = buildBoundAttributes(structure);
attrs.push(...boundAttrs);
return attrs.length > 0 ? ' ' + attrs.join(' ') : '';
}
/**
* Build className attribute (computed for root, static for children)
*/
function buildClassNameAttribute(
structure: StructureMetadata,
isRoot: boolean,
): string | null {
if (!structure.attributes || typeof structure.attributes !== 'object') {
return null;
}
const staticAttrs = structure.attributes as Record<string, unknown>;
if (!staticAttrs.class) {
return null;
}
return isRoot
? 'className={computedClassName}' // Root element uses computed variable
: `className="${staticAttrs.class}"`; // Children use static class
}
/**
* Build static attributes (excluding className)
*/
function buildStaticAttributes(structure: StructureMetadata): string[] {
const attrs: string[] = [];
if (!structure.attributes || typeof structure.attributes !== 'object') {
return attrs;
}
const staticAttrs = structure.attributes as Record<string, unknown>;
for (const [key, value] of Object.entries(staticAttrs)) {
if (key === 'class') continue; // Already handled by buildClassNameAttribute
const jsxKey = convertToJsxAttribute(key);
const attr = buildStaticAttribute(jsxKey, value);
if (attr) attrs.push(attr);
}
return attrs;
}
/**
* Build a single static attribute string
*/
function buildStaticAttribute(jsxKey: string, value: unknown): string | null {
if (typeof value === 'boolean') {
return value ? jsxKey : null;
}
if (typeof value === 'string') {
return `${jsxKey}="${value}"`;
}
if (value !== undefined && value !== null) {
return `${jsxKey}={${JSON.stringify(value)}}`;
}
return null;
}
/**
* Build bound attributes as props
*/
function buildBoundAttributes(structure: StructureMetadata): string[] {
const attrs: string[] = [];
if (!structure.boundAttributes || structure.boundAttributes.length === 0) {
return attrs;
}
for (const bound of structure.boundAttributes) {
const jsxKey = convertToJsxAttribute(bound.attribute);
// Use the prop name for the variable reference (it's a valid JS identifier)
attrs.push(`${jsxKey}={${bound.prop}}`);
}
return attrs;
}
/**
* Build children JSX
*/
function buildChildren(structure: StructureMetadata, context: GenerationContext): string {
const parts: string[] = [];
if (!structure.children || structure.children.length === 0) {
return '';
}
for (const child of structure.children) {
if (isSlotMetadata(child)) {
// Render slot as prop or children
parts.push(buildSlot(child, context));
} else if (isComposedComponent(child)) {
// Skip composed components - component composition will be implemented
// when componentProps support is added to the generator
continue;
} else {
// TypeScript narrows to StructureMetadata after the above checks
const structChild = child;
if (structChild.children?.length === 1 && isSlotMetadata(structChild.children[0])) {
// Render the slot directly (type guard ensures SlotMetadata)
parts.push(buildSlot(structChild.children[0], context));
} else {
// Recurse for structural children
parts.push(buildJsx(structChild, context));
}
}
}
return parts.join('\n');
}
/**
* Build slot rendering
*/
function buildSlot(slot: SlotMetadata, context: GenerationContext): string {
const spaces = ' '.repeat(context.indent);
const propName = slot.name === 'default' ? 'children' : slot.name;
// Default slot renders as {children}
if (slot.name === 'default') {
return `${spaces}{children}`;
}
// Named slots render as props
return `${spaces}{${propName}}`;
}
/**
* Type guard for SlotMetadata
*/
function isSlotMetadata(
child: StructureMetadata | SlotMetadata | ComposedComponentMetadata,
): child is SlotMetadata {
return 'type' in child && child.type === 'slot';
}
/**
* Convert HTML attribute to JSX attribute name
*/
function convertToJsxAttribute(attr: string): string {
const jsxAttributeMap: Record<string, string> = {
class: 'className',
for: 'htmlFor',
tabindex: 'tabIndex',
readonly: 'readOnly',
maxlength: 'maxLength',
minlength: 'minLength',
colspan: 'colSpan',
rowspan: 'rowSpan',
cellpadding: 'cellPadding',
cellspacing: 'cellSpacing',
usemap: 'useMap',
frameborder: 'frameBorder',
contenteditable: 'contentEditable',
crossorigin: 'crossOrigin',
datetime: 'dateTime',
enctype: 'encType',
formaction: 'formAction',
formenctype: 'formEncType',
formmethod: 'formMethod',
formnovalidate: 'formNoValidate',
formtarget: 'formTarget',
hreflang: 'hrefLang',
inputmode: 'inputMode',
srcdoc: 'srcDoc',
srclang: 'srcLang',
srcset: 'srcSet',
accesskey: 'accessKey',
autocomplete: 'autoComplete',
autofocus: 'autoFocus',
autoplay: 'autoPlay',
charset: 'charSet',
novalidate: 'noValidate',
spellcheck: 'spellCheck',
};
// Handle data-* and aria-* attributes (keep as-is)
if (attr.startsWith('data-') || attr.startsWith('aria-')) {
return attr;
}
return jsxAttributeMap[attr.toLowerCase()] || attr;
}
/**
* Build the complete render body
*/
export function buildRenderBody(structure: StructureMetadata, context: GenerationContext): string {
return buildJsx(structure, { ...context, indent: 2 });
}
|