react-native-impeller-platform 0.0.0-stage → 0.1.0

package/src/metro-shims/shims/Image.impeller.js

@@ -0,0 +1,97 @@
+'use strict';
+// <Image> for the `impeller` platform (A19 / SC-30; replaces the parity item
+// 12 placeholder View).
+//
+// WHY a shim: Libraries/Image/Image.js is a self re-export (`import Image from
+// './Image'`), so on impeller -- no .impeller.js sibling -- it resolves to
+// ITSELF and its default export is undefined. Image.ios.js cannot be used
+// either: it getEnforcing's the ImageLoader TurboModule at module load.
+//
+// This is Image.ios.js's render path: it mounts the RCTImageView host
+// component (Fabric "Image", painted by the engine) with `source` as an array,
+// resizeMode (objectFit wins, default 'cover') and tintColor (prop or style).
+// onLoadStart/onLoad/onError/onLoadEnd and defaultSource ride the native
+// component (the engine fires them, SC-31). The statics are Image.ios.js's,
+// over the engine's "ImageLoader" module.
+const React = require('react');
+const interop = (m) => (m && m.default) || m;
+const flattenStyle = interop(require('react-native/Libraries/StyleSheet/flattenStyle'));
+const StyleSheet = interop(require('react-native/Libraries/StyleSheet/StyleSheet'));
+const ImageViewNativeComponent = interop(require('react-native/Libraries/Image/ImageViewNativeComponent'));
+const {getImageSourcesFromImageProps} = require('react-native/Libraries/Image/ImageSourceUtils');
+const {convertObjectFitToResizeMode} = require('react-native/Libraries/Image/ImageUtils');
+
+const styles = StyleSheet.create({base: {overflow: 'hidden'}});
+
+function Image({ref, ...props}) {
+  const source = getImageSourcesFromImageProps(props) || {
+    uri: undefined,
+    width: undefined,
+    height: undefined,
+  };
+  let style;
+  let sources;
+  if (Array.isArray(source)) {
+    style = [styles.base, props.style];
+    sources = source;
+  } else {
+    const width = source.width ?? props.width;
+    const height = source.height ?? props.height;
+    style = [{width, height}, styles.base, props.style];
+    sources = [source];
+  }
+  const flat = flattenStyle(style);
+  const objectFit = convertObjectFitToResizeMode(flat?.objectFit);
+  const resizeMode = objectFit || props.resizeMode || flat?.resizeMode || 'cover';
+  const tintColor = props.tintColor ?? flat?.tintColor;
+  if (props.children != null) {
+    throw new Error(
+      'The <Image> component cannot contain children. If you want to render content on top of the image, consider using the <ImageBackground> component or absolute positioning.',
+    );
+  }
+  const {src, 'aria-hidden': ariaHidden, ...rest} = props;
+  const accessible = ariaHidden !== true && (props.alt !== undefined ? true : props.accessible);
+  return React.createElement(ImageViewNativeComponent, {
+    ...rest,
+    ref,
+    accessible,
+    accessibilityLabel: props['aria-label'] ?? props.accessibilityLabel ?? props.alt,
+    style,
+    resizeMode,
+    tintColor,
+    source: sources,
+  });
+}
+Image.displayName = 'Image';
+
+const TurboModuleRegistry = require('react-native/Libraries/TurboModule/TurboModuleRegistry');
+const loader = () => {
+  const m = TurboModuleRegistry.get('ImageLoader');
+  if (m == null) throw new Error('ImageLoader native module is not available');
+  return m;
+};
+const settle = (promise, uri, success, failure) => {
+  if (typeof success !== 'function') return promise;
+  promise
+    .then((sizes) => success(sizes.width, sizes.height))
+    .catch(failure || (() => console.warn('Failed to get size for image: ' + uri)));
+  return undefined;
+};
+Image.getSize = (uri, success, failure) =>
+  settle(
+    loader().getSize(uri).then(([width, height]) => ({width, height})),
+    uri,
+    success,
+    failure,
+  );
+Image.getSizeWithHeaders = (uri, headers, success, failure) =>
+  settle(loader().getSizeWithHeaders(uri, headers), uri, success, failure);
+Image.prefetch = (url) => loader().prefetchImage(url);
+Image.prefetchWithMetadata = (url, queryRootName, rootTag) =>
+  loader().prefetchImageWithMetadata(url, queryRootName, rootTag || 0);
+Image.queryCache = async (urls) => loader().queryCache(urls);
+Image.resolveAssetSource = (source) =>
+  require('react-native/Libraries/Image/resolveAssetSource').default(source);
+
+module.exports = Image;
+module.exports.default = Image;

