@symbiote-native/image 0.0.0-stage → 0.1.0

package/build/core/image-api.js

@@ -0,0 +1,30 @@
+import { toNativeColor } from './native-style.js';
+import { expoImage } from './native-module.js';
+import { resolveSource } from './sources.js';
+const DEFAULT_CACHE_POLICY = 'memory-disk';
+/** The caching policy as a string, or with request headers as an object */
+export function prefetchImages(urls, options) {
+    const { cachePolicy = DEFAULT_CACHE_POLICY, headers } = typeof options === 'string' ? { cachePolicy: options } : (options ?? {});
+    return expoImage.prefetch(Array.isArray(urls) ? urls : [urls], cachePolicy, headers);
+}
+export const clearMemoryCache = () => expoImage.clearMemoryCache();
+export const clearDiskCache = () => expoImage.clearDiskCache();
+export const getCachePathAsync = (cacheKey) => expoImage.getCachePathAsync(cacheKey);
+export const writeToCacheAsync = (source, cacheKey) => expoImage.writeToCacheAsync(source, cacheKey);
+export const readFromCacheAsync = (cacheKey) => expoImage.readFromCacheAsync(cacheKey);
+export const configureCache = (config) => expoImage.configureCache(config);
+export const generateBlurhashAsync = (source, numberOfComponents) => expoImage.generateBlurhashAsync(source, numberOfComponents);
+export const generateThumbhashAsync = (source) => expoImage.generateThumbhashAsync(source);
+/** Loads the image into a native `ImageRef`, the caller releases it */
+export async function loadImageAsync(source, options = {}) {
+    const resolved = resolveSource(source);
+    if (!resolved) {
+        throw new Error('[expo-image]: the image source could not be resolved');
+    }
+    const { maxWidth, maxHeight, tintColor } = options;
+    return expoImage.loadAsync(resolved, {
+        maxWidth,
+        maxHeight,
+        tintColor: toNativeColor(tintColor),
+    });
+}

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

@@ -0,0 +1,11 @@
+import type { IDescriptor } from '@symbiote-native/components';
+import type { IStyleProp } from '@symbiote-native/engine';
+import type { IImageStyle, IImageViewProps } from './types';
+export type IImageBackgroundProps = IImageViewProps & {
+    /** Style of the image itself, `style` goes to the wrapping view */
+    imageStyle?: IStyleProp<IImageStyle>;
+    /** Goes to the wrapping view, as `style` does */
+    className?: string;
+};
+/** A view with an image filling it, the children of the app go after this descriptor */
+export declare function renderImageBackground(props: IImageBackgroundProps): IDescriptor;

package/build/core/image-background.js

@@ -0,0 +1,29 @@
+import { el } from '@symbiote-native/components';
+import { createImageView } from './image-view.js';
+const CLASS_KEYS = new Set([
+    'className',
+    'class',
+]);
+function isClassEntry([key]) {
+    return CLASS_KEYS.has(key);
+}
+const ABSOLUTE_FILL = {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+};
+// The background image has no handle, so nobody asks it for a host node
+const backgroundImage = createImageView(() => null);
+/** A view with an image filling it, the children of the app go after this descriptor */
+export function renderImageBackground(props) {
+    const { style, imageStyle, ...rest } = props;
+    const entries = Object.entries(rest);
+    const image = backgroundImage.render({
+        ...Object.fromEntries(entries.filter(entry => !isClassEntry(entry))),
+        style: [ABSOLUTE_FILL, imageStyle],
+    });
+    const viewClass = Object.fromEntries(entries.filter(isClassEntry));
+    return el('view', { style, ...viewClass }, image ? [image] : []);
+}

package/build/core/image-loader.d.ts

@@ -0,0 +1,20 @@
+import type { IImageLoadOptions, IImageSource } from './types';
+export type IImageLoaderConfig<TImage extends {
+    release(): void;
+}> = {
+    load(source: IImageSource | string | number, options: IImageLoadOptions): Promise<TImage>;
+    /** Called with each image that finished loading */
+    onImage(image: TImage): void;
+    /** Read at the time of a failure, so the latest callback wins */
+    getOptions(): IImageLoadOptions;
+};
+export type IImageLoader = {
+    /** Starts a load and drops the result of the one before */
+    load(source: IImageSource | string | number): void;
+    /** Drops a load in flight and releases the image loaded last */
+    cancel(): void;
+};
+/** What a `useImage` hook drives with its own lifecycle */
+export declare function createImageLoader<TImage extends {
+    release(): void;
+}>(config: IImageLoaderConfig<TImage>): IImageLoader;

