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

package/nitrogen/generated/shared/javascript/ViewController.cjs

@@ -0,0 +1,19 @@
+///
+/// ViewController.cjs
+/// This file was generated by nitrogen. DO NOT MODIFY THIS FILE.
+/// https://github.com/margelo/nitro
+/// Copyright © Marc Rousavy @ Margelo
+///
+
+const { NitroModules } = require('nitro-core')
+
+let hybridClass
+
+module.exports = {
+  get ViewController() {
+    if (hybridClass === undefined) {
+      hybridClass = NitroModules.getHybridClass('renderer.ViewController')
+    }
+    return hybridClass
+  },
+}

package/nitrogen/generated/shared/javascript/ViewController.d.cts

@@ -0,0 +1,9 @@
+///
+/// ViewController.d.cts
+/// This file was generated by nitrogen. DO NOT MODIFY THIS FILE.
+/// https://github.com/margelo/nitro
+/// Copyright © Marc Rousavy @ Margelo
+///
+
+// The spec's `export declare class ViewController` types this runtime export.
+export {}

package/nitrogen/generated/shared/javascript/Window.cjs

@@ -0,0 +1,19 @@
+///
+/// Window.cjs
+/// This file was generated by nitrogen. DO NOT MODIFY THIS FILE.
+/// https://github.com/margelo/nitro
+/// Copyright © Marc Rousavy @ Margelo
+///
+
+const { NitroModules } = require('nitro-core')
+
+let hybridClass
+
+module.exports = {
+  get Window() {
+    if (hybridClass === undefined) {
+      hybridClass = NitroModules.getHybridClass('renderer.Window')
+    }
+    return hybridClass
+  },
+}

package/nitrogen/generated/shared/javascript/Window.d.cts

@@ -0,0 +1,9 @@
+///
+/// Window.d.cts
+/// This file was generated by nitrogen. DO NOT MODIFY THIS FILE.
+/// https://github.com/margelo/nitro
+/// Copyright © Marc Rousavy @ Margelo
+///
+
+// The spec's `export declare class Window` types this runtime export.
+export {}

package/nitrogen/generated/shared/javascript/WindowScene.cjs

@@ -0,0 +1,19 @@
+///
+/// WindowScene.cjs
+/// This file was generated by nitrogen. DO NOT MODIFY THIS FILE.
+/// https://github.com/margelo/nitro
+/// Copyright © Marc Rousavy @ Margelo
+///
+
+const { NitroModules } = require('nitro-core')
+
+let hybridClass
+
+module.exports = {
+  get WindowScene() {
+    if (hybridClass === undefined) {
+      hybridClass = NitroModules.getHybridClass('renderer.WindowScene')
+    }
+    return hybridClass
+  },
+}

package/nitrogen/generated/shared/javascript/WindowScene.d.cts

@@ -0,0 +1,9 @@
+///
+/// WindowScene.d.cts
+/// This file was generated by nitrogen. DO NOT MODIFY THIS FILE.
+/// https://github.com/margelo/nitro
+/// Copyright © Marc Rousavy @ Margelo
+///
+
+// The spec's `export declare class WindowScene` types this runtime export.
+export {}

package/package.json

@@ -1,6 +1,44 @@
 {
   "name": "react-nitro-renderer",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.0.1-alpha.7",
+  "dependencies": {
+    "nitro-core": "1.0.0-alpha.nightly.105.g69d365fc9b18",
+    "react": "19.3.0",
+    "react-nitro-yoga": "0.0.1-alpha.7",
+    "react-nitro-runtime": "0.0.1-alpha.7",
+    "react-reconciler": "0.34.0",
+    "@types/react-reconciler": "0.33.0"
+  },
+  "publishConfig": {
+    "tag": "latest",
+    "access": "public"
+  },
+  "module": "src/index.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./hybrids": {
+      "types": "./src/hybrids.ts",
+      "default": "./src/hybrids.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "imports": {
+    "#nitro/*": "./nitrogen/generated/shared/javascript/*.cjs"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/margelo/react-nitro.git",
+    "directory": "packages/react-nitro-renderer"
+  },
+  "files": [
+    "src",
+    "Package.swift",
+    "Sources",
+    "nitrogen/generated"
+  ]
+}

package/src/NitroRendererHostConfig.ts

