@applicaster/zapp-react-native-utils 16.0.0-alpha.2434153375 → 16.0.0-alpha.2500443242

package/perfTracker.ts

@@ -0,0 +1,206 @@
+import { createLogger } from "./logger";
+import { NativeModules } from "react-native";
+
+const { ProfilerBridge } = NativeModules;
+
+const loggerObj = createLogger({
+  category: "PerfTracker",
+  subsystem: "PerfTelemetry",
+});
+
+const renderCounts: Record<string, number> = {};
+const cellRenderCounts: Record<string, number> = {};
+
+const timingStats: Record<
+  string,
+  { totalMs: number; count: number; maxMs: number; minMs: number }
+> = {};
+
+const t0 = Date.now();
+
+/** True only where the native profiler is registered; lets always-on logs skip the perf lines without it. */
+export const isProfilerAvailable = (): boolean => Boolean(ProfilerBridge);
+
+export function getDelta(): number {
+  return Date.now() - t0;
+}
+
+export function recordTiming(
+  name: string,
+  durationMs: number,
+  details?: Record<string, any>
+): void {
+  const rounded = Math.round(durationMs * 100) / 100;
+
+  if (!timingStats[name]) {
+    timingStats[name] = {
+      totalMs: rounded,
+      count: 1,
+      maxMs: rounded,
+      minMs: rounded,
+    };
+  } else {
+    const s = timingStats[name];
+    s.totalMs = Math.round((s.totalMs + rounded) * 100) / 100;
+    s.count += 1;
+    if (rounded > s.maxMs) s.maxMs = rounded;
+    if (rounded < s.minMs) s.minMs = rounded;
+  }
+
+  const stat = timingStats[name];
+  const avg = Math.round((stat.totalMs / stat.count) * 100) / 100;
+  const delta = getDelta();
+
+  if (ProfilerBridge?.updateTimer) {
+    try {
+      ProfilerBridge.updateTimer("timings", name, rounded);
+    } catch (e) {}
+  }
+
+  if (stat.count <= 3 || rounded >= 3 || stat.count % 10 === 0) {
+    const msg = `[PERF TIMING #${stat.count}] ${name}: ${rounded}ms (avg: ${avg}ms, max: ${stat.maxMs}ms, total: ${stat.totalMs}ms) (+${delta}ms)`;
+
+    loggerObj.log_info(msg, {
+      timingName: name,
+      durationMs: rounded,
+      avgMs: avg,
+      maxMs: stat.maxMs,
+      minMs: stat.minMs,
+      totalMs: stat.totalMs,
+      count: stat.count,
+      deltaMs: delta,
+      ...(details || {}),
+    });
+  }
+}
+
+export function measureSync<T>(
+  name: string,
+  fn: () => T,
+  details?: Record<string, any>
+): T {
+  const start =
+    typeof performance !== "undefined" && performance.now
+      ? performance.now()
+      : Date.now();
+
+  try {
+    return fn();
+  } finally {
+    const end =
+      typeof performance !== "undefined" && performance.now
+        ? performance.now()
+        : Date.now();
+
+    recordTiming(name, end - start, details);
+  }
+}
+
+export function startTimer(
+  name: string,
+  details?: Record<string, any>
+): (additionalDetails?: Record<string, any>) => number {
+  const start =
+    typeof performance !== "undefined" && performance.now
+      ? performance.now()
+      : Date.now();
+
+  return (additionalDetails?: Record<string, any>) => {
+    const end =
+      typeof performance !== "undefined" && performance.now
+        ? performance.now()
+        : Date.now();
+
+    const duration = end - start;
+
+    recordTiming(name, duration, {
+      ...(details || {}),
+      ...(additionalDetails || {}),
+    });
+
+    return duration;
+  };
+}
+
+export function countRender(
+  componentName: string,
+  details?: Record<string, any>
+): number {
+  renderCounts[componentName] = (renderCounts[componentName] || 0) + 1;
+  const count = renderCounts[componentName];
+  const delta = getDelta();
+
+  if (ProfilerBridge?.updateCounter) {
+    try {
+      ProfilerBridge.updateCounter("render_count", componentName, count);
+    } catch (e) {}
+  }
+
+  const msg = `[PERF RENDER #${count}] ${componentName} (+${delta}ms)`;
+
+  loggerObj.log_info(msg, {
+    component: componentName,
+    count,
+    deltaMs: delta,
+    ...(details || {}),
+  });
+
+  return count;
+}
+
+export function countCellRender(
+  cellType: string,
+  itemId: string | number,
+  details?: Record<string, any>
+): number {
+  const key = `${cellType}:${itemId || "unknown"}`;
+  cellRenderCounts[key] = (cellRenderCounts[key] || 0) + 1;
+  const count = cellRenderCounts[key];
+
+  renderCounts[cellType] = (renderCounts[cellType] || 0) + 1;
+  const totalForType = renderCounts[cellType];
+  const delta = getDelta();
+
+  if (ProfilerBridge?.updateCounter) {
+    try {
+      ProfilerBridge.updateCounter("cell_render_count", cellType, totalForType);
+    } catch (e) {}
+  }
+
+  if (count > 1 || totalForType <= 12 || totalForType % 10 === 0) {
+    const msg = `[PERF CELL ${
+      count > 1 ? "RE-RENDER" : "RENDER"
+    } #${count}] ${cellType} item:${itemId} (total ${cellType}: #${totalForType}) (+${delta}ms)`;
+
+    loggerObj.log_info(msg, {
+      cellType,
+      itemId,
+      itemRenderCount: count,
+      totalForCellType: totalForType,
+      deltaMs: delta,
+      ...(details || {}),
+    });
+  }
+
+  return count;
+}
+
+export function dumpSummary(checkpoint: string): void {
+  const delta = getDelta();
+  let totalRenders = 0;
+
+  for (const k in renderCounts) {
+    totalRenders += renderCounts[k];
+  }
+
+  const summaryMsg = `=== [PERF SUMMARY at ${checkpoint}] total renders: ${totalRenders} (+${delta}ms) ===`;
+
+  loggerObj.log_info(summaryMsg, {
+    checkpoint,
+    elapsedMs: delta,
+    totalRenders,
+    renderCounts,
+    cellRenderCounts,
+    timingStats,
+  });
+}

