@symbiote-native/image 0.0.0-stage → 0.1.0

package/build/core/types.d.ts

@@ -0,0 +1,186 @@
+import type { IAccessibilityProps, IAriaProps, IResponderProps } from '@symbiote-native/components';
+import type { IColorValue, IStyleProp, ITextStyle, IViewStyle } from '@symbiote-native/engine';
+import type { SharedRef } from 'expo-modules-core';
+import type { SFSymbol } from 'sf-symbols-typescript';
+export type IImageSource = {
+    /** `http(s)`, `file`, `data`, an asset URI and the `sf:/` and `blurhash:/` schemes */
+    uri?: string;
+    /** Sent with the request */
+    headers?: Record<string, string>;
+    /** Used for layout while the image loads, and the size of a hash placeholder */
+    width?: number | null;
+    height?: number | null;
+    /** A Blurhash string, the source becomes a `blurhash:/` uri */
+    blurhash?: string;
+    /** A Thumbhash string, the source becomes a `thumbhash:/` uri */
+    thumbhash?: string;
+    /** The key of the cache entry, the uri by default */
+    cacheKey?: string;
+    /** Web only */
+    webMaxViewportWidth?: number;
+    /** Plays the image as an animation, detected from the content by default */
+    isAnimated?: boolean;
+};
+export type IImageContentFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+export type IImageDecodeFormat = 'argb' | 'rgb';
+export type IImageResizeMode = 'cover' | 'contain' | 'stretch' | 'repeat' | 'center';
+export type IImageContentPositionValue = number | string | `${number}%` | `${number}` | 'center';
+export type IImageContentPositionString = 'center' | 'top' | 'right' | 'bottom' | 'left' | 'top center' | 'top right' | 'top left' | 'right center' | 'right top' | 'right bottom' | 'bottom center' | 'bottom right' | 'bottom left' | 'left center' | 'left top' | 'left bottom';
+/** Two edges, the native side takes only this form */
+export type IImageContentPositionObject = {
+    top?: IImageContentPositionValue;
+    right?: IImageContentPositionValue;
+} | {
+    top?: IImageContentPositionValue;
+    left?: IImageContentPositionValue;
+} | {
+    bottom?: IImageContentPositionValue;
+    right?: IImageContentPositionValue;
+} | {
+    bottom?: IImageContentPositionValue;
+    left?: IImageContentPositionValue;
+};
+export type IImageContentPosition = IImageContentPositionObject | IImageContentPositionString;
+export type IImageTransition = {
+    /** In milliseconds */
+    duration?: number;
+    timing?: 'ease-in-out' | 'ease-in' | 'ease-out' | 'linear';
+    effect?: 'cross-dissolve' | 'flip-from-top' | 'flip-from-right' | 'flip-from-bottom' | 'flip-from-left' | 'curl-up' | 'curl-down' | 'sf:replace' | 'sf:down-up' | 'sf:up-up' | 'sf:off-up' | null;
+};
+export type ISfSymbolEffectType = 'bounce' | 'bounce/up' | 'bounce/down' | 'pulse' | 'variable-color' | 'variable-color/iterative' | 'variable-color/cumulative' | 'scale' | 'scale/up' | 'scale/down' | 'appear' | 'disappear' | 'wiggle' | 'rotate' | 'breathe' | 'draw/on' | 'draw/off';
+export type ISfSymbolEffectObject = {
+    effect: ISfSymbolEffectType;
+    /** `-1` repeats forever */
+    repeat?: number;
+    scope?: 'by-layer' | 'whole-symbol' | null;
+};
+/** iOS 17+ for an SF Symbol source */
+export type ISfSymbolEffect = ISfSymbolEffectType | ISfSymbolEffectObject | (ISfSymbolEffectType | ISfSymbolEffectObject)[];
+export type IImageLoadEventData = {
+    cacheType: 'none' | 'disk' | 'memory';
+    source: {
+        url: string;
+        width: number;
+        height: number;
+        mediaType: string | null;
+        isAnimated?: boolean;
+    };
+};
+export type IImageProgressEventData = {
+    loaded: number;
+    total: number;
+};
+export type IImageErrorEventData = {
+    error: string;
+};
+export type IImagePrefetchOptions = {
+    /** `memory-disk` by default */
+    cachePolicy?: 'disk' | 'memory-disk' | 'memory';
+    headers?: Record<string, string>;
+};
+export type IImageCacheConfig = {
+    /** In bytes */
+    maxDiskSize?: number;
+    /** In bytes */
+    maxMemoryCost?: number;
+    maxMemoryCount?: number;
+};
+export type IImageLoadOptions = {
+    maxWidth?: number;
+    maxHeight?: number;
+    tintColor?: IColorValue | number;
+    /** `retry` loads again */
+    onError?(error: Error, retry: () => void): void;
+};
+/** A reference to a native image, an image view takes it as its source */
+export declare class ImageRef extends SharedRef<'image'> {
+    readonly width: number;
+    readonly height: number;
+    readonly scale: number;
+    readonly mediaType: string | null;
+    readonly isAnimated?: boolean;
+    /** The id the native view looks the shared object up by */
+    readonly __expo_shared_object_id__: number;
+}
+export type IImageStyle = IViewStyle & {
+    tintColor?: IColorValue;
+    resizeMode?: IImageResizeMode;
+    /** With `color` and `fontSize` for an SF Symbol */
+    fontWeight?: ITextStyle['fontWeight'];
+    color?: IColorValue;
+    fontSize?: number;
+};
+export type IImageSources = IImageSource | `sf:${SFSymbol}` | (string & {}) | number | IImageSource[] | string[] | SharedRef<'image'> | null;
+export type IImageViewProps = IAccessibilityProps & IAriaProps & IResponderProps & {
+    style?: IStyleProp<IImageStyle>;
+    /** A uri, an asset, a source object, a list of them or an `ImageRef` */
+    source?: IImageSources;
+    /** Shown while `source` loads */
+    placeholder?: IImageSource | string | number | IImageSource[] | string[] | SharedRef<'image'> | null;
+    /** `cover` by default, `contain` for an SF Symbol */
+    contentFit?: IImageContentFit;
+    placeholderContentFit?: IImageContentFit;
+    /** `center` by default */
+    contentPosition?: IImageContentPosition;
+    /** A number is the duration of a cross dissolve */
+    transition?: IImageTransition | number | null;
+    blurRadius?: number;
+    tintColor?: IColorValue | null;
+    priority?: 'low' | 'normal' | 'high' | null;
+    loading?: 'lazy' | 'eager';
+    cachePolicy?: 'none' | 'disk' | 'memory' | 'memory-disk' | null;
+    /** How the image follows a changing view size */
+    responsivePolicy?: 'live' | 'initial' | 'static';
+    /** Lets a recycled list cell tell its images apart */
+    recyclingKey?: string | null;
+    /** Plays an animated image on its own, `true` by default */
+    autoplay?: boolean;
+    /** An effect of an SF Symbol source, iOS 17+ */
+    sfEffect?: ISfSymbolEffect | null;
+    onLoadStart?: () => void;
+    onLoad?: (event: IImageLoadEventData) => void;
+    onProgress?: (event: IImageProgressEventData) => void;
+    onError?: (event: IImageErrorEventData) => void;
+    onLoadEnd?: () => void;
+    onDisplay?: () => void;
+    /** @deprecated Use `placeholder` */
+    defaultSource?: IImageSource | null;
+    /** @deprecated Use `placeholder` */
+    loadingIndicatorSource?: IImageSource | null;
+    /** @deprecated Use `contentFit` */
+    resizeMode?: IImageResizeMode;
+    /** @deprecated Use `transition` */
+    fadeDuration?: number;
+    focusable?: boolean;
+    accessible?: boolean;
+    accessibilityLabel?: string;
+    /** The accessibility label when none is given */
+    alt?: string;
+    /** iOS only, lets the user select text in the image */
+    enableLiveTextInteraction?: boolean;
+    /** Downscales a larger image to the view, `true` by default */
+    allowDownscaling?: boolean;
+    /** Android only, `argb` by default */
+    decodeFormat?: IImageDecodeFormat;
+    /** iOS only */
+    useAppleWebpCodec?: boolean;
+    /** Android only */
+    enforceEarlyResizing?: boolean;
+    /** iOS only */
+    preferHighDynamicRange?: boolean;
+    /** Web only */
+    draggable?: boolean;
+    testID?: string;
+    nativeID?: string;
+};
+/** What a ref to the view hands out */
+export type IImageViewHandle = {
+    /** Starts an animated image */
+    startAnimating(): Promise<void>;
+    stopAnimating(): Promise<void>;
+    /** Keeps the resource from being reloaded */
+    lockResourceAsync(): Promise<void>;
+    unlockResourceAsync(): Promise<void>;
+    /** Reloads the resource, the lock is ignored */
+    reloadAsync(): Promise<void>;
+};

