markup-components.js

const {selectAll} = require('css-select');
const domhandlerHyperscriptReplace = require('@quarterto/domhandler-hyperscript-replace');
const {calculateSpecificity} = require('clear-cut');
const orderBy = require('lodash.orderby');

module.exports = ({Component, createElement} = require('react')) => (...transforms) => (dom, options) => {
    const {replace, tree, getVNode} = domhandlerHyperscriptReplace(dom, {h: createElement});
    const propsMap = new WeakMap();
    
    const ordered = orderBy(transforms, ({selector}) => calculateSpecificity(selector), 'asc');

    return Promise.all(
      ordered.map(
        transform => {
          const els = selectAll(transform.selector, dom);
          if(els.length) {
            return Promise.all(
              els.map(el => 
                Promise.resolve(transform.preprocess({
                  el,
                  match: selector => selectAll(selector, el).map(getVNode),
                  original: Object.assign({}, getVNode(el)),
                  options,
                  __unsafeOriginal: getVNode(el),
                })).then(
                  props => propsMap.set(el, props)
                )
              )
            );
          }
        }
      )
    ).then(() => {
      ordered.forEach(
        transform => replace(transform.selector, el => {
          const props = propsMap.get(el);
          if(props !== false) {
              return createElement(
                  transform,
                  Object.assign({
                      options,
                      children: el.type === 'text'
                        ? el.data
                        : (el.children || []).map(getVNode),
                  }, props)
              );
          }
        })
      );

      return tree;
    });
};