add plugins

client/.babelrc

@@ -1,6 +1,6 @@
 {
   "extends": "../.babelrc",
   "plugins": [
-    "transform-async-to-generator",
+    "transform-async-to-generator"
   ]
 }

client/coral-docs/src/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import {render} from 'react-dom';
 import {GraphQLDocs} from 'graphql-docs';
 
 import fetcher from './services/fetcher';
 
 // Render the application into the DOM
-ReactDOM.render(<GraphQLDocs fetcher={fetcher} />, document.querySelector('#root'));
+render(<GraphQLDocs fetcher={fetcher} />, document.querySelector('#root'));

client/coral-embed-stream/src/Embed.js

@@ -34,6 +34,7 @@ import ConfigureStreamContainer from 'coral-configure/containers/ConfigureStream
 import Comment from './Comment';
 import LoadMore from './LoadMore';
 import NewCount from './NewCount';
+import {Slot} from 'coral-framework';
 
 class Embed extends Component {
 
@@ -119,6 +120,7 @@ class Embed extends Component {
     return (
       <div style={expandForLogin}>
         <div className="commentStream">
+          <Slot fill="Stream"/>
           <TabBar onChange={this.changeTab} activeTab={activeTab}>
             <Tab><Count count={asset.commentCount}/></Tab>
             <Tab>{lang.t('profile')}</Tab>

client/coral-framework/components/Slot.js

@@ -6,9 +6,10 @@ class Slot extends Component {
     console.log('Slot Mounted');
   }
   render() {
+    const {fill} = this.props;
     return (
       <div>
-        {injectedPlugins}
+        {injectedPlugins(fill)}
       </div>
     );
   }

client/coral-framework/helpers/importer.js

@@ -1,6 +1,6 @@
 import {client as clientPlugins} from 'pluginsConfig';
 
-function importer () {
+function importer (fill) {
   let context,
     importedFiles;
 
@@ -55,6 +55,15 @@ function importer () {
       .filter(plugin => clientPlugins.indexOf(plugin.name) > -1);
   }
 
+  function addProps (plugin) {
+    plugin.props = getConfig(plugin.name);
+    return plugin;
+  }
+
+  function filterBySlot (plugin) {
+    return plugin.props.slot === fill;
+  }
+
   function init() {
 
     /**
@@ -65,8 +74,10 @@ function importer () {
 
     return filterByUserConfig(importedFiles)
       .filter(key => key.format === 'js')
-      .reduce((entry, plugin) => {
-        entry.push(context(plugin.key)(getConfig(plugin.name)));
+      .map(addProps)
+      .filter(filterBySlot)
+      .reduce((entry, plugin, i) => {
+        entry.push(context(plugin.key)(plugin.props));
         return entry;
       }, []);
   }
@@ -74,5 +85,5 @@ function importer () {
   return init();
 }
 
-export default importer();
+export default importer;
 

client/coral-framework/index.js

@@ -6,6 +6,11 @@ import * as assetActions from './actions/asset';
 import * as notificationActions from './actions/notification';
 import Slot from './components/Slot';
 
+const context = require.context('plugins', true, /\.\/(.*)\/client\/actions.js$/);
+const pluginsActions = context
+  .keys()
+  .reduce(entry, key => entry[key] = context(key), {});
+
 export {
   pym,
   Slot,
@@ -13,5 +18,6 @@ export {
   store,
   authActions,
   assetActions,
-  notificationActions
+  notificationActions,
+  pluginsActions
 };