package/build/core/types.js

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

package/build/react/image-background.d.ts

@@ -0,0 +1,7 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { IImageBackgroundProps } from '../core';
+export type IImageBackgroundReactProps = IImageBackgroundProps & {
+    children?: ReactNode;
+};
+/** React twin of `expo-image`'s `ImageBackground`, children paint over the image */
+export declare function ImageBackground(props: IImageBackgroundReactProps): ReactElement;

package/build/react/image-background.js

@@ -0,0 +1,7 @@
+import { descriptorToReactWithChildren } from '@symbiote-native/react';
+import { renderImageBackground } from '../core/index.js';
+/** React twin of `expo-image`'s `ImageBackground`, children paint over the image */
+export function ImageBackground(props) {
+    const { children, ...rest } = props;
+    return descriptorToReactWithChildren(renderImageBackground(rest), children);
+}

package/build/react/image.d.ts

@@ -0,0 +1,8 @@
+import type { ReactElement, Ref } from 'react';
+import type { IImageViewHandle, IImageViewProps } from '../core';
+export type IImageReactProps = IImageViewProps & {
+    ref?: Ref<IImageViewHandle>;
+    className?: string;
+};
+/** React twin of `expo-image`'s `Image` */
+export declare function Image({ ref, ...props }: IImageReactProps): ReactElement | null;

