A way to trigger or listen to events inside bundled code

[nkovacic]

I would like to listen to and trigger events inside the bundled code. Example:

const code = `
export default function App() {
 const { dispatch } = useSandpackEvents
 const buttonClick = () => {
       dispatch({ type: 'click', message: { text: 'Hello from code' }
 }
  return <button onClick={buttonClick}>Trigger event</button>
}`;

const SandpackListener = () => {
  const { dispatch, listen, sandpack } = useSandpack();

  useEffect(() => {
    const unsubscribe = listen((msg) => {
      //msg here could also be from code
    });

    return () => unsubscribe();
  }, []);

  return null;
};

<SandpackProvider
  files={{
    "/App.js": code,
  }}
  template="react"
>
  <SandpackLayout>
    <SandpackCodeEditor />
    <SandpackListener />
    <SandpackPreview showOpenInCodeSandbox={false} showRefreshButton={false} />
  </SandpackLayout>
</SandpackProvider>;

[alexnm]

This would require a framework agnostic approach, as sandpack can run any frontend framework/code. I'm curious though, what would be your use case for this? You can theoretically make it work with the current implementation if you do a postMessage in your code towards the window.parent.

[nkovacic]

Posting to the window.parent works, thank you for the suggestion. I want to change the original source code in response to some actions in the actual application.