Merge pull request #61 from posthtml/fix-locals-content

parse options locals in <content>

index.js

@@ -3,9 +3,9 @@
 const fs = require('fs');
 const path = require('path');
 const isJSON = require('is-json');
-const {merge} = require('lodash');
 const posthtml = require('posthtml');
 const render = require('posthtml-render');
+const {merge, isEmpty} = require('lodash');
 const match = require('posthtml-match-helper');
 const expressions = require('posthtml-expressions');
 
@@ -18,7 +18,7 @@ const expressions = require('posthtml-expressions');
 function processNodeContentWithPosthtml(node, options) {
   return function (content) {
     return processWithPostHtml(options.plugins, path.join(path.dirname(options.from), node.attrs[options.attribute]), content, [
-      parseLocals(node.attrs.locals, options.locals)
+      parseLocals(options.locals, node.attrs.locals)
     ]);
   };
 }
@@ -28,13 +28,13 @@ function processNodeContentWithPosthtml(node, options) {
  * @param   {String}    locals  [string to parse as locals object]
  * @return  {Function}          [Function containing evaluated locals, or empty object]
  */
-function parseLocals(attributeLocals = {}, optionLocals = {}) {
+function parseLocals(optionLocals, attributeLocals) {
   try {
     const locals = merge(optionLocals, JSON.parse(attributeLocals));
 
     return expressions({locals});
   } catch {
-    return () => {};
+    return expressions({locals: optionLocals});
   }
 }
 
@@ -77,7 +77,11 @@ function parse(options) {
                 node.attrs &&
                 isJSON(node.attrs.locals)
               ) {
-                return parseLocals(node.attrs.locals, options.locals)(node.content);
+                return parseLocals(options.locals, node.attrs.locals)(node.content);
+              }
+
+              if (!isEmpty(options.locals)) {
+                return parseLocals(options.locals)(node.content);
               }
 
               return node.content || '';

test/test.js

@@ -97,7 +97,7 @@ test('Must parse locals if locals prop is passed and it contains a valid JSON st
 
 test('Must not parse locals if locals prop is passed but is not a valid JSON string', async t => {
   const actual = `<div class="test"><module href="./test/locals.spec.html" locals="test">Test</module></div>`;
-  const expected = `<div class="test"><button type="button">foo is: {{ foo }} - Test</button></div>`;
+  const expected = `<div class="test"><button type="button">foo is: undefined - Test</button></div>`;
 
   const html = await posthtml().use(plugin()).process(actual).then(result => clean(result.html));
 
@@ -106,7 +106,7 @@ test('Must not parse locals if locals prop is passed but is not a valid JSON str
 
 test('Must not try to parse locals if locals prop is missing', async t => {
   const actual = `<div class="test"><module href="./test/locals.spec.html">Test</module></div>`;
-  const expected = `<div class="test"><button type="button">foo is: {{ foo }} - Test</button></div>`;
+  const expected = `<div class="test"><button type="button">foo is: undefined - Test</button></div>`;
 
   const html = await posthtml().use(plugin()).process(actual).then(result => clean(result.html));
 
@@ -115,7 +115,7 @@ test('Must not try to parse locals if locals prop is missing', async t => {
 
 test('Must not parse locals if locals prop is passed but is empty', async t => {
   const actual = `<div class="test"><module href="./test/locals.spec.html" locals="">Test</module></div>`;
-  const expected = `<div class="test"><button type="button">foo is: {{ foo }} - Test</button></div>`;
+  const expected = `<div class="test"><button type="button">foo is: undefined - Test</button></div>`;
 
   const html = await posthtml().use(plugin()).process(actual).then(result => clean(result.html));
 
@@ -140,16 +140,25 @@ test('Must use custom attribute name if it was provided in options', async t =>
   t.is(html, expected);
 });
 
-test('Must parse locals passed to <content>', async t => {
-  const actual = `<div class="test"><module href="./test/locals.spec.html" locals='{"foo": "bar"}'>{{ foo }}</module></div>`;
-  const expected = `<div class="test"><button type="button">foo is: bar - bar</button></div>`;
+test('Must parse attribute locals passed to <content>', async t => {
+  const actual = `<module href="./test/locals.option.spec.html" locals='{"inlineFoo": "bar"}'>{{ optionFoo }}</module>`;
+  const expected = `<div>    Locals attribute: bar    Locals option: undefined    undefined</div>`;
 
   const html = await posthtml().use(plugin()).process(actual).then(result => clean(result.html));
 
   t.is(html, expected);
 });
 
-test('Must parse locals passed as option', async t => {
+test('Must parse options locals passed to <content>', async t => {
+  const actual = `<module href="./test/locals.option.spec.html">{{ optionFoo }}</module>`;
+  const expected = `<div>    Locals attribute: undefined    Locals option: optionBar    optionBar</div>`;
+
+  const html = await posthtml().use(plugin({locals: {optionFoo: 'optionBar'}})).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+});
+
+test('Must parse all locals', async t => {
   const actual = `<module href="./test/locals.option.spec.html" locals='{"inlineFoo": "inlineBar"}'>{{ optionFoo }}</module>`;
   const expected = `<div>    Locals attribute: inlineBar    Locals option: optionBar    optionBar</div>`;