feat: add middlewareModule to nuxt and next storefront packages (#7058)

WojtekTheWebDev · jagoral · lsliwaradioluz · web-flow · commit 27826fceb87f · 2024-03-12T11:53:03.000+01:00
* refactor: rename module dir to modules * feat: new SDK module - moduleFromEndpoints * feat: default behaviour of HTTP Client * remove isomorphic-fetch from depts * full implementation of HTTP client * feat: add customizable error handler * await error handler * refactor: improve tsdocs * fix: issue with custom methods in new module * test: additonal tests * fix issue with losing tsdocs * prerelease * fix header type * revert last fix * chore: bump package * refactor: use moduleFromEndpoints in next * refactor: update shared * refactor: update nuxt package * refactor: easeier setup * chore: fix version * Update packages/sdk/src/__tests__/integration/modules/moduleFromEndpoints.spec.ts Co-authored-by: Tomasz Góral <tomasz.gl69@gmail.com> * feat: HTTP Client for moduleForEndpoints (#7053) * feat: default behaviour of HTTP Client * remove isomorphic-fetch from depts * full implementation of HTTP client * test: update tests based on the review * fix issue with URL class and urls as paths * add test for axios * add computed headers to http client * update tsdocs * feat: add customizable error handler (#7054) * feat: default behaviour of HTTP Client * remove isomorphic-fetch from depts * full implementation of HTTP client * feat: add customizable error handler * await error handler * update error handler due to feedback * update tsdocs * refactor default http client * use unknown instead of any * add method name to error handler * update tsdocs * apply review suggestions * refactor: simplification & improve tsdocs (#7055) * feat: default behaviour of HTTP Client * remove isomorphic-fetch from depts * full implementation of HTTP client * feat: add customizable error handler * await error handler * refactor: improve tsdocs * test non-object params * add comment * add module types to api extractor * fix: issue with custom methods in new module (#7056) * feat: default behaviour of HTTP Client * remove isomorphic-fetch from depts * full implementation of HTTP client * feat: add customizable error handler * await error handler * refactor: improve tsdocs * fix: issue with custom methods in new module * test: additonal tests * fix issue with losing tsdocs * rename file * missing import * include credentials * Update packages/sdk/src/modules/moduleFromEndpoints/types.ts Co-authored-by: Łukasz Śliwa <39009379+lsliwaradioluz@users.noreply.github.com> --------- Co-authored-by: Łukasz Śliwa <39009379+lsliwaradioluz@users.noreply.github.com> * bump version * use new version * refactor: use getRequestHeaders naming for both nuxt and next * update tsdocs * rename module to middlewareModule * bump sdk package * use middlewareModule naming * use strict mode in storefront packages * deprecate getCookieHeader * refactor * first try to fix the yarn.lock * add prettier * revert * update sdk package * exit pre mode and refactor * add prettier * add changelogs and bump packages * apply review suggestions * apply review suggestions pt2 --------- Co-authored-by: Tomasz Góral <tomasz.gl69@gmail.com> Co-authored-by: Łukasz Śliwa <39009379+lsliwaradioluz@users.noreply.github.com>
diff --git a/packages/storefront/package.json b/packages/storefront/package.json
@@ -17,7 +17,8 @@
     "@vue-storefront/api-extractor-config": "^0.0.4",
     "@vue-storefront/eslint-config": "~2.0.0-rc.7",
     "@vue-storefront/integrations-tsconfig": "^0.0.4",
-    "eslint": "^8.55.0"
+    "eslint": "^8.55.0",
+    "prettier": "^2.7.1"
   },
   "workspaces": {
     "packages": [
diff --git a/packages/storefront/packages/next/CHANGELOG.md b/packages/storefront/packages/next/CHANGELOG.md
@@ -1,5 +1,31 @@
 # Change log
 
+## 1.1.0
+
+- **[ADDED]** `middlewareModule` to `createSdk` params.
+
+```diff [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.
diff --git a/packages/storefront/packages/next/__tests__/apps/app-router/sdk.config.ts b/packages/storefront/packages/next/__tests__/apps/app-router/sdk.config.ts
@@ -1,4 +1,4 @@
-import { exampleSdkModule } from "@storefront/shared";
+import { Endpoints } from "@storefront/shared";
 import { CreateSdkOptions, createSdk } from "@vue-storefront/next";
 
 const options: CreateSdkOptions = {
@@ -9,10 +9,12 @@ const options: CreateSdkOptions = {
 
 export const { getSdk } = createSdk(
   options,
-  ({ buildModule, middlewareUrl, getRequestHeaders }) => ({
-    example: buildModule(exampleSdkModule, {
+  ({ buildModule, middlewareModule, middlewareUrl, getRequestHeaders }) => ({
+    example: buildModule(middlewareModule<Endpoints>, {
       apiUrl: `${middlewareUrl}/test_integration`,
-      headers: getRequestHeaders(),
+      defaultRequestConfig: {
+        headers: getRequestHeaders(),
+      },
     }),
   })
 );
diff --git a/packages/storefront/packages/next/__tests__/apps/pages-router/sdk.config.ts b/packages/storefront/packages/next/__tests__/apps/pages-router/sdk.config.ts
@@ -1,4 +1,4 @@
-import { exampleSdkModule } from "@storefront/shared";
+import { Endpoints } from "@storefront/shared";
 import { CreateSdkOptions, createSdk } from "@vue-storefront/next";
 
 const options: CreateSdkOptions = {
@@ -9,10 +9,12 @@ const options: CreateSdkOptions = {
 
 export const { getSdk } = createSdk(
   options,
-  ({ buildModule, middlewareUrl, getRequestHeaders }) => ({
-    example: buildModule(exampleSdkModule, {
+  ({ buildModule, middlewareModule, middlewareUrl, getRequestHeaders }) => ({
+    example: buildModule(middlewareModule<Endpoints>, {
       apiUrl: `${middlewareUrl}/test_integration`,
-      headers: getRequestHeaders(),
+      defaultRequestConfig: {
+        headers: getRequestHeaders(),
+      },
     }),
   })
 );
diff --git a/packages/storefront/packages/next/package.json b/packages/storefront/packages/next/package.json
@@ -2,7 +2,7 @@
   "name": "@vue-storefront/next",
   "description": "Vue Storefront dedicated features for Next.js",
   "license": "MIT",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "exports": {
     ".": {
       "import": "./dist/index.mjs",
@@ -36,14 +36,14 @@
     "dev:pages-router": "cd __tests__/apps/pages-router && yarn dev",
     "dev:middleware": "cd ../../shared/src/__tests__/middleware && yarn dev",
     "lint": "eslint . --ext .ts",
-    "test:app-router": "start-server-and-test dev:middleware localhost:4000/test_integration/success dev:app-router localhost:3000 \"yarn test:e2e\"",
-    "test:pages-router": "start-server-and-test dev:middleware localhost:4000/test_integration/success dev:pages-router localhost:3000 \"yarn test:e2e\"",
+    "test:app-router": "start-server-and-test dev:middleware localhost:4000/test_integration/getSuccess dev:app-router localhost:3000 \"yarn test:e2e\"",
+    "test:pages-router": "start-server-and-test dev:middleware localhost:4000/test_integration/getSuccess dev:pages-router localhost:3000 \"yarn test:e2e\"",
     "test": "yarn test:app-router && yarn test:pages-router",
     "test:e2e": "cd ../../shared/ && yarn test:e2e",
     "test:unit": "vitest run"
   },
   "dependencies": {
-    "@vue-storefront/sdk": "^1.0.0"
+    "@vue-storefront/sdk": "^1.4.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.31",
diff --git a/packages/storefront/packages/next/src/sdk/index.tsx b/packages/storefront/packages/next/src/sdk/index.tsx
@@ -2,7 +2,7 @@ import {
   composeMiddlewareUrl,
   type CreateSdkOptions,
 } from "@storefront/shared";
-import { buildModule, initSDK } from "@vue-storefront/sdk";
+import { buildModule, initSDK, middlewareModule } from "@vue-storefront/sdk";
 import { resolveDynamicContext } from "./helpers";
 import { Config, CreateSdkReturn, GetSdkContext } from "./types";
 
@@ -15,13 +15,9 @@ export type { CreateSdkOptions } from "@storefront/shared";
  * @returns An object containing the `getSdk` function.
  * @example
  * ```tsx
- * import {
- *   contentfulModule,
- *   ContentfulModuleType,
- * } from "@vsf-enterprise/contentful-sdk";
- * import { unifiedModule } from "@vsf-enterprise/unified-sdk";
+ * import { contentfulModule } from "@vsf-enterprise/contentful-sdk";
  * import { CreateSdkOptions, createSdk } from "@vue-storefront/next";
- * import type { UnifiedApiExtension } from "../storefront-middleware/middleware.config";
+ * import type { UnifiedApiEndpoints } from "../storefront-middleware/types";
  *
  * const options: CreateSdkOptions = {
  *   middleware: {
@@ -31,14 +27,14 @@ export type { CreateSdkOptions } from "@storefront/shared";
  *
  * export const { getSdk, createSdkContext } = createSdk(
  *   options,
- *   ({ buildModule, middlewareUrl, getRequestHeaders }) => ({
- *     unified: buildModule(unifiedModule<UnifiedApiExtension>, {
+ *   ({ buildModule, middlewareModule, middlewareUrl, getRequestHeaders }) => ({
+ *     unified: buildModule(middlewareModule<UnifiedApiEndpoints>, {
  *       apiUrl: middlewareUrl + "/commerce",
- *       requestOptions: {
- *         headers: getRequestHeaders,
+ *       defaultRequestConfig: {
+ *         headers: getRequestHeaders(),
  *       },
  *     }),
- *     contentful: buildModule<ContentfulModuleType>(contentfulModule, {
+ *     contentful: buildModule(contentfulModule, {
  *       apiUrl: middlewareUrl + "/cntf",
  *     }),
  *   }),
@@ -58,6 +54,7 @@ export function createSdk<TConfig extends Record<string, any>>(
 
     const resolvedConfig = configDefinition({
       buildModule,
+      middlewareModule,
       getRequestHeaders,
       middlewareUrl,
     });
diff --git a/packages/storefront/packages/next/src/sdk/types.ts b/packages/storefront/packages/next/src/sdk/types.ts
@@ -1,4 +1,4 @@
-import { SDKApi, buildModule } from "@vue-storefront/sdk";
+import { SDKApi, buildModule, middlewareModule } from "@vue-storefront/sdk";
 import { ReactNode } from "react";
 
 export type GetSdkContext = {
@@ -16,6 +16,7 @@ export type DynamicContext = {
 
 export type StaticContext = {
   buildModule: typeof buildModule;
+  middlewareModule: typeof middlewareModule;
   middlewareUrl: string;
 };
 
diff --git a/packages/storefront/packages/nuxt/CHANGELOG.md b/packages/storefront/packages/nuxt/CHANGELOG.md
@@ -1,5 +1,42 @@
 # Change log
 
+## 3.1.0
+
+- **[ADDED]** `middlewareModule` to `defineSdkConfig` params.
+
+```diff [sdk.config.ts]
+- import { UnifiedApiExtension } from "storefront-middleware/types"
++ import { UnifiedEndpoints } from "storefront-middleware/types"
+
+export default defineSdkConfig(
+-  ({ 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() },
+      }),
+  })
+);
+```
+
+- **[CHANGED]** deprecate `getCookieHeader`, use `getRequestHeaders` instead
+
+```diff [sdk.config.ts]
+export default defineSdkConfig(
+-  ({ buildModule, middlewareModule, middlewareUrl, getCookieHeader }) => ({
++  ({ buildModule, middlewareModule, middlewareUrl, getRequestHeaders }) => ({
+      commerce: buildModule(middlewareModule<UnifiedEndpoints>, {
+        apiUrl: `${middlewareUrl}/commerce`,
+-        defaultRequestConfig: { headers: getCookieHeader() }, // Only cookie header is included.
++        defaultRequestConfig: { headers: getRequestHeaders() }, // All headers are included.
+      }),
+  })
+);
+```
+
 ## 3.0.3
 
 - **[CHANGED]** `@nuxt/kit` locked `3.7.4` version to `@nuxt/kit@^3.7.4`
diff --git a/packages/storefront/packages/nuxt/__tests__/app/package.json b/packages/storefront/packages/nuxt/__tests__/app/package.json
@@ -9,7 +9,6 @@
     "postinstall": "nuxt prepare"
   },
   "devDependencies": {
-    "nuxt": "3.7.4",
-    "@vue-storefront/sdk": "*"
+    "nuxt": "3.7.4"
   }
 }
diff --git a/packages/storefront/packages/nuxt/__tests__/app/sdk.config.ts b/packages/storefront/packages/nuxt/__tests__/app/sdk.config.ts
@@ -1,10 +1,12 @@
-import { exampleSdkModule } from "../../../../shared";
+import { Endpoints } from "@storefront/shared";
 
 export default defineSdkConfig(
-  ({ buildModule, middlewareUrl, getCookieHeader }) => ({
-    example: buildModule(exampleSdkModule, {
-      apiUrl: `${middlewareUrl}/test_integration`,
-      headers: { cookie: getCookieHeader() },
-    }),
-  })
+  ({ buildModule, middlewareModule, middlewareUrl, getRequestHeaders }) => {
+    return {
+      example: buildModule(middlewareModule<Endpoints>, {
+        apiUrl: `${middlewareUrl}/test_integration`,
+        defaultRequestConfig: { headers: { ...getRequestHeaders() } },
+      }),
+    };
+  }
 );
diff --git a/packages/storefront/packages/nuxt/package.json b/packages/storefront/packages/nuxt/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue-storefront/nuxt",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "description": "Vue Storefront dedicated features for Nuxt",
   "license": "MIT",
   "type": "module",
@@ -22,24 +22,22 @@
     "dev": "cd __tests__/app && yarn dev",
     "dev:middleware": "cd ../../shared/src/__tests__/middleware && yarn dev",
     "lint": "eslint --ext .vue,.js,.ts .",
-    "test": "start-server-and-test dev:middleware localhost:4000/test_integration/success dev localhost:3000/ssr \"yarn test:e2e\"",
+    "test": "start-server-and-test dev:middleware localhost:4000/test_integration/getSuccess dev localhost:3000/ssr \"yarn test:e2e\"",
     "test:e2e": "cd ../../shared/ && yarn test:e2e",
     "test:watch": "vitest watch",
     "prepare": "nuxi prepare"
   },
   "dependencies": {
     "@nuxt/kit": "^3.7.4",
     "@nuxt/schema": "^3.7.4",
-    "@vue-storefront/sdk": "^1.0.0",
+    "@vue-storefront/sdk": "^1.4.0",
     "knitwork": "^1.0.0"
   },
   "devDependencies": {
     "@types/node": "^18.11.17",
     "@nuxt/devtools": "^1.0.0",
     "@nuxt/module-builder": "0.5.2",
-    "@nuxt/schema": "3.7.4",
     "@nuxt/test-utils": "3.7.4",
-    "@vue-storefront/sdk": "*",
     "nuxt": "3.7.4",
     "start-server-and-test": "^2.0.3",
     "vitest": "^0.34.6"
diff --git a/packages/storefront/packages/nuxt/src/module.ts b/packages/storefront/packages/nuxt/src/module.ts
@@ -8,7 +8,7 @@ import {
   addImportsSources,
 } from "@nuxt/kit";
 import { genInlineTypeImport } from "knitwork";
-import { SdkModuleOptions } from "./types";
+import { type SdkModuleOptions } from "./types";
 
 export default defineNuxtModule<SdkModuleOptions>({
   meta: {
diff --git a/packages/storefront/packages/nuxt/src/runtime/defineSdkConfig.template b/packages/storefront/packages/nuxt/src/runtime/defineSdkConfig.template
@@ -1,11 +1,17 @@
-import { buildModule } from "@vue-storefront/sdk";
+import { buildModule, middlewareModule } from "@vue-storefront/sdk";
 import { composeMiddlewareUrl, useNuxtApp, useRequestHeaders } from "#imports";
 import { SdkModuleOptions } from "./vsfModule";
 
 type InjectedContext = {
   buildModule: typeof buildModule;
+  middlewareModule: typeof middlewareModule;
   middlewareUrl: string;
+  /**
+   * @deprecated
+   * Use `getRequestHeaders` instead.
+   */
   getCookieHeader: () => Record<string, string>;
+  getRequestHeaders: () => Record<string, string>;
 };
 
 type Config<TConfig> = (context: InjectedContext) => TConfig;
@@ -23,18 +29,15 @@ const moduleConfig: SdkModuleOptions = <%= options.moduleConfig %>;
   *   contentfulModule,
   *   ContentfulModuleType,
   * } from "@vsf-enterprise/contentful-sdk";
-  * import { unifiedModule } from "@vsf-enterprise/unified-sdk";
-  * import type { UnifiedApiExtension } from "../storefront-middleware/middleware.config";
+  * import type { UnifiedApiEndpoints } from "../storefront-middleware/types";
   * 
   * export default defineSdkConfig(
-  *   ({ buildModule, middlewareUrl, getCookieHeader }) => ({
-  *     unified: buildModule(unifiedModule<UnifiedApiExtension>, {
+  *   ({ buildModule, middlewareModule, middlewareUrl, getCookieHeader }) => ({
+  *     unified: buildModule(middlewareModule<UnifiedApiEndpoints>, {
   *       apiUrl: middlewareUrl + "/commerce",
-  *       requestOptions: {
-  *         headers: getCookieHeader,
-  *       },
+  *       defaultRequestConfig: { headers: { ...getCookieHeader() } },
   *     }),
-  *     contentful: buildModule<ContentfulModuleType>(contentfulModule, {
+  *     contentful: buildModule(contentfulModule, {
   *       apiUrl: middlewareUrl + "/cntf",
   *     }),
   *   }),
@@ -58,11 +61,14 @@ export function defineSdkConfig<TConfig>(config: Config<TConfig>) {
     });
 
     const getCookieHeader = () => useRequestHeaders(["cookie"]);
+    const getRequestHeaders = () => useRequestHeaders();
 
     return config({
       buildModule,
+      middlewareModule,
       middlewareUrl,
-      getCookieHeader
+      getCookieHeader,
+      getRequestHeaders
     });
   }
 }
diff --git a/packages/storefront/shared/cypress/e2e/sdkModule.cy.ts b/packages/storefront/shared/cypress/e2e/sdkModule.cy.ts
@@ -12,7 +12,7 @@ describe("SDK Module Acceptance Criteria", () => {
   it("should send cookies header on ssr page", () => {
     cy.setCookie("vsf-currency", "USD");
     cy.visit("/ssr");
-    cy.get("main").should("contain.text", "vsf-currency=USD");
+    cy.get("main").should("contain.text", `"vsf-currency": "USD"`);
   });
 
   it("should have generator meta tag on csr page", () => {
diff --git a/packages/storefront/shared/package.json b/packages/storefront/shared/package.json
@@ -8,7 +8,6 @@
     "test:e2e": "cypress run"
   },
   "devDependencies": {
-    "@vue-storefront/sdk": "^1.0.0",
     "cypress": "^13.6.1",
     "vitest": "^0.34.6"
   }
diff --git a/packages/storefront/shared/src/__tests__/middleware/testIntegration.ts b/packages/storefront/shared/src/__tests__/middleware/testIntegration.ts
@@ -1,12 +1,15 @@
 import { apiClientFactory } from "@vue-storefront/middleware";
+import { Request } from "express";
 
 const api = {
-  success: () =>
-    Promise.resolve({
+  getSuccess: async (context: { req: Request }) => {
+    return {
       status: 200,
       message: "ok",
       error: false,
-    }),
+      cookies: context.req.cookies ?? null,
+    };
+  },
 };
 
 const onCreate = (config: Record<string, unknown> = {}) => {
diff --git a/packages/storefront/shared/src/__tests__/middleware/types.ts b/packages/storefront/shared/src/__tests__/middleware/types.ts
@@ -0,0 +1,3 @@
+export type Endpoints = {
+  getSuccess: () => Promise<any>;
+};
diff --git a/packages/storefront/shared/src/__tests__/sdk/exampleSdkModule.ts b/packages/storefront/shared/src/__tests__/sdk/exampleSdkModule.ts
diff --git a/packages/storefront/shared/src/__tests__/sdk/index.ts b/packages/storefront/shared/src/__tests__/sdk/index.ts
diff --git a/packages/storefront/shared/src/index.ts b/packages/storefront/shared/src/index.ts
diff --git a/packages/storefront/yarn.lock b/packages/storefront/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,6 @@`
`9`	`9`	`"postinstall": "nuxt prepare"`
`10`	`10`	`},`
`11`	`11`	`"devDependencies": {`
`12`		`- "nuxt": "3.7.4",`
`13`		`- "@vue-storefront/sdk": "*"`
	`12`	`+ "nuxt": "3.7.4"`
`14`	`13`	`}`
`15`	`14`	`}`