@applicaster/zapp-react-dom-app 16.0.0-rc.127 → 16.0.0-rc.128

package/Polyfills/AppLoaderBridge/__tests__/AppLoaderBridge.test.ts

@@ -0,0 +1,221 @@
+import axios from "axios";
+
+jest.mock("axios", () => ({ get: jest.fn() }));
+
+const mockAppData = {
+  accountsAccountId: "account",
+  bundleIdentifier: "com.app",
+  store: "samsung",
+  versionName: "1.0",
+  appFamilyId: "family",
+  // appData.json is camelized
+  riversConfigurationId: "default-layout",
+};
+
+jest.mock("@applicaster/zapp-react-native-redux/AppStore", () => ({
+  appStore: { get: () => mockAppData },
+}));
+
+const get = axios.get as jest.Mock;
+
+const appUrl =
+  "https://assets-secure.applicaster.com/zapp/accounts/account/apps/com.app/samsung_app_store/1.0";
+
+const familyUrl =
+  "https://assets-secure.applicaster.com/zapp/accounts/account/app_families/family";
+
+const storage = new Map<string, string>();
+
+(global as any).window = {
+  localStorage: {
+    getItem: (key) => (storage.has(key) ? storage.get(key) : null),
+    setItem: (key, value) => storage.set(key, String(value)),
+  },
+};
+
+const cacheKey = (key: string) => `loader_cache_::_${key}`;
+
+const ok = (data: unknown, etag?: string) =>
+  Promise.resolve({
+    status: 200,
+    data: JSON.stringify(data),
+    headers: { etag },
+  });
+
+const requestedUrls = () => get.mock.calls.map(([url]) => url);
+
+let AppLoaderBridge;
+
+beforeEach(() => {
+  storage.clear();
+  get.mockReset();
+  process.env.ENABLE_REMOTE_DATA_IN_DEV = "true";
+
+  jest.isolateModules(() => {
+    require("../../AppData").setAppData(mockAppData);
+    AppLoaderBridge = require("..").AppLoaderBridge;
+  });
+});
+
+afterAll(() => {
+  delete process.env.ENABLE_REMOTE_DATA_IN_DEV;
+});
+
+describe("getFile", () => {
+  it("resolves the parsed file and caches its text and etag", async () => {
+    get.mockReturnValue(ok({ id: "config" }, "e1"));
+
+    await expect(
+      AppLoaderBridge.getFile("remoteConfigurations")
+    ).resolves.toEqual({ id: "config" });
+
+    expect(get).toHaveBeenCalledWith(
+      `${appUrl}/remote_configurations/remote_configurations.json`,
+      expect.objectContaining({ headers: { "If-None-Match": null } })
+    );
+
+    expect(storage.get(cacheKey("remoteConfigurations"))).toBe(
+      '{"id":"config"}'
+    );
+
+    expect(storage.get(cacheKey("remoteConfigurationsEtag"))).toBe("e1");
+  });
+
+  it("resolves the cached file when the server answers 304", async () => {
+    storage.set(cacheKey("pipesEndpoints"), '{"id":"cached"}');
+    storage.set(cacheKey("pipesEndpointsEtag"), "e1");
+    get.mockResolvedValue({ status: 304, data: "", headers: {} });
+
+    await expect(AppLoaderBridge.getFile("pipesEndpoints")).resolves.toEqual({
+      id: "cached",
+    });
+
+    expect(get).toHaveBeenCalledWith(
+      `${familyUrl}/data_source_providers/endpoints.json`,
+      expect.objectContaining({ headers: { "If-None-Match": "e1" } })
+    );
+  });
+
+  it("rejects with the configuration error when the body is not JSON", async () => {
+    get.mockResolvedValue({ status: 200, data: "<html>", headers: {} });
+
+    await expect(AppLoaderBridge.getFile("layout")).rejects.toThrow(
+      "cannot retrieve configuration data for layout"
+    );
+  });
+});
+
+describe("prefetchFiles", () => {
+  it("sends the general requests before returning, and getFile uses them", async () => {
+    get.mockImplementation((url) => ok({ url }));
+
+    AppLoaderBridge.prefetchFiles();
+
+    expect(requestedUrls()).toEqual([
+      `${appUrl}/remote_configurations/remote_configurations.json`,
+      `${appUrl}/plugin_configurations/plugin_configurations.json`,
+      `${familyUrl}/data_source_providers/endpoints.json`,
+    ]);
+
+    await expect(
+      AppLoaderBridge.getFile("pluginConfigurations")
+    ).resolves.toEqual({
+      url: `${appUrl}/plugin_configurations/plugin_configurations.json`,
+    });
+
+    expect(get).toHaveBeenCalledTimes(3);
+  });
+
+  it("also requests the layout files for a layout id stored by a previous launch", () => {
+    storage.set(cacheKey("currentLayoutId"), "stored-layout");
+    get.mockImplementation((url) => ok({ url }));
+
+    AppLoaderBridge.prefetchFiles();
+
+    expect(requestedUrls()).toEqual(
+      expect.arrayContaining([
+        `${appUrl}/layouts/stored-layout.json`,
+        `${familyUrl}/layouts/stored-layout/cell_styles.json`,
+        `${familyUrl}/layouts/stored-layout/presets_mapping.json`,
+      ])
+    );
+
+    expect(get).toHaveBeenCalledTimes(6);
+  });
+
+  it("falls back to the built-in layout id and stores it as the default", async () => {
+    get.mockImplementation((url) => ok({ url }));
+
+    await expect(AppLoaderBridge.getFile("layout")).resolves.toEqual({
+      url: `${appUrl}/layouts/default-layout.json`,
+    });
+
+    expect(storage.get(cacheKey("defaultLayoutId"))).toBe("default-layout");
+  });
+
+  it("requests a file again when its URL changed after the prefetch", async () => {
+    storage.set(cacheKey("currentLayoutId"), "old-layout");
+    get.mockImplementation((url) => ok({ url }));
+
+    AppLoaderBridge.prefetchFiles();
+    await AppLoaderBridge.switchLayout("new-layout");
+
+    await expect(AppLoaderBridge.getFile("layout")).resolves.toEqual({
+      url: `${appUrl}/layouts/new-layout.json`,
+    });
+
+    expect(get).toHaveBeenCalledTimes(7);
+  });
+
+  it("uses each prefetched request once", async () => {
+    get.mockImplementation((url) => ok({ url }));
+
+    AppLoaderBridge.prefetchFiles();
+    await AppLoaderBridge.getFile("remoteConfigurations");
+    await AppLoaderBridge.getFile("remoteConfigurations");
+
+    expect(get).toHaveBeenCalledTimes(4);
+  });
+
+  it("requests a file again when its prefetch failed", async () => {
+    get.mockImplementation(() => Promise.reject(new Error("network")));
+
+    AppLoaderBridge.prefetchFiles();
+
+    get.mockImplementation((url) => ok({ url }));
+
+    await expect(
+      AppLoaderBridge.getFile("remoteConfigurations")
+    ).resolves.toEqual({
+      url: `${appUrl}/remote_configurations/remote_configurations.json`,
+    });
+
+    expect(requestedUrls()[3]).toBe(
+      `${appUrl}/remote_configurations/remote_configurations.json`
+    );
+
+    expect(get).toHaveBeenCalledTimes(4);
+  });
+
+  it("rejects getFile with the configuration error when the prefetch and its retry failed", async () => {
+    get.mockImplementation(() => Promise.reject(new Error("network")));
+
+    AppLoaderBridge.prefetchFiles();
+
+    await expect(
+      AppLoaderBridge.getFile("remoteConfigurations")
+    ).rejects.toThrow(
+      "cannot retrieve configuration data for remoteConfigurations"
+    );
+
+    expect(get).toHaveBeenCalledTimes(4);
+  });
+
+  it("does nothing in development unless remote data is enabled", () => {
+    delete process.env.ENABLE_REMOTE_DATA_IN_DEV;
+
+    AppLoaderBridge.prefetchFiles();
+
+    expect(get).not.toHaveBeenCalled();
+  });
+});

