feat(web/vue): add useStorage and useStorageAsync, separate all composables by categories

web/vue/src/composables/component/useRenderCount/index.test.ts

@@ -0,0 +1,75 @@
+import { describe, expect, it } from 'vitest';
+import { defineComponent, nextTick, ref } from 'vue';
+import { mount } from '@vue/test-utils'
+import { useRenderCount } from '.';
+
+const ComponentStub = defineComponent({
+    setup() {
+        const count = useRenderCount();
+        const visibleCount = ref(0);
+        const hiddenCount = ref(0);
+
+        return { count, visibleCount, hiddenCount };
+    },
+    template: `<div>{{ visibleCount }}</div>`,
+});
+
+describe('useRenderCount', () => {
+    it('return the number of times the component has been rendered', async () => {
+        const component = mount(ComponentStub);
+        
+        // Initial render
+        expect(component.vm.count).toBe(1);
+
+        component.vm.hiddenCount = 1;
+        await nextTick();
+        
+        // Will not trigger a render
+        expect(component.vm.count).toBe(1);
+        expect(component.text()).toBe('0');
+
+        component.vm.visibleCount++;
+        await nextTick();
+
+        // Will trigger a render
+        expect(component.vm.count).toBe(2);
+        expect(component.text()).toBe('1');
+
+        component.vm.visibleCount++;
+        component.vm.visibleCount++;
+        await nextTick();
+
+        // Will trigger a single render for both updates
+        expect(component.vm.count).toBe(3);
+        expect(component.text()).toBe('3');
+    });
+
+    it('can be used with a specific component instance', async () => {
+        const component = mount(ComponentStub);
+        const instance = component.vm.$;
+
+        const count = useRenderCount(instance);
+
+        // Initial render (should be zero because the component has already rendered on mount)
+        expect(count.value).toBe(0);
+
+        component.vm.hiddenCount = 1;
+        await nextTick();
+        
+        // Will not trigger a render
+        expect(count.value).toBe(0);
+
+        component.vm.visibleCount++;
+        await nextTick();
+
+        // Will trigger a render
+        expect(count.value).toBe(1);
+
+        component.vm.visibleCount++;
+        component.vm.visibleCount++;
+        await nextTick();
+
+        // Will trigger a single render for both updates
+        expect(count.value).toBe(2);
+    });
+});

web/vue/src/composables/component/useRenderCount/index.ts

@@ -0,0 +1,29 @@
+import { onMounted, onUpdated, readonly, type ComponentInternalInstance } from 'vue';
+import { useCounter } from '@/composables/state/useCounter';
+import { getLifeCycleTarger } from '@/utils';
+
+/**
+ * @name useRenderCount
+ * @category Component
+ * @description Returns the number of times the component has been rendered into the DOM
+ * 
+ * @param {ComponentInternalInstance} [instance] The component instance to track the render count for
+ * @returns {Readonly<Ref<number>>} The number of times the component has been rendered
+ * 
+ * @example
+ * const count = useRenderCount();
+ * 
+ * @example
+ * const count = useRenderCount(getCurrentInstance());
+ * 
+ * @since 0.0.1
+ */
+export function useRenderCount(instance?: ComponentInternalInstance) {
+    const { count, increment } = useCounter(0);
+    const target = getLifeCycleTarger(instance);
+
+    onMounted(increment, target);
+    onUpdated(increment, target);
+
+    return readonly(count);
+}