imxc 0.6.1 → 0.6.3

package/README.md

@@ -5,23 +5,58 @@ Compiler for IMX. Compiles React-like `.tsx` to native Dear ImGui C++ apps.
 ## Usage
 
 ```bash
-# Scaffold a new project
+npx imxc --help
+npx imxc --version
+
 npx imxc init myapp
 cd myapp
 cmake -B build
 cmake --build build --config Release
 
-# Add to existing CMake project
 npx imxc add
 
-# Compile TSX manually
 imxc App.tsx -o build/generated
 
-# Watch mode
 imxc watch src -o build/generated
+
+npx imxc templates
+```
+
+## Common Commands
+
+```bash
+# Help
+npx imxc --help
+npx imxc init --help
+npx imxc watch --help
+
+# Scaffold a project
+npx imxc init myapp --template=minimal
+npx imxc init myapp --template=async,persistence
+
+# Add IMX to an existing project
+npx imxc add
+
+# Compile TSX manually
+imxc src/App.tsx src/Counter.tsx -o build/generated
+
+# Watch and optionally rebuild
+imxc watch src -o build/generated
+imxc watch src -o build/generated --build "cmake --build build"
+
+# List built-in templates
+npx imxc templates
 ```
 
-54 components, 5-prop theme system, custom C++ widgets, canvas drawing, drag-drop.
+## Notes
+
+- `imxc watch` prefers `src/App.tsx` as the app entrypoint when present.
+- TypeScript `number` props generate C++ `float`.
+- Declare custom native widgets in `src/imx.d.ts` for type checking.
+
+## Features
+
+~98 components, 5-prop theme system, custom C++ widgets, canvas drawing, drag-drop.
 
 Requires: Node.js, CMake 3.25+, C++20 compiler.
 

package/dist/cli.d.ts

@@ -0,0 +1,19 @@
+import { compile } from './compile.js';
+import { addToProject, initProject } from './init.js';
+import { TEMPLATES, promptProjectName, promptTemplateName } from './templates/index.js';
+import { startWatch } from './watch.js';
+type WriteFn = (text: string) => void;
+export interface CliDeps {
+    compile: typeof compile;
+    initProject: typeof initProject;
+    addToProject: typeof addToProject;
+    startWatch: typeof startWatch;
+    promptProjectName: typeof promptProjectName;
+    promptTemplateName: typeof promptTemplateName;
+    templates: typeof TEMPLATES;
+    version: string;
+    stdout: WriteFn;
+    stderr: WriteFn;
+}
+export declare function runCli(argv: string[], deps?: CliDeps): Promise<number>;
+export {};

package/dist/cli.js

