@symbiote-native/svelte 3.0.0 → 3.0.2

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

@@ -17,6 +17,7 @@
     expandRowViewability,
     firstItemOfRow,
     lastItemOfRow,
+    removeClippedSubviewsOrDefault,
     rowKeyExtractor,
     type IRow,
     type ISeparatorProps,
@@ -24,6 +25,7 @@
     type IViewableItemsChangedInfo,
   } from '@symbiote-native/components';
   import {
+    Platform,
     resolveClassName,
     type ISymbioteNode,
   } from '@symbiote-native/engine';
@@ -38,6 +40,11 @@
 
   let props: IProps<ItemT> = $props();
 
+  // FlatList.js always sends it, defaulted per platform.
+  const removeClippedSubviews = $derived(
+    removeClippedSubviewsOrDefault(props.removeClippedSubviews, Platform.OS),
+  );
+
   // $state.raw: the inner VirtualizedList component instance (its exports), held by identity —
   // same concern as every other handle in this adapter (Switch's hostShim, VirtualizedList's own
   // scrollHandle over its ShimElement).
@@ -238,6 +245,8 @@
     scrollEventThrottle={props.scrollEventThrottle}
     keyboardShouldPersistTaps={props.keyboardShouldPersistTaps}
     keyboardDismissMode={props.keyboardDismissMode}
+    {removeClippedSubviews}
+    nestedScrollEnabled={props.nestedScrollEnabled}
     style={props.style}
     contentContainerStyle={props.contentContainerStyle}
     class={props.class}
@@ -286,6 +295,8 @@
     scrollEventThrottle={props.scrollEventThrottle}
     keyboardShouldPersistTaps={props.keyboardShouldPersistTaps}
     keyboardDismissMode={props.keyboardDismissMode}
+    {removeClippedSubviews}
+    nestedScrollEnabled={props.nestedScrollEnabled}
     style={props.style}
     contentContainerStyle={props.contentContainerStyle}
     class={props.class}

package/build/components/modal/index.svelte

@@ -6,9 +6,7 @@
   // @symbiote-native/components and are shared verbatim with React/Vue (core/components/src/
   // state/modal.ts + view/render-modal.ts); Svelte supplies only the lifecycle:
   //   - $state over the keep-alive reducer (switchReducer's twin: modalReducer)
-  //   - a POST-render $effect driving the visible->hidden transition (Svelte's $effect runs
-  //     after the DOM update, the same "one keep-alive frame survives" timing as React's
-  //     useEffect / Vue's flush:'post' watch)
+  //   - a $effect arming the keep-alive on show, and the native dismiss dropping it (iOS)
   //   - the descriptor bridge: renderModal() always paints the SAME fixed shape (one
   //     modal host wrapping one view container — only prop VALUES vary,
   //     never structure, per svelte-adapter-dom-shim skill §15), so rather than building a
@@ -24,41 +22,39 @@
 <script lang="ts">
   import {
     createInitialModalState,
+    isModalVisible,
     modalReducer,
+    modalVisibilityAction,
     renderModal,
     resolveAccessibilityProps,
     shouldRenderModal,
   } from '@symbiote-native/components';
-  import { dlog } from '@symbiote-native/engine';
+  import { dlog, Platform } from '@symbiote-native/engine';
   import { createAttachmentsSync } from '../../runes/attachments';
   import type { ShimElement } from '../../dom-shim';
 
   let rawProps: IModalProps = $props();
 
-  let state = $state(createInitialModalState(rawProps.visible === true));
+  let state = $state(createInitialModalState(isModalVisible(rawProps.visible)));
 
   const resolved = $derived(resolveAccessibilityProps(rawProps));
-  const isVisible = $derived(resolved.visible === true);
+  const isVisible = $derived(isModalVisible(resolved.visible));
   const shouldRender = $derived(shouldRenderModal(isVisible, state));
 
-  // POST-render, mirroring state/modal.ts's contract: fires after the DOM update following the
-  // render that used the OLD state, so a visible->hidden transition keeps the node mounted one
-  // more frame (state.isRendered still true) before the NEXT render drops it. The reducer is
-  // identity-stable, so a no-op transition — including this effect's own first run on mount —
-  // triggers no extra render.
-  //
-  // Under this adapter's microtask-coalesced requestCommit() (element.ts's `p` setter), Svelte
-  // settles the whole visible->hidden cascade within the SAME microtask flush that processes the
-  // triggering prop change, so the keep-alive frame genuinely happens (a render sees
-  // isVisible=false with isRendered still true before this effect flips it) but isn't observable
-  // as its own committed Fabric frame the way React's per-render synchronous 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 triggers no extra render.
   $effect(() => {
-    state = modalReducer(
-      state,
-      isVisible ? { type: 'show' } : { type: 'hide' },
-    );
+    const action = modalVisibilityAction(isVisible);
+    if (action !== undefined) state = modalReducer(state, action);
   });
 
