Skip to content

Integrating autologging surface tree to React native #264

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 6 commits into
base: main
Choose a base branch
from
Draft

Integrating autologging surface tree to React native #264

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
33a2ee4
Extended app functionality to support multiple todolists
srinathvijay Sep 4, 2025
4a96526
Adding Surface tree tracker for React native
srinathvijay Sep 4, 2025
142a7ee
Merge branch 'main' into react-native-surface-tree
srinathvijay Sep 4, 2025
35c0868
Resolving conflicts with latest HEAD
srinathvijay Sep 10, 2025
a4cb6d0
Add Podfile.lock to .gitignore to prevent accidental commits of gener…
srinathvijay Sep 10, 2025
ed24ded
Remove unused ALSurfaceUtils.ts file from common directory
srinathvijay Sep 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,6 @@ packages/*/src/**/*.js
packages/*/src/**/*.jsx
src/**/*.js
test/**/*.js

# CocoaPods
Podfile.lock
119 changes: 79 additions & 40 deletions packages/hyperion-autologging/src/ALSurface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import * as IReactComponent from "hyperion-react/src/IReactComponent";
import * as Types from "hyperion-util/src/Types";
import type * as React from 'react';
import { ALFlowletDataType, IALFlowlet } from "./ALFlowletManager";
import { AUTO_LOGGING_NON_INTERACTIVE_SURFACE, AUTO_LOGGING_SURFACE, SURFACE_SEPARATOR, SURFACE_WRAPPER_ATTRIBUTE_NAME } from './ALSurfaceConsts';
import { AUTO_LOGGING_NON_INTERACTIVE_SURFACE, AUTO_LOGGING_SURFACE, SURFACE_SEPARATOR } from './ALSurfaceConsts';
import * as ALSurfaceContext from "./ALSurfaceContext";
import { ALSurfaceData, ALSurfaceEvent, EventMetadata } from "./ALSurfaceData";
import * as SurfaceProxy from "./ALSurfaceProxy";
Expand All @@ -22,7 +22,8 @@ export type ALSurfaceEventData =
ALFlowletEvent &
ALSurfaceEvent &
Readonly<{
element: Element;
// DOM-specific: element: Element;
elementId?: string; // React Native compatible - use string ID instead
isProxy: boolean;
capability: ALSurfaceCapability | null | undefined;
}>;
Expand Down Expand Up @@ -60,7 +61,8 @@ export type ALSurfaceProps = Readonly<{
metadata?: ALMetadataEvent['metadata'];
uiEventMetadata?: EventMetadata,
capability?: ALSurfaceCapability,
nodeRef?: React.RefObject<HTMLElement | null | undefined>,
// DOM-specific: nodeRef?: React.RefObject<HTMLElement | null | undefined>,
nodeRef?: React.RefObject<any>, // React Native compatible - accept any ref type
}>;

export type ALSurfaceRenderer = (node: React.ReactNode) => React.ReactElement;
Expand Down Expand Up @@ -117,14 +119,30 @@ export type InitOptions = Types.Options<
}
>;

// Debugging functions for development and testing
export function getAllALSurfaces(): Map<string, ALSurfaceData> {
// This accesses the static methods we added to ALSurfaceData for debugging
return ALSurfaceData.getAllSurfaces();
}

export function clearALSurfaceRegistry(): void {
// Clear all surface data for debugging/testing
ALSurfaceData.clearAllSurfaces();
}

export function getALSurfaceData(nonInteractiveSurfacePath: string): ALSurfaceData | undefined {
return ALSurfaceData.tryGet(nonInteractiveSurfacePath) || undefined;
}

