@symbiote-native/svelte 1.0.0 → 3.0.0

package/README.md

@@ -29,9 +29,9 @@ 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. There's no
-`create-symbiote` scaffolder yet, so it comes from [`examples/svelte`](../../examples/svelte)
-rather than a generator:
+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:
 
 - `metro.config.js` — point `babelTransformerPath` at
   `@symbiote-native/svelte/metro-svelte-transformer` (compiles `.svelte` on the way into the
@@ -59,22 +59,20 @@ import { name as appName } from './app.json';
 createApp(App).mount(appName);
 ```
 
-The app is ordinary Svelte 5 — it just imports primitives from `@symbiote-native/svelte` instead of
-`react-native`. A tap→increment counter, using runes:
+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">
-  import { View, Text, Pressable } from '@symbiote-native/svelte';
-
   let count = $state(0);
 </script>
 
-<View style={{ padding: 24 }}>
-  <Text>Taps: {count}</Text>
-  <Pressable onPress={() => count++}>
-    <Text>Tap me</Text>
-  </Pressable>
-</View>
+<view style={{ padding: 24 }}>
+  <text>Taps: {count}</text>
+  <pressable onPress={() => count++}>
+    <text>Tap me</text>
+  </pressable>
+</view>
 ```
 
 The full canary is [`examples/svelte`](../../examples/svelte) — a stock RN 0.86 app whose

package/build/components/{activity-indicator/activity-indicator-props.d.ts → activity-indicator-props.d.ts}

@@ -1,5 +1,5 @@
 import type { IActivityIndicatorProps as IActivityIndicatorBaseProps } from '@symbiote-native/components';
-import type { ISvelteClassValue } from '../../class-value';
+import type { ISvelteClassValue } from '../class-value';
 export type IActivityIndicatorProps = IActivityIndicatorBaseProps & {
     class?: ISvelteClassValue;
 };

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

@@ -90,6 +90,10 @@
     };
   }
 
+  const rowKeyForRow = $derived(
+    (row: IRow<ItemT>): string => rowKeyExtractor(row, props.keyExtractor),
+  );
+
   const rowOnViewableItemsChanged = $derived.by(() => {
     const onChanged = props.onViewableItemsChanged;
     if (onChanged === undefined) return undefined;
@@ -173,17 +177,17 @@
   index: number;
   separators: ISeparators;
 })}
