# 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
    689x
    9x
    9x

    9x

    9x
    1742x
    1320x

    422x
    422x
    422x
    308x

    114x

    9x
    704x
    973x
    973x
    17x

    17x

    17x
    17x
    17x

    17x
    17x

    17x
    17x

    17x
    49x
    17x

    9x
    704x
    974x
    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;
        }
      });
    }