[Composable] Vue3 Composable to improve performance

[craigrileyuk]

Most of the documentation and functionality is based around the React way of doing things. That is, whenever something changes, the entire template function is re-run again and all functions are re-executed, including tv() and the tailwind-merge that backs it up.

As a one-off, it's fine, but if you have dozens of components running lots of instances, it can add up.

Vue3 has a pretty granular reactivity system so functions are only re-run if a reactive dependency changes.

For the standard tv function, this is simple as:

const button = tv({
  base: 'font-semibold text-white text-sm py-1 px-4 rounded-full active:opacity-80',
  variants: {
    color: {
      primary: 'bg-blue-500 hover:bg-blue-700',
      secondary: 'bg-purple-500 hover:bg-purple-700',
      success: 'bg-green-500 hover:bg-green-700'
    }
  }
});
 
const className = computed(() => button({ color: props.color }));

and then implement it using:

<div :class="className">Some div</div>

But if you're using slots, this approach won't work as the tv function now returns other functions that won't be reactive.

I was messing around with this and came up with the following solution:

const useTvWithSlots = (source) => {
    const _source = computed(source);
    const _slots = computed(() =>
        Array.isArray(_source.value) ? _source.value[0] : _source.value,
    );
    const _overrides = computed(() =>
        Array.isArray(_source.value) ? _source.value[1] : null,
    );
    return Object.keys(_slots.value).reduce((acc, curr) => {
        if (_overrides.value?.[curr]) {
            acc[curr] = computed(() =>
                _slots.value[curr](_overrides.value[curr]),
            );
        } else {
            acc[curr] = computed(() => _slots.value[curr]());
        }
        return acc;
    }, {});
};

Which you can use like so:

const { base, loader } = useTvWithSlots(() => [
    variants({
        size: props.size,
        color: props.color,
        disabled: props.disabled,
    }),
    {
        loader: {
            disabled: loaderDisabled.value,
        },
    },
]);

where the first argument is your call to the main function and the second (optional) argument is any needed slot overrides.

Hope this helps someone out there.