# All files / src/html vueSlotSyntaxProcessor.ts

100% Statements 35/35
92.85% Branches 13/14
100% Functions 7/7
100% Lines 34/34

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
    63
    64
    65
    66
    67
    687x
    7x
    7x

    7x

    7x
    1622x
    1240x

    382x
    382x
    382x
    268x

    114x

    7x
    648x
    853x
    853x
    17x

    17x

    17x
    17x
    17x

    17x
    17x

    17x
    17x

    17x
    49x
    17x

    7x
    648x
    854x
    24x
    24x
    24x

     import has from 'lodash/has';
    import find from 'lodash/find';
    import { MbNode, NodeOrText, parseHTML } from '../utils/node';

    const _ = {
      has,
      find,
    };

    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;
        }
      });
    }