onejs-react 0.1.0

package/src/index.ts

@@ -0,0 +1,54 @@
+// Components
+export {
+  View,
+  Label,
+  Button,
+  TextField,
+  Toggle,
+  Slider,
+  ScrollView,
+  Image,
+  ListView,
+} from './components';
+
+// Renderer
+export { render, unmount } from './renderer';
+
+// Responsive Design
+export {
+  ScreenProvider,
+  useBreakpoint,
+  useScreenSize,
+  useResponsive,
+  useMediaQuery,
+  BREAKPOINTS,
+} from './screen';
+
+export type {
+  ScreenContextValue,
+  ScreenProviderProps,
+  BreakpointName,
+} from './screen';
+
+// Types
+export type {
+  ViewStyle,
+  PointerEventData,
+  KeyEventData,
+  ChangeEventData,
+  PointerEventHandler,
+  KeyEventHandler,
+  ChangeEventHandler,
+  FocusEventHandler,
+  BaseProps,
+  ViewProps,
+  LabelProps,
+  ButtonProps,
+  TextFieldProps,
+  ToggleProps,
+  SliderProps,
+  ScrollViewProps,
+  ImageProps,
+  VisualElement,
+  ListViewProps,
+} from './types';

package/src/renderer.ts

@@ -0,0 +1,73 @@
+import Reconciler from 'react-reconciler';
+import type { ReactNode } from 'react';
+import { hostConfig, type Container } from './host-config';
+
+declare const console: { log: (...args: unknown[]) => void; error: (...args: unknown[]) => void };
+
+// Create the reconciler
+const reconciler = Reconciler(hostConfig);
+
+// Inject into dev tools (helps with proper initialization)
+reconciler.injectIntoDevTools({
+  bundleType: 1, // 0 for prod, 1 for dev
+  version: '19.0.0',
+  rendererPackageName: 'onejs-react',
+});
+
+// Track roots for hot reload / re-render
+const roots = new Map<Container, ReturnType<typeof reconciler.createContainer>>();
+
+export function render(element: ReactNode, container: Container): void {
+  console.log('[onejs-react] render() called');
+  let root = roots.get(container);
+
+  if (!root) {
+    console.log('[onejs-react] creating new container');
+    root = reconciler.createContainer(
+      container,
+      0, // LegacyRoot (0) vs ConcurrentRoot (1)
+      null, // hydrationCallbacks
+      false, // isStrictMode
+      null, // concurrentUpdatesByDefaultOverride
+      '', // identifierPrefix
+      (error: Error) => console.error('[OneJS React] Recoverable error:', error),
+      null // transitionCallbacks
+    );
+    roots.set(container, root);
+  }
+
+  console.log('[onejs-react] calling updateContainer');
+  reconciler.updateContainer(element, root, null, () => {
+    console.log('[onejs-react] updateContainer callback fired');
+  });
+
+  // Try to flush synchronous work
+  console.log('[onejs-react] attempting to flush sync work');
+  try {
+    // flushSync may be exported differently - try flushSyncWork first
+    if (typeof (reconciler as any).flushSyncWork === 'function') {
+      (reconciler as any).flushSyncWork();
+      console.log('[onejs-react] flushSyncWork completed');
+    } else if (typeof (reconciler as any).flushSync === 'function') {
+      (reconciler as any).flushSync(() => {});
+      console.log('[onejs-react] flushSync completed');
+    } else {
+      console.log('[onejs-react] no sync flush method available, relying on microtasks');
+    }
+  } catch (e) {
+    console.log('[onejs-react] sync flush failed, relying on microtasks:', e);
+  }
+}
+
+export function unmount(container: Container): void {
+  const root = roots.get(container);
+  if (root) {
+    reconciler.updateContainer(null, root, null, () => {});
+    roots.delete(container);
+  }
+}
+
+// Export for testing/debugging
+export function getRoot(container: Container) {
+  return roots.get(container);
+}

package/src/screen.tsx