package/build/react/image.js

@@ -0,0 +1,6 @@
+import { useNativeViewController } from '@symbiote-native/react';
+import { createImageView } from '../core/index.js';
+/** React twin of `expo-image`'s `Image` */
+export function Image({ ref, ...props }) {
+    return useNativeViewController(ref, createImageView, props);
+}

package/build/react/index.d.ts

@@ -0,0 +1,6 @@
+export { Image } from './image';
+export type { IImageReactProps } from './image';
+export { ImageBackground } from './image-background';
+export type { IImageBackgroundReactProps } from './image-background';
+export { useImage } from './use-image';
+export * from '../core';

package/build/react/index.js

@@ -0,0 +1,5 @@
+// @symbiote-native/image/react: the image view, its cache and hash functions on a shared core
+export { Image } from './image.js';
+export { ImageBackground } from './image-background.js';
+export { useImage } from './use-image.js';
+export * from '../core/index.js';

package/build/react/use-image.d.ts

@@ -0,0 +1,8 @@
+import type { DependencyList } from 'react';
+import type { IImageLoadOptions, IImageSource, ImageRef } from '../core';
+/**
+ * Loads an image into a native `ImageRef`, `null` until the first one has loaded
+ *
+ * It loads again when the uri of the source or an item of `dependencies` changes
+ */
+export declare function useImage(source: IImageSource | string | number, options?: IImageLoadOptions, dependencies?: DependencyList): ImageRef | null;

package/build/react/use-image.js

