@symbiote-native/svelte 0.2.0 → 0.3.0

package/build/modules/animated/AnimatedImage.svelte

@@ -1,115 +0,0 @@
-<script lang="ts" module>
-  // Animated.Image — unlike View/Text, Image.svelte does REAL prop transformation
-  // (buildImageBag: source resolution, resizeMode/tintColor read off style, width/height fold,
-  // alt->accessibility). Hand-authoring a bare pass-through bag here (like AnimatedView/Text)
-  // would silently drop all of that — the exact copy-paste-instead-of-calling bug class the
-  // svelte-adapter-dom-shim skill's §15/§19 already caught on Switch/ActivityIndicator/
-  // TextInput/ImageBackground. So this component calls buildImageBag itself (same as
-  // image/index.svelte), fed with rasterized (reduceProps'd) field values.
-  //
-  // Known, inherited (not Svelte-specific) limitation: the PER-FRAME animated path
-  // (AnimatedProps.update -> setNativeProps) pushes the raw `rest` fields directly, bypassing
-  // buildImageBag's mapping — same as Vue's/React's Animated.Image, since AnimatedProps is
-  // framework-agnostic and has no notion of a component's own prop transform. In practice this
-  // only matters if a non-`style` field (e.g. `source`) is itself animated, which is not a
-  // supported use — animating Image is expected to go through `style` (opacity/transform),
-  // which round-trips correctly since buildImageBag keeps `style` under the same key name.
-  import type { IAnimatedComponentProps } from './animated-component-props';
-
-  export type { IAnimatedComponentProps };
-</script>
-
-<script lang="ts">
-  import {
-    createAnimatedLeafLifecycle,
-    isNativeAnimatedAvailable,
-    reduceProps,
-    readPassthroughStyle,
-  } from '@symbiote-native/engine';
-  import { resolveAccessibilityProps } from '@symbiote-native/components';
-  import type { IAccessibilityProps, IAriaProps, IImageViewProps } from '@symbiote-native/components';
-  import { buildImageBag } from '../../components/image/image-logic';
-  import { createAttachmentsSync } from '../../runes/attachments';
-  import type { ShimElement } from '../../dom-shim';
-
-  let { passthroughAnimatedPropExplicitValues: passthrough, ...rest }: IAnimatedComponentProps =
-    $props();
-
-  let hostShim = $state.raw<ShimElement | null>(null);
-
-  const wantsNative = $derived(passthrough != null && isNativeAnimatedAvailable());
-
-  // Rasterize every field (style's animated entries resolved to plain numbers, any other
-  // animated field to its current value), then re-run Image's own field split + buildImageBag
-  // over the resolved values — the same shape image/index.svelte builds, just fed reduced
-  // values instead of raw $props().
-  const reduced = $derived.by(() => {
-    const resolved = reduceProps(rest);
-    const {
-      source,
-      defaultSource,
-      loadingIndicatorSource,
-      style,
-      resizeMode,
-      tintColor,
-      src,
-      srcSet,
-      alt,
-      width,
-      height,
-      crossOrigin,
-      referrerPolicy,
-      ...imagePassthrough
-    } = resolved;
-    // reduceProps returns a flat Record<string, unknown> — every field above is `unknown`
-    // even though it is, at runtime, exactly the shape IImageViewProps/IAccessibilityProps
-    // declare. Bridging that back into a typed shape without an `as` cast uses the same
-    // `Object.assign(Object.create(null), …)` pattern React's create-animated-component.tsx
-    // already establishes: Object.create(null) types as `any`, so Object.assign's result does
-    // too, and TS allows assigning `any` into a specifically-typed binding.
-    const accessibility: IAccessibilityProps & IAriaProps = Object.assign(
-      Object.create(null),
-      imagePassthrough,
-    );
-    const view: IImageViewProps = Object.assign(Object.create(null), {
-      source,
-      defaultSource,
-      loadingIndicatorSource,
-      style,
-      resizeMode,
-      tintColor,
-      src,
-      srcSet,
-      alt,
-      width,
-      height,
-      crossOrigin,
-      referrerPolicy,
-      passthrough: resolveAccessibilityProps(accessibility),
-    });
-    const bag = buildImageBag(view);
-    const passthroughStyle = readPassthroughStyle(passthrough);
-    if (passthroughStyle !== undefined) {
-      bag.style = bag.style === undefined ? passthroughStyle : [bag.style, passthroughStyle];
-    }
-    return bag;
-  });
-
-  const runtime = createAnimatedLeafLifecycle('AnimatedImage');
-
-  $effect(() => {
-    const currentRest = rest;
-    const node = hostShim?.engineNode ?? null;
-    runtime.reconcile(currentRest, node, wantsNative);
-  });
-
-  $effect(() => () => runtime.teardown());
-
-  // See View.svelte's note on `{@attach}`.
-  const syncAttachments = createAttachmentsSync();
-  $effect(() => {
-    syncAttachments(hostShim, rest);
-  });
-</script>
-
-<symbiote-image p={reduced} bind:this={hostShim} />

