imxc 0.2.0 → 0.3.1

package/dist/index.js

@@ -1,12 +1,9 @@
 #!/usr/bin/env node
 import { parseArgs } from 'node:util';
-import * as fs from 'node:fs';
 import * as path from 'node:path';
-import { parseFile, extractImports } from './parser.js';
-import { validate } from './validator.js';
-import { lowerComponent } from './lowering.js';
-import { emitComponent, emitComponentHeader, emitRoot } from './emitter.js';
-import { initProject } from './init.js';
+import { initProject, addToProject } from './init.js';
+import { compile } from './compile.js';
+import { startWatch } from './watch.js';
 // Handle `imxc init [dir]` subcommand
 if (process.argv[2] === 'init') {
     const dir = process.argv[3] ?? '.';
@@ -14,115 +11,46 @@ if (process.argv[2] === 'init') {
     initProject(absDir, path.basename(absDir));
     process.exit(0);
 }
-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]');
-    process.exit(1);
+// 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);
 }
-const outputDir = values.output ?? '.';
-fs.mkdirSync(outputDir, { recursive: true });
-let hasErrors = false;
-const compiled = [];
-// Phase 1: Parse, validate, and lower all components
-for (const file of positionals) {
-    if (!fs.existsSync(file)) {
-        console.error(`${file}:1:1 - error: file not found`);
-        hasErrors = true;
-        continue;
-    }
-    const source = fs.readFileSync(file, 'utf-8');
-    const parsed = parseFile(file, source);
-    if (parsed.errors.length > 0) {
-        parsed.errors.forEach(e => console.error(`${e.file}:${e.line}:${e.col} - error: ${e.message}`));
-        hasErrors = true;
-        continue;
-    }
-    const validation = validate(parsed);
-    if (validation.errors.length > 0) {
-        validation.errors.forEach(e => console.error(`${e.file}:${e.line}:${e.col} - error: ${e.message}`));
-        hasErrors = true;
-        continue;
+// 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 ir = lowerComponent(parsed, validation);
-    const imports = extractImports(parsed.sourceFile);
-    compiled.push({
-        name: ir.name,
-        stateCount: ir.stateSlots.length,
-        bufferCount: ir.bufferCount,
-        ir,
-        imports,
-        hasProps: ir.params.length > 0,
+    const { values } = parseArgs({
+        args: process.argv.slice(4),
+        allowPositionals: false,
+        options: { output: { type: 'string', short: 'o' } },
     });
+    const outputDir = values.output ?? '.';
+    startWatch(path.resolve(watchDir), path.resolve(outputDir));
 }
-if (hasErrors)
-    process.exit(1);
-// Phase 2: Build lookup of compiled components for cross-file resolution
-const componentMap = new Map();
-for (const comp of compiled) {
-    componentMap.set(comp.name, comp);
-}
-// Phase 3: Resolve imported component stateCount/bufferCount in IR, then emit
-for (const comp of compiled) {
-    // Resolve cross-file custom component info
-    resolveCustomComponents(comp.ir.body, componentMap);
-    // Build import info for #include directives
-    const importInfos = [];
-    for (const [importedName] of comp.imports) {
-        const importedComp = componentMap.get(importedName);
-        if (importedComp && importedComp.hasProps) {
-            importInfos.push({
-                name: importedName,
-                headerFile: `${importedName}.gen.h`,
-            });
-        }
-    }
-    // Emit .gen.cpp
-    const cppOutput = emitComponent(comp.ir, importInfos);
-    const baseName = comp.name;
-    const outPath = path.join(outputDir, `${baseName}.gen.cpp`);
-    fs.writeFileSync(outPath, cppOutput);
-    console.log(`  ${baseName} -> ${outPath}`);
-    // Emit .gen.h for components with props
-    if (comp.hasProps) {
-        const headerOutput = emitComponentHeader(comp.ir);
-        const headerPath = path.join(outputDir, `${baseName}.gen.h`);
-        fs.writeFileSync(headerPath, headerOutput);
-        console.log(`  ${baseName} -> ${headerPath} (header)`);
+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]');
+        console.error('       imxc add [project-dir]');
+        console.error('       imxc watch <dir> -o <output-dir>');
+        process.exit(1);
     }
-}
-// Phase 4: Emit root entry point
-if (compiled.length > 0) {
-    const root = compiled[0];
-    const rootOutput = emitRoot(root.name, root.stateCount, root.bufferCount);
-    const rootPath = path.join(outputDir, 'app_root.gen.cpp');
-    fs.writeFileSync(rootPath, rootOutput);
-    console.log(`  -> ${rootPath} (root entry point)`);
-}
-console.log(`imxc: ${compiled.length} component(s) compiled successfully.`);
-/**
- * Walk IR nodes and update custom_component nodes with resolved stateCount/bufferCount
- * from the compiled component map.
- */
-function resolveCustomComponents(nodes, map) {
-    for (const node of nodes) {
-        if (node.kind === 'custom_component') {
-            const target = map.get(node.name);
-            if (target) {
-                node.stateCount = target.stateCount;
-                node.bufferCount = target.bufferCount;
-            }
-        }
-        else if (node.kind === 'conditional') {
-            resolveCustomComponents(node.body, map);
-            if (node.elseBody)
-                resolveCustomComponents(node.elseBody, map);
-        }
-        else if (node.kind === 'list_map') {
-            resolveCustomComponents(node.body, map);
-        }
+    const outputDir = values.output ?? '.';
+    const result = compile(positionals, outputDir);
+    if (!result.success) {
+        result.errors.forEach(e => console.error(e));
+        process.exit(1);
     }
+    console.log(`imxc: ${result.componentCount} component(s) compiled successfully.`);
 }

package/dist/init.d.ts

@@ -1 +1,2 @@
+export declare function addToProject(projectDir: string): void;
 export declare function initProject(projectDir: string, projectName?: string): void;

package/dist/init.js

@@ -1,7 +1,7 @@
 import * as fs from 'node:fs';
 import * as path from 'node:path';
-const MAIN_CPP = `#include <reimgui/runtime.h>
-#include <reimgui/renderer.h>
+const MAIN_CPP = `#include <imx/runtime.h>
+#include <imx/renderer.h>
 
 #include <imgui.h>
 #include <imgui_impl_glfw.h>
@@ -11,7 +11,7 @@ const MAIN_CPP = `#include <reimgui/runtime.h>
 struct App {
     GLFWwindow*      window  = nullptr;
     ImGuiIO*         io      = nullptr;
-    reimgui::Runtime runtime;
+    imx::Runtime runtime;
 };
 
 static void render_frame(App& app) {
@@ -26,7 +26,7 @@ static void render_frame(App& app) {
     ImGui_ImplGlfw_NewFrame();
     ImGui::NewFrame();
 
-    reimgui::render_root(app.runtime);
+    imx::render_root(app.runtime);
 
     ImGui::Render();
     glViewport(0, 0, fb_w, fb_h);
@@ -122,7 +122,7 @@ const APP_TSX = `export default function App() {
   );
 }
 `;
-const REIMGUI_DTS = `// reimgui.d.ts — Type definitions for ReImGui components
+const IMX_DTS = `// imx.d.ts — Type definitions for IMX components
 
 interface Style {
   padding?: number;
@@ -140,7 +140,7 @@ interface Style {
 
 declare function useState<T>(initial: T): [T, (value: T) => void];
 
-interface WindowProps { title: string; style?: Style; children?: any; }
+interface WindowProps { title: string; open?: boolean; onClose?: () => void; noTitleBar?: boolean; noResize?: boolean; noMove?: boolean; noCollapse?: boolean; noDocking?: boolean; noScrollbar?: boolean; style?: Style; children?: any; }
 interface ViewProps { style?: Style; children?: any; }
 interface RowProps { gap?: number; style?: Style; children?: any; }
 interface ColumnProps { gap?: number; style?: Style; children?: any; }
@@ -151,6 +151,21 @@ interface CheckboxProps { value: boolean; onChange: (v: boolean) => void; label?
 interface SeparatorProps {}
 interface PopupProps { id: string; style?: Style; children?: any; }
 interface DockSpaceProps { style?: Style; children?: any; }
+interface DockLayoutProps { children?: any; }
+interface DockSplitProps { direction: "horizontal" | "vertical"; size: number; children?: any; }
+interface DockPanelProps { children?: any; }
+interface ThemeProps {
+  preset: string;
+  accentColor?: [number, number, number, number];
+  backgroundColor?: [number, number, number, number];
+  textColor?: [number, number, number, number];
+  borderColor?: [number, number, number, number];
+  surfaceColor?: [number, number, number, number];
+  rounding?: number;
+  borderSize?: number;
+  spacing?: number;
+  children?: any;
+}
 interface MenuBarProps { children?: any; }
 interface MenuProps { label: string; children?: any; }
 interface MenuItemProps { label: string; onPress?: () => void; shortcut?: string; }
@@ -171,6 +186,48 @@ interface ColorEditProps { label: string; value: number[]; onChange: (v: number[
 interface ListBoxProps { label: string; value: number; onChange: (v: number) => void; items: string[]; style?: Style; }
 interface ProgressBarProps { value: number; overlay?: string; style?: Style; }
 interface TooltipProps { text: string; }
+interface BulletTextProps { style?: Style; children?: any; }
+interface LabelTextProps { label: string; value: string; }
+interface SelectableProps { label: string; selected?: boolean; onSelect?: () => void; style?: Style; }
+interface RadioProps { label: string; value: number; index: number; onChange?: (v: number) => void; style?: Style; }
+interface InputTextMultilineProps { label: string; value: string; style?: Style; }
+interface ColorPickerProps { label: string; value: number[]; style?: Style; }
+interface PlotLinesProps { label: string; values: number[]; overlay?: string; style?: Style; }
+interface PlotHistogramProps { label: string; values: number[]; overlay?: string; style?: Style; }
+interface ModalProps { title: string; open?: boolean; onClose?: () => void; style?: Style; children?: any; }
+interface ImageProps { src: string; embed?: boolean; width?: number; height?: number; }
+interface GroupProps { style?: Style; children?: any; }
+interface IDProps { scope: string | number; children?: any; }
+interface DragDropSourceProps { type: string; payload: number | string; children?: any; }
+interface DragDropTargetProps { type: string; onDrop: (payload: any) => void; children?: any; }
+interface CanvasProps { width: number; height: number; style?: Style; children?: any; }
+interface DrawLineProps { p1: [number, number]; p2: [number, number]; color: [number, number, number, number]; thickness?: number; }
+interface DrawRectProps { min: [number, number]; max: [number, number]; color: [number, number, number, number]; filled?: boolean; thickness?: number; rounding?: number; }
+interface DrawCircleProps { center: [number, number]; radius: number; color: [number, number, number, number]; filled?: boolean; thickness?: number; }
+interface DrawTextProps { pos: [number, number]; text: string; color: [number, number, number, number]; }
+interface StyleColorProps {
+  text?: [number, number, number, number];
+  textDisabled?: [number, number, number, number];
+  windowBg?: [number, number, number, number];
+  frameBg?: [number, number, number, number];
+  frameBgHovered?: [number, number, number, number];
+  frameBgActive?: [number, number, number, number];
+  titleBg?: [number, number, number, number];
+  titleBgActive?: [number, number, number, number];
+  button?: [number, number, number, number];
+  buttonHovered?: [number, number, number, number];
+  buttonActive?: [number, number, number, number];
+  header?: [number, number, number, number];
+  headerHovered?: [number, number, number, number];
+  headerActive?: [number, number, number, number];
+  separator?: [number, number, number, number];
+  checkMark?: [number, number, number, number];
+  sliderGrab?: [number, number, number, number];
+  border?: [number, number, number, number];
+  popupBg?: [number, number, number, number];
+  tab?: [number, number, number, number];
+  children?: any;
+}
 
 declare function Window(props: WindowProps): any;
 declare function View(props: ViewProps): any;
@@ -183,6 +240,10 @@ declare function Checkbox(props: CheckboxProps): any;
 declare function Separator(props: SeparatorProps): any;
 declare function Popup(props: PopupProps): any;
 declare function DockSpace(props: DockSpaceProps): any;
+declare function DockLayout(props: DockLayoutProps): any;
+declare function DockSplit(props: DockSplitProps): any;
+declare function DockPanel(props: DockPanelProps): any;
+declare function Theme(props: ThemeProps): any;
 declare function MenuBar(props: MenuBarProps): any;
 declare function Menu(props: MenuProps): any;
 declare function MenuItem(props: MenuItemProps): any;
@@ -203,8 +264,63 @@ declare function ColorEdit(props: ColorEditProps): any;
 declare function ListBox(props: ListBoxProps): any;
 declare function ProgressBar(props: ProgressBarProps): any;
 declare function Tooltip(props: TooltipProps): any;
+declare function BulletText(props: BulletTextProps): any;
+declare function LabelText(props: LabelTextProps): any;
+declare function Selectable(props: SelectableProps): any;
+declare function Radio(props: RadioProps): any;
+declare function InputTextMultiline(props: InputTextMultilineProps): any;
+declare function ColorPicker(props: ColorPickerProps): any;
+declare function PlotLines(props: PlotLinesProps): any;
+declare function PlotHistogram(props: PlotHistogramProps): any;
+declare function Modal(props: ModalProps): any;
+declare function Image(props: ImageProps): any;
+declare function Group(props: GroupProps): any;
+declare function ID(props: IDProps): any;
+declare function StyleColor(props: StyleColorProps): any;
+declare function Canvas(props: CanvasProps): any;
+declare function DrawLine(props: DrawLineProps): any;
+declare function DrawRect(props: DrawRectProps): any;
+declare function DrawCircle(props: DrawCircleProps): any;
+declare function DrawText(props: DrawTextProps): any;
+
+interface StyleVarProps {
+  alpha?: number;
+  windowPadding?: [number, number];
+  windowRounding?: number;
+  framePadding?: [number, number];
+  frameRounding?: number;
+  frameBorderSize?: number;
+  itemSpacing?: [number, number];
+  itemInnerSpacing?: [number, number];
+  indentSpacing?: number;
+  cellPadding?: [number, number];
+  tabRounding?: number;
+  children?: any;
+}
+declare function StyleVar(props: StyleVarProps): any;
+declare function DragDropSource(props: DragDropSourceProps): any;
+declare function DragDropTarget(props: DragDropTargetProps): any;
+interface DisabledProps { disabled?: boolean; children?: any; }
+interface ChildProps { id: string; width?: number; height?: number; border?: boolean; style?: Style; children?: any; }
+declare function Disabled(props: DisabledProps): any;
+declare function Child(props: ChildProps): any;
+
+declare function resetLayout(): void;
 
-declare module "reimgui/jsx-runtime" {
+// --- Custom native widgets ---
+// Declare your C++ registered widgets here for type checking:
+//
+// interface KnobProps {
+//     value: number;
+//     onChange: (value: number) => void;
+//     min: number;
+//     max: number;
+//     width?: number;
+//     height?: number;
+// }
+// declare function Knob(props: KnobProps): any;
+
+declare module "imx/jsx-runtime" {
   export namespace JSX {
     type Element = any;
     interface IntrinsicElements { [tag: string]: any; }
@@ -222,12 +338,12 @@ const TSCONFIG = `{
     "module": "ES2022",
     "moduleResolution": "bundler",
     "jsx": "react-jsx",
-    "jsxImportSource": "reimgui",
+    "jsxImportSource": "imx",
     "strict": false,
     "noEmit": true,
     "skipLibCheck": true
   },
-  "include": ["src/**/*.tsx", "src/reimgui.d.ts"]
+  "include": ["src/**/*.tsx", "src/imx.d.ts"]
 }
 `;
 function cmakeTemplate(projectName, repoUrl) {
@@ -238,17 +354,20 @@ set(CMAKE_CXX_STANDARD 20)
 set(CMAKE_CXX_STANDARD_REQUIRED ON)
 
 include(FetchContent)
+set(FETCHCONTENT_QUIET OFF)
 
 FetchContent_Declare(
-    reimgui
+    imx
     GIT_REPOSITORY ${repoUrl}
     GIT_TAG main
+    GIT_PROGRESS TRUE
 )
-FetchContent_MakeAvailable(reimgui)
+message(STATUS "Fetching IMX (includes ImGui + GLFW)...")
+FetchContent_MakeAvailable(imx)
 
-include(ReImGuiCompile)
+include(ImxCompile)
 
-reimgui_compile_tsx(GENERATED
+imx_compile_tsx(GENERATED
     SOURCES src/App.tsx
     OUTPUT_DIR \${CMAKE_BINARY_DIR}/generated
 )
@@ -257,10 +376,73 @@ add_executable(${projectName}
     src/main.cpp
     \${GENERATED}
 )
-target_link_libraries(${projectName} PRIVATE reimgui::renderer)
+target_link_libraries(${projectName} PRIVATE imx::renderer)
 target_include_directories(${projectName} PRIVATE \${CMAKE_BINARY_DIR}/generated)
+
+# Copy public/ assets to output directory
+add_custom_command(TARGET ${projectName} POST_BUILD
+    COMMAND \${CMAKE_COMMAND} -E copy_directory
+        \${CMAKE_CURRENT_SOURCE_DIR}/public
+        $<TARGET_FILE_DIR:${projectName}>
+    COMMENT "Copying public/ assets"
+)
 `;
 }