package/src/metro-shims/shims/Platform.impeller-as-ios.js

@@ -0,0 +1,44 @@
+'use strict';
+// ENG-01a. Platform variant handed ONLY to react-native files that branch
+// `if (ios) ... else if (android) ...` with no else, and whose iOS arm is the
+// desktop-shaped one.
+//
+// WHY THIS FILE EXISTS AT ALL
+// ---------------------------
+// TextInput.js does not fail. It BRANCHES ITSELF OUT OF EXISTENCE, exactly the
+// way Alert.js did (see Alert.impeller.js). Read the real file:
+//
+//   line 555  let textInput = null;
+//   line 677  if (Platform.OS === 'ios')      { textInput = <RCTSingleline.../> }
+//   line 727  else if (Platform.OS === 'android') { textInput = <AndroidTextInput/> }
+//            (no else)
+//   line 802  return <TextAncestorContext value={true}>{textInput}</TextAncestorContext>
+//
+// On `impeller` neither arm runs, so a perfectly good <TextInput> renders
+// `null` inside a context provider. React mounts nothing, Fabric is never
+// asked for a host component, and the log is clean. Registering a
+// TextInput ComponentDescriptor in FabricHost.cpp would have changed NOTHING,
+// because the JS never reaches C++ at all. That was the whole ENG-01 dispute.
+//
+// WHY NOT JUST SET Platform.OS = 'ios'
+// ------------------------------------
+// Because it is a lie the whole bundle would read. Platform.OS === 'impeller'
+// is what selects our shims, our .impeller.js extensions, and what app code
+// branches on. Flipping it globally to 'ios' would unpick every one of those.
+// So the lie is scoped: this module is served ONLY to the specific RN files
+// named in IOS_BRANCHED, by resolved-origin path, and every other importer of
+// Platform still gets the honest 'impeller'.
+//
+// Everything except OS is delegated to the real shim, so constants/Version/
+// select/isTesting cannot drift between the two copies.
+const Platform = require('./Platform.impeller.js');
+
+const PlatformAsIos = Object.create(Platform);
+Object.defineProperty(PlatformAsIos, 'OS', {value: 'ios', enumerable: true});
+// `select` must keep honouring 'impeller' first — an app that wrote
+// Platform.select({impeller: x, ios: y}) means x, and this file is not a
+// licence to hand it y. Only the OS string is forged.
+PlatformAsIos.select = Platform.select.bind(Platform);
+
+module.exports = PlatformAsIos;
+module.exports.default = PlatformAsIos;

package/src/metro-shims/shims/Platform.impeller.js

