# 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
    688x
    8x
    8x

    8x

    8x
    682x
    498x

    184x
    184x
    184x
    90x

    94x

    8x
    582x
    516x
    516x
    12x

    12x

    12x
    12x
    12x

    12x
    12x

    12x
    12x

    12x
    40x
    12x

    8x
    582x
    518x
    26x
    26x
    26x

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