@@ -0,0 +1,20 @@
+import { useEffect, useRef, useState } from 'react';
+import { createImageRefLoader, resolveSource } from '../core/index.js';
+/**
+ * Loads an image into a native `ImageRef`, `null` until the first one has loaded
+ *
+ * It loads again when the uri of the source or an item of `dependencies` changes
+ */
+export function useImage(source, options = {}, dependencies = []) {
+    const [image, setImage] = useState(null);
+    // The effect reads the options of the latest render, not the ones it started with
+    const latestOptions = useRef(options);
+    latestOptions.current = options;
+    const key = resolveSource(source)?.uri;
+    useEffect(() => {
+        const loader = createImageRefLoader(setImage, () => latestOptions.current);
+        loader.load(source);
+        return loader.cancel;
+    }, [key, ...dependencies]);
+    return image;
+}

package/build/solid/image-background.d.ts

@@ -0,0 +1,7 @@
+import type { JSX } from 'solid-js';
+import type { IImageBackgroundProps } from '../core';
+export type IImageBackgroundSolidProps = IImageBackgroundProps & {
+    children?: JSX.Element;
+};
+/** Solid twin of `expo-image`'s `ImageBackground`, children paint over the image */
+export declare const ImageBackground: (props: IImageBackgroundSolidProps) => import("@symbiote-native/engine").ISymbioteNode;

package/build/solid/image-background.js

@@ -0,0 +1,4 @@
+import { defineDescriptorComponent } from '@symbiote-native/solid';
+import { renderImageBackground } from '../core/index.js';
+/** Solid twin of `expo-image`'s `ImageBackground`, children paint over the image */
+export const ImageBackground = defineDescriptorComponent(renderImageBackground);

package/build/solid/image.d.ts

@@ -0,0 +1,45 @@
+import type { IImageViewHandle } from '../core';
+/** Solid twin of `expo-image`'s `Image`, `ref` gets the handle of the view */
+export declare const Image: (props: import("@symbiote-native/components").IAccessibilityProps & import("@symbiote-native/components").IAriaProps & import("@symbiote-native/components").IResponderProps & {
+    style?: import("@symbiote-native/engine").IStyleProp<import(".").IImageStyle>;
+    source?: import(".").IImageSources;
+    placeholder?: import(".").IImageSource | string | number | import(".").IImageSource[] | string[] | import("expo-modules-core").SharedRef<"image"> | null;
+    contentFit?: import(".").IImageContentFit;
+    placeholderContentFit?: import(".").IImageContentFit;
+    contentPosition?: import(".").IImageContentPosition;
+    transition?: import(".").IImageTransition | number | null;
+    blurRadius?: number;
+    tintColor?: import("@symbiote-native/engine").IColorValue | null;
+    priority?: "low" | "normal" | "high" | null;
+    loading?: "lazy" | "eager";
+    cachePolicy?: "none" | "disk" | "memory" | "memory-disk" | null;
+    responsivePolicy?: "live" | "initial" | "static";
+    recyclingKey?: string | null;
+    autoplay?: boolean;
+    sfEffect?: import(".").ISfSymbolEffect | null;
+    onLoadStart?: () => void;
+    onLoad?: (event: import(".").IImageLoadEventData) => void;
+    onProgress?: (event: import(".").IImageProgressEventData) => void;
+    onError?: (event: import(".").IImageErrorEventData) => void;
+    onLoadEnd?: () => void;
+    onDisplay?: () => void;
+    defaultSource?: import(".").IImageSource | null;
+    loadingIndicatorSource?: import(".").IImageSource | null;
+    resizeMode?: import(".").IImageResizeMode;
+    fadeDuration?: number;
+    focusable?: boolean;
+    accessible?: boolean;
+    accessibilityLabel?: string;
+    alt?: string;
+    enableLiveTextInteraction?: boolean;
+    allowDownscaling?: boolean;
+    decodeFormat?: import(".").IImageDecodeFormat;
+    useAppleWebpCodec?: boolean;
+    enforceEarlyResizing?: boolean;
+    preferHighDynamicRange?: boolean;
+    draggable?: boolean;
+    testID?: string;
+    nativeID?: string;
+} & {
+    ref?: ((handle: IImageViewHandle) => void) | undefined;
+}) => import("@symbiote-native/engine").ISymbioteNode | null;

