@vue-storefront/next 2.1.0 → 3.0.0

package/dist/client.d.mts

@@ -1,5 +1,5 @@
 import { SDKApi } from '@vue-storefront/sdk';
-import { b as CreateSdkContextReturn } from './types-BpDM9bMc.mjs';
+import { b as CreateSdkContextReturn } from './types-CL1oQuKL.mjs';
 import 'react';
 
 /**
@@ -20,6 +20,6 @@ import 'react';
  * Finally you can use the `useSdk` in any client component of your application.
  * @returns [SdkProvider, useSdk] - The SDK provider and the `useSdk` hook.
  */
-declare function createSdkContext<TSdk extends SDKApi<any>>(sdk: TSdk): CreateSdkContextReturn<TSdk>;
+declare function createSdkContext<TSdk extends SDKApi<any>>(): CreateSdkContextReturn<TSdk>;
 
 export { CreateSdkContextReturn, createSdkContext };

package/dist/client.d.ts

@@ -1,5 +1,5 @@
 import { SDKApi } from '@vue-storefront/sdk';
-import { b as CreateSdkContextReturn } from './types-BpDM9bMc.js';
+import { b as CreateSdkContextReturn } from './types-CL1oQuKL.js';
 import 'react';
 
 /**
@@ -20,6 +20,6 @@ import 'react';
  * Finally you can use the `useSdk` in any client component of your application.
  * @returns [SdkProvider, useSdk] - The SDK provider and the `useSdk` hook.
  */
-declare function createSdkContext<TSdk extends SDKApi<any>>(sdk: TSdk): CreateSdkContextReturn<TSdk>;
+declare function createSdkContext<TSdk extends SDKApi<any>>(): CreateSdkContextReturn<TSdk>;
 
 export { CreateSdkContextReturn, createSdkContext };

package/dist/client.js

@@ -37,9 +37,9 @@ module.exports = __toCommonJS(client_exports);
 // src/sdk/client.tsx
 var import_script = __toESM(require("next/script"));
 var import_react = __toESM(require("react"));
