@applicaster/zapp-react-native-utils 16.0.0-alpha.1929433645 → 16.0.0-alpha.2105365027

package/manifestUtils/mobileAction/groups/defaults.js

@@ -1,5 +1,6 @@
 const DEFAULT_MOBILE_ACTION_BUTTONS_CONTAINER_DEFAULTS = {
   buttonsEnabled: false,
+  cellNavigationEnabled: false,
 
   align: "left",
   overImagePosition: "bottom_left",
@@ -63,7 +64,7 @@ const DEFAULT_MOBILE_ACTION_BUTTON_PRESETS = {
   },
   2: {
     buttonEnabled: false,
-    assignAction: "secondary_navigation",
+    assignAction: "trailer_action",
   },
   3: {
     buttonEnabled: false,

package/navigationUtils/xrayNavigator.ts

@@ -0,0 +1,12 @@
+/**
+ * The app navigator for the X-Ray toolboxes (nav, screen), which run outside React. The
+ * NavigationProvider sets it after each commit; it is a plain module variable, so updating it
+ * never renders anything.
+ */
+let navigator: QuickBrickAppNavigator | undefined;
+
+export const setXrayNavigator = (value: QuickBrickAppNavigator | undefined) => {
+  navigator = value;
+};
+
+export const getXrayNavigator = () => navigator;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "16.0.0-alpha.1929433645",
+  "version": "16.0.0-alpha.2105365027",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-alpha.1929433645",
+    "@applicaster/applicaster-types": "16.0.0-alpha.2105365027",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/perfTracker.ts

@@ -0,0 +1,203 @@
+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();
+
+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/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/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;
 }

package/reactHooks/feed/__tests__/useMarkPipesDataStale.test.tsx

@@ -0,0 +1,243 @@
+import { renderHook } from "@testing-library/react-native";
+import * as zappPipesModule from "@applicaster/zapp-react-native-redux/ZappPipes";
+import * as useRouteHook from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute";
+import * as useNavigationHooks from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
+import * as useIsScreenActiveHook from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive";
+import { refreshCoordinator } from "../../../refreshUtils/RefreshCoordinator";
+import { useMarkPipesDataStale } from "../useMarkPipesDataStale";
+
+const mockDispatch = jest.fn();
+
+jest.mock("@applicaster/zapp-react-native-redux", () => ({
+  ...jest.requireActual("@applicaster/zapp-react-native-redux"),
+  useAppDispatch: () => mockDispatch,
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Decorators/RiverFeedLoader/utils/getDatasourceUrl",
+  () => ({
+    getDatasourceUrl: jest.fn(
+      (_ctx, component) => component?.data?.source || null
+    ),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Decorators/RiverFeedLoader/utils/usePipesContexts",
+  () => ({
+    usePipesContexts: jest.fn(() => ({})),
+  })
+);
+
+describe("useMarkPipesDataStale", () => {
+  let mockNavigator: any;
+  let mockRoute: any;
+  let mockIsActive: boolean;
+
+  const riverId = "river-123";
+
+  const refreshableComponent: any = {
+    id: "comp-1",
+    rules: { clear_cache_on_reload: true },
+    data: { source: "https://feed.example.com/data1" },
+  };
+
+  const stringBooleanComponent: any = {
+    id: "comp-2",
+    rules: { clear_cache_on_reload: "true" },
+    data: { source: "https://feed.example.com/data2" },
+  };
+
+  const nonRefreshableComponent: any = {
+    id: "comp-3",
+    rules: { clear_cache_on_reload: false },
+    data: { source: "https://feed.example.com/data3" },
+  };
+
+  const noSourceComponent: any = {
+    id: "comp-4",
+    rules: { clear_cache_on_reload: true },
+  };
+
+  const allComponents = [
+    refreshableComponent,
+    stringBooleanComponent,
+    nonRefreshableComponent,
+    noSourceComponent,
+  ];
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    mockIsActive = true;
+
+    mockNavigator = {
+      currentRoute: "river/river-123",
+    };
+
+    mockRoute = {
+      pathname: "river/river-123",
+      screenData: { id: riverId },
+    };
+
+    jest
+      .spyOn(useNavigationHooks, "useNavigation")
+      .mockImplementation(() => mockNavigator);
+
+    jest.spyOn(useRouteHook, "useRoute").mockImplementation(() => mockRoute);
+
+    jest
+      .spyOn(useIsScreenActiveHook, "useIsScreenActive")
+      .mockImplementation(() => mockIsActive);
+
+    jest
+      .spyOn(refreshCoordinator, "triggerRefresh")
+      .mockImplementation(jest.fn());
+
+    jest
+      .spyOn(zappPipesModule, "markPipesDataStale")
+      .mockImplementation(
+        (url, opts) => ({ type: "MARK_STALE", url, opts }) as any
+      );
+  });
+
+  describe("on unmount", () => {
+    it("marks clear_cache_on_reload feeds stale on unmount", () => {
+      const { unmount } = renderHook(() =>
+        useMarkPipesDataStale(riverId, allComponents)
+      );
+
+      expect(mockDispatch).not.toHaveBeenCalled();
+
+      unmount();
+
+      expect(zappPipesModule.markPipesDataStale).toHaveBeenCalledWith(
+        "https://feed.example.com/data1",
+        { riverId }
+      );
+
+      expect(zappPipesModule.markPipesDataStale).toHaveBeenCalledWith(
+        "https://feed.example.com/data2",
+        { riverId }
+      );
+
+      expect(zappPipesModule.markPipesDataStale).not.toHaveBeenCalledWith(
+        "https://feed.example.com/data3",
+        expect.anything()
+      );
+
+      expect(mockDispatch).toHaveBeenCalledTimes(2);
+    });
+
+    it("does not mark stale on unmount if pathname includes videoModal", () => {
+      mockRoute.pathname = "videoModal/item-123";
+
+      const { unmount } = renderHook(() =>
+        useMarkPipesDataStale(riverId, allComponents)
+      );
+
+      unmount();
+
+      expect(mockDispatch).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("on screen return (screen not unmounted in Transitioner)", () => {
+    it("does not trigger refresh on initial mount", () => {
+      renderHook(() => useMarkPipesDataStale(riverId, allComponents));
+
+      expect(refreshCoordinator.triggerRefresh).not.toHaveBeenCalled();
+      expect(mockDispatch).not.toHaveBeenCalled();
+    });
+
+    it("triggers refresh and marks stale when returning from a deeper screen", () => {
+      const { rerender } = renderHook(() =>
+        useMarkPipesDataStale(riverId, allComponents)
+      );
+
+      // 1. User navigates away to a deeper screen
+      mockNavigator.currentRoute = "river/deeper-screen";
+      mockIsActive = false;
+      rerender({});
+
+      expect(refreshCoordinator.triggerRefresh).not.toHaveBeenCalled();
+      expect(mockDispatch).not.toHaveBeenCalled();
+
+      // 2. User presses back and returns to original screen
+      mockNavigator.currentRoute = "river/river-123";
+      mockIsActive = true;
+      rerender({});
+
+      expect(refreshCoordinator.triggerRefresh).toHaveBeenCalledTimes(1);
+
+      expect(refreshCoordinator.triggerRefresh).toHaveBeenCalledWith(
+        [refreshableComponent, stringBooleanComponent],
+        riverId
+      );
+
+      expect(zappPipesModule.markPipesDataStale).toHaveBeenCalledWith(
+        "https://feed.example.com/data1",
+        { riverId }
+      );
+
+      expect(zappPipesModule.markPipesDataStale).toHaveBeenCalledWith(
+        "https://feed.example.com/data2",
+        { riverId }
+      );
+
+      expect(mockDispatch).toHaveBeenCalledTimes(2);
+    });
+
+    it("does not trigger duplicate refreshes on subsequent re-renders on the same screen", () => {
+      const { rerender } = renderHook(() =>
+        useMarkPipesDataStale(riverId, allComponents)
+      );
+
+      // Navigate away
+      mockNavigator.currentRoute = "river/deeper-screen";
+      mockIsActive = false;
+      rerender({});
+
+      // Return
+      mockNavigator.currentRoute = "river/river-123";
+      mockIsActive = true;
+      rerender({});
+
+      expect(refreshCoordinator.triggerRefresh).toHaveBeenCalledTimes(1);
+
+      // Subsequent re-render without navigation
+      rerender({});
+      rerender({});
+
+      expect(refreshCoordinator.triggerRefresh).toHaveBeenCalledTimes(1);
+    });
+
+    it("triggers refresh again if user navigates away a second time and returns", () => {
+      const { rerender } = renderHook(() =>
+        useMarkPipesDataStale(riverId, allComponents)
+      );
+
+      // First trip: navigate away and return
+      mockNavigator.currentRoute = "river/screen-2";
+      mockIsActive = false;
+      rerender({});
+
+      mockNavigator.currentRoute = "river/river-123";
+      mockIsActive = true;
+      rerender({});
+
+      expect(refreshCoordinator.triggerRefresh).toHaveBeenCalledTimes(1);
+
+      // Second trip: navigate away to another screen and return
+      mockNavigator.currentRoute = "river/screen-3";
+      mockIsActive = false;
+      rerender({});
+
+      mockNavigator.currentRoute = "river/river-123";
+      mockIsActive = true;
+      rerender({});
+
+      expect(refreshCoordinator.triggerRefresh).toHaveBeenCalledTimes(2);
+    });
+  });
+});