react-nitro-renderer 0.0.0-stage → 0.0.1-alpha.7

package/src/hooks/useRootContext.ts

@@ -0,0 +1,11 @@
+import { useContext } from 'react'
+import { RootContext } from '../contexts/RootContext'
+
+/** Reads the view controller hosting the current React Nitro root. */
+export function useRootContext() {
+  const context = useContext(RootContext)
+  if (context === undefined) {
+    throw new Error('This hook must be used inside a React Nitro root created by renderRoot().')
+  }
+  return context
+}

package/src/hooks/useSafeAreaInsets.ts

@@ -0,0 +1,36 @@
+import { useMemo, useSyncExternalStore } from 'react'
+import type { EdgeInsets } from '../specs/EdgeInsets'
+import { useRootContext } from './useRootContext'
+
+/**
+ * Returns the closest view controller's root view safe area in points and subscribes to changes.
+ * The returned {@linkcode EdgeInsets} retain their identity while values are unchanged.
+ * @throws When called outside a root created by renderRoot().
+ */
+export function useSafeAreaInsets(): EdgeInsets {
+  const viewController = useRootContext()
+  const store = useMemo(() => {
+    const view = viewController.view
+    let snapshot = view.safeAreaInsets
+    return {
+      getSnapshot: () => {
+        const insets = view.safeAreaInsets
+        const isUnchanged = insets.top === snapshot.top &&
+          insets.right === snapshot.right &&
+          insets.bottom === snapshot.bottom &&
+          insets.left === snapshot.left
+        if (isUnchanged) {
+          return snapshot
+        }
+        snapshot = insets
+        return snapshot
+      },
+      subscribe: (onChange: () => void) => {
+        const subscription = viewController.addOnSafeAreaInsetsChangedListener(onChange)
+        return subscription.remove
+      },
+    }
+  }, [viewController])
+
+  return useSyncExternalStore(store.subscribe, store.getSnapshot)
+}

package/src/hybrids.ts

@@ -0,0 +1,9 @@
+export { Application } from './specs/Application.nitro'
+export { Label } from './specs/Label.nitro'
+export { Screen } from './specs/Screen.nitro'
+export { ScrollView } from './specs/ScrollView.nitro'
+export { ScrollViewContent } from './specs/ScrollViewContent.nitro'
+export { View } from './specs/View.nitro'
+export { ViewController } from './specs/ViewController.nitro'
+export { Window } from './specs/Window.nitro'
+export { WindowScene } from './specs/WindowScene.nitro'

package/src/index.ts

@@ -0,0 +1,30 @@
+// Initialize runtime globals before renderer modules evaluate.
+export { registerApp } from './registerApp'
+export * from './types/ReactNitroReconcilerHostConfig'
+export { Application, ViewController, Window, WindowScene } from './hybrids'
+export * from './components/View'
+export type { Point3D, CornerCurve } from './specs/View.nitro'
+export type { Corner } from './specs/Corner'
+export * from './components/Text'
+export * from './components/ScrollView'
+export * from './components/ScrollViewContent'
+export * from './getViewYogaNode'
+export * from './renderRoot'
+export { useSafeAreaInsets } from './hooks/useSafeAreaInsets'
+export { useRootContext } from './hooks/useRootContext'
+export { RootContext as ViewControllerContext } from './contexts/RootContext'
+export { registerView } from './ViewRegistry'
+export { viewPropsSetters } from './ViewPropSetters'
+export type { ViewDefinitionMap } from './types/ViewPropsUpdater'
+export type { ListenerSubscription } from './specs/ListenerSubscription'
+export type { EdgeInsets } from './specs/EdgeInsets'
+
+// Gestures
+export { GestureRecognizerState } from './specs/Gestures/GestureRecognizer.nitro'
+export * from './specs/Gestures/TapGestureRecognizer.nitro'
+export * from './specs/Gestures/PanGestureRecognizer.nitro'
+export * from './specs/Gestures/LongPressGestureRecognizer.nitro'
+
+// Animations
+export { type Animator } from './specs/Animations/Animator.nitro'
+export { AnimationCurve } from './specs/Animations/AnimationCurve'

