@symbiote-native/solid 3.0.1 → 3.0.3

package/README.md

@@ -18,14 +18,27 @@ Metro, no custom Babel transformer path.
 
 ## Install
 
+```bash
+npx @symbiote-native/cli new my-app --framework solid
+```
+
+One command, nothing to wire by hand: scaffolds the Babel preset, Metro config, and
+`jsxImportSource` below, plus `@symbiote-native/solid`/`react-native`/`solid-js` as your app's own
+dependencies.
+
+<details>
+<summary>Manual install (no generator — an existing app, or you want to wire it yourself)</summary>
+
 ```bash
 npm install @symbiote-native/solid react-native solid-js
 ```
 
 `react-native` and `solid-js` stay your app's own top-level dependencies — this package only
-replaces the JS renderer that drives them. `npx @symbiote-native/cli new --framework solid` wires
-the Babel preset, Metro config, and `jsxImportSource` below for a new app; wiring them into an
-existing one still follows [`examples/solid`](../../examples/solid) rather than a generator.
+replaces the JS renderer that drives them. Follow [`examples/solid`](../../examples/solid) for the
+Babel preset, Metro config, and `jsxImportSource` below; there is no wiring script for an existing
+app.
+
+</details>
 
 Targets **Solid 1.9**, deliberately not 2.0 (RC as of 2026-08) — 2.0 moves the package to
 `@solidjs/universal`, changes `RendererOptions`, and changes the compiled-output shape. Moving to
@@ -36,29 +49,49 @@ it is a rewrite of `src/renderer.ts`, not a range bump.
 ## Use it
 
 The app is ordinary Solid — the native primitives are plain lowercase intrinsic tags, no import
-needed:
+needed. Styling is a CSS class against a plain `.css` file — the convention every example app
+here follows:
 
 ```jsx
 import { createSignal } from 'solid-js';
+import './App.css';
 
 export default function App() {
   const [count, setCount] = createSignal(0);
   return (
-    <view style={{ padding: 24 }}>
+    <safe-area-view class="screen">
       <text>Taps: {count()}</text>
       <pressable onPress={() => setCount(c => c + 1)}>
         <text>Tap me</text>
       </pressable>
-    </view>
+    </safe-area-view>
   );
 }
 ```
 
+```css
+/* App.css */
+.screen {
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+```
+
+<details>
+<summary>Native entry point (index.js) — already scaffolded by <code>npx @symbiote-native/cli new --framework solid</code></summary>
+
 The zero-config entry wires the RN-backed host seams and registers the app in one call — this is
 what [`examples/solid`](../../examples/solid) actually uses:
 
 ```js
 // index.js
+
+// Registers host behaviors (Image, Pressable, Switch, ...) that /bootstrap alone doesn't
+// reach; deleting this breaks them silently (Metro's production inlineRequires makes a
+// side-effect-only barrel import go lazy, see register.ts).
+import '@symbiote-native/solid';
 import { createApp } from '@symbiote-native/solid/bootstrap';
 import App from './App';
 import { name as appName } from './app.json';
@@ -81,6 +114,8 @@ AppRegistry.registerRunnable(appName, ({ rootTag }) => {
 });
 ```
 
+</details>
+
 `babel.config.js` needs the adapter's preset LAST — Babel applies presets in reverse order, so
 listing it last runs it first, claiming the JSX before RN's own React-JSX transform can:
 
@@ -100,11 +135,11 @@ Nothing rewrites the source on the way there, so this adapter carries no Babel p
 ## `./renderer` is a compiler target, not a convenience export
 
 `babel-preset-solid` with `generate: 'universal'` rewrites JSX into direct calls imported from the
-`moduleName` it was given. So `src/renderer.ts` exports eleven specific names because generated code
+`moduleName` it was given. So `src/renderer.ts` exports twelve specific names because generated code
 imports them; dropping one breaks bundling with a module-not-found on an import nobody wrote. The