package/build/solid/image.js

@@ -0,0 +1,4 @@
+import { defineNativeViewComponent } from '@symbiote-native/solid';
+import { createImageView } from '../core/index.js';
+/** Solid twin of `expo-image`'s `Image`, `ref` gets the handle of the view */
+export const Image = defineNativeViewComponent(createImageView);

package/build/solid/index.d.ts

@@ -0,0 +1,5 @@
+export { Image } from './image';
+export { ImageBackground } from './image-background';
+export type { IImageBackgroundSolidProps } from './image-background';
+export { useImage } from './use-image';
+export * from '../core';

package/build/solid/index.js

@@ -0,0 +1,5 @@
+// @symbiote-native/image/solid: the image view, its cache and hash functions on a shared core
+export { Image } from './image.js';
+export { ImageBackground } from './image-background.js';
+export { useImage } from './use-image.js';
+export * from '../core/index.js';

package/build/solid/use-image.d.ts

@@ -0,0 +1,8 @@
+import type { Accessor } from 'solid-js';
+import type { IImageLoadOptions, IImageSource, ImageRef } from '../core';
+/**
+ * Solid twin of `expo-image`'s `useImage`, `null` until the first image has loaded
+ *
+ * It loads again when the uri of the source or a `dependencies` accessor changes
+ */
+export declare function useImage(source: Accessor<IImageSource | string | number>, options?: Accessor<IImageLoadOptions>, dependencies?: Accessor<unknown>[]): Accessor<ImageRef | null>;

package/build/solid/use-image.js

@@ -0,0 +1,16 @@
+import { createEffect, createSignal, on, onCleanup } from 'solid-js';
+import { createImageRefLoader, resolveSource } from '../core/index.js';
+/**
+ * Solid twin of `expo-image`'s `useImage`, `null` until the first image has loaded
+ *
+ * It loads again when the uri of the source or a `dependencies` accessor changes
+ */
+export function useImage(source, options = () => ({}), dependencies = []) {
+    const [image, setImage] = createSignal(null);
+    createEffect(on(() => [resolveSource(source())?.uri, ...dependencies.map(read => read())], () => {
+        const loader = createImageRefLoader(setImage, options);
+        loader.load(source());
+        onCleanup(loader.cancel);
+    }));
+    return image;
+}

package/build/svelte/image-background-props.d.ts

@@ -0,0 +1,5 @@
+import type { Snippet } from 'svelte';
+import type { IImageBackgroundProps } from '../core';
+export type IImageBackgroundSvelteProps = IImageBackgroundProps & {
+    children?: Snippet;
+};

package/build/svelte/image-background-props.js

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

package/build/svelte/image-background.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import DescriptorHost from '@symbiote-native/svelte/descriptor-host';
+  import { renderImageBackground } from '../core';
+  import type { IImageBackgroundSvelteProps } from './image-background-props';
+
+  const { children, ...rest }: IImageBackgroundSvelteProps = $props();
+  const descriptor = $derived(renderImageBackground({ ...rest }));
+</script>
+
+<DescriptorHost {descriptor} {children} />

package/build/svelte/image-background.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { IImageBackgroundSvelteProps } from './image-background-props';
+declare const ImageBackground: import("svelte").Component<IImageBackgroundSvelteProps, {}, "">;
+type ImageBackground = ReturnType<typeof ImageBackground>;
+export default ImageBackground;

