@symbiote-native/image 0.0.0-stage → 0.0.0

package/build-ngc/core/props.js

@@ -0,0 +1,88 @@
+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;
+}
+//# sourceMappingURL=props.js.map

package/build-ngc/core/props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"props.js","sourceRoot":"","sources":["../../src/core/props.ts"],"names":[],"mappings":"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"}

package/build-ngc/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-ngc/core/sources.js

@@ -0,0 +1,60 @@
+import { resolveAssetSource } from '@symbiote-native/engine';
+import { SharedRef } from 'expo-modules-core';
+import { SF_SYMBOL_PREFIX } from './constants';
+import { resolveBlurhashString, resolveThumbhashString } from './hash-strings';
+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);
+}
+//# sourceMappingURL=sources.js.map

package/build-ngc/core/sources.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sources.js","sourceRoot":"","sources":["../../src/core/sources.ts"],"names":[],"mappings":"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"}

package/build-ngc/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-ngc/core/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/build-ngc/core/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/core/types.ts"],"names":[],"mappings":""}

package/native-link.json

@@ -0,0 +1,13 @@
+{
+  "android": {
+    "gradleProjectName": "expo-image",
+    "requiresKsp": true,
+    "modules": [
+      {
+        "importPath": "expo.modules.image.ExpoImageModule",
+        "className": "ExpoImageModule",
+        "nativeName": "ExpoImage"
+      }
+    ]
+  }
+}

package/package.json

@@ -1,6 +1,148 @@
 {
   "name": "@symbiote-native/image",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.0.0",
+  "description": "expo-image wrapped for SymbioteNative — one framework-agnostic core, built once and reachable from the React, Vue, Svelte, Solid, and Angular adapters. The image view with caching, placeholders and SF Symbols, plus the image cache and hash functions.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/OneEyed1366/symbiote-native.git",
+    "directory": "packages/image"
+  },
+  "homepage": "https://github.com/OneEyed1366/symbiote-native/tree/master/packages/image#readme",
+  "bugs": {
+    "url": "https://github.com/OneEyed1366/symbiote-native/issues"
+  },
+  "author": "Andrey Prokopenko <psevdoproger@gmail.com>",
+  "keywords": [
+    "react-native",
+    "symbiote-native",
+    "expo-image",
+    "react",
+    "vue",
+    "svelte",
+    "solid",
+    "angular",
+    "image"
+  ],
+  "type": "module",
+  "main": "./build/core/index.js",
+  "module": "./build/core/index.js",
+  "types": "./build/core/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./build/core/index.d.ts",
+      "default": "./build/core/index.js"
+    },
+    "./vue": {
+      "types": "./build/vue/index.d.ts",
+      "default": "./build/vue/index.js"
+    },
+    "./react": {
+      "types": "./build/react/index.d.ts",
+      "default": "./build/react/index.js"
+    },
+    "./svelte": "./src/svelte/index.ts",
+    "./solid": {
+      "types": "./build/solid/index.d.ts",
+      "default": "./build/solid/index.js"
+    },
+    "./angular": {
+      "types": "./build-ngc/angular/index.d.ts",
+      "react-native": "./build-ngc/angular/index.js",
+      "default": "./src/angular/index.ts"
+    }
+  },
+  "files": [
+    "src",
+    "build",
+    "build-ngc",
+    "native-link.json",
+    "!src/**/*.test.*",
+    "!src/**/*.spec.*",
+    "!src/**/*.detox.*"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "expo-image": "57.0.5",
+    "expo-modules-core": "57.0.20",
+    "sf-symbols-typescript": "^2.0.0",
+    "@symbiote-native/components": "3.1.4"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=20",
+    "@vue/runtime-core": "^3.5.13",
+    "react": ">=19.0.0",
+    "react-native": ">=0.86",
+    "solid-js": ">=1.9.0",
+    "svelte": ">=5.56.0",
+    "vue": ">=3.5.0",
+    "@symbiote-native/angular": "^3.2.0",
+    "@symbiote-native/engine": "^1.5.0",
+    "@symbiote-native/solid": "^3.1.0",
+    "@symbiote-native/react": "^3.2.0",
+    "@symbiote-native/svelte": "^3.1.0",
+    "@symbiote-native/vue": "^3.2.0"
+  },
+  "peerDependenciesMeta": {
+    "@symbiote-native/angular": {
+      "optional": true
+    },
+    "@symbiote-native/react": {
+      "optional": true
+    },
+    "@symbiote-native/solid": {
+      "optional": true
+    },
+    "@symbiote-native/svelte": {
+      "optional": true
+    },
+    "@symbiote-native/vue": {
+      "optional": true
+    },
+    "@angular/core": {
+      "optional": true
+    },
+    "@vue/runtime-core": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "solid-js": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@angular/compiler": "~22.0.8",
+    "@angular/compiler-cli": "~22.0.8",
+    "@angular/core": "~22.0.8",
+    "@types/node": "^26.0.0",
+    "@types/react": "^19.2.0",
+    "@vue/runtime-core": "^3.5.13",
+    "react": "19.2.3",
+    "solid-js": "^1.9.14",
+    "svelte": "^5.56.0",
+    "typescript": "~6.0.0",
+    "@symbiote-native/angular": "3.2.0",
+    "@symbiote-native/solid": "3.1.0",
+    "@symbiote-native/engine": "1.5.0",
+    "@symbiote-native/vue": "3.2.0",
+    "@symbiote-native/test-utils": "0.4.6",
+    "@symbiote-native/svelte": "3.1.0",
+    "@symbiote-native/react": "3.2.0"
+  },
+  "scripts": {
+    "typecheck": "tsc --build",
+    "clean": "rm -rf build-ngc",
+    "ng:build": "pnpm run clean && ngc -p tsconfig.angular.json",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\""
+  }
 }

package/src/angular/image/index.ts

@@ -0,0 +1,78 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { DescriptorOutlet, NativeViewBase } from '@symbiote-native/angular';
+import type { IDescriptor } from '@symbiote-native/components';
+import type { IStyleProp } from '@symbiote-native/engine';
+import { createImageView } from '../../core';
+import type { IImageStyle, IImageViewProps } from '../../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',
+] as const;
+
+// Types the inputs for the template, the decorators that would do it are replaced by `inputs`
+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 */
+@Component({
+  selector: 'ExpoImage',
+  standalone: true,
+  imports: [DescriptorOutlet],
+  inputs: [...IMAGE_INPUTS],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `@if (descriptor; as node) {
+    <symbiote-descriptor-outlet [node]="node" />
+  }`,
+})
+export class ExpoImage extends NativeViewBase {
+  // The `style` input of the base, typed with the image keys such as `tintColor`
+  declare style?: IStyleProp<IImageStyle>;
+
+  private readonly view = createImageView(() => this.hostNode());
+
+  // The functions of the view are members of the component, a `@ViewChild` reaches them
+  readonly startAnimating = this.view.handle.startAnimating;
+  readonly stopAnimating = this.view.handle.stopAnimating;
+  readonly lockResourceAsync = this.view.handle.lockResourceAsync;
+  readonly unlockResourceAsync = this.view.handle.unlockResourceAsync;
+  readonly reloadAsync = this.view.handle.reloadAsync;
+
+  protected override readonly propNames = IMAGE_INPUTS;
+
+  protected override renderView(props: object): IDescriptor | null {
+    return this.view.render(props);
+  }
+}