Fix and enhance parseLocals

Author: thewebartisan7

readme.md

@@ -111,4 +111,4 @@ See [PostHTML Guidelines](https://github.com/posthtml/posthtml/tree/master/docs)
 
 ## Credits
 
-Thanks to all PostHTML contributors and especially to `posthtml-extends` and `posthtml-modules` contributors, as part of code are ~~stolen~~ borrowed from these plugins.
+Thanks to all PostHTML contributors and especially to `posthtml-extend` and `posthtml-modules` contributors, as part of code are ~~stolen~~ borrowed from these plugins.

src/index.js

@@ -53,7 +53,7 @@ function processNodes(tree, options, messages) {
 
     const html = parseToPostHtml(fs.readFileSync(filePath, options.encoding));
 
-    const {attributes, defaultLocals} = parseLocals(options, node, html);
+    const {attributes, locals} = parseLocals(options, node, html);
 
     options.expressions.locals = attributes;
 
@@ -75,7 +75,7 @@ function processNodes(tree, options, messages) {
       const nodeAttrs = parseAttrs(node.content[index].attrs);
 
       Object.keys(attributes).forEach(attr => {
-        if (typeof defaultLocals[attr] === 'undefined') {
+        if (typeof locals[attr] === 'undefined') {
           if (['class'].includes(attr)) {
             nodeAttrs[attr].push(attributes[attr]);
           } else if (['style'].includes(attr)) {
@@ -109,26 +109,56 @@ function processNodes(tree, options, messages) {
 function parseLocals(options, {attrs}, html) {
   let attributes = {...attrs};
 
+  // Handle attributes to be merged with default
+  //  only for Array or Objects
+  const mergeAttributeWithDefault = [];
+  Object.keys(attributes).forEach(attribute => {
+    if (attribute.startsWith('merge:')) {
+      const newAttributeName = attribute.replace('merge:', '');
+      attributes[newAttributeName] = attributes[attribute];
+      delete attributes[attribute];
+      mergeAttributeWithDefault.push(newAttributeName);
+    }
+  });
+
+  // Parse JSON attributes
   Object.keys(attributes).forEach(attribute => {
     try {
       // Use merge() ?
-      attributes = {...attributes, ...JSON.parse(attributes[attribute])};
+      const parsed = JSON.parse(attributes[attribute]);
+      if (attribute === 'locals') {
+        if (mergeAttributeWithDefault.includes(attribute)) {
+          attributes = merge(attributes, parsed);
+        } else {
+          Object.assign(attributes, parsed);
+        }
+      } else {
+        attributes[attribute] = parsed;
+      }
     } catch {}
   });
 
   delete attributes.locals;
 
+  // Merge with global
   attributes = merge(options.expressions.locals, attributes);
 
   // Retrieve default locals from <script defaultLocals> and merge with attributes
-  const {locals: defaultLocals} = scriptDataLocals(html, {localsAttr: options.scriptLocalAttribute, removeScriptLocals: true, locals: attributes});
+  const {locals} = scriptDataLocals(html, {localsAttr: options.scriptLocalAttribute, removeScriptLocals: true, locals: attributes});
 
   // Merge default locals and attributes
-  if (defaultLocals) {
-    attributes = merge(defaultLocals, attributes);
+  //  or overrides locals with attributes
+  if (locals) {
+    Object.keys(locals).forEach(local => {
+      if (mergeAttributeWithDefault.includes(local)) {
+        attributes[local] = merge({...locals[local]}, {...attributes[local]});
+      } else if (typeof attributes[local] === 'undefined') {
+        attributes[local] = locals[local];
+      }
+    });
   }
 
-  return {attributes, defaultLocals};
+  return {attributes, locals};
 }
 
 /**

test/templates/components/component-locals-json-and-string.html

@@ -0,0 +1,14 @@
+<script defaultLocals>
+    module.exports = {
+        title: 'Default title',
+        items: ['default first item', 'default second item'],
+        titles: {
+            title: 'This is default main title',
+            subtitle: 'This is default subtitle',
+            suptitle: 'This is default suptitle'
+        }
+    }
+</script>
+<div><h1>{{title}}</h1></div>
+<div><each loop="item in items"><span>{{ item }}</span></each></div>
+<div><each loop="t, i in titles"><span>{{ i }}: {{ t }}</span></each></div>

test/test-locals.js

@@ -31,3 +31,19 @@ test('Must process default attributes and map style and class for the first node
 
   t.is(html, expected);
 });
+
+test('Must process component with locals as JSON and string', async t => {
+  const actual = `<component src="components/component-locals-json-and-string.html"
+                    subsomething2='{"items": [{"one": "First", "two": "Second", "three": "Third"}]}'
+                    merge:titles='{ "suptitle": "This is custom suptitle" }'
+                    something='["one", "two", "three"]'
+                    something2='{"one": "First", "two": "Second", "three": "Third"}'
+                    title="Custom title from JSON and String"
+                    items='["another item", "yet another"]'
+                    merge:locals='{ "items": ["first item", "second item"] }'></component>`;
+  const expected = `<div><h1>Custom title from JSON and String</h1></div><div><span>another item</span><span>yet another</span><span>first item</span><span>second item</span></div><div><span>title: This is default main title</span><span>subtitle: This is default subtitle</span><span>suptitle: This is custom suptitle</span></div>`;
+
+  const html = await posthtml([plugin({root: './test/templates'})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+});