All files / src/html vueSlotSyntaxProcessor.ts

100% Statements 28/28
92.85% Branches 13/14
100% Functions 7/7
100% Lines 27/27

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62        1742x 1320x     422x 422x 422x 308x     114x             704x 973x 973x 17x   17x   17x 17x 17x     17x 17x   17x 17x     17x 49x 17x                     704x 974x 24x 24x 24x        
import _ from 'lodash';
import { MbNode, NodeOrText, parseHTML } from '../utils/node.js';
 
export function getVslotShorthandName(node: NodeOrText) {
  if (!node.attribs) {
    return '';
  }
 
  const keys = Object.keys(node.attribs);
  const vslotShorthand = _.find(keys, key => key.startsWith('#'));
  if (!vslotShorthand) {
    return '';
  }
 
  return vslotShorthand.substring(1, vslotShorthand.length); // remove #
}
 
/*
 * Shifts the slot node deeper by one level by creating a new intermediary node with template tag name.
 */
export function shiftSlotNodeDeeper(node: MbNode) {
  node.children.forEach((child) => {
    const vslotShorthandName = getVslotShorthandName(child);
    if (vslotShorthandName && child.name !== 'template') {
      const newSlotNode = parseHTML('<template></template>')[0] as MbNode;
 
      const vslotShorthand = `#${vslotShorthandName}`;
 
      newSlotNode.attribs[vslotShorthand] = '';
      if (child.attribs) {
        delete child.attribs[vslotShorthand];
      }
 
      newSlotNode.parent = node;
      child.parent = newSlotNode;
 
      newSlotNode.children = newSlotNode.children ?? [];
      newSlotNode.children.push(child);
 
      // replace the shifted old child node with the new slot node
      node.children.forEach((childNode, idx) => {
        if (childNode === child) {
          node.children[idx] = newSlotNode;
        }
      });
    }
  });
}
 
/*
 * Transforms deprecated vue slot syntax (slot="test") into the updated Vue slot shorthand syntax (#test).
 */
export function transformOldSlotSyntax(node: MbNode) {
  node.children.forEach((child) => {
    if (child.attribs && _.has(child.attribs, 'slot')) {
      const vslotShorthandName = `#${child.attribs.slot}`;
      child.attribs[vslotShorthandName] = '';
      delete child.attribs.slot;
    }
  });
}