package/src/registerApp.ts

@@ -0,0 +1,22 @@
+import 'react-nitro-runtime'
+import { createElement, type ComponentType } from 'react'
+import { Application, ViewController, Window } from './hybrids'
+import { renderRoot } from './renderRoot'
+
+/**
+ * Registers the component rendered in each application window.
+ * Installs the runtime globals and owns the default native window setup.
+ * @param App The application's root React component.
+ * @see {@linkcode renderRoot} for applications that create their own native windows.
+ * @example
+ * registerApp(App)
+ */
+export function registerApp(App: ComponentType): void {
+  Application.registerRoot((scene) => {
+    const controller = new ViewController()
+    controller.view.setBackgroundColor(0xffffffff)
+    const element = createElement(App)
+    renderRoot(element, controller)
+    return new Window(scene, controller)
+  })
+}

package/src/renderRoot.ts

@@ -0,0 +1,44 @@
+import { createNitroRenderer } from "./NitroRendererHostConfig";
+import type { ViewController } from "./specs/ViewController.nitro";
+import type { ReactRoot } from "./types/ReactRoot";
+import { createElement } from "react";
+import { RootContext } from "./contexts/RootContext";
+
+export function renderRoot(
+  reactElement: React.ReactElement,
+  rootViewController: ViewController,
+) {
+  const reactRootView: ReactRoot = {
+    rootView: rootViewController.view,
+  };
+  const ReactNitroRenderer = createNitroRenderer(reactRootView.rootView);
+  const reactContainer = ReactNitroRenderer.createContainer(
+    reactRootView,
+    1, // tag
+    null, //hydrationCallbacks
+    false, //isStrictMode
+    false, // concurrentUpdatesByDefaultOverride
+    "surface-", // identifierPrefix,
+    function onUncaughtError(error, info) {
+      console.error("React Nitro Renderer Error:", error, info);
+    },
+    function onCaughtError(error, info) {
+      console.error("React Nitro Renderer Caught Error:", error, info);
+    },
+    function onRecoverableError(error, info) {
+      console.error("React Nitro Renderer Recoverable Error:", error, info);
+    },
+    function onDefaultTransitionIndicator() {
+      console.warn(
+        "onDefaultTransitionIndicator() called, no idea what it does",
+      );
+    },
+  );
+
+  const rootElement = createElement(
+    RootContext.Provider,
+    { value: rootViewController },
+    reactElement,
+  );
+  ReactNitroRenderer.updateContainer(rootElement, reactContainer);
+}

package/src/specs/Animations/AnimationCurve.ts

@@ -0,0 +1,6 @@
+export enum AnimationCurve {
+    Linear,
+    EaseIn,
+    EaseOut,
+    EaseInOut,
+}

package/src/specs/Animations/Animator.nitro.ts

@@ -0,0 +1,16 @@
+import { iOS, type HybridObject } from "nitro-core";
+
+export * from "#nitro/Animator";
+
+@iOS({
+    language: 'swift',
+    implementation: {
+        className: 'HybridAnimator'
+    },
+    allowInheritance: false,
+})
+export declare class Animator extends HybridObject {
+    startAnimation(afterDelay?: number): void;
+    pauseAnimation(): void;
+    stopAnimation(withoutFinishing?: boolean): void;
+}

package/src/specs/Application.nitro.ts

@@ -0,0 +1,20 @@
+import { iOS, type HybridObject } from 'nitro-core'
+import type { WindowScene } from './WindowScene.nitro'
+import type { Window } from './Window.nitro'
+import type { View } from './View.nitro'
+
+export * from '#nitro/Application'
+
+@iOS({
+  language: 'swift',
+  implementation: {
+    className: 'HybridApplication',
+  },
+})
+export declare class Application extends HybridObject {
+  static createView(): View
+
+  static registerRoot(onSceneCreated: (scene: WindowScene) => Window): void
+
+  static reloadRuntime(): void
+}