package/build/svelte/image.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  // The native view name is mixed-case, which a literal tag would parse as a component reference,
+  // so the tag is dynamic
+  import { hostProps } from '@symbiote-native/svelte/native-view-bridge';
+  import { useNativeViewController } from '@symbiote-native/svelte/runes/use-native-view-controller';
+  import { createImageView } from '../core';
+  import type { IImageViewProps } from '../core';
+
+  const props: IImageViewProps = $props();
+  const view = useNativeViewController(createImageView, () => ({ ...props }));
+
+  // The functions of the view are instance members, `bind:this` reaches them
+  export const startAnimating = view.handle.startAnimating;
+  export const stopAnimating = view.handle.stopAnimating;
+  export const lockResourceAsync = view.handle.lockResourceAsync;
+  export const unlockResourceAsync = view.handle.unlockResourceAsync;
+  export const reloadAsync = view.handle.reloadAsync;
+</script>
+
+{#if view.descriptor}
+  <svelte:element
+    this={view.descriptor.type}
+    {@attach view.attachHost}
+    {@attach hostProps(view.descriptor.props)}
+  />
+{/if}

package/build/svelte/image.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { IImageViewProps } from '../core';
+declare const Image: import("svelte").Component<IImageViewProps, {
+    startAnimating: () => Promise<void>;
+    stopAnimating: () => Promise<void>;
+    lockResourceAsync: () => Promise<void>;
+    unlockResourceAsync: () => Promise<void>;
+    reloadAsync: () => Promise<void>;
+}, "">;
+type Image = ReturnType<typeof Image>;
+export default Image;

package/build/svelte/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Image } from './image.svelte';
+export { default as ImageBackground } from './image-background.svelte';
+export type { IImageBackgroundSvelteProps } from './image-background-props';
+export { useImage } from './use-image.svelte';
+export type { IUseImageResult } from './use-image.svelte';
+export * from '../core';

package/build/svelte/index.js

@@ -0,0 +1,5 @@
+// @symbiote-native/image/svelte: the image view, its cache and hash functions on a shared core
+export { default as Image } from './image.svelte';
+export { default as ImageBackground } from './image-background.svelte';
+export { useImage } from './use-image.svelte';
+export * from '../core/index.js';

package/build/svelte/use-image.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { IImageLoadOptions, IImageSource, ImageRef } from '../core';
+export type IUseImageResult = {
+    readonly current: ImageRef | null;
+};
+/**
+ * Svelte twin of `expo-image`'s `useImage`, boxed getter shape of the other hooks
+ *
+ * It loads again when the uri of the source or a value read by `getDependencies` changes
+ */
+export declare function useImage(getSource: () => IImageSource | string | number, getOptions?: () => IImageLoadOptions, getDependencies?: () => unknown[]): IUseImageResult;

package/build/svelte/use-image.svelte.js

@@ -0,0 +1,26 @@
+import { untrack } from 'svelte';
+import { createImageRefLoader, resolveSource } from '../core/index.js';
+/**
+ * Svelte twin of `expo-image`'s `useImage`, boxed getter shape of the other hooks
+ *
+ * It loads again when the uri of the source or a value read by `getDependencies` changes
+ */
+export function useImage(getSource, getOptions = () => ({}), getDependencies = () => []) {
+    let image = $state.raw(null);
+    const key = $derived(resolveSource(getSource())?.uri);
+    $effect(() => {
+        // Read so the effect tracks them, the source itself is not a trigger
+        void key;
+        getDependencies();
+        const loader = createImageRefLoader(loaded => {
+            image = loaded;
+        }, getOptions);
+        untrack(() => loader.load(getSource()));
+        return loader.cancel;
+    });
+    return {
+        get current() {
+            return image;
+        },
+    };
+}

package/build/vue/image-background.d.ts

@@ -0,0 +1,3 @@
+import { type VNode } from '@vue/runtime-core';
+/** Vue twin of `expo-image`'s `ImageBackground`, the default slot paints over the image */
+export declare const ImageBackground: import("vue").DefineComponent<{}, () => VNode, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/build/vue/image-background.js