package/pluginUtils/__tests__/pluginUtils.test.js

@@ -1,3 +1,9 @@
+const mockAppStoreGet = jest.fn();
+
+jest.mock("@applicaster/zapp-react-native-redux/AppStore", () => ({
+  appStore: { get: (key) => mockAppStoreGet(key) },
+}));
+
 import * as R from "ramda";
 import * as pluginUtils from "../index";
 
@@ -148,6 +154,32 @@ describe("findPluginByIdentifier", () => {
   });
 });
 
+describe("getPluginByIdentifier", () => {
+  const { getPluginByIdentifier } = pluginUtils;
+
+  const plugins = {
+    foo: pluginMock("foo", "foo", "some_plugin_type"),
+    bar: pluginMock("foo", "bar", "some_plugin_type"),
+  };
+
+  beforeEach(() => {
+    mockAppStoreGet.mockReset();
+  });
+
+  it("reads plugins from appStore and returns the matching plugin", () => {
+    mockAppStoreGet.mockReturnValue(plugins);
+
+    expect(getPluginByIdentifier("foo")).toEqual(plugins.foo);
+    expect(mockAppStoreGet).toHaveBeenCalledWith("plugins");
+  });
+
+  it("returns undefined when the plugin is not found", () => {
+    mockAppStoreGet.mockReturnValue(plugins);
+
+    expect(getPluginByIdentifier("do_not_exist")).toBeUndefined();
+  });
+});
+
 describe("findPluginByType", () => {
   const { findPluginByType } = pluginUtils;
 

package/pluginUtils/index.ts

@@ -1,4 +1,5 @@
 import * as R from "ramda";
+import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 import { toCamelCase, toPascalCase } from "../stringUtils";
 
 import { getNavigationType } from "../navigationUtils";
@@ -97,6 +98,34 @@ export function findPluginByIdentifier(
   return plugin;
 }
 
+/**
+ * Like findPluginByIdentifier, but reads the current plugins list from appStore.
+ * Convenience for non-render / hook code that doesn't already have `plugins` in hand.
+ * @param identifier of the plugin to look for
+ * @param doNotWarn if set to true, will not log a warning if plugin is not found
+ * @return whole plugin if found, undefined otherwise
+ */
+export function getPluginByIdentifier(
+  identifier: string,
+  doNotWarn: boolean = false
+): (QuickBrickPlugin | ZappPlugin | Plugin) | undefined {
+  try {
+    const plugins = appStore.get("plugins") ?? {};
+
+    return findPluginByIdentifier(identifier, plugins, doNotWarn);
+  } catch (error) {
+    if (!doNotWarn) {
+      pluginUtilsLogger.warning({
+        message:
+          "Could not read plugins from appStore while resolving plugin by identifier",
+        data: { identifier, error },
+      });
+    }
+
+    return undefined;
+  }
+}
+
 const pluginTypeForItemTypeMap = {
   playable: "player",
 };

package/reactHooks/__tests__/getPluginConfiguration.test.ts

@@ -0,0 +1,82 @@
+import { renderHook } from "@testing-library/react-native";
+
+const plugin = {
+  identifier: "cast",
+  configuration: {
+    title: "Configured",
+    localizations: { fr: { close: "Fermer" } },
+  },
+};
+
+jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
+  usePlugins: () => [plugin],
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/localizationsHelper",
+  () => ({ getUILanguage: () => "fr" })
+);
+
+import {
+  getPluginConfiguration,
+  mergeLocalizations,
+  usePluginConfiguration,
+} from "../usePluginConfiguration";
+
+const manifest = {
+  custom_configuration_fields: [
+    { key: "title", initial_value: "Default" },
+    { key: "color", initial_value: "red" },
+  ],
+  localizations: {
+    fields: [
+      { key: "close", initial_value: "Close" },
+      { key: "cancel", initial_value: "Cancel" },
+    ],
+  },
+};
+
+it("matches usePluginConfiguration outside React", () => {
+  const { result } = renderHook(() => usePluginConfiguration("cast", manifest));
+
+  expect(getPluginConfiguration(plugin, manifest)).toEqual(result.current);
+});
+
+// Expected values are what R.mergeDeepWith((l, r) => (isNil(l) ? r : l)) returned before ramda was removed
+describe("mergeLocalizations", () => {
+  const defaults = { en: { close: "Close", cancel: "Cancel" } };
+
+  it("returns the defaults when nothing is configured", () => {
+    expect(mergeLocalizations(undefined, defaults)).toEqual(defaults);
+  });
+
+  it("keeps configured values, fills nil ones and missing keys from defaults", () => {
+    expect(
+      mergeLocalizations(
+        { en: { close: null, extra: "X" }, fr: { close: "Fermer" } },
+        defaults
+      )
+    ).toEqual({
+      en: { close: "Close", extra: "X", cancel: "Cancel" },
+      fr: { close: "Fermer" },
+    });
+  });
+
+  it("does not merge arrays", () => {
+    expect(
+      mergeLocalizations(
+        { en: { close: ["a"] } },
+        { en: { close: ["b"], cancel: "C" } }
+      )
+    ).toEqual({ en: { close: ["a"], cancel: "C" } });
+  });
+});
+
+it("keeps configured languages first, so the fallback language stays the configured one", () => {
+  const merged = mergeLocalizations(
+    { he: { close: "סגור" }, en: { close: "Close it" } },
+    { en: { close: "Close" } }
+  );
+
+  expect(Object.keys(merged)).toEqual(["he", "en"]);
+});

package/reactHooks/cell-click/__tests__/index.test.js

@@ -5,6 +5,7 @@ import { ActionExecutorContext } from "@applicaster/zapp-react-native-utils/acti
 
 const mockNavigator = {
   getPathname: () => "pathnameMock",
+  currentRoute: "pathnameMock",
   push: jest.fn(),
   data: {},
 };
@@ -29,6 +30,7 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({
   ),
   useTargetScreenData: jest.fn(() => ({})),
   useCurrentScreenData: jest.fn(() => ({})),
+  useScreenContext: jest.fn(() => ({})),
 }));
 
 jest.mock("@applicaster/zapp-react-native-ui-components/Contexts", () => ({
@@ -66,6 +68,12 @@ const wrapper = ({ children }) => (
   </CellTapContext.Provider>
 );
 
+const actionExecutorWrapper = ({ children }) => (
+  <ActionExecutorContext.Provider value={actionExecutor}>
+    {children}
+  </ActionExecutorContext.Provider>
+);
+
 describe("useCellClick", () => {
   it("returns a function", () => {
     const { result } = renderHook(() => useCellClick(mockProps));
@@ -95,4 +103,60 @@ describe("useCellClick", () => {
 
     cleanup();
   });
+
+  it("does not push when the cell finishes a hook", async () => {
+    mockNavigator.push.mockClear();
+
+    const item = {
+      id: "profile-1",
+      type: { value: "feed" },
+      extensions: {
+        tap_actions: {
+          actions: [
+            { type: "sessionStorageSet" },
+            { type: "finishHook", options: { success: true } },
+          ],
+        },
+      },
+    };
+
+    const { result } = renderHook(() => useCellClick({ item }), {
+      wrapper: actionExecutorWrapper,
+    });
+
+    await result.current();
+
+    await waitFor(() => {
+      expect(actionExecutor.handleEntryActions).toHaveBeenCalled();
+    });
+
+    expect(mockNavigator.push).not.toHaveBeenCalled();
+    cleanup();
+  });
+
+  it("pushes after tap actions that do not finish a hook", async () => {
+    mockNavigator.push.mockClear();
+
+    const item = {
+      id: "episode-1",
+      type: { value: "feed" },
+      extensions: {
+        tap_actions: {
+          actions: [{ type: "sessionStorageSet" }],
+        },
+      },
+    };
+
+    const { result } = renderHook(() => useCellClick({ item }), {
+      wrapper: actionExecutorWrapper,
+    });
+
+    await result.current();
+
+    await waitFor(() => {
+      expect(mockNavigator.push).toHaveBeenCalled();
+    });
+
+    cleanup();
+  });
 });

package/reactHooks/cell-click/index.ts

@@ -83,6 +83,12 @@ export const useCellClick = ({
 
       logOnPress(selectedItem, pathname, component, onCellTap);
 
+      const tapActions = selectedItem?.extensions?.tap_actions?.actions;
+
+      const finishesHook =
+        Array.isArray(tapActions) &&
+        tapActions.some((action) => action?.type === "finishHook");
+
       if (selectedItem) {
         await actionExecutor?.handleEntryActions(selectedItem, {
           component,
@@ -101,20 +107,21 @@ export const useCellClick = ({
             url: selectedItem.link.href,
           });
         }
-      } else {
-        if (isFunction(onCellTap)) {
-          onCellTap?.(selectedItem, _index);
-        } else {
-          if (currentRoute === pathname || pathname.includes("video-modal")) {
-            const targetScreen = component?.data?.target;
-
-            push(
-              R.when(
-                () => targetScreen,
-                R.mergeLeft({ screen_type: targetScreen })
-              )(selectedItem)
-            );
-          }
+      } else if (isFunction(onCellTap)) {
+        onCellTap?.(selectedItem, _index);
+      } else if (!finishesHook) {
+        // finishHook already completes the hook and navigates to the original
+        // target. Pushing the cell as well stacks a second copy of that screen
+        // (e.g. home/home after a profile selector hook).
+        if (currentRoute === pathname || pathname.includes("video-modal")) {
+          const targetScreen = component?.data?.target;
+
+          push(
+            R.when(
+              () => targetScreen,
+              R.mergeLeft({ screen_type: targetScreen })
+            )(selectedItem)
+          );
         }
       }
     },

package/reactHooks/connection/index.tsx

@@ -4,6 +4,11 @@ import { NetInfoState } from "@react-native-community/netinfo";
 import { NetworkStatusContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NetworkStatusContext";
 import { isOnline } from "@applicaster/quick-brick-core/App/NetworkStatusProvider/utils";
 
+type ConnectionInfo = NetInfoState & {
+  deviceStatus: NetStatus;
+  stillOfflineAfterResumeCount?: number;
+};
+
 /**
  * This hook returns connection type from RN NetInfo component or boolean for iConnected if justOnlineStatus flag is set
  * @param {boolean} justOnlineStatus - flag if to return boolean for isConnected
@@ -12,16 +17,14 @@ import { isOnline } from "@applicaster/quick-brick-core/App/NetworkStatusProvide
 
 export function useConnectionInfo(justOnlineStatus: true): boolean;
 
-export function useConnectionInfo(
-  justOnlineStatus: false
-): NetInfoState & { deviceStatus: NetStatus };
+export function useConnectionInfo(justOnlineStatus: false): ConnectionInfo;
 
 export function useConnectionInfo(
   justOnlineStatus: boolean
-): boolean | (NetInfoState & { deviceStatus: NetStatus }) {
+): boolean | ConnectionInfo {
   const connectionInfo = React.useContext(
     NetworkStatusContext
-  ) as NetInfoState & { deviceStatus: NetStatus };
+  ) as ConnectionInfo;
 
   return justOnlineStatus ? isOnline(connectionInfo) === true : connectionInfo;
 }