package/src/specs/Corner.ts

@@ -0,0 +1 @@
+export type Corner = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'

package/src/specs/EdgeInsets.ts

@@ -0,0 +1,13 @@
+import type { View } from './View.nitro'
+
+/** Insets in points from a {@linkcode View}'s edges. @see {@linkcode View.safeAreaInsets} */
+export interface EdgeInsets {
+  /** Distance from the top edge, in points. */
+  readonly top: number
+  /** Distance from the right edge, in points. */
+  readonly right: number
+  /** Distance from the bottom edge, in points. */
+  readonly bottom: number
+  /** Distance from the left edge, in points. */
+  readonly left: number
+}

package/src/specs/Frame.ts

@@ -0,0 +1,6 @@
+export interface Frame {
+  x: number
+  y: number
+  width: number
+  height: number
+}

package/src/specs/Gestures/GestureRecognizer.nitro.ts

@@ -0,0 +1,26 @@
+import { iOS, type HybridObject } from "nitro-core";
+
+export * from "#nitro/GestureRecognizer";
+
+// https://developer.apple.com/documentation/uikit/uigesturerecognizer/state-swift.property
+export enum GestureRecognizerState {
+    Possible,
+    Began,
+    Changed,
+    Ended,
+    Cancelled,
+    Failed,
+}
+
+@iOS({
+    language: "swift",
+    allowInheritance: true,
+    allowMultipleImplementations: true,
+    protocolConformances: [{ protocol: "HybridGestureRecognizer" }],
+})
+export declare class GestureRecognizer extends HybridObject {
+    readonly numberOfTouches: number;
+    isEnabled: boolean;
+
+    readonly state: GestureRecognizerState
+}

package/src/specs/Gestures/LongPressGestureRecognizer.nitro.ts

@@ -0,0 +1,26 @@
+import { iOS } from "nitro-core";
+import type { GestureRecognizer } from "./GestureRecognizer.nitro";
+
+export * from "#nitro/LongPressGestureRecognizer";
+
+@iOS({
+    language: "swift",
+    implementation: {
+        className: "HybridLongPressGestureRecognizer",
+    },
+    allowInheritance: false,
+})
+export declare class LongPressGestureRecognizer extends GestureRecognizer {
+    public constructor();
+
+    /** The minimum press duration in seconds. Defaults to 0.5. */
+    minimumPressDuration: number;
+    /** The maximum movement in points before recognition fails. Defaults to 10. */
+    allowableMovement: number;
+    /** The number of full taps required before the final press. Defaults to 0. */
+    numberOfTapsRequired: number;
+    numberOfTouchesRequired: number;
+
+    /** Called when the long press begins, changes, ends, or is cancelled. */
+    onLongPress?: (recognizer: LongPressGestureRecognizer) => void;
+}

package/src/specs/Gestures/PanGestureRecognizer.nitro.ts

@@ -0,0 +1,33 @@
+import { iOS } from "nitro-core";
+import type { GestureRecognizer } from "./GestureRecognizer.nitro";
+import type { View } from "../View.nitro";
+
+export * from "#nitro/PanGestureRecognizer";
+
+export type Point = { x: number; y: number };
+
+@iOS({
+    language: "swift",
+    implementation: {
+        className: "HybridPanGestureRecognizer",
+    },
+    allowInheritance: false,
+})
+export declare class PanGestureRecognizer extends GestureRecognizer {
+    public constructor();
+
+    maximumNumberOfTouches: number;
+    minimumNumberOfTouches: number;
+
+    /**
+     * Interprets the pan gesture in the coordinate system of the specified view.
+     */
+    translation(inParent: View): Point;
+
+    /**
+     * Interprets the velocity of the pan gesture in the coordinate system of the specified view.
+     */
+    velocity(inParent: View): Point;
+
+    onPan?: (recognizer: PanGestureRecognizer) => void
+}

package/src/specs/Gestures/TapGestureRecognizer.nitro.ts

