@scayle/storefront-product-detail 0.2.0 → 0.3.0

package/dist/runtime/composables/useProductSeoData.d.ts

@@ -1,4 +1,4 @@
-import { type ComputedRef } from 'vue';
+import { type ComputedRef, type MaybeRefOrGetter } from 'vue';
 import type { BreadcrumbItem, Variant } from '@scayle/storefront-nuxt';
 import type { WithContext, Product, BreadcrumbList } from 'schema-dts';
 type CanonicalLink = Record<'rel' | 'key' | 'href', string>;
@@ -10,7 +10,7 @@ interface ProductInfo {
     variants: Variant[];
 }
 export interface UseProductSeoDataReturn {
-    title: string;
+    title: ComputedRef<string>;
     robots: string;
     canonicalLink: ComputedRef<CanonicalLink[]>;
     productJsonLd: ComputedRef<WithContext<Product>>;
@@ -19,10 +19,10 @@ export interface UseProductSeoDataReturn {
 /**
  * Composable function to generate SEO-related data for a product page.
  *
- * @param {BreadcrumbItem[]} breadcrumbs - Array of breadcrumb items representing the navigation path to the product.
- * @param {UrlParams} urlParams - Object containing baseUrl and fullPath to build and sanitize canonicalUrl.
- * @param {string[]} images - Array of image URLs for the product.
- * @param {ProductInfo} productInfo - Object containing product information including name, brand, description, and variants.
+ * @param {MaybeRefOrGetter<BreadcrumbItem[]>} breadcrumbs - Array of breadcrumb items representing the navigation path to the product.
+ * @param {MaybeRefOrGetter<UrlParams>} urlParams - Object containing baseUrl and fullPath to build and sanitize canonicalUrl.
+ * @param {MaybeRefOrGetter<string[]>} images - Array of image URLs for the product.
+ * @param {MaybeRefOrGetter<ProductInfo>} productInfo - Object containing product information including name, brand, description, and variants.
  * @property {string} name - The name of the product.
  * @property {string} brand - The brand of the product.
  * @property {string} productDescription - A description of the product.
@@ -31,9 +31,9 @@ export interface UseProductSeoDataReturn {
  * @returns {UseProductSeoDataReturn} An object containing SEO data for the product page with following properties:
  * @property {string} robots - Robots meta tag value, typically "index, follow".
  * @property {ComputedRef<CanonicalLink[]>} canonicalLink - Computed ref for canonical link tag metadata.
- * @property {string} title - The title of the product.
+ * @property {ComputedRef<string>} title - The title of the product.
  * @property {ComputedRef<WithContext<Product>>} productJsonLd - Computed ref containing JSON-LD structured data for the product.
  * @property {ComputedRef<WithContext<BreadcrumbList>>} productBreadcrumbJsonLd - Computed ref containing JSON-LD structured data for product breadcrumbs.
  */
-export declare function useProductSeoData(breadcrumbs: BreadcrumbItem[], urlParams: UrlParams, images: string[], productInfo: ProductInfo): UseProductSeoDataReturn;
+export declare function useProductSeoData(breadcrumbs: MaybeRefOrGetter<BreadcrumbItem[]>, urlParams: MaybeRefOrGetter<UrlParams>, images: MaybeRefOrGetter<string[]>, productInfo: MaybeRefOrGetter<ProductInfo>): UseProductSeoDataReturn;
 export {};

package/dist/runtime/composables/useProductSeoData.js

@@ -1,4 +1,4 @@
-import { computed } from "vue";
+import { computed, toValue } from "vue";
 import {
   generateCategoryBreadcrumbSchema,
   sanitizeCanonicalURL
@@ -6,7 +6,7 @@ import {
 import { generateProductSchema } from "../utils/seo.js";
 export function useProductSeoData(breadcrumbs, urlParams, images, productInfo) {
   const canonicalUrl = computed(() => {
-    const url = `${urlParams.baseUrl}${urlParams.fullPath}`;
+    const url = `${toValue(urlParams).baseUrl}${toValue(urlParams).fullPath}`;
     return sanitizeCanonicalURL(url, []);
   });
   const canonicalLink = computed(() => {
@@ -15,21 +15,21 @@ export function useProductSeoData(breadcrumbs, urlParams, images, productInfo) {
   const robots = "index, follow";
   const productJsonLd = computed(() => {
     return generateProductSchema({
-      productName: productInfo.name || "",
-      brandName: productInfo.brand || "",
+      productName: toValue(productInfo).name || "",
+      brandName: toValue(productInfo).brand || "",
       url: canonicalUrl.value,
-      variants: productInfo.variants || [],
-      images,
-      description: productInfo.productDescription
+      variants: toValue(productInfo).variants || [],
+      images: toValue(images),
+      description: toValue(productInfo).productDescription
     });
   });
   const productBreadcrumbJsonLd = computed(() => {
-    return generateCategoryBreadcrumbSchema(breadcrumbs);
+    return generateCategoryBreadcrumbSchema(toValue(breadcrumbs));
   });
   return {
     robots,
     canonicalLink,
-    title: productInfo.name,
+    title: computed(() => toValue(productInfo).name),
     productJsonLd,
     productBreadcrumbJsonLd
   };

package/dist/runtime/composables/useProductSeoData.test.js

@@ -1,6 +1,7 @@
 import { describe, it, expect } from "vitest";
 import { useProductSeoData } from "~/src/runtime";
 import { variantFactory } from "@scayle/storefront-nuxt/dist/test/factories";
+import { ref } from "vue";
 describe("useProductSeoData", () => {
   it("should return product seo data from product", () => {
     const {
@@ -20,7 +21,7 @@ describe("useProductSeoData", () => {
         productDescription: "description"
       }
     );
-    expect(title).toBe("name");
+    expect(title.value).toBe("name");
     expect(productBreadcrumbJsonLd.value).toStrictEqual({
       "@context": "https://schema.org",
       "@type": "BreadcrumbList",
@@ -65,4 +66,114 @@ describe("useProductSeoData", () => {
       }
     ]);
   });
+  it("should handle reactivity correctly with changing parameters", () => {
+    const breadcrubs = [{ value: "value", to: "/" }];
+    const urlParams = { baseUrl: "baseUrl", fullPath: "fullPath" };
+    const productInfo = ref({
+      name: "name",
+      variants: [variantFactory.build({ id: 1 })],
+      brand: "brand",
+      productDescription: "description"
+    });
+    const {
+      title,
+      productBreadcrumbJsonLd,
+      productJsonLd,
+      canonicalLink
+    } = useProductSeoData(
+      breadcrubs,
+      urlParams,
+      [],
+      productInfo
+    );
+    expect(title.value).toBe("name");
+    expect(productBreadcrumbJsonLd.value).toStrictEqual({
+      "@context": "https://schema.org",
+      "@type": "BreadcrumbList",
+      "itemListElement": [
+        {
+          "@type": "ListItem",
+          "item": "/",
+          "name": "value",
+          "position": 1
+        }
+      ]
+    });
+    expect(productJsonLd.value).toStrictEqual({
+      "@context": "https://schema.org",
+      "@type": "Product",
+      "brand": {
+        "@type": "Brand",
+        "name": "brand"
+      },
+      "description": "description",
+      "image": [],
+      "name": "name",
+      "offers": [
+        {
+          "@type": "Offer",
+          "availability": "https://schema.org/InStock",
+          "itemCondition": "https://schema.org/NewCondition",
+          "mpn": void 0,
+          "price": 1,
+          "priceCurrency": "USD",
+          "sku": "1"
+        }
+      ],
+      "url": "baseUrlfullPath"
+    });
+    expect(canonicalLink.value).toStrictEqual([
+      {
+        "href": "baseUrlfullPath",
+        "key": "canonical",
+        "rel": "canonical"
+      }
+    ]);
+    breadcrubs[0].to = "/other";
+    urlParams.baseUrl = "otherUrl";
+    productInfo.value.name = "otherName";
+    expect(title.value).toBe("otherName");
+    expect(productBreadcrumbJsonLd.value).toStrictEqual({
+      "@context": "https://schema.org",
+      "@type": "BreadcrumbList",
+      "itemListElement": [
+        {
+          "@type": "ListItem",
+          "item": "/other",
+          "name": "value",
+          "position": 1
+        }
+      ]
+    });
+    expect(productJsonLd.value).toStrictEqual({
+      "@context": "https://schema.org",
+      "@type": "Product",
+      "brand": {
+        "@type": "Brand",
+        "name": "brand"
+      },
+      "description": "description",
+      "image": [],
+      "name": "otherName",
+      "offers": [
+        {
+          "@type": "Offer",
+          "availability": "https://schema.org/InStock",
+          "itemCondition": "https://schema.org/NewCondition",
+          "mpn": void 0,
+          "price": 1,
+          "priceCurrency": "USD",
+          "sku": "1"
+        }
+      ],
+      "url": "otherUrlfullPath"
+    });
+    expect(canonicalLink.value).toStrictEqual([
+      {
+        "href": "otherUrlfullPath",
+        "key": "canonical",
+        "rel": "canonical"
+      }
+    ]);
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scayle/storefront-product-detail",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Collection of essential composables and utilities to work with product detail",
   "author": "SCAYLE Commerce Engine",
   "license": "MIT",
@@ -41,10 +41,10 @@
   },
   "peerDependencies": {
     "@nuxt/kit": "^3.13.0",
-    "@scayle/storefront-nuxt": "^7.93.0",
+    "@scayle/storefront-nuxt": "^7.93.0 || ^8.0.0",
     "@vue/test-utils": "2.4.6",
-    "@vueuse/core": "11.2.0",
-    "vue-router": "4.4.5"
+    "@vueuse/core": "12.0.0",
+    "vue-router": "4.5.0"
   },
   "devDependencies": {
     "@nuxt/kit": "3.13.2",
@@ -52,19 +52,19 @@
     "@nuxt/schema": "3.13.2",
     "@nuxt/test-utils": "3.14.4",
     "@scayle/eslint-config-storefront": "4.3.2",
-    "@scayle/storefront-nuxt": "7.95.0",
-    "@types/node": "22.9.0",
+    "@scayle/storefront-nuxt": "8.0.0",
+    "@types/node": "22.10.1",
     "@vue/test-utils": "2.4.6",
-    "@vueuse/core": "11.2.0",
-    "dprint": "0.47.5",
-    "eslint": "9.14.0",
-    "happy-dom": "15.11.6",
+    "@vueuse/core": "12.0.0",
+    "dprint": "0.47.6",
+    "eslint": "9.16.0",
+    "happy-dom": "15.11.7",
     "eslint-formatter-gitlab": "5.1.0",
     "nuxt": "3.13.2",
     "publint": "0.2.12",
     "typescript": "5.6.3",
-    "vitest": "2.1.5",
-    "vue-router": "4.4.5",
+    "vitest": "2.1.8",
+    "vue-router": "4.5.0",
     "vue-tsc": "2.1.10"
   }
 }