+  // Modal.js: onDismiss is iOS-only — it drops the keep-alive, then tells the app.
+  function handleDismiss(): void {
+    if (Platform.OS !== 'ios') return;
+    state = modalReducer(state, { type: 'hide' });
+    rawProps.onDismiss?.();
+  }
+
   $effect(() => {
     if (!shouldRender) dlog('Modal hidden -> no node committed');
   });
@@ -82,8 +78,10 @@
       style,
       class: className,
       children: _children,
-      ...passthrough
+      onDismiss: _onDismiss,
+      ...rest
     } = resolved;
+    const passthrough = { ...rest, onDismiss: handleDismiss };
 
     const descriptor = renderModal({
       visible,

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

@@ -106,6 +106,8 @@
   scrollEventThrottle={props.scrollEventThrottle}
   keyboardShouldPersistTaps={props.keyboardShouldPersistTaps}
   keyboardDismissMode={props.keyboardDismissMode}
+  removeClippedSubviews={props.removeClippedSubviews}
+  nestedScrollEnabled={props.nestedScrollEnabled}
   style={props.style}
   contentContainerStyle={props.contentContainerStyle}
   class={props.class}

package/build/components/virtualized-list/index.svelte

@@ -154,6 +154,8 @@
       scrollEventThrottle: props.scrollEventThrottle,
       keyboardShouldPersistTaps: props.keyboardShouldPersistTaps,
       keyboardDismissMode: props.keyboardDismissMode,
+      removeClippedSubviews: props.removeClippedSubviews,
+      nestedScrollEnabled: props.nestedScrollEnabled,
       style: props.style,
       contentContainerStyle: props.contentContainerStyle,
       class: props.class,
@@ -437,11 +439,12 @@
     };
   });
 
+  // VirtualizedList.js: `[inversionStyle, style]` — the app's style can override the flip.
   const resolvedStyle = $derived(
     narrowed.inverted
       ? [
-          narrowed.style,
           narrowed.horizontal ? INVERTED_X_STYLE : INVERTED_Y_STYLE,
+          narrowed.style,
         ]
       : narrowed.style,
   );
@@ -482,6 +485,13 @@
     }
     if (narrowed.keyboardDismissMode !== undefined)
       bag.keyboardDismissMode = narrowed.keyboardDismissMode;
+    // RN's VirtualizedList spreads its props onto the ScrollView, this one included.
+    if (narrowed.removeClippedSubviews !== undefined)
+      bag.removeClippedSubviews = narrowed.removeClippedSubviews;
+    if (narrowed.nestedScrollEnabled !== undefined)
+      bag.nestedScrollEnabled = narrowed.nestedScrollEnabled;
+    // VirtualizedList.js:1111 — Android moves the scrollbar back after the `scale: -1` flip.
+    if (narrowed.inverted === true) bag.isInvertedVirtualizedList = true;
     // `stickyHeaderIndices` is deliberately NOT forwarded. The behavior honours it by numbering the
     // owner's own PAINT children, and this list's indices are into the DATA stream — a windowed
     // list paints a spacer, a header and a slice, so index 3 of the data is almost never paint

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

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

package/build/components/virtualized-section-list/index.svelte

@@ -247,6 +247,8 @@
   scrollEventThrottle={props.scrollEventThrottle}
   keyboardShouldPersistTaps={props.keyboardShouldPersistTaps}
   keyboardDismissMode={props.keyboardDismissMode}
+  removeClippedSubviews={props.removeClippedSubviews}
+  nestedScrollEnabled={props.nestedScrollEnabled}
   style={props.style}
   contentContainerStyle={props.contentContainerStyle}
   class={props.class}

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

@@ -61,6 +61,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>;
     class?: ISvelteClassValue;

package/build/dom-shim/canonical-prop-names.d.ts

@@ -1,2 +1,3 @@
 export declare const CANONICAL_PROP_NAMES: readonly string[];
 export declare const CANONICAL_BY_LOWER: ReadonlyMap<string, string>;
+export declare const BOOLEAN_PROP_NAMES: ReadonlySet<string>;

package/build/dom-shim/canonical-prop-names.js