@@ -0,0 +1,12 @@
+import { defineComponent } from '@vue/runtime-core';
+import { descriptorToVue, normalizeVueAttrs } from '@symbiote-native/vue';
+import { renderImageBackground } from '../core/index.js';
+/** Vue twin of `expo-image`'s `ImageBackground`, the default slot paints over the image */
+export const ImageBackground = defineComponent({
+    name: 'ImageBackground',
+    // Every attribute is a prop of the image or the view, nothing leaks onto the wrapper
+    inheritAttrs: false,
+    setup(_props, { attrs, slots }) {
+        return () => descriptorToVue(renderImageBackground(normalizeVueAttrs(attrs)), slots.default?.() ?? []);
+    },
+});

package/build/vue/image.d.ts

@@ -0,0 +1,2 @@
+/** Vue twin of `expo-image`'s `Image`, `ref` gets the handle of the view */
+export declare const Image: import("vue").DefineComponent<{}, () => import("vue").VNode | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/build/vue/image.js

@@ -0,0 +1,4 @@
+import { defineNativeViewComponent } from '@symbiote-native/vue';
+import { createImageView } from '../core/index.js';
+/** Vue twin of `expo-image`'s `Image`, `ref` gets the handle of the view */
+export const Image = defineNativeViewComponent('Image', createImageView);

package/build/vue/index.d.ts

@@ -0,0 +1,4 @@
+export { Image } from './image';
+export { ImageBackground } from './image-background';
+export { useImage } from './use-image';
+export * from '../core';

package/build/vue/index.js

@@ -0,0 +1,5 @@
+// @symbiote-native/image/vue: the image view, its cache and hash functions on a shared core
+export { Image } from './image.js';
+export { ImageBackground } from './image-background.js';
+export { useImage } from './use-image.js';
+export * from '../core/index.js';

package/build/vue/use-image.d.ts

@@ -0,0 +1,8 @@
+import type { MaybeRefOrGetter, ShallowRef, WatchSource } from '@vue/runtime-core';
+import type { IImageLoadOptions, IImageSource, ImageRef } from '../core';
+/**
+ * Vue twin of `expo-image`'s `useImage`, `null` until the first image has loaded
+ *
+ * It loads again when the uri of the source or a watched `dependencies` source changes
+ */
+export declare function useImage(source: MaybeRefOrGetter<IImageSource | string | number>, options?: MaybeRefOrGetter<IImageLoadOptions>, dependencies?: WatchSource[]): Readonly<ShallowRef<ImageRef | null>>;

package/build/vue/use-image.js

@@ -0,0 +1,18 @@
+import { shallowRef, toValue, watch } from '@vue/runtime-core';
+import { createImageRefLoader, resolveSource } from '../core/index.js';
+/**
+ * Vue twin of `expo-image`'s `useImage`, `null` until the first image has loaded
+ *
+ * It loads again when the uri of the source or a watched `dependencies` source changes
+ */
+export function useImage(source, options = {}, dependencies = []) {
+    const image = shallowRef(null);
+    watch([() => resolveSource(toValue(source))?.uri, ...dependencies], (_next, _previous, onCleanup) => {
+        const loader = createImageRefLoader(loaded => {
+            image.value = loaded;
+        }, () => toValue(options));
+        loader.load(toValue(source));
+        onCleanup(loader.cancel);
+    }, { immediate: true });
+    return image;
+}

package/build-ngc/angular/image/index.d.ts

