Jekyll Initial Commit

2026-07-11 18:03:34 +08:00 · 2017-05-24 16:48:00 -04:00
parent a1a78334ea
commit 69b19d2c91
110 changed files with 13644 additions and 0 deletions
@@ -0,0 +1,102 @@
+# Experimental plugins
+
+Talk plugins are, in essence, small programs that hook into the core application in a variety of ways. Ultimately, this code can do anything that javascript is capable of. In addition, plugins can import any core code to hook into talk at any level.
+
+If you want to write plugins that integrate with core code beyond the api described in [PLUGINS.md](PLUGINS.md), please keep the following things in mind:
+
+* core code may change and break your plugin
+* you may introduce inefficiencies with your plugin that could hurt performance/crash Talk
+* you may cause bugs in other areas of Talk
+
+If you'd like to build a supported plugin but don't have the hooks you need, please file an issue on this repo and we can discuss deepening the supported plugin api!
+
+With that said, here's some of the prime experimental integration points:
+
+## Reducers and Actions : Redux
+
+Talk is powered by Redux and our plugins can too! Our plugins can have their own reducers and actions.
+
+```js
+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.
+
+```js
+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);
+```
+
+## 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`
+```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 `
+```json
+{
+  "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"
+  ]
+}
+````