robonen/tools
1
0
Fork 0
mirror of https://github.com/robonen/tools.git synced 2026-03-20 10:54:44 +00:00
Code Releases Activity

refactor(packages/vue): add counter on mounted for useRenderCount

Browse Source
This commit is contained in:
Andrew Robonen
2024-10-20 06:46:19 +07:00
parent 8989701303
commit 0667f15f0c
2 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/vue/src/composables/useRenderCount/index.test.ts
View File

@@ -19,20 +19,20 @@ describe('useRenderCount', () => {
const component = mount(ComponentStub); const component = mount(ComponentStub);
// Initial render // Initial render
expect(component.vm.count).toBe(0); expect(component.vm.count).toBe(1);
component.vm.hiddenCount = 1; component.vm.hiddenCount = 1;
await nextTick(); await nextTick();
// Will not trigger a render // Will not trigger a render
expect(component.vm.count).toBe(0); expect(component.vm.count).toBe(1);
expect(component.text()).toBe('0'); expect(component.text()).toBe('0');
component.vm.visibleCount++; component.vm.visibleCount++;
await nextTick(); await nextTick();
// Will trigger a render // Will trigger a render
expect(component.vm.count).toBe(1); expect(component.vm.count).toBe(2);
expect(component.text()).toBe('1'); expect(component.text()).toBe('1');
component.vm.visibleCount++; component.vm.visibleCount++;
@@ -40,7 +40,7 @@ describe('useRenderCount', () => {
await nextTick(); await nextTick();
// Will trigger a single render for both updates // Will trigger a single render for both updates
expect(component.vm.count).toBe(2); expect(component.vm.count).toBe(3);
expect(component.text()).toBe('3'); expect(component.text()).toBe('3');
}); });
@@ -50,7 +50,7 @@ describe('useRenderCount', () => {
const count = useRenderCount(instance); const count = useRenderCount(instance);
// Initial render // Initial render (should be zero because the component has already rendered on mount)
expect(count.value).toBe(0); expect(count.value).toBe(0);
component.vm.hiddenCount = 1; component.vm.hiddenCount = 1;

8
packages/vue/src/composables/useRenderCount/index.ts
View File

@@ -1,6 +1,6 @@
import { onUpdated, readonly, type ComponentInternalInstance } from 'vue'; import { onMounted, onUpdated, readonly, type ComponentInternalInstance } from 'vue';
import { useCounter } from '../useCounter'; import { useCounter } from '../useCounter';
import { getLifeCycleTarger } from '../../utils'; import { getLifeCycleTarger } from '../..';
/** /**
* @name useRenderCount * @name useRenderCount
@@ -18,8 +18,10 @@ import { getLifeCycleTarger } from '../../utils';
*/ */
export function useRenderCount(instance?: ComponentInternalInstance) { export function useRenderCount(instance?: ComponentInternalInstance) {
const { count, increment } = useCounter(0); const { count, increment } = useCounter(0);
const target = getLifeCycleTarger(instance);
onUpdated(increment, getLifeCycleTarger(instance)); onMounted(increment, target);
onUpdated(increment, target);
return readonly(count); return readonly(count);
} }