@@ -0,0 +1,20 @@
+import { iOS } from "nitro-core";
+import type { GestureRecognizer } from "./GestureRecognizer.nitro";
+
+export * from "#nitro/TapGestureRecognizer";
+
+@iOS({
+    language: "swift",
+    implementation: {
+        className: "HybridTapGestureRecognizer",
+    },
+    allowInheritance: false,
+})
+export declare class TapGestureRecognizer extends GestureRecognizer {
+    public constructor();
+
+    numberOfTapsRequired: number;
+    numberOfTouchesRequired: number;
+
+    onTap?: (recognizer: TapGestureRecognizer) => void
+}

package/src/specs/Label.nitro.ts

@@ -0,0 +1,16 @@
+import { iOS } from 'nitro-core'
+import type { View } from './View.nitro'
+
+export * from '#nitro/Label'
+
+@iOS({
+  language: 'swift',
+  implementation: {
+    className: 'HybridLabel',
+  },
+})
+export declare class Label extends View {
+  public constructor()
+
+  text?: string
+}

package/src/specs/ListenerSubscription.ts

@@ -0,0 +1,3 @@
+export interface ListenerSubscription {
+  remove: () => void
+}

package/src/specs/Screen.nitro.ts

@@ -0,0 +1,16 @@
+import { iOS, type HybridObject } from 'nitro-core'
+import type { Size } from './Size'
+
+export * from '#nitro/Screen'
+
+@iOS({
+  language: 'swift',
+  implementation: {
+    className: 'HybridScreen',
+  },
+})
+export declare class Screen extends HybridObject {
+  readonly size: Size
+  readonly displayScale: number
+  readonly brightness: number
+}

package/src/specs/ScrollView.nitro.ts

@@ -0,0 +1,14 @@
+import { iOS } from 'nitro-core'
+import type { View } from './View.nitro'
+
+export * from '#nitro/ScrollView'
+
+@iOS({
+  language: 'swift',
+  implementation: {
+    className: 'HybridScrollView',
+  },
+})
+export declare class ScrollView extends View {
+  public constructor()
+}

package/src/specs/ScrollViewContent.nitro.ts

@@ -0,0 +1,14 @@
+import { iOS } from 'nitro-core'
+import type { View } from './View.nitro'
+
+export * from '#nitro/ScrollViewContent'
+
+@iOS({
+  language: 'swift',
+  implementation: {
+    className: 'HybridScrollViewContent',
+  },
+})
+export declare class ScrollViewContent extends View {
+  public constructor()
+}

package/src/specs/Size.ts

@@ -0,0 +1,4 @@
+export interface Size {
+  width: number
+  height: number
+}

package/src/specs/View.nitro.ts

