React Interop PoC

[dariomannu]

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

[TudorGR]

Hi i would like to work on this issue.

[dariomannu]

Oh, yeah, that would be great! It's all yours, then! :)