-  <symbiote-view p={{ style: rowStyle }}>
+  <view p={{ style: rowStyle }}>
     {#each row.items as rowItem, column (props.keyExtractor ? props.keyExtractor(rowItem, row.startIndex + column) : String(row.startIndex + column))}
-      <symbiote-view p={{ style: { flex: 1 } }}>
+      <view p={{ style: { flex: 1 } }}>
         {@render props.item({
           item: rowItem,
           index: row.startIndex + column,
           separators,
         })}
-      </symbiote-view>
+      </view>
     {/each}
-  </symbiote-view>
+  </view>
 {/snippet}
 
 {#snippet rowSeparator(entryProps: ISeparatorProps<IRow<ItemT>>)}
@@ -251,7 +255,7 @@
     header={props.header}
     footer={props.footer}
     empty={props.empty}
-    keyExtractor={rowKeyExtractor}
+    keyExtractor={rowKeyForRow}
     getItemLayout={props.getItemLayout}
     horizontal={props.horizontal}
     inverted={props.inverted}

package/build/components/{image-background/image-background-props.d.ts → image-background-props.d.ts}

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { IStyleProp, IViewStyle } from '@symbiote-native/engine';
 import type { IImageProps } from '@symbiote-native/components';
-import type { ISvelteClassValue } from '../../class-value';
+import type { ISvelteClassValue } from '../class-value';
 export interface IImageBackgroundProps extends Omit<IImageProps, 'style'> {
     style?: IStyleProp<IViewStyle>;
     imageStyle?: IStyleProp<IViewStyle> | string;

package/build/components/index.d.ts

@@ -1,45 +1,27 @@
-export { default as View } from './View.svelte';
-export { default as Text } from './Text.svelte';
 export type { IViewProps } from './view-props';
 export type { ITextProps } from './text-props';
-export { default as ActivityIndicator } from './activity-indicator/index.svelte';
-export type { IActivityIndicatorProps } from './activity-indicator/activity-indicator-props';
-export { Image } from './image';
-export type { IImageProps, IImageStatics } from './image';
-export { default as ImageBackground } from './image-background/index.svelte';
-export type { IImageBackgroundProps } from './image-background/image-background-props';
-export { default as InputAccessoryView } from './input-accessory-view/index.svelte';
+export type { IActivityIndicatorProps } from './activity-indicator-props';
+export type { IImageProps } from './image/image-props';
+export type { IImageBackgroundProps } from './image-background-props';
 export type { IInputAccessoryViewProps } from './input-accessory-view/input-accessory-view-props';
 export { default as KeyboardAvoidingView } from './keyboard-avoiding-view/index.svelte';
 export type { IKeyboardAvoidingViewProps, IKeyboardAvoidingBehavior, } from './keyboard-avoiding-view/keyboard-avoiding-view-props';
-export { default as Switch } from './switch/index.svelte';
 export type { ISwitchProps } from './switch/switch-props';
-export { default as TextInput } from './text-input/index.svelte';
+export type { ISwitchChangeEvent } from '@symbiote-native/components';
 export type { ITextInputProps } from './text-input/text-input-props';
-export type { ITextInputHandle } from '@symbiote-native/components';
+export type { ITextInputHandle, ITextInputChangeEvent, } from '@symbiote-native/components';
 export { default as Modal } from './modal/index.svelte';
 export type { IModalProps } from './modal/modal-props';
-export { default as SafeAreaView } from './SafeAreaView.svelte';
 export type { ISafeAreaViewProps } from './safe-area-view-props';
-export { default as RefreshControl } from './RefreshControl.svelte';
 export type { IRefreshControlProps } from './refresh-control-props';
-export { default as Pressable } from './pressable/index.svelte';
 export type { IPressableProps } from './pressable/pressable-props';
-export { default as TouchableOpacity } from './touchable-opacity/index.svelte';
 export type { ITouchableOpacityProps } from './touchable-opacity/touchable-opacity-props';
-export { default as TouchableHighlight } from './touchable-highlight/index.svelte';
 export type { ITouchableHighlightProps } from './touchable-highlight/touchable-highlight-props';
-export { default as TouchableWithoutFeedback } from './touchable-without-feedback/index.svelte';
 export type { ITouchableWithoutFeedbackProps } from './touchable-without-feedback/touchable-without-feedback-props';
-export { TouchableNativeFeedback } from './touchable-native-feedback';
-export type { ITouchableNativeFeedbackProps } from './touchable-native-feedback';
-export { default as Button } from './button.svelte';
+export type { ITouchableNativeFeedbackProps } from './touchable-native-feedback/touchable-native-feedback-props';
 export type { IButtonProps } from './button-props';
-export { default as ScrollView } from './scroll-view/index.svelte';
 export type { IScrollViewProps } from './scroll-view/scroll-view-props';
 export type { IScrollViewHandle } from '@symbiote-native/components';
-export { default as ScrollViewStickyHeader } from './scroll-view/sticky-header.svelte';
-export type { IStickyHeaderComponentProps } from './scroll-view/sticky-header-props';
 export { default as VirtualizedList } from './virtualized-list/index.svelte';
 export type { IVirtualizedListProps, IVirtualizedListHandle, } from './virtualized-list/virtualized-list-props';
 export { default as FlatList } from './flat-list/index.svelte';

package/build/components/index.js

@@ -1,23 +1,5 @@
-export { default as View } from './View.svelte';
-export { default as Text } from './Text.svelte';
-export { default as ActivityIndicator } from './activity-indicator/index.svelte';
-export { Image } from './image/index.js';
-export { default as ImageBackground } from './image-background/index.svelte';
-export { default as InputAccessoryView } from './input-accessory-view/index.svelte';
 export { default as KeyboardAvoidingView } from './keyboard-avoiding-view/index.svelte';
-export { default as Switch } from './switch/index.svelte';
-export { default as TextInput } from './text-input/index.svelte';
 export { default as Modal } from './modal/index.svelte';
-export { default as SafeAreaView } from './SafeAreaView.svelte';
-export { default as RefreshControl } from './RefreshControl.svelte';
-export { default as Pressable } from './pressable/index.svelte';
-export { default as TouchableOpacity } from './touchable-opacity/index.svelte';
-export { default as TouchableHighlight } from './touchable-highlight/index.svelte';
-export { default as TouchableWithoutFeedback } from './touchable-without-feedback/index.svelte';
-export { TouchableNativeFeedback } from './touchable-native-feedback/index.js';
-export { default as Button } from './button.svelte';
-export { default as ScrollView } from './scroll-view/index.svelte';
-export { default as ScrollViewStickyHeader } from './scroll-view/sticky-header.svelte';
 export { default as VirtualizedList } from './virtualized-list/index.svelte';
 export { default as FlatList } from './flat-list/index.svelte';
 export { default as VirtualizedSectionList } from './virtualized-section-list/index.svelte';

package/build/components/keyboard-avoiding-view/index.svelte

@@ -30,7 +30,9 @@
   import type { ShimElement } from '../../dom-shim';
   import {
     computeInset,
+    configureKeyboardAvoidingAnimation,
     keyboardAvoidingEventNamesFor,
+    readKeyboardAnimationTiming,
     readPrefersCrossFadeTransitions,
     readKeyboardFrame,
     readLayoutFrame,
@@ -68,11 +70,18 @@
     // was built: Svelte compiles a destructured prop into a live getter, so a `behavior` changed
     // after mount reaches the math on the next event, and 'height' mode feeds back the inset
     // CURRENTLY applied (RN's this.state.bottom) to cancel the shrink its own wrapper caused.
+    const previousInset = inset;
     const next = computeInset(frame, keyboard, keyboardVerticalOffset, {
       behavior,
-      previousInset: inset,
+      previousInset,
       prefersCrossFadeTransitions,
     });
+    // RN's `_updateBottomIfNecessary` skips the animation when the inset did not change.
+    if (next !== previousInset)
+      configureKeyboardAvoidingAnimation(
+        readKeyboardAnimationTiming(payload),
+        enabled,
+      );
     dlog(`KeyboardAvoidingView show -> inset ${next}`);
     inset = next;
   }
@@ -146,13 +155,13 @@
 </script>
 
 {#if layout.kind === 'nested'}
-  <symbiote-view p={wrapperBag} bind:this={hostShim}>
-    <symbiote-view p={innerBag}>
+  <view p={wrapperBag} bind:this={hostShim}>
+    <view p={innerBag}>
       {@render children?.()}
-    </symbiote-view>
-  </symbiote-view>
+    </view>
+  </view>
 {:else}
-  <symbiote-view p={wrapperBag} bind:this={hostShim}>
+  <view p={wrapperBag} bind:this={hostShim}>
     {@render children?.()}
-  </symbiote-view>
+  </view>
 {/if}

package/build/components/modal/index.svelte

@@ -10,7 +10,7 @@
   //     after the DOM update, the same "one keep-alive frame survives" timing as React's
   //     useEffect / Vue's flush:'post' watch)
   //   - the descriptor bridge: renderModal() always paints the SAME fixed shape (one
-  //     symbiote-modal host wrapping one symbiote-view container — only prop VALUES vary,
+  //     modal host wrapping one view container — only prop VALUES vary,
   //     never structure, per svelte-adapter-dom-shim skill §15), so rather than building a
   //     generic Descriptor->Svelte walker (there is none, and none is needed) this hand-authors
   //     the two literal host tags and reads renderModal()'s computed props off the fixed
@@ -63,7 +63,7 @@
     if (!shouldRender) dlog('Modal hidden -> no node committed');
   });
 
-  // Owns its host element (symbiote-modal), so it folds aria/role via `resolved` above; the
+  // Owns its host element (modal), so it folds aria/role via `resolved` above; the
   // resolved fields ride the host node via `...passthrough` — includes onShow/onDismiss/
   // onRequestClose/onOrientationChange (real ViewConfig DirectEvents) and every accessibility*
   // field, untouched, exactly like React's `...passthrough`.
@@ -100,7 +100,7 @@
       passthrough,
     });
 
