feat(): add extend option

michael-ciniawsky · michael-ciniawsky · commit e870b4d43466 · 2016-05-24T18:34:16.000+02:00
diff --git a/README.md b/README.md
@@ -1,18 +1,20 @@
-# PostHTML
-View Engine for ExpressJS
+# [PostHTML](https://github.com/posthtml/posthtml)
+View Engine for [ExpressJS](expressjs.com)
+
+[PostHTML Plugins Catalog](https://maltsev.github.io/posthtml-plugins/)
 
 # Install
 
-```
+```bash
 (sudo) npm i -S express
 (sudo) npm i -S express-posthtml
 ```
 
 # Usage
 ## Engine
-Register PostHML as ExpressJS View Engine
+Register PostHTML as ExpressJS View Engine
 
-```
+```javascript
 app.engine('html', require('express-posthtml'))
 
 app.set('views', /* Path to views */)
@@ -21,22 +23,41 @@ app.set('view engine', 'html')
 
 ## Plugins
 ### Global
-All Views will be render with the same plugin setup
+All Views will be render with the same plugin setup.
 
-```
+```javascript
 app.set('view options', [ PostHTML Plugins ])
 ```
 
+```javascript
+res.render('file')
+```
+
 ### Local
-View specific plugin setup to add plugins separately as needed.
+View specific setup adding plugins separately as needed.
 
+```javascript
+app.set('view options', [])
 ```
-res.render('file', {plugins: [ PostHTML Plugins ]})
+
+```javascript
+res.render('file', { plugins: [ PostHTML Plugins ] })
 ```
 
-# Example
+### Extend
+If views share common plugins (e.g [BEM](https://github.com/rajdee/posthtml-bem)), but view specific additions are necessary, use the extend option. This 'extends' the global setup with the local plugins as specified in the respective route.
 
+```javascript
+app.set('view options', [ PostHTML Global Plugins ])
 ```
+
+```javascript
+res.render('file', { plugins: [ PostHTML Local Plugins ], extend: true, })
+```
+
+# Example
+
+```javascript
 var express = require('express')
 
 var app = express()
@@ -47,12 +68,20 @@ app.engine('html', require('express-posthtml'))
 // Settings
 app.set('views', /* Path to views */)
 app.set('view engine', 'html')
-app.set('view options', [/* PostHTML Plugins */]) // Global
-
+app.set('view options', [/* PostHTML Plugins */]) // Global Setup
 
+// Global Use
 app.get('/', (req, res) => {
-    res.render('index', { plugins: [/* PostHTML Plugins */] } ) // Local
+  res.render('file')
+  })
+// Local
+app.get('/local', (req, res) => {
+    res.render('file', { plugins: [/* PostHTML Plugins */] } )
   })
+// Extend
+app.get('/extend', (req, res) => {
+    res.render('file', { plugins: [/* PostHTML Plugins */], extend: true } )
+  })  
 
 app.listen(3000, () => {
     console.log('Server started!')
diff --git a/index.js b/index.js
@@ -2,16 +2,21 @@ var fs = require('fs')
 var posthtml = require('posthtml')
 
 module.exports = function (path, options, cb) {
+  options.extend = options.extend || false
+
   var plugins
 
-  if (!options.plugins) {
+  if (!options.plugins && options.extend === false) {
     plugins = options.settings['view options'] || []
+  } else if (options.extend === true) {
+    plugins = options.plugins.concat(options.settings['view options'])
   } else {
     plugins = options.plugins || []
   }
 
   fs.readFile(path, function (err, content) {
     if (err) return cb(new Error(err))
+
     posthtml(plugins)
       .process(content.toString())
       .then((result) => {
diff --git a/test/bem.html b/test/bem.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>BEM</title>
+</head>
+
+<body>
+
+  <div block="block">
+    <h1>Block</h1>
+    <div elem="element">
+      <h2>Element</h2>
+    </div>
+    <div elem="element" mods="modifier">
+      <h2>Element with modifier</h2>
+    </div>
+  </div>
+
+  <div block="block" mods="modifier" each="3">
+    <h1>Block with modifier</h1>
+    <div elem="element">
+      <h2>Element</h2>
+    </div>
+    <div elem="element" mods="modifier">
+      <h2>Element with Modifier</h2>
+    </div>
+  </div>
+
+</body>
+
+</html>
diff --git a/test/include.html b/test/include.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="uft-8">
+  <title>Include</title>
+</head>
+
+<body>
+  <div include="./include/partial.html"></div>
+</body>
+
+</html>
diff --git a/test/include/partial.html b/test/include/partial.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="uft-8">
+  <title>Document</title>
+</head>
+
+<body>
+
+</body>
+
+</html>
diff --git a/test/server.js b/test/server.js
@@ -3,18 +3,30 @@ var express = require('express')
 var app = express()
 
 var bem = require('posthtml-bem')
+var each = require('posthtml-each')
 
 app.engine('html', require('../index'))
 
-app.set('views', '/')
+app.set('views', __dirname)
 app.set('view engine', 'html')
-app.set('view options', [bem()])
+app.set('view options', [ bem() ])
 
 app.get('/', (req, res) => {
-  res.render('index')
+  res.render('bem')
 })
+
 app.get('/local', (req, res) => {
-  res.render('index', { plugins: [bem()] })
+  res.render('bem', { plugins: [
+    bem({
+      elemPrefix: '__',
+      modPrefix: '--',
+      modDlmtr: '-'
+    })
+  ]})
+})
+
+app.get('/extend', (req, res) => {
+  res.render('bem', { extend: true, plugins: [ each() ] })
 })
 
 app.listen(3000)
