Aware locals

Author: thewebartisan7

src/index.js

@@ -53,7 +53,7 @@ function processNodes(tree, options, messages) {
 
     const html = parseToPostHtml(fs.readFileSync(filePath, options.encoding));
 
-    options.expressions.locals = {...options.locals};
+    options.expressions.locals = {...options.locals, ...options.aware};
 
     const slotsLocals = parseSlotsLocals(options.slotTagName, html, node.content);
     const {attributes, locals} = parseLocals(options, slotsLocals, node, html);
@@ -121,6 +121,7 @@ function parseLocals(options, slotsLocals, {attrs}, html) {
   //  only for Array or Objects
   const mergeAttributeWithDefault = [];
   const computedAttributes = [];
+  const awareAttributes = [];
   Object.keys(attributes).forEach(attribute => {
     if (attribute.startsWith('merge:')) {
       const newAttributeName = attribute.replace('merge:', '');
@@ -132,6 +133,11 @@ function parseLocals(options, slotsLocals, {attrs}, html) {
       attributes[newAttributeName] = attributes[attribute];
       delete attributes[attribute];
       computedAttributes.push(newAttributeName);
+    } else if (attribute.startsWith('aware:')) {
+      const newAttributeName = attribute.replace('aware:', '');
+      attributes[newAttributeName] = attributes[attribute];
+      delete attributes[attribute];
+      awareAttributes.push(newAttributeName);
     }
   });
 
@@ -168,12 +174,7 @@ function parseLocals(options, slotsLocals, {attrs}, html) {
       const attributesToBeMerged = Object.fromEntries(Object.entries(attributes).filter(([attribute]) => mergeAttributeWithDefault.includes(attribute)));
       const localsToBeMerged = Object.fromEntries(Object.entries(locals).filter(([local]) => mergeAttributeWithDefault.includes(local)));
       if (Object.keys(localsToBeMerged).length > 0) {
-        console.log({localsToBeMerged, attributesToBeMerged});
-        console.log(attributes);
         mergeAttributeWithDefault.forEach(attribute => {
-          console.log(attribute);
-          console.log(typeof localsToBeMerged[attribute]);
-          console.log(typeof attributesToBeMerged[attribute]);
           attributes[attribute] = merge(localsToBeMerged[attribute], attributesToBeMerged[attribute]);
         });
       }
@@ -186,6 +187,10 @@ function parseLocals(options, slotsLocals, {attrs}, html) {
     });
   }
 
+  if (awareAttributes.length > 0) {
+    options.aware = Object.fromEntries(Object.entries(attributes).filter(([attribute]) => awareAttributes.includes(attribute)));
+  }
+
   return {attributes, locals};
 }
 
@@ -479,6 +484,7 @@ module.exports = (options = {}) => {
   }
 
   options.locals = {...options.expressions.locals};
+  options.aware = {};
 
   return function (tree) {
     tree = processNodes(tree, options, tree.messages);

test/templates/components/child.html

@@ -9,6 +9,7 @@
     anObject2: { one: 'One2', two: 'Two2', three: 'Three2'}
   };
 </script>
+CHILD:
 <div>
   aBoolean
   value: {{ aBoolean }}

test/test-locals.js

@@ -50,7 +50,7 @@ test('Must process component with locals as JSON and string', async t => {
 
 test('Must process parent and child locals via component', async t => {
   const actual = `<x-parent aString="I am custom aString for PARENT via component (1)"><x-child></x-child></x-parent>`;
-  const expected = `PARENT:<div>  aBoolean  value: true  type: boolean  aString  value: I am custom aString for PARENT via component (1)  type: string  aString2  value: I am not string 2  type: string  anArray  value: ["one","two","three"]  type: object  anObject  value: {"one":"One","two":"Two","three":"Three"}  type: object  anArray2  value: ["one2","two2","three2"]  type: object  anObject2  value: {"one":"One2","two":"Two2","three":"Three2"}  type: object</div>  <div>  aBoolean  value: true  type: boolean  aString  value: My String  type: string  aString2  value: I am not string 2  type: string  anArray  value: ["one","two","three"]  type: object  anObject  value: {"one":"One","two":"Two","three":"Three"}  type: object  anArray2  value: ["one2","two2","three2"]  type: object  anObject2  value: {"one":"One2","two":"Two2","three":"Three2"}  type: object</div>`;
+  const expected = `PARENT:<div>  aBoolean  value: true  type: boolean  aString  value: I am custom aString for PARENT via component (1)  type: string  aString2  value: I am not string 2  type: string  anArray  value: ["one","two","three"]  type: object  anObject  value: {"one":"One","two":"Two","three":"Three"}  type: object  anArray2  value: ["one2","two2","three2"]  type: object  anObject2  value: {"one":"One2","two":"Two2","three":"Three2"}  type: object</div>  CHILD:<div>  aBoolean  value: true  type: boolean  aString  value: My String  type: string  aString2  value: I am not string 2  type: string  anArray  value: ["one","two","three"]  type: object  anObject  value: {"one":"One","two":"Two","three":"Three"}  type: object  anArray2  value: ["one2","two2","three2"]  type: object  anObject2  value: {"one":"One2","two":"Two2","three":"Three2"}  type: object</div>`;
 
   const html = await posthtml([plugin({root: './test/templates/components'})]).process(actual).then(result => clean(result.html));
 
@@ -59,7 +59,7 @@ test('Must process parent and child locals via component', async t => {
 
 test('Must process parent and child locals via slots', async t => {
   const actual = `<x-parent aString="I am custom aString for PARENT via component (1)"><slot name="child"></slot></x-parent>`;
-  const expected = `PARENT:<div>  aBoolean  value: true  type: boolean  aString  value: I am custom aString for PARENT via component (1)  type: string  aString2  value: I am not string 2  type: string  anArray  value: ["one","two","three"]  type: object  anObject  value: {"one":"One","two":"Two","three":"Three"}  type: object  anArray2  value: ["one2","two2","three2"]  type: object  anObject2  value: {"one":"One2","two":"Two2","three":"Three2"}  type: object</div>  <div>  aBoolean  value: true  type: boolean  aString  value: I am custom aString for PARENT via component (1)  type: string  aString2  value: I am not string 2  type: string  anArray  value: ["one","two","three"]  type: object  anObject  value: {"one":"One","two":"Two","three":"Three"}  type: object  anArray2  value: ["one2","two2","three2"]  type: object  anObject2  value: {"one":"One2","two":"Two2","three":"Three2"}  type: object</div>`;
+  const expected = `PARENT:<div>  aBoolean  value: true  type: boolean  aString  value: I am custom aString for PARENT via component (1)  type: string  aString2  value: I am not string 2  type: string  anArray  value: ["one","two","three"]  type: object  anObject  value: {"one":"One","two":"Two","three":"Three"}  type: object  anArray2  value: ["one2","two2","three2"]  type: object  anObject2  value: {"one":"One2","two":"Two2","three":"Three2"}  type: object</div>  CHILD:<div>  aBoolean  value: true  type: boolean  aString  value: I am custom aString for PARENT via component (1)  type: string  aString2  value: I am not string 2  type: string  anArray  value: ["one","two","three"]  type: object  anObject  value: {"one":"One","two":"Two","three":"Three"}  type: object  anArray2  value: ["one2","two2","three2"]  type: object  anObject2  value: {"one":"One2","two":"Two2","three":"Three2"}  type: object</div>`;
 
   const html = await posthtml([plugin({root: './test/templates/components'})]).process(actual).then(result => clean(result.html));
 
@@ -74,3 +74,12 @@ test('Must has access to $slots in script locals', async t => {
 
   t.is(html, expected);
 });
+
+test('Must pass locals from parent to child via aware', async t => {
+  const actual = `<x-parent aware:aString="I am custom aString for PARENT via component (1)"><x-child></x-child></x-parent>`;
+  const expected = `PARENT:<div>  aBoolean  value: true  type: boolean  aString  value: I am custom aString for PARENT via component (1)  type: string  aString2  value: I am not string 2  type: string  anArray  value: ["one","two","three"]  type: object  anObject  value: {"one":"One","two":"Two","three":"Three"}  type: object  anArray2  value: ["one2","two2","three2"]  type: object  anObject2  value: {"one":"One2","two":"Two2","three":"Three2"}  type: object</div>  CHILD:<div>  aBoolean  value: true  type: boolean  aString  value: I am custom aString for PARENT via component (1)  type: string  aString2  value: I am not string 2  type: string  anArray  value: ["one","two","three"]  type: object  anObject  value: {"one":"One","two":"Two","three":"Three"}  type: object  anArray2  value: ["one2","two2","three2"]  type: object  anObject2  value: {"one":"One2","two":"Two2","three":"Three2"}  type: object</div>`;
+
+  const html = await posthtml([plugin({root: './test/templates/components'})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+});