imxc 0.3.1 → 0.4.0

package/dist/emitter.js

@@ -115,7 +115,7 @@ export function emitComponentHeader(comp, sourceFile) {
     lines.push('};');
     lines.push('');
     // Function forward declaration
-    lines.push(`void ${comp.name}_render(imx::RenderContext& ctx, const ${comp.name}Props& props);`);
+    lines.push(`void ${comp.name}_render(imx::RenderContext& ctx, ${comp.name}Props& props);`);
     lines.push('');
     return lines.join('\n');
 }
@@ -132,24 +132,50 @@ export function emitComponent(comp, imports, sourceFile) {
     dragDropSourceStack.length = 0;
     dragDropTargetStack.length = 0;
     currentCompName = comp.name;
-    const hasProps = comp.params.length > 0;
+    // hasProps: true for inline prop struct OR named interface
+    const hasProps = comp.params.length > 0 || !!comp.namedPropsType;
+    // propsTypeName: for named interface use it directly; for inline use ComponentProps convention
+    const propsTypeName = comp.namedPropsType ?? (comp.params.length > 0 ? `${comp.name}Props` : undefined);
     const hasColorType = comp.stateSlots.some(s => s.type === 'color');
     // File banner
     if (sourceFile) {
         lines.push(`// Generated from ${sourceFile} by imxc`);
     }
     if (hasProps) {
-        // Component with props: include its own header instead of redeclaring struct
-        lines.push(`#include "${comp.name}.gen.h"`);
-        if (hasColorType) {
-            lines.push('#include <array>');
+        if (comp.namedPropsType) {
+            // Named interface: include runtime + renderer, plus user header for the struct definition
+            lines.push('#include <imx/runtime.h>');
+            lines.push('#include <imx/renderer.h>');
+            lines.push(`#include "${comp.namedPropsType}.h"`);
+            if (hasColorType) {
+                lines.push('#include <array>');
+            }
+            // Include imported component headers
+            if (imports && imports.length > 0) {
+                for (const imp of imports) {
+                    lines.push(`#include "${imp.headerFile}"`);
+                }
+            }
+            // Embed image includes
+            const embedKeysNamed = collectEmbedKeys(comp.body);
+            for (const key of embedKeysNamed) {
+                lines.push(`#include "${key}.embed.h"`);
+            }
+            lines.push('');
         }
-        // Embed image includes
-        const embedKeysProps = collectEmbedKeys(comp.body);
-        for (const key of embedKeysProps) {
-            lines.push(`#include "${key}.embed.h"`);
+        else {
+            // Component with inline props: include its own header instead of redeclaring struct
+            lines.push(`#include "${comp.name}.gen.h"`);
+            if (hasColorType) {
+                lines.push('#include <array>');
+            }
+            // Embed image includes
+            const embedKeysProps = collectEmbedKeys(comp.body);
+            for (const key of embedKeysProps) {
+                lines.push(`#include "${key}.embed.h"`);
+            }
+            lines.push('');
         }
-        lines.push('');
     }
     else {
         // No props: standard headers
@@ -185,7 +211,7 @@ export function emitComponent(comp, imports, sourceFile) {
         emitDockSetupFunction(dockLayout, comp.name, lines);
     }
     // Function signature
-    const propsArg = hasProps ? `, const ${comp.name}Props& props` : '';
+    const propsArg = propsTypeName ? `, ${propsTypeName}& props` : '';
     lines.push(`void ${comp.name}_render(imx::RenderContext& ctx${propsArg}) {`);
     // State declarations
     for (const slot of comp.stateSlots) {
@@ -205,24 +231,57 @@ export function emitComponent(comp, imports, sourceFile) {
     lines.push('');
     return lines.join('\n');
 }
-export function emitRoot(rootName, stateCount, bufferCount, sourceFile) {
+export function emitRoot(rootName, stateCount, bufferCount, sourceFile, propsType, namedPropsType) {
     const lines = [];
     if (sourceFile) {
         lines.push(`// Generated from ${sourceFile} by imxc`);
     }
     lines.push('#include <imx/runtime.h>');
-    lines.push('');
-    lines.push(`void ${rootName}_render(imx::RenderContext& ctx);`);
-    lines.push('');
-    lines.push('namespace imx {');
-    lines.push('void render_root(Runtime& runtime) {');
-    lines.push(`${INDENT}auto& ctx = runtime.begin_frame();`);
-    lines.push(`${INDENT}ctx.begin_instance("${rootName}", 0, ${stateCount}, ${bufferCount});`);
-    lines.push(`${INDENT}${rootName}_render(ctx);`);
-    lines.push(`${INDENT}ctx.end_instance();`);
-    lines.push(`${INDENT}runtime.end_frame();`);
-    lines.push('}');
-    lines.push('} // namespace imx');
+    if (propsType) {
+        if (namedPropsType) {
+            // Named interface type (e.g. AppState defined in user code).
+            // Include the user header so the template specialization sees the full type.
+            lines.push(`#include "${propsType}.h"`);
+            lines.push('');
+            lines.push(`void ${rootName}_render(imx::RenderContext& ctx, ${propsType}& props);`);
+        }
+        else {
+            lines.push(`#include "${rootName}.gen.h"`);
+            lines.push('');
+            lines.push(`void ${rootName}_render(imx::RenderContext& ctx, ${propsType}& props);`);
+        }
+        lines.push('');
+        lines.push('namespace imx {');
+        if (namedPropsType) {
+            // Template specialization — matches the template<typename T> declaration in runtime.h
+            lines.push('template <>');
+            lines.push(`void render_root<${propsType}>(Runtime& runtime, ${propsType}& state) {`);
+        }
+        else {
+            lines.push(`void render_root(Runtime& runtime, ${propsType}& state) {`);
+        }
+        lines.push(`${INDENT}auto& ctx = runtime.begin_frame();`);
+        lines.push(`${INDENT}ctx.begin_instance("${rootName}", 0, ${stateCount}, ${bufferCount});`);
+        lines.push(`${INDENT}${rootName}_render(ctx, state);`);
+        lines.push(`${INDENT}ctx.end_instance();`);
+        lines.push(`${INDENT}runtime.end_frame();`);
+        lines.push('}');
+        lines.push('} // namespace imx');
+    }
+    else {
+        lines.push('');
+        lines.push(`void ${rootName}_render(imx::RenderContext& ctx);`);
+        lines.push('');
+        lines.push('namespace imx {');
+        lines.push('void render_root(Runtime& runtime) {');
+        lines.push(`${INDENT}auto& ctx = runtime.begin_frame();`);
+        lines.push(`${INDENT}ctx.begin_instance("${rootName}", 0, ${stateCount}, ${bufferCount});`);
+        lines.push(`${INDENT}${rootName}_render(ctx);`);
+        lines.push(`${INDENT}ctx.end_instance();`);
+        lines.push(`${INDENT}runtime.end_frame();`);
+        lines.push('}');
+        lines.push('} // namespace imx');
+    }
     lines.push('');
     return lines.join('\n');
 }
@@ -563,7 +622,11 @@ function emitBeginContainer(node, lines, indent) {
         }
         case 'DockSpace': {
             const style = buildStyleBlock(node, indent, lines);
-            if (style) {
+            const hasMenuBar = node.props['hasMenuBar'] === 'true';
+            if (hasMenuBar) {
+                lines.push(`${indent}imx::renderer::begin_dockspace(${style ?? '{}'}, true);`);
+            }
+            else if (style) {
                 lines.push(`${indent}imx::renderer::begin_dockspace(${style});`);
             }
             else {
@@ -585,8 +648,21 @@ function emitBeginContainer(node, lines, indent) {
             const columnNames = columnsRaw.split(',').map(s => s.trim()).filter(s => s.length > 0);
             const count = columnNames.length;
             const varName = `table_cols_${styleCounter++}`;
+            const style = buildStyleVar(node.style, indent, lines);
+            const scrollY = node.props['scrollY'] === 'true';
+            const noBorders = node.props['noBorders'] === 'true';
+            const noRowBg = node.props['noRowBg'] === 'true';
             lines.push(`${indent}const char* ${varName}[] = {${columnNames.join(', ')}};`);
-            lines.push(`${indent}if (imx::renderer::begin_table("##table", ${count}, ${varName})) {`);
+            const styleArg = style ?? '{}';
+            if (scrollY || noBorders || noRowBg) {
+                lines.push(`${indent}if (imx::renderer::begin_table("##table", ${count}, ${varName}, ${styleArg}, ${scrollY}, ${noBorders}, ${noRowBg})) {`);
+            }
+            else if (style) {
+                lines.push(`${indent}if (imx::renderer::begin_table("##table", ${count}, ${varName}, ${styleArg})) {`);
+            }
+            else {
+                lines.push(`${indent}if (imx::renderer::begin_table("##table", ${count}, ${varName})) {`);
+            }
             break;
         }
         case 'TableRow': {
@@ -918,11 +994,12 @@ function emitText(node, lines, indent) {
 function emitButton(node, lines, indent, depth) {
     emitLocComment(node.loc, 'Button', lines, indent);
     const title = asCharPtr(node.title);
+    const disabledArg = node.disabled ? ', {}, true' : '';
     if (node.action.length === 0) {
-        lines.push(`${indent}imx::renderer::button(${title});`);
+        lines.push(`${indent}imx::renderer::button(${title}${disabledArg});`);
     }
     else {
-        lines.push(`${indent}if (imx::renderer::button(${title})) {`);
+        lines.push(`${indent}if (imx::renderer::button(${title}${disabledArg})) {`);
         for (const stmt of node.action) {
             lines.push(`${indent}${INDENT}${stmt}`);
         }
@@ -984,6 +1061,10 @@ function emitCheckbox(node, lines, indent) {
         lines.push(`${indent}${INDENT}}`);
         lines.push(`${indent}}`);
     }
+    else if (node.directBind && node.valueExpr) {
+        // Direct pointer binding — no temp variable
+        lines.push(`${indent}imx::renderer::checkbox(${label}, &${node.valueExpr});`);
+    }
     else if (node.valueExpr !== undefined) {
         // Props-bound / expression-bound case
         lines.push(`${indent}{`);
@@ -1017,7 +1098,7 @@ function emitListMap(node, lines, indent, depth) {
     }
     lines.push(`${indent}for (size_t i = 0; i < ${node.array}.size(); i++) {`);
     lines.push(`${indent}${INDENT}auto& ${node.itemVar} = ${node.array}[i];`);
-    lines.push(`${indent}${INDENT}ctx.begin_instance("${node.componentName}", i, ${node.stateCount}, ${node.bufferCount});`);
+    lines.push(`${indent}${INDENT}ctx.begin_instance("${node.componentName}", (int)i, ${node.stateCount}, ${node.bufferCount});`);
     emitNodes(node.body, lines, depth + 2);
     lines.push(`${indent}${INDENT}ctx.end_instance();`);
     lines.push(`${indent}}`);
@@ -1068,20 +1149,25 @@ function ensureFloatLiteral(val) {
 }
 function emitSliderFloat(node, lines, indent) {
     emitLocComment(node.loc, 'SliderFloat', lines, indent);
+    const label = asCharPtr(node.label);
     const min = ensureFloatLiteral(node.min);
     const max = ensureFloatLiteral(node.max);
     if (node.stateVar) {
         lines.push(`${indent}{`);
         lines.push(`${indent}${INDENT}float val = ${node.stateVar}.get();`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::slider_float(${node.label}, &val, ${min}, ${max})) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::slider_float(${label}, &val, ${min}, ${max})) {`);
         lines.push(`${indent}${INDENT}${INDENT}${node.stateVar}.set(val);`);
         lines.push(`${indent}${INDENT}}`);
         lines.push(`${indent}}`);
     }
+    else if (node.directBind && node.valueExpr) {
+        // Direct pointer binding
+        lines.push(`${indent}imx::renderer::slider_float(${label}, &${node.valueExpr}, ${min}, ${max});`);
+    }
     else if (node.valueExpr !== undefined) {
         lines.push(`${indent}{`);
         lines.push(`${indent}${INDENT}float val = ${node.valueExpr};`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::slider_float(${node.label}, &val, ${min}, ${max})) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::slider_float(${label}, &val, ${min}, ${max})) {`);
         if (node.onChangeExpr) {
             lines.push(`${indent}${INDENT}${INDENT}${node.onChangeExpr};`);
         }
@@ -1091,18 +1177,22 @@ function emitSliderFloat(node, lines, indent) {
 }
 function emitSliderInt(node, lines, indent) {
     emitLocComment(node.loc, 'SliderInt', lines, indent);
+    const label = asCharPtr(node.label);
     if (node.stateVar) {
         lines.push(`${indent}{`);
         lines.push(`${indent}${INDENT}int val = ${node.stateVar}.get();`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::slider_int(${node.label}, &val, ${node.min}, ${node.max})) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::slider_int(${label}, &val, ${node.min}, ${node.max})) {`);
         lines.push(`${indent}${INDENT}${INDENT}${node.stateVar}.set(val);`);
         lines.push(`${indent}${INDENT}}`);
         lines.push(`${indent}}`);
     }
+    else if (node.directBind && node.valueExpr) {
+        lines.push(`${indent}imx::renderer::slider_int(${label}, &${node.valueExpr}, ${node.min}, ${node.max});`);
+    }
     else if (node.valueExpr !== undefined) {
         lines.push(`${indent}{`);
         lines.push(`${indent}${INDENT}int val = ${node.valueExpr};`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::slider_int(${node.label}, &val, ${node.min}, ${node.max})) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::slider_int(${label}, &val, ${node.min}, ${node.max})) {`);
         if (node.onChangeExpr) {
             lines.push(`${indent}${INDENT}${INDENT}${node.onChangeExpr};`);
         }
@@ -1112,19 +1202,23 @@ function emitSliderInt(node, lines, indent) {
 }
 function emitDragFloat(node, lines, indent) {
     emitLocComment(node.loc, 'DragFloat', lines, indent);
+    const label = asCharPtr(node.label);
     const speed = ensureFloatLiteral(node.speed);
     if (node.stateVar) {
         lines.push(`${indent}{`);
         lines.push(`${indent}${INDENT}float val = ${node.stateVar}.get();`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::drag_float(${node.label}, &val, ${speed})) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::drag_float(${label}, &val, ${speed})) {`);
         lines.push(`${indent}${INDENT}${INDENT}${node.stateVar}.set(val);`);
         lines.push(`${indent}${INDENT}}`);
         lines.push(`${indent}}`);
     }
+    else if (node.directBind && node.valueExpr) {
+        lines.push(`${indent}imx::renderer::drag_float(${label}, &${node.valueExpr}, ${speed});`);
+    }
     else if (node.valueExpr !== undefined) {
         lines.push(`${indent}{`);
         lines.push(`${indent}${INDENT}float val = ${node.valueExpr};`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::drag_float(${node.label}, &val, ${speed})) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::drag_float(${label}, &val, ${speed})) {`);
         if (node.onChangeExpr) {
             lines.push(`${indent}${INDENT}${INDENT}${node.onChangeExpr};`);
         }
@@ -1134,19 +1228,23 @@ function emitDragFloat(node, lines, indent) {
 }
 function emitDragInt(node, lines, indent) {
     emitLocComment(node.loc, 'DragInt', lines, indent);
+    const label = asCharPtr(node.label);
     const speed = ensureFloatLiteral(node.speed);
     if (node.stateVar) {
         lines.push(`${indent}{`);
         lines.push(`${indent}${INDENT}int val = ${node.stateVar}.get();`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::drag_int(${node.label}, &val, ${speed})) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::drag_int(${label}, &val, ${speed})) {`);
         lines.push(`${indent}${INDENT}${INDENT}${node.stateVar}.set(val);`);
         lines.push(`${indent}${INDENT}}`);
         lines.push(`${indent}}`);
     }
+    else if (node.directBind && node.valueExpr) {
+        lines.push(`${indent}imx::renderer::drag_int(${label}, &${node.valueExpr}, ${speed});`);
+    }
     else if (node.valueExpr !== undefined) {
         lines.push(`${indent}{`);
         lines.push(`${indent}${INDENT}int val = ${node.valueExpr};`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::drag_int(${node.label}, &val, ${speed})) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::drag_int(${label}, &val, ${speed})) {`);
         if (node.onChangeExpr) {
             lines.push(`${indent}${INDENT}${INDENT}${node.onChangeExpr};`);
         }
@@ -1156,6 +1254,7 @@ function emitDragInt(node, lines, indent) {
 }
 function emitCombo(node, lines, indent) {
     emitLocComment(node.loc, 'Combo', lines, indent);
+    const label = asCharPtr(node.label);
     const itemsList = node.items.split(',').map(s => s.trim()).filter(s => s.length > 0);
     const count = itemsList.length;
     const varName = `combo_items_${comboCounter++}`;
@@ -1163,16 +1262,22 @@ function emitCombo(node, lines, indent) {
         lines.push(`${indent}{`);
         lines.push(`${indent}${INDENT}const char* ${varName}[] = {${itemsList.join(', ')}};`);
         lines.push(`${indent}${INDENT}int val = ${node.stateVar}.get();`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::combo(${node.label}, &val, ${varName}, ${count})) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::combo(${label}, &val, ${varName}, ${count})) {`);
         lines.push(`${indent}${INDENT}${INDENT}${node.stateVar}.set(val);`);
         lines.push(`${indent}${INDENT}}`);
         lines.push(`${indent}}`);
     }
+    else if (node.directBind && node.valueExpr) {
+        lines.push(`${indent}{`);
+        lines.push(`${indent}${INDENT}const char* ${varName}[] = {${itemsList.join(', ')}};`);
+        lines.push(`${indent}${INDENT}imx::renderer::combo(${label}, &${node.valueExpr}, ${varName}, ${count});`);
+        lines.push(`${indent}}`);
+    }
     else if (node.valueExpr !== undefined) {
         lines.push(`${indent}{`);
         lines.push(`${indent}${INDENT}const char* ${varName}[] = {${itemsList.join(', ')}};`);
         lines.push(`${indent}${INDENT}int val = ${node.valueExpr};`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::combo(${node.label}, &val, ${varName}, ${count})) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::combo(${label}, &val, ${varName}, ${count})) {`);
         if (node.onChangeExpr) {
             lines.push(`${indent}${INDENT}${INDENT}${node.onChangeExpr};`);
         }
@@ -1182,18 +1287,22 @@ function emitCombo(node, lines, indent) {
 }
 function emitInputInt(node, lines, indent) {
     emitLocComment(node.loc, 'InputInt', lines, indent);
+    const label = asCharPtr(node.label);
     if (node.stateVar) {
         lines.push(`${indent}{`);
         lines.push(`${indent}${INDENT}int val = ${node.stateVar}.get();`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::input_int(${node.label}, &val)) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::input_int(${label}, &val)) {`);
         lines.push(`${indent}${INDENT}${INDENT}${node.stateVar}.set(val);`);
         lines.push(`${indent}${INDENT}}`);
         lines.push(`${indent}}`);
     }
+    else if (node.directBind && node.valueExpr) {
+        lines.push(`${indent}imx::renderer::input_int(${label}, &${node.valueExpr});`);
+    }
     else if (node.valueExpr !== undefined) {
         lines.push(`${indent}{`);
         lines.push(`${indent}${INDENT}int val = ${node.valueExpr};`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::input_int(${node.label}, &val)) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::input_int(${label}, &val)) {`);
         if (node.onChangeExpr) {
             lines.push(`${indent}${INDENT}${INDENT}${node.onChangeExpr};`);
         }
@@ -1203,18 +1312,22 @@ function emitInputInt(node, lines, indent) {
 }
 function emitInputFloat(node, lines, indent) {
     emitLocComment(node.loc, 'InputFloat', lines, indent);
+    const label = asCharPtr(node.label);
     if (node.stateVar) {
         lines.push(`${indent}{`);
         lines.push(`${indent}${INDENT}float val = ${node.stateVar}.get();`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::input_float(${node.label}, &val)) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::input_float(${label}, &val)) {`);
         lines.push(`${indent}${INDENT}${INDENT}${node.stateVar}.set(val);`);
         lines.push(`${indent}${INDENT}}`);
         lines.push(`${indent}}`);
     }
+    else if (node.directBind && node.valueExpr) {
+        lines.push(`${indent}imx::renderer::input_float(${label}, &${node.valueExpr});`);
+    }
     else if (node.valueExpr !== undefined) {
         lines.push(`${indent}{`);
         lines.push(`${indent}${INDENT}float val = ${node.valueExpr};`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::input_float(${node.label}, &val)) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::input_float(${label}, &val)) {`);
         if (node.onChangeExpr) {
             lines.push(`${indent}${INDENT}${INDENT}${node.onChangeExpr};`);
         }
@@ -1224,10 +1337,11 @@ function emitInputFloat(node, lines, indent) {
 }
 function emitColorEdit(node, lines, indent) {
     emitLocComment(node.loc, 'ColorEdit', lines, indent);
+    const label = asCharPtr(node.label);
     if (node.stateVar) {
         lines.push(`${indent}{`);
         lines.push(`${indent}${INDENT}auto val = ${node.stateVar}.get();`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::color_edit(${node.label}, val.data())) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::color_edit(${label}, val.data())) {`);
         lines.push(`${indent}${INDENT}${INDENT}${node.stateVar}.set(val);`);
         lines.push(`${indent}${INDENT}}`);
         lines.push(`${indent}}`);
@@ -1235,6 +1349,7 @@ function emitColorEdit(node, lines, indent) {
 }
 function emitListBox(node, lines, indent) {
     emitLocComment(node.loc, 'ListBox', lines, indent);
+    const label = asCharPtr(node.label);
     const itemsList = node.items.split(',').map(s => s.trim()).filter(s => s.length > 0);
     const count = itemsList.length;
     const varName = `listbox_items_${listBoxCounter++}`;
@@ -1242,16 +1357,22 @@ function emitListBox(node, lines, indent) {
         lines.push(`${indent}{`);
         lines.push(`${indent}${INDENT}const char* ${varName}[] = {${itemsList.join(', ')}};`);
         lines.push(`${indent}${INDENT}int val = ${node.stateVar}.get();`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::list_box(${node.label}, &val, ${varName}, ${count})) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::list_box(${label}, &val, ${varName}, ${count})) {`);
         lines.push(`${indent}${INDENT}${INDENT}${node.stateVar}.set(val);`);
         lines.push(`${indent}${INDENT}}`);
         lines.push(`${indent}}`);
     }
+    else if (node.directBind && node.valueExpr) {
+        lines.push(`${indent}{`);
+        lines.push(`${indent}${INDENT}const char* ${varName}[] = {${itemsList.join(', ')}};`);
+        lines.push(`${indent}${INDENT}imx::renderer::list_box(${label}, &${node.valueExpr}, ${varName}, ${count});`);
+        lines.push(`${indent}}`);
+    }
     else if (node.valueExpr !== undefined) {
         lines.push(`${indent}{`);
         lines.push(`${indent}${INDENT}const char* ${varName}[] = {${itemsList.join(', ')}};`);
         lines.push(`${indent}${INDENT}int val = ${node.valueExpr};`);
-        lines.push(`${indent}${INDENT}if (imx::renderer::list_box(${node.label}, &val, ${varName}, ${count})) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::list_box(${label}, &val, ${varName}, ${count})) {`);
         if (node.onChangeExpr) {
             lines.push(`${indent}${INDENT}${INDENT}${node.onChangeExpr};`);
         }
@@ -1315,6 +1436,9 @@ function emitRadio(node, lines, indent) {
         lines.push(`${indent}${INDENT}}`);
         lines.push(`${indent}}`);
     }
+    else if (node.directBind && node.valueExpr) {
+        lines.push(`${indent}imx::renderer::radio(${label}, &${node.valueExpr}, ${node.index});`);
+    }
     else if (node.valueExpr !== undefined) {
         lines.push(`${indent}{`);
         lines.push(`${indent}${INDENT}int val = ${node.valueExpr};`);