@nosto/search-js 1.1.1 → 1.2.0

package/README.md

@@ -32,6 +32,7 @@ The main export of this library is the `search` function. It is compatible with
 ```ts
 import { search } from "@nosto/search-js"
 import { priceDecorator } from "@nosto/search-js/currencies"
+import { thumbnailDecorator } from "@nosto/search-js/thumbnails"
 
 const response = await search({
     query: 'my search',
@@ -41,13 +42,16 @@ const response = await search({
             "name",
             "price",
             "listPrice",
-            "priceCurrencyCode"
+            "priceCurrencyCode",
+            "imageUrl",
+            "imageHash"
         ] 
     }
 }, {
     track: 'serp',
     hitDecorators: [
-        priceDecorator()
+        priceDecorator(),
+        thumbnailDecorator()
     ]
 })
 

package/dist/currencies/priceDecorator.d.ts

@@ -10,5 +10,6 @@ export type Result = SearchProduct & FormattedPrices & {
 /**
  * Exposes currency formatting logic as a SearchProduct decorator
  * Sets priceText and listPriceText fields on product and SKU level
+ * Requires price, listPrice and priceCurrencyCode fields to be present
  */
 export declare function priceDecorator(config?: Partial<CurrencyConfig>): (hit: SearchProduct) => Result;

package/dist/search/types.d.ts

@@ -1,5 +1,5 @@
 import { SearchOptions, SearchProduct, SearchResult } from "@nosto/nosto-js/client";
-export type Options<HD extends HitDecorator[]> = SearchOptions & {
+export type Options<HD extends HitDecorator[] = HitDecorator[]> = SearchOptions & {
     /**
      * Hit decorators to apply to the search results.
      */

package/dist/thumbnails/shopifyThumbnailDecorator.d.ts

@@ -1,10 +1,26 @@
 import { SearchProduct } from "@nosto/nosto-js/client";
 import { ShopifySize } from "./types";
+type NostoSize = keyof typeof sizeMappings;
 export type Config = {
-    size: ShopifySize;
+    size: NostoSize | "orig" | ShopifySize;
+    fallback?: (hit: SearchProduct) => SearchProduct;
 };
+declare const sizeMappings: {
+    "1": string;
+    "2": string;
+    "3": string;
+    "4": string;
+    "5": string;
+    "6": string;
+    "7": string;
+    "8": string;
+    "9": string;
+};
+export declare function isSupportedNostoSize(size: string): size is NostoSize;
 /**
- * Replaces full size images with specified Shopify thumbnail size.
+ * Replaces full size images with specified Nosto or Shopify thumbnail size.
  * This decorator will only affect the image URLs from Shopify CDN.
+ * Supports the Nosto size codes "1"-"9" and additionally Shopify specific sizes.
  */
-export declare function shopifyThumbnailDecorator({ size }: Config): (hit: SearchProduct) => SearchProduct;
+export declare function shopifyThumbnailDecorator({ size, fallback }: Config): (hit: SearchProduct) => SearchProduct;
+export {};

package/dist/thumbnails/thumbnailDecorator.d.ts

@@ -5,5 +5,15 @@ export type Config = {
 };
 /**
  * Replaces full size images with thumbnail sized versions.
+ * Performs the following replacements based on availability of hash fields:
+ * - imageHash -> imageUrl
+ * - thumbHash -> thumbUrl
+ * - alternateImageHashes -> alternateImageUrls
+ * - sku.imageHash -> sku.imageUrl
+ */
+export declare function nostoThumbnailDecorator({ size }: Config): (hit: SearchProduct) => SearchProduct;
+/**
+ * Replaces full size images with thumbnail sized versions.
+ * Uses `shopifyThumbnailDecorator` and `nostoThumbnailDecorator` based on the platform.
  */
 export declare function thumbnailDecorator({ size }: Config): (hit: SearchProduct) => SearchProduct;

package/dist/thumbnails.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("./index.es-D_7T9vdv.cjs");function i({size:o,productId:n,hash:t}){const u=c.i();if(!u)throw new Error("Client script settings are not yet available");return`https://${u.thumbnailHost}/${u.account}/${o}/${n}/${t}/A`}function s({size:o}){function n(a,r){if(r)return i({size:o,productId:a,hash:r})}function t(a,r){if(r)return r.map(e=>({...e,imageUrl:n(a,e.imageHash)??e.imageUrl}))}function u(a,r,e){if(!e)return r;if(r)return e.map(l=>i({size:o,productId:a,hash:l}))}return function(r){const e=r.productId;return e?{...r,imageUrl:n(e,r.imageHash)??r.imageUrl,thumbUrl:n(e,r.thumbHash)??r.thumbUrl,skus:t(e,r.skus),alternateImageUrls:u(e,r.alternateImageUrls,r.alternateImageHashes)}:r}}const m=/cdn\.shopify\.com/;function f({size:o}){function n(r){return r?new URL(r).hostname.match(m):!1}function t(r){return r?n(r)?r.replace(/(\.jpg|\.png|\.jpeg|\.gif|\.webp)/,`_${o}$1`):r:""}function u(r){if(r)return r.map(e=>({...e,imageUrl:t(e.imageUrl)}))}function a(r){if(r)return r.map(e=>t(e))}return function(e){return n(e.imageUrl)?{...e,imageUrl:t(e.imageUrl),thumbUrl:t(e.thumbUrl),skus:u(e.skus),alternateImageUrls:a(e.alternateImageUrls)}:e}}exports.generateThumbnailUrl=i;exports.shopifyThumbnailDecorator=f;exports.thumbnailDecorator=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("./index.es-D_7T9vdv.cjs");function s({size:e,productId:a,hash:i}){const c=p.i();if(!c)throw new Error("Client script settings are not yet available");return`https://${c.thumbnailHost}/${c.account}/${e}/${a}/${i}/A`}const g=/cdn\.shopify\.com/,l={1:"170x170_crop_center",2:"100x100_crop_center",3:"90x70_crop_center",4:"50x50_crop_center",5:"30x30_crop_center",6:"100x140_crop_center",7:"200x200_crop_center",8:"400x400",9:"750x750"};function d(e){return e in l}function f({size:e,fallback:a=i=>i}){if(e==="orig")return a;const i=l[e]||e;function c(n){return n?new URL(n).hostname.match(g):!1}function u(n){return n?c(n)?n.replace(/(\.jpg|\.png|\.jpeg|\.gif|\.webp)/,`_${i}$1`):n:""}function r(n){if(n)return n.map(o=>({...o,imageUrl:u(o.imageUrl)}))}function t(n){if(n)return n.map(o=>u(o))}return function(o){return c(o.imageUrl)?{...o,imageUrl:u(o.imageUrl),thumbUrl:u(o.thumbUrl),skus:r(o.skus),alternateImageUrls:t(o.alternateImageUrls)}:a(o)}}function U(){var e;return(e=window.Nosto)==null?void 0:e.shopifyScript}function m({size:e}){function a(u,r){if(r)return s({size:e,productId:u,hash:r})}function i(u,r){if(r)return r.map(t=>({...t,imageUrl:a(u,t.imageHash)??t.imageUrl}))}function c(u,r,t){if(!t)return r;if(r)return t.map(n=>s({size:e,productId:u,hash:n}))}return function(r){const t=r.productId;return t?{...r,imageUrl:a(t,r.imageHash)??r.imageUrl,thumbUrl:a(t,r.thumbHash)??r.thumbUrl,skus:i(t,r.skus),alternateImageUrls:c(t,r.alternateImageUrls,r.alternateImageHashes)}:r}}function b({size:e}){const a=m({size:e});return U()&&d(e)?f({size:e,fallback:a}):a}exports.generateThumbnailUrl=s;exports.nostoThumbnailDecorator=m;exports.shopifyThumbnailDecorator=f;exports.thumbnailDecorator=b;

