@symbiote-native/vue 0.4.0 → 1.0.0

package/build/components/pressable.js

@@ -11,10 +11,11 @@
 // forwarded attrs (pure-JS callbacks); the machine's SYNTHESIZED handlers go on the View instead.
 // Children arrive as a (scoped) default slot so `v-slot="{ pressed }"` mirrors React's
 // children-as-function.
-import { defineComponent, h, ref, shallowRef } from '@vue/runtime-core';
-import { createPressHandlers, createPressRuntime, rippleProps, buildPressableListeners, resolveDisabledAccessibilityState, noteHoverNoop, resolveAccessibilityProps, DEFAULT_DELAY_LONG_PRESS_MS, } from '@symbiote-native/components';
+import { defineComponent, h, onUnmounted, ref, shallowRef, } from '@vue/runtime-core';
+import { createPressHandlers, createPressRuntime, disposePressRuntime, rippleProps, buildPressableListeners, resolveDisabledAccessibilityState, noteHoverNoop, resolveAccessibilityProps, DEFAULT_DELAY_LONG_PRESS_MS, DEFAULT_MIN_PRESS_DURATION_MS, } from '@symbiote-native/components';
 import { measure, isSymbioteNode, } from '@symbiote-native/engine';
-import { View } from '../components.js';
+import { HOST_VIEW } from '../components.js';
+import { useRawAttrs } from '../composables/use-raw-attrs.js';
 import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
 // Reused verbatim as the `emits` of every Touchable* wrapper, so the runtime list lives once.
 export const PRESSABLE_EMITS = {
@@ -106,7 +107,10 @@ function resolveStyle(value, state) {
 }
 // Everything else forwards onto the View. User press callbacks are pure JS and must never reach
 // the host; the machine's synthesized handlers go on via buildPressableListeners.
-const HANDLED_ATTRS = [
+// A Set, not an array: forwardAttrs asks this question once per attr per Pressable instance, and
+// `Array.prototype.includes` walks all eighteen entries for every key that is NOT handled — which
+// is most of them. Membership is the whole use; the order never mattered.
+const HANDLED_ATTRS = new Set([
     'onPress',
     'onPressIn',
     'onPressOut',
@@ -117,6 +121,7 @@ const HANDLED_ATTRS = [
     'cancelable',
     'pressRetentionOffset',
     'unstable_pressDelay',
+    '__minPressDuration',
     'android_ripple',
     'android_disableSound',
     'onHoverIn',
@@ -125,16 +130,19 @@ const HANDLED_ATTRS = [
     'delayHoverOut',
     'style',
     'accessibilityState',
-];
+]);
 function forwardAttrs(attrs) {
     const result = {};
     for (const key of Object.keys(attrs)) {
-        if (!HANDLED_ATTRS.includes(key))
+        if (!HANDLED_ATTRS.has(key))
             result[key] = attrs[key];
     }
     return result;
 }
-export const Pressable = defineComponent((_props, { slots, attrs: rawAttrs, emit }) => {
+export const Pressable = defineComponent((_props, { slots, attrs: contextAttrs, emit, }) => {
+    // The unproxied bag, captured once. See use-raw-attrs.ts for why the context's own attrs cost
+    // a track() per read and why capturing here (a setup body) is the only safe place to do it.
+    const rawAttrs = useRawAttrs(contextAttrs);
     const pressed = ref(false);
     // The mutable press runtime (timers, suppression flags, measured region). A plain setup-scope
     // object, never a ref: mutated by the machine, never reactively read.
@@ -161,7 +169,11 @@ export const Pressable = defineComponent((_props, { slots, attrs: rawAttrs, emit
             const id = setTimeout(callback, ms);
             return () => clearTimeout(id);
         },
+        now: Date.now,
     };
+    onUnmounted(() => {
+        disposePressRuntime(runtime);
+    });
     return () => {
         const attrs = normalizeVueAttrs(rawAttrs);
         const disabled = attrs.disabled === true ? true : undefined;
@@ -174,6 +186,7 @@ export const Pressable = defineComponent((_props, { slots, attrs: rawAttrs, emit
             onLongPress: event => emit('longPress', event),
             delayLongPress: numberOr(attrs.delayLongPress, DEFAULT_DELAY_LONG_PRESS_MS),
             unstable_pressDelay: numberOr(attrs.unstable_pressDelay, 0),
+            minPressDuration: numberOr(attrs.__minPressDuration, DEFAULT_MIN_PRESS_DURATION_MS),
             hitSlop: asRectOffset(attrs.hitSlop),
             pressRetentionOffset: asRectOffset(attrs.pressRetentionOffset),
         };
@@ -182,14 +195,15 @@ export const Pressable = defineComponent((_props, { slots, attrs: rawAttrs, emit
         const state = { pressed: pressed.value };
         // Vue's View is a bare host primitive, so Pressable folds disabled into accessibilityState
         // and aria/role itself, rather than the View folding it (as React's does).
+        // One bag, built once and then written into. The spread this replaces rebuilt the whole
+        // forwarded set a second time just to add three keys; resolveAccessibilityProps hands back
+        // the SAME object whenever no aria key is present, which is the common case, so on that path
+        // the render now allocates one bag instead of two.
         const forwarded = forwardAttrs(attrs);
         forwarded.accessibilityState = resolveDisabledAccessibilityState(asAccessibilityState(attrs.accessibilityState), disabled);
-        const folded = resolveAccessibilityProps(forwarded);
-        const viewProps = {
-            ...folded,
-            ref: setNodeRef,
-            style: resolveStyle(attrs.style, state),
-        };
+        const viewProps = resolveAccessibilityProps(forwarded);
+        viewProps.ref = setNodeRef;
+        viewProps.style = resolveStyle(attrs.style, state);
         if (typeof attrs.android_disableSound === 'boolean')
             viewProps.android_disableSound = attrs.android_disableSound;
         Object.assign(viewProps, buildPressableListeners(handlers, { disabled, cancelable }));
@@ -199,13 +213,18 @@ export const Pressable = defineComponent((_props, { slots, attrs: rawAttrs, emit
         const ripple = isRecord(attrs.android_ripple)
             ? rippleProps(asRippleConfig(attrs.android_ripple) ?? {})
             : undefined;
-        const inner = ripple !== undefined ? [h(View, ripple, () => content)] : content;
-        // Children go to the host View as a FUNCTION slot, never a raw array: View is a
-        // functional component, and an array child makes Vue normalize it to a default
-        // slot with a dev warn ("Prefer function slots"). Benign under SFC, but in JSX the
-        // warn's trace formats the __self/__source dev props (native HostObjects) and that
-        // read throws, unwinding the whole mount → blank screen. A function slot skips it.
-        return h(View, viewProps, () => inner);
+        const inner = ripple !== undefined ? [h(HOST_VIEW, ripple, content)] : content;
+        // The host node is the intrinsic TAG, not our <View> component: a Vue component instance
+        // costs createComponentInstance + initProps + initSlots + setupRenderEffect even when the
+        // component is functional, and this one only forwards attrs to the same tag. Pressable is
+        // 2 of the 6 primitives in a benchmark row, so this is one instance per row, twice.
+        //
+        // Children are therefore an ARRAY, and that also RETIRES a hazard: passing an array to the
+        // functional <View> made Vue normalize it to a default slot with a "Prefer function slots"
+        // dev warn, whose trace formats the __self/__source dev props (native HostObjects) — a read
+        // that throws under JSX and unwinds the whole mount into a blank screen. An element takes
+        // array children natively and never reaches that path.
+        return h(HOST_VIEW, viewProps, inner);
     };
 }, {
     name: 'Pressable',

package/build/components/safe-area-view.d.ts

@@ -1,6 +1,7 @@
 import { type IClassNameValue } from '@symbiote-native/engine';
 import { type IAccessibilityProps, type IAriaProps } from '@symbiote-native/components';
 export type ISafeAreaViewProps = IAccessibilityProps & IAriaProps & {
+    id?: string;
     class?: IClassNameValue;
 };
 export declare const SafeAreaView: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {

package/build/components/scroll-view/index.android.d.ts

@@ -1,4 +1,4 @@
-export type { IScrollViewProps, IScrollViewEmits, IScrollViewHandle } from './shared';
+export type { IScrollViewProps, IScrollViewEmits, IScrollViewHandle, } from './shared';
 export declare const ScrollView: import("vue").DefineSetupFnComponent<import("./shared").IScrollViewProps, import("./shared").IScrollViewEmits, {}, import("./shared").IScrollViewProps & {
     onContentSizeChange?: ((width: number, height: number) => any) | undefined;
 }, import("vue").PublicProps>;

package/build/components/scroll-view/index.android.js

@@ -23,7 +23,9 @@ function isRecord(value) {
 function isHostType(type) {
     if (typeof type === 'string')
         return true;
-    return ((typeof type === 'object' || typeof type === 'function') && type !== null && !isVNode(type));
+    return ((typeof type === 'object' || typeof type === 'function') &&
+        type !== null &&
+        !isVNode(type));
 }
 export const ScrollView = createScrollView({
     assemble: input => {

package/build/components/scroll-view/index.ios.d.ts

@@ -1,4 +1,4 @@
-export type { IScrollViewProps, IScrollViewEmits, IScrollViewHandle } from './shared';
+export type { IScrollViewProps, IScrollViewEmits, IScrollViewHandle, } from './shared';
 export declare const ScrollView: import("vue").DefineSetupFnComponent<import("./shared").IScrollViewProps, import("./shared").IScrollViewEmits, {}, import("./shared").IScrollViewProps & {
     onContentSizeChange?: ((width: number, height: number) => any) | undefined;
 }, import("vue").PublicProps>;

package/build/components/scroll-view/index.ios.js

@@ -9,7 +9,9 @@ export const ScrollView = createScrollView({
     assemble: input => {
         // Sibling placement: RefreshControl before content (RN iOS). The node ref stays on the scroll
         // view via input.scrollProps, so the imperative handle targets it whether or not refresh is on.
-        const children = input.refreshControl === undefined ? [input.content] : [input.refreshControl, input.content];
+        const children = input.refreshControl === undefined
+            ? [input.content]
+            : [input.refreshControl, input.content];
         return h(input.scrollViewIntrinsic, input.scrollProps, children);
     },
 });

package/build/components/scroll-view/shared.js

@@ -15,7 +15,7 @@
 import { defineComponent, h, isVNode, markRaw, onBeforeUnmount, ref, shallowRef, watch, } from '@vue/runtime-core';
 import { attachStickyScroll, buildScrollViewHandle, didContentSizeChange, forwardScrollEvent, readLayoutDimension, resolveAccessibilityProps, resolveDecelerationRate, resolveScrollForwarding, selectScrollIntrinsics, } from '@symbiote-native/components';
 import { AnimatedValue, dlog, event as animatedEvent, isClassNameValue, isNativeAnimatedAvailable, isSymbioteNode, resolveClassName, } from '@symbiote-native/engine';
-import { wrapStickyHeaders } from './sticky-header.js';
+import { wrapStickyHeaders, } from './sticky-header.js';
 import { normalizeVueAttrs } from '../../utils/normalize-attrs.js';
 function isHandler(value) {
     return typeof value === 'function';
@@ -37,10 +37,10 @@ function asDecelerationRate(value) {
     return undefined;
 }
 function isNumberArray(value) {
-    return Array.isArray(value) && value.every(entry => typeof entry === 'number');
+    return (Array.isArray(value) && value.every(entry => typeof entry === 'number'));
 }
 function isComponent(value) {
-    return typeof value === 'function' || (typeof value === 'object' && value !== null);
+    return (typeof value === 'function' || (typeof value === 'object' && value !== null));
 }
 // Prop/handler keys the lifecycle consumes itself; everything else forwards onto the scroll-view
 // node. onContentSizeChange is consumed (synthesized from the content onLayout); refreshControl
@@ -126,8 +126,13 @@ export function createScrollView(platform) {
             const attrs = normalizeVueAttrs(rawAttrs);
             const isHorizontal = attrs.horizontal === true;
             const userStyle = isStyleProp(attrs.style) ? attrs.style : undefined;
-            const classProp = isClassNameProp(attrs.class) ? attrs.class : undefined;
-            const layoutSplitStyle = [resolveClassName(classProp), userStyle];
+            const classProp = isClassNameProp(attrs.class)
+                ? attrs.class
+                : undefined;
+            const layoutSplitStyle = [
+                resolveClassName(classProp),
+                userStyle,
+            ];
             const contentContainerStyle = typeof attrs.contentContainerStyle === 'string'
                 ? resolveClassName(attrs.contentContainerStyle)
                 : isStyleProp(attrs.contentContainerStyle)
@@ -141,14 +146,16 @@ export function createScrollView(platform) {
             const stickyHeaderComponent = isComponent(attrs.StickyHeaderComponent)
                 ? attrs.StickyHeaderComponent
                 : undefined;
-            const { scrollViewIntrinsic, contentIntrinsic, scrollViewBaseStyle, contentStyle } = selectScrollIntrinsics(isHorizontal, contentContainerStyle);
+            const { scrollViewIntrinsic, contentIntrinsic, scrollViewBaseStyle, contentStyle, } = selectScrollIntrinsics(isHorizontal, contentContainerStyle);
             // RN defaults nested scrolling ON (ScrollView.js `nestedScrollEnabled ?? true`);
             // horizontal forwards only when defined (load-bearing on iOS's RCTScrollView axis).
             const outerProps = {
                 ...resolveAccessibilityProps(forwardAttrs(attrs)),
             };
             outerProps.nestedScrollEnabled =
-                typeof attrs.nestedScrollEnabled === 'boolean' ? attrs.nestedScrollEnabled : true;
+                typeof attrs.nestedScrollEnabled === 'boolean'
+                    ? attrs.nestedScrollEnabled
+                    : true;
             if (attrs.horizontal !== undefined)
                 outerProps.horizontal = attrs.horizontal;
             const decel = asDecelerationRate(attrs.decelerationRate);
@@ -160,7 +167,9 @@ export function createScrollView(platform) {
             // decisions (which path, throttle default, inverted capture).
             const nativeStickyAvailable = hasStickyHeaders && isNativeAnimatedAvailable();
             nativeStickyWanted = nativeStickyAvailable;
-            const userThrottle = typeof attrs.scrollEventThrottle === 'number' ? attrs.scrollEventThrottle : undefined;
+            const userThrottle = typeof attrs.scrollEventThrottle === 'number'
+                ? attrs.scrollEventThrottle
+                : undefined;
             const forwarding = resolveScrollForwarding({
                 hasStickyHeaders,
                 nativeStickyAvailable,
@@ -170,13 +179,17 @@ export function createScrollView(platform) {
                 snapToAlignment: attrs.snapToAlignment,
             });
             if (hasStickyHeaders) {
-                const userOnScroll = isHandler(attrs.onScroll) ? attrs.onScroll : undefined;
+                const userOnScroll = isHandler(attrs.onScroll)
+                    ? attrs.onScroll
+                    : undefined;
                 if (forwarding.mode === 'sticky-js') {
                     // JS fallback (no native module): correct, but lags a frame under fast scroll, which
                     // the native path removes on a real host.
                     outerProps.onScroll = animatedEvent([{ nativeEvent: { contentOffset: { y: scrollAnimatedValue } } }], userOnScroll === undefined
                         ? undefined
-                        : { listener: (...args) => forwardScrollEvent(userOnScroll, args) });
+                        : {
+                            listener: (...args) => forwardScrollEvent(userOnScroll, args),
+                        });
                 }
                 // Native path: the value is driven on the UI thread by the post-commit watch above, so
                 // onScroll forwards untouched.
@@ -186,7 +199,9 @@ export function createScrollView(platform) {
                 // Capture the viewport height for inverted sticky headers (RN _handleLayout), then call
                 // the user's handler.
                 if (forwarding.capturesViewportHeight) {
-                    const userOnLayout = isHandler(attrs.onLayout) ? attrs.onLayout : undefined;
+                    const userOnLayout = isHandler(attrs.onLayout)
+                        ? attrs.onLayout
+                        : undefined;
                     outerProps.onLayout = (event) => {
                         const height = readLayoutDimension(event, 'height');
                         if (height !== undefined)
@@ -200,7 +215,10 @@ export function createScrollView(platform) {
             // `collapsable: false` keeps the layout-only content view as a real native view: Android
             // Fabric view-flattens it away otherwise, hoisting the cells as direct children of the
             // scroll view (which hosts exactly one) - an addViewAt crash. iOS never flattens.
-            const contentProps = { style: contentStyle, collapsable: false };
+            const contentProps = {
+                style: contentStyle,
+                collapsable: false,
+            };
             if (forwarding.collapsableChildren) {
                 contentProps.collapsableChildren = false;
             }
@@ -228,7 +246,9 @@ export function createScrollView(platform) {
                 style: [scrollViewBaseStyle, userStyle],
                 ref: setNodeRef,
             };
-            const refreshControl = isVNode(attrs.refreshControl) ? attrs.refreshControl : undefined;
+            const refreshControl = isVNode(attrs.refreshControl)
+                ? attrs.refreshControl
+                : undefined;
             return platform.assemble({
                 scrollViewIntrinsic,
                 scrollProps,

package/build/components/scroll-view/sticky-header.js

@@ -52,7 +52,10 @@ export const ScrollViewStickyHeader = defineComponent({
         const version = ref(0);
         // Engine node -> shallowRef (identity rule); the un-measured identity stub until the
         // rebuild-interpolation effect below replaces it.
-        const animatedTranslateY = shallowRef(scrollAnimatedValue.interpolate({ inputRange: [-1, 0], outputRange: [0, 0] }));
+        const animatedTranslateY = shallowRef(scrollAnimatedValue.interpolate({
+            inputRange: [-1, 0],
+            outputRange: [0, 0],
+        }));
         let debounceTimer;
         // Held so the next rebuild detaches the old listener and onBeforeUnmount cleans up.
         let interpolation;
@@ -60,8 +63,12 @@ export const ScrollViewStickyHeader = defineComponent({
         const inputs = () => ({
             os: Platform.OS,
             inverted: typeof attrs.inverted === 'boolean' ? attrs.inverted : undefined,
-            scrollViewHeight: typeof attrs.scrollViewHeight === 'number' ? attrs.scrollViewHeight : undefined,
-            nextHeaderLayoutY: typeof attrs.nextHeaderLayoutY === 'number' ? attrs.nextHeaderLayoutY : undefined,
+            scrollViewHeight: typeof attrs.scrollViewHeight === 'number'
+                ? attrs.scrollViewHeight
+                : undefined,
+            nextHeaderLayoutY: typeof attrs.nextHeaderLayoutY === 'number'
+                ? attrs.nextHeaderLayoutY
+                : undefined,
         });
         const runEffects = (effects) => {
             for (const effect of effects) {
@@ -124,13 +131,19 @@ export const ScrollViewStickyHeader = defineComponent({
             const y = readLayoutNumber(event, 'y');
             const height = readLayoutNumber(event, 'height');
             // Keep the previous value when a field is absent (RN sets state only on a defined read).
-            dispatch({ kind: 'layout', y: y ?? state.layoutY, height: height ?? state.layoutHeight });
+            dispatch({
+                kind: 'layout',
+                y: y ?? state.layoutY,
+                height: height ?? state.layoutHeight,
+            });
             const recorder = attrs.onLayout;
             if (isHandler(recorder))
                 recorder(event);
             const children = slots.default !== undefined ? slots.default() : [];
             const child = children[0];
-            const childOnLayout = isVNode(child) ? readChildOnLayout(child) : undefined;
+            const childOnLayout = isVNode(child)
+                ? readChildOnLayout(child)
+                : undefined;
             if (childOnLayout !== undefined)
                 childOnLayout(event);
         };

package/build/components/section-list/index.js

@@ -34,7 +34,7 @@ function buildDelegate(getInner) {
 }
 export const SectionList = defineComponent(
 // _props is read only by the type system, to let ItemT infer at the call site.
-(_props, { attrs, expose, emit, slots }) => {
+(_props, { attrs, expose, emit, slots, }) => {
     const inner = shallowRef(null);
     const setInner = (instance) => {
         inner.value = isSectionHandle(instance) ? instance : null;
@@ -54,7 +54,9 @@ export const SectionList = defineComponent(
         const startReached = listens('onStartReached')
             ? (info) => emit('startReached', info)
             : undefined;
-        const refresh = listens('onRefresh') ? () => emit('refresh') : undefined;
+        const refresh = listens('onRefresh')
+            ? () => emit('refresh')
+            : undefined;
         return h(VirtualizedSectionListHost, {
             ...normalizeVueAttrs(attrs),
             ref: setInner,

package/build/components/switch/shared.js

@@ -73,7 +73,10 @@ export function createSwitch(platform) {
                 return;
             emit('valueChange', next, event);
             emitModelUpdate(emit, next);
-            state.value = switchReducer(state.value, { type: 'native-reported', value: next });
+            state.value = switchReducer(state.value, {
+                type: 'native-reported',
+                value: next,
+            });
         };
         // Snap-back: when native reported a value the parent rejected, command the JS value back
         // down (the controlled-Switch correction RN does via SwitchCommands.setValue). The
@@ -97,12 +100,18 @@ export function createSwitch(platform) {
             const attrs = normalizeVueAttrs(rawAttrs);
             return descriptorToVue(renderSwitch({
                 value: resolveModelValue(attrs, isBoolean) === true,
-                disabled: typeof attrs.disabled === 'boolean' ? attrs.disabled : undefined,
+                disabled: typeof attrs.disabled === 'boolean'
+                    ? attrs.disabled
+                    : undefined,
                 trackColor: normalizeTrackColor(attrs.trackColor),
                 thumbColor: asString(attrs.thumbColor),
                 ios_backgroundColor: asString(attrs.ios_backgroundColor),
                 style: isViewStyleObject(attrs.style) ? attrs.style : undefined,
-                passthrough: { ...forwardAttrs(attrs), ref: setNodeRef, onChange: handleChange },
+                passthrough: {
+                    ...forwardAttrs(attrs),
+                    ref: setNodeRef,
+                    onChange: handleChange,
+                },
             }, platform));
         };
     }, {

package/build/components/text-input/index.js

@@ -8,7 +8,7 @@
 // Inputs arrive as attrs (untyped), so each is narrowed with a runtime guard, never a cast.
 // onValueChange MUST be stripped from the forwarded attrs: it is not a ViewConfig event, so
 // leaking it would reach Fabric as a function prop and crash Android's folly::dynamic.
-import { defineComponent, onBeforeUnmount, ref, shallowRef, watch } from '@vue/runtime-core';
+import { defineComponent, onBeforeUnmount, ref, shallowRef, watch, } from '@vue/runtime-core';
 import { resolveAccessibilityProps, resolveTextInputProps, renderTextInput, foldText, textFromChange, eventCountFromChange, shouldCommandText, INITIAL_EVENT_COUNT, SELECTION_NONE, } from '@symbiote-native/components';
 import { dispatchViewCommand, isSymbioteNode, dlog, blurTextInput, setInputFocused, setInputBlurred, whenCommitted, } from '@symbiote-native/engine';
 import { descriptorToVue } from '../../descriptor-to-vue.js';
@@ -170,7 +170,12 @@ export const TextInput = defineComponent((_props, { attrs: rawAttrs, emit, expos
             const node = nodeRef.value;
             if (node === null)
                 return;
-            dispatchViewCommand(node, 'setTextAndSelection', [mostRecentEventCount.value, '', 0, 0]);
+            dispatchViewCommand(node, 'setTextAndSelection', [
+                mostRecentEventCount.value,
+                '',
+                0,
+                0,
+            ]);
             lastNativeText = '';
         },
         isFocused: () => focused,
@@ -186,6 +191,24 @@ export const TextInput = defineComponent((_props, { attrs: rawAttrs, emit, expos
                 end,
             ]);
         },
+        // Forwarded from the node, because `expose()` REPLACES the public instance rather than
+        // extending it: without these four, a `<TextInput>` ref could not measure while a `<View>`
+        // ref could, and an app moved between the component and lowered paths — which it does by
+        // writing `:multiline="isLong"` instead of `multiline` — silently swapped which four methods
+        // it had. The lowered path answers all nine through `buildTextInputHandle`; this is the same
+        // set on the component path, so the two surfaces are one.
+        measure: (callback) => {
+            nodeRef.value?.measure(callback);
+        },
+        measureInWindow: (callback) => {
+            nodeRef.value?.measureInWindow(callback);
+        },
+        measureLayout: (relativeToNativeNode, onSuccess, onFail) => {
+            nodeRef.value?.measureLayout(relativeToNativeNode, onSuccess, onFail);
+        },
+        setNativeProps: (nativeProps) => {
+            nodeRef.value?.setNativeProps(nativeProps);
+        },
     });
     return () => {
         const attrs = normalizeVueAttrs(rawAttrs);

package/build/components/touchable-native-feedback.js

@@ -6,7 +6,7 @@
 import { defineComponent, h } from '@vue/runtime-core';
 import { backgroundProps, canUseNativeForeground, rippleBackground, selectableBackground, selectableBackgroundBorderless, } from '@symbiote-native/components';
 import { dlog } from '@symbiote-native/engine';
-import { View } from '../components.js';
+import { HOST_VIEW } from '../components.js';
 import { Pressable, emitPressableEvents, PRESSABLE_EMITS, } from './pressable.js';
 import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
 const HANDLED = ['background', 'useForeground'];
@@ -32,7 +32,9 @@ function asBackground(value) {
             return {
                 type: 'ThemeAttrAndroid',
                 attribute: value.attribute,
-                rippleRadius: typeof value.rippleRadius === 'number' ? value.rippleRadius : undefined,
+                rippleRadius: typeof value.rippleRadius === 'number'
+                    ? value.rippleRadius
+                    : undefined,
             };
         }
         return undefined;
@@ -57,8 +59,13 @@ const TouchableNativeFeedbackImpl = defineComponent((_props, { slots, attrs: raw
         dlog(`TouchableNativeFeedback render ${resolved.type} useForeground ${useForeground}`);
         const nativeProps = backgroundProps(resolved, useForeground);
         const children = slots.default !== undefined ? slots.default() : [];
-        const feedback = h(View, nativeProps, () => children);
-        return h(Pressable, { ...forwardAttrs(attrs), ...emitPressableEvents(emit) }, { default: () => [feedback] });
+        // The intrinsic tag, not our <View> component — see the note at HOST_VIEW.
+        const feedback = h(HOST_VIEW, nativeProps, children);
+        return h(Pressable, {
+            ...forwardAttrs(attrs),
+            ...emitPressableEvents(emit),
+            __minPressDuration: 0,
+        }, { default: () => [feedback] });
     };
 }, {
     name: 'TouchableNativeFeedback',

package/build/components/touchable.d.ts

@@ -12,6 +12,10 @@ export interface ITouchableHighlightProps extends ITouchableBaseProps {
     underlayColor?: string;
 }
 export type ITouchableWithoutFeedbackProps = ITouchableBaseProps;
+export type ITouchableHighlightEmits = IPressableEmits & {
+    showUnderlay: () => boolean;
+    hideUnderlay: () => boolean;
+};
 export declare const TouchableOpacity: import("vue").DefineSetupFnComponent<ITouchableOpacityProps, IPressableEmits, {}, ITouchableOpacityProps & {
     onPress?: ((event: ISymbioteEvent) => any) | undefined;
     onPressIn?: ((event: ISymbioteEvent) => any) | undefined;
@@ -21,7 +25,7 @@ export declare const TouchableOpacity: import("vue").DefineSetupFnComponent<ITou
     onHoverIn?: ((event: ISymbioteEvent) => any) | undefined;
     onHoverOut?: ((event: ISymbioteEvent) => any) | undefined;
 }, import("vue").PublicProps>;
-export declare const TouchableHighlight: import("vue").DefineSetupFnComponent<ITouchableHighlightProps, IPressableEmits, {}, ITouchableHighlightProps & {
+export declare const TouchableHighlight: import("vue").DefineSetupFnComponent<ITouchableHighlightProps, ITouchableHighlightEmits, {}, ITouchableHighlightProps & {
     onPress?: ((event: ISymbioteEvent) => any) | undefined;
     onPressIn?: ((event: ISymbioteEvent) => any) | undefined;
     onPressOut?: ((event: ISymbioteEvent) => any) | undefined;
@@ -29,6 +33,8 @@ export declare const TouchableHighlight: import("vue").DefineSetupFnComponent<IT
     onLongPress?: ((event: ISymbioteEvent) => any) | undefined;
     onHoverIn?: ((event: ISymbioteEvent) => any) | undefined;
     onHoverOut?: ((event: ISymbioteEvent) => any) | undefined;
+    onShowUnderlay?: (() => any) | undefined;
+    onHideUnderlay?: (() => any) | undefined;
 }, import("vue").PublicProps>;
 export declare const TouchableWithoutFeedback: import("vue").DefineSetupFnComponent<ITouchableBaseProps, IPressableEmits, {}, Omit<IPressableProps, "style"> & IPressTimingProps & {
     style?: IStyleProp<IViewStyle>;