Workiva · greglittlefield-wf · Apr 3, 2019 · Dec 29, 2016 · Dec 29, 2016 · Dec 30, 2016
diff --git a/.gitignore b/.gitignore
@@ -7,3 +7,4 @@ pubspec.lock
 .packages
 node_modules/
 .dart_tool
+.vscode
diff --git a/example/js_components/index.html b/example/js_components/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title>JS Components - react-dart Examples</title>
+</head>
+<body>
+    <em>See Dart source for more info</em>
+
+    <div id="content"></div>
+
+    <script src="packages/react/react.js"></script>
+    <script src="packages/react/react_dom.js"></script>
+
+    <!-- Where the JS React components are declared. -->
+    <script src="js_components.js"></script>
+
+    <script defer src="js_components.dart.js"></script>
+</body>
+</html>
diff --git a/example/js_components/js_components.dart b/example/js_components/js_components.dart
@@ -0,0 +1,83 @@
+@JS()
+library js_components;
+
+import 'dart:html';
+import 'dart:math';
+
+import 'package:js/js.dart';
+import 'package:react/react.dart' as react;
+import 'package:react/react_client.dart';
+import 'package:react/react_client/react_interop.dart';
+import 'package:react/react_dom.dart' as react_dom;
+
+var fooRef;
+
+main() {
+  setClientConfiguration();
+
+  var content = Foo({
+    // Foo forwards its props to its DOM nodes, so you can set
+    // DOM props here and they'll work just how you'd expect them to.
+    'title': 'Hey, quit hovering me!',
+    'style': {
+      'color': ['#f00', '#0f0', '#00f'][new Random().nextInt(3)]
+    },
+    'onMouseEnter': (react.SyntheticMouseEvent e) {
+      print(e.runtimeType);
+      print('Entered!');
+    },
+
+    // Refs work the same, only you get back the JS component instance.
+    // See below for how you can use this.
+    'ref': (ref) {
+      fooRef = ref;
+    },
+
+    // Props specific to the component can be specified as well!
+    'foo': 'bar',
+//    // Non-DOM event handlers props can't be automatically wrapped with
+//    // conversion logic, so this has to be done manually if you need
+//    // access to the Dart [react.SyntheticEvent] and not the JS one.
+//    //
+//    // See [wrapEventHandler] docs for more info.
+//    'onButtonClick': wrapEventHandler(_handleButtonClick, 'onClick'),
+  });
+
+  react_dom.render(content, querySelector('#content'));
+
+  // If you need to access a component instance, say,
+  // to call an API method, you can do so by writing
+  // a JS interop wrapper class.
+  print((fooRef as FooComponent).getFoo());
+}
+
+void _handleButtonClick(react.SyntheticMouseEvent event) {
+  print('Clicked!');
+}
+
+/// The JS component class.
+///
+/// Private since [Foo] will be used instead.
+///
+/// Accessible via `Foo.type`.
+@JS('Foo')
+external ReactClass get _Foo;
+
+/// A factory for the "Foo" JS components class that allows it
+/// to be used via Dart code.
+///
+/// Use this to render instances of the component from within Dart code.
+///
+/// This converts the Dart props [Map] passed into it in the
+/// the same way props are converted for DOM components.
+final Foo = new ReactJsComponentFactoryProxy(_Foo);
+
+/// JS interop wrapper class for the component,
+/// allowing us to interact with component instances
+/// made available via refs or [react_dom.render] calls.
+///
+/// This is optional, as you won't always need to access the component's API.
+@JS()
+class FooComponent {
+  external String getFoo();
+}
diff --git a/example/js_components/js_components.js b/example/js_components/js_components.js
@@ -0,0 +1,23 @@
+var Foo = React.createClass({
+  render: function() {
+    // Equivalent to ES6:
+    //    var {foo, onButtonClick, ...rest} = this.props;
+    var foo = this.props.foo;
+    var onButtonClick = this.props.onButtonClick;
+    var rest = Object.assign({}, this.props);
+    delete rest.foo;
+    delete rest.onButtonClick;
+
+    return React.createElement("div", {}, [rest,
+      React.createElement("h4", {}, 'Foo component'),
+      React.createElement("p", {}, 'value of props.foo: ', foo),
+      React.createElement("button", {onClick: onButtonClick}, 'button')
+    ]);
+  },
+
+  getFoo: function() {
+    return this.props.foo;
+  }
+});
+
+window.Foo = Foo;
diff --git a/example/test/react_test_components.dart b/example/test/react_test_components.dart
@@ -1,6 +1,8 @@
 import "dart:async";