@@ -0,0 +1,53 @@
+'use strict';
+// Platform shim for Platform.OS === 'impeller'.
+//
+// The literal below is the PACKAGING MARKER. tools/pack-and-consume.sh greps the
+// produced Metro bundle for it: if the marker is absent, the shim never made it
+// into the tarball or metro never resolved it, and the consumer path is broken --
+// regardless of whether the build "succeeded".
+const RN_IMPELLER_SHIM_MARKER = '__RN_IMPELLER_SHIM_V1__';
+
+const Platform = {
+  __constants: null,
+  OS: 'impeller',
+  get Version() {
+    return this.constants.osVersion || 0;
+  },
+  // P4: actually READ the PlatformConstants TurboModule. Until now this
+  // returned `{}`, so `Platform.constants.reactNativeVersion` was undefined and
+  // `Platform.Version` was 0 — while the native module sat there answering
+  // correctly and nothing indicated the two were not connected.
+  //
+  // TurboModuleRegistry.get (not getEnforcing): if the module is somehow
+  // absent, a Platform that reports empty constants is far better than a
+  // bundle that dies at import over a version string.
+  get constants() {
+    if (this.__constants == null) {
+      const TurboModuleRegistry = require('react-native/Libraries/TurboModule/TurboModuleRegistry');
+      const NativePlatformConstants = TurboModuleRegistry.get('PlatformConstants');
+      this.__constants = NativePlatformConstants
+        ? NativePlatformConstants.getConstants()
+        : {};
+    }
+    return this.__constants;
+  },
+  get isTesting() {
+    return this.constants.isTesting === true;
+  },
+  get isTV() {
+    return false;
+  },
+  get isVision() {
+    return false;
+  },
+  select(spec) {
+    if ('impeller' in spec) return spec.impeller;
+    if ('native' in spec) return spec.native;
+    return spec.default;
+  },
+  __marker: RN_IMPELLER_SHIM_MARKER,
+};
+
+module.exports = Platform;
+module.exports.default = Platform;
+module.exports.RN_IMPELLER_SHIM_MARKER = RN_IMPELLER_SHIM_MARKER;

package/src/metro-shims/shims/ReactNativeFeatureFlags.impeller.js

@@ -0,0 +1,40 @@
+'use strict';
+// parity item 20 (moved here from HostApp's app-level metro-shims, ENG-09b).
+// Redirect target for react-native/src/private/featureflags/
+// ReactNativeFeatureFlags on platform 'impeller' only.
+//
+// WHY THIS FILE EXISTS
+// Upstream defines shouldPressibilityUseW3CPointerEventsForHover through
+// createNativeFlagGetter, which reads NativeReactNativeFeatureFlagsCxx (a
+// TurboModule this engine does not register) and falls back to its default,
+// false, when the module is absent. An app's override() call only feeds the
+// OTHER getter family (createJavaScriptFlagGetter's shared `overrides`), so
+// overriding this flag was silently a no-op and Pressability never called
+// onHoverIn. Measured in HostApp: a synthesised hover_enter on a Button logged
+// {"hover":false}.
+//
+// The default is TRUE (SC-25): the engine delivers hover_enter/leave as W3C
+// pointer events, so a stock app (NativeWind hover:, group-hover:) works with
+// no override. An app can still override() it to false.
+//
+// Fix, scoped to this ONE flag: re-export every other flag from the real
+// module untouched, and redefine this one through createJavaScriptFlagGetter,
+// which reads the same `overrides` object override()/setOverrides install.
+//
+// The require() below reaches the REAL upstream file: the resolver exempts
+// requests whose origin IS this shim, so it is not redirected back here.
+const real = require('react-native/src/private/featureflags/ReactNativeFeatureFlags');
+const {
+  createJavaScriptFlagGetter,
+} = require('react-native/src/private/featureflags/ReactNativeFeatureFlagsBase');
+
+const shim = Object.create(real);
+Object.defineProperty(shim, 'shouldPressibilityUseW3CPointerEventsForHover', {
+  value: createJavaScriptFlagGetter(
+    'shouldPressibilityUseW3CPointerEventsForHover',
+    true,
+  ),
+  enumerable: true,
+});
+
+module.exports = shim;

package/src/metro-shims/shims/ReactNativeStyleAttributes.impeller.js

