onejs-react 0.1.29 → 0.1.30

package/package.json

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

package/src/__tests__/components.test.tsx

@@ -22,7 +22,7 @@ import {
     Image,
     clearImageCache,
 } from '../components';
-import { MockVisualElement, MockTexture2D, MockLength, MockColor, createMockContainer, flushMicrotasks, getEventAPI, mockFileSystem } from './mocks';
+import { MockVisualElement, MockTexture2D, MockVectorImage, MockLength, MockColor, createMockContainer, flushMicrotasks, getEventAPI, mockFileSystem, mockUrlAssets } from './mocks';
 
 // Helper to extract value from style (handles both raw values and MockLength/MockColor)
 function getStyleValue(style: unknown): unknown {
@@ -443,6 +443,98 @@ describe('components', () => {
 
             expect(readSpy).toHaveBeenCalledTimes(2);
         });
+
+        it('loads SVG synchronously via SVGUtils in the editor', async () => {
+            mockFileSystem.set("/project/App/assets/icons/star.svg", "<svg></svg>");
+            (globalThis as any).__workingDir = "/project/App";
+
+            const container = createMockContainer();
+            render(<Image src="icons/star.svg" />, container as any);
+            await flushMicrotasks();
+
+            const el = container.children[0] as any;
+            expect(el.image).toBeInstanceOf(MockVectorImage);
+            expect((el.image as MockVectorImage).svgText).toBe("<svg></svg>");
+        });
+    });
+
+    describe('Image on URL StreamingAssets platforms (Android APK, WebGL)', () => {
+        const JAR_BASE = "jar:file:///data/app/base.apk!/assets";
+
+        // Simulate an Android player: not the editor, and streamingAssetsPath
+        // is a jar: URL inside the APK that System.IO.File cannot read
+        beforeEach(() => {
+            const app = (globalThis as any).CS.UnityEngine.Application;
+            app.isEditor = false;
+            app.streamingAssetsPath = JAR_BASE;
+        });
+
+        it('loads raster images asynchronously via Network.LoadTextureFromUrl', async () => {
+            mockUrlAssets.set(`${JAR_BASE}/onejs/assets/images/logo.png`, [0x89, 0x50, 0x4e, 0x47]);
+
+            const container = createMockContainer();
+            render(<Image src="images/logo.png" />, container as any);
+            await flushMicrotasks();
+
+            const el = container.children[0] as any;
+            expect(el.image).toBeInstanceOf(MockTexture2D);
+            expect((el.image as MockTexture2D)._loaded).toBe(true);
+            expect((el.image as MockTexture2D).filterMode).toBe(1); // Bilinear
+        });
+
+        it('loads SVG asynchronously via fetch + SVGUtils', async () => {
+            mockUrlAssets.set(`${JAR_BASE}/onejs/assets/icons/spinner.svg`, "<svg>spin</svg>");
+
+            const container = createMockContainer();
+            render(<Image src="icons/spinner.svg" />, container as any);
+            await flushMicrotasks();
+
+            const el = container.children[0] as any;
+            expect(el.image).toBeInstanceOf(MockVectorImage);
+            expect((el.image as MockVectorImage).svgText).toBe("<svg>spin</svg>");
+        });
+
+        it('keeps a null image and logs an error when the asset is missing', async () => {
+            const container = createMockContainer();
+            render(<Image src="images/missing.png" />, container as any);
+            await flushMicrotasks();
+
+            const el = container.children[0] as any;
+            expect(el.image).toBeNull();
+            expect(console.error).toHaveBeenCalledWith(
+                expect.stringContaining("Image src not found: images/missing.png")
+            );
+        });
+
+        it('dedupes concurrent loads and serves later mounts from the cache', async () => {
+            mockUrlAssets.set(`${JAR_BASE}/onejs/assets/a.png`, [0x89]);
+            const cs = (globalThis as any).CS;
+            const loadSpy = vi.spyOn(cs.OneJS.Network, 'LoadTextureFromUrl');
+
+            // Two simultaneous mounts of the same src share one request
+            const container1 = createMockContainer();
+            render(
+                <View>
+                    <Image src="a.png" />
+                    <Image src="a.png" />
+                </View>,
+                container1 as any
+            );
+            await flushMicrotasks();
+
+            expect(loadSpy).toHaveBeenCalledTimes(1);
+            const view = container1.children[0];
+            expect((view.children[0] as any).image).toBeInstanceOf(MockTexture2D);
+            expect((view.children[1] as any).image).toBeInstanceOf(MockTexture2D);
+
+            // A later mount resolves synchronously from the cache
+            const container2 = createMockContainer();
+            render(<Image src="a.png" />, container2 as any);
+            await flushMicrotasks();
+
+            expect(loadSpy).toHaveBeenCalledTimes(1);
+            expect((container2.children[0] as any).image).toBeInstanceOf(MockTexture2D);
+        });
     });
 
     describe('event handler mapping', () => {

package/src/__tests__/mocks.ts

@@ -263,11 +263,26 @@ export class MockTexture2D {
     }
 }
 
+/**
+ * Mock VectorImage as produced by SVGUtils.LoadFromString
+ */
+export class MockVectorImage {
+    constructor(public svgText: string) {}
+}
+
 /**
  * Mock file system for image loading tests.
- * Tests can add entries to control which files "exist" and what bytes they contain.
+ * Tests can add entries to control which files "exist" and what they contain:
+ * number[] entries are raster bytes, string entries are text (e.g. SVG source).
+ */
+export const mockFileSystem = new Map<string, number[] | string>()
+
+/**
+ * Mock URL-addressable assets for StreamingAssets-as-URL platforms (Android
+ * APK jar: URLs, WebGL http URLs). Keyed by full URL; number[] entries are
+ * served by Network.LoadTextureFromUrl, string entries by the fetch stub.
  */
-export const mockFileSystem = new Map<string, number[]>()
+export const mockUrlAssets = new Map<string, number[] | string>()
 
 /**
  * Create the mock CS global object that mirrors QuickJSBootstrap.js proxy
@@ -286,7 +301,14 @@ export function createMockCS() {
                 },
                 File: {
                     Exists: (path: string) => mockFileSystem.has(path),
-                    ReadAllBytes: (path: string) => mockFileSystem.get(path) || [],
+                    ReadAllBytes: (path: string) => {
+                        const entry = mockFileSystem.get(path);
+                        return Array.isArray(entry) ? entry : [];
+                    },
+                    ReadAllText: (path: string) => {
+                        const entry = mockFileSystem.get(path);
+                        return typeof entry === "string" ? entry : "";
+                    },
                 },
             },
         },
@@ -345,6 +367,20 @@ export function createMockCS() {
             },
         },
         OneJS: {
+            SVGUtils: {
+                LoadFromString: (svgText: string) => new MockVectorImage(svgText),
+            },
+            // Mirrors CS.OneJS.Network (Network.cs): LoadTextureFromUrl resolves
+            // to a Texture2D on success, null on failure (no throw).
+            Network: {
+                LoadTextureFromUrl: async (url: string) => {
+                    const entry = mockUrlAssets.get(url);
+                    if (!Array.isArray(entry)) return null;
+                    const tex = new MockTexture2D(2, 2);
+                    tex.LoadImage(entry);
+                    return tex;
+                },
+            },
             GPU: {
                 GPUBridge: {
                     SetElementBackgroundImage: () => {},
@@ -409,6 +445,7 @@ export function findElementByHandle(handle: number): MockVisualElement | undefin
 export function resetAllMocks(): void {
     createdElements = [];
     mockFileSystem.clear();
+    mockUrlAssets.clear();
 }
 
 /**

package/src/__tests__/setup.ts

@@ -9,7 +9,7 @@
  */
 
 import { vi, beforeEach, afterEach } from "vitest";
-import { createMockCS, resetAllMocks } from "./mocks";
+import { createMockCS, resetAllMocks, mockUrlAssets } from "./mocks";
 import { clearImageCache } from "../components";
 
 // Extend globalThis type for our mocks
@@ -60,9 +60,20 @@ beforeEach(() => {
     // Use real setTimeout/clearTimeout - React scheduler depends on them
     (global as any).setTimeout = originalSetTimeout;
     (global as any).clearTimeout = originalClearTimeout;
+
+    // Mock fetch serving text entries from mockUrlAssets (mirrors the
+    // UnityWebRequest-backed fetch from QuickJSBootstrap.js)
+    vi.stubGlobal("fetch", vi.fn(async (url: string) => {
+        const entry = mockUrlAssets.get(url);
+        if (typeof entry !== "string") {
+            return { ok: false, status: 404, statusText: "Not Found", text: async () => "" };
+        }
+        return { ok: true, status: 200, statusText: "OK", text: async () => entry };
+    }));
 });
 
 // Clean up after each test
 afterEach(() => {
     vi.clearAllMocks();
+    vi.unstubAllGlobals();
 });

package/src/components.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, createElement, useMemo, type ReactElement, type Ref } from 'react';
+import { forwardRef, createElement, useEffect, useMemo, useState, type ReactElement, type Ref } from 'react';
 import type {
   BaseProps,
   ViewProps,
@@ -33,6 +33,14 @@ useExtensions(CS.UnityEngine.ImageConversion)
 
 // Module-level image cache shared across all Image instances
 const _imageCache = new Map<string, any>()
+// In-flight async loads keyed by src, so simultaneous mounts share one request
+const _imagePending = new Map<string, Promise<any>>()
+
+// On Android, streamingAssetsPath is a jar:file://...apk!/assets URL; on WebGL
+// it's http(s). System.IO.File can't read those - they need UnityWebRequest.
+function _isUrlPath(path: string): boolean {
+    return path.includes("://")
+}
 
 function _resolveAssetPath(src: string): string {
     const Path = CS.System.IO.Path
@@ -46,7 +54,11 @@ function _resolveAssetPath(src: string): string {
             : Path.Combine(Path.GetDirectoryName(CS.UnityEngine.Application.dataPath), "App")
         return Path.Combine(workingDir, "assets", src)
     }
-    return Path.Combine(CS.UnityEngine.Application.streamingAssetsPath, "onejs", "assets", src)
+    const streamingAssets = CS.UnityEngine.Application.streamingAssetsPath
+    if (_isUrlPath(streamingAssets)) {
+        return `${streamingAssets}/onejs/assets/${src}`
+    }
+    return Path.Combine(streamingAssets, "onejs", "assets", src)
 }
 
 function _loadImageAsset(src: string): any | null {
@@ -54,6 +66,9 @@ function _loadImageAsset(src: string): any | null {
     if (cached) return cached
 
     const fullPath = _resolveAssetPath(src)
+    // URL paths (Android APK, WebGL) can't be read synchronously; the Image
+    // component falls back to _loadImageAssetAsync for these.
+    if (_isUrlPath(fullPath)) return null
     if (!CS.System.IO.File.Exists(fullPath)) {
         console.error(`Image src not found: ${src} (resolved to ${fullPath})`)
         return null
@@ -75,12 +90,52 @@ function _loadImageAsset(src: string): any | null {
     return result
 }
 
+function _loadImageAssetAsync(src: string, url: string): Promise<any> {
+    const existing = _imagePending.get(src)
+    if (existing) return existing
+
+    const promise = (async (): Promise<any> => {
+        try {
+            let result: any
+            if (src.toLowerCase().endsWith(".svg")) {
+                const res = await fetch(url)
+                if (!res.ok) {
+                    console.error(`Image src not found: ${src} (resolved to ${url})`)
+                    return null
+                }
+                const svgText = await res.text()
+                result = CS.OneJS.SVGUtils.LoadFromString(svgText)
+            } else {
+                const tex = await CS.OneJS.Network.LoadTextureFromUrl(url)
+                if (!tex) {
+                    console.error(`Image src not found: ${src} (resolved to ${url})`)
+                    return null
+                }
+                tex.filterMode = CS.UnityEngine.FilterMode.Bilinear
+                result = tex
+            }
+            _imageCache.set(src, result)
+            return result
+        } catch (e) {
+            console.error(`Image src failed to load: ${src} (resolved to ${url}): ${e}`)
+            return null
+        }
+    })()
+
+    _imagePending.set(src, promise)
+    promise.then(() => {
+        if (_imagePending.get(src) === promise) _imagePending.delete(src)
+    })
+    return promise
+}
+
 /**
  * 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 {
     _imageCache.clear()
+    _imagePending.clear()
 }
 
 // Props with ref support for intrinsic elements
@@ -170,11 +225,27 @@ export const ScrollView = forwardRef<ScrollViewElement, ScrollViewProps>((props,
 ScrollView.displayName = 'ScrollView';
 
 export const Image = forwardRef<ImageElement, ImageProps>(({ src, image, ...rest }, ref) => {
+  const [loaded, setLoaded] = useState<{ src: string; image: any } | null>(null)
   const resolved = useMemo(() => {
     if (src) return _loadImageAsset(src)
     return image
   }, [src, image])
-  return <ojs-image ref={ref} image={resolved} {...rest} />;
+
+  // Async fallback for platforms where StreamingAssets is a URL (Android APK,
+  // WebGL): load via UnityWebRequest, then re-render with the result.
+  useEffect(() => {
+    if (!src || resolved) return
+    const fullPath = _resolveAssetPath(src)
+    if (!_isUrlPath(fullPath)) return
+    let cancelled = false
+    _loadImageAssetAsync(src, fullPath).then((result) => {
+      if (!cancelled && result) setLoaded({ src, image: result })
+    })
+    return () => { cancelled = true }
+  }, [src, resolved])
+
+  const asyncImage = loaded && loaded.src === src ? loaded.image : null
+  return <ojs-image ref={ref} image={resolved ?? asyncImage} {...rest} />;
 });
 Image.displayName = 'Image';
 

package/src/host-config.ts

@@ -234,7 +234,6 @@ const EVENT_PROPS: Record<string, string> = {
     onPointerCancel: 'pointercancel',
     onPointerCapture: 'pointercapture',
     onPointerCaptureOut: 'pointercaptureout',
-    onPointerStationary: 'pointerstationary',
 
     // Mouse events
     onMouseDown: 'mousedown',

package/src/types.ts

@@ -436,7 +436,6 @@ export interface BaseProps {
   onPointerCancel?: PointerEventHandler;
   onPointerCapture?: PointerEventHandler;
   onPointerCaptureOut?: PointerEventHandler;
-  onPointerStationary?: PointerEventHandler;
 
   // Mouse events
   onMouseDown?: MouseEventHandler;