@ng-native/expo 0.0.1 → 0.1.0

package/dist/dom-component.js

@@ -0,0 +1,139 @@
+/**
+ * `<dom-component>`: an Angular component rendered by a browser - DOM, CSS, anything a browser
+ * runs - in a web view inside a native screen, with its inputs and outputs bound from the app's
+ * template. Expo calls this a DOM component; it is not the Web Components standard.
+ *
+ * ```ts
+ * // web/note.ts: an ordinary Angular component for the browser, in the app's own source
+ * 'use dom';
+ * @Component({ selector: 'app-note', template: '<textarea ...></textarea>', styles: [...] })
+ * export class Note {
+ *   readonly label = input('');
+ *   readonly sent = output<string>();
+ * }
+ * export default mountInWebView(Note); // from '@ng-native/web/web-view'
+ *
+ * // a native screen
+ * import note from './web/note.ts';
+ * <dom-component [src]="note" class="flex-1"
+ *   [inputs]="{ label: title() }" [outputs]="{ sent: save }" />
+ * ```
+ *
+ * The component runs in Expo's own web view (`@expo/dom-webview`, which `expo` already installs),
+ * so it is a separate JavaScript runtime from the app and only JSON crosses. It is shipped the way
+ * Expo ships its `'use dom'` components: the import is a reference to a page that Expo's dev server
+ * serves in development and `expo export:embed` bundles into the app for a release build (see
+ * `@ng-native/metro`'s `dom-component.cjs`), and the page is found where Expo finds its own.
+ *
+ * - **`inputs`** go into the page before it loads, and a changed value is sent to it afterwards
+ *   without reloading. Anything sent before the page is ready is sent again once it is.
+ * - **`outputs`** map the component's outputs, by public name, to handlers. A name the component
+ *   has no output for is an error naming the ones it does have, as `<ng-native-island>`'s is.
+ * - **Errors** the page throws reach the app's `ErrorHandler`.
+ */
+import { Component, ElementRef, InjectionToken, computed, effect, inject, input, untracked, } from '@angular/core';
+import { Engine } from '@ng-native/fabric';
+import { optional } from "./native.js";
+import { registerExpoView } from "./register-expo-view.js";
+import * as i0 from "@angular/core";
+/** The element is this package's, so it needs no `registerExpoViews` call of its own. */
+registerExpoView('dom-component', 'ExpoDomWebViewModule');
+export class DomComponent {
+    /** Overridden in a test to load pages without a dev server. */
+    static SOURCE = new InjectionToken('angular-native.domComponentSource', {
+        factory: () => {
+            // Expo's own resolution, so a page is found wherever Expo would look for a DOM
+            // component's: the dev server, the app's `www.bundle`, or a downloaded update.
+            const base = optional(() => require('expo/src/dom/base'));
+            const core = optional(() => require('expo-modules-core'));
+            const module = core?.requireOptionalNativeModule('ExpoDomWebViewModule');
+            return {
+                baseUrl: optional(() => base?.getBaseURL() ?? null),
+                functions: module?.ViewPrototypes?.['ExpoDomWebViewModule'] ?? null,
+            };
+        },
+    });
+    native = inject(DomComponent.SOURCE);
+    engine = inject(Engine);
+    node = inject(ElementRef).nativeElement;
+    ready = false;
+    /** The DOM component, as imported: `import note from './web/note.ts'`. */
+    src = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    /** Its inputs, by public name. JSON only: this crosses into another runtime. */
+    inputs = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputs" }] : /* istanbul ignore next */ []));
+    /** Handlers for its outputs, by public name. */
+    outputs = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "outputs" }] : /* istanbul ignore next */ []));
+    debuggable = typeof __DEV__ === 'undefined' || __DEV__;
+    source = computed(() => {
+        const { domComponent } = this.src();
+        return this.native.baseUrl === null ? null : { uri: `${this.native.baseUrl}/${domComponent}` };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "source" }] : /* istanbul ignore next */ []));
+    /** The file's name for an error message: the dev page names it, a release page is a hash. */
+    name = computed(() => this.src().domComponent.split('?')[0], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /**
+     * What the page reads before it loads. The inputs are read untracked: a change to this prop
+     * reloads the page, so a changed input is sent to the running page instead.
+     */
+    page = computed(() => {
+        this.src();
+        return JSON.stringify({ inputs: untracked(this.inputs) });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const inputs = this.inputs();
+            if (this.ready)
+                untracked(() => this.send(inputs));
+        });
+    }
+    receive(event) {
+        const message = JSON.parse(event.nativeEvent.data);
+        if (message.type === 'ready') {
+            this.checkOutputs(message.outputs);
+            this.ready = true;
+            this.send(this.inputs());
+        }
+        else if (message.type === 'output') {
+            this.outputs()[message.name]?.(message.value);
+        }
+        else if (message.type === 'error') {
+            throw new Error(`[angular-native] <dom-component> ${this.name()}: ${message.message}`);
+        }
+    }
+    checkOutputs(declared) {
+        for (const name of Object.keys(this.outputs())) {
+            if (!declared.includes(name)) {
+                throw new Error(`[angular-native] <dom-component>: ${this.name()} has no output '${name}' ` +
+                    `(its outputs: ${declared.join(', ') || 'none'}).`);
+            }
+        }
+    }
+    send(inputs) {
+        const nativeTag = this.engine.tagOf(this.node);
+        if (!this.native.functions || nativeTag === null)
+            return;
+        const message = JSON.stringify({ type: 'inputs', inputs });
+        void this.native.functions.injectJavaScript.call({ nativeTag }, `window.__ngNative && window.__ngNative.receive(${message}); true;`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: DomComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: DomComponent, isStandalone: true, selector: "dom-component", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null }, inputs: { classPropertyName: "inputs", publicName: "inputs", isSignal: true, isRequired: false, transformFunction: null }, outputs: { classPropertyName: "outputs", publicName: "outputs", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "message": "receive($event)" }, properties: { "source": "source()", "injectedJavaScriptObject": "page()", "webviewDebuggingEnabled": "debuggable" } }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: DomComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dom-component',
+                    template: '',
+                    host: {
+                        '[source]': 'source()',
+                        '[injectedJavaScriptObject]': 'page()',
+                        '[webviewDebuggingEnabled]': 'debuggable',
+                        '(message)': 'receive($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: true }] }], inputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputs", required: false }] }], outputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "outputs", required: false }] }] } });
+//# sourceMappingURL=dom-component.js.map

package/dist/dom-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom-component.js","sourceRoot":"","sources":["../src/dom-component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * `<dom-component>`: an Angular component rendered by a browser - DOM, CSS, anything a browser\n * runs - in a web view inside a native screen, with its inputs and outputs bound from the app's\n * template. Expo calls this a DOM component; it is not the Web Components standard.\n *\n * ```ts\n * // web/note.ts: an ordinary Angular component for the browser, in the app's own source\n * 'use dom';\n * @Component({ selector: 'app-note', template: '<textarea ...></textarea>', styles: [...] })\n * export class Note {\n *   readonly label = input('');\n *   readonly sent = output<string>();\n * }\n * export default mountInWebView(Note); // from '@ng-native/web/web-view'\n *\n * // a native screen\n * import note from './web/note.ts';\n * <dom-component [src]=\"note\" class=\"flex-1\"\n *   [inputs]=\"{ label: title() }\" [outputs]=\"{ sent: save }\" />\n * ```\n *\n * The component runs in Expo's own web view (`@expo/dom-webview`, which `expo` already installs),\n * so it is a separate JavaScript runtime from the app and only JSON crosses. It is shipped the way\n * Expo ships its `'use dom'` components: the import is a reference to a page that Expo's dev server\n * serves in development and `expo export:embed` bundles into the app for a release build (see\n * `@ng-native/metro`'s `dom-component.cjs`), and the page is found where Expo finds its own.\n *\n * - **`inputs`** go into the page before it loads, and a changed value is sent to it afterwards\n *   without reloading. Anything sent before the page is ready is sent again once it is.\n * - **`outputs`** map the component's outputs, by public name, to handlers. A name the component\n *   has no output for is an error naming the ones it does have, as `<ng-native-island>`'s is.\n * - **Errors** the page throws reach the app's `ErrorHandler`.\n */\nimport {\n  Component,\n  ElementRef,\n  InjectionToken,\n  computed,\n  effect,\n  inject,\n  input,\n  untracked,\n} from '@angular/core';\nimport { Engine, type EngineNode, type NativeSyntheticEvent } from '@ng-native/fabric';\nimport { optional } from './native.ts';\nimport { registerExpoView } from './register-expo-view.ts';\n\n/** The element is this package's, so it needs no `registerExpoViews` call of its own. */\nregisterExpoView('dom-component', 'ExpoDomWebViewModule');\n\n/** A handler for one of the DOM component's outputs. */\nexport type DomComponentOutputHandler = (value: never) => void;\n\n/** The functions Expo's web view defines on its view, called with the view's tag as `this`. */\nexport interface WebViewFunctions {\n  injectJavaScript(this: { nativeTag: number }, script: string): Promise<void>;\n}\n\n/** Where the pages are, and how to reach the view once it is on screen. */\nexport interface DomComponentSource {\n  /** Where Expo keeps DOM components' pages: the dev server, `www.bundle`, or an update. */\n  readonly baseUrl: string | null;\n  readonly functions: WebViewFunctions | null;\n}\n\n/** What native code gets for `import note from './web/note.ts'`. */\nexport interface DomComponentReference {\n  readonly domComponent: string;\n}\n\ntype PageMessage =\n  | { type: 'ready'; outputs: string[] }\n  | { type: 'output'; name: string; value: unknown }\n  | { type: 'error'; message: string };\n\n@Component({\n  selector: 'dom-component',\n  template: '',\n  host: {\n    '[source]': 'source()',\n    '[injectedJavaScriptObject]': 'page()',\n    '[webviewDebuggingEnabled]': 'debuggable',\n    '(message)': 'receive($event)',\n  },\n})\nexport class DomComponent {\n  /** Overridden in a test to load pages without a dev server. */\n  static readonly SOURCE = new InjectionToken<DomComponentSource>(\n    'angular-native.domComponentSource',\n    {\n      factory: () => {\n        // Expo's own resolution, so a page is found wherever Expo would look for a DOM\n        // component's: the dev server, the app's `www.bundle`, or a downloaded update.\n        const base = optional(() => require('expo/src/dom/base') as { getBaseURL(): string });\n        const core = optional(\n          () => require('expo-modules-core') as typeof import('expo-modules-core'),\n        );\n        const module = core?.requireOptionalNativeModule<{\n          ViewPrototypes?: Record<string, WebViewFunctions>;\n        }>('ExpoDomWebViewModule');\n        return {\n          baseUrl: optional(() => base?.getBaseURL() ?? null),\n          functions: module?.ViewPrototypes?.['ExpoDomWebViewModule'] ?? null,\n        };\n      },\n    },\n  );\n\n  private readonly native = inject(DomComponent.SOURCE);\n  private readonly engine = inject(Engine);\n  private readonly node = inject<ElementRef<EngineNode>>(ElementRef).nativeElement;\n  private ready = false;\n\n  /** The DOM component, as imported: `import note from './web/note.ts'`. */\n  readonly src = input.required<DomComponentReference>();\n  /** Its inputs, by public name. JSON only: this crosses into another runtime. */\n  readonly inputs = input<Readonly<Record<string, unknown>>>({});\n  /** Handlers for its outputs, by public name. */\n  readonly outputs = input<Readonly<Record<string, DomComponentOutputHandler>>>({});\n\n  protected readonly debuggable = typeof __DEV__ === 'undefined' || __DEV__;\n\n  protected readonly source = computed(() => {\n    const { domComponent } = this.src();\n    return this.native.baseUrl === null ? null : { uri: `${this.native.baseUrl}/${domComponent}` };\n  });\n\n  /** The file's name for an error message: the dev page names it, a release page is a hash. */\n  private readonly name = computed(() => this.src().domComponent.split('?')[0]!);\n\n  /**\n   * What the page reads before it loads. The inputs are read untracked: a change to this prop\n   * reloads the page, so a changed input is sent to the running page instead.\n   */\n  protected readonly page = computed(() => {\n    this.src();\n    return JSON.stringify({ inputs: untracked(this.inputs) });\n  });\n\n  constructor() {\n    effect(() => {\n      const inputs = this.inputs();\n      if (this.ready) untracked(() => this.send(inputs));\n    });\n  }\n\n  protected receive(event: NativeSyntheticEvent<{ data: string }>): void {\n    const message = JSON.parse(event.nativeEvent.data) as PageMessage;\n    if (message.type === 'ready') {\n      this.checkOutputs(message.outputs);\n      this.ready = true;\n      this.send(this.inputs());\n    } else if (message.type === 'output') {\n      this.outputs()[message.name]?.(message.value as never);\n    } else if (message.type === 'error') {\n      throw new Error(`[angular-native] <dom-component> ${this.name()}: ${message.message}`);\n    }\n  }\n\n  private checkOutputs(declared: readonly string[]): void {\n    for (const name of Object.keys(this.outputs())) {\n      if (!declared.includes(name)) {\n        throw new Error(\n          `[angular-native] <dom-component>: ${this.name()} has no output '${name}' ` +\n            `(its outputs: ${declared.join(', ') || 'none'}).`,\n        );\n      }\n    }\n  }\n\n  private send(inputs: Readonly<Record<string, unknown>>): void {\n    const nativeTag = this.engine.tagOf(this.node);\n    if (!this.native.functions || nativeTag === null) return;\n    const message = JSON.stringify({ type: 'inputs', inputs });\n    void this.native.functions.injectJavaScript.call(\n      { nativeTag },\n      `window.__ngNative && window.__ngNative.receive(${message}); true;`,\n    );\n  }\n}\n\ndeclare const __DEV__: boolean | undefined;\n"]}

package/dist/expo-image.d.ts

@@ -0,0 +1,33 @@
+import type { NativeSyntheticEvent } from '@ng-native/fabric';
+import * as i0 from "@angular/core";
+/** One image `source` entry, as `expo-image` passes them to its view. */
+export interface ExpoImageSource {
+    readonly uri?: string;
+    readonly width?: number;
+    readonly height?: number;
+    readonly headers?: Readonly<Record<string, string>>;
+    readonly cacheKey?: string;
+}
+export type ExpoImageContentFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+export declare class ExpoImage {
+    readonly source: import("@angular/core").InputSignal<number | ExpoImageSource | readonly ExpoImageSource[] | undefined>;
+    readonly placeholder: import("@angular/core").InputSignal<number | ExpoImageSource | readonly ExpoImageSource[] | undefined>;
+    readonly contentFit: import("@angular/core").InputSignal<ExpoImageContentFit | undefined>;
+    readonly contentPosition: import("@angular/core").InputSignal<string | Readonly<Record<string, string | number>> | undefined>;
+    readonly transition: import("@angular/core").InputSignal<number | {
+        readonly duration?: number;
+        readonly effect?: string;
+    } | undefined>;
+    readonly blurRadius: import("@angular/core").InputSignalWithTransform<number | undefined, unknown>;
+    readonly tintColor: import("@angular/core").InputSignal<string | undefined>;
+    readonly cachePolicy: import("@angular/core").InputSignal<"none" | "disk" | "memory" | "memory-disk" | undefined>;
+    readonly priority: import("@angular/core").InputSignal<"low" | "normal" | "high" | undefined>;
+    readonly recyclingKey: import("@angular/core").InputSignal<string | undefined>;
+    readonly accessibilityLabel: import("@angular/core").InputSignal<string | undefined>;
+    readonly load: import("@angular/core").OutputEmitterRef<NativeSyntheticEvent<Record<string, unknown>>>;
+    readonly error: import("@angular/core").OutputEmitterRef<NativeSyntheticEvent<{
+        readonly error: string;
+    }>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ExpoImage, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ExpoImage, "expo-image", never, { "source": { "alias": "source"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "contentFit": { "alias": "contentFit"; "required": false; "isSignal": true; }; "contentPosition": { "alias": "contentPosition"; "required": false; "isSignal": true; }; "transition": { "alias": "transition"; "required": false; "isSignal": true; }; "blurRadius": { "alias": "blurRadius"; "required": false; "isSignal": true; }; "tintColor": { "alias": "tintColor"; "required": false; "isSignal": true; }; "cachePolicy": { "alias": "cachePolicy"; "required": false; "isSignal": true; }; "priority": { "alias": "priority"; "required": false; "isSignal": true; }; "recyclingKey": { "alias": "recyclingKey"; "required": false; "isSignal": true; }; "accessibilityLabel": { "alias": "accessibilityLabel"; "required": false; "isSignal": true; }; }, { "load": "load"; "error": "error"; }, never, never, true, never>;
+}

package/dist/expo-image.js

@@ -0,0 +1,57 @@
+/**
+ * `<expo-image>`, typed: `expo-image`'s view, registered by name with
+ * `registerExpoView('expo-image', 'ExpoImage')`, with its props as inputs so a template is
+ * checked against them. Each goes straight to the view; `source` is the array the React
+ * component would hand down.
+ */
+import { Component, input, output } from '@angular/core';
+import { optionalNumber } from "./transforms.js";
+import * as i0 from "@angular/core";
+export class ExpoImage {
+    source = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "source" }] : /* istanbul ignore next */ []));
+    placeholder = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    contentFit = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "contentFit" }] : /* istanbul ignore next */ []));
+    contentPosition = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "contentPosition" }] : /* istanbul ignore next */ []));
+    transition = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "transition" }] : /* istanbul ignore next */ []));
+    blurRadius = input(undefined, { ...(ngDevMode ? { debugName: "blurRadius" } : /* istanbul ignore next */ {}), transform: optionalNumber });
+    tintColor = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tintColor" }] : /* istanbul ignore next */ []));
+    cachePolicy = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "cachePolicy" }] : /* istanbul ignore next */ []));
+    priority = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "priority" }] : /* istanbul ignore next */ []));
+    recyclingKey = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "recyclingKey" }] : /* istanbul ignore next */ []));
+    accessibilityLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "accessibilityLabel" }] : /* istanbul ignore next */ []));
+    load = output();
+    error = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: ExpoImage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.2.0", type: ExpoImage, isStandalone: true, selector: "expo-image", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, contentFit: { classPropertyName: "contentFit", publicName: "contentFit", isSignal: true, isRequired: false, transformFunction: null }, contentPosition: { classPropertyName: "contentPosition", publicName: "contentPosition", isSignal: true, isRequired: false, transformFunction: null }, transition: { classPropertyName: "transition", publicName: "transition", isSignal: true, isRequired: false, transformFunction: null }, blurRadius: { classPropertyName: "blurRadius", publicName: "blurRadius", isSignal: true, isRequired: false, transformFunction: null }, tintColor: { classPropertyName: "tintColor", publicName: "tintColor", isSignal: true, isRequired: false, transformFunction: null }, cachePolicy: { classPropertyName: "cachePolicy", publicName: "cachePolicy", isSignal: true, isRequired: false, transformFunction: null }, priority: { classPropertyName: "priority", publicName: "priority", isSignal: true, isRequired: false, transformFunction: null }, recyclingKey: { classPropertyName: "recyclingKey", publicName: "recyclingKey", isSignal: true, isRequired: false, transformFunction: null }, accessibilityLabel: { classPropertyName: "accessibilityLabel", publicName: "accessibilityLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { load: "load", error: "error" }, host: { properties: { "source": "source()", "placeholder": "placeholder()", "contentFit": "contentFit()", "contentPosition": "contentPosition()", "transition": "transition()", "blurRadius": "blurRadius()", "tintColor": "tintColor()", "cachePolicy": "cachePolicy()", "priority": "priority()", "recyclingKey": "recyclingKey()", "accessibilityLabel": "accessibilityLabel()" } }, ngImport: i0, template: '', isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: ExpoImage, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'expo-image',
+                    template: '',
+                    host: {
+                        '[source]': 'source()',
+                        '[placeholder]': 'placeholder()',
+                        '[contentFit]': 'contentFit()',
+                        '[contentPosition]': 'contentPosition()',
+                        '[transition]': 'transition()',
+                        '[blurRadius]': 'blurRadius()',
+                        '[tintColor]': 'tintColor()',
+                        '[cachePolicy]': 'cachePolicy()',
+                        '[priority]': 'priority()',
+                        '[recyclingKey]': 'recyclingKey()',
+                        '[accessibilityLabel]': 'accessibilityLabel()',
+                    },
+                }]
+        }], propDecorators: { source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], contentFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentFit", required: false }] }], contentPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentPosition", required: false }] }], transition: [{ type: i0.Input, args: [{ isSignal: true, alias: "transition", required: false }] }], blurRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "blurRadius", required: false }] }], tintColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "tintColor", required: false }] }], cachePolicy: [{ type: i0.Input, args: [{ isSignal: true, alias: "cachePolicy", required: false }] }], priority: [{ type: i0.Input, args: [{ isSignal: true, alias: "priority", required: false }] }], recyclingKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "recyclingKey", required: false }] }], accessibilityLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "accessibilityLabel", required: false }] }], load: [{ type: i0.Output, args: ["load"] }], error: [{ type: i0.Output, args: ["error"] }] } });
+//# sourceMappingURL=expo-image.js.map

