imxc 0.4.1 → 0.5.0

package/dist/components.js

@@ -184,7 +184,7 @@ export const HOST_COMPONENTS = {
         props: {
             label: { type: 'string', required: true },
             value: { type: 'string', required: true },
-            onChange: { type: 'callback', required: true },
+            onChange: { type: 'callback', required: false },
             style: { type: 'style', required: false },
         },
         hasChildren: false, isContainer: false,

package/dist/emitter.js

@@ -1096,9 +1096,10 @@ function emitListMap(node, lines, indent, depth) {
     if (node.loc) {
         lines.push(`${indent}// ${node.loc.file}:${node.loc.line} .map()`);
     }
-    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}", (int)i, ${node.stateCount}, ${node.bufferCount});`);
+    const idx = node.indexVar;
+    lines.push(`${indent}for (size_t ${idx} = 0; ${idx} < ${node.array}.size(); ${idx}++) {`);
+    lines.push(`${indent}${INDENT}auto& ${node.itemVar} = ${node.array}[${idx}];`);
+    lines.push(`${indent}${INDENT}ctx.begin_instance("${node.componentName}", (int)${idx}, ${node.stateCount}, ${node.bufferCount});`);
     emitNodes(node.body, lines, depth + 2);
     lines.push(`${indent}${INDENT}ctx.end_instance();`);
     lines.push(`${indent}}`);
@@ -1346,6 +1347,19 @@ function emitColorEdit(node, lines, indent) {
         lines.push(`${indent}${INDENT}}`);
         lines.push(`${indent}}`);
     }
+    else if (node.directBind && node.valueExpr) {
+        lines.push(`${indent}imx::renderer::color_edit(${label}, ${node.valueExpr}.data());`);
+    }
+    else if (node.valueExpr !== undefined) {
+        lines.push(`${indent}{`);
+        lines.push(`${indent}${INDENT}auto val = ${node.valueExpr};`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::color_edit(${label}, val.data())) {`);
+        if (node.onChangeExpr) {
+            lines.push(`${indent}${INDENT}${INDENT}${node.onChangeExpr};`);
+        }
+        lines.push(`${indent}${INDENT}}`);
+        lines.push(`${indent}}`);
+    }
 }
 function emitListBox(node, lines, indent) {
     emitLocComment(node.loc, 'ListBox', lines, indent);
@@ -1469,44 +1483,79 @@ function emitInputTextMultiline(node, lines, indent) {
 }
 function emitColorPicker(node, lines, indent) {
     emitLocComment(node.loc, 'ColorPicker', 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_picker(${node.label}, val.data())) {`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::color_picker(${label}, val.data())) {`);
         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::color_picker(${label}, ${node.valueExpr}.data());`);
