Release.

Author: kalinchernev

README.md

@@ -1,3 +1,36 @@
-# Drupal Block React
-Combining goodies of Drupal 8, Blocks and React.
-This one should be really minimal.
+# Drupal Block Reactive (codename Hipster)
+
+[Drupal 8](https://www.drupal.org/8) module creates a block with recent comments. Displayed dynamically using [React.js](https://facebook.github.io/react/).
+
+[ES2015 (ES6)](https://babeljs.io/docs/learn-es2015/) is used via Babel and npm scripts.
+
+The goal is to be as simple as possible: minimum dependencies, tools and steps to actually write ES6 code that works. This way, the code can be easily modified and played with for other purposes without too much hassle.
+
+## Requirements
+- [node.js](https://nodejs.org/en/download/) for using npm, not for API
+- npm for package management)
+- working [Drupal 8](https://www.drupal.org/project/drupal) project
+- command line obviously
+
+## Installation
+1. Go to the /modules folder in your Drupal 8 project (normally /modules from project root)
+2. Clone this repository
+3. Go to /js folder inside the cloned folder
+4. Run `npm install` to download dependencies
+5. Enable the Drupal module by `drush pm-enable drupal_block_reactive` or [via the UI](https://www.drupal.org/documentation/install/modules-themes/modules-8)
+6. Import example Views export configuration from the module. (/config/install, will be automatic later) 
+7. Go to the block management page '/admin/structure/block' and find/place the custom module 'Recent comments (reactive)'
+8. Go to the page where you placed the block and you should see 'No comments.' message in a block.
+
+Now, play with the reactivity by splitting the window into 2 and posting a comment from one to the other. The expected modern behavior :)
+
+## Demo
+
+![ScreenShot](https://raw.github.com/kalinchernev/drupal_block_reactive/master/screenshot.gif)
+
+## Credits
+Inspirations from places:
+
+- [Drupal React Block](https://github.com/blackwood/drupal-react_blocks) (same idea for Drupal 7)
+- [React.js tutorial](https://facebook.github.io/react/docs/tutorial.html)
+- [Powering Up With React](https://www.codeschool.com/courses/powering-up-with-react)

drupal_block_reactive.info.yml

@@ -1,6 +1,6 @@
 name: Recent comments (React)
 type: module
-description: 'Showing latest comments in a reactive way.'
+description: 'Latest comments block with React.js'
 package: Development
 version: '8.x-1.x-dev'
 core: '8.x'

drupal_block_reactive.libraries.yml

@@ -1,4 +1,4 @@
-recent-comments-reactive.reactjs:
+reactjs:
   remote: https://github.com/facebook/react
   version: 15.1.0
   license:
@@ -10,7 +10,7 @@ recent-comments-reactive.reactjs:
     //cdn.jsdelivr.net/react/15.1.0/react.js: { type: external, minified: false }
     //cdn.jsdelivr.net/react/15.1.0/react-dom.js: { type: external, minified: false }
 
-recent-comments-reactive.component:
+component:
   version: VERSION
   js:
     js/dist/index.js: {}

js/dist/index.js

@@ -15,14 +15,16 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
 Drupal.behaviors.drupal_block_reactive = {
   attach: function attach(context) {
-    // CommentBox component definition.
+    // CommentBox component.
 
     var CommentBox = function (_React$Component) {
       _inherits(CommentBox, _React$Component);
 
       function CommentBox() {
         _classCallCheck(this, CommentBox);
 
+        // Setting initial state.
+
         var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(CommentBox).call(this));
 
         _this.state = {
@@ -49,7 +51,6 @@ Drupal.behaviors.drupal_block_reactive = {
             }
           });
         }
-
         // Gets data from state, returns a list components.
 
       }, {
@@ -85,16 +86,15 @@ Drupal.behaviors.drupal_block_reactive = {
           var commentsNodes = this._getComments();
           return React.createElement(
             'div',
-            { className: 'comments' },
+            { className: 'CommentBox' },
             commentsNodes
           );
         }
       }]);
 
       return CommentBox;
     }(React.Component);
-
-    // Comment component definition.
+    // Comment component.
 
 
     var Comment = function (_React$Component2) {
@@ -111,7 +111,7 @@ Drupal.behaviors.drupal_block_reactive = {
         value: function render() {
           return React.createElement(
             'div',
-            { className: 'comment' },
+            { className: 'Comment' },
             React.createElement(
               'span',
               null,

js/package.json

@@ -1,17 +1,30 @@
 {
   "name": "drupal-block-reactive",
   "version": "1.0.0",
-  "description": "JS things in Drupal things",
+  "description": "A drop of reactivity in Drupal 8",
   "main": "index.js",
+  "private": true,
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "./node_modules/babel-cli/bin/babel.js --presets es2015,react --watch src/ --out-dir dist"
+    "clean": "rm -rf dist",
+    "build": "npm run clean && npm run transpile",
+    "dev": "./node_modules/babel-cli/bin/babel.js --presets es2015,react --watch src/ --out-dir dist",
+    "lint": "eslint src",
+    "transpile": "./node_modules/babel-cli/bin/babel.js --presets es2015,react src/ --out-dir dist"
+  },
+  "author": "Kalin Chernev",
+  "url": "https://github.com/kalinchernev",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kalinchernev/drupal_block_reactive.git"
   },
-  "author": "",
-  "license": "ISC",
   "devDependencies": {
     "babel-cli": "^6.10.1",
     "babel-preset-es2015": "^6.9.0",
-    "babel-preset-react": "^6.5.0"
+    "babel-preset-react": "^6.5.0",
+    "eslint": "^2.12.0",
+    "eslint-config-airbnb": "^9.0.1",
+    "eslint-plugin-import": "^1.8.1",
+    "eslint-plugin-jsx-a11y": "^1.4.2",
+    "eslint-plugin-react": "^5.1.1"
   }
 }

js/src/index.jsx

@@ -5,10 +5,11 @@
 
 Drupal.behaviors.drupal_block_reactive = {
   attach: (context) => {
-    // CommentBox component definition.
+    // CommentBox component.
     class CommentBox extends React.Component {
       constructor() {
         super();
+        // Setting initial state.
         this.state = {
           comments: []
         }
@@ -24,7 +25,6 @@ Drupal.behaviors.drupal_block_reactive = {
           }
         });
       }
-
       // Gets data from state, returns a list components.
       _getComments() {
         // Get the list of comments from the state.
@@ -52,18 +52,17 @@ Drupal.behaviors.drupal_block_reactive = {
       render() {
         const commentsNodes = this._getComments();
         return (
-          <div className="comments">
+          <div className="CommentBox">
             {commentsNodes}
           </div>
         );
       }
     }
-
-    // Comment component definition.
+    // Comment component.
     class Comment extends React.Component {
       render() {
         return (
-          <div className="comment">
+          <div className="Comment">
             <span>{this.props.subject}</span> | <span>{this.props.changed}</span>
           </div>
         );

screenshot.gif

@@ -23,8 +23,8 @@ public function build() {
       '#markup' => '<div id="recent-comments-react"></div>',
       '#attached' => [
         'library' => [
-          'drupal_block_reactive/recent-comments-reactive.reactjs',
-          'drupal_block_reactive/recent-comments-reactive.component',
+          'drupal_block_reactive/reactjs',
+          'drupal_block_reactive/component',
         ],
       ],
     ];