package/build/core/image-loader.js

@@ -0,0 +1,42 @@
+/** What a `useImage` hook drives with its own lifecycle */
+export function createImageLoader(config) {
+    let token = 0;
+    let loaded = null;
+    function release() {
+        loaded?.release();
+        loaded = null;
+    }
+    function fail(source, error, retry) {
+        const { onError } = config.getOptions();
+        if (onError) {
+            onError(error instanceof Error ? error : new Error(String(error)), retry);
+            return;
+        }
+        console.error(`Loading an image from '${JSON.stringify(source)}' failed, use 'onError' to handle errors`);
+        console.error(error);
+    }
+    function load(source) {
+        release();
+        token += 1;
+        const mine = token;
+        config
+            .load(source, config.getOptions())
+            .then(image => {
+            if (mine !== token)
+                return;
+            loaded = image;
+            config.onImage(image);
+        })
+            .catch((error) => {
+            if (mine === token)
+                fail(source, error, () => load(source));
+        });
+    }
+    return {
+        load,
+        cancel: () => {
+            token += 1;
+            release();
+        },
+    };
+}

package/build/core/image-ref-loader.d.ts

@@ -0,0 +1,4 @@
+import type { IImageLoader } from './image-loader';
+import type { IImageLoadOptions, ImageRef } from './types';
+/** The loader every `useImage` hook drives, `getOptions` is read at each load and failure */
+export declare function createImageRefLoader(onImage: (image: ImageRef) => void, getOptions: () => IImageLoadOptions): IImageLoader;

package/build/core/image-ref-loader.js

@@ -0,0 +1,10 @@
+import { loadImageAsync } from './image-api.js';
+import { createImageLoader } from './image-loader.js';
+/** The loader every `useImage` hook drives, `getOptions` is read at each load and failure */
+export function createImageRefLoader(onImage, getOptions) {
+    return createImageLoader({
+        load: loadImageAsync,
+        onImage,
+        getOptions,
+    });
+}

package/build/core/image-view-events.d.ts

@@ -0,0 +1,9 @@
+import type { ISymbioteEvent } from '@symbiote-native/engine';
+import type { IImageViewProps } from './types';
+/** The native payload sits in `nativeEvent`, callbacks get it as the event itself */
+export declare function toImageEvents(props: IImageViewProps): {
+    onLoadStart: () => void | undefined;
+    onLoad: (event: ISymbioteEvent) => void;
+    onProgress: (event: ISymbioteEvent) => void;
+    onError: (event: ISymbioteEvent) => void;
+};

package/build/core/image-view-events.js

@@ -0,0 +1,34 @@
+function field(value, key) {
+    return Reflect.get(Object(value), key);
+}
+function isLoad(value) {
+    return (typeof field(value, 'cacheType') === 'string' &&
+        typeof field(value, 'source') === 'object');
+}
+function isProgress(value) {
+    return (typeof field(value, 'loaded') === 'number' &&
+        typeof field(value, 'total') === 'number');
+}
+function isError(value) {
+    return typeof field(value, 'error') === 'string';
+}
+/** The native payload sits in `nativeEvent`, callbacks get it as the event itself */
+export function toImageEvents(props) {
+    return {
+        onLoadStart: () => props.onLoadStart?.(),
+        onLoad: (event) => {
+            if (isLoad(event.nativeEvent))
+                props.onLoad?.(event.nativeEvent);
+            props.onLoadEnd?.();
+        },
+        onProgress: (event) => {
+            if (isProgress(event.nativeEvent))
+                props.onProgress?.(event.nativeEvent);
+        },
+        onError: (event) => {
+            if (isError(event.nativeEvent))
+                props.onError?.(event.nativeEvent);
+            props.onLoadEnd?.();
+        },
+    };
+}

package/build/core/image-view.d.ts

