First draft of plugins working :)

.eslintrc.json

@@ -5,8 +5,16 @@
     },
     "extends": "eslint:recommended",
     "parserOptions": {
-        "ecmaVersion": 2017
+        "ecmaVersion": 2017,
+        "sourceType": "module",
+        "ecmaFeatures": {
+            "jsx": true,
+            "experimentalObjectRestSpread": true
+        }
     },
+    "plugins": [
+        "react"
+    ],
     "rules": {
         "indent": ["error",
             2
@@ -53,6 +61,8 @@
         }],
         "newline-per-chained-call": ["error", {
             "ignoreChainWithDepth": 2
-        }]
+        }],
+        "react/jsx-uses-react": "error",
+        "react/jsx-uses-vars": "error"
     }
 }

client/.babelrc

@@ -2,6 +2,8 @@
   "extends": "../.babelrc",
   "plugins": [
     "transform-async-to-generator",
-    "syntax-dynamic-import"
+    "syntax-dynamic-import",
+    "transform-regenerator",
+    "transform-runtime"
   ]
 }

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

@@ -19,6 +19,7 @@ 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 styles from './Comment.css';
 
@@ -168,7 +169,6 @@ class Comment extends React.Component {
                 deleteAction={deleteAction}
                 showSignInDialog={showSignInDialog}
                 currentUser={currentUser} />
-
             </ActionButton>
             {
               !disableReply &&
@@ -189,6 +189,7 @@ class Comment extends React.Component {
               </IfUserCanModifyBest>
             </ActionButton>
           </div>
+          <Pluggable/>
         <div className="commentActionsRight comment__action-container">
           <ActionButton>
             <PermalinkButton articleURL={asset.url} commentId={comment.id} />

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import * as Plugins from 'plugins';
+
+export default () => <div>{Object.keys(Plugins).map((component, i) => Plugins[component]({key: i}))}</div>;

package.json

@@ -100,12 +100,14 @@
     "babel-jest": "^15.0.0",
     "babel-loader": "^6.4.1",
     "babel-plugin-add-module-exports": "^0.2.1",
-    "babel-plugin-transform-async-to-generator": "^6.16.0",
+    "babel-plugin-transform-async-to-generator": "^6.22.0",
     "babel-plugin-transform-class-properties": "^6.18.0",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-object-assign": "^6.8.0",
     "babel-plugin-transform-object-rest-spread": "^6.16.0",
     "babel-plugin-transform-react-jsx": "^6.8.0",
+    "babel-plugin-transform-regenerator": "^6.22.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
     "babel-polyfill": "^6.16.0",
     "babel-preset-es2015": "^6.24.0",
     "babel-preset-stage-0": "^6.16.0",

webpack.config.js

@@ -121,8 +121,12 @@ module.exports = {
     })
   ],
   resolve: {
+    alias: {
+      plugins: path.resolve(__dirname, 'plugins/index.js'),
+    },
     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'