diff --git a/.changeset/curly-years-help.md b/.changeset/curly-years-help.md deleted file mode 100644 index c5ed3039e3..0000000000 --- a/.changeset/curly-years-help.md +++ /dev/null @@ -1,99 +0,0 @@ ---- -"@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(); -``` - -```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(); -``` - -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 ( -
-

Cart total: {cart.total}

-

Customer name: {customer.firstName} {customer.lastName}

-

Currency: {currency}

-

Locale: {locale}

-
- ); -} - -``` - -[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'; -``` diff --git a/.changeset/giant-dogs-crash.md b/.changeset/giant-dogs-crash.md deleted file mode 100644 index e155e3c1d0..0000000000 --- a/.changeset/giant-dogs-crash.md +++ /dev/null @@ -1,61 +0,0 @@ ---- -"@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 - - - -``` - -[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 -); -``` - diff --git a/.changeset/nervous-suns-prove.md b/.changeset/nervous-suns-prove.md deleted file mode 100644 index d363033405..0000000000 --- a/.changeset/nervous-suns-prove.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -"@vue-storefront/sdk": minor ---- - -[ADDED] `logger` option to the `middlewareModule` config. This option allows you to turn on/off the logging of the SDK requests and responses or to provide a custom logger function. - -```diff -import { initSDK, buildModule, middlewareModule } from "@vue-storefront/sdk"; -import { Endpoints } from "@vsf-enterprise/sapcc-api"; - -const sdk = initSDK({ - commerce: buildModule(middlewareModule, { - apiUrl: "http://localhost:8181/commerce", -+ logger: true, - }), -}); -``` - -Logger can be also turned on by setting the `ALOKAI_SDK_DEBUG` environment variable to `true`. diff --git a/docs/content/4.sdk/4.api/sdk.api.json b/docs/content/4.sdk/4.api/sdk.api.json index a07348b1d9..585be49f5c 100644 --- a/docs/content/4.sdk/4.api/sdk.api.json +++ b/docs/content/4.sdk/4.api/sdk.api.json @@ -905,7 +905,7 @@ }, { "kind": "Content", - "text": "{\n message: string;\n statusCode: number;\n cause?: unknown;\n}" + "text": "{\n message: string;\n statusCode: number;\n cause?: unknown;\n url: string;\n}" }, { "kind": "Content", @@ -2192,6 +2192,50 @@ ], "name": "isSpecificSdkHttpError" }, + { + "kind": "TypeAlias", + "canonicalReference": "@vue-storefront/sdk!Logger:type", + "docComment": "/**\n * Custom logger for the middlewareModule, allowing for request and response logging.\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "export type Logger = " + }, + { + "kind": "Content", + "text": "{\n onRequest?: (payload: " + }, + { + "kind": "Reference", + "text": "OnRequestPayload", + "canonicalReference": "@vue-storefront/sdk!OnRequestPayload:type" + }, + { + "kind": "Content", + "text": ") => void;\n onResponse?: (payload: " + }, + { + "kind": "Reference", + "text": "OnResponsePayload", + "canonicalReference": "@vue-storefront/sdk!OnResponsePayload:type" + }, + { + "kind": "Content", + "text": ") => void;\n}" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "src/modules/middlewareModule/types.ts", + "releaseTag": "Public", + "name": "Logger", + "typeTokenRange": { + "startIndex": 1, + "endIndex": 6 + } + }, { "kind": "TypeAlias", "canonicalReference": "@vue-storefront/sdk!MethodConfig:type", @@ -2622,6 +2666,76 @@ "endIndex": 3 } }, + { + "kind": "TypeAlias", + "canonicalReference": "@vue-storefront/sdk!OnRequestPayload:type", + "docComment": "/**\n * Payload for the `onRequest` logger.\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "export type OnRequestPayload = " + }, + { + "kind": "Content", + "text": "{\n config: " + }, + { + "kind": "Reference", + "text": "ComputedConfig", + "canonicalReference": "@vue-storefront/sdk!ComputedConfig:type" + }, + { + "kind": "Content", + "text": ";\n params: unknown[];\n url: string;\n}" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "src/modules/middlewareModule/types.ts", + "releaseTag": "Public", + "name": "OnRequestPayload", + "typeTokenRange": { + "startIndex": 1, + "endIndex": 4 + } + }, + { + "kind": "TypeAlias", + "canonicalReference": "@vue-storefront/sdk!OnResponsePayload:type", + "docComment": "/**\n * Payload for the `onResponse` logger.\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "export type OnResponsePayload = " + }, + { + "kind": "Content", + "text": "{\n config: " + }, + { + "kind": "Reference", + "text": "ComputedConfig", + "canonicalReference": "@vue-storefront/sdk!ComputedConfig:type" + }, + { + "kind": "Content", + "text": ";\n params: unknown[];\n response: unknown;\n responseTime: number;\n url: string;\n}" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "src/modules/middlewareModule/types.ts", + "releaseTag": "Public", + "name": "OnResponsePayload", + "typeTokenRange": { + "startIndex": 1, + "endIndex": 4 + } + }, { "kind": "TypeAlias", "canonicalReference": "@vue-storefront/sdk!Options:type", @@ -2705,7 +2819,16 @@ }, { "kind": "Content", - "text": ";\n cdnCacheBustingId?: string;\n}" + "text": ";\n cdnCacheBustingId?: string;\n logger?: boolean | " + }, + { + "kind": "Reference", + "text": "Logger", + "canonicalReference": "@vue-storefront/sdk!Logger:type" + }, + { + "kind": "Content", + "text": ";\n}" }, { "kind": "Content", @@ -2730,7 +2853,7 @@ ], "typeTokenRange": { "startIndex": 5, - "endIndex": 18 + "endIndex": 20 } }, { @@ -3093,7 +3216,7 @@ "excerptTokens": [ { "kind": "Content", - "text": "statusCode: " + "text": "readonly statusCode: " }, { "kind": "Content", @@ -3104,7 +3227,7 @@ "text": ";" } ], - "isReadonly": false, + "isReadonly": true, "isOptional": false, "releaseTag": "Public", "name": "statusCode", @@ -3115,6 +3238,36 @@ "isStatic": false, "isProtected": false, "isAbstract": false + }, + { + "kind": "Property", + "canonicalReference": "@vue-storefront/sdk!SdkHttpError#url:member", + "docComment": "/**\n * The full request url.\n */\n", + "excerptTokens": [ + { + "kind": "Content", + "text": "readonly url: " + }, + { + "kind": "Content", + "text": "string" + }, + { + "kind": "Content", + "text": ";" + } + ], + "isReadonly": true, + "isOptional": false, + "releaseTag": "Public", + "name": "url", + "propertyTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "isStatic": false, + "isProtected": false, + "isAbstract": false } ], "extendsTokenRange": { diff --git a/docs/content/4.sdk/5.reference/change-log.md b/docs/content/4.sdk/5.reference/change-log.md index de36323771..77400ca56d 100644 --- a/docs/content/4.sdk/5.reference/change-log.md +++ b/docs/content/4.sdk/5.reference/change-log.md @@ -1,5 +1,25 @@ # Change log +## 3.2.0 + +### Minor Changes + +- **[ADDED]** `logger` option to the `middlewareModule` config. This option allows you to turn on/off the logging of the SDK requests and responses or to provide a custom logger function. + +```diff +import { initSDK, buildModule, middlewareModule } from "@vue-storefront/sdk"; +import { Endpoints } from "@vsf-enterprise/sapcc-api"; + +const sdk = initSDK({ + commerce: buildModule(middlewareModule, { + apiUrl: "http://localhost:8181/commerce", ++ logger: true, + }), +}); +``` + +Logger can be also turned on by setting the `ALOKAI_SDK_DEBUG` environment variable to `true`. + ## 3.1.1 ### Patch Changes diff --git a/packages/next/CHANGELOG.md b/packages/next/CHANGELOG.md index 7c2aa99e78..9b3ecc73cc 100644 --- a/packages/next/CHANGELOG.md +++ b/packages/next/CHANGELOG.md @@ -1,5 +1,111 @@ # Change log +## 4.0.0 + +### 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`. + +```ts +// before +"use client"; + +import { createSdkContext } from "@vue-storefront/next/client"; + +import type { Sdk } from "./sdk.server"; + +export const [SdkProvider, useSdk] = createSdkContext(); +``` + +```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(); +``` + +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 ( +
+

