Add app ID to state

README.md

@@ -17,7 +17,7 @@ const app = createApp();
 
 Access app state:
 ```js
-const { token, domain, ready } = app.getState();
+const { token, domain, ready, id } = app.getState();
 ```
 
 ## Events

src/app.ts

@@ -1,8 +1,9 @@
 import { SSR } from "./constants";
 import { Events, EventType, PayloadOfEvent } from "./events";
 
-type State = {
+export type AppBridgeState = {
   token?: string;
+  id: string;
   ready: boolean;
   domain: string;
 };
@@ -11,7 +12,7 @@ type SubscribeMap = {
   [type in EventType]: Record<any, EventCallback<PayloadOfEvent<type>>>;
 };
 
-function reducer(state: State, event: Events) {
+function reducer(state: AppBridgeState, event: Events) {
   switch (event.type) {
     case EventType.handshake: {
       const newState = {
@@ -36,7 +37,8 @@ export const app = (() => {
     return null as never;
   }
 
-  let state: State = {
+  let state: AppBridgeState = {
+    id: "",
     domain: "",
     ready: false,
   };
@@ -120,7 +122,7 @@ export const app = (() => {
     return state;
   }
 
-  function setState(newState: Partial<State>) {
+  function setState(newState: Partial<AppBridgeState>) {
     state = {
       ...state,
       ...newState,

src/index.ts

@@ -12,7 +12,9 @@ export function createApp(targetDomain?: string) {
     domain = url.searchParams.get("domain") || "";
   }
 
-  app.setState({ domain });
+  const id = new URL(domain).searchParams.get("id") ?? "";
+
+  app.setState({ domain, id });
 
   /**
    * Dispatches Action to Saleor Dashboard.
@@ -72,4 +74,5 @@ export function createApp(targetDomain?: string) {
 
 export * from "./events";
 export * from "./actions";
+export * from "./types";
 export default createApp;

src/types.ts

@@ -0,0 +1,5 @@
+import createApp from ".";
+import { AppBridgeState } from "./app";
+
+export type App = ReturnType<typeof createApp>;
+export { AppBridgeState };

test/index.test.ts

@@ -10,7 +10,7 @@ Object.defineProperty(window.document, "referrer", {
 import { actions, DispatchResponseEvent, createApp } from "../src";
 
 describe("createApp", () => {
-  const domain = "test-domain";
+  const domain = "http://test-domain.com/?id=appid";
   const app = createApp(domain);
 
   it("correctly sets the domain", () => {
@@ -75,6 +75,7 @@ describe("createApp", () => {
     expect(callback).toHaveBeenCalledTimes(1);
     expect(callback).toHaveBeenCalledWith(payload);
     expect(app.getState().token).toEqual(token);
+    expect(app.getState().id).toEqual("appid");
 
     // unsubscribe
     unsubscribe();