@symbiote-native/vue 1.0.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (114) hide show
  1. package/README.md +13 -12
  2. package/babel-jsx.cjs +26 -18
  3. package/build/components/activity-indicator-props.d.ts +5 -0
  4. package/build/components/activity-indicator-props.js +1 -0
  5. package/build/components/button-props.d.ts +5 -0
  6. package/build/components/button-props.js +1 -0
  7. package/build/components/flat-list/index.d.ts +3 -3
  8. package/build/components/flat-list/index.js +3 -3
  9. package/build/components/image-background-props.d.ts +7 -0
  10. package/build/components/image-background-props.js +1 -0
  11. package/build/components/image-props.d.ts +5 -0
  12. package/build/components/image-props.js +5 -0
  13. package/build/components/{input-accessory-view.d.ts → input-accessory-view-props.d.ts} +1 -3
  14. package/build/components/input-accessory-view-props.js +5 -0
  15. package/build/components/keyboard-avoiding-view.js +9 -5
  16. package/build/components/modal/index.js +1 -1
  17. package/build/components/pressable-props.d.ts +31 -0
  18. package/build/components/pressable-props.js +12 -0
  19. package/build/components/refresh-control-props.d.ts +16 -0
  20. package/build/components/refresh-control-props.js +9 -0
  21. package/build/components/safe-area-view-props.d.ts +6 -0
  22. package/build/components/safe-area-view-props.js +5 -0
  23. package/build/components/scroll-view/{shared.d.ts → scroll-view-props.d.ts} +4 -27
  24. package/build/components/scroll-view/scroll-view-props.js +1 -0
  25. package/build/components/section-list/index.d.ts +3 -3
  26. package/build/components/switch/switch-props.d.ts +6 -0
  27. package/build/components/switch/switch-props.js +1 -0
  28. package/build/components/text-input/text-input-props.d.ts +5 -0
  29. package/build/components/text-input/text-input-props.js +1 -0
  30. package/build/components/text-props.d.ts +24 -0
  31. package/build/components/text-props.js +6 -0
  32. package/build/components/touchable-native-feedback-props.d.ts +7 -0
  33. package/build/components/touchable-native-feedback-props.js +1 -0
  34. package/build/components/touchable-props.d.ts +17 -0
  35. package/build/components/touchable-props.js +1 -0
  36. package/build/components/touchable-without-feedback-props.d.ts +5 -0
  37. package/build/components/touchable-without-feedback-props.js +1 -0
  38. package/build/components/view-props.d.ts +29 -0
  39. package/build/components/view-props.js +5 -0
  40. package/build/components/virtualized-list/index.d.ts +3 -3
  41. package/build/components/virtualized-list/index.js +64 -46
  42. package/build/components/virtualized-section-list/index.d.ts +3 -3
  43. package/build/descriptor-to-vue.js +2 -2
  44. package/build/host-instance/index.js +2 -2
  45. package/build/index.d.ts +24 -27
  46. package/build/index.js +31 -16
  47. package/build/intrinsic-elements.d.ts +19 -0
  48. package/build/intrinsic-elements.js +1 -0
  49. package/build/jsx-runtime.d.ts +67 -0
  50. package/build/jsx-runtime.js +1 -0
  51. package/build/modules/animated/index.d.ts +41 -20
  52. package/build/modules/animated/index.js +20 -19
  53. package/build/modules/image/index.d.ts +3 -0
  54. package/build/modules/image/index.js +13 -0
  55. package/build/register.d.ts +1 -1
  56. package/build/register.js +13 -33
  57. package/build/renderer/index.js +108 -54
  58. package/build/runtime-helpers/index.d.ts +10 -1
  59. package/build/runtime-helpers/index.js +56 -22
  60. package/build/utils/normalize-attrs.js +3 -3
  61. package/intrinsic-tags.cjs +52 -0
  62. package/metro-vue-transformer.cjs +55 -345
  63. package/package.json +13 -9
  64. package/babel-lower-host-primitives.cjs +0 -225
  65. package/build/components/activity-indicator/index.android.d.ts +0 -4
  66. package/build/components/activity-indicator/index.android.js +0 -10
  67. package/build/components/activity-indicator/index.d.ts +0 -1
  68. package/build/components/activity-indicator/index.ios.d.ts +0 -4
  69. package/build/components/activity-indicator/index.ios.js +0 -10
  70. package/build/components/activity-indicator/index.js +0 -4
  71. package/build/components/activity-indicator/shared.d.ts +0 -8
  72. package/build/components/activity-indicator/shared.js +0 -48
  73. package/build/components/button.d.ts +0 -14
  74. package/build/components/button.js +0 -61
  75. package/build/components/image-background.d.ts +0 -9
  76. package/build/components/image-background.js +0 -103
  77. package/build/components/image.d.ts +0 -9
  78. package/build/components/image.js +0 -90
  79. package/build/components/input-accessory-view.js +0 -41
  80. package/build/components/pressable.d.ts +0 -58
  81. package/build/components/pressable.js +0 -233
  82. package/build/components/refresh-control.d.ts +0 -20
  83. package/build/components/refresh-control.js +0 -47
  84. package/build/components/safe-area-view.d.ts +0 -9
  85. package/build/components/safe-area-view.js +0 -33
  86. package/build/components/scroll-view/index.android.d.ts +0 -4
  87. package/build/components/scroll-view/index.android.js +0 -64
  88. package/build/components/scroll-view/index.d.ts +0 -1
  89. package/build/components/scroll-view/index.ios.d.ts +0 -4
  90. package/build/components/scroll-view/index.ios.js +0 -17
  91. package/build/components/scroll-view/index.js +0 -4
  92. package/build/components/scroll-view/shared.js +0 -271
  93. package/build/components/scroll-view/sticky-header.d.ts +0 -7
  94. package/build/components/scroll-view/sticky-header.js +0 -208
  95. package/build/components/switch/index.android.d.ts +0 -12
  96. package/build/components/switch/index.android.js +0 -13
  97. package/build/components/switch/index.d.ts +0 -2
  98. package/build/components/switch/index.ios.d.ts +0 -12
  99. package/build/components/switch/index.ios.js +0 -11
  100. package/build/components/switch/index.js +0 -5
  101. package/build/components/switch/shared.d.ts +0 -23
  102. package/build/components/switch/shared.js +0 -126
  103. package/build/components/text-input/index.d.ts +0 -24
  104. package/build/components/text-input/index.js +0 -260
  105. package/build/components/touchable-native-feedback.d.ts +0 -24
  106. package/build/components/touchable-native-feedback.js +0 -82
  107. package/build/components/touchable.d.ts +0 -50
  108. package/build/components/touchable.js +0 -281
  109. package/build/components.d.ts +0 -53
  110. package/build/components.js +0 -45
  111. package/build/composables/use-raw-attrs.d.ts +0 -1
  112. package/build/composables/use-raw-attrs.js +0 -26
  113. package/build/state-style.d.ts +0 -1
  114. package/build/state-style.js +0 -13
