onejs-react 0.1.21 → 0.1.22

package/package.json

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

package/src/host-config.ts

@@ -71,6 +71,10 @@ declare const CS: {
             };
             FrostedGlassElement: new () => CSObject;
         };
+        StyleBridge: {
+            ApplyStyles: (element: CSObject, styles: Record<string, unknown>) => void;
+            AddClassesBatch: (element: CSObject, classes: string[]) => void;
+        };
     };
 };
 
@@ -385,47 +389,73 @@ function getRenderTextureHandle(value: RenderTextureRef): number {
     return value.__rtHandle ?? value.__handle ?? -1;
 }
 
-// Apply style properties to element, returns the set of applied keys
+// Apply style properties to element, returns the set of applied keys.
+//
+// Batched path: parsed style values are collected into a single dict and sent
+// to CS.OneJS.StyleBridge.ApplyStyles in one __cs.invoke crossing instead of
+// one per property. On WebGL each crossing is ~3ms (JSON marshal + reflection),
+// so the difference is ~N invokes vs 1 invoke per element. backgroundImage
+// stays on its individual GPU-bridge path since it's not a plain IStyle setter.
 function applyStyle(element: CSObject, style: ViewStyle | undefined): Set<string> {
     const appliedKeys = new Set<string>();
     if (!style) return appliedKeys;
 
-    const s = element.style;
+    const batched: Record<string, unknown> = {}
+
     for (const [key, value] of Object.entries(style)) {
         if (value === undefined) continue;
 
-        // Handle shorthand properties
         const expanded = STYLE_SHORTHANDS[key];
         if (expanded) {
-            // Parse the value once, apply to all expanded properties
-            const parsed = parseStyleValue(expanded[0], value);
+            const parsed = resolveForBatch(parseStyleValue(expanded[0], value));
             for (const prop of expanded) {
-                s[prop] = parsed;
+                batched[prop] = parsed;
                 appliedKeys.add(prop);
             }
         } 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 {
-            // Parse and apply individual property
-            s[key] = parseStyleValue(key, value);
+            batched[key] = resolveForBatch(parseStyleValue(key, value));
             appliedKeys.add(key);
         }
     }
+
+    if (Object.keys(batched).length > 0) {
+        CS.OneJS.StyleBridge.ApplyStyles(element, batched);
+    }
+
     return appliedKeys;
 }
 
+// Force-resolve CS path proxies (e.g. CS.UnityEngine.UIElements.Justify.Center)
+// to their underlying int value. parseEnumValue and parseLength's StyleKeyword
+// cases return path proxies whose .valueOf() reads the int via GetField. The
+// non-batched __cs.invoke path resolved these implicitly via __resolveValue;
+// the batched path JSON.stringifies the whole dict, so path proxies serialize
+// via toJSON to {__csTypeRef:...} which C# can't interpret as an enum value.
+// CS object proxies (with __csHandle) keep their toJSON shape — only path
+// proxies need coercion.
+function resolveForBatch(value: unknown): unknown {
+    // Path proxies (e.g. CS.UnityEngine.UIElements.Justify.Center) have a
+    // function as their underlying Proxy target so they can also be invoked
+    // as constructors — so typeof is "function", not "object". Just check the
+    // __csPathProxy sentinel and rely on truthy/property semantics.
+    if (value && (value as any).__csPathProxy) {
+        return Number(value)
+    }
+    return value
+}
+
 // Clear style properties that are no longer in the new style
 function clearRemovedStyles(element: CSObject, oldKeys: Set<string>, newKeys: Set<string>) {
     const s = element.style;
@@ -458,13 +488,18 @@ function parseClassNames(className: string | undefined): Set<string> {
     return result;
 }
 
-// Apply className(s) to element (with escaping for Tailwind/USS compatibility)
+// Apply className(s) to element (with escaping for Tailwind/USS compatibility).
+// Routes through StyleBridge.AddClassesBatch so a multi-class string is one
+// __cs.invoke crossing instead of one per class.
 function applyClassName(element: CSObject, className: string | undefined) {
     if (!className) return;
 
-    const classes = className.split(/\s+/).filter(Boolean);
-    for (const cls of classes) {
-        element.AddToClassList(escapeClassName(cls));
+    const classes: string[] = [];
+    for (const cls of className.split(/\s+/)) {
+        if (cls) classes.push(escapeClassName(cls));
+    }
+    if (classes.length > 0) {
+        CS.OneJS.StyleBridge.AddClassesBatch(element, classes);
     }
 }