@@ -0,0 +1,256 @@
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import { parseArgs } from 'node:util';
+import { compile } from './compile.js';
+import { addToProject, initProject } from './init.js';
+import { TEMPLATES, promptProjectName, promptTemplateName } from './templates/index.js';
+import { startWatch } from './watch.js';
+const defaultDeps = {
+    compile,
+    initProject,
+    addToProject,
+    startWatch,
+    promptProjectName,
+    promptTemplateName,
+    templates: TEMPLATES,
+    version: JSON.parse(fs.readFileSync(new URL('../package.json', import.meta.url), 'utf-8')).version,
+    stdout: text => process.stdout.write(text),
+    stderr: text => process.stderr.write(text),
+};
+function isHelpFlag(arg) {
+    return arg === '--help' || arg === '-h';
+}
+function isVersionFlag(arg) {
+    return arg === '--version' || arg === '-v';
+}
+function templateList(templates) {
+    return templates.map(t => `  ${t.name} - ${t.description}`).join('\n');
+}
+function mainHelp(templates) {
+    return [
+        'imxc - compile IMX .tsx into native Dear ImGui C++.',
+        '',
+        'Usage:',
+        '  imxc <input.tsx ...> -o <output-dir>',
+        '  imxc init [project-dir] [--template=<name[,name,...]>]',
+        '  imxc add [project-dir]',
+        '  imxc watch <dir> -o <output-dir> [--build <cmd>]',
+        '  imxc templates',
+        '  imxc help [command]',
+        '  imxc --version',
+        '',
+        'Notes:',
+        '  Root component in explicit builds is the first .tsx input you pass.',
+        '  Watch mode chooses the root in this order: src/App.tsx, App.tsx, then first file alphabetically.',
+        '  Declare native widgets in src/imx.d.ts to enable typing and suppress unknown-component warnings.',
+        '',
+        'Templates:',
+        templateList(templates),
+        '',
+        'First project:',
+        '  npx imxc init myapp --template=minimal',
+        '  cd myapp',
+        '  cmake -B build',
+        '  cmake --build build',
+        '',
+    ].join('\n');
+}
+function initHelp(templates) {
+    return [
+        'Usage: imxc init [project-dir] [--template=<name[,name,...]>]',
+        '',
+        'Creates a new IMX project scaffold.',
+        'If no project dir is provided, imxc prompts for one.',
+        'If no template is provided, imxc opens the interactive template selector.',
+        '',
+        'Available templates:',
+        templateList(templates),
+        '',
+        'Examples:',
+        '  imxc init myapp',
+        '  imxc init myapp --template=minimal',
+        '  imxc init myapp --template=async,persistence',
+        '',
+    ].join('\n');
+}
+function addHelp() {
+    return [
+        'Usage: imxc add [project-dir]',
+        '',
+        'Adds IMX compiler integration to an existing CMake project.',
+        'Defaults to the current directory when no project dir is provided.',
+        '',
+    ].join('\n');
+}
+function watchHelp() {
+    return [
+        'Usage: imxc watch <dir> -o <output-dir> [--build <cmd>]',
+        '',
+        'Watches a directory recursively for .tsx changes and recompiles on change.',
+        'Root selection order is: src/App.tsx, App.tsx, then first file alphabetically.',
+        'If --build is provided, imxc runs the build command after each successful compile.',
+        '',
+        'Examples:',
+        '  imxc watch src -o build/generated',
+        '  imxc watch src -o build/generated --build "cmake --build build"',
+        '',
+    ].join('\n');
+}
+function templatesHelp(templates) {
+    return [
+        'Usage: imxc templates',
+        '',
+        'Lists all built-in project templates.',
+        '',
+        'Templates:',
+        templateList(templates),
+        '',
+    ].join('\n');
+}
+function helpText(command, templates) {
+    switch (command) {
+        case 'init': return initHelp(templates);
+        case 'add': return addHelp();
+        case 'watch': return watchHelp();
+        case 'templates': return templatesHelp(templates);
+        default: return mainHelp(templates);
+    }
+}
+function formatParseError(error) {
+    if (error && typeof error === 'object' && 'message' in error && typeof error.message === 'string') {
+        return error.message;
+    }
+    return 'Invalid command line arguments.';
+}
+function asOptionalString(value) {
+    return typeof value === 'string' ? value : undefined;
+}
+function safeParseArgs(config, deps, help) {
+    try {
+        return parseArgs(config);
+    }
+    catch (error) {
+        deps.stderr(`imxc: ${formatParseError(error)}\n\n${help}`);
+        return null;
+    }
+}
+export async function runCli(argv, deps = defaultDeps) {
+    const [command, ...rest] = argv;
+    if (!command) {
+        deps.stdout(mainHelp(deps.templates));
+        return 0;
+    }
+    if (isHelpFlag(command)) {
+        deps.stdout(mainHelp(deps.templates));
+        return 0;
+    }
+    if (isVersionFlag(command)) {
+        deps.stdout(`${deps.version}\n`);
+        return 0;
+    }
+    if (command === 'help') {
+        deps.stdout(helpText(rest[0], deps.templates));
+        return 0;
+    }
+    if (command === 'templates') {
+        if (isHelpFlag(rest[0])) {
+            deps.stdout(templatesHelp(deps.templates));
+        }
+        else if (rest.length > 0) {
+            deps.stderr(`imxc: templates does not accept additional arguments.\n\n${templatesHelp(deps.templates)}`);
+            return 1;
+        }
+        else {
+            deps.stdout(`Available templates:\n\n${templateList(deps.templates)}\n\nUse "imxc init <project-dir> --template=<name[,name,...]>" to scaffold one.\n`);
+        }
+        return 0;
+    }
+    if (command === 'init') {
+        if (isHelpFlag(rest[0])) {
+            deps.stdout(initHelp(deps.templates));
+            return 0;
+        }
+        const parsed = safeParseArgs({
+            args: rest,
+            allowPositionals: true,
+            options: { template: { type: 'string', short: 't' } },
+        }, deps, initHelp(deps.templates));
+        if (!parsed)
+            return 1;
+        let dir = parsed.positionals[0];
+        if (!dir) {
+            dir = await deps.promptProjectName();
+        }
+        const absDir = path.resolve(dir);
+        const templateName = asOptionalString(parsed.values.template) ?? await deps.promptTemplateName();
+        deps.initProject(absDir, path.basename(absDir), templateName);
+        return 0;
+    }
+    if (command === 'add') {
+        if (isHelpFlag(rest[0])) {
+            deps.stdout(addHelp());
+            return 0;
+        }
+        const parsed = safeParseArgs({
+            args: rest,
+            allowPositionals: true,
+            options: {},
+        }, deps, addHelp());
+        if (!parsed)
+            return 1;
+        const dir = parsed.positionals[0] ?? '.';
+        deps.addToProject(path.resolve(dir));
+        return 0;
+    }
+    if (command === 'watch') {
+        if (isHelpFlag(rest[0])) {
+            deps.stdout(watchHelp());
+            return 0;
+        }
+        if (!rest[0]) {
+            deps.stderr(`imxc: missing watch directory.\n\n${watchHelp()}`);
+            return 1;
+        }
+        const watchDir = rest[0];
+        const parsed = safeParseArgs({
+            args: rest.slice(1),
+            allowPositionals: false,
+            options: {
+                output: { type: 'string', short: 'o' },
+                build: { type: 'string', short: 'b' },
+            },
+        }, deps, watchHelp());
+        if (!parsed)
+            return 1;
+        const outputDir = asOptionalString(parsed.values.output) ?? '.';
+        const buildCmd = asOptionalString(parsed.values.build);
+        deps.startWatch(path.resolve(watchDir), path.resolve(outputDir), buildCmd);
+        return 0;
+    }
+    if (command.startsWith('-')) {
+        deps.stderr(`imxc: unknown option '${command}'.\n\n${mainHelp(deps.templates)}`);
+        return 1;
+    }
+    const parsed = safeParseArgs({
+        args: argv,
+        allowPositionals: true,
+        options: { output: { type: 'string', short: 'o' } },
+    }, deps, mainHelp(deps.templates));
+    if (!parsed)
+        return 1;
+    if (parsed.positionals.length === 0) {
+        deps.stderr(`imxc: no input .tsx files provided.\n\n${mainHelp(deps.templates)}`);
+        return 1;
+    }
+    const outputDir = asOptionalString(parsed.values.output) ?? '.';
+    const result = deps.compile(parsed.positionals, outputDir);
+    if (result.warnings.length > 0) {
+        result.warnings.forEach(w => deps.stderr(w + '\n'));
+    }
+    if (!result.success) {
+        result.errors.forEach(e => deps.stderr(e + '\n'));
+        return 1;
+    }
+    deps.stdout(`imxc: ${result.componentCount} component(s) compiled successfully.\n`);
+    return 0;
+}

