Make aware props available only to nested components

docs-src/components/test/child-aware.html

@@ -0,0 +1,11 @@
+<script props>
+  module.exports = {
+    myprop: props.myprop || 'Default my prop in child'
+  };
+</script>
+
+<div>
+  {{ myprop }}
+
+  <yield></yield>
+</div>

docs-src/components/test/div1.html

@@ -0,0 +1,10 @@
+<script props>
+  module.exports = {
+    myprop: props.myprop || 'My DEFAULT prop in div1'
+  };
+</script>
+
+<div>
+  div1: {{ myprop }}
+  <yield></yield>
+</div>

docs-src/components/test/div2.html

@@ -0,0 +1,10 @@
+<script props>
+  module.exports = {
+    myprop: props.myprop || 'My DEFAULT prop in div2'
+  };
+</script>
+
+<div>
+  div2: {{ myprop }}
+  <yield></yield>
+</div>

docs-src/components/test/div3.html

@@ -0,0 +1,10 @@
+<script props>
+  module.exports = {
+    myprop: props.myprop || 'My DEFAULT prop in div3'
+  };
+</script>
+
+<div>
+  div3: {{ myprop }}
+  <yield></yield>
+</div>

docs-src/components/test/div4.html

@@ -0,0 +1,10 @@
+<script props>
+  module.exports = {
+    myprop: props.myprop || 'My DEFAULT prop in div4'
+  };
+</script>
+
+<div>
+  div4: {{ myprop }}
+  <yield></yield>
+</div>

docs-src/components/test/parent-aware.html

@@ -0,0 +1,11 @@
+<script props>
+  module.exports = {
+    myprop: props.myprop || 'Default my prop in parent'
+  };
+</script>
+
+<div>
+  {{ myprop }}
+
+  <yield></yield>
+</div>

docs-src/index.js

