updated context implementation to use new React Context Api.

lerna.json

@@ -3,7 +3,8 @@
   "packages": [
     "packages/*",
     "acceptance-setup",
-    "acceptance-components/*"
+    "acceptance-components/*",
+    "mocks/*"
   ],
   "version": "independent",
   "npmClient": "npm",

packages/oc-template-react-compiler/lib/reactOCProviderTemplate.js

@@ -1,6 +1,6 @@
 const reactOCProviderTemplate = ({ viewPath }) => `
-  import PropTypes from 'prop-types';
   import React from 'react';
+  import { Provider } from 'oc-template-react-compiler/utils/ocContext';
   import View from '${viewPath}';
 
   class OCProvider extends React.Component {
@@ -9,7 +9,7 @@ const reactOCProviderTemplate = ({ viewPath }) => `
       window.oc.events.fire('oc:componentDidMount',  rest);
     }
 
-    getChildContext() {
+    buildActions() {
       const getData = (parameters, cb) => {
         return window.oc.getData({
           name: this.props._componentName,
@@ -37,17 +37,16 @@ const reactOCProviderTemplate = ({ viewPath }) => `
     }
 
     render() {
-      const { _staticPath, _baseUrl, _componentName, _componentVersion, ...rest } = this.props;        
+      const { _staticPath, _baseUrl, _componentName, _componentVersion, ...rest } = this.props;
+      const actions = this.buildActions();
       return (
-        <View {...rest} />
+        <Provider value={actions}>
+          <View {...rest} />
+        </Provider>
       );
     }
   }
 
-  OCProvider.childContextTypes = {
-    getData: PropTypes.func,
-    getSetting: PropTypes.func
-  };
   export default OCProvider
 `;
 

packages/oc-template-react-compiler/utils/ocContext.js

@@ -0,0 +1,6 @@
+import React from "react";
+
+const ctx = React.createContext();
+
+export const Consumer = ctx.Consumer;
+export const Provider = ctx.Provider;

packages/oc-template-react-compiler/utils/withDataProvider.js

@@ -1,18 +1,20 @@
 import React from "react";
-import PropTypes from "prop-types";
+import { Consumer } from "./ocContext";
 
 const withDataProvider = BaseComponent => {
-  const Enhanced = (props, context) => {
-    const propsWithGetData = {
-      ...props,
-      getData: context.getData
-    };
+  const Enhanced = props => {
+    return (
+      <Consumer>
+        {context => {
+          const propsWithGetData = {
+            ...props,
+            getData: context.getData
+          };
 
-    return <BaseComponent {...propsWithGetData} />;
-  };
-
-  Enhanced.contextTypes = {
-    getData: PropTypes.func
+          return <BaseComponent {...propsWithGetData} />;
+        }}
+      </Consumer>
+    );
   };
 
   return Enhanced;

packages/oc-template-react-compiler/utils/withSettingProvider.js

@@ -1,18 +1,20 @@
 import React from "react";
-import PropTypes from "prop-types";
+import { Consumer } from "./ocContext";
 
 const withSettingProvider = BaseComponent => {
-  const Enhanced = (props, context) => {
-    const propsWithGetSetting = {
-      ...props,
-      getSetting: context.getSetting
-    };
+  const Enhanced = props => {
+    return (
+      <Consumer>
+        {context => {
+          const propsWithGetSetting = {
+            ...props,
+            getSetting: context.getSetting
+          };
 
-    return <BaseComponent {...propsWithGetSetting} />;
-  };
-
-  Enhanced.contextTypes = {
-    getSetting: PropTypes.func
+          return <BaseComponent {...propsWithGetSetting} />;
+        }}
+      </Consumer>
+    );
   };
 
   return Enhanced;

packages/oc-template-react/lib/render.js

@@ -2,7 +2,6 @@ const PropTypes = require("prop-types");
 const React = require("react");
 const ReactDOM = require("react-dom");
 const ReactDOMServer = require("react-dom/server");
-const vm = require("vm");
 
 const createPredicate = require("./to-be-published/get-js-from-url");
 const tryGetCached = require("./to-be-published/try-get-cached");