react-native-impeller-platform 0.0.0-bootstrap.0 → 0.1.0

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

@@ -0,0 +1,193 @@
+'use strict';
+// SC-26. CSS animations and transitions as react-native-css hands them to an
+// Animated component (Reanimated 4's style props): animationName is a
+// keyframes object {'from'|'to'|'0.5'|'75%, to': style}, durations and delays
+// are ms, lists cycle per CSS. Evaluated on every render of the component at
+// clock.now(); `active` says whether another frame is needed.
+const {mix} = require('./interpolate');
+const {toEasing} = require('./easing');
+
+const CSS_KEYS = ['animationName', 'animationDuration', 'animationDelay', 'animationIterationCount',
+  'animationDirection', 'animationFillMode', 'animationPlayState', 'animationTimingFunction',
+  'transitionProperty', 'transitionDuration', 'transitionDelay', 'transitionTimingFunction',
+  'transitionBehavior'];
+
+const list = (v) => (v === undefined ? [] : Array.isArray(v) ? v : [v]);
+const nth = (v, i, d) => {
+  const l = list(v);
+  return l.length ? l[i % l.length] : d;
+};
+const same = (a, b) => a === b || JSON.stringify(a) === JSON.stringify(b);
+
+// Split a flattened style into the paintable style and the CSS motion props.
+function split(style) {
+  const base = {};
+  const css = {};
+  let any = false;
+  for (const k of Object.keys(style || {})) {
+    if (CSS_KEYS.includes(k)) {
+      css[k] = style[k];
+      any = true;
+    } else {
+      base[k] = style[k];
+    }
+  }
+  return {base, css: any ? css : null};
+}
+
+function offsets(key) {
+  return String(key).split(',').map((s) => {
+    const t = s.trim();
+    if (t === 'from') return 0;
+    if (t === 'to') return 1;
+    return t.endsWith('%') ? parseFloat(t) / 100 : parseFloat(t);
+  }).filter((n) => n >= 0 && n <= 1);
+}
+
+// keyframes object -> {prop: [{o, v, ease}]} sorted by offset.
+function compile(frames) {
+  const tracks = {};
+  for (const key of Object.keys(frames || {})) {
+    const decl = frames[key] || {};
+    const ease = decl.animationTimingFunction;
+    for (const o of offsets(key)) {
+      for (const p of Object.keys(decl)) {
+        if (p === 'animationTimingFunction') continue;
+        (tracks[p] = tracks[p] || []).push({o, v: decl[p], ease});
+      }
+    }
+  }
+  for (const p of Object.keys(tracks)) tracks[p].sort((a, b) => a.o - b.o);
+  return tracks;
+}
+
+function neutral(prop, base) {
+  if (base[prop] !== undefined) return base[prop];
+  if (prop === 'opacity') return 1;
+  if (prop === 'transform') return [];
+  if (/color$/i.test(prop)) return 'transparent';
+  return 0;
+}
+
+function sample(track, prop, base, p, ease) {
+  const pts = track.slice();
+  if (pts[0].o > 0) pts.unshift({o: 0, v: neutral(prop, base)});
+  if (pts[pts.length - 1].o < 1) pts.push({o: 1, v: neutral(prop, base)});
+  let i = 0;
+  while (i < pts.length - 2 && p > pts[i + 1].o) i++;
+  const a = pts[i];
+  const b = pts[i + 1];
+  const span = b.o - a.o;
+  const local = span <= 0 ? 1 : Math.min(1, Math.max(0, (p - a.o) / span));
+  const e = a.ease !== undefined ? toEasing(a.ease) : ease;
+  return mix(a.v, b.v, e(local));
+}
+
+// Iteration progress of animation i at time t, or null when it has no effect.
+function progress(st, css, i, t) {
+  const duration = nth(css.animationDuration, i, 0);
+  const delay = nth(css.animationDelay, i, 0);
+  const countRaw = nth(css.animationIterationCount, i, 1);
+  const count = countRaw === 'infinite' ? Infinity : Number(countRaw);
+  const dir = nth(css.animationDirection, i, 'normal');
+  const fill = nth(css.animationFillMode, i, 'none');
+  const active = ((st.pausedAt != null ? st.pausedAt : t) - st.origin) - delay;
+  const flip = (n, f) => {
+    const rev = dir === 'reverse' || (dir === 'alternate' && n % 2 === 1) || (dir === 'alternate-reverse' && n % 2 === 0);
+    return rev ? 1 - f : f;
+  };
+  if (active < 0) {
+    return {p: fill === 'backwards' || fill === 'both' ? flip(0, 0) : null, running: st.pausedAt == null};
+  }
+  const total = duration * count;
+  if (duration <= 0 || active >= total) {
+    if (fill !== 'forwards' && fill !== 'both') return {p: null, running: false};
+    const n = Math.max(0, Math.ceil(count) - 1);
+    const end = count % 1 === 0 || !isFinite(count) ? 1 : count % 1;
+    return {p: flip(n, end), running: false};
+  }
+  const n = Math.floor(active / duration);
+  return {p: flip(n, (active - n * duration) / duration), running: st.pausedAt == null};
+}
+
+function animations(state, base, css, out, t) {
+  const names = list(css.animationName);
+  const next = [];
+  let running = false;
+  names.forEach((frames, i) => {
+    if (!frames || typeof frames !== 'object') return;
+    const key = JSON.stringify(frames) + '|' + nth(css.animationDuration, i, 0);
+    let st = state.anims.find((s) => s.key === key && !next.includes(s));
+    if (!st) st = {key, tracks: compile(frames), origin: t, pausedAt: null};
+    const paused = nth(css.animationPlayState, i, 'running') === 'paused';
+    if (paused && st.pausedAt == null) st.pausedAt = t;
+    if (!paused && st.pausedAt != null) {
+      st.origin += t - st.pausedAt;
+      st.pausedAt = null;
+    }
+    next.push(st);
+    const r = progress(st, css, i, t);
+    running = running || r.running;
+    if (r.p == null) return;
+    const ease = toEasing(nth(css.animationTimingFunction, i, 'ease'));
+    for (const prop of Object.keys(st.tracks)) out[prop] = sample(st.tracks[prop], prop, base, r.p, ease);
+  });
+  state.anims = next;
+  return running;
+}
+
+function transitions(state, base, css, out, t) {
+  const props = list(css && css.transitionProperty);
+  const covered = (p) => {
+    const i = props.indexOf(p);
+    if (i >= 0) return i;
+    const all = props.indexOf('all');
+    return all >= 0 ? all : -1;
+  };
+  let running = false;
+  const keys = new Set([...Object.keys(base), ...Object.keys(state.last || {})]);
+  for (const p of keys) {
+    const target = base[p];
+    const prev = state.last ? state.last[p] : undefined;
+    const i = props.length ? covered(p) : -1;
+    if (state.last && i >= 0 && !same(prev, target)) {
+      const duration = nth(css.transitionDuration, i, 0);
+      const delay = nth(css.transitionDelay, i, 0);
+      if (duration > 0) {
+        const from = state.shown[p] !== undefined ? state.shown[p] : prev !== undefined ? prev : neutral(p, {});
+        state.tx[p] = {from, to: target, start: t + delay, duration, ease: toEasing(nth(css.transitionTimingFunction, i, 'ease'))};
+      } else {
+        delete state.tx[p];
+      }
+    } else if (i < 0) {
+      delete state.tx[p];
+    }
+    const tx = state.tx[p];
+    if (!tx) continue;
+    const f = (t - tx.start) / tx.duration;
+    if (f >= 1) {
+      delete state.tx[p];
+      continue;
+    }
+    running = true;
+    const to = tx.to !== undefined ? tx.to : neutral(p, {});
+    out[p] = f <= 0 ? tx.from : mix(tx.from, to, tx.ease(f));
+  }
+  state.last = base;
+  return running;
+}
+
+function newState() {
+  return {anims: [], tx: {}, last: null, shown: {}};
+}
+
+// The style to paint now, and whether the next frame differs.
+function evaluate(state, base, css, t) {
+  const out = {...base};
+  const runT = transitions(state, base, css || {}, out, t);
+  const runA = css ? animations(state, base, css, out, t) : (state.anims = [], false);
+  state.shown = out;
+  return {style: out, active: runT || runA};
+}
+
+module.exports = {split, evaluate, newState};

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