-    // root = symbiote-modal > [container]; the children snippet nests UNDER the container View,
+    // root = modal > [container]; the children snippet nests UNDER the container View,
     // never as a direct sibling of the host (RN's modal content layout) — see render-modal.ts.
     const [container] = descriptor.children;
     const containerProps = typeof container === 'string' ? {} : container.props;
@@ -121,9 +121,9 @@
 </script>
 
 {#if shouldRender}
-  <symbiote-modal p={root.hostBag} bind:this={hostShim}>
-    <symbiote-view p={root.containerBag}>
+  <modal p={root.hostBag} bind:this={hostShim}>
+    <view p={root.containerBag}>
       {@render rawProps.children?.()}
-    </symbiote-view>
-  </symbiote-modal>
+    </view>
+  </modal>
 {/if}

package/build/components/pressable/pressable-props.d.ts

@@ -11,8 +11,11 @@ export interface IPressableProps extends IAccessibilityProps, IAriaProps {
     onLongPress?: IPressHandler;
     delayLongPress?: number;
     disabled?: boolean;
+    focusable?: boolean;
     cancelable?: boolean;
+    blockNativeResponder?: boolean;
     hitSlop?: IRectOffset;
+    testOnly_pressed?: boolean;
     pressRetentionOffset?: IRectOffset;
     unstable_pressDelay?: number;
     android_ripple?: IPressableAndroidRippleConfig;

package/build/components/refresh-control-props.d.ts

@@ -4,6 +4,7 @@ import type { IAccessibilityProps, IAriaProps } from '@symbiote-native/component
 import type { ISvelteClassValue } from '../class-value';
 export interface IRefreshControlProps extends IAccessibilityProps, IAriaProps {
     refreshing: boolean;
+    id?: string;
     onRefresh?: () => void | Promise<void>;
     tintColor?: string;
     title?: string;

package/build/components/text-props.d.ts

@@ -14,6 +14,7 @@ export interface ITextProps extends IAccessibilityProps, IAriaProps {
     numberOfLines?: number;
     ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
     selectable?: boolean;
+    disabled?: boolean;
     adjustsFontSizeToFit?: boolean;
     minimumFontScale?: number;
     allowFontScaling?: boolean;

package/build/components/touchable-highlight/touchable-highlight-props.d.ts

@@ -2,6 +2,8 @@ import type { ITouchableBaseProps } from '../touchable-base-props';
 export interface ITouchableHighlightProps extends ITouchableBaseProps {
     activeOpacity?: number;
     underlayColor?: string;
+    touchSoundDisabled?: boolean;
+    testOnly_pressed?: boolean;
     onShowUnderlay?: () => void;
     onHideUnderlay?: () => void;
 }

package/build/components/touchable-native-feedback/touchable-native-feedback-props.d.ts

@@ -5,4 +5,5 @@ export type ITouchableNativeFeedbackProps = Omit<IPressableProps, 'style' | 'chi
     background?: INativeFeedbackBackground;
     useForeground?: boolean;
     children?: Snippet;
+    touchSoundDisabled?: boolean;
 };

package/build/components/touchable-without-feedback/touchable-without-feedback-props.d.ts

@@ -1,2 +1,4 @@
 import type { ITouchableBaseProps } from '../touchable-base-props';
-export type ITouchableWithoutFeedbackProps = ITouchableBaseProps;
+export type ITouchableWithoutFeedbackProps = ITouchableBaseProps & {
+    touchSoundDisabled?: boolean;
+};