refactor: use closure to create multistore extension (#7026)

* fix multistore types export

* refactor: rename multistore directory

* docs: add multistore documentation

* docs: add multistore documentation

* regenerate docs changelogs and api references

* refactor: implement a factory to create an extension

* docs: update multistore docs

* add changeset

* add changeset for fix

* update changesets

* fix merge issues

Author: WojtekTheWebDev

Diff for: .changeset/six-dolls-accept.md

@@ -0,0 +1,31 @@
+---
+"@vue-storefront/multistore": major
+---
+
+[CHANGED] We standardized the way of creating and configuring multistore extension. 
+Previously, the extension was created by importing `multistoreExtension` from `@vue-storefront/multistore` and passing it to the `extensions` function. 
+Configuration was passed to the extension by adding `multistore` property to the `configuration` object.
+Now, the extension is created by calling `createMultistoreExtension` from `@vue-storefront/multistore` and passing the multistore configuration to it.
+
+```diff [middleware.config.ts]
+- import { multistoreExtension } from "@vue-storefront/multistore";
++ import { createMultistoreExtension } from "@vue-storefront/multistore";
+import { multistoreConfig } from "./multistore.config";
+
+export default {
+  integrations: {
+    sapcc: {
+      location: "@vue-storefront/sapcc-api/server",
+      configuration: {
+        // ...
+-        multistore: multistoreConfig,
+      },
+      extensions: (predefinedExtensions) => [
+        ...predefinedExtensions,
+-        multistoreExtension,
++        createMultistoreExtension(multistoreConfig),
+      ],
+    },
+  },
+};
+```

Diff for: .changeset/soft-kiwis-fly.md

@@ -0,0 +1,5 @@
+---
+"@vue-storefront/multistore": major
+---
+
+[FIXED] singleton cache issue, previously the cache was a singleton which could lead to unexpected behaviour when extension was used in different integrations in parallel. Now, the cache is being created during extension creation, what ensures proper cache behaviour.

Diff for: docs/content/3.middleware/2.guides/6.multistore.md

@@ -23,33 +23,9 @@ Ensure the following prerequisites are met for the unified multistore solution:
 
 To configure multistore in your middleware, follow these steps:
 
-1. Extend Middleware Config with multistore Extension
+1. Prepare multistore configuration:
 
-- Import `multistoreExtension` from `@vue-storefront/multistore`.
-- Extend the middleware config in `middleware.config.ts`.
-
-Example: Add `multistoreExtension` to the extensions array for SAP integration.
-
-```ts [middleware.config.ts]
-import { multistoreExtension } from '@vue-storefront/multistore';
-
-export default {
-  integrations: {
-    sapcc: {
-      location: '@vue-storefront/sapcc-api/server',
-      configuration: { ... },
-      extensions: (predefinedExtensions) => [
-        ...predefinedExtensions,
-        multistoreExtension
-      ]
-    }
-  }
-};
-```
-
-2. Create multistore Configuration
-
-- Prepare a `multistore.config.ts` file with methods:
+- Create a `multistore.config.ts` file with methods:
   - `fetchConfiguration({ domain })`: Returns store-specific configurations based on domain.
   - `mergeConfigurations({ baseConfig, storeConfig })`: Merges base configuration with store-specific settings.
   - `cacheManagerFactory()`: Implements cache manager with get and set methods.
@@ -100,29 +76,29 @@ export const multistoreConfig = {
 };
 ```
 
-3. Integrate multistore Configuration
+2. Extend middleware config with multistore extension:
 
-- Add the multistore configuration from `multistore.config.ts` to your `middleware.config.ts`.
+- Import `createMultistoreExtension` from `@vue-storefront/multistore`.
+- Import multistore configuration from `multistore.config.ts`.
+- Extend the middleware config in `middleware.config.ts`.
 
-Example: Add multistore configuration to `middleware.config.ts`.
+Example: Extending middleware config with multistore extension.
 
 ```ts [middleware.config.ts]
-import { multistoreConfig } from "./multistore.config";
+import { multistoreExtension } from '@vue-storefront/multistore';
+import { multistoreConfig } from './multistore.config';
 
 export default {
   integrations: {
     sapcc: {
-      location: "@vue-storefront/sapcc-api/server",
-      configuration: {
-        // ...
-        multistore: multistoreConfig,
-      },
+      location: '@vue-storefront/sapcc-api/server',
+      configuration: { ... },
       extensions: (predefinedExtensions) => [
         ...predefinedExtensions,
-        multistoreExtension,
-      ],
-    },
-  },
+        createMultistoreExtension(multistoreConfig)
+      ]
+    }
+  }
 };
 ```
 

Diff for: packages/multistore/README.md

@@ -2,120 +2,38 @@
 
 The `@vue-storefront/multistore` package provides a middleware extension for multistore functionality. It changes the middleware configuration to support multiple stores based on the domain configuration.
 
-## Prerequisites
+## Usage
 
-Ensure the following prerequisites are met for the unified multistore solution:
+To learn about the prerequisites, setup and architecture of the `@vue-storefront/multistore` package, please refer to the [multistore documentation](https://docs.vuestorefront.io/middleware/multistore).
 
-- It works within the VSF infrastructure.
-- Requires three headers for proper functionality:
-  1. `origin` for client-server communication.
-  2. `x-forwarded-host` for server-server communication.
-  3. `host` as a fallback for server-server communication if `x-forwarded-host` is absent.
-- The client communicating with the middleware must include these headers in requests.
+## Development
 
-## Setup Steps
+To start development on the `@vue-storefront/multistore` package, clone the repository and install dependencies:
 
-To configure multistore in your middleware, follow these steps:
-
-1. Extend Middleware Config with multistore Extension
-
-- Import `multistoreExtension` from `@vue-storefront/multistore`.
-- Extend the middleware config in `middleware.config.ts`.
-
-Example: Add `multistoreExtension` to the extensions array for SAP integration.
-
-```ts [middleware.config.ts]
-import { multistoreExtension } from '@vue-storefront/multistore';
-
-export default {
-  integrations: {
-    sap: {
-      location: '@vue-storefront/sapcc-api/server',
-      configuration: { ... },
-      extensions: (predefinedExtensions) => [
-        ...predefinedExtensions,
-        multistoreExtension
-      ]
-    }
-  }
-};
+```shell
+yarn install
 ```
 