+import 'dart:convert';
 
 import "package:react/react.dart" as react;
+import 'package:react/react_client.dart';
 import "package:react/react_dom.dart" as react_dom;
 
 class _HelloComponent extends react.Component {
@@ -169,15 +171,17 @@ class _MainComponent extends react.Component {
 
 var mainComponent = react.registerComponent(() => new _MainComponent());
 
+var TestContext = createContext({
+  'dartClass': react.Component,
+  'map': {'test': true},
+  'renderCount': 0
+});
+
 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']
+  getInitialState() => {
+        'dartClass': react.Component,
+        'map': {'test': true},
+        'renderCount': 0
       };
 
   render() {
@@ -191,54 +195,52 @@ class _ContextComponent extends react.Component {
         'onClick': _onButtonClick
       }, 'Redraw'),
       react.br({'key': 'break1'}),
-      'ContextComponent.getChildContext(): ',
-      getChildContext().toString(),
+      'TestContext.Provider props.value: $state',
       react.br({'key': 'break2'}),
       react.br({'key': 'break3'}),
-      props['children'],
+      TestContext.Provider(
+        {'key': 'tcp', 'value': this.state},
+        props['children'],
+      ),
     ]);
   }
 
   _onButtonClick(event) {
-    this.setState({'renderCount': (this.state['renderCount'] ?? 0) + 1});
+    this.setState({'renderCount': this.state['renderCount'] + 1});
   }
 }
 
 var contextComponent = react.registerComponent(() => new _ContextComponent());
 
 class _ContextConsumerComponent extends react.Component {
-  @override
-  Iterable<String> get contextKeys => const ['foo'];
-
   render() {
-    return react.ul({
-      'key': 'ul'
-    }, [
-      'ContextConsumerComponent.context: ',
-      context.toString(),
-      react.br({'key': 'break1'}),
-      react.br({'key': 'break2'}),
-      props['children'],
-    ]);
+    return TestContext.Consumer({}, (value) {
+      return react.ul({
+        'key': 'ul'
+      }, [
+        'TestContext.Consumer: value = ${value}',
+        react.br({'key': 'break1'}),
+        react.br({'key': 'break2'}),
+        props['children'],
+      ]);
+    });
   }
 }
 
 var contextConsumerComponent =
     react.registerComponent(() => new _ContextConsumerComponent());
 
-class _GrandchildContextConsumerComponent extends react.Component {
-  @override
-  Iterable<String> get contextKeys => const ['renderCount'];
+class _ContextTypeConsumerComponent extends react.Component {
+  var contextType = TestContext;
 
   render() {
     return react.ul({
       'key': 'ul'
     }, [
-      'GrandchildContextConsumerComponent.context: ',
-      context.toString(),
+      'Using Component.contextType: this.context = ${this.context}',
     ]);
   }
 }
 
 var grandchildContextConsumerComponent =
-    react.registerComponent(() => new _GrandchildContextConsumerComponent());
+    react.registerComponent(() => new _ContextTypeConsumerComponent());
diff --git a/js_src/_dart_helpers.js b/js_src/_dart_helpers.js
@@ -50,29 +50,9 @@ function _createReactDartComponentClass(dartInteropStatics, componentStatics, js
     }
   }
 
-      // 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) {
-        ReactDartComponent.childContextTypes = {};
-        for (var i = 0; i < childContextKeys.length; i++) {
-          ReactDartComponent.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.
-        ReactDartComponent.prototype['getChildContext'] = function() {
-          return dartInteropStatics.handleGetChildContext(this.dartComponent);
-        };
-      }
-
-      if (contextKeys && contextKeys.length !== 0) {
-        ReactDartComponent.contextTypes = {};
-        for (var i = 0; i < contextKeys.length; i++) {
-          ReactDartComponent.contextTypes[contextKeys[i]] = React.PropTypes.object;
-        }
-      }
+  if (jsConfig && jsConfig.contextType) {
+    ReactDartComponent.contextType = jsConfig.contextType;
+  }
 
   return ReactDartComponent;
 }