@xframes/node 0.0.21 → 0.1.0

package/CMakeLists.txt

@@ -15,6 +15,8 @@ if(NOT VCPKG_TARGET_TRIPLET)
         set(VCPKG_TARGET_TRIPLET "x64-osx")
     elseif(DEFINED ENV{ARM64_LINUX})
         set(VCPKG_TARGET_TRIPLET "arm64-linux")
+    elseif(DEFINED ENV{RISCV64_LINUX})
+        set(VCPKG_TARGET_TRIPLET "riscv64-linux")
     else()
         set(VCPKG_TARGET_TRIPLET "x64-linux")
     endif()
@@ -47,6 +49,7 @@ add_library(${PROJECT_NAME} SHARED
         ${DEPS}/imgui/imgui_draw.cpp
         ${DEPS}/imgui/imgui_widgets.cpp
         ${DEPS}/imgui/imgui_tables.cpp
+        ${DEPS}/imgui/misc/cpp/imgui_stdlib.cpp
         ${DEPS}/imgui/backends/imgui_impl_opengl3.cpp
         ${DEPS}/imgui/backends/imgui_impl_glfw.cpp
 
@@ -72,6 +75,7 @@ add_library(${PROJECT_NAME} SHARED
 
         ${APP}/src/widget/button.cpp
         ${APP}/src/widget/checkbox.cpp
+        ${APP}/src/widget/color_picker.cpp
         ${APP}/src/widget/child.cpp
         ${APP}/src/widget/clipped_multi_line_text_renderer.cpp
         ${APP}/src/widget/collapsing_header.cpp
@@ -81,10 +85,17 @@ add_library(${PROJECT_NAME} SHARED
         ${APP}/src/widget/input_text.cpp
         ${APP}/src/widget/item_tooltip.cpp
         ${APP}/src/widget/multi_slider.cpp
+        ${APP}/src/widget/plot_bar.cpp
         ${APP}/src/widget/plot_candlestick.cpp
+        ${APP}/src/widget/plot_histogram.cpp
+        ${APP}/src/widget/plot_heatmap.cpp
+        ${APP}/src/widget/plot_pie_chart.cpp
         ${APP}/src/widget/plot_line.cpp
+        ${APP}/src/widget/plot_scatter.cpp
         ${APP}/src/widget/separator.cpp
         ${APP}/src/widget/separator_text.cpp
+        ${APP}/src/widget/progress_bar.cpp
+        ${APP}/src/widget/color_indicator.cpp
         ${APP}/src/widget/slider.cpp
         ${APP}/src/widget/table.cpp
         ${APP}/src/widget/tabs.cpp
@@ -131,6 +142,7 @@ target_include_directories(${PROJECT_NAME} PRIVATE
         ${DEPS}/css-color-parser-cpp
         ${DEPS}/imgui
         ${DEPS}/imgui/backends
+        ${DEPS}/imgui/misc/cpp
         ${DEPS}/implot
         ${DEPS}/json/include
         ${DEPS}/yoga

package/README.md

@@ -1,39 +1,103 @@
-# xframes for Node.js
+# @xframes/node
 
-## Building
+DOM-free, GPU-accelerated desktop GUI development for Node.js — powered by [Dear ImGui](https://github.com/ocornut/imgui) and [Yoga Layout](https://www.yogalayout.dev/).
 
-### Windows
+Write React/TypeScript components that render as native desktop widgets with zero browser overhead.
 
-If a prebuilt module isn't found then you will need Visual Studio 2022
+## Quick Start
 
-### WSL2 - Ubuntu 24.04
+```bash
+npx create-xframes-node-app
+cd my-app
+npm start
+```
 
-You may need to run `export GALLIUM_DRIVER=d3d12` before starting the application to enable Direct3D 12 rendering support.
-This setting is required for proper GPU acceleration in WSL2 and needs to be set in each new terminal session.
-You can add this line to your ~/.bashrc to make it permanent.
+## Example
 
-### Linux
+```tsx
+import { resolve } from "path";
+import * as React from "react";
+import { render, XFrames } from "@xframes/node";
 
-If a prebuilt module isn't found then you will need gcc 13+ to build the project locally.
+const fontDefs = {
+  defs: [{ name: "roboto-regular", sizes: [16, 18, 20, 24] }]
+    .map(({ name, sizes }) => sizes.map((size) => ({ name, size })))
+    .flat(),
+};
 
-Ubuntu 24.04 dependencies:
+const theme = { /* ... */ };
 
-`sudo apt install curl zip unzip tar build-essential cmake libglfw3 libglfw3-dev libxinerama-dev libxcursor-dev xorg-dev libglu1-mesa-dev pkg-config`
+const App = () => (
+  <XFrames.Node root style={{ height: "100%" }}>
+    <XFrames.UnformattedText text="Hello, world" />
+    <XFrames.Button label="Click me" onClick={() => console.log("clicked")} />
+  </XFrames.Node>
+);
 
-Fedora 41 dependencies:
+render(App, resolve("./assets"), fontDefs, theme);
+```
 
-`sudo dnf install @development-tools gcc-c++ cmake glfw-devel`
+## Available Widgets
 
-Raspberry Pi OS
+**Input**: Button, Checkbox, Combo, InputText, Slider, MultiSlider, ColorPicker
 
-`sudo apt install curl zip unzip tar build-essential cmake libglfw3 libglfw3-dev libxinerama-dev libxcursor-dev xorg-dev libglu1-mesa-dev pkg-config`
+**Text**: BulletText, DisabledText, SeparatorText, TextWrap, UnformattedText
 
-You must set:
+**Layout**: Node, Child, Group, DIWindow, Separator, TabBar, TabItem, CollapsingHeader, TreeNode, TreeView
 
-`export ARM64_LINUX=1`
+**Data**: Table (sorting, filtering, column reorder/hide, context menus), PlotLine, PlotBar, PlotScatter, PlotHeatmap, PlotHistogram, PlotPieChart, PlotCandlestick
 
-We could not work out how to detect the correct architecture so, for convenience, in CMakeLists.txt we check for this ENV variable to be set.
+**Other**: Image, ProgressBar, ColorIndicator, ClippedMultiLineTextRenderer, ItemTooltip
 
-`export VCPKG_FORCE_SYSTEM_BINARIES=1`
+## Key Features
 
-It suppresses the downloading of CMake and Ninja and forces the use of the system binaries.
+- **React components** — familiar JSX syntax, hooks, refs, state management
+- **Yoga flexbox layout** — the same layout engine used by React Native
+- **Per-state styling** — base, hover, active, and disabled style variants
+- **Imperative handles** — refs for Table, Plot widgets, InputText, and more
+- **Font Awesome icons** — built-in icon support in tables and text
+- **Theme system** — runtime theme switching via `patchStyle`
+- **Prebuilt binaries** — `npm install` downloads platform-specific native addons (NAPI v9)
+
+## Platform Support
+
+| Architecture | OS | Notes |
+|---|---|---|
+| x64-windows | Windows 11 | Works |
+| x64-linux | WSL2 Ubuntu 24.04 | Set `export GALLIUM_DRIVER=d3d12` |
+| x64-linux | Debian Trixie | Works |
+| x64-linux | Ubuntu 22.04 / 24.04 | Works |
+| arm64-linux | Raspberry Pi OS (Bookworm) | Works |
+
+## Building from Source
+
+If a prebuilt binary isn't available for your platform, the native addon compiles from source during `npm install`. Requirements:
+
+**Windows**: Visual Studio 2022
+
+**Ubuntu 24.04**:
+```bash
+sudo apt install curl zip unzip tar build-essential cmake libglfw3 libglfw3-dev libxinerama-dev libxcursor-dev xorg-dev libglu1-mesa-dev pkg-config
+```
+
+**Fedora 41**:
+```bash
+sudo dnf install @development-tools gcc-c++ cmake glfw-devel
+```
+
+**Raspberry Pi OS**:
+```bash
+sudo apt install curl zip unzip tar build-essential cmake libglfw3 libglfw3-dev libxinerama-dev libxcursor-dev xorg-dev libglu1-mesa-dev pkg-config
+export ARM64_LINUX=1
+export VCPKG_FORCE_SYSTEM_BINARIES=1
+```
+
+## Links
+
+- [Documentation](https://xframes.dev)
+- [GitHub](https://github.com/xframes-project/xframes)
+- [Discord](https://discord.gg/Cbgcajdq)
+
+## License
+
+MIT

package/dist/render.js

@@ -49,7 +49,19 @@ const render = (EntryPointComponent, assetsBasePath, fontDefs, theme) => {
             value: "clicked",
         });
     };
-    xframes.init(assetsBasePath, JSON.stringify(fontDefs), JSON.stringify(theme), onInit, onTextChange, onComboChange, onNumericValueChange, onBooleanValueChange, onMultiValueChange, onClick);
+    const onTableSort = (id, columnIndex, sortDirection) => {
+        const rootNodeID = id;
+        const topLevelType = "onSort";
+        const nativeEventParam = { columnIndex, sortDirection };
+        common_1.ReactNativePrivateInterface.nativeFabricUIManager.dispatchEvent(rootNodeID, topLevelType, nativeEventParam);
+    };
+    const onTableFilter = (id, columnIndex, filterText) => {
+        const rootNodeID = id;
+        const topLevelType = "onFilter";
+        const nativeEventParam = { columnIndex, filterText };
+        common_1.ReactNativePrivateInterface.nativeFabricUIManager.dispatchEvent(rootNodeID, topLevelType, nativeEventParam);
+    };
+    xframes.init(assetsBasePath, JSON.stringify(fontDefs), JSON.stringify(theme), onInit, onTextChange, onComboChange, onNumericValueChange, onBooleanValueChange, onMultiValueChange, onClick, onTableSort, onTableFilter);
     const widgetRegistrationService = new common_1.WidgetRegistrationService(xframes);
     common_1.ReactNativePrivateInterface.nativeFabricUIManager.init(xframes, widgetRegistrationService);
     let flag = true;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@xframes/node",
-    "version": "0.0.21",
+    "version": "0.1.0",
     "description": "DOM-less, GPU-accelerated GUI development for Node.js",
     "main": "dist/index.js",
     "files": [
@@ -20,12 +20,14 @@
     },
     "scripts": {
         "install": "prebuild-install -t 9 -r napi --tag-prefix xframes-node- && npm run copy-artifacts-to-dist-folder",
+        "build:common": "cd ../common && npx tsup --format cjs --external react,react-dom",
+        "prestart": "npm run build:common && cpy --flat ../common/dist/*.* node_modules/@xframes/common/dist/",
         "start": "tsx ./src/index.tsx",
         "build:library": "rimraf ./dist && npm run tsc && npm run copy-artifacts-to-dist-folder",
         "tsc": "rimraf ./dist && tsc --project ./tsconfig-build.json",
         "tsup": "tsup --format cjs --external react",
         "copy-artifacts-to-lib-folder": "cpy --flat ./build/Release/*.* ./src/lib",
-        "copy-artifacts-to-dist-folder": "cpy --flat ./build/Release/*.dll ./dist",
+        "copy-artifacts-to-dist-folder": "cpy --flat ./build/Release/*.* ./dist",
         "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
         "cpp:compile": "cmake-js compile && npm run copy-artifacts-to-lib-folder",
         "cpp:generate-module": "prebuild --strip --backend cmake-js -t 9 -r napi --include-regex \"\\.(node|dll|o)$\" --tag-prefix xframes-node- --verbose",
@@ -66,11 +68,10 @@
         "whatwg-fetch": "^3.6.20"
     },
     "peerDependencies": {
-        "@xframes/common": "^0.0.13",
+        "@xframes/common": "^0.1.0",
         "react": "^18.2.0"
     },
     "devDependencies": {
-        "@alpacahq/alpaca-trade-api": "^3.1.2",
         "@babel/core": "^7.24.5",
         "@babel/plugin-proposal-class-properties": "^7.18.6",
         "@babel/plugin-transform-flow-strip-types": "^7.20.0",
@@ -81,8 +82,6 @@
         "@babel/preset-typescript": "^7.24.1",
         "@fortawesome/fontawesome-free": "^6.5.2",
         "@microsoft/api-extractor": "^7.43.4",
-        "@react-rxjs/core": "^0.10.7",
-        "@react-rxjs/utils": "^0.9.7",
         "@types/babel__core": "^7",
         "@types/babel__preset-env": "^7",
         "@types/invariant": "^2",
@@ -100,7 +99,7 @@
         "babel-plugin-syntax-hermes-parser": "0.21.0",
         "bindings": "^1.5.0",
         "clean-webpack-plugin": "^4.0.0",
-        "cmake-js": "^7.3.0",
+        "cmake-js": "^8.0.0",
         "css-loader": "^7.1.1",
         "eslint": "^8.57.0",
         "eslint-plugin-react-hooks": "^4.6.0",
@@ -109,7 +108,7 @@
         "html-webpack-plugin": "^5.6.0",
         "inline-source-map": "^0.6.3",
         "mini-css-extract-plugin": "^2.9.0",
-        "node-addon-api": "^8.2.1",
+        "node-addon-api": "^8.6.0",
         "prebuild": "^13.0.1",
         "react-native": "^0.74.1",
         "rimraf": "^5.0.6",
@@ -122,7 +121,6 @@
         "webpack": "^5.91.0",
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "^5.0.4",
-        "yaml": "^2.4.3",
-        "zustand": "^5.0.0-rc.2"
+        "yaml": "^2.4.3"
     }
-}
+}