onejs-react 0.1.12 → 0.1.15

package/README.md

@@ -258,6 +258,27 @@ type MeshGenerationContext = CS.UnityEngine.UIElements.MeshGenerationContext
 type GenerateVisualContentCallback = (context: MeshGenerationContext) => void
 ```
 
+## C# Interop Utilities
+
+### `toArray<T>(collection): T[]`
+
+Converts C# collections (`List<T>`, arrays) to JavaScript arrays. C# collections exposed through the OneJS proxy have `.Count`/`.Length` and indexers but lack `.map()`, `.filter()`, and other array methods.
+
+```tsx
+import { toArray } from "onejs-react"
+
+// Convert a C# List for use in JSX
+{toArray<Item>(inventory.Items).map(item => <ItemView key={item.Id} item={item} />)}
+
+// Convert a C# array
+const resolutions = toArray<Resolution>(Screen.resolutions)
+
+// Safe with null — returns []
+const npcs = toArray(currentPlace?.NPCs)
+```
+
+Supports objects with `.Count` (List, IList) or `.Length` (C# arrays). Returns `[]` for null/undefined.
+
 ## Dependencies
 
 - `react-reconciler@0.31.x` (React 19 compatible)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "onejs-react",
-  "version": "0.1.12",
+  "version": "0.1.15",
   "description": "React 19 renderer for OneJS (Unity UI Toolkit)",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/__tests__/mocks.ts

@@ -327,6 +327,7 @@ export function createMockCS() {
             GPU: {
                 GPUBridge: {
                     SetElementBackgroundImage: () => {},
+                    SetElementBackgroundFromObject: () => {},
                     ClearElementBackgroundImage: () => {},
                 },
             },

package/src/__tests__/style-parser.test.ts

@@ -271,9 +271,9 @@ describe("style-parser", () => {
             expect(result.value).toBe(8)
         })
 
-        it("parses borderWidth", () => {
-            const result = parseStyleValue("borderWidth", 1) as MockLength
-            expect(result.value).toBe(1)
+        it("parses borderWidth as plain number (StyleFloat)", () => {
+            const result = parseStyleValue("borderWidth", 1)
+            expect(result).toBe(1)
         })
 
         it("parses fontSize", () => {

package/src/components.tsx

@@ -67,10 +67,6 @@ function _loadImageAsset(src: string): any | null {
     return result
 }
 
-function _isVectorImage(obj: any): boolean {
-    return obj != null && obj.GetType?.().Name === "VectorImage"
-}
-
 /**
  * Clear the Image component's image cache.
  * Call this if you need to force-reload images (e.g., after replacing files on disk).
@@ -168,10 +164,6 @@ export const Image = forwardRef<ImageElement, ImageProps>(({ src, image, ...rest
     if (src) return _loadImageAsset(src)
     return image
   }, [src, image])
-  const isVector = useMemo(() => _isVectorImage(resolved), [resolved])
-  if (isVector) {
-    return <ojs-image ref={ref} vectorImage={resolved} {...rest} />;
-  }
   return <ojs-image ref={ref} image={resolved} {...rest} />;
 });
 Image.displayName = 'Image';

package/src/host-config.ts

@@ -65,6 +65,7 @@ declare const CS: {
         GPU: {
             GPUBridge: {
                 SetElementBackgroundImage: (element: CSObject, rtHandle: number) => void;
+                SetElementBackgroundFromObject: (element: CSObject, obj: CSObject) => void;
                 ClearElementBackgroundImage: (element: CSObject) => void;
             };
         };
@@ -350,12 +351,18 @@ function applyStyle(element: CSObject, style: ViewStyle | undefined): Set<string
                 s[prop] = parsed;
                 appliedKeys.add(prop);
             }
-        } else if (key === "backgroundImage" && isRenderTextureHandle(value)) {
-            // Special handling for RenderTexture background images
-            // Supports both direct RenderTexture objects and marker objects
-            const handle = getRenderTextureHandle(value);
-            if (handle >= 0) {
-                CS.OneJS.GPU.GPUBridge.SetElementBackgroundImage(element, handle);
+        } else if (key === "backgroundImage") {
+            if (value == null) {
+                CS.OneJS.GPU.GPUBridge.ClearElementBackgroundImage(element);
+            } else if (isRenderTextureHandle(value)) {
+                // GPU compute RenderTexture handles (via rt.getUnityObject())
+                const handle = getRenderTextureHandle(value);
+                if (handle >= 0) {
+                    CS.OneJS.GPU.GPUBridge.SetElementBackgroundImage(element, handle);
+                }
+            } else if (typeof value === "object" && "__csHandle" in value) {
+                // C# objects: Texture2D, Sprite, VectorImage, RenderTexture
+                CS.OneJS.GPU.GPUBridge.SetElementBackgroundFromObject(element, value);
             }
             appliedKeys.add(key);
         } else {

package/src/style-parser.ts

@@ -89,10 +89,9 @@ const LENGTH_PROPERTIES = new Set([
     "margin", "marginTop", "marginRight", "marginBottom", "marginLeft",
     "padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft",
     "flexBasis",
-    "borderWidth", "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth",
     "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius",
     "fontSize",
-    "letterSpacing", "wordSpacing", "unityTextOutlineWidth", "unityParagraphSpacing",
+    "letterSpacing", "wordSpacing", "unityParagraphSpacing",
 ])
 
 // Style properties that expect color values
@@ -106,6 +105,8 @@ const COLOR_PROPERTIES = new Set([
 const NUMBER_PROPERTIES = new Set([
     "flexGrow", "flexShrink", "opacity",
     "unitySliceTop", "unitySliceRight", "unitySliceBottom", "unitySliceLeft", "unitySliceScale",
+    "borderWidth", "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth",
+    "unityTextOutlineWidth",
 ])
 
 // Enum property mappings: React style value -> Unity enum value

package/src/types.ts

@@ -82,10 +82,19 @@ export interface ViewStyle {
   /** Background color. Examples: "#3498db", "rgba(0,0,0,0.5)", "red" */
   backgroundColor?: StyleColor;
   /**
-   * Background image - accepts a Texture2D, RenderTexture, or RenderTexture object from GPU compute.
+   * Background image - accepts Texture2D, Sprite, VectorImage, RenderTexture,
+   * or a GPU compute RenderTexture handle.
    *
-   * For GPU compute RenderTextures, you can pass the RenderTexture object directly:
    * @example
+   * // Texture2D
+   * const tex = loadImage("images/card-bg.png")
+   * <View style={{ backgroundImage: tex }} />
+   *
+   * // Sprite from C#
+   * const sprite = getSpriteFromCSharp()
+   * <View style={{ backgroundImage: sprite }} />
+   *
+   * // GPU compute RenderTexture
    * const rt = compute.renderTexture({ width: 100, height: 100 })
    * <View style={{ backgroundImage: rt }} />
    */
@@ -99,12 +108,12 @@ export interface ViewStyle {
   borderBottomColor?: StyleColor;
   borderLeftColor?: StyleColor;
 
-  /** Border width for all sides. Examples: 1, "1px" */
-  borderWidth?: StyleLength;
-  borderTopWidth?: StyleLength;
-  borderRightWidth?: StyleLength;
-  borderBottomWidth?: StyleLength;
-  borderLeftWidth?: StyleLength;
+  /** Border width for all sides (StyleFloat). Examples: 1, 2 */
+  borderWidth?: number;
+  borderTopWidth?: number;
+  borderRightWidth?: number;
+  borderBottomWidth?: number;
+  borderLeftWidth?: number;
 
   /** Border radius for all corners. Examples: 8, "8px", "50%" */
   borderRadius?: StyleLength;
@@ -143,8 +152,8 @@ export interface ViewStyle {
   unityParagraphSpacing?: StyleLength;
   /** Text outline color */
   unityTextOutlineColor?: StyleColor;
-  /** Text outline width */
-  unityTextOutlineWidth?: StyleLength;
+  /** Text outline width (StyleFloat) */
+  unityTextOutlineWidth?: number;
   /** How overflowing text is handled */
   textOverflow?: 'clip' | 'ellipsis';
   /** Position of text overflow indicator */