Importer, Slots and suport for multiple plugins and props!

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

@@ -20,6 +20,7 @@ import LikeButton from 'coral-plugin-likes/LikeButton';
 import {BestButton, IfUserCanModifyBest, BEST_TAG, commentIsBest, BestIndicator} from 'coral-plugin-best/BestButton';
 import LoadMore from 'coral-embed-stream/src/LoadMore';
 import Pluggable from './Pluggable';
+import {Slot} from 'coral-framework';
 
 import styles from './Comment.css';
 
@@ -148,16 +149,20 @@ class Comment extends React.Component {
         id={`c_${comment.id}`}
         style={{marginLeft: depth * 30}}>
         <hr aria-hidden={true} />
-        <AuthorName
-          author={comment.user}/>
-        { isStaff(comment.tags)
-          ? <TagLabel>Staff</TagLabel>
-          : null }
 
-        { commentIsBest(comment)
-          ? <TagLabel><BestIndicator /></TagLabel>
-          : null }
-        <PubDate created_at={comment.created_at} />
+        <div id="Comment.InfoBar">
+          <AuthorName
+            author={comment.user}/>
+          { isStaff(comment.tags)
+            ? <TagLabel>Staff</TagLabel>
+            : null }
+
+          { commentIsBest(comment)
+            ? <TagLabel><BestIndicator /></TagLabel>
+            : null }
+          <PubDate created_at={comment.created_at} />
+          <Slot fill="Comment.InfoBar" />
+        </div>
 
         <Content body={comment.body} />
           <div className="commentActionsLeft comment__action-container">

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

@@ -4,7 +4,11 @@ import injectedPlugins from 'coral-framework/helpers/importer';
 export default function pluginContainer () {
   return (
     <div>
-      {Object.keys(injectedPlugins).map((component, i) => injectedPlugins[component]({key: i}))}
+      {
+        Object.keys(injectedPlugins).map((component, i) => {
+          return injectedPlugins[component]({key: i});
+        })
+      }
     </div>
-  )
-};
+  );
+}

client/coral-framework/components/Slot.js

@@ -0,0 +1,15 @@
+import React, {Component} from 'react';
+
+// { "slot": "Comment.DetailArea"},
+
+class Slot extends Component {
+  render() {
+    return (
+      <div>
+        This is a slot
+      </div>
+    );
+  }
+}
+
+export default Slot;

client/coral-framework/helpers/importer.js

@@ -1,12 +1,78 @@
+import {client as clientPlugins} from 'pluginsConfig';
+
 function importer () {
-  const context = require.context("../../../plugins", true, /\.\/(.*)\/client\/index.js$/);
-  let res = {};
+  let context,
+    importedFiles;
 
-  context.keys().forEach(function (key) {
-    res[key] = context(key)
-  });
+  function buildContext() {
 
-  return res;
+    /**
+     *  buildContext creates the context for the plugins
+     *  require.context(<path>, true, <regexp>
+     *    path: The path where the importer builds the context. 'plugins' is allowed as path because it's an alias
+     *    regxp: A Regular Expression to match the files that the importer needs. i.e (index.js, config.json)
+     *  data such as path and regexp cannot be passed as arguments or variables
+     */
+    context = require.context('plugins', true, /\.\/(.*)\/client\/(index|config).(js|json)$/);
+    return importedFiles = context
+      .keys()
+      .map(key => shapeData(key));
+  }
+
+  function shapeData(test) {
+
+    /**
+     *  shapeData shapes each item in the plugins array with useful data
+     *  returns an Object with the name of the plugin, the format, and it's key(filename)
+     */
+    const match = test.match(/\.\/(.*)\/client\/.*.(json|js)$/);
+    return {
+      name: match[1],
+      format: match[2],
+      key: match[0]
+    };
+  }
+
+  function getConfig (name) {
+
+    /**
+     *  getConfig finds a the config file for each plugin
+     *  returns the config.json as an object to be passed as props to the plugin
+     */
+    return importedFiles
+      .filter(key => key.format === 'json' && key.name === name)
+      .reduce((acc, plugin) => {
+        return context(plugin.key);
+      }, {});
+  }
+
+  function filterByUserConfig (list) {
+
+    /**
+     *  filterByUserConfig will filter the imported files and will only keep the allowed plugins
+     */
+    return list
+      .filter(plugin => clientPlugins.indexOf(plugin.name) > -1);
+  }
+
+  function init() {
+
+    /**
+     *  init will build the context and
+     *  returns a map with each plugin and its instance
+     */
+    buildContext();
+
+    return filterByUserConfig(importedFiles)
+      .filter(key => key.format === 'js')
+      .reduce((entry, plugin) => {
+        entry[plugin.name] = () => context(plugin.key)(getConfig(plugin.name));
+        return entry;
+      }, {});
+  }
+
+  return init();
 }
 
-export default importer();
+export default importer();
+

client/coral-framework/index.js

@@ -4,9 +4,11 @@ import I18n from './modules/i18n/i18n';
 import * as authActions from './actions/auth';
 import * as assetActions from './actions/asset';
 import * as notificationActions from './actions/notification';
+import Slot from './components/Slot';
 
 export {
   pym,
+  Slot,
   I18n,
   store,
   authActions,

webpack.config.js

@@ -4,8 +4,7 @@ const precss = require('precss');
 const Copy = require('copy-webpack-plugin');
 const LicenseWebpackPlugin = require('license-webpack-plugin');
 const webpack = require('webpack');
-// const plugins = require('./plugins.json');
-// 'plugins': plugins.client.map(name => path.join(__dirname, `plugins/${name}/index`))
+
 // Edit the build targets and embeds below.
 
 const buildTargets = [
@@ -18,7 +17,7 @@ const buildEmbeds = [
 ];
 
 module.exports = {
-  devtool: '#cheap-module-source-map',
+  devtool: 'cheap-module-source-map',
   entry: Object.assign({}, {
     'embed': [
       'babel-polyfill',
@@ -59,8 +58,7 @@ module.exports = {
         exclude: /node_modules/,
         test: /\.js$/,
         query: {
-          cacheDirectory: true,
-          sourceMap: true
+          cacheDirectory: true
         }
       },
       {
@@ -124,10 +122,10 @@ module.exports = {
   resolve: {
     alias: {
       plugins: path.resolve(__dirname, 'plugins/'),
+      pluginsConfig: path.resolve(__dirname, 'plugins.json')
     },
     modules: [
       path.resolve(__dirname, 'client'),
-      path.resolve(__dirname, 'plugins'),
       ...buildTargets.map(target => path.join(__dirname, 'client', target, 'src')),
       ...buildEmbeds.map(embed => path.join(__dirname, 'client', `coral-embed-${embed}`, 'src')),
       'node_modules'