@@ -0,0 +1,47 @@
+'use strict';
+// SC-26. Easing for the reanimated stub: RN's own Easing (the same curves
+// Reanimated ships) plus steps, and the CSS timing keywords react-native-css
+// passes through animation/transition timing functions.
+const {Easing: RNEasing} = require('react-native');
+
+function steps(n = 10, roundToNextStep = true) {
+  const count = Math.max(1, Math.floor(n));
+  return (t) => {
+    const v = Math.min(Math.max(t, 0), 1) * count;
+    return (roundToNextStep ? Math.ceil(v) : Math.floor(v)) / count;
+  };
+}
+
+const Easing = {...RNEasing, steps};
+
+const CSS = {
+  linear: RNEasing.linear,
+  ease: RNEasing.bezier(0.25, 0.1, 0.25, 1),
+  'ease-in': RNEasing.bezier(0.42, 0, 1, 1),
+  'ease-out': RNEasing.bezier(0, 0, 0.58, 1),
+  'ease-in-out': RNEasing.bezier(0.42, 0, 0.58, 1),
+  'step-start': steps(1, true),
+  'step-end': steps(1, false),
+};
+
+// CSS cubic-bezier(): react-native-css calls this and puts the result in the
+// style's timing function.
+function cubicBezier(x1, y1, x2, y2) {
+  return RNEasing.bezier(x1, y1, x2, y2);
+}
+
+// CSS steps(n, jump-start|start|jump-end|end).
+function cssSteps(n, position) {
+  return steps(n, position === 'start' || position === 'jump-start');
+}
+
+// A timing function as it arrives in a style or an animation config: a
+// function, Reanimated's {factory} form, or a CSS keyword (default ease).
+function toEasing(fn, fallback = CSS.ease) {
+  if (typeof fn === 'function') return fn;
+  if (fn && typeof fn.factory === 'function') return fn.factory();
+  if (typeof fn === 'string' && CSS[fn]) return CSS[fn];
+  return fallback;
+}
+
+module.exports = {Easing, cubicBezier, cssSteps, toEasing};

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

