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

package/reactHooks/feed/useMarkPipesDataStale.ts

@@ -3,46 +3,91 @@ import React from "react";
 import { getDatasourceUrl } from "@applicaster/zapp-react-native-ui-components/Decorators/RiverFeedLoader/utils/getDatasourceUrl";
 import { usePipesContexts } from "@applicaster/zapp-react-native-ui-components/Decorators/RiverFeedLoader/utils/usePipesContexts";
 import { markPipesDataStale } from "@applicaster/zapp-react-native-redux/ZappPipes";
-
-import { useRoute } from "../navigation";
 import { useAppDispatch } from "@applicaster/zapp-react-native-redux";
+import { isTrue } from "../../booleanUtils";
+import { refreshCoordinator } from "../../refreshUtils/RefreshCoordinator";
+import { useNavigation, useRoute } from "../navigation";
+import { usePrevious } from "../utils";
+
+const getRefreshableComponents = (components: ZappUIComponent[]) =>
+  components?.filter(
+    (c) => isTrue(c?.rules?.clear_cache_on_reload) && c?.data?.source
+  ) || [];
 
 /**
  * Mark a river's `clear_cache_on_reload` feeds as stale when the screen is
  * unmounted. The cached data is kept (so a screen sharing the same feed does
  * not lose it mid-mount) and revalidated on next access.
+ *
+ * Also triggers refresh for mounted components and marks feeds stale when
+ * returning back to this screen from a deeper route in the Transitioner
+ * (where the screen was kept mounted in the background).
+ *
  * @param {string} riverId screen id
  * @param {Array} riverComponents list of UI components
  */
