onejs-react 0.1.15 → 0.1.17

package/package.json

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

package/src/components.tsx

@@ -1,5 +1,6 @@
-import { forwardRef, useMemo, type ReactElement, type Ref } from 'react';
+import { forwardRef, createElement, useMemo, type ReactElement, type Ref } from 'react';
 import type {
+  BaseProps,
   ViewProps,
   TextProps,
   LabelProps,
@@ -10,6 +11,8 @@ import type {
   ScrollViewProps,
   ImageProps,
   ListViewProps,
+  FrostedGlassProps,
+  FrostedGlassIntrinsicProps,
   VisualElement,
   TextElement,
   LabelElement,
@@ -19,6 +22,7 @@ import type {
   SliderElement,
   ScrollViewElement,
   ImageElement,
+  FrostedGlassElement,
 } from './types';
 
 declare const CS: any
@@ -94,6 +98,7 @@ declare module 'react/jsx-runtime' {
       'ojs-scrollview': WithRef<ScrollViewProps, ScrollViewElement>;
       'ojs-image': WithRef<ImageProps, ImageElement>;
       'ojs-listview': WithRef<ListViewProps, VisualElement>;
+      'ojs-frostedglass': WithRef<FrostedGlassIntrinsicProps, FrostedGlassElement>;
     }
   }
 }
@@ -112,6 +117,7 @@ declare module 'react' {
       'ojs-scrollview': WithRef<ScrollViewProps, ScrollViewElement>;
       'ojs-image': WithRef<ImageProps, ImageElement>;
       'ojs-listview': WithRef<ListViewProps, VisualElement>;
+      'ojs-frostedglass': WithRef<FrostedGlassIntrinsicProps, FrostedGlassElement>;
     }
   }
 }
@@ -172,3 +178,50 @@ export const ListView = forwardRef<VisualElement, ListViewProps>((props, ref) =>
   return <ojs-listview ref={ref} {...props} />;
 });
 ListView.displayName = 'ListView';
+
+export const FrostedGlass = forwardRef<FrostedGlassElement, FrostedGlassProps>(({ blur, tint, ...rest }, ref) => {
+  const parsedTint = useMemo(() => {
+    if (!tint) return new CS.UnityEngine.Color(1, 1, 1, 0.15)
+    const m = tint.match(/rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+))?\s*\)/)
+    if (m) return new CS.UnityEngine.Color(+m[1] / 255, +m[2] / 255, +m[3] / 255, m[4] != null ? +m[4] : 1)
+    return new CS.UnityEngine.Color(1, 1, 1, 0.15)
+  }, [tint])
+  return <ojs-frostedglass ref={ref} blurRadius={blur ?? 10} tintColor={parsedTint} {...rest} />;
+});
+FrostedGlass.displayName = 'FrostedGlass';
+
+/**
+ * Create a typed React component for a registered custom element.
+ * Use with `registerElement()` to add custom C# VisualElement types to React.
+ *
+ * @param name - Element name matching what was passed to registerElement()
+ * @param displayName - Optional display name for React DevTools
+ *
+ * @example
+ * import { registerElement, createComponent } from "onejs-react"
+ * import { BaseProps, VisualElement } from "onejs-react"
+ *
+ * // Define props for your custom element
+ * interface RadialProgressProps extends BaseProps {
+ *     progress?: number
+ *     trackColor?: string
+ * }
+ *
+ * // Register and create the component
+ * registerElement("radial-progress", CS.MyGame.UI.RadialProgress)
+ * export const RadialProgress = createComponent<RadialProgressProps>("radial-progress")
+ *
+ * // Use in JSX like any React component
+ * <RadialProgress progress={0.75} trackColor="#333" style={{ width: 100, height: 100 }} />
+ */
+export function createComponent<P extends BaseProps = BaseProps>(
+    name: string,
+    displayName?: string
+) {
+    const type = name.startsWith('ojs-') ? name : `ojs-${name}`;
+    const Component = forwardRef<VisualElement, P>((props, ref) => {
+        return createElement(type, { ...props, ref });
+    });
+    Component.displayName = displayName || name;
+    return Component;
+}

package/src/host-config.ts

@@ -60,6 +60,7 @@ declare const CS: {
         };
         ScaleMode: CSEnum;
         Rect: new (...args: any[]) => any;
+        Color: new (r: number, g: number, b: number, a: number) => any;
     };
     OneJS: {
         GPU: {
@@ -68,6 +69,7 @@ declare const CS: {
                 SetElementBackgroundFromObject: (element: CSObject, obj: CSObject) => void;
                 ClearElementBackgroundImage: (element: CSObject) => void;
             };
+            FrostedGlassElement: new () => CSObject;
         };
     };
 };
@@ -173,8 +175,38 @@ const TYPE_MAP: Record<string, () => CSObject> = {
     'ojs-scrollview': () => new CS.UnityEngine.UIElements.ScrollView(),
     'ojs-image': () => new CS.UnityEngine.UIElements.Image(),
     'ojs-listview': () => new CS.UnityEngine.UIElements.ListView(),
+    'ojs-frostedglass': () => new CS.OneJS.GPU.FrostedGlassElement(),
 };
 
