Create a React adapter component

[dumconstantin]

Create a component that can wrap an engine build view so that it is directly usable in a React application.

Something like:

class ReactAdaptor extends React.Component {
  engine;
  defaultState;
  component;
  constructor(props) {
    super(props)
    this.initialState = props.initialState
    this.component = props.component
    this.producers = props.producers
  }
  componentWillUnmount() {
    this.engine.destroy() // not implemented yet
  }
  componentDidMount() {
    const Component = this.component
    this.engine = new Engine({
      producers: {
         list: this.producers
      }
      state: {
        initial: this.initialState
      },
      view: {
        root: document.getElementById("container"),
        element: <Component />
      }
    });
  }
  render() {
    return <div id="container"></div> // this is just an example, the rendered element should be passed to the engine directly
  }
}

which could then be used as

import { ReactAdaptor } from '@c11/engine-react-components'
...
export const MyComponent = <ReactAdaptor initialState={state} producers={producers} component={MyApp} />

now the component can be used in a React system:

import React from 'react'
import { MyComponent } from './src/my-engine-app

export const App = () => {
  return <div>
     <MyComponent />
   </div>
}

Should use Refs to get the element.