@@ -0,0 +1,191 @@
+'use strict';
+// SC-26. Reanimated hooks for the stub. With no worklet plugin and no UI
+// thread, an "updater" (useAnimatedStyle / useAnimatedProps) is a JS function
+// re-run whenever a shared value it read changes; Animated components
+// (component.js) subscribe to it and re-render.
+const React = require('react');
+const {onFrame, now} = require('./clock');
+const {makeMutable, isAnimation, track} = require('./values');
+
+const HANDLE = Symbol.for('rni.reanimated.handle');
+
+function depsChanged(prev, next) {
+  if (!next || !prev || prev.length !== next.length) return true;
+  return next.some((d, i) => !Object.is(d, prev[i]));
+}
+
+class Updater {
+  constructor() {
+    this.subs = new Set();
+    this.unsubs = [];
+    this.inline = new Map();
+    this.raw = {};
+  }
+  run(fn) {
+    const {result, deps} = track(fn);
+    this.unsubs.forEach((u) => u());
+    this.unsubs = Array.from(deps, (sv) => sv._subscribe(() => {
+      this.run(fn);
+      this.notify();
+    }));
+    this.raw = result || {};
+    this.startInline(this.raw, '');
+  }
+  // Inline animations, e.g. {opacity: withTiming(1)}: each key path gets its
+  // own shared value, restarted every time the updater runs.
+  startInline(obj, prefix) {
+    for (const k of Object.keys(obj)) {
+      const v = obj[k];
+      const path = prefix + k;
+      if (isAnimation(v)) {
+        let sv = this.inline.get(path);
+        if (!sv) {
+          sv = makeMutable(v.toValue !== undefined ? v.toValue : 0);
+          sv._subscribe(() => this.notify());
+          this.inline.set(path, sv);
+        }
+        sv.value = v;
+      } else if (k === 'transform' && Array.isArray(v)) {
+        v.forEach((e, i) => e && typeof e === 'object' && this.startInline(e, `${path}.${i}.`));
+      }
+    }
+  }
+  resolve(obj, prefix) {
+    const out = {};
+    for (const k of Object.keys(obj)) {
+      const v = obj[k];
+      const path = prefix + k;
+      if (isAnimation(v)) out[k] = this.inline.get(path).value;
+      else if (k === 'transform' && Array.isArray(v)) out[k] = v.map((e, i) => (e && typeof e === 'object' ? this.resolve(e, `${path}.${i}.`) : e));
+      else out[k] = v;
+    }
+    return out;
+  }
+  current() {
+    return this.resolve(this.raw, '');
+  }
+  notify() {
+    for (const fn of Array.from(this.subs)) fn();
+  }
+  subscribe(fn) {
+    this.subs.add(fn);
+    return () => this.subs.delete(fn);
+  }
+  dispose() {
+    this.unsubs.forEach((u) => u());
+    this.unsubs = [];
+    for (const sv of this.inline.values()) sv._cancel();
+    this.subs.clear();
+  }
+}
+
+// The object handed to `style`: the current values (so a plain View still
+// paints them) carrying a hidden handle Animated components subscribe to.
+function snapshot(u) {
+  return Object.defineProperty(u.current(), HANDLE, {value: u, enumerable: false});
+}
+
+function useUpdater(fn, deps) {
+  const ref = React.useRef(null);
+  if (!ref.current) ref.current = {u: new Updater(), deps: undefined, ran: false};
+  const s = ref.current;
+  if (!s.ran || depsChanged(s.deps, deps)) {
+    s.ran = true;
+    s.deps = deps;
+    s.u.run(fn);
+  }
+  React.useEffect(() => () => s.u.dispose(), [s]);
+  return snapshot(s.u);
+}
+
+const useAnimatedStyle = (fn, deps) => useUpdater(fn, deps);
+const useAnimatedProps = (fn, deps) => useUpdater(fn, deps);
+
+function useSharedValue(initial) {
+  const ref = React.useRef(null);
+  if (!ref.current) ref.current = makeMutable(initial);
+  const sv = ref.current;
+  React.useEffect(() => () => sv._cancel(), [sv]);
+  return sv;
+}
+
+// Re-run `fn` (tracked) whenever deps change or a shared value it read changes.
+function useTracked(fn, deps, onResult) {
+  const ref = React.useRef(null);
+  if (!ref.current) ref.current = {unsubs: [], deps: undefined, ran: false};
+  const s = ref.current;
+  s.fn = fn;
+  s.onResult = onResult;
+  const run = () => {
+    const {result, deps: seen} = track(() => s.fn());
+    s.unsubs.forEach((u) => u());
+    s.unsubs = Array.from(seen, (sv) => sv._subscribe(run));
+    s.onResult(result);
+  };
+  if (!s.ran || depsChanged(s.deps, deps)) {
+    s.ran = true;
+    s.deps = deps;
+    run();
+  }
+  React.useEffect(() => () => s.unsubs.forEach((u) => u()), [s]);
+}
+
+function useDerivedValue(fn, deps) {
+  const sv = useSharedValue(undefined);
+  useTracked(fn, deps, (v) => {
+    sv.value = v;
+  });
+  return sv;
+}
+
+function useAnimatedReaction(prepare, react, deps) {
+  const prev = React.useRef(null);
+  useTracked(prepare, deps, (v) => {
+    const p = prev.current;
+    prev.current = v;
+    if (!Object.is(p, v)) react(v, p);
+  });
+}
+
+function useFrameCallback(callback, autostart = true) {
+  const cb = React.useRef(callback);
+  cb.current = callback;
+  const ref = React.useRef(null);
+  if (!ref.current) {
+    const fc = {isActive: false, callbackId: Math.floor(Math.random() * 1e9), stop: null};
+    fc.setActive = (on) => {
+      if (on === fc.isActive) return;
+      fc.isActive = on;
+      if (!on) return fc.stop && fc.stop();
+      let first = null;
+      let last = null;
+      fc.stop = onFrame((t) => {
+        if (first == null) first = t;
+        cb.current({timestamp: t, timeSincePreviousFrame: last == null ? null : t - last, timeSinceFirstFrame: t - first});
+        last = t;
+        return fc.isActive;
+      });
+    };
+    ref.current = fc;
+  }
+  const fc = ref.current;
+  React.useEffect(() => {
+    if (autostart) fc.setActive(true);
+    return () => fc.setActive(false);
+  }, [fc, autostart]);
+  return fc;
+}
+
+function useAnimatedScrollHandler(handlers) {
+  return React.useCallback((e) => {
+    const ev = e && e.nativeEvent ? e.nativeEvent : e;
+    if (typeof handlers === 'function') handlers(ev);
+    else if (handlers && handlers.onScroll) handlers.onScroll(ev);
+  }, [handlers]);
+}
+
+module.exports = {
+  HANDLE, now,
+  useAnimatedStyle, useAnimatedProps, useSharedValue, useDerivedValue,
+  useAnimatedReaction, useFrameCallback, useAnimatedScrollHandler,
+};

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

