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

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

@@ -0,0 +1,264 @@
+'use strict';
+// SC-26. Shared values and the with* animations of the reanimated stub, run
+// on the JS thread by clock.js. An animation is a plain object with
+// start(from, now) and frame(now) -> done; assigning one to sv.value runs it.
+const {now, onFrame} = require('./clock');
+const {Easing, toEasing} = require('./easing');
+const {mix} = require('./interpolate');
+
+const ANIM = Symbol.for('rni.reanimated.animation');
+const isAnimation = (v) => v != null && typeof v === 'object' && v[ANIM] === true;
+
+// Shared values read while a tracker is set are recorded (useAnimatedStyle /
+// useDerivedValue re-run when one of them changes).
+let tracker = null;
+function track(fn) {
+  const prev = tracker;
+  const seen = new Set();
+  tracker = seen;
+  try {
+    return {result: fn(), deps: seen};
+  } finally {
+    tracker = prev;
+  }
+}
+
+class SharedValue {
+  constructor(v) {
+    this._value = v;
+    this._anim = null;
+    this._listeners = new Map();
+    this._seq = 0;
+  }
+  get value() {
+    if (tracker) tracker.add(this);
+    return this._value;
+  }
+  set value(v) {
+    this._anim = null;
+    if (isAnimation(v)) {
+      const anim = v;
+      this._anim = anim;
+      anim.start(this._value, now());
+      onFrame((t) => {
+        if (this._anim !== anim) return false;
+        const done = anim.frame(t);
+        this._write(anim.current);
+        if (done) {
+          this._anim = null;
+          anim.finish(true);
+        }
+        return !done;
+      });
+      return;
+    }
+    this._write(v);
+  }
+  _write(v) {
+    this._value = v;
+    for (const fn of Array.from(this._listeners.values())) fn(v);
+  }
+  get() {
+    return this.value;
+  }
+  set(v) {
+    this.value = typeof v === 'function' ? v(this._value) : v;
+  }
+  modify(fn) {
+    if (fn) this.value = fn(this._value);
+  }
+  addListener(id, fn) {
+    this._listeners.set(id, fn);
+  }
+  removeListener(id) {
+    this._listeners.delete(id);
+  }
+  // internal: subscribe with an auto id
+  _subscribe(fn) {
+    const id = `__rni${this._seq++}`;
+    this._listeners.set(id, fn);
+    return () => this._listeners.delete(id);
+  }
+  _cancel() {
+    const a = this._anim;
+    this._anim = null;
+    if (a) a.finish(false);
+  }
+}
+
+const makeMutable = (v) => new SharedValue(v);
+const cancelAnimation = (sv) => sv && sv._cancel && sv._cancel();
+
+function animation(spec, callback) {
+  // defineProperties, not spread: withDelay forwards toValue through accessors.
+  const a = {
+    [ANIM]: true,
+    current: undefined,
+    finish(ok) {
+      if (callback) callback(ok, this.current);
+    },
+  };
+  return Object.defineProperties(a, Object.getOwnPropertyDescriptors(spec));
+}
+
+function withTiming(toValue, config, callback) {
+  const duration = config && config.duration != null ? config.duration : 300;
+  const ease = toEasing(config && config.easing, Easing.inOut(Easing.quad));
+  return animation({
+    toValue,
+    start(from, t) {
+      this.from = from;
+      this.t0 = t;
+      this.current = from;
+    },
+    frame(t) {
+      const p = duration <= 0 ? 1 : Math.min(1, (t - this.t0) / duration);
+      this.current = p >= 1 ? this.toValue : mix(this.from, this.toValue, ease(p));
+      return p >= 1;
+    },
+  }, callback);
+}
+
+// Damped harmonic oscillator, Reanimated 3's defaults, integrated in 1 ms
+// steps so the result does not depend on the frame rate.
+function withSpring(toValue, config, callback) {
+  const c = {mass: 1, stiffness: 100, damping: 10, velocity: 0, overshootClamping: false,
+    restDisplacementThreshold: 0.01, restSpeedThreshold: 2, ...(config || {})};
+  return animation({
+    toValue,
+    start(from, t) {
+      this.x = typeof from === 'number' ? from : toValue;
+      this.v = c.velocity;
+      this.t = t;
+      this.current = this.x;
+    },
+    frame(t) {
+      const to = this.toValue;
+      let steps = Math.min(Math.max(0, Math.round(t - this.t)), 1000);
+      this.t = t;
+      while (steps-- > 0) {
+        const a = (-c.stiffness * (this.x - to) - c.damping * this.v) / c.mass;
+        this.v += a * 0.001;
+        this.x += this.v * 0.001;
+      }
+      const overshot = c.overshootClamping && (this.x - to) * (this.current - to) < 0;
+      const rest = Math.abs(this.x - to) < c.restDisplacementThreshold && Math.abs(this.v) < c.restSpeedThreshold;
+      this.current = overshot || rest ? to : this.x;
+      return overshot || rest;
+    },
+  }, callback);
+}
+
+function withDecay(config, callback) {
+  const c = {velocity: 0, deceleration: 0.998, ...(config || {})};
+  return animation({
+    start(from, t) {
+      this.x = typeof from === 'number' ? from : 0;
+      this.v = c.velocity;
+      this.t = t;
+      this.current = this.x;
+    },
+    frame(t) {
+      const dt = Math.max(0, t - this.t);
+      this.t = t;
+      const k = Math.pow(c.deceleration, dt);
+      this.x += (this.v / 1000) * ((1 - k) / (1 - c.deceleration));
+      this.v *= k;
+      let done = Math.abs(this.v) < 0.5;
+      if (Array.isArray(c.clamp)) {
+        const [lo, hi] = c.clamp;
+        if (this.x <= lo || this.x >= hi) {
+          this.x = Math.min(Math.max(this.x, lo), hi);
+          done = true;
+        }
+      }
+      this.current = this.x;
+      return done;
+    },
+  }, callback);
+}
+
+const toAnim = (a) => (isAnimation(a) ? a : withTiming(a, {duration: 0}));
+
+function withDelay(delayMs, inner) {
+  const a = toAnim(inner);
+  return animation({
+    get toValue() {
+      return a.toValue;
+    },
+    set toValue(v) {
+      a.toValue = v;
+    },
+    start(from, t) {
+      this.t0 = t;
+      this.from = from;
+      this.started = false;
+      this.current = from;
+    },
+    frame(t) {
+      if (t - this.t0 < delayMs) return false;
+      if (!this.started) {
+        this.started = true;
+        a.start(this.from, this.t0 + delayMs);
+      }
+      const done = a.frame(t);
+      this.current = a.current;
+      if (done) a.finish(true);
+      return done;
+    },
+  });
+}
+
+function withSequence(...inners) {
+  const list = inners.map(toAnim);
+  return animation({
+    start(from, t) {
+      this.i = 0;
+      this.current = from;
+      if (list.length) list[0].start(from, t);
+    },
+    frame(t) {
+      while (this.i < list.length) {
+        const a = list[this.i];
+        const done = a.frame(t);
+        this.current = a.current;
+        if (!done) return false;
+        a.finish(true);
+        this.i++;
+        if (this.i < list.length) list[this.i].start(this.current, t);
+      }
+      return true;
+    },
+  });
+}
+
+// numberOfReps <= 0 repeats forever; reverse swaps the inner animation's
+// target with its start value on every other run.
+function withRepeat(inner, numberOfReps = 2, reverse = false, callback) {
+  const a = toAnim(inner);
+  return animation({
+    start(from, t) {
+      this.n = 0;
+      this.origin = from;
+      this.target = a.toValue;
+      this.current = from;
+      a.start(from, t);
+    },
+    frame(t) {
+      const done = a.frame(t);
+      this.current = a.current;
+      if (!done) return false;
+      a.finish(true);
+      this.n++;
+      if (numberOfReps > 0 && this.n >= numberOfReps) return true;
+      if (reverse && 'toValue' in a) a.toValue = this.n % 2 ? this.origin : this.target;
+      a.start(reverse ? this.current : this.origin, t);
+      return false;
+    },
+  }, callback);
+}
+
+module.exports = {
+  SharedValue, makeMutable, isAnimation, track, cancelAnimation,
+  withTiming, withSpring, withDecay, withDelay, withSequence, withRepeat,
+};

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

