@xframes/node 0.0.22 → 0.1.1

package/CMakeLists.txt

@@ -2,6 +2,8 @@ cmake_minimum_required(VERSION 3.15)
 cmake_policy(SET CMP0091 NEW)
 cmake_policy(SET CMP0042 NEW)
 
+set(CMAKE_MSVC_RUNTIME_LIBRARY "MultiThreaded$<$<CONFIG:Debug>:Debug>DLL")
+
 if(NOT CMAKE_GENERATOR)
     set(CMAKE_GENERATOR "Ninja")
 endif()
@@ -15,6 +17,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()
@@ -32,6 +36,56 @@ find_package(glfw3 CONFIG REQUIRED)
 find_package(ada CONFIG REQUIRED)
 find_package(Stb REQUIRED)
 find_package(fmt CONFIG REQUIRED)
+find_package(JPEG REQUIRED)
+find_package(PNG REQUIRED)
+find_package(TIFF REQUIRED)
+find_package(CURL REQUIRED)
+find_package(nlohmann_json REQUIRED)
+find_package(qjs CONFIG REQUIRED)
+find_package(Lua REQUIRED)
+find_package(sol2 CONFIG REQUIRED)
+
+# --- Janet 3-stage bootstrap ---
+set(JANET_ROOT "${DEPS}/janet")
+set(JANET_SRC_DIR "${JANET_ROOT}/src")
+file(GLOB JANET_CORE_SOURCES "${JANET_SRC_DIR}/core/*.c")
+file(GLOB JANET_BOOT_SOURCES "${JANET_SRC_DIR}/boot/*.c")
+set(JANET_NO_FLAGS JANET_NO_EV JANET_NO_FFI JANET_NO_NET JANET_NO_DYNAMIC_MODULES)
+
+# Stage 1: bootstrap interpreter
+add_executable(janet_boot ${JANET_CORE_SOURCES} ${JANET_BOOT_SOURCES})
+target_include_directories(janet_boot PRIVATE "${JANET_SRC_DIR}/include" "${JANET_SRC_DIR}/conf")
+target_compile_definitions(janet_boot PRIVATE JANET_BOOTSTRAP ${JANET_NO_FLAGS})
+if(WIN32)
+    target_compile_definitions(janet_boot PRIVATE _CRT_SECURE_NO_WARNINGS)
+    target_link_libraries(janet_boot PRIVATE ws2_32)
+endif()
+
+# Stage 2: generate core image
+set(JANET_IMAGE_FILE "${CMAKE_BINARY_DIR}/janet_core_image.c")
+add_custom_command(
+    OUTPUT "${JANET_IMAGE_FILE}"
+    COMMAND ${CMAKE_COMMAND} -E env "$<TARGET_FILE:janet_boot>" "${JANET_ROOT}" image-only > "${JANET_IMAGE_FILE}"
+    DEPENDS janet_boot "${JANET_ROOT}/src/boot/boot.janet"
+    COMMENT "Generating Janet core image"
+)
+
+# Stage 3: static library (JANET_SINGLE_THREADED: janet_init sets thread-local VM;
+# XFrames calls InitJanet on JS thread but Render on render thread)
+add_library(janet_core STATIC ${JANET_CORE_SOURCES} "${JANET_IMAGE_FILE}")
+target_include_directories(janet_core PUBLIC "${JANET_SRC_DIR}/include" "${JANET_SRC_DIR}/conf")
+target_compile_definitions(janet_core PRIVATE ${JANET_NO_FLAGS} JANET_SINGLE_THREADED)
+if(WIN32)
+    target_compile_definitions(janet_core PRIVATE _CRT_SECURE_NO_WARNINGS)
+    target_link_libraries(janet_core PRIVATE ws2_32)
+endif()
+
+# Auto-copy core image for WASM builds
+add_custom_command(TARGET janet_core POST_BUILD
+    COMMAND ${CMAKE_COMMAND} -E make_directory "${CMAKE_CURRENT_SOURCE_DIR}/../../cpp/app/generated"
+    COMMAND ${CMAKE_COMMAND} -E copy_if_different "${JANET_IMAGE_FILE}" "${CMAKE_CURRENT_SOURCE_DIR}/../../cpp/app/generated/janet_core_image.c"
+    COMMENT "Copying Janet core image to app/generated/ for WASM"
+)
 
 include_directories(${CMAKE_JS_INC})
 
@@ -39,6 +93,19 @@ file(GLOB YOGA_SRC CONFIGURE_DEPENDS
         ${DEPS}/yoga/yoga/*.cpp
         ${DEPS}/yoga/yoga/**/*.cpp)
 
