feat: expose transformer api, add types

Author: Maya Shavin

packages/url/__tests__/transformers.test.ts

@@ -1,6 +1,8 @@
-import { transform, getBorder, getTransformations, getResize, toTransformationStr } from '../lib/transformers'
+import { transform, getBorder, getTransformations, getResize, toTransformationStr, getPosition } from '../lib/transformers'
 import { resize } from '../lib/transformers/resize'
 import { border } from '../lib/transformers/border'
+import { position } from '../lib/transformers/position'
+import { effect } from '../lib/transformers/effect'
 
 describe('Modifiers', () => {
   describe('transform()', () => {
@@ -112,14 +114,15 @@ describe('Modifiers', () => {
       expect(getResize(options)).toEqual('h_20')
     })
 
-    it('should support width, height and crop field', () => {
+    it('should support width, height, aspectRatio and crop field', () => {
       const options = {
         height: 20,
         width: 20,
-        crop: 'scale'
+        crop: 'scale',
+        aspectRatio: '1:1'
       }
 
-      expect(getResize(options)).toEqual('c_scale,w_20,h_20')
+      expect(getResize(options)).toEqual('c_scale,w_20,h_20,ar_1:1')
     })
   })  
 
@@ -148,6 +151,31 @@ describe('Modifiers', () => {
       )
     })
   })
+
+  describe('getPosition()', () => {
+    it('should prioritize position field', () => {
+      const options = {
+        position: {
+          x: 10,
+          y: 10,
+        },
+        x: 20,
+        y: 20
+      }
+
+      expect(getPosition(options)).toEqual('x_10,y_10')
+    })
+
+    it('should take x field', () => {
+      expect(getPosition({
+        x: 10
+      })).toBe('x_10')
+    })
+
+    it('should take y field', () => {
+      expect(getPosition({ y: 10 })).toBe('y_10')
+    })
+  })
 })
 
 describe('resize()', () => {
@@ -176,4 +204,36 @@ describe('border', () => {
   it('should return options', () => {
     expect(border({ type: 'dotted', color: 'blue', width: 10 })).toEqual('bo_10px_dotted_blue')
   })
+})
+
+describe('position', () => {
+  it('should return full options string', () => {
+    expect(position({ x: 10, y: 10 })).toBe('x_10,y_10')
+  })
+
+  it('should return x only', () => {
+    expect(position({ x: 10 })).toBe('x_10')
+  })
+
+  it('should return y only', () => {
+    expect(position({ y: 10 })).toBe('y_10')
+  })
+
+  it('should return empty string', () => {
+    expect(position({})).toBe('')
+  })
+})
+
+describe('effect', () => {
+  it('should return legal string for array input', () => {
+    expect(effect(['grayscale', 'tint:80'])).toBe('e_grayscale:tint:80')
+  })
+
+  it('should return legal string for string input', () => {
+    expect(effect('grayscale:tint')).toBe('e_grayscale:tint')
+  })
+
+  it('should return empty string', () => {
+    expect(effect('')).toBe('')
+  })
 })

packages/url/lib/constants.ts

@@ -6,6 +6,14 @@ export const SEO_TYPES = {
   "video/upload": "videos"
 };
 
+export const ROTATION_MODES = {
+  AUTO_RIGHT: 'auto_right',
+  AUTO_LEFT: 'auto_left',
+  VERTICAL_FLIP: 'vflip',
+  HORIZONTAL_FLIP: 'hflip',
+  IGNORE_EXIF_DATA: 'ignore'
+}
+
 export const IMAGE_CONDITIONAL_OPERATORS = {
   equal: "eq",
   notEqual: "ne",
@@ -116,7 +124,7 @@ export const TRANSFORMERS = {
   videoCodec: 'vc',
   videoSampling: 'vs',
   // width: 'w',
-  x: 'x',
-  y: 'y',
+  // x: 'x',
+  // y: 'y',
   zoom: 'z'
 }

packages/url/lib/transformers/effect.ts

@@ -1,4 +1,6 @@
-export const effect = (value: string | string[]):string => {
+export type Effect = string | string[]
+
+export const effect = (value: Effect):string => {
   if (!value || value.length === 0) return ''
 
   const effectValue = typeof value === 'string' ? value : value.join(':')

packages/url/lib/transformers/index.ts

@@ -24,11 +24,20 @@ export const getBorder = (options):string => {
   return borderModification
 }
 
+export const getPosition = (options): string => {
+  if (!options.x && !options.y && !options.position) return ''
+
+  const { position } = require('./position')
+
+  return position(options.position || { x: options.x, y: options.y })
+}
+
 export const getTransformations = (options):string[] => {
   const result = []
 
   result.push(getResize(options))
   result.push(getBorder(options))
+  result.push(getPosition(options))
 
   for (let modifier in options) {
     const value = options[modifier]

packages/url/lib/types/CldOptions.ts

@@ -4,6 +4,15 @@ import { Resize } from '../transformers/resize'
 import { Border } from '../transformers/border'
 import { CustomFunction } from '../transformers/customFunc'
 import { Offset } from '../transformers/video/offset'
+import { Position } from '../transformers/position'
+import { Effect } from '../transformers/effect'
+import { ROTATION_MODES } from '../constants'
+
+export type Radius = number | string
+
+export type Flag = string | string[]
+
+export type Rotation = number | typeof ROTATION_MODES[keyof typeof ROTATION_MODES]
 
 export interface CldOptions {
   cloud?: CloudConfig,
@@ -30,11 +39,10 @@ export interface CloudConfig {
 }
 
 export interface TransformerOption {
-  rotation?: string | number,
-  aspectRatio?: string,
+  rotation?: Rotation,
   background?: string,
   border?: Border | string,
-  effect?: string | string[],
+  effect?: Effect,
   color?: string,
   resize?: Resize,
   colorSpace?: string,
@@ -49,22 +57,21 @@ export interface TransformerOption {
   fetchFormat?: string,
   gravity?: string,
   if?: string,
-  flags?: string | string[],
+  flags?: Flag,
   opacity?: number,
   overlay?: string,
   page?: string,
   prefix?: string,
   quality?: string,
-  radius?: number | string,
+  radius?: Radius,
   rawTransformation?: string,
   transformation?: string,
   chaining?: TransformerOption[],
   underlay?: string,
   variable?: string,
   variables?: string,
-  x?: number,
-  y?: number,
-  zoom?: string | number
+  position?: Position,
+  zoom?: number
 }
 
 export interface TransformerVideoOption extends TransformerOption{

packages/url/lib/url.ts

@@ -95,16 +95,6 @@ export const getResourceType = ({
 
 const isUrl = (str) => str && !!str.match(/^https?:\//)
 
-const isFetchRemote = (type?: string) => type === 'fetch'
-
-const makeUrl = (str: string) => {
-  const midPath = str.startsWith('/') ? '' : '/'
-
-  return `${document.location.protocol}//${document.location.host}${str.startsWith('?') ? document.location.pathname : midPath}${str}`
-}
-
-const convertPublicIdToUrl = (publicId: string, type?: string) => !isUrl(publicId) && isFetchRemote(type) ? makeUrl(publicId) : publicId
-
 export const getPathToAsset = (publicId: string, { urlSuffix = '', format = '' } : { urlSuffix?: string, format?: string }):string => {
   if (isUrl(publicId)) return encodePublicId(publicId)
 
@@ -136,7 +126,7 @@ export const url = (publicId: string, cloud: CloudConfig = { cloudName: ''}, opt
 
   const format = options.fetchFormat || options.format || 'auto'
 
-  const $options = {
+  const $options:TransformerOption | TransformerVideoOption = {
     quality: 'auto',
     ...options,
     format

packages/url/package.json

@@ -1,11 +1,12 @@
 {
   "name": "cloudinary-build-url",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Lighter Url generator for Cloudinary",
   "author": "Maya Shavin <maya@cloudinary.com>",
   "license": "MIT",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/cjs/index.d.ts",
   "directories": {
     "lib": "lib",
     "test": "__tests__"
@@ -16,9 +17,10 @@
   "scripts": {
     "build": "npm run clean && npm run compile",
     "clean": "rm -rf ./dist",
-    "compile": "tsc -p tsconfig.build.json",
+    "compile": "tsc -p tsconfig.build.json && tsc -p tsconfig.json",
     "test:unit": "jest __tests__ --reporters default",
-    "tsc": "tsc"
+    "tsc": "tsc -p tsconfig.build.json && tsc -p tsconfig.json",
+    "prepublishOnly": "agadoo dist/"
   },
   "keywords": [
     "cloudinary",
@@ -34,6 +36,7 @@
   "devDependencies": {
     "@types/jest": "^26.0.15",
     "@types/node": "^14.14.7",
+    "agadoo": "^2.0.0",
     "jest": "^26.6.3",
     "jest-html-reporters": "^2.1.0",
     "ts-jest": "^26.4.4",

packages/url/tsconfig.build.json

@@ -4,6 +4,6 @@
     "lib/**/*"
   ],
   "compilerOptions": {
-    "outDir": "./dist"    
+    "outDir": "./dist/cjs"    
   }
 }

packages/url/tsconfig.json

@@ -1,3 +1,7 @@
 {
-  "extends": "./tsconfig.build.json"
+  "extends": "./tsconfig.build.json",
+  "compilerOptions": {
+    "outDir": "./dist/esm",
+    "module": "ES2015"
+  }
 }