@symbiote-native/components 2.0.0 → 3.0.0

package/build/behaviors/switch.js

@@ -11,7 +11,7 @@
 // WHY THE DIVERGENCE CHECK IS DEFERRED A MICROTASK, NOT RUN SYNCHRONOUSLY INSIDE `onChange`. The
 // obvious place to compare "what native just reported" against "what the app currently authors" is
 // right where the report arrives. It is wrong: an ACCEPTED toggle updates the app's own state, and
-// that state reaches `node.props.value` only once the app's OWN reconciliation runs — which, for
+// that state reaches the node only once the app's OWN reconciliation runs — which, for
 // every adapter here, happens strictly after `onChange` returns, never during it. Checking
 // synchronously would read the STALE pre-accept value and send a spurious snap-back on every
 // accepted toggle. The wrapper avoids this by running its own check from an effect that fires AFTER
@@ -36,97 +36,40 @@
 // unresolved. `afterCommit` costs nothing extra (it fires only on a commit that already changed
 // something) and closes that one case; the microtask path is what the no-op-handler case actually
 // needs.
-import { appListenerFor, dispatchViewCommand, dlog, Platform, registerHostBehavior, setBehaviorListener, } from '@symbiote-native/engine';
+import { appListenerFor, dispatchViewCommand, dlog, Platform, propOf, registerHostBehavior, setBehaviorListener, } from '@symbiote-native/engine';
 import { createInitialSwitchState, shouldSnapBack, switchReducer, valueFromChange, } from '../state/switch.js';
-// The LOWERED tag — NOT the wrapper's `switch-managed` (`render-switch.ts`). One owner
-// per node: the wrapper already runs this same machine in its own lifecycle, so registering here
-// under the tag it emits would attach a second, redundant copy.
 export const SWITCH_TAG = 'switch';
 const states = new WeakMap();
 function stateOf(node) {
     return states.get(node);
 }
-function stringOf(value) {
-    return typeof value === 'string' ? value : undefined;
-}
-function booleanOf(value) {
-    return typeof value === 'boolean' ? value : undefined;
-}
-// `{ false?, true? }` narrowed at runtime — an authored object arriving through an untyped bag
-// cannot be trusted to the type system without reading it field by field, the same idiom
-// `text-input.ts`'s `selectionOf` uses for `{ start, end? }`.
-function trackColorOf(value) {
-    if (typeof value !== 'object' || value === null)
-        return undefined;
-    const bag = { ...value };
-    const falseColor = stringOf(bag.false);
-    const trueColor = stringOf(bag.true);
-    if (falseColor === undefined && trueColor === undefined)
-        return undefined;
-    return { false: falseColor, true: trueColor };
-}
-// The wrapper-body prop fold this primitive owes its lowered form: `trackColor` / `thumbColor` /
-// `ios_backgroundColor` are AUTHORED names, none of them a real Fabric prop — RN's Switch view
+// The three narrowing helpers that stood here — `stringOf`, `booleanOf` and `trackColorOf` — went
+// with the fold. They existed to read an untyped bag safely, and the bag is read on the other side
+// of the wire now, where a `folly::dynamic` is checked the same way and with no allocation.
+// THE PROP FOLD MOVED TO THE ENGINE — `foldSwitchProps` in `SymbioteFabricProps.cpp`, with
+// `core/engine/cpp/tests/js/switch-payload.itest.ts` as its contract.
+//
+// It is the clearest case of the three ports so far: `trackColor` / `thumbColor` /
+// `ios_backgroundColor` are AUTHORED names and none of them is a real Fabric prop. RN's Switch view
 // declares `onTintColor`/`tintColor` (iOS) or `trackColorFor*`/`trackTintColor` (Android), plus
-// `thumbTintColor`. `render-switch.ts` folds them for the wrapper path via an adapter-supplied
-// `ISwitchPlatform`; a lowered node has no adapter to supply one, so this reads `Platform.OS`
-// directly — the same fact every adapter's own index.ios.ts/index.android.ts already encodes as a
-// literal, just read once here instead of five times.
-function trackColorPropsFor(value, trackColor) {
-    if (Platform.OS === 'android') {
-        return {
-            trackColorForFalse: trackColor?.false,
-            trackColorForTrue: trackColor?.true,
-            trackTintColor: value ? trackColor?.true : trackColor?.false,
-        };
-    }
-    return {
-        onTintColor: trackColor?.true,
-        tintColor: trackColor?.false,
-    };
-}
-// RN rounds the iOS background pill to this radius when `ios_backgroundColor` is set — the same
-// constant `render-switch.ts` uses, kept independent rather than exported+imported for one
-// primitive-local literal (see that file for the upstream fact it encodes).
-const IOS_BACKGROUND_BORDER_RADIUS = 16;
+// `thumbTintColor`, and `ios_backgroundColor` is a STYLE rather than a prop. The wrappers took those
+// per-platform NAMES from an adapter-supplied table; a tag has no adapter to ask, so the branch
+// belongs beside the tree — once, instead of the five copies it had.
+//
+// What is still here is the MACHINE: the snap-back handshake below, which reads app state a
+// microtask after native reports a toggle and corrects a disagreement with an imperative command.
 // The platform-specific imperative command RN's own Switch sends to correct a rejected toggle