@@ -0,0 +1,112 @@
+import { iOS, type HybridObject } from 'nitro-core'
+import type { Frame } from './Frame'
+import type { Corner } from './Corner'
+import type { GestureRecognizer } from './Gestures/GestureRecognizer.nitro'
+import type { AnimationCurve } from './Animations/AnimationCurve'
+import type { Animator } from './Animations/Animator.nitro'
+import type { EdgeInsets } from './EdgeInsets'
+
+export * from '#nitro/View'
+
+export type CornerCurve = "circular" | "continuous"
+
+export type Point3D = {
+  x: number
+  y: number
+  z: number
+}
+
+@iOS({
+  language: 'swift',
+  allowMultipleImplementations: true,
+  allowInheritance: true,
+  protocolConformances: [{ protocol: 'View' }],
+})
+export declare class View extends HybridObject {
+  protected constructor()
+
+  /**
+   * The parent view set by appendChild or insertBefore.
+   * Returns the existing HybridView, or undefined for roots and detached views.
+   */
+  readonly parent?: View
+
+  /**
+   * The safe area insets relative to this view's bounds, in points.
+   * Insets are zero while detached or when the view is entirely inside its parent's safe area.
+   */
+  readonly safeAreaInsets: EdgeInsets
+
+  /**
+   * We interact with yoga from typescript using static hermes ffi, which
+   * doesn't support complex types. This is the c-pointer to the yoga node of this view.
+   * It's a 64-bit Double with the bit pattern of a unsigned 64-bit Int (UInt64 in Swift).
+   */
+  readonly yogaNodePtr: number
+
+  /**
+   * The background color as an unsigned 32-bit `0xRRGGBBAA` sRGB number.
+   * Returns `0x00000000` when unset or the native color cannot be represented as RGB.
+   */
+  readonly backgroundColor?: number
+   /**
+   * Sets a fixed sRGB color in `0xRRGGBBAA` format (alpha is the last byte).
+   * For example, `0xff0000ff` is opaque red and `0x00000000` is transparent.
+   * @throws If color is not a finite integer between `0` and `0xffffffff`.
+   */
+  setBackgroundColor(color: number): void
+
+  /**
+   * The opacity of the view and its children, from 0 (transparent) to 1 (opaque).
+   * Defaults to 1.
+   */
+  opacity: number
+
+  borderWidth?: number
+  readonly borderColor?: number
+  setBorderColor(color?: number): void
+  cornerRadius: number
+  /**
+   * The corners rounded by cornerRadius. Defaults to all four corners.
+   * Pass an empty array to leave every corner square.
+   */
+  maskedCorners: Corner[]
+  cornerCurve: CornerCurve
+
+  setTranslation(x: number, y: number, z: number): void
+  readonly translation: Point3D
+
+  /**
+   * Scales each axis around the view's center without changing its layout or translation.
+   * On iOS, each exact zero is applied as `0.00001` to avoid broken UIKit transform animations.
+   * The `scale` getter returns these applied values. Use `opacity = 0` to fully hide the view.
+   * @see https://stackoverflow.com/questions/25964224/cgaffinetransformscale-not-working-with-zero-scale
+   * @see https://stackoverflow.com/questions/75793513/uiview-animation-downscale-instantly-hides-the-view
+   */
+  setScale(x: number, y: number, z: number): void
+  /** Applied scale factors, including the zero substitution described in `setScale`. */
+  readonly scale: Point3D
+
+  getFrame(): Frame
+  setFrame(frame: Frame): void
+  
+  appendChild(child: View): void;
+  insertBefore(child: View, beforeChild: View): void;
+  removeChild(child: View): void; 
+  /**
+   * Called right after updating props.
+   */
+  afterUpdate(): void
+
+  setGestureRecognizers(gestureRecognizers?: GestureRecognizer[]): void
+  isUserInteractionEnabled: boolean
+
+  animate(duration: number, curve: AnimationCurve, animations: () => void): Animator
+  /**
+   * Animated the changes with spring.
+   * @param duration The duration of the spring animation in seconds.
+   * @param dampingRatio The damping ratio to apply to the initial acceleration and oscillation. To smoothly decelerate the animation without oscillation, specify a value of 1. Specify values closer to 0 to create less damping and more oscillation.
+   * @param animations Callback with the changes to perform.
+   */
+  animateSpring(duration: number, dampingRatio: number, animations: () => void): Animator
+}

package/src/specs/ViewController.nitro.ts

@@ -0,0 +1,29 @@
+import { iOS, type HybridObject } from 'nitro-core'
+import type { View } from './View.nitro'
+import type { ListenerSubscription } from './ListenerSubscription'
+import type { EdgeInsets } from './EdgeInsets'
+
+export * from '#nitro/ViewController'
+
+export type ModifierKey = 'command' | 'alternate' | 'control' | 'shift'
+
+@iOS({
+  language: 'swift',
+  implementation: {
+    className: 'HybridViewController',
+  },
+  protocolConformances: [{ protocol: 'ViewController' }],
+})
+export declare class ViewController extends HybridObject {
+  public constructor()
+
+  readonly view: View
+  /**
+   * Observes changes to this controller's root {@linkcode View.safeAreaInsets}.
+   * Remove the returned subscription when observation is no longer needed.
+   */
+  addOnSafeAreaInsetsChangedListener(listener: (insets: EdgeInsets) => void): ListenerSubscription
+  present(other: ViewController, animated: boolean, completion: () => void): void
+  dismiss(animated: boolean, completion: () => void): void
+  addOnKeyPressedListener(key: string, modifiers: ModifierKey[], onPress: () => void): ListenerSubscription
+}

