Stable version

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

@@ -19,7 +19,6 @@ import FlagComment from 'coral-plugin-flags/FlagComment';
 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';
@@ -193,8 +192,8 @@ class Comment extends React.Component {
                   removeBest={removeBestTag} />
               </IfUserCanModifyBest>
             </ActionButton>
+            <Slot fill="Comment.Detail" />
           </div>
-          <Pluggable/>
         <div className="commentActionsRight comment__action-container">
           <ActionButton>
             <PermalinkButton articleURL={asset.url} commentId={comment.id} />

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

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

client/coral-framework/components/Slot.js

@@ -1,12 +1,15 @@
 import React, {Component} from 'react';
-
-// { "slot": "Comment.DetailArea"},
+import injectedPlugins from 'coral-framework/helpers/importer';
 
 class Slot extends Component {
+  componentDidMount() {
+    console.log('Slot Mounted');
+  }
   render() {
+    const {slot} = this.props;
     return (
       <div>
-        This is a slot
+        {injectedPlugins}
       </div>
     );
   }

client/coral-framework/helpers/importer.js

@@ -1,6 +1,6 @@
 import {client as clientPlugins} from 'pluginsConfig';
 
-function importer () {
+function importer (slot) {
   let context,
     importedFiles;
 
@@ -66,9 +66,9 @@ function importer () {
     return filterByUserConfig(importedFiles)
       .filter(key => key.format === 'js')
       .reduce((entry, plugin) => {
-        entry[plugin.name] = () => context(plugin.key)(getConfig(plugin.name));
+        entry.push(context(plugin.key)(getConfig(plugin.name)))
         return entry;
-      }, {});
+      }, []);
   }
 
   return init();