@symbiote-native/solid 0.1.0 → 2.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 (106) hide show
  1. package/README.md +24 -14
  2. package/build/components/activity-indicator-props.d.ts +5 -0
  3. package/build/components/activity-indicator-props.js +1 -0
  4. package/build/components/button-props.d.ts +5 -0
  5. package/build/components/button-props.js +1 -0
  6. package/build/components/flat-list/index.jsx +3 -3
  7. package/build/components/{image-background.d.ts → image-background-props.d.ts} +2 -3
  8. package/build/components/image-background-props.js +1 -0
  9. package/build/components/image-props.d.ts +5 -0
  10. package/build/components/image-props.js +6 -0
  11. package/build/components/{input-accessory-view.d.ts → input-accessory-view-props.d.ts} +1 -2
  12. package/build/components/input-accessory-view-props.js +5 -0
  13. package/build/components/keyboard-avoiding-view.jsx +9 -4
  14. package/build/components/modal.jsx +6 -6
  15. package/build/components/{pressable.d.ts → pressable-props.d.ts} +8 -6
  16. package/build/components/pressable-props.js +13 -0
  17. package/build/components/{refresh-control.d.ts → refresh-control-props.d.ts} +3 -3
  18. package/build/components/refresh-control-props.js +7 -0
  19. package/build/components/safe-area-view-props.d.ts +10 -0
  20. package/build/components/safe-area-view-props.js +5 -0
  21. package/build/components/{scroll-view/shared.d.ts → scroll-view-props.d.ts} +7 -13
  22. package/build/components/scroll-view-props.js +29 -0
  23. package/build/components/switch-props.d.ts +6 -0
  24. package/build/components/switch-props.js +5 -0
  25. package/build/components/text-input-props.d.ts +8 -0
  26. package/build/components/text-input-props.js +1 -0
  27. package/build/components/{text.d.ts → text-props.d.ts} +3 -3
  28. package/build/components/text-props.js +11 -0
  29. package/build/components/touchable-native-feedback/touchable-native-feedback-props.d.ts +8 -0
  30. package/build/components/touchable-native-feedback/touchable-native-feedback-props.js +1 -0
  31. package/build/components/touchable-props.d.ts +18 -0
  32. package/build/components/touchable-props.js +1 -0
  33. package/build/components/touchable-without-feedback/touchable-without-feedback-props.d.ts +6 -0
  34. package/build/components/touchable-without-feedback/touchable-without-feedback-props.js +1 -0
  35. package/build/components/{view.d.ts → view-props.d.ts} +2 -3
  36. package/build/components/view-props.js +11 -0
  37. package/build/components/virtualized-list/index.android.js +5 -4
  38. package/build/components/virtualized-list/index.ios.js +6 -6
  39. package/build/components/virtualized-list/shared.d.ts +1 -3
  40. package/build/components/virtualized-list/shared.jsx +87 -98
  41. package/build/components/virtualized-list/sticky-header.d.ts +6 -0
  42. package/build/components/{scroll-view → virtualized-list}/sticky-header.jsx +28 -36
  43. package/build/components.d.ts +20 -30
  44. package/build/components.js +6 -33
  45. package/build/create-portal/index.jsx +1 -1
  46. package/build/descriptor-to-solid.js +1 -1
  47. package/build/host-instance.js +3 -3
  48. package/build/index.d.ts +2 -0
  49. package/build/index.js +13 -3
  50. package/build/jsx-runtime.d.ts +39 -2
  51. package/build/modules/animated/create-animated-component.d.ts +1 -1
  52. package/build/modules/animated/create-animated-component.jsx +22 -0
  53. package/build/modules/animated/index.d.ts +0 -4
  54. package/build/modules/animated/index.js +16 -22
  55. package/build/modules/image.d.ts +3 -0
  56. package/build/modules/image.js +12 -0
  57. package/build/register.d.ts +1 -0
  58. package/build/register.js +15 -0
  59. package/build/renderer.d.ts +1 -0
  60. package/build/renderer.js +133 -6
  61. package/build/utils/stable-keys.d.ts +1 -1
  62. package/build/utils/stable-keys.js +6 -5
  63. package/metro-css-parser.cjs +2 -1
  64. package/package.json +18 -7
  65. package/build/components/activity-indicator/index.android.d.ts +0 -2
  66. package/build/components/activity-indicator/index.android.js +0 -11
  67. package/build/components/activity-indicator/index.d.ts +0 -1
  68. package/build/components/activity-indicator/index.ios.d.ts +0 -2
  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 -51
  73. package/build/components/button.d.ts +0 -7
  74. package/build/components/button.jsx +0 -45
  75. package/build/components/image-background.jsx +0 -74
  76. package/build/components/image.d.ts +0 -9
  77. package/build/components/image.js +0 -75
  78. package/build/components/input-accessory-view.jsx +0 -39
  79. package/build/components/pressable.jsx +0 -185
  80. package/build/components/refresh-control.jsx +0 -36
  81. package/build/components/safe-area-view.d.ts +0 -10
  82. package/build/components/safe-area-view.jsx +0 -24
  83. package/build/components/scroll-view/index.android.d.ts +0 -2
  84. package/build/components/scroll-view/index.android.js +0 -11
  85. package/build/components/scroll-view/index.d.ts +0 -2
  86. package/build/components/scroll-view/index.ios.d.ts +0 -2
  87. package/build/components/scroll-view/index.ios.js +0 -8
  88. package/build/components/scroll-view/index.js +0 -9
  89. package/build/components/scroll-view/shared.jsx +0 -334
  90. package/build/components/scroll-view/sticky-header.d.ts +0 -18
  91. package/build/components/switch/index.android.d.ts +0 -2
  92. package/build/components/switch/index.android.js +0 -12
  93. package/build/components/switch/index.d.ts +0 -1
  94. package/build/components/switch/index.ios.d.ts +0 -2
  95. package/build/components/switch/index.ios.js +0 -11
  96. package/build/components/switch/index.js +0 -4
  97. package/build/components/switch/shared.d.ts +0 -11
  98. package/build/components/switch/shared.js +0 -87
  99. package/build/components/text-input.d.ts +0 -10
  100. package/build/components/text-input.js +0 -268
  101. package/build/components/text.jsx +0 -27
  102. package/build/components/touchable/index.d.ts +0 -22
  103. package/build/components/touchable/index.jsx +0 -247
  104. package/build/components/touchable-native-feedback/index.d.ts +0 -16
  105. package/build/components/touchable-native-feedback/index.jsx +0 -68
  106. package/build/components/view.jsx +0 -49