@@ -321,3 +321,87 @@ export const CANONICAL_PROP_NAMES = [
 // collide: the derivation asserts it (`canonical-prop-names.test.ts`), because two props whose
 // names differ only in case would make the repair a coin toss.
 export const CANONICAL_BY_LOWER = new Map(CANONICAL_PROP_NAMES.map(name => [name.toLowerCase(), name]));
+// The subset whose type takes a boolean and no string anywhere: for these "" can only be the HTML
+// shorthand for true. Svelte puts a static attribute on a hyphen-less tag (`<view accessible>`)
+// into the template as `accessible=""`, and Android's ViewManager throws on a String where it
+// casts to Boolean. Same derivation, same guard (`canonical-prop-names.test.ts`).
+export const BOOLEAN_PROP_NAMES = new Set([
+    'accessibilityElementsHidden',
+    'accessibilityIgnoresInvertColors',
+    'accessibilityRespondsToUserInteraction',
+    'accessibilityShowsLargeContentViewer',
+    'accessibilityViewIsModal',
+    'accessible',
+    'adjustsFontSizeToFit',
+    'allowFontScaling',
+    'allowSwipeDismissal',
+    'alwaysBounceHorizontal',
+    'alwaysBounceVertical',
+    'android_disableSound',
+    'animated',
+    'animating',
+    'aria-busy',
+    'aria-checked',
+    'aria-disabled',
+    'aria-expanded',
+    'aria-hidden',
+    'aria-modal',
+    'aria-selected',
+    'autoCorrect',
+    'autoFocus',
+    'automaticallyAdjustKeyboardInsets',
+    'blockNativeResponder',
+    'blurOnSubmit',
+    'bounces',
+    'bouncesZoom',
+    'cancelable',
+    'centerContent',
+    'collapsable',
+    'directionalLockEnabled',
+    'disableIntervalMomentum',
+    'disabled',
+    'editable',
+    'enabled',
+    'focusable',
+    'hardwareAccelerated',
+    'hasTVPreferredFocus',
+    'hidden',
+    'hidesWhenStopped',
+    'highlighted',
+    'horizontal',
+    'invertStickyHeaders',
+    'inverted',
+    'keyboardShouldPersistTaps',
+    'multiline',
+    'navigationBarTranslucent',
+    'needsOffscreenAlphaCompositing',
+    'nestedScrollEnabled',
+    'networkActivityIndicatorVisible',
+    'pagingEnabled',
+    'persistentScrollbar',
+    'pinchGestureEnabled',
+    'progressiveRenderingEnabled',
+    'readOnly',
+    'refreshing',
+    'removeClippedSubviews',
+    'renderToHardwareTextureAndroid',
+    'screenReaderFocusable',
+    'scrollEnabled',
+    'secureTextEntry',
+    'selectTextOnFocus',
+    'selectable',
+    'shouldRasterizeIOS',
+    'showSoftInputOnFocus',
+    'showsHorizontalScrollIndicator',
+    'showsVerticalScrollIndicator',
+    'snapToEnd',
+    'snapToStart',
+    'statusBarTranslucent',
+    'stickySectionHeadersEnabled',
+    'testOnly_pressed',
+    'touchSoundDisabled',
+    'translucent',
+    'transparent',
+    'useForeground',
+    'visible',
+]);

package/build/dom-shim/element.js

@@ -25,7 +25,7 @@
 import { createElement, dlog, routeProp, toPublicInstance, } from '@symbiote-native/engine';
 import { descriptorFor } from '@symbiote-native/components';
 import { normalizeSvelteClass } from '../class-value.js';
-import { CANONICAL_BY_LOWER, CANONICAL_PROP_NAMES, } from './canonical-prop-names.js';
+import { BOOLEAN_PROP_NAMES, CANONICAL_BY_LOWER, CANONICAL_PROP_NAMES, } from './canonical-prop-names.js';
 import { ShimNode } from './shim-node.js';
 import { discoverStyleCacheKey } from './style-cache.js';
 // The bag a not-yet-live element is diffed against in onMadeLive. A module constant rather than a
@@ -144,7 +144,9 @@ export class ShimElement extends ShimElementBase {
     // one we do not know) is handed on untouched. See `canonical-prop-names.ts`.
     setAttribute(name, value) {
         (this.attributes ??= new Map()).set(name, value);
-        this.writeBagKey(CANONICAL_BY_LOWER.get(name) ?? name, value);
+        const canonical = CANONICAL_BY_LOWER.get(name) ?? name;
+        // `<view accessible>` arrives as "" — the HTML shorthand for true on a boolean prop.
+        this.writeBagKey(canonical, value === '' && BOOLEAN_PROP_NAMES.has(canonical) ? true : value);
     }
     getAttribute(name) {
         return this.attributes?.get(name) ?? null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbiote-native/svelte",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "description": "SymbioteNative's Svelte adapter — a DOM shim over stock compiled Svelte output driving real native iOS/Android views through the same engine as every other adapter.",
   "keywords": [
     "react-native",
@@ -73,22 +73,22 @@
   },
   "dependencies": {
     "typescript": "~6.0.0",
-    "@symbiote-native/components": "3.0.0",
+    "@symbiote-native/components": "3.1.0",
     "@symbiote-native/css-parser": "0.5.0"
   },
   "peerDependencies": {
     "svelte": ">=5.56.0",
     "react-native": ">=0.86",
-    "@symbiote-native/engine": "^1.0.0"
+    "@symbiote-native/engine": "^1.3.0"
   },
   "devDependencies": {
     "@vue/runtime-core": "^3.5.13",
     "react": "19.2.3",
     "svelte": "^5.56.0",
-    "@symbiote-native/engine": "1.0.0",
-    "@symbiote-native/react": "3.0.0",
-    "@symbiote-native/test-utils": "0.3.1",
-    "@symbiote-native/vue": "3.0.0"
+    "@symbiote-native/engine": "1.3.0",
+    "@symbiote-native/test-utils": "0.4.2",
+    "@symbiote-native/react": "3.0.2",
+    "@symbiote-native/vue": "3.0.2"
   },
   "scripts": {
     "typecheck": "tsc --build",