package/Polyfills/AppLoaderBridge/index.ts

@@ -1,67 +1,115 @@
-import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
+import axios, { AxiosResponse } from "axios";
+import { getAppData } from "../AppData";
 import { getStorageModule } from "../Storage";
 import { STORAGE } from "./utils/enums";
-import { createUrl } from "./utils/utils";
+import {
+  buildUrl,
+  createUrl,
+  getLayoutIds,
+  readLoaderCache,
+  writeLoaderCache,
+} from "./utils/utils";
 
 type StorageResponse = string | null;
 
+type Prefetched = { url: string; response: Promise<AxiosResponse<string>> };
+
 const localStorage: any = getStorageModule("localStorage");
 
+const GENERAL_FILES = [
+  "remoteConfigurations",
+  "pluginConfigurations",
+  "pipesEndpoints",
+];
+
+const LAYOUT_FILES = ["layout", "cellStyles", "presetsMapping"];
+
+function requestFile(type: string, url: string) {
+  return axios.get<string>(url, {
+    headers: {
+      // Sent even without a stored etag (as "null"). A conditional header
+      // keeps the browser's HTTP cache out of these requests, so every launch
+      // gets the current file.
+      "If-None-Match": readLoaderCache(`${type}Etag`),
+    },
+    validateStatus: (status: number): boolean =>
+      status === 200 || status === 304,
+    // Keep the body as text: it is stored as-is and parsed once in getFile.
+    transformResponse: [(body) => body],
+  });
+}
+
 export const AppLoaderBridge = (function () {
-  async function getFile(type: string): Promise<string> {
+  // In-flight requests started by prefetchFiles, each used by the first
+  // getFile call for the same file and URL, which requests the file again
+  // if the prefetch failed.
+  const prefetched = new Map<string, Prefetched>();
+
+  /**
+   * Resolves the parsed file. Native bridges resolve a JSON string instead;
+   * getFile callers accept both, which saves serializing and re-parsing
+   * every file on web.
+   */
+  async function getFile(type: string): Promise<unknown> {
     const url: string = await createUrl(type);
+    const pending = prefetched.get(type);
+    prefetched.delete(type);
 
     try {
-      const currentEtag = await localStorage.getItem(
-        `${type}Etag`,
-        STORAGE.APP_LOADER_BRIDGE_NAME_SPACE
-      );
-
-      const config: AxiosRequestConfig = {
-        method: "get",
-        url,
-        headers: {
-          "If-None-Match": currentEtag,
-        },
-        validateStatus: (status: number): boolean =>
-          status === 200 || status === 304,
-      };
-
-      const response: AxiosResponse = await axios(config);
-
-      const {
-        data,
-        headers: { etag },
-        status,
-      } = response;
+      const { data, headers, status } = await (pending?.url === url
+        ? pending.response.catch(() => requestFile(type, url))
+        : requestFile(type, url));
 
       if (status === 304) {
-        const res = await localStorage.getItem(
-          type,
-          STORAGE.APP_LOADER_BRIDGE_NAME_SPACE
-        );
-
-        return JSON.stringify(res);
+        return readLoaderCache(type);
       }
 
-      await localStorage.setItem(
-        `${type}Etag`,
-        etag,
-        STORAGE.APP_LOADER_BRIDGE_NAME_SPACE
-      );
+      const file = JSON.parse(data);
 
-      await localStorage.setItem(
-        type,
-        JSON.stringify(data),
-        STORAGE.APP_LOADER_BRIDGE_NAME_SPACE
-      );
+      writeLoaderCache(`${type}Etag`, headers.etag);
+      writeLoaderCache(type, data);
 
-      return JSON.stringify(data);
+      return file;
     } catch (error) {
       throw new Error("cannot retrieve configuration data for " + type);
     }
   }
 
+  /**
+   * Starts the configuration requests while the app bundle is still
+   * evaluating, so the files download during it instead of after it.
+   * Layout files are only requested for a layout id stored by a previous
+   * launch; without one, the remote configuration may select another layout.
+   * A file whose URL changes by the time getFile asks for it is requested again.
+   */
+  function prefetchFiles(): void {
+    // Mirrors appRemoteDataLoader, which skips remote data in development.
+    if (__DEV__ && process.env.ENABLE_REMOTE_DATA_IN_DEV !== "true") {
+      return;
+    }
+
+    try {
+      const appData = getAppData();
+      const { storedLayoutId } = getLayoutIds(appData);
+
+      const types = storedLayoutId
+        ? [...GENERAL_FILES, ...LAYOUT_FILES]
+        : GENERAL_FILES;
+
+      types.forEach((type) => {
+        const url = buildUrl(type, appData, storedLayoutId);
+        const response = requestFile(type, url);
+
+        // getFile reports failures; this only stops an early or unused
+        // failure from surfacing as an unhandled rejection.
+        response.catch(() => undefined);
+        prefetched.set(type, { url, response });
+      });
+    } catch (error) {
+      // Nothing prefetched; getFile requests the files as before.
+    }
+  }
+
   async function switchLayout(layoutID: string): Promise<boolean> {
     return await localStorage.setItem(
       STORAGE.CURRENT_LAYOUT_ID,
@@ -86,6 +134,7 @@ export const AppLoaderBridge = (function () {
 
   return {
     getFile,
+    prefetchFiles,
     switchLayout,
     getCurrentLayoutId,
     getDefaultLayoutId,

package/Polyfills/AppLoaderBridge/utils/utils.ts

@@ -1,57 +1,68 @@
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
-import { getStorageModule } from "../../Storage";
+import { parseJsonIfNeeded } from "@applicaster/zapp-react-native-utils/functionUtils";
+import { applyNamespaceToKeyName } from "../../Storage";
 import { STORAGE, STORE_PLATFORM } from "./enums";
 
-const localStorage: any = getStorageModule("localStorage");
+const cacheKey = (key: string) =>
+  applyNamespaceToKeyName(key, STORAGE.APP_LOADER_BRIDGE_NAME_SPACE);
 
-export async function createUrl(type: string): Promise<string> {
-  const appData = appStore.get("appData");
+/**
+ * Reads the loader cache with the same keys and parsing as
+ * getStorageModule("localStorage"), but synchronously. Web storage is
+ * synchronous, and prefetchFiles needs it that way: it runs while the app
+ * bundle is still evaluating, and an awaited read would only resume after it.
+ */
+export function readLoaderCache(key: string) {
+  return parseJsonIfNeeded(window.localStorage.getItem(cacheKey(key)));
+}
 
-  const {
-    accountsAccountId,
-    bundleIdentifier,
-    store,
-    versionName,
-    appFamilyId,
-  } = appData;
+export function writeLoaderCache(key: string, value: string) {
+  window.localStorage.setItem(cacheKey(key), value);
+}
 
+/**
+ * The layout id to request, split by where it comes from.
+ * `storedLayoutId` is only set when a previous launch stored one.
+ */
+export function getLayoutIds(appData) {
   // appData.json is camelized, so the built-in id is riversConfigurationId.
   const defaultLayoutId =
     appData.riversConfigurationId || appData.rivers_configuration_id;
 
-  const storedDefault = await localStorage.getItem(
-    STORAGE.DEFAULT_LAYOUT_ID,
-    STORAGE.APP_LOADER_BRIDGE_NAME_SPACE
-  );
+  const storedDefault = readLoaderCache(STORAGE.DEFAULT_LAYOUT_ID);
 
   if ((!storedDefault || storedDefault === "undefined") && defaultLayoutId) {
-    await localStorage.setItem(
-      STORAGE.DEFAULT_LAYOUT_ID,
-      defaultLayoutId,
-      STORAGE.APP_LOADER_BRIDGE_NAME_SPACE
-    );
+    writeLoaderCache(STORAGE.DEFAULT_LAYOUT_ID, defaultLayoutId);
   }
 
-  const currentLayoutId = await localStorage.getItem(
-    STORAGE.CURRENT_LAYOUT_ID,
-    STORAGE.APP_LOADER_BRIDGE_NAME_SPACE
-  );
+  const currentLayoutId = readLoaderCache(STORAGE.CURRENT_LAYOUT_ID);
 
-  const remoteConfig: RemoteConfigurations = await localStorage.getItem(
-    STORAGE.REMOTE_CONFIGURATIONS,
-    STORAGE.APP_LOADER_BRIDGE_NAME_SPACE
+  const remoteConfig: RemoteConfigurations = readLoaderCache(
+    STORAGE.REMOTE_CONFIGURATIONS
   );
 
   const remoteConfigLayoutId = remoteConfig?.general_settings?.layout_id;
 
   /**
-   * It is very important to note the order used in the customLayoutId property.
+   * It is very important to note the order used for the layout id (createUrl uses storedLayoutId || defaultLayoutId).
    * First we are attempting ot use the id set by layout plugin, it is an override of the defined layout.
    * Or use layout id from the remote configuration, remote config is loaded first and it has current layoutId from zapp.
    * Or use layout id that was built with the app, this id can be found in appData.json and is loaded into redux store.
    */
-  const customLayoutId =
-    currentLayoutId || remoteConfigLayoutId || defaultLayoutId;
+  return {
+    storedLayoutId: currentLayoutId || remoteConfigLayoutId,
+    defaultLayoutId,
+  };
+}
+
+export function buildUrl(type: string, appData, layoutId: string): string {
+  const {
+    accountsAccountId,
+    bundleIdentifier,
+    store,
+    versionName,
+    appFamilyId,
+  } = appData;
 
   const baseURL = `https://assets-secure.applicaster.com/zapp/accounts/${accountsAccountId}`;
   const urlTemplate = `apps/${bundleIdentifier}/${STORE_PLATFORM[store]}/${versionName}`;
@@ -62,14 +73,21 @@ export async function createUrl(type: string): Promise<string> {
     case "pluginConfigurations":
       return `${baseURL}/${urlTemplate}/plugin_configurations/plugin_configurations.json`;
     case "layout":
-      return `${baseURL}/${urlTemplate}/layouts/${customLayoutId}.json`;
+      return `${baseURL}/${urlTemplate}/layouts/${layoutId}.json`;
     case "pipesEndpoints":
       return `${baseURL}/app_families/${appFamilyId}/data_source_providers/endpoints.json`;
     case "cellStyles":
-      return `${baseURL}/app_families/${appFamilyId}/layouts/${customLayoutId}/cell_styles.json`;
+      return `${baseURL}/app_families/${appFamilyId}/layouts/${layoutId}/cell_styles.json`;
     case "presetsMapping":
-      return `${baseURL}/app_families/${appFamilyId}/layouts/${customLayoutId}/presets_mapping.json`;
+      return `${baseURL}/app_families/${appFamilyId}/layouts/${layoutId}/presets_mapping.json`;
     default:
       return null;
   }
 }
+
+export async function createUrl(type: string): Promise<string> {
+  const appData = appStore.get("appData");
+  const { storedLayoutId, defaultLayoutId } = getLayoutIds(appData);
+
+  return buildUrl(type, appData, storedLayoutId || defaultLayoutId);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-dom-app",
-  "version": "16.0.0-rc.127",
+  "version": "16.0.0-rc.128",
   "description": "Zapp App Component for Applicaster's Quick Brick React Native App",
   "main": "index.js",
   "scripts": {
@@ -22,11 +22,11 @@
   },
   "homepage": "https://github.com/applicaster/zapp-react-dom-app#readme",
   "dependencies": {
-    "@applicaster/zapp-react-dom-ui-components": "16.0.0-rc.127",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.127",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.127",
-    "@applicaster/zapp-react-native-ui-components": "16.0.0-rc.127",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.127",
+    "@applicaster/zapp-react-dom-ui-components": "16.0.0-rc.128",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.128",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.128",
+    "@applicaster/zapp-react-native-ui-components": "16.0.0-rc.128",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.128",
     "abortcontroller-polyfill": "^1.7.5",
     "typeface-montserrat": "^0.0.54",
     "video.js": "7.14.3",