diff --git a/README.md b/README.md index 302e784..e604c5f 100644 --- a/README.md +++ b/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) \ No newline at end of file diff --git a/drupal_block_reactive.info.yml b/drupal_block_reactive.info.yml index 58b0c95..6349d18 100644 --- a/drupal_block_reactive.info.yml +++ b/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' diff --git a/drupal_block_reactive.libraries.yml b/drupal_block_reactive.libraries.yml index 22d9b87..f3296ff 100644 --- a/drupal_block_reactive.libraries.yml +++ b/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: {} diff --git a/js/dist/index.js b/js/dist/index.js index d4ef4c5..9eefa3f 100644 --- a/js/dist/index.js +++ b/js/dist/index.js @@ -15,7 +15,7 @@ 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); @@ -23,6 +23,8 @@ Drupal.behaviors.drupal_block_reactive = { 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,7 +86,7 @@ Drupal.behaviors.drupal_block_reactive = { var commentsNodes = this._getComments(); return React.createElement( 'div', - { className: 'comments' }, + { className: 'CommentBox' }, commentsNodes ); } @@ -93,8 +94,7 @@ Drupal.behaviors.drupal_block_reactive = { 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, diff --git a/js/package.json b/js/package.json index 9e23dca..d2269fc 100644 --- a/js/package.json +++ b/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" } } diff --git a/js/src/index.jsx b/js/src/index.jsx index 3270d4b..42a84e4 100644 --- a/js/src/index.jsx +++ b/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 ( -
+
{commentsNodes}
); } } - - // Comment component definition. + // Comment component. class Comment extends React.Component { render() { return ( -
+
{this.props.subject} | {this.props.changed}
); diff --git a/screenshot.gif b/screenshot.gif new file mode 100644 index 0000000..cbfc5fc Binary files /dev/null and b/screenshot.gif differ diff --git a/src/Plugin/Block/RecentCommentsBlock.php b/src/Plugin/Block/RecentCommentsBlock.php index 8568029..0a0414f 100644 --- a/src/Plugin/Block/RecentCommentsBlock.php +++ b/src/Plugin/Block/RecentCommentsBlock.php @@ -23,8 +23,8 @@ public function build() { '#markup' => '
', '#attached' => [ 'library' => [ - 'drupal_block_reactive/recent-comments-reactive.reactjs', - 'drupal_block_reactive/recent-comments-reactive.component', + 'drupal_block_reactive/reactjs', + 'drupal_block_reactive/component', ], ], ];