Addiing Stable API Architecture

client/.eslintrc.json

@@ -4,21 +4,20 @@
         "es6": true,
         "mocha": true
     },
-    "extends": "../.eslintrc.json",
     "parserOptions": {
+        "sourceType": "module",
         "ecmaFeatures": {
             "experimentalObjectRestSpread": true,
             "jsx": true
-        },
-        "sourceType": "module"
+        }
     },
     "parser": "babel-eslint",
     "plugins": [
         "react"
     ],
     "rules": {
-      "react/jsx-uses-react": "error",
-      "react/jsx-uses-vars": "error",
-      "no-console": ["warn", { "allow": ["warn", "error"] }]
+        "react/jsx-uses-react": "error",
+        "react/jsx-uses-vars": "error",
+        "no-console": ["warn", { "allow": ["warn", "error"] }]
     }
 }

client/coral-framework/components/index.js

@@ -0,0 +1 @@
+export {default as Slot} from './Slot';

client/coral-framework/helpers/camelize.js

@@ -0,0 +1,16 @@
+const regExp = /[-\s]+(.)?/g;
+
+/**
+ * Convert dash separated strings to camel case.
+ *
+ * @param {String} str
+ * @return {String}
+ */
+
+export default function camelize(str) {
+  return str.replace(regExp, toUpper);
+}
+
+function toUpper(match, c) {
+  return c ? c.toUpperCase() : '';
+}

client/coral-plugin-api/index.js

@@ -1 +0,0 @@
-export {withReaction} from '../coral-framework/hocs';

plugin-api/.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"
+  ]
+}

plugin-api/.eslintrc.json

@@ -0,0 +1,23 @@
+{
+    "env": {
+        "browser": true,
+        "es6": true,
+        "mocha": true
+    },
+    "parserOptions": {
+        "sourceType": "module",
+        "ecmaFeatures": {
+            "experimentalObjectRestSpread": true,
+            "jsx": true
+        }
+    },
+    "parser": "babel-eslint",
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+        "react/jsx-uses-react": "error",
+        "react/jsx-uses-vars": "error",
+        "no-console": ["warn", { "allow": ["warn", "error"] }]
+    }
+}

plugin-api/alpha/client/actions/index.js

@@ -0,0 +1,2 @@
+export {addTag, removeTag} from 'coral-plugin-commentbox/actions';
+export {addCommentClassName, removeCommentClassName} from 'coral-embed-stream/src/actions/comment';

plugin-api/client/components/index.js

@@ -0,0 +1 @@
+export {Slot} from 'coral-framework/components';

plugin-api/client/hocs/index.js

@@ -0,0 +1 @@
+export {withReaction} from 'coral-framework/hocs';

plugins/coral-plugin-offtopic/client/containers/OffTopicCheckbox.js

@@ -1,6 +1,6 @@
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
-import {addTag, removeTag} from 'coral-plugin-commentbox/actions';
+import {addTag, removeTag} from 'plugin-api/alpha/client/actions';
 import OffTopicCheckbox from '../components/OffTopicCheckbox';
 
 const mapStateToProps = ({commentBox}) => ({commentBox});

plugins/coral-plugin-offtopic/client/containers/OffTopicFilter.js

@@ -1,14 +1,16 @@
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import {toggleCheckbox} from '../actions';
+import OffTopicFilter from '../components/OffTopicFilter';
+import {
+  closeViewingOptions
+} from 'plugins/coral-plugin-viewing-options/client/actions';
 import {
   addCommentClassName,
   removeCommentClassName
-} from 'coral-embed-stream/src/actions/comment';
-import OffTopicFilter from '../components/OffTopicFilter';
-import {closeViewingOptions} from 'plugins/coral-plugin-viewing-options/client/actions';
+} from 'plugin-api/alpha/client/actions';
 
-const mapStateToProps = ({comment, ['coral-plugin-offtopic'] : offTopic}) => ({
+const mapStateToProps = ({comment, ['coral-plugin-offtopic']: offTopic}) => ({
   commentClassNames: comment.commentClassNames,
   checked: offTopic.checked
 });

plugins/coral-plugin-viewing-options/client/components/ViewingOptions.js

@@ -2,7 +2,7 @@ import React from 'react';
 import cn from 'classnames';
 import {Icon} from 'coral-ui';
 import styles from './ViewingOptions.css';
-import Slot from 'coral-framework/components/Slot';
+import {Slot} from 'plugin-api/client/components';
 
 const ViewingOptions = (props) => {
   const toggleOpen = () => {

webpack.config.js

@@ -154,6 +154,7 @@ const config = {
   },
   resolve: {
     alias: {
+      'plugin-api': path.resolve(__dirname, 'plugin-api/'),
       plugins: path.resolve(__dirname, 'plugins/'),
       pluginsConfig: pluginsConfigPath
     },