@vue-storefront/[email protected]

Major Changes

• [ADDED] global state management with Pinia. This will allow you to keep your global state in a more organized way.
  It shares the data about:
• cart
• customer
• currency
• locale

This change will require you to refactor your composables to make use of the introduced state manager.
As this is only a state management, you will still need to use the composables to fetch the data and put it into the state.

Every part of global state can now be used as refs so reading and writing to them is more straightforward.

Example of usage:

<template>
  <div>
    <p>Cart total: {{ cart.total }}</p>
    <p>Customer name: {{ customer.firstName }} {{ customer.lastName }}</p>
    <p>Currency: {{ currency }}</p>
    <p>Locale: {{ locale }}</p>
  </div>
</template>

<script setup>
const { cart, customer, currency, currencies, locale, locales } = storeToRefs(
  useSfState()
);

// updating the currency state
currency.value = "USD";

// updating the cart state
onMounted(async () => {
  cart.value = await useSdk().unified.getCart();
});
</script>

• [BREAKING] [CHANGED] module configKey is changed from vsf to alokai. Also, the support for the vsf key in Runtime Envs has been changed to alokai.

 meta: {
    name: "@vue-storefront/nuxt",
-   configKey: "vsf",
+   configKey: "alokai",
    compatibility: {
      nuxt: "^3.0.0",
    },

nuxt.options.runtimeConfig.public.alokai = defu(
-  nuxt.options.runtimeConfig.public?.vsf as any,
+  nuxt.options.runtimeConfig.public?.alokai as any,
   options
);

Patch Changes

• Updated dependencies:
  • @vue-storefront/[email protected]

@vue-storefront/[email protected]

Major Changes

• [ADDED] global state management with Zustand. This will allow you to keep your global state in a more organized way.
  It shares the data about:
• cart
• customer
• currency
• locale

This change will require you to refactor your hooks to make use of the introduced state manager.
As this is only a state management, you will still need to use the hooks to fetch the data and put it into the state.

To make use of the new state solution you will need to change the file sdk/sdk-context.ts.

// before
"use client";

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

import type { Sdk } from "./sdk.server";

export const [SdkProvider, useSdk] = createSdkContext<Sdk>();

// after
"use client";

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

import type { Sdk } from "./sdk.server";

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

The type SfContract is a type that represents the contract between the middleware and the state manager.
It is delivered out of the box.

Example of usage:

import { useQuery } from "@tanstack/react-query";
import {
  useSdk,
  useSfCartState,
  useSfCustomerState,
  useSfCurrencyState,
  useSfLocaleState,
} from "@/sdk/alokai-context";

function Component() {
  const sdk = useSdk();
  const [cart, setCart] = useSfCartState();
  const [customer] = useSfCustomerState();
  const [currency] = useSfCurrencyState();
  const [locale] = useSfLocaleState();

  const result = useQuery({
    queryFn: () => sdk.unified.getCart(),
    queryKey: ["cart", "main"],
  });
  // updating the cart state
  useEffect(() => {
    setCart(result.data);
  }, [result.data]);

  return (
    <div>
      <p>Cart total: {cart.total}</p>
      <p>
        Customer name: {customer.firstName} {customer.lastName}
      </p>
      <p>Currency: {currency}</p>
      <p>Locale: {locale}</p>
    </div>
  );
}

• [BREAKING] [CHANGED] the function createSdkContext exported from the client is changed to createAlokaiContext.
  Also, it no longer returns an array with two elements, but an object with multiple properties.
  This change is related to the fact that now it not only provide SDK context but also global state management context and hooks for handling it.

- import { createSdkContext } from '@vue-storefront/next/client';
+ import { createAlokaiContext } from '@vue-storefront/next/client';

Patch Changes

• Updated dependencies:
  • @vue-storefront/[email protected]

@vue-storefront/[email protected]

Major Changes

• [ADDED] global state management with Pinia. This will allow you to keep your global state in a more organized way.
  It shares the data about:
• cart
• customer
• currency
• locale

This change will require you to refactor your composables to make use of the introduced state manager.
As this is only a state management, you will still need to use the composables to fetch the data and put it into the state.

Every part of global state can now be used as refs so reading and writing to them is more straightforward.

Example of usage:

<template>
  <div>
    <p>Cart total: {{ cart.total }}</p>
    <p>Customer name: {{ customer.firstName }} {{ customer.lastName }}</p>
    <p>Currency: {{ currency }}</p>
    <p>Locale: {{ locale }}</p>
  </div>
</template>

<script setup>
const { cart, customer, currency, currencies, locale, locales } = storeToRefs(
  useSfState()
);

// updating the currency state
currency.value = "USD";

// updating the cart state
onMounted(async () => {
  cart.value = await useSdk().unified.getCart();
});
</script>

• [BREAKING] [CHANGED] module configKey is changed from vsf to alokai. Also, the support for the vsf key in Runtime Envs has been changed to alokai.

 meta: {
    name: "@vue-storefront/nuxt",
-   configKey: "vsf",
+   configKey: "alokai",
    compatibility: {
      nuxt: "^3.0.0",
    },

nuxt.options.runtimeConfig.public.alokai = defu(
-  nuxt.options.runtimeConfig.public?.vsf as any,
+  nuxt.options.runtimeConfig.public?.alokai as any,
   options
);

@vue-storefront/[email protected]

Major Changes

• [ADDED] global state management with Zustand. This will allow you to keep your global state in a more organized way.
  It shares the data about:
• cart
• customer
• currency
• locale

This change will require you to refactor your hooks to make use of the introduced state manager.
As this is only a state management, you will still need to use the hooks to fetch the data and put it into the state.

To make use of the new state solution you will need to change the file sdk/sdk-context.ts.

// before
"use client";

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

import type { Sdk } from "./sdk.server";

export const [SdkProvider, useSdk] = createSdkContext<Sdk>();

// after
"use client";

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

import type { Sdk } from "./sdk.server";

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

The type SfContract is a type that represents the contract between the middleware and the state manager.
It is delivered out of the box.

Example of usage:

import { useQuery } from "@tanstack/react-query";
import {
  useSdk,
  useSfCartState,
  useSfCustomerState,
  useSfCurrencyState,
  useSfLocaleState,
} from "@/sdk/alokai-context";

function Component() {
  const sdk = useSdk();
  const [cart, setCart] = useSfCartState();
  const [customer] = useSfCustomerState();
  const [currency] = useSfCurrencyState();
  const [locale] = useSfLocaleState();

  const result = useQuery({
    queryFn: () => sdk.unified.getCart(),
    queryKey: ["cart", "main"],
  });
  // updating the cart state
  useEffect(() => {
    setCart(result.data);
  }, [result.data]);

  return (
    <div>
      <p>Cart total: {cart.total}</p>
      <p>
        Customer name: {customer.firstName} {customer.lastName}
      </p>
      <p>Currency: {currency}</p>
      <p>Locale: {locale}</p>
    </div>
  );
}

• [BREAKING] [CHANGED] the function createSdkContext exported from the client is changed to createAlokaiContext.
  Also, it no longer returns an array with two elements, but an object with multiple properties.
  This change is related to the fact that now it not only provide SDK context but also global state management context and hooks for handling it.

- import { createSdkContext } from '@vue-storefront/next/client';
+ import { createAlokaiContext } from '@vue-storefront/next/client';

@vue-storefront/[email protected]

Patch Changes

• [FIX] Rollback the changes to the ApiMethodsFactory config generic type. It was causing incompatibility for some older packages.

@vue-storefront/[email protected]

Minor Changes

• [ADDED] Added factory function for the extension API. Previously the extension API was an object with a set of methods. Now it can be created using a factory function the same way as the base API.

Previously only object was allowed:

export const extension: ApiClientExtension = {
  name: "extension",
  extendApiMethods: {
    ...extendedMethods, //methods as an object
  },
};

Now you can either use an object or a factory function:

export const extension: ApiClientExtension = {
  name: "extension",
  // methods as a factory function with injected config object
  extendApiMethods: ({ config }) => {
    return createMyMethods(config);
  },
};

@vue-storefront/[email protected]

Patch Changes

• [CHANGED] handle error for not available middleware

@vue-storefront/[email protected]

Patch Changes

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

@vue-storefront/[email protected]

Patch Changes

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

@vue-storefront/[email protected]

Minor Changes

• [ADDED] Provided easy access to methods added by middleware extensions via the context.extendedApi property.

const extensionA = {
  name: 'extensionA',
  extendApiMethods: {
    methodA: async () => { ... }
  }
}

const extensionB = {
  name: 'extensionB',
  extendApiMethods: {
    methodB: async () => { ... }
  }
}

const extensionC = {
  name: 'extensionC',
  extendApiMethods: {
    methodC: async (context) => {
      context.extendedApi.methodA();
      context.extendedApi.extensionB.methodB();
    }
  }
}