export function init(options: InitOptions): ALSurfaceRenderers {
const { flowletManager, channel } = options;
const { ReactModule } = options.react;

const SurfaceContext = ALSurfaceContext.init(options);

function SurfaceWithEvent(props: React.PropsWithChildren<{
nodeRef: React.RefObject<HTMLElement | null | undefined> | React.MutableRefObject<Element | undefined>;
// DOM-specific: nodeRef: React.RefObject<HTMLElement | null | undefined> | React.MutableRefObject<Element | undefined>;
nodeRef?: React.RefObject<any>; // React Native compatible
domAttributeName: string;
domAttributeValue: string;
surfaceData: ALSurfaceData;
Expand All @@ -140,13 +158,14 @@ export function init(options: InitOptions): ALSurfaceRenderers {
ReactModule.useLayoutEffect(() => {
const surface = surfaceData.surfaceName;

__DEV__ && assert(nodeRef != null, "Invalid surface effect without a ref: " + surface);
const element = nodeRef.current;
if (element == null) {
return;
}
element.setAttribute(domAttributeName, domAttributeValue);
__DEV__ && assert(element != null, "Invalid surface effect without an element: " + surface);
// DOM-specific operations - commented out for React Native compatibility
// __DEV__ && assert(nodeRef != null, "Invalid surface effect without a ref: " + surface);
// const element = nodeRef.current;
// if (element == null) {
// return;
// }
// element.setAttribute(domAttributeName, domAttributeValue);
// __DEV__ && assert(element != null, "Invalid surface effect without an element: " + surface);

/**
* Although the following check may seem logical, but it seems that react may first run the component body code
Expand All @@ -159,11 +178,18 @@ export function init(options: InitOptions): ALSurfaceRenderers {
// `Invalid surface setup for ${surfaceData.surface}. Didn't expect mutation and visibility events`
// )

surfaceData.addElement(element);
// For React Native, we'll use string-based component ID tracking instead of DOM elements
const elementId = nodeRef?.current || `surface_${surface}_${Date.now()}`;

// DOM-specific: surfaceData.addElement(element);
// React Native compatible: track component ID as string
surfaceData.addElement(elementId);

if (capability?.trackMutation === false) {
return () => {
surfaceData.removeElement(element);
// DOM-specific: surfaceData.removeElement(element);
// React Native compatible: remove component ID
surfaceData.removeElement(elementId);
};
}

Expand All @@ -173,7 +199,8 @@ export function init(options: InitOptions): ALSurfaceRenderers {
callFlowlet,
triggerFlowlet,
metadata,
element,
// DOM-specific: element,
elementId, // React Native compatible - use string ID instead
isProxy,
capability
};
Expand All @@ -188,7 +215,9 @@ export function init(options: InitOptions): ALSurfaceRenderers {
...event,
triggerFlowlet: callFlowlet.data.triggerFlowlet
});
surfaceData.removeElement(element);
// DOM-specific: surfaceData.removeElement(element);
// React Native compatible: remove component ID
surfaceData.removeElement(elementId);
}
}, [domAttributeName, domAttributeValue, nodeRef]);

Expand All @@ -209,8 +238,8 @@ export function init(options: InitOptions): ALSurfaceRenderers {
const surfaceCtx = ALSurfaceContext.useALSurfaceContext();
const { surface: parentSurface, nonInteractiveSurface: parentNonInteractiveSurface } = surfaceCtx;

let addSurfaceWrapper = props.nodeRef == null;
let localRef = ReactModule.useRef<Element>();
// DOM-specific: let addSurfaceWrapper = props.nodeRef == null;
let localRef = ReactModule.useRef<any>(); // React Native compatible - use any instead of Element

// empty .capability field is default, means all enabled!
const capability = props.capability ?? proxiedContext?.mainContext.capability;
Expand All @@ -231,14 +260,15 @@ export function init(options: InitOptions): ALSurfaceRenderers {
nonInteractiveSurfacePath = proxiedContext.mainContext.nonInteractiveSurface;
domAttributeName = AUTO_LOGGING_SURFACE
domAttributeValue = surfacePath;
if (proxiedContext.container instanceof Element) {
const container = proxiedContext.container;
if (container.childElementCount === 0 || container.getAttribute(domAttributeName) === domAttributeValue) {
addSurfaceWrapper = false;
container.setAttribute(domAttributeName, domAttributeValue);
localRef.current = container;
}
}
// DOM-specific container logic - commented out for React Native compatibility
// if (proxiedContext.container instanceof Element) {
// const container = proxiedContext.container;
// if (container.childElementCount === 0 || container.getAttribute(domAttributeName) === domAttributeValue) {
// addSurfaceWrapper = false;
// container.setAttribute(domAttributeName, domAttributeValue);
// localRef.current = container;
// }
// }
}

// Emit surface mutation events on mount/unmount
Expand Down Expand Up @@ -280,23 +310,32 @@ export function init(options: InitOptions): ALSurfaceRenderers {
surfaceData.metadata = metadata;
surfaceData.setUIEventMetadata(eventMetadata);

// Add cleanup effect to remove surface from registry on unmount
ReactModule.useLayoutEffect(() => {
return () => {
surfaceData.remove()
};
}, [nonInteractiveSurfacePath, surfaceData]);

// callFlowlet.data.surface = surfacePath;
let children = props.renderer ? props.renderer(props.children) : props.children;

const wrapperElementType = proxiedContext?.container instanceof SVGElement ? "g" : "span";

if (addSurfaceWrapper) {
children = ReactModule.createElement(
wrapperElementType,
{
[SURFACE_WRAPPER_ATTRIBUTE_NAME]: "1",
style: { display: 'contents' },
[domAttributeName]: domAttributeValue,
ref: localRef, // addSurfaceWrapper would have been false if a rep was passed in props
},
children
);
}
// DOM-specific wrapper creation - commented out for React Native compatibility
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With these types of things commented out, does the functionality you were testing in RN still work?

It seems like a lot of changes are specific to element reference, nodeRef is optional so it should be fine to just not pass for RN case.

The element specific things I'm wondering how we should approach conditionally doing vs. not doing those things depending on run context.

cc: @reshadi for thoughts

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, looks like all the changes is just about the element, we can make that optional, also in typescript we can use "interface merging" to define an HTMLElement type that can help us continue compiling code in RN even if those types are not defined.

I'm also thinking about splitting these components further to to server the the web/RN versions that have different useLayoutEffect.

// const wrapperElementType = proxiedContext?.container instanceof SVGElement ? "g" : "span";

// DOM-specific wrapper element creation - React Native doesn't support span/g elements or CSS styles
// if (addSurfaceWrapper) {
// children = ReactModule.createElement(
// wrapperElementType,
// {
// [SURFACE_WRAPPER_ATTRIBUTE_NAME]: "1",
// style: { display: 'contents' }, // CSS doesn't exist in React Native
// [domAttributeName]: domAttributeValue,
// ref: localRef, // addSurfaceWrapper would have been false if a rep was passed in props
// },
// children
// );
// }

if (
!capability || // all default capabilities enabled
Expand Down Expand Up @@ -342,7 +381,7 @@ export function init(options: InitOptions): ALSurfaceRenderers {
);
}

SurfaceProxy.init({ ...options, surfaceComponent: Surface });
// SurfaceProxy.init({ ...options, surfaceComponent: Surface });
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We confirmed there is no createPortal in RN right? This would be something else specific to web we need to conditionally do.


return {
surfaceComponent: Surface,
Expand Down
38 changes: 26 additions & 12 deletions packages/hyperion-autologging/src/ALSurfaceData.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ abstract class ALSurfaceDataCore {
#locked: boolean = false; // allow removal by default

readonly children: ALSurfaceData[] = [];
private readonly elements: Set<Element> = new Set<Element>();
private readonly elements: Set<Element | string> = new Set<Element | string>(); // React Native compatible - support both DOM Elements and string IDs

constructor(
public readonly surface: string | null,
Expand All @@ -42,13 +42,13 @@ abstract class ALSurfaceDataCore {
this.__ext = Object.create(this.parent?.__ext ?? null);
}

addElement(element: Element): void {
addElement(element: Element | string): void { // React Native compatible - accept both DOM Elements and string IDs
this.elements.add(element);
}
getElements(_lookupIfEmpty: boolean = false): Element[] {
getElements(_lookupIfEmpty: boolean = false): (Element | string)[] { // React Native compatible
return Array.from(this.elements);
}
removeElement(element: Element): void {
removeElement(element: Element | string): void { // React Native compatible - accept both DOM Elements and string IDs
this.elements.delete(element);
}

Expand Down Expand Up @@ -107,6 +107,15 @@ export class ALSurfaceData extends ALSurfaceDataCore {
static tryGet(surface: string): ALSurfaceData | null | undefined {
return surfacesData.get(surface);
}

// Debug functions for development and testing
static getAllSurfaces(): Map<string, ALSurfaceData> {
return new Map(surfacesData);
}

static clearAllSurfaces(): void {
surfacesData.clear();
}
static get(surface: string): ALSurfaceData {
let data = surfacesData.get(surface);
assert(data != null, `Invalid situation! Surface ${surface} does not exits!`);
Expand Down Expand Up @@ -179,17 +188,20 @@ export class ALSurfaceData extends ALSurfaceDataCore {
this.setUIEventMetadata(uiEventMetadata);
}

getElements(lookupIfEmpty?: boolean): Element[] {
getElements(lookupIfEmpty?: boolean): (Element | string)[] {
const elements = super.getElements(lookupIfEmpty);

if (elements.length === 0 && lookupIfEmpty) {
// try to lookup the element again
const el = document.querySelectorAll(`[${this.domAttributeName}="${this.domAttributeValue}"]`);
for (let i = 0; i < el.length; i++) {
const e = el.item(i);
this.addElement(e);
elements.push(e);
}
// DOM-specific lookup - commented out for React Native compatibility
// React Native doesn't have document.querySelectorAll
// const el = document.querySelectorAll(`[${this.domAttributeName}="${this.domAttributeValue}"]`);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems like just a fallback, I wonder if it is needed if we fully trust ALSurfaceData to be the SoT

// for (let i = 0; i < el.length; i++) {
// const e = el.item(i);
// this.addElement(e);
// elements.push(e);
// }


}

return elements;
Expand Down Expand Up @@ -275,7 +287,9 @@ export class ALSurfaceData extends ALSurfaceDataCore {
}
}

// Remove from registry using both keys - interactive and non-interactive surface paths
surfacesData.delete(this.surface);
surfacesData.delete(this.nonInteractiveSurface);
return true;
}

Expand Down
10 changes: 6 additions & 4 deletions packages/hyperion-autologging/src/ALSurfaceVisibilityPublisher.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -293,16 +293,18 @@ export function publish(options: InitOptions): void {

// We need to also handle surface proxies
channel.addListener('al_surface_mount', event => {
if (!event.isProxy || !event.capability?.trackVisibilityThreshold || !event.element) {
if (!event.isProxy || !event.capability?.trackVisibilityThreshold || !event.elementId) {
return;
}
observe(event.surfaceData, event.element, event.capability.trackVisibilityThreshold);
// DOM-specific functionality - this would need React Native specific implementation
// observe(event.surfaceData, event.element, event.capability.trackVisibilityThreshold);
});
channel.addListener('al_surface_unmount', event => {
if (!event.isProxy || !event.capability?.trackVisibilityThreshold) {
if (!event.isProxy || !event.capability?.trackVisibilityThreshold || !event.elementId) {
return;
}
unobserve(event.surfaceData, event.element, event.capability.trackVisibilityThreshold);
// DOM-specific functionality - this would need React Native specific implementation
// unobserve(event.surfaceData, event.element, event.capability.trackVisibilityThreshold);
});

function getOrCreateObserver(threshold: number): IntersectionObserver {
Expand Down
14 changes: 9 additions & 5 deletions packages/hyperion-dom/src/DOMShadowPrototype.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@ export class DOMShadowPrototype<ClassType extends Object, ParentType extends Obj
if (!targetPrototype && options) {
const { sampleObject, nodeName, nodeType } = options;
let obj: object | undefined = sampleObject;
if (!obj && nodeType) {
if (!obj && nodeType && typeof window !== 'undefined' && window.document) {
// React Native compatible DOM access checks
switch (nodeType) {
// case window.document.ATTRIBUTE_NODE: obj = document.createElement(""); break;
// case window.document.CDATA_SECTION_NODE: obj = document.createElement(""); break;
Expand All @@ -55,7 +56,7 @@ export class DOMShadowPrototype<ClassType extends Object, ParentType extends Obj
break;
}
}
if (!obj && nodeName) {
if (!obj && nodeName && typeof window !== 'undefined' && window.document) {
obj = window.document.createElement(nodeName);
}
if (obj) {
Expand Down Expand Up @@ -90,7 +91,10 @@ export class DOMShadowPrototype<ClassType extends Object, ParentType extends Obj

}

export const sampleHTMLElement: HTMLElement = window.document.head;
// React Native compatible DOM access check
export const sampleHTMLElement: HTMLElement = (typeof window !== 'undefined' && window.document?.head)
? window.document.head
: null as any; // React Native fallback - this won't be used in RN

export function getVirtualAttribute<Name extends string>(obj: Object, name: Name): VirtualAttribute<Element, Name> | null {
let shadowProto = getObjectExtension(obj, true)?.shadowPrototype;
Expand All @@ -100,7 +104,7 @@ export function getVirtualAttribute<Name extends string>(obj: Object, name: Name

if (__DEV__) {
/**
* For DOM node, HTML nodes use case insensitive attributes,
* For DOM node, HTML nodes use case insensitive attributes,
* while other node types (e.g. svg, xml, ...) use case sensitive attribute names
* we can check this based on the namespaceURI of the node
* https://developer.mozilla.org/en-US/docs/Web/API/Element/namespaceURI
Expand All @@ -112,4 +116,4 @@ export function getVirtualAttribute<Name extends string>(obj: Object, name: Name
}

return shadowProto.getVirtualProperty<VirtualAttribute<Element, Name>>(name);
}
}
Loading