Plugin now support statefull components

.eslintrc.json

@@ -4,6 +4,7 @@
         "node": true
     },
     "extends": "eslint:recommended",
+    "parser": "babel-eslint",
     "parserOptions": {
         "ecmaVersion": 2017,
         "sourceType": "module",

client/coral-framework/helpers/plugins.js

@@ -1,4 +1,5 @@
 import {client as clientPlugins} from 'pluginsConfig';
+import React from 'react';
 
 function injectPlugins ({fill, ...props}) {
   let context,
@@ -67,11 +68,13 @@ function injectPlugins ({fill, ...props}) {
       .map(addProps)
       .filter(filterBySlot)
       .reduce((entry, plugin, i) => {
-        // const element = React.cloneElement(
-        //   context(plugin.key),
-        //   {...plugin.props, key: i}
-        // );
-        entry = [...entry, context(plugin.key)({...plugin.props, key: i})];
+        const component = context(plugin.key);
+        const element = React.createElement(component, {
+          key: i,
+          ...plugin.props
+        }, null);
+
+        entry = [...entry, element];
         return entry;
       }, []);
   }

client/coral-framework/utils/index.js

@@ -1,2 +1,2 @@
 export const getActionSummary = (type, comment) => comment.action_summaries
-  .filter((a) => a.__typename === type)[0];
+  .filter((a) => a.__typename === type)[0];

plugins.json

@@ -3,6 +3,7 @@
     "coral-plugin-respect"
   ],
   "client": [
-    "coral-plugin-respect"
+    "coral-plugin-respect",
+    "coral-plugin-love"
   ]
 }

plugins/coral-plugin-love/client/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "es2015"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties",
+    "transform-decorators-legacy",
+    "transform-object-assign",
+    "transform-object-rest-spread",
+    "transform-async-to-generator",
+    "transform-react-jsx"
+  ]
+}

plugins/coral-plugin-love/client/config.json

@@ -0,0 +1,4 @@
+{
+  "name": "Coral Plugin Love",
+  "slot": "Comment.Detail"
+}

plugins/coral-plugin-love/client/index.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default () => {
+  return (
+    <div>Love</div>
+  );
+};

plugins/coral-plugin-respect/client/.babelrc

@@ -11,4 +11,4 @@
     "transform-async-to-generator",
     "transform-react-jsx"
   ]
-}
+}

plugins/coral-plugin-respect/client/index.js

@@ -4,27 +4,36 @@ import Icon from './components/Icon';
 
 import {getActionSummary} from 'coral-framework/utils';
 
-export default (props) => {
-  const {comment} = props.context;
+class RespectButton extends React.Component {
+  constructor(props) {
+    super(props);
+  }
 
-  const handleClick = () => {
-    props.context.postRespect({
+  handleClick = () => {
+    const {comment} = this.props.context;
+
+    this.props.context.postRespect({
       item_id: comment.id,
       item_type: 'COMMENTS'
     });
-  };
+  }
+  
+  render() {
+    const {comment} = this.props.context;
+    const respectActionSummary = getActionSummary('RespectActionSummary', comment);
 
-  const respectActionSummary = getActionSummary('RespectActionSummary', comment);
+    return (
+      <div className={styles.Respect}>
+        <button
+          onClick={this.handleClick}>
+          Respect
+          <Icon />
+          {respectActionSummary ? <span>{respectActionSummary.count}</span> : null}
+        </button>
+      </div>
+    );
+  }
+}
 
-  return (
-    <div className={styles.Respect} key={props.key}>
-      <button
-        onClick={handleClick}>
-        Respect
-        <Icon />
-        {respectActionSummary ? <span>{respectActionSummary.count}</span> : null}
-      </button>
-    </div>
-  );
-};
+export default RespectButton;