Intercept createRoot calls and mark as non-interactive

packages/hyperion-autologging/src/ALDOMSnaptshotPublisher.ts

@@ -14,7 +14,7 @@ import * as ALSurfaceVisibilityPublisher from "./ALSurfaceVisibilityPublisher";
 import { setEventExtension } from "./ALEventExtension";
 
 
-type TrackingChannels = (ALUIEventPublisher.InitOptions & ALSurfaceVisibilityPublisher.InitOptions)['channel'];
+type TrackingChannels = (Omit<ALUIEventPublisher.InitOptions, 'react'> & ALSurfaceVisibilityPublisher.InitOptions)['channel'];
 type TrackingEvents = ChannelEventType<TrackingChannels>;
 type TrackingEventNames = (keyof TrackingEvents) & ('al_ui_event' | 'al_surface_visibility_event'); // & is added to ensure the event names are a correct subset
 
@@ -84,4 +84,4 @@ export function publish(options: InitOptions): void {
       }
     }
   });
-} 
+}

packages/hyperion-autologging/src/ALElementValuePublisher.ts

@@ -25,7 +25,7 @@ import { ALSurfaceData } from "./ALSurfaceData";
 
 
 export type InitOptions = Types.Options<
-  ALUIEventPublisher.InitOptions &
+  Omit<ALUIEventPublisher.InitOptions, 'react'> &
   ALSharedInitOptions<ChannelEventType<(ALUIEventPublisher.InitOptions & ALSurface.InitOptions & ALSurfaceMutationPublisher.InitOptions)['channel']>>
 >;
 

packages/hyperion-autologging/src/ALInteractableDOMElement.ts

@@ -71,6 +71,8 @@ type InteractableAncestorCache = {
   [index: string]: (Element | null)[];
 }
 