+export function addToProject(projectDir) {
+    const srcDir = path.join(projectDir, 'src');
+    if (fs.existsSync(path.join(srcDir, 'App.tsx'))) {
+        console.error(`Error: ${srcDir}/App.tsx already exists. Aborting.`);
+        process.exit(1);
+    }
+    fs.mkdirSync(srcDir, { recursive: true });
+    const publicDir = path.join(projectDir, 'public');
+    fs.mkdirSync(publicDir, { recursive: true });
+    // Write TSX source files only — no CMakeLists.txt or main.cpp
+    fs.writeFileSync(path.join(srcDir, 'App.tsx'), APP_TSX);
+    fs.writeFileSync(path.join(srcDir, 'imx.d.ts'), IMX_DTS);
+    fs.writeFileSync(path.join(projectDir, 'tsconfig.json'), TSCONFIG);
+    console.log(`imxc: added IMX sources to project`);
+    console.log('');
+    console.log('  Created:');
+    console.log(`    src/App.tsx            — your root component`);
+    console.log(`    src/imx.d.ts           — type definitions for IDE support`);
+    console.log(`    tsconfig.json          — TypeScript config`);
+    console.log(`    public/                — static assets (copied to exe directory)`);
+    console.log('');
+    console.log('  Add to your CMakeLists.txt:');
+    console.log('');
+    console.log('    # --- IMX integration ---');
+    console.log('    include(FetchContent)');
+    console.log('    FetchContent_Declare(imx');
+    console.log('        GIT_REPOSITORY https://github.com/bgocumlu/imx.git');
+    console.log('        GIT_TAG main');
+    console.log('    )');
+    console.log('    FetchContent_MakeAvailable(imx)');
+    console.log('    include(ImxCompile)');
+    console.log('');
+    console.log('    imx_compile_tsx(GENERATED');
+    console.log('        SOURCES src/App.tsx');
+    console.log('        OUTPUT_DIR ${CMAKE_BINARY_DIR}/generated');
+    console.log('    )');
+    console.log('');
+    console.log('    # Add ${GENERATED} to your target sources:');
+    console.log('    target_sources(your_app PRIVATE ${GENERATED})');
+    console.log('    target_link_libraries(your_app PRIVATE imx::renderer)');
+    console.log('    target_include_directories(your_app PRIVATE ${CMAKE_BINARY_DIR}/generated)');
+    console.log('');
+    console.log('    # Copy assets to exe directory:');
+    console.log('    add_custom_command(TARGET your_app POST_BUILD');
+    console.log('        COMMAND ${CMAKE_COMMAND} -E copy_directory');
+    console.log('            ${CMAKE_CURRENT_SOURCE_DIR}/public $<TARGET_FILE_DIR:your_app>');
+    console.log('    )');
+    console.log('');
+    console.log('  Then add the IMX render call to your main loop:');
+    console.log('');
+    console.log('    #include <imx/runtime.h>');
+    console.log('    imx::Runtime runtime;');
+    console.log('    // In your frame loop, between NewFrame() and Render():');
+    console.log('    imx::render_root(runtime);');
+}
 export function initProject(projectDir, projectName) {
     const name = projectName ?? path.basename(projectDir);
     const srcDir = path.join(projectDir, 'src');
@@ -269,20 +451,23 @@ export function initProject(projectDir, projectName) {
         process.exit(1);
     }
     fs.mkdirSync(srcDir, { recursive: true });
+    const publicDir = path.join(projectDir, 'public');
+    fs.mkdirSync(publicDir, { recursive: true });
     // Write files
     fs.writeFileSync(path.join(srcDir, 'main.cpp'), MAIN_CPP.replace('APP_NAME', name));
     fs.writeFileSync(path.join(srcDir, 'App.tsx'), APP_TSX);
-    fs.writeFileSync(path.join(srcDir, 'reimgui.d.ts'), REIMGUI_DTS);
+    fs.writeFileSync(path.join(srcDir, 'imx.d.ts'), IMX_DTS);
     fs.writeFileSync(path.join(projectDir, 'tsconfig.json'), TSCONFIG);
-    fs.writeFileSync(path.join(projectDir, 'CMakeLists.txt'), cmakeTemplate(name, 'https://github.com/bgocumlu/reimgui.git'));
+    fs.writeFileSync(path.join(projectDir, 'CMakeLists.txt'), cmakeTemplate(name, 'https://github.com/bgocumlu/imx.git'));
     console.log(`imxc: initialized project "${name}"`);
     console.log('');
     console.log('  Created:');
     console.log(`    src/main.cpp          — app shell (GLFW + OpenGL + ImGui)`);
     console.log(`    src/App.tsx           — your root component`);
-    console.log(`    src/reimgui.d.ts      — type definitions for IDE support`);
+    console.log(`    src/imx.d.ts      — type definitions for IDE support`);
     console.log(`    tsconfig.json         — TypeScript config`);
     console.log(`    CMakeLists.txt        — build config with FetchContent`);
+    console.log(`    public/               — static assets (copied to exe directory)`);
     console.log('');
     console.log('  Next steps:');
     console.log(`    cmake -B build`);