Implement context

[sheepsteak]

Not sure if this is planned already but it seems like contexts are the main thing missing before getting parity with React.

This will mean adding lifecycle hooks for getChildContextand contextTypes as well as passing the context into the constructor, render(?) and shouldComponentUpdate.

[developit]

@sheepsteak Is there any impact on JSX/hyperscript in adding context? I'm curious whether this should be part of preact core, or a feature of preact-compat.

Is there a specific use-case you have for context that I could test against? I know things like Alt use it to have access store data from within nested components. I did notice though, that react-redux seems to allow usage via both props or context, for what it's worth.

Definitely looking for more insight on this 👍

[sheepsteak]

@developit not too sure what you mean about "any impact on JSX/hyperscript". Do you mean any breaking changes to JSX as to how it would be implemented?

I personally use contexts all the time and a lot of people I talk to about React are the same. It's especially useful when you're doing server rendering and Flux because you then have a way to define the lifetime of your stores that is the same as the client. That's one use case.

I've also used it when building component libraries. Imagine you have some components that can change style/colour (some sort of multi-tenancy). A nice way of handling this is passing something down on the context like {style: 'green'} that the components in the library pick up on and then apply the necessary styles (bringing in relevant classes through CSS Modules).

I fully agree that anything context can do props can also do. But in large applications it becomes so tedious passing everything as props (at least when I did it last).

If you're not necessarily wanting it in core, maybe it could be a separate module somehow? I guess preact will need some substantial changes to allow modifications to the lifecycle though? Regardless, I think it has to be in preact-compat somehow as it's a valid part of React that people will use.

[developit]

It seems like this is going to need to be in core, if only because it touches on so many parts of the lifecycle as you said. I've also run into a few things that would benefit from it (universal rendering and nested routers in preact-router).

I should have time this week to get contexts added, will be looking for help with real-world tests though.

[developit]

+ I will probably take this as a chance to address #3 as well, that will help with clutter.

[sheepsteak]

👍 I can help with some tests.

[antitoxic]

Context in React is a good concept of explicit "stream" of data flowing down the tree and it serves a specific purpose.

If a component needs something, it explicitly asks for it (by contextTypes) so it's not automagically injected in to each component. It's useful for things like <Link> elements that can deal with routing and need acess not only to store but also to history object. Both of these objects are per-app.

[developit]

@antitoxic Agreed regarding <Link> and similar use-cases (including nested <Router>s). I'm hoping to have 3.0 out this weekend, which adds full support for context.

[antitoxic]

Cool! In that case, sorry that i brought you a ~useless github notification 😄

[developit]

No problem, it was a good reminder that I will need to add context support to preact-router's <Link/> component as part of the update.

[samrocksc]

Context is the main hook for redux-router to hook into it actually. Since it's one of the more widely used abstraction layers currently.

https://github.com/rackt/react-redux/blob/master/src/components/Provider.js

[developit]

I just published a prerelease of 3.0 which supports dangerouslySetInnerHTML. On npm as preact-3.0.0-beta1. Please test out contexts for your use-cases and let me know what you think.

[shiftyp]

@developit: Does this context api support the getChildContext method on components?

[developit]

@shiftyp Yup! Let me know if you're able to test against the beta, I would love your feedback! npm install preact@beta

[developit]

Now generally available as of 3.2.

[BerndWessels]

@developit Hi, did you mean that context is now supported in preact@7.2.0 ?

Route with react-router-redux is still not picking up location changes if the ConnectedRouter is in an outer/parent component.

Update:
I just did a bit of digging and it seems that componentWillReceiveProps is not called when the redux state and context changes.
Maybe that's a clue?

Update2:
OK, digging a bit deeper and coming across this it seems that passing pure: false to connect fixes this issue which makes sense.

So no worries and everything is fine I guess ;)