Hi all,
I would like to share a new plugin for PostHTML similar to posthtml-extends and posthtml-modules, inspired by Laravel Blade, see here:

https://www.npmjs.com/package/posthtml-component

The logic is a bit different and can be simplified with below code:

/**
 * @param  {Object} options Plugin options
 * @return {Object} PostHTML tree
 */
function processTree(options) {
  return function (tree) {
    match.call(tree, {tag: options.tag}, componentNode => {
      const filePath = path.join(options.root, componentNode.attrs[options.attribute]);
      const componentContent = fs.readFileSync(filePath, 'utf8');
      const componentTree = parser(componentContent);
      const content = match.call(componentTree, {tag: 'content'}, contentNode => {
        return componentNode.content || '';
      });
      componentNode.tag = false;
      componentNode.content = content;
      return componentNode;
    });
    return tree;
  };
}

Which is pretty similar to what posthtml-modules is doing, but with this you can nest your component like below:

<component src="component1.html">
  <component src="component2html">
    <component src="component3.html">
       <content></content>
    </component>
  </component>
</component>

See here all features https://github.com/thewebartisan7/posthtml-components#features

And examples: https://github.com/thewebartisan7/posthtml-components/tree/main/examples

You can run npm run build-examples and check output in examples/dist folder.

One of the best feature is the tag <x-tag> without specify the path to filename.

It's still in early stage, so please to give it a try and let me know your feedback, or any issues you may found.

I am trying to make it compatible with existing markup used by posthtml-extends and posthtml-modules, but in case you can just keep them together and progressively start to migrate to new one.

Looking for to hear from you!