Workiva · greglittlefield-wf · Dec 14, 2017 · Oct 26, 2017 · Oct 26, 2017 · Oct 27, 2017
diff --git a/README.md b/README.md
@@ -256,3 +256,17 @@ void main() {
 ```
 
 To test the Dart wrapper, take a look at [test/react_test_utils_test.dart](test).
+
+## Contributing
+
+### Running Tests
+
+Dart VM: `pub run test -p content-shell`
+dart2js: `pub run test -p chrome`
+
+### Build JS
+
+After modifying dart_helpers.js, run:
+```
+$ tool/build_js.sh
+```
diff --git a/example/test/context_test.dart b/example/test/context_test.dart
@@ -0,0 +1,22 @@
+import 'dart:html';
+
+import 'package:react/react_dom.dart' as react_dom;
+import 'package:react/react_client.dart';
+
+import 'react_test_components.dart';
+
+void main() {
+  setClientConfiguration();
+
+  react_dom.render(contextComponent({},
+    contextConsumerComponent({}),
+  ), querySelector('#content'));
+
+  react_dom.render(contextComponent({},
+    contextConsumerComponent({}),
+  ), querySelector('#content'));
+
+  react_dom.render(contextComponent({},
+    contextConsumerComponent({}, grandchildContextConsumerComponent({})),
+  ), querySelector('#content'));
+}
diff --git a/example/test/context_test.html b/example/test/context_test.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <title>context_test</title>
+  </head>
+  <body>
+    <div id="content"></div>
+    <script src="packages/react/react.js"></script>
+    <script src="packages/react/react_dom.js"></script>
+    <script type="application/dart" src="context_test.dart"></script>
+    <script src="packages/browser/dart.js"></script>
+  </body>
+</html>
diff --git a/example/test/get_dom_node_test.dart b/example/test/get_dom_node_test.dart
@@ -20,7 +20,7 @@ class _ChildComponent extends react.Component {
     react.div({}, [
       "Test element",
       counter.toString(),
-      react.button({"onClick": (_) { counter++;redraw();} }, "Increase counter")
+      react.button({'key': 'button', "onClick": (_) { counter++;redraw();} }, "Increase counter")
     ]);
 }
 
@@ -40,12 +40,12 @@ class SimpleComponent extends react.Component {
 
   render() =>
     react.div({}, [
-      react.span({"ref": "refToSpan"}, "Test"),
-      react.span({}, counter),
-      react.button({"onClick": (_) => (react_dom.findDOMNode(this) as HtmlElement).children.first.text = (++counter).toString()},"Increase counter"),
-      react.br({}),
-      ChildComponent({"ref": "refToElement"}),
-      react.button({"onClick": (_) => window.alert((this.ref('refToElement') as _ChildComponent).counter.toString())}, "Show value of child element"),
+      react.span({'key': 'span1', "ref": "refToSpan"}, "Test"),
+      react.span({'key': 'span2'}, counter),
+      react.button({'key': 'button1', "onClick": (_) => (react_dom.findDOMNode(this) as HtmlElement).children.first.text = (++counter).toString()},"Increase counter"),
+      react.br({'key': 'br'}),
+      ChildComponent({'key': 'child', "ref": "refToElement"}),
+      react.button({'key': 'button2', "onClick": (_) => window.alert((this.ref('refToElement') as _ChildComponent).counter.toString())}, "Show value of child element"),
     ]);
 }
 

diff --git a/example/test/react_test.dart b/example/test/react_test.dart
@@ -8,10 +8,10 @@ import "react_test_components.dart";
 void main() {
   setClientConfiguration();
   react_dom.render(mainComponent({}, [
-                                            helloGreeter({}, []),
-                                            listComponent({}, []),
+                                            helloGreeter({'key': 'hello'}, []),
+                                            listComponent({'key': 'list'}, []),
                                             //clockComponent({"name": 'my-clock'}, []),
-                                            checkBoxComponent({}, [])
+                                            checkBoxComponent({'key': 'checkbox'}, [])
                                           ]
     ), querySelector('#content'));
 }
diff --git a/example/test/react_test_components.dart b/example/test/react_test_components.dart
@@ -30,8 +30,8 @@ class _HelloGreeter extends react.Component {
 
   render() {
     return react.div({}, [
-        react.input({'ref': 'myInput', 'value': bind('name'), 'onChange': onInputChange}),
-        helloComponent({'name': state['name']})
+        react.input({'key': 'input', 'ref': 'myInput', 'value': bind('name'), 'onChange': onInputChange}),
+        helloComponent({'key': 'hello', 'name': state['name']})
     ]);
   }
 }
@@ -47,8 +47,8 @@ class _CheckBoxComponent extends react.Component {
 
   render() {
     return react.div({}, [
-        react.label({'className': this.state["checked"] ? 'striked' : 'not-striked'}, 'do the dishes'),
-        react.input({'type': 'checkbox', 'value': bind('checked')}, [])
+        react.label({'key': 'label', 'className': this.state["checked"] ? 'striked' : 'not-striked'}, 'do the dishes'),
+        react.input({'key': 'input', 'type': 'checkbox', 'value': bind('checked')})
     ]);
   }
 }
@@ -136,8 +136,8 @@ class _ListComponent extends react.Component {
     }
 
     return react.div({}, [
-        react.button({"onClick": addItem}, "addItem"),
-        react.ul({}, items),
+        react.button({"onClick": addItem, 'key': 'button'}, "addItem"),
+        react.ul({'key': 'list'}, items),
     ]);
   }
 }
@@ -152,3 +152,61 @@ class _MainComponent extends react.Component {
 }
 
 var mainComponent = react.registerComponent(() => new _MainComponent());
+
+class _ContextComponent extends react.Component {
+  @override
+  Iterable<String> get childContextKeys => const ['foo', 'bar', 'renderCount'];
+
+  @override
+  Map<String, dynamic> getChildContext() => {
+    'foo': {'object': 'with value'},
+    'bar': true,
+    'renderCount': this.state['renderCount']
+  };
+
+  render() {
+    return react.ul({},
+      react.button({'onClick': _onButtonClick}, 'Redraw'),
+      react.br({}),
+      'ContextComponent.getChildContext(): ',
+      getChildContext().toString(),
+      react.br({}),
+      react.br({}),
+      props['children']
+    );
+  }
+
+  _onButtonClick(event) {
+    this.setState({'renderCount': (this.state['renderCount'] ?? 0) + 1});
+  }
+}
+var contextComponent = react.registerComponent(() => new _ContextComponent());
+
+class _ContextConsumerComponent extends react.Component {
+  @override
+  Iterable<String> get contextKeys => const ['foo'];
+
+  render() {
+    return react.ul({},
+      'ContextConsumerComponent.context: ',
+      context.toString(),
+      react.br({}),
+      react.br({}),
+      props['children']
+    );
+  }
+}
+var contextConsumerComponent = react.registerComponent(() => new _ContextConsumerComponent());
+
+class _GrandchildContextConsumerComponent extends react.Component {
+  @override
+  Iterable<String> get contextKeys => const ['renderCount'];
+
+  render() {
+    return react.ul({},
+      'GrandchildContextConsumerComponent.context: ',
+      context.toString(),
+    );
+  }
+}
+var grandchildContextConsumerComponent = react.registerComponent(() => new _GrandchildContextConsumerComponent());
diff --git a/example/test/ref_test.dart b/example/test/ref_test.dart
@@ -45,23 +45,23 @@ class _ParentComponent extends react.Component {
 
   render() =>
     react.div({},[
-      react.h1({}, "String refs"),
-      react.h4({}, "<input>"),
-      react.input({"ref": "inputRef"}),
-      react.button({"onClick": showInputValue}, "Print input element value"),
-      react.h4({}, "ChildComponent"),
-      ChildComponent({"ref": "childRef"}),
-      react.button({"onClick": showChildValue}, "Print child value"),
-      react.button({"onClick": incrementChildValue}, "Increment child value"),
+      react.h1({'key': 'string-h1'}, "String refs"),
+      react.h4({'key': 'string-h4'}, "<input>"),
+      react.input({'key': 'string-input', "ref": "inputRef"}),
+      react.button({'key': 'string-show-input', "onClick": showInputValue}, "Print input element value"),
+      react.h4({'key': 'string-h4-child'}, "ChildComponent"),
+      ChildComponent({'key': 'string-child', "ref": "childRef"}),
+      react.button({'key': 'string-show-button', "onClick": showChildValue}, "Print child value"),
+      react.button({'key': 'string-increment-button', "onClick": incrementChildValue}, "Increment child value"),
 
-      react.h1({}, "Callback refs"),
-      react.h4({}, "<input>"),
-      react.input({"ref": (instance) => _inputCallbackRef = instance}),
-      react.button({"onClick": showInputCallbackRefValue}, "Print input element value"),
-      react.h4({}, "ChildComponent"),
-      ChildComponent({"ref": (instance) => _childCallbackRef = instance}),
-      react.button({"onClick": showChildCallbackRefValue}, "Print child value"),
-      react.button({"onClick": incrementChildCallbackRefValue}, "Increment child value"),
+      react.h1({'key': 'h1-callback'}, "Callback refs"),
+      react.h4({'key': 'h4-callback-input'}, "<input>"),
+      react.input({'key': 'callback-input', "ref": (instance) => _inputCallbackRef = instance}),
+      react.button({'key': 'callback-show-input', "onClick": showInputCallbackRefValue}, "Print input element value"),
+      react.h4({'key': 'callback-child-h4'}, "ChildComponent"),
+      ChildComponent({'key': 'callback-child', "ref": (instance) => _childCallbackRef = instance}),
+      react.button({'key': 'callback-show-button', "onClick": showChildCallbackRefValue}, "Print child value"),
+      react.button({'key': 'callback-increment-button', "onClick": incrementChildCallbackRefValue}, "Increment child value"),
     ]);
 }
 

diff --git a/example/test/speed_test.dart b/example/test/speed_test.dart
@@ -56,9 +56,9 @@ class _Hello extends react.Component {
     for(var elem in data){
       children.add(
           react.div({'key': elem[0]},[
-            react.span({}, elem[0]),
+            react.span({'key': 'span1'}, elem[0]),
             " ",
-            react.span({}, elem[1])
+            react.span({'key': 'span2'}, elem[1])
           ])
       );
     }

diff --git a/js_src/dart_helpers.js b/js_src/dart_helpers.js
@@ -5,10 +5,10 @@
 function _getProperty(obj, key) { return obj[key]; }
 function _setProperty(obj, key, value) { return obj[key] = value; }
 
-function _createReactDartComponentClassConfig(dartInteropStatics, componentStatics) {
-  return {
+function _createReactDartComponentClassConfig(dartInteropStatics, componentStatics, jsConfig) {
+  var config = {
     getInitialState: function() {
-      this.dartComponent = dartInteropStatics.initComponent(this, this.props.internal, componentStatics);
+      this.dartComponent = dartInteropStatics.initComponent(this, this.props.internal, this.context, componentStatics);
       return {};
     },
     componentWillMount: function() {
@@ -17,14 +17,14 @@ function _createReactDartComponentClassConfig(dartInteropStatics, componentStati
     componentDidMount: function() {
       dartInteropStatics.handleComponentDidMount(this.dartComponent);
     },
-    componentWillReceiveProps: function(nextProps) {
-      dartInteropStatics.handleComponentWillReceiveProps(this.dartComponent, nextProps.internal);
+    componentWillReceiveProps: function(nextProps, nextContext) {
+      dartInteropStatics.handleComponentWillReceiveProps(this.dartComponent, nextProps.internal, nextContext);
     },
-    shouldComponentUpdate: function(nextProps, nextState) {
-      return dartInteropStatics.handleShouldComponentUpdate(this.dartComponent);
+    shouldComponentUpdate: function(nextProps, nextState, nextContext) {
+      return dartInteropStatics.handleShouldComponentUpdate(this.dartComponent, nextContext);
     },
-    componentWillUpdate: function(nextProps, nextState) {
-      dartInteropStatics.handleComponentWillUpdate(this.dartComponent);
+    componentWillUpdate: function(nextProps, nextState, nextContext) {
+      dartInteropStatics.handleComponentWillUpdate(this.dartComponent, nextContext);
     },
     componentDidUpdate: function(prevProps, prevState) {
       dartInteropStatics.handleComponentDidUpdate(this.dartComponent, prevProps.internal);
@@ -36,6 +36,34 @@ function _createReactDartComponentClassConfig(dartInteropStatics, componentStati
       return dartInteropStatics.handleRender(this.dartComponent);
     }
   };
+
+  // React limits the accessible context entries
+  // to the keys specified in childContextTypes/contextTypes.
+
+  var childContextKeys = jsConfig && jsConfig.childContextKeys;
+  var contextKeys = jsConfig && jsConfig.contextKeys;
+
+  if (childContextKeys && childContextKeys.length !== 0) {
+    config.childContextTypes = {};
+    for (var i = 0; i < childContextKeys.length; i++) {
+      config.childContextTypes[childContextKeys[i]] = React.PropTypes.object;
+    }
+
+    // Only declare this when `childContextKeys` is non-empty to avoid unnecessarily
+    // creating interop context objects for components that won't use it.
+    config.getChildContext = function() {
+      return dartInteropStatics.handleGetChildContext(this.dartComponent);
+    };
+  }
+
+  if (contextKeys && contextKeys.length !== 0) {
+    config.contextTypes = {};
+    for (var i = 0; i < contextKeys.length; i++) {
+      config.contextTypes[contextKeys[i]] = React.PropTypes.object;
+    }
+  }
+
+  return config;
 }
 
 function _markChildValidated(child) {