@@ -0,0 +1,14 @@
+import type { IDescriptor } from '@symbiote-native/components';
+import type { ISymbioteNode } from '@symbiote-native/engine';
+import type { IImageViewHandle, IImageViewProps } from './types';
+export declare const imageViewName: () => string;
+export declare const ensureImageViewRegistered: () => boolean;
+export type IImageView = {
+    handle: IImageViewHandle;
+    /** `null` means the view cannot register and the caller renders nothing */
+    render(props: IImageViewProps): IDescriptor | null;
+};
+type IGetNode = () => ISymbioteNode | null | undefined;
+/** One per mounted view, `getNode` answers the host node once it exists */
+export declare function createImageView(getNode: IGetNode): IImageView;
+export {};

package/build/core/image-view.js

@@ -0,0 +1,113 @@
+import { requireNativeModule, requireNativeViewManager, } from 'expo-modules-core';
+import { el } from '@symbiote-native/components';
+import { defineExpoNativeView, defineExpoViewMethods, getNativeTag, isDevBuild, styleOfProps, } from '@symbiote-native/engine';
+import { IMAGE_MODULE_NAME, SF_SYMBOL_PREFIX } from './constants.js';
+import { toImageEvents } from './image-view-events.js';
+import { nativeColorProps, platformStyle, splitImageStyle, toNativeColor, } from './native-style.js';
+import { resolveContentFit, resolveContentPosition, resolveSfEffect, resolveTransition, warnOnce, } from './props.js';
+import { resolveSources } from './sources.js';
+// Registered on render: a barrel side effect is lost in a release build
+const imageView = defineExpoNativeView(requireNativeViewManager, IMAGE_MODULE_NAME);
+const callViewFunction = defineExpoViewMethods(requireNativeModule, IMAGE_MODULE_NAME);
+export const imageViewName = imageView.name;
+export const ensureImageViewRegistered = imageView.ensureRegistered;
+// Props the view reads itself and native has no use for
+const OWN_PROPS = [
+    'style',
+    'source',
+    'placeholder',
+    'contentFit',
+    'contentPosition',
+    'transition',
+    'fadeDuration',
+    'resizeMode',
+    'defaultSource',
+    'loadingIndicatorSource',
+    'sfEffect',
+    'alt',
+];
+function hasSfSymbol(sources) {
+    return (Array.isArray(sources) &&
+        sources.some(source => source.uri?.startsWith(`${SF_SYMBOL_PREFIX}/`)));
+}
+function withoutOwnProps(props) {
+    const own = OWN_PROPS;
+    return Object.fromEntries(Object.entries(props).filter(([key]) => !own.includes(key)));
+}
+function placeholderOf(props) {
+    const { defaultSource, loadingIndicatorSource } = props;
+    if (defaultSource || loadingIndicatorSource) {
+        warnOnce('`defaultSource` and `loadingIndicatorSource` props are deprecated, use `placeholder`');
+    }
+    return resolveSources(props.placeholder ?? defaultSource ?? loadingIndicatorSource);
+}
+// For an SF Symbol `fontSize` sizes both the symbol and its container
+function symbolProps(parts, isSfSymbol) {
+    if (!isSfSymbol)
+        return { symbolWeight: null, symbolSize: null };
+    const { fontWeight, fontSize } = parts;
+    return {
+        symbolWeight: fontWeight === undefined ? null : String(fontWeight),
+        symbolSize: fontSize || null,
+    };
+}
+function sizedStyle(parts, isSfSymbol) {
+    const { fontSize, rest } = parts;
+    return isSfSymbol && fontSize
+        ? { width: fontSize, height: fontSize, ...rest }
+        : rest;
+}
+function nativeProps(props) {
+    const parts = splitImageStyle(styleOfProps(props));
+    const source = resolveSources(props.source);
+    const isSfSymbol = hasSfSymbol(source);
+    const sized = sizedStyle(parts, isSfSymbol);
+    const style = platformStyle(sized);
+    const symbolColor = isSfSymbol ? parts.color : undefined;
+    return {
+        ...withoutOwnProps(props),
+        ...style,
+        accessibilityLabel: props.accessibilityLabel ?? props.alt,
+        style,
+        source,
+        placeholder: placeholderOf(props),
+        contentFit: resolveContentFit(props.contentFit, props.resizeMode ?? parts.resizeMode, isSfSymbol),
+        contentPosition: resolveContentPosition(props.contentPosition),
+        transition: resolveTransition(props.transition, props.fadeDuration),
+        sfEffect: resolveSfEffect(props.sfEffect),
+        ...symbolProps(parts, isSfSymbol),
+        ...nativeColorProps(sized),
+        tintColor: toNativeColor(props.tintColor || symbolColor || style.tintColor),
+        ...toImageEvents(props),
+    };
+}
+function createImageViewHandle(getNode) {
+    // Like upstream's `ref.current?.`, a view that has not committed yet answers nothing
+    async function call(method) {
+        const node = getNode();
+        if (!node || getNativeTag(node) === undefined)
+            return;
+        await callViewFunction(node, method, []);
+    }
+    return {
+        startAnimating: () => call('startAnimating'),
+        stopAnimating: () => call('stopAnimating'),
+        lockResourceAsync: () => call('lockResourceAsync'),
+        unlockResourceAsync: () => call('unlockResourceAsync'),
+        reloadAsync: () => call('reloadAsync'),
+    };
+}
+/** One per mounted view, `getNode` answers the host node once it exists */
+export function createImageView(getNode) {
+    return {
+        handle: createImageViewHandle(getNode),
+        render: props => {
+            if (!ensureImageViewRegistered()) {
+                if (isDevBuild())
+                    console.warn("'Image' is not available.");
+                return null;
+            }
+            return el(imageViewName(), nativeProps(props));
+        },
+    };
+}

