Support contexts

[Leonya]

https://reactjs.org/docs/context.html

[Hypnosphi]

Not really sure we should do it here, at least before context API becomes stable:

If you want your application to be stable, don’t use context. It is an experimental API and it is likely to break in future releases of React.

If you insist on using context despite these warnings, try to isolate your use of context to a small area and avoid using the context API directly when possible so that it’s easier to upgrade when the API changes.

This means that there should be at most one place in an app which encapsulates context usage.

[stacygrace]

A new Context API is currently being worked on and (if I'm understanding right) should bring stability to this feature once finished. Details on this can be found at the official proposal and in the corresponding pull request.

This new API for Context has been merged and is set behind a feature flag at the moment.

[neworld]

The new Context API was released with 16.3.0 version.

[Leonya]

I have started working on React 16.3 compatibility, but would love to see contributions. Currently overwhelmed with work and this isn't a top priority.

[stacygrace]

There's an open pull request to add Typescript definitions for this API on Definitely Typed waiting to be merged; this is what it looks like:

import * as React from "react";

declare module "react" {
  type Provider<T> = React.ComponentType<{
    value: T;
    children?: ReactNode;
  }>;
  type Consumer<T> = ComponentType<{
    children: (value: T) => ReactNode;
    unstable_observedBits?: number;
  }>;
  interface Context<T> {
    Provider: Provider<T>;
    Consumer: Consumer<T>;
  }
  function createContext<T>(defaultValue: T, calculateChangedBits?: (prev: T, next: T) => number): Context<T>;
}

but when I run that through ts2kt the output isn't usable because it leaves the Provider and Consumer undefined. Here's the output I get:

@file:Suppress("INTERFACE_WITH_SUPERCLASS", "OVERRIDING_FINAL_MEMBER", "RETURN_TYPE_MISMATCH_ON_OVERRIDE", "CONFLICTING_OVERLOADS", "EXTERNAL_DELEGATION", "NESTED_CLASS_IN_EXTERNAL_INTERFACE")
@file:JsModule("react")
package react

import kotlin.js.*
import kotlin.js.Json
import org.khronos.webgl.*
import org.w3c.dom.*
import org.w3c.dom.events.*
import org.w3c.dom.parsing.*
import org.w3c.dom.svg.*
import org.w3c.dom.url.*
import org.w3c.fetch.*
import org.w3c.files.*
import org.w3c.notifications.*
import org.w3c.performance.*
import org.w3c.workers.*
import org.w3c.xhr.*

external interface Context<T> {
    var Provider: Provider<T>
    var Consumer: Consumer<T>
}
external fun <T> createContext(defaultValue: T, calculateChangedBits: ((prev: T, next: T) -> Number)? = definedExternally /* null */): Context<T> = definedExternally

I've spent some time trying to torture this into compiling but haven't been successful. I don't have much experience doing this type of thing though.

[Leonya]

Context API is supported as of 16.3.1-pre.26: 7709872, enjoy!

[chadmorrow-fd]

Woohoo! Thanks so much!