package/build/modules/animated/AnimatedImage.svelte.d.ts

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

package/build/modules/animated/AnimatedScrollView.svelte

@@ -1,92 +0,0 @@
-<script lang="ts" module>
-  // Animated.ScrollView — unlike View/Text/Image, ScrollView.svelte already exposes an
-  // imperative handle (scrollTo/scrollToEnd/flashScrollIndicators/getScrollNode, the SAME
-  // IScrollViewHandle shape createAnimatedComponent's resolveHostNode expects on Vue/React) via
-  // its own top-level `export function`s. That is exactly what `bind:this` needs, so this
-  // component WRAPS the real ScrollView.svelte directly rather than hand-authoring a reduced
-  // host tag — the only way to keep ScrollView's full feature surface (sticky headers,
-  // RefreshControl, maintainVisibleContentPosition, native scroll-attach) per
-  // <adapters_reach_full_feature_parity>; a hand-authored duplicate would silently lose all of
-  // it. getScrollNode() IS this adapter's resolveHostNode() equivalent for a scroll container.
-  import type { IAnimatedComponentProps } from './animated-component-props';
-
-  export type { IAnimatedComponentProps };
-</script>
-
-<script lang="ts">
-  import {
-    createAnimatedLeafLifecycle,
-    isNativeAnimatedAvailable,
-    reduceProps,
-    readPassthroughStyle,
-  } from '@symbiote-native/engine';
-  import type { ISymbioteNode } from '@symbiote-native/engine';
-  import type { IScrollViewHandle } from '@symbiote-native/components';
-  import ScrollView from '../../components/scroll-view/index.svelte';
-  import type { IScrollViewProps } from '../../components/scroll-view/scroll-view-props';
-  import { pickAttachmentProps } from '../../runes/attachments';
-
-  let {
-    children,
-    passthroughAnimatedPropExplicitValues: passthrough,
-    ...rest
-  }: IAnimatedComponentProps = $props();
-
-  // The wrapped ScrollView's own instance — its exported functions ARE its public handle
-  // (svelte-adapter-dom-shim skill's ScrollView precedent), captured by IDENTITY via bind:this,
-  // never $state (a deep proxy would still work here since it's just function references, but
-  // $state.raw stays consistent with every other imperative-handle capture in this adapter).
-  let scrollRef = $state.raw<IScrollViewHandle | null>(null);
-
-  const wantsNative = $derived(passthrough != null && isNativeAnimatedAvailable());
-
-  // reduceProps returns Record<string, unknown> — every field is `unknown` even though it is,
-  // at runtime, exactly IScrollViewProps' shape. Bridged back without an `as` cast via the same
-  // Object.assign(Object.create(null), …) pattern AnimatedImage.svelte uses (and React's
-  // create-animated-component.tsx already establishes): Object.create(null) types as `any`, so
-  // the assignment result does too, and TS allows binding `any` into a typed variable.
-  const reduced = $derived.by(() => {
-    const resolved = reduceProps(rest);
-    const passthroughStyle = readPassthroughStyle(passthrough);
-    if (passthroughStyle !== undefined) {
-      resolved.style =
-        resolved.style === undefined ? passthroughStyle : [resolved.style, passthroughStyle];
-    }
-    const props: IScrollViewProps = Object.assign(Object.create(null), resolved);
-    return props;
-  });
-
-  const runtime = createAnimatedLeafLifecycle('AnimatedScrollView');
-
-  $effect(() => {
-    const currentRest = rest;
-    const node: ISymbioteNode | null = scrollRef?.getScrollNode() ?? null;
-    runtime.reconcile(currentRest, node, wantsNative);
-  });
-
-  $effect(() => () => runtime.teardown());
-
-  // Forward the imperative handle: a parent's `bind:this` on <Animated.ScrollView> gets the
-  // same scrollTo/scrollToEnd/flashScrollIndicators/getScrollNode surface plain ScrollView
-  // exposes — the Svelte twin of Vue's delegating Proxy `expose()`.
-  export function scrollTo(options?: { x?: number; y?: number; animated?: boolean }): void {
-    scrollRef?.scrollTo(options);
-  }
-  export function scrollToEnd(options?: { animated?: boolean }): void {
-    scrollRef?.scrollToEnd(options);
-  }
-  export function flashScrollIndicators(): void {
-    scrollRef?.flashScrollIndicators();
-  }
-  export function getScrollNode(): ISymbioteNode | null {
-    return scrollRef?.getScrollNode() ?? null;
-  }
-
-  // `reduceProps` rebuilds a plain string-keyed Record, so `{@attach}`'s symbol keys do not
-  // survive it — forward them explicitly onto the wrapped ScrollView, which owns the host node.
-  const attachments = $derived(pickAttachmentProps(rest));
-</script>
-
-<ScrollView {...reduced} {...attachments} bind:this={scrollRef}>
-  {@render children?.()}
-</ScrollView>