package/dist/expo-image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expo-image.js","sourceRoot":"","sources":["../src/expo-image.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;;AA8BjD,MAAM,OAAO,SAAS;IACX,MAAM,GAAG,KAAK;0FAAyD,CAAC;IACxE,WAAW,GAAG,KAAK;+FAAyD,CAAC;IAC7E,UAAU,GAAG,KAAK;8FAAuB,CAAC;IAC1C,eAAe,GAAG,KAAK;mGAAsD,CAAC;IAC9E,UAAU,GAAG,KAAK;8FAAqE,CAAC;IACxF,UAAU,GAAG,KAAK,CAAS,SAAS,kFAAI,SAAS,EAAE,cAAc,GAAG,CAAC;IACrE,SAAS,GAAG,KAAK;6FAAU,CAAC;IAC5B,WAAW,GAAG,KAAK;+FAA8C,CAAC;IAClE,QAAQ,GAAG,KAAK;4FAA6B,CAAC;IAC9C,YAAY,GAAG,KAAK;gGAAU,CAAC;IAC/B,kBAAkB,GAAG,KAAK;sGAAU,CAAC;IACrC,IAAI,GAAG,MAAM,EAAiD,CAAC;IAC/D,KAAK,GAAG,MAAM,EAAoD,CAAC;uGAbjE,SAAS;2FAAT,SAAS,g+DAfV,EAAE;;2FAeD,SAAS;kBAjBrB,SAAS;mBAAC;oBACT,QAAQ,EAAE,YAAY;oBACtB,QAAQ,EAAE,EAAE;oBACZ,IAAI,EAAE;wBACJ,UAAU,EAAE,UAAU;wBACtB,eAAe,EAAE,eAAe;wBAChC,cAAc,EAAE,cAAc;wBAC9B,mBAAmB,EAAE,mBAAmB;wBACxC,cAAc,EAAE,cAAc;wBAC9B,cAAc,EAAE,cAAc;wBAC9B,aAAa,EAAE,aAAa;wBAC5B,eAAe,EAAE,eAAe;wBAChC,YAAY,EAAE,YAAY;wBAC1B,gBAAgB,EAAE,gBAAgB;wBAClC,sBAAsB,EAAE,sBAAsB;qBAC/C;iBACF","sourcesContent":["/**\n * `<expo-image>`, typed: `expo-image`'s view, registered by name with\n * `registerExpoView('expo-image', 'ExpoImage')`, with its props as inputs so a template is\n * checked against them. Each goes straight to the view; `source` is the array the React\n * component would hand down.\n */\nimport { Component, input, output } from '@angular/core';\nimport type { NativeSyntheticEvent } from '@ng-native/fabric';\nimport { optionalNumber } from './transforms.ts';\n\n/** One image `source` entry, as `expo-image` passes them to its view. */\nexport interface ExpoImageSource {\n  readonly uri?: string;\n  readonly width?: number;\n  readonly height?: number;\n  readonly headers?: Readonly<Record<string, string>>;\n  readonly cacheKey?: string;\n}\n\nexport type ExpoImageContentFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';\n\n@Component({\n  selector: 'expo-image',\n  template: '',\n  host: {\n    '[source]': 'source()',\n    '[placeholder]': 'placeholder()',\n    '[contentFit]': 'contentFit()',\n    '[contentPosition]': 'contentPosition()',\n    '[transition]': 'transition()',\n    '[blurRadius]': 'blurRadius()',\n    '[tintColor]': 'tintColor()',\n    '[cachePolicy]': 'cachePolicy()',\n    '[priority]': 'priority()',\n    '[recyclingKey]': 'recyclingKey()',\n    '[accessibilityLabel]': 'accessibilityLabel()',\n  },\n})\nexport class ExpoImage {\n  readonly source = input<readonly ExpoImageSource[] | ExpoImageSource | number>();\n  readonly placeholder = input<readonly ExpoImageSource[] | ExpoImageSource | number>();\n  readonly contentFit = input<ExpoImageContentFit>();\n  readonly contentPosition = input<string | Readonly<Record<string, number | string>>>();\n  readonly transition = input<number | { readonly duration?: number; readonly effect?: string }>();\n  readonly blurRadius = input<number>(undefined, { transform: optionalNumber });\n  readonly tintColor = input<string>();\n  readonly cachePolicy = input<'none' | 'disk' | 'memory' | 'memory-disk'>();\n  readonly priority = input<'low' | 'normal' | 'high'>();\n  readonly recyclingKey = input<string>();\n  readonly accessibilityLabel = input<string>();\n  readonly load = output<NativeSyntheticEvent<Record<string, unknown>>>();\n  readonly error = output<NativeSyntheticEvent<{ readonly error: string }>>();\n}\n"]}