[FRONT COMPONENTS] Navigate from the remote (#17762)

## PR Description

This PR:
- Introduces a `FrontComponentHostCommunicationApi`, which allows us to
pass functions to be executed from the worker
- Exposes a navigate function from the host to the front component
remote workers, enabling SDK components to trigger in-app navigation
- Gets rid of `useSyncExternalStore` and makes the execution context
reactive without it
- Refactors and improves the `esbuild` plugin system

## Video


https://github.com/user-attachments/assets/7b26a1c2-f85f-4898-a71d-f60c70e61711
This commit is contained in:
Raphaël Bosi
2026-02-09 14:38:35 +01:00
committed by GitHub
parent 2106f46e9e
commit 2b29918bf8
39 changed files with 689 additions and 293 deletions
@@ -1,24 +1,36 @@
import { ThreadWebWorker, release, retain } from '@quilted/threads';
import { RemoteReceiver } from '@remote-dom/core/receivers';
import { useEffect } from 'react';
import { useEffect, useRef } from 'react';
import { type FrontComponentHostCommunicationApi } from '../../types/FrontComponentHostCommunicationApi';
import { type WorkerExports } from '../../types/WorkerExports';
import { createRemoteWorker } from '../worker/createRemoteWorker';
type FrontComponentWorkerEffectProps = {
componentUrl: string;
frontComponentHostCommunicationApi: FrontComponentHostCommunicationApi;
setReceiver: React.Dispatch<React.SetStateAction<RemoteReceiver | null>>;
setThread: React.Dispatch<
React.SetStateAction<ThreadWebWorker<WorkerExports> | null>
React.SetStateAction<ThreadWebWorker<
WorkerExports,
FrontComponentHostCommunicationApi
> | null>
>;
setError: React.Dispatch<React.SetStateAction<Error | null>>;
};
export const FrontComponentWorkerEffect = ({
componentUrl,
frontComponentHostCommunicationApi,
setReceiver,
setThread,
setError,
}: FrontComponentWorkerEffectProps) => {
const frontComponentHostCommunicationApiRef = useRef(
frontComponentHostCommunicationApi,
);
frontComponentHostCommunicationApiRef.current =
frontComponentHostCommunicationApi;
useEffect(() => {
const newReceiver = new RemoteReceiver({ retain, release });
@@ -28,7 +40,19 @@ export const FrontComponentWorkerEffect = ({
setError(event.error);
};
const thread = new ThreadWebWorker<WorkerExports>(worker);
// Expose host functions to the worker via stable refs to avoid recreating threads
const stableFrontComponentHostCommunicationApi: FrontComponentHostCommunicationApi =
{
navigate: (...args) =>
frontComponentHostCommunicationApiRef.current.navigate(...args),
};
const thread = new ThreadWebWorker<
WorkerExports,
FrontComponentHostCommunicationApi
>(worker, {
exports: stableFrontComponentHostCommunicationApi,
});
setThread(thread);
thread.imports