package/build/modules/animated/AnimatedScrollView.svelte.d.ts

@@ -1,17 +0,0 @@
-import type { IAnimatedComponentProps } from './animated-component-props';
-export type { IAnimatedComponentProps };
-import type { ISymbioteNode } from '@symbiote-native/engine';
-declare const AnimatedScrollView: import("svelte").Component<IAnimatedComponentProps, {
-    scrollTo: (options?: {
-        x?: number;
-        y?: number;
-        animated?: boolean;
-    }) => void;
-    scrollToEnd: (options?: {
-        animated?: boolean;
-    }) => void;
-    flashScrollIndicators: () => void;
-    getScrollNode: () => ISymbioteNode | null;
-}, "">;
-type AnimatedScrollView = ReturnType<typeof AnimatedScrollView>;
-export default AnimatedScrollView;

package/build/modules/animated/AnimatedText.svelte

@@ -1,58 +0,0 @@
-<script lang="ts" module>
-  // Animated.Text — see AnimatedView.svelte's header comment for the shared design rationale
-  // (hand-authored root tag, shared reconcile runtime). Text.svelte is likewise a pure
-  // pass-through bag, so hand-authoring loses no logic.
-  import type { IAnimatedComponentProps } from './animated-component-props';
-
-  export type { IAnimatedComponentProps };
-</script>
-
-<script lang="ts">
-  import {
-    createAnimatedLeafLifecycle,
-    isNativeAnimatedAvailable,
-    reduceProps,
-    readPassthroughStyle,
-  } from '@symbiote-native/engine';
-  import { createAttachmentsSync } from '../../runes/attachments';
-  import type { ShimElement } from '../../dom-shim';
-
-  let {
-    children,
-    passthroughAnimatedPropExplicitValues: passthrough,
-    ...rest
-  }: IAnimatedComponentProps = $props();
-
-  let hostShim = $state.raw<ShimElement | null>(null);
-
-  const wantsNative = $derived(passthrough != null && isNativeAnimatedAvailable());
-
-  const reduced = $derived.by(() => {
-    const out = reduceProps(rest);
-    const passthroughStyle = readPassthroughStyle(passthrough);
-    if (passthroughStyle !== undefined) {
-      out.style = out.style === undefined ? passthroughStyle : [out.style, passthroughStyle];
-    }
-    return out;
-  });
-
-  const runtime = createAnimatedLeafLifecycle('AnimatedText');
-
-  $effect(() => {
-    const currentRest = rest;
-    const node = hostShim?.engineNode ?? null;
-    runtime.reconcile(currentRest, node, wantsNative);
-  });
-
-  $effect(() => () => runtime.teardown());
-
-  // See View.svelte's note on `{@attach}`.
-  const syncAttachments = createAttachmentsSync();
-  $effect(() => {
-    syncAttachments(hostShim, rest);
-  });
-</script>
-
-<symbiote-text p={reduced} bind:this={hostShim}>
-  {@render children?.()}
-</symbiote-text>

package/build/modules/animated/AnimatedText.svelte.d.ts

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

package/build/modules/animated/AnimatedView.svelte

