onejs-react 0.1.12 → 0.1.14

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.14",
   "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/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/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 }} />
    */