@symbiote-native/image 0.0.0-stage → 0.0.0

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
+        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 {};

package/build-ngc/angular/image/index.js

@@ -0,0 +1,72 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { DescriptorOutlet, NativeViewBase } from '@symbiote-native/angular';
+import { createImageView } from '../../core';
+import * as i0 from "@angular/core";
+// One list is the inputs of the component and the props it hands to the native view
+const IMAGE_INPUTS = [
+    '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',
+];
+/** Angular twin of `expo-image`'s `Image`, `Image` itself is a primitive tag of the adapter */
+export class ExpoImage extends NativeViewBase {
+    view = createImageView(() => this.hostNode());
+    // The functions of the view are members of the component, a `@ViewChild` reaches them
+    startAnimating = this.view.handle.startAnimating;
+    stopAnimating = this.view.handle.stopAnimating;
+    lockResourceAsync = this.view.handle.lockResourceAsync;
+    unlockResourceAsync = this.view.handle.unlockResourceAsync;
+    reloadAsync = this.view.handle.reloadAsync;
+    propNames = IMAGE_INPUTS;
+    renderView(props) {
+        return this.view.render(props);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExpoImage, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ExpoImage, isStandalone: true, selector: "ExpoImage", inputs: { source: "source", placeholder: "placeholder", contentFit: "contentFit", placeholderContentFit: "placeholderContentFit", contentPosition: "contentPosition", transition: "transition", blurRadius: "blurRadius", tintColor: "tintColor", priority: "priority", loading: "loading", cachePolicy: "cachePolicy", responsivePolicy: "responsivePolicy", recyclingKey: "recyclingKey", autoplay: "autoplay", sfEffect: "sfEffect", onLoadStart: "onLoadStart", onLoad: "onLoad", onProgress: "onProgress", onError: "onError", onLoadEnd: "onLoadEnd", onDisplay: "onDisplay", defaultSource: "defaultSource", loadingIndicatorSource: "loadingIndicatorSource", resizeMode: "resizeMode", fadeDuration: "fadeDuration", alt: "alt", enableLiveTextInteraction: "enableLiveTextInteraction", allowDownscaling: "allowDownscaling", decodeFormat: "decodeFormat", useAppleWebpCodec: "useAppleWebpCodec", enforceEarlyResizing: "enforceEarlyResizing", preferHighDynamicRange: "preferHighDynamicRange", draggable: "draggable" }, usesInheritance: true, ngImport: i0, template: `@if (descriptor; as node) {
+    <symbiote-descriptor-outlet [node]="node" />
+  }`, isInline: true, dependencies: [{ kind: "component", type: DescriptorOutlet, selector: "symbiote-descriptor-outlet", inputs: ["node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExpoImage, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ExpoImage',
+                    standalone: true,
+                    imports: [DescriptorOutlet],
+                    inputs: [...IMAGE_INPUTS],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `@if (descriptor; as node) {
+    <symbiote-descriptor-outlet [node]="node" />
+  }`,
+                }]
+        }] });
+//# sourceMappingURL=index.js.map

package/build-ngc/angular/image/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/angular/image/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAG5E,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;;AAG7C,oFAAoF;AACpF,MAAM,YAAY,GAAG;IACnB,QAAQ;IACR,aAAa;IACb,YAAY;IACZ,uBAAuB;IACvB,iBAAiB;IACjB,YAAY;IACZ,YAAY;IACZ,WAAW;IACX,UAAU;IACV,SAAS;IACT,aAAa;IACb,kBAAkB;IAClB,cAAc;IACd,UAAU;IACV,UAAU;IACV,aAAa;IACb,QAAQ;IACR,YAAY;IACZ,SAAS;IACT,WAAW;IACX,WAAW;IACX,eAAe;IACf,wBAAwB;IACxB,YAAY;IACZ,cAAc;IACd,KAAK;IACL,2BAA2B;IAC3B,kBAAkB;IAClB,cAAc;IACd,mBAAmB;IACnB,sBAAsB;IACtB,wBAAwB;IACxB,WAAW;CACH,CAAC;AAMX,+FAA+F;AAW/F,MAAM,OAAO,SAAU,SAAQ,cAAc;IAI1B,IAAI,GAAG,eAAe,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;IAE/D,sFAAsF;IAC7E,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC;IACjD,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC;IAC/C,iBAAiB,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC;IACvD,mBAAmB,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC;IAC3D,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC;IAExB,SAAS,GAAG,YAAY,CAAC;IAElC,UAAU,CAAC,KAAa;QACzC,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC;uGAjBU,SAAS;2FAAT,SAAS,okCAJV;;IAER,4DALQ,gBAAgB;;2FAOf,SAAS;kBAVrB,SAAS;mBAAC;oBACT,QAAQ,EAAE,WAAW;oBACrB,UAAU,EAAE,IAAI;oBAChB,OAAO,EAAE,CAAC,gBAAgB,CAAC;oBAC3B,MAAM,EAAE,CAAC,GAAG,YAAY,CAAC;oBACzB,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,QAAQ,EAAE;;IAER;iBACH"}

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