-list (`createElement`, `createTextNode`, `insertNode`, `insert`, `setProp`, `use`, `effect`, `memo`,
-`createComponent`, `spread`, `mergeProps`) was verified by compiling representative JSX, not read off
-the docs.
+list (`render`, `createElement`, `createTextNode`, `insertNode`, `insert`, `setProp`, `use`, `effect`,
+`memo`, `createComponent`, `spread`, `mergeProps`) was verified by compiling representative JSX, not
+read off the docs.
 
 ## Three things the universal runtime does that the seam has to answer correctly
 

package/build/components/flat-list/index.jsx

@@ -25,8 +25,8 @@
 // caller receives that list's own handle — FlatList's handle IS VirtualizedList's (RN says the
 // same).
 import { Index, Show, createMemo, splitProps, untrack, } from 'solid-js';
-import { SINGLE_COLUMN, chunkIntoRows, expandRowViewability, firstItemOfRow, lastItemOfRow, rowKeyExtractor, } from '@symbiote-native/components';
-import { dlog, resolveClassName, } from '@symbiote-native/engine';
+import { SINGLE_COLUMN, chunkIntoRows, expandRowViewability, firstItemOfRow, lastItemOfRow, removeClippedSubviewsOrDefault, rowKeyExtractor, } from '@symbiote-native/components';
+import { Platform, dlog, resolveClassName, } from '@symbiote-native/engine';
 import { VirtualizedList, } from '../virtualized-list';
 // What FlatList itself consumes or re-shapes. Everything NOT listed here is passthrough and rides
 // down onto the inner list untouched — `ref` among it, which is why no delegate handle is needed.
