Improved exported paths, added NextAppRouter specific platform (#418)

* export webApiWebhookHandler

* generics for next app router

* auth/browser

* new export paths

* remove auth/browser

* update header name

* fix auth export

* fix exports

* remove domain from app bridge state

Author: lkostrowski

.changeset/angry-boats-kick.md

@@ -0,0 +1,5 @@
+---
+"@saleor/app-sdk": major
+---
+
+Changed publically exported paths. New exports will be documented in docs and migration guide

.changeset/stale-flowers-serve.md

@@ -0,0 +1,5 @@
+---
+"@saleor/app-sdk": major
+---
+
+Added new root exports: auth/browser and auth/node for token-related utilities

package.json

@@ -143,11 +143,6 @@
       "import": "./settings-manager/index.mjs",
       "require": "./settings-manager/index.js"
     },
-    "./urls": {
-      "types": "./urls.d.ts",
-      "import": "./urls.mjs",
-      "require": "./urls.js"
-    },
     "./app-bridge": {
       "types": "./app-bridge/index.d.ts",
       "import": "./app-bridge/index.mjs",
@@ -188,25 +183,25 @@
       "import": "./saleor-app.mjs",
       "require": "./saleor-app.js"
     },
-    "./verify-jwt": {
-      "types": "./verify-jwt.d.ts",
-      "import": "./verify-jwt.mjs",
-      "require": "./verify-jwt.js"
-    },
-    "./verify-signature": {
-      "types": "./verify-signature.d.ts",
-      "import": "./verify-signature.mjs",
-      "require": "./verify-signature.js"
+    "./auth": {
+      "types": "./auth/index.d.ts",
+      "import": "./auth/index.mjs",
+      "require": "./auth/index.js"
     },
     "./headers": {
       "types": "./headers.d.ts",
       "import": "./headers.mjs",
       "require": "./headers.js"
     },
     "./util": {
-      "types": "./util/public/index.d.ts",
-      "import": "./util/public/index.mjs",
-      "require": "./util/public/index.js"
+      "types": "./util/index.d.ts",
+      "import": "./util/index.mjs",
+      "require": "./util/index.js"
+    },
+    "./util/browser": {
+      "types": "./util/public/browser/index.d.ts",
+      "import": "./util/public/browser/index.mjs",
+      "require": "./util/public/browser/index.js"
     },
     "./types": {
       "types": "./types.d.ts"

src/app-bridge/app-bridge-provider.test.tsx

@@ -39,7 +39,6 @@ describe("AppBridgeProvider", () => {
       <AppBridgeProvider
         appBridgeInstance={
           new AppBridge({
-            targetDomain: domain,
             saleorApiUrl,
           })
         }
@@ -77,19 +76,18 @@ describe("useAppBridge hook", () => {
 
   it("Returned instance provided in Provider", () => {
     const appBridge = new AppBridge({
-      targetDomain: domain,
+      saleorApiUrl,
     });
 
     const { result } = renderHook(() => useAppBridge(), {
       wrapper: (props: {}) => <AppBridgeProvider {...props} appBridgeInstance={appBridge} />,
     });
 
-    expect(result.current.appBridge?.getState().domain).toBe(domain);
+    expect(result.current.appBridge?.getState().saleorApiUrl).toBe(saleorApiUrl);
   });
 
   it("Stores active state in React State", () => {
     const appBridge = new AppBridge({
-      targetDomain: domain,
       saleorApiUrl,
     });
 
@@ -120,7 +118,6 @@ describe("useAppBridge hook", () => {
     return waitFor(() => {
       expect(renderCallback).toHaveBeenCalledTimes(2);
       expect(renderCallback).toHaveBeenCalledWith({
-        domain,
         id: "appid",
         path: "",
         ready: false,

src/app-bridge/app-bridge-state.test.ts

@@ -8,7 +8,6 @@ describe("app-bridge-state.ts", () => {
 
     expect(instance.getState()).toEqual({
       id: "",
-      domain: "",
       ready: false,
       path: "/",
       theme: "light",
@@ -21,7 +20,6 @@ describe("app-bridge-state.ts", () => {
     const instance = new AppBridgeStateContainer();
 
     const newState: Partial<AppBridgeState> = {
-      domain: "my-saleor-instance.cloud",
       saleorApiUrl: "https://my-saleor-instance.cloud/graphql/",
       id: "foo-bar",
       path: "/",
@@ -42,15 +40,15 @@ describe("app-bridge-state.ts", () => {
     expect(
       new AppBridgeStateContainer({
         initialLocale: "pl",
-      }).getState().locale
+      }).getState().locale,
     ).toBe("pl");
   });
 
   it("Can be constructed with initial theme", () => {
     expect(
       new AppBridgeStateContainer({
         initialTheme: "dark",
-      }).getState().theme
+      }).getState().theme,
     ).toBe("dark");
   });
 });

src/app-bridge/app-bridge-state.ts

@@ -6,15 +6,10 @@ export type AppBridgeState = {
   token?: string;
   id: string;
   ready: boolean;
-  domain: string;
   path: string;
   theme: ThemeType;
   locale: LocaleCode;
   saleorApiUrl: string;
-  /**
-   * Versions of Saleor that app is mounted. Passed from the Dashboard.
-   * Works form Saleor 3.15
-   */
   saleorVersion?: string;
   dashboardVersion?: string;
   user?: {
@@ -39,7 +34,6 @@ type Options = {
 export class AppBridgeStateContainer {
   private state: AppBridgeState = {
     id: "",
-    domain: "",
     saleorApiUrl: "",
     ready: false,
     path: "/",

src/app-bridge/app-bridge.test.ts

@@ -65,7 +65,7 @@ const mockDashboardActionResponse = (actionType: ActionType, actionID: string) =
             payload: { ok: true, actionId: actionID },
           } as DispatchResponseEvent,
           origin,
-        })
+        }),
       );
     }
   }
@@ -96,10 +96,6 @@ describe("AppBridge", () => {
     vi.clearAllMocks();
   });
 
-  it("correctly sets the default domain, if not set in constructor", () => {
-    expect(appBridge.getState().domain).toEqual(domain);
-  });
-
   it("authenticates", () => {
     expect(appBridge.getState().ready).toBe(false);
 
@@ -109,7 +105,7 @@ describe("AppBridge", () => {
       new MessageEvent("message", {
         data: { type: "handshake", payload: { token } },
         origin,
-      })
+      }),
     );
 
     expect(appBridge.getState().ready).toBe(true);
@@ -135,7 +131,7 @@ describe("AppBridge", () => {
       new MessageEvent("message", {
         data: handshakeEvent,
         origin,
-      })
+      }),
     );
 
     // incorrect event type
@@ -144,7 +140,7 @@ describe("AppBridge", () => {
       new MessageEvent("message", {
         data: { type: "invalid", payload: { token: "invalid" } },
         origin,
-      })
+      }),
     );
 
     // incorrect origin
@@ -153,7 +149,7 @@ describe("AppBridge", () => {
       new MessageEvent("message", {
         data: { type: "handshake", payload: { token } },
         origin: "http://wrong.origin.com",
-      })
+      }),
     );
 
     expect(callback).toHaveBeenCalledTimes(1);
@@ -168,7 +164,7 @@ describe("AppBridge", () => {
       new MessageEvent("message", {
         data: { type: "handshake", payload: { token: validJwtToken } },
         origin,
-      })
+      }),
     );
 
     expect(callback).toHaveBeenCalledTimes(1);
@@ -188,7 +184,7 @@ describe("AppBridge", () => {
       new MessageEvent("message", {
         data: themeEvent,
         origin,
-      })
+      }),
     );
 
     expect(callback).toHaveBeenCalledOnce();
@@ -197,10 +193,6 @@ describe("AppBridge", () => {
     unsubscribe();
   });
 
-  it("persists domain", () => {
-    expect(appBridge.getState().domain).toEqual(domain);
-  });
-
   it("dispatches valid action", () => {
     const target = "/test";
     const action = actions.Redirect({ to: target });
@@ -225,7 +217,7 @@ describe("AppBridge", () => {
       new MessageEvent("message", {
         data: handshakeEvent,
         origin,
-      })
+      }),
     );
 
     expect(cb1).toHaveBeenCalledTimes(1);
@@ -238,21 +230,13 @@ describe("AppBridge", () => {
       new MessageEvent("message", {
         data: handshakeEvent,
         origin,
-      })
+      }),
     );
 
     expect(cb1).toHaveBeenCalledTimes(1);
     expect(cb2).toHaveBeenCalledTimes(1);
   });
 
-  it("attaches domain from options in constructor", () => {
-    appBridge = new AppBridge({
-      targetDomain: "https://foo.bar",
-    });
-
-    expect(appBridge.getState().domain).toEqual("https://foo.bar");
-  });
-
   it.each<LocaleCode>(["pl", "en", "it"])("sets initial locale \"%s\" from constructor", (locale) => {
     const instance = new AppBridge({
       initialLocale: locale,
@@ -306,7 +290,7 @@ describe("AppBridge", () => {
       new MessageEvent("message", {
         data: handshakeEvent,
         origin,
-      })
+      }),
     );
 
     expect(appBridge.getState().token).toEqual(handshakeEvent.payload.token);
@@ -316,7 +300,7 @@ describe("AppBridge", () => {
       new MessageEvent("message", {
         data: tokenRefreshEvent,
         origin,
-      })
+      }),
     );
 
     expect(appBridge.getState().token).toEqual(tokenRefreshEvent.payload.token);
@@ -334,7 +318,7 @@ describe("AppBridge", () => {
           dashboard: "3.15.1",
         }),
         origin,
-      })
+      }),
     );
 
     expect(appBridge.getState().token).toEqual(validJwtToken);