feat(react): render variant hiding contexts from users

.gitignore

@@ -5,3 +5,4 @@ fragmentTypes.json
 *.log
 .DS_Store
 .vscode
+.idea

packages/graphql/dom.js

@@ -25,3 +25,12 @@ exports.createContext = hopsReact.combineContexts(
   hopsReact.ReactContext,
   exports.GraphQLContext
 );
+
+exports.graphqlExtension = function(config) {
+  return {
+    context: exports.GraphQLContext,
+    config: {
+      graphql: config,
+    },
+  };
+};

packages/graphql/node.js

@@ -51,3 +51,12 @@ exports.createContext = hopsReact.combineContexts(
   hopsReact.ReactContext,
   exports.GraphQLContext
 );
+
+exports.graphqlExtension = function(config) {
+  return {
+    context: exports.GraphQLContext,
+    config: {
+      graphql: config,
+    },
+  };
+};

packages/react/README.md

@@ -29,6 +29,25 @@ const App = () => <h1>Hello World!</h1>;
 export default render(<App />, createContext());
 ```
 
+## `render(reactElement, config)`
+
+Simple wrapper for [`render(reactElement, context)`](#renderreactelement-context) shielding the details of context from you. Each package that functions as an optional extension to the core react package offers a so called `extension` which you can pass as an array. Unlike [`React#createContext(options)`](#createcontextoptions) each extension only takes a configuration that is specific to it, not a general one.
+
+Here you have an example of a React application using the Redux extension. The Redux extension takes only the specific set of options (not the general React ones) mentioned in [`Redux#createContext(options)`](../redux/README.md#createcontextoptions). The general options are passed directly in the configuration.
+
+```js
+import React from 'react';
+import { render } from 'hops-react';
+import { reduxExtension } from 'hops-redux';
+
+const App = () => <h1>Hello World!</h1>;
+
+export default render(<App />, {
+  mountpoint: '#main',
+  extensions: [reduxExtension({ reducers })],
+});
+```
+
 ## `createContext(options)`
 
 `createContext()` generates a rendering context containing most of the actual implementation used by `render`. It takes a couple of options:

packages/react/dom.js

@@ -7,6 +7,8 @@ var mixinable = require('mixinable');
 
 var hopsConfig = require('hops-config');
 
+var createCombinedContext = require('./lib/common').createCombinedContext;
+
 exports.combineContexts = mixinable({
   bootstrap: mixinable.async.parallel,
   enhanceElement: mixinable.async.compose,
@@ -40,7 +42,7 @@ exports.contextDefinition = exports.ReactContext;
 
 exports.createContext = exports.combineContexts(exports.ReactContext);
 
-exports.render = function(reactElement, context) {
+var renderWithContext = function(reactElement, context) {
   return function() {
     var mountpoint = context.getMountpoint();
     var isMounted = mountpoint.hasAttribute('data-hopsroot');
@@ -67,4 +69,18 @@ exports.render = function(reactElement, context) {
   };
 };
 
+exports.render = function(reactElement, contextOrConfig) {
+  var context;
+  if (mixinable.isMixinable(contextOrConfig)) {
+    context = contextOrConfig;
+  } else {
+    context = createCombinedContext(
+      contextOrConfig,
+      exports.ReactContext,
+      exports.combineContexts
+    );
+  }
+  return renderWithContext(reactElement, context);
+};
+
 Object.assign(exports, require('./lib/components'));

packages/react/lib/common.js

@@ -0,0 +1,21 @@
+'use strict';
+
+exports.createCombinedContext = function(
+  config,
+  ReactContext,
+  combineContexts
+) {
+  var mergedConfig = Object.assign({}, config);
+  delete mergedConfig.extensions;
+  var mergedContexts = [ReactContext];
+  if (config.extensions) {
+    config.extensions.forEach(function(extension) {
+      var context = extension.context;
+      mergedContexts.push(context);
+      var extensionConfig = extension.config;
+      mergedConfig = Object.assign(mergedConfig, extensionConfig);
+    });
+  }
+  var combinedContext = combineContexts.apply(null, mergedContexts);
+  return combinedContext(mergedConfig);
+};

packages/react/node.js

@@ -10,6 +10,8 @@ var hopsConfig = require('hops-config');
 
 var defaultTemplate = require('./lib/template');
 
+var createCombinedContext = require('./lib/common').createCombinedContext;
+
 exports.combineContexts = mixinable({
   bootstrap: mixinable.async.parallel,
   enhanceElement: mixinable.async.compose,
@@ -62,7 +64,7 @@ var cloneContext = mixinable.replicate(function(initialArgs, newArgs) {
   return [Object.assign({}, initialArgs[0], newArgs[0])];
 });
 
-exports.render = function(reactElement, _context) {
+var renderWithContext = function(reactElement, _context) {
   return function(req, res, next) {
     var renderContext = cloneContext(_context, { request: req });
     renderContext
@@ -109,4 +111,18 @@ exports.render = function(reactElement, _context) {
   };
 };
 
+exports.render = function(reactElement, contextOrConfig) {
+  var context;
+  if (mixinable.isMixinable(contextOrConfig)) {
+    context = contextOrConfig;
+  } else {
+    context = createCombinedContext(
+      contextOrConfig,
+      exports.ReactContext,
+      exports.combineContexts
+    );
+  }
+  return renderWithContext(reactElement, context);
+};
+
 Object.assign(exports, require('./lib/components'));

packages/react/package.json

@@ -9,7 +9,7 @@
   "files": ["dom.js", "node.js", "lib"],
   "dependencies": {
     "hops-config": "10.0.0-rc.1",
-    "mixinable": "1.2.1",
+    "mixinable": "1.3.0",
     "serialize-javascript": "^1.4.0"
   },
   "peerDependencies": {

packages/redux/index.js

@@ -87,3 +87,10 @@ exports.createContext = hopsReact.combineContexts(
   hopsReact.ReactContext,
   exports.ReduxContext
 );
+
+exports.reduxExtension = function(config) {
+  return {
+    context: exports.ReduxContext,
+    config: config,
+  };
+};

packages/template-graphql/src/app.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Route, Switch, Link } from 'react-router-dom';
 
 import { render, Miss } from 'hops-react';
-import { createContext } from 'hops-graphql';
+import { graphqlExtension } from 'hops-graphql';
 
 import { Home } from './home';
 
@@ -13,4 +13,6 @@ const App = () => (
   </Switch>
 );
 
-export default render(<App />, createContext());
+export default render(<App />, {
+  extensions: [graphqlExtension()],
+});

packages/template-react/src/app.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Route, Switch, Link } from 'react-router-dom';
 
 import { render, Miss } from 'hops-react';
-import { createContext } from 'hops-redux';
+import { reduxExtension } from 'hops-redux';
 
 import { Home } from './home';
 import { Counter } from './counter';
@@ -23,4 +23,6 @@ const App = () => (
   </div>
 );
 
-export default render(<App />, createContext({ reducers }));
+export default render(<App />, {
+  extensions: [reduxExtension({ reducers })],
+});