Release.

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>
  );

src/Plugin/Block/RecentCommentsBlock.php

@@ -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',
  ],
  ],
  ];