-export const useMarkPipesDataStale = (riverId, riverComponents) => {
+export const useMarkPipesDataStale = (
+  riverId: string,
+  riverComponents: ZappUIComponent[]
+) => {
   const dispatch = useAppDispatch();
   const { screenData, pathname } = useRoute();
   const pipesContexts = usePipesContexts(riverId, pathname);
+  const { currentRoute } = useNavigation();
+  const prevRoute = usePrevious(currentRoute);
 
-  React.useEffect(() => {
-    return () => {
-      riverComponents.forEach((component) => {
-        if (
-          component?.rules?.clear_cache_on_reload &&
-          component?.data?.source &&
-          // We don't want to refresh cache when closing/minimising videoModal
-          !pathname.includes("videoModal")
-        ) {
-          const url = getDatasourceUrl(
-            {
-              screenData,
-              ...pipesContexts,
-            },
-            component
-          );
-
-          if (url) {
-            dispatch(markPipesDataStale(url, { riverId }));
-          }
+  const isBackToScreen = Boolean(
+    prevRoute && prevRoute !== currentRoute && currentRoute === pathname
+  );
+
+  const invalidateComponents = React.useCallback(
+    (components: ZappUIComponent[]) => {
+      components.forEach((component) => {
+        const url = getDatasourceUrl(
+          { screenData, ...pipesContexts },
+          component
+        );
+
+        if (url) {
+          dispatch(markPipesDataStale(url, { riverId }));
         }
       });
+    },
+    [dispatch, screenData, pipesContexts, riverId]
+  );
+
+  // Stale invalidation on unmount (existing behavior)
+  /* eslint-disable @wogns3623/better-exhaustive-deps/exhaustive-deps */
+  React.useEffect(() => {
+    return () => {
+      if (pathname?.includes("videoModal")) return;
+
+      invalidateComponents(getRefreshableComponents(riverComponents));
     };
   }, []);
+  /* eslint-enable @wogns3623/better-exhaustive-deps/exhaustive-deps */
+
+  // Reload when returning back to this screen from another screen
+  React.useEffect(() => {
+    if (!isBackToScreen || pathname?.includes("videoModal")) {
+      return;
+    }
+
+    const refreshable = getRefreshableComponents(riverComponents);
+
+    if (refreshable.length === 0) {
+      return;
+    }
+
+    invalidateComponents(refreshable);
+    refreshCoordinator.triggerRefresh(refreshable, riverId);
+  }, [
+    isBackToScreen,
+    pathname,
+    riverComponents,
+    riverId,
+    invalidateComponents,
+  ]);
 };
 
 /**

package/reactHooks/usePluginConfiguration.ts

@@ -1,4 +1,3 @@
-import * as R from "ramda";
 import { useMemo } from "react";
 
 import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
@@ -6,7 +5,8 @@ import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
 // importing this way prevents typescript packages importing from this
 // file to go crazy reporting errors on JS
 import { populateConfigurationValues } from "@applicaster/zapp-react-native-utils/configurationUtils";
-import { useLocalizedStrings } from "../localizationUtils";
+import { getLocalizedStrings, useLocalizedStrings } from "../localizationUtils";
+import { isNil, pathOr } from "../utils";
 
 const populateFields = (
   data,
@@ -14,16 +14,72 @@ const populateFields = (
   pathToValues: string | string[] = "configuration",
   skipDefaults = false
 ) =>
-  R.compose(
-    (config) =>
-      populateConfigurationValues(manifestFields, config, skipDefaults),
-    R.pathOr({}, R.unless(Array.isArray, Array)(pathToValues))
-  )(data);
+  populateConfigurationValues(
+    manifestFields,
+    pathOr({}, pathToValues, data),
+    skipDefaults
+  );
 
 export function parsePluginConfiguration(plugin, manifest) {
   return populateFields(plugin, manifest.custom_configuration_fields);
 }
 
+const getDefaultLocalizations = (manifest) =>
+  manifest?.localizations?.fields?.reduce(
+    (defaults, { key, initial_value }) => ({
+      en: { ...defaults.en, [key]: initial_value },
+    }),
+    { en: {} }
+  ) || {};
+
+const isPlainObject = (value) =>
+  Object.prototype.toString.call(value) === "[object Object]";
+
+// Deep merge where configured values win, except nil ones (defaults fill the gaps)
+export const mergeLocalizations = (configured, defaults) => {
+  if (!isPlainObject(configured)) return { ...defaults };
+  if (!isPlainObject(defaults)) return { ...configured };
+
+  // Configured keys first, as R.mergeDeepWith: the first language is the fallback
+  return Object.keys({ ...configured, ...defaults }).reduce((merged, key) => {
+    const left = configured[key];
+    const right = defaults[key];
+
+    if (!(key in defaults)) {
+      merged[key] = left;
+    } else if (!(key in configured)) {
+      merged[key] = right;
+    } else if (isPlainObject(left) && isPlainObject(right)) {
+      merged[key] = mergeLocalizations(left, right);
+    } else {
+      merged[key] = isNil(left) ? right : left;
+    }
+
+    return merged;
+  }, {});
+};
+
+/**
+ * usePluginConfiguration outside React: the same result, read once instead of subscribed.
+ */
+export function getPluginConfiguration<T = any, S = Record<string, any>>(
+  plugin,
+  manifest?: any
+): { configurationFields: T; localizations: S } {
+  return {
+    configurationFields: populateFields(
+      plugin,
+      manifest?.custom_configuration_fields
+    ),
+    localizations: getLocalizedStrings(
+      mergeLocalizations(
+        plugin?.configuration?.localizations,
+        getDefaultLocalizations(manifest)
+      )
+    ),
+  };
+}
+
 export function usePluginConfiguration<T = any, S = Record<string, any>>(
   identifier: string,
   manifest?: any
@@ -31,7 +87,7 @@ export function usePluginConfiguration<T = any, S = Record<string, any>>(
   const plugins = usePlugins();
 
   const plugin = useMemo(
-    () => R.find(R.propEq("identifier", identifier), plugins),
+    () => plugins?.find((item) => item?.identifier === identifier),
     [plugins, identifier]
   );
 
@@ -40,29 +96,20 @@ export function usePluginConfiguration<T = any, S = Record<string, any>>(
     [plugin, manifest]
   );
 
-  const defaultLocalizations = useMemo(() => {
-    return (
-      manifest?.localizations?.fields?.reduce(
-        (defaults, { key, initial_value }) =>
-          R.assocPath(["en", key], initial_value, defaults),
-        { en: {} }
-      ) || {}
-    );
-  }, [manifest]);
-
-  const localizationsParams = useMemo(() => {
-    return {
-      localizations: R.mergeDeepWith(
-        (left, right) => {
-          if (R.isNil(left)) return right;
+  const defaultLocalizations = useMemo(
+    () => getDefaultLocalizations(manifest),
+    [manifest]
+  );
 
-          return left;
-        },
+  const localizationsParams = useMemo(
+    () => ({
+      localizations: mergeLocalizations(
         plugin?.configuration?.localizations,
         defaultLocalizations
       ),
-    };
-  }, [plugin?.configuration?.localizations, defaultLocalizations]);
+    }),
+    [plugin?.configuration?.localizations, defaultLocalizations]
+  );
 
   const localizations: S = useLocalizedStrings(localizationsParams);
 
@@ -105,29 +152,20 @@ export function useLayoutConfiguration<
     "localizations",
   ];
 
-  const defaultLocalizations = useMemo(() => {
-    return (
-      manifest?.localizations?.fields?.reduce(
-        (defaults, { key, initial_value }) =>
-          R.assocPath(["en", key], initial_value, defaults),
-        { en: {} }
-      ) || {}
-    );
-  }, [manifest]);
-
-  const localizationsParams = useMemo(() => {
-    return {
-      localizations: R.mergeDeepWith(
-        (left, right) => {
-          if (R.isNil(left)) return right;
+  const defaultLocalizations = useMemo(
+    () => getDefaultLocalizations(manifest),
+    [manifest]
+  );
 
-          return left;
-        },
+  const localizationsParams = useMemo(
+    () => ({
+      localizations: mergeLocalizations(
         layoutData?.localizations,
         defaultLocalizations
       ),
-    };
-  }, [layoutData?.localizations, defaultLocalizations]);
+    }),
+    [layoutData?.localizations, defaultLocalizations]
+  );
 
   // Always call useLocalizedStrings regardless of whether localizations is in the keys
   const localizations: L = useLocalizedStrings(localizationsParams);

package/riverComponetsMeasurementProvider/index.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { NativeModules, View, StyleSheet } from "react-native";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
+import { countRender, dumpSummary } from "../perfTracker";
 
 import { isApplePlatform, isWeb, isTV } from "../reactUtils";
 import { useRivers } from "../reactHooks";
@@ -34,6 +35,7 @@ type Props = {
 type ItemProps = {
   children: React.ReactNode;
   index: number;
+  testID?: string;
 };
 
 type MeasurementContext = {
@@ -76,6 +78,8 @@ export const ScreenLoadingMeasurements = ({
     (index) => (event) => {
       const { height } = event.nativeEvent.layout;
 
+      countRender("ScreenLoading_onItemLayout", { index, height });
+
       if (!notified) {
         // Don't need to set state when event was already sent (optimization)
         dispatchItemLayout({ payload: { index, height } });
@@ -104,6 +108,8 @@ export const ScreenLoadingMeasurements = ({
 
       if (finishLoadingVisible) {
         if (screenData?.home) {
+          dumpSummary("app_home_loaded");
+
           if (isWeb()) {
             logger.sendAudienceEvent("app_home_loaded", {
               loading_duration: Date.now() - moduleInitTime,
@@ -153,11 +159,12 @@ export const ScreenLoadingMeasurements = ({
 export const ScreenLoadingMeasurementsListItemWrapper = ({
   children,
   index,
+  testID,
 }: ItemProps) => {
   const { onLayout } = React.useContext(MeasurementsSettersContext);
 
   return (
-    <View style={styles.container} onLayout={onLayout?.(index)}>
+    <View style={styles.container} onLayout={onLayout?.(index)} testID={testID}>
       {children}
     </View>
   );

package/uiActionsRegistrator/__tests__/subscribe.test.ts

@@ -105,3 +105,29 @@ describe("isActionAvailableFor", () => {
     expect(isActionAvailableFor(undefined, entry)).toBe(true);
   });
 });
+
+describe("uiActionsRegistry.notifyProviderChanged", () => {
+  it("notifies subscribers for a registered provider", () => {
+    const unregister = uiActionsRegistry.registerAction("live-action", value);
+    const listener = jest.fn();
+    const unsubscribe = uiActionsRegistry.subscribe(listener);
+
+    uiActionsRegistry.notifyProviderChanged("live-action");
+
+    expect(listener).toHaveBeenCalledTimes(1);
+
+    unsubscribe();
+    unregister();
+  });
+
+  it("ignores names that are not registered", () => {
+    const listener = jest.fn();
+    const unsubscribe = uiActionsRegistry.subscribe(listener);
+
+    uiActionsRegistry.notifyProviderChanged("unknown-action");
+
+    expect(listener).not.toHaveBeenCalled();
+
+    unsubscribe();
+  });
+});

package/uiActionsRegistrator/registry.ts

@@ -246,6 +246,22 @@ class UIActionsRegistry {
     this.changeListeners.slice().forEach((listener) => listener());
   }
 
+  /**
+   * Tells consumers that a registered provider now returns different actions.
+   *
+   * Resolved actions are snapshots: an action whose availability depends on
+   * live state (cast devices found, downloads allowed) hands out a new value
+   * when that state changes, and consumers that resolved the old one keep
+   * asking it until they re-resolve. Registration alone never tells them.
+   */
+  notifyProviderChanged(name: string): void {
+    if (!this.registeredActions[name]) {
+      return;
+    }
+
+    this.notifyChanged();
+  }
+
   /**
    * Register a dynamic action provider under a unique `name`.
    * The provider can return one or more actions and may use the passed `entry`.