@inoo-ch/payload-image-optimizer 1.0.0

package/dist/utilities/getImageOptimizerProps.js

@@ -0,0 +1,55 @@
+import { thumbHashToDataURL } from 'thumbhash';
+/**
+ * Extracts image optimization props from a Payload media resource.
+ *
+ * Returns props that can be spread onto a Next.js `<Image>` component to add
+ * ThumbHash blur placeholders and focal-point-based object positioning.
+ *
+ * Works with any component — including the Payload website template's `ImageMedia`:
+ *
+ * ```tsx
+ * import { getImageOptimizerProps } from '@inoo-ch/payload-image-optimizer/client'
+ *
+ * const optimizerProps = getImageOptimizerProps(resource)
+ * <NextImage {...existingProps} {...optimizerProps} />
+ * ```
+ */ export function getImageOptimizerProps(resource) {
+    if (!resource) {
+        return {
+            placeholder: 'empty',
+            style: {
+                objectPosition: 'center'
+            }
+        };
+    }
+    const objectPosition = resource.focalX != null && resource.focalY != null ? `${resource.focalX}% ${resource.focalY}%` : 'center';
+    const thumbHash = resource.imageOptimizer?.thumbHash;
+    if (!thumbHash) {
+        return {
+            placeholder: 'empty',
+            style: {
+                objectPosition
+            }
+        };
+    }
+    try {
+        const bytes = Uint8Array.from(atob(thumbHash), (c)=>c.charCodeAt(0));
+        const blurDataURL = thumbHashToDataURL(bytes);
+        return {
+            placeholder: 'blur',
+            blurDataURL,
+            style: {
+                objectPosition
+            }
+        };
+    } catch  {
+        return {
+            placeholder: 'empty',
+            style: {
+                objectPosition
+            }
+        };
+    }
+}
+
+//# sourceMappingURL=getImageOptimizerProps.js.map

package/dist/utilities/getImageOptimizerProps.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utilities/getImageOptimizerProps.ts"],"sourcesContent":["import { thumbHashToDataURL } from 'thumbhash'\n\ntype ImageOptimizerData = {\n  thumbHash?: string | null\n}\n\ntype ResourceWithOptimizer = {\n  imageOptimizer?: ImageOptimizerData | null\n  focalX?: number | null\n  focalY?: number | null\n}\n\nexport type ImageOptimizerProps = {\n  placeholder: 'blur' | 'empty'\n  blurDataURL?: string\n  style: {\n    objectPosition: string\n  }\n}\n\n/**\n * Extracts image optimization props from a Payload media resource.\n *\n * Returns props that can be spread onto a Next.js `<Image>` component to add\n * ThumbHash blur placeholders and focal-point-based object positioning.\n *\n * Works with any component — including the Payload website template's `ImageMedia`:\n *\n * ```tsx\n * import { getImageOptimizerProps } from '@inoo-ch/payload-image-optimizer/client'\n *\n * const optimizerProps = getImageOptimizerProps(resource)\n * <NextImage {...existingProps} {...optimizerProps} />\n * ```\n */\nexport function getImageOptimizerProps(resource: ResourceWithOptimizer | null | undefined): ImageOptimizerProps {\n  if (!resource) {\n    return { placeholder: 'empty', style: { objectPosition: 'center' } }\n  }\n\n  const objectPosition =\n    resource.focalX != null && resource.focalY != null\n      ? `${resource.focalX}% ${resource.focalY}%`\n      : 'center'\n\n  const thumbHash = resource.imageOptimizer?.thumbHash\n  if (!thumbHash) {\n    return { placeholder: 'empty', style: { objectPosition } }\n  }\n\n  try {\n    const bytes = Uint8Array.from(atob(thumbHash), (c) => c.charCodeAt(0))\n    const blurDataURL = thumbHashToDataURL(bytes)\n    return { placeholder: 'blur', blurDataURL, style: { objectPosition } }\n  } catch {\n    return { placeholder: 'empty', style: { objectPosition } }\n  }\n}\n"],"names":["thumbHashToDataURL","getImageOptimizerProps","resource","placeholder","style","objectPosition","focalX","focalY","thumbHash","imageOptimizer","bytes","Uint8Array","from","atob","c","charCodeAt","blurDataURL"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,YAAW;AAoB9C;;;;;;;;;;;;;;CAcC,GACD,OAAO,SAASC,uBAAuBC,QAAkD;IACvF,IAAI,CAACA,UAAU;QACb,OAAO;YAAEC,aAAa;YAASC,OAAO;gBAAEC,gBAAgB;YAAS;QAAE;IACrE;IAEA,MAAMA,iBACJH,SAASI,MAAM,IAAI,QAAQJ,SAASK,MAAM,IAAI,OAC1C,GAAGL,SAASI,MAAM,CAAC,EAAE,EAAEJ,SAASK,MAAM,CAAC,CAAC,CAAC,GACzC;IAEN,MAAMC,YAAYN,SAASO,cAAc,EAAED;IAC3C,IAAI,CAACA,WAAW;QACd,OAAO;YAAEL,aAAa;YAASC,OAAO;gBAAEC;YAAe;QAAE;IAC3D;IAEA,IAAI;QACF,MAAMK,QAAQC,WAAWC,IAAI,CAACC,KAAKL,YAAY,CAACM,IAAMA,EAAEC,UAAU,CAAC;QACnE,MAAMC,cAAchB,mBAAmBU;QACvC,OAAO;YAAEP,aAAa;YAAQa;YAAaZ,OAAO;gBAAEC;YAAe;QAAE;IACvE,EAAE,OAAM;QACN,OAAO;YAAEF,aAAa;YAASC,OAAO;gBAAEC;YAAe;QAAE;IAC3D;AACF"}