-2. Create multistore Configuration
+### Build
 
-- Prepare a `multistore.config.ts` file with methods:
-  - `fetchConfiguration({ domain })`: Returns store-specific configurations based on domain.
-  - `mergeConfigurations({ baseConfig, storeConfig })`: Merges base configuration with store-specific settings.
-  - `cacheManagerFactory()`: Implements cache manager with get and set methods.
+To build the package, run:
 
-Example: Configuration that modifies the api parameter and uses `node-cache`.
+```shell
+yarn build
+```
 
-```ts [multistore.config.ts]
-import NodeCache from "node-cache";
+### Linting
 
-export const multistoreConfig = {
-  fetchConfiguration(/* { domain } */) {
-    return {
-      "my-apparel-domain.io": {
-        baseSiteId: "apparel-uk",
-        defaultCurrency: "GBP",
-        // ...
-      },
-      "my-electronics-domain.io": {
-        baseSiteId: "electronics",
-        defaultCurrency: "USD",
-        // ...
-      },
-    };
-  },
-  mergeConfigurations({ baseConfig, storeConfig }) {
-    return {
-      ...baseConfig,
-      api: {
-        ...baseConfig.api,
-        ...storeConfig,
-      },
-    };
-  },
-  cacheManagerFactory() {
-    const client = new NodeCache({
-      stdTTL: 10,
-    });
+To lint the package, run:
 
-    return {
-      get(key) {
-        return client.get(key);
-      },
-      set(key, value) {
-        return client.set(key, value);
-      },
-    };
-  },
-};
+```shell
+yarn lint
 ```
 
-3. Integrate multistore Configuration
-
-- Add the multistore configuration from `multistore.config.ts` to your `middleware.config.ts`.
+### Testing
 
-Example: Add multistore configuration to `middleware.config.ts`.
+To test the package, run:
 
-```ts [middleware.config.ts]
-import { multistoreConfig } from "./multistore.config";
-
-export default {
-  integrations: {
-    sap: {
-      location: "@vue-storefront/sapcc-api/server",
-      configuration: {
-        // ...
-        multistore: multistoreConfig,
-      },
-      extensions: (predefinedExtensions) => [
-        ...predefinedExtensions,
-        multistoreExtension,
-      ],
-    },
-  },
-};
-```
+```shell
+yarn test
+```

Diff for: packages/multistore/__mocks__/middleware.config.mock.ts

@@ -1,10 +1,5 @@
 /* eslint-disable no-useless-return */
 /* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable no-unused-vars */
-import { mockMultistoreConfig } from "./multistore.config.mock";
-
-const multistore = mockMultistoreConfig();
-
 export const mockMiddlewareConfig = () => {
   return {
     OAuth: {
@@ -25,6 +20,5 @@ export const mockMiddlewareConfig = () => {
       defaultLanguage: "en",
       defaultCurrency: "GBP",
     },
-    multistore,
   };
 };