onejs-react 0.1.11 → 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.11",
+  "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

@@ -27,8 +27,8 @@ declare function useExtensions(typeRef: any): void
 // Register ImageConversion extension methods so tex.LoadImage(bytes) works
 useExtensions(CS.UnityEngine.ImageConversion)
 
-// Module-level texture cache shared across all Image instances
-const _textureCache = new Map<string, any>()
+// Module-level image cache shared across all Image instances
+const _imageCache = new Map<string, any>()
 
 function _resolveAssetPath(src: string): string {
     const Path = CS.System.IO.Path
@@ -41,8 +41,8 @@ function _resolveAssetPath(src: string): string {
     return Path.Combine(CS.UnityEngine.Application.streamingAssetsPath, "onejs", "assets", src)
 }
 
-function _loadTexture(src: string): any | null {
-    const cached = _textureCache.get(src)
+function _loadImageAsset(src: string): any | null {
+    const cached = _imageCache.get(src)
     if (cached) return cached
 
     const fullPath = _resolveAssetPath(src)
@@ -51,20 +51,28 @@ function _loadTexture(src: string): any | null {
         return null
     }
 
-    const bytes = CS.System.IO.File.ReadAllBytes(fullPath)
-    const tex = new CS.UnityEngine.Texture2D(2, 2)
-    tex.LoadImage(bytes)
-    tex.filterMode = CS.UnityEngine.FilterMode.Bilinear
-    _textureCache.set(src, tex)
-    return tex
+    let result: any
+    if (src.toLowerCase().endsWith(".svg")) {
+        const svgText = CS.System.IO.File.ReadAllText(fullPath)
+        result = CS.OneJS.SVGUtils.LoadFromString(svgText)
+    } else {
+        const bytes = CS.System.IO.File.ReadAllBytes(fullPath)
+        const tex = new CS.UnityEngine.Texture2D(2, 2)
+        tex.LoadImage(bytes)
+        tex.filterMode = CS.UnityEngine.FilterMode.Bilinear
+        result = tex
+    }
+
+    _imageCache.set(src, result)
+    return result
 }
 
 /**
- * Clear the Image component's texture cache.
+ * Clear the Image component's image cache.
  * Call this if you need to force-reload images (e.g., after replacing files on disk).
  */
 export function clearImageCache(): void {
-    _textureCache.clear()
+    _imageCache.clear()
 }
 
 // Props with ref support for intrinsic elements
@@ -152,11 +160,11 @@ export const ScrollView = forwardRef<ScrollViewElement, ScrollViewProps>((props,
 ScrollView.displayName = 'ScrollView';
 
 export const Image = forwardRef<ImageElement, ImageProps>(({ src, image, ...rest }, ref) => {
-  const resolvedImage = useMemo(() => {
-    if (src) return _loadTexture(src)
+  const resolved = useMemo(() => {
+    if (src) return _loadImageAsset(src)
     return image
   }, [src, image])
-  return <ojs-image ref={ref} image={resolvedImage} {...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 {
@@ -642,7 +649,16 @@ function applyToggleProps(element: CSObject, props: Record<string, unknown>) {
 // Apply Image-specific properties
 function applyImageProps(element: CSObject, props: Record<string, unknown>) {
     const el = element as any;
-    if (props.image !== undefined) el.image = props.image;
+    if (props.image !== undefined) {
+        const img = props.image;
+        if (img != null && (img as any).GetType?.().Name === "VectorImage") {
+            el.image = null;
+            el.vectorImage = img;
+        } else {
+            el.vectorImage = null;
+            el.image = img;
+        }
+    }
     if (props.sprite !== undefined) el.sprite = props.sprite;
     if (props.vectorImage !== undefined) el.vectorImage = props.vectorImage;
     if (props.scaleMode !== undefined) {

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 }} />
    */
@@ -528,14 +537,12 @@ export interface ScrollViewProps extends BaseProps {
 }
 
 export interface ImageProps extends BaseProps {
-  /** Path to image asset relative to the assets/ folder (convenience prop) */
+  /** Path to image asset relative to the assets/ folder. Supports PNG, JPG, and SVG files. */
   src?: string;
-  /** Pre-loaded Texture2D object (use when you loaded the texture yourself) */
+  /** Pre-loaded Texture2D or VectorImage object. Type is auto-detected at runtime. */
   image?: object;
   /** Sprite to display (alternative to image) */
   sprite?: object;
-  /** Vector image to display */
-  vectorImage?: object;
   /** How the image scales to fit the element */
   scaleMode?: 'StretchToFill' | 'ScaleAndCrop' | 'ScaleToFit';
   /** Tint color applied to the image */