@@ -0,0 +1,20 @@
+'use strict';
+// SC-18. RN sends style.fontFamily to Fabric untouched, and the C++ prop parser
+// only accepts a string, so NativeWind's `font-mono` (an array) failed with
+// "Error while converting prop 'fontFamily'". Re-export RN's own table with a
+// fontFamily processor that joins arrays into one CSS stack; the engine picks
+// the first family in the stack that resolves (engine/text/FontFamily.cpp).
+// Required by explicit path from this file, which index.js does not redirect.
+const real = require('react-native/Libraries/Components/View/ReactNativeStyleAttributes');
+const attributes = real.default || real;
+
+function processFontFamily(value) {
+  if (Array.isArray(value)) {
+    return value.filter((v) => typeof v === 'string' && v.length > 0).join(', ');
+  }
+  return value;
+}
+
+attributes.fontFamily = {process: processFontFamily};
+
+module.exports = real;

package/src/metro-shims/shims/TextInputState.impeller.js

@@ -0,0 +1,100 @@
+'use strict';
+// parity item 7. TextInputState for the `impeller` platform.
+//
+// WHY THIS EXISTS: RN's TextInputState.js sends the native focus/blur COMMAND
+// only inside `if (Platform.OS === 'ios') ... else if (Platform.OS ===
+// 'android')`, with no else. It reads Platform through a top-level
+// `const Platform = require(...).default`, which Metro's inline-platform
+// transform (metro-transform-plugins/src/utils/createInlinePlatformChecks.js)
+// rewrites to the BUILD platform string ('impeller') before any resolver shim
+// runs. Both branches are then dead code, the minifier deletes them, and
+// TextInput ref.focus()/ref.blur() update JS bookkeeping and send nothing.
+// The Platform-swap trick that fixes TextInput.js cannot reach this file
+// (that file uses an ES import, which the inline pass does not match).
+//
+// NOT A DELEGATING WRAPPER: there is no .ios.js sibling to delegate to, and
+// requiring the real file would redirect straight back here (SHIM_TARGETS
+// matches the resolved path). So this is the upstream module with the
+// platform branch fixed to the iOS commands, which target the same
+// RCTSinglelineTextInputView that TextInput.js mounts on impeller. Every
+// importer resolves here, so the focused-input bookkeeping stays single.
+const {findNodeHandle} = require('react-native/Libraries/ReactNative/RendererProxy');
+const {
+  Commands: iOSTextInputCommands,
+} = require('react-native/Libraries/Components/TextInput/RCTSingelineTextInputNativeComponent');
+
+let currentlyFocusedInputRef = null;
+const inputs = new Set();
+
+function currentlyFocusedInput() {
+  return currentlyFocusedInputRef;
+}
+
+function currentlyFocusedField() {
+  return findNodeHandle(currentlyFocusedInputRef);
+}
+
+function focusInput(textField) {
+  if (currentlyFocusedInputRef !== textField && textField != null) {
+    currentlyFocusedInputRef = textField;
+  }
+}
+
+function blurInput(textField) {
+  if (currentlyFocusedInputRef === textField && textField != null) {
+    currentlyFocusedInputRef = null;
+  }
+}
+
+function focusField() {}
+function blurField() {}
+
+function focusTextInput(textField) {
+  if (typeof textField === 'number' || textField == null) return;
+  const fieldCanBeFocused =
+    currentlyFocusedInputRef !== textField &&
+    textField.currentProps?.editable !== false;
+  if (!fieldCanBeFocused) return;
+  focusInput(textField);
+  iOSTextInputCommands.focus(textField);
+}
+
+function blurTextInput(textField) {
+  if (typeof textField === 'number') return;
+  if (currentlyFocusedInputRef === textField && textField != null) {
+    blurInput(textField);
+    iOSTextInputCommands.blur(textField);
+  }
+}
+
+function registerInput(textField) {
+  if (typeof textField === 'number') return;
+  inputs.add(textField);
+}
+
+function unregisterInput(textField) {
+  if (typeof textField === 'number') return;
+  inputs.delete(textField);
+}
+
+function isTextInput(textField) {
+  if (typeof textField === 'number') return false;
+  return inputs.has(textField);
+}
+
+const TextInputState = {
+  currentlyFocusedInput,
+  focusInput,
+  blurInput,
+  currentlyFocusedField,
+  focusField,
+  blurField,
+  focusTextInput,
+  blurTextInput,
+  registerInput,
+  unregisterInput,
+  isTextInput,
+};
+
+module.exports = TextInputState;
+module.exports.default = TextInputState;