+    }
+    else if (node.valueExpr !== undefined) {
+        lines.push(`${indent}{`);
+        lines.push(`${indent}${INDENT}auto val = ${node.valueExpr};`);
+        lines.push(`${indent}${INDENT}if (imx::renderer::color_picker(${label}, val.data())) {`);
+        if (node.onChangeExpr) {
+            lines.push(`${indent}${INDENT}${INDENT}${node.onChangeExpr};`);
+        }
+        lines.push(`${indent}${INDENT}}`);
+        lines.push(`${indent}}`);
+    }
 }
 function emitPlotLines(node, lines, indent) {
     emitLocComment(node.loc, 'PlotLines', lines, indent);
-    const idx = plotCounter++;
-    const varName = `_plot_${idx}`;
-    const values = node.values.split(',').map(v => ensureFloatLiteral(v.trim()));
-    const count = values.length;
-    lines.push(`${indent}{`);
-    const innerIndent = indent + INDENT;
-    const styleVar = buildStyleVar(node.style, innerIndent, lines);
-    lines.push(`${innerIndent}float ${varName}[] = {${values.join(', ')}};`);
     const overlay = node.overlay ? `, ${node.overlay}` : ', nullptr';
-    const styleArg = styleVar ? `, ${styleVar}` : '';
-    lines.push(`${innerIndent}imx::renderer::plot_lines(${node.label}, ${varName}, ${count}${overlay}${styleArg});`);
-    lines.push(`${indent}}`);
+    // Check if values is a variable/property access (struct binding) vs literal array
+    if (node.values.includes('.') || /^[a-zA-Z_]\w*$/.test(node.values)) {
+        lines.push(`${indent}{`);
+        const innerIndent = indent + INDENT;
+        const styleVar = buildStyleVar(node.style, innerIndent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        lines.push(`${innerIndent}imx::renderer::plot_lines(${node.label}, ${node.values}.data(), static_cast<int>(${node.values}.size())${overlay}${styleArg});`);
+        lines.push(`${indent}}`);
+    }
+    else {
+        const idx = plotCounter++;
+        const varName = `_plot_${idx}`;
+        const values = node.values.split(',').map(v => ensureFloatLiteral(v.trim()));
+        const count = values.length;
+        lines.push(`${indent}{`);
+        const innerIndent = indent + INDENT;
+        const styleVar = buildStyleVar(node.style, innerIndent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        lines.push(`${innerIndent}float ${varName}[] = {${values.join(', ')}};`);
+        lines.push(`${innerIndent}imx::renderer::plot_lines(${node.label}, ${varName}, ${count}${overlay}${styleArg});`);
+        lines.push(`${indent}}`);
+    }
 }
 function emitPlotHistogram(node, lines, indent) {
     emitLocComment(node.loc, 'PlotHistogram', lines, indent);
-    const idx = plotCounter++;
-    const varName = `_plot_${idx}`;
-    const values = node.values.split(',').map(v => ensureFloatLiteral(v.trim()));
-    const count = values.length;
-    lines.push(`${indent}{`);
-    const innerIndent = indent + INDENT;
-    const styleVar = buildStyleVar(node.style, innerIndent, lines);
-    lines.push(`${innerIndent}float ${varName}[] = {${values.join(', ')}};`);
     const overlay = node.overlay ? `, ${node.overlay}` : ', nullptr';
-    const styleArg = styleVar ? `, ${styleVar}` : '';
-    lines.push(`${innerIndent}imx::renderer::plot_histogram(${node.label}, ${varName}, ${count}${overlay}${styleArg});`);
-    lines.push(`${indent}}`);
+    if (node.values.includes('.') || /^[a-zA-Z_]\w*$/.test(node.values)) {
+        lines.push(`${indent}{`);
+        const innerIndent = indent + INDENT;
+        const styleVar = buildStyleVar(node.style, innerIndent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        lines.push(`${innerIndent}imx::renderer::plot_histogram(${node.label}, ${node.values}.data(), static_cast<int>(${node.values}.size())${overlay}${styleArg});`);
+        lines.push(`${indent}}`);
+    }
+    else {
+        const idx = plotCounter++;
+        const varName = `_plot_${idx}`;
+        const values = node.values.split(',').map(v => ensureFloatLiteral(v.trim()));
+        const count = values.length;
+        lines.push(`${indent}{`);
+        const innerIndent = indent + INDENT;
+        const styleVar = buildStyleVar(node.style, innerIndent, lines);
+        const styleArg = styleVar ? `, ${styleVar}` : '';
+        lines.push(`${innerIndent}float ${varName}[] = {${values.join(', ')}};`);
+        lines.push(`${innerIndent}imx::renderer::plot_histogram(${node.label}, ${varName}, ${count}${overlay}${styleArg});`);
+        lines.push(`${indent}}`);
+    }
 }
 function emitImage(node, lines, indent) {
     emitLocComment(node.loc, 'Image', lines, indent);

package/dist/ir.d.ts

@@ -99,6 +99,7 @@ export interface IRListMap {
     kind: 'list_map';
     array: string;
     itemVar: string;
+    indexVar: string;
     key: string;
     componentName: string;
     stateCount: number;
@@ -203,6 +204,8 @@ export interface IRColorEdit {
     kind: 'color_edit';
     label: string;
     stateVar: string;
+    valueExpr?: string;
+    onChangeExpr?: string;
     directBind?: boolean;
     style?: string;
     loc?: SourceLoc;
@@ -281,6 +284,8 @@ export interface IRColorPicker {
     kind: 'color_picker';
     label: string;
     stateVar: string;
+    valueExpr?: string;
+    onChangeExpr?: string;
     directBind?: boolean;
     style?: string;
     loc?: SourceLoc;

package/dist/lowering.js

@@ -230,10 +230,14 @@ export function exprToCpp(node, ctx) {
         else if (op === '!==')
             op = '!=';
         // String + non-string: JS string concatenation -> C++ std::string + std::to_string
-        if (op === '+' && (ts.isStringLiteral(node.left) || ts.isNoSubstitutionTemplateLiteral(node.left))) {
-            const rightType = inferExprType(node.right, ctx);
-            if (rightType === 'int' || rightType === 'float') {
-                return `(std::string(${left}) + std::to_string(${right}))`;
+        if (op === '+') {
+            const leftIsString = ts.isStringLiteral(node.left) || ts.isNoSubstitutionTemplateLiteral(node.left) || inferExprType(node.left, ctx) === 'string';
+            const rightIsString = ts.isStringLiteral(node.right) || ts.isNoSubstitutionTemplateLiteral(node.right) || inferExprType(node.right, ctx) === 'string';
+            if (leftIsString && !rightIsString) {
+                return `(std::string(${left}) + std::to_string(${right})).c_str()`;
+            }
+            if (!leftIsString && rightIsString) {
+                return `(std::to_string(${left}) + std::string(${right})).c_str()`;
             }
         }
         return `${left} ${op} ${right}`;
@@ -677,8 +681,12 @@ function lowerCheckbox(attrs, rawAttrs, body, ctx, loc) {
         const onChangeRaw = rawAttrs.get('onChange');
         if (onChangeRaw) {
             onChangeExprStr = exprToCpp(onChangeRaw, ctx);
-            // If it's not already a lambda/call, make it a call
-            if (!onChangeExprStr.startsWith('[') && !onChangeExprStr.endsWith(')')) {
+            if (onChangeExprStr.startsWith('[')) {
+                // Lambda from arrow function — invoke it (IIFE)
+                onChangeExprStr = `(${onChangeExprStr})()`;
+            }
+            else if (!onChangeExprStr.endsWith(')')) {
+                // Plain identifier — make it a call
                 onChangeExprStr = `${onChangeExprStr}()`;
             }
         }
@@ -835,11 +843,15 @@ function lowerListMap(node, body, ctx, loc) {
     const array = exprToCpp(propAccess.expression, ctx);
     const callback = node.arguments[0];
     let itemVar = 'item';
+    let indexVar = 'i';
     let mapBody = [];
     if (callback && (ts.isArrowFunction(callback) || ts.isFunctionExpression(callback))) {
         if (callback.parameters.length > 0 && ts.isIdentifier(callback.parameters[0].name)) {
             itemVar = callback.parameters[0].name.text;
         }
+        if (callback.parameters.length > 1 && ts.isIdentifier(callback.parameters[1].name)) {
+            indexVar = callback.parameters[1].name.text;
+        }
         if (ts.isBlock(callback.body)) {
             const ret = callback.body.statements.find(ts.isReturnStatement);
             if (ret?.expression) {
@@ -854,7 +866,8 @@ function lowerListMap(node, body, ctx, loc) {
         kind: 'list_map',
         array,
         itemVar,
-        key: 'i',
+        indexVar,
+        key: indexVar,
         componentName: 'ListItem',
         stateCount: 0,
         bufferCount: 0,
@@ -1051,11 +1064,30 @@ function lowerColorPicker(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
     const style = attrs['style'];
     let stateVar = '';
+    let valueExpr;
+    let onChangeExpr;
+    let directBind;
     const valueRaw = rawAttrs.get('value');
     if (valueRaw && ts.isIdentifier(valueRaw) && ctx.stateVars.has(valueRaw.text)) {
         stateVar = valueRaw.text;
     }
-    body.push({ kind: 'color_picker', label, stateVar, style, loc });
+    else if (valueRaw) {
+        valueExpr = exprToCpp(valueRaw, ctx);
+        const onChangeRaw = rawAttrs.get('onChange');
+        if (onChangeRaw) {
+            onChangeExpr = exprToCpp(onChangeRaw, ctx);
+            if (onChangeExpr.startsWith('[')) {
+                onChangeExpr = `(${onChangeExpr})()`;
+            }
+            else if (!onChangeExpr.endsWith(')')) {
+                onChangeExpr = `${onChangeExpr}()`;
+            }
+        }
+        else if (valueRaw && ts.isPropertyAccessExpression(valueRaw)) {
+            directBind = true;
+        }
+    }
+    body.push({ kind: 'color_picker', label, stateVar, valueExpr, onChangeExpr, directBind, style, loc });
 }
 function lowerPlotLines(attrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
@@ -1137,7 +1169,12 @@ function lowerValueOnChange(rawAttrs, ctx) {
         const onChangeRaw = rawAttrs.get('onChange');
         if (onChangeRaw) {
             onChangeExpr = exprToCpp(onChangeRaw, ctx);
-            if (!onChangeExpr.startsWith('[') && !onChangeExpr.endsWith(')')) {
+            if (onChangeExpr.startsWith('[')) {
+                // Lambda from arrow function — invoke it (IIFE)
+                onChangeExpr = `(${onChangeExpr})()`;
+            }
+            else if (!onChangeExpr.endsWith(')')) {
+                // Plain identifier — make it a call
                 onChangeExpr = `${onChangeExpr}()`;
             }
         }
@@ -1201,13 +1238,31 @@ function lowerInputFloat(attrs, rawAttrs, body, ctx, loc) {
 function lowerColorEdit(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
     const style = attrs['style'];
-    // ColorEdit only supports state-bound values
     let stateVar = '';
+    let valueExpr;
+    let onChangeExpr;
+    let directBind;
     const valueRaw = rawAttrs.get('value');
     if (valueRaw && ts.isIdentifier(valueRaw) && ctx.stateVars.has(valueRaw.text)) {
         stateVar = valueRaw.text;
     }
-    body.push({ kind: 'color_edit', label, stateVar, style, loc });
+    else if (valueRaw) {
+        valueExpr = exprToCpp(valueRaw, ctx);
+        const onChangeRaw = rawAttrs.get('onChange');
+        if (onChangeRaw) {
+            onChangeExpr = exprToCpp(onChangeRaw, ctx);
+            if (onChangeExpr.startsWith('[')) {
+                onChangeExpr = `(${onChangeExpr})()`;
+            }
+            else if (!onChangeExpr.endsWith(')')) {
+                onChangeExpr = `${onChangeExpr}()`;
+            }
+        }
+        else if (valueRaw && ts.isPropertyAccessExpression(valueRaw)) {
+            directBind = true;
+        }
+    }
+    body.push({ kind: 'color_edit', label, stateVar, valueExpr, onChangeExpr, directBind, style, loc });
 }
 function lowerListBox(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imxc",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Compiler for IMX — compiles React-like .tsx to native Dear ImGui C++",
   "type": "module",
   "bin": {