package/dist/utilities/thumbhash.d.ts

@@ -0,0 +1,2 @@
+export declare function encodeImageToThumbHash(buffer: Buffer, width: number, height: number): string;
+export declare function decodeThumbHashToDataURL(thumbHash: string): string;

package/dist/utilities/thumbhash.js

@@ -0,0 +1,11 @@
+import { rgbaToThumbHash, thumbHashToDataURL } from 'thumbhash';
+export function encodeImageToThumbHash(buffer, width, height) {
+    const thumbHash = rgbaToThumbHash(width, height, buffer);
+    return Buffer.from(thumbHash).toString('base64');
+}
+export function decodeThumbHashToDataURL(thumbHash) {
+    const thumbHashBuffer = Buffer.from(thumbHash, 'base64');
+    return thumbHashToDataURL(thumbHashBuffer);
+}
+
+//# sourceMappingURL=thumbhash.js.map

package/dist/utilities/thumbhash.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utilities/thumbhash.ts"],"sourcesContent":["import { rgbaToThumbHash, thumbHashToDataURL } from 'thumbhash'\n\nexport function encodeImageToThumbHash(\n  buffer: Buffer,\n  width: number,\n  height: number,\n): string {\n  const thumbHash = rgbaToThumbHash(width, height, buffer)\n  return Buffer.from(thumbHash).toString('base64')\n}\n\nexport function decodeThumbHashToDataURL(thumbHash: string): string {\n  const thumbHashBuffer = Buffer.from(thumbHash, 'base64')\n  return thumbHashToDataURL(thumbHashBuffer)\n}\n"],"names":["rgbaToThumbHash","thumbHashToDataURL","encodeImageToThumbHash","buffer","width","height","thumbHash","Buffer","from","toString","decodeThumbHashToDataURL","thumbHashBuffer"],"mappings":"AAAA,SAASA,eAAe,EAAEC,kBAAkB,QAAQ,YAAW;AAE/D,OAAO,SAASC,uBACdC,MAAc,EACdC,KAAa,EACbC,MAAc;IAEd,MAAMC,YAAYN,gBAAgBI,OAAOC,QAAQF;IACjD,OAAOI,OAAOC,IAAI,CAACF,WAAWG,QAAQ,CAAC;AACzC;AAEA,OAAO,SAASC,yBAAyBJ,SAAiB;IACxD,MAAMK,kBAAkBJ,OAAOC,IAAI,CAACF,WAAW;IAC/C,OAAOL,mBAAmBU;AAC5B"}

package/package.json