@@ -0,0 +1,242 @@
+/**
+ * Responsive design system for OneJS
+ *
+ * Provides React context and hooks for responsive breakpoints.
+ * Uses event-driven updates via GeometryChangedEvent (not polling).
+ *
+ * Mobile-first: At 1400px width, sm/md/lg/xl are all active (not just xl).
+ */
+
+import { createContext, useContext, useState, useEffect, ReactNode } from "react"
+
+// Globals from QuickJS environment
+declare const __root: {
+    __csHandle: number
+    resolvedStyle: {
+        width: number
+        height: number
+    }
+    AddToClassList: (className: string) => void
+    RemoveFromClassList: (className: string) => void
+}
+
+declare const __eventAPI: {
+    addEventListener: (element: unknown, eventType: string, callback: Function) => void
+    removeEventListener: (element: unknown, eventType: string, callback: Function) => void
+}
+
+// Breakpoint definitions (Tailwind v3 defaults)
+export const BREAKPOINTS = {
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    "2xl": 1536,
+} as const
+
+export type BreakpointName = keyof typeof BREAKPOINTS | "base"
+
+export interface ScreenContextValue {
+    /** Current viewport width in pixels */
+    width: number
+    /** Current viewport height in pixels */
+    height: number
+    /** Current breakpoint name (highest matching) */
+    breakpoint: BreakpointName
+    /** True if viewport >= 640px */
+    isSm: boolean
+    /** True if viewport >= 768px */
+    isMd: boolean
+    /** True if viewport >= 1024px */
+    isLg: boolean
+    /** True if viewport >= 1280px */
+    isXl: boolean
+    /** True if viewport >= 1536px */
+    is2xl: boolean
+}
+
+const ScreenContext = createContext<ScreenContextValue | null>(null)
+
+/**
+ * Calculate breakpoint state from viewport width
+ */
+function calculateBreakpoints(width: number, height: number): ScreenContextValue {
+    const isSm = width >= BREAKPOINTS.sm
+    const isMd = width >= BREAKPOINTS.md
+    const isLg = width >= BREAKPOINTS.lg
+    const isXl = width >= BREAKPOINTS.xl
+    const is2xl = width >= BREAKPOINTS["2xl"]
+
+    // Determine current breakpoint (highest matching)
+    let breakpoint: BreakpointName = "base"
+    if (is2xl) breakpoint = "2xl"
+    else if (isXl) breakpoint = "xl"
+    else if (isLg) breakpoint = "lg"
+    else if (isMd) breakpoint = "md"
+    else if (isSm) breakpoint = "sm"
+
+    return { width, height, breakpoint, isSm, isMd, isLg, isXl, is2xl }
+}
+
+/**
+ * Apply breakpoint classes to root element (mobile-first cascading)
+ */
+function applyBreakpointClasses(screen: ScreenContextValue) {
+    // Remove all breakpoint classes first
+    __root.RemoveFromClassList("sm")
+    __root.RemoveFromClassList("md")
+    __root.RemoveFromClassList("lg")
+    __root.RemoveFromClassList("xl")
+    __root.RemoveFromClassList("2xl")
+
+    // Mobile-first: apply ALL matching breakpoints, not just highest
+    if (screen.isSm) __root.AddToClassList("sm")
+    if (screen.isMd) __root.AddToClassList("md")
+    if (screen.isLg) __root.AddToClassList("lg")
+    if (screen.isXl) __root.AddToClassList("xl")
+    if (screen.is2xl) __root.AddToClassList("2xl")
+}
+
+export interface ScreenProviderProps {
+    children: ReactNode
+    /** Custom breakpoints (optional) */
+    breakpoints?: Partial<typeof BREAKPOINTS>
+}
+
+/**
+ * Provider component for responsive screen context.
+ *
+ * Wrap your app with this to enable responsive hooks.
+ *
+ * @example
+ * ```tsx
+ * render(
+ *   <ScreenProvider>
+ *     <App />
+ *   </ScreenProvider>,
+ *   __root
+ * )
+ * ```
+ */
+export function ScreenProvider({ children }: ScreenProviderProps) {
+    // Initialize with current viewport size
+    const [screen, setScreen] = useState<ScreenContextValue>(() => {
+        const width = __root.resolvedStyle?.width || 0
+        const height = __root.resolvedStyle?.height || 0
+        return calculateBreakpoints(width, height)
+    })
+
+    useEffect(() => {
+        // Apply initial breakpoint classes
+        applyBreakpointClasses(screen)
+
+        // Handle viewport change events from C#
+        const handleViewportChange = (evt: { width: number; height: number }) => {
+            const newScreen = calculateBreakpoints(evt.width, evt.height)
+            setScreen(newScreen)
+            applyBreakpointClasses(newScreen)
+        }
+
+        // Listen for viewport changes on root element
+        __eventAPI.addEventListener(__root, "viewportchange", handleViewportChange)
+
+        return () => {
+            __eventAPI.removeEventListener(__root, "viewportchange", handleViewportChange)
+        }
+    }, [])
+
+    return (
+        <ScreenContext.Provider value={screen}>
+            {children}
+        </ScreenContext.Provider>
+    )
+}
+
+/**
+ * Hook to get the current breakpoint name.
+ *
+ * @example
+ * ```tsx
+ * function Component() {
+ *   const breakpoint = useBreakpoint()
+ *   return <Label text={`Current: ${breakpoint}`} />
+ * }
+ * ```
+ */
+export function useBreakpoint(): BreakpointName {
+    const ctx = useContext(ScreenContext)
+    if (!ctx) {
+        throw new Error("useBreakpoint must be used within ScreenProvider")
+    }
+    return ctx.breakpoint
+}
+
+/**
+ * Hook to get the current viewport size.
+ *
+ * @example
+ * ```tsx
+ * function Component() {
+ *   const { width, height } = useScreenSize()
+ *   return <Label text={`${width}x${height}`} />
+ * }
+ * ```
+ */
+export function useScreenSize(): { width: number; height: number } {
+    const ctx = useContext(ScreenContext)
+    if (!ctx) {
+        throw new Error("useScreenSize must be used within ScreenProvider")
+    }
+    return { width: ctx.width, height: ctx.height }
+}
+
+/**
+ * Hook to get all responsive state.
+ *
+ * @example
+ * ```tsx
+ * function Component() {
+ *   const { isMd, isLg, breakpoint } = useResponsive()
+ *   return (
+ *     <View>
+ *       {isLg && <Sidebar />}
+ *       <Content />
+ *     </View>
+ *   )
+ * }
+ * ```
+ */
+export function useResponsive(): ScreenContextValue {
+    const ctx = useContext(ScreenContext)
+    if (!ctx) {
+        throw new Error("useResponsive must be used within ScreenProvider")
+    }
+    return ctx
+}
+
+/**
+ * Hook to check if a specific breakpoint is active.
+ *
+ * @example
+ * ```tsx
+ * function Component() {
+ *   const isDesktop = useMediaQuery("lg")
+ *   return isDesktop ? <DesktopLayout /> : <MobileLayout />
+ * }
+ * ```
+ */
+export function useMediaQuery(breakpoint: keyof typeof BREAKPOINTS): boolean {
+    const ctx = useContext(ScreenContext)
+    if (!ctx) {
+        throw new Error("useMediaQuery must be used within ScreenProvider")
+    }
+
+    switch (breakpoint) {
+        case "sm": return ctx.isSm
+        case "md": return ctx.isMd
+        case "lg": return ctx.isLg
+        case "xl": return ctx.isXl
+        case "2xl": return ctx.is2xl
+        default: return false
+    }
+}