@@ -16,6 +16,10 @@ const md = './docs-src/md';
 const options = {};
 
 readdirSync(src).forEach(file => {
+  if (file !== 'test.html') {
+    return;
+  }
+
   const html = readFileSync(path.resolve(`${src}${file}`), 'utf-8');
 
   posthtml([

docs-src/pages/test.html

@@ -3,6 +3,40 @@
     <div class="col-lg-8">
       <h1 class="display-1 fw-bold mb-4">Playground</h1>
 
+      <x-test.div1 aware:myprop="My CUSTOM prop in div1">
+        <x-test.div2>
+          <x-test.div3>
+            <x-test.div4>
+              hi
+            </x-test.div4>
+          </x-test.div3>
+        </x-test.div2>
+      </x-test.div1>
+
+      <hr>
+
+      <x-test.div1>
+        <x-test.div2>
+          <x-test.div3 aware:myprop="My CUSTOM prop in div3">
+            <x-test.div4>
+              hi
+            </x-test.div4>
+          </x-test.div3>
+        </x-test.div2>
+      </x-test.div1>
+
+      <hr>
+
+      <x-test.div1 aware:myprop="My NEW CUSTOM prop in div1">
+        <x-test.div2>
+          <x-test.div3 myprop="My NEW CUSTOM prop in div3">
+            <x-test.div4>
+              hi
+            </x-test.div4>
+          </x-test.div3>
+        </x-test.div2>
+      </x-test.div1>
+
       <x-test
         aStringOverride="My override string changed"
         anObjectOverride='{ "third": "Third override item", "fourth": "Fourth override item" }'

docs/test.html

@@ -47,6 +47,44 @@
         <div class="row">
           <div class="col-lg-8">
             <h1 class="display-1 fw-bold mb-4">Playground</h1>
+            <div>
+              div1: My CUSTOM prop in div1
+              <div>
+                div2: My CUSTOM prop in div1
+                <div>
+                  div3: My CUSTOM prop in div1
+                  <div>div4: My CUSTOM prop in div1
+
+              hi</div>
+                </div>
+              </div>
+            </div>
+            <hr>
+            <div>
+              div1: My DEFAULT prop in div1
+              <div>
+                div2: My DEFAULT prop in div2
+                <div>
+                  div3: My CUSTOM prop in div3
+                  <div>div4: My CUSTOM prop in div3
+
+              hi</div>
+                </div>
+              </div>
+            </div>
+            <hr>
+            <div>
+              div1: My NEW CUSTOM prop in div1
+              <div>
+                div2: My NEW CUSTOM prop in div1
+                <div>
+                  div3: My NEW CUSTOM prop in div3
+                  <div>div4: My NEW CUSTOM prop in div1
+
+              hi</div>
+                </div>
+              </div>
+            </div>
             <div class="wrapper">
               <div class="demo my-demo" computed:acomputed="true" something="alocal">
                 {"title":"PostHTML Components","aStringOverride":"My override string changed","anObjectOverride":{"third":"Third override item","fourth":"Fourth override item"},"computed:aComputed":true,"class":"my-demo","anObjectMerged":{"third":"Third merged item","fourth":"Fourth merged item","anObjectMerged1":{"third":"Third merged item (UPDATED?)","fourth1":"Fourth merged item"}},"post":{"title":"My post title","body":"My post body","comments":[{"id":1,"body":"My comment 1 new"},{"id":3,"body":"My comment 3"}]},"anArrayOfObjects":[{"id":1,"title":"My new title 1"},{"id":2,"title":"My new title 2","somethingnew":"New"}],"anArray":["first","third","fourth","ten"],"something":"alocal"}
@@ -212,7 +250,7 @@ <h1>Child yield</h1>
         </div>
       </div>
     </footer>
-    <div class="modal fade" id="modalWithComponents" data-bs-backdrop="true" data-bs-keyboard="true" aria-labelledby="modalWithComponents" tabindex="-1" aria-hidden="true" aria-modal="true" role="dialog" dialogclass="modal-dialog-custom" contentclass="modal-content-custom">
+    <div class="modal fade" id="modalWithComponents" data-bs-backdrop="true" data-bs-keyboard="true" aria-labelledby="modalWithComponents" tabindex="-1" aria-hidden="true" aria-modal="true" role="dialog" dialogclass="modal-dialog-custom" contentclass="modal-content-custom" close="true">
       <div class="modal-dialog modal-lg modal-fullscreen-lg-down modal-dialog-centered">
         <div class="modal-content">
           <div class="modal-header">

src/index.js

@@ -120,7 +120,6 @@ module.exports = (options = {}) => tree => {
   });
 
   options.props = {...options.expressions.locals};
-  options.aware = {};
 
   const pushedContent = {};
 
@@ -142,11 +141,11 @@ module.exports = (options = {}) => tree => {
  * @param  {Object} options Plugin options
  * @return {Object} PostHTML tree
  */
+let processCounter = 0;
+
 function processTree(options) {
   const filledSlots = {};
 
-  // let processCounter = 0;
-
   return function (tree) {
     if (options.plugins.length > 0) {
       tree = applyPluginsToTree(tree, options.plugins);
@@ -163,15 +162,19 @@ function processTree(options) {
         return currentNode;
       }
 
-      // console.log(`${++processCounter}) Processing component ${componentPath}`);
+      console.log(`${++processCounter}) Processing "${currentNode.tag}" component from "${componentPath}"`);
 
       // log(currentNode, 'currentNode');
 
       let nextNode = parser(readFileSync(componentPath, 'utf8'));
 
       // Set filled slots
       setFilledSlots(currentNode, filledSlots, options);
-      // setFilledSlots(nextNode, filledSlots, options);
+
+      // Reset options.aware when new nested start
+      if (processCounter === 1) {
+        options.aware = {};
+      }
 
       // Reset options.expressions.locals and keep aware locals
       options.expressions.locals = {...options.props, ...options.aware};
@@ -207,15 +210,8 @@ function processTree(options) {
 
       processAttributes(currentNode, attributes, props, options);
 
-      // log(currentNode, 'currentNode', 'currentNode')
-      // currentNode.attrs.counter = processCounter;
-      // currentNode.attrs.data = JSON.stringify({ attributes, props });
-
-      // messages.push({
-      //   type: 'dependency',
-      //   file: componentPath,
-      //   from: options.root
-      // });
+      // Reset counter
+      processCounter = 0;
 
       return currentNode;
     });