@@ -0,0 +1,90 @@
+'use strict';
+// ENG-19 (moved from HostApp's app-level metro-shims/reanimated-stub.js).
+// react-native-reanimated for the `impeller` platform.
+//
+// WHY: the engine vends no Reanimated / Worklets native module, so the real
+// package cannot initialise, and an app that does not install it cannot even
+// BUNDLE: react-native-css (NativeWind 5) require()s 'react-native-reanimated'
+// from native/reanimated.js on every className render that carries a
+// transition/animation, and Gluestack's motion parts import it at module top.
+//
+// WHAT IT DOES (SC-26): animated components are wrappers that re-render on a
+// JS-thread clock, shared values and with* helpers really animate, and
+// react-native-css transitions / animate-* move. Layout-animation presets stay
+// chainable no-ops. Resolved only when the app has NOT
+// installed react-native-reanimated itself (see metro-shims/index.js).
+const RN = require('react-native');
+const {createAnimatedComponent: animated} = require('./reanimated/component');
+const hooks = require('./reanimated/hooks');
+const values = require('./reanimated/values');
+const {Easing: StubEasing, cubicBezier, cssSteps} = require('./reanimated/easing');
+const {interpolate: interp} = require('./reanimated/interpolate');
+
+// Chainable layout-animation builder: FadeIn.duration(200).delay(50) etc. all
+// return the same inert object.
+const preset = new Proxy(function () {}, {
+  get: (t, k) => (k === '__esModule' ? false : k === 'build' ? () => () => ({}) : () => preset),
+  apply: () => preset,
+});
+
+const Animated = {
+  View: animated(RN.View),
+  Text: animated(RN.Text),
+  Image: animated(RN.Image),
+  ScrollView: animated(RN.ScrollView),
+  FlatList: animated(RN.FlatList),
+  createAnimatedComponent: animated,
+};
+
+const sharedValue = (v) => ({value: v, get: () => v, set: () => {}, modify: () => {}});
+
+module.exports = {
+  __esModule: true,
+  __impellerStub: true,
+  default: Animated,
+  createAnimatedComponent: animated,
+  // layout-animation presets Gluestack's parts reference
+  FadeIn: preset,
+  FadeOut: preset,
+  FadeInUp: preset,
+  FadeInDown: preset,
+  FadeOutUp: preset,
+  FadeOutDown: preset,
+  ZoomIn: preset,
+  ZoomOut: preset,
+  SlideInDown: preset,
+  SlideOutDown: preset,
+  SlideInUp: preset,
+  SlideOutUp: preset,
+  SlideInLeft: preset,
+  SlideOutLeft: preset,
+  SlideInRight: preset,
+  SlideOutRight: preset,
+  Layout: preset,
+  LinearTransition: preset,
+  // hooks and animation helpers (JS-thread implementation, see ./reanimated/)
+  useSharedValue: hooks.useSharedValue,
+  useDerivedValue: hooks.useDerivedValue,
+  useAnimatedStyle: hooks.useAnimatedStyle,
+  useAnimatedProps: hooks.useAnimatedProps,
+  useAnimatedRef: () => ({current: null}),
+  useAnimatedReaction: hooks.useAnimatedReaction,
+  useAnimatedScrollHandler: hooks.useAnimatedScrollHandler,
+  useReducedMotion: () => false,
+  withTiming: values.withTiming,
+  withSpring: values.withSpring,
+  withDecay: values.withDecay,
+  withDelay: values.withDelay,
+  withRepeat: values.withRepeat,
+  withSequence: values.withSequence,
+  cancelAnimation: values.cancelAnimation,
+  runOnJS: (f) => f,
+  runOnUI: (f) => f,
+  interpolate: interp,
+  Extrapolation: {CLAMP: 'clamp', EXTEND: 'extend', IDENTITY: 'identity'},
+  ReduceMotion: {System: 'system', Always: 'always', Never: 'never'},
+  Easing: StubEasing,
+  // CSS-animation timing helpers react-native-css reads
+  cubicBezier,
+  steps: cssSteps,
+};