@@ -46,6 +46,8 @@ const ROW_STYLE = { flexDirection: 'row' };
 const COLUMN_STYLE = { flex: 1 };
 export function FlatList(props) {
     const [, passthrough] = splitProps(props, OWN_PROPS);
+    // FlatList.js always sends it, defaulted per platform.
+    const removeClippedSubviews = () => removeClippedSubviewsOrDefault(props.removeClippedSubviews, Platform.OS);
     const columnCount = () => props.numColumns ?? SINGLE_COLUMN;
     // RN treats anything at or below one column as an ordinary single-column list rather than an
     // error, and so does adapters/react.
@@ -112,7 +114,7 @@ export function FlatList(props) {
     // soundly for an arbitrary ItemT. <Show> memoizes on the flip alone, so a numColumns change
     // rebuilds (RN documents changing it live as unsupported — "change the key prop" — which is the
     // same fresh start) while every other prop change re-props the live list.
-    return (<Show when={isMultiColumn()} fallback={<VirtualizedList {...passthrough} data={props.data} getItem={(_source, index) => props.data[index]} getItemCount={() => props.data.length} renderItem={props.renderItem} keyExtractor={props.keyExtractor} ItemSeparatorComponent={props.ItemSeparatorComponent} onViewableItemsChanged={props.onViewableItemsChanged} viewabilityConfigCallbackPairs={props.viewabilityConfigCallbackPairs}/>}>
-      <VirtualizedList {...passthrough} data={rows()} getItem={(_source, index) => rows()[index]} getItemCount={() => rows().length} renderItem={renderRow} keyExtractor={(row) => rowKeyExtractor(row, props.keyExtractor)} ItemSeparatorComponent={rowSeparatorComponent()} onViewableItemsChanged={rowViewability()} viewabilityConfigCallbackPairs={rowViewabilityPairs()}/>
+    return (<Show when={isMultiColumn()} fallback={<VirtualizedList {...passthrough} removeClippedSubviews={removeClippedSubviews()} data={props.data} getItem={(_source, index) => props.data[index]} getItemCount={() => props.data.length} renderItem={props.renderItem} keyExtractor={props.keyExtractor} ItemSeparatorComponent={props.ItemSeparatorComponent} onViewableItemsChanged={props.onViewableItemsChanged} viewabilityConfigCallbackPairs={props.viewabilityConfigCallbackPairs}/>}>
+      <VirtualizedList {...passthrough} removeClippedSubviews={removeClippedSubviews()} data={rows()} getItem={(_source, index) => rows()[index]} getItemCount={() => rows().length} renderItem={renderRow} keyExtractor={(row) => rowKeyExtractor(row, props.keyExtractor)} ItemSeparatorComponent={rowSeparatorComponent()} onViewableItemsChanged={rowViewability()} viewabilityConfigCallbackPairs={rowViewabilityPairs()}/>
     </Show>);
 }

package/build/components/modal.jsx

@@ -34,8 +34,8 @@
 // SEED, which is a mount-time value by definition (React's useReducer lazy init and Svelte's
 // $state(...) initializer read it exactly once too).
 import { createEffect, createSignal, Show, splitProps } from 'solid-js';
-import { createDescriptorShapeGuard, createInitialModalState, modalReducer, renderModal, resolveAccessibilityProps, shouldRenderModal, } from '@symbiote-native/components';
-import { dlog, } from '@symbiote-native/engine';
+import { createDescriptorShapeGuard, createInitialModalState, isModalVisible, modalReducer, modalVisibilityAction, renderModal, resolveAccessibilityProps, shouldRenderModal, } from '@symbiote-native/components';
+import { dlog, Platform, } from '@symbiote-native/engine';
 import { withStableKeys } from '../utils/stable-keys.js';
 // Read by Modal itself; everything else (the four DirectEvents, testID/nativeID, every
 // accessibility* and aria-* field) forwards onto the host node through `passthrough`, exactly as
@@ -54,28 +54,30 @@ const HANDLED_PROPS = [
     'style',
     'class',
     'children',
+    'onDismiss',
 ];
 const shape = createDescriptorShapeGuard('Modal');
 export function Modal(props) {
     const [local, rest] = splitProps(props, HANDLED_PROPS);
-    const isVisible = () => local.visible === true;
+    const isVisible = () => isModalVisible(local.visible);
     // The keep-alive seed is a mount-time value by contract (createInitialModalState: a modal that
     // starts visible is rendered, one that starts hidden contributes no node), so this one read
     // outside an accessor is correct rather than the frozen-props bug.
     const [state, setState] = createSignal(createInitialModalState(isVisible()));
-    // createEffect, not createRenderEffect: it runs AFTER the render that used the OLD state, which
-    // is the position React's useEffect, Vue's flush:'post' watch and Svelte's $effect all occupy —
-    // so a visible→hidden transition renders once more with isRendered still true (the keep-alive
-    // frame) before this drops it. A render effect would unmount immediately and kill the keep-alive.
-    // The reducer is identity-stable, so the mount run and any no-op transition write the same object
-    // back and nothing downstream recomputes.
-    //
-    // As on Svelte, and for the same reason: under this adapter's microtask-coalesced requestCommit()
-    // the whole cascade settles inside one flush, so the keep-alive frame is real but never lands as
-    // its own Fabric commit the way React's synchronous per-render commit makes it.
+    // Arms the iOS keep-alive on show; a hide is left to the native dismiss (state/modal.ts). The
+    // reducer is identity-stable, so the mount run writes the same object back.
     createEffect(() => {
-        setState(current => modalReducer(current, isVisible() ? { type: 'show' } : { type: 'hide' }));
+        const action = modalVisibilityAction(isVisible());
+        if (action !== undefined)
+            setState(current => modalReducer(current, action));
     });
+    // Modal.js: onDismiss is iOS-only — it drops the keep-alive, then tells the app.
+    const handleDismiss = () => {
+        if (Platform.OS !== 'ios')
+            return;
+        setState(current => modalReducer(current, { type: 'hide' }));
+        local.onDismiss?.();
+    };
     const shouldRender = () => shouldRenderModal(isVisible(), state());
     createEffect(() => {
         if (!shouldRender())
@@ -98,7 +100,10 @@ export function Modal(props) {
         navigationBarTranslucent: local.navigationBarTranslucent,
         allowSwipeDismissal: local.allowSwipeDismissal,
         style: local.style,
-        passthrough: resolveAccessibilityProps(rest),
+        passthrough: {
+            ...resolveAccessibilityProps(rest),
+            onDismiss: handleDismiss,
+        },
     });
     // root = modal > [container]; the user children nest UNDER the container View, never as
     // a direct sibling of the host (RN's modal content layout, render-modal.ts).

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

@@ -16,8 +16,7 @@
 //                         behaviors/scroll-view/shared.ts). Horizontal scroll is a separate native
 //                         ViewManager on Android, so the axis is the tag; a prop contradicting it
 //                         is dropped with a dlog. Typed here for parity and for a ported app.
-//   nestedScrollEnabled   defaults to `true` in the behavior, on both platforms, which every
-//                         wrapper used to write by hand.
+//   nestedScrollEnabled   defaults to `true` only under an Android RefreshControl, as in RN.
 //
 // NO `refreshControl` PROP, deliberately — write a `<refresh-control>` CHILD instead; the
 // behavior claims it and places it per platform. Nothing reads a prop by that name, so typing one

package/build/components/virtualized-list/shared.d.ts

@@ -46,6 +46,8 @@ export interface IVirtualizedListProps<ItemT> extends IAccessibilityProps, IAria
     scrollEventThrottle?: number;
     keyboardShouldPersistTaps?: boolean | 'always' | 'never' | 'handled';
     keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';
+    removeClippedSubviews?: boolean;
+    nestedScrollEnabled?: boolean;
     horizontal?: boolean;
     inverted?: boolean;
     style?: IStyleProp<IViewStyle>;

package/build/components/virtualized-list/shared.jsx

@@ -629,12 +629,16 @@ export function createVirtualizedList() {
         const outerBag = withStableKeys(() => {
             const bag = {
                 ...resolveAccessibilityProps(accessibilityRest),
-                style: [props.style, invertedStyle()],
+                // VirtualizedList.js: `[inversionStyle, style]` — the app's style can override the flip.
+                style: [invertedStyle(), props.style],
                 class: props.class,
                 contentContainerStyle: contentContainerStyleForContent(),
                 onLayout: onViewportLayout,
                 onScroll: scrollHandler(),
             };
+            // VirtualizedList.js:1111 — Android moves the scrollbar back after the `scale: -1` flip.
+            if (props.inverted === true)
+                bag.isInvertedVirtualizedList = true;
             // forwarding's throttle, not the raw prop: it folds in the sticky-mode default (1 native / 16
             // JS-fallback), without which a header rebuilt off too-sparse scroll events pins late.
             if (forwarding().scrollEventThrottle !== undefined)

package/build/components/virtualized-section-list/index.d.ts

@@ -55,6 +55,8 @@ export interface IVirtualizedSectionListProps<ItemT> extends IAccessibilityProps
     scrollEventThrottle?: number;
     keyboardShouldPersistTaps?: boolean | 'always' | 'never' | 'handled';
     keyboardDismissMode?: 'none' | 'on-drag' | 'interactive';
+    removeClippedSubviews?: boolean;
+    nestedScrollEnabled?: boolean;
     style?: IStyleProp<IViewStyle>;
     contentContainerStyle?: IStyleProp<IViewStyle> | string;
     class?: IClassNameValue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/solid",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "description": "SymbioteNative's Solid adapter — a solid-js/universal createRenderer driving real native iOS/Android views through the same engine as every other adapter.",
   "keywords": [
     "react-native",
@@ -62,19 +62,19 @@
   "dependencies": {
     "babel-preset-solid": "^1.9.12",
     "typescript": "~6.0.0",
-    "@symbiote-native/components": "3.0.1",
-    "@symbiote-native/css-parser": "0.5.0"
+    "@symbiote-native/components": "3.1.1",
+    "@symbiote-native/css-parser": "0.5.1"
   },
   "peerDependencies": {
     "solid-js": ">=1.9.0",
     "react-native": ">=0.86",
-    "@symbiote-native/engine": "^1.2.0"
+    "@symbiote-native/engine": "^1.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
     "solid-js": "^1.9.14",
-    "@symbiote-native/engine": "1.2.0",
-    "@symbiote-native/test-utils": "0.4.1"
+    "@symbiote-native/engine": "1.3.0",
+    "@symbiote-native/test-utils": "0.4.3"
   },
   "scripts": {
     "typecheck": "tsc --build",