Default slots without slot

Author: Damir

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "posthtml-components",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "PostHTML Components",
   "license": "MIT",
   "repository": "USER_NAME/PLUGIN_NAME",
@@ -23,6 +23,7 @@
     "deepmerge": "^4.2.2",
     "posthtml-attrs-parser": "^0.1.1",
     "posthtml-expressions": "^1.9.0",
+    "posthtml-match-helper": "^1.0.3",
     "posthtml-parser": "^0.11.0"
   },
   "devDependencies": {

package.json

@@ -6,6 +6,7 @@ const expressions = require('posthtml-expressions');
 const scriptDataLocals = require('posthtml-expressions/lib/locals');
 const {parser: parseToPostHtml} = require('posthtml-parser');
 const parseAttrs = require('posthtml-attrs-parser');
+// const matchHelper = require('posthtml-match-helper');
 const {match} = require('posthtml/lib/api');
 const merge = require('deepmerge');
 const findPathFromTagName = require('./find-path');
@@ -61,19 +62,24 @@ function processNodes(tree, options, messages) {
 
     const index = node.content.findIndex(content => typeof content === 'object');
 
-    const nodeAttrs = parseAttrs(node.content[index].attrs);
-
-    Object.keys(attributes).forEach(attr => {
-      if (typeof defaultLocals[attr] === 'undefined') {
-        if (['class'].includes(attr)) {
-          nodeAttrs[attr].push(attributes[attr]);
-        } else if (['style'].includes(attr)) {
-          nodeAttrs[attr] = attributes[attr];
+    if (index !== -1) {
+      // Map component attributes that it's not defined
+      //  as locals to first element of node
+      //  for now only class and style
+      const nodeAttrs = parseAttrs(node.content[index].attrs);
+
+      Object.keys(attributes).forEach(attr => {
+        if (typeof defaultLocals[attr] === 'undefined') {
+          if (['class'].includes(attr)) {
+            nodeAttrs[attr].push(attributes[attr]);
+          } else if (['style'].includes(attr)) {
+            nodeAttrs[attr] = attributes[attr];
+          }
         }
-      }
-    });
+      });
 
-    node.content[index].attrs = nodeAttrs.compose();
+      node.content[index].attrs = nodeAttrs.compose();
+    }
 
     messages.push({
       type: 'dependency',
@@ -89,17 +95,17 @@ function processNodes(tree, options, messages) {
 
 /**
  * Parse locals from attributes, globals and via script
- * @param {Object} tree - posthtml tree
  * @param {Object} options - plugin options
- * @param {Object} html  - posthtml tree
+ * @param {Object} tree - PostHTML Node
+ * @param {Array} html - PostHTML Tree Nodes
  * @return {Object} merged locals and default
  */
 function parseLocals(options, {attrs}, html) {
   let attributes = {...attrs};
 
   Object.keys(attributes).forEach(attribute => {
     try {
-      // Use merge()
+      // Use merge() ?
       attributes = {...attributes, ...JSON.parse(attributes[attribute])};
     } catch {}
   });
@@ -122,14 +128,22 @@ function parseLocals(options, {attrs}, html) {
 /**
  * Merge slots content
  * @param {Object} tree
- * @param {Object} component
+ * @param {Object} node
  * @param {Boolean} strict
  * @param {String} slotTagName
  * @return {Object} tree
  */
-function mergeSlots(tree, component, strict, slotTagName) {
+function mergeSlots(tree, node, strict, slotTagName) {
   const slots = getSlots(slotTagName, tree); // Slot in component.html
-  const fillSlots = getSlots(slotTagName, component.content); // Slot in page.html
+  const fillSlots = getSlots(slotTagName, node.content); // Slot in page.html
+
+  // Retrieve main content, means everything that is not inside slots
+  if (node.content) {
+    const contentOutsideSlots = node.content.filter(content => content.tag !== 'slot');
+    if (contentOutsideSlots.length > 0) {
+      fillSlots[defaultSlotName] = [{tag: 'slot', attrs: {name: defaultSlotName}, content: [...contentOutsideSlots]}];
+    }
+  }
 
   for (const slotName of Object.keys(slots)) {
     const fillSlotNodes = fillSlots[slotName];
@@ -145,6 +159,12 @@ function mergeSlots(tree, component, strict, slotTagName) {
       continue;
     }
 
+    if (!slotNode.attrs) {
+      slotNode.attrs = {
+        type: defaultSlotType
+      };
+    }
+
     let slotType = slotTypes[(slotNode.attrs.type || defaultSlotType).toLowerCase()] || defaultSlotType;
     slotType = typeof slotNode.attrs.append === 'undefined' ? (typeof slotNode.attrs.prepend === 'undefined' ? slotType : slotTypes.prepend) : slotTypes.append;
 
@@ -211,6 +231,8 @@ function getSlots(tag, content = []) {
       node.attrs = {};
     }
 
+    // When missing name try to retrieve from attribute
+    //  so slot name can be shorthands like <slot content> => <slot name="content">
     if (!node.attrs.name) {
       node.attrs.name = Object.keys({...node.attrs}).find(name => !Object.keys(slotTypes).includes(name) && name !== 'type' && name !== defaultSlotType);
     }
@@ -257,6 +279,7 @@ module.exports = (options = {}) => {
       fileExtension: 'html',
       tagPrefix: 'x-',
       tagRegExp: new RegExp(`^${options.tagPrefix || 'x-'}`, 'i'),
+      defaultSlotRegex: new RegExp('^((?!(slot)).)*$'),
       slotTagName: 'slot',
       tagName: 'component',
       locals: {},

src/index.js

@@ -0,0 +1 @@
+<html><head><title>Playground Layout</title></head><body><main><slot></slot></main><footer><slot name="footer">default footer content</slot></footer></body></html>

test/templates/layouts/playground.html

@@ -0,0 +1,15 @@
+'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 playground works', async t => {
+  const actual = `<component src="layouts/playground.html"><div><div>My Main Content</div></div><slot name="footer">Footer</slot></component>`;
+  const expected = `<html><head><title>Playground Layout</title></head><body><main><div><div>My Main Content</div></div></main><footer>Footer</footer></body></html>`;
+
+  const html = await posthtml([plugin({root: './test/templates'})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+});

test/test-playground.js

@@ -76,3 +76,12 @@ test('Must process with default slot', async t => {
 
   t.is(html, expected);
 });
+
+test('Must process with default slot without defining slot tag', async t => {
+  const actual = `<component src="layouts/default-slot.html"><div>Default Slot Content</div><slot footer>Footer</slot></component>`;
+  const expected = `<html><head><title>Default Slot Layout</title></head><body><main><div>Default Slot Content</div></main><footer>Footer</footer></body></html>`;
+
+  const html = await posthtml([plugin({root: './test/templates'})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+});

test/test-slots.js

@@ -9,6 +9,7 @@ module.exports = {
     'promise/prefer-await-to-then': 0,
     'unicorn/no-array-reduce': 0,
     'import/extensions': 0,
+    'prefer-regex-literals': 0,
     quotes: ['error', 'single', {allowTemplateLiterals: true}]
   }
 };