imxc 0.3.2 → 0.4.0

package/dist/ir.d.ts

@@ -12,6 +12,7 @@ export interface IRComponent {
     stateSlots: IRStateSlot[];
     bufferCount: number;
     params: IRPropParam[];
+    namedPropsType?: string;
     body: IRNode[];
 }
 export interface IRStateSlot {
@@ -47,6 +48,7 @@ export interface IRButton {
     kind: 'button';
     title: string;
     action: string[];
+    disabled?: boolean;
     style?: string;
     loc?: SourceLoc;
 }
@@ -64,6 +66,7 @@ export interface IRCheckbox {
     stateVar: string;
     valueExpr?: string;
     onChangeExpr?: string;
+    directBind?: boolean;
     style?: string;
     loc?: SourceLoc;
 }
@@ -125,6 +128,7 @@ export interface IRSliderFloat {
     stateVar: string;
     valueExpr?: string;
     onChangeExpr?: string;
+    directBind?: boolean;
     min: string;
     max: string;
     style?: string;
@@ -136,6 +140,7 @@ export interface IRSliderInt {
     stateVar: string;
     valueExpr?: string;
     onChangeExpr?: string;
+    directBind?: boolean;
     min: string;
     max: string;
     style?: string;
@@ -147,6 +152,7 @@ export interface IRDragFloat {
     stateVar: string;
     valueExpr?: string;
     onChangeExpr?: string;
+    directBind?: boolean;
     speed: string;
     style?: string;
     loc?: SourceLoc;
@@ -157,6 +163,7 @@ export interface IRDragInt {
     stateVar: string;
     valueExpr?: string;
     onChangeExpr?: string;
+    directBind?: boolean;
     speed: string;
     style?: string;
     loc?: SourceLoc;
@@ -167,6 +174,7 @@ export interface IRCombo {
     stateVar: string;
     valueExpr?: string;
     onChangeExpr?: string;
+    directBind?: boolean;
     items: string;
     style?: string;
     loc?: SourceLoc;
@@ -177,6 +185,7 @@ export interface IRInputInt {
     stateVar: string;
     valueExpr?: string;
     onChangeExpr?: string;
+    directBind?: boolean;
     style?: string;
     loc?: SourceLoc;
 }
@@ -186,6 +195,7 @@ export interface IRInputFloat {
     stateVar: string;
     valueExpr?: string;
     onChangeExpr?: string;
+    directBind?: boolean;
     style?: string;
     loc?: SourceLoc;
 }
@@ -193,6 +203,7 @@ export interface IRColorEdit {
     kind: 'color_edit';
     label: string;
     stateVar: string;
+    directBind?: boolean;
     style?: string;
     loc?: SourceLoc;
 }
@@ -202,6 +213,7 @@ export interface IRListBox {
     stateVar: string;
     valueExpr?: string;
     onChangeExpr?: string;
+    directBind?: boolean;
     items: string;
     style?: string;
     loc?: SourceLoc;
@@ -252,6 +264,7 @@ export interface IRRadio {
     stateVar: string;
     valueExpr?: string;
     onChangeExpr?: string;
+    directBind?: boolean;
     index: string;
     style?: string;
     loc?: SourceLoc;
@@ -268,6 +281,7 @@ export interface IRColorPicker {
     kind: 'color_picker';
     label: string;
     stateVar: string;
+    directBind?: boolean;
     style?: string;
     loc?: SourceLoc;
 }

package/dist/lowering.d.ts

@@ -1,16 +1,17 @@
 import ts from 'typescript';
 import type { ParsedFile } from './parser.js';
 import type { ValidationResult } from './validator.js';
-import type { IRComponent, IRStateSlot } from './ir.js';
+import type { IRComponent, IRStateSlot, IRType } from './ir.js';
 interface LoweringContext {
     stateVars: Map<string, IRStateSlot>;
     setterMap: Map<string, string>;
     propsParam: string | null;
+    propsFieldTypes: Map<string, IRType | 'callback'>;
     bufferIndex: number;
     sourceFile: ts.SourceFile;
     customComponents: Map<string, string>;
 }
-export declare function lowerComponent(parsed: ParsedFile, validation: ValidationResult): IRComponent;
+export declare function lowerComponent(parsed: ParsedFile, validation: ValidationResult, externalInterfaces?: Map<string, Map<string, IRType | 'callback'>>): IRComponent;
 /**
  * Convert a TypeScript expression to C++ code string.
  */

package/dist/lowering.js

@@ -4,7 +4,7 @@ function getLoc(node, ctx) {
     const { line } = ctx.sourceFile.getLineAndCharacterOfPosition(node.getStart());
     return { file: ctx.sourceFile.fileName, line: line + 1 };
 }
-export function lowerComponent(parsed, validation) {
+export function lowerComponent(parsed, validation, externalInterfaces) {
     const func = parsed.component;
     const name = func.name.text;
     // Build state slots
@@ -24,19 +24,37 @@ export function lowerComponent(parsed, validation) {
     }
     // Detect props parameter
     let propsParam = null;
+    let namedPropsType;
     const params = [];
+    const propsFieldTypes = new Map();
     if (func.parameters.length > 0) {
         const param = func.parameters[0];
         if (ts.isIdentifier(param.name)) {
             propsParam = param.name.text;
         }
-        // Extract prop types from type annotation
-        if (param.type && ts.isTypeLiteralNode(param.type)) {
-            for (const member of param.type.members) {
-                if (ts.isPropertySignature(member) && member.name && ts.isIdentifier(member.name)) {
-                    const propName = member.name.text;
-                    const propType = inferPropType(member);
-                    params.push({ name: propName, type: propType });
+        if (param.type) {
+            if (ts.isTypeLiteralNode(param.type)) {
+                // Inline type literal: extract field types
+                for (const member of param.type.members) {
+                    if (ts.isPropertySignature(member) && member.name && ts.isIdentifier(member.name)) {
+                        const propName = member.name.text;
+                        const propType = inferPropType(member);
+                        params.push({ name: propName, type: propType });
+                        propsFieldTypes.set(propName, propType);
+                    }
+                }
+            }
+            else if (ts.isTypeReferenceNode(param.type) && ts.isIdentifier(param.type.typeName)) {
+                // Named interface reference: extract the type name and scan source for the interface
+                namedPropsType = param.type.typeName.text;
+                // First try the source file itself, then fall back to external interfaces
+                extractInterfaceFields(namedPropsType, parsed.sourceFile, propsFieldTypes);
+                if (propsFieldTypes.size === 0 && externalInterfaces) {
+                    const ext = externalInterfaces.get(namedPropsType);
+                    if (ext) {
+                        for (const [k, v] of ext)
+                            propsFieldTypes.set(k, v);
+                    }
                 }
             }
         }
@@ -45,6 +63,7 @@ export function lowerComponent(parsed, validation) {
         stateVars,
         setterMap,
         propsParam,
+        propsFieldTypes,
         bufferIndex: 0,
         sourceFile: parsed.sourceFile,
         customComponents: validation.customComponents,
@@ -62,6 +81,7 @@ export function lowerComponent(parsed, validation) {
         stateSlots,
         bufferCount: ctx.bufferIndex,
         params,
+        namedPropsType,
         body,
     };
 }
@@ -79,6 +99,45 @@ function inferPropType(member) {
         return 'string';
     return 'string';
 }
+/**
+ * Scan the source file for an interface declaration matching `interfaceName`
+ * and extract its field types into `fieldTypes`.
+ * Only handles direct fields — nested interface types are not resolved.
+ */
+function extractInterfaceFields(interfaceName, sourceFile, fieldTypes) {
+    for (const stmt of sourceFile.statements) {
+        if (ts.isInterfaceDeclaration(stmt) && stmt.name.text === interfaceName) {
+            for (const member of stmt.members) {
+                if (ts.isPropertySignature(member) && member.name && ts.isIdentifier(member.name)) {
+                    const fieldName = member.name.text;
+                    if (!member.type) {
+                        fieldTypes.set(fieldName, 'string');
+                        continue;
+                    }
+                    if (ts.isFunctionTypeNode(member.type)) {
+                        fieldTypes.set(fieldName, 'callback');
+                        continue;
+                    }
+                    const typeText = member.type.getText();
+                    if (typeText === 'number' || typeText === 'number | undefined') {
+                        fieldTypes.set(fieldName, 'float');
+                    }
+                    else if (typeText === 'boolean') {
+                        fieldTypes.set(fieldName, 'bool');
+                    }
+                    else if (typeText === 'string') {
+                        fieldTypes.set(fieldName, 'string');
+                    }
+                    else {
+                        // Array types, nested interfaces, etc. treated as opaque
+                        fieldTypes.set(fieldName, 'string');
+                    }
+                }
+            }
+            return;
+        }
+    }
+}
 function inferTypeFromExpr(expr) {
     if (ts.isNumericLiteral(expr)) {
         // Use getText() to check original source text, since TS normalizes 5.0 to "5" in .text
@@ -151,6 +210,9 @@ export function exprToCpp(node, ctx) {
     if (ts.isPropertyAccessExpression(node)) {
         const obj = exprToCpp(node.expression, ctx);
         const prop = node.name.text;
+        // JS .length on arrays/vectors translates to C++ .size()
+        if (prop === 'length')
+            return `${obj}.size()`;
         return `${obj}.${prop}`;
     }
     // Parenthesized expression
@@ -167,6 +229,13 @@ export function exprToCpp(node, ctx) {
             op = '==';
         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}))`;
+            }
+        }
         return `${left} ${op} ${right}`;
     }
     // Prefix unary expression (e.g., !show)
@@ -258,8 +327,8 @@ function extractActionStatements(expr, ctx) {
     }
     // If not an arrow function, call it
     const code = exprToCpp(expr, ctx);
-    // Bare identifier (not already a call) needs () to invoke
-    if (ts.isIdentifier(expr)) {
+    // Bare identifier or property access (not already a call) needs () to invoke
+    if (ts.isIdentifier(expr) || ts.isPropertyAccessExpression(expr)) {
         return [code + '();'];
     }
     return [code + ';'];
@@ -378,6 +447,12 @@ function lowerJsxElement(node, body, ctx) {
                 body.push({ kind: 'end_container', tag: containerTag });
                 return;
             }
+            // DockSpace: detect if any child is a MenuBar
+            if (containerTag === 'DockSpace') {
+                const hasMenuBar = node.children.some(c => ts.isJsxElement(c) && ts.isIdentifier(c.openingElement.tagName) && c.openingElement.tagName.text === 'MenuBar');
+                if (hasMenuBar)
+                    attrs['hasMenuBar'] = 'true';
+            }
             body.push({ kind: 'begin_container', tag: containerTag, props: attrs, loc: getLoc(node, ctx) });
             for (const child of node.children) {
                 lowerJsxChild(child, body, ctx);
@@ -556,8 +631,9 @@ function lowerButton(attrs, rawAttrs, body, ctx, loc) {
     if (onPressExpr) {
         action = extractActionStatements(onPressExpr, ctx);
     }
+    const disabled = attrs['disabled'] === 'true' ? true : undefined;
     const style = attrs['style'];
-    body.push({ kind: 'button', title, action, style, loc });
+    body.push({ kind: 'button', title, action, disabled, style, loc });
 }
 function lowerTextInput(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
@@ -596,6 +672,7 @@ function lowerCheckbox(attrs, rawAttrs, body, ctx, loc) {
         valueExprStr = exprToCpp(valueExpr, ctx);
     }
     // If not state-bound, get onChange expression
+    let directBind;
     if (!stateVar) {
         const onChangeRaw = rawAttrs.get('onChange');
         if (onChangeRaw) {
@@ -605,9 +682,12 @@ function lowerCheckbox(attrs, rawAttrs, body, ctx, loc) {
                 onChangeExprStr = `${onChangeExprStr}()`;
             }
         }
+        else if (valueExprStr && valueExprStr.startsWith('props.')) {
+            directBind = true;
+        }
     }
     const style = attrs['style'];
-    body.push({ kind: 'checkbox', label, stateVar, valueExpr: valueExprStr, onChangeExpr: onChangeExprStr, style, loc });
+    body.push({ kind: 'checkbox', label, stateVar, valueExpr: valueExprStr, onChangeExpr: onChangeExprStr, directBind, style, loc });
 }
 function lowerMenuItem(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
@@ -699,8 +779,18 @@ function inferExprType(expr, ctx) {
         if (slot)
             return slot.type;
     }
-    // Property access: props.name -> look for string by default
+    // Property access: props.name -> look up field type if available
     if (ts.isPropertyAccessExpression(expr)) {
+        const prop = expr.name.text;
+        // .length maps to .size() in C++ — always int
+        if (prop === 'length')
+            return 'int';
+        // If accessing a direct field of the props param, look up its type
+        if (ctx.propsParam && ts.isIdentifier(expr.expression) && expr.expression.text === ctx.propsParam) {
+            const ft = ctx.propsFieldTypes.get(prop);
+            if (ft && ft !== 'callback')
+                return ft;
+        }
         return 'string';
     }
     // Binary expression: infer from operands
@@ -933,8 +1023,8 @@ function lowerRadio(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
     const index = attrs['index'] ?? '0';
     const style = attrs['style'];
-    const { stateVar, valueExpr, onChangeExpr } = lowerValueOnChange(rawAttrs, ctx);
-    body.push({ kind: 'radio', label, stateVar, valueExpr, onChangeExpr, index, style, loc });
+    const { stateVar, valueExpr, onChangeExpr, directBind } = lowerValueOnChange(rawAttrs, ctx);
+    body.push({ kind: 'radio', label, stateVar, valueExpr, onChangeExpr, directBind, index, style, loc });
 }
 function lowerInputTextMultiline(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
@@ -1030,6 +1120,7 @@ function lowerValueOnChange(rawAttrs, ctx) {
     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;
@@ -1043,57 +1134,62 @@ function lowerValueOnChange(rawAttrs, ctx) {
                 onChangeExpr = `${onChangeExpr}()`;
             }
         }
+        else if (valueRaw && ts.isPropertyAccessExpression(valueRaw)) {
+            // No onChange + property access = direct pointer binding
+            // This covers both props.field and course.field (loop item fields)
+            directBind = true;
+        }
     }
-    return { stateVar, valueExpr, onChangeExpr };
+    return { stateVar, valueExpr, onChangeExpr, directBind };
 }
 function lowerSliderFloat(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
     const min = attrs['min'] ?? '0.0f';
     const max = attrs['max'] ?? '1.0f';
     const style = attrs['style'];
-    const { stateVar, valueExpr, onChangeExpr } = lowerValueOnChange(rawAttrs, ctx);
-    body.push({ kind: 'slider_float', label, stateVar, valueExpr, onChangeExpr, min, max, style, loc });
+    const { stateVar, valueExpr, onChangeExpr, directBind } = lowerValueOnChange(rawAttrs, ctx);
+    body.push({ kind: 'slider_float', label, stateVar, valueExpr, onChangeExpr, directBind, min, max, style, loc });
 }
 function lowerSliderInt(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
     const min = attrs['min'] ?? '0';
     const max = attrs['max'] ?? '100';
     const style = attrs['style'];
-    const { stateVar, valueExpr, onChangeExpr } = lowerValueOnChange(rawAttrs, ctx);
-    body.push({ kind: 'slider_int', label, stateVar, valueExpr, onChangeExpr, min, max, style, loc });
+    const { stateVar, valueExpr, onChangeExpr, directBind } = lowerValueOnChange(rawAttrs, ctx);
+    body.push({ kind: 'slider_int', label, stateVar, valueExpr, onChangeExpr, directBind, min, max, style, loc });
 }
 function lowerDragFloat(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
     const speed = attrs['speed'] ?? '1.0f';
     const style = attrs['style'];
-    const { stateVar, valueExpr, onChangeExpr } = lowerValueOnChange(rawAttrs, ctx);
-    body.push({ kind: 'drag_float', label, stateVar, valueExpr, onChangeExpr, speed, style, loc });
+    const { stateVar, valueExpr, onChangeExpr, directBind } = lowerValueOnChange(rawAttrs, ctx);
+    body.push({ kind: 'drag_float', label, stateVar, valueExpr, onChangeExpr, directBind, speed, style, loc });
 }
 function lowerDragInt(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
     const speed = attrs['speed'] ?? '1.0f';
     const style = attrs['style'];
-    const { stateVar, valueExpr, onChangeExpr } = lowerValueOnChange(rawAttrs, ctx);
-    body.push({ kind: 'drag_int', label, stateVar, valueExpr, onChangeExpr, speed, style, loc });
+    const { stateVar, valueExpr, onChangeExpr, directBind } = lowerValueOnChange(rawAttrs, ctx);
+    body.push({ kind: 'drag_int', label, stateVar, valueExpr, onChangeExpr, directBind, speed, style, loc });
 }
 function lowerCombo(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
     const items = attrs['items'] ?? '';
     const style = attrs['style'];
-    const { stateVar, valueExpr, onChangeExpr } = lowerValueOnChange(rawAttrs, ctx);
-    body.push({ kind: 'combo', label, stateVar, valueExpr, onChangeExpr, items, style, loc });
+    const { stateVar, valueExpr, onChangeExpr, directBind } = lowerValueOnChange(rawAttrs, ctx);
+    body.push({ kind: 'combo', label, stateVar, valueExpr, onChangeExpr, directBind, items, style, loc });
 }
 function lowerInputInt(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
     const style = attrs['style'];
-    const { stateVar, valueExpr, onChangeExpr } = lowerValueOnChange(rawAttrs, ctx);
-    body.push({ kind: 'input_int', label, stateVar, valueExpr, onChangeExpr, style, loc });
+    const { stateVar, valueExpr, onChangeExpr, directBind } = lowerValueOnChange(rawAttrs, ctx);
+    body.push({ kind: 'input_int', label, stateVar, valueExpr, onChangeExpr, directBind, style, loc });
 }
 function lowerInputFloat(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
     const style = attrs['style'];
-    const { stateVar, valueExpr, onChangeExpr } = lowerValueOnChange(rawAttrs, ctx);
-    body.push({ kind: 'input_float', label, stateVar, valueExpr, onChangeExpr, style, loc });
+    const { stateVar, valueExpr, onChangeExpr, directBind } = lowerValueOnChange(rawAttrs, ctx);
+    body.push({ kind: 'input_float', label, stateVar, valueExpr, onChangeExpr, directBind, style, loc });
 }
 function lowerColorEdit(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
@@ -1110,8 +1206,8 @@ function lowerListBox(attrs, rawAttrs, body, ctx, loc) {
     const label = attrs['label'] ?? '""';
     const items = attrs['items'] ?? '';
     const style = attrs['style'];
-    const { stateVar, valueExpr, onChangeExpr } = lowerValueOnChange(rawAttrs, ctx);
-    body.push({ kind: 'list_box', label, stateVar, valueExpr, onChangeExpr, items, style, loc });
+    const { stateVar, valueExpr, onChangeExpr, directBind } = lowerValueOnChange(rawAttrs, ctx);
+    body.push({ kind: 'list_box', label, stateVar, valueExpr, onChangeExpr, directBind, items, style, loc });
 }
 function lowerProgressBar(attrs, rawAttrs, body, ctx, loc) {
     const value = attrs['value'] ?? '0.0f';

package/package.json

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