package/build/core/index.d.ts

@@ -0,0 +1,10 @@
+export { IMAGE_MODULE_NAME } from './constants';
+export { clearDiskCache, clearMemoryCache, configureCache, generateBlurhashAsync, generateThumbhashAsync, getCachePathAsync, loadImageAsync, prefetchImages, readFromCacheAsync, writeToCacheAsync, } from './image-api';
+export { renderImageBackground } from './image-background';
+export type { IImageBackgroundProps } from './image-background';
+export { createImageRefLoader } from './image-ref-loader';
+export { createImageLoader } from './image-loader';
+export type { IImageLoader, IImageLoaderConfig } from './image-loader';
+export { createImageView, ensureImageViewRegistered, imageViewName, type IImageView, } from './image-view';
+export { isImageRef, resolveSource, resolveSources } from './sources';
+export type { IImageCacheConfig, IImageContentFit, IImageContentPosition, IImageContentPositionObject, IImageContentPositionString, IImageContentPositionValue, IImageDecodeFormat, IImageErrorEventData, IImageLoadEventData, IImageLoadOptions, IImagePrefetchOptions, IImageProgressEventData, IImageResizeMode, IImageSource, IImageSources, IImageStyle, IImageTransition, IImageViewHandle, IImageViewProps, ISfSymbolEffect, ISfSymbolEffectObject, ISfSymbolEffectType, ImageRef, } from './types';

package/build/core/index.js

@@ -0,0 +1,7 @@
+export { IMAGE_MODULE_NAME } from './constants.js';
+export { clearDiskCache, clearMemoryCache, configureCache, generateBlurhashAsync, generateThumbhashAsync, getCachePathAsync, loadImageAsync, prefetchImages, readFromCacheAsync, writeToCacheAsync, } from './image-api.js';
+export { renderImageBackground } from './image-background.js';
+export { createImageRefLoader } from './image-ref-loader.js';
+export { createImageLoader } from './image-loader.js';
+export { createImageView, ensureImageViewRegistered, imageViewName, } from './image-view.js';
+export { isImageRef, resolveSource, resolveSources } from './sources.js';

package/build/core/native-module.d.ts

