search

xframes-project / xframes

GPU-accelerated GUI development for Node.js and the browser
https://xframes.dev
MIT License
7 stars 0 forks source link

React ImGui as native desktop application via a native Node module #68

Closed andreamancuso closed 1 month ago

andreamancuso commented 1 month ago

React ImGui can now run within a native node module - for a truly native desktop experience.

Theming and fonts loading will be added as part of a separate MR

image

Summary by CodeRabbit

coderabbitai[bot] commented 1 month ago

Walkthrough

This pull request introduces several significant changes, including the addition of new submodules to the .gitmodules file, updates to the .gitignore file, and the creation of new CMake configuration files for the reactDearImgui project. It also enhances various components, such as ImGuiRenderer, Image, and InputText, with new methods and improved error handling. Additionally, new React components are added for a trading GUI demo, and modifications are made to existing components to streamline import paths and enhance functionality. Overall, these changes expand the project's capabilities and improve its structure.

Changes

File Path Change Summary
.gitmodules Added submodules: implot, json, OpenGL-Registry, stb, EGL-Registry, imgui, glfw.
packages/dear-imgui/cpp/.gitignore Updated to ignore reactDearImgui.lib, glfw3.dll, and glfw3dll.lib.
packages/dear-imgui/cpp/app/CMakeLists.txt New CMake configuration for reactDearImgui, specifying dependencies and build settings.
packages/dear-imgui/cpp/app/include/imgui_renderer.h Modified ImGuiRenderer class: increased default window size, changed member variable accessibility, added m_clearColor, and made SetCurrentContext virtual.
packages/dear-imgui/cpp/app/include/widget/button.h Updated makeWidget method to return a unique pointer and added debug statements in Measure.
packages/dear-imgui/cpp/app/include/widget/image.h Added methods for handling image fetching success and failure, with conditional compilation for Emscripten.
packages/dear-imgui/cpp/app/include/widget/input_text.h Introduced a new makeWidget method for JSON handling and updated Measure method for context checks.
packages/dear-imgui/cpp/app/src/element/element.cpp Enhanced error handling in Render, GetElementType, HasStyle, and GetElementStyleParts methods.
packages/dear-imgui/cpp/app/src/imgui_renderer.cpp Added error handling for WebGPU and GLFW, modified font loading to use m_imGuiCtx.
packages/dear-imgui/cpp/app/src/reactimgui.cpp Updated Init, PrepareForRender, and Render methods for improved context handling and error management.
packages/dear-imgui/cpp/app/src/widget/image.cpp Simplified texture view checks and added methods for handling image fetch operations.
packages/dear-imgui/cpp/app/vcpkg.json New JSON configuration for reactdearimgui, specifying dependencies.
packages/dear-imgui/cpp/node/.gitignore New .gitignore file added to ignore various build artifacts and logs.
packages/dear-imgui/cpp/node/CMakeLists.txt New CMake configuration for node-imgui, defining project settings and dependencies.
packages/dear-imgui/cpp/node/LICENSE Added MIT License text.
packages/dear-imgui/cpp/node/README.md New section added for building GLFW3 on Windows.
packages/dear-imgui/cpp/node/build_glfw3.bat New batch script for automating GLFW library build.
packages/dear-imgui/cpp/node/hello.cc Introduced WasmRunner class for managing UI logic with N-API integration.
packages/dear-imgui/cpp/node/hello.js New script for initializing and managing the node-based interface.
packages/dear-imgui/cpp/node/node-imgui.js New file exporting the native module for use in JavaScript.
packages/dear-imgui/cpp/node/package.json New package configuration for node-imgui, defining dependencies and scripts.
packages/dear-imgui/cpp/wasm/vcpkg.json Renamed package from reactdearimgui to reactdearimguiwasm.
packages/dear-imgui/ts/node-imgui/App.tsx New React component App created for rendering a trading GUI demo.
packages/dear-imgui/ts/node-imgui/ReactImgui.tsx New structure for integrating Dear ImGui with React Native.
packages/dear-imgui/ts/node-imgui/TradingGuiDemo/... Multiple new components added for cryptocurrency trading GUI, including CryptoAssetPanels, CryptoAssetsList, and others.
packages/dear-imgui/ts/src/lib/... Various import path updates for ReactImgui component across multiple files.

Possibly related PRs

🐰 In the meadow, where the code does flow,
New submodules join the show!
With buttons, images, and a trading spree,
React and ImGui dance with glee.
So hop along, let’s build and play,
In this vibrant code, we’ll find our way! 🌼✨

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share - [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)
🪧 Tips ### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit , please review it.` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` - `@coderabbitai help me debug CodeRabbit configuration file.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (Invoked using PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai full review` to do a full review from scratch and review all the files again. - `@coderabbitai summary` to regenerate the summary of the PR. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. ### Other keywords and placeholders - Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. - Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description. - Add `@coderabbitai` anywhere in the PR title to generate the title automatically. ### CodeRabbit Configuration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information. - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json` ### Documentation and Community - Visit our [Documentation](https://coderabbit.ai/docs) for detailed information on how to use CodeRabbit. - Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.
sonarcloud[bot] commented 1 month ago

Quality Gate Failed Quality Gate failed

Failed conditions
7.7% Duplication on New Code (required ≤ 3%)
C Reliability Rating on New Code (required ≥ A)

See analysis details on SonarCloud

Catch issues before they fail your Quality Gate with our IDE extension SonarLint