@@ -0,0 +1,17 @@
+import { NativeViewBase } from '@symbiote-native/angular';
+import type { IDescriptor } from '@symbiote-native/components';
+import type { IStyleProp } from '@symbiote-native/engine';
+import type { IImageBackgroundProps, IImageStyle } from '../../core';
+import * as i0 from "@angular/core";
+declare const IMAGE_BACKGROUND_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", "imageStyle"];
+export interface ExpoImageBackground extends Partial<Pick<IImageBackgroundProps, (typeof IMAGE_BACKGROUND_INPUTS)[number]>> {
+}
+/** Angular twin of `expo-image`'s `ImageBackground`, the content paints over the image */
+export declare class ExpoImageBackground extends NativeViewBase {
+    style?: IStyleProp<IImageStyle>;
+    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", "imageStyle"];
+    protected renderView(props: object): IDescriptor;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ExpoImageBackground, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ExpoImageBackground, "ExpoImageBackground", 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; }; "imageStyle": { "alias": "imageStyle"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+export {};

package/build-ngc/angular/image-background/index.js

@@ -0,0 +1,66 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { DescriptorHost, NativeViewBase } from '@symbiote-native/angular';
+import { renderImageBackground } from '../../core';
+import * as i0 from "@angular/core";
+// One list is the inputs of the component and the props it hands to the image
+const IMAGE_BACKGROUND_INPUTS = [
+    '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',
+    'imageStyle',
+];
+/** Angular twin of `expo-image`'s `ImageBackground`, the content paints over the image */
+export class ExpoImageBackground extends NativeViewBase {
+    propNames = IMAGE_BACKGROUND_INPUTS;
+    renderView(props) {
+        return renderImageBackground(props);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExpoImageBackground, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ExpoImageBackground, isStandalone: true, selector: "ExpoImageBackground", inputs: { source: "source", placeholder: "placeholder", contentFit: "contentFit", placeholderContentFit: "placeholderContentFit", contentPosition: "contentPosition", transition: "transition", blurRadius: "blurRadius", tintColor: "tintColor", priority: "priority", loading: "loading", cachePolicy: "cachePolicy", responsivePolicy: "responsivePolicy", recyclingKey: "recyclingKey", autoplay: "autoplay", sfEffect: "sfEffect", onLoadStart: "onLoadStart", onLoad: "onLoad", onProgress: "onProgress", onError: "onError", onLoadEnd: "onLoadEnd", onDisplay: "onDisplay", defaultSource: "defaultSource", loadingIndicatorSource: "loadingIndicatorSource", resizeMode: "resizeMode", fadeDuration: "fadeDuration", alt: "alt", enableLiveTextInteraction: "enableLiveTextInteraction", allowDownscaling: "allowDownscaling", decodeFormat: "decodeFormat", useAppleWebpCodec: "useAppleWebpCodec", enforceEarlyResizing: "enforceEarlyResizing", preferHighDynamicRange: "preferHighDynamicRange", draggable: "draggable", imageStyle: "imageStyle" }, usesInheritance: true, ngImport: i0, template: `@if (descriptor; as node) {
+    <symbiote-descriptor-host [node]="node"><ng-content /></symbiote-descriptor-host>
+  }`, isInline: true, dependencies: [{ kind: "component", type: DescriptorHost, selector: "symbiote-descriptor-host", inputs: ["node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExpoImageBackground, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ExpoImageBackground',
+                    standalone: true,
+                    imports: [DescriptorHost],
+                    inputs: [...IMAGE_BACKGROUND_INPUTS],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `@if (descriptor; as node) {
+    <symbiote-descriptor-host [node]="node"><ng-content /></symbiote-descriptor-host>
+  }`,
+                }]
+        }] });
+//# sourceMappingURL=index.js.map

package/build-ngc/angular/image-background/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/angular/image-background/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE1E,OAAO,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;;AAInD,8EAA8E;AAC9E,MAAM,uBAAuB,GAAG;IAC9B,QAAQ;IACR,aAAa;IACb,YAAY;IACZ,uBAAuB;IACvB,iBAAiB;IACjB,YAAY;IACZ,YAAY;IACZ,WAAW;IACX,UAAU;IACV,SAAS;IACT,aAAa;IACb,kBAAkB;IAClB,cAAc;IACd,UAAU;IACV,UAAU;IACV,aAAa;IACb,QAAQ;IACR,YAAY;IACZ,SAAS;IACT,WAAW;IACX,WAAW;IACX,eAAe;IACf,wBAAwB;IACxB,YAAY;IACZ,cAAc;IACd,KAAK;IACL,2BAA2B;IAC3B,kBAAkB;IAClB,cAAc;IACd,mBAAmB;IACnB,sBAAsB;IACtB,wBAAwB;IACxB,WAAW;IACX,YAAY;CACJ,CAAC;AAKX,0FAA0F;AAW1F,MAAM,OAAO,mBAAoB,SAAQ,cAAc;IAIzB,SAAS,GAAG,uBAAuB,CAAC;IAE7C,UAAU,CAAC,KAAa;QACzC,OAAO,qBAAqB,CAAC,KAAK,CAAC,CAAC;IACtC,CAAC;uGARU,mBAAmB;2FAAnB,mBAAmB,wmCAJpB;;IAER,4DALQ,cAAc;;2FAOb,mBAAmB;kBAV/B,SAAS;mBAAC;oBACT,QAAQ,EAAE,qBAAqB;oBAC/B,UAAU,EAAE,IAAI;oBAChB,OAAO,EAAE,CAAC,cAAc,CAAC;oBACzB,MAAM,EAAE,CAAC,GAAG,uBAAuB,CAAC;oBACpC,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,QAAQ,EAAE;;IAER;iBACH"}

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