package/src/specs/Window.nitro.ts

@@ -0,0 +1,20 @@
+import { iOS, type HybridObject } from 'nitro-core'
+import type { Screen } from './Screen.nitro'
+import type { ViewController } from './ViewController.nitro'
+import type { WindowScene } from './WindowScene.nitro'
+
+export * from '#nitro/Window'
+
+@iOS({
+  language: 'swift',
+  implementation: {
+    className: 'HybridWindow',
+  },
+  protocolConformances: [{ protocol: 'Window' }],
+})
+export declare class Window extends HybridObject {
+  public constructor(scene: WindowScene, rootViewController: ViewController)
+
+  readonly screen: Screen
+  makeKeyAndVisible(): void
+}

package/src/specs/WindowScene.nitro.ts

@@ -0,0 +1,15 @@
+import { iOS, type HybridObject } from 'nitro-core'
+import type { Window } from './Window.nitro'
+
+export * from '#nitro/WindowScene'
+
+@iOS({
+  language: 'swift',
+  implementation: {
+    className: 'HybridWindowScene',
+  },
+  protocolConformances: [{ protocol: 'WindowScene' }],
+})
+export declare class WindowScene extends HybridObject {
+  readonly windows: Window[]
+}

package/src/types/ReactNitroReconcilerHostConfig.ts

@@ -0,0 +1,44 @@
+import type ReactReconciler from "react-reconciler";
+import type { View } from "../specs/View.nitro";
+import type { Label } from "../specs/Label.nitro";
+import type { ViewPropsMap } from "./ViewPropsUpdater";
+import type { ReactRoot } from "./ReactRoot";
+
+export type { ViewPropsMap, ViewPropsUpdater } from "./ViewPropsUpdater";
+
+export type ReconcilerElementType = keyof ViewPropsMap;
+
+export type ReconcilerProps = Record<string, unknown> //ViewPropsMap[ReconcilerElementType];
+
+export type ReconcilerHostContext = Readonly<{}>
+
+export type ReactNitroReconcilerHostConfig = ReactReconciler.HostConfig<
+  // type - react transforms <MyHostComp> to a "MyHostComp" string
+  ReconcilerElementType,
+  // props - the union of built-in host component props
+  ReconcilerProps,
+  // container - the renderer's root destination
+  ReactRoot,
+  // Instance - instances of host elements
+  View,
+  // TextInstance - React distinguishes text from other elements
+  Label,
+  // Suspense instance
+  View | Label,
+  // TODO: Hydratable instance
+  never, // TODO: can we leverage hydration somehow (fast first app render from previous state?)
+  // FormInstance
+  never,
+  // PublicInstance,
+  View | Label,
+  // TODO: HostContext - Context provided to the host components. not decided yet.
+  ReconcilerHostContext,
+  // ChildSet - only used in persistence/none-mutation node (e.g. fabric)
+  never,
+  // TODO: TimeoutHandle - used for scheduling timeouts
+  ReturnType<typeof setTimeout>,
+  // NoTimeout  tbh no clue what this is
+  -1,
+  // TransitionStatus - Seems to be only used by ReactDOM for form actions
+  null
+>

package/src/types/ReactRoot.ts

@@ -0,0 +1,5 @@
+import type { View } from "../specs/View.nitro";
+
+export type ReactRoot = {
+  rootView: View
+}

package/src/types/StrictMap.ts

@@ -0,0 +1,6 @@
+/** Native Map constructor that requires an entry for every key. */
+export type StrictMap<Key extends PropertyKey, Value> = new <
+  const Entries extends readonly (readonly [Key, Value])[],
+>(
+  entries: Entries & Record<Exclude<Key, Entries[number][0]>, never>,
+) => Map<Key, Value>;