@@ -0,0 +1,396 @@
+import createReconciler from "react-reconciler";
+import type {
+  YGNodeRef,
+} from "react-nitro-yoga";
+
+import type {
+  ReactNitroReconcilerHostConfig,
+  ReconcilerElementType,
+  ReconcilerProps,
+} from "./types/ReactNitroReconcilerHostConfig";
+import { DefaultEventPriority } from "react-reconciler/constants";
+import type { View } from "./specs/View.nitro";
+import { viewRegistry } from "./ViewRegistry";
+import { getViewYogaNode } from "./getViewYogaNode";
+import { arePropArraysEqual } from "./utils/arePropArraysEqual";
+
+// React's host callbacks don't preserve the relationship between type, props,
+// and instance. Erase it only here; React pairs each instance with its host type.
+const reconcilerViewRegistry = viewRegistry as {
+  factories: Partial<
+    Record<ReconcilerElementType, (props: ReconcilerProps) => View>
+  >;
+  propSetters: Partial<
+    Record<
+      ReconcilerElementType,
+      Record<string, (view: View, propValue: unknown, previousPropValue?: unknown) => void>
+    >
+  >;
+};
+
+export function createNitroRenderer(rootView: View) {
+  let currentUpdatePriority = DefaultEventPriority;
+
+  const yogaNodeToViewMap = new Map<YGNodeRef, View>();
+  const yogaRootNode = getViewYogaNode(rootView);
+  yogaNodeToViewMap.set(yogaRootNode, rootView);
+  // TODO: i guess the root node can change its dimensions (e.g. iPhone Duo / landscape orientation)
+  const rootFrame = rootView.getFrame();
+  yoga.YGNodeStyleSetWidth(yogaRootNode, rootFrame.width);
+  yoga.YGNodeStyleSetHeight(yogaRootNode, rootFrame.height);
+
+  const HostConfig: ReactNitroReconcilerHostConfig = {
+    // As react is running on the UI thread, we can use mutation mode directly!
+    supportsMutation: true,
+    // If mutation is true, this has to be false
+    supportsPersistence: false,
+    // For now we just try to roll with react's own queueMicrotask implementation instead of building our own scheduler
+    supportsMicrotasks: true,
+    // This is a standalone renderer, not build on top of any other react renderer:
+    isPrimaryRenderer: true,
+    // TODO: false for now, but check if we can use this as a performance optimization, e.g. for first frame rendering after an app restart
+    supportsHydration: false,
+
+    // TODO: is there an optimization chance in passing props directly in the view constructor? this could avoid optional prop's boxing
+    createInstance(type, props) {
+      const viewFactory = reconcilerViewRegistry.factories[type];
+      if (viewFactory == null) {
+        throw new Error(`No view registered for type: ${type}`);
+      }
+      const viewInstance = viewFactory(props);
+      const yogaNode = getViewYogaNode(viewInstance);
+      yogaNodeToViewMap.set(yogaNode, viewInstance);
+
+      updatePropsOnView(viewInstance, type, props);
+      return viewInstance;
+    },
+
+    createTextInstance() {
+      throw new Error(
+        `This should never be reached as we use the performance optimized shouldSetTextContent. Have you passed string as a children to a non-text component?`,
+      );
+    },
+
+    shouldSetTextContent(type) {
+      if (type === "Text") {
+        return true;
+      }
+      return false;
+    },
+    resetTextContent(_instance) {
+      throw new Error(
+        "This should never be reached, as text components stay as text in ReactNitro.",
+      );
+    },
+    commitTextUpdate(textInstance, _oldText, newText) {
+      textInstance.text = newText;
+    },
+
+    appendInitialChild: appendChild,
+
+    appendChild,
+
+    appendChildToContainer(container, child) {
+      appendChild(container.rootView, child);
+    },
+
+    insertBefore,
+
+    insertInContainerBefore(container, child, beforeChild) {
+      insertBefore(container.rootView, child, beforeChild);
+    },
+
+    removeChild(parentInstance, child) {
+      parentInstance.removeChild(child);
+      const parentYogaNode = getViewYogaNode(parentInstance);
+      const childYogaNode = getViewYogaNode(child);
+      globalThis.yoga.YGNodeRemoveChild(parentYogaNode, childYogaNode);
+    },
+
+    removeChildFromContainer(container, child) {
+      container.rootView.removeChild(child);
+      const parentYogaNode = getViewYogaNode(container.rootView);
+      const childYogaNode = getViewYogaNode(child);
+      globalThis.yoga.YGNodeRemoveChild(parentYogaNode, childYogaNode);
+    },
+
+    detachDeletedInstance(instance) {
+      const yogaNode = getViewYogaNode(instance);
+      yogaNodeToViewMap.delete(yogaNode);
+      // TODO: eagerly "gc", figure out if this is a good idea performance wise
+      // TODO: disabled for now, measure memory impact of this!
+      // instance.dispose();
+    },
+
+    clearContainer(container) {
+      const rootYogaNode = getViewYogaNode(container.rootView);
+      const childCount = globalThis.yoga.YGNodeGetChildCount(rootYogaNode);
+      for (let index = childCount - 1; index >= 0; index--) {
+        const childYogaNode = globalThis.yoga.YGNodeGetChild(rootYogaNode, index);
+        const child = yogaNodeToViewMap.get(childYogaNode);
+        if (child == null) {
+          throw new Error("View not found for yoga node");
+        }
+        container.rootView.removeChild(child);
+        globalThis.yoga.YGNodeRemoveChild(rootYogaNode, childYogaNode);
+      }
+    },
+
+    finalizeInitialChildren() {
+      // Called when the render phase is finishing (next is committing it).
+      // Returning false for now as at this point i don't see that there is any additional work we'd like to do.
+      return false;
+    },
+
+    getRootHostContext() {
+      return null; // not sure if we are going to use that anywhere
+    },
+    getChildHostContext(parentHostContext) {
+      return parentHostContext; // returning parent means opting out
+    },
+
+    getPublicInstance(instance) {
+      return instance;
+    },
+
+    prepareForCommit() {
+      return null;
+    },
+    resetAfterCommit(container) {
+      // called right after React has performed the tree mutations, but before layout effects
+
+      // Calculate the layout
+      const start = performance.now();
+      const rootView = container.rootView;
+      const rootViewNode = getViewYogaNode(rootView);
+      const { width, height } = rootView.getFrame();
+      globalThis.yoga.YGNodeCalculateLayout(
+        rootViewNode,
+        width,
+        height,
+        yoga.YGDirectionLTR,
+      );
+      // Iterate over all dirty nodes and update the corresponding views with the calculated layout.
+      const end = performance.now();
+      console.log(`Layout calculation took ${end - start} ms`);
+      applyLayout(rootViewNode);
+      console.log(`Layout application took ${performance.now() - end} ms`);
+    },
+    commitUpdate(instance, type, prevProps, nextProps) {
+      updatePropsOnView(instance, type, nextProps, prevProps);
+    },
+
+    preparePortalMount() {
+      // not used in ReactNitro yet
+    },
+
+    scheduleTimeout(fn, delay) {
+      return setTimeout(fn, delay ?? 0);
+    },
+    cancelTimeout(id) {
+      clearTimeout(id);
+    },
+    noTimeout: -1,
+
+    //#region scheduling
+    setCurrentUpdatePriority(priority) {
+      currentUpdatePriority = priority;
+    },
+    getCurrentUpdatePriority() {
+      return currentUpdatePriority;
+    },
+    resolveUpdatePriority() {
+      return currentUpdatePriority;
+    },
+    scheduleMicrotask(fn) {
+      return globalThis.queueMicrotask(fn);
+    },
+    shouldAttemptEagerTransition() {
+      // whether React should try rendering the current event’s transition synchronously.
+      // returning true would force always sync rendering, maybe interesting to consider (basically disabling interrupted rendering phase)
+      return false;
+    },
+    // react's scheduler performance tracking
+    trackSchedulerEvent() {},
+    resolveEventTimeStamp() {
+      return performance.now();
+    },
+    resolveEventType() {
+      return null;
+    },
+    requestPostPaintCallback() {
+      // used for scheduling tracing
+    },
+    //#endregion
+
+    //#region suspension
+    maySuspendCommit() {
+      return false;
+    },
+    preloadInstance() {
+      return false;
+    },
+    startSuspendingCommit() {},
+    suspendInstance() {},
+    waitForCommitToBeReady() {
+      return null;
+    },
+    //#endregion
+
+    //#region not sure what those methods are yet
+    getInstanceFromNode() {
+      throw new Error("TODO: called getInstanceFromNode");
+    },
+    beforeActiveInstanceBlur() {},
+    afterActiveInstanceBlur() {},
+    prepareScopeUpdate() {
+      throw new Error("TODO: called prepareScopeUpdate");
+    },
+    getInstanceFromScope() {
+      throw new Error("TODO: called getInstanceFromScope");
+    },
+    //#endregion
+
+    //#region irrelevant for mobile
+    resetFormInstance() {},
+    NotPendingTransition: null,
+    HostTransitionContext: {
+      $$typeof: Symbol.for("react.context"),
+      // @ts-expect-error Wrongly typed, null is fine here
+      Provider: null,
+      // @ts-expect-error Wrongly typed, null is fine here
+      Consumer: null,
+      _currentValue: null,
+      _currentValue2: null,
+      _threadCount: 0,
+    },
+    //#endregion
+  };
+
+  function applyLayout(node: YGNodeRef): void {
+    const hasNewLayout = yoga.YGNodeGetHasNewLayout(node);
+    if (hasNewLayout === false) {
+      return;
+    }
+
+    const x = yoga.YGNodeLayoutGetLeft(node);
+    const y = yoga.YGNodeLayoutGetTop(node);
+    const width = yoga.YGNodeLayoutGetWidth(node);
+    const height = yoga.YGNodeLayoutGetHeight(node);
+
+    const view = yogaNodeToViewMap.get(node);
+    if (view == null) {
+      throw new Error("View not found for yoga node");
+    }
+    view.setFrame({ x, y, width, height });
+    yoga.YGNodeSetHasNewLayout(node, false);
+
+    const childCount = yoga.YGNodeGetChildCount(node);
+    for (let index = 0; index < childCount; index++) {
+      const child = yoga.YGNodeGetChild(node, index);
+      applyLayout(child);
+    }
+  }
+
+  return createReconciler(HostConfig);
+}
+
+function appendChild(parent: View, child: View): void {
+  const parentYogaNode = getViewYogaNode(parent);
+  const childYogaNode = getViewYogaNode(child);
+  const previousParent = child.parent;
+
+  parent.appendChild(child);
+  detachYogaChild(previousParent, childYogaNode);
+  const index = yoga.YGNodeGetChildCount(parentYogaNode);
+  yoga.YGNodeInsertChild(parentYogaNode, childYogaNode, index);
+}
+
+function insertBefore(parent: View, child: View, beforeChild: View): void {
+  const parentYogaNode = getViewYogaNode(parent);
+  const childYogaNode = getViewYogaNode(child);
+  const beforeChildYogaNode = getViewYogaNode(beforeChild);
+  if (childYogaNode === beforeChildYogaNode) {
+    return;
+  }
+
+  const childCount = yoga.YGNodeGetChildCount(parentYogaNode);
+  let insertionIndex = 0;
+  for (let index = 0; index < childCount; index++) {
+    const sibling = yoga.YGNodeGetChild(parentYogaNode, index);
+    if (sibling === beforeChildYogaNode) {
+      const previousParent = child.parent;
+      parent.insertBefore(child, beforeChild);
+      detachYogaChild(previousParent, childYogaNode);
+      yoga.YGNodeInsertChild(parentYogaNode, childYogaNode, insertionIndex);
+      return;
+    }
+    // Moving a child removes its old slot before the insertion takes place.
+    if (sibling !== childYogaNode) {
+      insertionIndex++;
+    }
+  }
+
+  throw new Error("Cannot insert child: beforeChild is not a child of the parent");
+}
+
+function detachYogaChild(parent: View | undefined, child: YGNodeRef): void {
+  if (parent == null) {
+    return;
+  }
+  const parentYogaNode = getViewYogaNode(parent);
+  const owner = yoga.YGNodeGetOwner(child);
+  if (owner === parentYogaNode) {
+    yoga.YGNodeRemoveChild(parentYogaNode, child);
+  }
+}
+
+const updatePropsOnView = ((
+  view: View,
+  type: ReconcilerElementType,
+  props: ReconcilerProps,
+  prevProps?: ReconcilerProps,
+) => {
+  const propSetters = reconcilerViewRegistry.propSetters[type]
+
+  // Check if a prop has been removed
+  if (prevProps != null) {
+    for (const key in prevProps) {
+      if (key in props) {
+        continue
+      }
+      if (prevProps[key] === undefined) {
+        continue
+      }
+      // Prop was reset / removed:
+      const propSetter = propSetters?.[key]
+      if (propSetter != null) {
+        propSetter(view, undefined, prevProps[key])
+      }
+    }
+  }
+
+  // A performance benchmark showed that Hermes favored scanning present keys
+  // over Object.keys() allocations or checking every supported prop.
+  for (const key in props) {
+    const propSetter = propSetters?.[key]
+    if (propSetter == null) {
+      continue
+    }
+    const propValue = props[key]
+    const previousPropValue = prevProps?.[key]
+    if (propValue === previousPropValue) {
+      continue
+    }
+    const isArray = Array.isArray(propValue)
+    const wasArray = Array.isArray(previousPropValue)
+    if (isArray && wasArray) {
+      const sameArray = arePropArraysEqual(propValue, previousPropValue)
+      if (sameArray) {
+        continue
+      }
+    }
+    propSetter(view, propValue, previousPropValue)
+  }
+  view.afterUpdate();
+});

package/src/PropSetter.ts

@@ -0,0 +1,29 @@
+export type PropSetter<Target, Props extends object> = (
+  target: Target,
+  props: Props,
+  propName: keyof Props,
+  previousProps?: Props,
+) => void;
+
+/**
+ * Takes an array of prop names, and a setter function.
+ * Whenever one of the props in the group changes, the setter function will be called with all props.
+ */
+export function groupPropSetter<Target, Props extends object>(
+  propNames: readonly (keyof Props)[],
+  setter: (target: Target, props: Props) => void,
+): PropSetter<Target, Props> {
+  return (target, props, propName, previousProps) => {
+    for (const groupedPropName of propNames) {
+      const value = props[groupedPropName];
+      const previousValue = previousProps?.[groupedPropName];
+      if (value === previousValue) {
+        continue;
+      }
+      if (propName === groupedPropName) {
+        setter(target, props);
+      }
+      return;
+    }
+  };
+}