+// Built-in types with specific prop handling in applyComponentProps
+const BUILT_IN_TYPES = new Set(Object.keys(TYPE_MAP));
+
+/**
+ * Register a custom VisualElement type for use in React JSX.
+ *
+ * @param name - Element name (with or without 'ojs-' prefix)
+ * @param constructor - C# constructor reference (e.g., CS.MyNamespace.MyWidget)
+ *
+ * @example
+ * import { registerElement, createComponent } from "onejs-react"
+ *
+ * // Register the custom element
+ * registerElement("radial-progress", CS.MyGame.UI.RadialProgress)
+ *
+ * // Create a typed React component for it
+ * const RadialProgress = createComponent<RadialProgressProps>("radial-progress")
+ *
+ * // Use in JSX
+ * <RadialProgress progress={0.75} />
+ */
+export function registerElement(name: string, constructor: new (...args: any[]) => any): void {
+    const key = name.startsWith('ojs-') ? name : `ojs-${name}`;
+    if (TYPE_MAP[key]) {
+        console.error(`registerElement: "${name}" is already registered. Overwriting.`);
+    }
+    TYPE_MAP[key] = () => new constructor();
+}
+
 // Event prop to event type mapping
 const EVENT_PROPS: Record<string, string> = {
     // Click
@@ -728,8 +760,29 @@ function applyListViewProps(element: CSListView, props: Record<string, unknown>)
     setEnumProp(element, 'showAlternatingRowBackgrounds', props, 'showAlternatingRowBackgrounds', UIE.AlternatingRowBackground);
 }
 
+// Props handled by the reconciler infrastructure - not forwarded to C# elements
+const RESERVED_PROPS = new Set([
+    'children', 'key', 'ref', 'style', 'className', 'pickingMode',
+    'onGenerateVisualContent',
+    ...Object.keys(EVENT_PROPS),
+]);
+
+// Forward non-reserved props directly to C# element (for custom elements)
+function applyCustomProps(element: CSObject, props: Record<string, unknown>) {
+    for (const [key, value] of Object.entries(props)) {
+        if (value === undefined || RESERVED_PROPS.has(key)) continue;
+        (element as any)[key] = value;
+    }
+}
+
 // Apply component-specific props based on element type
 function applyComponentProps(element: CSObject, type: string, props: Record<string, unknown>) {
+    // Custom elements: forward all non-reserved props directly to C# element
+    if (!BUILT_IN_TYPES.has(type)) {
+        applyCustomProps(element, props);
+        return;
+    }
+
     // For Slider, apply range props (lowValue/highValue) BEFORE value
     // Unity's Slider clamps value to [lowValue, highValue], so range must be set first
     if (type === 'ojs-slider') {
@@ -750,6 +803,10 @@ function applyComponentProps(element: CSObject, type: string, props: Record<stri
         applyScrollViewProps(element as CSScrollView, props);
     } else if (type === 'ojs-listview') {
         applyListViewProps(element as CSListView, props);
+    } else if (type === 'ojs-frostedglass') {
+        const el = element as any;
+        if (props.blurRadius !== undefined) el.BlurRadius = props.blurRadius;
+        if (props.tintColor !== undefined) el.TintColor = props.tintColor;
     }
 }
 

package/src/index.ts

@@ -10,9 +10,14 @@ export {
   ScrollView,
   Image,
   ListView,
+  FrostedGlass,
   clearImageCache,
+  createComponent,
 } from './components';
 
+// Custom Element Registration
+export { registerElement } from './host-config';
+
 // Renderer
 export { render, unmount, flushSync, batchedUpdates, getDebugInfo } from './renderer';
 
@@ -79,6 +84,7 @@ export type {
   ScrollViewProps,
   ImageProps,
   ListViewProps,
+  FrostedGlassProps,
   // Container type for render()
   RenderContainer,
   // Element types for refs
@@ -91,6 +97,7 @@ export type {
   SliderElement,
   ScrollViewElement,
   ImageElement,
+  FrostedGlassElement,
   // Vector drawing types
   Vector2,
   Color,

package/src/types.ts

@@ -674,6 +674,24 @@ export interface ImageElement extends VisualElement {
 
 // ListView uses Unity's virtualization callbacks directly
 // This is intentionally imperative - ListView manages its own element recycling
+export interface FrostedGlassProps extends BaseProps {
+  /** Blur radius in screen pixels. Higher = more blurry. Default: 10. */
+  blur?: number;
+  /** Tint color overlaid on the blurred background (CSS color string). */
+  tint?: string;
+}
+
+/** Internal props for the ojs-frostedglass intrinsic element */
+export interface FrostedGlassIntrinsicProps extends BaseProps {
+  blurRadius?: number;
+  tintColor?: any;
+}
+
+export interface FrostedGlassElement extends VisualElement {
+  blurRadius: number;
+  tintColor: any;
+}
+
 export interface ListViewProps extends BaseProps {
   // Data source - the array of items to display
   itemsSource: unknown[];