@@ -0,0 +1,27 @@
+import type { EventSubscription } from 'expo-modules-core';
+import type { IImageCacheConfig, IImageLoadOptions, IImagePrefetchOptions, IImageSource, ImageRef } from './types';
+export type INativeImageModule = {
+    Image: typeof ImageRef;
+    loadAsync(source: IImageSource, options?: Omit<IImageLoadOptions, 'onError' | 'tintColor'> & {
+        /** What `processColor` answers */
+        tintColor?: unknown;
+    }): Promise<ImageRef>;
+    prefetch(urls: string[], cachePolicy: IImagePrefetchOptions['cachePolicy'], headers?: Record<string, string>): Promise<boolean>;
+    clearMemoryCache(): Promise<boolean>;
+    clearDiskCache(): Promise<boolean>;
+    configureCache(config: IImageCacheConfig): void;
+    getCachePathAsync(cacheKey: string): Promise<string | null>;
+    writeToCacheAsync(source: string | ImageRef, cacheKey: string): Promise<void>;
+    readFromCacheAsync(cacheKey: string): Promise<ImageRef | null>;
+    generateBlurhashAsync(source: string | ImageRef, numberOfComponents: [number, number] | {
+        width: number;
+        height: number;
+    }): Promise<string | null>;
+    generateThumbhashAsync(source: string | ImageRef): Promise<string>;
+    addListener(eventName: string, listener: (event: {
+        url: string;
+        width: number;
+        height: number;
+    }) => void): EventSubscription;
+};
+export declare const expoImage: INativeImageModule;

package/build/core/native-module.js

@@ -0,0 +1,3 @@
+import { requireNativeModule } from 'expo-modules-core';
+import { IMAGE_MODULE_NAME } from './constants.js';
+export const expoImage = requireNativeModule(IMAGE_MODULE_NAME);

package/build/core/native-style.d.ts

@@ -0,0 +1,19 @@
+import type { IImageResizeMode } from './types';
+type IStyleBag = Record<string, unknown>;
+export type IImageStyleParts = {
+    resizeMode?: IImageResizeMode;
+    fontWeight?: string | number;
+    fontSize?: number;
+    color?: unknown;
+    /** What is left once the text-like keys are taken out */
+    rest: IStyleBag;
+};
+/** An Expo view has no attribute processor for colors, so they go through here */
+export declare function toNativeColor(value: unknown): unknown;
+/** `resizeMode` and the SF Symbol keys are props to native, not style */
+export declare function splitImageStyle(style: unknown): IImageStyleParts;
+/** Android shadows by `elevation` and paints the background itself, iOS by `shadow*` */
+export declare function platformStyle(style: IStyleBag): IStyleBag;
+/** `backgroundColor` and the border colors in the form native reads */
+export declare function nativeColorProps(style: IStyleBag): IStyleBag;
+export {};

package/build/core/native-style.js

@@ -0,0 +1,65 @@
+import { Platform } from 'expo-modules-core';
+import { flattenStyle, processColor } from '@symbiote-native/engine';
+const SHADOW_KEYS = [
+    'shadowColor',
+    'shadowOffset',
+    'shadowOpacity',
+    'shadowRadius',
+];
+const BORDER_COLOR_KEYS = [
+    'borderColor',
+    'borderStartColor',
+    'borderEndColor',
+    'borderLeftColor',
+    'borderRightColor',
+    'borderTopColor',
+    'borderBottomColor',
+];
+const RESIZE_MODES = new Set([
+    'cover',
+    'contain',
+    'stretch',
+    'repeat',
+    'center',
+]);
+function isResizeMode(value) {
+    return RESIZE_MODES.has(value);
+}
+function isColorValue(value) {
+    return (typeof value === 'string' ||
+        typeof value === 'number' ||
+        (typeof value === 'object' && value !== null));
+}
+/** An Expo view has no attribute processor for colors, so they go through here */
+export function toNativeColor(value) {
+    return isColorValue(value) ? processColor(value) : undefined;
+}
+/** `resizeMode` and the SF Symbol keys are props to native, not style */
+export function splitImageStyle(style) {
+    const { resizeMode, fontWeight, fontSize, color, ...rest } = flattenStyle(style);
+    const isWeight = typeof fontWeight === 'string' || typeof fontWeight === 'number';
+    return {
+        resizeMode: isResizeMode(resizeMode) ? resizeMode : undefined,
+        fontWeight: isWeight ? fontWeight : undefined,
+        fontSize: typeof fontSize === 'number' ? fontSize : undefined,
+        color,
+        rest,
+    };
+}
+function without(bag, keys) {
+    return Object.fromEntries(Object.entries(bag).filter(([key]) => !keys.includes(key)));
+}
+/** Android shadows by `elevation` and paints the background itself, iOS by `shadow*` */
+export function platformStyle(style) {
+    return Platform.select({
+        android: without(style, [...SHADOW_KEYS, 'backgroundColor']),
+        default: without(style, ['elevation']),
+    });
+}
+/** `backgroundColor` and the border colors in the form native reads */
+export function nativeColorProps(style) {
+    return Object.fromEntries(['backgroundColor', ...BORDER_COLOR_KEYS].map(key => [
+        key,
+        toNativeColor(style[key]),
+    ]));
+}