package/src/style-parser.ts

@@ -0,0 +1,288 @@
+/**
+ * Style value parsing utilities for OneJS React
+ *
+ * Converts friendly style values (numbers, strings like "100px", "#ff0000")
+ * into Unity UI Toolkit compatible values.
+ */
+
+// Unity UIElements types accessed via CS global
+declare const CS: {
+    UnityEngine: {
+        Color: new (r: number, g: number, b: number, a: number) => CSColor;
+        UIElements: {
+            Length: new (value: number, unit?: number) => CSLength;
+            LengthUnit: { Pixel: number; Percent: number };
+            StyleKeyword: { Auto: number; None: number; Initial: number };
+        };
+    };
+};
+
+interface CSColor {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+
+interface CSLength {
+    value: number;
+    unit: number;
+}
+
+// Named CSS colors (common subset)
+const NAMED_COLORS: Record<string, [number, number, number, number]> = {
+    transparent: [0, 0, 0, 0],
+    black: [0, 0, 0, 1],
+    white: [1, 1, 1, 1],
+    red: [1, 0, 0, 1],
+    green: [0, 0.502, 0, 1],  // CSS green is #008000
+    blue: [0, 0, 1, 1],
+    yellow: [1, 1, 0, 1],
+    cyan: [0, 1, 1, 1],
+    magenta: [1, 0, 1, 1],
+    orange: [1, 0.647, 0, 1],
+    purple: [0.502, 0, 0.502, 1],
+    pink: [1, 0.753, 0.796, 1],
+    brown: [0.647, 0.165, 0.165, 1],
+    gray: [0.502, 0.502, 0.502, 1],
+    grey: [0.502, 0.502, 0.502, 1],
+    silver: [0.753, 0.753, 0.753, 1],
+    gold: [1, 0.843, 0, 1],
+    navy: [0, 0, 0.502, 1],
+    teal: [0, 0.502, 0.502, 1],
+    olive: [0.502, 0.502, 0, 1],
+    maroon: [0.502, 0, 0, 1],
+    aqua: [0, 1, 1, 1],
+    lime: [0, 1, 0, 1],
+    fuchsia: [1, 0, 1, 1],
+}
+
+// Style properties that expect length values
+const LENGTH_PROPERTIES = new Set([
+    "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight",
+    "top", "right", "bottom", "left",
+    "margin", "marginTop", "marginRight", "marginBottom", "marginLeft",
+    "padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft",
+    "flexBasis",
+    "borderWidth", "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth",
+    "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius",
+    "fontSize",
+])
+
+// Style properties that expect color values
+const COLOR_PROPERTIES = new Set([
+    "color", "backgroundColor",
+    "borderColor", "borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor",
+])
+
+// Style properties that are plain numbers (no Length wrapper needed)
+const NUMBER_PROPERTIES = new Set([
+    "flexGrow", "flexShrink", "opacity",
+])
+
+// Enum properties - these get passed through as-is (C# handles conversion)
+const ENUM_PROPERTIES = new Set([
+    "flexDirection", "flexWrap", "alignItems", "alignSelf", "alignContent", "justifyContent",
+    "position", "overflow", "display", "visibility", "whiteSpace",
+    "unityTextAlign", "fontStyle",
+])
+
+/**
+ * Parse a length value from various formats
+ * @param value - number, "100", "100px", "50%", "auto"
+ * @returns Unity Length struct or StyleKeyword
+ */
+export function parseLength(value: number | string): CSLength | number | null {
+    if (typeof value === "number") {
+        return new CS.UnityEngine.UIElements.Length(value, CS.UnityEngine.UIElements.LengthUnit.Pixel)
+    }
+
+    if (typeof value !== "string") return null
+
+    const trimmed = value.trim().toLowerCase()
+
+    // Handle keywords
+    if (trimmed === "auto") {
+        return CS.UnityEngine.UIElements.StyleKeyword.Auto
+    }
+    if (trimmed === "none") {
+        return CS.UnityEngine.UIElements.StyleKeyword.None
+    }
+    if (trimmed === "initial") {
+        return CS.UnityEngine.UIElements.StyleKeyword.Initial
+    }
+
+    // Parse numeric values with units
+    const match = trimmed.match(/^(-?[\d.]+)(px|%)?$/)
+    if (match) {
+        const num = parseFloat(match[1])
+        if (isNaN(num)) return null
+
+        const unitStr = match[2]
+        const unit = unitStr === "%"
+            ? CS.UnityEngine.UIElements.LengthUnit.Percent
+            : CS.UnityEngine.UIElements.LengthUnit.Pixel
+
+        return new CS.UnityEngine.UIElements.Length(num, unit)
+    }
+
+    return null
+}
+
+/**
+ * Parse a hex color component (1 or 2 characters)
+ */
+function parseHexComponent(hex: string): number {
+    if (hex.length === 1) {
+        hex = hex + hex  // Expand shorthand: "f" -> "ff"
+    }
+    return parseInt(hex, 16) / 255
+}
+
+/**
+ * Parse a color value from various formats
+ * @param value - "#fff", "#ffffff", "#ffffffff", "rgb(255,0,0)", "rgba(255,0,0,0.5)", "red"
+ * @returns Unity Color struct or null if invalid
+ */
+export function parseColor(value: string): CSColor | null {
+    if (typeof value !== "string") return null
+
+    const trimmed = value.trim().toLowerCase()
+
+    // Named colors
+    if (NAMED_COLORS[trimmed]) {
+        const [r, g, b, a] = NAMED_COLORS[trimmed]
+        return new CS.UnityEngine.Color(r, g, b, a)
+    }
+
+    // Hex colors: #rgb, #rgba, #rrggbb, #rrggbbaa
+    if (trimmed.startsWith("#")) {
+        const hex = trimmed.slice(1)
+
+        if (hex.length === 3) {
+            // #rgb
+            const r = parseHexComponent(hex[0])
+            const g = parseHexComponent(hex[1])
+            const b = parseHexComponent(hex[2])
+            return new CS.UnityEngine.Color(r, g, b, 1)
+        }
+
+        if (hex.length === 4) {
+            // #rgba
+            const r = parseHexComponent(hex[0])
+            const g = parseHexComponent(hex[1])
+            const b = parseHexComponent(hex[2])
+            const a = parseHexComponent(hex[3])
+            return new CS.UnityEngine.Color(r, g, b, a)
+        }
+
+        if (hex.length === 6) {
+            // #rrggbb
+            const r = parseHexComponent(hex.slice(0, 2))
+            const g = parseHexComponent(hex.slice(2, 4))
+            const b = parseHexComponent(hex.slice(4, 6))
+            return new CS.UnityEngine.Color(r, g, b, 1)
+        }
+
+        if (hex.length === 8) {
+            // #rrggbbaa
+            const r = parseHexComponent(hex.slice(0, 2))
+            const g = parseHexComponent(hex.slice(2, 4))
+            const b = parseHexComponent(hex.slice(4, 6))
+            const a = parseHexComponent(hex.slice(6, 8))
+            return new CS.UnityEngine.Color(r, g, b, a)
+        }
+
+        return null
+    }
+
+    // rgb(r, g, b) or rgba(r, g, b, a)
+    const rgbMatch = trimmed.match(/^rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)$/)
+    if (rgbMatch) {
+        const r = parseInt(rgbMatch[1]) / 255
+        const g = parseInt(rgbMatch[2]) / 255
+        const b = parseInt(rgbMatch[3]) / 255
+        const a = rgbMatch[4] !== undefined ? parseFloat(rgbMatch[4]) : 1
+        return new CS.UnityEngine.Color(
+            Math.min(1, Math.max(0, r)),
+            Math.min(1, Math.max(0, g)),
+            Math.min(1, Math.max(0, b)),
+            Math.min(1, Math.max(0, a))
+        )
+    }
+
+    // rgb with percentages: rgb(100%, 0%, 0%)
+    const rgbPercentMatch = trimmed.match(/^rgba?\s*\(\s*([\d.]+)%\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%\s*(?:,\s*([\d.]+))?\s*\)$/)
+    if (rgbPercentMatch) {
+        const r = parseFloat(rgbPercentMatch[1]) / 100
+        const g = parseFloat(rgbPercentMatch[2]) / 100
+        const b = parseFloat(rgbPercentMatch[3]) / 100
+        const a = rgbPercentMatch[4] !== undefined ? parseFloat(rgbPercentMatch[4]) : 1
+        return new CS.UnityEngine.Color(
+            Math.min(1, Math.max(0, r)),
+            Math.min(1, Math.max(0, g)),
+            Math.min(1, Math.max(0, b)),
+            Math.min(1, Math.max(0, a))
+        )
+    }
+
+    return null
+}
+
+/**
+ * Parse a style value based on the property name
+ * @param key - Style property name (e.g., "width", "backgroundColor")
+ * @param value - Raw value from React style object
+ * @returns Parsed value suitable for Unity UI Toolkit
+ */
+export function parseStyleValue(key: string, value: unknown): unknown {
+    if (value === undefined || value === null) return value
+
+    // Length properties
+    if (LENGTH_PROPERTIES.has(key)) {
+        if (typeof value === "number") {
+            return new CS.UnityEngine.UIElements.Length(value, CS.UnityEngine.UIElements.LengthUnit.Pixel)
+        }
+        if (typeof value === "string") {
+            const parsed = parseLength(value)
+            if (parsed !== null) return parsed
+        }
+        // Fall through to return original value
+    }
+
+    // Color properties
+    if (COLOR_PROPERTIES.has(key)) {
+        if (typeof value === "string") {
+            const parsed = parseColor(value)
+            if (parsed !== null) return parsed
+        }
+        // Could already be a Color object, pass through
+    }
+
+    // Plain number properties - pass through as-is
+    if (NUMBER_PROPERTIES.has(key)) {
+        return value
+    }
+
+    // Enum properties - pass through as-is (C# handles string -> enum)
+    if (ENUM_PROPERTIES.has(key)) {
+        return value
+    }
+
+    // Unknown property - pass through unchanged
+    return value
+}
+
+/**
+ * Check if a property is a length property
+ */
+export function isLengthProperty(key: string): boolean {
+    return LENGTH_PROPERTIES.has(key)
+}
+
+/**
+ * Check if a property is a color property
+ */
+export function isColorProperty(key: string): boolean {
+    return COLOR_PROPERTIES.has(key)
+}