@shopware/cms-base-layer/app/helpers/html-to-vue/renderer.ts

Vue CMS Nuxt Layer for Shopware

//@ts-nocheck
/**
 * Based on the https://github.com/HCESrl/html-to-vue
 */

import { isNode } from "./ast";
import { getOptionsFromNode } from "./getOptionsFromNode";

/**
 * rendering the ast into vue render functions
 * @param {*} ast AST generated by html-parse-stringify
 * @param {*} config our configuration
 * @param {*} createElement vue's createElement
 * @param {*} context vue functional component context
 */
export function renderer(ast, config, createElement, context, resolveUrl) {
  function _render(h, node) {
    if (Array.isArray(node)) {
      const nodes = [];
      // node is an array
      node.forEach((subnode, index) => {
        nodes.push(_render.call(this, h, subnode, node, null, index, h));
      });
      return nodes;
    }

    if (isNode(node)) {
      // node is either a node with children or a node or a text node
      if (node.type === "text") {
        return config.textTransformer(node.content); // return text
      }
      if (node.type === "tag") {
        const transformedNode = getOptionsFromNode(node, resolveUrl);
        const children = [];
        node.children.forEach((child, index) => {
          children.push(_render.call(this, h, child, transformedNode, index));
        });
        // if it's an extra component use custom renderer
        if (typeof config.extraComponentsMap[node.name] !== "undefined") {
          return config.extraComponentsMap[node.name].renderer.call(
            this,
            transformedNode,
            children,
            h,
            context,
          );
        }
        // else, create normal html element
        return h(node.name, transformedNode, [...children]);
      }
    }
  }
  return createElement(config.container.type, context.data, [
    ..._render.call(this, createElement, ast),
  ]);
}