+export const IGNORE_INTERACTIVITY_VP = `ignoreInteractivity`;
+
 let getInteractableImpl: (node: Element, eventName: UIEventConfig['eventName'], requireHandlerAssigned: boolean) => Element | null = (node, eventName, requireHandlerAssigned) => {
   function getInteractableOptimized(node: Element, eventName: UIEventConfig['eventName'], requireHandlerAssigned: boolean, selectorString?: string): Element | null {
     /**
@@ -152,18 +154,17 @@ let ignoreInteractiveElement: (node: Element) => boolean = node => {
       (node.clientHeight === window.innerHeight && node.clientWidth === window.innerWidth);
   }
 
-  const IgnoreInteractivity = `ignoreInteractivity`;
   function ignoreInteractiveElementOptimized(node: Element): boolean {
     let shouldIgnore: boolean | undefined;
-    shouldIgnore = getVirtualPropertyValue<boolean>(node, IgnoreInteractivity);
+    shouldIgnore = getVirtualPropertyValue<boolean>(node, IGNORE_INTERACTIVITY_VP);
     if (shouldIgnore === false || shouldIgnore === true) {
       return shouldIgnore;
     }
     shouldIgnore = ignoreInteractiveElementCore(node);
     if (shouldIgnore) {
       // In some cases, the size of the component changes slightly and can change the answer from false to true.
       // So only caching the true values to be safe.
-      setVirtualPropertyValue(node, IgnoreInteractivity, shouldIgnore);
+      setVirtualPropertyValue(node, IGNORE_INTERACTIVITY_VP, shouldIgnore);
     }
     return shouldIgnore;
   }
@@ -274,6 +275,7 @@ let installHandlers = () => {
     }
   });
 
+
   // for (const eventHandler of [
   //   IGlobalEventHandlers.onabort,
   //   IGlobalEventHandlers.onanimationcancel,
@@ -525,7 +527,7 @@ function getTextFromElementsByIds(domSource: ALDOMTextSource, source: ALElementT
 
   for (let i = 0; i < indirectSources.length; i++) {
     if (i) {
-      results.push({ text: " ", source, elements: []}); // Insert space between values
+      results.push({ text: " ", source, elements: [] }); // Insert space between values
     }
 
     domSource.element = indirectSources[i];

packages/hyperion-autologging/src/ALUIEventPublisher.ts

@@ -5,22 +5,23 @@
 'use strict';
 import type * as Types from "hyperion-util/src/Types";
 
-import { intercept } from "hyperion-core/src/intercept";
+import { intercept, setVirtualPropertyValue } from "hyperion-core/src/intercept";
 import * as IEvent from "hyperion-dom/src/IEvent";
 import { setTriggerFlowlet } from "hyperion-flowlet/src/TriggerFlowlet";
 import { TimedTrigger } from "hyperion-timed-trigger/src/TimedTrigger";
 import performanceAbsoluteNow from "hyperion-util/src/performanceAbsoluteNow";
 import ALElementInfo from './ALElementInfo';
 import * as ALEventIndex from "./ALEventIndex";
 import { ALID, getOrSetAutoLoggingID } from "./ALID";
-import { ALElementTextEvent, TrackEventHandlerConfig, enableUIEventHandlers, getElementTextEvent, getInteractable, isTrackedEvent } from "./ALInteractableDOMElement";
+import { ALElementTextEvent, IGNORE_INTERACTIVITY_VP, TrackEventHandlerConfig, enableUIEventHandlers, getElementTextEvent, getInteractable, isTrackedEvent } from "./ALInteractableDOMElement";
 import { ReactComponentData } from "./ALReactUtils";
 import { getSurfacePath } from "./ALSurfaceUtils";
 import { ALElementEvent, ALExtensibleEvent, ALFlowletEvent, ALLoggableEvent, ALMetadataEvent, ALPageEvent, ALReactElementEvent, ALSharedInitOptions, ALTimedEvent, Metadata } from "./ALType";
 import * as ALUIEventGroupPublisher from "./ALUIEventGroupPublisher";
 import * as Flags from "hyperion-globals/src/Flags";
 import { getCurrMainPageUrl } from "./MainPageUrl";
 import { ALSurfaceData, ALSurfaceEvent } from "./ALSurfaceData";
+import * as IReactDOM from "hyperion-react/src/IReactDOM";
 
 
 /**
@@ -146,6 +147,9 @@ export type UIEventConfig = UIEventConfigMap[keyof Omit<EventHandlerMap, 'change
 export type InitOptions = Types.Options<
   ALSharedInitOptions<ALChannelUIEvent> &
   {
+    react: {
+      IReactDOMClientModule: IReactDOM.IReactDOMClientModuleExports | Promise<IReactDOM.IReactDOMClientModuleExports>;
+    }
     uiEvents: Array<UIEventConfig>;
   }
 >;
@@ -239,9 +243,32 @@ export function getCurrentUIEventData(): ALUIEventData | null | undefined {
  * and filtering of events is configured via {@link UIEventConfig}.
  */
 export function publish(options: InitOptions): void {
-  const { uiEvents, flowletManager, channel } = options;
+  const { uiEvents, flowletManager, channel, react } = options;
+
+  if (react.IReactDOMClientModule instanceof Promise) {
+    react.IReactDOMClientModule.then(iReactDOMClientModule => {
+      publish({
+        ...options,
+        react: {
+          ...options.react,
+          IReactDOMClientModule: iReactDOMClientModule,
+        }
+      })
+    });
+    return;
+  }
+  // Initialize root interception,  for ignoring these containers as interactable elements
+  react.IReactDOMClientModule.createRoot.onBeforeCallMapperAdd(args => {
+    const [container] = args;
+    if (container instanceof Element) {
+      setVirtualPropertyValue<boolean>(container, IGNORE_INTERACTIVITY_VP, true);
+    }
+
+    return args;
+  });
 
 
+  // Track all events
   uiEvents.forEach((eventConfig => {
     const {
       eventName,

packages/hyperion-autologging/src/AutoLogging.ts

@@ -51,7 +51,7 @@ type PluginInit = (channel: Channel<ALChannelEvent>) => void;
 export type InitOptions = Types.Options<
   ALSharedInitOptions<ALChannelEvent> &
   {
-    react: (ALSurface.InitOptions & ALTriggerFlowlet.InitOptions)['react'];
+    react: (ALSurface.InitOptions & ALTriggerFlowlet.InitOptions & ALUIEventPublisher.InitOptions)['react'];
     enableReactComponentVisitors?: boolean;
     componentNameValidator?: ComponentNameValidator;
     flowletPublisher?: PublicInitOptions<ALFlowletPublisher.InitOptions> | null;
@@ -190,7 +190,8 @@ export function init(options: InitOptions): boolean {
   if (options.uiEventPublisher) {
     ALUIEventPublisher.publish({
       ...sharedOptions,
-      ...options.uiEventPublisher
+      ...options.uiEventPublisher,
+      react: options.react,
     });
 
     ALHoverPublisher.publish({

packages/hyperion-autologging/test/ALDOMSnapshotPublisher.test.ts

@@ -12,12 +12,15 @@ import * as ALUIEventPublisher from "../src/ALUIEventPublisher";
 import * as DomFragment from "./DomFragment";
 import * as  ALDOMSnapshotPublisher from "../src/ALDOMSnaptshotPublisher";
 import { ALChannelCustomEvent } from "../src/ALCustomEvent";
+import * as IReactDOM from "hyperion-react/src/IReactDOM";
+import * as ReactDOMClient from "react-dom/client";
 
 describe("dom snapshot publisher", () => {
   test("dom snapshot taken for clicks", (done) => {
     const flowletManager = new ALFlowletManager();
 
     const channel = new Channel<ALDOMSnapshotPublisher.ALChannelDOMSnapshotPublisherEvent>();
+    const IReactDOMClientModule = IReactDOM.interceptDOMClient("react-dom/client", ReactDOMClient, []);
 
     ALUIEventPublisher.publish({
       flowletManager,
@@ -27,7 +30,10 @@ describe("dom snapshot publisher", () => {
           cacheElementReactInfo: true,
           eventName: 'click',
         }
-      ]
+      ],
+      react: {
+        IReactDOMClientModule
+      }
     });
     ALDOMSnapshotPublisher.publish({
       flowletManager,

packages/hyperion-autologging/test/ALUIEventPublisher.test.ts

@@ -10,12 +10,15 @@ import { Channel } from "hyperion-channel/src/Channel";
 import { ALFlowletManager } from "../src/ALFlowletManager";
 import * as ALUIEventPublisher from "../src/ALUIEventPublisher";
 import * as DomFragment from "./DomFragment";
+import * as IReactDOM from "hyperion-react/src/IReactDOM";
+import * as ReactDOMClient from "react-dom/client";
 
 describe("UI event publisher", () => {
   test("meta data transfer between capture and bubble", (done) => {
     const flowletManager = new ALFlowletManager();
 
     const channel = new Channel<ALUIEventPublisher.ALChannelUIEvent>();
+    const IReactDOMClientModule = IReactDOM.interceptDOMClient("react-dom/client", ReactDOMClient, []);
 
     ALUIEventPublisher.publish({
       flowletManager,
@@ -25,7 +28,10 @@ describe("UI event publisher", () => {
           cacheElementReactInfo: true,
           eventName: 'click',
         }
-      ]
+      ],
+      react: {
+        IReactDOMClientModule,
+      }
     });
 
     channel.addListener('al_ui_event_capture', event => {

packages/hyperion-react-testapp/src/AutoLoggingWrapper.ts

@@ -10,6 +10,7 @@ import * as IReactDOM from "hyperion-react/src/IReactDOM";
 import { ClientSessionID, getDomainSessionID } from "hyperion-util/src/ClientSessionID";
 import React from 'react';
 import * as ReactDOM from "react-dom";
+import * as ReactDOMClient from "react-dom/client";
 import ReactDev from "react/jsx-dev-runtime";
 import { SyncChannel } from "./Channel";
 import { FlowletManager } from "./FlowletManager";
@@ -37,7 +38,8 @@ export function init() {
 
   const IReactModule = IReact.intercept("react", React, [])
   const IJsxRuntimeModule = IReact.interceptRuntime("react/jsx-dev-runtime", ReactDev as any, []);
-  const IReactDOMModule = IReactDOM.intercept("react-dom", ReactDOM, []);
+  const IReactDOMModule = IReactDOM.interceptDOM("react-dom", ReactDOM, []);
+  const IReactDOMClientModule = IReactDOM.interceptDOMClient("react-dom/client", ReactDOMClient, []);
 
   const channel = SyncChannel;
 
@@ -82,6 +84,7 @@ export function init() {
     react: {
       ReactModule: React as any,
       IReactDOMModule,
+      IReactDOMClientModule,
       IReactModule,
       IJsxRuntimeModule,
     },

packages/hyperion-react/src/IReactDOM.ts

@@ -3,6 +3,7 @@
  */
 
 import type ReactDOM from "react-dom";
+import type { createRoot } from "react-dom/client";
 
 import { InterceptedModuleExports, interceptModuleExports, ModuleExportsKeys } from 'hyperion-core/src/IRequire';
 
@@ -13,9 +14,24 @@ export type ReactDOMModuleExports = {
 export type IReactDOMModuleExports = InterceptedModuleExports<ReactDOMModuleExports>;
 let IReactDOMModule: IReactDOMModuleExports | null = null;
 
-export function intercept(moduleId: string, moduleExports: ReactDOMModuleExports, failedExportsKeys?: ModuleExportsKeys<ReactDOMModuleExports>): IReactDOMModuleExports {
+export type ReactDOMClientModuleExports = {
+  createRoot: typeof createRoot;
+}
+
+export type IReactDOMClientModuleExports = InterceptedModuleExports<ReactDOMClientModuleExports>;
+let IReactDOMClientModule: IReactDOMClientModuleExports | null = null;
+
+
+export function interceptDOM(moduleId: string, moduleExports: ReactDOMModuleExports, failedExportsKeys?: ModuleExportsKeys<ReactDOMModuleExports>): IReactDOMModuleExports {
   if (!IReactDOMModule) {
     IReactDOMModule = interceptModuleExports(moduleId, moduleExports, ['createPortal'], failedExportsKeys);
   }
   return IReactDOMModule;
 }
+
+export function interceptDOMClient(moduleId: string, moduleExports: ReactDOMClientModuleExports, failedExportsKeys?: ModuleExportsKeys<ReactDOMClientModuleExports>): IReactDOMClientModuleExports {
+  if (!IReactDOMClientModule) {
+    IReactDOMClientModule = interceptModuleExports(moduleId, moduleExports, ['createRoot'], failedExportsKeys);
+  }
+  return IReactDOMClientModule;
+}