-// (Switch.js:221-225) — read off Platform.OS for the same reason `trackColorPropsFor` is.
+// (Switch.js:221-225). It reads `Platform.OS` because it is an IMPERATIVE call decided at gesture
+// time, not a prop — the payload half of the same platform split went to the engine with the fold.
 function snapBackCommand() {
     return Platform.OS === 'android' ? 'setNativeValue' : 'setValue';
 }
-function foldPayload(props) {
-    const value = props.value === true;
-    const trackColor = trackColorOf(props.trackColor);
-    const iosBackground = stringOf(props.ios_backgroundColor);
-    const out = {
-        ...props,
-        value,
-        disabled: booleanOf(props.disabled),
-        ...trackColorPropsFor(value, trackColor),
-        thumbTintColor: stringOf(props.thumbColor),
-        style: iosBackground === undefined
-            ? props.style
-            : [
-                props.style,
-                {
-                    backgroundColor: iosBackground,
-                    borderRadius: IOS_BACKGROUND_BORDER_RADIUS,
-                },
-            ],
-    };
-    // The authored names themselves must NOT ride along: none is a Fabric prop, and leaving them in
-    // the payload is how a reader concludes the fold ran when it did not.
-    delete out.trackColor;
-    delete out.thumbColor;
-    delete out.ios_backgroundColor;
-    return out;
-}
 // Shared by both triggers — see the module header for why there are two.
 function evaluateSnapBack(node) {
     const state = stateOf(node);
     if (state === undefined)
         return; // detached before this ran
-    const fabricValue = node.props.value === true;
+    const fabricValue = propOf(node, 'value') === true;
     if (!shouldSnapBack(state, fabricValue)) {
         dlog(`Switch behavior snap-back no-op reported=${String(state.lastNativeReport)} value=${fabricValue}`);
         return;
@@ -143,30 +86,45 @@ function onChange(node, event) {
         return;
     dlog(`Switch behavior onChange value=${String(value)} eventCount=${String(event.nativeEvent.eventCount)}`);
     states.set(node, switchReducer(state, { type: 'native-reported', value }));
+    // Switch.js:201-207's `handleChange` — `onChange` first, THEN `onValueChange`, always. An app
+    // with side effects observable across both (a shared counter, a log) sees that exact order on a
+    // real device.
+    //
+    // `onChange` is a raw `change` listener authored directly on the bare tag — not part of any
+    // adapter's public surface today, but `change` is the name this behavior's own dispatcher owns
+    // (`ownedListeners` below), so one is stashed rather than silently evicting the machine.
+    const rawListener = appListenerFor(node, 'change');
+    if (typeof rawListener === 'function')
+        rawListener(event);
     // `onValueChange` is not a Fabric event — it is a fold the component wrapper does over the raw
     // `change` payload (same class as TextInput's `onValueChange`, `text-input.ts`'s
-    // `callValueChange`), so it lands in `node.props` as a plain function key rather than through
+    // `callValueChange`), so it lands on the node as a plain prop key rather than through
     // `ownedListeners`. ONE argument, `value` carried on the event (`ISwitchChangeEvent`) — same
     // reason as TextInput: Svelte's compiler forces an individual `on*` attribute through a native
     // listener wrapper that calls with exactly one argument, always a real object.
-    const listener = node.props.onValueChange;
+    const listener = propOf(node, 'onValueChange');
     if (typeof listener === 'function') {
         const changeEvent = Object.assign(event, { value });
         listener(changeEvent);
     }
-    // A raw `change` listener authored directly on the bare tag — not part of any adapter's public
-    // surface today, but `change` is the name this behavior's own dispatcher owns
-    // (`ownedListeners` below), so one is stashed rather than silently evicting the machine.
-    const rawListener = appListenerFor(node, 'change');
-    if (typeof rawListener === 'function')
-        rawListener(event);
     // See the module header: deferred so an ACCEPTING app's own state update has a turn of the
-    // microtask queue to reach `node.props.value` first.
+    // microtask queue to write the node first.
     queueMicrotask(() => evaluateSnapBack(node));
 }
+// Switch.js:238-239,288-289 — unconditional on both platforms, never a function of any prop: a
+// switch always claims the responder and never yields it, so its own native drag-to-toggle cannot
+// be stolen mid-gesture by a parent ScrollView's own responder negotiation.
+function alwaysClaimsResponder() {
+    return true;
+}
+function neverYieldsResponder() {
+    return false;
+}
 function attach(node) {
     states.set(node, createInitialSwitchState());
     setBehaviorListener(node, 'change', event => onChange(node, event));
+    setBehaviorListener(node, 'startShouldSetResponder', alwaysClaimsResponder);
+    setBehaviorListener(node, 'responderTerminationRequest', neverYieldsResponder);
 }
 function detach(node) {
     states.delete(node);
@@ -180,7 +138,6 @@ export function registerSwitchBehavior() {
         // cannot — a prop change with no preceding native event.
         afterCommit: evaluateSnapBack,
         detach,
-        foldPayload,
         ownedListeners: ['change'],
     });
 }