onejs-react 0.1.15 → 0.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "onejs-react",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "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,
@@ -172,3 +173,39 @@ export const ListView = forwardRef<VisualElement, ListViewProps>((props, ref) =>
   return <ojs-listview ref={ref} {...props} />;
 });
 ListView.displayName = 'ListView';
+
+/**
+ * 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

@@ -175,6 +175,35 @@ const TYPE_MAP: Record<string, () => CSObject> = {
     'ojs-listview': () => new CS.UnityEngine.UIElements.ListView(),
 };
 
+// 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 +757,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') {

package/src/index.ts

@@ -11,8 +11,12 @@ export {
   Image,
   ListView,
   clearImageCache,
+  createComponent,
 } from './components';
 
+// Custom Element Registration
+export { registerElement } from './host-config';
+
 // Renderer
 export { render, unmount, flushSync, batchedUpdates, getDebugInfo } from './renderer';