Cart total: {cart.total}

+

+ Customer name: {customer.firstName} {customer.lastName} +

+

Currency: {currency}

+

Locale: {locale}

+
+ ); +} +``` + +- **[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'; +``` + +### Patch Changes + +- Updated dependencies: + - @vue-storefront/sdk@3.2.0 + ## 3.0.1 ### Patch Changes diff --git a/packages/next/package.json b/packages/next/package.json index dcb9394db4..5c00810196 100644 --- a/packages/next/package.json +++ b/packages/next/package.json @@ -2,7 +2,7 @@ "name": "@vue-storefront/next", "description": "Vue Storefront dedicated features for Next.js", "license": "MIT", - "version": "3.0.1", + "version": "4.0.0", "exports": { ".": { "import": "./dist/index.mjs", @@ -43,7 +43,7 @@ "test:unit": "vitest run" }, "dependencies": { - "@vue-storefront/sdk": "^3.1.1", + "@vue-storefront/sdk": "^3.2.0", "zustand": "^4.5.4" }, "devDependencies": { diff --git a/packages/nuxt/CHANGELOG.md b/packages/nuxt/CHANGELOG.md index 34f2f7e2ee..b15e7fbd26 100644 --- a/packages/nuxt/CHANGELOG.md +++ b/packages/nuxt/CHANGELOG.md @@ -1,5 +1,73 @@ # Change log +## 5.0.0 + +### 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: + +```vue + + + +``` + +- **[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 +); +``` + +### Patch Changes + +- Updated dependencies: + - @vue-storefront/sdk@3.2.0 + ## 4.1.1 ### Patch Changes diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json index daef4e4384..77373bf6d0 100644 --- a/packages/nuxt/package.json +++ b/packages/nuxt/package.json @@ -1,6 +1,6 @@ { "name": "@vue-storefront/nuxt", - "version": "4.1.1", + "version": "5.0.0", "description": "Vue Storefront dedicated features for Nuxt", "license": "MIT", "type": "module", @@ -31,7 +31,7 @@ "@nuxt/kit": "^3.7.4", "@nuxt/schema": "^3.7.4", "@pinia/nuxt": "^0.5.1", - "@vue-storefront/sdk": "^3.1.1", + "@vue-storefront/sdk": "^3.2.0", "defu": "^6.0.0", "knitwork": "^1.0.0", "pinia": "^2.1.7" diff --git a/packages/sdk/CHANGELOG.md b/packages/sdk/CHANGELOG.md index de36323771..77400ca56d 100644 --- a/packages/sdk/CHANGELOG.md +++ b/packages/sdk/CHANGELOG.md @@ -1,5 +1,25 @@ # Change log +## 3.2.0 + +### Minor Changes + +- **[ADDED]** `logger` option to the `middlewareModule` config. This option allows you to turn on/off the logging of the SDK requests and responses or to provide a custom logger function. + +```diff +import { initSDK, buildModule, middlewareModule } from "@vue-storefront/sdk"; +import { Endpoints } from "@vsf-enterprise/sapcc-api"; + +const sdk = initSDK({ + commerce: buildModule(middlewareModule, { + apiUrl: "http://localhost:8181/commerce", ++ logger: true, + }), +}); +``` + +Logger can be also turned on by setting the `ALOKAI_SDK_DEBUG` environment variable to `true`. + ## 3.1.1 ### Patch Changes diff --git a/packages/sdk/package.json b/packages/sdk/package.json index 0b2a4bf1aa..575c63cb5d 100644 --- a/packages/sdk/package.json +++ b/packages/sdk/package.json @@ -1,7 +1,7 @@ { "name": "@vue-storefront/sdk", "license": "MIT", - "version": "3.1.1", + "version": "3.2.0", "main": "lib/index.cjs.js", "module": "lib/index.es.js", "types": "lib/index.d.ts",