package/build/core/props.d.ts

@@ -0,0 +1,11 @@
+import type { IImageContentFit, IImageContentPosition, IImageContentPositionObject, IImageResizeMode, IImageTransition, IImageViewProps, ISfSymbolEffectObject } from './types';
+export declare function warnOnce(message: string): void;
+export declare function resetDeprecationWarnings(): void;
+/** An SF Symbol defaults to `contain` to keep its aspect ratio */
+export declare function resolveContentFit(contentFit?: IImageContentFit, resizeMode?: IImageResizeMode, isSfSymbol?: boolean): IImageContentFit;
+/** Native reads only the two-edge object form */
+export declare function resolveContentPosition(contentPosition?: IImageContentPosition): IImageContentPositionObject;
+/** Every form of `sfEffect` becomes a list of effect objects */
+export declare function resolveSfEffect(sfEffect: IImageViewProps['sfEffect']): ISfSymbolEffectObject[] | null;
+/** A number is the duration of a cross dissolve */
+export declare function resolveTransition(transition?: IImageViewProps['transition'], fadeDuration?: IImageViewProps['fadeDuration']): IImageTransition | null;

package/build/core/props.js

@@ -0,0 +1,87 @@
+const CENTER = { top: '50%', left: '50%' };
+const POSITION_BY_KEYWORD = {
+    center: CENTER,
+    top: { top: 0, left: '50%' },
+    right: { top: '50%', right: 0 },
+    bottom: { bottom: 0, left: '50%' },
+    left: { top: '50%', left: 0 },
+    'top center': { top: 0, left: '50%' },
+    'top right': { top: 0, right: 0 },
+    'top left': { top: 0, left: 0 },
+    'right center': { top: '50%', right: 0 },
+    'right top': { top: 0, right: 0 },
+    'right bottom': { bottom: 0, right: 0 },
+    'bottom center': { bottom: 0, left: '50%' },
+    'bottom right': { bottom: 0, right: 0 },
+    'bottom left': { bottom: 0, left: 0 },
+    'left center': { top: '50%', left: 0 },
+    'left top': { top: 0, left: 0 },
+    'left bottom': { bottom: 0, left: 0 },
+};
+const warned = new Set();
+export function warnOnce(message) {
+    if (warned.has(message)) {
+        return;
+    }
+    warned.add(message);
+    console.warn(`[expo-image]: ${message}`);
+}
+export function resetDeprecationWarnings() {
+    warned.clear();
+}
+function fitFromResizeMode(resizeMode) {
+    warnOnce('Prop "resizeMode" is deprecated, use "contentFit" instead');
+    switch (resizeMode) {
+        case 'contain':
+        case 'cover':
+            return resizeMode;
+        case 'stretch':
+            return 'fill';
+        case 'center':
+            return 'scale-down';
+        case 'repeat':
+            warnOnce('Resize mode "repeat" is no longer supported');
+            return 'cover';
+    }
+}
+/** An SF Symbol defaults to `contain` to keep its aspect ratio */
+export function resolveContentFit(contentFit, resizeMode, isSfSymbol) {
+    if (contentFit) {
+        return contentFit;
+    }
+    if (resizeMode) {
+        return fitFromResizeMode(resizeMode);
+    }
+    return isSfSymbol ? 'contain' : 'cover';
+}
+/** Native reads only the two-edge object form */
+export function resolveContentPosition(contentPosition) {
+    if (typeof contentPosition !== 'string') {
+        return contentPosition ?? CENTER;
+    }
+    const resolved = POSITION_BY_KEYWORD[contentPosition];
+    if (!resolved) {
+        warnOnce(`Content position "${contentPosition}" is invalid`);
+        return CENTER;
+    }
+    return resolved;
+}
+/** Every form of `sfEffect` becomes a list of effect objects */
+export function resolveSfEffect(sfEffect) {
+    if (sfEffect == null) {
+        return null;
+    }
+    const effects = Array.isArray(sfEffect) ? sfEffect : [sfEffect];
+    return effects.map(item => typeof item === 'string' ? { effect: item } : item);
+}
+/** A number is the duration of a cross dissolve */
+export function resolveTransition(transition, fadeDuration) {
+    if (typeof transition === 'number') {
+        return { duration: transition };
+    }
+    if (!transition && typeof fadeDuration === 'number') {
+        warnOnce('Prop "fadeDuration" is deprecated, use "transition" instead');
+        return { duration: fadeDuration };
+    }
+    return transition ?? null;
+}

