Use underscore in locals.js

Author: thewebartisan7

examples/dist/demo.html

@@ -48,7 +48,7 @@
         <div class="row">
           <div class="col-lg-8">
             <h1 class="display-1 fw-bold mb-4">Demo</h1>
-            <div>
+            <div something="alocal">
               <h1>anObjectDefault</h1>
               <p>
                 <strong>first</strong>
@@ -68,6 +68,18 @@ <h1>anObjectOverride</h1>
                 : Fourth override item
               </p>
               <h1>anObjectMerged</h1>
+              <p>
+                <strong>first</strong>
+                : First merged item
+              </p>
+              <p>
+                <strong>second</strong>
+                : Second merged item
+              </p>
+              <p>
+                <strong>anObjectMerged1</strong>
+                : {"first":"First1 merged item","second":"Second1 merged item","anObjectMerged2":{"first":"First2 merged item","second":"Second2 merged item"},"third":"Third merged item (UPDATED?)","fourth1":"Fourth merged item"}
+              </p>
               <p>
                 <strong>third</strong>
                 : Third merged item
@@ -76,17 +88,21 @@ <h1>anObjectMerged</h1>
                 <strong>fourth</strong>
                 : Fourth merged item
               </p>
-              <p>
-                <strong>anObjectMerged1</strong>
-                : {"third":"Third merged item (UPDATED?)","fourth1":"Fourth merged item"}
-              </p>
               <h1>aStringDefault</h1>
               <p>My default string</p>
               <h1>aStringOverride</h1>
               <p>My override string changed</p>
               <hr>
               <h1>post</h1>
               My post title My post body
+              <p>
+                <strong>1</strong>
+                : My comment 1
+              </p>
+              <p>
+                <strong>2</strong>
+                : My comment 2
+              </p>
               <p>
                 <strong>1</strong>
                 : My comment 1 new
@@ -98,10 +114,18 @@ <h1>post</h1>
               <h1>anArrayOfObjects</h1>
               <p>
                 <strong>0</strong>
-                : {"id":1,"title":"My new title 1"}
+                : {"id":1,"title":"My default title 1"}
               </p>
               <p>
                 <strong>1</strong>
+                : {"id":2,"title":"My default title 2"}
+              </p>
+              <p>
+                <strong>2</strong>
+                : {"id":1,"title":"My new title 1"}
+              </p>
+              <p>
+                <strong>3</strong>
                 : {"id":2,"title":"My new title 2","somethingnew":"New"}
               </p>
               <h1>anArray</h1>
@@ -111,12 +135,27 @@ <h1>anArray</h1>
               </p>
               <p>
                 <strong>1</strong>
-                : third
+                : second
               </p>
               <p>
                 <strong>2</strong>
+                : first
+              </p>
+              <p>
+                <strong>3</strong>
+                : third
+              </p>
+              <p>
+                <strong>4</strong>
                 : fourth
               </p>
+              <p>
+                <strong>5</strong>
+                : ten
+              </p>
+              <hr>
+              <h1>aComputed</h1>
+              <p>Yes</p>
             </div>
           </div>
         </div>

examples/src/components/demo.html

@@ -46,7 +46,8 @@
         title: "My default title 2"
       }
     ],
-    anArray: ['first', 'second']
+    anArray: ['first', 'second'],
+    aComputed: locals.aComputed === true ? 'Yes' : 'No',
   };
 </script>
 <div>
@@ -88,4 +89,9 @@ <h1>anArray</h1>
   <each loop="o,i in anArray">
     <p><strong>{{ i }}</strong>: {{ o }}</p>
   </each>
+
+  <hr>
+
+  <h1>aComputed</h1>
+  <p>{{ aComputed }}</p>
 </div>

examples/src/pages/demo.html

@@ -13,6 +13,10 @@ <h1 class="display-1 fw-bold mb-4">Demo</h1>
         merge:anArrayOfObjects='[ { "id": 1, "title": "My new title 1" }, { "id": 2, "title": "My new title 2", "somethingnew": "New" } ]'
 
         merge:anArray='[ "first", "third", "fourth" ]'
+
+        computed:aComputed="true"
+
+        merge:locals='{ "something": "alocal", "anArray": [ "ten" ] }'
       ></x-demo>
     </div>
   </div>

src/index.js

