@vue-storefront/next

6.0.0-rc.0

Major Changes

Replace legacy packages with a connect package

5.0.0

Major Changes

CHANGED The config parameter available in the callback passed to defineSdkConfig() no longer contains computed middlewareUrl property. It now exposes apiUrl and ssrApiUrl that should be used instead.
CHANGED The middleware.ssrApiUrl parameter is now required in the resolveSdkOptions() method.

Migration guide

Update environment variables

In the apps/storefront-unified-nextjs/sdk/options.ts file, verify the NEXT_PUBLIC_ALOKAI_MIDDLEWARE_SSR_API_URL environment variable exists:

const ssrApiUrl = env('NEXT_PUBLIC_ALOKAI_MIDDLEWARE_SSR_API_URL');

+ if (!ssrApiUrl) {
+   throw new Error('NEXT_PUBLIC_ALOKAI_MIDDLEWARE_SSR_API_URL is required to run the app');
+ }

See our guide on initializing the SDK for a complete version of the file.

Update SDK configuration file

Update your SDK configuration file (apps/storefront-unified-nextjs/sdk/config.ts) so that registered modules use apiUrl and ssrApiUrl properties instead of middlewareUrl.

import { defineSdkConfig } from '@vue-storefront/next';

export function getSdkConfig() {
  return defineSdkConfig(({ buildModule, config, getRequestHeaders, middlewareModule }) => ({
    commerce: buildModule(middlewareModule, {
-     apiUrl: `${config.middlewareUrl}/commerce`,
+     apiUrl: `${config.apiUrl}/commerce`,
+     ssrApiUrl: `${config.ssrApiUrl}/commerce`,
    }),
  }));
}

4.3.2

Patch Changes

CHANGED getSdk' getRequestHeaders configuration property now allows you to pass in method returning both headers and cookies of your next application.

4.3.1

Patch Changes

CHANGED Update JSDoc for createAlokaiContext method.

4.3.0

Minor Changes

ADDED support for the logger utility and createLogger function to initialize the logger on the storefront layer

4.2.0

Minor Changes

CHANGED defaultMethodsRequestConfig, so the getCategory, and getPage methods will use GET request as a default.

4.1.1

Patch Changes

CHANGED the package @vue-storefront/sdk is now a peer dependency instead of dependency

4.1.0

Minor Changes

CHANGE: Added the resolveSdkOptions helper that automatically setup proper SSR & SPA URLs for middleware when multistore option is enabled. To use it, change your SDK configuration:

-import type { CreateSdkOptions } from '@vue-storefront/next';
+import { resolveSdkOptions } from '@vue-storefront/next';

-const options: CreateSdkOptions = {
+const options = resolveSdkOptions({
  middleware: {
    apiUrl,
    cdnCacheBustingId,
    ssrApiUrl,
  },
  multistore: {
    enabled: isMultiStoreEnabled,
  },
});

4.0.0

ADDED Global State Management with Zustand to improve state organization and sharing across your application.
- Hooks Available:
  - useSfCartState: Access and update cart state.
  - useSfCustomerState: Manage customer information.
  - useSfCurrencyState and useSfCurrenciesState: Handle currency data.
  - useSfLocaleState and useSfLocalesState: Manage locale settings.
- State Ready to be Shared with Storefront Modules: Share state seamlessly between Storefront applications and Storefront Modules.
  - Learn More about Storefront Modules.
Example Usage:
```
import { useSfCartState, useSfCustomerState } from "@/sdk/alokai-context";

export default function MyComponent() {
  const [cart] = useSfCartState();
  const [customer] = useSfCustomerState();

  return (
    <div>
      <p>Cart: {JSON.stringify(cart)}</p>
      <p>Customer: {JSON.stringify(customer)}</p>
    </div>
  );
}
```

CHANGED createSdkContext to createAlokaiContext. It now returns an object with multiple properties instead of an array. The new structure supports both SDK context and the global state management context.
Before:

import { createSdkContext } from "@vue-storefront/next/client";

const [SdkProvider, useSdk] = createSdkContext();

After:

import { createAlokaiContext } from "@vue-storefront/next/client";

const { AlokaiProvider, useSdk } = createAlokaiContext();

REMOVED SdkProvider component. State management and SDK context are now handled by the AlokaiProvider component. Replace SdkProvider with AlokaiProvider as shown in the Migration Guide.

Patch Changes

Updated dependencies:
- @vue-storefront/sdk@3.2.0

Migration Guide

To upgrade to version 4.0.0, follow these steps:

1. Replace `createSdkContext` with `createAlokaiContext`

Update your imports and change how the context is created.

Before:

import { createSdkContext } from "@vue-storefront/next/client";

const [SdkProvider, useSdk] = createSdkContext();

After:

import { createAlokaiContext } from "@vue-storefront/next/client";

const { AlokaiProvider, useSdk } = createAlokaiContext();

2. Replace `SdkProvider` with `AlokaiProvider`

Wrap your application with the AlokaiProvider component.

Before:

<SdkProvider sdk={getSdk()}>{children}</SdkProvider>

After:

<AlokaiProvider
  initialData={{
    currencies: initialCurrency.currencies,
    currency: initialCurrency.currentCurrency,
    locale: locale as SfLocale,
    locales: locales as SfLocale[],
  }}
  sdk={getSdk()}
>
  {children}
</AlokaiProvider>
);