package/dist/compile.js

@@ -49,7 +49,7 @@ export function compile(files, outputDir) {
         const imports = extractImports(parsed.sourceFile);
         compiled.push({
             name: ir.name,
-            sourceFile: path.basename(file),
+            sourceFile: parsed.sourceFile.fileName,
             sourcePath: file,
             stateCount: ir.stateSlots.length,
             bufferCount: ir.bufferCount,
@@ -99,7 +99,7 @@ export function compile(files, outputDir) {
     }
     const sharedPropsType = compiled.find(c => c.ir.namedPropsType)?.ir.namedPropsType;
     // Resolve actual C++ types for bound props by tracing through parent interfaces.
-    // When a child declares `speed: number` (→ 'int'), but the parent struct has `float speed`,
+    // When a child declares `speed: number`, but the parent struct has `float speed`,
     // the bound prop pointer must use the parent's actual type.
     const resolvedBoundPropTypes = new Map();
     for (const comp of compiled) {
@@ -478,7 +478,7 @@ function extractNestedPropAccess(expr, bound) {
 }
 /**
  * Walk IR nodes in a parent component, resolving actual C++ types for child bound props.
- * When a child has `speed: number` (→ 'int') but the parent passes props.speed from a struct
+ * When a child has `speed: number` but the parent passes props.speed from a struct
  * where speed is float, the resolved type overrides the child's inferred type.
  */
 function resolveChildBoundTypes(nodes, parentFieldTypes, componentMap, extIfaces, result) {
@@ -489,25 +489,7 @@ function resolveChildBoundTypes(nodes, parentFieldTypes, componentMap, extIfaces
                 for (const [propName, valueExpr] of Object.entries(node.props)) {
                     if (!child.boundProps.has(propName) || !valueExpr.startsWith('props.'))
                         continue;
-                    const parts = valueExpr.slice(6).split('.');
-                    const topField = parts[0].split('[')[0];
-                    const topType = parentFieldTypes.get(topField);
-                    if (!topType || topType === 'callback')
-                        continue;
-                    let resolvedType;
-                    if (parts.length === 1) {
-                        // Direct scalar: props.speed → parent's type for speed
-                        resolvedType = topType;
-                    }
-                    else if (parts.length === 2) {
-                        // Nested: props.data.speed → look up speed in data's interface
-                        const iface = extIfaces.get(topType);
-                        if (iface) {
-                            const ft = iface.get(parts[1].split('[')[0]);
-                            if (ft && ft !== 'callback')
-                                resolvedType = ft;
-                        }
-                    }
+                    const resolvedType = resolveBoundPropType(valueExpr, parentFieldTypes, extIfaces);
                     if (resolvedType) {
                         if (!result.has(node.name))
                             result.set(node.name, new Map());
@@ -526,6 +508,30 @@ function resolveChildBoundTypes(nodes, parentFieldTypes, componentMap, extIfaces
         }
     }
 }
+function resolveBoundPropType(valueExpr, rootFieldTypes, extIfaces) {
+    if (!valueExpr.startsWith('props.'))
+        return undefined;
+    const parts = valueExpr
+        .slice(6)
+        .split('.')
+        .map(part => part.split('[')[0])
+        .filter(Boolean);
+    if (parts.length === 0)
+        return undefined;
+    let currentType = rootFieldTypes.get(parts[0]);
+    if (!currentType || currentType === 'callback')
+        return undefined;
+    for (let i = 1; i < parts.length; i++) {
+        const iface = extIfaces.get(currentType);
+        if (!iface)
+            return undefined;
+        const nextType = iface.get(parts[i]);
+        if (!nextType || nextType === 'callback')
+            return undefined;
+        currentType = nextType;
+    }
+    return currentType;
+}
 /**
  * Parse the imx.d.ts in the given directory (if present) and extract
  * all interface declarations as a map from interface name -> field name -> type.

package/dist/index.js

@@ -1,83 +1,4 @@
 #!/usr/bin/env node
-import { parseArgs } from 'node:util';
-import * as path from 'node:path';
-import { initProject, addToProject } from './init.js';
-import { compile } from './compile.js';
-import { startWatch } from './watch.js';
-import { promptProjectName, promptTemplateName, TEMPLATES } from './templates/index.js';
-// Handle `imxc templates` — list available templates
-if (process.argv[2] === 'templates') {
-    console.log('Available templates:\n');
-    TEMPLATES.forEach(t => {
-        console.log(`  ${t.name} — ${t.description}`);
-    });
-    console.log('\nUsage: imxc init <project-name> --template=<name>');
-    console.log('Combine: imxc init <project-name> --template=async,persistence');
-    process.exit(0);
-}
-// Handle `imxc init [dir] [--template=<name>]` subcommand
-if (process.argv[2] === 'init') {
-    const { values, positionals } = parseArgs({
-        args: process.argv.slice(3),
-        allowPositionals: true,
-        options: { template: { type: 'string', short: 't' } },
-    });
-    let dir = positionals[0];
-    if (!dir) {
-        dir = await promptProjectName();
-    }
-    const absDir = path.resolve(dir);
-    const templateName = values.template ?? await promptTemplateName();
-    initProject(absDir, path.basename(absDir), templateName);
-    process.exit(0);
-}
-// Handle `imxc add [dir]` subcommand
-if (process.argv[2] === 'add') {
-    const dir = process.argv[3] ?? '.';
-    const absDir = path.resolve(dir);
-    addToProject(absDir);
-    process.exit(0);
-}
-// Handle `imxc watch <dir> -o <output-dir>` subcommand
-if (process.argv[2] === 'watch') {
-    const watchDir = process.argv[3];
-    if (!watchDir) {
-        console.error('Usage: imxc watch <dir> -o <output-dir>');
-        process.exit(1);
-    }
-    const { values } = parseArgs({
-        args: process.argv.slice(4),
-        allowPositionals: false,
-        options: {
-            output: { type: 'string', short: 'o' },
-            build: { type: 'string', short: 'b' },
-        },
-    });
-    const outputDir = values.output ?? '.';
-    startWatch(path.resolve(watchDir), path.resolve(outputDir), values.build);
-}
-else {
-    // Default: build command
-    const { values, positionals } = parseArgs({
-        allowPositionals: true,
-        options: { output: { type: 'string', short: 'o' } },
-    });
-    if (positionals.length === 0) {
-        console.error('Usage: imxc <input.tsx ...> -o <output-dir>');
-        console.error('       imxc init [project-dir] [--template=<name[,name,...]>]');
-        console.error('       imxc templates');
-        console.error('       imxc add [project-dir]');
-        console.error('       imxc watch <dir> -o <output-dir> [--build <cmd>]');
-        process.exit(1);
-    }
-    const outputDir = values.output ?? '.';
-    const result = compile(positionals, outputDir);
-    if (result.warnings.length > 0) {
-        result.warnings.forEach(w => console.warn(w));
-    }
-    if (!result.success) {
-        result.errors.forEach(e => console.error(e));
-        process.exit(1);
-    }
-    console.log(`imxc: ${result.componentCount} component(s) compiled successfully.`);
-}
+import { runCli } from './cli.js';
+const exitCode = await runCli(process.argv.slice(2));
+process.exit(exitCode);

package/dist/init.js

@@ -39,7 +39,7 @@ export function addToProject(projectDir) {
     console.log('    include(FetchContent)');
     console.log('    FetchContent_Declare(imx');
     console.log('        GIT_REPOSITORY https://github.com/bgocumlu/imx.git');
-    console.log('        GIT_TAG v0.6.1');
+    console.log('        GIT_TAG v0.6.2');
     console.log('    )');
     console.log('    FetchContent_MakeAvailable(imx)');
     console.log('    include(ImxCompile)');

package/dist/lowering.js

@@ -90,7 +90,7 @@ export function lowerComponent(parsed, validation, externalInterfaces) {
 function normalizePropTypeText(typeText) {
     const trimmed = typeText.trim().replace(/\s*\|\s*undefined$/, '');
     if (trimmed === 'number')
-        return 'int';
+        return 'float';
     if (trimmed === 'boolean')
         return 'bool';
     if (trimmed === 'string')
@@ -1215,33 +1215,9 @@ function inferExprType(expr, ctx) {
         // .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') {
-                if (ft === 'int' || ft === 'float' || ft === 'bool' || ft === 'string' || ft === 'color' || ft === 'int_array') {
-                    return ft;
-                }
-                return 'string';
-            }
-        }
-        // Nested access: props.data.field — resolve through external interfaces
-        if (ctx.propsParam && ctx.externalInterfaces && ts.isPropertyAccessExpression(expr.expression)) {
-            const mid = expr.expression;
-            if (ts.isIdentifier(mid.expression) && mid.expression.text === ctx.propsParam) {
-                const midType = ctx.propsFieldTypes.get(mid.name.text);
-                if (midType && midType !== 'callback') {
-                    const iface = ctx.externalInterfaces.get(midType);
-                    if (iface) {
-                        const fieldType = iface.get(prop);
-                        if (fieldType && fieldType !== 'callback') {
-                            if (fieldType === 'int' || fieldType === 'float' || fieldType === 'bool' || fieldType === 'string' || fieldType === 'color' || fieldType === 'int_array') {
-                                return fieldType;
-                            }
-                        }
-                    }
-                }
-            }
+        const resolvedType = resolvePropertyAccessType(expr, ctx);
+        if (resolvedType) {
+            return resolvedType;
         }
         return 'string';
     }
@@ -1275,6 +1251,37 @@ function inferExprType(expr, ctx) {
     }
     return 'int'; // default
 }
+function resolvePropertyAccessType(expr, ctx) {
+    if (!ctx.propsParam)
+        return null;
+    const parts = [];
+    let current = expr;
+    while (ts.isPropertyAccessExpression(current)) {
+        parts.unshift(current.name.text);
+        current = current.expression;
+    }
+    if (!ts.isIdentifier(current) || current.text !== ctx.propsParam || parts.length === 0) {
+        return null;
+    }
+    let currentType = ctx.propsFieldTypes.get(parts[0]);
+    if (!currentType || currentType === 'callback')
+        return null;
+    for (let i = 1; i < parts.length; i++) {
+        if (!ctx.externalInterfaces)
+            return null;
+        const iface = ctx.externalInterfaces.get(currentType);
+        if (!iface)
+            return null;
+        const nextType = iface.get(parts[i]);
+        if (!nextType || nextType === 'callback')
+            return null;
+        currentType = nextType;
+    }
+    if (currentType === 'int' || currentType === 'float' || currentType === 'bool' || currentType === 'string' || currentType === 'color' || currentType === 'int_array') {
+        return currentType;
+    }
+    return 'string';
+}
 function lowerListMap(node, body, ctx, loc) {
     const propAccess = node.expression;
     const array = exprToCpp(propAccess.expression, ctx);

package/dist/parser.d.ts

@@ -12,5 +12,6 @@ export interface ParseError {
     message: string;
     severity?: 'error' | 'warning';
 }
+export declare function normalizeDisplayPath(filePath: string): string;
 export declare function parseFile(filePath: string, source: string): ParsedFile;
 export declare function extractImports(sourceFile: ts.SourceFile): Map<string, string>;

package/dist/parser.js

@@ -4,9 +4,19 @@ function formatError(sourceFile, node, message) {
     const { line, character } = sourceFile.getLineAndCharacterOfPosition(node.getStart());
     return { file: sourceFile.fileName, line: line + 1, col: character + 1, message };
 }
+export function normalizeDisplayPath(filePath) {
+    const absolutePath = path.resolve(filePath);
+    const relativePath = path.relative(process.cwd(), absolutePath);
+    const displayPath = relativePath &&
+        !relativePath.startsWith('..') &&
+        !path.isAbsolute(relativePath)
+        ? relativePath
+        : absolutePath;
+    return displayPath.replace(/\\/g, '/');
+}
 export function parseFile(filePath, source) {
-    const fileName = path.basename(filePath);
-    const sourceFile = ts.createSourceFile(fileName, source, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
+    const displayPath = normalizeDisplayPath(filePath);
+    const sourceFile = ts.createSourceFile(displayPath, source, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
     const errors = [];
     let component = null;
     for (const stmt of sourceFile.statements) {
@@ -18,6 +28,9 @@ export function parseFile(filePath, source) {
                 component = stmt;
             }
         }
+        else if (ts.isInterfaceDeclaration(stmt)) {
+            // allowed
+        }
         else if (ts.isImportDeclaration(stmt)) {
             // allowed
         }
@@ -26,9 +39,9 @@ export function parseFile(filePath, source) {
         }
     }
     if (!component && errors.length === 0) {
-        errors.push({ file: fileName, line: 1, col: 1, message: 'No component function found in file' });
+        errors.push({ file: displayPath, line: 1, col: 1, message: 'No component function found in file' });
     }
-    return { sourceFile, filePath, component, errors };
+    return { sourceFile, filePath: path.resolve(filePath), component, errors };
 }
 export function extractImports(sourceFile) {
     const imports = new Map();

package/dist/templates/custom.js

@@ -428,7 +428,7 @@ set(FETCHCONTENT_QUIET OFF)
 FetchContent_Declare(
     imx
     GIT_REPOSITORY https://github.com/bgocumlu/imx.git
-    GIT_TAG v0.6.1
+    GIT_TAG v0.6.3
     GIT_SHALLOW TRUE
     GIT_PROGRESS TRUE
 )

package/dist/templates/hotreload.js

@@ -313,7 +313,7 @@ set(FETCHCONTENT_QUIET OFF)
 FetchContent_Declare(
     imx
     GIT_REPOSITORY https://github.com/bgocumlu/imx.git
-    GIT_TAG v0.6.1
+    GIT_TAG v0.6.3
     GIT_SHALLOW TRUE
     GIT_PROGRESS TRUE
 )

package/dist/templates/index.js

@@ -402,7 +402,7 @@ set(FETCHCONTENT_QUIET OFF)
 FetchContent_Declare(
     imx
     GIT_REPOSITORY ${repoUrl}
-    GIT_TAG v0.6.1
+    GIT_TAG v0.6.3
     GIT_SHALLOW TRUE
     GIT_PROGRESS TRUE
 )

package/dist/validator.js

@@ -1,3 +1,5 @@
+import * as fs from 'node:fs';
+import * as path from 'node:path';
 import ts from 'typescript';
 import { HOST_COMPONENTS, isHostComponent } from './components.js';
 import { extractImports } from './parser.js';
@@ -15,6 +17,7 @@ export function validate(parsed) {
     const sf = parsed.sourceFile;
     const func = parsed.component;
     const customComponents = extractImports(sf);
+    const nativeWidgets = loadDeclaredNativeWidgets(path.dirname(parsed.filePath));
     const useStateCalls = [];
     if (!func || !func.body)
         return { errors, warnings, customComponents, useStateCalls };
@@ -34,7 +37,7 @@ export function validate(parsed) {
     }
     const returnStmt = func.body.statements.find(ts.isReturnStatement);
     if (returnStmt && returnStmt.expression) {
-        validateExpression(returnStmt.expression, sf, customComponents, errors, warnings);
+        validateExpression(returnStmt.expression, sf, customComponents, nativeWidgets, errors, warnings);
     }
     return { errors, warnings, customComponents, useStateCalls };
 }
@@ -70,30 +73,30 @@ 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, warnings) {
+function validateExpression(node, sf, customComponents, nativeWidgets, errors, warnings) {
     if (ts.isJsxElement(node)) {
-        validateJsxElement(node, sf, customComponents, errors, warnings);
+        validateJsxElement(node, sf, customComponents, nativeWidgets, errors, warnings);
     }
     else if (ts.isJsxSelfClosingElement(node)) {
-        validateJsxTag(node.tagName, node, sf, customComponents, warnings);
+        validateJsxTag(node.tagName, node, sf, customComponents, nativeWidgets, warnings);
         validateJsxAttributes(node.attributes, node.tagName, sf, errors);
     }
     else if (ts.isJsxFragment(node)) {
         for (const child of node.children)
-            validateExpression(child, sf, customComponents, errors, warnings);
+            validateExpression(child, sf, customComponents, nativeWidgets, errors, warnings);
     }
     else if (ts.isParenthesizedExpression(node)) {
-        validateExpression(node.expression, sf, customComponents, errors, warnings);
+        validateExpression(node.expression, sf, customComponents, nativeWidgets, errors, warnings);
     }
     else if (ts.isConditionalExpression(node)) {
-        validateExpression(node.whenTrue, sf, customComponents, errors, warnings);
-        validateExpression(node.whenFalse, sf, customComponents, errors, warnings);
+        validateExpression(node.whenTrue, sf, customComponents, nativeWidgets, errors, warnings);
+        validateExpression(node.whenFalse, sf, customComponents, nativeWidgets, errors, warnings);
     }
     else if (ts.isBinaryExpression(node) && node.operatorToken.kind === ts.SyntaxKind.AmpersandAmpersandToken) {
-        validateExpression(node.right, sf, customComponents, errors, warnings);
+        validateExpression(node.right, sf, customComponents, nativeWidgets, errors, warnings);
     }
     else if (ts.isJsxExpression(node) && node.expression) {
-        validateExpression(node.expression, sf, customComponents, errors, warnings);
+        validateExpression(node.expression, sf, customComponents, nativeWidgets, errors, warnings);
     }
     else if (ts.isCallExpression(node) && ts.isPropertyAccessExpression(node.expression) && node.expression.name.text === 'map') {
         const callback = node.arguments[0];
@@ -107,7 +110,7 @@ function validateExpression(node, sf, customComponents, errors, warnings) {
                 mapBody = callback.body;
             }
             if (mapBody) {
-                validateExpression(mapBody, sf, customComponents, errors, warnings);
+                validateExpression(mapBody, sf, customComponents, nativeWidgets, 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'));
                 }
@@ -126,13 +129,13 @@ function hasIDWrapper(expr) {
         return true;
     return false;
 }
-function validateJsxElement(node, sf, customComponents, errors, warnings) {
-    validateJsxTag(node.openingElement.tagName, node, sf, customComponents, warnings);
+function validateJsxElement(node, sf, customComponents, nativeWidgets, errors, warnings) {
+    validateJsxTag(node.openingElement.tagName, node, sf, customComponents, nativeWidgets, warnings);
     validateJsxAttributes(node.openingElement.attributes, node.openingElement.tagName, sf, errors);
     for (const child of node.children)
-        validateExpression(child, sf, customComponents, errors, warnings);
+        validateExpression(child, sf, customComponents, nativeWidgets, errors, warnings);
 }
-function validateJsxTag(tagName, node, sf, customComponents, warnings) {
+function validateJsxTag(tagName, node, sf, customComponents, nativeWidgets, warnings) {
     if (!ts.isIdentifier(tagName))
         return;
     const name = tagName.text;
@@ -140,10 +143,10 @@ function validateJsxTag(tagName, node, sf, customComponents, warnings) {
     if (name[0] === name[0].toLowerCase())
         return;
     // Known host component or imported custom component — fine
-    if (isHostComponent(name) || customComponents.has(name))
+    if (isHostComponent(name) || customComponents.has(name) || nativeWidgets.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.`));
+    warnings.push(warn(sf, node, `Unknown component '<${name}>' -- will be treated as a native C++ widget. If this is a registered widget, declare it in imx.d.ts to suppress this warning.`));
 }
 function validateJsxAttributes(attrs, tagName, sf, errors) {
     if (!ts.isIdentifier(tagName))
@@ -163,3 +166,20 @@ function validateJsxAttributes(attrs, tagName, sf, errors) {
         }
     }
 }
+function loadDeclaredNativeWidgets(dir) {
+    const widgets = new Set();
+    const dtsPath = path.join(dir, 'imx.d.ts');
+    if (!fs.existsSync(dtsPath))
+        return widgets;
+    const source = fs.readFileSync(dtsPath, 'utf-8');
+    const sf = ts.createSourceFile('imx.d.ts', source, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
+    for (const stmt of sf.statements) {
+        if (!ts.isFunctionDeclaration(stmt) || !stmt.name)
+            continue;
+        const name = stmt.name.text;
+        if (name && name[0] !== name[0].toLowerCase()) {
+            widgets.add(name);
+        }
+    }
+    return widgets;
+}

package/dist/watch.d.ts

@@ -1,3 +1,13 @@
+/**
+ * Discover all .tsx files in a directory (recursive).
+ */
+export declare function discoverTsxFiles(dir: string): string[];
+export interface WatchCompileSelection {
+    files: string[];
+    rootFile: string;
+    appCandidates: string[];
+}
+export declare function selectWatchCompileFiles(watchDir: string, discoveredFiles: string[]): WatchCompileSelection;
 /**
  * Start watching a directory for .tsx changes and recompile on change.
  * If buildCmd is provided, runs it after each successful compile (for hot reload).

package/dist/watch.js

@@ -5,7 +5,7 @@ import { compile } from './compile.js';
 /**
  * Discover all .tsx files in a directory (recursive).
  */
-function discoverTsxFiles(dir) {
+export function discoverTsxFiles(dir) {
     const results = [];
     const entries = fs.readdirSync(dir, { withFileTypes: true });
     for (const entry of entries) {
@@ -19,14 +19,38 @@ function discoverTsxFiles(dir) {
     }
     return results;
 }
+export function selectWatchCompileFiles(watchDir, discoveredFiles) {
+    const files = [...discoveredFiles].sort((a, b) => a.localeCompare(b));
+    const normalizedDir = path.resolve(watchDir);
+    const preferredCandidates = [
+        path.join(normalizedDir, 'src', 'App.tsx'),
+        path.join(normalizedDir, 'App.tsx'),
+    ].map(candidate => path.resolve(candidate));
+    const appCandidates = files.filter(file => path.basename(file) === 'App.tsx');
+    const rootFile = preferredCandidates.find(candidate => files.includes(candidate)) ??
+        files[0];
+    if (rootFile !== files[0]) {
+        const remaining = files.filter(file => file !== rootFile);
+        return { files: [rootFile, ...remaining], rootFile, appCandidates };
+    }
+    return { files, rootFile, appCandidates };
+}
 function runCompile(watchDir, outputDir, buildCmd) {
-    const files = discoverTsxFiles(watchDir);
-    if (files.length === 0) {
+    const discoveredFiles = discoverTsxFiles(watchDir);
+    if (discoveredFiles.length === 0) {
         console.log('[watch] No .tsx files found in ' + watchDir);
         return;
     }
+    const selection = selectWatchCompileFiles(watchDir, discoveredFiles);
+    const rootRelative = path.relative(process.cwd(), selection.rootFile).replace(/\\/g, '/');
+    if (selection.appCandidates.length > 1) {
+        console.warn(`[watch] multiple App.tsx candidates found; using ${rootRelative} as root`);
+    }
+    else {
+        console.log(`[watch] root: ${rootRelative}`);
+    }
     const start = performance.now();
-    const result = compile(files, outputDir);
+    const result = compile(selection.files, outputDir);
     const elapsed = Math.round(performance.now() - start);
     if (result.warnings.length > 0) {
         result.warnings.forEach(w => console.warn(w));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imxc",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "description": "Compiler for IMX — compiles React-like .tsx to native Dear ImGui C++",
   "type": "module",
   "bin": {
@@ -17,8 +17,10 @@
   },
   "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"
   }