onejs-react 0.1.10 → 0.1.12

package/package.json

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

package/src/__tests__/components.test.tsx

@@ -20,8 +20,9 @@ import {
     Slider,
     ScrollView,
     Image,
+    clearImageCache,
 } from '../components';
-import { MockVisualElement, MockLength, MockColor, createMockContainer, flushMicrotasks, getEventAPI } from './mocks';
+import { MockVisualElement, MockTexture2D, MockLength, MockColor, createMockContainer, flushMicrotasks, getEventAPI, mockFileSystem } from './mocks';
 
 // Helper to extract value from style (handles both raw values and MockLength/MockColor)
 function getStyleValue(style: unknown): unknown {
@@ -365,6 +366,83 @@ describe('components', () => {
             expect(getStyleValue(el.style.width)).toBe(100);
             expect(getStyleValue(el.style.height)).toBe(100);
         });
+
+        it('loads texture when src is provided', async () => {
+            mockFileSystem.set("/project/App/assets/images/logo.png", [0x89, 0x50, 0x4e, 0x47]);
+            (globalThis as any).__workingDir = "/project/App";
+
+            const container = createMockContainer();
+            render(<Image src="images/logo.png" style={{ width: 64, height: 64 }} />, 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);
+        });
+
+        it('returns null for missing file with console.error', async () => {
+            (globalThis as any).__workingDir = "/project/App";
+
+            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('caches textures across renders', async () => {
+            mockFileSystem.set("/project/App/assets/photos/hero.png", [0x89, 0x50]);
+            (globalThis as any).__workingDir = "/project/App";
+            const cs = (globalThis as any).CS;
+            const readSpy = vi.spyOn(cs.System.IO.File, 'ReadAllBytes');
+
+            const container = createMockContainer();
+            render(<Image src="photos/hero.png" />, container as any);
+            await flushMicrotasks();
+
+            // Re-render with same src
+            render(<Image src="photos/hero.png" />, container as any);
+            await flushMicrotasks();
+
+            expect(readSpy).toHaveBeenCalledTimes(1);
+        });
+
+        it('src takes precedence over image prop', async () => {
+            mockFileSystem.set("/project/App/assets/a.png", [0x89]);
+            (globalThis as any).__workingDir = "/project/App";
+            const manualTex = { manual: true };
+
+            const container = createMockContainer();
+            render(<Image src="a.png" image={manualTex} />, container as any);
+            await flushMicrotasks();
+
+            const el = container.children[0] as any;
+            expect(el.image).toBeInstanceOf(MockTexture2D);
+        });
+
+        it('clearImageCache resets the cache', async () => {
+            mockFileSystem.set("/project/App/assets/b.png", [0x89]);
+            (globalThis as any).__workingDir = "/project/App";
+            const cs = (globalThis as any).CS;
+            const readSpy = vi.spyOn(cs.System.IO.File, 'ReadAllBytes');
+
+            const container1 = createMockContainer();
+            render(<Image src="b.png" />, container1 as any);
+            await flushMicrotasks();
+
+            clearImageCache();
+
+            // Render in a new container to force a fresh component mount
+            const container2 = createMockContainer();
+            render(<Image src="b.png" />, container2 as any);
+            await flushMicrotasks();
+
+            expect(readSpy).toHaveBeenCalledTimes(2);
+        });
     });
 
     describe('event handler mapping', () => {

package/src/__tests__/mocks.ts

@@ -223,6 +223,32 @@ export class MockImage extends MockVisualElement {
     }
 }
 
+/**
+ * Mock Texture2D for image loading tests
+ */
+export class MockTexture2D {
+    width: number
+    height: number
+    filterMode: number = 0
+    _loaded = false
+
+    constructor(w: number, h: number) {
+        this.width = w
+        this.height = h
+    }
+
+    LoadImage(_bytes: any): boolean {
+        this._loaded = true
+        return true
+    }
+}
+
+/**
+ * Mock file system for image loading tests.
+ * Tests can add entries to control which files "exist" and what bytes they contain.
+ */
+export const mockFileSystem = new Map<string, number[]>()
+
 /**
  * Create the mock CS global object that mirrors QuickJSBootstrap.js proxy
  *
@@ -231,11 +257,30 @@ export class MockImage extends MockVisualElement {
  */
 export function createMockCS() {
     return {
+        System: {
+            IO: {
+                Path: {
+                    Combine: (...parts: string[]) => parts.join("/"),
+                    GetDirectoryName: (p: string) => p.substring(0, p.lastIndexOf("/")),
+                },
+                File: {
+                    Exists: (path: string) => mockFileSystem.has(path),
+                    ReadAllBytes: (path: string) => mockFileSystem.get(path) || [],
+                },
+            },
+        },
         UnityEngine: {
             // Core types
             Color: MockColor,
             Rect: class { constructor(public x: number, public y: number, public width: number, public height: number) {} },
             ScaleMode: { StretchToFill: 0, ScaleAndCrop: 1, ScaleToFit: 2 },
+            Application: {
+                isEditor: true,
+                dataPath: "/project/Assets",
+                streamingAssetsPath: "/project/Assets/StreamingAssets",
+            },
+            Texture2D: MockTexture2D,
+            FilterMode: { Point: 0, Bilinear: 1, Trilinear: 2 },
             // UI Elements
             UIElements: {
                 VisualElement: MockVisualElement,
@@ -308,6 +353,7 @@ export function findElementByHandle(handle: number): MockVisualElement | undefin
  */
 export function resetAllMocks(): void {
     createdElements = [];
+    mockFileSystem.clear();
 }
 
 /**

package/src/__tests__/pre-setup.ts

@@ -0,0 +1,15 @@
+/**
+ * Pre-setup - Defines globals that must exist before any module imports.
+ *
+ * This runs before setup.ts to ensure useExtensions and CS are available when
+ * components.tsx is first imported (it calls useExtensions at module level).
+ * setup.ts replaces CS with a full mock in beforeEach.
+ */
+
+import { createMockCS } from "./mocks";
+
+// No-op useExtensions for test environment (extension methods are mocked directly on types)
+(globalThis as any).useExtensions = () => {};
+
+// Minimal CS mock so module-level code can reference CS.UnityEngine.ImageConversion
+(globalThis as any).CS = createMockCS();

package/src/__tests__/setup.ts

@@ -10,6 +10,7 @@
 
 import { vi, beforeEach, afterEach } from "vitest";
 import { createMockCS, resetAllMocks } from "./mocks";
+import { clearImageCache } from "../components";
 
 // Extend globalThis type for our mocks
 declare global {
@@ -31,6 +32,7 @@ const originalQueueMicrotask = global.queueMicrotask;
 // Set up globals before each test
 beforeEach(() => {
     resetAllMocks();
+    clearImageCache();
 
     // Create fresh mock CS global
     (globalThis as any).CS = createMockCS();

package/src/components.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, type ReactElement, type Ref } from 'react';
+import { forwardRef, useMemo, type ReactElement, type Ref } from 'react';
 import type {
   ViewProps,
   TextProps,
@@ -21,6 +21,64 @@ import type {
   ImageElement,
 } from './types';
 
+declare const CS: any
+declare function useExtensions(typeRef: any): void
+
+// Register ImageConversion extension methods so tex.LoadImage(bytes) works
+useExtensions(CS.UnityEngine.ImageConversion)
+
+// 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
+    if (CS.UnityEngine.Application.isEditor) {
+        const workingDir = typeof (globalThis as any).__workingDir === "string"
+            ? (globalThis as any).__workingDir
+            : 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)
+}
+
+function _loadImageAsset(src: string): any | null {
+    const cached = _imageCache.get(src)
+    if (cached) return cached
+
+    const fullPath = _resolveAssetPath(src)
+    if (!CS.System.IO.File.Exists(fullPath)) {
+        console.error(`Image src not found: ${src} (resolved to ${fullPath})`)
+        return null
+    }
+
+    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
+}
+
+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).
+ */
+export function clearImageCache(): void {
+    _imageCache.clear()
+}
+
 // Props with ref support for intrinsic elements
 type WithRef<Props, Element> = Props & { ref?: Ref<Element> };
 
@@ -105,8 +163,16 @@ export const ScrollView = forwardRef<ScrollViewElement, ScrollViewProps>((props,
 });
 ScrollView.displayName = 'ScrollView';
 
-export const Image = forwardRef<ImageElement, ImageProps>((props, ref) => {
-  return <ojs-image ref={ref} {...props} />;
+export const Image = forwardRef<ImageElement, ImageProps>(({ src, image, ...rest }, ref) => {
+  const resolved = useMemo(() => {
+    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

@@ -642,7 +642,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/index.ts

@@ -10,6 +10,7 @@ export {
   ScrollView,
   Image,
   ListView,
+  clearImageCache,
 } from './components';
 
 // Renderer

package/src/style-parser.ts

@@ -9,11 +9,21 @@
 declare const CS: {
     UnityEngine: {
         Color: new (r: number, g: number, b: number, a: number) => CSColor;
+        Vector3: new (x: number, y: number, z: number) => any;
         FontStyle: Record<string, number>;
         UIElements: {
             Length: new (value: number, unit?: number) => CSLength;
             LengthUnit: { Pixel: number; Percent: number };
             StyleKeyword: { Auto: number; None: number; Initial: number };
+            Angle: { Degrees: (v: number) => any; Radians: (v: number) => any; Turns: (v: number) => any; Gradians: (v: number) => any };
+            Translate: new (x: any, y: any) => any;
+            Rotate: new (angle: any) => any;
+            Scale: new (v: any) => any;
+            TransformOrigin: new (x: any, y: any) => any;
+            StyleTranslate: new (v: any) => any;
+            StyleRotate: new (v: any) => any;
+            StyleScale: new (v: any) => any;
+            StyleTransformOrigin: new (v: any) => any;
             // Enums for style properties
             FlexDirection: Record<string, number>;
             Wrap: Record<string, number>;
@@ -357,6 +367,130 @@ export function parseColor(value: string): CSColor | null {
     return null
 }
 
+/**
+ * Parse a length value for transform properties (no keyword support)
+ * number → Length(n, Pixel), "50%" → Length(50, Percent), "10px" → Length(10, Pixel)
+ */
+function parseLengthForTransform(value: number | string): CSLength | null {
+    if (typeof value === "number") {
+        return new CS.UnityEngine.UIElements.Length(value, CS.UnityEngine.UIElements.LengthUnit.Pixel)
+    }
+    if (typeof value === "string") {
+        const match = value.trim().match(/^(-?[\d.]+)(px|%)?$/)
+        if (match) {
+            const num = parseFloat(match[1])
+            if (isNaN(num)) return null
+            const unit = match[2] === "%"
+                ? CS.UnityEngine.UIElements.LengthUnit.Percent
+                : CS.UnityEngine.UIElements.LengthUnit.Pixel
+            return new CS.UnityEngine.UIElements.Length(num, unit)
+        }
+    }
+    return null
+}
+
+/**
+ * Parse an angle value
+ * number → Angle.Degrees(n), string → parse unit suffix (deg|rad|turn|grad)
+ */
+function parseAngle(value: number | string): any | null {
+    const Angle = CS.UnityEngine.UIElements.Angle
+    if (typeof value === "number") {
+        return Angle.Degrees(value)
+    }
+    if (typeof value === "string") {
+        const match = value.trim().match(/^(-?[\d.]+)(deg|rad|turn|grad)?$/)
+        if (match) {
+            const num = parseFloat(match[1])
+            if (isNaN(num)) return null
+            const unit = match[2] || "deg"
+            if (unit === "rad") return Angle.Radians(num)
+            if (unit === "turn") return Angle.Turns(num)
+            if (unit === "grad") return Angle.Gradians(num)
+            return Angle.Degrees(num)
+        }
+    }
+    return null
+}
+
+/**
+ * Parse translate style: [x, y] array or C# Translate pass-through
+ */
+function parseTranslateStyle(value: unknown): unknown {
+    if (Array.isArray(value)) {
+        const x = parseLengthForTransform(value[0])
+        const y = parseLengthForTransform(value[1])
+        if (x !== null && y !== null) {
+            return new CS.UnityEngine.UIElements.StyleTranslate(
+                new CS.UnityEngine.UIElements.Translate(x, y)
+            )
+        }
+    }
+    if (typeof value === "object" && value !== null) {
+        try { return new CS.UnityEngine.UIElements.StyleTranslate(value) } catch { return value }
+    }
+    return value
+}
+
+/**
+ * Parse rotate style: number (degrees), string with unit, or C# Rotate pass-through
+ */
+function parseRotateStyle(value: unknown): unknown {
+    if (typeof value === "number" || typeof value === "string") {
+        const angle = parseAngle(value)
+        if (angle !== null) {
+            return new CS.UnityEngine.UIElements.StyleRotate(
+                new CS.UnityEngine.UIElements.Rotate(angle)
+            )
+        }
+    }
+    if (typeof value === "object" && value !== null) {
+        try { return new CS.UnityEngine.UIElements.StyleRotate(value) } catch { return value }
+    }
+    return value
+}
+
+/**
+ * Parse scale style: number (uniform), [x, y] array, or C# Scale pass-through
+ */
+function parseScaleStyle(value: unknown): unknown {
+    if (typeof value === "number") {
+        return new CS.UnityEngine.UIElements.StyleScale(
+            new CS.UnityEngine.UIElements.Scale(new CS.UnityEngine.Vector3(value, value, 1))
+        )
+    }
+    if (Array.isArray(value)) {
+        const x = typeof value[0] === "number" ? value[0] : 1
+        const y = typeof value[1] === "number" ? value[1] : 1
+        return new CS.UnityEngine.UIElements.StyleScale(
+            new CS.UnityEngine.UIElements.Scale(new CS.UnityEngine.Vector3(x, y, 1))
+        )
+    }
+    if (typeof value === "object" && value !== null) {
+        try { return new CS.UnityEngine.UIElements.StyleScale(value) } catch { return value }
+    }
+    return value
+}
+
+/**
+ * Parse transformOrigin style: [x, y] array or C# TransformOrigin pass-through
+ */
+function parseTransformOriginStyle(value: unknown): unknown {
+    if (Array.isArray(value)) {
+        const x = parseLengthForTransform(value[0])
+        const y = parseLengthForTransform(value[1])
+        if (x !== null && y !== null) {
+            return new CS.UnityEngine.UIElements.StyleTransformOrigin(
+                new CS.UnityEngine.UIElements.TransformOrigin(x, y)
+            )
+        }
+    }
+    if (typeof value === "object" && value !== null) {
+        try { return new CS.UnityEngine.UIElements.StyleTransformOrigin(value) } catch { return value }
+    }
+    return value
+}
+
 /**
  * Parse a style value based on the property name
  * @param key - Style property name (e.g., "width", "backgroundColor")
@@ -399,6 +533,12 @@ export function parseStyleValue(key: string, value: unknown): unknown {
         // Fall through if parsing failed
     }
 
+    // Transform properties
+    if (key === "translate") return parseTranslateStyle(value)
+    if (key === "rotate") return parseRotateStyle(value)
+    if (key === "scale") return parseScaleStyle(value)
+    if (key === "transformOrigin") return parseTransformOriginStyle(value)
+
     // Unknown property - pass through unchanged
     return value
 }

package/src/types.ts

@@ -167,13 +167,31 @@ export interface ViewStyle {
   unitySliceScale?: number;
 
   // Transform
-  /** Rotation transform. Pass a C# Rotate struct. */
+  /**
+   * Rotation transform.
+   * - number: degrees (e.g., 45)
+   * - string: with unit (e.g., "0.5turn", "1.57rad", "45deg", "50grad")
+   * - C# Rotate struct: pass-through (auto-wrapped in StyleRotate)
+   */
   rotate?: any;
-  /** Scale transform. Pass a C# Scale struct. */
+  /**
+   * Scale transform.
+   * - number: uniform scale (e.g., 1.5)
+   * - [x, y]: non-uniform scale (e.g., [1.5, 2])
+   * - C# Scale struct: pass-through (auto-wrapped in StyleScale)
+   */
   scale?: any;
-  /** Translation transform. Pass a C# Translate struct. */
+  /**
+   * Translation transform.
+   * - [x, y]: numbers are px, strings parsed (e.g., [10, 20] or ["50%", 10])
+   * - C# Translate struct: pass-through (auto-wrapped in StyleTranslate)
+   */
   translate?: any;
-  /** Transform origin point. Pass a C# TransformOrigin struct. */
+  /**
+   * Transform origin point.
+   * - [x, y]: numbers are px, strings parsed (e.g., ["50%", "50%"])
+   * - C# TransformOrigin struct: pass-through (auto-wrapped in StyleTransformOrigin)
+   */
   transformOrigin?: any;
 
   // Transition
@@ -510,12 +528,12 @@ export interface ScrollViewProps extends BaseProps {
 }
 
 export interface ImageProps extends BaseProps {
-  /** Image source - can be a Texture2D, Sprite, or path string */
+  /** Path to image asset relative to the assets/ folder. Supports PNG, JPG, and SVG files. */
+  src?: string;
+  /** 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 */
@@ -636,7 +654,13 @@ export interface ScrollViewElement extends VisualElement {
 }
 
 export interface ImageElement extends VisualElement {
-  // Image-specific properties handled via style.backgroundImage
+  image: any;
+  sprite: any;
+  vectorImage: any;
+  scaleMode: number;
+  tintColor: any;
+  sourceRect: any;
+  uv: any;
 }
 
 // ListView uses Unity's virtualization callbacks directly