import ReactDOM from 'react-dom' ; import React from 'react' ; import { ReactDomChild } from './react-dom-child' ; import createRef from 'react-create-ref' ; export const renderReact2Node = ( RComponent , initialProps , targetDomNode , onRender ) => { class PropBridge extends React . PureComponent { state = { ... initialProps } ; setProps = ( props ) => this . setState ( ( ) => props ) ; render ( ) { return < RComponent { ... this . props } { ... this . state } />; } } const propBridgeRef = createRef < PropBridge > ( ) ; ReactDOM . render ( < PropBridge ref = { propBridgeRef } / > , targetDomNode , ( ) => onRender ( propBridgeRef ) ) ; } ; export const sendPropsToReact = ( propBridgeRef , props ) => { if ( propBridgeRef && propBridgeRef . current ) { propBridgeRef . current . setProps ( props ) ; } } ; export const getPropsFromNode = ( node ) => { const attributeNames = node . getAttributeNames ( ) ; const mappedProps = attributeNames . reduce ( ( props , name ) => { props [ name ] = node . getAttribute ( name ) ; return props ; } , { } ) ; const children = Array . from ( node . childNodes ) . map ( ( e ) => e . cloneNode ( true ) ) ; mappedProps . children = < ReactDomChild > { children } < /ReactDomChild>; return mappedProps ; } ;