package/src/notifications/index.d.ts

@@ -0,0 +1,44 @@
+// Types for react-native-impeller-platform/src/notifications.
+
+export type PermissionStatus = 'granted' | 'denied' | 'unavailable' | 'error';
+export type ShowStatus = 'shown' | 'denied' | 'unavailable' | 'error';
+
+export interface PermissionResult {
+  status: PermissionStatus;
+  /** Present when status is not 'granted'. */
+  reason?: string;
+}
+
+export interface ShowOptions<Data = unknown> {
+  title: string;
+  body?: string;
+  /** Showing an id that is already on screen replaces it. Generated when omitted. */
+  id?: string;
+  /** Any JSON-serialisable value. It comes back unchanged in the press event. */
+  data?: Data;
+}
+
+export interface ShowResult {
+  status: ShowStatus;
+  id: string;
+  reason?: string;
+}
+
+export interface PressEvent<Data = unknown> {
+  id: string;
+  /** 'default': the user clicked the notification. */
+  action: string;
+  data: Data | null;
+}
+
+export interface Subscription {
+  remove(): void;
+}
+
+export const PRESS_EVENT: 'rniNotificationPress';
+
+export function requestPermission(): Promise<PermissionResult>;
+export function show<Data = unknown>(options: ShowOptions<Data>): Promise<ShowResult>;
+export function onPress<Data = unknown>(
+  listener: (event: PressEvent<Data>) => void,
+): Subscription;

package/src/notifications/index.js

