embedded-react 0.3.0 → 0.4.1

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};
 }