imxc 0.1.0 → 0.2.0

package/dist/index.js

@@ -2,16 +2,25 @@
 import { parseArgs } from 'node:util';
 import * as fs from 'node:fs';
 import * as path from 'node:path';
-import { parseIgxFile, extractImports } from './parser.js';
+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';
+// Handle `imxc init [dir]` subcommand
+if (process.argv[2] === 'init') {
+    const dir = process.argv[3] ?? '.';
+    const absDir = path.resolve(dir);
+    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);
 }
 const outputDir = values.output ?? '.';
@@ -26,7 +35,7 @@ for (const file of positionals) {
         continue;
     }
     const source = fs.readFileSync(file, 'utf-8');
-    const parsed = parseIgxFile(file, source);
+    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;

package/dist/init.d.ts

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

package/dist/init.js

@@ -0,0 +1,290 @@
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+const MAIN_CPP = `#include <reimgui/runtime.h>
+#include <reimgui/renderer.h>
+
+#include <imgui.h>
+#include <imgui_impl_glfw.h>
+#include <imgui_impl_opengl3.h>
+#include <GLFW/glfw3.h>
+
+struct App {
+    GLFWwindow*      window  = nullptr;
+    ImGuiIO*         io      = nullptr;
+    reimgui::Runtime runtime;
+};
+
+static void render_frame(App& app) {
+    glfwMakeContextCurrent(app.window);
+    if (glfwGetWindowAttrib(app.window, GLFW_ICONIFIED) != 0) return;
+
+    int fb_w = 0, fb_h = 0;
+    glfwGetFramebufferSize(app.window, &fb_w, &fb_h);
+    if (fb_w <= 0 || fb_h <= 0) return;
+
+    ImGui_ImplOpenGL3_NewFrame();
+    ImGui_ImplGlfw_NewFrame();
+    ImGui::NewFrame();
+
+    reimgui::render_root(app.runtime);
+
+    ImGui::Render();
+    glViewport(0, 0, fb_w, fb_h);
+    glClearColor(0.12F, 0.12F, 0.15F, 1.0F);
+    glClear(GL_COLOR_BUFFER_BIT);
+    ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData());
+
+    if ((app.io->ConfigFlags & ImGuiConfigFlags_ViewportsEnable) != 0) {
+        ImGui::UpdatePlatformWindows();
+        ImGui::RenderPlatformWindowsDefault();
+    }
+
+    glfwMakeContextCurrent(app.window);
+    glfwSwapBuffers(app.window);
+}
+
+static void window_size_callback(GLFWwindow* window, int, int) {
+    auto* app = static_cast<App*>(glfwGetWindowUserPointer(window));
+    if (app) render_frame(*app);
+}
+
+int main() {
+    if (glfwInit() == 0) return 1;
+
+    const char* glsl_version = "#version 150";
+    glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
+    glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 2);
+    glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
+#ifdef __APPLE__
+    glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE);
+#endif
+
+    GLFWwindow* window = glfwCreateWindow(800, 600, "APP_NAME", nullptr, nullptr);
+    if (!window) { glfwTerminate(); return 1; }
+    glfwMakeContextCurrent(window);
+    glfwSwapInterval(1);
+
+    IMGUI_CHECKVERSION();
+    ImGui::CreateContext();
+    ImGuiIO& io = ImGui::GetIO();
+    io.ConfigFlags |= ImGuiConfigFlags_DockingEnable;
+    io.ConfigFlags |= ImGuiConfigFlags_ViewportsEnable;
+
+    ImGui::StyleColorsDark();
+    ImGuiStyle& style = ImGui::GetStyle();
+    if (io.ConfigFlags & ImGuiConfigFlags_ViewportsEnable) {
+        style.WindowRounding = 0.0F;
+        style.Colors[ImGuiCol_WindowBg].w = 1.0F;
+    }
+
+    ImGui_ImplGlfw_InitForOpenGL(window, true);
+    ImGui_ImplOpenGL3_Init(glsl_version);
+
+    App app;
+    app.window = window;
+    app.io = &io;
+    glfwSetWindowUserPointer(window, &app);
+    glfwSetWindowSizeCallback(window, window_size_callback);
+
+    while (glfwWindowShouldClose(window) == 0) {
+        glfwPollEvents();
+        render_frame(app);
+    }
+
+    ImGui_ImplOpenGL3_Shutdown();
+    ImGui_ImplGlfw_Shutdown();
+    ImGui::DestroyContext();
+    glfwDestroyWindow(window);
+    glfwTerminate();
+    return 0;
+}
+`;
+const APP_TSX = `export default function App() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <DockSpace>
+      <MenuBar>
+        <Menu label="File">
+          <MenuItem label="Exit" />
+        </Menu>
+      </MenuBar>
+      <Window title="Hello">
+        <Column gap={8}>
+          <Text>Hello, World!</Text>
+          <Row gap={8}>
+            <Button title="Increment" onPress={() => setCount(count + 1)} />
+            <Text>Count: {count}</Text>
+          </Row>
+        </Column>
+      </Window>
+    </DockSpace>
+  );
+}
+`;
+const REIMGUI_DTS = `// reimgui.d.ts — Type definitions for ReImGui components
+
+interface Style {
+  padding?: number;
+  paddingHorizontal?: number;
+  paddingVertical?: number;
+  gap?: number;
+  width?: number;
+  height?: number;
+  minWidth?: number;
+  minHeight?: number;
+  backgroundColor?: [number, number, number, number];
+  textColor?: [number, number, number, number];
+  fontSize?: number;
+}
+
+declare function useState<T>(initial: T): [T, (value: T) => void];
+
+interface WindowProps { title: string; 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; }
+interface TextProps { style?: Style; children?: any; }
+interface ButtonProps { title: string; onPress: () => void; disabled?: boolean; style?: Style; }
+interface TextInputProps { value: string; onChange: (v: string) => void; label?: string; placeholder?: string; style?: Style; }
+interface CheckboxProps { value: boolean; onChange: (v: boolean) => void; label?: string; style?: Style; }
+interface SeparatorProps {}
+interface PopupProps { id: string; style?: Style; children?: any; }
+interface DockSpaceProps { style?: Style; children?: any; }
+interface MenuBarProps { children?: any; }
+interface MenuProps { label: string; children?: any; }
+interface MenuItemProps { label: string; onPress?: () => void; shortcut?: string; }
+interface TableProps { columns: string[]; style?: Style; children?: any; }
+interface TableRowProps { children?: any; }
+interface TabBarProps { style?: Style; children?: any; }
+interface TabItemProps { label: string; children?: any; }
+interface TreeNodeProps { label: string; children?: any; }
+interface CollapsingHeaderProps { label: string; children?: any; }
+interface SliderFloatProps { label: string; value: number; onChange: (v: number) => void; min: number; max: number; style?: Style; }
+interface SliderIntProps { label: string; value: number; onChange: (v: number) => void; min: number; max: number; style?: Style; }
+interface DragFloatProps { label: string; value: number; onChange: (v: number) => void; speed?: number; style?: Style; }
+interface DragIntProps { label: string; value: number; onChange: (v: number) => void; speed?: number; style?: Style; }
+interface ComboProps { label: string; value: number; onChange: (v: number) => void; items: string[]; style?: Style; }
+interface InputIntProps { label: string; value: number; onChange: (v: number) => void; style?: Style; }
+interface InputFloatProps { label: string; value: number; onChange: (v: number) => void; style?: Style; }
+interface ColorEditProps { label: string; value: number[]; onChange: (v: number[]) => void; style?: Style; }
+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; }
+
+declare function Window(props: WindowProps): any;
+declare function View(props: ViewProps): any;
+declare function Row(props: RowProps): any;
+declare function Column(props: ColumnProps): any;
+declare function Text(props: TextProps): any;
+declare function Button(props: ButtonProps): any;
+declare function TextInput(props: TextInputProps): any;
+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 MenuBar(props: MenuBarProps): any;
+declare function Menu(props: MenuProps): any;
+declare function MenuItem(props: MenuItemProps): any;
+declare function Table(props: TableProps): any;
+declare function TableRow(props: TableRowProps): any;
+declare function TabBar(props: TabBarProps): any;
+declare function TabItem(props: TabItemProps): any;
+declare function TreeNode(props: TreeNodeProps): any;
+declare function CollapsingHeader(props: CollapsingHeaderProps): any;
+declare function SliderFloat(props: SliderFloatProps): any;
+declare function SliderInt(props: SliderIntProps): any;
+declare function DragFloat(props: DragFloatProps): any;
+declare function DragInt(props: DragIntProps): any;
+declare function Combo(props: ComboProps): any;
+declare function InputInt(props: InputIntProps): any;
+declare function InputFloat(props: InputFloatProps): any;
+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 module "reimgui/jsx-runtime" {
+  export namespace JSX {
+    type Element = any;
+    interface IntrinsicElements { [tag: string]: any; }
+    interface ElementChildrenAttribute { children: {}; }
+  }
+  export function jsx(type: any, props: any, key?: any): any;
+  export function jsxs(type: any, props: any, key?: any): any;
+  export function Fragment(props: any): any;
+}
+`;
+const TSCONFIG = `{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022"],
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "jsxImportSource": "reimgui",
+    "strict": false,
+    "noEmit": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.tsx", "src/reimgui.d.ts"]
+}
+`;
+function cmakeTemplate(projectName, repoUrl) {
+    return `cmake_minimum_required(VERSION 3.25)
+project(${projectName} LANGUAGES CXX)
+
+set(CMAKE_CXX_STANDARD 20)
+set(CMAKE_CXX_STANDARD_REQUIRED ON)
+
+include(FetchContent)
+
+FetchContent_Declare(
+    reimgui
+    GIT_REPOSITORY ${repoUrl}
+    GIT_TAG main
+)
+FetchContent_MakeAvailable(reimgui)
+
+include(ReImGuiCompile)
+
+reimgui_compile_tsx(GENERATED
+    SOURCES src/App.tsx
+    OUTPUT_DIR \${CMAKE_BINARY_DIR}/generated
+)
+
+add_executable(${projectName}
+    src/main.cpp
+    \${GENERATED}
+)
+target_link_libraries(${projectName} PRIVATE reimgui::renderer)
+target_include_directories(${projectName} PRIVATE \${CMAKE_BINARY_DIR}/generated)
+`;
+}
+export function initProject(projectDir, projectName) {
+    const name = projectName ?? path.basename(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 });
+    // 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(projectDir, 'tsconfig.json'), TSCONFIG);
+    fs.writeFileSync(path.join(projectDir, 'CMakeLists.txt'), cmakeTemplate(name, 'https://github.com/bgocumlu/reimgui.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(`    tsconfig.json         — TypeScript config`);
+    console.log(`    CMakeLists.txt        — build config with FetchContent`);
+    console.log('');
+    console.log('  Next steps:');
+    console.log(`    cmake -B build`);
+    console.log(`    cmake --build build`);
+}

package/dist/parser.d.ts

@@ -11,5 +11,5 @@ export interface ParseError {
     col: number;
     message: string;
 }
-export declare function parseIgxFile(filePath: string, source: string): ParsedFile;
+export declare function parseFile(filePath: string, source: string): ParsedFile;
 export declare function extractImports(sourceFile: ts.SourceFile): Map<string, string>;

package/dist/parser.js

@@ -4,7 +4,7 @@ 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 parseIgxFile(filePath, source) {
+export function parseFile(filePath, source) {
     const fileName = path.basename(filePath);
     const sourceFile = ts.createSourceFile(fileName, source, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
     const errors = [];
@@ -12,7 +12,7 @@ export function parseIgxFile(filePath, source) {
     for (const stmt of sourceFile.statements) {
         if (ts.isFunctionDeclaration(stmt) && stmt.name) {
             if (component !== null) {
-                errors.push(formatError(sourceFile, stmt, 'Only one component function per .igx file is supported'));
+                errors.push(formatError(sourceFile, stmt, 'Only one component function per file is supported'));
             }
             else {
                 component = stmt;

package/package.json

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