package/src/metro-shims/shims/ViewConfigIgnore.impeller.js

@@ -0,0 +1,55 @@
+'use strict';
+// desktop-input-gap item 6. ConditionallyIgnoredEventHandlers for 'impeller'.
+//
+// WHY THIS EXISTS: RN core's ViewConfigIgnore.js strips onClick/onPointerDown/
+// onPointerUp/onPointerEnter/... out of BaseViewConfig's validAttributes
+// unless Platform.OS === 'ios' (ConditionallyIgnoredEventHandlers returns the
+// object UNCHANGED on ios, `undefined` on every other platform, including our
+// own 'impeller'). A stripped validAttribute means React never forwards the
+// onClick/onPointer* PROP into the native view config at all, so
+// PointerEventsProcessor::shouldEmitPointerEvent reads an all-zero ViewEvents
+// bitset and swallows the event before it reaches JS -- even though
+// FabricHost dispatches a perfectly correct PointerEvent on the C++ side.
+// NATIVE FIRES, JS NEVER HEARS. Measured 2026-09-30: a real --hover-after-frames
+// run printed native `hover_enter`/`cursor=` lines while the fixture's JS
+// onPointerEnter console.log never fired, with a clean exit and no error.
+//
+// NOT A DELEGATING WRAPPER. ViewConfigIgnore.js has no `.ios.js`/`.android.js`
+// sibling, so BaseViewConfig.impeller.js's trick (require the sibling by its
+// EXPLICIT platform extension, bypassing the redirect machinery) is
+// unavailable here: requiring the bare specifier from inside this file would
+// be redirected straight back to this same file by shimForResolvedPath
+// (SHIM_TARGETS matches the RESOLVED path, not who asked), an infinite
+// require cycle. So this reimplements the ~15 lines of real upstream logic
+// instead of delegating to them; every caller on the impeller platform
+// resolves to this one file, so the WeakSet stays globally consistent.
+const ignoredViewConfigProps = new WeakSet();
+
+function DynamicallyInjectedByGestureHandler(object) {
+  ignoredViewConfigProps.add(object);
+  return object;
+}
+
+// THE FIX: unconditionally honour onPointerDown/onPointerUp/onClick/... on
+// the impeller platform, instead of upstream's `OS === 'ios' ? value :
+// undefined`. See the file header for why stripping these is a native-fires/
+// JS-never-hears bug, not a feature gate.
+function ConditionallyIgnoredEventHandlers(value) {
+  return value;
+}
+
+function isIgnored(value) {
+  if (typeof value === 'object' && value != null) {
+    return ignoredViewConfigProps.has(value);
+  }
+  return false;
+}
+
+module.exports = {
+  DynamicallyInjectedByGestureHandler,
+  ConditionallyIgnoredEventHandlers,
+  isIgnored,
+};
+module.exports.DynamicallyInjectedByGestureHandler = DynamicallyInjectedByGestureHandler;
+module.exports.ConditionallyIgnoredEventHandlers = ConditionallyIgnoredEventHandlers;
+module.exports.isIgnored = isIgnored;

package/src/metro-shims/shims/reanimated/clock.js

