Apply expressions to initial tree and set nextNode after expression process

Author: thewebartisan7

src/index.js

@@ -71,6 +71,9 @@ module.exports = (options = {}) => tree => {
 
   log(options, 'options', 'init');
 
+  // Apply expressions to initial tree
+  tree = expressions(options.expressions)(tree);
+
   tree = processTree(options)(tree);
 
   return tree;
@@ -115,7 +118,7 @@ function processTree(options) {
 
       log(`${++processCounter} ${componentPath}`, 'Processing component', 'processTree');
 
-      const nextNode = parser(readFileSync(componentPath, 'utf8'));
+      let nextNode = parser(readFileSync(componentPath, 'utf8'));
 
       // Set filled slots
       setFilledSlots(currentNode, slotContent, options);
@@ -133,7 +136,8 @@ function processTree(options) {
 
       log({attributes, locals, slotContent}, 'Processed attributes, locals and slots', 'processTree');
 
-      expressions(options.expressions)(nextNode);
+      nextNode = expressions(options.expressions)(nextNode);
+      // process.exit(0);
 
       // Process <stack> tag
       processPushes(nextNode, pushedContent, options);

test/templates/components/script-locals.html

@@ -1,8 +1,9 @@
 <script props>
   module.exports = {
-    title: 'Default title'
+    title: 'Default title',
+    slotsAccessibleViaScript: locals.$slots
   }
 </script>
-{{ $slots }}
+{{ slotsAccessibleViaScript }}
 <div>{{ $slots }}</div>
 <div><h1>{{title}}</h1></div><div><fill:filled></fill:filled><fill:notfilled></fill:notfilled></div>

test/test-locals.js

@@ -57,7 +57,7 @@ test('Must process parent and child locals via component', async t => {
 
 test('Must has access to $slots in script locals', async t => {
   const actual = `<x-script-locals><slot:filled>filled slot content...</slot:filled></x-script-locals>`;
-  const expected = `<div>{"filled":{"filled":true,"rendered":false,"tag":"slot:filled","attrs":{},"content":["filled slot content..."],"source":"filled slot content...","locals":{}}}</div><div><h1>Default title</h1></div><div>filled slot content...</div>`;
+  const expected = `{"filled":{"filled":true,"rendered":false,"tag":"slot:filled","attrs":{},"content":["filled slot content..."],"source":"filled slot content...","locals":{}}}<div>{"filled":{"filled":true,"rendered":false,"tag":"slot:filled","attrs":{},"content":["filled slot content..."],"source":"filled slot content...","locals":{}}}</div><div><h1>Default title</h1></div><div>filled slot content...</div>`;
 
   const html = await posthtml([plugin({root: './test/templates/components'})]).process(actual).then(result => clean(result.html));