@@ -1,45 +0,0 @@
1
- // Button — the minimal cross-platform button, rendered in its iOS shape per RN's Button.js: a
2
- // TouchableOpacity wrapping a Text. The base text style, the role constant and the color fold
3
- // (a caller `color` tints the label; `disabled` greys it, disabled winning) are shared in
4
- // @symbiote-native/components' render-button and are called, never re-derived; Solid only composes
5
- // its own TouchableOpacity + Text and forwards the native-only props.
6
- //
7
- // NO descriptorToSolid here, and none in React/Vue/Svelte either: the tree is two COMPONENTS, not
8
- // a Descriptor. There is no renderButton() to bridge — the shared half is the style/role math.
9
- //
10
- // NOTHING here destructures `props` at setup. Solid props are getters and a component body runs
11
- // ONCE; splitProps keeps both halves reactive and every read sits inside an accessor or a memo.
12
- import { createMemo, splitProps } from 'solid-js';
13
- import { BUTTON_ACCESSIBILITY_ROLE, resolveButtonTextStyle, } from '@symbiote-native/components';
14
- import { Text } from './text.jsx';
15
- import { TouchableOpacity } from './touchable/index.jsx';
16
- export function Button(props) {
17
- // Only what Button CONSUMES or re-maps is split off. Everything else — onPress, disabled,
18
- // testID, the TV-focus props, the accessibility/aria surface, `class` — stays in `rest` and
19
- // rides the single bag below onto the TouchableOpacity. The TV-focus props are real Fabric
20
- // props the pressable forwards without typing; a JSX spread carries them through unchecked
21
- // (they are inert on a phone host).
22
- const [local, rest] = splitProps(props, [
23
- 'title',
24
- 'color',
25
- 'touchSoundDisabled',
26
- ]);
27
- const textStyle = createMemo(() => resolveButtonTextStyle(local.color, rest.disabled));
28
- // ONE bag, not a spread followed by explicit props on the tag: Solid's mergeProps (which the
29
- // compiler uses for that shape) takes the first NON-undefined value scanning back to front, so
30
- // an override that can be undefined silently loses (.claude/rules/solid-descriptor-bridge.md
31
- // §6). A plain object is last-wins — the React semantics this is ported from, and what pins RN's
32
- // fixed role / accessible / disabled-state OVER the caller's own. touchSoundDisabled is RE-MAPPED
33
- // here, not forwarded: the pressable spells it android_disableSound. Return type left INFERRED;
34
- // widening to Record<string, unknown> would stop typing `onPress` too.
35
- const touchableProps = () => ({
36
- ...rest,
37
- android_disableSound: local.touchSoundDisabled,
38
- accessibilityRole: BUTTON_ACCESSIBILITY_ROLE,
39
- accessible: true,
40
- accessibilityState: { disabled: rest.disabled },
41
- });
42
- return (<TouchableOpacity {...touchableProps()}>
43
- <Text style={textStyle()}>{local.title}</Text>
44
- </TouchableOpacity>);
45
- }
@@ -1,74 +0,0 @@
1
- // ImageBackground — the Solid lifecycle half. The composition (the absolute-fill Image behind the
2
- // children, the wrapper-dimension proxy onto that Image, the imageStyle-last merge) lives
3
- // framework-agnostic in @symbiote-native/components' renderImageBackground and is shared verbatim
4
- // with React, Vue and Svelte. Solid supplies only the reactivity, the class-name resolution and
5
- // the child order.
6
- //
7
- // SPLIT DOWN THE MIDDLE, and the seam is the children rule. The wrapper hosts a live Solid subtree
8
- // (the overlay content), which only the reconciler can reduce, so it stays a literal
9
- // `symbiote-view` carrying the shared fn's own props — the same shape View and SafeAreaView use,
10
- // and the same one Svelte's ImageBackground lands on. The inner image is a leaf built entirely
11
- // from VALUES, so it goes through descriptorToSolid, which builds it once and re-props it in place
12
- // (replacing it would restart the download and drop the decoded bitmap).
13
- //
14
- // FLAT FILE, no folder: there are no platform or shared variants to group
15
- // (`symbiote-file-layout` — only genuine groups get a folder).
16
- //
17
- // NOTHING here destructures `props` at setup. Solid props are getters and a component body runs
18
- // ONCE; splitProps keeps every bucket reactive, and each read happens inside an accessor.
19
- import { createMemo, splitProps } from 'solid-js';
20
- import { createDescriptorShapeGuard, renderImageBackground, resolveAccessibilityProps, } from '@symbiote-native/components';
21
- import { resolveClassName, } from '@symbiote-native/engine';
22
- import { descriptorToSolid } from '../descriptor-to-solid.js';
23
- // renderImage's typed view fields — the props it CONSUMES rather than forwards. Split off so they
24
- // never also ride through `passthrough`: the W3C aliases in particular must not reach Fabric raw,
25
- // since native sees only the resolved `source` array they fold into. `style` is absent on purpose
26
- // — the inner image's style is computed by renderImageBackground, never taken from the caller.
27
- const IMAGE_VIEW_PROPS = [
28
- 'source',
29
- 'defaultSource',
30
- 'loadingIndicatorSource',
31
- 'resizeMode',
32
- 'tintColor',
33
- 'src',
34
- 'srcSet',
35
- 'alt',
36
- 'width',
37
- 'height',
38
- 'crossOrigin',
39
- 'referrerPolicy',
40
- ];
41
- const shape = createDescriptorShapeGuard('ImageBackground');
42
- export function ImageBackground(props) {
43
- const [local, view, rest] = splitProps(props, ['children', 'style', 'imageStyle', 'class'], IMAGE_VIEW_PROPS);
44
- // One memo, so the wrapper bag and the inner image derive from a SINGLE call per change.
45
- const wrapper = createMemo(() => renderImageBackground({
46
- style: local.style,
47
- // A bare string is a registered class name and has to become a style object here, before
48
- // it reaches the shared fn — which merges it, and knows nothing about the registry.
49
- imageStyle: typeof local.imageStyle === 'string'
50
- ? resolveClassName(local.imageStyle)
51
- : local.imageStyle,
52
- image: {
53
- ...view,
54
- // The wrapper is a raw host, not the View component, so the aria/role fold is this
55
- // component's own job; the resolved surface rides the IMAGE, matching every other adapter.
56
- passthrough: { ...resolveAccessibilityProps(rest) },
57
- },
58
- }));
59
- const backgroundImage = descriptorToSolid(() => shape.asElement(wrapper().children[0]));
60
- // ONE object literal rather than a spread-then-override on the tag: `class` is legitimately
61
- // undefined, and Solid's mergeProps (which the compiler uses for a spread followed by an
62
- // explicit prop) would discard that undefined instead of applying it
63
- // (.claude/rules/solid-descriptor-bridge.md §6). No withStableKeys — renderImageBackground's
64
- // wrapper props are `{ style }` unconditionally, so no key can vanish between runs.
65
- const wrapperBag = () => ({
66
- ...wrapper().props,
67
- class: local.class,
68
- });
69
- // The user children come AFTER the image in child order, which is what makes them paint on top.
70
- return (<symbiote-view {...wrapperBag()}>
71
- {backgroundImage}
72
- {local.children}
73
- </symbiote-view>);
74
- }
@@ -1,9 +0,0 @@
1
- import type { JSX } from '../jsx-runtime';
2
- import { type IImageProps as IImageBaseProps, type IImageStatics } from '@symbiote-native/components';
3
- import type { IClassNameValue } from '@symbiote-native/engine';
4
- export type { IImageStatics } from '@symbiote-native/components';
5
- export type IImageProps = IImageBaseProps & {
6
- class?: IClassNameValue;
7
- };
8
- export type IImageWithStatics = ((props: IImageProps) => JSX.Element) & IImageStatics;
9
- export declare const Image: IImageWithStatics;
@@ -1,75 +0,0 @@
1
- // Image — the Solid lifecycle half. Everything that turns props into a native prop bag (the
2
- // source / src / srcSet resolution, the width+height fold into style, resizeMode and tintColor
3
- // read back off the style, alt -> accessibilityLabel, the array shape native expects) lives
4
- // framework-agnostic in @symbiote-native/components' renderImage, shared verbatim with React, Vue
5
- // and Svelte. Solid supplies only the reactivity and the Descriptor bridge.
6
- //
7
- // PLAIN .ts, NOT .tsx, unlike ./view.tsx and ./text.tsx — and the difference is the children rule,
8
- // not a style choice. View and Text take a live subtree of the user's components, which only the
9
- // framework's own reconciler can reduce, so they emit real JSX. An image is a leaf built entirely
10
- // from VALUES, so it goes through renderImage + descriptorToSolid exactly like Switch does
11
- // (.claude/rules/component-render-fn-boundary.md).
12
- //
13
- // NOTHING here destructures `props`. Solid props are getters and a component body runs ONCE;
14
- // splitProps is the idiomatic split that keeps both halves reactive, and every read below happens
15
- // inside the descriptor accessor descriptorToSolid re-runs.
16
- //
17
- // ASSET RESOLUTION IS LAZY BY CONSTRUCTION, and that is what lets an app drop the hand-rolled
18
- // resolveImageSource() call it needed while this component did not exist. renderImage calls
19
- // resolveImageSource at RENDER time, and the resolver behind it is installed by bootstrapHost,
20
- // which createApp().mount() runs before AppRegistry ever renders a root. So a `require('./x.png')`
21
- // asset id handed to `source` is resolved by RN's own resolveAssetSource on the way to Fabric,
22
- // with no ordering hazard: a module-scope resolve would run one step too early, an accessor-time
23
- // one cannot.
24
- import { splitProps } from 'solid-js';
25
- import { imageStatics, renderImage, resolveAccessibilityProps, } from '@symbiote-native/components';
26
- import { descriptorToSolid } from '../descriptor-to-solid.js';
27
- // renderImage's typed view fields — the props it CONSUMES rather than forwards. Split off here so
28
- // they never also ride through `passthrough`: the W3C aliases in particular must not reach Fabric
29
- // raw, since native sees only the resolved `source` array they fold into. Everything else (the
30
- // load events, blurRadius, capInsets, resizeMethod, fadeDuration, testID, `class`, a caller's own
31
- // `ref`, the accessibility props) stays in `rest` and lands on the host image untouched.
32
- const VIEW_PROPS = [
33
- 'source',
34
- 'defaultSource',
35
- 'loadingIndicatorSource',
36
- 'style',
37
- 'resizeMode',
38
- 'tintColor',
39
- 'src',
40
- 'srcSet',
41
- 'alt',
42
- 'width',
43
- 'height',
44
- 'crossOrigin',
45
- 'referrerPolicy',
46
- ];
47
- function ImageComponent(props) {
48
- const [view, rest] = splitProps(props, VIEW_PROPS);
49
- // The node is created once and kept by identity — descriptorToSolid wires every prop through a
50
- // render effect on that same node, so a later source/style/alt change re-commits the existing
51
- // image rather than replacing it (which would restart the download and drop the decoded bitmap).
52
- return descriptorToSolid(() => renderImage({
53
- source: view.source,
54
- defaultSource: view.defaultSource,
55
- loadingIndicatorSource: view.loadingIndicatorSource,
56
- style: view.style,
57
- resizeMode: view.resizeMode,
58
- tintColor: view.tintColor,
59
- src: view.src,
60
- srcSet: view.srcSet,
61
- alt: view.alt,
62
- width: view.width,
63
- height: view.height,
64
- crossOrigin: view.crossOrigin,
65
- referrerPolicy: view.referrerPolicy,
66
- // Image owns its host element rather than rendering through a symbiote View, so folding
67
- // aria/role into the canonical accessibility* props is its own job, like Switch's.
68
- // renderImage's own `alt` fold then defers to an explicit accessibilityLabel found here.
69
- passthrough: { ...resolveAccessibilityProps(rest) },
70
- }));
71
- }
72
- // Statics attached like RN's own `Image.getSize` / `prefetch` / `queryCache` / `abortPrefetch` /
73
- // `getSizeWithHeaders` / `resolveAssetSource`, by identity off the same @symbiote-native/engine
74
- // module React, Vue and Svelte attach — never a Solid-side reimplementation.
75
- export const Image = Object.assign(ImageComponent, imageStatics);
@@ -1,39 +0,0 @@
1
- // InputAccessoryView — the Solid lifecycle half (iOS). The host-node assembly (nativeID /
2
- // backgroundColor / style / passthrough forwarding onto `symbiote-input-accessory-view`) lives
3
- // framework-agnostic in @symbiote-native/components' renderInputAccessoryView and is shared
4
- // verbatim with React, Vue and Svelte; Solid supplies only the reactivity and the children.
5
- //
6
- // REAL JSX, NOT descriptorToSolid — the same rule View and SafeAreaView follow. The render fn
7
- // returns a host with ZERO structural children by contract; the toolbar content is a live Solid
8
- // subtree only the reconciler can reduce, so the tag stays literal and the shared fn contributes
9
- // its PROPS. The literal tag is safe because renderInputAccessoryView's `type` is a constant.
10
- //
11
- // NOTHING here destructures `props` at setup. Solid props are getters and a component body runs
12
- // ONCE; splitProps keeps both halves reactive, and every read happens inside the bag accessor
13
- // that `spread` re-runs as a render effect on the SAME host node.
14
- import { splitProps } from 'solid-js';
15
- import { renderInputAccessoryView, resolveAccessibilityProps, } from '@symbiote-native/components';
16
- import { withStableKeys } from '../utils/stable-keys.js';
17
- export function InputAccessoryView(props) {
18
- const [local, rest] = splitProps(props, [
19
- 'children',
20
- 'nativeID',
21
- 'backgroundColor',
22
- 'style',
23
- ]);
24
- // withStableKeys is load-bearing twice over: renderInputAccessoryView emits `nativeID` and
25
- // `backgroundColor` CONDITIONALLY, and resolveAccessibilityProps has two branches with
26
- // different key sets. Solid's `spread` has no removal pass, so a key that vanishes between
27
- // runs would keep its last value on the native view forever (see utils/stable-keys.ts).
28
- const bag = withStableKeys(() => renderInputAccessoryView({
29
- nativeID: local.nativeID,
30
- backgroundColor: local.backgroundColor,
31
- style: local.style,
32
- // This component owns its host element rather than rendering through a View, so folding
33
- // aria/role into the canonical accessibility* props is its own job, like Image's.
34
- passthrough: { ...resolveAccessibilityProps(rest) },
35
- }).props);
36
- return (<symbiote-input-accessory-view {...bag()}>
37
- {local.children}
38
- </symbiote-input-accessory-view>);
39
- }
@@ -1,185 +0,0 @@
1
- // Pressable — the Solid lifecycle half. The press lifecycle (the long-press timer, the
2
- // unstable_pressDelay deferral, the pressRetentionOffset drift test, the suppression flags) lives
3
- // in @symbiote-native/components/state as a pure machine over a runtime + host; the render
4
- // decisions (which responder listeners the View carries, the disabled→accessibilityState fold, the
5
- // ripple prop) in @symbiote-native/components/view. Both are shared verbatim with React, Vue and
6
- // Svelte. Solid supplies only the reactivity: a signal for `pressed`, a setup-scope object for the
7
- // press runtime, a plain variable for the responder node, and one memo that rebuilds the handler
8
- // bag when the caller's config changes.
9
- //
10
- // THE RESPONDER EVENTS ARE NEVER NAMED AS EVENTS HERE. buildPressableListeners returns a flat bag
11
- // (`onPress`, `onStartShouldSetResponder`, `onResponderMove`, …) which rides into View's prop bag
12
- // and reaches the engine through routeProp, which decides prop-vs-event from the node's ViewConfig
13
- // and attaches the responder protocol itself (symbiote-engine-core §2). An adapter-side `onX` check
14
- // would both duplicate that and get the edge cases wrong.
15
- //
16
- // Pressable composes View rather than painting its own host tag, exactly as React's and Vue's do —
17
- // so the aria/role fold, the class+style merge and the vanished-key widening (utils/stable-keys)
18
- // all happen once, in View. That also means there is no renderPressable() Descriptor to bridge:
19
- // `children` is a live Solid subtree, which is the case the render-fn boundary rules OUT of core
20
- // (.claude/rules/component-render-fn-boundary.md).
21
- //
22
- // NOTHING here destructures `props`. Solid props are getters and a component body runs ONCE, so a
23
- // destructure would freeze the Pressable at its mount-time config; every read below sits inside an
24
- // accessor, a memo or an event handler.
25
- import { createEffect, createMemo, createSignal, splitProps, untrack, } from 'solid-js';
26
- import { buildPressableListeners, createPressHandlers, createPressRuntime, noteHoverNoop, resolveDisabledAccessibilityState, rippleProps, DEFAULT_DELAY_LONG_PRESS_MS, } from '@symbiote-native/components';
27
- import { dlog, } from '@symbiote-native/engine';
28
- import { View } from './view.jsx';
29
- // Read by Pressable itself; everything else forwards onto View. The user's press callbacks MUST be
30
- // split off — they are pure JS, and it is the machine's SYNTHESIZED handlers that go on the host.
31
- const HANDLED_PROPS = [
32
- 'onPress',
33
- 'onPressIn',
34
- 'onPressOut',
35
- 'onPressMove',
36
- 'onLongPress',
37
- 'delayLongPress',
38
- 'disabled',
39
- 'cancelable',
40
- 'pressRetentionOffset',
41
- 'unstable_pressDelay',
42
- 'android_ripple',
43
- 'android_disableSound',
44
- 'onHoverIn',
45
- 'onHoverOut',
46
- 'delayHoverIn',
47
- 'delayHoverOut',
48
- 'accessibilityState',
49
- 'style',
50
- 'children',
51
- ];
52
- // `hitSlop` is deliberately NOT in that list: the machine reads it for the retention test AND the
53
- // host needs it to enlarge the touch target, so it forwards through `rest` untouched.
54
- export function Pressable(props) {
55
- const [local, rest] = splitProps(props, HANDLED_PROPS);
56
- const [pressed, setPressed] = createSignal(false);
57
- // The mutable press runtime (in-flight timers, suppression flags, measured region). A plain
58
- // setup-scope object, never a signal: the machine mutates it on every event and nothing reads it
59
- // reactively — same shape as Vue's setup-scope runtime and Svelte's plain `const`.
60
- const runtime = createPressRuntime();
61
- // The responder node, held by IDENTITY in a plain variable. A store or a deep proxy would become
62
- // a different key than the one the engine's commit mirror holds, and measure() would silently
63
- // no-op (symbiote-engine-core §3).
64
- let responder = null;
65
- const attachRef = (node) => {
66
- responder = node;
67
- };
68
- // The lifecycle seam the machine fills: flip the reactive `pressed` cell, and expose the
69
- // responder's raw frame-measure. Before the first commit the node has no Fabric tag, so measure()
70
- // no-ops and the machine falls back to its radius test — the same degradation every adapter has,
71
- // and not a whenCommitted case: the measure is triggered by a touch, which cannot arrive before
72
- // the view exists.
73
- const host = {
74
- setPressed,
75
- getMeasureFn: () => {
76
- const node = responder;
77
- if (node === null)
78
- return undefined;
79
- return callback => {
80
- node.measure(callback);
81
- };
82
- },
83
- schedule: (callback, ms) => {
84
- const id = setTimeout(callback, ms);
85
- return () => {
86
- clearTimeout(id);
87
- };
88
- },
89
- };
90
- // Rebuilt when the caller's config changes (the closures capture live values); the runtime
91
- // persists across rebuilds, so an in-flight timer or drift flag survives one. Deliberately does
92
- // NOT read `pressed` — a press must not churn the handler identities the host node holds.
93
- const handlers = createMemo(() => createPressHandlers({
94
- onPress: local.onPress,
95
- onPressIn: local.onPressIn,
96
- onPressOut: local.onPressOut,
97
- onPressMove: local.onPressMove,
98
- onLongPress: local.onLongPress,
99
- delayLongPress: local.delayLongPress ?? DEFAULT_DELAY_LONG_PRESS_MS,
100
- unstable_pressDelay: local.unstable_pressDelay ?? 0,
101
- hitSlop: rest.hitSlop,
102
- pressRetentionOffset: local.pressRetentionOffset,
103
- }, runtime, host));
104
- createEffect(() => {
105
- noteHoverNoop(local.onHoverIn, local.onHoverOut);
106
- });
107
- // Reading `pressed` sits INSIDE the function branch on purpose: a static style must not make the
108
- // prop bag depend on the press signal, or every touch would re-diff and re-commit the whole bag
109
- // for nothing. Unlike the children case below, reading it here is SAFE even in the function form
110
- // — the value feeds viewProps, a prop bag, and a prop bag reaches the host through `spread`,
111
- // which is a per-key diff on the SAME element. Nothing is rebuilt, so nothing can be rebuilt
112
- // mid-gesture.
113
- const pressStyle = () => {
114
- const style = local.style;
115
- if (typeof style !== 'function')
116
- return style;
117
- return style({ pressed: pressed() });
118
- };
119
- const viewProps = createMemo(() => {
120
- const disabled = local.disabled;
121
- const bag = {
122
- ...rest,
123
- style: pressStyle(),
124
- accessibilityState: resolveDisabledAccessibilityState(local.accessibilityState, disabled),
125
- };
126
- // Forwarded under RN's own key; inert on iOS.
127
- if (local.android_disableSound !== undefined) {
128
- bag.android_disableSound = local.android_disableSound;
129
- }
130
- // Last, so the synthesized responder listeners win over anything of the same name in `rest`.
131
- // When disabled the bag is EMPTY — every listener key vanishes, and View's withStableKeys
132
- // widens it back to `undefined`, which routeProp treats as a delete. Without that widening a
133
- // Pressable that became disabled would keep its old listeners on the native view forever
134
- // (.claude/rules/solid-descriptor-bridge.md §1).
135
- Object.assign(bag, buildPressableListeners(handlers(), {
136
- disabled,
137
- cancelable: local.cancelable,
138
- }));
139
- return bag;
140
- });
141
- // A memo, not a bare `() => ({ pressed: pressed() })`: two leaves reading `state()` in the same
142
- // press must see the same object, and an unchanged press must not hand out a fresh one.
143
- const pressState = createMemo(() => ({ pressed: pressed() }));
144
- // WHY AN ACCESSOR AND NOT `{ pressed: pressed() }`. Solid has no reconciler between what this
145
- // file returns and the host nodes — `insert` REPLACES a subtree, it never diffs one (the same
146
- // fact descriptor-to-solid.ts opens with). resolveChildren runs inside View's `insert` render
147
- // effect, so reading `pressed()` there put the press signal in that effect's dependency set:
148
- // every touch tore the child subtree down and built a fresh one. On device that rebuild landed
149
- // between `pressIn` and the native responder grant, the grant was lost, the gesture died, and
150
- // `pressed` stayed true — the "fires on every other tap, label stuck on its pressed text"
151
- // report. Vue diffs the slot's vnodes, Svelte patches a Snippet in place, Angular updates a
152
- // template context; all three reuse the nodes underneath. Solid has no such layer, so the
153
- // reactivity must cross the boundary as an accessor and only the leaf that reads it re-runs.
154
- //
155
- // The call is UNTRACKED and happens once, which is exactly how Solid core treats its own render
156
- // props: `<For>` runs the map fn under createRoot, and createRoot nulls the Listener. A signal
157
- // read at the top level of the child function therefore does not re-run it — nest it in the JSX
158
- // (or a <Show>) like anywhere else in Solid.
159
- const resolveChildren = () => {
160
- const children = local.children;
161
- if (typeof children !== 'function')
162
- return children;
163
- // A zero-argument accessor is an ordinary Solid JSX child (JSX.Element covers `() => Element`),
164
- // not a render prop, and `typeof` cannot tell the two apart — arity can. Handing it back
165
- // unread lets `insert` wrap it in its own render effect, which keeps it reactive; calling it
166
- // here, under untrack, would freeze it at its first value.
167
- if (children.length === 0)
168
- return () => children(pressState);
169
- return untrack(() => children(pressState));
170
- };
171
- // android_ripple rides a dedicated inner View — Android's ReactViewManager reads the ripple
172
- // background off a child, not off the responder itself. rippleProps() returns undefined off
173
- // Android, so the child renders unwrapped, no extra node (RN Pressable.js: "inert on iOS").
174
- const renderContent = () => {
175
- const config = local.android_ripple;
176
- const ripple = config !== undefined ? rippleProps(config) : undefined;
177
- if (ripple === undefined)
178
- return resolveChildren();
179
- dlog('Pressable wrapping children in an android_ripple View');
180
- return <symbiote-view {...ripple}>{resolveChildren()}</symbiote-view>;
181
- };
182
- return (<View ref={attachRef} {...viewProps()}>
183
- {renderContent()}
184
- </View>);
185
- }
@@ -1,36 +0,0 @@
1
- // RefreshControl — the Solid lifecycle half, and there is barely any: the component owns one host
2
- // tag and forwards its props onto it. On iOS `symbiote-refresh-control` resolves to Fabric's
3
- // PullToRefreshView, which lives INSIDE a ScrollView as a childless sibling before the content
4
- // container; on Android it is AndroidSwipeRefreshLayout and WRAPS the scroll view instead (an
5
- // Android ScrollView hosts exactly one child). Which of the two shapes is built is ScrollView's
6
- // job, not this file's — see scroll-view/shared.tsx's `refreshControlMode`.
7
- //
8
- // `refreshing` is a CONTROLLED prop: the parent owns it and pushes it down, and native reports the
9
- // gesture back through the direct `topRefresh` event. `onRefresh` therefore rides in the forwarded
10
- // bag untouched — routeProp asks the node's ViewConfig whether `onRefresh` is an event and attaches
11
- // it as a listener, which is why nothing here inspects the `on` prefix itself
12
- // (symbiote-engine-core §2).
13
- //
14
- // FLAT, not a folder: the file-layout rule gives a module its own folder only when it has real
15
- // platform (`.ios`/`.android`) or `-shared` variants. There is no JS-side platform branch here —
16
- // every prop forwards to the native node, which reads what it understands and ignores the rest, so
17
- // the Android-only spinner props below are harmless on iOS and vice versa.
18
- import { splitProps } from 'solid-js';
19
- import { resolveAccessibilityProps, } from '@symbiote-native/components';
20
- import { dlog } from '@symbiote-native/engine';
21
- import { withStableKeys } from '../utils/stable-keys.js';
22
- export function RefreshControl(props) {
23
- // `children` is pulled out rather than left in the bag: spread skips it anyway, but leaving it in
24
- // would make the bag accessor re-run whenever the child subtree changed. Same split View makes.
25
- const [local, rest] = splitProps(props, ['children']);
26
- // withStableKeys because resolveAccessibilityProps has two branches with DIFFERENT key sets — it
27
- // returns its input untouched while no aria-* alias holds a value, and a fully-blanked bag once
28
- // one does. Solid's `spread` walks only the current keys and has no removal pass, so a key that
29
- // vanishes would keep its last value on the native view forever
30
- // (.claude/rules/solid-descriptor-bridge.md §1).
31
- const bag = withStableKeys(() => ({ ...resolveAccessibilityProps(rest) }));
32
- dlog('RefreshControl -> PullToRefreshView');
33
- return (<symbiote-refresh-control {...bag()}>
34
- {local.children}
35
- </symbiote-refresh-control>);
36
- }
@@ -1,10 +0,0 @@
1
- import type { JSX } from '../jsx-runtime';
2
- import { type IAccessibilityProps, type IAriaProps } from '@symbiote-native/components';
3
- import { type IClassNameValue, type IStyleProp, type ISymbioteEvent, type IViewStyle } from '@symbiote-native/engine';
4
- export interface ISafeAreaViewProps extends IAccessibilityProps, IAriaProps {
5
- style?: IStyleProp<IViewStyle>;
6
- class?: IClassNameValue;
7
- onLayout?: (event: ISymbioteEvent) => void;
8
- children?: JSX.Element;
9
- }
10
- export declare function SafeAreaView(props: ISafeAreaViewProps): JSX.Element;
@@ -1,24 +0,0 @@
1
- // SafeAreaView — the native view that insets its children past the notch, the rounded corners and
2
- // the system bars. There is no JS-side inset math anywhere in this project: the host does it, and
3
- // every adapter's job is only to put style + children on the `symbiote-safe-area-view` intrinsic.
4
- //
5
- // So this is a View twin, and ./view.tsx carries the reasoning they share (why the file is real
6
- // JSX, why nothing is destructured at setup, why children and ref are pulled out of the bag).
7
- // The one thing worth repeating: there is no renderSafeAreaView() in @symbiote-native/components
8
- // and there must not be (.claude/rules/component-render-fn-boundary.md) — `children` is a live
9
- // Solid subtree that flows through the reconciler and is never reduced back to a Descriptor.
10
- //
11
- // The bag goes through withStableKeys because resolveAccessibilityProps has two branches with
12
- // DIFFERENT key sets, and Solid's `spread` has no removal pass — see utils/stable-keys.ts.
13
- import { splitProps } from 'solid-js';
14
- import { resolveAccessibilityProps, } from '@symbiote-native/components';
15
- import { dlog, } from '@symbiote-native/engine';
16
- import { withStableKeys } from '../utils/stable-keys.js';
17
- export function SafeAreaView(props) {
18
- const [local, rest] = splitProps(props, ['children']);
19
- dlog('SafeAreaView -> SafeAreaView');
20
- const bag = withStableKeys(() => ({ ...resolveAccessibilityProps(rest) }));
21
- return (<symbiote-safe-area-view {...bag()}>
22
- {local.children}
23
- </symbiote-safe-area-view>);
24
- }
@@ -1,2 +0,0 @@
1
- export type { IScrollViewProps, IScrollViewHandle, IScrollViewHostPlatform, IStickyHeaderComponentType, IStickyHeaderComponentProps, } from './shared';
2
- export declare const ScrollView: (props: import("./shared").IScrollViewProps) => import("@symbiote-native/solid/jsx-runtime").JSX.Element;
@@ -1,11 +0,0 @@
1
- // ScrollView on Android. An Android ScrollView accepts only ONE child, so a RefreshControl cannot
2
- // sit beside the content the way iOS allows ("addViewAt: failed to insert view … at index 1").
3
- // Instead the RefreshControl (AndroidSwipeRefreshLayout) WRAPS the scroll view, which nests inside
4
- // it with nestedScrollEnabled so the inner scroll takes the gesture before the refresh parent —
5
- // RN's own ScrollView.js android branch, and the same fact adapters/react's, adapters/vue's and
6
- // adapters/svelte's Android bindings encode. Metro picks this file on an Android host; no
7
- // Platform.OS read.
8
- import { createScrollView } from './shared.jsx';
9
- export const ScrollView = createScrollView({
10
- refreshControlMode: 'wrap',
11
- });
@@ -1,2 +0,0 @@
1
- export * from './index.ios';
2
- export { ScrollViewStickyHeader } from './sticky-header';
@@ -1,2 +0,0 @@
1
- export type { IScrollViewProps, IScrollViewHandle, IScrollViewHostPlatform, IStickyHeaderComponentType, IStickyHeaderComponentProps, } from './shared';
2
- export declare const ScrollView: (props: import("./shared").IScrollViewProps) => import("@symbiote-native/solid/jsx-runtime").JSX.Element;
@@ -1,8 +0,0 @@
1
- // ScrollView on iOS. The RefreshControl (PullToRefreshView) is a CHILD of the scroll view, rendered
2
- // as a childless SIBLING BEFORE the content container — RN ScrollView.js's
3
- // `{refreshControl}{contentContainer}`, the same fact adapters/react's, adapters/vue's and
4
- // adapters/svelte's iOS bindings encode. Metro picks this file on an iOS host; no Platform.OS read.
5
- import { createScrollView } from './shared.jsx';
6
- export const ScrollView = createScrollView({
7
- refreshControlMode: 'sibling',
8
- });
@@ -1,9 +0,0 @@
1
- // Base / default ScrollView: re-exports the iOS build. Metro overrides this with index.ios.ts /
2
- // index.android.ts on a real host; under vitest / tsc the resolution lands here. Filename is the
3
- // selector, no Platform.OS read.
4
- //
5
- // ScrollViewStickyHeader is exported from here rather than from the platform files: it has no
6
- // platform branch of its own, and an app may compose it directly around a section instead of going
7
- // through `stickyHeaderIndices`.
8
- export * from './index.ios.js';
9
- export { ScrollViewStickyHeader } from './sticky-header.jsx';