100% test coverage

Author: thewebartisan7

src/index.js

@@ -115,31 +115,19 @@ function processTree(options) {
         currentNode.attrs = {};
       }
 
-      const componentFile = currentNode.attrs[options.attribute] || findPathFromTag(currentNode.tag, options);
+      const componentPath = getComponentPath(currentNode, options);
 
-      if (!componentFile) {
+      if (!componentPath) {
         return currentNode;
       }
 
-      const componentPath = path.isAbsolute(componentFile) && !currentNode.attrs[options.attribute] ?
-        componentFile :
-        path.join(options.root, componentFile);
-
-      // Check if file exist only when not using x-tag
-      if (currentNode.attrs[options.attribute] && !existsSync(componentPath)) {
-        if (options.strict) {
-          throw new Error(`[components] The component was not found in ${componentPath}.`);
-        } else {
-          return currentNode;
-        }
-      }
-
       // console.log(`${++processCounter}) Processing component ${componentPath}`);
 
       let nextNode = parser(readFileSync(componentPath, 'utf8'));
 
       // Set filled slots
       setFilledSlots(currentNode, filledSlots, options);
+      setFilledSlots(nextNode, filledSlots, options);
 
       // Reset previous locals with passed global and keep aware locals
       options.expressions.locals = {...options.locals, ...options.aware};
@@ -158,6 +146,7 @@ function processTree(options) {
       // Process <yield> tag
       const content = match.call(nextNode, {tag: options.yield}, nextNode => {
         // Fill <yield> with current node content or default <yield>
+        console.log(currentNode.content);
         return currentNode.content || nextNode.content;
       });
 
@@ -190,6 +179,26 @@ function processTree(options) {
   };
 }
 
+function getComponentPath(currentNode, options) {
+  const componentFile = currentNode.attrs[options.attribute];
+
+  if (componentFile) {
+    const componentPath = path.join(options.root, componentFile);
+
+    if (!existsSync(componentPath)) {
+      if (options.strict) {
+        throw new Error(`[components] The component was not found in ${componentPath}.`);
+      } else {
+        return false;
+      }
+    }
+
+    return componentPath;
+  }
+
+  return findPathFromTag(currentNode.tag, options);
+}
+
 function applyPluginsToTree(tree, plugins) {
   return plugins.reduce((tree, plugin) => {
     tree = plugin(tree);

src/slots.js

@@ -21,7 +21,7 @@ function setFilledSlots(currentNode, filledSlots, {fill, slotSeparator}) {
 
     const name = fillNode.tag.split(slotSeparator)[1];
 
-    const locals = omit(fillNode.attrs, [name, 'type', 'append', 'prepend', 'aware']);
+    const locals = omit(fillNode.attrs, ['append', 'prepend', 'aware']);
 
     if (locals) {
       each(locals, (value, key, attrs) => {
@@ -58,10 +58,6 @@ function processFillContent(tree, filledSlots, {fill, slotSeparator}) {
   match.call(tree, {tag: fill}, fillNode => {
     const name = fillNode.tag.split(slotSeparator)[1];
 
-    if (!filledSlots[name]) {
-      filledSlots[name] = {};
-    }
-
     filledSlots[name].tag = fillNode.tag;
     filledSlots[name].attrs = fillNode.attrs;
     filledSlots[name].content = fillNode.content;
@@ -90,17 +86,21 @@ function processSlotContent(tree, filledSlots, {slot, slotSeparator}) {
 
     slotNode.tag = false;
 
-    if (filledSlots[name]?.rendered) {
+    if (!filledSlots[name]) {
+      return slotNode;
+    }
+
+    if (filledSlots[name].rendered) {
       slotNode.content = null;
-    } else if (slotNode.content && filledSlots[name]?.attrs && (typeof filledSlots[name]?.attrs.append !== 'undefined' || typeof filledSlots[name]?.attrs.prepend !== 'undefined')) {
-      slotNode.content = typeof filledSlots[name]?.attrs.append === 'undefined' ? filledSlots[name]?.content.concat(slotNode.content) : slotNode.content.concat(filledSlots[name]?.content);
+    } else if (slotNode.content && filledSlots[name].attrs && (typeof filledSlots[name].attrs.append !== 'undefined' || typeof filledSlots[name].attrs.prepend !== 'undefined')) {
+      slotNode.content = typeof filledSlots[name].attrs.append === 'undefined' ? filledSlots[name].content.concat(slotNode.content) : slotNode.content.concat(filledSlots[name].content);
     } else {
-      slotNode.content = filledSlots[name]?.content;
+      slotNode.content = filledSlots[name].content;
     }
 
     // Set rendered to true so a slot can be output only once,
     //  when not present "aware" attribute
-    if (filledSlots[name] && (!filledSlots[name]?.attrs || typeof filledSlots[name].attrs.aware === 'undefined')) {
+    if (filledSlots[name] && (!filledSlots[name].attrs || typeof filledSlots[name].attrs.aware === 'undefined')) {
       filledSlots[name].rendered = true;
     }
 

test/templates/components/slot-with-locals.html

@@ -0,0 +1 @@
+<div><slot:name>{{ $slots.name.locals.mySlotLocal }}</slot:name></div>

test/templates/layouts/base.html

@@ -1,5 +1,5 @@
 <html>
-<head><title>Base Layout</title></head>
+<head><title>Base Layout</title><stack name="head"></stack></head>
 <body>
 <header><slot:header></slot:header></header>
 <main><yield></yield></main>

test/test-errors.js

@@ -58,3 +58,9 @@ test('Must fail when component is not found in defined namespace with strict mod
 
   await t.throwsAsync(async () => posthtml([plugin({root: './test/templates', strict: true, namespaces: [{name: 'empty-namespace', root: './test/templates/empty-namespace'}]})]).process(actual).then(result => clean(result.html)));
 });
+
+test('Must fail when push tag missing name', async t => {
+  const actual = `<div><push></push></div>`;
+
+  await t.throwsAsync(async () => posthtml([plugin({root: './test/templates', strict: true})]).process(actual).then(result => clean(result.html)));
+});

test/test-locals.js

@@ -72,3 +72,12 @@ test('Must process default, merged and override props', async t => {
 
   t.is(html, expected);
 });
+
+test('Must process slot with locals', async t => {
+  const actual = `<component src="components/slot-with-locals.html"><fill:name mySlotLocal=" Via Slot" prepend>My Local</fill:name></component>`;
+  const expected = `<div>My Local Via Slot</div>`;
+
+  const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+});

test/test-stacks.js

@@ -0,0 +1,24 @@
+'use strict';
+
+const test = require('ava');
+const plugin = require('../src');
+const posthtml = require('posthtml');
+const clean = html => html.replace(/(\n|\t)/g, '').trim();
+
+test('Must process stacks and push', async t => {
+  const actual = `<component src="layouts/base.html"><div>Main content</div><push name="head"><meta name="pushed" content="Content pushed"></push></component>`;
+  const expected = `<html><head><title>Base Layout</title><meta name="pushed" content="Content pushed"></head><body><header></header><main><div>Main content</div></main><footer>footer content</footer></body></html>`;
+
+  const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+});
+
+test('Must prepend push on stack once', async t => {
+  const actual = `<component src="layouts/base.html"><div>Main content</div><push name="head" prepend once><meta name="pushed" content="Content pushed"></push><push name="head" prepend once><meta name="pushed" content="Content pushed"></push></component>`;
+  const expected = `<html><head><title>Base Layout</title><meta name="pushed" content="Content pushed"></head><body><header></header><main><div>Main content</div></main><footer>footer content</footer></body></html>`;
+
+  const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+});