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

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

@@ -0,0 +1,100 @@
+import { describe, it, expect } from 'vitest';
+import { useRenderInfo } from '.';
+import { defineComponent, nextTick, ref } from 'vue';
+import { mount } from '@vue/test-utils';
+
+const NamedComponentStub = defineComponent({
+  name: 'ComponentStub',
+  setup() {
+      const info = useRenderInfo();
+      const visibleCount = ref(0);
+      const hiddenCount = ref(0);
+
+      return { info, visibleCount, hiddenCount };
+  },
+  template: `<div>{{ visibleCount }}</div>`,
+});
+
+const UnnamedComponentStub = defineComponent({
+  setup() {
+      const info = useRenderInfo();
+      const visibleCount = ref(0);
+      const hiddenCount = ref(0);
+
+      return { info, visibleCount, hiddenCount };
+  },
+  template: `<div>{{ visibleCount }}</div>`,
+});
+
+describe('useRenderInfo', () => {
+  it('return uid if component name is not available', async () => {
+    const wrapper = mount(UnnamedComponentStub);
+
+    expect(wrapper.vm.info.component).toBe(wrapper.vm.$.uid);
+  });
+
+  it('return render info for the given instance', async () => {
+    const wrapper = mount(NamedComponentStub);
+
+    // Initial render
+    expect(wrapper.vm.info.component).toBe('ComponentStub');
+    expect(wrapper.vm.info.count.value).toBe(1);
+    expect(wrapper.vm.info.duration.value).toBeGreaterThan(0);
+    expect(wrapper.vm.info.lastRendered).toBeGreaterThan(0);
+
+    let lastRendered = wrapper.vm.info.lastRendered;
+    let duration = wrapper.vm.info.duration.value;
+
+    // Will not trigger a render
+    wrapper.vm.hiddenCount++;
+    await nextTick();
+
+    expect(wrapper.vm.info.component).toBe('ComponentStub');
+    expect(wrapper.vm.info.count.value).toBe(1);
+    expect(wrapper.vm.info.duration.value).toBe(duration);
+    expect(wrapper.vm.info.lastRendered).toBe(lastRendered);
+
+    // Will trigger a render
+    wrapper.vm.visibleCount++;
+    await nextTick();
+
+    expect(wrapper.vm.info.component).toBe('ComponentStub');
+    expect(wrapper.vm.info.count.value).toBe(2);
+    expect(wrapper.vm.info.duration.value).not.toBe(duration);
+    expect(wrapper.vm.info.lastRendered).toBeGreaterThan(0);
+  });
+
+  it('can be used with a specific component instance', async () => {
+    const wrapper = mount(NamedComponentStub);
+    const instance = wrapper.vm.$;
+
+    const info = useRenderInfo(instance);
+
+    // Initial render (should be zero because the component has already rendered on mount)
+    expect(info.component).toBe('ComponentStub');
+    expect(info.count.value).toBe(0);
+    expect(info.duration.value).toBe(0);
+    expect(info.lastRendered).toBeGreaterThan(0);
+
+    let lastRendered = info.lastRendered;
+    let duration = info.duration.value;
+
+    // Will not trigger a render
+    wrapper.vm.hiddenCount++;
+    await nextTick();
+
+    expect(info.component).toBe('ComponentStub');
+    expect(info.count.value).toBe(0);
+    expect(info.duration.value).toBe(duration);
+    expect(info.lastRendered).toBe(lastRendered);
+
+    // Will trigger a render
+    wrapper.vm.visibleCount++;
+    await nextTick();
+
+    expect(info.component).toBe('ComponentStub');
+    expect(info.count.value).toBe(1);
+    expect(info.duration.value).not.toBe(duration);
+    expect(info.lastRendered).toBeGreaterThan(0);
+  });
+});

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

@@ -0,0 +1,45 @@
+import { timestamp } from '@robonen/stdlib';
+import { onBeforeMount, onBeforeUpdate, onMounted, onUpdated, readonly, ref, type ComponentInternalInstance } from 'vue';
+import { useRenderCount } from '../useRenderCount';
+import { getLifeCycleTarger } from '@/utils';
+
+/**
+ * @name useRenderInfo
+ * @category Component
+ * @description Returns information about the component's render count and the last time it was rendered
+ * 
+ * @param {ComponentInternalInstance} [instance] The component instance to track the render count for
+ * 
+ * 
+ * @example
+ * const { component, count, duration, lastRendered } = useRenderInfo();
+ * 
+ * @example
+ * const { component, count, duration, lastRendered } = useRenderInfo(getCurrentInstance());
+ * 
+ * @since 0.0.1
+ */
+export function useRenderInfo(instance?: ComponentInternalInstance) {
+    const target = getLifeCycleTarger(instance);
+    const duration = ref(0);
+    let renderStartTime = 0;
+
+    const startMark = () => renderStartTime = performance.now();
+    const endMark = () => {
+        duration.value = Math.max(performance.now() - renderStartTime, 0);
+        renderStartTime = 0;
+    };
+
+    onBeforeMount(startMark, target);
+    onMounted(endMark, target);
+
+    onBeforeUpdate(startMark, target);
+    onUpdated(endMark, target);
+
+    return {
+        component: target?.type.name ?? target?.uid,
+        count: useRenderCount(instance),
+        duration: readonly(duration),
+        lastRendered: timestamp(),
+    };
+}