Support React Context

[alansouzati]

Let's assume the following example:

{{#my-app}}
  {{app-header}}
  {{outlet}}
{{/my-app}}

my-app is a react component that uses the new context API to set values to be shared across children.

app-header is another react component that should be able to read from my-app context.

outlet is not a react component.

From what I understand, this addon will first mount app-header and then my-app (behind the scenes yield-wrapper is being used to create the children to be passed to my-app).

Since app-header is mounting first, it never gets a chance to receive the context values that will be set by its parent. In react, the order is different, my-app render is called first, then app-header render is called.

I've tried for a couple of hours to fix this issue. But, I don't think we will be able to fix it if the order is reversed.

[alansouzati]

Another potential issue is the fact that we are calling ReactDOM.render multiple times (for each @WithEmberSupport declaration). This will create another rendering tree that is not sharing context.

So my inclination is not mix handlebars and react together. In other words, making sure to only call WithEmberSupport once.

The downside is that we will loose the UI routing capabilities of ember potentially replacing it with react router? I wonder what are the implications of having only the application.hbs as the main entry point, and then use React as the view layer afterwards.

[alexlafroscia]

I wonder what are the implications of having only the application.hbs as the main entry point, and then use React as the view layer afterwards.

Interesting idea, and I can see this working for cases where you're trying to transition from one framework to the other over time.

However, if you're looking to really mix the two, that's not a reasonable solution.

I'll explore the APIs that React makes available a bit more and see what I can do. The "sharing state" problem is inherently approached differently between React and Ember -- React introduced Context to share state without passing props, and Ember has services for largely the same reason (which are supported in React components).

I wonder if the Context issue could somehow be solved using a service that the addon provides... I'll look into this a bit more. I don't know a lot about React context (yet!)

[alansouzati]

cool. that sounds great.