@@ -0,0 +1,4 @@
+export { ExpoImage } from './image';
+export { ExpoImageBackground } from './image-background';
+export { injectImage } from './inject-image';
+export * from '../core';

package/build-ngc/angular/index.js

@@ -0,0 +1,7 @@
+// @symbiote-native/image/angular: the image view, its cache and hash functions on a shared core
+// The selectors are `ExpoImage*`, `Image` and `ImageBackground` are tags of the adapter
+export { ExpoImage } from './image';
+export { ExpoImageBackground } from './image-background';
+export { injectImage } from './inject-image';
+export * from '../core';
+//# sourceMappingURL=index.js.map

package/build-ngc/angular/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/angular/index.ts"],"names":[],"mappings":"AAAA,gGAAgG;AAChG,wFAAwF;AAExF,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,cAAc,SAAS,CAAC"}

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

@@ -0,0 +1,8 @@
+import type { Signal } from '@angular/core';
+import type { IImageLoadOptions, IImageSource, ImageRef } from '../core';
+/**
+ * Angular twin of `useImage`, `null` until the first image has loaded
+ *
+ * It loads again when the uri of the source or a signal read by `dependencies` changes
+ */
+export declare function injectImage(source: () => IImageSource | string | number, options?: () => IImageLoadOptions, dependencies?: () => unknown[]): Signal<ImageRef | null>;

package/build-ngc/angular/inject-image.js

@@ -0,0 +1,23 @@
+import { computed, effect, signal, untracked } from '@angular/core';
+import { createImageRefLoader, resolveSource } from '../core';
+/**
+ * Angular twin of `useImage`, `null` until the first image has loaded
+ *
+ * It loads again when the uri of the source or a signal read by `dependencies` changes
+ */
+export function injectImage(source, options = () => ({}), dependencies = () => []) {
+    const image = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "image" }] : /* istanbul ignore next */ []));
+    const key = computed(() => resolveSource(source())?.uri, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    effect(onCleanup => {
+        // Read so the effect tracks them, the source itself is not a trigger
+        key();
+        dependencies();
+        const loader = createImageRefLoader(loaded => image.set(loaded), options);
+        untracked(() => loader.load(source()));
+        onCleanup(loader.cancel);
+    });
+    return image.asReadonly();
+}
+//# sourceMappingURL=inject-image.js.map

package/build-ngc/angular/inject-image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inject-image.js","sourceRoot":"","sources":["../../src/angular/inject-image.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAEpE,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG9D;;;;GAIG;AACH,MAAM,UAAU,WAAW,CACzB,MAA4C,EAC5C,UAAmC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAC7C,eAAgC,GAAG,EAAE,CAAC,EAAE;IAExC,MAAM,KAAK,GAAG,MAAM,CAAkB,IAAI;8EAAC,CAAC;IAC5C,MAAM,GAAG,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,GAAG;4EAAC,CAAC;IAEzD,MAAM,CAAC,SAAS,CAAC,EAAE;QACjB,qEAAqE;QACrE,GAAG,EAAE,CAAC;QACN,YAAY,EAAE,CAAC;QACf,MAAM,MAAM,GAAG,oBAAoB,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC;QAC1E,SAAS,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;QACvC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IAC3B,CAAC,CAAC,CAAC;IAEH,OAAO,KAAK,CAAC,UAAU,EAAE,CAAC;AAC5B,CAAC"}

package/build-ngc/core/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const IMAGE_MODULE_NAME = "ExpoImage";
+/** `sf:name` in a source string, the native side reads `sf:/name` */
+export declare const SF_SYMBOL_PREFIX = "sf:";

package/build-ngc/core/constants.js

@@ -0,0 +1,5 @@
+// Apart from `native-module`, which resolves the module on import: the view needs the name too
+export const IMAGE_MODULE_NAME = 'ExpoImage';
+/** `sf:name` in a source string, the native side reads `sf:/name` */
+export const SF_SYMBOL_PREFIX = 'sf:';
+//# sourceMappingURL=constants.js.map