@@ -103,7 +103,7 @@ module.exports = (options = {}) => tree => {
 function processTree(options) {
   const filledSlots = {};
 
-  let processCounter = 0;
+  // let processCounter = 0;
 
   return function (tree) {
     if (options.plugins.length > 0) {
@@ -115,10 +115,6 @@ function processTree(options) {
         currentNode.attrs = {};
       }
 
-      if (!currentNode.attrs[options.attribute]) {
-        console.log(currentNode.tag);
-      }
-
       const componentFile = currentNode.attrs[options.attribute] || findPathFromTag(currentNode.tag, options);
 
       if (!componentFile) {
@@ -133,7 +129,7 @@ function processTree(options) {
         return currentNode;
       }
 
-      console.log(`${++processCounter}) Processing component ${componentPath}`);
+      // console.log(`${++processCounter}) Processing component ${componentPath}`);
 
       let nextNode = parser(readFileSync(componentPath, 'utf8'));
 

src/locals.js

@@ -2,16 +2,8 @@
 
 const merge = require('deepmerge');
 const scriptDataLocals = require('posthtml-expressions/lib/locals');
-const {pick, extend} = require('underscore');
-// const {inspect} = require('util');
-//
-// const debug = true;
-//
-// const log = (object, what, method) => {
-//   if (debug === true || method === debug) {
-//     console.log(what, inspect(object, false, null, true));
-//   }
-// };
+const {pick, extend, keys, defaults, each} = require('underscore');
+const attributeTypes = ['merge', 'computed', 'aware'];
 
 /**
  * Parse locals from attributes, globals and via script
@@ -25,81 +17,69 @@ const {pick, extend} = require('underscore');
 module.exports = (currentNode, nextNode, slotContent, options) => {
   let attributes = {...currentNode.attrs};
 
-  const merged = [];
-  const computed = [];
-  const aware = [];
-
-  Object.keys(attributes).forEach(attributeName => {
-    const newAttributeName = attributeName
-      .replace('merge:', '')
-      .replace('computed:', '')
-      .replace('aware:', '');
-
-    switch (true) {
-      case attributeName.startsWith('merge:'):
-        attributes[newAttributeName] = attributes[attributeName];
-        delete attributes[attributeName];
-        merged.push(newAttributeName);
-        break;
-
-      case attributeName.startsWith('computed:'):
-        attributes[newAttributeName] = attributes[attributeName];
-        delete attributes[attributeName];
-        computed.push(newAttributeName);
-        break;
+  const attributesByTypeName = {};
+  each(attributeTypes, type => {
+    attributesByTypeName[type] = [];
+  });
 
-      case attributeName.startsWith('aware:'):
-        attributes[newAttributeName] = attributes[attributeName];
-        delete attributes[attributeName];
-        aware.push(newAttributeName);
-        break;
+  each(attributes, (value, key, attrs) => {
+    let newKey = key;
+    each(attributeTypes, type => {
+      if (key.startsWith(`${type}:`)) {
+        newKey = newKey.replace(`${type}:`, '');
+        attributesByTypeName[type].push(newKey);
+      }
+    });
 
-      default: break;
+    if (newKey !== key) {
+      attrs[newKey] = value;
+      delete attrs[key];
     }
   });
 
   // Parse JSON attributes
-  Object.keys(attributes).forEach(attributeName => {
+  each(attributes, (value, key, attrs) => {
     try {
-      const parsed = JSON.parse(attributes[attributeName]);
-      if (attributeName === 'locals') {
-        if (merged.includes(attributeName)) {
-          attributes = merge(attributes, parsed);
-          merged.splice(merged.indexOf('locals'), 1);
-        } else {
-          // Override with merge see https://www.npmjs.com/package/deepmerge#arraymerge-example-overwrite-target-array
-          Object.assign(attributes, parsed);
-        }
-      } else {
-        attributes[attributeName] = parsed;
-      }
+      attrs[key] = JSON.parse(value);
     } catch {}
   });
 
-  delete attributes.locals;
+  // Merge or extend attribute locals
+  if (attributes.locals) {
+    if (attributesByTypeName.merge.includes('locals')) {
+      attributesByTypeName.merge.splice(attributesByTypeName.merge.indexOf('locals'), 1);
+      attributes = merge(attributes, attributes.locals);
+    } else {
+      extend(attributes, attributes.locals);
+    }
+
+    delete attributes.locals;
+  }
 
   // Merge with global
   attributes = merge(options.expressions.locals, attributes);
 
   // Retrieve default locals from <script props> and merge with attributes
   const {locals} = scriptDataLocals(nextNode, {localsAttr: options.localsAttr, removeScriptLocals: true, locals: {...attributes, $slots: slotContent}});
 
-  // Merge or overrides props and attributes
   if (locals) {
-    if (merged.length > 0) {
-      extend(attributes, merge(pick(locals, merged), pick(attributes, merged)));
+    // Merge attributes
+    if (attributesByTypeName.merge.length > 0) {
+      extend(attributes, merge(pick(locals, attributesByTypeName.merge), pick(attributes, attributesByTypeName.merge)));
     }
 
-    // Override attributes with props when is computed or attribute is not defined
-    Object.keys(locals).forEach(attributeName => {
-      if (computed.includes(attributeName) || typeof attributes[attributeName] === 'undefined') {
-        attributes[attributeName] = locals[attributeName];
-      }
-    });
+    // Override attributes with computed locals
+    if (attributesByTypeName.computed.length > 0) {
+      extend(attributes, pick(locals, keys(pick(attributes, attributesByTypeName.computed))));
+    }
+
+    // Set attributes not defined
+    defaults(attributes, locals);
   }
 
-  if (aware.length > 0) {
-    options.aware = Object.fromEntries(Object.entries(attributes).filter(([attributeName]) => aware.includes(attributeName)));
+  // Set aware attributes
+  if (attributesByTypeName.aware.length > 0) {
+    options.aware = pick(attributes, attributesByTypeName.aware);
   }
 
   return {attributes, locals};