talk/docs/frontend/PLUGINS.md

Plugins

We can build plugins to extend the functionality of Talk. Our plugins are powered by React, Redux and GraphQL. We can also build them with simple vanilla javascript. The plugins live in the /plugins folder. Each plugin must have an index.js file and two folders client and server.

Our plugin folder structure should look like this:

my-plugin/
  ├── client/
  ├── server/
  └── index.js

The Client Folder

The frontend of our plugin lives inside the client folder. The client folder must have an index.js file that exports the configuration of our plugin.

my-plugin/
  ├── client/
  │   └── index.js
  ├── server/
  └── index.js

For now our index.js file should look like this:

export default {
	// We will add more here later.
};

Components

We can add our components within the client folder.

my-plugin/
  ├── client/
  │   ├── MyComponent.js
  │   └── index.js
  ├── server/
  └── index.js

Creating a Component

Our component could look like this:

import React, {Component} from 'react';

class MyButton extends Component {
  render() {
    return <button>My Button</button>;
  }
}

export default MyButton;

We are just creating a component that creates a button. Now that we created our component we need to specify where it should get injected within Talk! To tell Talk where that Component should get injected we need to specify our Slots.

Also, our Component can be a Stateless Component.

import React from 'react';
export default = () => <button>My Button</button>;

Slots

In Talk we have defined specific Slots where we can inject components.

Here is how we specify our slots config in my-plugin/index.js

import MyButton from './MyButton';

export default {
  slots: {
    commentDetail: [MyButton]
  }
};

Here I’m specifying that the MyComponent Component will take place within the commentDetail in Talk.

commentDetail it’s a specific slot in the CommentStream. It means that it will be embedded inside de comment detail.

Slots properties take anArray so we can add as many components as we want.

Reducers and Actions : Redux

Talk is powered by Redux and our plugins can too! Our plugins can have their own reducers and actions.

import MyButton from './MyButton';
import reducer from './reducer';

export default {
  slots: {
    commentDetail: [MyButton],
  },
	reducer
};

Import Actions from Talk

We can easily trigger Talk actions in our plugin Components.

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {addTag, removeTag} from 'coral-plugin-commentbox/actions';

class MyButton extends Component {
  render() {
    return <button onClick={this.props.addTag('MY_TAG')}>My Button</button>;
  }
}

const mapStateToProps = ({commentBox}) => ({commentBox});

const mapDispatchToProps = dispatch =>
  bindActionCreators({addTag, removeTag}, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(OffTopicCheckbox);

Styling our Plugin

Talk uses CSS Modules. This basically means that you can also add your CSS Module to your plugin without colliding with the rest of Talk!

My Component

import styles from './style.css';

class MyCoralButton extends Component {
  render() {
    return <button className={styles.button}>My Button</button>;
  }
}

Our style.css should could look like this.

.button {
	background: coral;
	border-radius: 3px;
}

ESlint and Babel

In talk we use eslint:recommended and Babel with the latest ECMAScript Features. But you can use your own! While building your plugin you need to specify a .eslintrc.json file and a.babelrc file.

.eslintrc.json

{
  "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"] }]
  }
}

. babelrc

{
  "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"
  ]
}

The server folder and the index file

Read more about the /server and how to extend Talk here. talk/PLUGINS.md at master · coralproject/talk · GitHub