@@ -0,0 +1,23 @@
+import { NativeViewBase } from '@symbiote-native/angular';
+import type { IDescriptor } from '@symbiote-native/components';
+import type { IStyleProp } from '@symbiote-native/engine';
+import type { IImageStyle, IImageViewProps } from '../../core';
+import * as i0 from "@angular/core";
+declare const IMAGE_INPUTS: readonly ["source", "placeholder", "contentFit", "placeholderContentFit", "contentPosition", "transition", "blurRadius", "tintColor", "priority", "loading", "cachePolicy", "responsivePolicy", "recyclingKey", "autoplay", "sfEffect", "onLoadStart", "onLoad", "onProgress", "onError", "onLoadEnd", "onDisplay", "defaultSource", "loadingIndicatorSource", "resizeMode", "fadeDuration", "alt", "enableLiveTextInteraction", "allowDownscaling", "decodeFormat", "useAppleWebpCodec", "enforceEarlyResizing", "preferHighDynamicRange", "draggable"];
+export interface ExpoImage extends Partial<Pick<IImageViewProps, (typeof IMAGE_INPUTS)[number]>> {
+}
+/** Angular twin of `expo-image`'s `Image`, `Image` itself is a primitive tag of the adapter */
+export declare class ExpoImage extends NativeViewBase {
+    style?: IStyleProp<IImageStyle>;
+    private readonly view;
+    readonly startAnimating: () => Promise<void>;
+    readonly stopAnimating: () => Promise<void>;
+    readonly lockResourceAsync: () => Promise<void>;
+    readonly unlockResourceAsync: () => Promise<void>;
+    readonly reloadAsync: () => Promise<void>;
+    protected readonly propNames: readonly ["source", "placeholder", "contentFit", "placeholderContentFit", "contentPosition", "transition", "blurRadius", "tintColor", "priority", "loading", "cachePolicy", "responsivePolicy", "recyclingKey", "autoplay", "sfEffect", "onLoadStart", "onLoad", "onProgress", "onError", "onLoadEnd", "onDisplay", "defaultSource", "loadingIndicatorSource", "resizeMode", "fadeDuration", "alt", "enableLiveTextInteraction", "allowDownscaling", "decodeFormat", "useAppleWebpCodec", "enforceEarlyResizing", "preferHighDynamicRange", "draggable"];
+    protected renderView(props: object): IDescriptor | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ExpoImage, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ExpoImage, "ExpoImage", never, { "source": { "alias": "source"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "contentFit": { "alias": "contentFit"; "required": false; }; "placeholderContentFit": { "alias": "placeholderContentFit"; "required": false; }; "contentPosition": { "alias": "contentPosition"; "required": false; }; "transition": { "alias": "transition"; "required": false; }; "blurRadius": { "alias": "blurRadius"; "required": false; }; "tintColor": { "alias": "tintColor"; "required": false; }; "priority": { "alias": "priority"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "cachePolicy": { "alias": "cachePolicy"; "required": false; }; "responsivePolicy": { "alias": "responsivePolicy"; "required": false; }; "recyclingKey": { "alias": "recyclingKey"; "required": false; }; "autoplay": { "alias": "autoplay"; "required": false; }; "sfEffect": { "alias": "sfEffect"; "required": false; }; "onLoadStart": { "alias": "onLoadStart"; "required": false; }; "onLoad": { "alias": "onLoad"; "required": false; }; "onProgress": { "alias": "onProgress"; "required": false; }; "onError": { "alias": "onError"; "required": false; }; "onLoadEnd": { "alias": "onLoadEnd"; "required": false; }; "onDisplay": { "alias": "onDisplay"; "required": false; }; "defaultSource": { "alias": "defaultSource"; "required": false; }; "loadingIndicatorSource": { "alias": "loadingIndicatorSource"; "required": false; }; "resizeMode": { "alias": "resizeMode"; "required": false; }; "fadeDuration": { "alias": "fadeDuration"; "required": false; }; "alt": { "alias": "alt"; "required": false; }; "enableLiveTextInteraction": { "alias": "enableLiveTextInteraction"; "required": false; }; "allowDownscaling": { "alias": "allowDownscaling"; "required": false; }; "decodeFormat": { "alias": "decodeFormat"; "required": false; }; "useAppleWebpCodec": { "alias": "useAppleWebpCodec"; "required": false; }; "enforceEarlyResizing": { "alias": "enforceEarlyResizing"; "required": false; }; "preferHighDynamicRange": { "alias": "preferHighDynamicRange"; "required": false; }; "draggable": { "alias": "draggable"; "required": false; }; }, {}, never, never, true, never>;
+}
+export {};