import * as React from 'react' ; import { Subscriber } from 'react-broadcast' ; import { ISandpackContext } from '../types' ; function getDisplayName ( WrappedComponent ) { return WrappedComponent . displayName || WrappedComponent . name || 'Component' ; } export default function withSandpack ( Component ) { const WrappedComponent = ( props ) => ( < Subscriber channel = "sandpack" > { sandpack => < Component { ... props } sandpack = { sandpack } / > } < /Subscriber>); ( WrappedComponent as React . SFC ) . displayName = `WithSandpack(${ getDisplayName ( Component ) })` ; return WrappedComponent ; }