-
Notifications
You must be signed in to change notification settings - Fork 2.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(ust-1534): add global state manager (#7223)
- Loading branch information
1 parent
dd4a13a
commit 71e3cf8
Showing
26 changed files
with
1,829 additions
and
118 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| --- | ||
| "@vue-storefront/next": major | ||
| --- | ||
|
|
||
| [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`. | ||
|
|
||
| ```ts | ||
| // before | ||
| 'use client'; | ||
|
|
||
| import { createSdkContext } from '@vue-storefront/next/client'; | ||
|
|
||
| import type { Sdk } from './sdk.server'; | ||
|
|
||
| export const [SdkProvider, useSdk] = createSdkContext<Sdk>(); | ||
| ``` | ||
|
|
||
| ```ts | ||
| // 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: | ||
|
|
||
| ```tsx | ||
| 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. | ||
|
|
||
| ```diff | ||
| - import { createSdkContext } from '@vue-storefront/next/client'; | ||
| + import { createAlokaiContext } from '@vue-storefront/next/client'; | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| --- | ||
| "@vue-storefront/nuxt": major | ||
| --- | ||
|
|
||
| [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: | ||
|
|
||
| ```vue | ||
| <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`. | ||
|
|
||
| ```diff | ||
| meta: { | ||
| name: "@vue-storefront/nuxt", | ||
| - configKey: "vsf", | ||
| + configKey: "alokai", | ||
| compatibility: { | ||
| nuxt: "^3.0.0", | ||
| }, | ||
| ``` | ||
|
|
||
| ```diff | ||
| nuxt.options.runtimeConfig.public.alokai = defu( | ||
| - nuxt.options.runtimeConfig.public?.vsf as any, | ||
| + nuxt.options.runtimeConfig.public?.alokai as any, | ||
| options | ||
| ); | ||
| ``` | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,7 @@ | ||
| "use client"; | ||
|
|
||
| import { createSdkContext } from "@vue-storefront/next/client"; | ||
| import { createAlokaiContext } from "@vue-storefront/next/client"; | ||
|
|
||
| import type { Sdk } from "./sdk.server"; | ||
|
|
||
| export const [SdkProvider, useSdk] = createSdkContext<Sdk>(); | ||
| export const [AlokaiProvider, useSdk] = createAlokaiContext<Sdk>(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import { Html, Head, Main, NextScript } from "next/document"; | ||
| import { PublicEnvScript } from "next-runtime-env"; | ||
|
|
||
| export default function Document() { | ||
| return ( | ||
| <Html lang="en"> | ||
| <Head> | ||
| <PublicEnvScript /> | ||
| </Head> | ||
| <body> | ||
| <Main /> | ||
| <NextScript /> | ||
| </body> | ||
| </Html> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,33 +1,33 @@ | ||
| import type { AppProps } from "next/app"; | ||
| import { createSdk } from "@vue-storefront/next"; | ||
| import { SdkProvider } from "../sdk/sdk-provider"; | ||
| import { AlokaiProvider } from "../sdk/sdk-provider"; | ||
| import { getSdkOptions } from "../sdk/options"; | ||
| import { getSdkConfig } from "../sdk/config"; | ||
| import { PublicEnvScript } from "next-runtime-env"; | ||
|
|
||
| export default function App({ Component, pageProps }: AppProps) { | ||
| const { getSdk } = createSdk(getSdkOptions(), getSdkConfig()); | ||
|
|
||
| return ( | ||
| <html> | ||
| <head> | ||
| <PublicEnvScript /> | ||
| </head> | ||
| <body> | ||
| <SdkProvider sdk={getSdk()}> | ||
| <nav> | ||
| <ul> | ||
| <li> | ||
| <a href="/ssr">SSR Page</a> | ||
| </li> | ||
| <li> | ||
| <a href="/csr">CSR Page</a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| <Component {...pageProps} /> | ||
| </SdkProvider> | ||
| </body> | ||
| </html> | ||
| <AlokaiProvider | ||
| initialData={{ | ||
| currencies: ["USD", "EUR"], | ||
| currency: "USD", | ||
| locale: "en", | ||
| locales: ["en", "de"], | ||
| }} | ||
| sdk={getSdk()} | ||
| > | ||
| <nav> | ||
| <ul> | ||
| <li> | ||
| <a href="/ssr">SSR Page</a> | ||
| </li> | ||
| <li> | ||
| <a href="/csr">CSR Page</a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| <Component {...pageProps} /> | ||
| </AlokaiProvider> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 2 additions & 2 deletions
4
packages/next/__tests__/apps/pages-router/sdk/sdk-provider.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,7 @@ | ||
| "use client"; | ||
|
|
||
| import { createSdkContext } from "@vue-storefront/next/client"; | ||
| import { createAlokaiContext } from "@vue-storefront/next/client"; | ||
|
|
||
| import type { Sdk } from "./sdk.server"; | ||
|
|
||
| export const [SdkProvider, useSdk] = createSdkContext<Sdk>(); | ||
| export const [AlokaiProvider, useSdk] = createAlokaiContext<Sdk>(); |
Oops, something went wrong.