import { AddBlockPlugin , BasePanel , useAppContext } from '@penpad/core' ; import { Actions } from '@penpad/core/src/types' ; import React from 'react' ; /**
 * Logger plugin to be attached to <Penpad />
 */ export const LoggerPlugin = ( ) => { return ( < AddBlockPlugin block = { ( ) => ( { domain : 'panels' , priority : 80 , id : 'logger' , view : [ LoggerPanel , { } ] } ) } />); } ; function clearLogEntries ( actions ) { if ( ! actions || ! actions . setData ) return ; actions . setData ( 'logger' , ( state ) => { return { ... state , logs : [ ] } ; } ) ; } function pushLogEntry ( actions , message ) { if ( ! actions || ! actions . setData ) return ; actions . setData ( 'logger' , ( state ) => { const logs = ( state && state . logs ) || [ ] ; return { ... state , logs : [ ... logs , message ] } ; } ) ; } /**
 * Panel UI
 */ const LoggerPanel = ( ) => { const { state } = useAppContext ( ) ; if ( ! state ) return null ; const data = ( state && state . data && state . data . logger ) || { } ; const logs = data . logs || [ ] ; return ( < BasePanel title = 'Logs' > { logs . map ( ( line , index ) => ( < div key = { index } > { line } < /div>))} < /BasePanel>); } ; /**
 * React hook
 */ export const useLogger = ( ) => { const { actions } = useAppContext ( ) ; if ( ! actions ) return ( ) => { } ; return ( message ) => { pushLogEntry ( actions , message ) ; } ; } ; /**
 * Use logger render props
 */ export const UseLogger = ( { children } ) => { const log = useLogger ( ) ; return < > { children ( { log } ) } < />; } ; export type LoggerFunction = ( ... props : any [ ] ) => any ; export type Renderer = ( props : { log : LoggerFunction ; } ) => React . ReactNode ; export type Message = string ; interface LoggerState { logs ? : string [ ] ; } export default LoggerPlugin ;