@@ -0,0 +1,41 @@
+'use strict';
+// SC-26. The one JS-thread frame loop behind every animation in the
+// reanimated stub. requestAnimationFrame on impeller is a setTimeout(0), so a
+// rAF loop busy-spins the JS thread; frames are paced with setTimeout(16) and
+// timed with performance.now(). The loop stops when nothing animates, so an
+// idle app holds no timer (headless captures wait for JS idle).
+const FRAME_MS = 16;
+const subscribers = new Set();
+let timer = null;
+
+function now() {
+  return typeof performance !== 'undefined' && performance.now ? performance.now() : Date.now();
+}
+
+function tick() {
+  timer = null;
+  const t = now();
+  for (const fn of Array.from(subscribers)) {
+    let keep = false;
+    try {
+      keep = fn(t);
+    } catch (e) {
+      console.error(e);
+    }
+    if (!keep) subscribers.delete(fn);
+  }
+  schedule();
+}
+
+function schedule() {
+  if (timer == null && subscribers.size > 0) timer = setTimeout(tick, FRAME_MS);
+}
+
+// fn(now) runs once per frame while it returns true.
+function onFrame(fn) {
+  subscribers.add(fn);
+  schedule();
+  return () => subscribers.delete(fn);
+}
+
+module.exports = {now, onFrame};

package/src/metro-shims/shims/reanimated/component.js

@@ -0,0 +1,83 @@
+'use strict';
+// SC-26. createAnimatedComponent for the stub: a wrapper that resolves
+// useAnimatedStyle / useAnimatedProps handles and CSS animation/transition
+// style props to plain values on every render, and re-renders itself on the
+// clock while anything is moving.
+const React = require('react');
+const {StyleSheet} = require('react-native');
+const {now, onFrame} = require('./clock');
+const {HANDLE} = require('./hooks');
+const css = require('./css');
+
+// Replace every animated-style handle in a (nested) style with its current
+// values, collecting the handles to subscribe to.
+function resolveHandles(style, handles) {
+  if (Array.isArray(style)) return style.map((s) => resolveHandles(s, handles));
+  if (style && typeof style === 'object' && style[HANDLE]) {
+    handles.push(style[HANDLE]);
+    return style[HANDLE].current();
+  }
+  return style;
+}
+
+function useFrames(activeRef, force) {
+  const stop = React.useRef(null);
+  React.useEffect(() => {
+    if (activeRef.current && !stop.current) {
+      stop.current = onFrame(() => {
+        if (!activeRef.current) {
+          stop.current = null;
+          return false;
+        }
+        force();
+        return true;
+      });
+    }
+  });
+  React.useEffect(() => () => stop.current && stop.current(), []);
+}
+
+const cache = new WeakMap();
+
+function createAnimatedComponent(Component) {
+  if (Component == null || (typeof Component !== 'function' && typeof Component !== 'object')) return Component;
+  if (cache.has(Component)) return cache.get(Component);
+  function Animated(props, ref) {
+    const {style, animatedProps, entering, exiting, layout, ...rest} = props;
+    const [, force] = React.useReducer((x) => x + 1, 0);
+    const handles = [];
+    const resolved = resolveHandles(style, handles);
+    let extra = null;
+    if (animatedProps && animatedProps[HANDLE]) {
+      handles.push(animatedProps[HANDLE]);
+      extra = animatedProps[HANDLE].current();
+    }
+    React.useEffect(() => {
+      const unsubs = handles.map((h) => h.subscribe(force));
+      return () => unsubs.forEach((u) => u());
+    });
+    const state = React.useRef(null);
+    if (!state.current) state.current = css.newState();
+    const activeRef = React.useRef(false);
+    const flat = StyleSheet.flatten(resolved) || {};
+    const parts = css.split(flat);
+    let finalStyle = style;
+    if (parts.css || state.current.last) {
+      const r = css.evaluate(state.current, parts.base, parts.css, now());
+      activeRef.current = r.active;
+      finalStyle = r.style;
+    } else if (handles.length) {
+      finalStyle = flat;
+    }
+    useFrames(activeRef, force);
+    return React.createElement(Component, {...rest, ...(extra || {}), style: finalStyle, ref});
+  }
+  const name = Component.displayName || Component.name || 'Component';
+  Animated.displayName = `AnimatedComponent(${name})`;
+  const Wrapped = React.forwardRef(Animated);
+  Wrapped.displayName = Animated.displayName;
+  cache.set(Component, Wrapped);
+  return Wrapped;
+}
+
+module.exports = {createAnimatedComponent};