@@ -1,95 +0,0 @@
-<script lang="ts" module>
-  // Animated.View: wraps @symbiote-native/engine's Animated value graph around a
-  // symbiote-view host tag. Hand-authors its own root tag rather than composing View.svelte —
-  // View.svelte exposes no host-node escape hatch (no bind:this on its own root, nothing
-  // exported), so there is nothing to capture a ref onto; the pattern instead mirrors
-  // Pressable/ScrollView, the adapter's existing precedent for a component that needs the raw
-  // ShimElement (svelte-adapter-dom-shim skill). Since View.svelte does no prop transformation
-  // of its own (it is a pure pass-through bag), hand-authoring here loses no logic — unlike
-  // AnimatedImage, which reuses Image's buildImageBag for exactly that reason.
-  //
-  // The reactive plumbing (leaf lifecycle, native-driver opt-in, native event attach) is shared
-  // with AnimatedText/AnimatedImage/AnimatedScrollView via animated-props-runtime.ts — see this
-  // module's index.ts for why that is a shared HELPER rather than one generic
-  // createAnimatedComponent(Component) the way Vue/React have: Svelte has no h()/createElement
-  // to parametrize an arbitrary base component at runtime.
-  import type { IAnimatedComponentProps } from './animated-component-props';
-
-  export type { IAnimatedComponentProps };
-</script>
-
-<script lang="ts">
-  import {
-    createAnimatedLeafLifecycle,
-    dlog,
-    isNativeAnimatedAvailable,
-    reduceProps,
-    readPassthroughStyle,
-  } from '@symbiote-native/engine';
-  import { createAttachmentsSync } from '../../runes/attachments';
-  import type { ShimElement } from '../../dom-shim';
-
-  let {
-    children,
-    passthroughAnimatedPropExplicitValues: passthrough,
-    ...rest
-  }: IAnimatedComponentProps = $props();
-
-  // $state.raw, NOT $state — same identity rule every stateful component in this adapter
-  // follows (Switch/Pressable/ScrollView): a deep $state proxy would make the engine's
-  // WeakMap-keyed node lookups miss.
-  let hostShim = $state.raw<ShimElement | null>(null);
-
-  const wantsNative = $derived(passthrough != null && isNativeAnimatedAvailable());
-
-  // Reduced (rasterized) props for the declarative bag: every animated node replaced by its
-  // current value, so the first paint (and every non-animated re-render) carries concrete
-  // values — the per-FRAME path is separate (the runtime's reconcile below), driven straight
-  // off the raw `rest` object, never through this derivation.
-  let reducedCallCount = 0;
-  const reduced = $derived.by(() => {
-    const out = reduceProps(rest);
-    const passthroughStyle = readPassthroughStyle(passthrough);
-    if (passthroughStyle !== undefined) {
-      out.style = out.style === undefined ? passthroughStyle : [out.style, passthroughStyle];
-    }
-    dlog(`AnimatedView reduced#${++reducedCallCount} wantsNative=${wantsNative}`);
-    return out;
-  });
-
-  const runtime = createAnimatedLeafLifecycle('AnimatedView');
-
-  // DIAGNOSTIC (2026-08-13, tracking the effect_update_depth_exceeded device crash): isolates
-  // whether `bind:this={hostShim}` below EVER re-fires after the initial mount. If it does — a
-  // custom-element `p` prop commit re-triggering the ref callback — that reassignment would make
-  // THIS effect's `hostShim?.engineNode` read see a "new" dependency and re-run, independent of
-  // whatever else changed, which is a plausible source of a same-flush synchronous loop that has
-  // no equivalent in React (ref callbacks)/Vue (template refs)/Angular (ViewChild). Reads ONLY
-  // hostShim, deliberately excluding `rest`, so it is unambiguous which one retriggered it.
-  let hostShimChangeCount = 0;
-  $effect(() => {
-    void hostShim;
-    dlog(`AnimatedView hostShim identity change #${++hostShimChangeCount} isNull=${hostShim === null}`);
-  });
-
-  // `rest` and `hostShim` are read unconditionally before any branch — the dependency-tracking
-  // discipline every $effect in this adapter follows (a guarded read drops that dependency from
-  // future re-runs; svelte-adapter-dom-shim skill). reconcile() itself handles a null node.
-  $effect(() => {
-    const currentRest = rest;
-    const node = hostShim?.engineNode ?? null;
-    runtime.reconcile(currentRest, node, wantsNative);
-  });
-
-  $effect(() => () => runtime.teardown());
-
-  // See View.svelte's note on `{@attach}`.
-  const syncAttachments = createAttachmentsSync();
-  $effect(() => {
-    syncAttachments(hostShim, rest);
-  });
-</script>
-
-<symbiote-view p={reduced} bind:this={hostShim}>
-  {@render children?.()}
-</symbiote-view>

package/build/modules/animated/AnimatedView.svelte.d.ts

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