onejs-react 0.1.11 → 0.1.12

package/package.json

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

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,32 @@ 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
+}
+
+function _isVectorImage(obj: any): boolean {
+    return obj != null && obj.GetType?.().Name === "VectorImage"
 }
 
 /**
- * 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 +164,15 @@ 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} />;
+  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/types.ts

@@ -528,14 +528,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 */