@symbiote-native/svelte 3.0.1 → 3.0.3

package/README.md

@@ -1,7 +1,7 @@
 # @symbiote-native/svelte
 
 The **Svelte adapter** for [SymbioteNative](../../README.md) — render real native iOS/Android views
-from Svelte 5, on the _same_ untouched core as React, Vue, and Angular, with React Native's own
+from Svelte 5, on the _same_ untouched core as React, Vue, Solid, and Angular, with React Native's own
 renderer never in the path. Svelte ships no official host-renderer API yet (`createRenderer` is
 still an unmerged PR upstream), so instead of hooking a framework-blessed extension point this
 adapter patches `globalThis`'s DOM classes: stock compiled Svelte client output believes it is
@@ -23,35 +23,84 @@ Svelte is the **sharpest test yet** that the core is genuinely framework-agnosti
 
 ## Install
 
+```bash
+npx @symbiote-native/cli new my-app --framework svelte
+```
+
+One command, nothing to wire by hand: every component here is a `.svelte` SFC with no TSX
+alternative, so the Metro wiring below isn't optional — the generator sets it up, plus
+`@symbiote-native/svelte`/`react-native`/`svelte` 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/svelte react-native svelte
 ```
 
 `react-native` and `svelte` stay your app's own top-level dependencies — this package only
-replaces the JS renderer that drives them. Every component is a `.svelte` SFC — there's no TSX
-alternative the way Vue offers — so the Metro wiring below isn't optional. `npx @symbiote-native/cli new`
-sets this up for a new app; wiring it into an existing one still follows
-[`examples/svelte`](../../examples/svelte) rather than a generator:
+replaces the JS renderer that drives them. Follow [`examples/svelte`](../../examples/svelte) for
+both pieces of Metro wiring below; there is no wiring script for an existing app:
 
 - `metro.config.js` — point `babelTransformerPath` at
   `@symbiote-native/svelte/metro-svelte-transformer` (compiles `.svelte` on the way into the
   bundle) and disable `inlineRequires` (see [the gotcha
   below](#a-svelte-specific-gotcha--inlinerequires-vs-the-svelte-runtime)).
-- `svelte.config.js` — registers the `forbidWebOnlyConstructs()` and `scopedStyles()`
-  preprocessors, so `svelte-check` and the editor catch the same things Metro's transformer
-  already guards against at build time, and sets `compilerOptions: { fragments: 'tree', css:
-'external' }`.
+- `svelte.config.js` — registers the `forbidWebOnlyConstructs()`, `scopedStyles()`, and
+  `collapseTextWhitespace()` preprocessors, so `svelte-check` and the editor catch the same things
+  Metro's transformer already guards against at build time (the third one matters beyond
+  diagnostics: without it, a sentence wrapped across source lines for readability ships a literal
+  newline into the native text content — Svelte doesn't collapse it the way a browser or Vue's
+  compiler would). Also sets `compilerOptions: { fragments: 'tree', css: 'external' }` and a
+  `warningFilter` that silences `element_invalid_self_closing_tag` for `<pressable />`-style
+  self-closing primitives.
+
+</details>
 
 ---
 
 ## Use it
 
+The app is ordinary Svelte 5 — the native primitives are plain intrinsic tags, no import needed.
+Styling is a CSS class against the component's own `<style>` block — the convention every example
+app here follows. A tap→increment counter, using runes:
+
+```svelte
+<script lang="ts">
+  let count = $state(0);
+</script>
+
+<safe-area-view class="screen">
+  <text>Taps: {count}</text>
+  <pressable onPress={() => count++}>
+    <text>Tap me</text>
+  </pressable>
+</safe-area-view>
+
+<style>
+  .screen {
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+  }
+</style>
+```
+
+<details>
+<summary>Native entry point (index.js) — already scaffolded by <code>npx @symbiote-native/cli new --framework svelte</code></summary>
+
 The native entry reaches the _same_ seam as every other adapter. `createApp(App).mount(appName)`
 wires the native-host seams and RN's own `AppRegistry`, then mounts via `@symbiote-native/engine` —
 RN's own renderer is never in the path:
 
 ```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/svelte';
 import { createApp } from '@symbiote-native/svelte/bootstrap';
 import App from './App.svelte';
 import { name as appName } from './app.json';