@@ -1,41 +0,0 @@
1
- // InputAccessoryView: the Vue lifecycle half (iOS). The host-node assembly (nativeID /
2
- // backgroundColor / style / accessibility forwarding) lives framework-agnostic in
3
- // @symbiote-native/components/renderInputAccessoryView and is shared verbatim with React; here Vue only
4
- // narrows the untyped attrs, folds aria/role, bridges the Descriptor, and nests the slot children
5
- // under the host.
6
- //
7
- // FUNCTIONAL, not a stateful defineComponent: render-only (no state). Inputs arrive as attrs
8
- // (untyped); the typed fields are narrowed with runtime guards, the forward-only rest is folded
9
- // so resolveAccessibilityProps lands aria-* onto the host node.
10
- import { h } from '@vue/runtime-core';
11
- import { renderInputAccessoryView, resolveAccessibilityProps, } from '@symbiote-native/components';
12
- import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
13
- function asString(value) {
14
- return typeof value === 'string' ? value : undefined;
15
- }
16
- function isStyleProp(value) {
17
- return typeof value === 'object' && value !== null;
18
- }
19
- const HANDLED_ATTRS = ['nativeID', 'backgroundColor', 'style'];
20
- function forwardAttrs(attrs) {
21
- const result = {};
22
- for (const key of Object.keys(attrs)) {
23
- if (!HANDLED_ATTRS.includes(key))
24
- result[key] = attrs[key];
25
- }
26
- return result;
27
- }
28
- const InputAccessoryViewComponent = (_props, { attrs: rawAttrs, slots }) => {
29
- const attrs = normalizeVueAttrs(rawAttrs);
30
- const host = renderInputAccessoryView({
31
- nativeID: asString(attrs.nativeID),
32
- backgroundColor: asString(attrs.backgroundColor),
33
- style: isStyleProp(attrs.style) ? attrs.style : undefined,
34
- passthrough: resolveAccessibilityProps(forwardAttrs(attrs)),
35
- });
36
- const slotChildren = slots.default !== undefined ? slots.default() : [];
37
- return h(host.type, { ...host.props, key: host.key }, slotChildren);
38
- };
39
- InputAccessoryViewComponent.displayName = 'InputAccessoryView';
40
- InputAccessoryViewComponent.inheritAttrs = false;
41
- export const InputAccessoryView = InputAccessoryViewComponent;
@@ -1,58 +0,0 @@
1
- import { type EmitFn, type VNode } from '@vue/runtime-core';
2
- import { type IPressState, type IRectOffset, type IPressableAndroidRippleConfig, type IAccessibilityProps, type IAriaProps } from '@symbiote-native/components';
3
- import { type IClassNameValue, type ISymbioteEvent, type IStyleProp, type IViewStyle } from '@symbiote-native/engine';
4
- export type { IPressState, IPressableAndroidRippleConfig, } from '@symbiote-native/components';
5
- export type IPressableEmits = {
6
- press: (event: ISymbioteEvent) => boolean;
7
- pressIn: (event: ISymbioteEvent) => boolean;
8
- pressOut: (event: ISymbioteEvent) => boolean;
9
- pressMove: (event: ISymbioteEvent) => boolean;
10
- longPress: (event: ISymbioteEvent) => boolean;
11
- hoverIn: (event: ISymbioteEvent) => boolean;
12
- hoverOut: (event: ISymbioteEvent) => boolean;
13
- };
14
- export declare const PRESSABLE_EMITS: {
15
- press: (_event: ISymbioteEvent) => boolean;
16
- pressIn: (_event: ISymbioteEvent) => boolean;
17
- pressOut: (_event: ISymbioteEvent) => boolean;
18
- pressMove: (_event: ISymbioteEvent) => boolean;
19
- longPress: (_event: ISymbioteEvent) => boolean;
20
- hoverIn: (_event: ISymbioteEvent) => boolean;
21
- hoverOut: (_event: ISymbioteEvent) => boolean;
22
- };
23
- export declare function emitPressableEvents(emit: EmitFn<IPressableEmits>): Record<string, (event: ISymbioteEvent) => void>;
24
- export interface IPressableProps extends IAccessibilityProps, IAriaProps {
25
- delayLongPress?: number;
26
- disabled?: boolean;
27
- cancelable?: boolean;
28
- hitSlop?: IRectOffset;
29
- pressRetentionOffset?: IRectOffset;
30
- unstable_pressDelay?: number;
31
- android_ripple?: IPressableAndroidRippleConfig;
32
- android_disableSound?: boolean;
33
- delayHoverIn?: number;
34
- delayHoverOut?: number;
35
- testID?: string;
36
- style?: IStyleProp<IViewStyle> | ((state: IPressState) => IStyleProp<IViewStyle>);
37
- class?: IClassNameValue;
38
- }
39
- export type IPressableSlots = {
40
- default?: (state: IPressState) => VNode[] | VNode;
41
- };
42
- export declare const Pressable: import("vue").DefineSetupFnComponent<IPressableProps, {
43
- press: (_event: ISymbioteEvent) => boolean;
44
- pressIn: (_event: ISymbioteEvent) => boolean;
45
- pressOut: (_event: ISymbioteEvent) => boolean;
46
- pressMove: (_event: ISymbioteEvent) => boolean;
47
- longPress: (_event: ISymbioteEvent) => boolean;
48
- hoverIn: (_event: ISymbioteEvent) => boolean;
49
- hoverOut: (_event: ISymbioteEvent) => boolean;
50
- }, import("vue").SlotsType<IPressableSlots>, IPressableProps & {
51
- onPress?: ((_event: ISymbioteEvent) => any) | undefined;
52
- onPressIn?: ((_event: ISymbioteEvent) => any) | undefined;
53
- onPressOut?: ((_event: ISymbioteEvent) => any) | undefined;
54
- onPressMove?: ((_event: ISymbioteEvent) => any) | undefined;
55
- onLongPress?: ((_event: ISymbioteEvent) => any) | undefined;
56
- onHoverIn?: ((_event: ISymbioteEvent) => any) | undefined;
57
- onHoverOut?: ((_event: ISymbioteEvent) => any) | undefined;
58
- }, import("vue").PublicProps>;
@@ -1,233 +0,0 @@
1
- // Pressable, the Vue lifecycle half. The press lifecycle (long-press timer, unstable_press-
2
- // Delay deferral, pressRetentionOffset drift test, suppression flags) lives in
3
- // @symbiote-native/components/state as a pure machine over a runtime + host; the render
4
- // decisions (responder listeners, disabled->accessibilityState fold, ripple prop) in
5
- // @symbiote-native/components/view, both shared verbatim with React. Vue supplies the
6
- // reactivity: a `ref` holds `pressed`, a setup-scope object holds the press runtime, a function
7
- // ref grabs the responder View's host node.
8
- //
9
- // Inputs arrive as attrs (untyped), so each is narrowed with a runtime guard, never a cast. The
10
- // user's onPress/onPressIn/... are consumed by the machine and MUST be stripped from the
11
- // forwarded attrs (pure-JS callbacks); the machine's SYNTHESIZED handlers go on the View instead.
12
- // Children arrive as a (scoped) default slot so `v-slot="{ pressed }"` mirrors React's
13
- // children-as-function.
14
- import { defineComponent, h, onUnmounted, ref, shallowRef, } from '@vue/runtime-core';
15
- import { createPressHandlers, createPressRuntime, disposePressRuntime, rippleProps, buildPressableListeners, resolveDisabledAccessibilityState, noteHoverNoop, resolveAccessibilityProps, DEFAULT_DELAY_LONG_PRESS_MS, DEFAULT_MIN_PRESS_DURATION_MS, } from '@symbiote-native/components';
16
- import { measure, isSymbioteNode, } from '@symbiote-native/engine';
17
- import { HOST_VIEW } from '../components.js';
18
- import { useRawAttrs } from '../composables/use-raw-attrs.js';
19
- import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
20
- // Reused verbatim as the `emits` of every Touchable* wrapper, so the runtime list lives once.
21
- export const PRESSABLE_EMITS = {
22
- press: (_event) => true,
23
- pressIn: (_event) => true,
24
- pressOut: (_event) => true,
25
- pressMove: (_event) => true,
26
- longPress: (_event) => true,
27
- hoverIn: (_event) => true,
28
- hoverOut: (_event) => true,
29
- };
30
- // Bridge the whole press surface onto a child Pressable: each host onX callback re-emits the
31
- // matching event on the wrapper. A wrapper that intercepts an event for its own state (e.g.
32
- // TouchableOpacity's opacity animation on press-in/out) overrides that one key AFTER the spread.
33
- export function emitPressableEvents(emit) {
34
- return {
35
- onPress: event => emit('press', event),
36
- onPressIn: event => emit('pressIn', event),
37
- onPressOut: event => emit('pressOut', event),
38
- onPressMove: event => emit('pressMove', event),
39
- onLongPress: event => emit('longPress', event),
40
- onHoverIn: event => emit('hoverIn', event),
41
- onHoverOut: event => emit('hoverOut', event),
42
- };
43
- }
44
- function isRecord(value) {
45
- return typeof value === 'object' && value !== null && !Array.isArray(value);
46
- }
47
- function isStyleFn(value) {
48
- return typeof value === 'function';
49
- }
50
- function numberOr(value, fallback) {
51
- return typeof value === 'number' ? value : fallback;
52
- }
53
- // A scalar offset, or the per-edge object; anything else is dropped (the machine reads undefined
54
- // as "no offset" -> RN's defaults).
55
- function asRectOffset(value) {
56
- if (typeof value === 'number')
57
- return value;
58
- if (!isRecord(value))
59
- return undefined;
60
- const rect = {};
61
- if (typeof value.top === 'number')
62
- rect.top = value.top;
63
- if (typeof value.left === 'number')
64
- rect.left = value.left;
65
- if (typeof value.bottom === 'number')
66
- rect.bottom = value.bottom;
67
- if (typeof value.right === 'number')
68
- rect.right = value.right;
69
- return rect;
70
- }
71
- // android_ripple arrives untyped; keep only the fields the shared rippleProps reads.
72
- function asRippleConfig(value) {
73
- if (!isRecord(value))
74
- return undefined;
75
- const config = {};
76
- if (typeof value.color === 'string')
77
- config.color = value.color;
78
- if (typeof value.borderless === 'boolean')
79
- config.borderless = value.borderless;
80
- if (typeof value.radius === 'number')
81
- config.radius = value.radius;
82
- if (typeof value.foreground === 'boolean')
83
- config.foreground = value.foreground;
84
- return config;
85
- }
86
- // The user's accessibilityState, narrowed to the known fields (the disabled merge happens after).
87
- function asAccessibilityState(value) {
88
- if (!isRecord(value))
89
- return undefined;
90
- const state = {};
91
- if (typeof value.disabled === 'boolean')
92
- state.disabled = value.disabled;
93
- if (typeof value.selected === 'boolean')
94
- state.selected = value.selected;
95
- if (value.checked === 'mixed' || typeof value.checked === 'boolean')
96
- state.checked = value.checked;
97
- if (typeof value.busy === 'boolean')
98
- state.busy = value.busy;
99
- if (typeof value.expanded === 'boolean')
100
- state.expanded = value.expanded;
101
- return state;
102
- }
103
- function resolveStyle(value, state) {
104
- if (isStyleFn(value))
105
- return value(state);
106
- return value;
107
- }
108
- // Everything else forwards onto the View. User press callbacks are pure JS and must never reach
109
- // the host; the machine's synthesized handlers go on via buildPressableListeners.
110
- // A Set, not an array: forwardAttrs asks this question once per attr per Pressable instance, and
111
- // `Array.prototype.includes` walks all eighteen entries for every key that is NOT handled — which
112
- // is most of them. Membership is the whole use; the order never mattered.
113
- const HANDLED_ATTRS = new Set([
114
- 'onPress',
115
- 'onPressIn',
116
- 'onPressOut',
117
- 'onPressMove',
118
- 'onLongPress',
119
- 'delayLongPress',
120
- 'disabled',
121
- 'cancelable',
122
- 'pressRetentionOffset',
123
- 'unstable_pressDelay',
124
- '__minPressDuration',
125
- 'android_ripple',
126
- 'android_disableSound',
127
- 'onHoverIn',
128
- 'onHoverOut',
129
- 'delayHoverIn',
130
- 'delayHoverOut',
131
- 'style',
132
- 'accessibilityState',
133
- ]);
134
- function forwardAttrs(attrs) {
135
- const result = {};
136
- for (const key of Object.keys(attrs)) {
137
- if (!HANDLED_ATTRS.has(key))
138
- result[key] = attrs[key];
139
- }
140
- return result;
141
- }
142
- export const Pressable = defineComponent((_props, { slots, attrs: contextAttrs, emit, }) => {
143
- // The unproxied bag, captured once. See use-raw-attrs.ts for why the context's own attrs cost
144
- // a track() per read and why capturing here (a setup body) is the only safe place to do it.
145
- const rawAttrs = useRawAttrs(contextAttrs);
146
- const pressed = ref(false);
147
- // The mutable press runtime (timers, suppression flags, measured region). A plain setup-scope
148
- // object, never a ref: mutated by the machine, never reactively read.
149
- const runtime = createPressRuntime();
150
- // shallowRef, NOT ref: a plain ref would wrap the node in a reactive Proxy, missing the
151
- // engine's WeakMap mirror and making measure() no-op.
152
- const nodeRef = shallowRef(null);
153
- const setNodeRef = (el) => {
154
- nodeRef.value = isSymbioteNode(el) ? el : null;
155
- };
156
- // The lifecycle seam the machine fills: flip the reactive `pressed`, and expose the responder
157
- // View's raw frame-measure (or undefined before the node commits, a radius fallback).
158
- const host = {
159
- setPressed: next => {
160
- pressed.value = next;
161
- },
162
- getMeasureFn: () => {
163
- const node = nodeRef.value;
164
- if (node === null)
165
- return undefined;
166
- return callback => measure(node, callback);
167
- },
168
- schedule: (callback, ms) => {
169
- const id = setTimeout(callback, ms);
170
- return () => clearTimeout(id);
171
- },
172
- now: Date.now,
173
- };
174
- onUnmounted(() => {
175
- disposePressRuntime(runtime);
176
- });
177
- return () => {
178
- const attrs = normalizeVueAttrs(rawAttrs);
179
- const disabled = attrs.disabled === true ? true : undefined;
180
- const cancelable = typeof attrs.cancelable === 'boolean' ? attrs.cancelable : undefined;
181
- const config = {
182
- onPress: event => emit('press', event),
183
- onPressIn: event => emit('pressIn', event),
184
- onPressOut: event => emit('pressOut', event),
185
- onPressMove: event => emit('pressMove', event),
186
- onLongPress: event => emit('longPress', event),
187
- delayLongPress: numberOr(attrs.delayLongPress, DEFAULT_DELAY_LONG_PRESS_MS),
188
- unstable_pressDelay: numberOr(attrs.unstable_pressDelay, 0),
189
- minPressDuration: numberOr(attrs.__minPressDuration, DEFAULT_MIN_PRESS_DURATION_MS),
190
- hitSlop: asRectOffset(attrs.hitSlop),
191
- pressRetentionOffset: asRectOffset(attrs.pressRetentionOffset),
192
- };
193
- const handlers = createPressHandlers(config, runtime, host);
194
- noteHoverNoop(undefined, undefined);
195
- const state = { pressed: pressed.value };
196
- // Vue's View is a bare host primitive, so Pressable folds disabled into accessibilityState
197
- // and aria/role itself, rather than the View folding it (as React's does).
198
- // One bag, built once and then written into. The spread this replaces rebuilt the whole
199
- // forwarded set a second time just to add three keys; resolveAccessibilityProps hands back
200
- // the SAME object whenever no aria key is present, which is the common case, so on that path
201
- // the render now allocates one bag instead of two.
202
- const forwarded = forwardAttrs(attrs);
203
- forwarded.accessibilityState = resolveDisabledAccessibilityState(asAccessibilityState(attrs.accessibilityState), disabled);
204
- const viewProps = resolveAccessibilityProps(forwarded);
205
- viewProps.ref = setNodeRef;
206
- viewProps.style = resolveStyle(attrs.style, state);
207
- if (typeof attrs.android_disableSound === 'boolean')
208
- viewProps.android_disableSound = attrs.android_disableSound;
209
- Object.assign(viewProps, buildPressableListeners(handlers, { disabled, cancelable }));
210
- const content = slots.default !== undefined ? slots.default(state) : [];
211
- // android_ripple rides a dedicated inner View; on iOS the prop is undefined, so the child
212
- // renders unwrapped, no extra node.
213
- const ripple = isRecord(attrs.android_ripple)
214
- ? rippleProps(asRippleConfig(attrs.android_ripple) ?? {})
215
- : undefined;
216
- const inner = ripple !== undefined ? [h(HOST_VIEW, ripple, content)] : content;
217
- // The host node is the intrinsic TAG, not our <View> component: a Vue component instance
218
- // costs createComponentInstance + initProps + initSlots + setupRenderEffect even when the
219
- // component is functional, and this one only forwards attrs to the same tag. Pressable is
220
- // 2 of the 6 primitives in a benchmark row, so this is one instance per row, twice.
221
- //
222
- // Children are therefore an ARRAY, and that also RETIRES a hazard: passing an array to the
223
- // functional <View> made Vue normalize it to a default slot with a "Prefer function slots"
224
- // dev warn, whose trace formats the __self/__source dev props (native HostObjects) — a read
225
- // that throws under JSX and unwinds the whole mount into a blank screen. An element takes
226
- // array children natively and never reaches that path.
227
- return h(HOST_VIEW, viewProps, inner);
228
- };
229
- }, {
230
- name: 'Pressable',
231
- inheritAttrs: false,
232
- emits: PRESSABLE_EMITS,
233
- });
@@ -1,20 +0,0 @@
1
- import { type IClassNameValue } from '@symbiote-native/engine';
2
- import { type IAccessibilityProps, type IAriaProps } from '@symbiote-native/components';
3
- export interface IRefreshControlProps extends IAccessibilityProps, IAriaProps {
4
- refreshing: boolean;
5
- tintColor?: string;
6
- title?: string;
7
- titleColor?: string;
8
- progressViewOffset?: number;
9
- colors?: readonly string[];
10
- progressBackgroundColor?: string;
11
- size?: 'default' | 'large';
12
- enabled?: boolean;
13
- class?: IClassNameValue;
14
- }
15
- export type IRefreshControlEmits = {
16
- refresh: () => boolean;
17
- };
18
- export declare const RefreshControl: import("vue").DefineSetupFnComponent<IRefreshControlProps, IRefreshControlEmits, {}, IRefreshControlProps & {
19
- onRefresh?: (() => any) | undefined;
20
- }, import("vue").PublicProps>;
@@ -1,47 +0,0 @@
1
- // RefreshControl, the Vue lifecycle half. On iOS this is the PullToRefreshView Fabric node that
2
- // lives INSIDE a ScrollView (a sibling before the content container); on Android it is
3
- // AndroidSwipeRefreshLayout and WRAPS the scroll view (a ScrollView there hosts one child). Vue
4
- // takes the wrapped child via its DEFAULT SLOT (the seam the Android scroll-view wrap re-invokes
5
- // to host the scroll view inside it; iOS leaves the slot empty), folds aria/role through the
6
- // shared resolveAccessibilityProps, and forwards the native props onto the
7
- // symbiote-refresh-control host node.
8
- //
9
- // `refreshing` is a controlled prop the parent pushes down each commit; native reports the
10
- // gesture via the direct `topRefresh` event, routed to the host onRefresh prop and turned into
11
- // the typed Vue `refresh` emit.
12
- import { defineComponent, h } from '@vue/runtime-core';
13
- import { dlog } from '@symbiote-native/engine';
14
- import { resolveAccessibilityProps, } from '@symbiote-native/components';
15
- import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
16
- // Built at the a11y-intersection type (a real narrowing, not a cast), then fold aria-*/role into
17
- // the canonical accessibility* props. Children cross via slots, never attrs.
18
- function foldAttrs(attrs) {
19
- const bag = {};
20
- for (const key of Object.keys(attrs)) {
21
- if (key !== 'onRefresh')
22
- bag[key] = attrs[key];
23
- }
24
- return resolveAccessibilityProps(bag);
25
- }
26
- export const RefreshControl = defineComponent((_props, { attrs: rawAttrs, emit, slots }) => {
27
- return () => {
28
- const nativeProps = foldAttrs(normalizeVueAttrs(rawAttrs));
29
- dlog('RefreshControl -> PullToRefreshView');
30
- dlog(`RefreshControl refreshing=${String(nativeProps.refreshing)}`);
31
- if (nativeProps.enabled !== undefined)
32
- dlog(`RefreshControl enabled=${String(nativeProps.enabled)} (Android-only)`);
33
- dlog('RefreshControl refresh emit wired');
34
- return h('symbiote-refresh-control', {
35
- ...nativeProps,
36
- onRefresh: () => {
37
- emit('refresh');
38
- },
39
- }, slots.default !== undefined ? slots.default() : undefined);
40
- };
41
- }, {
42
- name: 'RefreshControl',
43
- inheritAttrs: false,
44
- emits: {
45
- refresh: () => true,
46
- },
47
- });
@@ -1,9 +0,0 @@
1
- import { type IClassNameValue } from '@symbiote-native/engine';
2
- import { type IAccessibilityProps, type IAriaProps } from '@symbiote-native/components';
3
- export type ISafeAreaViewProps = IAccessibilityProps & IAriaProps & {
4
- id?: string;
5
- class?: IClassNameValue;
6
- };
7
- export declare const SafeAreaView: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
8
- [key: string]: any;
9
- }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
@@ -1,33 +0,0 @@
1
- // SafeAreaView, the Vue lifecycle half. A plain view whose native side
2
- // insets its children to the safe area (notch, rounded corners, system bars); there is no
3
- // JS-side translation, so this maps style + children straight onto the intrinsic. The Vue twin
4
- // of the React adapter's SafeAreaView. Vue takes children via slots, folds aria/role through
5
- // the shared resolveAccessibilityProps (so every adapter normalizes the web aliases identically),
6
- // and forwards the rest onto the symbiote-safe-area-view host node.
7
- //
8
- // Inputs arrive as attrs (untyped), so the forwarded bag is BUILT at the a11y-intersection type
9
- // (a genuine narrowing, not a cast) before resolveAccessibilityProps folds aria-* into accessibility*.
10
- import { defineComponent, h } from '@vue/runtime-core';
11
- import { dlog } from '@symbiote-native/engine';
12
- import { resolveAccessibilityProps, } from '@symbiote-native/components';
13
- import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
14
- // Copy every attr into a bag typed as the a11y intersection (the accumulator is BUILT at that
15
- // type, a real narrowing, not a cast), then fold aria-*/role into the canonical accessibility*
16
- // props before they reach the host. style / onLayout / testID forward unchanged.
17
- function foldAttrs(attrs) {
18
- const bag = {};
19
- for (const key of Object.keys(attrs))
20
- bag[key] = attrs[key];
21
- return resolveAccessibilityProps(bag);
22
- }
23
- export const SafeAreaView = defineComponent({
24
- name: 'SafeAreaView',
25
- inheritAttrs: false,
26
- setup(_props, { attrs: rawAttrs, slots }) {
27
- return () => {
28
- dlog('SafeAreaView -> SafeAreaView');
29
- const nativeProps = foldAttrs(normalizeVueAttrs(rawAttrs));
30
- return h('symbiote-safe-area-view', nativeProps, slots.default !== undefined ? slots.default() : undefined);
31
- };
32
- },
33
- });
@@ -1,4 +0,0 @@
1
- export type { IScrollViewProps, IScrollViewEmits, IScrollViewHandle, } from './shared';
2
- export declare const ScrollView: import("vue").DefineSetupFnComponent<import("./shared").IScrollViewProps, import("./shared").IScrollViewEmits, {}, import("./shared").IScrollViewProps & {
3
- onContentSizeChange?: ((width: number, height: number) => any) | undefined;
4
- }, import("vue").PublicProps>;
@@ -1,64 +0,0 @@
1
- // ScrollView on Android. An Android ScrollView accepts only ONE child, so a RefreshControl can't
2
- // be a sibling of the content the way iOS allows ("addViewAt: failed to insert view ... at index
3
- // 1"). Instead the RefreshControl (AndroidSwipeRefreshLayout) WRAPS the scroll view, nested
4
- // inside with nestedScrollEnabled so it handles the gesture before the refresh parent, mirroring
5
- // RN's ScrollView.js android branch.
6
- //
7
- // React does this with cloneElement(refreshControl, {style}, scrollView). Vue has no
8
- // cloneElement, so the analog is to RE-INVOKE the user's RefreshControl component type via h():
9
- // same .type, its own .props plus the injected outer/layout style, and the inner scroll view as
10
- // its DEFAULT SLOT. The node ref stays on the INNER scroll view (not the wrapper), so
11
- // dispatchViewCommand targets it. Metro picks this file on an Android host; no Platform.OS read.
12
- // device-verify-pending: the wrap shape mirrors RN, proven on a real host by the absence of the
13
- // "addViewAt: failed to insert" crash.
14
- import { h, isVNode } from '@vue/runtime-core';
15
- import { dlog } from '@symbiote-native/engine';
16
- import { splitLayoutProps } from '@symbiote-native/components';
17
- import { createScrollView } from './shared.js';
18
- function isRecord(value) {
19
- return typeof value === 'object' && value !== null && !Array.isArray(value);
20
- }
21
- // Narrows VNodeTypes (string | Component | nested VNode | the Fragment/Text/... symbol
22
- // constants) to what h() accepts. refreshControl is always a real component element in practice.
23
- function isHostType(type) {
24
- if (typeof type === 'string')
25
- return true;
26
- return ((typeof type === 'object' || typeof type === 'function') &&
27
- type !== null &&
28
- !isVNode(type));
29
- }
30
- export const ScrollView = createScrollView({
31
- assemble: input => {
32
- if (input.refreshControl === undefined) {
33
- dlog('Vue ScrollView.ANDROID refreshControl=NONE(1child)');
34
- return h(input.scrollViewIntrinsic, input.scrollProps, [input.content]);
35
- }
36
- // RN splits the flattened style across the two boxes: LAYOUT props (margin/flex/size/
37
- // position/...) drive the outer AndroidSwipeRefreshLayout frame; VISUAL props (background/
38
- // padding/border/...) paint the inner scroll view - not a hardcoded flex:1 that would
39
- // override an explicit user height/width.
40
- //
41
- // layoutSplitStyle (not userStyle): a class-only layout prop is invisible to userStyle (it
42
- // never carries the resolved `class` value - see isClassNameProp in shared.ts), so splitting
43
- // on userStyle alone would starve the wrapper of its layout style.
44
- const { outer, inner } = splitLayoutProps(input.layoutSplitStyle);
45
- // `class` is stripped here: layoutSplitStyle already folded its resolved value into
46
- // outer/inner above, so forwarding the raw prop too would re-apply its LAYOUT half a second time.
47
- const { class: _classAppliedViaSplit, ...innerScrollOuterProps } = input.scrollOuterProps;
48
- const innerScrollView = h(input.scrollViewIntrinsic, {
49
- ...innerScrollOuterProps,
50
- style: [input.scrollViewBaseStyle, inner],
51
- nestedScrollEnabled: true,
52
- ref: input.setNodeRef,
53
- }, [input.content]);
54
- const rc = input.refreshControl;
55
- if (!isHostType(rc.type)) {
56
- // Degrade to the unwrapped scroll view rather than crash (the node ref is already on it).
57
- dlog('Vue ScrollView.ANDROID refreshControl has no hostable type, rendering scroll view unwrapped');
58
- return innerScrollView;
59
- }
60
- const rcProps = isRecord(rc.props) ? rc.props : {};
61
- dlog('Vue ScrollView.ANDROID refreshControl=WRAP');
62
- return h(rc.type, { ...rcProps, style: outer }, { default: () => [innerScrollView] });
63
- },
64
- });
@@ -1 +0,0 @@
1
- export * from './index.ios';
@@ -1,4 +0,0 @@
1
- export type { IScrollViewProps, IScrollViewEmits, IScrollViewHandle, } from './shared';
2
- export declare const ScrollView: import("vue").DefineSetupFnComponent<import("./shared").IScrollViewProps, import("./shared").IScrollViewEmits, {}, import("./shared").IScrollViewProps & {
3
- onContentSizeChange?: ((width: number, height: number) => any) | undefined;
4
- }, import("vue").PublicProps>;
@@ -1,17 +0,0 @@
1
- // ScrollView on iOS. The RefreshControl is a CHILD of the scroll view, rendered
2
- // as a SIBLING BEFORE the content container (RN ScrollView.js: {refreshControl}{contentContainer}).
3
- // The user's RefreshControl VNode renders as-is; its default slot is empty on iOS, so it is a
4
- // childless sibling. Also the base (scroll-view.ts re-exports it) for headless / web. Metro picks
5
- // this on an iOS host; no Platform.OS read. Mirrors the React adapter's iOS binding.
6
- import { h } from '@vue/runtime-core';
7
- import { createScrollView } from './shared.js';
8
- export const ScrollView = createScrollView({
9
- assemble: input => {
10
- // Sibling placement: RefreshControl before content (RN iOS). The node ref stays on the scroll
11
- // view via input.scrollProps, so the imperative handle targets it whether or not refresh is on.
12
- const children = input.refreshControl === undefined
13
- ? [input.content]
14
- : [input.refreshControl, input.content];
15
- return h(input.scrollViewIntrinsic, input.scrollProps, children);
16
- },
17
- });
@@ -1,4 +0,0 @@
1
- // Base / default ScrollView. Re-exports the iOS build. Metro overrides this with
2
- // scroll-view.ios.ts / scroll-view.android.ts on a real host; under tsx / tsc / web the host
3
- // resolves here. Filename is the selector, no Platform.OS read.
4
- export * from './index.ios.js';