onejs-react 0.1.0 → 0.1.1

package/README.md

@@ -0,0 +1,84 @@
+# onejs-react
+
+React 19 reconciler for Unity's UI Toolkit.
+
+## Files
+
+| File | Purpose |
+|------|---------|
+| `src/host-config.ts` | React reconciler implementation (createInstance, commitUpdate, etc.) |
+| `src/renderer.ts` | Entry point: `render(element, container)` |
+| `src/components.tsx` | Component wrappers: View, Text, Label, Button, TextField, etc. |
+| `src/screen.tsx` | Responsive design: ScreenProvider, useBreakpoint, useScreenSize, useResponsive |
+| `src/types.ts` | TypeScript type definitions |
+| `src/index.ts` | Package exports |
+
+## Components
+
+| Component | UI Toolkit Element | Description |
+|-----------|-------------------|-------------|
+| `View` | VisualElement | Container element |
+| `Text` | TextElement | Primary text display |
+| `Label` | Label | Form labels, semantic labeling |
+| `Button` | Button | Interactive button |
+| `TextField` | TextField | Text input |
+| `Toggle` | Toggle | Checkbox/toggle |
+| `Slider` | Slider | Numeric slider |
+| `ScrollView` | ScrollView | Scrollable container |
+| `Image` | Image | Image display |
+| `ListView` | ListView | Virtualized list |
+
+**Raw text in JSX** (e.g., `<View>Hello</View>`) creates a `TextElement`, providing semantic distinction from explicit `<Label>` components.
+
+## Usage
+
+```tsx
+import { render, View, Text, Label, Button } from 'onejs-react';
+
+function App() {
+    return (
+        <View style={{ padding: 20 }}>
+            <Text text="Welcome!" style={{ fontSize: 24 }} />
+            <Button text="Click me" onClick={() => console.log('clicked')} />
+            <View>Raw text also works</View>
+        </View>
+    );
+}
+
+render(<App />, __root);
+```
+
+## Key Concepts
+
+- **Element types**: Use `ojs-` prefix internally (e.g., `ojs-view`, `ojs-button`) to avoid conflicts with HTML types
+- **Style shorthands**: `padding`/`margin` are expanded to individual properties (UI Toolkit requirement)
+- **Style cleanup**: When props change, removed style properties are cleared (not just new ones applied)
+- **className updates**: Selective add/remove of classes (not full clear + reapply)
+- **Event handlers**: Registered via `__eventAPI` from QuickJSBootstrap.js
+- **Instance structure**: `{ element, type, props, eventHandlers: Map, appliedStyleKeys: Set }`
+
+## Build & Test
+
+```bash
+npm run typecheck  # TypeScript check (no build output - consumed directly by App)
+npm test           # Run test suite
+npm run test:watch # Run tests in watch mode
+```
+
+## Testing
+
+Test suite uses Vitest with mocked Unity CS globals. Tests are in `src/__tests__/`:
+
+| File | Coverage |
+|------|----------|
+| `host-config.test.ts` | Instance creation, style/className management, events, children |
+| `renderer.test.tsx` | Integration tests: render(), unmount(), React state, effects |
+| `components.test.tsx` | Component wrappers, prop passing, event mapping |
+| `mocks.ts` | Mock implementations of Unity UI Toolkit classes |
+| `setup.ts` | Global test setup for CS, __eventAPI |
+
+## Dependencies
+
+- `react-reconciler@0.31.x` (React 19 compatible)
+- `vitest` (dev) - Test runner
+- Peer: `react@18.x || 19.x`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "onejs-react",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "React 19 renderer for OneJS (Unity UI Toolkit)",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -33,6 +33,7 @@
     "react-reconciler": "^0.31.0"
   },
   "devDependencies": {
+    "@types/node": "^25.0.3",
     "@types/react": "^19.0.0",
     "@types/react-reconciler": "^0.28.9",
     "react": "^19.0.0",

package/src/__tests__/components.test.tsx

@@ -12,6 +12,7 @@ import React from 'react';
 import { render } from '../renderer';
 import {
     View,
+    Text,
     Label,
     Button,
     TextField,
@@ -108,6 +109,41 @@ describe('components', () => {
         });
     });
 
+    describe('Text', () => {
+        it('renders as TextElement', async () => {
+            const container = createMockContainer();
+            render(<Text text="Hello" />, container as any);
+            await flushMicrotasks();
+
+            expect(container.children[0].__csType).toBe('UnityEngine.UIElements.TextElement');
+        });
+
+        it('sets text property', async () => {
+            const container = createMockContainer();
+            render(<Text text="Hello World" />, container as any);
+            await flushMicrotasks();
+
+            const el = container.children[0] as MockVisualElement;
+            expect(el.text).toBe('Hello World');
+        });
+
+        it('applies styles', async () => {
+            const container = createMockContainer();
+            render(
+                <Text
+                    text="Styled"
+                    style={{ fontSize: 24, color: 'white' }}
+                />,
+                container as any
+            );
+            await flushMicrotasks();
+
+            const el = container.children[0] as MockVisualElement;
+            expect(getStyleValue(el.style.fontSize)).toBe(24);
+            expect(el.style.color).toBeInstanceOf(MockColor);
+        });
+    });
+
     describe('Label', () => {
         it('renders as Label element', async () => {
             const container = createMockContainer();