import React from "react"; import { LanguageProvider } from "../engines/types"; export interface RendererRef<RS> { /** Update runtime state to renderer */ updateState: (state: RS | null) => void; } /** * React component that acts as an imperatively controller wrapper * around the actual language renderer. This is to pull renderer state updates * outside of Mainframe for performance reasons. */ const RendererWrapperComponent = <RS extends {}>( { renderer }: { renderer: LanguageProvider<RS>["Renderer"] }, ref: React.Ref<RendererRef<RS>> ) => { const [state, setState] = React.useState<RS | null>(null); React.useImperativeHandle(ref, () => ({ updateState: setState, })); return renderer({ state }); }; export const RendererWrapper = React.forwardRef(RendererWrapperComponent);