-function createSdkContext(sdk) {
-  const SdkContext = (0, import_react.createContext)(sdk);
-  function SdkProvider({ children }) {
+function createSdkContext() {
+  const SdkContext = (0, import_react.createContext)(null);
+  function SdkProvider({ children, sdk }) {
     return /* @__PURE__ */ import_react.default.createElement(SdkContext.Provider, { value: sdk }, /* @__PURE__ */ import_react.default.createElement(import_script.default, { strategy: "beforeInteractive", id: "vsfMetaTag" }, `
           const vsfMetaTag = document.createElement("meta");
           vsfMetaTag.setAttribute("name", "generator");

package/dist/client.mjs

@@ -4,9 +4,9 @@ import "./chunk-EX6ADWAR.mjs";
 // src/sdk/client.tsx
 import Script from "next/script";
 import React, { createContext, useContext } from "react";
-function createSdkContext(sdk) {
-  const SdkContext = createContext(sdk);
-  function SdkProvider({ children }) {
+function createSdkContext() {
+  const SdkContext = createContext(null);
+  function SdkProvider({ children, sdk }) {
     return /* @__PURE__ */ React.createElement(SdkContext.Provider, { value: sdk }, /* @__PURE__ */ React.createElement(Script, { strategy: "beforeInteractive", id: "vsfMetaTag" }, `
           const vsfMetaTag = document.createElement("meta");
           vsfMetaTag.setAttribute("name", "generator");

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { C as Config, a as CreateSdkReturn } from './types-BpDM9bMc.mjs';
+import { C as Config, a as CreateSdkReturn } from './types-CL1oQuKL.mjs';
 import '@vue-storefront/sdk';
 import 'react';
 
@@ -13,6 +13,13 @@ interface MiddlewareConfig {
      * @example "http://localhost:4000"
      */
     ssrApiUrl?: string;
+    /**
+     * This is identifier used to invalidate the cache on CDN when the assets change.
+     * Usually it's a commit hash.
+     * @example "2c106d9619c71c3082c9b59b1d72817363c8ecb9"
+     * @default "no-cache-busting-id-set"
+     */
+    cdnCacheBustingId?: string;
 }
 interface MultistoreConfig {
     /**
@@ -41,25 +48,55 @@ interface CreateSdkOptions {
  * const options: CreateSdkOptions = {
  *   middleware: {
  *     apiUrl: "http://localhost:4000",
+ *     ssrApiUrl: "http://localhost:4000",
+ *     cdnCacheBustingId: "no-cache-busting-id-set",
+ *   },
+ *   multistore: {
+ *    enabled: false,
  *   },
  * };
  *
  * export const { getSdk, createSdkContext } = createSdk(
  *   options,
- *   ({ buildModule, middlewareModule, middlewareUrl, getRequestHeaders }) => ({
+ *   ({ buildModule, middlewareModule, config, getRequestHeaders }) => ({
  *     unified: buildModule(middlewareModule<UnifiedApiEndpoints>, {
- *       apiUrl: middlewareUrl + "/commerce",
+ *       apiUrl: config.middlewareUrl + "/commerce",
+ *       cdnCacheBustingId: config.cdnCacheBustingId,
  *       defaultRequestConfig: {
  *         headers: getRequestHeaders(),
  *       },
+ *       methodsRequestConfig: config.defaultMethodsRequestConfig.unifiedCommerce.middlewareModule,
  *     }),
  *     contentful: buildModule(contentfulModule, {
- *       apiUrl: middlewareUrl + "/cntf",
+ *       apiUrl: config.middlewareUrl + "/cntf",
  *     }),
  *   }),
  * );
  * ```
  */
 declare function createSdk<TConfig extends Record<string, any>>(options: CreateSdkOptions, configDefinition: Config<TConfig>): CreateSdkReturn<TConfig>;
+/**
+ * Creates a configuration definition for the SDK.
+ * @param config The configuration definition for the SDK.
+ * @returns An object containing SDK configuration
+ * @example
+ * ```tsx
+ * const config = defineSdkConfig(
+ *   ({ buildModule, middlewareModule, config, getRequestHeaders }) => ({
+ *     unified: buildModule(middlewareModule<UnifiedApiEndpoints>, {
+ *       apiUrl: config.middlewareUrl + "/commerce",
+ *       cdnCacheBustingId: config.cdnCacheBustingId,
+ *       defaultRequestConfig: {
+ *         headers: getRequestHeaders(),
+ *       },
+ *       methodsRequestConfig: config.defaultMethodsRequestConfig.unifiedCommerce.middlewareModule,
+ *     }),
+ *     contentful: buildModule(contentfulModule, {
+ *       apiUrl: config.middlewareUrl + "/cntf",
+ *     }),
+ *   })
+ * );
+ */
+declare function defineSdkConfig<TConfig extends Record<string, any>>(config: Config<TConfig>): Config<TConfig>;
 
-export { type CreateSdkOptions, createSdk };
+export { type CreateSdkOptions, createSdk, defineSdkConfig };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { C as Config, a as CreateSdkReturn } from './types-BpDM9bMc.js';
+import { C as Config, a as CreateSdkReturn } from './types-CL1oQuKL.js';
 import '@vue-storefront/sdk';
 import 'react';
 
@@ -13,6 +13,13 @@ interface MiddlewareConfig {
      * @example "http://localhost:4000"
      */
     ssrApiUrl?: string;
+    /**
+     * This is identifier used to invalidate the cache on CDN when the assets change.
+     * Usually it's a commit hash.
+     * @example "2c106d9619c71c3082c9b59b1d72817363c8ecb9"
+     * @default "no-cache-busting-id-set"
+     */
+    cdnCacheBustingId?: string;
 }
 interface MultistoreConfig {
     /**
@@ -41,25 +48,55 @@ interface CreateSdkOptions {
  * const options: CreateSdkOptions = {
  *   middleware: {
  *     apiUrl: "http://localhost:4000",
+ *     ssrApiUrl: "http://localhost:4000",
+ *     cdnCacheBustingId: "no-cache-busting-id-set",
+ *   },
+ *   multistore: {
+ *    enabled: false,
  *   },
  * };
  *
  * export const { getSdk, createSdkContext } = createSdk(
  *   options,
- *   ({ buildModule, middlewareModule, middlewareUrl, getRequestHeaders }) => ({
+ *   ({ buildModule, middlewareModule, config, getRequestHeaders }) => ({
  *     unified: buildModule(middlewareModule<UnifiedApiEndpoints>, {
- *       apiUrl: middlewareUrl + "/commerce",
+ *       apiUrl: config.middlewareUrl + "/commerce",
+ *       cdnCacheBustingId: config.cdnCacheBustingId,
  *       defaultRequestConfig: {
  *         headers: getRequestHeaders(),
  *       },
+ *       methodsRequestConfig: config.defaultMethodsRequestConfig.unifiedCommerce.middlewareModule,
  *     }),
  *     contentful: buildModule(contentfulModule, {
- *       apiUrl: middlewareUrl + "/cntf",
+ *       apiUrl: config.middlewareUrl + "/cntf",
  *     }),
  *   }),
  * );
  * ```
  */
 declare function createSdk<TConfig extends Record<string, any>>(options: CreateSdkOptions, configDefinition: Config<TConfig>): CreateSdkReturn<TConfig>;
+/**
+ * Creates a configuration definition for the SDK.
+ * @param config The configuration definition for the SDK.
+ * @returns An object containing SDK configuration
+ * @example
+ * ```tsx
+ * const config = defineSdkConfig(
+ *   ({ buildModule, middlewareModule, config, getRequestHeaders }) => ({
+ *     unified: buildModule(middlewareModule<UnifiedApiEndpoints>, {
+ *       apiUrl: config.middlewareUrl + "/commerce",
+ *       cdnCacheBustingId: config.cdnCacheBustingId,
+ *       defaultRequestConfig: {
+ *         headers: getRequestHeaders(),
+ *       },
+ *       methodsRequestConfig: config.defaultMethodsRequestConfig.unifiedCommerce.middlewareModule,
+ *     }),
+ *     contentful: buildModule(contentfulModule, {
+ *       apiUrl: config.middlewareUrl + "/cntf",
+ *     }),
+ *   })
+ * );
+ */
+declare function defineSdkConfig<TConfig extends Record<string, any>>(config: Config<TConfig>): Config<TConfig>;
 
-export { type CreateSdkOptions, createSdk };
+export { type CreateSdkOptions, createSdk, defineSdkConfig };

package/dist/index.js

@@ -36,7 +36,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  createSdk: () => createSdk
+  createSdk: () => createSdk,
+  defineSdkConfig: () => defineSdkConfig
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -79,23 +80,19 @@ function composeMiddlewareUrl({
 }
 
 // ../shared/src/helpers/defaultConfigs.ts
-var contextConfig = {
+var defaultMethodsRequestConfig = {
   unifiedCommerce: {
     middlewareModule: {
-      defaultMethodsRequestConfig: {
-        getCategories: { method: "GET" },
-        getProductDetails: { method: "GET" },
-        getProductReviews: { method: "GET" },
-        getProducts: { method: "GET" },
-        searchProducts: { method: "GET" }
-      }
+      getCategories: { method: "GET" },
+      getProductDetails: { method: "GET" },
+      getProductReviews: { method: "GET" },
+      getProducts: { method: "GET" },
+      searchProducts: { method: "GET" }
     }
   },
   unifiedCms: {
     middlewareModule: {
-      defaultMethodsRequestConfig: {
-        getEntries: { method: "GET" }
-      }
+      getEntries: { method: "GET" }
     }
   }
 };
@@ -126,20 +123,22 @@ function resolveDynamicContext(context) {
 // src/sdk/index.tsx
 function createSdk(options, configDefinition) {
   function getSdk(dynamicContext = {}) {
+    var _a;
     const { getRequestHeaders } = resolveDynamicContext(dynamicContext);
     const middlewareUrl = composeMiddlewareUrl({
       options,
       headers: getRequestHeaders()
     });
     const resolvedConfig = configDefinition({
-      defaults: contextConfig,
+      defaults: defaultMethodsRequestConfig,
       buildModule: import_sdk.buildModule,
       middlewareModule: import_sdk.middlewareModule,
       getRequestHeaders,
       middlewareUrl,
       config: {
         middlewareUrl,
-        defaults: contextConfig
+        defaultMethodsRequestConfig,
+        cdnCacheBustingId: (_a = options.middleware.cdnCacheBustingId) != null ? _a : "no-cache-busting-id-set"
       }
     });
     return (0, import_sdk.initSDK)(resolvedConfig);
@@ -148,7 +147,11 @@ function createSdk(options, configDefinition) {
     getSdk
   };
 }
+function defineSdkConfig(config) {
+  return config;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  createSdk
+  createSdk,
+  defineSdkConfig
 });

package/dist/index.mjs

@@ -42,23 +42,19 @@ function composeMiddlewareUrl({
 }
 
 // ../shared/src/helpers/defaultConfigs.ts
-var contextConfig = {
+var defaultMethodsRequestConfig = {
   unifiedCommerce: {
     middlewareModule: {
-      defaultMethodsRequestConfig: {
-        getCategories: { method: "GET" },
-        getProductDetails: { method: "GET" },
-        getProductReviews: { method: "GET" },
-        getProducts: { method: "GET" },
-        searchProducts: { method: "GET" }
-      }
+      getCategories: { method: "GET" },
+      getProductDetails: { method: "GET" },
+      getProductReviews: { method: "GET" },
+      getProducts: { method: "GET" },
+      searchProducts: { method: "GET" }
     }
   },
   unifiedCms: {
     middlewareModule: {
-      defaultMethodsRequestConfig: {
-        getEntries: { method: "GET" }
-      }
+      getEntries: { method: "GET" }
     }
   }
 };
@@ -89,20 +85,22 @@ function resolveDynamicContext(context) {
 // src/sdk/index.tsx
 function createSdk(options, configDefinition) {
   function getSdk(dynamicContext = {}) {
+    var _a;
     const { getRequestHeaders } = resolveDynamicContext(dynamicContext);
     const middlewareUrl = composeMiddlewareUrl({
       options,
       headers: getRequestHeaders()
     });
     const resolvedConfig = configDefinition({
-      defaults: contextConfig,
+      defaults: defaultMethodsRequestConfig,
       buildModule,
       middlewareModule,
       getRequestHeaders,
       middlewareUrl,
       config: {
         middlewareUrl,
-        defaults: contextConfig
+        defaultMethodsRequestConfig,
+        cdnCacheBustingId: (_a = options.middleware.cdnCacheBustingId) != null ? _a : "no-cache-busting-id-set"
       }
     });
     return initSDK(resolvedConfig);
@@ -111,6 +109,10 @@ function createSdk(options, configDefinition) {
     getSdk
   };
 }
+function defineSdkConfig(config) {
+  return config;
+}
 export {
-  createSdk
+  createSdk,
+  defineSdkConfig
 };

package/dist/{types-BpDM9bMc.d.mts → types-CL1oQuKL.d.mts}

@@ -1,34 +1,30 @@
 import { SDKApi, buildModule, middlewareModule } from '@vue-storefront/sdk';
 import { ReactNode } from 'react';
 
-declare const contextConfig: {
+declare const defaultMethodsRequestConfig: {
     readonly unifiedCommerce: {
         readonly middlewareModule: {
-            readonly defaultMethodsRequestConfig: {
-                readonly getCategories: {
-                    readonly method: "GET";
-                };
-                readonly getProductDetails: {
-                    readonly method: "GET";
-                };
-                readonly getProductReviews: {
-                    readonly method: "GET";
-                };
-                readonly getProducts: {
-                    readonly method: "GET";
-                };
-                readonly searchProducts: {
-                    readonly method: "GET";
-                };
+            readonly getCategories: {
+                readonly method: "GET";
+            };
+            readonly getProductDetails: {
+                readonly method: "GET";
+            };
+            readonly getProductReviews: {
+                readonly method: "GET";
+            };
+            readonly getProducts: {
+                readonly method: "GET";
+            };
+            readonly searchProducts: {
+                readonly method: "GET";
             };
         };
     };
     readonly unifiedCms: {
         readonly middlewareModule: {
-            readonly defaultMethodsRequestConfig: {
-                readonly getEntries: {
-                    readonly method: "GET";
-                };
+            readonly getEntries: {
+                readonly method: "GET";
             };
         };
     };
@@ -46,17 +42,25 @@ type DynamicContext = {
 type StaticContext = {
     buildModule: typeof buildModule;
     middlewareModule: typeof middlewareModule;
+    /**
+     * @deprecated Use `config.middlewareUrl` instead.
+     */
     middlewareUrl: string;
-    defaults: typeof contextConfig;
+    /**
+     * @deprecated Use `config.defaultMethodsRequestConfig` instead.
+     */
+    defaults: typeof defaultMethodsRequestConfig;
     config: {
         middlewareUrl: string;
-        defaults: typeof contextConfig;
+        defaultMethodsRequestConfig: typeof defaultMethodsRequestConfig;
+        cdnCacheBustingId: string;
     };
 };
 type InjectedContext = DynamicContext & StaticContext;
 type Config<TConfig> = (context: InjectedContext) => TConfig;
-type SdkProviderProps = {
+type SdkProviderProps<TSdk> = {
     children: ReactNode;
+    sdk: TSdk;
 };
 interface CreateSdkReturn<TConfig extends Record<string, any>> {
     /**
@@ -105,7 +109,7 @@ interface CreateSdkReturn<TConfig extends Record<string, any>> {
     getSdk: (dynamicContext?: GetSdkContext) => SDKApi<TConfig>;
 }
 type CreateSdkContextReturn<TSdk extends SDKApi<any>> = readonly [
-    ({ children }: SdkProviderProps) => JSX.Element,
+    ({ children }: SdkProviderProps<TSdk>) => JSX.Element,
     () => TSdk
 ];
 

package/dist/{types-BpDM9bMc.d.ts → types-CL1oQuKL.d.ts}

@@ -1,34 +1,30 @@
 import { SDKApi, buildModule, middlewareModule } from '@vue-storefront/sdk';
 import { ReactNode } from 'react';
 
-declare const contextConfig: {
+declare const defaultMethodsRequestConfig: {
     readonly unifiedCommerce: {
         readonly middlewareModule: {
-            readonly defaultMethodsRequestConfig: {
-                readonly getCategories: {
-                    readonly method: "GET";
-                };
-                readonly getProductDetails: {
-                    readonly method: "GET";
-                };
-                readonly getProductReviews: {
-                    readonly method: "GET";
-                };
-                readonly getProducts: {
-                    readonly method: "GET";
-                };
-                readonly searchProducts: {
-                    readonly method: "GET";
-                };
+            readonly getCategories: {
+                readonly method: "GET";
+            };
+            readonly getProductDetails: {
+                readonly method: "GET";
+            };
+            readonly getProductReviews: {
+                readonly method: "GET";
+            };
+            readonly getProducts: {
+                readonly method: "GET";
+            };
+            readonly searchProducts: {
+                readonly method: "GET";
             };
         };
     };
     readonly unifiedCms: {
         readonly middlewareModule: {
-            readonly defaultMethodsRequestConfig: {
-                readonly getEntries: {
-                    readonly method: "GET";
-                };
+            readonly getEntries: {
+                readonly method: "GET";
             };
         };
     };
@@ -46,17 +42,25 @@ type DynamicContext = {
 type StaticContext = {
     buildModule: typeof buildModule;
     middlewareModule: typeof middlewareModule;
+    /**
+     * @deprecated Use `config.middlewareUrl` instead.
+     */
     middlewareUrl: string;
-    defaults: typeof contextConfig;
+    /**
+     * @deprecated Use `config.defaultMethodsRequestConfig` instead.
+     */
+    defaults: typeof defaultMethodsRequestConfig;
     config: {
         middlewareUrl: string;
-        defaults: typeof contextConfig;
+        defaultMethodsRequestConfig: typeof defaultMethodsRequestConfig;
+        cdnCacheBustingId: string;
     };
 };
 type InjectedContext = DynamicContext & StaticContext;
 type Config<TConfig> = (context: InjectedContext) => TConfig;
-type SdkProviderProps = {
+type SdkProviderProps<TSdk> = {
     children: ReactNode;
+    sdk: TSdk;
 };
 interface CreateSdkReturn<TConfig extends Record<string, any>> {
     /**
@@ -105,7 +109,7 @@ interface CreateSdkReturn<TConfig extends Record<string, any>> {
     getSdk: (dynamicContext?: GetSdkContext) => SDKApi<TConfig>;
 }
 type CreateSdkContextReturn<TSdk extends SDKApi<any>> = readonly [
-    ({ children }: SdkProviderProps) => JSX.Element,
+    ({ children }: SdkProviderProps<TSdk>) => JSX.Element,
     () => TSdk
 ];
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@vue-storefront/next",
   "description": "Vue Storefront dedicated features for Next.js",
   "license": "MIT",
-  "version": "2.1.0",
+  "version": "3.0.0",
   "exports": {
     ".": {
       "import": "./dist/index.mjs",
@@ -30,8 +30,8 @@
   ],
   "scripts": {
     "build": "tsup && yarn build:app-router && yarn build:pages-router",
-    "build:app-router": "cd __tests__/apps/app-router && yarn build",
-    "build:pages-router": "cd __tests__/apps/pages-router && yarn build",
+    "build:app-router": "cd __tests__/apps/app-router && yarn install && yarn build",
+    "build:pages-router": "cd __tests__/apps/pages-router && yarn install && yarn build",
     "dev:app-router": "cd __tests__/apps/app-router && yarn dev",
     "dev:pages-router": "cd __tests__/apps/pages-router && yarn dev",
     "dev:middleware": "cd ../shared/src/__tests__/middleware && yarn dev",