imxc 0.5.4 → 0.6.1

package/dist/validator.js

@@ -1,18 +1,23 @@
 import ts from 'typescript';
-import { HOST_COMPONENTS } from './components.js';
+import { HOST_COMPONENTS, isHostComponent } from './components.js';
 import { extractImports } from './parser.js';
 function err(sf, node, msg) {
     const { line, character } = sf.getLineAndCharacterOfPosition(node.getStart());
     return { file: sf.fileName, line: line + 1, col: character + 1, message: msg };
 }
+function warn(sf, node, msg) {
+    const { line, character } = sf.getLineAndCharacterOfPosition(node.getStart());
+    return { file: sf.fileName, line: line + 1, col: character + 1, message: msg, severity: 'warning' };
+}
 export function validate(parsed) {
     const errors = [];
+    const warnings = [];
     const sf = parsed.sourceFile;
     const func = parsed.component;
     const customComponents = extractImports(sf);
     const useStateCalls = [];
     if (!func || !func.body)
-        return { errors, customComponents, useStateCalls };
+        return { errors, warnings, customComponents, useStateCalls };
     let slotIndex = 0;
     for (const stmt of func.body.statements) {
         if (ts.isVariableStatement(stmt)) {
@@ -29,9 +34,9 @@ export function validate(parsed) {
     }
     const returnStmt = func.body.statements.find(ts.isReturnStatement);
     if (returnStmt && returnStmt.expression) {
-        validateExpression(returnStmt.expression, sf, customComponents, errors);
+        validateExpression(returnStmt.expression, sf, customComponents, errors, warnings);
     }
-    return { errors, customComponents, useStateCalls };
+    return { errors, warnings, customComponents, useStateCalls };
 }
 function isUseStateCall(decl) {
     if (!decl.initializer || !ts.isCallExpression(decl.initializer))
@@ -65,56 +70,80 @@ function extractUseState(decl, index, sf, errors) {
     }
     return { name: nameEl.name.text, setter: setterEl.name.text, initializer: call.arguments[0], index };
 }
-function validateExpression(node, sf, customComponents, errors) {
+function validateExpression(node, sf, customComponents, errors, warnings) {
     if (ts.isJsxElement(node)) {
-        validateJsxElement(node, sf, customComponents, errors);
+        validateJsxElement(node, sf, customComponents, errors, warnings);
     }
     else if (ts.isJsxSelfClosingElement(node)) {
-        validateJsxTag(node.tagName, node, sf, customComponents, errors);
+        validateJsxTag(node.tagName, node, sf, customComponents, warnings);
         validateJsxAttributes(node.attributes, node.tagName, sf, errors);
     }
     else if (ts.isJsxFragment(node)) {
         for (const child of node.children)
-            validateExpression(child, sf, customComponents, errors);
+            validateExpression(child, sf, customComponents, errors, warnings);
     }
     else if (ts.isParenthesizedExpression(node)) {
-        validateExpression(node.expression, sf, customComponents, errors);
+        validateExpression(node.expression, sf, customComponents, errors, warnings);
     }
     else if (ts.isConditionalExpression(node)) {
-        validateExpression(node.whenTrue, sf, customComponents, errors);
-        validateExpression(node.whenFalse, sf, customComponents, errors);
+        validateExpression(node.whenTrue, sf, customComponents, errors, warnings);
+        validateExpression(node.whenFalse, sf, customComponents, errors, warnings);
     }
     else if (ts.isBinaryExpression(node) && node.operatorToken.kind === ts.SyntaxKind.AmpersandAmpersandToken) {
-        validateExpression(node.right, sf, customComponents, errors);
+        validateExpression(node.right, sf, customComponents, errors, warnings);
     }
     else if (ts.isJsxExpression(node) && node.expression) {
-        validateExpression(node.expression, sf, customComponents, errors);
+        validateExpression(node.expression, sf, customComponents, errors, warnings);
     }
     else if (ts.isCallExpression(node) && ts.isPropertyAccessExpression(node.expression) && node.expression.name.text === 'map') {
         const callback = node.arguments[0];
         if (callback && (ts.isArrowFunction(callback) || ts.isFunctionExpression(callback))) {
+            let mapBody;
             if (ts.isBlock(callback.body)) {
                 const ret = callback.body.statements.find(ts.isReturnStatement);
-                if (ret?.expression)
-                    validateExpression(ret.expression, sf, customComponents, errors);
+                mapBody = ret?.expression;
             }
             else if (callback.body) {
-                validateExpression(callback.body, sf, customComponents, errors);
+                mapBody = callback.body;
+            }
+            if (mapBody) {
+                validateExpression(mapBody, sf, customComponents, errors, warnings);
+                if (!hasIDWrapper(mapBody)) {
+                    warnings.push(warn(sf, node, 'Items in .map() should be wrapped in <ID scope={i}> to avoid ImGui ID conflicts'));
+                }
             }
         }
     }
 }
-function validateJsxElement(node, sf, customComponents, errors) {
-    validateJsxTag(node.openingElement.tagName, node, sf, customComponents, errors);
+// Components that handle their own ID scoping (no <ID> wrapper needed in .map())
+const SELF_SCOPED_COMPONENTS = new Set(['ID', 'TableRow', 'TabItem']);
+function hasIDWrapper(expr) {
+    if (ts.isParenthesizedExpression(expr))
+        return hasIDWrapper(expr.expression);
+    if (ts.isJsxElement(expr) && ts.isIdentifier(expr.openingElement.tagName) && SELF_SCOPED_COMPONENTS.has(expr.openingElement.tagName.text))
+        return true;
+    if (ts.isJsxSelfClosingElement(expr) && ts.isIdentifier(expr.tagName) && SELF_SCOPED_COMPONENTS.has(expr.tagName.text))
+        return true;
+    return false;
+}
+function validateJsxElement(node, sf, customComponents, errors, warnings) {
+    validateJsxTag(node.openingElement.tagName, node, sf, customComponents, warnings);
     validateJsxAttributes(node.openingElement.attributes, node.openingElement.tagName, sf, errors);
     for (const child of node.children)
-        validateExpression(child, sf, customComponents, errors);
+        validateExpression(child, sf, customComponents, errors, warnings);
 }
-function validateJsxTag(tagName, node, sf, customComponents, errors) {
+function validateJsxTag(tagName, node, sf, customComponents, warnings) {
     if (!ts.isIdentifier(tagName))
         return;
-    // Host components and imported custom components are validated.
-    // Unknown elements are treated as native widgets (validated by TypeScript + C++ linker).
+    const name = tagName.text;
+    // Skip lowercase tags (intrinsic HTML-like elements)
+    if (name[0] === name[0].toLowerCase())
+        return;
+    // Known host component or imported custom component — fine
+    if (isHostComponent(name) || customComponents.has(name))
+        return;
+    // Unknown uppercase component — warn (may be a native C++ widget)
+    warnings.push(warn(sf, node, `Unknown component '<${name}>' -- will be treated as a native C++ widget. If this is intentional, you can ignore this warning.`));
 }
 function validateJsxAttributes(attrs, tagName, sf, errors) {
     if (!ts.isIdentifier(tagName))

package/dist/watch.d.ts

@@ -1,4 +1,5 @@
 /**
  * Start watching a directory for .tsx changes and recompile on change.
+ * If buildCmd is provided, runs it after each successful compile (for hot reload).
  */
-export declare function startWatch(watchDir: string, outputDir: string): void;
+export declare function startWatch(watchDir: string, outputDir: string, buildCmd?: string): void;

package/dist/watch.js

@@ -1,5 +1,6 @@
 import * as fs from 'node:fs';
 import * as path from 'node:path';
+import { execSync } from 'node:child_process';
 import { compile } from './compile.js';
 /**
  * Discover all .tsx files in a directory (recursive).
@@ -18,7 +19,7 @@ function discoverTsxFiles(dir) {
     }
     return results;
 }
-function runCompile(watchDir, outputDir) {
+function runCompile(watchDir, outputDir, buildCmd) {
     const files = discoverTsxFiles(watchDir);
     if (files.length === 0) {
         console.log('[watch] No .tsx files found in ' + watchDir);
@@ -27,8 +28,21 @@ function runCompile(watchDir, outputDir) {
     const start = performance.now();
     const result = compile(files, outputDir);
     const elapsed = Math.round(performance.now() - start);
+    if (result.warnings.length > 0) {
+        result.warnings.forEach(w => console.warn(w));
+    }
     if (result.success) {
         console.log(`[watch] ${result.componentCount} component(s) compiled in ${elapsed}ms`);
+        if (buildCmd) {
+            console.log(`[watch] running: ${buildCmd}`);
+            try {
+                execSync(buildCmd, { stdio: 'inherit' });
+                console.log('[watch] build succeeded');
+            }
+            catch {
+                console.error('[watch] build failed');
+            }
+        }
     }
     else {
         result.errors.forEach(e => console.error(e));
@@ -37,13 +51,16 @@ function runCompile(watchDir, outputDir) {
 }
 /**
  * Start watching a directory for .tsx changes and recompile on change.
+ * If buildCmd is provided, runs it after each successful compile (for hot reload).
  */
-export function startWatch(watchDir, outputDir) {
+export function startWatch(watchDir, outputDir, buildCmd) {
     console.log(`[watch] watching ${watchDir} for .tsx changes...`);
     console.log(`[watch] output: ${outputDir}`);
+    if (buildCmd)
+        console.log(`[watch] build: ${buildCmd}`);
     console.log('[watch] press Ctrl+C to stop\n');
     // Initial compile
-    runCompile(watchDir, outputDir);
+    runCompile(watchDir, outputDir, buildCmd);
     // Debounce timer
     let debounceTimer = null;
     const watcher = fs.watch(watchDir, { recursive: true }, (_event, filename) => {
@@ -54,7 +71,7 @@ export function startWatch(watchDir, outputDir) {
             clearTimeout(debounceTimer);
         debounceTimer = setTimeout(() => {
             console.log(`\n[watch] change detected: ${filename}`);
-            runCompile(watchDir, outputDir);
+            runCompile(watchDir, outputDir, buildCmd);
         }, 100);
     });
     // Clean shutdown on Ctrl+C

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imxc",
-  "version": "0.5.4",
+  "version": "0.6.1",
   "description": "Compiler for IMX — compiles React-like .tsx to native Dear ImGui C++",
   "type": "module",
   "bin": {
@@ -17,10 +17,8 @@
   },
   "keywords": ["imgui", "react", "tsx", "native", "gui", "compiler", "codegen"],
   "license": "MIT",
-  "dependencies": {
-    "typescript": "^5.8.0"
-  },
   "devDependencies": {
+    "typescript": "^5.8.0",
     "vitest": "^3.1.0",
     "@types/node": "^22.0.0"
   }