package/build/core/sources.d.ts

@@ -0,0 +1,8 @@
+import { SharedRef } from 'expo-modules-core';
+import type { IImageSource, IImageSources } from './types';
+type IImageSourceInput = IImageSource | string | number | null | undefined;
+export declare function isImageRef(value: unknown): value is SharedRef<'image'>;
+export declare function resolveSource(source: IImageSourceInput): IImageSource | null;
+/** The shape the native view takes: a list of sources or a shared object id */
+export declare function resolveSources(sources: IImageSources | undefined): IImageSource[] | number;
+export {};

package/build/core/sources.js

@@ -0,0 +1,61 @@
+import { resolveAssetSource } from '@symbiote-native/engine';
+import { SharedRef } from 'expo-modules-core';
+import { SF_SYMBOL_PREFIX } from './constants.js';
+import { resolveBlurhashString, resolveThumbhashString } from './hash-strings.js';
+const BLURHASH_PATTERN = /^(blurhash:\/)+[\w#$%*+,\-.:;=?@[\]^_{}|~]+(\/[\d.]+)*$/;
+const THUMBHASH_PREFIX = 'thumbhash:/';
+// Any native image reference, an `ImageRef` or a `VideoThumbnail`, the view takes both
+export function isImageRef(value) {
+    return value instanceof SharedRef && value.nativeRefType === 'image';
+}
+function sharedIdOf(ref) {
+    const id = Reflect.get(ref, '__expo_shared_object_id__');
+    return typeof id === 'number' ? id : 0;
+}
+function isImageSource(value) {
+    return typeof value === 'object' && value !== null;
+}
+function nativeAssetSource(id) {
+    const asset = resolveAssetSource(id);
+    return isImageSource(asset) ? asset : null;
+}
+export function resolveSource(source) {
+    if (typeof source === 'string') {
+        if (BLURHASH_PATTERN.test(source)) {
+            return resolveBlurhashString(source);
+        }
+        if (source.startsWith(THUMBHASH_PREFIX)) {
+            return resolveThumbhashString(source);
+        }
+        if (source.startsWith(SF_SYMBOL_PREFIX)) {
+            return {
+                uri: `${SF_SYMBOL_PREFIX}/${source.slice(SF_SYMBOL_PREFIX.length)}`,
+            };
+        }
+        return { uri: source };
+    }
+    if (typeof source === 'number') {
+        return nativeAssetSource(source);
+    }
+    if (source?.blurhash || source?.thumbhash) {
+        const { blurhash, thumbhash, ...rest } = source;
+        const resolved = thumbhash
+            ? resolveThumbhashString(thumbhash)
+            : resolveBlurhashString(blurhash ?? '');
+        return { ...resolved, ...rest };
+    }
+    return source ?? null;
+}
+function isPresent(source) {
+    return source !== null;
+}
+/** The shape the native view takes: a list of sources or a shared object id */
+export function resolveSources(sources) {
+    if (Array.isArray(sources)) {
+        return sources.map(resolveSource).filter(isPresent);
+    }
+    if (isImageRef(sources)) {
+        return sharedIdOf(sources);
+    }
+    return [resolveSource(sources)].filter(isPresent);
+}