@applicaster/zapp-react-native-ui-components 16.0.0-alpha.3081324238 → 16.0.0-alpha.3202041045

package/Decorators/ZappPipesDataConnector/index.tsx

@@ -5,7 +5,9 @@ import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/naviga
 import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
 import { ZappPipesSearchContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { useScreenContext } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
+import { useUIComponentContext } from "@applicaster/zapp-react-native-ui-components/Contexts/UIComponentContext";
 import { ResolverSelector } from "./ResolverSelector";
+import { useScreenToolboxRecord } from "./screenToolbox";
 import { ComponentDataSourceContext } from "./types";
 
 type Props = {
@@ -22,7 +24,7 @@ export function zappPipesDataConnector(
   Component: React.FC<any> | React.ComponentClass<any>
 ) {
   return function WrappedWithZappPipesData(props: Props) {
-    const { screenData } = useRoute();
+    const { screenData, pathname } = useRoute();
     const plugins = usePlugins();
     const screenContextData = useScreenContext();
 
@@ -53,6 +55,16 @@ export function zappPipesDataConnector(
 
     const [searchContext] = ZappPipesSearchContext.useZappPipesContext();
 
+    const parent = useUIComponentContext() as { id?: string } | null;
+
+    const toolboxRecord = useScreenToolboxRecord(
+      component,
+      riverId,
+      componentIndex,
+      parent?.id,
+      pathname
+    );
+
     // Prepare context for resolvers
     const resolverProps: ComponentDataSourceContext = {
       component,
@@ -71,9 +83,12 @@ export function zappPipesDataConnector(
 
     return (
       <ResolverSelector {...resolverProps}>
-        {(zappPipesDataProps) => (
-          <Component {...props} {...zappPipesDataProps} />
-        )}
+        {(zappPipesDataProps) => {
+          // A plain field on the toolbox record, read only when the agent asks: no render.
+          toolboxRecord.feed = zappPipesDataProps.zappPipesData;
+
+          return <Component {...props} {...zappPipesDataProps} />;
+        }}
       </ResolverSelector>
     );
   };

package/Decorators/ZappPipesDataConnector/screenToolbox.ts

@@ -0,0 +1,384 @@
+import { useEffect, useMemo } from "react";
+import { Platform } from "react-native";
+import * as R from "ramda";
+import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
+import {
+  registerXrayToolbox,
+  XrayToolSpec,
+} from "@applicaster/zapp-react-native-utils/logger/xrayToolbox";
+import { modalStore } from "@applicaster/zapp-react-native-utils/modalState";
+import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/routeTypes";
+import { getXrayNavigator } from "@applicaster/zapp-react-native-utils/navigationUtils/xrayNavigator";
+import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { zappHookModalStore } from "@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext";
+
+import { ZappPipesData } from "./types";
+
+/**
+ * X-Ray `screen.*` toolbox: what the current screen shows — its river components in order, the
+ * feed each one loaded and the entries it displays. Every river component, on every platform,
+ * goes through the zappPipes decorator, which writes a record here on mount and drops it on
+ * unmount: a plain Set, nothing subscribes to it, so it never renders anything. Records are
+ * dropped for good once X-Ray turns out to have no toolbox bridge (release builds).
+ *
+ * Screens that are not rivers (screen plugins, hooks, the player) report what renders them,
+ * read from navigation and the modal stores; a plugin with state of its own registers its own
+ * toolbox, as the player does.
+ *
+ * Mounted is not visible (lists are virtualised): which rows and cells are on screen comes from
+ * the native `ui.inspect`. River rows carry testID `component-<componentId>` (mobile, tvOS,
+ * Android TV) and cells carry their entry id in their testID.
+ */
+
+type ComponentRecord = {
+  component: ZappUIComponent;
+  riverId: string;
+  index?: number;
+  parentId?: string;
+  pathname: string;
+  /** Written on each render: the data the component was given, after item filter and limit. */
+  feed?: ZappPipesData;
+};
+
+/** What a route shows; `screenType` is how ScreenResolver renders it. */
+type RouteState = {
+  screenType?: string;
+  screen?: any;
+  entry?: Partial<ZappEntry>;
+  nested?: { screen?: ZappRiver };
+};
+
+/** A screen presented over the navigation stack. `covers` is false when it is out of the way. */
+type Layer = RouteState & { pathname: string; covers: boolean };
+
+const records = new Set<ComponentRecord>();
+
+/** Set once registration failed: X-Ray has no toolbox bridge, so nothing will ever read records. */
+let unavailable = false;
+
+const DEFAULT_ENTRIES_LIMIT = 10;
+
+const toLimit = (value: unknown) =>
+  typeof value === "number" && value >= 0 ? value : DEFAULT_ENTRIES_LIMIT;
+
+/** The hooks modal, with the pathname ZappHooksModal gives it; hidden while it runs in the background. */
+const hooksModalLayer = (): Layer | undefined => {
+  const { state, isHooksExecutionInProgress, isRunningInBackground } =
+    zappHookModalStore.getState();
+
+  if (!isHooksExecutionInProgress || !state.path) return undefined;
+
+  const hookPlugin = state.screenData?.hookPlugin;
+
+  return {
+    pathname: `${ROUTE_TYPES.HOOKS_MODAL}/${hookPlugin ? hookPlugin.name : ""}`,
+    covers:
+      !isRunningInBackground && hookPlugin?.module?.presentFullScreen !== false,
+    screenType: "hooks",
+    screen: hookPlugin,
+    entry: state.screenData?.payload as ZappEntry,
+  };
+};
+
+/** The modal screen or bottom sheet, with the pathname and props ModalProvider gives it. */
+const modalLayer = (): Layer | undefined => {
+  const { visible, screen, props } = modalStore.getState().modalState;
+
+  if (!visible || !screen) return undefined;
+
+  const { screenId, screenType, entry, screenData } = {
+    screenId: screen.id,
+    screenType: "river",
+    ...props,
+  } as Record<string, any>;
+
+  // A modal hook (and the ad interstitial) presents a { hookPlugin, payload } wrapper.
+  const isHook = screenType === "hooks";
+
+  return {
+    pathname: `${ROUTE_TYPES.MODAL}/${screenId}`,
+    covers: true,
+    screenType,
+    screen: isHook ? (screen.hookPlugin ?? screenData?.hookPlugin) : screen,
+    entry: isHook ? screen.payload : entry,
+  };
+};
+
+const videoModalLayer = (): Layer | undefined => {
+  const videoModal = getXrayNavigator()?.videoModalState;
+
+  if (!videoModal?.visible) return undefined;
+
+  return {
+    pathname: `${ROUTE_TYPES.VIDEO_MODAL}/${videoModal.item?.id}`,
+    covers: videoModal.mode !== "MINIMIZED",
+    screenType: "playable",
+    entry: videoModal.item,
+  };
+};
+
+/**
+ * Topmost first: the hooks modal and modals are native RN Modals, drawn over the video modal.
+ * Only layers this platform renders: the mobile layout renders the hooks and video modals, and
+ * ModalProvider renders nothing on web.
+ */
+const presentedLayers = () => {
+  const web = Platform.OS === "web";
+  const mobile = !web && !isTV();
+
+  return [
+    mobile && hooksModalLayer(),
+    !web && modalLayer(),
+    mobile && videoModalLayer(),
+  ].filter((layer): layer is Layer => Boolean(layer));
+};
+
+/** The pathname of what is on top: a covering presented layer, else the stack top. */
+export const getTopPathname = (): string | undefined =>
+  presentedLayers().find((layer) => layer.covers)?.pathname ??
+  getXrayNavigator()?.getPathname();
+
+/** What the route at `pathname` shows. Presented layers are not on the stack: their stores hold them. */
+const routeState = (pathname: string): RouteState => {
+  const layer = presentedLayers().find((item) => item.pathname === pathname);
+
+  if (layer) return layer;
+
+  // Not presented any more (a stale modal pathname): nothing to describe.
+  if (!pathname.startsWith("/")) return {};
+
+  const state = getXrayNavigator()?.getStackForPathname(pathname)?.state;
+
+  // A stack route ends in <screenType>/<screenId>.
+  const screenType = pathname.split("/").slice(-2)[0];
+
+  return {
+    screenType,
+    ...state,
+    // A hook screen's entry is the { payload } wrapper it was pushed with.
+    entry:
+      screenType === "hooks"
+        ? ((state?.entry as any)?.payload ?? state?.entry)
+        : state?.entry,
+  };
+};
+
+/** Screen types ScreenResolver renders itself rather than through a screen plugin. */
+const BUILT_IN_KINDS = {
+  playable: "player",
+  link: "link",
+  favorites: "favorites",
+};
+
+/**
+ * What renders the screen, as ScreenResolver picks it: a river of components, a built-in screen,
+ * a hook plugin, or a screen plugin (a river whose type is a plugin identifier, or a route whose
+ * screen type is one).
+ */
+const describeKind = ({
+  screenType,
+  screen,
+}: RouteState): { kind: string; identifier?: string } => {
+  if (!screenType) return { kind: "none" };
+
+  if (screen?.modalBottomSheetContentProps) return { kind: "bottomSheet" };
+
+  if (screenType === "hooks") {
+    return { kind: "hook", identifier: screen?.identifier };
+  }
+
+  if (BUILT_IN_KINDS[screenType]) return { kind: BUILT_IN_KINDS[screenType] };
+
+  if (screenType !== "river") return { kind: "plugin", identifier: screenType };
+
+  return screen?.type === "general_content"
+    ? { kind: "river" }
+    : { kind: "plugin", identifier: screen?.type };
+};
+
+const describePlugin = (identifier?: string) => {
+  if (!identifier) return null;
+
+  const plugins = (appStore.get("plugins") ?? []) as QuickBrickPlugin[];
+
+  return {
+    identifier,
+    name: plugins.find((plugin) => plugin.identifier === identifier)?.name,
+  };
+};
+
+const describeFeed = (feed?: ZappPipesData) => {
+  if (!feed?.url) return null;
+
+  const error = feed.error as { message?: string } | undefined;
+
+  return {
+    url: feed.url,
+    state: error ? "error" : feed.loading ? "loading" : "loaded",
+    ...(error && { error: error.message ?? String(error) }),
+    count: feed.data?.entry?.length ?? 0,
+  };
+};
+
+const byIndex = (a: ComponentRecord, b: ComponentRecord) =>
+  (a.index ?? 0) - (b.index ?? 0);
+
+/** Components in order, a group's children nested under it (they share the river and its indexes). */
+const describeComponents = (
+  mounted: ComponentRecord[],
+  belongs: (record: ComponentRecord) => boolean,
+  limit: number
+) =>
+  mounted
+    .filter(belongs)
+    .sort(byIndex)
+    .map((record) => {
+      const children = describeComponents(
+        mounted,
+        (child) => child.parentId === record.component.id,
+        limit
+      );
+
+      return {
+        index: record.index,
+        id: record.component.id,
+        type: record.component.component_type,
+        name: record.component.name,
+        feed: describeFeed(record.feed),
+        entries: (record.feed?.data?.entry ?? [])
+          .slice(0, limit)
+          .map((entry, index) => ({ index, id: entry.id, title: entry.title })),
+        ...(children.length > 0 && { children }),
+      };
+    });
+
+const describeRiverComponents = (mounted: ComponentRecord[], limit: number) => {
+  const ids = new Set(mounted.map((record) => record.component.id));
+
+  return describeComponents(
+    mounted,
+    (record) => !record.parentId || !ids.has(record.parentId),
+    limit
+  );
+};
+
+const describeScreen = (pathname: string, limit: number) => {
+  const state = routeState(pathname);
+  const { screen, entry, nested } = state;
+  const { kind, identifier } = describeKind(state);
+  const plugin = describePlugin(identifier);
+
+  const mounted = Array.from(records).filter(
+    (record) => record.pathname === pathname
+  );
+
+  const riverIds = R.uniq(mounted.map((record) => record.riverId));
+  const rivers = appStore.get("rivers") as Record<string, ZappRiver>;
+
+  return {
+    pathname,
+    screen: {
+      kind,
+      ...(screen && { id: screen.id, name: screen.name, type: screen.type }),
+      ...(plugin && { plugin }),
+    },
+    ...(nested?.screen && {
+      nested: {
+        id: nested.screen.id,
+        name: nested.screen.name,
+        type: nested.screen.type,
+      },
+    }),
+    entry: entry ? { id: entry.id, title: entry.title } : null,
+    rivers: riverIds.map((riverId) => ({
+      id: riverId,
+      name: rivers?.[riverId]?.name,
+      type: rivers?.[riverId]?.type,
+      components: describeRiverComponents(
+        mounted.filter((record) => record.riverId === riverId),
+        limit
+      ),
+    })),
+  };
+};
+
+const tools: XrayToolSpec[] = [
+  {
+    name: "current",
+    description:
+      "The screen on top (hooks modal, modal or bottom sheet, video modal unless docked, else stack top) " +
+      "or the one at `pathname`: what renders it (kind river, plugin, hook, player, link, favorites, " +
+      "bottomSheet, and the plugin), its river components in order (a group's children nested) with " +
+      "their feed (url, state, count) and first entries. " +
+      "Lists mount ahead of the viewport, so a component here may be off screen: use the native " +
+      "ui.inspect for what is visible (row testID component-<id>; cell testIDs contain the entry id).",
+    parameters: [
+      {
+        name: "pathname",
+        type: "string",
+        description:
+          "A mounted screen's route (see mounted); defaults to the top one.",
+      },
+      {
+        name: "limit",
+        type: "number",
+        description: `Entries per component, default ${DEFAULT_ENTRIES_LIMIT}.`,
+      },
+    ],
+    handler: ({ pathname, limit }) => {
+      const target =
+        typeof pathname === "string" && pathname ? pathname : getTopPathname();
+
+      if (!target) throw new Error("Navigation is not available yet");
+
+      return {
+        ...describeScreen(target, toLimit(limit)),
+        mounted: R.uniq(Array.from(records, (record) => record.pathname)),
+      };
+    },
+  },
+];
+
+const registerScreenToolbox = () =>
+  registerXrayToolbox({
+    name: "screen",
+    description:
+      "What the current screen shows: what renders it, river components, their feeds and entries.",
+    tools,
+  });
+
+/**
+ * Keeps a record of a mounted river component for the toolbox. Returns the record so the caller
+ * can attach the feed data it renders with.
+ */
+export const useScreenToolboxRecord = (
+  component: ZappUIComponent,
+  riverId: string,
+  index: number | undefined,
+  parentId: string | undefined,
+  pathname: string
+): ComponentRecord => {
+  const record = useMemo(
+    () => ({ component, riverId, index, parentId, pathname }),
+    [component, riverId, index, parentId, pathname]
+  );
+
+  useEffect(() => {
+    if (unavailable) return;
+
+    registerScreenToolbox().then((registered) => {
+      if (!registered) {
+        unavailable = true;
+        records.clear();
+      }
+    });
+
+    records.add(record);
+
+    return () => {
+      records.delete(record);
+    };
+  }, [record]);
+
+  return record;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "16.0.0-alpha.3081324238",
+  "version": "16.0.0-alpha.3202041045",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-alpha.3081324238",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-alpha.3081324238",
-    "@applicaster/zapp-react-native-redux": "16.0.0-alpha.3081324238",
-    "@applicaster/zapp-react-native-utils": "16.0.0-alpha.3081324238",
+    "@applicaster/applicaster-types": "16.0.0-alpha.3202041045",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-alpha.3202041045",
+    "@applicaster/zapp-react-native-redux": "16.0.0-alpha.3202041045",
+    "@applicaster/zapp-react-native-utils": "16.0.0-alpha.3202041045",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "react-native-sortables": "1.7.1",