Frames communication prototype #85

VladimirZaets · 2025-02-12T01:00:48Z

Description

Related Issue

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

I have signed the Adobe Open Source CLA.
My code follows the code style of this project.
My change requires a change to the documentation.
I have updated the documentation accordingly.
I have read the CONTRIBUTING document.
I have added tests to cover my changes.
All new and existing tests passed.

Copilot

Pull Request Overview

This PR implements a frames communication prototype that introduces extensible state management capabilities for cross-frame communication between host and guest components in the UIX framework. The implementation provides a centralized state management system that allows data synchronization between different UI frames.

Key changes:

Adds extensible state management system with store manager and pub/sub mechanism
Implements React hooks and components for both host and guest environments
Creates new uix-guest-react package for React-specific guest functionality
Establishes communication channels between UI frames for state broadcasting

Reviewed Changes

Copilot reviewed 37 out of 38 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
packages/uix-host/src/port.ts	Adds uiFrames tracking array to Port class
packages/uix-host-react/src/hooks/useExtensibilityState.tsx	Implements host-side state management hook
packages/uix-host-react/src/components/ExtensibleState/*	Creates extensible state provider components
packages/uix-host-react/src/components/GuestUIFrame.tsx	Registers UI frames for communication
packages/uix-guest/src/guest-ui.ts	Adds broadcast capabilities to guest UI
packages/uix-guest-react/*	Complete new package for React guest components
packages/uix-core/src/store/*	Core state management infrastructure

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-09-30T07:09:29Z

packages/uix-guest-react/src/hooks/useHostExtensibityState.ts

@@ -0,0 +1,8 @@
+import { useExtensibilityState } from "./useExtensibilityState";
+
+export const useHostExtensibilityState = (


Function name contains a typo: 'useHostExtensibityState' should be 'useHostExtensibilityState' (missing 'il' in 'Extensibility').

Copilot · 2025-09-30T07:09:30Z

packages/uix-guest-react/src/hooks/useExtensionExtensibityState.ts

@@ -0,0 +1,8 @@
+import { useExtensibilityState } from "./useExtensibilityState";
+
+export const useExtensionExtensibityState = (


Function name contains a typo: 'useExtensionExtensibityState' should be 'useExtensionExtensibilityState' (missing 'il' in 'Extensibility').

Suggested change

export const useExtensionExtensibityState = (

export const useExtensionExtensibilityState = (

Copilot · 2025-09-30T07:09:30Z

packages/uix-guest-react/src/hooks/index.ts

+export * from "./useHostExtensibityState.js";
+export * from "./useExtensionExtensibityState.js";


Export paths contain typos: 'ExtensibityState' should be 'ExtensibilityState' in both file references (missing 'il' in 'Extensibility').

Suggested change

export * from "./useHostExtensibityState.js";

export * from "./useExtensionExtensibityState.js";

export * from "./useHostExtensibilityState.js";

export * from "./useExtensionExtensibilityState.js";

Copilot · 2025-09-30T07:09:30Z

packages/uix-guest-react/README.md

@@ -0,0 +1 @@
+This is the `@adobe/uix-host-react` package alone. See [/README.md](../../README.md) for details.


README incorrectly refers to '@adobe/uix-host-react' but this is the uix-guest-react package. Should be '@adobe/uix-guest-react'.

Suggested change

This is the `@adobe/uix-host-react` package alone. See [/README.md](../../README.md) for details.

This is the `@adobe/uix-guest-react` package alone. See [/README.md](../../README.md) for details.

Copilot · 2025-09-30T07:09:31Z

packages/uix-host-react/src/components/ExtensibleState/ExtensibleStateProvider.tsx

+export const ExtensibleStateProvider = ({
+  children,
+}: PropsWithChildren<unknown>) => {
+  const [storeManager, setStoreManager] = useState(null);


Using null as initial state is not type-safe. Consider using useState<ExtensibleStoreManagerInterface | null>(null) or a more appropriate initial value to maintain type safety.

Suggested change

const [storeManager, setStoreManager] = useState(null);

const [storeManager, setStoreManager] = useState<ExtensibleStoreManager | null>(null);

Copilot · 2025-09-30T07:09:31Z

packages/uix-guest-react/src/components/Attach.tsx

+  const [connection, setConnection] = useState(
+    undefined as GuestUI<VirtualApi>
+  );
+  const [storeManager, setStoreManager] = useState(null);


Using null as initial state is not type-safe. Consider using useState<ExtensibleStoreManagerInterface | null>(null) or a more appropriate initial value to maintain type safety.

Suggested change

const [storeManager, setStoreManager] = useState(null);

const [storeManager, setStoreManager] = useState<ExtensibleStoreManager | null>(null);

Copilot · 2025-09-30T07:09:31Z

packages/uix-host-react/src/hooks/useExtensibilityState.tsx

+      });
+      setState(def);
+    }
+  }, [storeManager]);


The useEffect dependency array is missing key and defaultState dependencies. This could cause the effect to not re-run when these values change, potentially leading to stale closures or incorrect behavior.

Suggested change

}, [storeManager]);

}, [storeManager, key, defaultState]);

Copilot · 2025-09-30T07:09:32Z

packages/uix-guest-react/src/hooks/useExtensibilityState.ts

+        setState(value);
+      }
+    })();
+  }, [connection]);


The useEffect dependency array is missing key, defaultState, scope, and storeManager dependencies. This could cause the effect to not re-run when these values change, potentially leading to stale closures or incorrect behavior.

Suggested change

}, [connection]);

}, [connection, key, defaultState, scope, storeManager]);

Copilot · 2025-09-30T07:09:32Z

packages/uix-host-react/src/hooks/useExtensibilityState.tsx

+      });
+      setState(def);
+    }
+  }, [storeManager]);


The useCallback dependency array is missing key dependency. This could cause the callback to use stale values of key if it changes.

Suggested change

}, [storeManager]);

}, [storeManager, key]);

Copilot · 2025-09-30T07:09:32Z

packages/uix-guest-react/src/hooks/useExtensibilityState.ts

+        setState(value);
+      }
+    })();
+  }, [connection]);


The useCallback dependency array is missing key and scope dependencies. This could cause the callback to use stale values if these change.

VladimirZaets added 5 commits February 11, 2025 18:59

frames-communication-prototype

fcd9681

frames-communication-prototype

f6b5ce8

frames-communication-prototype

3685711

frames-communication-prototype

556548c

frames-communication-prototype

532dc28

AmyJZhao requested a review from Copilot September 30, 2025 07:06

Copilot AI reviewed Sep 30, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Frames communication prototype #85

Frames communication prototype #85

Uh oh!

VladimirZaets commented Feb 12, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Sep 30, 2025

Uh oh!

Copilot AI Sep 30, 2025

Uh oh!

Copilot AI Sep 30, 2025

Uh oh!

Copilot AI Sep 30, 2025

Uh oh!

Copilot AI Sep 30, 2025

Uh oh!

Copilot AI Sep 30, 2025

Uh oh!

Copilot AI Sep 30, 2025

Uh oh!

Copilot AI Sep 30, 2025

Uh oh!

Copilot AI Sep 30, 2025

Uh oh!

Copilot AI Sep 30, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

		@@ -0,0 +1,8 @@
		import { useExtensibilityState } from "./useExtensibilityState";

		export const useHostExtensibilityState = (

		@@ -0,0 +1,8 @@
		import { useExtensibilityState } from "./useExtensibilityState";

		export const useExtensionExtensibityState = (

	export const useExtensionExtensibityState = (
	export const useExtensionExtensibilityState = (

		export * from "./useHostExtensibityState.js";
		export * from "./useExtensionExtensibityState.js";

		@@ -0,0 +1 @@
		This is the `@adobe/uix-host-react` package alone. See [/README.md](../../README.md) for details.

	This is the `@adobe/uix-host-react` package alone. See [/README.md](../../README.md) for details.
	This is the `@adobe/uix-guest-react` package alone. See [/README.md](../../README.md) for details.

	const [storeManager, setStoreManager] = useState(null);
	const [storeManager, setStoreManager] = useState<ExtensibleStoreManager \| null>(null);

	}, [connection]);
	}, [connection, key, defaultState, scope, storeManager]);

Frames communication prototype #85

Are you sure you want to change the base?

Frames communication prototype #85

Uh oh!

Conversation

VladimirZaets commented Feb 12, 2025

Description

Related Issue

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

Checklist:

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant