tools/vue/primitives/src/primitive/__test__/Primitive.bench.ts

import { bench, describe } from 'vitest';
import { Comment, cloneVNode, createVNode, h } from 'vue';
import { Primitive, Slot } from '..';

// -- Attribute sets of increasing size --

const attrs1 = { class: 'a' };

const attrs5 = { class: 'a', id: 'b', role: 'button', tabindex: '0', title: 'tip' };

const attrs15 = {
  class: 'a',
  id: 'b',
  style: { color: 'red' },
  onClick: () => {},
  role: 'button',
  tabindex: '0',
  title: 'tip',
  'data-a': '1',
  'data-b': '2',
  'data-c': '3',
  'data-d': '4',
  'data-e': '5',
  'data-f': '6',
  'data-g': '7',
  'data-h': '8',
};

const defaultSlot = { default: () => [h('span', 'content')] };
const noop = () => {};

// ---- Baselines (raw Vue calls) ----

describe('baseline: raw h()', () => {
  bench('h() — 1 attr', () => {
    h('div', attrs1, defaultSlot);
  });

  bench('h() — 5 attrs', () => {
    h('div', attrs5, defaultSlot);
  });

  bench('h() — 15 attrs', () => {
    h('div', attrs15, defaultSlot);
  });
});

describe('baseline: raw cloneVNode()', () => {
  const child = h('div', 'content');

  bench('cloneVNode — 1 attr', () => {
    cloneVNode(child, attrs1, true);
  });

  bench('cloneVNode — 5 attrs', () => {
    cloneVNode(child, attrs5, true);
  });

  bench('cloneVNode — 15 attrs', () => {
    cloneVNode(child, attrs15, true);
  });
});

// ---- Primitive overhead vs raw h() ----

describe('Primitive vs h()', () => {
  bench('h("div") — baseline', () => {
    h('div', attrs5, defaultSlot);
  });

  bench('Primitive({ as: "div" })', () => {
    Primitive({ as: 'div' }, { attrs: attrs5, slots: defaultSlot, emit: noop });
  });

  bench('Primitive({ as: "template" }) — Slot mode', () => {
    Primitive({ as: 'template' }, { attrs: attrs5, slots: defaultSlot, emit: noop });
  });
});

// ---- Slot scaling by attribute count ----

describe('Slot — scaling by attrs', () => {
  bench('1 attr', () => {
    Slot({} as never, { attrs: attrs1, slots: defaultSlot, emit: noop });
  });

  bench('5 attrs', () => {
    Slot({} as never, { attrs: attrs5, slots: defaultSlot, emit: noop });
  });

  bench('15 attrs (mixed types)', () => {
    Slot({} as never, { attrs: attrs15, slots: defaultSlot, emit: noop });
  });
});

// ---- Slot edge cases ----

describe('Slot — edge cases', () => {
  bench('child with comments to skip', () => {
    Slot({} as never, {
      attrs: attrs5,
      slots: {
        default: () => [
          createVNode(Comment, null, 'skip'),
          createVNode(Comment, null, 'skip'),
          h('span', 'content'),
        ],
      },
      emit: noop,
    });
  });

  bench('no default slot', () => {
    Slot({} as never, { attrs: attrs5, slots: {}, emit: noop });
  });
});