For the App Router you can use the root layout to wrap the application with the AlokaiProvider component and for the Pages Router you can use the Custom App file. You can remove the SdkProvider component. Tip: You can get the initialCurrency by calling sdk.unified.getCurrencies().

3. Remove the `sdk-context.tsx` file

Replace your custom SDK context file with a new context file using createAlokaiContext.

New alokai-context.tsx:

"use client";

import { createAlokaiContext } from "@vue-storefront/next/client";
import type { Sdk } from "./sdk.server";
import type { SfContract } from "storefront-middleware/types";

export const {
  AlokaiProvider,
  useSdk,
  useSfCartState,
  useSfCustomerState,
  useSfCurrencyState,
  useSfLocaleState,
  useSfLocalesState,
} = createAlokaiContext<Sdk, SfContract>();

4. Replace `useSdk` Hook

Update your imports to use the useSdk hook from alokai-context.

Before:

import { useSdk } from "@/sdk/sdk-context";

After:

import { useSdk } from "@/sdk/alokai-context";

5. Add `StateObserver` Component

Synchronize query client state with the global state management. Example:

Example:

import { QueryObserver, useQueryClient } from "@tanstack/react-query";
import type { GetCart, GetCustomer } from "@vsf-enterprise/unified-api-sapcc";
import { type PropsWithChildren, useEffect } from "react";

import { useCustomerKey } from "@/hooks";
import {
  useSdk,
  useSfCartState,
  useSfCustomerState,
  useSfCurrencyState,
} from "@/sdk/alokai-context";