@@ -59,21 +108,7 @@ import { name as appName } from './app.json';
 createApp(App).mount(appName);
 ```
 
-The app is ordinary Svelte 5 — the native primitives are plain intrinsic tags, no import needed.
-A tap→increment counter, using runes:
-
-```svelte
-<script lang="ts">
-  let count = $state(0);
-</script>
-
-<view style={{ padding: 24 }}>
-  <text>Taps: {count}</text>
-  <pressable onPress={() => count++}>
-    <text>Tap me</text>
-  </pressable>
-</view>
-```
+</details>
 
 The full canary is [`examples/svelte`](../../examples/svelte) — a stock RN 0.86 app whose
 [`App.svelte`](../../examples/svelte/App.svelte) exercises the same surface as the React, Vue, and
@@ -84,8 +119,8 @@ Angular reference canaries.
 ## Parity — and the one gap
 
 Svelte reaches the same primitives, runtime modules, `Animated` on both drivers, gestures,
-accessibility, and the `VirtualizedList` family as React, Vue, and Angular, verified on-device on
-iOS and Android. That parity is **structural, not hand-copied**: the component logic (state
+accessibility, and the `VirtualizedList` family as React, Vue, Solid, and Angular, verified
+on-device on iOS and Android. That parity is **structural, not hand-copied**: the component logic (state
 machines + render functions) is written **once** in `@symbiote-native/components`, and Svelte
 supplies only its lifecycle — runes (`$state` / `$derived` / `$effect`) driving hand-authored
 `.svelte` markup that mirrors each `render-*.ts` directly, rather than a generic descriptor bridge
@@ -124,9 +159,9 @@ guarding it.
 
 ## Run it
 
-[`examples/svelte`](../../examples/svelte) is a stock React Native 0.86 app. Requires Node ≥ 22
-and the [RN environment setup](https://reactnative.dev/docs/set-up-your-environment) (Xcode,
-CocoaPods):
+[`examples/svelte`](../../examples/svelte) is a stock React Native 0.86 app. Requires Node ≥ 22.13
+(react-native 0.86's own `package.json#engines`) and the [RN environment
+setup](https://reactnative.dev/docs/set-up-your-environment) (Xcode, CocoaPods):
 
 ```bash
 cd examples/svelte

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,42 @@
 <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));
+  // Not a $derived candidate despite the $state+$effect shape below: modalReducer folds over the
+  // PREVIOUS `state` (self-referential — $derived can't read the value it's replacing) and must
+  // run POST-render (see the effect's own comment) so the keep-alive frame survives a commit.
+  let localState = $state(createInitialModalState(rawProps.visible === true));
 
   const resolved = $derived(resolveAccessibilityProps(rawProps));
-  const isVisible = $derived(resolved.visible === true);
-  const shouldRender = $derived(shouldRenderModal(isVisible, state));
+  const isVisible = $derived(isModalVisible(resolved.visible));
+  const shouldRender = $derived(shouldRenderModal(isVisible, localState));
 
-  // 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) localState = modalReducer(localState, action);
   });
 
+  // Modal.js: onDismiss is iOS-only — it drops the keep-alive, then tells the app.
+  function handleDismiss(): void {
+    if (Platform.OS !== 'ios') return;
+    localState = modalReducer(localState, { type: 'hide' });
+    rawProps.onDismiss?.();
+  }
+
   $effect(() => {
     if (!shouldRender) dlog('Modal hidden -> no node committed');
   });
@@ -82,8 +81,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

@@ -109,6 +109,10 @@
 
   // The one folded state cell — the Svelte twin of Vue's plain listState / React's stateRef.
   const listState: IListState<ItemT> = createInitialListState<ItemT>();
+  // Plain Map by design, like listState above: separatorVersion (below) is the manual
+  // invalidation signal a read tracks — a SvelteMap would double-track and still miss nothing,
+  // but adds reactive overhead this hot path doesn't need.
+  // eslint-disable-next-line svelte/prefer-svelte-reactivity
   const separatorOverrides = new Map<number, Partial<ISeparatorProps<ItemT>>>();
   let viewableTimer: ReturnType<typeof setTimeout> | null = null;
   let batchTimer: ReturnType<typeof setTimeout> | null = null;
@@ -154,6 +158,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 +443,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 +489,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.1",
+  "version": "3.0.3",
   "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.1",
-    "@symbiote-native/css-parser": "0.5.0"
+    "@symbiote-native/components": "3.1.1",
+    "@symbiote-native/css-parser": "0.5.1"
   },
   "peerDependencies": {
     "svelte": ">=5.56.0",
     "react-native": ">=0.86",
-    "@symbiote-native/engine": "^1.2.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.2.0",
-    "@symbiote-native/react": "3.0.1",
-    "@symbiote-native/test-utils": "0.4.1",
-    "@symbiote-native/vue": "3.0.1"
+    "@symbiote-native/engine": "1.3.0",
+    "@symbiote-native/react": "3.0.3",
+    "@symbiote-native/test-utils": "0.4.3",
+    "@symbiote-native/vue": "3.0.3"
   },
   "scripts": {
     "typecheck": "tsc --build",