Merge pull request #794 from simonihmig/extract-resolve-helper

Extract resolve helper

.changeset/six-dragons-check.md

@@ -0,0 +1,5 @@
+---
+'@responsive-image/core': patch
+---
+
+Add resolveImage utility

apps/ember-test-app/tests/integration/helpers/responsive-image-resolve-test.gts

@@ -16,6 +16,16 @@ module("Helper: responsive-image-resolve", function (hooks) {
     assert.dom("h1").hasText(new RegExp("/images/aurora-2048w(-\\w+)?.jpg"));
   });
 
+  test("supports sidth", async function (assert) {
+    await render(
+      <template>
+        <h1>{{responsiveImageResolve testImage width=2048}}</h1>
+      </template>,
+    );
+
+    assert.dom("h1").hasText(new RegExp("/images/aurora-2048w(-\\w+)?.jpg"));
+  });
+
   test("supports size", async function (assert) {
     await render(
       <template>

packages/core/src/index.ts

@@ -3,5 +3,6 @@ export * from './env.ts';
 export * from './config.ts';
 export * from './debug.ts';
 export * from './lqip.ts';
+export * from './resolve.ts';
 
 export type * from './types.ts';

packages/core/src/resolve.ts

@@ -0,0 +1,31 @@
+import { getDestinationWidthBySize } from './env';
+import type { ImageData, ImageType } from './types';
+
+export interface ResolveImageOptions {
+  /**
+   * width in pixel to request the best matching image for
+   */
+  width?: number;
+
+  /**
+   * size in vw (0 - 100) to request the best matching image for
+   */
+  size?: number;
+
+  /**
+   * preferred image format
+   */
+  format?: ImageType;
+}
+
+export function resolveImage(
+  data: ImageData,
+  { width, size, format }: ResolveImageOptions = {},
+): string | undefined {
+  const url = data.imageUrlFor(
+    width ?? getDestinationWidthBySize(size),
+    format ?? data.imageTypes[0],
+  );
+
+  return url;
+}

packages/core/tests/resolve.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, test } from 'vitest';
+
+import type { ImageData } from '../src';
+import { resolveImage } from '../src';
+
+describe('resolveImage', () => {
+  const imageData: ImageData = {
+    imageTypes: ['webp', 'avif'],
+    imageUrlFor(width, type = 'jpeg') {
+      return `/${width}.${type}`;
+    },
+  };
+
+  test('returns image matching device width with no args', () => {
+    expect(resolveImage(imageData)).toBe('/320.webp');
+  });
+
+  test('supports size', () => {
+    expect(resolveImage(imageData, { size: 10 })).toBe('/32.webp');
+  });
+
+  test('supports width', () => {
+    expect(resolveImage(imageData, { width: 1024 })).toBe('/1024.webp');
+  });
+
+  test('supports format', () => {
+    expect(resolveImage(imageData, { format: 'avif' })).toBe('/320.avif');
+  });
+});

packages/ember/src/helpers/responsive-image-resolve.ts

@@ -1,18 +1,3 @@
-import {
-  getDestinationWidthBySize,
-  type ImageData,
-  type ImageType,
-} from '@responsive-image/core';
-import { htmlSafe } from '@ember/template';
+import { resolveImage } from '@responsive-image/core';
 
-export default function responsiveImageResolve(
-  data: ImageData,
-  {
-    size,
-    format = data.imageTypes[0],
-  }: { size?: number; format?: ImageType } = {},
-): ReturnType<typeof htmlSafe> | undefined {
-  const url = data.imageUrlFor(getDestinationWidthBySize(size), format);
-
-  return url ? htmlSafe(url) : undefined;
-}
+export default resolveImage;