+file(GLOB LEPTONICA_SRC "${DEPS}/osm-static-map-generator/cpp/deps/leptonica/src/*.c")
+
+# Generate endianness.h for leptonica (x64 is little-endian)
+file(WRITE "${DEPS}/osm-static-map-generator/cpp/deps/leptonica/src/endianness.h" "#define L_LITTLE_ENDIAN\n")
+add_compile_definitions(HAVE_LIBJPEG HAVE_LIBTIFF HAVE_LIBPNG NOMINMAX _USE_MATH_DEFINES)
+
+set(OSM_STATIC_MAP_GENERATOR_SRC
+        ${DEPS}/osm-static-map-generator/cpp/shared.cpp
+        ${DEPS}/osm-static-map-generator/cpp/tiledownloader.cpp
+        ${DEPS}/osm-static-map-generator/cpp/mapgenerator.cpp
+        ${DEPS}/osm-static-map-generator/cpp/tilecache.cpp
+)
+
 add_library(${PROJECT_NAME} SHARED
         ${DEPS}/css-color-parser-cpp/csscolorparser.hpp
         ${DEPS}/css-color-parser-cpp/csscolorparser.cpp
@@ -47,6 +114,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
 
@@ -59,6 +127,7 @@ add_library(${PROJECT_NAME} SHARED
         ${APP}/src/color_helpers.cpp
         ${APP}/src/yoga_helpers.cpp
         ${APP}/src/imgui_helpers.cpp
+        ${APP}/src/disk_tile_cache.cpp
 
         ${APP}/src/element/layout_node.cpp
         ${APP}/src/element/element.cpp
@@ -72,6 +141,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
@@ -80,11 +150,19 @@ add_library(${PROJECT_NAME} SHARED
         ${APP}/src/widget/image.cpp
         ${APP}/src/widget/input_text.cpp
         ${APP}/src/widget/item_tooltip.cpp
+        ${APP}/src/widget/map_view.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
@@ -92,9 +170,15 @@ add_library(${PROJECT_NAME} SHARED
         ${APP}/src/widget/text_wrap.cpp
         ${APP}/src/widget/tree_node.cpp
         ${APP}/src/widget/window.cpp
+        ${APP}/src/widget/js_canvas.cpp
+        ${APP}/src/widget/lua_canvas.cpp
+        ${APP}/src/widget/janet_canvas.cpp
 
         ./src/xframes-node.cpp
 
+        ${OSM_STATIC_MAP_GENERATOR_SRC}
+        ${LEPTONICA_SRC}
+
         ${SOURCE_FILES}
         ${CMAKE_JS_SRC}
 )
@@ -104,9 +188,18 @@ target_link_libraries(${PROJECT_NAME}
         ${CMAKE_JS_LIB}
         ada::ada
         fmt::fmt
+        nlohmann_json::nlohmann_json
+        JPEG::JPEG
+        PNG::PNG
+        TIFF::TIFF
+        CURL::libcurl
 
         glfw
         OpenGL::GL
+        qjs
+        ${LUA_LIBRARIES}
+        sol2::sol2
+        janet_core
 )
 
 # Include Node-API wrappers
@@ -131,10 +224,16 @@ 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
         ${DEPS}/glfw/include
+        ${DEPS}/osm-static-map-generator/cpp
+        ${DEPS}/osm-static-map-generator/cpp/deps/leptonica/src
+        ${LUA_INCLUDE_DIR}
+        "${DEPS}/janet/src/include"
+        "${DEPS}/janet/src/conf"
 )
 
 # define NAPI_VERSION

package/README.md

@@ -1,39 +1,107 @@
-# 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.
+**Canvas**: JsCanvas (QuickJS), LuaCanvas (Lua/Sol2), JanetCanvas (Janet) — scripted 2D rendering with Canvas 2D API shim
 
-`export VCPKG_FORCE_SYSTEM_BINARIES=1`
+**Other**: Image, ProgressBar, ColorIndicator, ClippedMultiLineTextRenderer, ItemTooltip
 
-It suppresses the downloading of CMake and Ninja and forces the use of the system binaries.
+## Key Features
+
+- **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
+- **Scripted canvas rendering** — embed JavaScript, Lua, or Janet scripts for custom 2D drawing with an HTML5 Canvas 2D-style API
+- **Interactive maps** — MapView widget with OpenStreetMap tiles, markers, polylines, and overlays
+- **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.22",
+    "version": "0.1.1",
     "description": "DOM-less, GPU-accelerated GUI development for Node.js",
     "main": "dist/index.js",
     "files": [
@@ -20,6 +20,8 @@
     },
     "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",
@@ -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"
     }
-}
+}

package/vcpkg.json

@@ -6,6 +6,14 @@
     "ada-url",
     "fmt",
     "opengl-registry",
-    "glfw3"
+    "glfw3",
+    "nlohmann-json",
+    "libjpeg-turbo",
+    "libpng",
+    "tiff",
+    "curl",
+    "quickjs-ng",
+    "lua",
+    "sol2"
   ]
 }