@@ -0,0 +1,141 @@
+{
+  "name": "@inoo-ch/payload-image-optimizer",
+  "version": "1.0.0",
+  "description": "Payload CMS plugin for automatic image optimization — WebP/AVIF conversion, resize, EXIF strip, ThumbHash placeholders, and bulk regeneration",
+  "license": "MIT",
+  "keywords": [
+    "payload",
+    "payloadcms",
+    "plugin",
+    "image",
+    "optimization",
+    "webp",
+    "avif",
+    "thumbhash",
+    "sharp",
+    "resize",
+    "compress"
+  ],
+  "homepage": "https://github.com/payloadcms-plugins/image-optimizer",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/payloadcms-plugins/image-optimizer"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./client": {
+      "import": "./src/exports/client.ts",
+      "types": "./src/exports/client.ts",
+      "default": "./src/exports/client.ts"
+    },
+    "./rsc": {
+      "import": "./src/exports/rsc.ts",
+      "types": "./src/exports/rsc.ts",
+      "default": "./src/exports/rsc.ts"
+    }
+  },
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "pnpm copyfiles && pnpm build:types && pnpm build:swc",
+    "build:swc": "swc ./src -d ./dist --config-file .swcrc --strip-leading-paths",
+    "build:types": "tsc --outDir dist --rootDir ./src",
+    "clean": "rimraf {dist,*.tsbuildinfo}",
+    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json}\" dist/",
+    "dev": "next dev dev --turbo",
+    "dev:generate-importmap": "pnpm dev:payload generate:importmap",
+    "dev:generate-types": "pnpm dev:payload generate:types",
+    "dev:payload": "cross-env PAYLOAD_CONFIG_PATH=./dev/payload.config.ts payload",
+    "generate:importmap": "pnpm dev:generate-importmap",
+    "generate:types": "pnpm dev:generate-types",
+    "lint": "eslint",
+    "lint:fix": "eslint ./src --fix",
+    "test": "pnpm test:int && pnpm test:e2e",
+    "test:e2e": "playwright test",
+    "test:int": "vitest"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3.2.0",
+    "@payloadcms/db-mongodb": "3.79.0",
+    "@payloadcms/db-postgres": "3.79.0",
+    "@payloadcms/db-sqlite": "3.79.0",
+    "@payloadcms/eslint-config": "3.9.0",
+    "@payloadcms/next": "3.79.0",
+    "@payloadcms/richtext-lexical": "3.79.0",
+    "@payloadcms/ui": "3.79.0",
+    "@playwright/test": "1.58.2",
+    "@swc-node/register": "1.10.9",
+    "@swc/cli": "0.6.0",
+    "@types/node": "22.19.9",
+    "@types/react": "19.2.9",
+    "@types/react-dom": "19.2.3",
+    "copyfiles": "2.4.1",
+    "cross-env": "^7.0.3",
+    "eslint": "^9.23.0",
+    "eslint-config-next": "15.4.11",
+    "graphql": "^16.8.1",
+    "mongodb-memory-server": "10.1.4",
+    "next": "15.4.11",
+    "open": "^10.1.0",
+    "payload": "3.79.0",
+    "prettier": "^3.4.2",
+    "qs-esm": "7.0.2",
+    "react": "19.2.1",
+    "react-dom": "19.2.1",
+    "rimraf": "3.0.2",
+    "sharp": "0.34.2",
+    "sort-package-json": "^2.10.0",
+    "typescript": "5.7.3",
+    "vite-tsconfig-paths": "6.0.5",
+    "vitest": "4.0.18"
+  },
+  "peerDependencies": {
+    "next": "^14.0.0 || ^15.0.0",
+    "payload": "^3.0.0",
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "engines": {
+    "node": "^18.20.2 || >=20.9.0",
+    "pnpm": "^9 || ^10"
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "import": "./dist/index.js",
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "./client": {
+        "import": "./dist/exports/client.js",
+        "types": "./dist/exports/client.d.ts",
+        "default": "./dist/exports/client.js"
+      },
+      "./rsc": {
+        "import": "./dist/exports/rsc.js",
+        "types": "./dist/exports/rsc.d.ts",
+        "default": "./dist/exports/rsc.js"
+      }
+    },
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "sharp",
+      "esbuild",
+      "unrs-resolver"
+    ]
+  },
+  "registry": "https://registry.npmjs.org/",
+  "dependencies": {
+    "thumbhash": "^0.1.1"
+  }
+}