export default function StateObserver({ children }: PropsWithChildren) {
  const sdk = useSdk();
  const [, setCustomer] = useSfCustomerState();
  const [, setCart] = useSfCartState();
  const [, setCurrency] = useSfCurrencyState();
  const queryClient = useQueryClient();
  const cartObserver = new QueryObserver<Awaited<ReturnType<GetCart>>>(
    queryClient,
    {
      queryFn: () => sdk.unified.getCart(),
      queryKey: ["cart", "main"],
    }
  );
  const customerObserver = new QueryObserver<Awaited<ReturnType<GetCustomer>>>(
    queryClient,
    {
      queryFn: () => sdk.unified.getCustomer(),
      queryKey: useCustomerKey,
    }
  );
  const currencyObserver = new QueryObserver<
    Awaited<ReturnType<GetCurrencies>>
  >(queryClient, {
    queryFn: () => sdk.unified.getCurrencies(),
    queryKey: ["settings", "currencies"],
  });

  useEffect(() => {
    const unsubscribeCart = cartObserver.subscribe(({ data }) => {
      setCart(data);
    });
    const unsubscribeCustomer = customerObserver.subscribe(({ data }) => {
      setCustomer(data?.customer);
    });
    const unsubscribeCurrency = currencyObserver.subscribe(({ data }) => {
      setCurrency(data);
    });

    return () => {
      unsubscribeCart();
      unsubscribeCustomer();
      unsubscribeCurrency();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return children;
}

Place the StateObserver below the AlokaiProvider.

6. Update Locale Management

Whenever the locale changes, update it in the global state using the useSfLocaleState hook.

Example:

import { useSfLocaleState } from "@/sdk/alokai-context";

function updateLocale(newLocale) {
  const [, setLocale] = useSfLocaleState();
  setLocale(newLocale);
}

3.0.1

Patch Changes

FIXED: Added getCurrencies unified endpoint to be fetch by HTTP GET. This change enable caching this endpoint on CDN.

3.0.0

Major Changes

BREAKING CHANGE: Now the SDK is separately initialized on the server and client. We recommend splitting configuration files for SDK Options and Configuration to re-use them between instances. Introduce the defineSdkConfig helper function. Changed the SdkProvider interface, taking only type and no arguments. The SDK instance is passed to the Provider in the place where it's used.

Minor Changes

ADDED Value of Busting ID for CDN Cache. You can access it via config.cdnCacheBustingId. CHANGED Deprecated middlewareUrl in defineSdkConfig context. Use config.middlewareUrl instead. CHANGED Deprecated defaults in defineSdkConfig context. Use config.defaultMethodsRequestConfig instead.

2.1.0

Minor Changes

ADDED Added .config parameter in createSdk callback

Patch Changes

Updated dependencies:
- @vue-storefront/sdk@3.1.0

2.0.1

Patch Changes

Updated dependencies:
- @vue-storefront/sdk@3.0.0

2.0.0

CHANGED Updated the @vue-storefront/sdk dependency to version 2.0.0.
ADDED defaults property to the injected context

1.1.1

FIXED "The inferred type of 'SdkProvider' cannot be named without a reference to (...)" error when calling createSdkContext.

1.1.0

ADDED middlewareModule to createSdk params.

sdk.config.ts

- import { UnifiedApiExtension } from "storefront-middleware/types"
+ import { UnifiedEndpoints } from "storefront-middleware/types"

export const { getSdk } = createSdk(
  options,
-  ({ buildModule, middlewareUrl, getRequestHeaders }) => ({
-    commerce: buildModule(unifiedModule<UnifiedApiExtension>, {
-      apiUrl: `${middlewareUrl}/commerce`,
-      requestOptions: {
-        headers: getRequestHeaders,
+  ({ buildModule, middlewareModule, middlewareUrl, getRequestHeaders }) => ({
+    commerce: buildModule(middlewareModule<UnifiedEndpoints>, {
+      apiUrl: `${middlewareUrl}/commerce`,
+      defaultRequestConfig: {
+        headers: getRequestHeaders(),
      },
    }),
  })
);

1.0.2

FIXED Multi-store URL calculation, now working correctly in the browser.

1.0.1

CHANGED Set @vue-storefront/sdk as a dependency instead of a peer dependency

1.0.0

Initialized the package

@vue-storefront/next

6.0.0-rc.0

Major Changes

5.0.0

Major Changes

Migration guide

4.3.2

Patch Changes

4.3.1

Patch Changes

4.3.0

Minor Changes

4.2.0

Minor Changes

4.1.1

Patch Changes

4.1.0

Minor Changes

4.0.0

Patch Changes

Migration Guide

1. Replace createSdkContext with createAlokaiContext

2. Replace SdkProvider with AlokaiProvider

3. Remove the sdk-context.tsx file

4. Replace useSdk Hook

5. Add StateObserver Component

6. Update Locale Management

3.0.1

Patch Changes

3.0.0

Major Changes

Minor Changes

2.1.0

Minor Changes

Patch Changes

2.0.1

Patch Changes

2.0.0

1.1.1

1.1.0

1.0.2

1.0.1

1.0.0

1. Replace `createSdkContext` with `createAlokaiContext`

2. Replace `SdkProvider` with `AlokaiProvider`

3. Remove the `sdk-context.tsx` file

4. Replace `useSdk` Hook

5. Add `StateObserver` Component