React Interop PoC #71
Description
Due to popular demand, it would be interesting to create a working prototype of a "React Adapter" to make it possible to render Rimmel components inside a React one.
Given a Rimmel component:
const ClickCounter = ({ externalCounter }) => {
const count = new BehaviorSubject(0).pipe(
scan(x=>x+1)
);
return rml`
<button onclick="${count}">click</button>
Count: <output>${count}</output>
External counter: <output>${externalCounter}</output>
`;
}We'd like to have a function that wraps the above in a React component
const Wrap = (rimmelComponent) => {
...
}
const WrappedComponent = Wrap(original);Requirements:
- Reactivity must keep working both inside and outside the React-Rimmel boundary and across
- No re-rendering of the Rimmel subtree, ever. Rimmel doesn't do re-rendering, so any attempt at it would break reactivity
- Usage from React should look like:
<WrappedComponent external-counter="0" /> - Any updates to these props should be exposed as Observables to the Rimmel component as in the example above