import React , { useEffect , useRef , useState , useCallback , memo } from 'react' ; import { loadApp , Render , defineCustomElement , injectStyle , unmount , retargetEvents , getUid , } from 'fronts' ; import { AppWrapper , UseWebComponents } from './interface' ; /**
 *
 */ export const useWebComponents = ( options ) => { const ModuleRef = useRef < { default : Render ; } | null > ( null ) ; const [ loaded , setLoaded ] = useState ( false ) ; useEffect ( ( ) => { loadApp ( options . loader , options . name ) . then ( ( module ) => { setLoaded ( true ) ; ModuleRef . current = module ; } ) ; } , [ ] ) ; const App = useCallback ( memo ( ( ) => { useEffect ( ( ) => { if ( typeof ModuleRef ! . current ! . default !== 'function' ) { throw new Error ( `The current App should define default exported rendering functions in the dependent "${ process . env . APP_NAME }" App.` ) ; } const { node , injectedRoot } = defineCustomElement ( options ) ; let callback ; Promise . resolve ( ) . then ( ( ) => { injectStyle ( injectedRoot , options . name ) ; const attributes = options . attrs ?? { } ; for ( const key in attributes ) { node . setAttribute ( key , attributes [ key ] ) ; } callback = ModuleRef ! . current ! . default ( node , options . props ?? { } ) ; if ( options . retargetEvent ) { retargetEvents ( injectedRoot ) ; } } ) ; return ( ) => { unmount ( injectedRoot , options . name ) ; callback && callback ( ) ; } ; } , [ ] ) ; const uid = getUid ( options . name ) ; return < fronts - app data - fronts = { uid } />; } ) , [ loaded ] ) ; return loaded ? App : ( { fallback } ) => fallback ?? null ; } ;