@@ -0,0 +1,133 @@
+'use strict';
+// SC-26. Value mixing for the reanimated stub: numbers, unit strings
+// ('360deg', '-25%'), colours and transform lists, plus Reanimated's public
+// interpolate / interpolateColor.
+const {processColor} = require('react-native');
+
+const UNIT = /^(-?(?:\d+\.?\d*|\.\d+)(?:e[-+]?\d+)?)([a-z%]*)$/i;
+
+function parseUnit(v) {
+  const m = typeof v === 'string' ? UNIT.exec(v.trim()) : null;
+  return m ? {n: parseFloat(m[1]), u: m[2]} : null;
+}
+
+// RN's processColor gives 0xAARRGGBB off android; anything else is not a colour.
+function parseColor(v) {
+  if (typeof v !== 'string' || parseUnit(v)) return null;
+  const c = processColor(v);
+  if (typeof c !== 'number') return null;
+  return [(c >>> 16) & 255, (c >>> 8) & 255, c & 255, ((c >>> 24) & 255) / 255];
+}
+
+function mixColor(a, b, t) {
+  const ch = (i) => Math.round(a[i] + (b[i] - a[i]) * t);
+  const al = Math.round((a[3] + (b[3] - a[3]) * t) * 1000) / 1000;
+  return `rgba(${ch(0)}, ${ch(1)}, ${ch(2)}, ${al})`;
+}
+
+function identityFor(key, like) {
+  if (key.startsWith('scale')) return 1;
+  if (key === 'perspective') return like;
+  const u = parseUnit(like);
+  if (u) return u.u ? `0${u.u}` : 0;
+  return 0;
+}
+
+const keyOf = (o) => Object.keys(o)[0];
+
+// CSS transform-list interpolation: pair by position when the function
+// names line up, padding the shorter list with identities; otherwise the
+// union of both lists, each side missing a function at its identity.
+function mixTransform(a, b, t) {
+  const A = Array.isArray(a) ? a : [];
+  const B = Array.isArray(b) ? b : [];
+  const n = Math.min(A.length, B.length);
+  let aligned = true;
+  for (let i = 0; i < n; i++) if (keyOf(A[i]) !== keyOf(B[i])) aligned = false;
+  let keys;
+  const pick = (L, k, i) => {
+    if (aligned) return L[i] ? L[i][k] : undefined;
+    const e = L.find((o) => keyOf(o) === k);
+    return e ? e[k] : undefined;
+  };
+  if (aligned) {
+    keys = (A.length >= B.length ? A : B).map(keyOf);
+  } else {
+    keys = A.map(keyOf);
+    for (const o of B) if (!keys.includes(keyOf(o))) keys.push(keyOf(o));
+  }
+  return keys.map((k, i) => {
+    let va = pick(A, k, i);
+    let vb = pick(B, k, i);
+    if (va === undefined) va = identityFor(k, vb);
+    if (vb === undefined) vb = identityFor(k, va);
+    return {[k]: mix(va, vb, t)};
+  });
+}
+
+// mix(a, b, t): the value t of the way from a to b. Values that cannot be
+// interpolated switch at the midpoint, as CSS discrete animation does.
+function mix(a, b, t) {
+  if (typeof a === 'number' && typeof b === 'number') return a + (b - a) * t;
+  if (Array.isArray(a) || Array.isArray(b)) {
+    const isT = (L) => Array.isArray(L) && L.every((o) => o && typeof o === 'object' && Object.keys(o).length === 1);
+    if ((a == null || isT(a)) && (b == null || isT(b))) return mixTransform(a, b, t);
+  }
+  const ua = typeof a === 'number' ? {n: a, u: ''} : parseUnit(a);
+  const ub = typeof b === 'number' ? {n: b, u: ''} : parseUnit(b);
+  if (ua && ub && (ua.u === ub.u || !ua.n || !ub.n)) {
+    const u = ua.u || ub.u;
+    const n = ua.n + (ub.n - ua.n) * t;
+    return u ? `${n}${u}` : n;
+  }
+  const ca = parseColor(a);
+  const cb = parseColor(b);
+  if (ca && cb) return mixColor(ca, cb, t);
+  return t < 0.5 ? a : b;
+}
+
+function segment(x, input) {
+  let i = 1;
+  while (i < input.length - 1 && x > input[i]) i++;
+  return i - 1;
+}
+
+function extrapolate(x, edge, mode) {
+  if (mode === 'identity') return {value: x};
+  if (mode === 'clamp') return {value: edge};
+  return null;
+}
+
+// Reanimated's interpolate(x, input, output, extrapolation).
+function interpolate(x, input, output, type) {
+  if (!Array.isArray(input) || !Array.isArray(output) || input.length < 2) return x;
+  const cfg = typeof type === 'object' && type ? type : {extrapolateLeft: type, extrapolateRight: type};
+  const left = cfg.extrapolateLeft || 'extend';
+  const right = cfg.extrapolateRight || 'extend';
+  const last = input.length - 1;
+  if (x < input[0]) {
+    const e = extrapolate(x, output[0], left);
+    if (e) return e.value;
+  } else if (x > input[last]) {
+    const e = extrapolate(x, output[last], right);
+    if (e) return e.value;
+  }
+  const i = segment(x, input);
+  const span = input[i + 1] - input[i];
+  const t = span === 0 ? 0 : (x - input[i]) / span;
+  return output[i] + (output[i + 1] - output[i]) * t;
+}
+
+// Reanimated's interpolateColor(x, input, colours): RGB space, clamped.
+function interpolateColor(x, input, output) {
+  const cols = output.map(parseColor);
+  if (cols.some((c) => !c)) return output[0];
+  if (x <= input[0]) return mixColor(cols[0], cols[0], 0);
+  const last = input.length - 1;
+  if (x >= input[last]) return mixColor(cols[last], cols[last], 0);
+  const i = segment(x, input);
+  const span = input[i + 1] - input[i];
+  return mixColor(cols[i], cols[i + 1], span === 0 ? 0 : (x - input[i]) / span);
+}
+
+module.exports = {mix, interpolate, interpolateColor};