@scayle/storefront-product-detail 1.1.4 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,63 @@
 # @scayle/storefront-product-detail
 
+## 1.3.0
+
+### Minor Changes
+
+- **\[SEO\]** Moved the product image from the `ProductGroup` JSONLD to the `Product` JSONLD to better align with [Google's recommendation](https://developers.google.com/search/docs/appearance/structured-data/merchant-listing).
+
+  Instead of passing all product images to `useProductSeoData`, the primary product image is expected to be included in the passed `variants`.
+
+  ```ts
+  useProductSeoData({
+    name: 'Name',
+    brand: 'Brand',
+    productDescription: 'Description',
+    variants: variants.value.map((variant) => {
+      return generateProductSchema({
+        productName: 'Name',
+        variant,
+        url: `${$config.public.baseUrl}${route.fullPath}`,
+        size,
+      })
+    }),
+    images: images.value,
+    productId: product.value?.id || 0,
+    color: formatColors(colors.value),
+    variesBy: variants.value.length > 1
+      ? ['https://schema.org/size']
+      : undefined,
+  })
+
+  // Will become
+
+  useProductSeoData({
+    name: 'Name',
+    brand: 'Brand',
+    productDescription: 'Description',
+    variants: variants.value.map((variant) => {
+      return generateProductSchema({
+        productName: 'Name',
+        variant,
+        url: `${$config.public.baseUrl}${route.fullPath}`,
+        size,
+        images: images.value[0],
+      })
+    }),
+    productId: product.value?.id || 0,
+    color: formatColors(colors.value),
+    variesBy: variants.value.length > 1
+      ? ['https://schema.org/size']
+      : undefined,
+  })
+  ```
+
+## 1.2.0
+
+### Minor Changes
+
+- Update to `@nuxt/module-builder@1`. This version of Nuxt Module Builder is ESM-only, so CommonJS (`.cjs`) files will no longer be built or distributed with the package. However as of Nuxt 3, only esm is used so this should not have any impact as this module does not support Nuxt 2.
+
 ## 1.1.4
 
 ### Patch Changes

package/dist/module.json

@@ -1,13 +1,13 @@
 {
   "name": "@scayle/storefront-product-detail",
   "configKey": "product-detail",
-  "version": "1.1.4",
+  "version": "1.3.0",
   "compatibility": {
     "bridge": false,
     "nuxt": ">=3.13"
   },
   "builder": {
-    "@nuxt/module-builder": "0.8.4",
-    "unbuild": "2.0.0"
+    "@nuxt/module-builder": "1.0.1",
+    "unbuild": "3.5.0"
   }
 }

package/dist/module.mjs

@@ -1,7 +1,7 @@
 import { defineNuxtModule, createResolver, addImportsDir } from '@nuxt/kit';
 
 const PACKAGE_NAME = "@scayle/storefront-product-detail";
-const PACKAGE_VERSION = "1.1.4";
+const PACKAGE_VERSION = "1.3.0";
 const module = defineNuxtModule({
   meta: {
     name: PACKAGE_NAME,

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

@@ -16,8 +16,6 @@ interface ProductInfo {
     color: string;
     /** Array of product variants. */
     variants: WithContext<Product>[];
-    /** Array of image URLs for the product. */
-    images: string[];
     variesBy?: ProductGroup['variesBy'];
 }
 export interface UseProductSeoDataReturn {

package/dist/runtime/composables/useProductSeoData.js

@@ -19,7 +19,6 @@ export function useProductSeoData(breadcrumbs, urlParams, productInfo) {
       productId: info.productId.toString(),
       name: info.name,
       description: info.productDescription,
-      images: info.images,
       brandName: info.brand,
       color: info.color,
       variants: info.variants,

package/dist/runtime/utils/seo.d.ts

@@ -3,22 +3,43 @@ import type { Product, WithContext, ProductGroup } from 'schema-dts';
 /**
  * Generates an object following the schema.org `Product` type with context.
  *
+ * @param params - Options for generating the schema product.
+ * @param params.productName - Name of the product.
+ * @param params.variant - Variant of the product.
+ * @param params.url - URL of the product.
+ * @param params.image - URL of the product image.
+ * @param params.size - Size of the product.
+ *
  * @see https://schema.org/Product Used to specify `@type` of the returned schema.
  * @see https://schema.org/Brand Used to define schema of `brand`.
  *
  * @returns An object following the schema.org `Product` type with context.
  */
-export declare const generateProductSchema: ({ productName, variant, url, size, }: {
+export declare const generateProductSchema: ({ productName, variant, url, image, size, }: {
     productName: string;
     variant: Variant;
     url: string;
+    image: string;
     size?: string;
 }) => WithContext<Product>;
-export declare const generateProductGroupSchema: ({ productId, name, description, images, brandName, color, variants, variesBy, }: {
+/**
+ * Generates an object following the schema.org `ProductGroup` type with context.
+ *
+ * @param params - Options for generating the schema product group.
+ * @param params.productId - ID of the product group.
+ * @param params.name - Name of the product group.
+ * @param params.description - Description of the product group.
+ * @param params.brandName - Name of the brand.
+ * @param params.color - Color of the product group.
+ * @param params.variants - Variants of the product group.
+ * @param params.variesBy - Varies by of the product group.
+ *
+ * @returns An object following the schema.org `ProductGroup` type with context.
+ */
+export declare const generateProductGroupSchema: ({ productId, name, description, brandName, color, variants, variesBy, }: {
     productId: string;
     name: string;
     description: string;
-    images: string[];
     brandName: string;
     color: string;
     variants: Product[];

package/dist/runtime/utils/seo.js

@@ -20,6 +20,7 @@ export const generateProductSchema = ({
   productName,
   variant,
   url,
+  image,
   size
 }) => {
   return {
@@ -27,14 +28,14 @@ export const generateProductSchema = ({
     "@type": "Product",
     name: `${productName} (${size})`,
     size,
-    offers: generateSchemaProductOffer({ variant, baseUrl: url })
+    offers: generateSchemaProductOffer({ variant, baseUrl: url }),
+    image
   };
 };
 export const generateProductGroupSchema = ({
   productId,
   name,
   description,
-  images,
   brandName,
   color,
   variants,
@@ -46,7 +47,6 @@ export const generateProductGroupSchema = ({
     productGroupID: productId,
     name: `${name}, ${color}`,
     description,
-    image: images,
     brand: {
       "@type": "Brand",
       name: brandName

package/dist/types.d.mts

@@ -1,7 +1,7 @@
 import type { NuxtModule } from '@nuxt/schema'
 
-import type { default as Module } from './module.js'
+import type { default as Module } from './module.mjs'
 
 export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
 
-export { default } from './module.js'
+export { default } from './module.mjs'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scayle/storefront-product-detail",
-  "version": "1.1.4",
+  "version": "1.3.0",
   "description": "Collection of essential composables and utilities to work with product detail",
   "author": "SCAYLE Commerce Engine",
   "license": "MIT",
@@ -11,17 +11,15 @@
   },
   "exports": {
     ".": {
-      "types": "./dist/types.d.ts",
-      "import": "./dist/module.mjs",
-      "require": "./dist/module.cjs"
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs"
     },
     "./composables": {
       "types": "./dist/runtime/composables/index.d.ts",
       "import": "./dist/runtime/composables/index.js"
     }
   },
-  "main": "./dist/module.cjs",
-  "types": "./dist/types.d.ts",
+  "main": "./dist/module.mjs",
   "files": [
     "CHANGELOG.md",
     "dist"
@@ -33,8 +31,9 @@
     "build": "nuxt-module-build build",
     "dev": "nuxi dev playground",
     "dev:build": "nuxi build playground",
-    "prep": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
-    "lint": "eslint . --format gitlab",
+    "prep": "nuxt-module-build prepare && nuxi prepare playground",
+    "lint": "eslint .",
+    "lint:ci": "eslint . --format gitlab",
     "lint:fix": "eslint . --fix",
     "format": "dprint check",
     "format:fix": "dprint fmt",
@@ -42,7 +41,8 @@
     "test:watch": "vitest --passWithNoTests",
     "test:ci": "vitest --run --passWithNoTests --coverage --reporter=default --reporter=junit --outputFile=./coverage/junit.xml",
     "typecheck": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit",
-    "package:lint": "publint"
+    "package:lint": "publint",
+    "verify-packaging": "attw --pack . --profile esm-only"
   },
   "peerDependencies": {
     "@nuxt/kit": ">=3.13.0",
@@ -54,27 +54,28 @@
     "vue": "^3.5.13"
   },
   "devDependencies": {
-    "@nuxt/kit": "3.15.4",
-    "@nuxt/module-builder": "0.8.4",
-    "@nuxt/schema": "3.15.4",
-    "@nuxt/test-utils": "3.17.2",
-    "@scayle/eslint-config-storefront": "4.5.0",
-    "@scayle/storefront-nuxt": "8.16.0",
-    "@types/node": "22.14.0",
+    "@arethetypeswrong/cli": "0.18.0",
+    "@nuxt/kit": "3.16.2",
+    "@nuxt/module-builder": "1.0.1",
+    "@nuxt/schema": "3.16.2",
+    "@nuxt/test-utils": "3.18.0",
+    "@scayle/eslint-config-storefront": "4.5.1",
+    "@scayle/storefront-nuxt": "8.25.3",
+    "@types/node": "22.15.17",
     "@vue/test-utils": "2.4.6",
-    "@vueuse/core": "13.0.0",
+    "@vueuse/core": "13.1.0",
     "dprint": "0.49.1",
-    "eslint-formatter-gitlab": "5.1.0",
-    "eslint": "9.23.0",
-    "happy-dom": "17.4.4",
-    "nuxt": "3.15.4",
+    "eslint-formatter-gitlab": "6.0.0",
+    "eslint": "9.26.0",
+    "happy-dom": "17.4.6",
+    "nuxt": "3.16.2",
     "publint": "0.2.12",
     "schema-dts": "1.1.5",
-    "typescript": "5.8.2",
-    "unbuild": "2.0.0",
-    "vitest": "2.1.9",
-    "vue-router": "4.5.0",
-    "vue-tsc": "2.2.8",
+    "typescript": "5.8.3",
+    "unbuild": "3.5.0",
+    "vitest": "3.1.3",
+    "vue-router": "4.5.1",
+    "vue-tsc": "2.2.10",
     "vue": "3.5.13"
   }
 }

package/dist/module.cjs

@@ -1,5 +0,0 @@
-module.exports = function(...args) {
-  return import('./module.mjs').then(m => m.default.call(this, ...args))
-}
-const _meta = module.exports.meta = require('./module.json')
-module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.ts

@@ -1,8 +0,0 @@
-import * as _nuxt_schema from '@nuxt/schema';
-
-interface ModuleOptions {
-    autoImports?: boolean;
-}
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
-
-export { _default as default };

package/dist/types.d.ts

@@ -1,7 +0,0 @@
-import type { NuxtModule } from '@nuxt/schema'
-
-import type { default as Module } from './module'
-
-export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
-
-export { default } from './module'