@@ -0,0 +1,95 @@
+'use strict';
+// Desktop notifications, the JS half of the engine's Notifications module.
+//
+//   requestPermission() -> Promise<{status, reason?}>
+//   show({title, body, id, data}) -> Promise<{status, id, reason?}>
+//   onPress(listener) -> {remove()}; listener gets {id, data, action}
+//
+// The engine owns the OS call (freedesktop D-Bus on Linux,
+// UNUserNotificationCenter on macOS, toast notifications on Windows). This
+// file owns the shape: argument checks, the JSON encoding of `data`, and the
+// subscription. `data` goes to native as a JSON string and comes back on press
+// unchanged, so native never has to understand it.
+//
+// Nothing here throws for a missing capability. An engine without the module
+// (built before it existed, or running on a platform with no backend) answers
+// {status: 'unavailable', reason}, the same answer the engine gives when the
+// OS service is missing. Bad arguments are programmer errors and reject.
+
+const {DeviceEventEmitter, TurboModuleRegistry} = require('react-native');
+
+// get, not getEnforcing: a missing module must fail this feature, not the
+// whole bundle at import time.
+const Native = TurboModuleRegistry.get('Notifications');
+
+// Emitted by the engine (ReactHost.cpp) when the user clicks a notification
+// this app showed.
+const PRESS_EVENT = 'rniNotificationPress';
+
+const MISSING_REASON =
+  'this engine has no Notifications module (run `rn-impeller --list-modules` to check)';
+
+let generated = 0;
+
+async function requestPermission() {
+  if (Native == null) return {status: 'unavailable', reason: MISSING_REASON};
+  return Native.requestPermission();
+}
+
+function checkOptions(options) {
+  if (options == null || typeof options !== 'object') {
+    throw new TypeError('show() wants an options object {title, body, id, data}');
+  }
+  const {title, body = '', id} = options;
+  if (typeof title !== 'string' || title.length === 0) {
+    throw new TypeError('show(): title must be a non-empty string');
+  }
+  if (typeof body !== 'string') {
+    throw new TypeError('show(): body must be a string');
+  }
+  if (id != null && (typeof id !== 'string' || id.length === 0)) {
+    throw new TypeError('show(): id must be a non-empty string when given');
+  }
+  let dataJson;
+  try {
+    dataJson = JSON.stringify(options.data === undefined ? null : options.data);
+  } catch (error) {
+    throw new TypeError('show(): data must be JSON-serialisable: ' + error.message);
+  }
+  if (dataJson === undefined) {
+    // JSON.stringify returns undefined for a function or a symbol.
+    throw new TypeError('show(): data must be JSON-serialisable');
+  }
+  generated += 1;
+  return {title, body, id: id == null ? `rni-${Date.now()}-${generated}` : id, dataJson};
+}
+
+// Showing an id that is already on screen replaces that notification.
+async function show(options) {
+  const {title, body, id, dataJson} = checkOptions(options);
+  if (Native == null) return {status: 'unavailable', id, reason: MISSING_REASON};
+  const result = await Native.show(title, body, id, dataJson);
+  return {...result, id};
+}
+
+function decodeData(raw) {
+  if (typeof raw !== 'string') return null;
+  try {
+    return JSON.parse(raw);
+  } catch (error) {
+    // Native echoes exactly what show() encoded, so this only happens for a
+    // payload that did not come from this file. Report it as no data.
+    return null;
+  }
+}
+
+function onPress(listener) {
+  if (typeof listener !== 'function') {
+    throw new TypeError('onPress() wants a function');
+  }
+  return DeviceEventEmitter.addListener(PRESS_EVENT, event => {
+    listener({id: event.id, action: event.action, data: decodeData(event.data)});
+  });
+}
+
+module.exports = {requestPermission, show, onPress, PRESS_EVENT};

package/src/platformview/index.js

@@ -0,0 +1,23 @@
+'use strict';
+// FP-44 — platform views (Flutter's PlatformViewLayer + ExternalViewEmbedder).
+//
+// <ImpellerPlatformView color="#00aa00" style={...} /> is a native OS child view
+// (an X11 child window on linux windowed GL) that the engine positions, clips
+// and stacks to the view's box every frame; RN content drawn after it in paint
+// order is composited above it. This first native view is a solid colour.
+// Translate and rect clips are composited; scale/rotate/skew are not (the view
+// is placed at the transformed bounds and the engine logs
+// `platform_view_unsupported`). Hosts without an embedder (darwin, Windows,
+// headless) paint the colour in place.
+
+const {processColor} = require('react-native');
+const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry');
+
+const ImpellerPlatformView = NativeComponentRegistry.get('ImpellerPlatformView', () => ({
+  uiViewClassName: 'ImpellerPlatformView',
+  bubblingEventTypes: {},
+  directEventTypes: {},
+  validAttributes: {color: {process: processColor}},
+}));
+
+module.exports = {ImpellerPlatformView};