@symbiote-native/svelte 0.3.0 → 2.0.0

package/build/components/touchable-opacity/index.svelte

@@ -1,180 +0,0 @@
-<script lang="ts" module>
-  // TouchableOpacity: built on Pressable, like the rest of the family. Ported against RN's own
-  // source (.vendors/react-native/.../Components/Touchable/TouchableOpacity.js) after the
-  // 2026-08-19 audit found ten divergences shared by every adapter; Solid migrated first, then
-  // React, Vue and Angular, and this is Svelte.
-  //
-  // Shared (framework-agnostic) half: the press-scheduling machine and the resting-opacity math
-  // (@symbiote-native/components). Svelte owns only the lifecycle — runes, the real timers, and
-  // the Animated wiring.
-  //
-  // The interim `tweenOpacity` stand-in this file used to carry is GONE. Its header claimed no
-  // Animated binding existed for this adapter; that stopped being true when
-  // modules/animated landed, and a setTimeout tween can never be native-driven — which is
-  // exactly what RN asks for here (useNativeDriver: true, TouchableOpacity.js:242).
-  import type { ITouchableOpacityProps } from './touchable-opacity-props';
-  import View from '../View.svelte';
-  import { createAnimatedComponent } from '../../modules/animated/create-animated-component';
-
-  export type { ITouchableOpacityProps };
-
-  // Wrapped here, not imported from modules/animated: that barrel pulls in six `.svelte`
-  // components (View/Text/Image/ScrollView/FlatList/SectionList), and this package's vitest has
-  // no `.svelte` loader — a smoke test would have to pre-compile the whole tree to reach one
-  // Animated.View. Same reasoning, different cause, as sticky-header.svelte's own local wrap.
-  // Module scope, so every TouchableOpacity instance shares one component identity.
-  const AnimatedView = createAnimatedComponent(View);
-</script>
-
-<script lang="ts">
-  import {
-    createTouchableFeedbackHandlers,
-    createTouchableFeedbackRuntime,
-    DEFAULT_ACTIVE_OPACITY,
-    OPACITY_ACTIVE_GRANT_DURATION_MS,
-    OPACITY_INACTIVE_DURATION_MS,
-    TOUCHABLE_MIN_PRESS_DURATION_MS,
-    restingOpacityFromStyle,
-  } from '@symbiote-native/components';
-  import {
-    AnimatedMock,
-    AnimatedValue,
-    Easing,
-    Platform,
-    dlog,
-    timing,
-    type ISymbioteEvent,
-  } from '@symbiote-native/engine';
-  import Pressable from '../pressable/index.svelte';
-
-  // modules/animated's barrel swaps the WHOLE driver namespace for the mock when the host
-  // reports reduced motion; reaching it here would close the import the module block above
-  // avoids, so the one driver this component uses is swapped locally on the same flag.
-  const startTiming = Platform.isDisableAnimations
-    ? AnimatedMock.timing
-    : timing;
-
-  function scheduleTimeout(callback: () => void, ms: number): () => void {
-    const id = setTimeout(callback, ms);
-    return () => clearTimeout(id);
-  }
-
-  let {
-    activeOpacity = DEFAULT_ACTIVE_OPACITY,
-    style,
-    class: className,
-    children: content,
-    onPressIn,
-    onPressOut,
-    delayPressIn = 0,
-    delayPressOut = 0,
-    // RN's Touchables override Pressability's own 130ms floor with 0 (TouchableOpacity.js:195);
-    // what holds the active visual is the fade's duration, not a press-duration floor.
-    minPressDuration = TOUCHABLE_MIN_PRESS_DURATION_MS,
-    ...rest
-  }: ITouchableOpacityProps = $props();
-
-  // RN's _getChildStyleOpacityWithDefault: the fade settles at the opacity the CALLER's style
-  // asks for, not at a hard 1.
-  const restingOpacity = $derived(restingOpacityFromStyle(style));
-
-  // One Animated.Value per mount, held by IDENTITY in a plain `const` — never `$state`, which
-  // would deep-proxy an engine object whose graph bookkeeping is keyed on the raw instance
-  // (same concern as Pressable's `$state.raw` hostShim).
-  // svelte-ignore state_referenced_locally -- the SEED is a one-shot read of the initial style;
-  // later changes are re-settled by the update effect below, not by re-seeding.
-  const opacity = new AnimatedValue(restingOpacity);
-
-  // Setup-scope only, mutated by the machine — same as Pressable's own runtime, never `$state`.
-  const runtime = createTouchableFeedbackRuntime();
-
-  function setOpacityTo(toValue: number, duration: number): void {
-    dlog(`TouchableOpacity opacity -> ${toValue} over ${duration}ms`);
-    // useNativeDriver: true is RN's own (TouchableOpacity.js:242). opacity is natively drivable,
-    // so the fade survives a busy JS thread — the whole point of press feedback.
-    startTiming(opacity, {
-      toValue,
-      duration,
-      easing: Easing.inOut(Easing.quad),
-      useNativeDriver: true,
-    }).start();
-  }
-
-  // Rebuilt whenever the timing config changes (mirrors Vue's per-render rebuild); the runtime
-  // persists across rebuilds so an in-flight delayPressIn timer / activation clock survives.
-  const handlers = $derived(
-    createTouchableFeedbackHandlers(
-      {
-        delayPressIn,
-        delayPressOut,
-        minPressDuration,
-        schedule: scheduleTimeout,
-        now: Date.now,
-      },
-      runtime,
-      {
-        activate(event: ISymbioteEvent): void {
-          // 0, not 150 (TouchableOpacity.js:215-220): the duration is chosen by where the
-          // press-in came from, and Pressability re-dispatches the GRANT event as the delay
-          // signal when delayPressIn is 0 — so an ordinary tap darkens instantly in RN. The 150ms
-          // branch is a re-activation (finger returning inside after leaving the bounds), which
-          // our engine never emits — it sends pressIn from one place, on topTouchStart.
-          setOpacityTo(activeOpacity, OPACITY_ACTIVE_GRANT_DURATION_MS);
-          onPressIn?.(event);
-        },
-        deactivate(event: ISymbioteEvent): void {
-          setOpacityTo(restingOpacity, OPACITY_INACTIVE_DURATION_MS);
-          onPressOut?.(event);
-        },
-      },
-    ),
-  );
-
-  // Two SEPARATE deriveds, not one object: each memoizes by value, so an unrelated prop change
-  // cannot re-settle the opacity — the Svelte form of Vue's deliberate two-getter watch source.
-  const disabledInput = $derived(rest.disabled);
-
-  // RN's componentDidUpdate: a changed `disabled` or a changed style opacity re-settles the view,
-  // so a Touchable disabled mid-press does not stay stuck at its active opacity. The first run is
-  // skipped — RN does this on UPDATE only, and firing at mount would animate over the value the
-  // Animated.Value was just seeded with.
-  let settled: { disabled: unknown; resting: number } | undefined;
-  $effect(() => {
-    const current = { disabled: disabledInput, resting: restingOpacity };
-    const previous = settled;
-    settled = current;
-    if (previous === undefined) return;
-    if (
-      previous.disabled === current.disabled &&
-      previous.resting === current.resting
-    ) {
-      return;
-    }
-    setOpacityTo(current.resting, OPACITY_INACTIVE_DURATION_MS);
-  });
-
-  // RN's componentWillUnmount: stop the animation and drop the value back, so a teardown
-  // mid-fade leaves no driver running against a node that is gone.
-  $effect(() => {
-    return () => {
-      opacity.resetAnimation();
-    };
-  });
-
-  // Depends on `style` alone. `opacity` is a stable graph node, so a press changes what the node
-  // HOLDS, never this array — the per-frame path is setValue -> AnimatedProps.update ->
-  // setNativeProps, which never re-renders this component.
-  const feedbackStyle = $derived([style, { opacity }]);
-</script>
-
-<Pressable
-  {...rest}
-  onPressIn={handlers.handlePressIn}
-  onPressOut={handlers.handlePressOut}
->
-  {#snippet children()}
-    <AnimatedView style={feedbackStyle} class={className}>
-      {@render content?.()}
-    </AnimatedView>
-  {/snippet}
-</Pressable>

package/build/components/touchable-opacity/index.svelte.d.ts

@@ -1,5 +0,0 @@
-import type { ITouchableOpacityProps } from './touchable-opacity-props';
-export type { ITouchableOpacityProps };
-declare const Index: import("svelte").Component<ITouchableOpacityProps, {}, "">;
-type Index = ReturnType<typeof Index>;
-export default Index;

package/build/components/touchable-without-feedback/index.svelte

@@ -1,74 +0,0 @@
-<script lang="ts" module>
-  // TouchableWithoutFeedback: built on Pressable, no visual feedback of its own. Ported against
-  // RN's own source (.vendors/react-native/.../Components/Touchable/TouchableWithoutFeedback.js)
-  // after the 2026-08-19 audit.
-  //
-  // RN builds a FULL Pressability config here — delayPressIn / delayPressOut /
-  // minPressDuration: 0 — so "without feedback" means no VISUAL, not no TIMING. The previous port
-  // spread the delay props straight into Pressable, which both ignored them (Pressable owns no
-  // press-delay scheduling) and forwarded them to the host as unknown Fabric props. The same
-  // shared machine TouchableOpacity runs now runs here with the visual half left empty.
-  import type { ITouchableWithoutFeedbackProps } from './touchable-without-feedback-props';
-
-  export type { ITouchableWithoutFeedbackProps };
-</script>
-
-<script lang="ts">
-  import {
-    createTouchableFeedbackHandlers,
-    createTouchableFeedbackRuntime,
-    TOUCHABLE_MIN_PRESS_DURATION_MS,
-  } from '@symbiote-native/components';
-  import type { ISymbioteEvent } from '@symbiote-native/engine';
-  import Pressable from '../pressable/index.svelte';
-
-  function scheduleTimeout(callback: () => void, ms: number): () => void {
-    const id = setTimeout(callback, ms);
-    return () => clearTimeout(id);
-  }
-
-  let {
-    children: content,
-    onPressIn,
-    onPressOut,
-    delayPressIn = 0,
-    delayPressOut = 0,
-    // RN's Touchables override Pressability's own 130ms floor with 0.
-    minPressDuration = TOUCHABLE_MIN_PRESS_DURATION_MS,
-    ...rest
-  }: ITouchableWithoutFeedbackProps = $props();
-
-  // Setup-scope only, mutated by the machine — never `$state`.
-  const runtime = createTouchableFeedbackRuntime();
-
-  const handlers = $derived(
-    createTouchableFeedbackHandlers(
-      {
-        delayPressIn,
-        delayPressOut,
-        minPressDuration,
-        schedule: scheduleTimeout,
-        now: Date.now,
-      },
-      runtime,
-      {
-        activate(event: ISymbioteEvent): void {
-          onPressIn?.(event);
-        },
-        deactivate(event: ISymbioteEvent): void {
-          onPressOut?.(event);
-        },
-      },
-    ),
-  );
-</script>
-
-<Pressable
-  {...rest}
-  onPressIn={handlers.handlePressIn}
-  onPressOut={handlers.handlePressOut}
->
-  {#snippet children()}
-    {@render content?.()}
-  {/snippet}
-</Pressable>

package/build/components/touchable-without-feedback/index.svelte.d.ts

@@ -1,5 +0,0 @@
-import type { ITouchableWithoutFeedbackProps } from './touchable-without-feedback-props';
-export type { ITouchableWithoutFeedbackProps };
-declare const Index: import("svelte").Component<import("../touchable-base-props").ITouchableBaseProps, {}, "">;
-type Index = ReturnType<typeof Index>;
-export default Index;

package/build/modules/animated/animated-component-props.d.ts

@@ -1,7 +0,0 @@
-import type { Snippet } from 'svelte';
-export interface IAnimatedComponentProps {
-    style?: unknown;
-    children?: Snippet;
-    passthroughAnimatedPropExplicitValues?: unknown;
-    [key: string]: unknown;
-}

package/build/modules/animated/animated-component-props.js

@@ -1 +0,0 @@
-export {};

package/build/modules/animated/create-animated-component.d.ts

@@ -1,5 +0,0 @@
-import type { Component, ComponentInternals } from 'svelte';
-import type { IAnimatedComponentProps } from './animated-component-props';
-type IAnimatedBase<TExports extends Record<string, unknown>> = (internals: ComponentInternals, props: never) => TExports;
-export declare function createAnimatedComponent<TExports extends Record<string, unknown>>(Base: IAnimatedBase<TExports>): Component<IAnimatedComponentProps, TExports>;
-export {};

package/build/modules/animated/create-animated-component.js

@@ -1,131 +0,0 @@
-// createAnimatedComponent: the Svelte twin of the React/Vue/Solid wrapper. Wraps ANY base
-// component so it accepts AnimatedNodes in its props. The framework-agnostic half
-// (reduceProps / readPassthroughStyle / resolveHostNode / the AnimatedProps leaf lifecycle)
-// comes from @symbiote-native/engine, shared verbatim with every other adapter; only the
-// lifecycle below is Svelte's.
-//
-// WHY IT IS PLAIN TS AND NOT A PARAMETRIZED `.svelte` FILE. The generic wrap expresses fine in
-// Svelte — `<Component {...reduced} bind:this={inner} />` over a `component` prop compiles clean
-// — but a `.ts` module that imports a `.svelte` file is unparseable by any tool without the
-// Svelte plugin, which includes this repo's vitest and every consumer smoke test that builds an
-// Animated namespace by hand (packages/navigation's drawer suite). Writing the component body
-// against `svelte/internal/client` keeps `createAnimatedComponent` importable from ordinary TS
-// everywhere, and leaves `modules/animated/` with no `.svelte` file at all. The internals used
-// here are the exact calls the compiler itself emits for the same source — see this package's
-// `svelte-internal-client.d.ts`, and §8 of the svelte-adapter-dom-shim skill for the bump
-// checklist that covers them.
-//
-// TWO WAYS TO THE HOST NODE, because Svelte has no ref fall-through. `bind:this` on a COMPONENT
-// resolves to that component's exports, never to its element:
-//   * a scroll container (ScrollView / FlatList / SectionList) exports an imperative handle, so
-//     resolveHostNode() unwraps it through getScrollNode() — the same call React and Vue make.
-//     Binding the leaf to the handle itself type-checks and then silently animates nothing.
-//   * a plain host primitive (View / Text / Image) exports nothing, so the node arrives through
-//     an `{@attach}` of our own: every Symbiote component forwards attachments onto its host tag
-//     (runes/attachments.ts), which is the adapter's documented seam to a committed node.
-// A base this adapter does not own works if it does either.
-//
-// EVERY OTHER PROP IS FORWARDED UNTOUCHED, including snippets. Svelte snippets — `children` and
-// named scoped ones such as a list's `item` / `sectionHeader` — are ordinary props, so naming any
-// of them here would drop the rest: Vue's wrapper forwarded only its default slot and
-// Animated.FlatList committed empty cells with no error. The only prop this wrapper consumes is
-// `passthroughAnimatedPropExplicitValues`.
-import { createAttachmentKey } from 'svelte/attachments';
-import { derived, get, pop, push, set, spread_props, state, user_effect, } from 'svelte/internal/client';
-import { createAnimatedLeafLifecycle, isNativeAnimatedAvailable, isSymbioteNode, readPassthroughStyle, reduceProps, resolveHostNode, } from '@symbiote-native/engine';
-import { ShimElement } from '../../dom-shim/index.js';
-// RN's prop carrying explicit (already-rasterized) values that override the animated prop in the
-// COMMITTED props (sticky-header passthrough). Named once so reduce and reconcile agree.
-const PASSTHROUGH_PROP = 'passthroughAnimatedPropExplicitValues';
-// The three keys Svelte's own compiled `rest_props` always drops, plus the prop we consume.
-const BASE_EXCLUDES = new Set([
-    '$$slots',
-    '$$events',
-    '$$legacy',
-    PASSTHROUGH_PROP,
-]);
-// The leaf additionally never sees `children`: an AnimatedProps leaf rasterizes its props into
-// setNativeProps on every frame, and a snippet is not a Fabric prop. It still reaches the BASE.
-const LEAF_EXCLUDES = new Set([...BASE_EXCLUDES, 'children']);
-// A fresh plain object each call, never the live props proxy: the leaf lifecycle stores its
-// argument as the previous-props SNAPSHOT and compares the next call against it, so handing it
-// one live object twice compares that object with itself and skips every reconcile forever.
-function collect(props, excludes) {
-    const out = {};
-    for (const key of Object.keys(props)) {
-        if (excludes.has(key))
-            continue;
-        out[key] = Reflect.get(props, key);
-    }
-    return out;
-}
-// Reads the base's display name for the dlog label, without a cast, so a reconcile line in a log
-// dump says which Animated.* it came from — the per-component labels the six hand-authored files
-// used to hardcode.
-function baseName(base) {
-    if (typeof base !== 'function' && typeof base !== 'object')
-        return 'Anonymous';
-    if (base === null)
-        return 'Anonymous';
-    const name = Reflect.get(base, 'name');
-    return typeof name === 'string' && name.length > 0 ? name : 'Anonymous';
-}
-function hostNode(instance, shim) {
-    const unwrapped = resolveHostNode(instance);
-    if (isSymbioteNode(unwrapped))
-        return unwrapped;
-    return shim?.engineNode ?? null;
-}
-export function createAnimatedComponent(Base) {
-    const label = `Animated(${baseName(Base)})`;
-    return function AnimatedComponent(internals, props) {
-        // The compiled twin of a component's own `$props()` scope: without it the `$effect`s below
-        // are created immediately instead of being deferred to mount, and would first run before
-        // the base has rendered anything.
-        push(props, true);
-        const lifecycle = createAnimatedLeafLifecycle(label);
-        // The `$state.raw` twin: the shim is held by IDENTITY (a deep proxy would miss the engine's
-        // WeakMap mirror) and read inside the reconcile effect, so the leaf rebinds when it lands.
-        const hostShim = state(null);
-        // Rasterized props for the declarative bag: every animated node replaced by its current
-        // value, so the first paint already carries concrete values. The per-FRAME path is separate
-        // (AnimatedProps.update -> setNativeProps) and never goes through this.
-        const reduced = derived(() => {
-            const out = reduceProps(collect(props, BASE_EXCLUDES));
-            const passthroughStyle = readPassthroughStyle(Reflect.get(props, PASSTHROUGH_PROP));
-            if (passthroughStyle !== undefined) {
-                out.style =
-                    out.style === undefined
-                        ? passthroughStyle
-                        : [out.style, passthroughStyle];
-            }
-            return out;
-        });
-        // `reduceProps` rebuilds a plain string-keyed Record, so `{@attach}`'s SYMBOL keys do not
-        // survive it. This one is ours and rides as a second spread source; a user's own attachments
-        // are re-collected the same way.
-        const attachments = {
-            [createAttachmentKey()]: (node) => {
-                set(hostShim, node instanceof ShimElement ? node : null);
-                return () => set(hostShim, null);
-            },
-        };
-        for (const key of Object.getOwnPropertySymbols(props)) {
-            attachments[key] = Reflect.get(props, key);
-        }
-        const instance = Base(internals, spread_props(() => get(reduced), attachments));
-        // `props` and the node are read unconditionally before any branch — a guarded read would
-        // drop that dependency from later re-runs. reconcile() itself tolerates a null node.
-        user_effect(() => {
-            const leafProps = collect(props, LEAF_EXCLUDES);
-            const node = hostNode(instance, get(hostShim));
-            const passthrough = Reflect.get(props, PASSTHROUGH_PROP);
-            lifecycle.reconcile(leafProps, node, passthrough != null && isNativeAnimatedAvailable());
-        });
-        user_effect(() => () => lifecycle.teardown());
-        // The base's own exports ARE the wrapper's: a parent's `bind:this` on Animated.FlatList gets
-        // the real scrollToOffset/scrollToIndex/getScrollNode surface, and a method added to the base
-        // later cannot go missing here the way a hand-listed delegation would.
-        return pop(instance);
-    };
-}