How can i provide a "render"-function to other frameworks like react or angular

Stencil
1

Hi!

Currently iam working on a stencil tree component library and i am facing a problem and iam not sure how to solve it in the best way.

My tree component (stencil) should provide a render function.

@Component({
  ...
  scoped: true
})
class ... {
  @Prop() renderTreeNode: (data: any) => Element;
}

Inside of “stencil” a can call the renderTreeNode like the following and it works great!

<my-tree renderTreeNode={(data) =>  <span>{data.name}</span>} data={[...]} />

The tree interate over data and call for each entry the renderTreeNode function. The result of the function (Element) is appended to the component.

// Note: Not the real code the real code have some
// additional virtualization (https://github.com/tbranyen/hyperlist)
data.forEach(entry => {
 const elm = renderTreeNode(entry);
 this.treeNodeElement.appendChild(elm);
})

But iam struggeling how i can integrate it into different frameworks?

e.g In React with autogenerated react proxie components (GitHub - ionic-team/stencil-ds-output-targets: These are output targets that can be added to Stencil for React and Angular.)

<MyTree renderTreeNode={(data) => <AReactNode name={data.name} />}

:zap: Not working

<MyTree renderTreeNode={(data) => {
   const el = document.createElement('DIV');
   ReactDOM.render(<AReactNode name={data.name} />, el);
   return el;
}}

:zap: Working, BUT you lose the complete React Context (React.createContext, Redux, etc).

Any ideas how to solve the problem or is there a better solution to render elements dynamicly over a function from different frameworks.