feat: Adding ar shorthand for aspect and support for numeric values…

… for aspect (#74)

* adding shorthand "ar" to aspect keyword, allow number values like "aspect=1.5"

* updating directive docs for `ar` shorthand and support for numeric values

* adding `ar` to ResizeOptions interface, simplifying the logic for using `aspect` or `ar`

* removing temporary test script

Co-authored-by: Tony Sullivan <tony.f.sullivan@gmail.com>

docs/directives.md

@@ -317,11 +317,12 @@ import Images from 'examepl.jpg?height=200;400;700'
 ___
 
 ### Aspect
-• **Keyword**: `aspect`<br>
-• **Type**: _string_<br>
+• **Keyword**: `aspect` \| `ar`<br>
+• **Type**: _string_ \| _number_<br>
 
 
 Resizes the image to be the specified aspect ratio.
+Aspect ratio can be defined with a string in the form `16:9` or a positive number representing the width divided by height (e.g., `1.5` for a `3:2` aspect ratio)
 If height and width are both provided, this will be ignored.
 If height is provided, the width will be scaled accordingly.
 If width is provided, the width will be scaled accordingly.

packages/core/package.json

@@ -46,4 +46,4 @@
   "dependencies": {
     "sharp": "^0.27.2"
   }
-}
+}

packages/core/src/transforms/__tests__/resize.spec.ts

@@ -236,27 +236,63 @@ describe('aspect', () => {
         expect(res).toBeInstanceOf(Function)
     })
 
+    test('keyword "ar"', () => {
+        const res = resize({ ar: '16:9' }, dirCtx)
+
+        expect(res).toBeInstanceOf(Function)
+    })
+
     test('missing', () => {
         const res = resize({}, dirCtx)
 
         expect(res).toBeUndefined()
     })
 
     describe('arguments', () => {
-        test('invalid', () => {
+        test('invalid aspect', () => {
             const res = resize({ aspect: 'invalid' }, dirCtx)
 
             expect(res).toBeUndefined()
         })
 
+        test('invalid ar', () => {
+            const res = resize({ ar: 'invalid' }, dirCtx)
+
+            expect(res).toBeUndefined()
+        })
+
+        test('undefined', () => {
+            const res = resize({ ar: undefined }, dirCtx)
+
+            expect(res).toBeUndefined()
+        })
+
         test('empty', () => {
             const res = resize({ aspect: '' }, dirCtx)
 
             expect(res).toBeUndefined()
         })
 
-        test('colon delimited aspect ratio', () => {
-            const res = resize({ height: '16:9' }, dirCtx)
+        test('integer', () => {
+            const res = resize({ aspect: '1' }, dirCtx)
+
+            expect(res).toBeInstanceOf(Function)
+        })
+
+        test('float', () => {
+            const res = resize({ aspect: '1.5' }, dirCtx)
+
+            expect(res).toBeInstanceOf(Function)
+        })
+
+        test('negative number', () => {
+            const res = resize({ aspect: '-1.5' }, dirCtx)
+
+            expect(res).toBeUndefined()
+        })
+
+        test('string', () => {
+            const res = resize({ aspect: '16:9' }, dirCtx)
 
             expect(res).toBeInstanceOf(Function)
         })
@@ -268,13 +304,20 @@ describe('aspect', () => {
             img = sharp(join(__dirname, '../../__tests__/__fixtures__/pexels-allec-gomes-5195763.png'))
         })
 
-        test('basic', async () => {
+        test('basic w/ string', async () => {
             //@ts-ignore
             const { image, metadata } = await applyTransforms([resize({ aspect: '4:3' }, dirCtx)], img)
 
             expect(await image.toBuffer()).toMatchImageSnapshot()
         })
 
+        test('basic w/ number', async () => {
+            //@ts-ignore
+            const { image, metadata } = await applyTransforms([resize({ aspect: '1.5' }, dirCtx)], img)
+
+            expect(await image.toBuffer()).toMatchImageSnapshot()
+        })
+
         test('w/ fit', async () => {
             //@ts-ignore
             const { image, metadata } = await applyTransforms([resize({ aspect: '4:3', fit: 'contain' }, dirCtx)], img)

packages/core/src/transforms/resize.ts

@@ -11,25 +11,34 @@ export interface ResizeOptions {
     height: string
     h: string
     aspect: string
+    ar: string
 }
 
 function parseAspect(aspect?: string) {
     if (!aspect || !aspect.split) {
-        return undefined;
+        return undefined
     }
 
-    const [width, height] = aspect.split(':')
+    const parts = aspect.split(':')
 
-    if (!width || !height) {
-        return undefined
-    }
+    if (parts.length === 1) {
+        /* handle decimal aspect ratios, ignore negative values */
+        const [aspect] = parts
+        const parsed = parseFloat(aspect)
 
-    const widthInt = parseInt(width)
-    const heightInt = parseInt(height)
+        return parsed > 0 ? parsed : undefined
+    } else if (parts.length === 2) {
+        /* handle aspect ratio strings */
+        const [width, height] = parts;
+        const widthInt = parseInt(width)
+        const heightInt = parseInt(height)
+
+        return widthInt && heightInt && widthInt > 0 && heightInt > 0
+            ? widthInt / heightInt
+            : undefined
+    }
 
-    return widthInt && heightInt && widthInt > 0 && heightInt > 0
-        ? widthInt / heightInt
-        : undefined
+    return undefined;
 }
 
 export const resize: TransformFactory<ResizeOptions> = (config, ctx) => {
@@ -46,7 +55,7 @@ export const resize: TransformFactory<ResizeOptions> = (config, ctx) => {
             : undefined
     const aspect = width && height
         ? width / height
-        : parseAspect(config.aspect)
+        : parseAspect(config.aspect || config.ar)
 
     if (!width && !height && !aspect) return