package/dist/thumbnails.d.ts

@@ -1,5 +1,5 @@
 /** @module thumbnails */
 export { generateThumbnailUrl, type Props } from "./thumbnails/generateThumbnailUrl";
-export { thumbnailDecorator, type Config } from "./thumbnails/thumbnailDecorator";
+export { thumbnailDecorator, nostoThumbnailDecorator, type Config } from "./thumbnails/thumbnailDecorator";
 export { shopifyThumbnailDecorator, type Config as ShopifyConfig } from "./thumbnails/shopifyThumbnailDecorator";
 export type { ThumbnailSize, ShopifySize } from "./thumbnails/types";

package/dist/thumbnails.es.js

@@ -1,80 +1,105 @@
 import { i as m } from "./index.es-Bcd5IQh9.js";
-function i({ size: o, productId: n, hash: t }) {
-  const u = m();
-  if (!u)
+function f({ size: e, productId: u, hash: i }) {
+  const c = m();
+  if (!c)
     throw new Error("Client script settings are not yet available");
-  return `https://${u.thumbnailHost}/${u.account}/${o}/${n}/${t}/A`;
+  return `https://${c.thumbnailHost}/${c.account}/${e}/${u}/${i}/A`;
 }
-function s({ size: o }) {
-  function n(a, r) {
+const p = /cdn\.shopify\.com/, s = {
+  1: "170x170_crop_center",
+  2: "100x100_crop_center",
+  3: "90x70_crop_center",
+  4: "50x50_crop_center",
+  5: "30x30_crop_center",
+  6: "100x140_crop_center",
+  7: "200x200_crop_center",
+  8: "400x400",
+  9: "750x750"
+};
+function l(e) {
+  return e in s;
+}
+function g({ size: e, fallback: u = (i) => i }) {
+  if (e === "orig")
+    return u;
+  const i = s[e] || e;
+  function c(n) {
+    return n ? new URL(n).hostname.match(p) : !1;
+  }
+  function a(n) {
+    return n ? c(n) ? n.replace(/(\.jpg|\.png|\.jpeg|\.gif|\.webp)/, `_${i}$1`) : n : "";
+  }
+  function r(n) {
+    if (n)
+      return n.map((o) => ({
+        ...o,
+        imageUrl: a(o.imageUrl)
+      }));
+  }
+  function t(n) {
+    if (n)
+      return n.map((o) => a(o));
+  }
+  return function(o) {
+    return c(o.imageUrl) ? {
+      ...o,
+      imageUrl: a(o.imageUrl),
+      thumbUrl: a(o.thumbUrl),
+      skus: r(o.skus),
+      alternateImageUrls: t(o.alternateImageUrls)
+    } : u(o);
+  };
+}
+function U() {
+  var e;
+  return (e = window.Nosto) == null ? void 0 : e.shopifyScript;
+}
+function d({ size: e }) {
+  function u(a, r) {
     if (r)
-      return i({
-        size: o,
+      return f({
+        size: e,
         productId: a,
         hash: r
       });
   }
-  function t(a, r) {
+  function i(a, r) {
     if (r)
-      return r.map((e) => ({
-        ...e,
-        imageUrl: n(a, e.imageHash) ?? e.imageUrl
+      return r.map((t) => ({
+        ...t,
+        imageUrl: u(a, t.imageHash) ?? t.imageUrl
       }));
   }
-  function u(a, r, e) {
-    if (!e)
+  function c(a, r, t) {
+    if (!t)
       return r;
     if (r)
-      return e.map(
-        (f) => i({
-          size: o,
+      return t.map(
+        (n) => f({
+          size: e,
           productId: a,
-          hash: f
+          hash: n
         })
       );
   }
   return function(r) {
-    const e = r.productId;
-    return e ? {
+    const t = r.productId;
+    return t ? {
       ...r,
-      imageUrl: n(e, r.imageHash) ?? r.imageUrl,
-      thumbUrl: n(e, r.thumbHash) ?? r.thumbUrl,
-      skus: t(e, r.skus),
-      alternateImageUrls: u(e, r.alternateImageUrls, r.alternateImageHashes)
+      imageUrl: u(t, r.imageHash) ?? r.imageUrl,
+      thumbUrl: u(t, r.thumbHash) ?? r.thumbUrl,
+      skus: i(t, r.skus),
+      alternateImageUrls: c(t, r.alternateImageUrls, r.alternateImageHashes)
     } : r;
   };
 }
-const l = /cdn\.shopify\.com/;
-function g({ size: o }) {
-  function n(r) {
-    return r ? new URL(r).hostname.match(l) : !1;
-  }
-  function t(r) {
-    return r ? n(r) ? r.replace(/(\.jpg|\.png|\.jpeg|\.gif|\.webp)/, `_${o}$1`) : r : "";
-  }
-  function u(r) {
-    if (r)
-      return r.map((e) => ({
-        ...e,
-        imageUrl: t(e.imageUrl)
-      }));
-  }
-  function a(r) {
-    if (r)
-      return r.map((e) => t(e));
-  }
-  return function(e) {
-    return n(e.imageUrl) ? {
-      ...e,
-      imageUrl: t(e.imageUrl),
-      thumbUrl: t(e.thumbUrl),
-      skus: u(e.skus),
-      alternateImageUrls: a(e.alternateImageUrls)
-    } : e;
-  };
+function b({ size: e }) {
+  const u = d({ size: e });
+  return U() && l(e) ? g({ size: e, fallback: u }) : u;
 }
 export {
-  i as generateThumbnailUrl,
+  f as generateThumbnailUrl,
+  d as nostoThumbnailDecorator,
   g as shopifyThumbnailDecorator,
-  s as thumbnailDecorator
+  b as thumbnailDecorator
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nosto/search-js",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "license": "ISC",
   "type": "module",
   "files": [
@@ -45,18 +45,18 @@
     "@nosto/nosto-js": "^1.4.4",
     "@testing-library/dom": "^10.4.0",
     "@types/eslint-config-prettier": "^6.11.3",
-    "@types/node": "^22.13.0",
+    "@types/node": "^22.13.1",
     "copyfiles": "^2.4.1",
-    "eslint": "^9.19.0",
+    "eslint": "^9.20.0",
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-barrel-files": "^2.1.0",
     "eslint-plugin-prettier": "^5.2.3",
     "jsdom": "^26.0.0",
-    "prettier": "^3.3.3",
-    "typedoc": "^0.27.2",
+    "prettier": "^3.5.0",
+    "typedoc": "^0.27.7",
     "typescript": "^5.7.3",
-    "typescript-eslint": "^8.22.0",
-    "vite": "^6.0.11",
+    "typescript-eslint": "^8.24.0",
+    "vite": "^6.1.0",
     "vitest": "^3.0.5"
   },
   "publishConfig": {