embedded-react 0.2.3 → 0.4.0

package/src/embedded-react/Animated.js

@@ -17,9 +17,9 @@
 // Animated — the React Native analog, backed by the engine's native-driver value system
 // (er_anim_value_*). An Animated.Value is a handle to an engine-side float; binding it to a node
 // prop (via Animated.View) lets the engine advance the animation each frame with NO per-frame JS.
-import { createElement, useRef, useEffect } from 'react';
-import { NativeUI } from '../native-ui.js';
-import { splitAnimatedStyle } from './split-style.js';
+import {createElement, useRef, useEffect} from 'react';
+import {NativeUI} from '../native-ui.js';
+import {splitAnimatedStyle} from './split-style.js';
 
 /** A standalone animatable value bound to an engine-side float. */
 export class AnimatedValue {
@@ -74,7 +74,12 @@ export class AnimatedInterpolation {
   }
 
   __bind(node, prop) {
-    NativeUI.animValueBindInterpolated(this._parent._handle, node, prop, this._config);
+    NativeUI.animValueBindInterpolated(
+      this._parent._handle,
+      node,
+      prop,
+      this._config,
+    );
   }
 
   interpolate(config) {
@@ -86,7 +91,7 @@ export class AnimatedInterpolation {
 /** Wraps fn so it runs at most once, regardless of how many times it is invoked. */
 function once(fn) {
   let called = false;
-  return (arg) => {
+  return arg => {
     if (called) return;
     called = true;
     if (fn) fn(arg);
@@ -107,9 +112,9 @@ function makeAnimation(value, toValue, config) {
     _value: value,
     start(onComplete) {
       // Always pass a wrapper so we can null out the (possibly recycled) handle on completion.
-      const cb = (finished) => {
+      const cb = finished => {
         handle = 0;
-        if (onComplete) onComplete({ finished: !!finished });
+        if (onComplete) onComplete({finished: !!finished});
       };
       handle = NativeUI.animValueAnimate(value._handle, toValue, config, cb);
     },
@@ -120,19 +125,19 @@ function makeAnimation(value, toValue, config) {
 }
 
 export function timing(value, config = {}) {
-  const { toValue = 0, useNativeDriver, ...rest } = config;
-  return makeAnimation(value, toValue, { type: 'timing', ...rest });
+  const {toValue = 0, useNativeDriver, ...rest} = config;
+  return makeAnimation(value, toValue, {type: 'timing', ...rest});
 }
 
 export function spring(value, config = {}) {
-  const { toValue = 0, useNativeDriver, ...rest } = config;
-  return makeAnimation(value, toValue, { type: 'spring', ...rest });
+  const {toValue = 0, useNativeDriver, ...rest} = config;
+  return makeAnimation(value, toValue, {type: 'spring', ...rest});
 }
 
 export function decay(value, config = {}) {
-  const { useNativeDriver, ...rest } = config;
+  const {useNativeDriver, ...rest} = config;
   // Decay coasts from its velocity; the engine ignores the target, so pass the current value.
-  return makeAnimation(value, value.__getValue(), { type: 'decay', ...rest });
+  return makeAnimation(value, value.__getValue(), {type: 'decay', ...rest});
 }
 
 // --- Composition -------------------------------------------------------------------------------
@@ -152,22 +157,23 @@ export function sequence(animations) {
       current = 0;
       stopped = false;
       const done = once(onComplete);
-      const next = (result) => {
+      const next = result => {
         if (stopped || !result || result.finished === false) {
-          done({ finished: false });
+          done({finished: false});
           return;
         }
         if (current >= animations.length) {
-          done({ finished: true });
+          done({finished: true});
           return;
         }
         animations[current++].start(next);
       };
-      next({ finished: true }); // kick off the first entry
+      next({finished: true}); // kick off the first entry
     },
     stop() {
       stopped = true;
-      if (current > 0 && current <= animations.length) animations[current - 1].stop();
+      if (current > 0 && current <= animations.length)
+        animations[current - 1].stop();
     },
   };
 }
@@ -181,12 +187,12 @@ export function parallel(animations, config) {
       const done = once(onComplete);
       const total = animations.length;
       if (total === 0) {
-        done({ finished: true });
+        done({finished: true});
         return;
       }
       let doneCount = 0;
       let anyUnfinished = false;
-      const onChild = (result) => {
+      const onChild = result => {
         doneCount++;
         if (!result || result.finished === false) {
           anyUnfinished = true;
@@ -195,7 +201,7 @@ export function parallel(animations, config) {
             for (const a of animations) a.stop();
           }
         }
-        if (doneCount >= total) done({ finished: !anyUnfinished });
+        if (doneCount >= total) done({finished: !anyUnfinished});
       };
       for (const a of animations) a.start(onChild);
     },
@@ -215,15 +221,15 @@ export function stagger(delay, animations) {
       const done = once(onComplete);
       const total = animations.length;
       if (total === 0) {
-        done({ finished: true });
+        done({finished: true});
         return;
       }
       let doneCount = 0;
       let anyUnfinished = false;
-      const onChild = (result) => {
+      const onChild = result => {
         doneCount++;
         if (!result || result.finished === false) anyUnfinished = true;
-        if (doneCount >= total) done({ finished: !anyUnfinished });
+        if (doneCount >= total) done({finished: !anyUnfinished});
       };
       animations.forEach((a, i) => {
         if (i === 0) {
@@ -253,7 +259,7 @@ export function delay(time) {
       const done = once(onComplete);
       timer = setTimeout(() => {
         timer = 0;
-        done({ finished: true });
+        done({finished: true});
       }, time);
     },
     stop() {
@@ -271,33 +277,42 @@ export function delay(time) {
  * (resetBeforeIteration), matching RN — so a timing 0→1 repeats 0→1 rather than ping-ponging.
  */
 export function loop(animation, config) {
-  const iterations = config && Number.isInteger(config.iterations) ? config.iterations : -1;
+  const iterations =
+    config && Number.isInteger(config.iterations) ? config.iterations : -1;
   const resetBeforeIteration = !config || config.resetBeforeIteration !== false;
   let stopped = false;
   return {
     _value: animation._value,
     start(onComplete) {
       const done = once(onComplete);
-      const startValue = resetBeforeIteration && animation._value ? animation._value.__getValue() : null;
+      const startValue =
+        resetBeforeIteration && animation._value
+          ? animation._value.__getValue()
+          : null;
       let count = 0;
       const startIteration = () => {
         if (stopped) {
-          done({ finished: false });
+          done({finished: false});
           return;
         }
         if (iterations >= 0 && count >= iterations) {
-          done({ finished: true });
+          done({finished: true});
           return;
         }
         count++;
-        if (resetBeforeIteration && animation._value && startValue != null && count > 1) {
+        if (
+          resetBeforeIteration &&
+          animation._value &&
+          startValue != null &&
+          count > 1
+        ) {
           animation._value.setValue(startValue);
         }
         animation.start(onIterationDone);
       };
-      const onIterationDone = (result) => {
+      const onIterationDone = result => {
         if (stopped || !result || result.finished === false) {
-          done({ finished: false });
+          done({finished: false});
           return;
         }
         // Defer the next iteration to a fresh task instead of starting it inline. A child animation can
@@ -343,13 +358,13 @@ export function useAnimatedValue(initial = 0) {
  */
 export function createAnimatedComponent(Component) {
   return function AnimatedComponent(props) {
-    const { style, ...rest } = props;
-    const { staticStyle, bindings } = splitAnimatedStyle(style);
-    const ref = (node) => {
+    const {style, ...rest} = props;
+    const {staticStyle, bindings} = splitAnimatedStyle(style);
+    const ref = node => {
       if (node == null) return; // unmount
       for (const b of bindings) b.value.__bind(node, b.prop);
     };
-    return createElement(Component, { ...rest, style: staticStyle, ref });
+    return createElement(Component, {...rest, style: staticStyle, ref});
   };
 }
 

package/src/embedded-react/AppRegistry.js

@@ -21,8 +21,8 @@
 // "running the bundle IS starting the app", so registerComponent mounts immediately into a root
 // sized from the host-injected `screen` global. (A host-driven runApplication can be split out
 // later when the C host owns app lifecycle.)
-import { createElement } from 'react';
-import { createRoot } from '../renderer.js';
+import {createElement} from 'react';
+import {createRoot} from '../renderer.js';
 
 let registered = null;
 
@@ -32,7 +32,7 @@ export const AppRegistry = {
    * the component (RN signature), so the component module isn't evaluated until registration.
    */
   registerComponent(appKey, componentProvider) {
-    registered = { appKey, Component: componentProvider() };
+    registered = {appKey, Component: componentProvider()};
     AppRegistry.runApplication(appKey);
     return appKey;
   },
@@ -43,7 +43,7 @@ export const AppRegistry = {
   runApplication(appKey) {
     if (!registered) return;
     if (appKey && appKey !== registered.appKey) return;
-    const root = createRoot({ width: screen.width, height: screen.height });
+    const root = createRoot({width: screen.width, height: screen.height});
     root.render(createElement(registered.Component));
   },
 };

package/src/embedded-react/Easing.js

@@ -34,6 +34,6 @@ export const Easing = {
 
   /** Custom cubic-bezier curve via control points. */
   bezier(x1, y1, x2, y2) {
-    return { x1, y1, x2, y2 };
+    return {x1, y1, x2, y2};
   },
 };

package/src/embedded-react/LayoutAnimation.js

@@ -18,8 +18,14 @@
 // changes layout makes the engine tween every node whose computed rect moved (instead of snapping)
 // on the next commit. Backed by the engine's er_layout_anim_configure_next; the tween advances in C
 // each frame (er_layout_anim_tick), so there's no per-frame JS.
-import { NativeUI } from '../native-ui.js';
-import { Types, Properties, Presets, toEngineConfig, create } from './layout-anim-config.js';
+import {NativeUI} from '../native-ui.js';
+import {
+  Types,
+  Properties,
+  Presets,
+  toEngineConfig,
+  create,
+} from './layout-anim-config.js';
 
 /**
  * Arms a layout animation for the next commit. Call right before the setState that changes layout.
@@ -28,7 +34,8 @@ import { Types, Properties, Presets, toEngineConfig, create } from './layout-ani
 export function configureNext(config, onAnimationDidEnd) {
   NativeUI.configureNextLayoutAnimation(toEngineConfig(config));
   if (typeof onAnimationDidEnd === 'function') {
-    const ms = config && typeof config.duration === 'number' ? config.duration : 300;
+    const ms =
+      config && typeof config.duration === 'number' ? config.duration : 300;
     setTimeout(onAnimationDidEnd, ms);
   }
 }
@@ -39,7 +46,7 @@ export const LayoutAnimation = {
   Types,
   Properties,
   Presets,
-  easeInEaseOut: (onDone) => configureNext(Presets.easeInEaseOut, onDone),
-  linear: (onDone) => configureNext(Presets.linear, onDone),
-  spring: (onDone) => configureNext(Presets.spring, onDone),
+  easeInEaseOut: onDone => configureNext(Presets.easeInEaseOut, onDone),
+  linear: onDone => configureNext(Presets.linear, onDone),
+  spring: onDone => configureNext(Presets.spring, onDone),
 };

package/src/embedded-react/StyleSheet.js

@@ -32,5 +32,5 @@ export const StyleSheet = {
   },
 
   hairlineWidth: 1,
-  absoluteFill: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 },
+  absoluteFill: {position: 'absolute', top: 0, left: 0, right: 0, bottom: 0},
 };

package/src/embedded-react/imperative.js

@@ -20,8 +20,8 @@
 // reconcile + flatten dominate. For continuous gestures (e.g., dragging a dial), grab a node handle via
 // a ref and push updates directly here: it skips React entirely and, for vectors, skips the d-string
 // parser too. Commit back to React state when the gesture ends so the declarative tree re-syncs.
-import { NativeUI } from '../native-ui.js';
-import { shapesToVector } from './svg-ops.js';
+import {NativeUI} from '../native-ui.js';
+import {shapesToVector, warnVectorCaps} from './svg-ops.js';
 
 /**
  * Imperatively sets an <Svg> node's geometry from primitive shape descriptors (see shapesToVector).
@@ -33,8 +33,20 @@ import { shapesToVector } from './svg-ops.js';
  */
 export function updateVector(handle, shapes, dirtyRect) {
   if (handle == null) return;
-  const { ops, paints } = shapesToVector(shapes);
-  NativeUI.setVectorOps(handle, ops, paints, dirtyRect);
+  const {ops, paints} = shapesToVector(shapes);
+  warnVectorCaps(
+    ops.length,
+    paints.length,
+    NativeUI.maxVectorOps,
+    NativeUI.maxVectorPaints,
+  );
+  NativeUI.setVectorOps(
+    handle,
+    ops,
+    paints,
+    undefined /* gradients: imperative shapes are solid */,
+    dirtyRect,
+  );
 }
 
 /**
@@ -45,13 +57,13 @@ export function updateVector(handle, shapes, dirtyRect) {
  */
 export function updateText(handle, text) {
   if (handle == null) return;
-  NativeUI.setTextSpans(handle, [{ text: String(text) }]);
+  NativeUI.setTextSpans(handle, [{text: String(text)}]);
 }
 
 /**
- * Customises the on-screen software keyboard's appearance and/or layout. Only effective when the engine was
+ * Customizes the on-screen software keyboard's appearance and/or layout. Only effective when the engine was
  * built with the keyboard enabled (ERUI_ONSCREEN_KEYBOARD=1); a no-op otherwise. The config is a plain
- * object of colours/sizes plus an optional `layers` array; omit `layers` to keep the built-in QWERTY:
+ * object of colors/sizes plus an optional `layers` array; omit `layers` to keep the built-in QWERTY:
  *
  *   setKeyboardConfig({ keyColor: '#fff', labelColor: '#111', fontSize: 20,
  *     layers: [ [ [ { char: 'a' }, ... ],                                    // a row

package/src/embedded-react/index.js

@@ -42,11 +42,11 @@ export {
   G,
   Arc,
 } from './components.js';
-export { updateVector, updateText, setKeyboardConfig } from './imperative.js';
-export { StyleSheet } from './StyleSheet.js';
-export { Platform } from './Platform.js';
-export { AppRegistry } from './AppRegistry.js';
-export { Animated, useAnimatedValue } from './Animated.js';
-export { usePersistentState } from './usePersistentState.js';
-export { Easing } from './Easing.js';
-export { LayoutAnimation } from './LayoutAnimation.js';
+export {updateVector, updateText, setKeyboardConfig} from './imperative.js';
+export {StyleSheet} from './StyleSheet.js';
+export {Platform} from './Platform.js';
+export {AppRegistry} from './AppRegistry.js';
+export {Animated, useAnimatedValue} from './Animated.js';
+export {usePersistentState} from './usePersistentState.js';
+export {Easing} from './Easing.js';
+export {LayoutAnimation} from './LayoutAnimation.js';

package/src/embedded-react/layout-anim-config.js

@@ -63,18 +63,22 @@ export function toEngineConfig(config) {
   const update = c.update || {};
   const type = update.type || c.type || Types.easeInEaseOut;
   if (type === Types.spring) {
-    return { type: 'spring', duration };
+    return {type: 'spring', duration};
   }
-  return { type: 'timing', duration, easing: easingForType(type) };
+  return {type: 'timing', duration, easing: easingForType(type)};
 }
 
 /** Builds an RN-shaped config (duration + create/update/delete) from a type + creation property. */
-export function create(duration, type = Types.easeInEaseOut, creationProp = Properties.opacity) {
+export function create(
+  duration,
+  type = Types.easeInEaseOut,
+  creationProp = Properties.opacity,
+) {
   return {
     duration,
-    create: { type, property: creationProp },
-    update: { type },
-    delete: { type, property: creationProp },
+    create: {type, property: creationProp},
+    update: {type},
+    delete: {type, property: creationProp},
   };
 }
 
@@ -84,8 +88,8 @@ export const Presets = {
   linear: create(500, Types.linear, Properties.opacity),
   spring: {
     duration: 700,
-    create: { type: Types.linear, property: Properties.opacity },
-    update: { type: Types.spring, springDamping: 0.4 },
-    delete: { type: Types.linear, property: Properties.opacity },
+    create: {type: Types.linear, property: Properties.opacity},
+    update: {type: Types.spring, springDamping: 0.4},
+    delete: {type: Types.linear, property: Properties.opacity},
   },
 };

package/src/embedded-react/split-style.js

@@ -18,7 +18,7 @@
 // bindings (Animated.Value / interpolation, bound to the node's prop so the engine drives them).
 // Pure (no NativeUI), so it's unit-testable. An animated entry is anything with an `__animated`
 // marker — `transform: [{ translateX: value }]` entries are handled too (scale binds both axes).
-import { flattenStyle } from '../props.js';
+import {flattenStyle} from '../props.js';
 
 export function splitAnimatedStyle(style) {
   const staticStyle = {};
@@ -37,10 +37,10 @@ export function splitAnimatedStyle(style) {
         const v = entry[axis];
         if (v && v.__animated) {
           if (axis === 'scale') {
-            bindings.push({ prop: 'scaleX', value: v });
-            bindings.push({ prop: 'scaleY', value: v });
+            bindings.push({prop: 'scaleX', value: v});
+            bindings.push({prop: 'scaleY', value: v});
           } else {
-            bindings.push({ prop: axis, value: v });
+            bindings.push({prop: axis, value: v});
           }
         } else {
           staticTransform.push(entry);
@@ -48,11 +48,11 @@ export function splitAnimatedStyle(style) {
       }
       if (staticTransform.length > 0) staticStyle.transform = staticTransform;
     } else if (val && val.__animated) {
-      bindings.push({ prop: key, value: val });
+      bindings.push({prop: key, value: val});
     } else {
       staticStyle[key] = val;
     }
   }
 
-  return { staticStyle, bindings };
+  return {staticStyle, bindings};
 }