@symbiote-native/image 0.0.0-stage → 0.0.0

package/src/svelte/image-background-props.ts

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

package/src/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/src/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/src/svelte/index.ts

@@ -0,0 +1,8 @@
+// @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 type { IImageBackgroundSvelteProps } from './image-background-props';
+export { useImage } from './use-image.svelte';
+export type { IUseImageResult } from './use-image.svelte';
+export * from '../core';

package/src/svelte/svelte-ambient.d.ts

@@ -0,0 +1,3 @@
+// Pulls in svelte's ambient globals ($state/$effect/...) for this package's tsc program
+// This package has no value import from 'svelte', so a triple-slash reference does it explicitly
+/// <reference types="svelte" />

package/src/svelte/svelte-compile.test-helper.ts

@@ -0,0 +1,6 @@
+// Re-exports the existing harness instead of another copy
+export {
+  createSvelteHarness,
+  loadComponent,
+  type ISvelteHarness,
+} from '../../../sqlite/src/svelte/svelte-compile.test-helper';

package/src/svelte/use-image.svelte.ts

@@ -0,0 +1,38 @@
+import { untrack } from 'svelte';
+import { createImageRefLoader, resolveSource } from '../core';
+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 function useImage(
+  getSource: () => IImageSource | string | number,
+  getOptions: () => IImageLoadOptions = () => ({}),
+  getDependencies: () => unknown[] = () => [],
+): IUseImageResult {
+  let image = $state.raw<ImageRef | null>(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(): ImageRef | null {
+      return image;
+    },
+  };
+}

package/src/vue/image-background.ts

@@ -0,0 +1,17 @@
+import { defineComponent, type VNode } from '@vue/runtime-core';
+import { descriptorToVue, normalizeVueAttrs } from '@symbiote-native/vue';
+import { renderImageBackground } from '../core';
+
+/** 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 (): VNode =>
+      descriptorToVue(
+        renderImageBackground(normalizeVueAttrs(attrs)),
+        slots.default?.() ?? [],
+      );
+  },
+});

package/src/vue/image.ts

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

package/src/vue/index.ts

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

package/src/vue/use-image.ts

@@ -0,0 +1,34 @@
+import { shallowRef, toValue, watch } from '@vue/runtime-core';
+import type { MaybeRefOrGetter, ShallowRef, WatchSource } from '@vue/runtime-core';
+import { createImageRefLoader, resolveSource } from '../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 function useImage(
+  source: MaybeRefOrGetter<IImageSource | string | number>,
+  options: MaybeRefOrGetter<IImageLoadOptions> = {},
+  dependencies: WatchSource[] = [],
+): Readonly<ShallowRef<ImageRef | null>> {
+  const image = shallowRef<ImageRef | null>(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;
+}